/*Body*/
body {
  margin: 0;
  line-height: normal;
}

:root {
  /* fonts */
  --font-mirza: Mirza;
  --font-outfit: Outfit;

  /* font sizes */
  --font-size-xl: 20px;
  --font-size-base: 16px;
  --font-size-lg: 18px;

  /* Colors */
  --color-white: #fff;
  --color-black: #000;
  --color-goldenrod: #d0a541;
  --color-darkgoldenrod: #9e730d;

  /* Gaps */
  --gap-mini: 15px;

  /* Paddings */
  --padding-16xl: 35px;
  --padding-5xl: 24px;
  --padding-10xl: 29px;
  --padding-3xs: 10px;
  --padding-2xl: 21px;

  /* Border radiuses */
  --br-base: 16px;
  --br-9xs: 4px;
  --br-xl: 20px;
}


/*container*//**/
.welcome-back {
   position: relative;
   font-size: var(--font-size-sm);
   font-family: var(--font-mulish);
   color: var(--color-darkslategray-100);
   text-align: left;
   display: inline-block;
   min-width: 116px;
 }
 .welcome-message {
   align-self: stretch;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: center;
 }
 .sign-in-to {
   margin: 0;
   position: relative;
   font-size: 24px;
   font-weight: 700;
   font-family: var(--font-mulish);
   color: var(--color-darkslategray-100);
   text-align: center;
 }
 .admin-dash {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   padding: 0 44px;
 }
 .username {
   position: relative;
   font-size: var(--font-size-sm);
   font-weight: 500;
   font-family: var(--font-mulish);
   color: var(--color-darkslategray-100);
   text-align: left;
   display: inline-block;
   min-width: 67px;
 }
 .credentials,
 .username-field {
   align-self: stretch;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
 }
 .username-field {
   border: 1px solid var(--color-darkslategray-100);
   outline: 0;
   background-color: transparent;
   height: 45px;
   border-radius: var(--br-7xs);
   box-sizing: border-box;
   flex-direction: row;
   padding: 0 var(--padding-xs);
   min-width: 211px;
 }
 .credentials {
   flex-direction: column;
   gap: var(--gap-3xs);
 }
 .password {
   position: relative;
   font-size: var(--font-size-sm);
   font-weight: 500;
   font-family: var(--font-mulish);
   color: var(--color-darkslategray-100);
   text-align: left;
   display: inline-block;
   min-width: 65px;
 }
 .credentials1,
 .password-input-field {
   align-self: stretch;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
 }
 .password-input-field {
   border: 1px solid var(--color-darkslategray-100);
   outline: 0;
   background-color: transparent;
   height: 45px;
   border-radius: var(--br-7xs);
   box-sizing: border-box;
   flex-direction: row;
   padding: 0 var(--padding-xs);
   min-width: 211px;
 }
 .credentials1 {
   flex-direction: column;
   gap: var(--gap-3xs);
 }
 .login {
   position: relative;
   font-size: 18px;
   letter-spacing: 0.12em;
   line-height: 18px;
   text-transform: uppercase;
   font-weight: 800;
   font-family: var(--font-outfit);
   color: var(--color-darkslategray-100);
   text-align: left;
   display: inline-block;
   min-width: 69px;
 }
 .login-button,
 .login-wrapper {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   text-decoration: none;

 }
 .login-wrapper {
   cursor: pointer;
   border: 0;
   padding: 10px var(--padding-xl);
   background-color: #f1dfb5;
   flex: 1;
   border-radius: 20px;
   justify-content: center;
   opacity: 0.8;
   text-decoration: none;
 }
 .login-wrapper:hover {
   background-color: #d6c49c;
 }
 .login-button {
   align-self: stretch;
   justify-content: flex-start;
   padding: 0 42px;
 }
 .desktop-1,
 .sign-in-card {
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
 }
 .sign-in-card {
   margin: 0;
   width: 444px;
   box-shadow: 0 6px 8px rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   background-color: #fff;
   flex-direction: column;
   justify-content: flex-start;
   padding: 71px var(--padding-27xl);
   gap: 24px;
   max-width: 100%;
 }
 .desktop-1 {
   width: 100%;
   height: 1024px;
   position: relative;
   background-color: #011E33;
   overflow: hidden;
   flex-direction: row;
   justify-content: center;
   padding: 100px var(--padding-xl);
   line-height: normal;
   letter-spacing: normal;
 }
 @media screen and (max-width: 450px) {
   .sign-in-to {
     font-size: 19px;
   }
   .login-button,
   .admin-dash {
     padding-left: var(--padding-xl);
     padding-right: var(--padding-xl);
     box-sizing: border-box;
   }
   .sign-in-card {
     padding: var(--padding-27xl) var(--padding-xl);
     box-sizing: border-box;
   }
 }