@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');



body {
    
        /*background-color: #eceadf;*/
        
        background: linear-gradient(90deg, #21272b,  #16181a 100%);
        background-color: #21272b,;
      
        font-size: 14px;
        font-family: 'Lato','Noto Sans TC', sans-serif;
        color: #9e9e9e;
        letter-spacing: 1px;
        -ms-overflow-style: none;
       
       
    }
    
    /* width */
    *::-webkit-scrollbar {
        width: 5px;
      }
      
      /* Track */
      *::-webkit-scrollbar-track {
        background: #f1f1f1; 
      }
       
      /* Handle */
      *::-webkit-scrollbar-thumb {
        background: #888; 
      }
      
      /* Handle on hover */
      *::-webkit-scrollbar-thumb:hover {
        background: #555; 
      }

h1, h2, h3, h4, h5 ,h6{
   color: whitesmoke;

}


p{
        font-size:1rem;
   color:whitesmoke;
}

a{  color: whitesmoke;
       
}
a:hover{
        color:orange;
}

.member_list{
        line-height: 1.5rem;
        font-size: 1rem;
        font-weight: normal;
        color:gray;


}

.menu_sidebar{
   cursor: pointer;

}

.menu_sidebar:hover{
        color:black;
        background-color: #84B59F;
        border-radius: 1.5rem;
        transition: all 0.2s ease-in;
}


.m_active{
        color:rgb(182, 250, 66);
        font-weight: bold;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(182, 250, 66);
        border-radius: 1.5rem;
    }

    .member_active{
        color:rgb(182, 250, 66);
        font-weight: bold;
        border-width: 3px;
        border-style: solid;
        border-color:  #518882;
        background-color: whitesmoke ;
        border-radius: 1.5rem;
    }





#sidebar{
margin:0;
width:300px;
height:100vh;
line-height: 4rem;
font-size: 1rem;
overflow  : hidden;
position  :fixed;
background-color: #262b32;
top:0;


}

#wrapper {
        opacity   : 1;
        transition: all 0.25s ease-in;
        overflow  : hidden;
        position  : relative;
        z-index   : 1;
        height: 100vh;
        font-size:12px;

 }

#mainbody{
       
        padding   : 10px 0px;
        height:100vh;
        margin-left: 300px;
        overflow-y: auto;
        
  }

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

        #mainbody {
          margin-left:0px;

        }
        #sidebar{

                background-color:transparent
                }


      }


#header {
    padding   : 10px 0px;
    height: 50px;
    position  : fixed;
    top       : 0;
    left      : 300px;
    right     : 0;
    z-index   : 02;
    transition: all 0.3s ease-in;
 


    }
#footer{
        
        position  : fixed;
        bottom       : 0;
        width:300px;
        z-index   : 02;
        line-height: 2rem;
        transition: all 0.3s ease-in;

}

#mfooter{
        height:3rem;
        color:orange;
        background-color: #262b32;

        padding-top: 0.5rem;
}

.card{
        border-radius: 1rem;
        border-style: none;
        background-color: #262b32;
      
}
.btn{
        border-radius: 1.5rem;
}
.card-header{
        //background-color: transparent;
}


.settingmenu{
        min-width:fit-content;
        text-align:left;
        line-height:60px;
        font-size:1rem;
        color:gray;
    
    }

    
.menu_set{
        font-family: 'Lato','Noto Sans TC', sans-serif;
        font-size:1rem;
        cursor: pointer;
    }

.s_active{
        color:orange;
        font-weight:lighter;
    }

.menu_set:hover{
        color:whitesmoke;
        font-weight:lighter;
   
    }

.pgtadd{
        border-bottom-style: solid ;
        border-color: rgb(184, 184, 184); 
        border-width: 1px; 
        height:3rem;
        margin-bottom: 1rem;
}

.contractcard{
        cursor:pointer;
        line-height: 0.5rem;
        border-color: orange;
        border-style: solid;
}
.contractcard:hover{
        background-color: rgba(255, 166, 0, 0.034);
}

.infobox{
        display: inline-block;
        border-right:1px solid; 
        padding-left:2rem;
        padding-right:2rem;
}

.modal-content{
        background-color: #312e2e52;
        backdrop-filter: blur(10px);
        border-radius: 1rem;
}