@font-face {
  font-family: 'NoirPro-Light';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/NoirPro-Light.ttf); }
@font-face {
  font-family: 'NoirPro-Regular';
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/NoirPro-Regular.ttf); }
@font-face {
  font-family: 'NoirPro-Italic';
  font-style: italic;
  font-weight: normal;
  src: url(../fonts/NoirPro-Italic.ttf); }
@font-face {
  font-family: 'NoirPro-Medium';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/NoirPro-Medium.ttf); }
@font-face {
  font-family: 'NoirPro-MediumItalic';
  font-style: italic;
  font-weight: 500;
  src: url(../fonts/NoirPro-MediumItalic.ttf); }
body {
  background: #F9FAFB;
  font-family: 'NoirPro-Regular'; }

.btnCancel, .btnLogout {
  padding: 16px 42px;
  text-transform: uppercase; }

.btn1, .btn2 {
  padding: 5px 30px;
  text-transform: uppercase;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
  .btn1:hover, .btn2:hover {
    color: #ffffff;
    opacity: 0.8; }

.btn1 {
  background: #D7B46A;
  color: #ffffff;
  border: 1px solid #D7B46A; }

.btnTheme {
  background: #D7B46A;
  border-radius: 2px;
  color: #ffffff;
  border: 2px solid #D7B46A; }
  .btnTheme:hover {
    opacity: 0.8;
    color: #ffffff;
    transition: 0.3s; }

.btnTheme1 {
  background: transparent;
  border-radius: 2px;
  color: #D7B46A;
  border: 2px solid #D7B46A; }
  .btnTheme1:hover {
    background: #D7B46A;
    color: #ffffff;
    transition: 0.3s; }

.btn2 {
  background: #ffffff;
  color: #4a4a4a;
  border: 1px solid #4a4a4a; }
  .btn2:hover {
    color: #4a4a4a; }

.btnCancel {
  background: transparent;
  color: #5c5c61;
  border: 1px solid #5c5c61; }
  .btnCancel:hover {
    color: #D7B46A; }

.btnLogout {
  background: #D7B46A;
  color: #ffffff;
  border: 1px solid #D7B46A; }
  .btnLogout:hover {
    color: #ffffff; }

.btn-remove {
  background: transparent; }

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
  outline: thin dotted;
  outline: 0px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

.btn.active, .btn:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.125); }

input[type="text"], input[type="password"], textarea, select {
  outline: none; }

#overlay {
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px; }

#closeMenu {
  display: none;
  position: absolute;
  right: 10px;
  top: 15px; }
  #closeMenu:hover {
    cursor: pointer; }

#menuResponsive {
  display: none; }

.pageContainer {
  display: flex; }
  .pageContainer .pageBlock {
    height: 100vh;
    width: 100%; }
  .pageContainer .color1 {
    background: url(../images/logiBg.jpg) no-repeat;
    background-size: cover; }
  .pageContainer .color2 {
    background: #181822; }

.formContainer {
  background: #ddd;
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex; }
  .formContainer .formWrap {
    position: relative;
    width: 100%;
    padding: 30px 20px;
    height: 70vh; }
    .formContainer .formWrap .formW {
      width: 60%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .formContainer .formWrap .footerW {
      position: absolute;
      bottom: 20px; }
      .formContainer .formWrap .footerW a {
        color: #D7B46A; }
  .formContainer .formBg {
    background: #fff;
    box-shadow: 8px 4px 29px -5px #000; }
  .formContainer .contentBg {
    background: #ddd; }
  .formContainer .formTheme .tagline {
    margin: 0px;
    font-weight: bold;
    color: #777; }
  .formContainer .formTheme h1 {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 30px; }
  .formContainer .formTheme .field {
    position: relative; }
    .formContainer .formTheme .field .form-control {
      height: 40px;
      padding-left: 42px; }
    .formContainer .formTheme .field .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
      color: #6c757d; }
  .formContainer .contentBg {
    background: url(../images/bn.jpg) no-repeat left;
    background-size: cover;
    position: relative; }
    .formContainer .contentBg .formatDate {
      position: absolute;
      bottom: 20px;
      color: #fff; }
    .formContainer .contentBg #time {
      font-size: 50px;
      font-weight: bold; }
    .formContainer .contentBg #date {
      font-size: 20px;
      margin-top: -12px; }

@media screen and (max-width: 768px) {
  .pageContainer {
    display: none; }

  .formContainer {
    top: auto;
    left: 0px;
    transform: translate(0%, 0%);
    width: 100%;
    flex-direction: column; }
    .formContainer .formBg {
      order: 2;
      box-shadow: 0px 0px 0px 0px #000; }
    .formContainer .contentBg {
      display: none }
      .formContainer .contentBg .formatDate {
        position: static; }
    .formContainer .formWrap {
      position: relative;
      width: 100%;
      padding: 30px 20px;
      height: auto; }
      .formContainer .formWrap .formW {
        width: 100%;
        position: relative;
        top: 18px;
        left: auto;
        transform: translate(0%, 0%); }
      .formContainer .formWrap .footerW {
        position: relative;
        bottom: auto;
        margin-top: 20px; } }

/*# sourceMappingURL=main.css.map */