body.body-login{
    
    background-image: url('../../assets/images/banner-login.jpeg');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;

}
body{
    margin: 0;
    padding: 0;   
    font-family: 'DBHeavent';
    font-size: 14px;
    background: linear-gradient(120deg,#E0DF9F,#09B69A);
    height: 100vh;
    overflow: auto;
    
}
.login{
    position: absolute;
    top : 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 350px; 
    height: 450px;*/
    background: transparent;
    /* background: #FFFFFF; */
    border-radius: 5px;
}
.login .header {
    /* background-image: url('../images/3.png'); 
    background-size: cover;*/
    position: relative;
    background: transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /* height: 100px; */

}

.login .header img{
    height: 160px;
    margin: 0 auto;
    display: block;
}
.login h1{
    /* position: absolute;
    top: 190px;
    left: 10%; 
    color: #2691d9;*/
    color: #FFFFFF;
    font-size: 50px;
    /* margin: 1.75rem 0; */
    font-family: 'Sarabun';
    text-align: center;
}
.login form{
    position: relative;
    /* padding: 0 40px; */
    box-sizing: border-box;
    max-width: 400px;
    margin: 0 auto;
}
.login form .contact-admin{
    margin: 1rem 0;
    text-align: center;
    display: block;
    width: 100%;
    color: #000033;
    font-size: 1rem;
}
/* form .txt_field {
    position: relative;
    width: 250px;
    border-bottom: 2px solid #adadad;
    margin: 20px 0; 

}*/
.txt_field input {
    border-radius: 0;
    border-color: #e7ecee;
    /* border: 0;
    width: 100%;
    padding:  0 5px;
    height: 20px;
    font-size: 16px;
    border: none;
    background: none;
    outline: none; */
}
.txt_username input{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.txt_password input{
    margin-bottom: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.txt_field .fa-low-vision{
    position: absolute;
    font-size: 14px;
    color: grey;
    right: 5px;
     margin: -20px 0 0 230px; 
    cursor: pointer;

}

.txt_field label {
    position: absolute;
    top: 50%;
    width: 150%;
    left: 5px;
    color: #adadad;
    transform:translateY(-50%);
    font-size: 20px;
    pointer-events: none;
    transition: .5s;
   
}
.txt_field span::before{
    content:'';
    position: absolute;
    top:22px;
    left: 0;
    width: 0%;
    height: 2px;
    background:#2691d9;

}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
    top: -10px;
    color: #2691d9;

}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
 width: 250px;
}
.Securitycode{
    margin: -5px 0 20px 5px;
    font-size: 25px;
    color:black;

}
.login input[type="submit"] {
    width: 100%;
    display: block;
    margin: 1rem auto;
    border: 1px solid #2691d9;
    background: #2691d9;
    border-radius: 2px;
    font-size: 16px;
    color: #e9f4fb;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    /* width: 100%;
    height: 30px;
    border:  1px solid;
    background: #2691d9;
    border-radius: 2px;
    font-size: 24px;
    color: #e9f4fb;
   font-weight: 700;
   cursor: pointer;
   outline: none; */
} 
input[type="submit"]:hover{
    /* border-color: #2691d9; */
    transition: .5s;
}

.login input[type="submit"]:hover{
    border-color: #2691d9;
}

*{
 margin: 0;
 padding: 0;
 list-style:none;
 text-decoration: none;
 box-sizing: border-box;   
 font-family: 'Sarabun','Noto Sans Thai', sans-serif;
 font-size: 14px;
 
}
body{
 background: #fff;

}

.wrapper .header{
    z-index: 1;
    background: #175D68;
    position: fixed;
    width: calc(100% - 0%);
    height: 70px;
    top:0;
}

.wrapper .header .header-menu{
    width: calc(100% - 0%);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.wrapper .header .header-menu .title{
    color:#fff;
    font-size: 45px;
    /* margin-left: 2%; */
    width: 190px;
    text-transform: uppercase;
    font-weight: 900;
    font-family: 'Sarabun';
    
   
}
.wrapper .header .header-menu .sidebar-btn{
 color:#fff;
 position: absolute;
 margin-left: 230px;
 font-size: 22px;
 font-weight: 900;
 cursor: pointer;
 transition: 0.3s;
 transition-property: color;

}
.wrapper .header .header-menu p{
    color:#fff;
    position: absolute;
    margin-top: 20px;
    margin-left: 270px;
    font-size: 22px;
    /* font-family: 'DBHeaventBold'; */
}

/* .wrapper .header .header-menu .sidebar-btn:hover{
 color: aqua;

} */
.wrapper .header .header-menu ul{
    display: flex;
    margin-top: 1rem;
}

.wrapper .header .header-menu img{
    width: 70px;
    height: 70px;
    margin: 0 auto;
    text-align: center;
    display: block;

}
.wrapper .header .header-menu ul li a{

    /* background: #fff;  */
    color: #fff;
    display: block;
    margin: 0;
    padding: 10px;
    font-size: 22px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: 0.3s;
}
.wrapper .header .header-menu ul li a:hover{
     background: #4ccee8;
     color: #fff;
}
.wrapper .header .header-menu ul li a .unread-messages{
    background-color: #F06258;
    border-radius: 50rem;
    top: 25px;
    transform: translate(-50%, -50%);
    position: absolute;
    display: inline-block;
    padding: 0.1em 0.4em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.wrapper .header .header-menu ul li a.bell .unread-messages{
    right: 90px; 
}

.wrapper .header .header-menu ul li a.envelope .unread-messages{
    right: 45px; 
}

.wrapper .sidebar{
    z-index: 1;
    /* background: linear-gradient(0deg,#E0DF9F,#09B69A); 
    background: linear-gradient(0deg,#8ac09e 0 3%,#1d9b9a 30% 100%);*/
    background: linear-gradient(0deg,#8ac09e ,#1d9b9a );
    position: fixed;
    top: 70px;
    width: 310px;
    height: calc(100% - 70px);
    /* height: 100%; */
    transition: 0.3s;
    transition-property: width;
    overflow-y: auto;
}
.wrapper .sidebar .sidebar-menu{
    overflow: hidden;
    padding:0;
}
.wrapper .sidebar .sidebar-menu .profile_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.wrapper .sidebar .sidebar-menu .profile_info img{
     margin: 20px 0;
     width : 100px;
     height: 100px;
     background:#fff;
     border-radius: 50%;

}
.wrapper .sidebar .sidebar-menu .profile_info p{
  color:#fff;
  font-size: 25px;
  margin:  10px 0;
}
.wrapper .sidebar .sidebar-menu .item{
    /* width: 250px; */
    overflow: hidden;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn {
    
    display:block;
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    position: relative;
    /* left: 20px;
    padding: 5px 30px; */
    transition: 0.3s;
    transition-property: color;
    text-decoration: none;
    /* font-family: 'DBHeaventBold'; */
}

.wrapper .sidebar .sidebar-menu .item .menu-btn.home {
    margin: 1rem auto;
    width: 50px;
    display: block;
    text-align: center;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn span{
    font-size: 18px;
    /* font-family: 'DBHeaventBold'; */
}
.wrapper .sidebar .sidebar-menu .item .menu-btn .text-home{
    font-size: 14px;
    
}
.wrapper .sidebar .sidebar-menu .item .translate{
    left: 20px;
    display:block;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    padding: 5px 30px;
    transition: 0.3s;
    transition-property: color;
    margin-right: 20px;
 
} .wrapper .sidebar .sidebar-menu .item .translate i{
    margin-right: 10px;
 
} 
.wrapper .sidebar .sidebar-menu .item .translate .th{
  
    margin-top: -30px;
    margin-left: 75px;
}

/*.wrapper .sidebar .sidebar-menu .item .menu-btn.active,
.wrapper .sidebar .sidebar-menu .item .menu-btn:hover:not(.active){
 
    background: #fff;
    color: black;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px; 
    padding: 5px 30px;
}*/

/* .wrapper.collapse .sidebar .sidebar-menu .item .menu-btn.active{
    padding: 5px 15px;
    left: 5px;
}
.wrapper.collapse .sidebar .sidebar-menu .item .menu-btn:hover{
    background: #fff;
    color: black;
    padding: 5px 15px;
    margin-left: -15px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    height: 35px;
} */

.wrapper .sidebar .sidebar-menu .item .menu-btn.home .svg-inline--fa:not(.fa-chevron-down){
    margin-right:0;
    width: 40px;
    height: 40px;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn .svg-inline--fa:not(.fa-chevron-down){
    margin-right: 15px;
    width: 25px;
    height: 25px;
}

.wrapper .sidebar .sidebar-menu .item .sub-menu{
    padding: 5px;
}
.wrapper .sidebar .sidebar-menu .item .sub-menu a{
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    padding: 0;
    min-width: 220px;
}
.wrapper .sidebar .sidebar-menu .item .title{
    background: #175D68;
}
.wrapper .sidebar .sidebar-menu .item .sub-menu a .svg-inline--fa{
    margin-right: 10px;
}
/*
.wrapper .sidebar .sidebar-menu .item .menu-btn .fa-chevron-down{
    width: 15px;
    right: 30px;
    top: 5px;
    position: relative;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn .drop-down{
    float: right;
    font-size: 12px;
    margin-top: 3px;
  
}


.wrapper .sidebar .sidebar-menu .item .sub-menu{
     overflow: hidden;
     max-height: 0;
     transition: 0.3s;
     transition-property: background, max-height;
}
.wrapper .sidebar .sidebar-menu .item .sub-menu a{
    display: block;
    position: relative;
    color: #fff;
    white-space: nowrap;
    font-size: 20px;
    padding: 5px;
    border-bottom: 1px solid #8FC5E9;
    transition: 0.3s;
    transition-property: background;
    text-decoration: none;

}
.wrapper .sidebar .sidebar-menu .item .sub-menu a:hover{
    left: 20px;
    background: #fff;
    color: black;
    padding: 5px;

    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;

}
.wrapper .sidebar .sidebar-menu .item .sub-menu i{
    padding-right: 50px;
    font-size: 23px;
}

.wrapper .sidebar .sidebar-menu .item:target .sub-menu{
    max-height: 500px;
}
*/

.wrapper .main-container{
    width: calc(100% - 300px);
    margin-top: 70px;
    margin-left: 300px;
    padding: 1.75rem;
    padding-bottom: 0;
    padding-right: 0;
    background: #fff;
    background-size: cover;
    height: auto;
    transition: 0.3s;
}
.wrapper .main-container .line {
    position: relative;
    width: 1000px;
    height: 1200px; 
    margin: 0 auto;
  
}
/* .wrapper .main-container .line .card{
    max-width: 900px;
    margin: 0 auto;
} */
.wrapper .main-container .line .bgline {
    position: absolute;
    margin-top: 10px ;
    margin-left: 60px;
    width: 1000px;
    height: 1300px;
    border: 2px solid #999999;
    border-radius: 5px;
}

.wrapper .main-container .line .bgline .txt_field {
    position: relative;
    width: 250px;
    left: -200px;
    border-bottom: 2px solid #adadad;
    margin: 20px 0;
}

.wrapper .main-container .line .bgline .txt_field input {
    width: 100%;
    padding:  0 5px;
    height: 23px;
    font-size: 16px;
    border: none;
    background: none;
    outline: none;
}


.wrapper .main-container .line .bgline .txt_field i{
    position: absolute;
    font-size: 16px;
    color: grey;
    margin: 0 0 0 -30px;
  

}

.wrapper .main-container .line .bgline .txt_field label {
    position: absolute;
    top: 50%;
  left: -90px;
    color: #adadad;
    transform:translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .5s;
   
}
.wrapper .main-container .line .bgline .txt_field .style12 {	 
    position: absolute;
    width: 50px;
    height: 25px;
    border:  1px solid;
    background:#FFFFFF;
    border-radius: 2px;
    font-size: 16px;
    color:#adadad;
   font-weight: 300;
   cursor: pointer;
   outline: none;
}
.wrapper .main-container .line .bgline .txt_field2 {
    position: relative;
   top: -50px;
   left: 250px;
    width: 250px;
    border-bottom: 2px solid #adadad;

}

.wrapper .main-container .line .bgline .txt_field2 input {
    width: 100%;
    padding:  0 5px;
    height: 23px;
    font-size: 16px;
    border: none;
    background: none;
    outline: none;
}


.wrapper .main-container .line .bgline .txt_field2 i{
    position: absolute;
    font-size: 16px;
    color: grey;
    margin: 0 0 0 -30px;
  

}

.wrapper .main-container .line .bgline .txt_field2 label {
    position: absolute;
    top: 50%;
  left: -125px;
    color: #adadad;
    transform:translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .5s;
   
}
.wrapper .main-container .line .bgline .txt_field2 .style17 {	 
    position: absolute;
    width: 50px;
    height: 25px;
    border:  1px solid;
    background:#FFFFFF;
    border-radius: 2px;
    font-size: 16px;
    color:#adadad;
   font-weight: 300;
   cursor: pointer;
   outline: none;
}
.wrapper .main-container .line .bgline .txt_field3 {
    position: relative;
    top: -20px;
    left: -200px;
    width: 250px;
    border-bottom: 2px solid #adadad;

}

.wrapper .main-container .line .bgline .txt_field3 input {
    width: 100%;
    padding:  0 5px;
    height: 23px;
    font-size: 20px;
    border: none;
    background: none;
    outline: none;
}


.wrapper .main-container .line .bgline .txt_field3 i{
    position: absolute;
    font-size: 20px;
    color: grey;
    margin: 0 0 0 -30px;
  

}

.wrapper .main-container .line .bgline .txt_field3 label {
    position: absolute;
    top: 50%;
  left: -80px;
    color: #adadad;
    transform:translateY(-50%);
    font-size: 20px;
    pointer-events: none;
    transition: .5s;
   
}
.wrapper .main-container .line .bgline .txt_field3 .style14 {	 
    position: absolute;
    width: 50px;
    height: 25px;
    border:  1px solid;
    background:#FFFFFF;
    border-radius: 2px;
    font-size: 20px;
    color:#adadad;
   font-weight: 300;
   cursor: pointer;
   outline: none;
}

.wrapper .main-container .line .bgline .txt_field4 {
    position: relative;
   top: -45px;
   left: 250px;
    width: 250px;
    border-bottom: 2px solid #adadad;

}

.wrapper .main-container .line .bgline .txt_field4 input {
    width: 100%;
    padding:  0 5px;
    height: 23px;
    font-size: 20px;
    border: none;
    background: none;
    outline: none;
}


.wrapper .main-container .line .bgline .txt_field4 i{
    position: absolute;
    font-size: 20px;
    color: grey;
    margin: 0 0 0 -30px;
  

}

.wrapper .main-container .line .bgline .txt_field4 label {
    position: absolute;
    top: 50%;
  left: -125px;
    color: #adadad;
    transform:translateY(-50%);
    font-size: 20px;
    pointer-events: none;
    transition: .5s;
   
}
.wrapper .main-container .line .bgline .txt_field4 .style15 {	 
    position: absolute;
    width: 50px;
    height: 25px;
    border:  1px solid;
    background:#FFFFFF;
    border-radius: 2px;
    font-size: 20px;
    color:#adadad;
   font-weight: 300;
   cursor: pointer;
   outline: none;
}
.wrapper .main-container .line .bgline .bglinemember{
    position: absolute;
    margin-left: 250px;
    width: 452px;
    height: 120px;
    border: 2px solid #999999;
    border-radius: 5px;
}
.wrapper .main-container .line .bgline .bgline2{
    position: absolute;
    margin-top: 150px ;
    margin-left: 20px;
    width: 950px;
    height: 680px;
    border: 1px solid #999999;
    border-radius: 5px;
}
.wrapper .main-container .line .bgline .bgline3{

    position: absolute;
    margin-top: 850px ;
    margin-left: 250px;
    width: 503px;
    height: 250px;
    border: 1px solid #999999;
    border-radius: 5px;
}
.wrapper .main-container .line .bgline .bgline3 .linebox{
    border-bottom: 1px solid #999999;
  
}

.wrapper.collapse .sidebar{
    width:  65px;
}

.wrapper.collapse .sidebar .sidebar-menu.item .menu-btn{
font-size:  20px;

}
.wrapper.collapse .sidebar .sidebar-menu.item .sub-menu i{
    font-size:  20px;
    padding-left: 3px;  
}
.wrapper.collapse .sidebar .sidebar-menu .profile_info{
    display: block;
    padding: 0 15px;
}
.wrapper.collapse .sidebar .sidebar-menu .profile_info svg{
    width: 40px;
}

.wrapper.collapse .sidebar .sidebar-menu .profile_info p{
    display: none;
}
.wrapper.collapse .sidebar .sidebar-menu .item .menu-btn{
    padding: 5px 0;
}
.wrapper.collapse .sidebar .sidebar-menu .item .translate{
    display: none;
}     
.wrapper.collapse .sidebar .sidebar-menu .item .menu-btn .svg-inline--fa{
    margin-right: 25px;
}
.wrapper.collapse .main-container{
    width: calc(100% - 0px);
    margin-left: 60px;
    padding: 1.75rem 0;
}



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

   
    .wrapper .header .header-menu{
        width: calc(100% - 0%);
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
    }
    .wrapper .sidebar{
        z-index: 1;
        background:linear-gradient(0deg,#E0DF9F 10%,#09B69A 100%);
        /* background: linear-gradient(0deg,#E0DF9F,#09B69A); */
        position: fixed;
        top: 70px;
        /* width: 0px; */
        height: calc(100% - 9%);
        transition: 0.3s;
        transition-property: width;
        overflow-y: auto;
    }

    /* .wrapper.collapse .sidebar{
        width:  240px;
    } 

     .wrapper .main-container{
        width: calc(100% - 0px);
        margin-left: 0px;
        min-width: 300px;
        padding: 20px;
    }
    .wrapper.collapse .main-container{
        width: calc(100% - 230px);
        margin-left: 230px;
        padding: 15px;
        background: #fff;
        background-size: cover;
        height: 100vh;
        transition: 0.3s;
    }*/

    .wrapper .main-container .table-shadow{
        width: 300px;
    }

   
    
    .wrapper .header .header-menu p{
       
        
      display: none;
       
    }
    .wrapper .header .header-menu ul li a{
    
       margin-right:(100% - 0%);
    
    
    }
    .wrapper .header .header-menu .title{
        
       margin-left: 10px;
    }
    .wrapper .sidebar{
        top: 70px;
       
    }

    .wrapper .main-container .main2{
        margin-top: 10px ;
        margin-left: 0px ;
    
    }
    .wrapper .header .header-menu .sidebar-btn{
        margin-left: 190px;
    }
    .register .card-register .col-form-label{
        padding-bottom: 0;
    }
    .register .card-register .card-body .block-label,
    .register .card-register .card-body .block-input{
        width: 100%;
    }
}
#form1{

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.addminber {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #22242A;
}
.addminber p {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    margin-left: 25px;
    margin-top: 5px;
}
.bgadd {
    border: 1px solid #22242A;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.style1 {
    font-size: 14px;
	font-weight: bold;
}
textarea.style1,
input.style1 {
    font-size: 14px; 
    font-weight: normal;
}
.style1 p{
    margin-left: 25px;
    margin-top: 10px;
}

.style2{
	font-size: 14px;
	color:#999999;
}

.style2 p{
    margin-left: 25px;
    margin-top: 10px;
}
.style2 .p1{
    font-size: 14px;
	color:#FF0000;
}
input.style3{
    width: 50px;
	font-size: 14px;
}
.style4{
    width: 200px;
    font-size: 14px;
}
.style6{
    font-size: 18px;
	color:#999999;
}
.style6 p{
    margin: 15px 0 15px 25px;
}

input.style7 {
    width: 150px;
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    border:  1px solid;
    background:#28A745;
    font-size: 20px;
    color: #e9f4fb;
    font-weight: 300;
    cursor: pointer;
    outline: none;
}
input.style8 {
    width: 150px;
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    border:  1px solid;
    background:#DC3545;
    font-size: 14px;
    color: #e9f4fb;
    font-weight: 300;
    cursor: pointer;
    outline: none;
}
.style9 {
      
    width: 250px;
    height: 35px;
    border:  1px solid;
    background:#00CCFF;
    border-radius: 2px;
    font-size: 14px;
    color: #e9f4fb;
    font-weight: 300;
    cursor: pointer;
    outline: none;
}
/* #Submit3,
#Submit4{  
    
    font-family: 'DBHeaventBold';
} */
#Submit5{
    width: 250px;
    border-radius: 5px;
    padding: 5px;
    height: 40px;
    border:  1px solid;
    background:#007AD9;
    border-radius: 2px;
    font-size: 14px;
    color: #e9f4fb;
    font-weight: 300;
    cursor: pointer;
    outline: none; 
   /* font-family: 'DBHeaventBold'; */
	
}
.addminber{
 /* border-top-left-radius: 20px;
 border-top-right-radius: 20px; */
 background-color:#22242A;
 
}

.bgadd{
 border: 1px solid #22242A;
  /* border-top-left-radius: 20px;
 border-top-right-radius: 20px; */
}
.homepage .style4,
.homepage .style1,
.homepage table > tbody > tr > td{
    /* font-family: 'DBHeaventBold'; */
    padding: 5px;
}
.homepage .style3 {
    width: 100px;
    height: 30px;
    border: 1px solid;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    outline: none;
    /* font-family: 'DBHeaventBold'; */
}
.homepage .style6 {
    color: #000033;
    font-size: 18px;
    /* font-family: 'DBHeaventBold'; */
}
.homepage .style6 div{

    font-size: 18px;
}

.homepage #url,.homepage #url2{
    max-width: 400px;
}
.font-bold-it{
    font-family: 'DBHeaventBoldIt';
}

.register .card-register{
    /* border: 1px solid #707070;
    border-radius: 10px; */
    max-width: 920px;
    margin: 0 auto;
    border: 1px solid #707070;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.register .card-register .card-header{
    background: #333333;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    padding: 15px;
}

.register .card-register .title{
    font-size: 1rem;
    margin: 0.5rem 0;
    font-weight: bold;
}

.register .card-register .form-control:not(textarea) {
    height: 30px;
    line-height: 1;
    padding: 5px;
    border-radius: 2px;
}
.register .card-register .form-select{
    padding: 5px;
    line-height: 1;
    border-radius: 2px;
}
.register .card-register .input-file-textarea{
    margin-top: 10px;
    border-radius: 2px;
}

.register .card-register .col-form-label{
    width: 110px;
}

.register .card-register .form-control-search{ 
    float: left;
    width: calc(100% - 60px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.register .card-register .btn.btn-search{
    float: left;
    width: 60px;
    height: 30px;
    padding: 0px 10px;
    border: 1px solid #aaa;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.register .card-register .block-label{
    width: 20%;
    min-width: 110px;
    padding: 0 15px;
    margin-top: 10px;
}
.register .card-register .block-input{
    width: 55%;
    padding: 0 15px;
    margin-top: 10px;
}
.register .card-register .block-label.label-row{
    width: 100px;
    padding-left: 5px;
}

.register .card-register .btn.btn-success{
    width: 150px;
    background: #28A745;
    margin-right: 10px;
}

.register .card-register .btn.btn-danger{
    width: 150px;
    background: #DC3545;
    margin-right: 10px;
}

.register .card-register .btn.btn-info{
    width: 250px;
    background: #007AD9;
    color:#fff;
}

.fa-sign-out-alt{
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}
.table-shadow.wrapper .header .header-menu p{
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    border-radius: 5px;
    padding: 20px 0;
}
.style8{
    padding: 7px;
    width: 35px;
    height: 35px;
    color: #fff;
    background: #000;
}
.line1 svg{
    width: 50%;
}
.line2 svg{
    width: 50%;
}
.line3 svg{
    width: 50%;
}
.input-search{
    width: 200px;
    padding: 5px 25px;
    height: 30px;
    font-size: 14px;
    border: none;
    background: none;
    outline: none;
    border-bottom: 1px solid #A6ACAF;
}
.line .block-label-search{
    width: 100px;
    text-align: right;
}
.line .block-label-search .col-form-label{
    color: #A6ACAF;
    padding: 0;
    font-size: 14px;
}
.block-input-search .fa-search{
    left: 25px;
    color: #A6ACAF;
    position: relative;
    font-size: 16px;
}
.line .btn-line-search{
    padding: 0 10px;
}
.line .block-input-search{
    width: 250px;
}
.table-position{
    border: 1px solid #A6ACAF;
    border-radius: 10px;
    width: 500px;
    margin: 0 auto;
}
.table-position table tr:not(:last-child) > td{

    border-bottom: 1px solid #A6ACAF;
}
.bglinemember table tr > td{
    padding: 5px;
}
.collapse:not(.show) {
    display: block !important;
}
.label-birthday{
    width: 200px;
    text-align: right;
}
.register .card-register .block-input.input-textarea{
    padding: 10px 5px;
}
.btn-address{
    margin-left: 15px;
}
.icon{
    height: 37px;
    width: 25px;
    display: inline-block;
    vertical-align: -0.125em;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.icon1{
    background-image: url('../../assets/images/icon/1.png');
}
.icon2{
    background-image: url('../../assets/images/icon/2.png');
}
.icon3{
    background-image: url('../../assets/images/icon/3.png');
}
.icon4{
    background-image: url('../../assets/images/icon/4.png');
}
.icon5{
    background-image: url('../../assets/images/icon/5.png');
}
.icon6{
    background-image: url('../../assets/images/icon/6.png');
}
.icon7{
    background-image: url('../../assets/images/icon/7.png');
}
.icon8{
    background-image: url('../../assets/images/icon/8.png');
}
.icon9{
    background-image: url('../../assets/images/icon/9.png');
}
.icon10{
    background-image: url('../../assets/images/icon/10.png');
}
.icon11{
    background-image: url('../../assets/images/icon/11.png');
}
.icon12{
    background-image: url('../../assets/images/icon/12.png');
}
.icon13{
    background-image: url('../../assets/images/icon/13.png');
}
.icon14{
    background-image: url('../../assets/images/icon/14.png');
}
.icon15{
    background-image: url('../../assets/images/icon/15.png');
}
.icon16{
    background-image: url('../../assets/images/icon/16.png');
}
.icon17{
    background-image: url('../../assets/images/icon/17.png');
}
.icon18{
    background-image: url('../../assets/images/icon/18.png');
}
.icon19{
    background-image: url('../../assets/images/icon/19.png');
}
.icon20{
    background-image: url('../../assets/images/icon/20.png');
}
.icon21{
    background-image: url('../../assets/images/icon/21.png');
}
.icon22{
    background-image: url('../../assets/images/icon/22.png');
}
footer{
    /* position: fixed; */
    bottom: 0;    
    margin-top: 40px;
    z-index: 999;
    width: 100%;
    text-align: center;
    background: transparent;
    color: #666;
    /* background: #175d68;
    color: #fff; */
}
footer p{
    margin: 10px 0;    
    padding: 10px 0;
}

.start{
    background: #fff;
    color: #22b69a;
    width: calc(100% - 50px);
    display: inline-block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0 10px 0 20px;
    float: right;
    margin-right: 10px;
    height: 37px;
}

.between{
    background: #fff;
    color: #22b69a;
    width: calc(100% - 50px);
    display: inline-block;
    vertical-align: top;
    padding: 0 10px 0 20px;
    float: right;
    margin-right: 10px;
    height: 37px;
}

.end{
    background: #fff;
    color: #22b69a;
    width: calc(100% - 50px);
    display: inline-block;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0 10px 0 20px;
    float: right;
    margin-right: 10px;
    height: 37px;
}
.line2{

    line-height: 1rem;
}
.menu-number{
    width: 25px;
    height: 25px;
    position: absolute;
    left: 35px;
    margin-top: 5px;
    color: #1d5d67;
    text-align: center;
    border-radius: 50%;
    line-height: 1.25rem;
}
.bg-fdf4bd{
    background: #fdf4bd; 
}
.bg-b0d88f{
    background: #b0d88f; 
}
.bg-f2c9db{
    background: #f2c9db; 
}
.bg-dcc5e1{
    background: #dcc5e1; 
}
.bg-c4e7ed{
    background: #c4e7ed; 
}
.background-size-150{
  background-size: 150%;
}
.background-size-120{
  background-size: 150%;
}
.background-size-80{
  background-size: 80%;
}
.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu .icon{
    width: 40px;
    background-size: 60%;
}

.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu .start,
.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu .between,
.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu .end,
.wrapper.collapse .sidebar .sidebar-menu .item .menu-btn.title span{
   display: none;
}

.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu .icon.background-size-150{
    background-size: 90%;
}
.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu .icon.background-size-120{
    background-size: 80%;
}
.wrapper.collapse .sidebar .sidebar-menu .item .sub-menu .icon.background-size-80{
    background-size: 50%;
}
.wrapper.collapse .header .header-menu .sidebar-btn{
    margin-left: 50px;
}
.wrapper.collapse .header .header-menu .title{
    margin-left: -20px;
    width: 70px;
}
.wrapper.collapse .header .header-menu p{
    margin-left: 90px;
}
table.mobile{
    display: none;
    width: fit-content;
} 
table.desktop{
    /* display: block; */
}
@media screen and (max-width: 768px) {
    table.mobile{
        display: block !important;
    } 
    table.desktop{
        display: none !important;
    }
    .wrapper .sidebar .sidebar-menu .item .sub-menu .icon{
        width: 40px;
        background-size: 60%;
    }
    
    /* .wrapper .sidebar .sidebar-menu .item .sub-menu .start,
    .wrapper .sidebar .sidebar-menu .item .sub-menu .between,
    .wrapper .sidebar .sidebar-menu .item .sub-menu .end{
       display: none; 
    }*/
    
    .wrapper .sidebar .sidebar-menu .item .sub-menu .icon.background-size-150{
        background-size: 90%;
    }
    .wrapper .sidebar .sidebar-menu .item .sub-menu .icon.background-size-120{
        background-size: 80%;
    }
    .wrapper .sidebar .sidebar-menu .item .sub-menu .icon.background-size-80{
        background-size: 50%;
    }
    .wrapper .header .header-menu .sidebar-btn{
        margin-left: 50px;
    }
    .wrapper .header .header-menu .title{
        margin-left: -20px;
        width: 70px;
    }
    .wrapper .header .header-menu p{
        margin-left: 90px;
    }
    .wrapper .main-container{
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }
    
}


.card.card-order{
    max-width: 920px;
    border: 0;
}

.card-order .card-header{
    background: none;
    text-align: center;
    border: 0;
}

.card-order .card-body{
    min-height: 560px;
}
.w-100px{
    width: 100px;
}
.w-150px{
    width: 150px;
}
.label-type-order{
    width: 30%;
    min-width: 150px;
    text-align: center;
}
.table-order>:not(caption)>*>* {
    padding: 0.5rem 0.5rem; 
    border-bottom-width: 1px;
}
.imagepos{
    font-size: 2.75rem;
}
.imagepos .fa-user-tie:nth-child(1){
    color: #ebde31;
}
.imagepos .fa-user-tie:nth-child(2){
    color: #abd56a;
}
.imagepos .fa-user-tie:nth-child(3){
    color: #df9cad;
}
.imagepos .fa-user-tie:nth-child(4){
    color: #b19aaa;
}
.imagepos .fa-user-tie:nth-child(5){
    color: #5cd8af;
}
.login footer {
    /* position: fixed; */
    bottom: 0;
    margin-top: 40px;
    z-index: 999;
    width: 100%;
    text-align: center;
    background: transparent;
    color: #666;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn.title .fa-circle{
    margin: 0 5px;
    width: 15px;
    height: 15px;
}
.style13{
    width: 100px;
    height: 28px;
    border: 1px solid;
    background: #FFFFFF;
    border-radius: 2px;
    font-size: 14px;
    color: #666666;
    font-weight: 300;
    cursor: pointer;
    outline: none;
}
table tr td input.form-control{
    height: 30px;
    line-height: 1;
    padding: 5px;
    border-radius: 2px;
}
table tr td button.btn-search-member{
    width: 120px;
    height: 30px;
    padding: 0 15px;
    margin-left: 25px;
    background: #007AD9;
    color: #fff;
}
.table-member tr td {
    padding:5px;
}
.label-transferpoint{
    width: 150px;
    padding: 7px;
    text-align: right;
    float: left;
}
input.input-transferpoint{    
    width: 210px;
    height: 35px;
    padding: 5px;
    margin: 5px;
    border-radius: 2px; 
}
.block-transferpoint .btn-transferpoint{
    height: 35px;
    margin: 5px;
    padding: 0px 15px;
    width: 120px; 
} 
.block-transferpoint .btn{
    width: 100px;
}


@media screen and (max-width: 768px) {
    .wrapper.collapse .main-container {
        width: calc(100% - 73px);
    }
    .wrapper.collapse .main-container,
    .wrapper .main-container{
        margin-left: 70px;
        margin-top: 40px;
    }

    .card .form-reset-password .form-password{
        width: calc(100% - 100px); 
    } 
}
.sub-menu .svg-inline--fa{
    height: 37px;
    width: 25px;
    padding: 0 4px;
    display: inline-block;
    vertical-align: -0.125em;
}
.submit-style3{
    
    width: 100px;
    height: 30px;
    border: 1px solid;
    background: #336600;
    border-radius: 2px;
    font-size: 14px;
    color: #e9f4fb;
    font-weight: 300;
    cursor: pointer;
    outline: none;
    margin: 20px auto;

}
.icon-login{
    padding: 5px;
    font-size: 3rem;
    
}
.icon-login1{
    padding: 5px;
    font-size: 3rem;
    color: #33FF00;
}
.icon-login2{
    padding: 5px;
    font-size: 3rem;
    color: #000066;
}
.icon-login3{
    padding: 5px;
    font-size: 3rem;
    color: #FF0000;
}
.icon-login4{
    padding: 5px;
    font-size: 3rem;
    color: #FF6633;
}
.icon-login5{
    padding: 5px;
    font-size: 3rem;
    color: #000000;
}
.icon-login6{
    padding: 5px;
    font-size: 3rem;
    color: #00FFFF;
}
.icon-login7{
    padding: 5px;
    font-size: 3rem;
    color: #000033;
}
.icon-login:hover{
    color: #1d9b9a;
}
.form-reset-password .form-password{
    width: 300px; 
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
} 
.label-order-wallet-point{
    max-width: 200px;
    width: 50%;
}

.label-order-company{
   width: 100%;
    max-width: 150px;
}

ul>.nav-item.tab-menu-personal>a.nav-link.active,
ul>.nav-item.tab-menu-personal>a.nav-link:hover,  
ul>.nav-item.tab-menu-personal>a.nav-link:focus{

}
.bgline2 table a{
    text-decoration: none;
}
.dflex{
    display: flex;
}
.DBHeavent{
    font-family: 'DBHeavent' !important;
}
.amount-order-wallet-point{
    width: 200px;
}
.address label{
    width: 120px;
}