/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
 
*/
body{ background: #f9f9f9;
}
            #wrapper{padding:90px 15px;}
            .navbar-expand-lg .navbar-nav.side-nav{flex-direction: column;}
            .card{margin-top: 75px ;margin-bottom: 15px; border-radius:0; box-shadow: 0 3px 5px rgba(0,0,0,.1); }
            .header-top{box-shadow: 0 3px 5px rgba(0,0,0,.1)}
            .leftmenutrigger, .navbar-nav li a .shortmenu{display: none}
            .card-title{ font-size: 28px}
            @media(min-width:992px) {
                .leftmenutrigger{display: block;display: block;margin: 7px 20px 4px 0;cursor: pointer;}
                #wrapper{padding: 110px 15px 15px 75px; }
                #wrapper.open{padding: 110px 15px 15px 250px; }
                .navbar-nav.side-nav.open {left:0;}
                .side-nav li a {padding: 20px}

                .navbar-nav li a .shortmenu {float: right;display: block;opacity: 1}
                .navbar-nav.side-nav.open.navbar-nav li a .shortmenu {opacity: 0}
                .navbar-nav.side-nav{background: #585f66;box-shadow: 2px 1px 2px rgba(0,0,0,.1);position:fixed;top:76px;flex-direction: column!important;left:-165px;width:225px;overflow-y:auto;bottom:0;overflow-x:hidden;padding-bottom:40px}
            }
            .animate{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
            .navbar-nav li a svg{font-size: 25px;float: left;margin: 0 10px 0 5px;}
            .side-nav li { border-bottom: 1px solid #50575d;} 

            .dropdown-content.open {left: 250px;}  

            .dropdown-content {
                display: none;
                margin-left: 225px;
                position: fixed;
                background-color: #585f66;
                height: 200px;
                width: 560px;
                z-index: 1;
                flex-direction: column!important;
                margin-top: -100px;

            }

            .dropdown-content a {
                color: rgba(255,255,255,.5);
                padding-left: 12px ;
                text-decoration: none;
                display: block;
                text-align: left;
            }

            .dropdown-content a:hover {color: #f1f1f1}

            .nav-item:hover .dropdown-content {
                display: block;
            } 
.login-background{
   
    background: linear-gradient(0,rgba(249,249,249,1) 300px,rgba(153,0,0,0.5));
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
.logo{
    width: 232px
    
}


/* Style tab links */
.tablink {
  background-color: #555;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  color: #fff !important;
  

}
.tablinkselected {
  background-color: #1F4A82;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
 
  

}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: black;
  padding: 20px;
  margin-bottom: 15px;
  min-height: calc(100% - 200px);
  position: absolute;
  width: calc(100% - 30px);
  top: 180px;
  background-color: white;
  height: auto;
}

.shadow {
    box-shadow: 0 2px 20px 0 #000;
}
.shadow-small {
    box-shadow: 0 2px 10px 0 #000;
}
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

@media screen and (min-width: 0px) and (max-width: 575px) {
    .mobile-height{
        min-height: 100vh!important
    }
}