body {
     font-family: 'Open Sans', sans-serif;
     color: #edf2f4;
 }
 .listbox-right {
    left: auto;
    right: 0;
  }
  
 .img-fluid {
     max-width: 100% !important;
     height: auto;
 }

 .form-control:focus {
     box-shadow: none;
 }

 .login-box .alert {
     padding: 15.5px 20px;
     font-size: 13px;
     border: none !important;
     border-radius: 3px;
     margin-bottom: 25px;
 }

 .login-box .alert-dismissible .btn-close {
     padding: 18.5px 19px;
     background-size: 8px;
 }

 .login-box .alert-dismissible .btn-close:focus,
 .login-box .alert-dismissible .btn-close:active {
     box-shadow: none;
 }

 .login-box .password-indicator {
     position: absolute;
     right: 15px;
     top: 17px;
     cursor: pointer;
     visibility: hidden;
     opacity: 0;
     transition: visibility 0s linear 300ms, opacity 500ms;
     font-size: 17px;
     color: #999;
 }

 .login-box .password-wrapper:hover .password-indicator {
     visibility: visible;
     opacity: 1;
     transition: visibility 0s linear 0s, opacity 500ms;
     font-size: 17px;
     color: #555;
 }

 .login-box .login-popover {
     font-size: 14px;
     color: #777;
     cursor: help;
 }

 .login-box .login-popover-abs {
     position: absolute;
     right: 15px;
     top: 15px;
 }

 .popover {
     border: 1px solid #ebeef5 !important;
     box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }

 .popover-header {
     box-shadow: none;
     border: 0px;
     background: #fff;
     color: #555;
     font-size: 15px;
     font-family: 'Jost', sans-serif;
     padding-bottom: 5px;
 }

 .popover-body {
     padding: 5px 10px 10px 16px;
     color: #777;
     font-size: 13px;
 }

 .login-box .form-group label.error {
     font-size: 13px;
     text-align: left;
     color: #535353;
     width: 100%;
 }



 /** Login 30 start **/
 .login-30 .login-inner-form .col-pad-0 {
     padding: 0;
 }

 .login-30 .bg-img {
     background: url(../img/itam-images.webp) top left repeat;
     background-size: cover;
     top: 0;
     bottom: 0;
     min-height: 100vh;
     text-align: right;
     z-index: 999;
     opacity: 1;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 30px 50px 30px 40px;
 }

 .login-30 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
     font-family: 'Jost', sans-serif;
 }

 .login-30 .form-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 30px;

 }

 .login-30 .login-inner-form {
     max-width: 500px;
     width: 100%;
 }

 .login-30 .logo {
     top: 40px;
     position: absolute;
     right: 45px;
 }

 .login-30 .logo img {
     height: 30px;
 }

 .login-30 .login-inner-form p {
     color: #535353;
     margin-bottom: 0;
     font-size: 16px;
 }

 .login-30 .login-inner-form p a {
     color: #535353;
     font-weight: 500;
     margin-left: 4px;
 }

 .login-30 .login-inner-form img {
     margin-bottom: 15px;
     height: 30px;
 }

 .login-30 .login-inner-form h1 {
     font-size: 30px;
     color: #ffc801;
 }

 .login-30 .login-inner-form h3 {
     margin: 0 0 35px;
     font-size: 25px;
     font-weight: 400;
     color: #040404;
 }

 .login-30 label {
     color: #535353;
     font-size: 16px;
     margin-bottom: 5px;
 }

 .login-30 .login-inner-form .form-group {
     margin-bottom: 25px;
 }

 .login-30 .login-inner-form .form-control {
     width: 100%;
     padding: 10px 20px;
     font-size: 16px;
     border: 1px solid #d6d6d6;
     background: #fff;
     outline: none;
     color: #535353;
     border-radius: 0;
     height: 55px;
 }

 .login-30 .login-inner-form .input-text label {
     color: #535353;
     font-size: 14px;
     font-weight: 500;
     text-align: left;
 }

 .login-30 .login-inner-form .form-check {
     float: left;
     margin-bottom: 0;
 }

 .login-30 .login-inner-form .form-check a {
     color: #535353;
     float: right;
 }

 .login-30 .login-inner-form .checkbox {
     margin-bottom: 25px;
     font-size: 16px;
 }

 .login-30 .login-inner-form .form-check-input {
     position: absolute;
     margin-left: -24px;
 }

 .login-30 .login-inner-form .checkbox a {
     font-size: 16px;
     color: #535353;
     float: right;
 }

 .login-30 a {
     text-decoration: none;
 }

 .login-30 .form-section .form-check-label {
     padding-left: 5px;
     margin-bottom: 0;
     font-size: 16px;
     font-weight: 500;
     color: #535353;
 }

 .login-30 .form-check-input {
     width: 20px;
     height: 20px;
     margin-top: 0;
     vertical-align: top;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     position: absolute;
     border-radius: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
     border: 1px solid #afabab;
 }

 .login-30 .login-inner-form .terms {
     margin-left: 4px;
 }

 .login-30 .form-check-input:focus {
     border-color: #ffc801 !important;
     outline: 0;
     box-shadow: none;
 }

 .login-30 .form-check-input:checked {
     background-color: #ffc801 !important;
 }

 .login-30 .login-inner-form button:focus {
     outline: none;
     outline: 0 auto -webkit-focus-ring-color;
 }

 .login-30 .btn-theme {
     position: relative;
     display: inline-block;
     width: 100%;
     color: #ffffff;
     overflow: hidden;
     overflow: hidden;
     text-transform: capitalize;
     display: inline-block;
     transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     cursor: pointer;
     font-size: 17px;
     font-weight: 400;
     font-family: 'Jost', sans-serif;
     border-radius: 0;
     border: none;
 }

 .login-30 .btn-theme:hover {
     color: #fff;
 }

 .login-30 .btn-theme:hover::before {
     left: 0%;
     -webkit-transform: scale(1, 1);
     transform: scale(1, 1);
 }

 .login-30 .btn-theme:before {
     position: absolute;
     content: '';
     left: 96%;
     top: 0px;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 1;
     -webkit-transition: all 0.4s;
     -moz-transition: all 0.4s;
     -o-transition: all 0.4s;
     transition: all 0.4s;
     transform: skewX(-25deg);
 }

 .login-30 .btn-theme span {
     position: relative;
     z-index: 1;
 }

 .login-30 .informeson {
     color: #fff;
     max-width: 600px;
     margin: 0 0 0 auto;
     z-index: 20;
 }


 .login-30 .informeson h2 {
     margin: 0 0 30px 0;
     font-size: 60px;
 }

 .login-30 .informeson h2 span {
     transform: scale(0.9);
     display: inline-block;
 }

 .login-30 .informeson h2 span:last-child {
     animation: bopB 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
     color: #ffc801;
 }

 @keyframes bop {
     0% {
         transform: scale(0.9);
     }

     50%,
     100% {
         transform: scale(1);
     }
 }

 @keyframes bopB {
     0% {
         transform: scale(0.9);
     }

     80%,
     100% {
         transform: scale(1) rotateZ(-3deg);
     }
 }


 .login-30 .btn-section {
     margin-bottom: 30px;
 }

 .login-30 .informeson p {
     color: #fff;
     opacity: 0.9;
     line-height: 30px;
     margin-bottom: 40px;
 }

 .login-30 .social-box ul {
     margin: 0;
     padding: 0;
 }

 .login-30 .social-box .social-list li {
     font-size: 16px;
     display: inline-block;
 }

 .login-30 .social-box .social-list li a {
     margin: 0 0 3px 3px;
     font-size: 18px;
     width: 45px;
     height: 45px;
     border-radius: 0;
     display: inline-block;
     text-align: center;
     line-height: 45px;
 }

 .login-30 .social-box {
     bottom: 40px;
     position: absolute;
     right: 45px;
 }

 .login-30 .logo-2 {
     display: none;
 }

 .login-30 .btn-theme-2 {
     padding: 0 35px;
     display: inline-block;
     position: relative;
     z-index: 5;
     transition: .7s ease;
     background: transparent;
     line-height: 41px;
     font-size: 16px;
     font-weight: 400;
     font-family: 'Jost', sans-serif;
 }

 .login-30 .btn-theme-2:hover {
     color: #fff;
 }

 .btn-theme-2:before,
 .btn-theme-2:after {
     color: #fff;
 }

 .login-30 .btn-theme-2:before,
 .btn-theme-2:before {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     width: 0;
     height: 100%;
     z-index: -1;
     transition: all .7s ease;
 }

 .login-30 .btn-theme-2:after,
 .btn-theme-2:after {
     position: absolute;
     content: "";
     top: 0;
     right: 0;
     width: 0;
     height: 100%;
     z-index: -1;
     transition: all .7s ease;
 }

 .login-30 .btn-theme-2:hover:before,
 .btn-theme-2:hover:after {
     width: 50%;
 }

 .login-30 .btn-theme-2 {
     border: 2px solid #ffc801;
     color: #ffc801;
 }

 .login-30 .btn-theme-2:before,
 .btn-theme-2:after {
     background: #ffc801;
 }

 .login-30 .btn-theme-3 {
     color: #fff;
     text-align: center;
     border: 2px solid transparent;
     display: inline-block;
     padding: 0 35px;
     position: relative;
     z-index: 1;
     transition: all .7s ease;
     border-radius: 0;
     line-height: 41px;
     font-size: 16px;
     font-weight: 400;
     font-family: 'Jost', sans-serif;
 }

 .login-30 .btn-theme-3:before {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     visibility: hidden;
     transition: all .7s ease;
     z-index: -1;
     border-radius: 0;
 }

 .login-30 .btn-theme-3:after {
     position: absolute;
     content: "";
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     visibility: hidden;
     transition: all .7s ease;
     z-index: -1;
 }

 .login-30 .btn-theme-3:hover {
     background: transparent;
 }

 .login-30 .btn-theme-3:hover:before {
     width: 0;
     opacity: 1;
     visibility: visible;
 }

 .login-30 .btn-theme-3:hover:after {
     width: 0;
     opacity: 1;
     visibility: visible;
 }

 .login-30 .btn-theme-3 {
     background: #ffc801;
 }

 .login-30 .btn-theme-3:before {
     background: #ffc801;
 }

 .login-30 .btn-theme-3:after {
     background: #ffc801;
 }

 .login-30 .btn-theme-3:hover {
     color: #ffc801;
     border: 2px solid #ffc801;
 }

 .login-30 .btn-lg {
     padding: 0 50px;
     line-height: 55px;
 }

 .login-30 .btn {
     box-shadow: none !important;
 }

 .login-30 .btn-md {
     padding: 0 45px;
     line-height: 50px;
 }

 .login-30 .btn-primary {
     background: #ffc801;
 }

 .login-30 .btn-primary:disabled {
     background: #fae392;
     cursor: not-allowed;
 }

 .login-30 .btn-primary:before {
     background: #eab802;
 }

 /** Social media **/
 .login-30 .facebook-bg {
     background: #4867aa;
     color: #fff;
 }

 .login-30 .facebook-bg:hover {
     background: #3b589e;
     color: #fff;
 }

 .login-30 .twitter-bg {
     background: #33CCFF;
     color: #fff;
 }

 .login-30 .twitter-bg:hover {
     background: #56d7fe;
     color: #fff;
 }

 .login-30 .google-bg {
     background: #db4437;
     color: #fff;
 }

 .login-30 .google-bg:hover {
     background: #dc4e41;
     color: #fff;
 }

 .login-30 .linkedin-bg {
     background: #0177b5;
     color: #fff;
 }

 .login-30 .linkedin-bg:hover {
     background: #1c82ca;
     color: #fff;
 }

 .login-30 #bg {
     top: 0;
     left: 0;
     height: 100%;
     z-index: -1;
 }

 .login-30 #bg canvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 /** MEDIA **/
 @media (max-width: 992px) {
     .login-30 .logo-2 {
         display: inherit;
     }

     .login-30 .bg-img {
         display: none;
     }

     .login-30 .form-section {
         padding: 30px 15px;
     }
 }

 /** Login 30 end **/