@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;600&display=swap');

body { font-family: 'IBM Plex Sans Thai', sans-serif; background-color: #0076b4;; color: #fff!important; cursor: default !important; line-height: 1.3;  }
a { cursor: pointer;color:#2ad5bb;}
/*commended*/
a:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
a:hover {
    color: #72fff2;
}
.color-white a:hover,a.color-white:hover  {
    color: ##72fff2;
}
/*commended*/
#gradathead {
     
    background-color: #ff7bac; /* For browsers that do not support gradients */
   /*  background-image: linear-gradient(to right, #FFFFFF 20%,#BC53A6,#843894 ); */
    background-image: linear-gradient(to right, #FFFFFF 20%,#e771ce,#790891 )
  }
  @media screen and (max-width:992px){

    #gradathead {
     
        background-color: #ff7bac; /* For browsers that do not support gradients */
        background-image: linear-gradient(to bottom, #BC53A6,#843894 );
        
      }
      #gradathead .navbar-brand .color-purple {color: #FFF!important;}
  }

  #bglightradius{
   
    background: rgb(241,163,188,);
      background: -moz-radial-gradient(circle, rgba(241,163,188,.5) 0%, rgba(241,163,188,0) 100%);
      background: -webkit-radial-gradient(circle, rgba(241,163,188,.5) 0%, rgba(241,163,188,0) 100%);
      background: radial-gradient(circle, rgba(241,163,188,.5) 0%, rgba(241,163,188,0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
  }


#gradientPurple{ 
    /* For browsers that do not support gradients */
    background-image: linear-gradient(to top,rgba(109,52,133,.5),rgba(109,52,133,.0));}
.bg-gradeient1 {background-image: linear-gradient(to right ,rgba(109,52,133,1),rgba(203,115,201,1));}
.bg-gradeient2 {background-image: linear-gradient(to right ,rgba(162,108,223,1),rgba(203,115,201,1));}
.bg-gradeient3 {background-image: linear-gradient(to right ,#70259f,#a244a4);}
.bg-grey{background: #e6e7e8;}
.color-deep-purple {color:rgba(55,32,93,1) !important}
.color-purple {color:#6f259f !important}
.color-lightypurple {color:#a144cf;}
.color-green {color:#009b7e  !important}
.color-white {color:white}
.bg-dark-purple span.color-white {color:#553590 !important}
.bg-charity { 
    background: url(../../img/charity/chality-bg.jpg) center no-repeat;min-height: 50vh; display: flex; align-items: center; justify-content: center;

}
.color-lightgrey{color:#888;}
.color-light-yellow{ color:#fffa3c !important}
.color-yellow{ color:#fdc43e !important}
.color-red{ color: rgb(221,64,90);}
.color-lightpurple { color:#d3bbff;}

.color-grey {color:#666;}
.color-gold {color:#e2ae0e;}
.fx-11 { font-size: 11px!important;}
.fx-12 { font-size: 12px!important;}
.fx-13 { font-size: 13px!important;}
.fx-14 { font-size: 14px!important;}
.fx-15 { font-size: 15px!important;}
.fx-16 { font-size: 16px!important;}
.fx-17 { font-size: 17px;}
.fx-18 { font-size: 18px;}
.fx-19 { font-size: 19px;}
.fx-20 { font-size: 20px;}
/*2022-10-22 str*/
.fx-22 { font-size: 22px;}
.fx-24 { font-size: 24px;}
/*2022-10-22 end*/
.fx-26 { font-size: 26px !important;}
.fx-30 { font-size: 30px !important;}
.fx-40 { font-size: 40px !important;}
.pl-60 {padding-left: 60px !important;}
.pt-10 { padding-top: 10px;}
.pr-2 { padding-right:0.5rem ;}
.mr-2 { margin-right: 0.5rem;}
.mr-3 { margin-right: 0.75rem;}
.mr-5 {margin-right: 2rem;}
.ml-10px  { margin-left: 10px;}
.ml-20px  { margin-left: 20px;}
.mr-20px  { margin-right: 20px;}
@media screen and (max-width:992px){
    .fx-20 {font-size: 14px;}
}
@media screen and (max-width:768px){
    .fx-30 { font-size: 20px !important;}
    .fx-22 {font-size: 16px !important;}
    .fx-18 { font-size: 14px !important;}
    html .mx-max-sm-auto { margin-left: auto !important;margin-right: auto !important;}
    li { font-size: 13px;}
}

@media screen and (max-width:550px){
html .mx-max-sm-auto { margin-left: auto !important;margin-right: auto !important;}
.fx-20 {font-size: 14px;}
.mb-5 { margin-bottom: 1.5rem !important;}
}
.font-weight-bolder {font-weight: 700;}
.font-weight-normal{ font-weight: 400;}
.text-left{ text-align: left !important;}
.text-right{ text-align: right !important;}
.text-center{ text-align: center;}
.text-indent { text-indent: 20px;}
.close {border:0 transparent solid ;}
.border-1 { border: 1px solid #eee;}
.border-purple-2 {border:#6f259f 2px solid;}
.border-purple {border-color:#6f259f;}
.card{ background-color: #fafafa;}
.box-shadow {box-shadow: 2px 2px 4px rgb(180, 180, 180);}
.bg-lightGrey{background-color:#eee ;} 
.bg-light { background-color:#f7f5ed !important;}



.bg-blue1{background-color:#0076b4 !important;}
.bg-blue2{background-color:#3dadd3!important;}
.bg-blue3{background-color:#2ad5bb;}


.logo-box{ border-right: #3dadd3 solid 1px;} 


@media screen and (max-width:1200px) and (min-width:767px) {
  h1.fx-26 { font-size: 20px !important;}

}
@media screen and (max-width:767px){
    .big-box  { padding-top: 60px !important;}
    .login-box {position: absolute; top: 0; right:-12px;padding: 8px; 
        width: 100% !important; background-color: #005482;}
    .login-box img{ width:35px ;}
    .logo-box { border: 0 solid #005482;}
    h1.fx-26 { font-size: 26px !important;text-align: center !important;}
}
@media screen and (max-width:549px){

    h1.fx-26 {font-size: 18px !important; text-align: center; background-color: #004164; margin-top: 10px;
        padding: 10px;border-radius:10px ; margin-left: 5px !important;margin-right: -20px !important;}
        .border-bottom-1{border-bottom: 0 !important;}
}

.border-bottom-1 {border-bottom: #3dadd3 solid 1px;}
.ul-list-inline li { list-style:none; float: right; padding:0 0 0 5px ;  }

.dropdown-menu-doctor { border-radius: 1rem;    inset: 20px 0px auto auto !important;border: 0; box-shadow:  0 1px 4px #005482;}

.dropdown-menu-doctor::before { content: "";
	width: 0;
	height: 0;
	border-width: 0 13.5px 15px 13.5px;
	border-color: transparent transparent #FFFFFF transparent;
	border-style: solid;
    position: relative;
    top: -40px;
    right: -310px;

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

    .dropdown-menu-doctor { width: 100vw !important; height: 100vh; position: fixed; top: -45px !important; border-radius: 0;   }
    .dropdown-menu-doctor::before { content: "";
       
        right: calc(50% - 13.5px);
    
    }
}
.table { border-collapse:separate;  border-spacing:0 10px;}
.table td { background-color: #FFF;border-top: solid 1px #eee; border-bottom: solid 1px #eee;}

.blue1{color:#0076b4;}
.blue2{color:#3dadd3;}
.blue3{color:#2ad5bb;}

.table th { border:  solid 1px #3dadd3 ;background-color: #3dadd3; color: #fff;height:60px; padding: 10px 20px;} 

.table tr {vertical-align: middle;}

 
.table th:nth-child(1),.table td:first-child {border-radius: 6px 0 0 6px !important;border-left: solid 1px #eee; width: 120px !important;; } 
.table th:last-child,.table td:last-child {border-radius: 0 6px  6px 0 !important;border-right: solid 1px #eee; width: 55px !important; text-align: center; } 
.table th:nth-child(2),.table td:nth-child(2){width: 40px!important;}
.vertical-middle { vertical-align: middle;}

.table tr:nth-of-type(odd) td, html body .table tr td  {background-color:#FFF !important;}

.table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: #FFF;
    color: var(--bs-table-striped-color);
}

  .dataTables_wrapper .row:first-child div:nth-child(2) { display: none;}  


.dataTables_wrapper label,.dataTables_info {color:#aaa}


/* .dataTables_info {display: none;} */
.overflow-x-auto-md {position: relative;}

.reverse { flex-direction: row-reverse;}

@media screen and (min-width:964px){
    .dataTables_wrapper .row:first-child div:nth-child(1) { position: absolute; bottom: 0; left: calc(50% - 200px);}
    
    }
@media screen and (max-width:964px) and (min-width:768px){
.dataTables_wrapper .row:first-child div:nth-child(1) { position: absolute; bottom: 0; left: calc(50% - 150px);}

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

            .overflow-x-auto-md {

                    overflow-x: auto;padding-bottom: 20px;position: relative;

            }
            .border-overflow-x { border: #ccc solid 1px;padding: 5px;}
            .border-overflow-x:after { content:""; position: absolute; display: block;
            right: 14px; top: 0; width: 20px; height: 100%;z-index: 9;
            background: rgb(204,204,204);
background: -moz-linear-gradient(90deg, rgba(204,204,204,0) 0%, rgba(204,204,204,0.5494572829131652) 100%);
background: -webkit-linear-gradient(90deg, rgba(204,204,204,0) 0%, rgba(204,204,204,0.5494572829131652) 100%);
background: linear-gradient(90deg, rgba(204,204,204,0) 0%, rgba(204,204,204,0.5494572829131652) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc",endColorstr="#cccccc",GradientType=1);}
            .table {min-width:600px}

            .p-5{padding:1.5em !important;}
            .py-5 { padding-top: 1rem !important;padding-bottom: 1rem !important;}
            
}


div.dataTables_wrapper div.dataTables_length label {
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
  }
  div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    display: inline-block;
  }
  div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
  }
  div.dataTables_wrapper div.dataTables_filter label {
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
  }
  div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
  }
  div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.85em;    text-align: right;
  }
  div.dataTables_wrapper div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: left;
  }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-start;
  }
  div.dataTables_scrollHead table.dataTable {
    margin-bottom: 0 !important;
  }
  div.dataTables_scrollBody > table {
    border-top: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .pagination li {margin-left: 5px; margin-right: 5px; border-radius: 6px;}

  .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #3dadd3;
    border-color: #3dadd3;
    border-radius: 6px;
}
.card { box-shadow: 0 0 15px #004d774d;}


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

    .dataTables_info {
        
        text-align: center!important;
        padding-bottom:10px ;
        padding-top: 0 !important;
      }
      ul.pagination{
        justify-content: center !important;
      }
    .sub-footer  { padding: 3px; font-size: 13px;}
}

label {color: #aaa;}

.btn-primary { background-color: #2ad5bb; border: #009b7e;}
.btn-primary:hover {background-color: #009b7e;}
.btn {text-shadow: 0 1px 1px #57575738; font-weight: 700;}
.btn-big {width:150px ;}

.container { min-height: 670px;}