body {
    font-family: 'Sarabun', sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Sarabun', sans-serif;
}
.logo-mini, .logo-lg {
	font-family: 'Sarabun', sans-serif;
}
.sweet-alert {
    font-family: 'Sarabun', sans-serif;
}

form div.required label.control-label:after {
    content: " * ";
    color: red;
}

/** Link **/
a {
    color: #0763DB;
}
a:hover {
    color: #00AAFF;
}

/*Login*/
.login-box-body {   
    /*padding-bottom: 20px!important;*/ 
    border-radius: 10px!important;     
    background: rgba(255, 255, 255, 0.6)!important;  
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.text-white {
    color: white;
}

.content-wrapper {
    /*background-color: #E1EFF1 !important;*/
    background-image: url("../../../web/img/background.png") !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: 100% 100% !important;
}

.table>thead>tr>th {
    background-color: #D8EFFE;
}

/** FORM **/
.form-control {
    background-color: #fff;
    border-radius: 3px;
    /*padding: 0px 12px;*/
    /*line-height: 2.6;*/
}

input.form-control {
    line-height: 2.6 !important;
}

input[type=number] {
    line-height: 1.42857143 !important;
}

/** MODAL **/
.modal-header {
    color: #FFFFFF !important;
    background-color: #0763DB !important;
}

.modal-footer .form-group {
    margin-bottom: 1px;
}

.sa-button-container { 
    direction: rtl !important; 
}

/*Navbar*/
.skin-blue .main-header .navbar {
    background-image: linear-gradient(to right,#EBEDEF,#EBEDEF,#EBEDEF);
    /* background-color: #0000FF; */
    box-shadow: 0 7px 14px 0 rgba(65,69,88,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    background-size: 200%;
}
.skin-blue .main-header .navbar .nav>li>a {
    color: #4A4D56;
}
.skin-blue .main-header .navbar .nav>li>a:hover, .skin-blue .main-header .navbar .nav>li>a:active, .skin-blue .main-header .navbar .nav>li>a:focus, .skin-blue .main-header .navbar .nav .open>a, .skin-blue .main-header .navbar .nav .open>a:hover, .skin-blue .main-header .navbar .nav .open>a:focus, .skin-blue .main-header .navbar .nav>.active>a {
    color: #000000;
}
/*.skin-blue .main-header .navbar-brand {
    background-color: #1F4A6F;
    color: #fff;
}
.skin-blue .main-header .navbar-brand:hover {
    background-color: #2997D2;
    color: #fff;
}*/
.skin-blue .main-header .logo {
    background-color: #1F4A6F;
    color: #fff;
    border-bottom: 0 solid transparent;
}
.skin-blue .main-header .logo:hover {
    background-color: #1B4061;
}
.skin-blue .main-header .navbar .sidebar-toggle {
    color: #4A4D56;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    color: #4A4D56;
    background-color: #D3D5D7;
}
.skin-blue .main-header li.user-header {
    background-color: #225078;
    color: #fff;
}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p {
    color: #fff;
}
.navbar-toggle {
    color: #4A4D56 !important;
}

/* Left */
.skin-blue .user-panel {
    background: #225078;
}
.skin-blue .user-panel>.info, .skin-blue .user-panel>.info>a {
    color: #FFFFFF;
}
.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    /*background-color: #F78CDA;*/
    background: #225078; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#225078 8%, #225078); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#225078 8%, #225078); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#225078 8%, #225078); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#225078 8%, #225078); /* Standard syntax */
}
.skin-blue .sidebar-menu>li.header { /*headerในแถบเมนู*/
    font-weight: bold;
    color: #D9DEE7;
    background: #1C4264;
}
.skin-blue .sidebar a { /*สีfont sidebar*/
/*    font-weight: bold;*/
    color: #1F4A6F;
    background: transparent;
}
.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.menu-open>a, .skin-blue .sidebar-menu .treeview-menu>li>a:hover {
/*    font-weight: bold;*/
    color: #FFAA2A;
    background-color: #1F4A6F;
}
.skin-blue .sidebar-menu>li.active>a { /*เมนูactive*/
/*    font-weight: bold;*/
    border-left-color: #FFAA2A;
    border-left-width: 4px;
    color: #FFAA2A;
    background: #1F4A6F;
}
.skin-blue .sidebar-menu>li>a {
/*    font-weight: bold;*/
    color: #FFFFFF;
    border-left: 4px solid transparent;
}
.skin-blue .sidebar-menu>li>.treeview-menu, .skin-blue .sidebar-menu .treeview-menu>li>a {
    /*font-weight: bold;*/
    color: #FFFFFF;
    background-color: #225078;
}
.skin-blue .sidebar-menu .treeview-menu>li.active>a, .skin-blue .sidebar-menu .treeview-menu>li>a:hover {
    /*font-weight: bold;*/
    color: #FFAA2A;
    background-color: #225078;
}
.sidebar-menu>li>a {
    padding: 8px 5px 8px 15px !important;
}

/* Box */
.box.box-solid.box-primary>.box-header {
    color: #fff;
    background-color: #0763DB;
}
.box.box-solid.box-primary {
    border: 1px solid #0763DB;
}
.box.box-solid.box-success>.box-header {
    color: #fff;
    background-color: #07B53B;
}
.box.box-solid.box-success {
    border: 1px solid #07B53B;
}
.box.box-solid.box-info>.box-header {
    color: #fff;
    background-color: #2AAAFF;
}
.box.box-solid.box-info {
    border: 1px solid #2AAAFF;
}
.box.box-solid.box-danger>.box-header {
    color: #fff;
    background-color: #FE3946;
}
.box.box-solid.box-danger {
    border: 1px solid #FE3946;
}
.box.box-solid.box-warning>.box-header {
    color: #fff;
    background-color: #FF9A2D;
}
.box.box-solid.box-warning {
    border: 1px solid #FF9A2D;
}
.box.box-solid.box-default>.box-header {
    color: #fff;
    background-color: #F8F9FA;
}
.box.box-solid.box-default {
    border: 1px solid #F8F9FA;
}

/* Buttons */
.btn-primary, .btn-primary:focus {
    color: #FFFFFF;
    background-color:#0763DB;
    outline: none;
    border: 1px solid transparent;
    border-color: #0763DB;
    transition: .5s;
}
.btn-primary:hover {
    color: #FFFFFF;
    background-color: #0551B5;
    border: 1px solid transparent;
    border-color: #0551B5;
}
.btn-success, .btn-success:focus {
    color: #FFFFFF;
    background-color:#22B526 ;
    outline: none;
    border: 1px solid transparent;
    border-color: #22B526;
    transition: .5s;
}
.btn-success:hover {
    color: #FFFFFF;
    background-color: #23913B;
    border: 1px solid transparent;
    border-color: #23913B;
}
.btn-info, .btn-info:focus {
    color: #FFFFFF;
    background-color:#2AD4FF;
    outline: none;
    border: 1px solid transparent;
    border-color: #2AD4FF;
    transition: .5s;
}
.btn-info:hover {
    color: #FFFFFF;
    background-color: #00AAFF;
    border: 1px solid transparent;
    border-color: #00AAFF;
}
.btn-danger, .btn-danger:focus {
    color: #FFFFFF;
    background-color:#FE3946;
    outline: none;
    border: 1px solid transparent;
    border-color: #FE3946;
    transition: .5s;
}
.btn-danger:hover {
    color: #FFFFFF;
    background-color: #DC1649;
    border: 1px solid transparent;
    border-color: #DC1649;
}
.btn-warning, .btn-warning:focus {
    color: #FFFFFF;
    background-color:#FF9A2D ;
    outline: none;
    border: 1px solid transparent;
    border-color: #FF9A2D;
    transition: .5s;
}
.btn-warning:hover {
    color: #FFFFFF;
    background-color: #E37907;
    border: 1px solid transparent;
    border-color: #E37907;
}
.btn-default, .btn-default:focus {
    color: #44444A;
    background-color:#F8F9FA;
    outline: none;
    border: 1px solid transparent;
    border-color: #DDDDDD;
    transition: .5s;
}
.btn-default:hover {
    color: #44444A;
    background-color: #E9ECEF;
    border: 1px solid transparent;
    border-color: #ADADAD;
}

/* Outline Buttons */
.btn-outline-primary, btn-outline-primary:focus {
    color: #0763DB;
    background-color:#E2F0FE;
    outline: none;
    border: 1px solid transparent;
    border-color: #0763DB;
    transition: .5s;
}
.btn-outline-primary:hover {
    color: #FFFFFF;
    background-color: #0763DB;
}
.btn-outline-success, .btn-outline-success:focus {
    color: #22B526;
    background-color:#C7F1D1 ;
    outline: none;
    border: 1px solid transparent;
    border-color: #22B526;
    transition: .5s;
}
.btn-outline-success:hover {
    color: #FFFFFF;
    background-color: #22B526;
}
.btn-outline-info, .btn-outline-info:focus {
    color: #2AD4FF;
    background-color:#E2F0FE;
    outline: none;
    border: 1px solid transparent;
    border-color: #2AD4FF;
    transition: .5s;
}
.btn-outline-info:hover {
    color: #FFFFFF;
    background-color: #2AD4FF;
}
.btn-outline-danger, .btn-outline-danger:focus {
    color: #FE3946;
    background-color:#FCD9D6;
    outline: none;
    border: 1px solid transparent;
    border-color: #FE3946;
    transition: .5s;
}
.btn-outline-danger:hover {
    color: #FFFFFF;
    background-color: #FE3946;
}
.btn-outline-warning, .btn-outline-warning:focus {
    color: #FF9A2D;
    background-color:#FEF7E2 ;
    outline: none;
    border: 1px solid transparent;
    border-color: #FF9A2D;
    transition: .5s;
}
.btn-outline-warning:hover {
    color: #FFFFFF;
    background-color: #FF9A2D;
}
.btn-outline-default, .btn-outline-default:focus {
    color: #44444A;
    background-color:#F8F9FA;
    outline: none;
    border: 1px solid transparent;
    border-color: #DDDDDD;
    transition: .5s;
}
.btn-outline-default:hover {
    color: #44444A;
    background-color: #E9ECEF;
    border: 1px solid transparent;
    border-color: #ADADAD;
}

@media (max-width: 991px){
    .main-header .navbar-custom-menu a, .main-header .navbar-right a {
        color: inherit;
        /* background: transparent; */
    }
    a.btn.btn-primary{
        background-color: #0763DB;
    }
    a.btn.btn-secondary{
        background-color: #949597;
    }
    a.btn.btn-success{
        background-color: #22B526;
    }
    a.btn.btn-info{
        background-color: #2AD4FF;
    }
    a.btn.btn-danger{
        background-color: #FE3946;
    }
    a.btn.btn-warning{
        background-color: #FF9A2D;
    }
}

.index-table {
    background-color: #FFFFFF !important;
}

.img-border {
    border: 3px solid #FFFFFF;
}

.main-header {
    max-height: inherit !important;
}
@media (max-width: 767px){
    .main-sidebar {
        padding-top: 160px;
    }
}

.mt-1 {
  margin-top: 1rem !important;
}
.mt-2 {
  margin-top: 2rem !important;
}
.mt-24 {
  margin-top: 2.4rem !important;
}
.mt-42 {
  margin-top: 4.2rem !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}
.mb-2 {
  margin-bottom: 2rem !important;
}