html, body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif; font-weight:500;
    margin: 0;
    padding: 0;
    color: #030303;
    overflow-x: hidden;
}
button, input, optgroup, select, textarea { font-family: 'Roboto', sans-serif; font-weight:400; }
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {  font-family: 'Roboto', sans-serif; font-weight:500; }

    
.auth-wrapper {
    display: flex; flex-wrap: wrap; width: 100%; min-height: 100%;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1.00) 0%, rgba(120,0,0,1) 100%); 
}

 
.auth-cover {
    display: flex; flex-direction: column;
    min-height: 1px; width: 50%; height: 100vh;
    align-items: center; justify-content: center;
    color: #ffffff;
    padding: 60px; 
    position: relative; 
    animation: 1s ease-out 0s 1 slideAuthCover;
}

@keyframes slideAuthCover {
  0% {  transform: translateX(-300px); opacity: 0;  }
  100% { transform: translateX(0); opacity: 1; }
}

.auth-forms {
    display: flex; flex-direction: column;
    min-height: 1px; width: 50%; height: 100vh;
    align-items: center; justify-content: center;
    overflow: auto;
    box-sizing: border-box;
    padding: 60px ;
    background-color: #fff;
    box-shadow: -2px 0 22px rgba(0,0,0,.12); 

    animation: 1s ease-out 0s 1 slideAuthForm;
}

@keyframes slideAuthForm {
  0% {  transform: translateX(300px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.auth-bottom {
    position: absolute; bottom: 60px; left: 60px; right: 60px;  opacity: 0.4; font-weight: 300;  z-index: 10;  
    -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
}
.auth-bottom:hover { opacity: 1; }

.auth-cover-top { position: absolute; top: 60px; left: 60px; display: inline-block; }

.auth-cover-title { text-align: left; display: block; width: 100%; }
.auth-cover-title .title { font-size: 32px; margin-bottom: 10px; line-height: 1.2;  }
.auth-cover-title .subtitle { font-size: 24px; opacity: 0.7; font-weight: 300; line-height: 1.25; }

.auth-cover-background { 
    opacity: 0.1;
    position: absolute; bottom: 0; top: 0; left: 0; right: 0; overflow: hidden;  
    background-image: url('../images/logo-pmgroup-white-outline.svg');
    background-repeat: no-repeat;
    background-position: bottom left; /* fixed*/  
    background-size: cover;

}

.auth-logo { display: block; width: 300px;   }
.auth-logo img { width: 100%; height: auto; }

.forms-login { text-align: left; display: block; width: 100%; max-width: 60%; }

.inline { margin-bottom: 20px; }
.inline .label { display: block; margin-bottom: 4px;  color: #525c69;  }
.inline .inline-control {
    border: 2px solid #d1d4d8; border-radius: 3px; color: #333;
    font-size: 19px;
    line-height: 26px;
    padding: 10px 17px 10px 17px;
    transition: border .2s ease; width: 100%; background: transparent; -webkit-appearance: none;
}
.inline .inline-control:focus { border-color: #ffb69a; outline: 0; }
.inline-actions { padding-top: 20px;    }
.inline-actions .button { color: #757d87; margin-right: 15px; min-width: 120px; font-size: 17px; cursor: pointer; border: none;  height: 48px; border-radius: 3px; overflow: hidden; padding: 0 30px; }
.inline-actions .button:last-of-type { margin-right: 0; }
.inline-actions .button-submit { background-color: #202020; color: #fff; border-color: #9dcf00;   }


.auth-date-time { /* border-bottom: 1px solid rgba(255,255,255,0.70); margin-bottom: 20px; padding-bottom: 10px; */ }
.auth-date-time #Date {  line-height: 1; margin-bottom: 15px; font-size: 14px; }
.time-wrapper { margin: 0; padding: 0; list-style: none none; list-style-position: outside;  }
.time-wrapper li { display: inline-block; font-size: 46px; float: left; }
.time-wrapper li.time-separator {
    font-size: 42px; 
    position:relative;
     padding-left:1px; padding-right:1px; 
     -moz-animation:timeMove 1s ease infinite;  -webkit-animation:timeMove 1s ease infinite;
}
@-webkit-keyframes timeMove  { 0% {opacity:1.0; } 50% {opacity:0;   } 100% {opacity:1.0;  }    }
@-moz-keyframes timeMove  { 0% {opacity:1.0; } 50% {opacity:0;  } 100% {opacity:1.0;   }     }

.msg {
    align-items: center;
    border: 1px solid transparent;
    -moz-border-radius: 4px; border-radius: 4px; box-sizing: border-box; 
    display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 
    margin: 20px 0px 20px 0; padding: 8px 12px;
    font-size: 14px; font-weight: 300; 
}
.msg strong { font-weight: 400; }
.msg.msg-red { background-color: #fce8e6;  }
.msg-text { box-flex: 1; flex-grow: 1;}
.msg-text {}
.msg-btn {
    font-weight: 500;
    -moz-border-radius: 3px; border-radius: 3px;
    box-sizing: border-box; cursor: pointer;
    display: inline-block; padding: 4px 12px;
    color: #c5221f; margin-left: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.msg-btn.danger { background-color:  #c5221f;  color: #fff; }
.msg-icon {
    overflow: visible; vertical-align: top;
    fill: #c5221f; -moz-box-flex: 0 0 auto; flex: 0 0 auto; margin-right: 10px;
}


/* ▬▬▬▬ι════════════════ﺤ   ●▬▬▬▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬▬▬▬▬●   -═══════════════ι▬▬▬▬ */
/* ▬▬▬▬ι═══════════════ﺤ       B R E A K P O I N T S       -═══════════════ι▬▬▬▬ */
/* ▬▬▬▬ι════════════════ﺤ   ●▬▬▬▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬▬▬▬▬●   -═══════════════ι▬▬▬▬ */


@media (max-width:767px) {
    
    .auth-wrapper { min-height:inherit; }
    .auth-cover, 
    .auth-forms { display: block; padding: 20px; width: 100%; height: auto; box-shadow: none; animation: none; }
    .auth-logo { display: inline-block; width: 180px; }
    .forms-login { max-width: 100%; }
    .auth-cover-top { position: static; display: block; padding-bottom: 120px; }
    .auth-cover-title { display: none; }
    .auth-cover-title .title { font-size: 18px; margin-bottom: 5px;  }
    .auth-cover-title .subtitle { font-size: 14px; }
    .auth-bottom { display: none; }
    
    .inline .label { font-size: 15px; }
    .inline .inline-control { border-width: 1px; border-color: #A1A1A1;  font-size: 16px; line-height: 26px; padding: 8px 12px 8px 12px; }
    .inline-actions { padding-top: 5px; }
    .inline-actions .button { min-width: 80px; font-size: 16px; }
    .inline-actions .button { height: 44px; padding: 0 20px; }
    
    
} /* End of @media ----------------------------------------------------------------------------- */

/* https://css-tricks.com/snippets/css/orientation-lock/ */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { } /* End of @media ----------------------------------------------------------------------------- */

/* SM - SECONDARY */
/* Old small -screen devices (tablets, 575px and up) : KEEP IT AFTER :  @media (max-width:767px) */
@media (max-width:575px) {}
/* @media ==================================================================================== */
@media (max-width:575px) and (orientation:landscape) {}
/* @media ==================================================================================== */
/* --------------------------------------------------------------------------------------------- */


/* MD */
/* Medium devices (tablets, 768px and up) */
@media (min-width:768px) and (max-width:991px) {
	.auth-cover, 
    .auth-forms { padding: 40px; }
    .auth-bottom { bottom: 40px; left: 40px; right: 40px;  font-size: 12px; }
    .forms-login { max-width: 100%; }
    .auth-cover-title .title { font-size: 26px; margin-bottom: 5px;  }
    .auth-cover-title .subtitle { font-size: 16px; }
	
} /* End of @media ----------------------------------------------------------------------------- */


/* The following codes are specifically for iPad (portrait and landscape): */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {} /* @media iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}
/* @media iPad Portrait  ==================================================================================== */

/* LG */
/* Large devices (desktops, 992px and up) */
@media (min-width:992px) and (max-width:1247px) {
    .auth-cover, 
    .auth-forms { padding: 40px; }
    .auth-bottom { bottom: 40px; left: 40px; right: 40px;  font-size: 12px; }
    .forms-login { max-width: 100%; }
    .auth-cover-title .title { font-size: 26px; margin-bottom: 5px;  }
    .auth-cover-title .subtitle { font-size: 16px; }
    
    
} /* End of @media ----------------------------------------------------------------------------- */


/* ! USE BELOW ONLY ON NON-FULL-WIDTH SITES   !   USE BELOW ONLY ON NON-FULL-WIDTH SITES   !   USE BELOW ONLY ON NON-FULL-WIDTH SITES */
@media (min-width:1248px) { 
     
} /* End of @media ----------------------------------------------------------------------------- */
/* ! USE BELOW ONLY ON NON-FULL-WIDTH SITES   !   USE BELOW ONLY ON NON-FULL-WIDTH SITES   !   USE BELOW ONLY ON NON-FULL-WIDTH SITES */


/* ! USE BELOW ONLY ON FULL-WIDTH SITES */
/* XL: 1280x1024 */
/* Extra large devices (large desktops, 1280 and up) */
@media (min-width:1248px) and (max-width: 1333px) {
    .forms-login { max-width: 80%; }
} /* End of @media ----------------------------------------------------------------------------- */

/* 2XL: 1366 x 768 */
/* Extra large devices (large desktops, 1366px and up) */
@media (min-width:1334px) and (max-width: 1407px) {
   .forms-login { max-width: 80%; }
} /* End of @media ----------------------------------------------------------------------------- */


/* 3XL: 1440 x 900 */
/* Extra large devices (large desktops, 1440 and up) */
@media (min-width:1408px) and (max-width: 1879px) {
  
} /* End of @media ----------------------------------------------------------------------------- */


/* SPECIAL OCCASIONS ONLY  */
@media (min-width:1880px) { /* 1920 x 1080 and up  */
    
} /* End of @media ----------------------------------------------------------------------------- */