/* start section login  */
.login_text_sub_header {
    color: #255da9;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0px !important;
}

.login_text_title {
    color: #474747;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 16px;
}


.login_submit {
    color: #ffffff;
    background-color: #185aa6;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 0px;
    border-radius: 5px;
}

.login_submit:hover {
    color: #ffffff;
    background-color: #1d6dc9;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 16px;

}

.login_container {
    width: calc(60%);
    border-radius: 12px;
    border: red 1px white;
}

.img_left {
    width: 100%;
    border-radius: 12px 0px 0px 12px;
    object-fit: cover;
}

.login_tab_under {
    height: 30px;
    background-color: #f6f2f1;
}

.bg_login {
    background-image: url("../images/logo/Login_PIC2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 770px;
}
.bg_mian_page {
    background:linear-gradient(
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
      ), url("../images/logo/Login_PIC2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 770px;
}
.sidebarmain.active .bg_sub_menu{
background-color: rgba(0, 0, 0, 0.2);
}

/* end section login  */

/*start  side bar */
.sidebarmain{
    position: fixed;
    left: 0;
    height: 87vh;
    width: 40px;
    padding: 0.4rem 0.65rem;
    transition: all 0.5s ease;
}
.sidebarmain.active ~ .main-content{
    left: 250px;
    width: calc(100% - 250px);
}
.sidebarmain.active{
    width: 250px;
}
.sidebarmain #btnside{
    position: absolute;
    color: #fff;
    top: .4rem;
    left: 50%;
    font-size: 1.2rem;
    line-height: 50px;
    transform: translateX(-50%);
    cursor: pointer;
}
.sidebarmain.active #btnside{
    left: 90%;
}

.sidebarmain .nav-item{
    /* opacity: 0; */
    display: none;
}
.sidebarmain.active .nav-item{
    /* opacity: 1; */
    display: block;
}


.main-content{
    position: relative;
    min-height: 100vh;
    left: 40px;
    transition: all 0.5s ease;
    width: calc(100% - 40px);
}

.sidebarmain.active .title-sidebar{
    display: block;
}
.sidebarmain .title-sidebar{
display: none;
}
/*end  side bar */


/* start data table  */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /*Overrides for Tailwind CSS */

  /*Form fields*/

  .dataTables_wrapper select,
  .dataTables_wrapper .dataTables_filter input {
    color: #4a5568;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 1.25;
    border-width: 2px;
    border-radius: 0.25rem;
    border-color: #edf2f7;
    background-color: #edf2f7;
  }
  .dataTables_wrapper .dataTables_filter input {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  /*Row Hover*/
  table.dataTable.hover tbody tr:hover,
  table.dataTable.display tbody tr:hover {
    background-color: #ebf4ff;
    /*bg-indigo-100*/
  }

  /*Pagination Buttons*/
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-weight: 100;
    /*font-bold*/
    border-radius: 0.25rem;
    /*rounded*/
    border: 1px solid transparent;
    /*border border-transparent*/
  }

  /*Pagination Buttons - Current selected */
  .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    /*text-white*/
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /*shadow*/
    font-weight: 100;
    /*font-bold*/
    border-radius: 0.25rem;
    /*rounded*/
    background: #9fbede !important;
    /*bg-indigo-500*/
    border: 1px solid transparent;
    /*border border-transparent*/
  }

  /*Pagination Buttons - Hover */
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    /*text-white*/
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /*shadow*/
    font-weight: 100;
    /*font-bold*/
    border-radius: 0.25rem;
    /*rounded*/
    background: #9fbede !important;
    /*bg-indigo-500*/
    border: 1px solid transparent;
    /*border border-transparent*/
  }

  /*Add padding to bottom border */
  table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0;
    /*border-b-1 border-gray-300*/
    /*margin-top: 0.75em;
    margin-bottom: 0.75em;*/
  }

  /*Change colour of responsive icon*/
  table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
  table.dataTable.dtr-inline.collapsed
    > tbody
    > tr
    > th:first-child:before {
    background-color: #667eea !important;
    /*bg-indigo-500*/
  }
  .dataTables_filter {
    display: none;
  }
  .dataTables_length,
  .dataTables_info {
    font-size: 14px;
  }
  .paginate_button,
  .previous,
  .next {
    font-weight: 100;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 14px;
    font-weight: 100;
    border-radius: 0.25rem;
    border: 1px solid transparent;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    font-size: 14px;
    font-weight: 100;
    border-radius: 0.25rem;
    border: 1px solid transparent;
  }
  table.dataTable thead td, table.dataTable thead th {
    padding: 10px 18px;
    border-bottom: 1px solid #111;
    /* border-top: 1px solid #4a5568; */
}
/* end data table  */
td.nowrap {
  white-space: nowrap;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.details-control:first-child:before { display: none;}
table.dataTable th, table.dataTable td { white-space: normal; }
.child {table-layout:fixed} .child td {word-wrap:break-word; white-space: normal !important;}

/* new style */
table.dataTable thead .sorting{
  background-image: url(../images/sort_both.png);
  background-color: #aee8fe;
}



table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_desc_disabled{
  cursor: pointer;

  background-repeat: no-repeat;

  background-position: center right;

  background-color: #aee8fe;
}




table.dataTable.display tbody tr.odd, table.dataTable.stripe tbody tr.odd {

  background-color: #e8f3fb !important;

}

table.dataTable tbody td, table.dataTable tbody th{

  padding: 8px 10px;

  vertical-align: top;


}
table.dataTable.display tbody td, table.dataTable.display tbody th, table.dataTable.row-border tbody td, table.dataTable.row-border tbody th {
  border-top: 0px solid #ddd !important;
}
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  /* border-color: rgb(156 163 175) !important;  */
  /* border-color: navy !important; / */
}
.border-2{
  border-color:  navy !important
}