/* ************ */
/* Default Tags */
/* ************ */
body {
    min-width: 320px;
}

footer {
    z-index: 1;
}
/* ************ */
/* Form Control */
/* ************ */
.form-control[readonly].readonly {
    border-color: #f4f5f8;
    color: #6f727d;
    background-color: #f4f5f8;
    cursor: not-allowed;
}

textarea[disabled],
.m-input[disabled] {
    cursor: not-allowed;
    border-color: #ebedf2;
    background-color: #f4f5f8;
}

/* ************ */
/* Misc Control */
/* ************ */
.tinymce-default-txt {
    width: 100%;
    height: 166px;
}

.label-padding-- label {
    padding: 5px;
}

.m-checkbox {
    line-height: normal;
}

.lbl-err {
    padding: 4px 0 0 12px;
    font-size: 12px;
    color: #f4516c !important;
}

.datepicker.datepicker-dropdown {
    z-index: 100 !important;
}

/* ******* */
/* General */
/* ******* */
.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.inline-div {
    display: inline-block;
    margin: 0 5px;
}

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

.display-none {
    display: none !important;
}

.add-colon-prefix:before {
    content: ": "
}

.add-colon-suffix:after {
    content: " :"
}

.add-asterisk-suffix:after {
    content: "*"
}

.underline {
    text-decoration: underline;
}

.white-space-nowrap {
    white-space: nowrap !important;
}

.white-space-normal {
    white-space: normal !important;
}

.white-space-pre-line {
    white-space: pre-line !important;
}

.hidden {
    display: none !important;
}
/* ********* */
/* Scrollbar */
/* ********* */
.scrollable {
    overflow: auto;
}

    .scrollable::-webkit-scrollbar {
        width: 5px;
    }

    .scrollable::-webkit-scrollbar-track {
        background: #EEE;
    }

    .scrollable::-webkit-scrollbar-thumb {
        background: #999;
    }

        .scrollable::-webkit-scrollbar-thumb:hover {
            background: #666;
        }

/* ************** */
/* Customize Link */
/* ************** */
.action-link {
    color: #333;
    display: inline-block;
    margin: 0;
    font-weight: bold;
}

    .action-link:hover {
        color: #999;
        text-decoration: none;
    }

.error-link {
    display: inline-block;
    font-weight: 500;
    color: #FFF;
    border-bottom: dotted 1px #FFF;
    text-decoration: none;
    line-height: 1;
    position: relative;
}

    .error-link:hover {
        color: #EEE;
        border-bottom: solid 1px transparent;
        text-decoration: none;
    }

.expand:after {
    display: block;
    content: '';
    border-bottom: solid 1px #EEE;
    transform: scaleX(0);
    transition: transform 0.2s ease-out;
    transform-origin: 100% 50%
}

.expand:hover:after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}
/* **************** */
/* Customize Button */
/* **************** */

.btn-max {
    width: 100% !important;
}

.btn-custom-xs {
    padding: 1px 8px;
}

    .btn-custom-xs.disabled {
        cursor: not-allowed !important;
    }

.btn.disabled {
    cursor: not-allowed !important;
}
/* ********* */
/* DataTable */
/* ********* */
.control-section .table {
    margin: 1rem 0;
}

.dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th {
    vertical-align: top !important;
}

table.billing-table {
    table-layout: auto !important;
    margin-top: 20px;
}

    table.billing-table.table-bordered,
    table.billing-table.table-bordered tr td,
    table.billing-table.table-bordered tr th {
        border: 1px solid #666;
    }

    table.billing-table tr th {
        font-weight: bold;
        vertical-align: top;
    }

    table.billing-table tr td,
    table.billing-table tr th {
        width: auto;
    }

    table.billing-table tr td {
        white-space: nowrap !important;
    }

        table.billing-table tr td.normal,
        table.billing-table tr th.normal {
            width: 50%;
        }

        table.billing-table tr th.action,
        table.billing-table tr td.action,
        table.billing-table tr td.normal,
        table.billing-table tr th.normal {
            white-space: normal !important;
        }

        table.billing-table tr th.action,
        table.billing-table tr td.action {
            min-width: 75px;
            width: 75px;
        }

.tr-total {
    background-color: #F9F9F9;
    border-bottom: 3px solid #666;
}


table.table.table-vertical-middle tr td {
    vertical-align: middle !important;
}

table.table.table-attendance-date {
    border: 1px solid #CCC;
    background-color: #FFF;
    box-sizing: border-box !important;
}

    table.table.table-attendance-date > tbody > tr {
        background-color: inherit !important;
        border: 1px solid #CCC;
        box-sizing: border-box !important;
    }

        table.table.table-attendance-date > tbody > tr > td {
            background-color: inherit !important;
            border: inherit !important;
            box-sizing: border-box !important;
        }

            table.table.table-attendance-date > tbody > tr > td:first-child {
                width: 100px;
                text-align: center;
            }

table.table.table-attendance-entry > tbody > tr > td {
    box-sizing: border-box !important;
}

    table.table.table-attendance-entry > tbody > tr > td:first-child {
        width: 120px;
        text-align: center;
    }

    table.table.table-attendance-entry > tbody > tr > td:last-child {
        width: 70px;
        text-align: center;
    }

.m-badget-block {
    display: block;
}

table.table.table-attendance-date > tbody > tr.is-scrollable > td > div {
    max-height: 108px;
}

table.table-simple {
    border: none;
    padding: 0;
    margin: 0;
    background-color: transparent !important;
}

    table.table-simple > tbody > tr,
    table.table-simple > tbody > tr > td {
        border: none;
        padding: 0;
        margin: 0;
        background-color: transparent !important;
    }

        table.table-simple > tbody > tr > td {
            padding: 2px 5px;
        }

    table.table-simple > tbody > tr {
        border-top: 1px dashed #DDD;
    }

        table.table-simple > tbody > tr:first-child {
            border-top: none;
        }

/* **** */
/* Flex */
/* **** */
.flex-col-reverse {
    display: flex;
    flex-direction: column-reverse;
}

/* *********** */
/* Custom Flex */
/* *********** */
td .flex-end,
td .flex-start,
.light-border-top {
    border-top: 1px dashed #DDD;
}

.flex-start-no-border,
.flex-start {
    display: -webkit-flex;
    display: flex;
    padding: 0;
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
}

    .flex-start:first-child {
        border-top: none;
    }

.flex-end-no-border,
.flex-end {
    display: -webkit-flex;
    display: flex;
    padding: 0;
    justify-content: flex-end;
    list-style-type: none;
    margin: 0;
}

    .flex-end:first-child {
        border-top: none;
    }

.margin-right-auto {
    margin-right: auto;
}

/* ************* */
/* Timeline List */
/* ************* */
.m-list-timeline__badge {
    width: 15px;
}

.m-list-timeline {
    margin-top: 5px;
}

.m-list-timeline__text {
    overflow: hidden;
}

/* ********** */
/* Aside Menu */
/* ********** */

#m_ver_menu,
#m_aside_left {
    /* background-color: #f2f2f2 !important; */
}

/* active menu item */
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link {
    background-color: #444 !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link {
    background-color: #444 !important;
}

    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__ver-arrow,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-icon,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-bullet,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-text,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__ver-arrow,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
        color: #fff !important;
    }

    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
        background-color: #fff !important;
    }

/* hover menu item */
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link:hover {
    background-color: #444 !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item > .m-menu__link:hover {
    background-color: #444 !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link:hover > .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link:hover > .m-menu__link-bullet,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link:hover .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link:hover .m-menu__ver-arrow,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:hover > .m-menu__link > .m-menu__link-text {
    color: #fff !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:hover > .m-menu__link .m-menu__link-bullet.m-menu__link-bullet--dot > span {
    background-color: #fff !important;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link {
    background-color: transparent;
}

/* ******************** */
/* Sweet Alert Quickfix */
/* ******************** */
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown), html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    height: 100% !important;
}

/* ******************** */
/* Preview Billing View */
/* ******************** */
.preview-billing-container {
    background-color: #525659;
    padding: 20px;
    overflow: auto;
}

    .preview-billing-container > div {
        padding: 40px;
        margin: 0 auto;
        width: 900px;
        background-color: #FFF;
        box-sizing: content-box;
    }

.preview-container {
    background-color: #525659;
    padding: 20px;
    overflow: auto;
}

    .preview-container > div {
        padding: 40px;
        margin: 0 auto;
        width: 900px;
        background-color: #FFF;
        box-sizing: content-box;
    }


/* ********************* */
/* CheckBox inside Table */
/* ********************* */

.m-checkbox.inline-block > input, .m-radio.inline-block > input {
    position: static !important;
}

.m-checkbox.m-checkbox--white > span {
    background: #fff !important;
}

.m-checkbox > input:indeterminate ~ span:after {
    display: block;
}

.m-checkbox > input:indeterminate ~ span:after {
    top: 50%;
    left: 0;
    margin-left: 3px;
    margin-top: -8px;
    width: 10px;
    height: 10px;
    border-width: 0 0 2px 0 !important;
    transform: rotate(0deg);
}


a.disabled {
    pointer-events: none;
    cursor: default;
}

/* *************** */
/* PREVIEW BILLING */
/* *************** */
.custom-h1 {
    display: block;
    width: 100%;
}

.preview-billing {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

    .preview-billing thead {
        display: table-row-group;
    }

    .preview-billing .row {
        width: 100%;
        margin: 0;
    }

    .preview-billing .col-1,
    .preview-billing .col-2,
    .preview-billing .col-3,
    .preview-billing .col-4,
    .preview-billing .col-5,
    .preview-billing .col-6,
    .preview-billing .col-7,
    .preview-billing .col-8,
    .preview-billing .col-9,
    .preview-billing .col-10,
    .preview-billing .col-11,
    .preview-billing .col-12 {
        padding-left: 0;
        padding-right: 0;
    }

.customer-label {
    font-weight: bold;
    text-decoration: underline;
    font-size: 16px;
}

.custom-label {
    width: 110px;
    display: inline-block;
    left: 0;
}

.font-size-big {
    font-size: 16px;
}

/* **************** */
/* Quick Custom CSS */
/* **************** */
.clipboard,
.clipboard-code {
    float: right;
    clear: none;
    margin-left: 10px;
}

.custom-form-label {
    background: #f7f8fa;
    color: #575962;
    border: none;
}

.blink_me {
    animation: blinker 0.5s linear 1;
}

@keyframes blinker {
    20% {
        opacity: 0;
    }
}

.display-block {
    display: block !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.invoice-paid {
    color: #339933;
}

.invoice-partlypaid {
    color: #3333AA;
}

.invoice-unpaid {
    color: #AA3333;
}

.billing-item-format {
    color: #000 !important;
    text-align: justify;
}


/* **************** */
/* Jquery Autocomplete */
/* **************** */
.ui-autocomplete.ui-front {
    max-height: 400px;
    overflow-y: auto; /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index: 500 !important;
}


.readonly > .datepicker tbody tr > td.day.new,
.readonly > .datepicker tbody tr > td.day {
    cursor: default !important;
    background: #5867dd;
    color: #fff;
}

    .readonly > .datepicker tbody tr > td.day.disabled {
        background: #FFF;
        color: #000;
    }

.day.holiday-date {
    background: #55ddaa !important;
}

.legend.leave-date {
    border-radius: 3px;
    padding: 3px 6px;
    color: #FFF;
    background: #5867dd !important;
}

.legend.holiday-date {
    border-radius: 3px;
    padding: 3px 6px;
    color: #FFF;
    background: #55ddaa !important;
}

.m-portlet {
    box-shadow: 0 1px 15px 1px rgba(69,65,78,.3) !important;
}

.tt-menu {
    background: #fff;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px 0;
    left: auto /*rtl:ignore*/ !important;
    border-radius: 4px;
    box-shadow: 0px 0px 15px 1px rgba(69,65,78,0.2);
}

    .tt-menu .tt-dataset .tt-suggestion {
        color: #575962;
        cursor: pointer;
        padding: 5px 15px;
        font-size: 1rem;
    }

.twitter-typeahead {
    width:100%;
}