.page-content-wrapper { width: 100%; margin: 30px 10px; padding-right: 15px; padding-left: 15px } .sbox-title { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between } .search { margin-top: 0; width: 16px; border: none; background: url("../../BackendScript/images/icons/search-icon.png") no-repeat 10px 8px; padding: 0 5px 0 35px; color: #000 } .search, .search:focus { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: none } .search:focus { margin-top: 5px; width: 180px; border: 1px solid #eaeaea; color: #c8c8c8; font-weight: 300 } .header { height: 59px; background-color: #f4f6f9; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15); padding: 0 } .header, .header .navbar-header { display: -webkit-box; display: flex; width: 100%; -webkit-box-align: center; align-items: center } .header .navbar-header { -webkit-box-pack: justify; justify-content: space-between } .header .navbar-header .logo-wrapper { width: 227px } .header .navbar-header .dropdown-toggle { cursor: pointer } .header .navbar-header .dropdown-toggle:after { display: none } .header .navbar-header .badge { position: absolute; right: -3px; top: 0; z-index: 100; color: #fff; border-radius: 30px; padding: 0; min-width: 6px; min-height: 6px } .header .navbar-header .badge:empty { display: block } .header .navbar-header .right-zone { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center } .header .navbar-header .right-zone>div { margin-right: 20px } .header .dropdown-menu li { padding: 0 15px; color: #000; font-weight: 700; font-size: 18px; cursor: pointer } .header .dropdown-menu li.unread { background-color: #edf2fa } .header .dropdown-menu li:hover { background-color: #1194f6; color: #fff } .header .dropdown-menu li a { color: inherit; display: block } .header .dropdown-menu li a:hover { background-color: transparent } .header .dropdown-menu li a img { width: 19px } .header .dropdown-menu li.dropdown-header { cursor: default } .header .dropdown-menu li.dropdown-header:hover { background-color: unset; color: #000 } .header .dropdown-menu li.dropdown-header, .header .dropdown-menu li.has-border { border-bottom: 1px solid #cdd5da } .header .fa-bars { cursor: pointer; display: inline-block; font-size: 20px } @media (max-width:768px) { .header .navbar-header .logo-wrapper { display: none !important } .header .navbar-header .sidebar-toggle-box { margin-left: 20px } } div#auth-page { background-image: url("../../BackendScript/images/background/login-bg.jpg"); background-size: cover; height: 100vh } div.auth-wrapper { height: 100vh } div.auth-wrapper .alert { font-size: 18px } .form-login { min-height: 450px; width: 342px; background-color: #fff; padding-bottom: 20px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, .5) } .login-logo { margin-top: 10px; content: url("../../BackendScript/images/logo-login.png") } .title-login { color: #000000; font-size: 19px; line-height: 26px; margin: 26px 0 8px; font-weight: 700 } .form-input { height: 30px; border: 1px solid #cdd5da; border-radius: 4px; color: #cdd5da; font-size: 19px; line-height: 37px; padding-bottom: 3px } .font-remember { color: #000000; font-size: 19px; line-height: 26px; margin-left: 8px; margin-bottom: 0 } .font-fotgot { color: #1194f6; font-size: 19px; font-weight: 700 } .label-register { color: #919191; font-size: 17px; font-weight: 700; margin-top: 8px } .is-chat-list-close #sidebar-right { margin-right: -193px } #sidebar-right { position: fixed; background-color: #e8eaed; right: 0; height: 661px; width: 193px; -webkit-transition: all .2s; transition: all .2s } #sidebar-right .sidebar-head { padding: 10px 12px 3px } #sidebar-right .chat-list { height: calc(100% - 71px); overflow-y: auto } #sidebar-right .chat-list .chat-item { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; padding: 7px 12px; -webkit-transition: all .2s; transition: all .2s; cursor: pointer } #sidebar-right .chat-list .chat-item:hover { background-color: #1194f6 } #sidebar-right .chat-list .chat-item:hover .name { color: #fff } #sidebar-right .chat-list .chat-item .name { margin-left: 17px; color: #000000; font-weight: 700; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } #sidebar-right .search-chat { height: 38px; background-color: #f4f6f9; padding: 7px 12px } #sidebar-right .search-chat .input-group { border: 1px solid rgba(103, 117, 124, .4); border-radius: 12.5px } #sidebar-right .search-chat .form-control, #sidebar-right .search-chat .input-group-prepend { height: 25px } #sidebar-right .search-chat .form-control, #sidebar-right .search-chat .input-group-text { background-color: transparent; color: #bbc2c7 } #sidebar-right .search-chat .input-group-text { border: none; font-size: 10px; padding: 0 6px 0 10px } #sidebar-right .search-chat .input-group-text i { line-height: 9px } #sidebar-right .search-chat .form-control { font-size: 15px; border: none; padding-left: 0 } #sidebar-right .search-chat .form-control:focus { border-color: #ced4da } #sidebar { width: 227px; height: 100%; position: fixed; background-color: #fff; overflow-y: hidden } #sidebar .home-menu { display: -webkit-box; display: flex; padding: 12px 18px; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between } #sidebar ul.sidebar-menu li { margin-left: 0; margin-right: 0 } #sidebar ul.sidebar-menu li a { color: #000; font-size: 19px; text-decoration: none; padding: 15px 10px 15px 18px; outline: none; display: -webkit-box; display: flex; position: relative } #sidebar ul.sidebar-menu li a>div { margin-right: 10px } #sidebar ul.sidebar-menu li a span { line-height: 1; max-width: 135px } #sidebar ul.sidebar-menu li a img.active { display: none } #sidebar ul.sidebar-menu li a.active, #sidebar ul.sidebar-menu li a:focus, #sidebar ul.sidebar-menu li a:hover { display: -webkit-box; display: flex; background: #fff; color: #1194f6; -webkit-transition: all .3s ease; transition: all .3s ease } #sidebar ul.sidebar-menu li a.active img.active, #sidebar ul.sidebar-menu li a:focus img.active, #sidebar ul.sidebar-menu li a:hover img.active { display: initial } #sidebar ul.sidebar-menu li a.active img.default, #sidebar ul.sidebar-menu li a:focus img.default, #sidebar ul.sidebar-menu li a:hover img.default { display: none } #sidebar ul.sidebar-menu li a.active .dcjq-icon, #sidebar ul.sidebar-menu li a:focus .dcjq-icon, #sidebar ul.sidebar-menu li a:hover .dcjq-icon { background: url("../../BackendScript/images/img/right-arrow_active.png") no-repeat 50% } #sidebar ul.sidebar-menu li ul.sub li { background: #fff } #sidebar ul.sidebar-menu li ul.sub li a { height: unset; padding: 9px 0; display: -webkit-box; display: flex; color: #000000; font-size: 19px; line-height: 1 } #sidebar ul.sidebar-menu li ul.sub li a.active, #sidebar ul.sidebar-menu li ul.sub li a:focus, #sidebar ul.sidebar-menu li ul.sub li a:hover { display: -webkit-box; display: flex; color: #1194f6 } ul.sidebar-menu { margin-top: 59px; overflow-y: auto; height: calc(100vh - 59px) } .menu-dot { margin-right: 5px; font-size: 70px; line-height: 16px !important } .sidebar-head { color: #233338; font-size: 21px; font-weight: 700; line-height: 20px } .sidebar-toggle-box { margin: 0; padding: 0; line-height: 1; color: #233338 } .dcjq-icon { height: 17px; width: 17px; display: inline-block; position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; -webkit-transition: all .2s; transition: all .2s } .active .dcjq-icon, .dcjq-icon { background: url("../../BackendScript/images/img/right-arrow.png") no-repeat 50% } .active .dcjq-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg) } @media (max-width:768px) { body.is-sidebar-nav-open { height: 100vh; overflow: hidden } #sidebar ul.sidebar-menu li a { height: unset; line-height: unset; padding: 10px 10px 10px 18px } #sidebar ul.sidebar-menu li a span { max-width: unset } } @media (min-width:769px) { .header .sidebar-toggle-box { display: none } .is-sidebar-nav-open #sidebar { margin-left: unset; width: 50px } .is-sidebar-nav-open #sidebar .dcjq-icon, .is-sidebar-nav-open #sidebar .desktop-hide { display: none } .is-sidebar-nav-open #sidebar ul.sidebar-menu li { pointer-events: none } .is-sidebar-nav-open #sidebar ul.sidebar-menu li ul { display: none !important } .is-sidebar-nav-open #sidebar ul.sidebar-menu li a { padding: 15px 0; -webkit-box-pack: center; justify-content: center } .is-sidebar-nav-open #sidebar ul.sidebar-menu li a>div { margin-right: 0 } .is-sidebar-nav-open #sidebar .home-menu { padding: 12px 0; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center } } @font-face { font-family: THSarabunNew; src: url("../../BackendScript/fonts/THSarabunNew.ttf?45905ce12b4739c794a5ebdaee506202") format("truetype") } @font-face { font-family: THSarabunNew; font-weight: 900; src: url("../../BackendScript/fonts/THSarabunNew\ Bold.ttf?bdd8eb542ab9aa84e5809edb230f07cc") format("truetype") } @font-face { font-family: THSarabunNew; font-style: italic; src: url("../../BackendScript/fonts/THSarabunNew\ Italic.ttf?05a052030bb61432929f643579b82ce1") format("truetype") } @font-face { font-family: THSarabunNew; font-style: italic; font-weight: 900; src: url("../../BackendScript/fonts/THSarabunNew\ BoldItalic.ttf?0b381613886ea1af245b0a8120019ecb") format("truetype") } *, .text-b { font-family: THSarabunNew } .text-b { font-weight: 700 } .text-b-i, .text-i { font-family: THSarabunNew; font-style: italic } .text-b-i { font-weight: 700 } body[data-fontsize="1"] #main-content :not(.select2-selection__rendered):not(.fa):not(.btn):not(.input-group-text) { font-size: 18px !important; line-height: 22px !important } body[data-fontsize="2"] #main-content :not(.select2-selection__rendered):not(.fa):not(.btn):not(.input-group-text) { font-size: 22px !important; line-height: 26px !important } body[data-fontsize="3"] #main-content :not(.select2-selection__rendered):not(.fa):not(.btn):not(.input-group-text) { font-size: 26px !important; line-height: 30px !important } .allfontsize { cursor: pointer } .menu-img { padding: 21px; background-image: linear-gradient(-153deg, #3780c4 5%, #3780c4); border-radius: 6px } .text-menu { color: #233338; font-size: 19px; line-height: 17px; letter-spacing: 0; text-align: center; margin-top: 10px } #main-content { margin-left: 227px; padding-top: 59px; -webkit-transition: all .2s; transition: all .2s; width: calc(100% - 227px) } .is-sidebar-nav-open #main-content { margin-left: 50px; width: calc(100% - 50px) } .is-chat-list-close #main-content { width: calc(100% - 227px) } .is-sidebar-nav-open.is-chat-list-close #main-content { width: calc(100% - 50px) } #main-content>div { margin: 0; padding: 15px } .wrapper { margin: 0; display: -webkit-box; display: flex; flex-wrap: wrap; background-color: #fff; padding: 20px } .wrapper .title { font-weight: 700; font-size: 21px; color: #233338; position: relative } .wrapper .title .line { position: absolute; width: 2px; height: 21px; background-color: #1194f6; top: 0; bottom: 0; margin: auto; left: -21px } .wrapper div.tools { width: 100%; margin: 15px 0 } .wrapper div.tools button { margin-right: 7px } .wrapper form { width: 100% } .btn { font-size: 19px; height: 30px; line-height: 1; color: #fff; border: 1px solid } .btn:focus { box-shadow: none } .btn .fa, .btn .far, .btn .fas { font-size: 14px } .btn-info, .btn-submit { background-color: #1194f6 } .btn-info:focus, .btn-info:hover, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active:focus { border-color: #1194f6; color: #1194f6; background-color: #fff; box-shadow: none } .btn-outline { background-color: transparent; border: 1px solid #cdd5da; color: #6c7072 } .status { background-color: #afafaf; height: 12px; width: 12px; border: 2px solid #e1e3e6; border-radius: 50% } .status.active { background-color: #7ed321 } .status.no-border { border: none } .dataTables_wrapper { width: 100% } .dataTables_wrapper .row-fluid:first-child { display: none } .v-table thead th, table.table thead th { font-size: 19px; vertical-align: middle; color: #000; padding: 10px 5px; border-top: 0; border-bottom-width: 1px } .v-table tbody td, table.table tbody td { font-size: 19px; font-weight: 700; color: #000; padding: 10px 5px } .v-table tbody td .btn, table.table tbody td .btn { padding: 0 5px; height: unset } .v-table tbody td .btn .fa, .v-table tbody td .btn .far, .v-table tbody td .btn .fas, table.table tbody td .btn .fa, table.table tbody td .btn .far, table.table tbody td .btn .fas { font-size: 12px; min-width: 10.3px } .v-table tbody td a, table.table tbody td a { margin: 0; font-size: unset } .v-table tbody .status, table.table tbody .status { display: inline-block; vertical-align: middle } .dt-footer { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between } .dataTables_paginate.paging_bootstrap.pagination li { border: none } .dataTables_paginate.paging_bootstrap.pagination { font-size: 19px; font-weight: 700; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; float: none } .dataTables_paginate.paging_bootstrap.pagination li.active a, .dataTables_paginate.paging_bootstrap.pagination li.disabled:hover a, .dataTables_paginate.paging_bootstrap.pagination li:hover a { line-height: 27px; padding: 1px 10px; color: #fff; background-color: #1194f6 } .dataTables_paginate.paging_bootstrap.pagination li.disabled a, .dataTables_paginate.paging_bootstrap.pagination li a { line-height: 27px; padding: 1px 10px; color: #1194f6 } .avatar-wrapper { position: relative } .avatar-wrapper .status { position: absolute; bottom: -3px; right: -3px } img.custom-avatar { height: 30px; width: 30px; border-radius: 50% } .page-title { font-size: 24px; font-weight: 700; color: #1194f6 } .breadcrumb { padding: 0; margin: 0; background-color: transparent; -webkit-box-pack: end; justify-content: flex-end } .breadcrumb-item+.breadcrumb-item:before { content: ">" } .breadcrumb-item a { color: #1194f6 } .breadcrumb-item.active { color: #000000 } @media (max-width:768px) { #main-content { width: 100%; height: 100vh; overflow: auto } } label { color: #000000; font-weight: 700; font-size: 19px; margin: 0 } .field-error { font-size: 18px } input.form-control { border: 1px solid #cdd5da; font-size: 19px; padding-bottom: 0; padding-top: 0; height: 31px } .form-control { font-size: 19px } .form-group .input-group .input-group-append button { background-color: #cdd5da; width: 30px; padding: 6px 0; font-size: 16px } .form-group .input-group .input-group-append .input-group-text { line-height: 1 } .cmxform .form-group input.error, .cmxform .form-group textarea.error, input:focus:invalid:focus, select:focus:invalid:focus, textarea:focus:invalid:focus { border-color: unset !important } input.is-invalid:focus { box-shadow: unset !important } .custom-select { height: 33px; padding: 2px 12px } .form-group.has-error, .form-group.has-error label { color: #dc3545 } .form-group.has-error .form-control, .form-group.has-error .input-group .input-group-append button, .form-group.has-error .select2-container--default .select2-selection--multiple, .form-group.has-error .select2-container .select2-selection--single { border-color: #dc3545 } .form-group.has-error .select2-container--default .select2-selection--single .select2-selection__arrow { border: 1px solid } .form-group.has-error .help-block.error-help-block { font-size: 18px } .form-control.is-invalid~.form-control, .form-control.is-invalid~.select2-container--default .select2-selection--multiple, .form-control.is-invalid~.select2-container .select2-selection--single { border-color: #dc3545 } .form-control.is-valid~.form-control, .form-control.is-valid~.select2-container--default .select2-selection--multiple, .form-control.is-valid~.select2-container .select2-selection--single { border-color: #28a745 } .invalid-feedback { font-size: 18px } .select2-container--default.select2-container--disabled .select2-selection--multiple, .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #e9ecef } .select2-container .select2-selection--single { border-color: #cdd5da; height: 32px } .select2-container .select2-selection--single .select2-selection__rendered { height: 30px; line-height: 31px; font-size: 19px; padding-left: 12px; padding-right: 30px } .select2-container .select2-selection--single .select2-selection__rendered li { line-height: 1 } .select2-container .select2-selection--single .select2-selection__rendered li input { margin-top: 0 } .select2-container--default .select2-selection--single .select2-selection__arrow { width: 30px; height: 30px; background-color: #cdd5da } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #000000 transparent transparent; border-width: 5px 5px 0 } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #000000; border-width: 0 5px 5px } .select2-container--default .select2-search--dropdown .select2-search__field { font-size: 19px } .select2-container--default .select2-selection--multiple { border-color: #cdd5da } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { float: right; margin-left: 10px; color: inherit; font-size: 24px; line-height: 22px } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: inherit } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #5d798a; color: #fff; font-weight: 700; font-size: 15px; border: none; border-radius: 2px } .select2-container--default .select2-selection--multiple .select2-selection__rendered { margin-bottom: -7px } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { line-height: 1 } .select2-container--default .select2-selection--multiple .select2-selection__rendered li.select2-selection__choice { line-height: 22px } .select2-container--default .select2-selection--multiple .select2-selection__rendered li input { margin-top: 0 } .select2-container--default .select2-search--inline .select2-search__field { font-size: 19px; line-height: 1 } li.select2-results__option { font-size: 19px } .datepicker td.disabled, .datepicker td.new, .datepicker td.old { color: #999 } .display-data, .display-date { font-size: 19px } .display-data.form-control, .display-date.form-control { white-space: nowrap; z-index: 1; border: 1px solid #cdd5da; height: 30px; padding-top: 0; padding-bottom: 0; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; line-height: 1; border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important } .display-data.form-control.is-valid, .display-date.form-control.is-valid { border-color: #28a745 } .form-control.is-valid:focus { box-shadow: unset } input.form-control:disabled~.display-data.form-control, input.form-control:disabled~.display-date.form-control, input.form-control[readonly]~.display-data.form-control, input.form-control[readonly]~.display-date.form-control { background-color: #e9ecef; opacity: 1 } .custom-checkbox .custom-control-label:before { border: 1px solid #cdd5da; background-color: #fff } .custom-checkbox+.invalid-feedback { width: auto } .note-editor .note-toolbar .dropdown-toggle:after { display: none } .note-editor .note-toolbar .note-btn-group div>ul>li>a { display: block } .note-editor .note-toolbar .note-btn-group.note-color button.dropdown-toggle { padding-left: 0 } .note-editor .note-toolbar .note-btn-group .note-icon-caret:before { width: 12px } .file-list>div { display: -webkit-box; display: flex; justify-content: space-around; -webkit-box-align: center; align-items: center } .file-list>div .file-name, .file-list>div .tools, .file-list>div input[type=text] { min-width: 200px } .file-list>div:nth-child(2) { font-size: 19px; font-weight: 700; color: #000000 } .modal { z-index: 1304 } .modal-backdrop { z-index: 1303 } .select2-dropdown { z-index: 1305 } .datepicker { font-size: 20px } .datepicker th.clear, .datepicker th.today { cursor: pointer } .datepicker td span { width: 58px } .alert { font-size: 18px } .input_search { background: transparent; border-top: transparent !important; border-left: transparent !important; border-right: transparent !important } .card { width: 100%; border: 1px solid #cdd5da; background-color: #f5f6fa } .card.no-border { border: none; padding-top: 10px } .card.no-border .card-header { border: none; background-color: transparent } .card.no-border .card-body { padding-top: 15px } .card .card-header, .card.no-border .card .card-header { background-color: #dde4e9 } .card .card-header { padding: 3px 0 0 20px; font-size: 21px; font-weight: 700; color: #233338; border-color: #cdd5da } .nav-tabs { border: none } .nav-tabs .nav-item:first-child .nav-link { border-top-left-radius: 4px } .nav-tabs .nav-item:last-child .nav-link { border-top-right-radius: 4px; border-right: 1px solid #cdd5da } .nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: #1194f6; color: #fff } .nav-tabs .nav-item .nav-link { font-weight: 700; font-size: 21px; color: #233338; padding: 0 10px; border-radius: 0; border: 1px solid #cdd5da; border-right: 0; margin-right: 0; background-color: #dde4e9 } .tab-content { border: 1px solid #cdd5da; border-radius: 4px; border-top-left-radius: 0; padding: 20px } .table { background-color: #fff } div.dataTables_wrapper div.dataTables_length select { width: 55px; line-height: 1.2 } .dataTables_filter { display: none } .dataTables_scrollBody table, .dataTables_scrollHeadInner table { width: 100% !important } .dataTables_wrapper .dataTables_processing { font-size: 18px; font-weight: 700 } div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 2px 0; white-space: nowrap; -webkit-box-pack: center; justify-content: center; font-size: 19px; color: #1194f6; font-weight: 700 } .page-link { position: relative; display: block; padding: .5rem .75rem; margin-left: -1px; line-height: .75 } .page-item.active .page-link { z-index: 1; color: #fff; background-color: #1194f6; border-color: #1194f6 } .notification-wrapper .notifications .noti-wrapper { font-size: 20px; border-bottom: 1px solid #dddfe2; padding: 10px 20px; cursor: pointer; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; overflow: hidden } .notification-wrapper .notifications .noti-wrapper.unread { background-color: #edf2fa } .notification-wrapper .notifications .noti-wrapper:hover { background-color: #1194f6; color: #fff } .notification-wrapper .notifications .noti-wrapper:hover a, .notification-wrapper .notifications .noti-wrapper:hover a:hover { color: #fff } .notification-wrapper .dropdown-menu li { padding: 0 15px; color: #000; font-weight: 700; font-size: 18px; cursor: pointer } .notification-wrapper .dropdown-menu li.unread { background-color: #edf2fa } .notification-wrapper .dropdown-menu li:hover { background-color: #1194f6; color: #fff } .notification-wrapper .dropdown-menu li a { color: inherit; display: block } .notification-wrapper .dropdown-menu li a:hover { background-color: transparent } .notification-wrapper .dropdown-menu li a img { width: 19px } .notification-wrapper .dropdown-menu li.dropdown-header { cursor: default } .notification-wrapper .dropdown-menu li.dropdown-header:hover { background-color: unset; color: #000 } .notification-wrapper .dropdown-menu li.dropdown-header, .notification-wrapper .dropdown-menu li.has-border { border-bottom: 1px solid #cdd5da } .header .navbar-header .logo-wrapper, div.auth-wrapper { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center }