/*Loading*/
#loading {
    --h: 105px;
    width: 100%;
    height: calc(100% - var(--h));
    top: var(--h);
    position: fixed;
    display: block;
    /*background-color: rgba(255, 255, 255, 0.5);*/
    background-color: rgb(87 85 85 / 56%);
    z-index: 1099;
    /*z-index: 999;*/
    text-align: center;
}


.preloadercontainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/*.prelogo {
    background: url("../img/logo.png") no-repeat left center;
    width: 202px;
    height: 37px;
}  */ 

.myLoader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    height: 100%;
}

.preloadercontainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.myLoader.text {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 0px;
    visibility: hidden;
    transform: scale(0);
    transition: all 0.25s ease;
}
.loadingTextInner {
    background-color: #f9edbe;
    border: 1px solid #f0c36d;
    -webkit-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    color: #222;
    line-height:1;
    padding: 6px 10px;
}
.myLoader.in {
    visibility: visible;
    transform: scale(1);
}
    /*@-webkit-keyframes square-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0);
    }

    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }

    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg);
    }

    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0);
    }
}

@keyframes square-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0);
    }

    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }

    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg);
    }

    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0);
    }
}*/
    /*.square-spin > div {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        width: 120px;
        height: 31px;
        background: url("../img/logo.png") no-repeat left center/ cover;*/

        /*-webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;*/
    /*}*/


/*Loading*/





.form-group {
    margin-bottom: 0.5rem;
    /*margin-bottom: 0rem;*/
}

.form-control {
    border-color: #bab5b5c2;
    box-shadow: none;
    font-size: 14px;
    height: 35px;
}

textarea.form-control {
height:auto;
}
/*#region header-beadcruam*/

.noti-body button.btn:hover {
    background-color: #e7e7e7;
    border-radius: 50%;
}

/*#endregion header-beadcruam*/



/*#region header-beadcruam*/

.header-left .header-beadcruam span {
    font-size: 18px;
    margin-left: 30px;
    margin-bottom: 8px;
    font-weight: 600;
    /*text-shadow: 1px 1px #cdcdcd;*/
    display: flex;
    align-self: end;
    opacity: 0.7;
    text-transform: uppercase;
    color: #8a366e;
}

 d{
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    color: rgba(255, 255, 255, 0.3);
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

.header-left .header-beadcruam span a {
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    background-image: -webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
    -webkit-background-size: 200px;
    color: rgba(255, 255, 255, 0.3);
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

/*#endregion header-beadcruam*/

.sidebar-menu > ul > li {
    padding: 0px 8px 0px 0px;
}

    .sidebar-menu > ul > li.active2 > a,
    .sidebar-menu > ul > li > a.active {
        color: #c297b4;
        font-weight: bolder;
    }

[data-layout=horizontal] body .sidebar .sidebar-menu ul li a {
    padding: 10px 4px;
    padding-right: 16px;
    padding-left: 8px;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


[data-layout=horizontal] body .sidebar .sidebar-menu ul li a {
    /*display: table;*/
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul li.submenu ul li a {
    transition: all 0.25s ease;
}

    [data-layout=horizontal] body .sidebar .sidebar-menu ul li.submenu ul li a:hover {
        color: #2d66f7;
        margin-left: 5px;
        background-color: #f3f3f3;
        box-shadow: 1px 1px 4px -3px black;
        border-radius: 0 13px;
    }

[data-layout=horizontal] body .page-wrapper .content {
    /*padding: 8px;*/
    padding: 10px;
    padding-top: 16px;
}

    [data-layout=horizontal] body .page-wrapper .content .page-header {
        margin-bottom: 1rem;
    }

[data-layout=horizontal] body {
    --sidebar-width: 450px;
    /*--sidebar-width: 580px;*/
    -sidebar-width: 575px
}

    /*LayOut Horizontal CSS*/
    [data-layout=horizontal] body .sidebar {
        width: 100% !important;
        bottom: inherit;
        border-bottom: 1px solid rgba(67, 87, 133, .2);
    }

        [data-layout=horizontal] body .sidebar .sidebar-menu ul li span {
            display: inline-block !important;
        }

        [data-layout=horizontal] body .sidebar .slimScrollDiv, [data-layout=horizontal] body .sidebar .sidebar-inner {
            height: auto !important;
            overflow: inherit !important;
        }

        [data-layout=horizontal] body .sidebar .hidden {
            display: block !important;
        }

        [data-layout=horizontal] body .sidebar .sidebar-menu {
            padding: 0 !important;
            height: 45px;
            display: flex;
            align-items: center;
        }

        [data-layout=horizontal] body .sidebar .sidebar-vertical {
            display: none !important;
        }

        [data-layout=horizontal] body .sidebar .sidebar-horizantal {
            display: flex !important;
        }

        [data-layout=horizontal] body .sidebar .sidebar-menu ul li a {
            flex-direction: inherit;
            text-align: left;
        }

        [data-layout=horizontal] body .sidebar .sidebar-menu .menu-title {
            display: none !important;
        }

        [data-layout=horizontal] body .sidebar ul li span {
            display: inline-block !important;
        }

        [data-layout=horizontal] body .sidebar .hidden-links .submenu ul {
            box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2);
            border: 1px solid #d5d5d5;
        }

        [data-layout=horizontal] body .sidebar .hidden-links li a:hover {
            color: #333333;
        }

        [data-layout=horizontal] body .sidebar .sidebar-menu ul {
            display: flex;
            align-items: center;
            -webkit-align-items: center;
        }

div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 5px;
    height: 34px;
    margin-left: 0;
    width: 183px;
}

ul li.submenu .noti-dot:before {
    display: none;
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul li a .menu-arrow {
    right: 0;
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul ul {
    display: none;
    width: 200px;
    background-color: #fff;
    border: 1px solid rgba(67, 87, 133, .2);
    position: absolute;
    top: 52px;
    left: 0;
    overflow-y: auto;
    max-height: 220px;
}

[data-layout=horizontal] body .sidebar .sidebar-menu .megamenu .accordion,
[data-layout=horizontal] body .sidebar .sidebar-menu .accordion1 {
    display: none;
    width: 700px;
    background-color: #fff;
    border: 1px solid rgba(67, 87, 133, .2);
    box-shadow: 0px 2px 5px 0px rgba(67, 87, 133, .3);
    top: 52px;
    left: 0;
    max-height: 320px;
    max-height: calc(80vh - 105px);
    transition: opacity 0.3s ease-out;
    /* opacity: 0;
            visibility: hidden;*/
}


[data-layout=horizontal] body .sidebar .sidebar-menu .accordion1 {
    width: 320px;
}

[data-layout=horizontal] body .sidebar .sidebar-menu .megamenu:hover .accordion1,
[data-layout=horizontal] body .sidebar .sidebar-menu .megamenu:hover .accordion {
    /*opacity: 1;
            visibility: visible;*/
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul :first-child ul {
    overflow: hidden;
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul ul li a .menu-arrow {
    right: 15px;
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul ul a {
    padding: 8px 15px;
}

[data-layout=horizontal] body .sidebar .list-inline-item li a:hover {
    color: #fff;
}

[data-layout=horizontal] body #sidebar-view,
[data-layout=horizontal] body #sidebar-size,
[data-layout=horizontal] body #layout-width,
[data-layout=horizontal] body #layout-position {
    display: none;
}

[data-layout=horizontal] body #toggle_btn {
    display: none;
}

[data-layout=horizontal] body ul.hidden-links {
    position: absolute !important;
    right: 0;
    background: #fff;
    width: 100%;
    top: 60px;
    justify-content: start;
    align-items: start !important;
    flex-wrap: wrap;
    border-top: 1px dashed #e3e3e3;
    padding: 12px 3px;
    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2);
}

    [data-layout=horizontal] body ul.hidden-links ul {
        left: 0 !important;
        position: absolute !important;
        top: 40px !important;
        background-color: #fff !important;
        width: 100% !important;
        z-index: 9999;
    }

        [data-layout=horizontal] body ul.hidden-links ul li a {
            width: 100%;
        }

            [data-layout=horizontal] body ul.hidden-links ul li a:hover {
                color: #333333;
            }

    [data-layout=horizontal] body ul.hidden-links > li {
        width: 20%;
    }

        [data-layout=horizontal] body ul.hidden-links > li a {
            display: block;
            padding: 5px 15px;
        }

    [data-layout=horizontal] body ul.hidden-links li a .menu-arrow {
        right: 10px !important;
    }

[data-layout=horizontal] body .sidebar .sidebar-menu ul li a {
    padding: 10px 15px;
}

[data-layout=horizontal] body .greedy ul.list-inline-item.list-unstyled.links {
    width: 95%;
}

[data-layout=horizontal] body .greedy > button {
    display: block;
}

[data-layout=horizontal] body nav.greedy button {
    align-self: stretch;
    transition: all 0.4s ease-out;
    padding: 5px 0 0 5px;
    outline: 0;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    background-color: transparent;
    color: #fff;
    min-width: 100px;
    margin-right: 20px;
}

[data-layout=horizontal] body nav.greedy {
    position: relative;
    height: 45px;
    justify-content: start;
}

    [data-layout=horizontal] body nav.greedy ul.hidden-links.hidden {
        display: none;
    }

[data-layout=horizontal] body .page-wrapper {
    margin: 0;
    padding-top: 98px;
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul ul ul {
    position: absolute;
    right: -200px;
    top: 0;
    left: auto;
}

[data-layout=horizontal] body .sidebar ul ul li {
    /*display: inline-block !important;*/
    width: 100%;
    padding: 0px 8px;
}

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

[data-layout=horizontal] body .hidden-links .menu-title {
    display: inline-block !important;
    color: #333333 !important;
}

[data-layout=horizontal] body .job-list .job-list-det, [data-layout=horizontal] body .rating-list span a, [data-layout=horizontal] body .task-assign .task-complete-btn, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .due-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-header .kanban-action > a, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-header, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-body .kanban-info, [data-layout=horizontal] body .board-view-header .pro-progress-bar, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-members, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-lead, [data-layout=horizontal] body .leave-header, [data-layout=horizontal] body .leave-item .leave-right, [data-layout=horizontal] body .account-page, [data-layout=horizontal] body .file-content .file-body .file-scroll .file-content-inner .card-file .card-file-thumb, [data-layout=horizontal] body .file-content .file-body .file-scroll .file-content-inner .card-file .dropdown-file .dropdown-link, [data-layout=horizontal] body .file-content .file-search .input-group-prepend, [data-layout=horizontal] body .file-cont-wrap .file-cont-inner .file-cont-header, [data-layout=horizontal] body .file-wrap .file-sidebar .file-search .input-group .input-group-prepend, [data-layout=horizontal] body .file-wrap .file-sidebar .file-header, [data-layout=horizontal] body .time-list .dash-stats-list, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-avatars, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-content, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-icon, [data-layout=horizontal] body .dash-widget .card-body .dash-widget-icon, [data-layout=horizontal] body .error-page .main-wrapper, [data-layout=horizontal] body .error-page, [data-layout=horizontal] body .call-box .call-wrapper .call-items, [data-layout=horizontal] body .call-box .call-wrapper, [data-layout=horizontal] body .voice-call-avatar, [data-layout=horizontal] body .punch-info .punch-hours, [data-sidebar=dark] .two-col-bar .sidebar .sidebar-left .nav-link, [data-layout=horizontal] body nav.greedy, [data-layout=horizontal] body .sidebar-twocol.sidebar .sub-menu a, [data-layout=horizontal] body .sidebar-twocol.sidebar .nav-link, [data-layout=horizontal] body .sidebar .sidebar-menu ul li a,
[data-layout=horizontal] body .two-col-bar .sidebar-menu ul li a, [data-layout=horizontal] body .header .profile-nav a, [data-layout=horizontal] body .header .user-menu.nav > li.flag-nav a, [data-layout=horizontal] body .card .leave-inline-form, [data-layout=horizontal] body .avatar .avatar-title {
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

    [data-layout=horizontal] body .job-list .job-list-det, [data-layout=horizontal] body .rating-list, [data-layout=horizontal] body .avatar-dropdown .avatar-group .avatar, [data-layout=horizontal] body .task-assign .task-complete-btn, [data-layout=horizontal] body .chat-footer .message-bar .message-area .input-group, [data-layout=horizontal] body .chat-footer .task-followers, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-desc .task-textarea, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-desc, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .due-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-header, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-body .kanban-footer, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-body .kanban-info, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-header, [data-layout=horizontal] body .kanban-cont, [data-layout=horizontal] body .board-view-header .pro-progress-bar, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-members, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-lead, [data-layout=horizontal] body .leave-header, [data-layout=horizontal] body .leave-item .leave-right, [data-layout=horizontal] body .leave-item .leave-row, [data-layout=horizontal] body .account-page .main-wrapper, [data-layout=horizontal] body .account-page, [data-layout=horizontal] body .file-content .file-body .file-scroll .file-content-inner .card-file .card-file-thumb, [data-layout=horizontal] body .file-content .file-search .input-group-prepend, [data-layout=horizontal] body .file-cont-wrap .file-cont-inner .file-cont-header .file-options, [data-layout=horizontal] body .file-cont-wrap .file-cont-inner .file-cont-header, [data-layout=horizontal] body .file-cont-wrap, [data-layout=horizontal] body .file-wrap .file-sidebar .file-search .input-group .input-group-prepend, [data-layout=horizontal] body .file-wrap .file-sidebar .file-header, [data-layout=horizontal] body .file-wrap, [data-layout=horizontal] body .time-list .dash-stats-list, [data-layout=horizontal] body .time-list, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-avatars, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-content, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-icon, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card, [data-layout=horizontal] body .welcome-box, [data-layout=horizontal] body .dash-statistics .stats-info p, [data-layout=horizontal] body .dash-widget .card-body .dash-widget-info, [data-layout=horizontal] body .dash-widget .card-body .dash-widget-icon, [data-layout=horizontal] body .dash-widget .card-body, [data-layout=horizontal] body .error-page .main-wrapper, [data-layout=horizontal] body .error-page, [data-layout=horizontal] body .call-box .call-wrapper .call-items, [data-layout=horizontal] body .call-box .call-wrapper, [data-layout=horizontal] body .voice-call-avatar, [data-layout=horizontal] body .chat-sidebar .chat-contents .chats .chat-left .chat-body .chat-bubble .chat-content .call-details, [data-layout=horizontal] body .chat-contents .chat-content-wrap .chats .chat-bubble .chat-img-attach .chat-placeholder, [data-layout=horizontal] body .att-statistics .stats-info p, [data-layout=horizontal] body .punch-info .punch-hours, [data-sidebar=dark] .two-col-bar .sidebar .sidebar-left .nav-link, [data-layout=horizontal] body nav.greedy, [data-layout=horizontal] body .task-board-color .board-color-list, [data-layout=horizontal] body .task-follower-list, [data-layout=horizontal] body .sidebar-twocol.sidebar .sub-menu a, [data-layout=horizontal] body .sidebar-twocol.sidebar .nav-link, [data-layout=horizontal] body .sidebar-twocol.sidebar, [data-layout=horizontal] body .sidebar .sidebar-menu ul li a,
    [data-layout=horizontal] body .two-col-bar .sidebar-menu ul li a, [data-layout=horizontal] body .sidebar .sidebar-menu ul li.menu-title,
    [data-layout=horizontal] body .two-col-bar .sidebar-menu ul li.menu-title, [data-layout=horizontal] body .header .profile-nav a, [data-layout=horizontal] body .header .user-menu.nav > li.flag-nav a, [data-layout=horizontal] body .card .card-title.with-switch, [data-layout=horizontal] body .card .leave-inline-form, [data-layout=horizontal] body .avatar .avatar-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

        [data-layout=horizontal] body .job-list .job-list-det, [data-layout=horizontal] body .rating-list span a, [data-layout=horizontal] body .task-assign .task-complete-btn, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .due-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-header .kanban-action > a, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-header, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-body .kanban-info, [data-layout=horizontal] body .board-view-header .pro-progress-bar, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-members, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-lead, [data-layout=horizontal] body .leave-header, [data-layout=horizontal] body .leave-item .leave-right, [data-layout=horizontal] body .account-page, [data-layout=horizontal] body .file-content .file-body .file-scroll .file-content-inner .card-file .card-file-thumb, [data-layout=horizontal] body .file-content .file-body .file-scroll .file-content-inner .card-file .dropdown-file .dropdown-link, [data-layout=horizontal] body .file-content .file-search .input-group-prepend, [data-layout=horizontal] body .file-cont-wrap .file-cont-inner .file-cont-header, [data-layout=horizontal] body .file-wrap .file-sidebar .file-search .input-group .input-group-prepend, [data-layout=horizontal] body .file-wrap .file-sidebar .file-header, [data-layout=horizontal] body .time-list .dash-stats-list, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-avatars, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-content, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-icon, [data-layout=horizontal] body .dash-widget .card-body .dash-widget-icon, [data-layout=horizontal] body .error-page .main-wrapper, [data-layout=horizontal] body .error-page, [data-layout=horizontal] body .call-box .call-wrapper .call-items, [data-layout=horizontal] body .call-box .call-wrapper, [data-layout=horizontal] body .voice-call-avatar, [data-layout=horizontal] body .punch-info .punch-hours, [data-sidebar=dark] .two-col-bar .sidebar .sidebar-left .nav-link, [data-layout=horizontal] body nav.greedy, [data-layout=horizontal] body .sidebar-twocol.sidebar .sub-menu a, [data-layout=horizontal] body .sidebar-twocol.sidebar .nav-link, [data-layout=horizontal] body .sidebar .sidebar-menu ul li a,
        [data-layout=horizontal] body .two-col-bar .sidebar-menu ul li a, [data-layout=horizontal] body .header .profile-nav a, [data-layout=horizontal] body .header .user-menu.nav > li.flag-nav a, [data-layout=horizontal] body .card .leave-inline-form, [data-layout=horizontal] body .avatar .avatar-title {
            align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
        }

            [data-layout=horizontal] body .job-list .job-list-det, [data-layout=horizontal] body .rating-list, [data-layout=horizontal] body .avatar-dropdown .avatar-group .avatar, [data-layout=horizontal] body .task-assign .task-complete-btn, [data-layout=horizontal] body .chat-footer .message-bar .message-area .input-group, [data-layout=horizontal] body .chat-footer .task-followers, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-desc .task-textarea, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-desc, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date .due-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .task-due-date, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info .remove-icon, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header .assignee-info a, [data-layout=horizontal] body .chat-content-wrap .chat-wrap-inner .task-header, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-header, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-body .kanban-footer, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-body .kanban-info, [data-layout=horizontal] body .kanban-cont .kanban-list .kanban-wrap .task-board-header, [data-layout=horizontal] body .kanban-cont, [data-layout=horizontal] body .board-view-header .pro-progress-bar, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-members, [data-layout=horizontal] body .board-view-header .pro-teams .pro-team-lead, [data-layout=horizontal] body .leave-header, [data-layout=horizontal] body .leave-item .leave-right, [data-layout=horizontal] body .leave-item .leave-row, [data-layout=horizontal] body .account-page .main-wrapper, [data-layout=horizontal] body .account-page, [data-layout=horizontal] body .file-content .file-body .file-scroll .file-content-inner .card-file .card-file-thumb, [data-layout=horizontal] body .file-content .file-search .input-group-prepend, [data-layout=horizontal] body .file-cont-wrap .file-cont-inner .file-cont-header .file-options, [data-layout=horizontal] body .file-cont-wrap .file-cont-inner .file-cont-header, [data-layout=horizontal] body .file-cont-wrap, [data-layout=horizontal] body .file-wrap .file-sidebar .file-search .input-group .input-group-prepend, [data-layout=horizontal] body .file-wrap .file-sidebar .file-header, [data-layout=horizontal] body .file-wrap, [data-layout=horizontal] body .time-list .dash-stats-list, [data-layout=horizontal] body .time-list, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-avatars, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-content, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container .dash-card-icon, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card-container, [data-layout=horizontal] body .dash-section .dash-info-list .dash-card, [data-layout=horizontal] body .welcome-box, [data-layout=horizontal] body .dash-statistics .stats-info p, [data-layout=horizontal] body .dash-widget .card-body .dash-widget-info, [data-layout=horizontal] body .dash-widget .card-body .dash-widget-icon, [data-layout=horizontal] body .dash-widget .card-body, [data-layout=horizontal] body .error-page .main-wrapper, [data-layout=horizontal] body .error-page, [data-layout=horizontal] body .call-box .call-wrapper .call-items, [data-layout=horizontal] body .call-box .call-wrapper, [data-layout=horizontal] body .voice-call-avatar, [data-layout=horizontal] body .chat-sidebar .chat-contents .chats .chat-left .chat-body .chat-bubble .chat-content .call-details, [data-layout=horizontal] body .chat-contents .chat-content-wrap .chats .chat-bubble .chat-img-attach .chat-placeholder, [data-layout=horizontal] body .att-statistics .stats-info p, [data-layout=horizontal] body .punch-info .punch-hours, [data-sidebar=dark] .two-col-bar .sidebar .sidebar-left .nav-link, [data-layout=horizontal] body nav.greedy, [data-layout=horizontal] body .task-board-color .board-color-list, [data-layout=horizontal] body .task-follower-list, [data-layout=horizontal] body .sidebar-twocol.sidebar .sub-menu a, [data-layout=horizontal] body .sidebar-twocol.sidebar .nav-link, [data-layout=horizontal] body .sidebar-twocol.sidebar, [data-layout=horizontal] body .sidebar .sidebar-menu ul li a,
            [data-layout=horizontal] body .two-col-bar .sidebar-menu ul li a, [data-layout=horizontal] body .sidebar .sidebar-menu ul li.menu-title,
            [data-layout=horizontal] body .two-col-bar .sidebar-menu ul li.menu-title, [data-layout=horizontal] body .header .profile-nav a, [data-layout=horizontal] body .header .user-menu.nav > li.flag-nav a, [data-layout=horizontal] body .card .card-title.with-switch, [data-layout=horizontal] body .card .leave-inline-form, [data-layout=horizontal] body .avatar .avatar-title {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

[data-layout=horizontal] .dash-widget .card-body .dash-widget-icon {
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
}

[data-layout=horizontal] .dash-widget .card-body {
    justify-content: space-between;
    align-items: flex-end;
}

    [data-layout=horizontal] .dash-widget .card-body .dash-widget-info {
        flex-direction: column;
    }

[data-layout-style=detached][data-layout=horizontal] .main-wrapper {
    max-width: 100%;
    padding: 0;
}

    [data-layout-style=detached][data-layout=horizontal] .main-wrapper .sidebar {
        top: 60px;
        border-radius: 0;
        left: 0;
        position: relative;
    }



.sidebar-menu > ul > li {
    padding: 8px 0px 8px 0px;
}

[data-layout=horizontal] body .sidebar .sidebar-menu ul li a {
    /*padding: 10px 4px;
                                    padding-right: 16px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

.arrowIcon {
    margin-right: 15px;
}



.accordion div {
    padding-right: 0px;
}

.msticon {
    width: 19px;
}

.mstItem i {
    width: 15px;
}

.mstItem a {
    padding: 7px 15px !important;
}

.KeyDiv {
    display: flex;
    align-items: center;
    padding: 5px;
    justify-content: space-between;
    color: #747474;
}

.keyspan {
    padding: 6px 10px;
    border-radius: 10px;
    background-color: #02448f;
    color: white;
    font-style: italic;
}

.shorcutDiv {
    border: 1px solid #cccccc;
    margin: 10px;
    border-radius: 5px;
}

.shorcutSubDiv {
    border-right: 1px solid #cccccc;
}
/*Layout end*/

/* #region Datatable 

*/
/*table.dt-cust thead .sorting:before, table.dt-cust thead .sorting:after, table.dt-cust thead .sorting_asc:before, table.dt-cust thead .sorting_asc:after, table.dt-cust thead .sorting_desc:before, table.dt-cust thead .sorting_desc:after, table.dt-cust thead .sorting_asc_disabled:before, table.dt-cust thead .sorting_asc_disabled:after, table.dt-cust thead .sorting_desc_disabled:before, table.dt-cust thead .sorting_desc_disabled:after*/
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
    bottom: 0.3rem;
}

div.dataTables_wrapper div.dataTables_processing {
    z-index: 1;
    background: transparent;
    box-shadow: none;
    border: none;
}

.demo-datatable .card-body {
    padding: 5px !important;
}


/* #endregion Datatable */


/*table.dt-cust.table-bordered > :not(caption) > *,*/
.table-bordered > :not(caption) > * {
    border-width: 1px 0;
    border-color: #515050;
}

/*Ag-Grid*/
/*
div.ag-cell-inline-editing > input div.ag-cell-inline-editing,
div.ag-cell-not-inline-editing > input div.ag-cell-inline-editing {
    background-color: wheat !important;
}*/


.required {
    /*color: #ff5959;*/
}

    .required:after {
        content: "*";
        color: red;
    }

.btn-primary:active:focus {
    /*border: none !important;*/
}

.comment-batch {
    display: inline-block;
    line-height: 14px;
    word-break: break-word;
    color: #914277;
    font-size: small;
}

.mstItem {
    display: flex;
    align-items: center;
    position:relative;
}

.mstIcon {
    margin-right: 5px;
    margin-bottom: 1px;
}

.savebtn {
    padding: 12px 26px !important;
    font-size: 15px !important;
}

.password-title {
    font-size: 22px;
}

.formlabel {
    font-size: 14px !important;
}

.forminput {
    height: 32px !important;
    font-size: 14px;
}

.inputheaderDiv {
    padding-left: 7px;
}

.modelsubDiv {
    display: flex;
    align-items: center;
}

.lblformDiv {
    display: flex;
    align-items: center;
}

.colGap-12 {
    column-gap: 12px;
}

#loadingDateRange {
    padding: 3px 10px;
}

/* #region Select2 */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 35px;
    height: auto;
    border-radius: 0.375rem;
    border-color: #cbc7c7;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    height: auto !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    line-height: 34px;
    /*line-height: 29px;*/
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    height: 21px;
    font-size: 13px;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef;
}

/* #endregion Select2 */

.shipDiv {
    padding-left: 25px;
}

.padDiv {
    padding: 1rem;
    padding-top: 0;
}
/* #region Dashboard */

.dashboard .table-responsive {
    overflow-y: auto;
    /* make the table scrollable if height is more than 200 px  */
    /*height: 200px;*/
    /* gives an initial height of 200px to the table */
}

    .dashboard .table-responsive thead th {
        position: sticky; /* make the table heads sticky */
        top: 0px; /* table head will be placed from the top of the table and sticks to it */
        z-index: 15;
    }

    .dashboard .table-responsive th {
        background: #c4e1fd;
    }

.dashboard .row {
    --bs-gutter-x: 0.5rem;
}

.dashboard .card {
    margin-bottom: 10px;
}

    .dashboard .card.dash-widget .dash-content {
        width: 100%;
    }

        .dashboard .card.dash-widget .dash-content h3, .dashboard .card.dash-widget .dash-content div.dash-qty {
            display: inline-block;
        }

        .dashboard .card.dash-widget .dash-content div.dash-qty {
            float: right;
        }

        .dashboard .card.dash-widget .dash-content span {
            display: block;
        }

/* #endregion Dashboard */

/* #region Bootbox */

.bootbox-confirm .modal-body, .bootbox .modal-body {
    display: flex;
    align-items: center;
}

    .bootbox-confirm .modal-body button, .bootbox .modal-body button {
        margin-top: 0px !important;
    }

/*.bootbox-confirm .modal-footer button {
    border-radius: 5px !important;
    padding: 8px 20px !important;
}*/
.bootbox-confirm .modal-footer button,
.bootbox .modal-footer button {
    border-radius: 5px;
    padding: 8px 20px;
    margin: 0;
    font-size: 14px;
    margin-left: 5px;
    transition: all 0.25s ease;
}

button.btn.btn-success:focus {
    box-shadow: 0px 0px 1px 3px #90d298;
}

button.btn.btn-danger:focus {
    box-shadow: 0px 0px 1px 3px #e9a9a9;
}

.successModal .bootbox-close-button,
.bootbox-confirm .bootbox-close-button {
    float: right !important;
    font-size: 20px !important;
}

.successModal .modal-footer button {
    background-color: #6b6bff !important;
    border-radius: 5px;
    padding: 8px 10px;
    color: white;
}

    .successModal .modal-footer button:hover {
        background-color: #4040ff !important;
        color: white;
    }

/*.bootbox-confirm .modal-footer button {
    border-radius: 0px;
    padding: 8px 10px;
}
*/

.bootbox-confirm .bootbox-close-button {
    display: none;
}

.bootbox.failModal .modal-body {
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.bootbox .modal-content {
    font-size: 12px;
}

.bootbox.failModal .modal-content {
    background-color: #ff8e8e;
    color: white;
}

.bootbox.failModal .modal-body .bootbox-close-button {
    transform: scale(1.3);
    color: white;
    box-shadow: 0px 0px 2px;
    border-radius: 50%;
    --w: 20px;
    width: var(--w);
    height: var(--w);
    display: flex;
    transition: all 0.2s ease;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
}

    .bootbox.failModal .modal-body .bootbox-close-button:hover {
        box-shadow: 0px 0px 10px;
    }

.bootbox.failModal .modal-footer {
    display: none;
}
/* #endregion Bootbox */

.form-focus .form-control {
    height: 35px;
    padding: 21px 12px 6px;
}

.form-focus .focus-label {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    -webkit-transform: translate3d(0, 22px, 0) scale(1);
    -ms-transform: translate3d(0, 22px, 0) scale(1);
    -o-transform: translate3d(0, 22px, 0) scale(1);
    transform: translate3d(0, 22px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
    left: 12px;
    /*top: -8px;*/
    top: -16px;
    z-index: 1;
    color: #888;
    margin-bottom: 0;
}

.form-focus.focused .focus-label {
    opacity: 1;
    font-weight: 300;
    top: -19px;
    font-size: 12px;
    z-index: 1;
}

.sidebar-menu > ul > li:after {
    content: "";
    height: 50%;
    width: 1px;
    background-color: white;
    position: absolute;
    top: 15px;
    right: 0;
}

.header .header-left {
    float: left;
    height: 60px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    width: var(--sidebar-width);
    z-index: 1;
    transition: all 0.2s ease-in-out;
}

    .header .header-left .logo {
        display: inline-block;
        line-height: 60px;
    }

.btnedit {
    color: #0077ff;

}
button i.fa {
    transition:all 0.2s ease;
}
    button i.fa:hover {
        transform: scale(1.25);
        text-shadow: 1px 1px 1px #0000006e;
    }

.btnsync {
    color: #007c71;
}
/*.btnedit::after {
        content: "";
        height: 66%;
        width: 1px;
        background-color: black;
        position: absolute;
        top: 4px;
        right: 40px;
    }*/

.btndelete {
    color: #ff4f4f;
}

@media screen and (max-width:1384px) {
    .respform {
        flex-direction: column;
    }

    .loading_btn {
        padding: 0px;
        margin-top: 10px;
    }
}

/*21-02-23*/

div.table-responsive > div.dataTables_wrapper > div.row {
    margin-bottom: 5px;
}

.paginationrow {
    align-items: baseline;
}

.filter .btn {
    border-radius: 5px;
    margin-top: 20px;
}


@media screen and (max-width:1400px) {
    .RespDate {
        flex-direction: column !important;
    }

    .detailResp {
        flex-direction: column !important;
    }

    .GroupResp {
        margin-top: 5px;
        flex-direction: column;
    }
}



/*22-02-23*/

@media screen and (min-width:1050px) and (max-width:1400px) {
    .inputWidth {
        width: 100% !important;
    }

    .loading_btn {
        margin-top: 10px;
    }
}

@media screen and (min-width:1000px) and (max-width:1050px) {
    .inputWidth {
        width: 90% !important;
    }
}

@media screen and (max-width:1200px) {
    .loading_btn {
        margin-top: 10px;
    }

    .mlResp-5 {
        margin-left: 5px;
    }
}



@media screen and (max-width:1200px) {
    .inpResp {
        flex-direction: column;
    }

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

tr.chk-False td {
    background-color: #ffe3d8;
}

.align-rgt {
    text-align: right;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
    padding-right: 30px !important;
    /*font-weight: 600;*/
    font-weight: bold;
    border-bottom: 1px solid #ebeaf2;
}


/* For Custom date Piker*/

input.momentDate {
    position: relative;
}

    input.momentDate:before {
        position: absolute;
        top: 25%;
        left: 10px;
        content: attr(data-date);
        display: inline-block;
        color: black;
    }

    input.momentDate::-webkit-datetime-edit, input.momentDate::-webkit-inner-spin-button, input.momentDate::-webkit-clear-button {
        display: none;
    }

    input.momentDate::-webkit-calendar-picker-indicator {
        position: absolute;
        /*top: 3px;*/
        right: 10px;
        color: black;
        opacity: 1;
    }

/*.form-control:read-only {
    background-color: #e9ecef !important;
    opacity: 1;
}*/

.table-custom thead th {
    /*border-top: 0;*/
    border-bottom-width: 1px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #757383;
    padding: 5px 30px 5px 12px;
    font-weight: 300;
    /*text-transform: uppercase;*/
    font-size: 14px;
    border-top: 1px solid #ebeaf2;
}

table.dataTable thead > tr > th.sorting:last-child {
    border-right: 1px solid #ebeaf2;
}

.table-custom tbody tr td:last-child {
    border-right: 1px solid #ebeaf2;
}

.overflowOrgModal {
    overflow-x: hidden;
}

a {
    color: #408dfb;
}

    a[href*="mailto"] {
        color: currentColor;
    }

.mstItem a:hover {
    color: #429aff !important;
}

.sidebar-menu ul ul a.active {
    /*color: #225b9c;*/
    color: #429aff;
}
/*.dataTables_scrollBody {
    max-height: none!important;
}*/
/*.dataTables_scrollBody {
    overflow: hidden !important;
}*/
.form-check-input:focus {
    border-color: #0cc500 !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem #0cc50036 !important;
}

.overdueDiv {
    background-color: #ffd5d5;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #ef81817a, -2px -2px 2px #ff9f9f91;
}

    .overdueDiv .dash-widget-icon {
        color: #ff5e5e;
        background-color: #fff1f1;
    }

input[type="radio"]:focus {
    border-color: #02448f !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(2 68 143 / 25%) !important;
}

.form-control.disabled {
    background-color: #e9ecef;
    opacity: 1;
    pointer-events: none;
}



.notiavatar {
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    height: 45px;
    line-height: 38px;
    margin: 0 10px 0 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
    width: 46px;
    position: relative;
    white-space: nowrap;
}

    .notiavatar > img {
        border-radius: 50%;
        display: block;
        overflow: hidden;
        width: 100%;
    }

.pendingloadbtn {
    padding: 10px 19px;
}

.dataTables_scroll {
    /*max-height: 67vh;*/
    overflow: overlay;
    overflow: auto;
}

.dataTables_scrollBody {
    overflow: initial !important;
}

div.page-wrapper .card .card-footer {
    display: none
}

#btnFooter {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: white;
    box-shadow: 1px -1px 8px #00000026;
}

    #btnFooter > div {
        padding: 5px;
    }

.loadAnchor {
    cursor: pointer;
    text-decoration: underline;
}

    .loadAnchor:not([col-id="OrderNoStr"]) {
        justify-content: flex-end;
    }

.btnic {
    /*background-color: DodgerBlue;*/
    border: none;
    color: white;
    padding: 10px 12px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 10px;
    font-size: 14px;
    position:relative;
    /*margin-right: 10px;*/
}

    .btnic i {
        margin-right: 5px;
    }

    .btnic:hover, .btnic:active, .btnic:active:focus, .btnic:active:hover {
        border: 0;
    }


.btnicon {
    /*background-color: DodgerBlue;*/
    border: none;
    color: white;
    text-align: center;
    cursor: pointer;
    padding: 8px 9px;
    font-size: 14px;
    /*margin-right: 10px;*/
}

    .btnicon i {
        margin-right: 0px;
    }

    .btnicon:hover, .btnicon:active, .btnicon:active:focus, .btnicon:active:hover {
        border: 0;
    }


.modal-open {
    overflow: hidden;
}
.modal  .submit-section {
    margin-top: 10px;
    position: sticky;
    background-color: white;
    margin: 0 -15px -15px -15px;
    bottom: -15px;
    padding: 5px;
}
.cust_btn {
    border-radius: 5px;
    /* box-shadow: 1px 1px 3px 0px rgb(2 68 143 / 50);*/
}

.shortCut {
    position: relative;
}

    .shortCut:before {
        position: absolute;
        content: '';
        width: 2px;
        height: 22px;
        display: inline-block;
        top: 0%;
        background-color: #fff;
        bottom: 0%;
        margin: auto;
        margin-left: -8px;
    }


#transferDateRange {
    padding: 2px 10px;
}

.card-footer {
    padding: 5px 12px;
}



.ctmrDiv > div {
    padding-left: 0px;
}

button.dt-button, div.dt-button, a.dt-button {
    border: 1px solid #02448f !important;
    background-image: linear-gradient(to bottom, #02448f 0%, #02448f 100%) !important;
    color: white !important;
    border: 1px solid #02448f !important;
}

.colgap-15 {
    column-gap: 15px;
}

.btnrgt {
    justify-content: end;
}


.mstIcon {
    margin-right: 5px;
}

.savebtn {
    padding: 12px 26px !important;
    font-size: 15px !important;
}

.password-title {
    font-size: 22px;
}

.formlabel {
    font-size: 14px !important;
}

.forminput {
    height: 32px !important;
    font-size: 14px;
}

.dash-widget .dropdown.dropdown-action a.action-icon {
    /*display: none;*/
}

.dropdown-menu .dropdown-item img {
    margin-right: 5px;
}
.custom-label-float {
    --half-bg: 53%;
    margin-bottom: 0px;
    position: absolute;
    transform: translate(7px, -5px) scale(0.77);
    transform-origin: 0 0;
    background-image: linear-gradient(180deg,white var(--half-bg), transparent calc(100% - var(--half-bg)));
    z-index: 6;
    line-height: 1rem;
    /* box-shadow: 1px 1px 5px #00000033; */
    border-radius: 10px;
    padding: 0 7px;
}

/*For tabs in My Task*/
.tabs {
}

#tab-button {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    #tab-button li {
        display: table-cell;
        width: 20%;
    }

        #tab-button li a {
            display: block;
            padding: .5em;
            background: #eee;
            border: 1px solid #ddd;
            text-align: center;
            color: #000;
            text-decoration: none;
        }

        #tab-button li:not(:first-child) a {
            border-left: none;
        }

        #tab-button li a:hover,
        #tab-button .is-active a {
            border-bottom-color: transparent;
            background: #fff;
        }





.tab-button-outer {
    display: block;
    margin-bottom: 5px;
}

.tab-contents {
    margin-top: 20px;
}

@media screen and (min-width: 768px) {
    .tab-button-outer {
        position: relative;
        z-index: 2;
        display: block;
    }


    .tab-contents {
        position: relative;
        top: -1px;
        margin-top: 0;
    }
}

/*For tabs in My Task*/

.row.space-less {
    --bs-gutter-x: 0.3rem;
}

.row.space-less-1 {
    --bs-gutter-x: 0.5rem;
}

.row.space-less > [class*="col-"] {
    margin-bottom: 0.5rem;
}

.row.space-less-mb-0 > [class*="col-"] {
    margin-bottom: 0.5rem;
}

.row.space-less.space-less-sm-mb-1 [class*="col-"] {
    margin-bottom: 0.4rem;
}

.row.space-less .col-btn-0 {
    margin-bottom: 0rem;
}

/*========================== Span ======================*/

.span-sm {
    transform: translate(4px, 2px) scale(0.75);
    transform-origin: 0 0;
}

/*========================== Span ======================*/

/*.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip).form-control {
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}*/

.slimScrollBar {
    display: none;
}

.tab-select-outer {
    display: none;
}

.filter-button-wrap, .filter-close-wrap {
    --top-filter: 17.7%;
    position: fixed;
    top: var(--top-filter);
    z-index: 1001;
    background-color: #8a366e;
    padding: 8px 8px;
    font-weight: 500;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    cursor: pointer;
}

.filter-button-wrap {
    right: 0px;
    position: fixed;
}

.btnic.filter-button-wrap i {
    margin-right: 0
}

@media screen and (max-width:1240px) {
    /*.accordion {
        width: 530px;
        left: -457.016px !important;
        display: block;
    }*/

    .report_dropdown {
        /*left: -552.125px !important;*/
        left: unset !important;
        right: calc(0% - 40px);
    }

    .utility_dropdown {
        /*left: -460.82px !important;*/
        left: unset !important;
        right: 0%;
    }
}

@media screen and (max-width:1024px) {
    .utility_dropdown {
        /*left: -460.82px !important;*/
        left: unset !important;
        right: 40px;
    }
}

@media screen and (max-width:992px) {
    .utility_dropdown {
        /*left: -460.82px !important;*/
        left: unset !important;
        right: 70px;
    }
}

@media screen and (max-width:991px) {
    [data-layout=horizontal] body .sidebar .sidebar-menu ul {
        display: flex;
        align-items: center;
        -webkit-align-items: start;
        flex-direction: column;
        background-color: #303030
    }

    .sidebar-menu ul {
        /*top: 325px;*/
        top: 0px;
        transform: translate(0%, 50%);
        width: 21%;
        position: relative;
        height: 100vh;
        max-height: calc(95vh - 20px);
        overflow: auto;
    }

    .header-left .header-beadcruam span {
        margin-bottom: 17px;
        margin-left: 18px
    }

    [data-layout=horizontal] body .sidebar .sidebar-menu .accordion1, [data-layout=horizontal] body .sidebar .sidebar-menu .megamenu .accordion {
        width: 170px !important;
        z-index: 1;
        display: none;
        background-color: #fff;
        border: 1px solid rgba(67,87,133,.2);
        box-shadow: 0 2px 5px 0 rgba(67,87,133,.3);
        top: -30px;
        left: 14PX !important;
        min-height: 100% !important;
        transition: opacity .3s ease-out;
        height: 157px !important
    }

    [data-layout=horizontal] body .sidebar .sidebar-menu {
        height: 0
    }

    [data-layout=horizontal] body .page-wrapper {
        padding-top: 50px
    }

    .header .header-left {
        padding: 0 57px
    }

    .sidebar-menu > ul > li {
        padding: 8px 0 0
    }

    [data-layout=horizontal] body .sidebar {
        width: 100% !important;
        bottom: inherit;
        border-bottom: none
    }

    .sidebar-menu > ul > li:after {
        content: "";
        display: none
    }

    .user-menu.nav > li > a {
        color: #000;
        font-size: 14px;
        line-height: 48px;
        padding: 0 17px;
        height: 50px
    }

        .user-menu.nav > li > a > i {
            font-size: 20px;
            line-height: 55px
        }

    .mstItem a {
        padding: 7px 8px !important
    }

    .tab-contents {
        margin-top: 0
    }

    .inputheaderDiv {
        padding-left: 0
    }

    .megamenu .accordion li .accordion-line {
        border-right: none
    }

    .user-menu {
        top: -51px
    }

    .tab-select-outer {
        display: none;
    }

    .select2-container .select2-selection--single, .select2-container--default .select2-selection--multiple {
        margin-bottom: 0rem
    }
}

@media screen and (max-width:768px) {
    #fullLoading {
        margin-top: 6px !important;
    }

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

    .sidebar-menu ul {
        width: 29% !important
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center;
        margin-top: 5px;
    }

    div.dataTables_wrapper div.dataTables_filter {
        text-align: end;
    }

    .select2-container .select2-selection--single, .select2-container--default .select2-selection--multiple {
        margin-bottom: 0.5rem
    }
}

@media screen and (max-width: 640px) {
    div.dt-buttons {
        float: none !important;
        text-align: start;
    }

    div.dataTables_wrapper div.dataTables_filter {
        text-align: start;
    }
}

@media only screen and (max-width:425px) {
    .header-left .header-beadcruam span {
        margin-bottom: auto;
        margin-top: auto;
        margin-left: 22px;
        font-size: 14px
    }

    .sidebar-menu ul {
        width: 50% !important
    }

    .btnic {
        padding: 8px 9px
    }

    .header .header-left {
        width: 434px
    }

    #tab-button li a {
        padding: .5em;
        font-size: 14px
    }

    .sidebar-menu ul {
        width: 51% !important
    }
}

@media screen and (max-width:375px) {
    .accordionRep, .accordionUtl {
        left: 14px !important
    }

    .header .header-left {
        width: 400px
    }

    .header-left .header-beadcruam span {
        margin: auto
    }

    #tab-button li a {
        padding: .5em;
        font-size: 13px
    }
}

@media screen and (max-width:320px) {
    .sidebar-menu ul {
        width: 60% !important
    }

    .header .header-left {
        width: 345px
    }

    .form-control, .header-left .header-beadcruam span {
        font-size: 12px !important;
    }

    #tab-button li a {
        padding: .7em;
        font-size: 12px !important;
    }
}

.btn-add {
    position: absolute;
    background-color: aliceblue;
    color: black;
    border-color: black;
    transform: scale(0.55);
    z-index: 1;
    padding: 4px 5px;
}

.pos-top-right {
    top: -12px;
    right: 9px;
}

li > a .badge {
    color: #ffffff;
    font-weight: 700;
    background-color: #02448f;
    position: absolute;
    top: 6px;
    margin-left: 4px;
}

/*
    #region Login 
    ---------------------------------------------------- 
*/

.account-box .form-group {
    margin-bottom: 25px;
}

.eyeIcon {
    cursor: pointer;
    margin-right: 1px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.eyeIconUtility {
    cursor: pointer;
    margin-right: 1px;
    position: absolute;
    top: 32px;
    right: 25px;
    color: black !important;
    transition: opacity 0.25s ease;
}

span.eyeIconUtility.fa-eye-slash {
    opacity: 0.4;
}

.eyeIcon.fa-eye-slash {
    opacity: 0.4;
}

.eyeIcon {
    cursor: pointer;
    margin-right: 1px;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: opacity 0.25s ease;
}

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

.LoginUser {
    margin-bottom: 25px !important;
}

.loginWithtxt {
    text-align: center;
    /*margin-bottom: 35px;*/
    margin-right: 20px;
}

.loginWithtxt {
    color: #a8a8a8;
}

.loginWithZoho {
    column-gap: 10px !important;
}

.ZohoLogin {
    margin: 32px 0px 0px 0px;
}

.zohoLogos a {
    padding: 10px 10px;
    border-radius: 6px;
    background-color: #fbfbfb;
    border: 1px solid #e3e3e3;
    transition: all 0.25s ease;
}

.zohoLogos:has(:hover) a, .zohoLogos:active a {
    box-shadow: 6px 8px 6px 0px #e5e5e5a8;
}

.zohoLogos img {
    --width: 20px;
    height: var(--width);
    width: var(--width);
}

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

/*#endregion Login */




/* #region Role  ---------------------------------------------------- */

.roleoption {
    padding: 5px 0px;
}
/* #endregion Role*/

/* #region toastr  ---------------------------------------------------- */

.toast-top-right {
    top: 40px;
}
#toast-container * {
    white-space: break-spaces;
    max-height: 45vh;
    overflow: auto;
    padding-bottom: 2rem;
}
/* #endregion toastr*/
@media screen and (max-width:320px) {
    ul .nav user-menu .dropdown-menu {
        box-shadow: 0px 0px 0px 1px #d2d2d2;
        padding: 0px;
    }
}

/*#region  
    Custom Class 
    */

.lh-14 {
    line-height: 14px;
}

.color-select {
}

    .color-select .input-group-text {
        border-color: #767676;
    }

.input-group > .form-control:not(.daterange-text) {
    padding: 0;
    --border-r: 5px;
}

.input-group > input[type="date"].form-control {
    padding: 6px 12px;
}


.form-control.input-group-f {
    border-radius: var(--border-r) 0 0 var(--border-r);
}

.form-control.input-group-c {
    border-radius: 0;
}

.form-control.input-group-l {
    border-radius: 0 var(--border-r) var(--border-r) 0;
}

.input-group .select2-container .select2-selection--single, 
.input-group .select2-container--default .select2-selection--multiple {
    min-height: 34px;
    height: 34px;
    border-color: #cbc7c7;
    border-radius: 0 var(--border-r) var(--border-r) 0;
}
.input-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
    right: 0px;
}
/*#endregion  Custom Class */
/*#region  
    Input Custom
    */
.input-group input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 3px;
}

.border-right {
    border-right: 1px solid;
}

span.badge i:before {
    transition: all 0.25s ease;
    transform: translateY(0px) scale(1);
    font-weight: bolder !important;
}
/*
span.badge:hover i:before {
    transform: translate(-10px, 0px) scale(1.3);
}
*/
.custom-badge span.badge {
    padding: 6px;
}
/*#endregion Input Custom */
.form-block {
    position: relative;
}

.standard-input {
    border: none;
    border-bottom: 2px solid #4286f4;
}

    .standard-input:focus {
        outline: none;
    }

.floating-label {
    position: absolute;
    left: 0;
    color: #222;
    font-size: .7rem;
    margin-top: -1rem;
    transition: all 250ms ease-in-out;
}

.standard-input:placeholder-shown + .floating-label {
    cursor: text;
    font-size: .9rem;
    margin-top: 0;
    color: #444;
}
/*
<div class="form-block" >
<input id="email" type="email" class="standard-input" placeholder=" " >
<label for="email" class="floating-label" > email</label >
</div >  */




.new-tag {
    margin: 0 !important;
    padding: 7px 2px;
    transform-origin: 0 0;
    width: 33px;
    position: absolute;
    right: 0;
    height: 13px;
    line-height: 1;
    z-index: 5;
    color: white;
    /*transform: translate(-1px, -13px) scale(0.95);
    background: linear-gradient(62deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);*/
    transform: translate(13px, -8px) scale(0.7);
    border-radius: 8px 0;
    background: linear-gradient(62deg, #EE7752, #d52323);
    background-position: 0 100%;
    transition: all 0.5s ease;
}
new-tag:hover {
    background-position:0 15%;
}

.new-tag::before {
    content: "NEW";
    position: absolute;
    top: 7%;
    z-index: 1;
    transform: scale(.75);
    transform-origin: 0 0;
    padding: 2px;
    animation: animBlink 1s ease-in-out infinite;
}
button .new-tag::before {
    transform: scale(.75) translate(-19px, 0px);
}
button .new-tag {
    transform: translate(14px, -12px) scale(0.7);
}

/*
.new-tag::after {
    content: "";
    opacity: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: #0460CC;
    border-radius: 100%;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
    animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
    z-index: -1;
}*/


    @-webkit-keyframes ripple {
        from {
            opacity: 1;
            transform: scale3d(0.75, 0.75, 1);
        }

        to {
            opacity: 0;
            transform: scale3d(2, 2, 1);
        }
    }

    @keyframes ripple {
        from {
            opacity: 1;
            transform: scale3d(0.75, 0.75, 1);
        }

        to {
            opacity: 0;
            transform: scale3d(2, 2, 1);
        }
    }

    @keyframes animBlink {
        25% {
            opacity: 0.5;
        }

        50% {
            opacity: 0.5;
        }

        75% {
            opacity: 0.8;
        }
    }
    /*#region Switch */
    .form-switch {
    line-height: 1;
    padding-left:1rem;
}
    .form-switch label {
        display: flex;
        position: relative;
        flex-direction: column;
    }
.form-switch input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    position:absolute;
}

label[data-type="switch"]:before {
    content: "";
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 19px;
    background: #8e3e74;
    border-radius: 100px;
    position: relative;
}

label[data-type="switch"]:after {
    content: '';
    --w: 15px;
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--w);
    height: var(--w);
    background: #fff;
    border-radius: 100%;
    transition: 0.3s;
}

input:checked + label[data-type="switch"]:before {
    background: #bada55;
}

input:checked + label[data-type="switch"]:after {
    left: 22px;
}

label[data-type="switch"]:active:after {
    width: 130px;
}
.form-switch span[data-val] {
    font-size:10px;
}

/*#endregion Switch */



@-webkit-keyframes shine {
    0%, 10% {
        background-position: -1000px;
    }

    20% {
        background-position: top left;
    }

    90% {
        background-position: top right;
    }

    100% {
        background-position: 1000px;
    }
}
/*@media screen and (max-width:1384px)*/ 

@media screen and (max-width:376px) {

    .dash-widget .card-body {
        --bs-card-spacer-y: 0.5rem;
        --bs-card-spacer-x: 0.5rem;
    }

}

/* #region CoordinatorIndexSlider */

table#loadingSlipTable tbody tr:not(.bg-success) td[class*="status-"] {
    /*font-weight: bold;*/
}
table#loadingSlipTable tr:not(.bg-success) td[class*="status-"] {

}
table#loadingSlipTable tr:not(.bg-success) td[class*="status-running"] {
    /*color: orange;*/
    background-color: #ffa5008f;
}

table#loadingSlipTable tr:not(.bg-success) td[class*="status-loaded"] {
    /*color: blue;*/
    background-color: #0000ff59;
}

table#loadingSlipTable tr:not(.bg-success) td[class*="status-pending"] {
    /*color: #00c2ff;*/
    /*background-color: #00c2ff73;*/
}

.daily-dashboard .summary-highlights {
    font-size: 1.6rem;
}
/* #endregion CoordinatorIndexSlider */

/* #region CommonGateEntryIndex */

.CommonGateEntryIndex .bgLoadingVehicleEntry {
    background-color: #aceaff;
}

.CommonGateEntryIndex .bgUnloadingVehicleEntry {
    background-color: #ffdbbd;
}

.CommonGateEntryIndex .bgVisitorEntry {
    background-color: #bdffda;
}

.CommonGateEntryIndex .bgVisitorOutEntry {
    background-color: #ffc2c2;
}

/*#region Button Style */
button#btnUnLoadingVehicleEdit, button#btnVisitorEdit, button#btnVisitorPassNoOut, button#btnLoadingVehicleEdit {
    color: black;
    border: 0;
}
button#btnUnLoadingVehicleEdit {
    background: hsl(27 100% 76% / 1);
}

button#btnVisitorEdit {
    background: hsl(146 100% 76% / 1);
}

button#btnVisitorPassNoOut {
    background: #ff8b8b;
}

button#btnLoadingVehicleEdit {
    background: hsl(195 100% 65% / 1);
}

/*#endregion Button Style */

/*
button#btnUnLoadingVehicleEdit {
    background: hsl(27 100% 76% / 1);
    color: black;
    border: #ff7503;
}

button#btnVisitorEdit {
    background: hsl(146 100% 76% / 1);
    color: black;
    border: navajowhite;
}

button#btnVisitorPassNoOut {
    color: black;
    background: #ff8b8b;
    border: 0;
}

button#btnLoadingVehicleEdit {
    background: hsl(195 100% 65% / 1);
    border: 0;
    color: black;
}

*/


.CommonGateEntryIndex .input-group > .form-control:not(.daterange-text) { /* vistor pass inside drodown padding */
    padding: 15px !important;
}

.CommonGateEntryIndex .pt10 {
    padding-top: 8px !important;
}

.CommonGateEntryIndex .form-group {
    margin-bottom: 6px;
}

.CommonGateEntryIndex .btn {
    height: 35px !important;
    font-size: large;
}

@media (max-width: 767px) {
    .CommonGateEntryIndex .btn-sm-custom {
        padding: 8px;
        /*font-size: 12px;*/
        margin-left: 0;
        /*width: 100%;*/
        justify-content: center;
    }

    .CommonGateEntryIndex .card-custom {
        margin: 0 0 5px 0;
        width: 100%; /* Full width on mobile */
        /* padding: 10px; */
    }
    /*.card-custom-body .d-flex .form-group {
        width: 100%;
        } */
    .CommonGateEntryIndex .card-custom-body .d-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .CommonGateEntryIndex .card-container {
        flex-direction: column; /* cards on smaller screens */
    }

    .CommonGateEntryIndex .card-custom-body .d-flex .form-group button {
        width: 100%;
        margin-top: 10px;
    }
}



/* #endregion CommonGateEntryIndex */