/* You can add global styles to this file, and also import other style files */

:root {
    --theme-primary: #184562;
    --theme-secondary: #32C085;
}

body, .popover {
    font-size: .9rem;
}

a {
    cursor: pointer;
}

.tooltip {
    font-size: .75rem;
}

.required:after {
    content: " *";
    color: red;
}
.jqs-grid-hour {
    color: #b1b1b1;
    font-weight: normal !important;
    font-size: 13px !important;
}

.jqs-grid-day {
    padding: 4px 0px !important;
    font-size: 13px !important;
    border: 1px solid #e7e7e7 !important;
}

.jqs-table td {
    border-left: 1px solid #e7e7e7 !important;
    border-right: 1px solid #e7e7e7 !important;
}
/*login*/
.login-wrapper {
    height: 100vh;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-panel {
    width: 800px;
    overflow: hidden;
    border-radius: .25rem;
}

.login-left-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(120deg, #184562, #32C085);
}

.line-break {
    margin: 24px 0px;
    color: #6c757d;
    text-align: center;
    position: relative;
}

    .line-break:before {
        content: "";
        width: calc(50% - 45px);
        height: 1px;
        background: #cccccc;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .line-break:after {
        content: "";
        width: calc(50% - 45px);
        height: 1px;
        background: #cccccc;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

/*header*/

.logo_text {
    float: right;
    font-size: 0.85rem;
    margin-left: 5px;
    line-height: 1.2;
}

.navbar-brand img {
    margin-top: -6px;
}

.btn-nav {
    background: rgba(0, 0, 0, 0);
    border-radius: .15rem;
    border: none;
    color: #eee;
    padding: .15rem .4rem;
    cursor: pointer;
}

    .btn-nav:hover,
    .btn-nav:focus,
    .btn-nav:active {
        color: var(--theme-secondary);
        outline: none;
    }

        .btn-nav:hover .notification-dot,
        .btn-nav:focus .notification-dot,
        .btn-nav:focus .notification-dot {
            color: #fff;
        }

    .btn-nav .dropdown:hover {
        cursor: pointer;
    }

nav .form-control-sm {
    height: calc(1.5em + .5rem);
    background: #12364e;
    border: 1px solid #086e7e;
    width: 0px;
    color: #fff;
    transition: all .3s ease;
}

.filter-search {
    position: absolute;
    font-size: .9em;
    left: 10px;
}

nav .form-control-sm:focus{
    width: 320px;
}

.entity-size{
    font-size: 1rem;
}

.notification-dot {
    position: absolute;
    background: var(--theme-secondary);
    color: var(--theme-primary);
    border-radius: 100%;
    padding: 0.05rem 0.31rem;
    font-size: 0.6rem;
    font-weight: 700;
    top: -3px;
    right: -5px;
}

.user-image {
    float: left;
    width: 30px;
    border-radius: 50%;
    overflow: hidden;
    line-height: 1;
}

.user-name {
    margin-top: 0.15rem;
    float: left;
    font-size: 0.75rem;
    padding-right: 8px;
}

header .fa-chevron-down {
    font-size: 0.7rem;
}

header .dropdown-menu {
    margin-top: 10px;
    min-width: 9rem;
    padding: .3rem 0rem;
}

header .dropdown-item:focus,
header .dropdown-item:hover {
    background-color: #f2fafb;
}

header .dropdown-item.active, .dropdown-item:active{
    color: #000 !important;
}

header .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(50, 192, 133, .5);
}

.navbar {
    background-color: var(--theme-primary);
    box-shadow: 0px 3px 10px rgba(3, 49, 62, 0.5);
    z-index: 1040;
    color: #fff;
    height: 40px;
}

.navbar-brand {
    padding-top: 0rem;
    padding-bottom: 0rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.invalid-feedback {
    display: block;
    font-size: 90%;
}

header {
    display: block;
    width: 100vw;
    height: 40px;
}

.workspace-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100vw;
   /* position: fixed;
    left: 0;
    top: 40px;*/
}

.sidemenu-wrapper {
    flex: 0 0 200px;
    max-width: 200px;
    display: block;
    height: calc(100vh - 40px);
    background-color: var(--theme-primary);
    z-index: 6;
    transition: all .3s ease;
}

.workspace {
    flex: 1 0 0%;
    background-color: #f6f6f6;
    padding: 1.25rem;
    height: calc(100vh - 40px);
    width: calc(100vw - 200px);
}

.page-title {
    font-size: 1.25em;
    font-weight: normal;
}

.sidemenu-item a {
    display: block;
    padding: .4rem 1rem;
    color: #eee !important;
    text-decoration: none;
    font-size: .9em;
    white-space: nowrap;
    position: relative;
}

.sidemenu-item.divider {
    display: block;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid #12364e;
}

.sidemenu-item .fa-chevron-right {
    font-size: 0.7rem;
    padding-top: 4px;
}

.sidemenu-item a:hover {
    background-color: #12364e;
}

.sidemenu-item a.active {
    background-color: #12364e;
}

    .sidemenu-item a.active:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background-color: var(--theme-secondary);
        width: 4px;
        height: 100%;
    }

ol.sidemenu-nav, ol.sidesubmenu-nav {
    padding: 0;
    list-style: none;
}

.sidesubmenu-nav li a {
    padding-left: 46px;
}

.arrow-rotate {
    transform: rotate(90deg);
}

.sidemenu-company {
    padding: .5rem 1rem;
    color: #fff;
    background-color: var(--theme-primary);
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.sidemenu-scroll {
    height: calc(100vh - 106px);
}

.sidemenu-toggle {
    background-color: transparent;
    border: none;
    width: 18px;
    text-align: center;
    padding: 0;
    height: 18px;
    margin-left: auto;
    color: #eee;
}

    .sidemenu-toggle:hover, .sidemenu-toggle:focus {
        color: var(--theme-secondary);
    }

.workspace-wrapper.collapsed .sidemenu-wrapper {
    flex: 0 0 40px;
    max-width: 40px;
}

.workspace-wrapper.collapsed .sidemenu-collapse {
    display: none;
}

.workspace-wrapper.collapsed .sidemenu-company {
    padding: 0px;
    justify-content: center;
}

    .workspace-wrapper.collapsed .sidemenu-company .sidemenu-toggle {
        margin: auto;
        width: 100%;
        height: auto;
        padding: .5rem .25rem;
    }

.workspace-wrapper.collapsed .sidemenu-item a {
    padding: .5rem .75rem;
}

    .workspace-wrapper.collapsed .sidemenu-item a span {
        display: none;
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: #184562;
        border-radius: 4px;
        padding: 3px 14px;
    }

        .workspace-wrapper.collapsed .sidemenu-item a span:before {
            content: "";
            position: absolute;
            left: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 6px solid #184562;
        }

    .workspace-wrapper.collapsed .sidemenu-item a:hover span {
        display: inline-block;
    }

        .workspace-wrapper.collapsed .sidemenu-item a i {
            margin-right: 0 !important;
        }

.workspace-wrapper.collapsed .sidemenu-item.divider {
    margin: .25rem 0;
}

.workspace-wrapper.collapsed .sidemenu-item {
    position: relative;
}

.workspace-wrapper.collapsed ol.sidesubmenu-nav {
    position: absolute;
    top: 50%;
    left: calc(100% + 9px);
    transform: translateY(-50%);
}

    .workspace-wrapper.collapsed ol.sidesubmenu-nav:before {
        content: " ";
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 8px solid transparent;
        border-right: 8px solid #233947;
        border-left: none;
        border-bottom: 8px solid transparent;
    }

    .workspace-wrapper.collapsed ol.sidesubmenu-nav li {
        background: #233947;
    }

        .workspace-wrapper.collapsed ol.sidesubmenu-nav li:last-child {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .workspace-wrapper.collapsed ol.sidesubmenu-nav li:first-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

.workspace-wrapper.collapsed .sidemenu-scroll .simplebar-track.simplebar-vertical {
    width: 6px !important;
}

.version-item {
    color: #fff;
    padding: 0.4rem 1rem;
    font-size: .8rem;
    background: #12364e;
    position: sticky;
    bottom: 0;
}

.search-control {
    flex-grow: 1;
    position: relative;
}

    .search-control:before {
        content: "\f002";
        position: absolute;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: rgba(0, 0, 0, .5);
        left: .5rem;
        font-size: 80%;
        transform: translateY(-50%);
        top: calc(50% - 1px);
    }

.dropdown-toggle::after {
    display: none;
}

.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead tr th{
    background-color: #ededed;
    position: sticky !important;
    top: 0;
    z-index: 2;
    border-top: 0;
    font-size: .85rem;
}

.table tbody tr td{
    font-size:  .85rem;
}

.translate-up {
    transform: translateY(1rem);
    opacity: 0;
    transition: all .2s ease;
    animation: translate-up .1s ease-out forwards;
}

@keyframes translate-up {
    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

/*div table*/

.table-min {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

.thead {
    display: table-header-group;
}

.trow {
    display: table-row;
}

.tbody {
    display: table-row-group;
}

.tfoot {
    display: table-footer-group;
}

.col-head {
    display: table-cell;
    font-weight: 700;
    padding: .3rem;
    background-color: #fafafa;
    border-bottom: 2px solid #dee2e6;
    font-size: .825rem;
}

.thead .col-head {
    position: sticky !important;
    top: 0;
    z-index: 1;
}

.tcell {
    display: table-cell;
    padding: .3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .825rem;
}

.table-min .trow:nth-of-type(odd) .tcell {
    background-color: rgba(237, 245, 247, 0.35);
}

.bg-lite-danger {
    background: #ffe6e6;
}

.bg-lite-success {
    background: #d8fdd8;
}

.bg-lite-info {
    background: #f8feff;
}

.shadow-inset-sm {
    box-shadow: inset 0 .1rem .25rem rgba(0, 0, 0, .075) !important;
}

.filter- .form-control {
    border: none;
    background-color: #f3f3f3;
    border-radius: 4px;
}

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

.table-no-padding td, .table-no-padding th {
    padding: 0px !important;
    border-top: 0 !important;
}

.table-no-padding .form-control-sm {
    border-radius: 0;
}

.table-editable .form-control {
    transition: all 0.3s ease;
}

.table-editable tr:not(:hover) .form-control:not(:focus), .table-editable .trow:not(:hover) .form-control:not(:focus) {
    border-color: transparent !important;
    background: transparent !important;
}

    .table-editable tr:not(:hover) .form-control:not(:focus) [class*=fa-caret] {
        display: none !important;
    }

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
}

/*Custom scrollbar*/

::-webkit-scrollbar {
    height: 8px !important;
    overflow: visible !important;
    width: 8px !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 10rem;
    background: var(--theme-secondary) !important;
    background-clip: padding-box !important;
    /*border: 2px solid transparent !important;*/
    border-image: initial !important;
    min-height: 28px !important;
    padding: 100px 0px 0px !important;
    box-shadow: rgba(0, 0, 0, 0.1280392) 1px 1px 0px inset, rgba(0, 0, 0, 0.09667) 0px -1px 0px inset !important;
}

    /* :window-inactive inspired by cssTricks */

    ::-webkit-scrollbar-thumb:hover {
        background: var(--theme-secondary) !important;
        background-clip: padding-box !important;
    }

    /* :window-inactive inspired by cssTricks */

    ::-webkit-scrollbar-thumb:window-inactive {
        background: var(--theme-secondary) !important;
        background-clip: padding-box !important;
    }

::-webkit-scrollbar-button {
    height: 0px !important;
    width: 0px !important;
}

::-webkit-scrollbar-track {
    background: #efefef;
    border: 1px solid #dfdfdf;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/*Custom scrollbar ends*/

.indent-1 {
    padding-left: 1rem !important;
}

.indent-2 {
    padding-left: 2rem !important;
}

.indent-3 {
    padding-left: 3rem !important;
}

.indent-4 {
    padding-left: 4rem !important;
}

.indent-5 {
    padding-left: 5rem !important;
}

.indent-6 {
    padding-left: 6rem !important;
}

.indent-7 {
    padding-left: 7rem !important;
}

.indent-8 {
    padding-left: 8rem !important;
}

.indent-9 {
    padding-left: 9rem !important;
}

.indent-10 {
    padding-left: 10rem !important;
}

[class*=indent-] {
    position: relative;
}

    [class*=indent-]:before {
        content: '';
        border-top: 2px dashed var(--primary);
        position: absolute;
        top: 50%;
        left: 0.3rem;
        transform: translateY(-50%);
    }

.indent-1:before {
    border-color: #1a74e2 !important;
    width: .25rem
}

.indent-2:before {
    border-color: #fd890e !important;
    width: 1.25rem
}

.indent-3:before {
    border-color: #4a3ef9 !important;
    width: 2.25rem
}

.indent-4:before {
    border-color: #ff2cd2 !important;
    width: 3.25rem
}

.indent-5:before {
    border-color: #4de659 !important;
    width: 4.25rem
}

.indent-6:before {
    border-color: #f56767 !important;
    width: 5.25rem
}

.indent-7:before {
    border-color: #67f5f5 !important;
    width: 6.25rem
}

.indent-8:before {
    border-color: #a171ff !important;
    width: 7.25rem
}

.indent-9:before {
    border-color: #ff5d99 !important;
    width: 8.25rem
}

.indent-10:before {
    border-color: #ff9900 !important;
    width: 9.25rem
}

th[sortable].desc::after {
    content: '\f882';
    font-family: "Font Awesome 5 Free";
    color: #7d7d7d;
    padding-left: 4px;
}

th[sortable]::after, th[sortable].asc::after {
    content: '\f15d';
    font-family: "Font Awesome 5 Free";
    color: #7d7d7d;
    padding-left: 4px;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

    .upload-btn-wrapper input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
    }

input[type=file] {
   
    display:none;
}

.hover-filter {
    display: none;
    position: absolute;
    right: 12px;
    top: 40px;
    border: 1px solid #dee2e6;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
    padding: .75rem;
    z-index: 1041;
    background-color: #fff;
    width: 950px;
    text-align: left;
}

    .hover-filter::after {
        content: "";
        position: absolute;
        top: -18px;
        right: 7px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
        border-width: 9px;
    }

    .hover-filter::before {
        content: "";
        position: absolute;
        right: 6px;
        top: -20px;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent transparent #dee2e6 transparent;
        border-width: 10px;
    }

.nopointer {
    cursor: not-allowed;
}
.btn-info:hover {
    color: #fff !important;
    background-color: #138496 !important;
    border-color: #117a8b !important;
    
}
.mb-0-1:after {
    content: " *";
    color: red;
}

.dataTables_filter{
    margin-bottom: 8px !important;
}

.dataTables_wrapper .dataTables_filter input{
    background: #fff !important;
    margin-left: 0px !important;
}

.dataTables_wrapper .dataTables_length select{
    background: #fff !important;
}

.text-primary {
    color: #184562 !important;
}

.multiselect-parent {
    width:100% !important;
}
.multiselect-parent button {
    text-align:left !important;
}
.custom-switch .custom-control-label::after {
    top: calc(.25rem + 0px) !important;
}

.dataTables_filter input {
    width: 280px !important;
    height: 30px !important;
}

.fs-f8 {
    font-size: .8rem;
    font-weight: 500;
}

table.dataTable {
    background: #fff !important;
    width: 100% !important;
}

table.dataTable thead th, table.dataTable thead td{
    padding: 6px !important;
}

.fa-pencil-alt, .fa-trash, .fa-eye{
    font-size: .8rem !important;
}

.btn-xs{
    font-size: .8rem;
    padding: 0.25rem 0.75rem;
}
.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}
.sidemenu-item-version {
    display: block;
    padding: .4rem 1rem;
    margin-bottom: 0.1rem;
    color: #eee !important;
    text-decoration: none;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.pagination{
    margin-top: 1rem;
}

.pagination > li {
    border: 1px solid #ddd;
}

    .pagination > li.active {
        background: #eee;
    }


    .pagination > li > a {
        border: 0;
        border-radius: 30px !important;
        transition: all .3s;
        padding: 0 11px;
        margin: 0 3px;
        min-width: 30px;
        height: 30px;
        line-height: 30px;
        color: #17a2b8;
        font-weight: 400;
        font-size: 12px;
        text-transform: uppercase;
        background: transparent;
        text-align: center;
    }

    .pagination > li.active > a {
        /* background: #38ab7f; */
        color: #444;
        padding: 0.5rem 0.8rem;
    }

    .pagination > li.disabled > a {
        cursor: not-allowed;
        color: #777;
    }

.ng-dropdown-text::after {
    border-top-color: #979797 !important;
}

/*Toaster*/
.toast {
    top: 36px;
    left: calc(100% + 160px);
    background: #fff;
    color: #01a164;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #dedede;
    border-left: 4px solid #01a164;
    font-size: .85rem;
    font-weight: 500;
    padding: 14px 18px;
    border-radius: 6px;
    min-width: 370px;
    animation: toast 5s ease forwards;
}


@keyframes toast {
    10% {
        left: calc(100% - 200px);
        opacity: 1;
    }
    80% {
        left: calc(100% - 200px);
        opacity: 1;
    }
    100% {
        left: calc(100% + 160px);
        opacity: 0;
    }
}

table.dataTable td.dataTables_empty {
    padding: 7rem 0rem 3rem;
    color: #184562;
    font-weight: 600;
    position: relative;
}

td.dataTables_empty:before {
    content: url('../Images/no-record-content.png');
    position: absolute;
    top: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
}

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

.popover-box {
    background: #f5f5f5 !important;
    border: none;
    border-radius: 4px;
    box-shadow: 0 0.15rem 0.25rem rgb(0 0 0 / 8%);
    padding: 0rem 0.5rem;
    color: #6c757d !important;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9em;
    text-align:left;
}

.popover-box i{
    font-size: .8em;
}