/* =================================================
 * LOGIN VIEW STYLESHEET
 * ============================================== */

/*
BRANDING SETTINGS ==================================== */
/* Colors */
:root {
   /* Branding Colors */
   --primary: 0,38,154;
   --primary_dark: 0,29,117;
   --dark: 62,72,101;

   /* Notification Colors */
   --danger: 160,0,0;
   --warning: 255,204,0;
   --success: 0,154,100;

   --danger_dark: 142,0,0;
   --warning_dark: 205,144,4;
   --success_dark: 0,107,70;

   /* Opacity */
   --opacity_100: 1;
   --opacity_75: .75;
   --opacity_50: .5;
   --opacity_25: .25;
   --opacity_0: 0;
}

/* Font Face */
@font-face {
   font-family: 'Outfit';
   src: url('fonts/fontface/Outfit-SemiBold.woff2') format('woff2'),
       url('fonts/fontface/Outfit-SemiBold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Outfit';
   src: url('fonts/fontface/Outfit-Medium.woff2') format('woff2'),
        url('fonts/fontface/Outfit-Medium.woff') format('woff');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Outfit';
   src: url('fonts/fontface/Outfit-Regular.woff2') format('woff2'),
        url('fonts/fontface/Outfit-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

html body {
   font-family: 'Outfit';
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 1.5rem;
   letter-spacing: .2px;
   color: rgb(var(--dark));
   background-image: url('../imgs/bg/bg_login.png');
   background-repeat: no-repeat;
   background-position: top left;
   background-size: cover;
}

@media (min-width: 992px) {
   html body {
      background-position: center center;
      background-size: cover;
   }
}
@media (min-width: 768px) {
   main { height: 100vh; }
}

/*
LAYOUT SETTINGS ==================================== */
/* Headings and text */
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
   margin-bottom: .625rem;
   font-weight: bold;
   color: black;
}

@media (min-width: 992px) {
   body .h1, body h1 { font-size: 2.25rem; }
   body .h2, body h2 { font-size: 1.625rem; }
   body .h3, body h3 { font-size: 1.5rem; }
   body .h4, body h4 { font-size: 1.375rem; }
   body .h5, body h5 { font-size: 1.25rem; }
   body .h6, body h6 { font-size: 1.125rem; }
}

/* Branding */
.site_branding {
   max-height: 3.75rem;
}

.site_branding_iso { width: 3.75rem; }

.google_icon {
   width: 1.25rem;
   height: 1.25rem;
}

/* Wrappers */
.offcanvas-backdrop {
   background: rgb(0,159,251);
   background: linear-gradient(0deg, rgba(0,159,251,.5) 0%, rgba(0,38,154,.5) 100%);
   backdrop-filter: blur(9px);
   -webkit-backdrop-filter: blur(6px);
}
.offcanvas-backdrop.show { opacity: 1; }

.offcanvas.offcanvas-end { border-left: 0; }

.offcanvas-body { padding: 1.25rem; }

@media (min-width: 992px) {
   .offcanvas-body { padding: 5rem; }
}
@media (min-width: 768px) {
   .offcanvas { --bs-offcanvas-width: 630px; }
   .offcanvas-body { padding: 3rem; }
}

/*
COMPONENTS SETTINGS ==================================== */
/* Buttons & Links */
.btn {
   border-radius: 0;
   font-weight: 600;
}
.btn-primary {
   --bs-btn-bg: rgb(var(--primary));
   --bs-btn-border-color: rgb(var(--primary));
   --bs-btn-hover-border-color: rgb(var(--primary_dark));
   --bs-btn-hover-bg: rgb(var(--primary_dark));
}

.btn-secondary {
   --bs-btn-bg: white;
   --bs-btn-color: rgb(var(--dark));
   --bs-btn-border-color: rgb(var(--primary));
   --bs-btn-hover-border-color: rgb(var(--primary_dark));
   --bs-btn-hover-bg: rgb(var(--primary_dark));
   --bs-btn-hover-color: white;
}

body a {
   color: rgb(var(--primary));
   text-decoration: none;
   font-weight: 600;
}
/*body a:hover, body a:focus, body a:visited { color: rgb(var(--primary_dark)); }*/

body .btn-primary:focus { color: white; }

/* Forms */
.form-control { border-color: rgba(var(--primary), .12); }

.input-group-text:not(:first-child) {
   background-color: white;
   border-color: rgba(var(--primary), .12);
   font-size: 1.125rem;
   color: rgb(var(--primary));
}

.form-floating > label { color: rgb(var(--primary)); }

body .input-group > .form-floating > .form-control {
   border-right-color: transparent;
}
body .input-group:first-child > .form-floating > .form-control {
   border-bottom-left-radius: 0;
   border-bottom-color: transparent;
}
body .input-group:last-child > .form-floating > .form-control {
   border-top-left-radius: 0;
}

body .input-group:first-child > .input-group-text {
   border-left-color: transparent;
   border-bottom-color: transparent;
   border-bottom-right-radius: 0;
}
body .input-group:last-child > .input-group-text {
   border-left-color: transparent;
   border-top-right-radius: 0;
}

/* Utilities */
.text-danger { color: rgb(var(--danger)); }