@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-Bold.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-Bold.woff') format('woff'), url('../fonts/OpenSans/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Italic.eot');
    src: url('../fonts/OpenSans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-Italic.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-Italic.woff') format('woff'), url('../fonts/OpenSans/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-BoldItalic.eot');
    src: url('../fonts/OpenSans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-BoldItalic.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'), url('../fonts/OpenSans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-LightItalic.eot');
    src: url('../fonts/OpenSans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-LightItalic.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-LightItalic.woff') format('woff'), url('../fonts/OpenSans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-Regular.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-Regular.woff') format('woff'), url('../fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Light.eot');
    src: url('../fonts/OpenSans/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans/OpenSans-Light.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-Light.woff') format('woff'), url('../fonts/OpenSans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}



body, .btn {
    font-size: 15px;
}

.input-group-btn .btn {
    font-size: 13px;
}

.fixed-fluid > [class^="fixed-"], .fixed-fluid [class*=" fixed-"] {
    padding-top: 10px;
}


@media only screen and (min-width: 1025px) {
    .fluid {
        float: left;
        width: calc(100% - 350px + 15px * 2);
    }
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.pt-0 {
    padding-top: 0px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-35 {
    padding-top: 35px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

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

.mt-0 {
    margin-top: 0 !important;
}

.mt-5 {
    margin-top: 5px !important;
}

#mainnav li .arrow {
    float: right;
    line-height: 0.72;
    padding-right: 0;
}

.media-block .media-body {
    display: grid;
}

.panel-title {
    font-weight: bold;
}

#navbar .brand-title {
    padding: 0 1.5em 0 59px;
    width: auto;
    color: white;
}

.dropzone, .dropzone-container {
    min-height: 250px;
    padding: 0;
}

    .dropzone .dz-preview, .dropzone-container .dz-preview {
        margin: 0;
    }

    .dropzone .dz-message, .dropzone-container .dz-message {
        margin: 5.5em 0;
    }

    .dropzone .dz-preview .dz-image, .dropzone-container .dz-preview .dz-image {
        width: 258px;
        height: 228px;
    }

.dz-image img {
    width: 100%;
}

.dz-img {
    width: 50px;
    height: 50px;
}

.bootstrap-tagsinput {
    padding: 0 6px 0;
    margin-bottom: 0;
}

    .bootstrap-tagsinput input {
        height: 33px;
    }

.dataTables_info {
    float: left;
}

.dataTables_paginate {
    float: right;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    margin-top: 10px;
}

.request {
    border-left: solid 2px #ff0000;
}

.custom-request {
    border-left: solid 2px #ff0000;
}


/*Add New*/
.modal-dialog {
    margin-top: 30px;
}

#mainnav-menu > .list-divider {
    margin: 0;
}

#mainnav .list-header {
    font-size: 13px;
}

.fixed-fluid > .fluid {
    overflow: inherit;
}

.panel-body.active {
    box-shadow: 0 3px 15px rgba(0,0,0,0.25);
    border: solid 1px rgba(185, 220, 255, 0.54);
}

.panel-body {
    padding: 25px 20px 25px;
}


.clock {
    background: rgba(255,255,255,.1);
    line-height: 100%;
    font-size: 1.5rem;
    border-radius: 2px;
    margin-right: 20px;
    margin-top: 10px;
    padding: 10px 15px;
}

.d-md-inline-block {
    display: inline-block !important;
}

.clock #time {
    color: white;
}

input[type=text][readonly] {
    display: block;
    width: 100%;
    padding-top: .375rem;
    padding-bottom: .375rem;
    margin-bottom: 0;
    line-height: 1.5;
    color: #212529;
    border: solid transparent;
    border-width: 0;
}

.magic-radio[disabled] + label, .btn[aria-disabled] {
    color: #212529 !important;
    cursor: text !important;
    opacity: 0.8;
}

.fixed-table-toolbar .bs-bars, .fixed-table-toolbar .columns, .fixed-table-toolbar .search {
    margin-top: 0px;
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding-top: .552rem;
    padding-bottom: .375rem;
    margin-bottom: 0;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

    .form-control-plaintext h3 {
        font-size: 1.3em;
    }

.bootstrap-timepicker-widget {
    z-index: 10010;
}

.tasklist > li {
    cursor: unset;
}

table div.btn-group.dropdown {
    position: absolute;
}

.align-baseline {
    vertical-align: baseline !important;
}

.align-top {
    vertical-align: top !important;
}

.align-middle {
    vertical-align: middle !important;
}

.align-bottom {
    vertical-align: bottom !important;
}

.align-text-bottom {
    vertical-align: text-bottom !important;
}

.align-text-top {
    vertical-align: text-top !important;
}

.text-break {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    #mainnav-menu ul a, .menu-popover .sub-menu ul a {
        padding: 8px 20px 8px 43px;
    }
}

/* NAVIGATION - SHORTCUT BUTTONS */
/*======================================*/
.m_shortcut {
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 10px;
}

    .m_shortcut ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .m_shortcut li {
        padding: 0;
        vertical-align: middle;
        text-align: center;
    }

    .m_shortcut .shortcut-grid {
        display: table;
        border: 0;
        width: 100%;
        height: 1.7em;
        color: #6b737c;
    }

        .m_shortcut .shortcut-grid > i {
            display: table-cell;
            vertical-align: middle;
            font-size: 13px;
        }

        .m_shortcut .shortcut-grid > span {
            display: table-cell;
            vertical-align: middle;
        }

    .m_shortcut .shortcut-wrap .shortcut-grid > .icon-wrap,
    .m_shortcut .shortcut-wrap .shortcut-grid:hover > .icon-wrap {
        transition: all .3s;
    }

    .m_shortcut .shortcut-wrap .shortcut-grid:hover > .icon-wrap {
        background-color: #25476a;
        color: #fff;
    }

@media (min-width: 768px) {
    #container:not(.mainnav-sm) .m_shortcut {
        margin-top: 15px;
        margin-bottom: 10px;
    }

    #container.mainnav-sm .m_shortcut {
        max-height: 250px;
    }

        #container.mainnav-sm .m_shortcut .shortcut-wrap .shortcut-grid {
            padding: 2px 8.75px;
        }

            #container.mainnav-sm .m_shortcut .shortcut-wrap .shortcut-grid .icon-wrap {
                transform: translateY(5px);
            }

        #container.mainnav-sm .m_shortcut > ul > li {
            width: 100%;
            text-align: left;
        }

            #container.mainnav-sm .m_shortcut > ul > li .shortcut-grid {
                height: auto;
                display: block;
                padding: 12px 21px;
            }

            #container.mainnav-sm .m_shortcut > ul > li i {
                font-size: 13px;
            }

        #container.mainnav-sm .m_shortcut .shortcut-grid > .hide-sm {
            display: none;
        }
}

i.form-control-feedback {
    line-height: 32px;
}

.pad-xs {
    padding: .25em;
}

.pad-sm {
    padding: .5em;
}

.pad-md {
    padding: 1em;
}

.pad-lg {
    padding: 1.5em;
}

.pad-xl {
    padding: 3em;
}

.pad-x-xs {
    padding: .25em 0;
}

.pad-x-sm {
    padding: .5em 0;
}

.pad-x-md {
    padding: 1em 0;
}

.pad-x-lg {
    padding: 1.5em 0;
}

.pad-x-xl {
    padding: 3em 0;
}

.pad-y-xs {
    padding: 0 .25em;
}

.pad-y-sm {
    padding: 0 .5em;
}

.pad-y-md {
    padding: 0 1em;
}

.pad-y-lg {
    padding: 0 1.5em;
}

.pad-y-xl {
    padding: 0 3em;
}

.pad-top-xs {
    padding-top: .25em;
}

.pad-top-sm {
    padding-top: .5em;
}

.pad-top-md {
    padding-top: 1em;
}

.pad-top-lg {
    padding-top: 1.5em;
}

.pad-top-xl {
    padding-top: 3em;
}

.pad-right-xs {
    padding-right: .25em;
}

.pad-right-sm {
    padding-right: .5em;
}

.pad-right-md {
    padding-right: 1em;
}

.pad-right-lg {
    padding-right: 1.5em;
}

.pad-right-xl {
    padding-right: 3em;
}

.pad-bottom-xs {
    padding-bottom: .25em;
}

.pad-bottom-sm {
    padding-bottom: .5em;
}

.pad-bottom-md {
    padding-bottom: 1em;
}

.pad-bottom-lg {
    padding-bottom: 1.5em;
}

.pad-bottom-xl {
    padding-bottom: 3em;
}

.pad-left-xs {
    padding-left: .25em;
}

.pad-left-sm {
    padding-left: .5em;
}

.pad-left-md {
    padding-left: 1em;
}

.pad-left-lg {
    padding-left: 1.5em;
}

.pad-left-xl {
    padding-left: 3em;
}

.mar-xs {
    margin: .25em;
}

.mar-sm {
    margin: .5em;
}

.mar-md {
    margin: 1em;
}

.mar-lg {
    margin: 1.5em;
}

.mar-xl {
    margin: 3em;
}

.mar-x-xs {
    margin: .25em 0;
}

.mar-x-sm {
    margin: .5em 0;
}

.mar-x-md {
    margin: 1em 0;
}

.mar-x-lg {
    margin: 1.5em 0;
}

.mar-x-xl {
    margin: 3em 0;
}

.mar-y-xs {
    margin: 0 .25em;
}

.mar-y-sm {
    margin: 0 .5em;
}

.mar-y-md {
    margin: 0 1em;
}

.mar-y-lg {
    margin: 0 1.5em;
}

.mar-y-xl {
    margin: 0 3em;
}

.mar-top-xs {
    margin-top: .25em;
}

.mar-top-sm {
    margin-top: .5em;
}

.mar-top-md {
    margin-top: 1em;
}

.mar-top-lg {
    margin-top: 1.5em;
}

.mar-top-xl {
    margin-top: 3em;
}

.mar-right-xs {
    margin-right: .25em;
}

.mar-right-sm {
    margin-right: .5em;
}

.mar-right-md {
    margin-right: 1em;
}

.mar-right-lg {
    margin-right: 1.5em;
}

.mar-right-xl {
    margin-right: 3em;
}

.mar-bottom-xs {
    margin-bottom: .25em;
}

.mar-bottom-sm {
    margin-bottom: .5em;
}

.mar-bottom-md {
    margin-bottom: 1em;
}

.mar-bottom-lg {
    margin-bottom: 1.5em;
}

.mar-bottom-xl {
    margin-bottom: 3em;
}

.mar-left-xs {
    margin-left: .25em;
}

.mar-left-sm {
    margin-left: .5em;
}

.mar-left-md {
    margin-left: 1em;
}

.mar-left-lg {
    margin-left: 1.5em;
}

.mar-left-xl {
    margin-left: 3em;
}

/* เปรม */
a.six-tab {
    line-height: 0.8;
}

.btn-sm.btn-labeled {
    font-size: 12px;
}

.bootstrap-tagsinput .tag {
    font-size: 13px;
}

th, th.text-right {
    text-align: center;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-right: 8px;
}

/*.pass_show {
    position: relative
}

    .pass_show .ptxt {
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 2;
        color: #f36c01;
        margin-top: -10px;
        cursor: pointer;
        transition: .3s ease all;
    }

        .pass_show .ptxt:hover {
            color: #333333;
        }*/

.pass_show {
    position: relative;
    width: 100%;
}

    .pass_show input {
        position: unset !important;
    }

    .pass_show .ptxt {
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 2;
        color: #f36c01;
        margin-top: -10px;
        cursor: pointer;
        transition: .3s ease all;
    }

        .pass_show .ptxt:hover {
            color: #333333;
        }


body, #content-container {
    color: #4a5155;
}

.menuSlide {
    white-space: nowrap;
    overflow-y: hidden;
    width: 100%;
    display: block;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #e3e3e3 transparent;
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.mBox {
    display: inline-block;
    white-space: normal;
    margin-right: 5px;
}

/* firefox */
.menuSlide {
    scrollbar-width: thin;
    scrollbar-color: $gray--lighter transparent;
}

    .menuSlide:-webkit-scrollbar {
        width: 11px;
    }

    .menuSlide:-webkit-scrollbar-track {
        background: transparent;
    }

    .menuSlide:-webkit-scrollbar-thumb {
        background-color: $gray--lighter;
        border-radius: 6px;
        border: 3px solid transparent;
    }

    /* webkit browsers */
    .menuSlide::-webkit-scrollbar,
    .menuSlide::-webkit-scrollbar-thumb {
        height: 26px;
        border-radius: 13px;
        background-clip: padding-box;
        border: 10px solid transparent;
    }

    .menuSlide::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 0 10px;
    }

.bootstrap-tagsinput{
    margin-bottom: 0;
    padding-top: 0;
}

@media (min-width: 767px) and (max-width: 1200px) {
    .row > .col-sm-4 {
        display: flex;
        flex: 0 0 45%;
        max-width: 45%
    }
    .flex-nowrap {
        -webkit-flex-wrap: nowrap !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }

    .flex-row {
        display: flex;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }
}

.w100{ width: 100% }

table.dataTable thead .remove-img-sort {
    cursor: unset;
}

    table.dataTable thead .remove-img-sort:after {
        display: none;
    }


.request-custom {
    border-left: solid 2px #ff0000;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

    .request-multi > .select2-container {
        border-left: solid 2px #ff0000;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

.request-other > .bootstrap-tagsinput {
    border-left: solid 2px #ff0000;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}