html,
body,
#app {
    margin: 0;
    padding: 0;
    height: 100%;
}

#app {
    position: relative;
}

main.py-4 {
    height: calc(100% - (56px));
}

main.py-4>.container,
main.py-4>.container>.row,
main.py-4>.container>.row>.row {
    height: 100%;
}

html {
    font-size: 14px;
}

body {
    font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
}

body.template-1 {
    background: #466a98;
    color: #f0f0f0;
}

.mobile{
    display: none;
}

body.template-1 .navbar-laravel {
    background: #2a476b;
}

body.template-1 .navbar-light .navbar-brand {
    color: #fff;
}

body.template-1 .navbar-light .navbar-nav .nav-link {
    color: #cddeff;
}

body.template-1 .navbar-light .navbar-brand:hover,
body.template-1 .navbar-light .navbar-nav .nav-link:hover {
    color: #fff;
}

body.template-1 .card .card-header {
    background: #2a476b;
    color: #f0f0f0;
    border-bottom: 1px solid #416fa7;
    border-radius: 0;
}

body.template-1 .card .card-body {
    background: #31537d;
    color: #f0f0f0;
    border-radius: 0;
}

body.template-1 .card {
    border-radius: 0;
    border: solid 1px #5177a7;
    /* border: none; */
}

body.template-1 .links>a {
    color: #f0f0f0;
}

body.template-1 .links>a:hover {
    color: #fff;
}

body.template-1 .card.board>.card-body {
    background: #2a476a;
    height: calc(100% - 44px);
    padding-top: 0;
}

body.template-1 .modal .modal-content {
    background: #2a476b;
    border: 1px solid #416fa7;
}

body.template-1 .modal.search .modal-content {
    background: #3f628c;
}

body.template-1 .modal .modal-content .modal-header {
    /* border-bottom: 1px solid #558cce; */
    border-bottom: none;
}

body.template-1 .modal .modal-content .modal-footer {
    /* border-top: 1px solid #558cce; */
    border-top: none;
}

body.template-1 .modal .modal-content button.close {
    color: #cddeff;
}

body.template-1 h5.modal-title {
    font-weight: bold;
}

body.template-1 a {
    color: #cddeff;
}

body.template-1 a:hover {
    color: #fff;
}

body.template-1 .card.board .card-header {
    border-bottom: none;
    font-size: 1.1rem;
    border-radius: 0;
}

body.template-1 .invalid-feedback {
    color: #ffa9a7;
}

body.template-1 .form-control.is-invalid {
    border-color: #ffa9a7;
}

body.template-1 .dropdown-menu a {
    color: #fff;
}

body.template-1 .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #f0f0f0;
    background-color: #436999;
    border-color: #436999 #436999 #436999;
}

body.template-1 .nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: #436999 #436999 #436999;
}

body.template-1 .nav-tabs {
    border-bottom: 1px solid #436999;
}

body.template-1 .tab-content .tab-pane {
    background: #436999;
}

body.template-1 .nav-pills .nav-item:not(:first-child){
    margin-left:3px;
}

body.template-1 .nav-pills .nav-link:hover, body.template-1 .nav-pills .nav-link.active {
    background-color: #436999;
    color: #f0f0f0;
}

body.template-1 .nav-search input[type="text"] {
    background: #436999;
    border: 1px solid #416fa7;
    color: #f0f0f0;
    width: 500px;
}

body.template-1 .navbar-light .navbar-nav .nav-link:hover .noti-info .number {
    background: #ff495a;
}

body.template-1 .nav-search button {
    background-color: #2a476a;
    border-color: #2a476a;
    color: #f0f0f0;
}

body.template-1 .nav-search button:hover {
    background-color: #315177;
    border-left-color: #416fa7;
    color: #fff;
}

body.template-1 .nav-pills .show>.nav-link {
    background-color: transparent;
}

body.template-1 .nav-link.noti-box.none {
    color: #7084a9;
}

body.template-1 .list-noti-info .highlight {
    color: #2a476b;
}

body.template-1 .list-noti-info .dropdown-item {
    background: #ecf3fd;
    border: solid 1px #aacaf1;
    padding-left: 10px;
    padding-right: 10px;
}

body.template-1 .list-noti-info .dropdown-item:hover {
    background: #c6d7ea;
}

body.template-1 .card.normal .card-body {
    background: #2a476a;
    padding: 20px;
}

body.template-1 .card.normal .card .card-body {
    background: #335580;
}

.nav-link.setting-box {
    position: relative;
    width: 32px;
    font-size: 1.4rem;
}

.nav-link.setting-box .setting {
    position: absolute;
    top: 4px;
    left: 8px;
}

.nav-search {
    position: relative;
}

.nav-search button {
    position: absolute;
    right: 1px;
    top: 1px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-top: 4px;
    padding-bottom: 4px;
}

.card.board .card-body {
    padding: 10px;
}

.card.board .card-body .card.case:not(:last-child) {
    margin-bottom: 10px;
}

.card.board>.card-header {
    border-bottom: none;
    font-weight: bold;
}

.container.expand {
    max-width: unset;
}

.navbar-brand {
    font-weight: bold;
}

.card.board .card-body .branch-info .info {
    /* border: 1px solid #416fa7; */
    padding: 3px 7px 3px 7px;
    font-size: 12px;
    background: #1a7d82;
    font-weight: bold;
    border-radius: 0;
    border: solid 1px #ccc;
    color: #fff;
}

.card.board .card-body .branch-info .info .text {
    margin-left: 5px;
    font-size: 11px;
}

.card.board .card-body .branch-info {
    margin-bottom: 10px;
    text-align: right;
    float: left;
    width: 100%;
}

.card.board .card-body .case-info {
    font-size: 13px;
    margin-top: 10px;
    float: left;
    width: 100%;
}

.card.board .card-body .case-info .text {
    font-size: 12px;
    color: #f0f0f0;
}

.card.board .card-body .case-info .text {
    margin-left: 5px;
}

.card.board .card-body .case-info .info:not(:first-child) {
    margin-left: 10px;
}

.card.board .card-body .case-info .info {
    padding: 3px 6px 2px 6px;
    border-radius: 0;
    color: #f0f0f0;
}

.card.board .card-body .case-info .info.over,
.search-box .result .item .detail-info .info.over {
    background: #dc3545;
    border: solid 1px #ccc;
    color: #fff;
}

.card.board .card-body .case-info .info.over .text,
.search-box .result .item .detail-info .info.over .text {
    color: #fff;
}

.card.board .card-body .case-info .info.success,
.search-box .result .item .detail-info .info.success {
    background: #1ea03c;
    border: solid 1px #ccc;
    color: #fff;
}

.card.board .card-body .case-info .info.success .text,
.search-box .result .item .detail-info .info.success .text {
    color: #fff;
}

.card.board .card.case:hover {
    cursor: pointer;
}

.title.title-name {
    font-weight: 700;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif */
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.modal-content textarea.case-title {
    height: 33px;
    padding: 0px 5px 1px 5px;
    font-weight: bold;
    font-size: 20px;
    background: inherit;
    color: #f0f0f0;
    border: none;
    margin-left: 10px;
    margin-top: -1px;
}

textarea.case-title.is-editing {
    background: #fff;
    color: #495057;
    border: 1px solid #ced4da;
}

textarea.case-title:focus {
    background: #fff;
    color: #495057;
    border: 1px solid #ced4da;
}

.case-module-icon {
    font-size: 20px;
    width: 27px;
    text-align: center;
    color: #779fd0;
}

.window-module {
    display: flex;
    position: relative;
}

h3.case-module-title {
    font-size: 1.15rem;
    margin-bottom: 0;
    margin-top: 5px;
    font-weight: bold;
    margin-left: 10px;
    display: flex;
}

.modal.case .modal-content .modal-header {
    padding-bottom: 7px;
}

.modal.case .modal-content .modal-body {
    padding-top: 7px;
}

.frame-content .window-info {
    padding-left: 33px;
}

.window-info .info {
    width: 100%;
    margin-top: 5px;
}

.window-info .info.task-module .task-item {
    padding: 10px;
    border: solid 1px #436999;
    /* border-radius: 5px; */
    background: #335580;
    position: relative;
}

.window-info .info.task-module .task-item a.remove {
    position: absolute;
    right: -2px;
    top: -8px;
    z-index: 1;
}

.window-box {
    margin-bottom: 7px;
}

textarea.form-control.case-textarea {
    height: 34px;
}

.card.board {
    height: 100%;
}

.flex {
    display: flex;
}

.window-info .info .search {
    margin-left: 7px;
}

button.min-width {
    min-width: 70px;
}

.modal-extra {
    max-width: 1200px;
}

textarea.case-detail-height {
    /* height: 118px; */
    height: 117px;
}

.window-info .info .item input[type="checkbox"] {
    width: 30px;
    margin-top: 7px;
}

.window-info .info input[type="file"] {
    margin-bottom: 7px;
}

.window-info .info.checklist-module input[name="checklist_name"] {
    margin-bottom: 7px;
}

.window-info .booking-associate {
    margin-bottom: 7px;
}

.combobox {
    height: 34px;
    visibility: hidden;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    z-index: 9999;
}

.select2-results__options .select2-results__option,
.select2-container .select2-selection .select2-selection__choice {
    color: #333;
}

.select2-container .select2-selection {
    min-height: 34px;
    padding: 4px 0px 7px 5px;
}

.select2-container .select2-selection .select2-selection__arrow {
    top: 6px;
    right: 7px;
}

.select2-container .select2-selection .select2-selection__rendered {
    padding-right: 26px;
}

.select2-container {
    max-width: 100%;
}

.select2-selection__clear {
    margin-left: 4px;
}

li.select2-selection__choice {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.select2-container--default .select2-selection--multiple {
    padding-bottom: 0px;
    padding-top: 0;
}

.info.task-module .task-item .title {
    margin-bottom: 7px;
}

.window-info .info.task-module .task-item .item:not(:last-child) {
    margin-bottom: 10px;
}


/* Style for group select picker */
.bootstrap-select .dropdown-menu .dropdown-header {
    font-weight: bold;
    color: #ffffff;
    padding: 8px 12px;
    margin-top: 5px;
    text-transform: uppercase;
    font-size: 0.9em;
  }
  
.bootstrap-select .dropdown-menu .dropdown-header:not(:first-child) {
    margin-top: 10px;
}

.bootstrap-select .dropdown-menu .dropdown-header + .dropdown-item {
    padding-left: 20px; 
}

.bootstrap-select .dropdown-menu .dropdown-divider,
.bootstrap-select .dropdown-menu .divider {
    display: none !important;
}

/* End group select picker style */

.window-info .info .activity-log,
.window-info .info .activity-comment {
    border-radius: 0;
    background: #436999;
    max-height: 764px;
    overflow-y: auto;
}

.window-info .info p.add-item {
    margin-bottom: 0;
}

.window-info .info .activity-log-info p b,
.window-info .info .activity-comment-info p b {
    color: #f0f0f0;
}

.n-p-t {
    padding-top: 0 !important;
}

.n-p-b {
    padding-bottom: 0 !important;
}

.n-p-l {
    padding-left: 0 !important;
}

.n-p-r {
    padding-right: 0 !important;
}

.n-p-lr {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.n-p-tb {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.n-m-t {
    margin-top: 0 !important;
}

.n-m-b {
    margin-bottom: 0 !important;
}

.n-m-l {
    margin-left: 0 !important;
}

.n-m-r {
    margin-right: 0 !important;
}

.n-m-lr {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.n-m-tb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.form-check-label {
    margin-left: 2px;
}

.window-info .info.task-module .task-item .form-check {
    margin-top: 10px;
    margin-bottom: 7px;
}


/* .select2-selection.select2-selection--multiple{
    line-height: 0;
} */

input[type="date"] {
    padding-top: 8px;
}


/* .window-info .info .task-info{
    overflow-y: auto;
    max-height: 483px;
} */

.window-info .info p.add-item.add-item-task {
    margin-top: 7px;
    padding: 0 10px;
}

.window-info .info.task-module .task-item:not(:last-child) {
    margin-bottom: 10px;
}

.card.board .card-header {
    position: relative;
}

.card.board .card-header button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 1px 7px 0px 7px;
}

.card.board .card-header a {
    position: absolute;
    top: 13px;
    right: 17px;
    font-weight: normal;
    font-size: 1rem;
}

.window-info .info.task-module {
    background: #2a466a;
    padding: 0 0 10px 0;
    /* height: 535px; */
    border: solid 1px #436999;
}

.window-info .info.booking-associate-module {
    background: #2a466a;
    padding: 10px;
    min-height: 115px;
}

.window-info .info.file-module {
    background: #2a466a;
    padding: 10px;
    min-height: 115px;
    float: left;
}

.comment-info .reply-description {
    margin-bottom: 7px;
}

textarea.reply-description-height {
    height: 100px;
}

.window-info .info .activity-comment-info .container {
    margin-bottom: 7px;
}

.activity-comment .activity-comment-info .post-by {
    font-size: 14px;
}

.activity-comment .activity-comment-info .post-date {
    font-size: 12px;
    color: #ccc;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.m-b {
    margin-bottom: 15px !important;
}

.m-t {
    margin-top: 15px !important;
}

.m-l {
    margin-left: 15px !important;
}

.m-r {
    margin-right: 15px !important;
}

.m-tb {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.m-lr {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

.separator-line {
    margin-top: 15px;
    margin-bottom: 15px;
    border-top: 1px solid #416fa7;
}

.navbar-brand {
    font-size: 1.15rem;
}

.window-info .info .activity-comment-info p.detail {
    margin-bottom: 0;
}

.window-info .info .activity-comment {
    margin-bottom: 10px;
}

input[type="date"],
input[type="number"] {
    height: 34px;
}

.hide {
    display: none !important;
}

.file-module .file-info {
    margin-top: 10px;
    float: left;
    width: 100%;
}

.file-info .file-box {
    float: left;
    width: 51px;
    height: 51px;
    margin-bottom: 10px;
}

.file-info .file-box:not(:last-child) {
    margin-right: 10px;
}

.embed {
    display: none;
    position: absolute;
    z-index: 2;
    background: #ccc;
}

.embed[type="image/jpeg"] {
    max-width: 500px;
    max-height: 500px;
}

.embed:not([type="image/jpeg"]) {
    width: 500px;
    height: 500px;
}

.file-info .file-box .file:hover .embed {
    display: block;
}

.file-info .file-box .file {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* background-image: url('/upload_files_temp/sample.jpg'); */
    /* cursor: pointer; */
}

[v-cloak] {
    display: none;
}

.noti-box {
    position: relative;
    width: 32px;
}

.noti-info {
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 1.4rem;
}

.noti-info .number {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 18px;
    height: 18px;
    text-align: center;
    padding-top: 1px;
    background: #dc3545;
    color: #fff;
    border-radius: 50px;
    font-size: 0.8rem;
}

.add-case i {
    font-size: 0.9rem;
}

.nav-item.dropdown.profile {
    padding-left: 3px;
}

a.card {
    text-decoration: none;
}

input[readonly],
input[disabled],
textarea[readonly],
textarea[disabled],
.select2-container--default.select2-container--disabled .select2-selection--single {
    background: #ccc !important;
}

select.sl2.is-invalid~span .select2-selection {
    border-color: #ffa9a7;
}

select.sl2.is-invalid~span .select2-selection:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25);
}

a.remove {
    color: #8ba1c7 !important;
}

a.remove:hover {
    color: #abc5f1 !important;
}

.btn-light.focus,
.btn-light:focus,
.btn-light:active {
    box-shadow: none;
}

.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.show>.btn-light.dropdown-toggle:focus {
    box-shadow: none;
}

.btn.dropdown-toggle.bs-placeholder.btn-light.is-invalid {
    border-color: #ffa9a7;
}

.btn.dropdown-toggle.bs-placeholder.btn-light.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25);
}

.list-noti-info {
    padding: 0;
    width: auto;
    min-width: 376px;
    border-radius: 0;
    background: #243c58;
    border: none;
}

.dropdown-menu.list-noti-info {
    border: solid 1px #8ba9d3;
    box-shadow: 0 0 10px -3px #ccc;
}

.list-noti-info p.noti-detail {
    word-break: break-word;
    white-space: pre-line;
}

.list-noti-info a {
    overflow: hidden;
}

.list-noti-info .highlight {
    font-weight: 600;
}

.list-noti-info p {
    margin-bottom: 0;
}

.list-noti-info p.noti-detail {
    font-style: italic;
    font-size: 0.95rem;
    padding: 0 10px;
}

.list-noti-info p.noti-detail .date_format {
    font-size: 0.85rem;
}

.list-noti-info .dropdown-item:not(:last-child) {
    margin-bottom: 5px;
}

.list-noti-info .dropdown-item-none {
    text-align: center;
}

.table {
    color: #f0f0f0;
}

.table {
    margin-top: 5px;
    background: #436999;
}

.table tbody tr:not(:first-child) td,
.table tbody tr:not(:first-child) th {
    border-top: none;
}

.table tr:first-child td {
    border-top: none;
}

.case-view .case-info {
    margin-left: 12px;
    width: 100%;
    background: #436999;
    padding: 7px 14px 0 14px;
}

.case-view .case-module-icon {
    margin-top: 1px;
}

.case-view .case-module-icon i,
.edit-case-content .case-edit-header i,
.add-case-content .case-add-header i {
    font-size: 1.7rem;
}

.case-view .window-box {
    margin-bottom: 0;
}

.table.case-detail .list p:not(:last-child) {
    margin-bottom: 7px;
}

.table.case-detail .column-2 {
    width: 60%;
}

.table.case-detail .info.file-module {
    min-height: auto;
    padding-bottom: 0;
    width: auto;
    margin-top: 0;
}

.table.case-detail .info.file-module .file-info {
    margin-top: 0;
}

.table.case-detail .window-info {
    padding-left: 0;
}

.file-info .file-box:last-child {
    margin-right: 0;
}

.modal.case .modal-content .modal-header.case-view-header {
    padding-bottom: 0;
}

.modal.case .modal-content .modal-header.case-view-header a:not(:first-child) {
    margin-left: 10px;
}

.case-view .case-info .case-info-detail {
    line-height: 1.5;
}

.back-to-view {
    margin-top: 4px;
    /* margin-left: 10px; */
}

.case-view .window-box .case-module-icon.topic {
    margin-top: 0;
}

.table tbody tr:first-child td,
.table tbody tr:first-child th {
    border-top: none;
}

.table.task-detail .column-2 {
    width: 35%;
}

.table.task-detail .column-3 {
    width: 20%;
}

.table.task-detail-info .column-1 {
    width: 40%;
}

.table.task-detail-info .column-2 {
    width: 60%;
}

.task-detail-info .status .status-info,
.task-detail .status .status-info,
.case-info .status .status-info {
    color: #fff;
    padding: 3px 6px 2px 6px;
    border-radius: 3px;
}

.task-detail-info .status .status-info.incomplete {
    background: #dc3545;
    box-shadow: 2px 2px 2px #a5382a;
}

.task-detail-info .status .status-info.completed,
.task-detail .status .status-info.completed,
.case-info .status .status-info.completed {
    background: #1ea03c;
    border: solid 1px #ccc;
    color: #fff;
    border-radius: 0;
}

.review-info {
    background: #2a466a;
    padding: 10px 10px 10px 10px;
}

.review-info .title {
    margin-top: 10px;
    margin-bottom: 7px;
}

.review-info .title:first-child {
    margin-top: 0;
}

.window-info .info .activity-log-info p:last-child,
.window-info .info .activity-comment-info p:last-child {
    margin-bottom: 0;
}

.list-noti-info.show .dropdown-item-none {
    height: 45px;
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    color: #3d79bd;
    background: #c6d7ea;
}

.relative {
    position: relative;
}

.window-box .length {
    /* position: absolute;
    width: 38px; */
    left: 114px;
    top: 5px;
    text-align: center;
    color: #ccc;
    padding-top: 5px;
    padding-left: 5px;
}

.window-box .task-item .item .length {
    padding-top: 0px;
    padding-left: 0px;
}

.window-box .length .number.normal {
    color: #e0dcdc;
}

.window-box .length .number.well {
    color: #05c505;
}

.window-box .length .number.over {
    color: #ff8080;
}

.window-info .item .length,
.window-info .item .length.length-task-title {
    left: 85px;
    top: 0;
}

.booking-associate {
    position: relative;
}

.booking-associate>input,
.booking-associate>button {
    z-index: 1;
}

.booking-associate .delete-box {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 31px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    color: red;
    text-align: center;
    top: 0px;
    left: -29px;
    height: 34px;
    border: solid 2px red;
}

.booking-associate:hover .delete-box {
    display: block;
}

.booking-associate .delete-box .delete {
    font-size: 1.4rem;
    padding-top: 2px;
}

.n-td {
    text-decoration: none !important;
}

main.py-4>.container.normal {
    height: auto;
}

.container.menu .box {
    margin-bottom: 15px;
}

.menu-box .menu-title h3 {
    font-weight: 700;
}

.menu-box .menu-detail {
    color: #ddd;
}

.container.normal.menu.full {
    max-width: unset;
}

.detail-box-right .text-title {
    font-weight: 700;
    margin-top: 15px;
}

.detail-box-right hr {
    border-top: solid 1px #dee2e6;
}

.table.table-menu-list tbody tr:hover {
    background: #2b4a71;
    cursor: pointer;
}

.bold {
    font-weight: 700;
}


/* Checkboxes and Redio buttons and Select Boxes */

.control {
    display: block;
    position: relative;
    padding-left: 26px;
    margin-bottom: 15px;
    cursor: pointer;
    height: 27px;
    padding-top: 2px;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
    background: #ccc;
}

.control input:checked~.control__indicator {
    background: #2aa1c0;
}

.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
    background: #0e647d;
}

.control input:disabled~.control__indicator {
    opacity: 1;
    pointer-events: none;
    background: #868686 !important;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked~.control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    box-sizing: unset;
}

.control--checkbox input:disabled~.control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    left: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}

.control--radio input:disabled~.control__indicator:after {
    background: #7b7b7b;
}

.select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
}

.select select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #e6e6e6;
    color: #7b7b7b;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select select::-ms-expand {
    display: none;
}

.select select:hover,
.select select:focus {
    color: #000;
    background: #ccc;
}

.select select:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.select__arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #7b7b7b transparent transparent transparent;
}

.select select:hover~.select__arrow,
.select select:focus~.select__arrow {
    border-top-color: #000;
}

.select select:disabled~.select__arrow {
    border-top-color: #ccc;
}

.control--checkbox input:disabled~.control__indicator:after {
    border-color: #ffffff;
}

.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
    background: #fff;
}

.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
    background: #1ea03c;
}

.control input:checked~.control__indicator {
    background: #1ea03c;
}


/* End Checkboxes and Redio buttons and Select Boxes */

.table.table-permission .control {
    margin-bottom: 0;
    /* float: right; */
    margin: auto;
    padding-left: 21px;
    width: 21px;
}

.table.table-permission .column-2 {
    width: 10%;
    min-width: 70px;
}

.table.table-permission .column-3 {
    width: 10%;
    min-width: 70px;
}

.table.table-permission .column-4 {
    width: 30%;
}

.width-50p {
    width: 50%;
}

.width-60p {
    width: 60%;
}

.width-70p {
    width: 70%;
}

.width-75p {
    width: 75%;
}

.width-80p {
    width: 80%;
}

.width-90p {
    width: 90%;
}

.width-100p {
    width: 100%;
}

.table input[type="number"] {
    height: auto;
}

.split {
    margin-left: 7px;
    margin-right: 7px;
}

.text-normal {
    font-weight: normal;
}

.table.table-menu-list .highlight {
    background: #223956 !important;
}

.card.normal .card-body .menu-box .menu-title {
    position: relative;
    ;
}

.card.normal .card-body .menu-box .menu-title .delete {
    bottom: 0;
    right: 7px;
    position: absolute;
}

.m-t-rem {
    margin-top: 1rem;
}

.m-b-rem {
    margin-bottom: 1rem;
}

.control.sent-email {
    margin-top: 7px;
    margin-bottom: 0;
}

.message-box {
    background: #33557e;
    border: solid 1px #27d04e;
    padding: 10px 15px;
    border-radius: 3px;
    margin-bottom: 1rem;
    color: #27d04e;
}

.message-box.is-invalid {
    border: solid 1px #ff9c9c;
    color: #ff9c9c;
}

.sync-api {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.card.normal.detail-box-left .card-body,
.card.normal.detail-box-right .card-body {
    min-height: 500px;
}

.add-new-under {
    width: 200px;
    position: absolute;
    top: 0;
    right: -200px;
    z-index: 1;
}

.add-new-under.a-t {
    top: 7px;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #9e9e9e !important;
    opacity: 1;
    /* Firefox */
}

.search::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #95b3d9 !important;
    opacity: 1;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #9e9e9e !important;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #9e9e9e !important;
}

.btn-light.disabled,
.btn-light:disabled {
    background-color: #ccc;
    border-color: #f8f9fa;
    opacity: 0.9;
}

.add-new-under .color-preview .color {
    width: 33px;
    height: 33px;
    background: #f0f0f0;
}

.no-hover {
    cursor: default !important;
}

.review-info .review {
    padding: 10px;
    border: 1px solid #416fa7;
    background: #335580;
    position: relative;
}

.m-t-7px {
    margin-top: 7px;
}

.m-t-10px {
    margin-top: 10px;
}

.check-task-done {
    margin-top: 11px;
    margin-bottom: 0;
}

.noti-box-item .box {
    padding: 7px;
    border: solid 1px #738fb7;
}

.noti-box-item .box .title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 7px;
    position: relative;
}

.dropdown-menu {
    background: #446b9c;
    border-radius: 0;
    border: none;
    box-shadow: 0 0 15px #333;
    border: solid 1px #5ca1f7;
}

body.template-1 .dropdown-menu .noti-box-item a {
    color: #333;
}

.noti-box-item .box:not(:first-child) {
    margin-top: 10px;
}

.noti-box-item .box .title a.clear-all {
    position: absolute;
    right: 0;
    font-weight: normal;
    color: #cddeff;
}

.dropdown-item.active,
.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #213854;
}

.c-board {
    height: 100%;
}

.c-board .arrow-down {
    position: absolute;
    bottom: 15px;
    font-size: 2rem;
    left: calc(50% - 14px);
    z-index: 1;
    display: none;
    line-height: 1;
}

.c-board .arrow-up {
    position: absolute;
    top: 52px;
    font-size: 2rem;
    left: calc(50% - 14px);
    z-index: 1;
    display: none;
    line-height: 1;
}

.arrow-up a,
.arrow-down a {
    opacity: 0.6;
    color: #fff;
}

.arrow-up a:hover,
.arrow-down a:hover {
    opacity: 1;
}

.load-more {
    text-align: center;
    margin-top: 10px;
}

.load-more .load-more-info {
    background: #33557f;
    border-radius: 3px;
    padding: 5px 22px;
    color: #f0f0f0;
    border: 1px solid #416fa7;
}

.load-more a {
    text-decoration: none;
}

.board-loading {
    margin-top: 10px;
    text-align: center;
    display: none;
    background: #3b6292;
    border-radius: 3px;
    padding: 5px 22px;
    color: #f0f0f0;
    /* border: 1px solid #416fa7; */
}

.pb-4,
.py-4 {
    padding-bottom: 1.1rem!important;
}

.board-info {
    height: 100%;
    overflow-y: auto;
    background: #3f608a;
    padding: 10px;
    -ms-overflow-style: none;
    /* IE 10+*/
    scrollbar-width: none;
    /* Firefox*/
}

.c-board>.card.board>.card-body>.board-info::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.list-noti-info .noti-header {
    background: #385c88;
    padding: 10px;
    color: #f0f0f0;
    font-weight: 600;
    font-size: 1.2rem;
    position: relative;
}

.list-noti-info .noti-body {
    padding: 10px;
    background: #385c88;
    padding-top: 0;
}

.list-noti-info .noti-header .clear-all {
    position: absolute;
    right: 10px;
    top: 13px;
    font-weight: normal;
    font-size: 1rem;
}

.noti-box-item .box .info {
    overflow-y: auto;
    max-height: 300px;
    padding-right: 5px;
}

body.template-1 .card.case {
    box-shadow: 0px 0px 5px -1px #17283c;
    border: solid 1px #ccc;
    border-radius: 0;
}

body.template-1 .card.case>.card-body {
    background: #466a98;
}

textarea[disabled],
input[disabled],
select[disabled] {
    cursor: not-allowed;
}

select[readonly]~.dropdown-menu.show {
    display: none;
}

select[readonly]~.btn,
select[readonly]~.btn:active,
select[readonly]~.btn:focus {
    background: #ccc;
}

textarea[readonly],
input[readonly],
select[readonly]~.btn:hover {
    cursor: not-allowed;
}

.control.disabled {
    cursor: not-allowed;
}

body.template-1 .modal.search .modal-content {
    border-radius: 0;
    border: none;
}

.bold {
    font-weight: 600;
}

.search-box .result-info {
    margin-bottom: 10px;
}

.search-box .result-info label {
    margin-bottom: 0;
    color: #ccc;
}

.search-box .result .item h4 {
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.modal.search .modal-body {
    padding-left: 0;
    padding-right: 0;
}

.search-box .result .items .item {
    padding: 10px 28px;
    background: #234066;
    background-image: linear-gradient(#3f628c, #355276);
    border-top: solid 1px #5277a6;
}

.search-box .result .items .item:last-child {
    border-bottom: solid 1px #5277a6;
}

.search-box .result .item .detail-info .info {
    padding: 2px 6px 2px 6px;
    border-radius: 0;
    color: #f0f0f0;
}

.search-box .result .item .detail-info .info .text {
    margin-left: 5px;
    border-radius: 0;
    font-size: 12px;
    font-weight: bold;
    color: #f0f0f0;
}

.search-box .result .item .description {
    /* padding: 0 6px; */
    margin-bottom: 2px;
    color: #f0f0f0;
    min-height: 21px;
}

.search-box .result .item:hover {
    background: #2a466a;
    cursor: pointer;
    /* box-shadow: 0px 0px 5px #75abef; */
}

.search-box .header {
    background: #0e243f;
    padding: 10px 14px;
    font-size: 1.1rem;
}

.modal.search .modal-body,
body.template-1 .modal.reset-password-modal .modal-content {
    padding: 0;
    box-shadow: 0 0 30px #49688e;
    border: solid 1px #ccc;
}

.search-box .search-text {
    margin-top: 14px;
    margin-bottom: 7px;
}

.search-box .result .item .detail-info {
    margin-top: 5px;
    display: flex;
}

.text-highlight {
    background: yellowgreen;
    color: #000;
}

.search-box .note {
    color: #ccc;
}

.highlight-info {
    color: salmon;
}

.highlight-example {
    color: #3fc33f;
}

.highlight-note {
    color: #3fc33f;
}

.search-box .result .item .detail-info .branch-info .info {
    border: solid 1px #ccc;
    color: #fff;
}

.search-box .result .item .detail-info .branch-info .info .text {
    color: #fff;
}

.search-box .item .show-id {
    background: #466a98;
    color: #95b3d9;
    border: solid 1px #95b3d9;
    padding: 4px 7px 2px 7px;
    font-size: 1.1rem;
    font-size: 12px;
    font-weight: bold;
}

.search-box .item .show-id.highlight {
    background: yellowgreen;
    color: #000;
    border: solid 1px #fff;
}

.search-box .search-load-more {
    padding: 10px;
    text-align: center;
    background: #1c3758;
    background-image: linear-gradient(#2a476a, #1c2d42);
    color: #ddd;
}

.search-box .search-load-more:hover {
    background: #1c2d42;
    cursor: pointer;
    box-shadow: 0px 0px 15px #75abef;
}

.search-box .search-load-more:active {
    background: #131e2b;
}

.ball-clip-rotate-multiple>div:last-child {
    border-color: #ccc transparent;
}

.ball-clip-rotate-multiple>div {
    border: 2px solid #ccc;
}


/* spinner */

.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.lds-spinner div {
    transform-origin: 32px 32px;
    animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 29px;
    width: 5px;
    height: 14px;
    border-radius: 20%;
    background: #fff;
}

.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/* more spinner */

.search-box .search-load-more .lds-spinner {
    transform: scale(0.5);
    position: absolute;
    width: auto;
    height: auto;
    top: 5px;
    left: calc(50% - 17px);
}


/* end spinner */


/* loader facebook */

.lds-facebook {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 6px;
    width: 13px;
    background: #fff;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
    left: 6px;
    animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
    left: 26px;
    animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
    left: 45px;
    animation-delay: 0;
}

@keyframes lds-facebook {
    0% {
        top: 6px;
        height: 51px;
    }
    50%,
    100% {
        top: 19px;
        height: 26px;
    }
}


/* more loader facebook */

.lds-facebook div {
    background: #f0f0f0;
}


/* end loader facebook */


/* loader grid */

.lds-grid {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.lds-grid div {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
    top: 6px;
    left: 6px;
    animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
    top: 6px;
    left: 26px;
    animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
    top: 6px;
    left: 45px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
    top: 26px;
    left: 6px;
    animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
    top: 26px;
    left: 26px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
    top: 26px;
    left: 45px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
    top: 45px;
    left: 6px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
    top: 45px;
    left: 26px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
    top: 45px;
    left: 45px;
    animation-delay: -1.6s;
}

@keyframes lds-grid {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


/* loader grid more */


/* end loader grid */


/* loader dual ring */

.lds-dual-ring {
    display: inline-block;
    width: 64px;
    height: 64px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 46px;
    height: 46px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* loader dual ring more */


/* end loader dual ring */

.search-box .search-load-more {
    height: 41px;
}

.search-load-more.loading {
    position: relative;
}

.search-load-more.loading:hover {
    cursor: default;
}

.search-box .search_loading {
    position: relative;
    text-align: center;
}

.modal.search .modal-body {
    min-height: 200px;
}

.sc-05 {
    transform: scale(0.5);
}

.sc-06 {
    transform: scale(0.6);
}

.sc-07 {
    transform: scale(0.7);
}

.sc-08 {
    transform: scale(0.8);
}

.sc-09 {
    transform: scale(0.9);
}

.loading {
    position: relative;
    height: 41px;
}

.loading .loader {
    position: absolute;
    top: -8px;
    left: calc(50% - 66px);
}

.loading .text {
    position: absolute;
    top: 10px;
    left: calc(50% - 17px);
}

.search-box .header:not(:first-child) {
    border-top: solid 1px #ccc;
}

.search-box .show-results.show {
    border-top: solid 1px #ccc;
}

.search-box .show-results {
    height: calc(100% - 44px);
    overflow-y: auto;
}

.modal.auto-full-height .modal-dialog {
    height: calc(100% - 3.5em);
}

.modal.auto-full-height .modal-content {
    height: 100%;
}

.modal.auto-full-height .modal-body {
    height: 100%;
}

.modal.auto-full-height .search-box {
    height: calc(100% - 112px);
}

.modal {
    overflow: auto;
}

.noti-box,
.setting-box {
    width: 32px;
    height: 34px;
}

.control-box .nav-item {
    margin-left: 3px;
}

.info.file-module .message-box {
    float: left;
    width: 100%;
    margin-top: 2px;
}

.log-box .log-item {
    display: flex;
    padding: 7px 24px;
}

.log-box .log-item .log-info {
    width: 250px;
}

.log-box .log-item .log-detail {
    width: 100%;
}

.info-user {
    font-size: 0.9rem;
    color: #ccc;
    font-style: italic;
}

.log-box .log-detail p {
    margin-bottom: 5px;
    color: #ccc;
}

.log-box .log-detail p .title {
    text-decoration: underline;
}

.log-box .log-item .log-detail .detail-info {
    padding-left: 24px;
    font-style: italic;
}

.loadmore-info .load-more {
    padding: 10px;
    text-align: center;
    background: #254369;
    background-image: linear-gradient(#3f628c, #254369);
    color: #ddd;
    cursor: pointer;
}

.loadmore-info .load-more:hover {
    background: #1c324e;
    background-image: linear-gradient(#3b5b82, #1c324e);
}

.loadmore-info .loading-box {
    margin-top: 10px;
}

.loading-page {
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
}

.loading-page .loading-contain {
    position: absolute;
    width: 200px;
    top: calc(50% - 50px);
    left: calc(50% - 100px);
    /* background: #000; */
    text-align: center;
    display: flex;
}

.loading-page .loading-contain .loader {
    text-align: center;
    padding-left: 0px;
    width: auto;
    height: auto;
    margin: auto;
}

.loading-page .loading-contain .loader:after {
    border-color: #ccc transparent #ccc transparent;
}

.loading-page .loading-contain .text {
    font-size: 1.8rem;
    margin: auto;
    color: #ccc;
}

.card {
    background-color: unset;
}

.btn-primary {
    background-color: #2a476a;
    border: 1px solid #2a476a;
}

.btn-primary:hover {
    color: #fff;
    background-color: #3c6392;
    border-color: #4f85c5;
}

body.template-1 .card {
    box-shadow: 0 0 15px 0px #2a476a;
}

body.template-1 .card .card-body {
    background: #466a98;
}

body.template-1 .card.board {
    box-shadow: unset;
}

.booking-associate .delete-box:hover {
    background: #efcccc;
    border: solid 2px #d20000;
    color: #d20000;
}

.table:not(.case-detail) tr:nth-child(odd) {
    background: #436999
}

.table:not(.case-detail) tr:nth-child(even) {
    background: #406492
}


/* tr:nth-child(odd) {background: #436999}
tr:nth-child(even) {background: #395e8c} */

.table thead tr:nth-child(odd),
table thead tr:nth-child(even) {
    background: #395e8c !important;
}

.case-info .box-info .box-detail.box-1 {
    float: left;
    width: calc(50% - 5px);
}

.case-info .box-info .box-detail.box-2 {
    float: right;
    width: calc(50% - 5px);
}

col:nth-child(2n+1) {
    background: #395e8c;
}

.case-info .box-info .box-detail .table tbody tr th:first-child {
    text-align: left;
}

.table.task-detail a {
    text-decoration: underline;
}

.log-item.even {
    background: #406492;
}

.udl {
    text-decoration: underline;
}

.activity-log-info {
    padding: 14px 0;
}

.case-info .file-info .file-box {
    width: 49px;
    height: 49px;
    margin-bottom: 10px;
}

.case-info .file-info .file-box:not(:last-child) {
    margin-right: 10px;
}

.case-info .window-info .info.file-module {
    background: #395e8c;
}

.table.case-detail td.files {
    padding: 0 0 0 10px;
}

.btn.btn-primary.deep {
    background: #436998;
    border: 1px solid #436998;
}

.btn.btn-primary.deep:hover,
.btn.btn-primary.deep:focus,
.btn.btn-primary.deep:active {
    background: #273b54;
    border: 1px solid #436998;
}

.btn.btn-danger.deep {
    background: #984343;
    border: 1px solid #984343;
}

.btn.btn-danger.deep:hover,
.btn.btn-danger.deep:focus,
.btn.btn-danger.deep:active {
    background: #793333;
    border: 1px solid #b54b4b;
}

.files .no-file {
    padding-top: 10.5px;
}

.window-module.module-info {
    /* margin-left: 38px; */
    margin-top: 5px;
}

.window-module.module-info .case-info {
    margin-left: 0;
}

.case-info .box-info {
    float: left;
    width: 100%;
}

.btn {
    min-width: 65px;
}

.btn.search {
    min-width: 77px;
}

.case-view .window-box .case-module-icon.topic i.fa-check-square,
.case-view .case-module-icon i.fa-check-square,
.modal-content.task-content form i.fa-check-square {
    font-size: 1.85rem;
}

.case-module-icon i.fa-clipboard-list {
    font-size: 2rem;
}


/* .btn:not(:last-child){
    margin-right:5px;
} */

.btn-success {
    color: #fff;
    background-color: #1ea03c;
    border-color: #1ea03c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #15822d;
    border-color: #6dbd7f;
}

.btn-secondary {
    color: #f0f0f0;
    background-color: #7a848f;
    border-color: #7a848f;
}

.btn-secondary:hover,
.btn-secondary:hover,
.btn-secondary:hover {
    background-color: #4e575a;
    border-color: #a1a6ab;
}

.info-elapsed {
    color: #95b3d9;
}

.card-body .case-info .info-left {
    width: 50%;
    float: left;
}

.card-body .case-info .info-right {
    width: 50%;
    float: right;
    text-align: right;
}

.card.board .card-body .case-detail {
    float: left;
    width: 100%;
}

.card.board .card-body .branch-info .info-left {
    float: left;
    width: 50%;
    text-align: left;
}

.card.board .card-body .branch-info .info-right {
    float: right;
    width: 50%;
}

.card.board .card-body .branch-info .show-id {
    background: #466a98;
    color: #95b3d9;
    border: solid 1px #95b3d9;
    padding: 4px 6px 4px 6px;
    font-size: 11px;
    font-weight: bold;
}

.case-info-id, .case-info-status {
    position: absolute;
    width: auto;
    text-align: center;
    top: -1px;
    left: 200px;
    width: 120px;
    background: #3b608f;
    padding: 2px 10px 0px 10px;
    border-left: solid 1px #416fa7;
    border-right: solid 1px #416fa7;
    border-bottom: solid 1px #416fa7;
}

.case-info-id .show-id, .case-info-status .show-status {
    color: #95b3d9;
    font-size: 13px;
    font-weight: bold;
}

.case-info-status{
    left: 330px;
}

.case-view-header,
.case-edit-header {
    position: relative;
}

.search-box .result .item .detail-info .ref:not(:first-child) {
    margin-left: 7px;
}

body.template-1 .card.normal.box-fade .card-body {
    background: #466a98;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    margin: 0;
}

.profile-box {
    float: left;
    width: 100%;
    height: 100%;
    min-height: 420px;
}

.profile-box .box-left {
    float: left;
    width: 30%;
    height: 100%;
}

.profile-box .box-right {
    float: right;
    width: 70%;
    height: 100%;
}

.profile-box .image-box {
    max-width: 100%;
    height: 276px;
    text-align: center;
    border: solid 1px #7092be;
    background: #2a466a;
    position: relative;
}

.profile-box .image-box .profile {
    position: absolute;
    max-width: 100%;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #41618a;
    background: url(/images/profiles/default-user.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 30%;
    background-position-x: 50%;
}

.profile-box .box-left,
.profile-box .box-right {
    padding: 0 10px;
}

.profile-box .header {
    font-size: 1.8rem;
    font-weight: bold;
}

.profile-box .header-detail {
    font-size: 1.2rem;
    margin-bottom: 40px;
    margin-top: 3px;
}

.profile-box .box-right {
    position: relative;
    padding: 0 36px;
}

.profile-box .box-right .userid {
    position: absolute;
}

.profile-box .profile-view .form-group {
    margin-bottom: 0;
}

.settings.settings-box .card.normal .card-body:hover {
    background: #1e314a;
    box-shadow: 0 0 15px #96b6de;
}

.profile-box .menu-list {
    margin-top: 24px;
}

.profile-box .menu-list li {
    list-style: none;
    background: #2a466a;
    padding: 7px 14px;
    border: solid 1px #7092be;
}

.profile-box .menu-list li:not(:first-child) {
    margin-top: 7px;
}

.profile-box .menu-list li:hover,
.profile-box .menu-list li:active,
.profile-box .menu-list li:focus,
.profile-box .menu-list li.active {
    cursor: pointer;
    background: #1f324a;
    box-shadow: 0 0 10px 1px #6f9ace;
    border: solid 1px #93b4dc;
}

.image-box:hover>.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.5;
}

.image-box:hover .profile-menu {
    display: block;
}

.image-box .profile-menu {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 20px 20px;
}

.image-box .profile-menu li {
    list-style: none;
    padding: 7px 14px;
    background: #466a98;
    border: solid 1px #82ace2;
}

.image-box:hover .profile-menu li:hover {
    cursor: pointer;
}

.image-box:hover .profile-menu li:hover,
.image-box:hover .profile-menu li:active,
.image-box:hover .profile-menu li:focus {
    background: #2a4669;
    box-shadow: 0 0 10px 1px #6f9ace;
    border: solid 1px #93b4dc;
}

.image-box .profile-menu li:not(:first-child) {
    margin-top: 7px;
}

.p-center {
    width: 100%;
    height: 100%;
    display: table;
}

.p-center>.center {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.item-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-box hr {
    border-color: #7293be;
}

.profile-box .valid-message-box {
    padding: 0 10px;
}

.setting-page {
    display: flex;
}

.setting-page .setting-icon-box {
    width: 75px;
    text-align: center;
}

.setting-page .setting-detail-box {
    padding-left: 10px;
}

.setting-page .setting-icon-box img {
    max-width: 57px;
    max-height: 57px;
}

.menu-box .menu-search {
    margin-top: 14px;
}

.menu-box .menu-info .table-responsive {
    overflow-y: auto;
    max-height: 534px;
}

.menu-box.has-search input[name="search"] {
    border-radius: 0;
    margin-bottom: 0px;
    border: none;
}

.menu-box .menu-info .table {
    margin-top: 0;
    margin-bottom: 0;
}

.menu-box .menu-info .table thead th {
    border-top: none;
}

.menu-box .menu-info .header {
    border-bottom: 2px solid #dee2e6;
    padding: .75rem;
    background: #395e8c;
    color: #f0f0f0;
    font-weight: bold;
}

.menu-box .menu-search .search-row {
    margin-top: 4px;
    margin-bottom: 6px;
}

.loadmore-info.has-border .load-more {
    border: solid 1px #5277a6;
}

.table.case-detail .list p:last-child {
    margin-bottom: 0;
}

.modal-header .control-box {
    position: absolute;
    top: 15px;
    right: 30px;
    z-index: 1;
}

.case-view-header {
    height: 18px;
}

.modal-content.task-content .modal-control {
    padding-left: 38px;
}

.modal .modal-content.task-content .case-edit-header,
.modal .modal-content.task-content .case-add-header {
    padding-bottom: 0;
}

.modal-content.task-content form i.fa-check-square {
    margin-top: 1px;
}

.modal-content.task-content form {
    margin-top: 5px;
}

.modal-content.task-content form .case-module-title {
    margin-top: 4px;
}

.modal-content.case-content .modal-control {
    padding-left: 33px;
}

.window-box:last-child {
    margin-bottom: 0;
}

.modal.case .modal-content.edit-case-content .modal-header.case-edit-header,
.modal.case .modal-content.add-case-content .modal-header {
    padding-top: 25px;
    padding-bottom: 0;
}

.modal-content.edit-case-content .modal-header.case-edit-header .window-box {
    margin-bottom: 0;
}

.edit-case-content .case-edit-header i,
.add-case-content .case-add-header i {
    margin-top: 3px;
}

.frame-content {
    border: solid 1px #436999;
    background: #34547c;
    padding: 15px;
    position: relative;
}

.frame-content .case-module-icon {
    color: #83acde;
}

.frame-content.frame-task,
.frame-content.frame-review {
    background: #2a4669;
    margin-top: 7px;
    margin-bottom: 7px;
    padding: 8px 10px 14px 10px;
}

.frame-content.frame-review {
    margin-top: 7px;
}

.review .control {
    margin-top: 2px;
}

.frame-content.add-case-box {
    margin-bottom: 16px;
}

.p-l {
    padding-left: 15px;
}

.p-r {
    padding-right: 15px;
}

.p-t {
    padding-top: 15px;
}

.p-b {
    padding-bottom: 15px;
}

.p-lr {
    padding-left: 15px;
    padding-right: 15px;
}

.p-tb {
    padding-top: 15px;
    padding-bottom: 15px;
}

.p-l-2 {
    padding-left: 30px;
}

.p-r-2 {
    padding-right: 30px;
}

.p-t-2 {
    padding-top: 30px;
}

.p-b-2 {
    padding-bottom: 30px;
}

.p-lr-2 {
    padding-left: 30px;
    padding-right: 30px;
}

.p-tb-2 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.frame-content.frame-task-box {
    margin-top: 7px;
    padding-top: 7px;
    padding-bottom: 18px;
}

.frame-content.frame-task-box .window-info {
    padding-left: 0;
}

.frame-content.frame-task-box .window-info .info.task-module {
    background: transparent;
    padding: 0;
}

.frame-content.frame-task-box .window-info .info.task-module .task-item {
    background: transparent;
    padding: 0;
    border: none;
}

.frame-content.frame-task-box .task-item .frame-content .frame-task {
    background: #2a4669;
    margin-bottom: 0;
}

.frame-content.frame-task-box .modal-control {
    padding-left: 0;
}

.window-info .info.task-module .task-item .item .assign {
    margin-bottom: 7px;
}

.require {
    position: relative;
    font-weight: bold;
    color: #fe928f;
    font-size: 1.3rem;
    margin-left: 2px;
    width: 7px;
}

.require .info {
    position: absolute;
    top: 0;
    left: 0px;
}

.task-item .title,
.task-item .assign,
.review-info .review .title {
    display: flex;
}

.task-item .title .require .info,
.task-item .assign .require .info,
.review-info .review .require .info {
    top: -7px;
    left: 0px;
}

.frame-content h3.case-module-title {
    margin-left: 5px;
}

.window-module .info-text,
.task-item .item .info-text,
.review-info .review .info-text,
.filter-box .header-group .info-text,
.search-box .header-group .info-text,
.table-permission .header-group .info-text {
    font-size: 1rem;
    padding: 5px 6px 0px 6px;
}

.task-item .item .info-text,
.review-info .review .info-text,
.filter-box .header-group .info-text,
.table-permission .header-group .info-text {
    padding-top: 0;
}

.search-box .header-group .info-text {
    padding-top: 2px;
}

.window-info .info.task-module .task-item .item {
    position: relative;
}

.task-item .item .header-group,
.review-info .review .header-group {
    position: relative;
    display: flex;
    z-index: 1;
}

.frame-content .note-box {
    position: absolute;
    top: -32px;
    right: 0;
    padding: 5px 0;
    font-style: italic;
    color: #ccc;
}

.frame-content .note-box .detail-info {
    display: flex;
}

.frame-content .note-box .detail-info .require {
    margin-left: 7px;
    margin-right: 6px;
}

.review-info .review .header-group:not(:first-child) {
    margin-top: 10px;
}

.break-all,
.case-info-title,
.case-info-detail,
.card.board .card-body .case-detail,
.log-box .log-detail p {
    word-break: break-all;
}

.container.container-full {
    max-width: unset;
}

.header-group {
    display: flex;
}

.card-body.report {
    padding-top: 1rem;
}

.daterangepicker table thead tr:nth-child(even) {
    background: unset !important;
}

.daterangepicker {
    color: #212529;
}

.drpicker[readonly] {
    background: #fff !important;
    cursor: pointer;
}

.table.table-report thead th p {
    margin-bottom: 0;
}

.table.table-report thead th p:nth-child(2) {
    color: #a6cdff;
}

.table.table-report tbody td p:nth-child(2) {
    color: #a6cdff;
}

.table.table-report thead th {
    /* text-align: center; */
    vertical-align: top;
    padding: 7px;
}

.table.table-report tbody td {
    vertical-align: top;
    padding: 7px;
}

.table.table-report thead th.column-1 {
    width: 7%;
}

.table.table-report thead th.column-2 {
    width: auto;
}

.table.table-report thead th.column-3 {
    width: 9%;
}

.table.table-report thead th.column-4 {
    width: 8%;
}

.table.table-report thead th.column-5 {
    width: 6%;
}

.table.table-report thead th.column-6 {
    width: 6%;
}

.table.table-report thead th.column-7 {
    width: 8%;
}

.table.table-report thead th.column-8 {
    width: 13%;
}

.table.table-report thead th.column-9 {
    width: 6%;
}

.table.table-report thead th.column-10 {
    width: 5%;
}

.table.table-report thead th.column-11 {
    width: 9%;
}

.center {
    text-align: center;
}

.table.table-report tbody td p {
    margin-bottom: 0;
    word-break: break-all;
}

.texture {
    color: #ccc;
}

.report-header .header-group .texture {
    margin-left: 5px;
}

.slide-top {
    position: fixed;
    opacity: 0.5;
    bottom: 6px;
    right: 12px;
    font-size: 3rem;
    line-height: 1;
    display: none;
}

.slide-top:hover {
    opacity: 1;
    cursor: pointer;
}

.report-box.filter-box .form-row .form-group {
    margin-bottom: 7px;
}

.report-box.filter-box .form-row .form-group label {
    margin-bottom: 3px;
}

.report-box.filter-box .form-row .form-group.m-t {
    margin-top: 7px !important;
}

.dpicker[readonly],
.dpicker_incident[readonly],
.dpicker_incident_report[readonly],
.dpicker_resolution_complete[readonly] {
    background: #fff !important;
    cursor: pointer;
}

.dpicker_incident.date-disabled[readonly] {
    background: #ccc !important;
}

.overlap-box {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

.overlap-box.date-disabled {
    cursor: not-allowed;
    width: calc(100% - 33px);
}

.des-search {
    position: absolute;
    top: 14px;
    right: 10px;
    font-size: 0.9rem;
    color: #ccc;
    font-style: italic;
}

.item.has-booking {
    position: relative;
    padding-right: 85px !important;
    min-height: 93px;
}

.item .booking-search-box {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #466a98;
    color: #95b3d9;
    border: solid 1px #95b3d9;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
    line-height: 1.2;
}

.item .booking-search-box .booking-info p {
    margin-bottom: 0;
    padding-left: 4px;
}

.item.has-booking:hover .booking-search-box,
.item:hover .show-id {
    background: #2a4669;
}

.search-box .result .item .detail-info .info.has_date_search,
.search-box .result .item .detail-info .info.has_date_search .text {
    color: yellowgreen !important;
}

.report-box .result .control-box {
    position: absolute;
    right: 0;
    top: -11px;
}

.menu-info .header {
    position: relative;
}

.menu-info .header .add-item {
    position: absolute;
    top: 11px;
    right: 10px;
    font-weight: normal;
}

.menu-info {
    margin-top: 14px;
}

.menu-info.has-border {
    border: solid 1px #718fb5;
}

.loadmore-info.has-border .loading-box {
    height: 43px;
}

.card.board .card-body .case-info .info:not(:first-child) .text {
    margin-left: 3px;
}

.dropdown-menu .desc-select {
    margin-left: 7px;
    color: #ccc;
    font-style: italic;
}

.tr-highlight {
    background: #4e6918 !important;
}

.card.detail-box-right .menu-box .menu-info .table-responsive {
    overflow-y: unset;
    max-height: unset;
}

.card.detail-box-right .form-group>label {
    display: flex;
}

.table-permission .text-second {
    color: #ccc;
    font-style: italic;
    margin-left: 7px;
}

.task-module .task-info .task-box {
    overflow-y: auto;
    max-height: 605px;
    padding: 10px;
    z-index: 1;
}

.modal-content.task-content .task-module .task-info .task-box {
    overflow-y: unset;
    max-height: auto;
}

.task-item .task-no {
    position: absolute;
    top: -11px;
    right: 50px;
    padding: 0px 7px 0px 5px;
    background: #335580;
    border-bottom: solid 1px #436999;
    border-left: solid 1px #436999;
    border-right: solid 1px #436999;
    /* border: solid 1px #436999; */
    /* box-shadow: 0 0 3px 1px #27466b; */
    color: #ccc;
    font-style: italic;
    z-index: 1;
}

.case-content .task-info .task-box .task-item,
.case-content .task-item .frame-content,
.case-content .info.task-module .task-item .item,
.case-content .dropdown.bootstrap-select {
    position: unset;
}

.case-content .info.task-module .task-item .item.relative {
    position: relative;
}

.info-elapsed {
    display: flex;
    justify-content: space-between;
}

.info-elapsed .image-box {
    margin-left: 5px;
    margin-top: -3px;
}

.image-box .image-body {
    width: 24px;
    height: 24px;
    background: gray;
    border-radius: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 30%;
    background-position-x: 50%;
    text-align: center;
}

.info-elapsed .elapsed-box {
    margin-left: auto;
}

.ref.info.duedate,
.ref.info.process {
    line-height: 1.1;
    margin-top: -1px;
    padding-top: 3px !important;
}

.noti-body .text-secondary {
    color: #bbb !important;
    font-weight: normal;
    /* font-style: italic; */
}

.download-file-box {
    display: none;
    position: absolute;
    z-index: 2;
    padding: 2px 5px;
    background: #444;
    width: 500px;
    top: -25px;
}

.file-info .file-box .file:hover .download-file-box {
    display: block;
}

.m-a {
    margin: auto;
}

.m-t-a {
    margin-top: auto;
}

.m-b-a {
    margin-bottom: auto;
}

.m-l-a {
    margin-left: auto;
}

.m-r-a {
    margin-right: auto;
}

.reset-password-box {
    border: solid 1px #436999;
    background: #34547c;
    padding: 15px;
}

.reset-password-modal .modal-body {
    padding-top: 0;
}

.reset-password-modal .modal-content {
    border-radius: 0;
}

.justify-left {
    justify-content: left;
}

.menu-box .inactive {
    min-width: 110px;
    text-align: right;
    margin-left: auto;
}

.brand-box {
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.container.full {
    width: 100%;
    max-width: unset;
}

.container.full.brand {
    height: auto;
}

.brand-box .brand-info {
    font: 900 2.38rem arial, sans-serif;
    background-color: #223650;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: #466a9880 0px 3px 3px;
    text-shadow: 0px 0px 6px rgba(70, 106, 152, 0.7);
}

.modal.search .modal-content {
    position: relative;
}

.modal.search .modal-content .close {
    position: absolute;
    top: 10px;
    right: 13px;
    z-index: 1;
}

.nav-link.setting-box:hover, .nav-link.setting-box.active{
    background-color: #436999;
    color: #f0f0f0;
    border-radius: .25rem;
}

.noti-box-alert{
    padding-left: 5px;
    height: 34px;
}

.control-box .action-control{
    width:37px;
}

.table thead th{
    vertical-align: top;
}

.card.board .card-body .case-info .info:not(.success):not(.over), .search-box .result .item .detail-info .info:not(.success):not(.over){
    padding-left: 0;
}

.search-box .result .item .detail-info .ref.branch-info .info{
    padding-left:6px;
}

.error-box{
    text-align: center;
    margin-top:5rem;
}

.error-box .error-info{
    font-size:10rem;
}

.error-box .error-info{
    font-size:10rem;
}

.error-box .header-info{
    font-size:1.5rem;
    color: #ddd;
}

.error-box .detail-info{
    font-size:1rem;
}

.error-box .footer-info{
    margin-top:2rem;
}

.redirect-box .header-info{
    font-size:2rem;
}

.redirect-box .detail-info{
    font-size: 1.5rem;
    color: #ddd;
    margin-top: 2rem;
}

.redirect-box{
    text-align: center;
    margin-top:5rem;
}

.noti-info .number.over{
    padding-left:1px;
}