body {
    background-color: #eff2f7;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
}

main > .container {
    padding: 70px 15px 20px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
    font-size: 14px;
    color: #343a40;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

a, a:hover {
    color: #343a40;
    letter-spacing: normal;
}

@media (max-width: 767px) {
    .nav li > form > button.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.upload-kit .upload-kit-input, .upload-kit .upload-kit-item {
    width: 100%;
    height: 280px;
    border: 1px solid #999;
    margin-right: 0;
}

.upload-kit-input.error {
    margin: 0;
}

.form-group {
    margin-bottom: 1rem;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
    background: #424653;
    color: #fff
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li a span {
    color: rgba(255, 255, 255, 0.8);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.sidebar-active {
    background-color: #333640;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.sidebar-active {
    transition: all 0.5s ease;
    position: relative;
    margin-bottom: 10px;
}

.page-wrapper .page-body-wrapper .page-title .breadcrumb .breadcrumb-item.active {
    color: #333640;
}

select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5;
    background-image: url("../images/down.svg");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
}

.input-group-text {
    border-radius: 0;
}

.form-control {
    font-size: 14px;
}

.dropdown-menu {
    font-size: 14px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a {
    color: rgba(255, 255, 255, 0.8);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a.active {
    color: #99ca48;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a.sidebar-active {
    color: #99ca48;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.sidebar-active ~ .sidebar-submenu::before {
    height: calc(100% - 8px);
    transition: height 0.5s;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-submenu li a.sidebar-active::before {
    opacity: 1;
    visibility: visible;
}

.btn-search {
    margin-top: 20px;
}

.table-nowrap .grid-view td {
    white-space: nowrap;
}

input[readonly], select[readonly], textarea[readonly], input:focus[readonly], select:focus[readonly], textarea:focus[readonly] {
    background-color: #eee;
    color: #777;
    border-color: #ccc
}

table tbody a, table tbody a:hover {
    color: #99CA48;
}

.kv-editable-form-inline, .kv-editable-form-inline .form-group {
    display: flex;
    align-items: center;
}

.pagination {
    margin: 10px 0;
    white-space: nowrap;
    justify-content: flex-end;
    display: flex;
    align-items: center;
}

.pagination li a, .pagination li span {
    padding: 5px 10px;
    border: 1px solid #ccc;
    display: block;
}

.pagination li.active {
    background-color: #25a0e2;
}

.pagination li.active a {
    border-color: #25a0e2;
    color: #fff;
}

.select-project {
    align-items: center;
}

.select-project span {
    width: 200px;
}

.kv-avatar {
    display: inline-block;
    width: 100%;
}

.kv-avatar .file-drop-zone {
    border: none;
    margin: 0;
    padding: 0;
    min-height: 200px;
}

.krajee-default.file-preview-frame, .krajee-default.file-preview-frame:not(.file-preview-error):hover {
    float: none;
    box-shadow: none;
    border: none;
}

.krajee-default.file-preview-frame .kv-file-content {
    width: 100%;
    height: auto;
    min-height: 200px;
}

/*.file-thumbnail-footer{*/
/*    display: none;*/
/*}*/
.fileinput-remove {
    border: none;
}

.form-group .help-block {
    font-size: 12px;
    color: red;
}

li .sidebar-submenu {
    display: none;
}

.border-success {
    border: 1px solid #54BA4A;
}

.yii2-round-switch {
    width: 40px;
    height: 20px;
}

.yii2-round-switch.left .slider:before {
    left: 20px;
    bottom: 1px;
}

.field-sanpham-listimage .file-preview-thumbnails .kv-file-content {
    width: 100%;
    height: auto;
    min-height: auto;
}

.field-sanpham-listimage .file-preview-frame {
    width: calc(100% / 4 - 10px);
    float: left;
    margin: 5px;
    box-shadow: none;
}

.field-sanpham-listimage .file-drop-zone {
    min-height: auto;
    border: none;
    margin: 0;
}

.krajee-default.file-preview-frame:not(.file-preview-error):hover {
    float: left;
}

#page-topbar {
    background: #17B799;
}

.form-control:focus {
    box-shadow: none;
}

#sidebar-menu ul li a {
    font-size: 0.9rem;
}

#sidebar-menu ul li ul.sub-menu li a {
    font-size: 0.9rem;
}

.mm-active .sub-menu .mm-active a {
    border-left: 0 !important;
}

.btn-success {
    --bs-btn-color: #000;
    --bs-btn-bg: #41c3a9;
    --bs-btn-border-color: #41c3a9;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #5eccb6;
    --bs-btn-hover-border-color: #54c9b2;
    --bs-btn-focus-shadow-rgb: 55, 166, 144;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #67cfba;
    --bs-btn-active-border-color: #54c9b2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #41c3a9;
    --bs-btn-disabled-border-color: #41c3a9;
}

.btn-outline-success {
    --bs-btn-color: #41c3a9;
    --bs-btn-border-color: #41c3a9;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #41c3a9;
    --bs-btn-hover-border-color: #41c3a9;
    --bs-btn-focus-shadow-rgb: 65, 195, 169;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #41c3a9;
    --bs-btn-active-border-color: #41c3a9;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #41c3a9;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #41c3a9;
    --bs-gradient: none;
}

.btn {
    --bs-btn-font-size: 0.9rem;
}

.card {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: var(--bs-body-color);
    --bs-card-border-width: 0;
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: 0.3rem;
    --bs-card-box-shadow: var(--bs-box-shadow);
    --bs-card-inner-border-radius: 0.3rem;
    --bs-card-cap-padding-y: 0.625rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-bg: var(--bs-secondary-bg);
    --bs-card-cap-color: var(--bs-body-color);
    --bs-card-bg: var(--bs-white);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.5rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}

.text-info {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

.text-success {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-danger {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: normal;
}

.select2-container--krajee-bs5.select2-container--open:not(.select2-container--disabled) .select2-selection, .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-selection:focus {
    box-shadow: none;
}

.don-hang-form .form-group {
    margin-bottom: 0;
}

.select2-container .select2-selection--single {
    height: 36px;
}
.datepicker, .datetimepicker{
    z-index: 9999 !important;
}
.language-vi{
    width: 25px;
    height: 15px;
    display: inline-block;
    background-image: url(../images/flags-large.png);
    background-repeat: no-repeat;
    margin: 0 2px 0 -2px;
    background-position: -100px -105px;
}
.language-en{
    width: 25px;
    height: 15px;
    display: inline-block;
    background-image: url(../images/flags-large.png);
    background-repeat: no-repeat;
    margin: 0 2px 0 -2px;
    background-position: -100px -30px;
}