/*=============================================================
    Authour URI: www.binarycart.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */
/*==============================================
    GENERAL  STYLES    
    =============================================*/
body {
    /*font-family: 'Open Sans', sans-serif;*/
    font-family: "PingFang SC","Microsoft YaHei","Microsoft JhengHei",'Noto Sans',Arial,Helvetica,sans-serif !important;
}

 #wrapper {
    width: 100%;
    margin-top:50px;
}


#page-wrapper {
    padding: 15px 15px;
    min-height: 600px;
    background:#f9f9f9; /*#F3F3F3;*/
   
}
#page-inner {
    width:100%;
    margin:10px 20px 10px 0px;
    background-color:#fff!important;
    padding:10px;
    /*min-height:1200px;*/
}

.text-center {
    text-align:center;
}
.user-image-back {
    /*background-color:#2f4b71;*/
    background-image: linear-gradient(310deg, #3e7b52 0%, #2f4b71 100%);
}
h5,.h5 {
    font-size: 14px;
font-weight: 900;
text-transform: uppercase;
padding-bottom:20px;
}
/*==============================================
    MENU STYLES    
    =============================================*/


.navbar-inverse .navbar-nav > li > a {
color: #002586;
}
.navbar-inverse .navbar-nav > li > a:hover,.navbar-inverse .navbar-nav > li > a:focus {
color: #002586;
}
.arrow {
    float: right;
}

.fa.arrow:before {
    content: "\f104";
}

.active > a > .fa.arrow:before {
    content: "\f107";
}


.nav-second-level li,
.nav-third-level li {
    border-bottom: none !important;
}

.nav-second-level li a {
    padding-left: 37px;
}

.nav-third-level li a {
    padding-left: 55px;
}
.sidebar-collapse , .sidebar-collapse .nav{
	background:none;
}
.sidebar-collapse .nav {
	padding:0;
}
.sidebar-collapse .nav > li > a {
background: #FFFFFF;
text-shadow: none;
color:#002586;
}
.sidebar-collapse > .nav > li > a {
	padding:15px 10px;
}

.sidebar-collapse > .nav > li > a.active {
	background-color:#F3F3F3;
}

.sidebar-collapse > .nav > li {
	border-bottom: 1px solid rgba(240, 240, 240, 1) !important;
}
.sidebar-collapse .nav > li > a:hover,
.sidebar-collapse .nav > li > a:focus {
	
	background:#F3F3F3;
	outline:0;
}
.nav-second-level  > li:last-child > a:after,
.nav-third-level  > li:last-child > a:after {
	height:50%;
}
.nav-third-level > li > a:after,
.nav-third-level > li > a:before  {
	left:40px;
}
.navbar-side {
	border:none;
	background-color: #202020;
	
}
.navbar-inverse {
background-color: #f3f3f3;
border-color: #D3D3D3;

}

.navbar-default {
border:0px solid #DDDDDD;
     
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #B40101;
}
.navbar-default .navbar-toggle {
border-color: #fff;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
}
.nav > li > a > i {
    margin-right:10px;
}
.navbar-inverse .navbar-brand  {
color: #000000;
font-size: 25px;
font-weight: 900;
}
.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus {
    color: #000000;
font-size: 25px;
font-weight: 900;
}
.navbar-inverse .navbar-toggle {
border-color: #2f4b71;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
/*background-color: #2f4b71;//#8B7BFF*/
background-image: linear-gradient(310deg, #3e7b52 0%, #2f4b71 100%);
}
.adjust-nav {
    padding-left:20px;padding-right:20px;
}
.navbar-toggle {
    background-color: #2f4b71;
}

/*==============================================
    DASHBOARD STYLES     
    =============================================*/

.bg-color-blue {
background-color: #9A86EB;
color: #fff;
}

.no-boder {
border: 1px solid #f3f3f3;
}
.back-footer-blue {
background-color: #7479E6;
border-top: 0px solid #fff;
}

/*==============================================
    BOOTSTRAP STYLE CHANGES     
    =============================================*/
.nav-tabs > li > a {
     -webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
}

.panel-group .panel {
border-radius: 0px;
  -webkit-border-radius:  0px;
-moz-border-radius: 0px;
}
.panel {
    border-radius: 0px;
  -webkit-border-radius:  0px;
-moz-border-radius: 0px;
}
.panel-heading {
 border-top-left-radius: 0px; 
 border-top-right-radius: 0px; 
}
.btn {
     border-radius: 0px;
  -webkit-border-radius:  0px;
-moz-border-radius: 0px;
}
.progress {
     border-radius: 0px;
  -webkit-border-radius:  0px;
-moz-border-radius: 0px;
}
/*==============================================
    MEDIA QUERIES     
    =============================================*/
 
 @media(min-width:768px) {
     #page-wrapper{
               margin: 0 0 0 260px;
        padding: 15px 30px 40px 30px;
        /*min-height: 1200px;*/
		
    }
	
	
    .navbar-side {
        z-index: 1;
        position: fixed;
        width: 260px;
    }

   .navbar {
 border-radius: 0px; 
}
   
}


.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.inner-shape {
    width: 20%;
    height: 35px;
    background-color: #00000085;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight:400;
    font-size:15px;
}

.inner-shape.active {
    background-color: black;
    color: white;
    text-decoration: none;
    font-weight:bold;
}

.inner-shape:hover {
    text-decoration: none;
    opacity: 0.5;
}

.inner-shape,
.inner-shape:hover,
.inner-shape:active {
    text-decoration: none;
}

.inner-shape:visited {
    text-decoration: none;
    color:white;
}

.inner-shape.m1{
    background-color: #27357e;
}

.inner-shape.m2{
    background-color: #4ea946;
}

.inner-shape.m3{
    background-color: #cd9c72;
}

.inner-shape.m4{
    background-color: #36adad;
}

.inner-shape.m5{
    background-color: #636466;
}

.lang-switch a {
    color: black;
    text-decoration: none;
    margin: 0 5px;
    font-weight: bold;
    transition: color 0.3s ease;
    font-size: 16px;
}

.lang-switch a:hover {
    color: #50A800;
    opacity: 1.0;
}

.lang-switch a.active-lang {
    color: #50A800;
    opacity: 0.8;
}

.table-hover tbody tr.no-hover:hover {
    background-color: inherit !important;
    color: inherit !important;
}

table{
    font-size:12px;
}

.custom-box {
    color: black;
    font-size:15px;
    font-weight:bold;
}

#mission1 thead th{
    background-color: #27357e;
    color:white;
    font-weight: 600;
}

#mission1 tbody th, #mission2 tbody th, #mission3 tbody th, #mission4 tbody th, #enabler tbody th{
    background-color: #dbdbdb;
    color:black;
    font-weight:500;
}

#mission2 thead th{
    background-color: #4ea946;
    color:white;
    font-weight: 600;
}

#mission3 thead th{
    background-color: #cd9c72;
    color:white;
    font-weight: 600;
}

#mission4 thead th{
    background-color: #36adad;
    color:white;
    font-weight: 600;
}

#enabler thead th{
    background-color: #636466;
    color:white;
    font-weight: 600;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:white;
    /*height: 100vh;*/
}

#page-inner-login {
    width: 600px;
    padding: 50px;
    
}


.panel-heading-login{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    text-align: center;
    padding: 20px 0px 0px 0px;
}

.panel-primary-login{
    border-color: #d4d9dd;
    box-shadow: 1px 1px 5px 5px #34343417;
    padding: 10px;
}

.btn-login{
    background-color: #3948a4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.btn-login:hover{
    background-color: #1bc8b0;
}



/***********Loading page********/

.spanner{
    position:fixed;
    top: 0; /*90px;*/
    left: 0;
    background: #ffffff;
    width: 100%;
    display:block;
    text-align:center;
    height: 100%;
    color: #002554;
    font-weight: 600;
    /*transform: translateY(-50%);*/
    z-index: 1000;
    visibility: hidden;
}

.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,0.5);*/
    visibility: hidden;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}
.loader {
    color: #002554;
    font-size: 10px;
    margin: 0px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    top: 100px;
}
.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}
.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 3.5em;
}

#loader-title{
    position:relative;
    top:140px;
    font-weight: 600;
}


@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
      box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
      box-shadow: 0 2.5em 0 0;
    }
}
@keyframes load7 {
    0%,
    80%,
    100% {
      box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
      box-shadow: 0 2.5em 0 0;
    }
}

.show{
    visibility: visible;
}

.spanner, .overlay{
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.spanner.show, .overlay.show {
	opacity: 0.95;
        z-index: 9999;
}

.footer {
    position: fixed;
    bottom: 0px;
    z-index: 1000;
    float: left;
    width: 100%;
    background-color: #fff;
}

.footer img {
    position: fixed;
    bottom: 0px;
    z-index: 1;
    float: right;
    right: 0px;
    bottom: 0px;
}

.footer p {
    padding-left: 25%;
    text-align: left;
}