@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

body {
   background-color: #fff;
   font-family: 'Inter', sans-serif !important;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

.logo-apps {
   width: 200px;
   height: 28px;
   object-fit: cover;
}

.logos {
   /* width: 100px; */
   height: 60px;
   object-fit: cover;
   margin-bottom: 24px;
}

.ornament {
   position: absolute;
   z-index: -999;
   width: 240px;
}

.ornament1 {
   bottom: -100px;
   left: 100px;
}

.ornament2 {
   bottom: -50px;
   right: 100px;
}

.ornament3 {
   top: 50px;
   right: 100px;
}

.ornament4 {
   top: 50px;
   left: 100px;
}

.logo-apps-form {
   width: 20rem;
   object-fit: cover;
}

#auth {
   max-height: 100vh;
   overflow-x: hidden;
   width: 100%;
}

.auth-border {
   padding: 40px;
   border: 1px solid #E9E9E9;
   background: #FFF;
   box-shadow: 0px 54px 21.7px -20px rgba(0, 0, 0, 0.15);
   margin-bottom: 32px;
}

.form-control.form-control-xl {
   font-size: 16px;
   padding: 12px 16px !important;
   border: 1px solid #999;
   border-radius: 0px;
   color: #000;
}

.form-control-xl:focus {
   box-shadow: 6px 6px 0px 0px #f18775;
}

.btn-success {
   /* background: #005596; */
   background: #DA291C;
   background-size: 200% 100%;
   background-position: left bottom;
   color: #fff;
   font-size: 16px;
   padding: 12px 16px;
   font-weight: 500;
   transition: background-position 0.5s, color 0.5s;
   border: 1px solid #999999;
   outline: none;
   cursor: pointer;
}

.btn-success:hover {
   /* background: #003965; */
   background: #b54840;
   background-position: right bottom;
   border: 1px solid #999999;
   /* color: #000; */
   /* background: #002039; */
   color: #fff;
}

.btn-login {
   background: linear-gradient(to left, #000 50%, #fafafa 50%);
   background-size: 200% 100%;
   background-position: left bottom;
   color: #000;
   font-size: 16px;
   padding: 12px 16px;
   font-weight: 500;
   transition: background-position 0.5s, color 0.5s;
   border: 1px solid #999999;
   outline: none;
   cursor: pointer;
}

.btn-login:hover {
   background-position: right bottom;
   border: 1px solid #999999;
   color: #fafafa;
}

.copy {
   font-size: 14px;
   margin-bottom: 8px;
}

@media screen and (max-width: 767px) {
   .logo-apps-form {
      width: 15rem;
   }

   .auth-border {
      margin: 0 24px 32px 24px;
   }

   .ornament {
      display: none;
   }
}

@media screen and (max-width: 576px) {
   #auth #auth-left {
      padding: 24px;
   }
}