@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');


:root{
    --main-color: #1769a2;
    --color-dark: #1D2231;
    --color-light: #ffffff;
    --text-grey: #8390A2;
    --text-light: #ffffff;

    --bg-navy : #001F3F;
    --bg-blue : #0074D9; 
    --bg-aqua : #7FDBFF; 
    --bg-teal : #39CCCC; 
    --bg-olive: #3D9970; 
    --bg-green: #2ECC40; 
    --bg-lime : #01FF70; 
    --bg-yellow: #FFDC00; 
    --bg-orange: #FF851B; 
    --bg-red : #FF4136; 
    --bg-fuchsia: #F012BE; 
    --bg-purple : #B10DC9; 
    --bg-maroon : #85144B; 
    --bg-white : #FFFFFF; 
    --bg-gray : #AAAAAA; 
    --bg-silver : #DDDDDD; 
    --bg-black : #111111;
    
}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    list-style-type:none ;
    text-decoration: none;
    font-family: "Poppins" , sans-serif;

}





/*


#sidebar-toogle:checked  ~ .sidebar .sidebar-header h2 span,
#sidebar-toogle:checked  ~ .sidebar li span:last-child {
    display: none;
 
}

#sidebar-toogle:checked  ~ .sidebar .sidebar-header,
#sidebar-toogle:checked  ~ .sidebar li {
   display: flex;
   justify-content: center;
 
}

#sidebar-toogle:checked  ~ .main-content{
    margin-left: 60px;
}

#sidebar-toogle:checked  ~ .main-content header{
    left: 60px;
}
*/

.main-content{
    position:relative;
    /*margin-left: 240px;*/
    margin-left: 0;
    transition: margin-left 300ms;
   
}


main{ 
    background: #f1f5f9;
    min-height: 90vh;
    padding:1rem 3rem;
}

/*

.social-icons{
    display:flex;
    align-items: center;
   
}

.social-icons span, 
.social-icons div
{
   margin-left:1.2rem;
   
}

.social-icons div
{
   height:40px;
   width:40px;
   background-size:cover ;
   background-repeat:no-repeat ;
   border-radius: 50%;
   
}

*/


.dash-title{
    color : var(--color-dark)  ;
    margin-bottom: 1rem;
}

.dash-cards{
    display: grid;
    grid-auto-flow:dense;
    grid-template-columns: repeat(5,1fr);
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 2rem;

}

.dash-cards-flex-container{ 
    display: flex;
   /* flex-direction: column-reverse; */

 }


/*  flex-direction: column-reverse; */


.dash-cards-flex{ 

    display: flex;
 }




/*

.dash-cards-grid-75-25{    
   grid-template-columns: 75% 25%;
}

.dash-cards-grid-25-25{    
   grid-template-columns: 25% 25%;
}

.dash-cards-grid-40-25{    
   grid-template-columns: 40% 25%;
}
.dash-cards-grid-50-25{    
   grid-template-columns: 50% 25%;
}



.dash-cards-grid-75-25{    
   grid-template-columns: 100%;


}

*/

 .div-wrapper {
    background: #fff;
   
    max-width: calc( 100vw );
    max-height: calc( 100vh - 150px );
    overflow: auto;
    display: flex;
}




.dash-cards-matrix .div-wrapper {
    background: #fff;
    padding: 2rem;
    max-width: calc( 100vw );
    max-height: calc( 100vh - 150px );
    overflow: auto;
    display: flex;
}

.dash-cards-matrix  .div-wrapper .matrix-item {
    display: flex;
    flex-direction: column;
      font-size: 11px;
    
}

.dash-cards-matrix  .div-wrapper .matrix-item .matrix-item-title {
    text-align: center;
    background: #f0f0f0;
    padding: 8px;
    line-height: 1.42857143;
    border: 1px solid #ddd;
    margin-left: -1px;

}

.dash-cards-matrix  .div-wrapper .matrix-item .matrix-item-data .datas {
    display: flex;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    margin-left: -1px;

}


.dash-cards-matrix  .div-wrapper .matrix-item .matrix-item-data .datas div:first-child {
    border-right: 1px solid #ddd;
    white-space: nowrap;
    width: 100%;
    padding: 4px;
}


.dash-cards-matrix .div-wrapper .matrix-item .matrix-item-data .datas div:last-child {
    padding-right: 5px;
    width: 55px;
    text-align: center;
    background: #fcfcfc;
}

.dash-cards-grid-2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 2rem;
}

.dash-cards-grid-5{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-column-gap: 2rem;
}



.card-single{
    margin-bottom: 15px;
    background-color: #ffffff;
    border-radius: 20px;  
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}


.card-body{
    padding: 2rem;

}


/*

.card-body span{
    font-size: 1.5rem;
    color:#777;
    padding-right: 1.4rem;
}

.card-body h5{
    color : var(--text-grey)  ;
    font-size: 1rem;
}
.card-body h4{
    color : var(--color-dark)  ;
    font-size: 1.1rem;
    margin-top: .2rem;
}
*/

.card-footer{
    padding: 0.2rem 1rem;
   
}

.card-footer a{
   color: var(--main-color);
}


/*
.recent{

    margin-top:3rem;
}

.activity-grid{
    display: grid;
    grid-template-columns: 75% 25%;
    grid-column-gap: 1.5rem;
}



.activity-card,
.summary-card,
.bday-card{
    background-color: #ffffff;
    border-radius: 7px;
    box-shadow:   0px 8px 20px 0px rgb(0 0 0 / 2%) ;
}
.activity-card h3{
    color:var(--text-grey);
    margin : 1rem;
}

*/



table {
  border: 1px solid #ccc;
  width: 100%;

}






tr:nth-child(even){
   background: #f8f8f8;
}

/* ******************************************************************* */


/*
table {
  border: 1px solid #ccc;

}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
*/

/*
@media screen and (max-width: 600px) {
 
}

*/

/* ******************************************************************* */

.order-wrapper table {
   
    width: 100%;
    border:  none;
    border-collapse: collapse
}


.order-wrapper table th {
    padding: 1.2rem;
    text-align: left;
    border-bottom: 1px solid var(--bg-aqua);
    
}



.order-wrapper table td {
    padding: 1.2rem;
    font-size: 0.80rem;
   
    
}


.order-wrapper table tbody tr:hover {

    background: #e5f6f6;
   
    
}


.pagination{ 
    margin-top: 2rem;
    text-align: center ; }


.pagination a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

.pagination a:hover {
  background-color: #ddd;
  color: black;
}

.pagination .previous {
  background-color: #f1f1f1;
  color: black;
}

.pagination next {
  background-color: #04AA6D;
  color: white;
}

.pagination .round {
  border-radius: 25%;
}


@media screen and (min-width: 800px) {

 .dash-cards-container{ 

    display: grid;
    grid-template-columns: 85% 15 %;
    grid-column-gap: 1.5rem;

 }

}

.badge{ 
    padding: .2rem 1rem;
    border-radius: 20px;
    color:var(--main-color);
    font-weight: 500;
   
}

.badge.success{ 
    background: #def7ec;
}
.badge.pending{ 
    background: #e3e6e5;
}

.badge.warning{ 
    background: orangered;
    color:rgb(241, 218, 218)
}


/*
.summary-card{
    margin-bottom: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.summary-title{
    color:var(--color-dark)
}
.summary-title h4{
    margin:0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-single{
    padding : .3rem 1rem;
    display: flex;
    align-items: center;
}

.summary-single span{
    font-size: 2rem;
    color:#777;
    padding-right: 1rem;

}

.summary-single h5{
    color: var(--main-color);    
    font-size: 1.1rem;
    margin-bottom:0rem !important;
}

.summary-single small{
    font-weight: 700;
    color:var(--text-grey)
}

.bday-flex{
  
    display: flex;
    align-items: center;
    margin-bottom: .3rem
}

.bday-card{
    padding:1rem;
 
}

.bday-img{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border:3px solid #efefef;
    background-size:cover;
    background-repeat:no-repeat;
    margin-right:0.7rem;
}

.text-center{
    text-align: center;
}

.text-center button{
    
    background-color: var(--main-color);
    color:#fff;
    border : 1px solid var(--main-color);
    border-radius: 4px;
    padding : .4rem 1rem
}
*/

.table-responsive{

    overflow-x: auto;

}

.login-wrapper{

    display: flex;
    height: 100vh;
    width: 100vw;
   
    align-items: center;
    justify-content: center;
    z-index: 100;
   
    background: var(--main-color);
    color :var(--text-light);
   
    
}
.login-wrapper  .login-card .login-header h2 {
   text-align: center;
 }

 .login-wrapper  .login-card  h2{
    display: flex;
    flex-direction: column;
   
    align-items: center;
    justify-content: flex-end;
    font-size: 1.2rem;
  }

  
 .login-wrapper  .login-card  h2 span:first-child{
 
  height: 80px;
  width: 80px;;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  border:0;
  background-image: url('./jhwter.png');
  }

.login-wrapper .login-inputs div  { 

    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    margin-bottom:0.5rem;  
    background-color: #fff;
    color:var(--main-color)

}

.login-wrapper .login-inputs div span:first-child { 

    margin-left:1rem;
    margin-right:0.5rem;
  
  

}
.login-wrapper  .login-inputs input { 

  
    height: 100%;
    padding: 0.5rem;
 
    border: none;
    outline: none;
}


.login-button { 


    margin-top:0.5rem;
    text-align: right;
    
}

.login-button button{ 
    width: 100%;
    background: var(--color-dark);
    border-radius: 6px;
    color: var(--text-light);
    font-size: .8rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--main-color);

    
}
.login-button button:hover{ 
    background: var(--color-light);
    color: var(--color-dark)

    
}

/*

@media only screen and (max-width:1200px){


    .sidebar{
        width: 60px;
        z-index: 150;
    }
    
    .sidebar .sidebar-header h2 span,
    .sidebar li span:last-child {
        display: none;
     
    }
    
    .sidebar .sidebar-header,
    .sidebar li {
       display: flex;
       justify-content: center;
     
    }
    
    .main-content{
        margin-left: 60px;
    }
    
    .main-content header{
        left: 60px;
        width: calc(100% - 60px);
    }
    
    #sidebar-toogle:checked  ~ .sidebar{
        width: 240px;
    }
    
    #sidebar-toogle:checked  ~ .sidebar .sidebar-header h2 span,
    #sidebar-toogle:checked  ~ .sidebar li span:last-child {
        display: inline;
     
    }
    
    #sidebar-toogle:checked  ~ .sidebar .sidebar-header {
       display: flex;
       justify-content: space-between;
     
    }
  
    #sidebar-toogle:checked  ~ .sidebar li {
       display: block;
   
     
    }
    
    #sidebar-toogle:checked  ~ .main-content{
        margin-left: 60px;
    }
    
    #sidebar-toogle:checked  ~ .main-content header{
        left: 60px;
       
    }


}

@media only screen and (max-width:860px){

    .dash-cards{
        grid-template-columns:repeat(2,1fr)
    }

    .card-single{

        margin-bottom: 1rem;

    }

    .activity-grid{
        display: block;
    }

    .summary{
        margin-top: 1.5rem;
    }
}



@media only screen and (max-width:600px){

    .dash-cards{
        grid-template-columns:100%
    }

  
}


@media only screen and (max-width:450px){

    main{

        padding-left: 1rem;
        padding-right: 1rem;
        
    }




  
  
}


*/






.img-fluid-gsmossa {
    max-width: 30vh!important;
    height: auto;
}


/* .sup_header_bar{
    display: flex;
    display:none;
    background-color: #000;
    color:#fff;
    justify-content: flex-end;
    font-size:0.8rem;
    height: 40px;
    
    align-items: center;
}

.sup_header_bar div{ 


    margin-right:30px;
  

} */

.bg-red-gsmossa{ 
  
    
    background-color: #fff ; border:0px solid #d9232d ;border-radius: 8px 

}

.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single {
    background-color: #d9232d!important
}
.irs--round .irs-from:before, .irs--round .irs-to:before, .irs--round .irs-single:before {
 
    border-top-color: #d9232d!important
}

.irs--round .irs-handle {
   
    border: 4px solid #d9232d!important;   
 
    box-shadow: 0 1px 3px rgba(217, 35, 45,0.3)!important;
}

.irs--round .irs-bar {

    background-color:  #d9232d!important;   
}


#footer {
 
    background: #221f1f!important;
    color: #999;

    font-size:0.8rem
}