html {
    overflow-x: hidden;
}
/*
div {
    user-select: none;
}

span {
    user-select: none;
}*/

/* width */
::-webkit-scrollbar {
    width: 5px;
}

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

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

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

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: 10px 20px;
    background-color: #c1d8ef;
    border-bottom: solid 1px #aaa;
}

.toplogo {
    width: 60px;
    height: 40px;
    object-fit: cover;
}

.topprofilepic {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid white;
}

#side_menu_col_hid {
    width: 20% !important;
    transition: all ease-in-out 0.3s;
}

    #side_menu_col_hid.hide {
        display: none;
        overflow-x: hidden;
    }

.side_menu_col {
    transition: all ease-in-out 0.3s;
    z-index: 1000;
    top: 0;
    white-space: nowrap;
    position: fixed;
    width: 20% !important;
}

    .side_menu_col.hide {
        display: none;
        transition: all ease-in-out 0.3s;
        /*margin-left: -30px;*/
        /*padding-right: 30px;*/
    }

    .side_menu_col > .side_menu > .item > div {
        max-width: 500px;
        transition: all ease-in-out 0.3s;
    }

    .side_menu_col > .side_menu > .item > .fa-angle-down {
        transition: all ease-in-out 0.3s;
    }

    .side_menu_col.hide > .side_menu > .item > div {
        max-width: 0px !important;
        opacity: 0;
    }

    .side_menu_col.hide > .side_menu > .item > .fa-angle-down {
        opacity: 0;
    }

.side_menu {
    z-index: 1;
    background-color: var(--my_blue);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

    .side_menu > .heading {
        padding: 6px 0px 7px 20px;
        border-bottom: solid 1px #316293;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
        background-color: #12375c;
    }

    .side_menu > .item {
        padding: 5px 20px;
        position: relative;
        cursor: pointer;
        transition: all ease-in-out 0.1s;
    }

        .side_menu > .item > .caret {
            position: absolute;
            right: 0;
            margin-right: -5px;
            top: 50%;
            font-size: 24px;
            display: none;
            color: var(--light_gray);
            transform: translateY(-50%);
        }

        .side_menu > .item:hover {
            background-color: var(--my_blue);
        }

        .side_menu > .item.active {
            background-color: var(--my_blue);
        }

            .side_menu > .item.active > .caret {
                display: block;
            }

        .side_menu > .item.logout {
            position: absolute;
            bottom: 0;
        }

.main_content {
    margin-top: 20px;
}

.br-5 {
    border-radius: 5px !important;
}

.notification_strip {
    background-color: white;
    padding: 10px 40px 10px 20px;
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

    .notification_strip > .dismiss {
        position: absolute;
        top: 50%;
        right: 10px;
        font-size: 14px;
        transform: translateY(-50%);
    }

    .notification_strip > .priority {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
    }

        .notification_strip > .priority.low {
            background-color: var(--my_green);
        }

        .notification_strip > .priority.high {
            background-color: var(--my_red);
        }

.dash_card {
    color: white;
    padding: 30px 10px 30px 30px;
}

    .dash_card > .text {
        display: inline-block;
    }

    .dash_card.bl {
        background-color: var(--my_blue);
    }

    .dash_card.or {
        background-color: var(--my_orange);
    }

    .dash_card.yl {
        background-color: var(--my_yellow);
    }

    .dash_card.rd {
        background-color: var(--my_red);
    }

    .dash_card > i {
        font-size: 30px;
    }

.prev_icon {
    width: 50px;
    height: 50px;
}

.comment_pic {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid white;
    border-radius: 50%;
}

.recent_prop_pic {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.list_prop_pic {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.list_unit_pic {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.green_btn {
    background-color: var(--my_green);
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: 6px 0px;
}

.red_btn {
    background-color: var(--my_red);
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: 6px 0px;
}

.top_tabs {
    background-color: white;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

    .top_tabs.active {
        color: white;
        background-color: var(--my_green);
    }

#ocbtn {
    transition: all ease-in-out 0.3s;
}

    #ocbtn.hide {
        transform: rotate(90deg);
    }

#logout.hide {
    margin-left: calc(-100% - 30%);
}

.smallpage {
    display: none;
}

.ab_center {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100%;
    transform: translate(-100%, -50%);
}

.right_blue {
    height: 100vh;
}

.signnow {
    display: none;
}

.logincontainer {
    margin-left: 20%;
    width: 60%;
}

.pic_icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.scroll_item {
    display: inline-block;
    border-radius: 5px;
    height: 400px;
    object-fit: contain;
    scroll-snap-align: center;
}

.layout_icon {
    opacity: 0.4;
    transition: all ease-in-out 0.3s;
    transform: scale(0.8);
}

    .layout_icon.active {
        color: var(--my_green);
        opacity: 1;
        transform: scale(1.2);
    }

.unit_card {
    padding: 10px 10px 20px 10px;
    margin: 0px 20px 40px 20px;
    background-color: white;
    position: relative;
}

.unit_card_pic {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: inline-block;
}

.cardview {
    padding-inline: 20px !important;
}

.status_tag {
    position: absolute;
    top: 20px;
    z-index: 10;
    left: 0;
    border-radius: 0px 50px 50px 0px;
    padding: 0px 20px 0px 10px;
    font-size: 12px;
    color: white;
}

    .status_tag.green {
        background-color: var(--my_green);
    }

    .status_tag.gray {
        background-color: var(--my_gray);
    }

.listview {
    display: none;
}

.cardview {
    display: none;
}

.listview.view {
    display: initial;
}

.cardview.view {
    display: block;
}

.list_drop {
    overflow-y: hidden;
    background-color: var(--my_blue);
    /*transition: all ease-in-out 0.1s;*/
    padding: 0px 0px;
    max-height: 0px;
}

    .list_drop.show {
        max-height: 1000px;
        padding-top: 10px;
    }

    .list_drop.small_show {
        max-height: 200px;
        overflow-y: scroll;
        position: fixed;
        left: 55px;
        padding: 10px;
        margin-top: -34px;
        border-radius: 0px 5px 5px 0px;
    }

        .list_drop.small_show > .menu_list {
            margin-left: 0px;
            margin-bottom: 0px;
        }

.menu_list {
    margin-left: 30px;
    margin-bottom: 10px;
}

    .menu_list > li {
        margin-bottom: 5px;
        cursor: pointer;
    }

.master_list {
    padding: 5px 0px;
}

    .master_list > tbody > tr {
        padding: 10px 20px;
        background-color: var(--light_gray);
        margin: 5px 10px;
        transition: all ease-in-out 0.1s;
    }

        .master_list > tbody > tr.active {
            background-color: var(--my_blue);
            color: white;
        }

        .master_list > tbody > tr:hover {
            transform: scale(1.05);
        }

.rect_btn {
    padding: 10px 20px;
    background-color: white;
}

    .rect_btn.active {
        background-color: var(--my_blue);
        color: white;
    }

    .rect_btn.green {
        background-color: var(--my_green);
        color: white;
    }

    .rect_btn.orange {
        background-color: var(--my_orange);
        color: white;
    }

.main_col {
    padding-right: 30px !important;
}

.right_block {
    max-height: 0px;
    overflow-y: hidden;
    padding: 0px 10px;
    transition: all ease-in-out 0.3s;
}

    .right_block::-webkit-scrollbar {
        display: none;
    }

    .right_block.show {
        max-height: 1000px;
        overflow-y: scroll;
        padding: 10px 10px;
    }

#login_left {
    transition: all ease-in-out 0.3s;
}

#login_right {
    transition: all ease-in-out 0.3s;
}


.landlord_list_pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

.table_status {
    padding: 3px 10px;
    border-radius: 50px;
    display: inline-block;
    border: 2px solid white;
}

    .table_status.green {
        background-color: var(--my_green);
        color: white;
    }

    .table_status.blue {
        background-color: var(--my_blue);
        color: white;
    }

    .table_status.orange {
        background-color: var(--my_orange);
        color: white;
    }

    .table_status.gray {
        background-color: var(--my_gray);
        color: black;
    }

.property_list_pic {
    width: 150px;
    height: 100px;
    border: 4px solid white;
    border-radius: 3px;
    object-fit: cover;
}

.quality_bar {
    width: 100%;
    height: 10px;
    border: 2px solid white;
    background-color: var(--light_gray);
}

    .quality_bar > .fill {
        width: 50%;
        height: 100%;
        background-color: var(--my_green);
    }

.portal > img {
    border-radius: 100px;
    width: 30px;
    height: 30px;
    border: 2px solid white;
}

.portal > .inactive {
    display: block;
}

.portal > .active {
    display: none;
}

.portal.active > .inactive {
    display: none;
}

.portal.active > .active {
    display: block;
}

.my_pagination {
    padding: 5px 10px;
    display: inline-block;
    margin-left: 10px;
    background-color: #00000030;
    cursor: pointer;
    border-radius: 5px;
}

    .my_pagination.active {
        background-color: var(--my_green);
        color: white;
        transform: scale(1.2);
    }

.pagination_scroll {
    overflow-x: scroll;
    white-space: nowrap;
    scroll-behavior: smooth;
    overflow-y: hidden;
    /*box-shadow: inset 0px 0px 10px #00000030;*/
    padding: 10px;
    max-width: 100%;
}

    .pagination_scroll::-webkit-scrollbar {
        display: none;
    }

#srch {
    border-radius: 0px;
}

.block.hidden {
    display: none;
}

.master_detail_list {
    border-collapse: separate;
    border-spacing: 0 15px;
    margin-top: 0px;
    /*border:1px solid #cacaca !important;*/
    border-radius: 10px;
    padding-top: 0px;
    margin-bottom: 0px !important;
}

    .master_detail_list > thead {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 999;
    }

    .master_detail_list > tbody > tr {
        /*box-shadow: var(--boot_shadow);*/
    }

.upload_pic {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.emp_doc_file {
    font-size: 12px;
    padding: 5px;
    border-radius: 100px;
    line-height: 12px;
    width: 22px;
    height: 22px;
    background-color: var(--my_orange);
    color: white;
    cursor: pointer;
}

.emp_doc_file_view {
    cursor: pointer;
    font-size: 12px;
    padding: 5px;
    border-radius: 100px;
    line-height: 12px;
    width: 22px;
    height: 22px;
    margin-left: 10px;
    background-color: var(--my_green);
    color: white;
}

.add_agent_pic_holder {
    border-radius: 5px;
    position: relative;
    height: 100%;
}

.add_agent_pic {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    border: 5px solid white;
    object-fit: contain;
}

.top_filter_btn {
    display: inline-block;
    padding: 5px 20px;
    background-color: white;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.righ_side_icon {
    padding: 10px;
    border-radius: 100px;
    font-size: 16px;
    height: 36px;
    width: 36px;
    position: relative;
}

    .righ_side_icon.small {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .righ_side_icon > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .righ_side_icon.blue {
        border: 2px solid var(--my_blue);
        color: var(--my_blue);
    }

    .righ_side_icon.green {
        border: 2px solid var(--my_green);
        color: var(--my_green);
    }

    .righ_side_icon.orange {
        border: 2px solid var(--my_orange);
        color: var(--my_orange);
    }

    .righ_side_icon.indigo {
        border: 2px solid indigo;
        color: indigo;
    }

    .righ_side_icon.yellow {
        border: 2px solid yellowgreen;
        color: yellowgreen;
    }

    .righ_side_icon.red {
        border: 2px solid orangered;
        color: orangered;
    }


.report_card_icon {
    width: 30px;
    height: 30px;
    border-radius: 100px;
    padding: 10px;
    font-size: 14px;
    position: absolute;
    right: 10px;
}

    .report_card_icon > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .report_card_icon.maroon {
        border: 2px solid var(--my_maroon);
        color: var(--my_maroon);
    }

    .report_card_icon.yellow {
        border: 2px solid var(--my_yellow);
        color: var(--my_yellow);
    }

    .report_card_icon.indigo {
        border: 2px solid var(--my_indigo);
        color: var(--my_indigo);
    }

.thumb_pics {
    position: relative;
    padding-bottom: 80%;
    margin-bottom: 20px;
}

    .thumb_pics > img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 5px;
        left: 0px;
        border: 1px solid #00000030;
        border-radius: 5px;
    }

.burger_btn {
    display: inline-block;
}

    .burger_btn > div {
        width: 20px;
        height: 3px;
        background-color: var(--my_blue);
        border-radius: 100px;
        margin: 4px 0px;
        pointer-events: none;
        transform-origin: 0% 2px;
        transition: all ease-in-out 0.2s;
    }

    .burger_btn.active > .second {
        opacity: 0;
    }

    .burger_btn.active > div {
        width: 20px;
    }

    .burger_btn.active > .first {
        transform: rotate(45deg);
    }

    .burger_btn.active > .third {
        transform: rotate(-45deg);
    }

.landlordname {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contract_side_menu {
    list-style-type: none;
    padding-left: 0;
    font-size: 14px;
    overflow-y: scroll;
}

    .contract_side_menu > li {
        padding: 5px 10px;
        transition: all ease-in-out 0.2s;
        cursor: pointer;
    }

        .contract_side_menu > li:hover {
            background-color: var(--my_blue);
            color: white;
        }

        .contract_side_menu > li.active {
            background-color: var(--my_blue);
            color: white;
        }

.contract_tenant_pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

.tstar {
    color: lightgray;
}

    .tstar.gold {
        color: gold;
    }

.top-right-status {
    background-color: var(--my_green);
    display: inline-block;
    padding: 10px;
    border: 2px solid white;
    border-radius: 5px;
    color: white;
}

.time_ball {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
    background-color: white;
    padding: 3px;
    border-radius: 100px 100px 100px 0px;
    border: 3px solid var(--my_blue);
    z-index: 1;
}

.time_line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background-color: var(--my_blue);
    height: 50%;
}

    .time_line.bottom {
        bottom: 0px;
    }

.mydate {
    border-bottom: 1px solid var(--my_gray)
}

    .mydate.disable > input {
        pointer-events: none;
    }

    .mydate > input, .mydate > select {
        border: none !important;
        background-color: transparent;
        padding-inline: 0px !important;
    }

        .mydate > input[readonly], .mydate > select[readonly] {
            background-color: transparent !important;
        }

        .mydate > input:focus {
            outline: none !important;
            border: none;
            border-color: inherit;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .mydate > select:focus {
            outline: none !important;
            border: none;
            border-color: inherit;
            -webkit-box-shadow: none;
            box-shadow: none;
        }


.document_card {
    border-radius: 5px;
    padding: 20px;
    position: relative;
}

    .document_card > .d_count {
        position: absolute;
        top: 10px;
        width: 22px;
        height: 22px;
        color: white;
        left: 10px;
        font-size: 12px;
        background-color: var(--my_blue);
        border-radius: 50px;
        padding: 5px;
    }

        .document_card > .d_count > span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.notes_input {
    position: absolute;
    bottom: 10px;
    left: 0px;
    right: 0px;
}

.note_box {
    background-color: white;
    padding: 10px;
    border-radius: 0px 15px 15px 15px;
    margin-bottom: 20px;
    display: inline-block
}

.clickable_row {
    cursor: pointer;
    transition: all ease-in-out 0.2s;
}

    .clickable_row.selected {
        background-color: var(--my_green);
        color: white;
    }

    .clickable_row.active {
        background-color: var(--super_light_blue);
        color: white;
    }

    .clickable_row.selected.active {
        background-color: var(--my_red);
        color: white;
    }

.rec_hover {
    position: absolute;
    top: 20px;
    width: 100%;
    background-color: white;
    border-radius: 5px;
    border: 1px solid #00000010;
    opacity: 0;
    right: 100%;
    pointer-events: none;
    transition: all ease-in-out 0.2s;
}

    .rec_hover > .row {
        background-color: white;
        border-radius: 5px;
        width: 400px;
    }

.rec_hover_anchor {
    cursor: pointer;
}

.rec_hover.active {
    opacity: 1;
    pointer-events: initial;
}

.contract_progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 0px 0px 5px 5px;
    overflow: hidden;
}

    .contract_progress > .s {
        position: absolute;
        left: 0;
        right: 40%;
        bottom: 0;
        height: 100%;
        display: inline-block;
        background-color: var(--my_red);
    }

    .contract_progress > .r {
        position: absolute;
        right: 0%;
        left: 60%;
        bottom: 0;
        height: 100%;
        display: inline-block;
        background-color: var(--my_green);
    }

#big_logo {
    transform-origin: left;
    transition: all ease-in-out 0.3s;
}

    #big_logo.hide {
        transform: scale(0);
        max-width: 0;
        opacity: 0;
        max-height: 0;
    }


.top_logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    transition: all ease-in-out 0.3s;
    transform-origin: left;
    margin-top:-5px;
}
.shrink_logo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    float: left;
    margin-top: 5px;
    border: 2px solid white;
    transition: all ease-in-out 0.3s;
    transform-origin: left;
}

    .shrink_logo.hide {
        max-width: 0;
        max-height: 0;
        opacity: 0;
        transform: scale(0);
    }

.round_number {
    border-radius: 100px;
    width: 20px;
    height: 20px;
    position: relative;
    padding: 15px;
}

    .round_number.blue {
        border: 1px solid var(--my_blue);
        color: var(--my_blue);
    }

    .round_number.green {
        border: 1px solid var(--my_green);
        color: var(--my_green);
    }

    .round_number.orange {
        border: 1px solid var(--my_orange);
        color: var(--my_orange);
    }

    .round_number.red {
        border: 1px solid var(--my_red);
        color: var(--my_red);
    }

    .round_number.black {
        border: 1px solid var(--my_black);
        color: var(--my_black);
    }

.reminder_send_box {
    position: fixed;
    bottom: 0px;
    right: 0px;
}

.upload_btn {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid var(--my_gray);
    background-color: #00000030;
    cursor: pointer;
}

    .upload_btn > .done {
        display: none;
    }

    .upload_btn > .upload {
        display: inline-block;
    }

    .upload_btn.green > .upload {
        display: none;
    }

    .upload_btn.green > .done {
        display: inline-block;
    }


    .upload_btn.green {
        border: var(--my_green);
        background-color: var(--my_green);
        color: white;
    }


.charge_card {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

    .charge_card.active {
        background-color: var(--super_light_blue);
        border: 2px solid var(--my_blue);
    }

/*.status_btn {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    background-color: white;
}

    .status_btn.active {
        background-color: var(--my_green);
        color: white;
    }*/

#snackbar > .message {
    padding: 5px 20px;
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-bottom: -50px;
    transform: translateX(-50%);
    display: inline-block;
    border-radius: 5px;
    transition: all ease-in-out 0.3s;
}

#snackbar {
    pointer-events: none;
}

    #snackbar.show {
        pointer-events: initial;
    }

        #snackbar.show > .message {
            pointer-events: initial;
            margin-bottom: 20px;
        }

    #snackbar.success > .message {
        background-color: var(--my_green);
    }

    #snackbar.error > .message {
        background-color: var(--my_red);
    }

.my_table_row {
    /*transform-origin: top;
    transform: rotateX(90deg);
    opacity: 0;
    border-radius:100px;
    border:transparent;
    transition: all ease-out 0.15s;*/
}

    .my_table_row.show {
        /* opacity: 1;
        transform: rotateX(0deg);*/
    }

.menu_btn {
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

    .menu_btn:hover {
        box-shadow: 0px 10px 10px #00000030;
        transform: translateY(-5px);
    }

    .menu_btn > i {
        padding-right: 5px;
    }

.modal_tab_btn {
    padding: 10px 20px;
    background-color: #00000010;
    font-size: 14px;
    border: 1px solid #00000030;
    transition: all ease-in-out 0.3s;
    cursor: pointer;
}

    .modal_tab_btn:hover {
        transform: translateY(-5px);
        box-shadow: 0px 10px 10px #00000030;
    }

    .modal_tab_btn.active {
        font-weight: bold;
        border-radius: 5px 5px 0px 0px;
        background-color: var(--my_blue);
        color: white;
        transform: translateY(-5px);
        box-shadow: 0px 10px 10px #00000030;
    }

.w-30 {
    width: 35% !important;
}

.item_row {
    overflow: hidden;
    border-radius: 100px;
}

.item_title {
    padding-left: 15px;
    color: white;
}

.point_dot {
    width: 20px;
    height: 20px;
    border: 7px solid var(--my_blue);
    border-radius: 50px;
}


.drop_option_container {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    max-height: 400px;
    border-radius: 10px;
    background-color: white;
    overflow-y: scroll;
    max-height: 0px;
    transition: all ease-in-out 0.3s;
    z-index: 10;
}

    .drop_option_container.show {
        max-height: 400px;
    }

.drop_input[readonly] {
    background-color: white !important;
}

.drop_search {
    position: sticky;
    top: 0;
    left: 0;
    margin-bottom: 20px;
}

.drop_item {
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
}


.status_container_new {
    border-bottom: solid 4px #e9e9e9;
}

.status_btn_new {
    padding: 5px 5px 10px 10px;
    letter-spacing: 2px;
    font-size: 12px;
    line-height: 14px;
    display: inline-block;
    cursor: pointer;
    margin-right: 5px;
    text-transform: uppercase;
    transition: all ease-in-out 0.2s;
}

    .status_btn_new.selected {
        margin-bottom: -4px;
        border-bottom: solid 4px #DB2955;
    }

        .status_btn_new.selected > div:nth-child(1) {
            color: #DB2955;
        }

    .status_btn_new.active {
        transform: translateY(-5px);
    }

    .status_btn_new:hover {
        margin-bottom: -4px;
        border-bottom: solid 4px blue;
        color: blue;
    }

    .status_btn_new > div:nth-child(1) {
        font-size: 12px;
        font-weight: bold;
    }

    .status_btn_new > div:nth-child(2) {
        border-radius: 100px;
        padding: 5px;
        background-color: #ccc;
        color: black;
        margin-left: 5px;
        min-width: 24px;
        text-align: center;
        display: inline-block;
    }

    .status_btn_new.selected > div:nth-child(2) {
        background-color: #DB2955;
        color: #fff;
    }

    .status_btn_new > div {
        pointer-events: none;
        display: inline-block;
    }

    .status_btn_new:hover > div:nth-child(1) {
        color: blue;
    }

    .status_btn_new:hover > div:nth-child(2) {
        background-color: blue;
        color: #fff;
    }

.status_btn {
    padding: 5px 5px 5px 10px;
    border-radius: 100px;
    font-size: 14px;
    background-color: var(--my_gray);
    line-height: 14px;
    display: inline-block;
    cursor: pointer;
    color: white;
    margin-right: 5px;
    transition: all ease-in-out 0.2s;
    border: 1px solid var(--my_gray);
}

    .status_btn.selected {
        background-color: var(--my_green);
        color: white;
    }

    .status_btn.active {
        transform: translateY(-5px);
    }

    .status_btn:hover {
        transform: translateY(-5px);
    }

    .status_btn > div:nth-child(2) {
        border-radius: 100px;
        padding: 5px;
        background-color: white;
        color: black;
        margin-left: 5px;
        min-width: 24px;
        text-align: center;
        display: inline-block;
    }

    .status_btn > div {
        pointer-events: none;
        display: inline-block;
    }

.status_btn_ud {
    border-radius: 5px;
    overflow: hidden;
    background-color: white;
    cursor: pointer;
    border: 2px solid white;
    margin-inline: 5px;
    transition: all ease-in-out 0.3s;
}

    .status_btn_ud:hover {
        box-shadow: 0px 10px 10px #00000030;
        transform: translateY(-5px);
    }

    .status_btn_ud > div:nth-child(1) {
        border-radius: 5px;
        padding: 5px 0px;
        color: white;
        font-size: 12px;
        box-shadow: 0px 5px 10px #00000030;
    }

    .status_btn_ud > div:nth-child(2) {
        padding: 5px 10px;
        font-weight: bold;
        font-size: 20px;
    }

.menu_holder {
    position: fixed;
    top: 40px;
    right: 0;
    bottom: 0;
    padding: 10px;
    background-color: white;
    border-radius: 10px 0px 0px 10px;
    margin-right: -200px;
    z-index: 5;
    transition: all ease-in-out 0.3s;
}

    .menu_holder.show {
        margin-right: 0px;
    }

.backdrop {
    background-color: #00000050;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    opacity: 0;
    transition: all ease-in-out 0.3s;
    pointer-events: none;
}

    .backdrop.show {
        pointer-events: initial;
        opacity: 1;
    }

.options > div {
    border-radius: 5px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
}

    .options > div.active {
        background-color: var(--my_green);
        color: white;
    }

.custom_dropdown {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    background-color: white;
    border-radius: 5px;
    border: 2px solid var(--yellow);
    padding: 0px;
    max-height: 0px;
    overflow-y: scroll;
    z-index: 20;
    opacity: 0;
}

    .custom_dropdown.show {
        max-height: 300px;
        padding: 0px;
        opacity: 1;
    }

    .custom_dropdown > .drop_item {
        padding: 10px 20px;
        color: black;
        border-bottom: 1px solid #00000030;
        cursor: pointer;
    }

.custom_search_input > input {
    background-color: transparent;
    display: block;
    border: none;
    width: 100%;
    max-width: 100%;
}

.custom_search_input_drop > input {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 10px 20px;
}

.form-control, .form-select {
    border-radius: 5px !important;
}

/*thead {
    background-color: var(--my_blue) !important;
    color: white !important;
}*/

thead.simple {
    background-color: transparent !important;
    color: #222222 !important;
}

.white_bg {
    border-radius: 5px;
}

@keyframes bg_pop {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.white_bg.pop_card {
    opacity: 0;
}

.white_bg.pop_card {
    animation: 0.5s ease-in-out 0s 1 bg_pop forwards;
}

.search_option_container {
    position: relative;
}

    .search_option_container > .optionblock {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 0px;
        overflow-y: scroll;
        box-shadow: 0px 0px 10px #00000030;
        padding: 0px;
        border-radius: 10px;
        background-color: white;
    }

        .search_option_container > .optionblock.show {
            max-height: 300px;
            padding: 10px;
        }

.optionblock > .option_item {
    padding: 5px 10px;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
}

    .optionblock > .option_item.active {
        padding: 5px 10px;
        cursor: pointer;
        background-color: var(--my_green);
        color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #00000050;
    }

.single_line {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.printloader {
    background-color: rgb(0 0 0 / 0.41);
    position: fixed;
    z-index: 999999999999999999999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    display: none;
    pointer-events: none;
}

    .printloader.show {
        display: initial;
        pointer-events: initial;
    }

    .printloader > img {
        width: 150px;
        height: 150px;
        object-fit: contain;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.filterbtn {
    border-radius: 100px;
    padding: 10px;
    font-size: 14px;
    color: white;
    line-height: 14px;
    height: 34px;
    cursor: pointer;
    width: 34px;
    line-height: 14px;
    background-color: var(--my_orange);
    box-shadow: 0px 0px 10px #00000030;
}

.opbtn {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px #00000030;
    cursor: pointer;
    border: 1px solid #00000010;
    transition: all ease-in-out 0.2s;
}

    .opbtn.active {
        background-color: var(--my_blue);
        color: white;
    }

        .opbtn.active.deactive {
            background-color: transparent !important;
            color: black !important;
            padding: 0 !important;
            box-shadow: none !important;
            border: none !important;
        }

    .opbtn.deactive {
        display: none !important;
    }

.bread {
    display: inline-block;
}

    .bread > div {
        cursor: pointer;
        transition: all ease-in-out 0.2s;
        font-weight: bold;
    }


#pageloader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #00000080;
    z-index: 9999999999999999;
    display: none;
    pointer-events: none;
}

    #pageloader.show {
        display: block;
        pointer-events: initial;
    }

    #pageloader > img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        transform: translate(-50%, -50%);
    }

@keyframes slideup {
    0% {
        transform: translateY(0%);
        box-shadow: none;
    }

    50% {
        box-shadow: 0px 0px 20px #00000030;
    }

    100% {
        transform: translateY(calc(-100% - 5px));
        box-shadow: none;
    }
}

@keyframes slidedown {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(calc(100% + 5px));
    }
}

#backtolistbtn {
    border-radius: 5px;
    display: inline-block;
    font-size: 12px;
    background-color: var(--my_blue);
    padding: 3px 10px;
    color: white;
    position: absolute;
    top: 50px;
    cursor: pointer;
    right: 10px;
}

.counter {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--my_green);
    color: white;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
}

    .counter > i {
        pointer-events: none;
    }

.counter-input {
    width: 100px !important;
    display: inline-block !important;
    text-align: center !important;
}

    .counter-input::-webkit-outer-spin-button,
    .counter-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .counter-input[type=number] {
        -moz-appearance: textfield;
    }

.sorticon {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 12px;
}

th {
    cursor: pointer;
}

.exportitem {
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
}

    .exportitem.active {
        background-color: var(--my_blue);
        color: white;
        margin-bottom: 20px;
    }

.mastertab.active {
    background-color: var(--my_green);
    color: white;
}

.customoptionitem {
    border-radius: 5px;
}

    .customoptionitem.active {
        background-color: var(--my_green);
        color: white;
    }

.docblock {
    border-radius: 5px;
    padding: 15px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
}

.customtoggle {
    width: 80px !important;
    height: 30px !important;
    border: 2px solid var(--my_gray);
    border-radius: 100px;
    box-shadow: var(--my_shadow);
    position: relative;
    background-color: white;
}

    .customtoggle.small {
        transform: scale(0.7);
        transform-origin: left;
    }

    .customtoggle.text::before {
        content: attr(data-neg);
        position: absolute;
        font-size: 14px;
        font-weight: bold;
        right: 10px;
        top: 50%;
        line-height: 14px;
        transform: translateY(-50%);
    }

    .customtoggle.text.active::before {
        right: auto;
        left: 10px;
        line-height: 14px;
        content: attr(data-pos);
        color: var(--my_green);
    }

    .customtoggle::after {
        content: " ";
        width: 22px;
        height: 22px;
        background-color: var(--my_grey);
        border-radius: 50%;
        display: block;
        position: absolute;
        top: 50%;
        pointer-events: none;
        left: 3px;
        transform: translateY(-50%);
        transition: all ease-in-out 0.3s;
    }

    .customtoggle.active {
        border: 2px solid var(--my_green);
    }

        .customtoggle.active::after {
            left: auto;
            right: 3px;
            background-color: var(--my_green);
        }

#alertblock {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 5px;
    background-color: white;
    width: 350px;
    padding: 10px;
    transition: all ease-in-out 0.3s;
    transform: translateX(calc(100% + 20px));
}

    #alertblock.show {
        transform: translateX(0px);
    }

.remindbold {
    font-weight: bold;
}


.mastermenuitem {
    padding: 10px;
    margin-bottom: 10px;
    transition: all ease-in-out 0.3s;
    cursor: pointer;
    border-radius: 5px;
}

    .mastermenuitem.active {
        background-color: var(--my_green);
        color: white;
        font-weight: bold;
        box-shadow: var(--my_shadow);
    }

.context_menu {
    position: absolute;
    top: 100%;
    border: 1px solid var(--my_gray);
    right: 100%;
    border-radius: 5px;
    background-color: white;
    padding: 10px;
    box-shadow: var(--my_shadow);
    transform: scale(0);
    pointer-events: none;
    transition: all ease-in-out 0.3s;
    transform-origin: right top;
}

    .context_menu.show {
        transform: scale(1);
        pointer-events: initial;
    }

    .context_menu > .context_item {
        padding: 5px 0px;
        cursor: pointer;
        border-bottom: 1px solid var(--my_gray);
        font-size: 12px;
    }

        .context_menu > .context_item:last-child {
            border-bottom: none;
        }

.hideclass {
    display: none !important;
}

.approval_header {
    border-radius: 5px;
    padding: 5px 10px;
    border: 1px solid var(--my_gray);
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}

    .approval_header.active {
        background-color: var(--my_green);
        color: white;
    }

    .approval_header > div {
        display: inline-block;
        pointer-events: none;
    }

    .approval_header > .title {
        margin-right: 5px;
        padding-right: 5px;
        border-right: 1px solid var(--my_gray);
    }

    .approval_header > .count {
        font-weight: bold;
    }

.approval_stage {
    border-radius: 100px;
    padding: 5px 10px;
    border: 1px solid var(--my_gray);
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    margin-top: 10px;
    background-color: gainsboro;
    color: #bbb;
}

    .approval_stage.selected {
        background-color: var(--my_blue);
        color: white;
        cursor: pointer;
    }

    .approval_stage.active {
        background-color: var(--my_red);
        color: white;
    }

    .approval_stage > div {
        display: inline-block;
        pointer-events: none;
    }

    .approval_stage > .title {
        margin-right: 5px;
        padding-right: 5px;
        border-right: 1px solid var(--my_gray);
    }

    .approval_stage > .count {
        font-weight: bold;
    }

@keyframes popanim {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

.my_table_row {
    /*opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    animation: 250ms ease-in-out 0s 1 popanim forwards;*/
}

    .my_table_row:nth-child(1) {
        animation-delay: 0.05s;
    }

    .my_table_row:nth-child(2) {
        animation-delay: 0.1s;
    }

    .my_table_row:nth-child(3) {
        animation-delay: 0.15s;
    }

    .my_table_row:nth-child(4) {
        animation-delay: 0.2s;
    }

    .my_table_row:nth-child(5) {
        animation-delay: 0.25s;
    }

    .my_table_row:nth-child(6) {
        animation-delay: 0.3s;
    }

    .my_table_row:nth-child(7) {
        animation-delay: 0.35s;
    }

    .my_table_row:nth-child(8) {
        animation-delay: 0.4s;
    }

    .my_table_row:nth-child(9) {
        animation-delay: 0.45s;
    }

    .my_table_row:nth-child(10) {
        animation-delay: 0.5s;
    }

    .my_table_row:nth-child(11) {
        animation-delay: 0.55s;
    }

    .my_table_row:nth-child(12) {
        animation-delay: 0.6s;
    }

    .my_table_row:nth-child(13) {
        animation-delay: 0.65s;
    }

table > thead > tr > th {
    white-space: nowrap !important;
}

/*table > tbody > tr > td {
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow-x: hidden;
    display: inline-block;
}*/

.tablethin > thead, tbody > tr > td, th {
    /*padding:5px 5px !important;*/
}

@keyframes task_board_appear {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.board_col {
    animation: 0.3s ease-in-out 0s 1 task_board_appear forwards;
    opacity: 0;
}

    .board_col:nth-child(2) {
        animation-delay: 0.1s;
    }

    .board_col:nth-child(3) {
        animation-delay: 0.2s;
    }

    .board_col:nth-child(4) {
        animation-delay: 0.3s;
    }

    .board_col:nth-child(5) {
        animation-delay: 0.4s;
    }

    .board_col:nth-child(6) {
        animation-delay: 0.5s;
    }

.thinhead > tr > th {
    padding: 5px !important;
}

.unidoccard {
    background-color: white;
    position: relative;
    border-radius: 5px;
    padding: 10px 20px 10px 10px;
    margin-right: 20px;
    display: inline-block;
}

    .unidoccard > .delbtn {
        background-color: var(--my_red);
        padding: 5px;
        border-radius: 100px;
        font-size: 12px;
        line-height: 12px;
        width: 22px;
        height: 22px;
        color: white;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: -10px;
    }

    .unidoccard > .editbtn {
        background-color: var(--my_blue);
        padding: 5px;
        border-radius: 100px;
        font-size: 12px;
        line-height: 12px;
        width: 22px;
        height: 22px;
        color: white;
        position: absolute;
        top: 0;
        right: 30px;
        margin-top: -10px;
    }

.small_scroll {
    overflow-x: scroll;
}

    .small_scroll::-webkit-scrollbar {
        display: none;
    }


#waitloader {
    position: fixed;
    z-index: 9999999999;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: none;
    background-color: #0000006d;
}

    #waitloader.show {
        display: block;
    }

    #waitloader > img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        transform: translate(-50%, -50%);
    }

    #waitloader > div {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: 100px;
        transform: translate(-50%, -50%);
    }

.topusercol {
    position: relative;
}

    .topusercol > i {
        transition: all ease-in-out 0.2s;
    }

    .topusercol.active > i {
        transform: rotate(180deg);
    }

    .topusercol > .submenu {
        position: absolute;
        top: 40px;
        right: 20px;
        border: 1px solid #00000030;
        z-index: 9999999999;
        display: none;
    }

    .topusercol.active > .submenu {
        display: block;
    }

.icon_btn {
    font-size: 12px;
    color: white;
    border-radius: 100px;
    width: 22px;
    height: 22px;
    padding: 5px;
    cursor: pointer;
}

.tabbtn {
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    border: 1px solid var(--my_grey);
    transition: all ease-in-out 0.2s;
    cursor: pointer;
}

    .tabbtn.active {
        background-color: var(--my_green);
        color: white;
        box-shadow: 0px 0px 10px #00000030;
    }



.animcard {
    opacity: 0;
    animation: 0.3s ease-in-out 0s 1 bg_pop forwards;
}

    .animcard:nth-child(1) {
        animation-delay: 0.1s;
    }

    .animcard:nth-child(2) {
        animation-delay: 0.2s;
    }

    .animcard:nth-child(3) {
        animation-delay: 0.3s;
    }

    .animcard:nth-child(4) {
        animation-delay: 0.4s;
    }

    .animcard:nth-child(5) {
        animation-delay: 0.5s;
    }

    .animcard:nth-child(6) {
        animation-delay: 0.6s;
    }

    .animcard:nth-child(7) {
        animation-delay: 0.7s;
    }

    .animcard:nth-child(8) {
        animation-delay: 0.8s;
    }

    .animcard:nth-child(9) {
        animation-delay: 0.9s;
    }

    .animcard:nth-child(10) {
        animation-delay: 1s;
    }

    .animcard:nth-child(11) {
        animation-delay: 1.1s;
    }

.error_highlight {
    box-shadow: 0px 0px 5px red !important;
}

#float_menu {
    position: fixed;
    z-index: 100;
    top: 300px;
    left: 70px;
    padding: 10px;
    border-radius: 10px;
}

.modal-fullscreen {
    border-radius: 10px;
    overflow: hidden;
}

.loader {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.l, .l:nth-child(9) {
    margin: 0.15em;
    border-radius: 5em;
    width: 0.4em;
    background-color: #f12711;
    height: 3em;
    box-shadow: 1px 1px 4px black;
    animation: load_5186 cubic-bezier(.41,.44,.72,.69) 2s infinite;
}

    .l:nth-child(2),
    .l:nth-child(8) {
        background-color: #f24e13;
        animation-delay: .25s;
    }

    .l:nth-child(3),
    .l:nth-child(7) {
        background-color: #f36915;
        animation-delay: .5s;
    }

    .l:nth-child(4),
    .l:nth-child(6) {
        background-color: #f48c17;
        animation-delay: .75s;
    }

    .l:nth-child(5) {
        background-color: #f5af19;
        animation-delay: 1s;
    }

@keyframes load_5186 {
    0% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(-1);
    }
}

.myscrollebar::-webkit-scrollbar {
    height: 10px;
    border-radius: 100px;
}

.myscrollebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 100px;
}

.myscrollebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px;
}

    .myscrollebar::-webkit-scrollbar-thumb:hover {
        background: #555;
    }



::-webkit-scrollbar {
    height: 10px;
    border-radius: 100px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.onlytext {
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    padding-inline: 0px !important;
    pointer-events: none !important;
    background-image: none !important;
}

.rot {
    transform: rotate(180deg) !important;
}

/*input[type="date"]{
    opacity:0;
}*/

.date_overlay {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 5px;
    cursor: pointer;
}

.warn {
    box-shadow: 0px 0px 10px var(--my_red);
}


.actionbtn {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #5e53ee;
    transition: all ease-in-out 0.2s;
    color: #5e53ee;
}

    .actionbtn:hover {
        background-color: #5e53ee;
        color: white;
    }

    .actionbtn.active {
        background-color: #5e53ee;
        color: white;
    }

        .actionbtn.active.deactive {
            background-color: transparent !important;
            color: black !important;
            padding: 0 !important;
            box-shadow: none !important;
            border: none !important;
        }

    .actionbtn.deactive {
        display: none !important;
    }

    .actionbtn.blue {
        color: #5e53ee;
        background-color: white;
        border: 1px solid #5e53ee;
    }

        .actionbtn.blue:hover {
            background-color: #5e53ee;
            color: white;
        }

        .actionbtn.blue.active {
            background-color: #5e53ee;
            color: white;
        }


    .actionbtn.red {
        color: red;
        background-color: white;
        border: 1px solid red;
    }

        .actionbtn.red:hover {
            background-color: red;
            color: white;
        }
        .actionbtn.red.active {
            background-color: red;
            color: white;
        }
    .actionbtn.green {
        color: green;
        background-color: white;
        border: 1px solid green;
    }

        .actionbtn.green:hover {
            background-color: green;
            color: white;
        }

        .actionbtn.green.active {
            background-color: green;
            color: white;
        }
    .actionbtn.gray {
        color: gray;
        background-color: white;
        border: 1px solid gray;
    }

        .actionbtn.gray:hover {
            background-color: gray;
            color: white;
        }

        .actionbtn.gray.active {
            background-color: gray;
            color: white;
        }
h4.blue {
    color: #5e53ee;
}