/*----------------------------
         Add CSS file
----------------------------*/
@import "../plugins/bootstrap/css/bootstrap.min.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*----------------------------
   element      
----------------------------*/
:root {
    --blue:#1079C0;
    --green:#4CBA08;
    --red:#F51B1B;
    --gray:#455A64;
    --placholder:#4F5168;
    --white:#ffffff;
    --black:#000;
    --body:#F0F0F0;
}

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html { text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}
*{margin:0; padding:0}
a{ text-decoration:none;}
a:hover{ text-decoration:none !important;}
header, nav, section, article, aside, footer { display:block;}
html {font-size: 100%;}
body {font-size: 14px; background:var(--body, #F0F0F0);font-family: 'Roboto', sans-serif;line-height: 26px;color:var(--gray, #4F5168);-webkit-font-smoothing: antialiased;font-weight: normal;}
h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;font-weight: normal;-webkit-font-smoothing: antialiased;}
:-ms-input-placeholder{color: var(--gray, #4F5168);}

/*----------------------------
   auth      
----------------------------*/
.auth-height{height: 100vh;}
.rmt-1{margin-top: 1rem;}
.rmt-2{margin-top: 2rem;}
.rmt-3{margin-top: 3rem;}
.rmt-4{margin-top: 4rem;}
.rmt-5{margin-top: 5rem;}

.auth-content-card{width: 100%}

#background-video {width: 100vw; height: 100vh; object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; }
.auth-section {display: flex; align-items: center; height: 100vh; } 
.auth-section .container {max-width:35%; }
.auth-content {padding: 4rem 2rem; position: relative; text-align: center; border-radius: 15px 0 0 15px; } 
.auth-content-info  h2 {font-size: 24px; font-weight: 600; color: var(--white, #ffffff); margin: 0; padding: 0; }
.auth-content-info  p {font-size:14px; font-weight: 300; color: var(--white, #ffffff); margin: 0; padding: 0; }



.auth-content-info {position: relative; z-index: 1; }
.auth-card {box-shadow: 0px 8px 13px rgb(0 0 0 / 5%);border-radius: 15px;position: relative;background-color: rgb(16 121 192 / 26%);overflow: hidden;-webkit-backdrop-filter: saturate(200%) blur(10px);backdrop-filter: saturate(200%) blur(10px);}
.brand-logo {text-align: center;background: linear-gradient(180deg, #FFF 0%, #E6F5FF 100%); height: auto; border-radius: 10px; width: 100%; margin: 0 auto 2rem auto; padding:20px 10px; }
.brand-logo img {width: 100px; }
.auth-form-info{margin: 0px; padding: 0px; display: flex; align-items: center; flex-wrap: wrap; } 
.auth-form{ width: 100%; min-height: 450px; max-width: 580px;    text-align: center;}
.auth-form form {padding: 55px;}
.auth-form  h2 {font-size: 24px; font-weight: 600; color:var(--white); margin: 0; padding: 0; }
.auth-form  p {font-size:14px; font-weight: 300; color: var(--white); margin: 0; padding: 0; }
.auth-illustration {margin-top: 20px; } 
a.auth-link{font-size: 0.875rem; margin: 0; color: #ffcc00; font-weight: normal; }

.auth-form .form-group {margin-bottom: 1rem; }
.auth-form .form-group label {color: #fff; font-size: 14px; font-weight: 600; }
.auth-form input.form-control {background:var(--white);border-radius: 5px;font-size: 13px;border: 1px solid var(--white);font-weight: 400;height: auto;padding: 0.94rem 0.94rem;outline: 0;width: 100%;display: inline-block;color:var(--gray);box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05);}
.auth-form textarea.form-control {background:var(--white);border-radius: 5px;font-size: 13px;border: 1px solid var(--white);font-weight: 400;height: auto;padding: 0.94rem 0.94rem;outline: 0;width: 100%;display: inline-block;color:var(--gray);box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05);}
.auth-form input.form-control:focus {border: 1px solid var(--blue); }
 button.auth-form-btn {outline: none;    width: 100%; padding: 12px 40px; display: inline-block; color: #fff; font-size: 14px; font-weight: 600; border-radius: 5px; border: none; background: var(--blue); box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05); }
.note-msg-info {background: #fbfbfb; display: inline-block; font-size: 12px; border-radius: 10px; line-height: 20px; color: #455A64; position: relative; padding: 8px 8px 8px 45px; }
.note-msg-info i {position: absolute; left: 8px; font-size: 30px; top: 14px; }
.forgotpsw-text a {font-size: 14px; color: var(--white, #fff); }

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

 .pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
}

/* Animations */
@keyframes ringA {
  from, 4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%, 54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%, to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {
  from, 12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%, 62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%, to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%, 58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {
  from, 8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%, 50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}