/* custom css */

html body a {
    color: #ad1422;
}

.inline-flex {
    display: inline-flex;
    display: -webkit-inline-box;
}
.block {
    display: block;
    width: unset;
}
.hide {
    display: none;
}
.disable {
    pointer-events: none;
    cursor: default;
}
.breadcrumb {
    font-size: 1rem;
}
.border-red {
    border-radius: 5px;
}

.header-navbar .navbar-header .navbar-brand .brand-text {
    padding-left: 0px;
}
.header-navbar .navbar-header .navbar-brand .brand-logo {
    width: 42px;
}

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

.form-group > label {
    font-weight: 500 !important;
}

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

.badge-status {
    display: inline-block;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 1.5rem;
    /* width: 160px; */
    text-align: center;
}

.no-border-radius {
    border-radius: 0px !important;
}

.badge-status-lg {
    display: inline-block;
    padding: 8px 10px;
    padding: 10px;
    border-radius: 1.5rem;
    font-size: 15px;
    text-align: center;
}

.nav.nav-tabs.nav-top-border .nav-item a {
    font-size: 17px;
}

.tools {
    margin: 3px;
}
.icon {
    font-size: 26px !important;
}

.margin-button-search {
    margin-top: 25px;
}

.btn {
    padding: 0.786rem 1rem;
}

/* menu */
body.vertical-layout.vertical-menu-modern .main-menu li a span {
    font-size: 15px;
}
.navigation li {
    white-space: inherit !important;
}
.main-menu.menu-light .navigation li a span {
    display: grid;
}
.username-margin {
    margin-top: 30px;
}
@media only screen and (max-width: 767px) {
    .username-margin {
        margin-top: 23px;
    }
    .margin-button-search {
        margin-top: 0px;
    }
}
.main-menu.menu-light .navigation > li ul .active {
    background: #7d797936;
}
.main-menu.menu-light .navigation > li.open > a {
    color: #545766;
    background: whitesmoke;
    border-right: 4px solid #da2927;
}
.main-menu.menu-light .navigation > li > a {
    padding: 18px 36px 18px 18px;
}
.main-menu.menu-light .navigation > li ul li > a {
    padding: 14px 18px 14px 54px;
}
body.vertical-layout.vertical-menu-modern.menu-expanded
    .main-menu
    .navigation
    > li
    > a
    > i:before {
    font-size: 1.8rem;
}

.card .card-title {
    font-size: 1.51rem;
}
.card-body {
    padding: 1.5rem 2.5rem 3rem;
}
form .form-section {
    font-weight: 400 !important;
}

.error {
    color: red;
    /* margin-top: 5px; */
    margin-bottom: 0px;
    border-color: red;
}

/* datepicker */
.datepicker-set,
.monthpicker-set,
.yearpicker-set,
.datetimepicker-set {
    background-color: #ffffff !important;
}
.datepicker-dropdown {
    padding: 10px;
    z-index: 10000 !important;
}
.datepicker th {
    font-weight: 600;
    color: #1b1919;
}
.datepicker td,
.datepicker th {
    width: 40px;
    height: 35px;
    color: #191616;
}
.datepicker-set[readonly] {
    background-color: #ffffff !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
    background-image: -webkit-gradient(
        linear,
        0 0,
        0 100%,
        from(#c71d22),
        to(#c71d22)
    );
}

/* datetimepicker */
.datetimepicker-set {
    background-color: #ffffff !important;
}
.datetimepicker-dropdown {
    padding: 15px;
    z-index: 10000 !important;
}
.datetimepicker td,
.datetimepicker th {
    width: 40px;
    height: 35px;
    color: #191616;
}
.datetimepicker .datetimepicker-hours span {
    height: 35px;
}
.datetimepicker .datetimepicker-hours span {
    line-height: 35px;
}
.datetimepicker .datetimepicker-minutes span {
    height: 30px;
}
.datetimepicker-set[readonly] {
    background-color: #ffffff !important;
}
.datetimepicker-dropdown-bottom-right {
    padding: 10px;
}
.prev .glyphicon-arrow-left::after {
    content: "\e92c";
    font-family: "feather" !important;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.next .glyphicon-arrow-right::after {
    content: "\e92d";
    font-family: "feather" !important;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.datepicker-dropdown:before {
    display: none !important;
}
.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active:hover:active,
.datetimepicker table tr td span.active.disabled:active,
.datetimepicker table tr td span.active.disabled:hover:active,
.datetimepicker table tr td span.active.active,
.datetimepicker table tr td span.active:hover.active,
.datetimepicker table tr td span.active.disabled.active,
.datetimepicker table tr td span.active.disabled:hover.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active:hover:hover,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td.active.disabled:hover:hover,
.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active:hover:active,
.datetimepicker table tr td.active.disabled:active,
.datetimepicker table tr td.active.disabled:hover:active,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td.active:hover.active,
.datetimepicker table tr td.active.disabled.active,
.datetimepicker table tr td.active.disabled:hover.active,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active:hover.disabled,
.datetimepicker table tr td.active.disabled.disabled,
.datetimepicker table tr td.active.disabled:hover.disabled,
.datetimepicker table tr td.active[disabled],
.datetimepicker table tr td.active:hover[disabled],
.datetimepicker table tr td.active.disabled[disabled],
.datetimepicker table tr td.active.disabled:hover[disabled] {
    background-image: -webkit-gradient(
        linear,
        0 0,
        0 100%,
        from(#c71d22),
        to(#c71d22)
    );
}

.form-control:disabled,
.select2-container--default.select2-container--disabled
    .select2-selection--single {
    background-color: #f5f6f7 !important;
}
.form-control[readonly] {
    background-color: #f5f6f7;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-spaces;
}
.select2-container .select2-selection--single {
    height: auto !important;
}
.select2-container--default .select2-results > .select2-results__options {
    max-height: 400px !important;
}

/* datatable */
.table thead th {
    font-weight: 500 !important;
}
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    height: 36px;
}

/* swal2 */
body.swal2-height-auto {
    height: 100% !important;
}

/* modal */
.close {
    font-size: 2.5rem !important;
}
.modal-title {
    margin: 5px 0px 0px 10px;
}
.modal-header {
    border-bottom: 1px solid #cecece;
}
.modal-footer {
    border-top: 1px solid #cecece;
}

/* profile */
.avatar img {
    width: 40px;
    /* max-width: 100%; */
    height: 40px;
    border: 1px solid #eaeaea;
    border-radius: 1000px;
}
.header-navbar .navbar-container ul.nav li a.dropdown-user-link {
    padding: 1rem 1rem;
}

/* tab */
.nav {
    border-radius: 0rem;
}
.nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    border-top: 5px solid #bf1c22;
    padding: 10px 20px;
    font-size: 16px;
}
.nav.nav-tabs.nav-top-border .nav-item a {
    color: #f44336;
    padding: 12px;
}

/* pagination */
.pagination .page-link {
    color: #da2a27;
    border: 1px solid #babfc7;
}
.page-item.active .page-link {
    z-index: 1;
    color: #ffffff;
    background-color: #da2a27;
    border-color: #da2a27;
}

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

.pswp__bg {
    opacity: 0.9 !important;
}

.tools {
    width: 145px;
}

@media (max-width: 576px) {
    .form-group > label.text-right {
        text-align: left !important;
    }
}