/*
 * Skin: Primary
 * ----------
 */
:root{
    --primary-color-darken: #013a63;
    --primary-color: #01497c;
    --primary-color-lighten: #2a6f97;
}
body{font-family: 'Quicksand', Arial, sans-serif}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: 'Quicksand', Arial, sans-serif}
.bg-primary{ 
  background-color: var(--primary-color) !important;color: #fff;
}
.bg-primary-dark{ 
  background-color: var(--primary-color-darken) !important;color: #fff;
}
.bg-primary-light{ 
  background-color: var(--primary-color-lighten) !important;color: #fff;
}
.btn.bg-primary:hover{ 
  background-color: var(--primary-color-lighten) !important;color: #fff !important;
}
.skin-primary .content-wrapper {
  background-color: #dfe7fd;
};
/****************************/
.skin-primary .main-header .navbar {
    background-color: #fff !important;
}
.skin-primary .main-header .navbar {
  background-color: #fff;
}
.skin-primary .main-header .navbar-brand {
  color: #333;
}
.skin-primary .main-header .navbar-toggle {
  color: #333;
}
.skin-primary .main-header .navbar .nav > li > a {
  color: #444;
}
.skin-primary .main-header .navbar .nav > li > a:hover,
.skin-primary .main-header .navbar .nav > li > a:active,
.skin-primary .main-header .navbar .nav > li > a:focus,
.skin-primary .main-header .navbar .nav .open > a,
.skin-primary .main-header .navbar .nav .open > a:hover,
.skin-primary .main-header .navbar .nav .open > a:focus,
.skin-primary .main-header .navbar .nav > .active > a {
  background: rgba(0, 0, 0, 0.1);
  color: #444;
}
.skin-primary .main-header .navbar .sidebar-toggle {
  color: #444;
}
.skin-primary .main-header .navbar .sidebar-toggle:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.1);
}
.skin-primary .main-header .navbar .sidebar-toggle {
  color: #444;
}
.skin-primary .main-header .navbar .sidebar-toggle:hover {
  background-color: #333;
}
@media (max-width: 767px) {
  .skin-primary .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .skin-primary .main-header .navbar .dropdown-menu li a {
    color: #444;
  }
  .skin-primary .main-header .navbar .dropdown-menu li a:hover {
    background: #367fa9;
  }
}
.skin-primary .main-header .logo {
  background-color: #0000003b;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}
.skin-primary .main-header .logo:hover {
  background-color: #357ca5;
}
.skin-primary .main-header li.user-header {
  background-color: var(--primary-color);
}
.skin-primary .content-header {
  background: transparent;
}
.skin-primary .wrapper,
.skin-primary .main-sidebar,
.skin-primary .left-side {
  background-color: var(--primary-color-darken);
}
.skin-primary .user-panel > .info,
.skin-primary .user-panel > .info > a {
  color: #fff;
}
.skin-primary .sidebar-menu > li.header {
  color: #4b646f;
  background: #1a2226;
}
.skin-primary .sidebar-menu > li > a {
  border-left: 3px solid transparent;
}
.skin-primary .sidebar-menu > li:hover > a,
.skin-primary .sidebar-menu > li.active > a,
.skin-primary .sidebar-menu > li.menu-open > a {
  color: #ffffff;
  background: #0000003b;
}
.skin-primary .sidebar-menu > li.active > a {
  border-left-color: var(--primary-color);
}
.skin-primary .sidebar-menu > li > .treeview-menu {
  margin: 0 1px;
  background: #0000003b;
}
.skin-primary .sidebar a {
  color: #d1d1d1;
}
.skin-primary .sidebar a:hover {
  text-decoration: none;
}
.skin-primary .sidebar-menu .treeview-menu > li > a {
  color: #adadad;
}
.skin-primary .sidebar-menu .treeview-menu > li.active > a,
.skin-primary .sidebar-menu .treeview-menu > li > a:hover {
  color: #ffffff;
}
.skin-primary .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}
.skin-primary .sidebar-form input[type="text"],
.skin-primary .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
}
.skin-primary .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}
.skin-primary .sidebar-form input[type="text"]:focus,
.skin-primary .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #666;
}
.skin-primary .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}
.skin-primary .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}
.skin-primary.layout-top-nav .main-header > .logo {
  background-color: var(--primary-color);
  color: #ffffff;
  border-bottom: 0 solid transparent;
}
.skin-primary.layout-top-nav .main-header > .logo:hover {
  background-color: #3b8ab8;
}
.loader-container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 9999;
    animation: animate-cont 3s linear forwards;
}
#logosvg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:50vw;
    height:50vh;
}
#logosvg #recDown{
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
    transform: translate(1%, 3%);
    animation: animate-recup 2s linear forwards;
}
#logosvg #recUp{
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
    transform: translate(1%, 3%);
    animation: animate-recdown 2s linear forwards;
}
#logosvg #flash{
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
    stroke-dasharray: 960;
    stroke-dashoffset: 960;
    animation: animate-flash 3s linear forwards;
}

@keyframes animate-cont{
    0%{
        background-color: #8a4111;
    }
    15%{
        background-color: #56d991;
    }
    30%{
        background-color: #2b4472;
    }
    50%{
        background-color: #eee;
    }
    100%{
        background-color: #fff;
    }
}
@keyframes animate-flash{
    0%{
        stroke-dashoffset: 0;
    }
    25%{
        stroke-dashoffset: 960;
    }
    50%{
        stroke-dashoffset: 300;
    }
    100%{
        stroke-dashoffset: 1920;
    }
}
@keyframes animate-recup{
    0%{
        transform: translate(-100%, -100%);
        opacity: 0;
    }
    50%{
      opacity: 0.5;
        transform: translate(-30%, -30%);
    }
    100%{
      opacity: 1;
        transform: translate(0%, 0%);
    }
}
@keyframes animate-recdown{
    0%{
        transform: translate(100%, 100%);
        opacity: 0;
    }
    50%{
      opacity: 0.5;
        transform: translate(30%, 30%);
    }
    100%{
      opacity: 1;
        transform: translate(0%, 0%);
    }
}