@layer legacy, plugins, utils;

:root {
    --talentpay-primary: #282364;
    --talentpay-calendar-hover: #5b73e826;
    --pdy-sidenav-width: 290px;
}

@layer legacy {
    .vertical-menu {
        top: 32px;
        width: var(--pdy-sidenav-width);
    }

    #page-topbar {
        top: 32px;
        Left: var(--pdy-sidenav-width);
    }

    .footer {
        Left: var(--pdy-sidenav-width);
    }

    @media (max-width: 991.98px) {
        #page-topbar {
            left: 0;
        }
    }

    .main-content {
        margin-left: var(--pdy-sidenav-width);
    }

    .theme-colors {
        display: none !important;
    }
    /* BOOTSTRAP OVERRIDE */
    .btn-dtr {
        height: 29px;
        min-width: 55px;
    }
    /* PAGINATION */
    .pdy-pagination .pagination {
        margin: 0;
    }

    .pdy-pagination .page_active.page-link,
    .pdy-pagination .page-link {
        color: #000;
        background-color: rgba(91,115,232,.10);
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        padding: .47rem .75rem;
        font-size: .9rem;
        border-radius: 0;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    }

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

    .pdy-pagination .page_active.page-link {
        background-color: rgba(91,115,232,.25);
    }
    /* CALENDAR */
    #clndrEmpShiftSchedule,
    #clndrShiftSchedule {
        margin: 0px auto;
        width: 100%;
        margin-bottom: 30px;
        border: 1px solid #1570a6;
    }


        #clndrEmpShiftSchedule tr:nth-child(1) td,
        #clndrShiftSchedule tr:nth-child(1) td {
            background: #0087ea !important;
            color: #fff !important;
            font-size: 15px;
            padding: 5px;
            width: auto !important;
            height: auto !important;
            text-align: center;
        }

        #clndrEmpShiftSchedule tr:nth-child(2) td,
        #clndrShiftSchedule tr:nth-child(2) td {
            width: auto !important;
            height: auto !important;
        }

        #clndrEmpShiftSchedule tr:nth-child(1) td a,
        #clndrShiftSchedule tr:nth-child(1) td a {
            color: #fff !important;
            font-size: 20px;
            padding: 10px;
            text-decoration: none;
        }

            #clndrEmpShiftSchedule tr:nth-child(1) td a:hover,
            #clndrShiftSchedule tr:nth-child(1) td a:hover {
                color: #12618f !important;
            }


        #clndrEmpShiftSchedule tr td,
        #clndrShiftSchedule tr td {
            /*width:0px !important;*/
            height: 80px;
            border-top: 1px solid #0087ea;
            border-right: 1px solid #0087ea;
            text-align: right;
            vertical-align: top;
            font-weight: bold;
        }

            #clndrEmpShiftSchedule tr td:last-child,
            #clndrShiftSchedule tr td:last-child {
                border-right: none !important;
            }

            #clndrEmpShiftSchedule tr td p,
            #clndrShiftSchedule tr td p {
                text-align: center;
                font-weight: normal;
            }

    #PnlClient .col-form-label,
    #pnlProfile .col-form-label {
        font-weight: 600;
    }
    /*DATE PICKER*/
    .bootstrap-timepicker table td a {
        color: #333;
        background-color: rgba(91,115,232,.10);
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        padding: 0 !important;
        font-size: .9rem;
        border-radius: 0;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    }

        .bootstrap-timepicker table td a i.iconsminds-arrow-up:before,
        .bootstrap-timepicker table td a i.iconsminds-arrow-down:before {
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
            font-size: 24px;
            line-height: 1;
            font-size: inherit;
            text-rendering: auto;
            line-height: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .bootstrap-timepicker table td a i.iconsminds-arrow-up:before {
            content: "\f005d";
        }

        .bootstrap-timepicker table td a i.iconsminds-arrow-down:before {
            content: "\f0045";
        }

    .bootstrap-timepicker table td input {
        color: var(--bs-body-color);
        background-color: var(--bs-input-bg);
        background-clip: padding-box;
        border: 1px solid var(--bs-input-border);
        min-width: 43px;
    }

    .staging-instance-banner {
        position: sticky;
        color: #fff;
        padding: 5px;
        width: 100%;
        text-align: center;
        top: 0;
        z-index: 9999;
    }
}

@layer plugins {
    .legends-container > div {
        cursor: unset !important;
    }
}

@layer utils {
    #sidebar-menu ul li a {
        padding-right: 5px !important;
        margin: 0 !important;
    }

    #leaveCalendar .fc-view-container {
        overflow: auto;
    }
    .fc-day-grid-event {
            cursor: pointer !important;
            transition: opacity .15s linear;
            &:hover {
                background-color: var(--talentpay-calendar-hover);
            }
    }
}