html {
    width: 100%;
}

body {
    overflow-x: hidden !important;
}

    body.show-spinner > main {
        overflow: hidden !important;
    }

    /* Hide everything under body tag */
    body.show-spinner > * {
        opacity: 0;
    }

    /* Spinner */
    body.show-spinner::after {
        content: " ";
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 2px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        border-top-color: rgba(0, 0, 0, 0.3);
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
        left: calc(50% - 15px);
        top: calc(50% - 15px);
        position: fixed;
        z-index: 1;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}


/*customization*/

@media (max-width:1439px) {
    .menu .sub-menu {
        /*width: 264px;*/
    }
}


.no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}


.custom-field-holder {
    display: flex;
    align-items: flex-end;
}

.custom-field-holder.left {
   justify-content: flex-start;
}

.custom-field-holder.right {
   justify-content: flex-end;
}

.pagination .page-item .page-link {
    border: 1px solid #145388;

}

.pagination .page-item .page-link.page_active {
    background: #145388;
    color: #fff;
    border: 1px solid #145388;
}

.pagination .page-item.disabled .page-link {
    border: 1px solid #d7d7d7;
    color: #d7d7d7;

}


.w-120 {
    min-width: 120px;
}

.table-holder {
    overflow-y: auto;
    width: 100%;
}

.table tbody td a.btn {
    color: #fff !important;
}

.mini {
font-size: 12px;
padding: 4px 8px;
}

.mini.block {
display: block;
line-height: 10px;
width: 80px;
margin-bottom: 4px;
}

.alert.block {
display: block;
}

.bootstrap-timepicker input[type="text"] {
    font-size: .8rem;
    padding: .5rem .75rem;
    border: 1px solid #d7d7d7;
    height: calc(2em + .8rem);
    width: 48px;
}

input[type="text"].aspNetDisabled,
select.aspNetDisabled {
    padding: .5rem .75rem;
    border: 1px solid #d7d7d7;
    height: calc(2em + .8rem);
    width: 100%;

}


.table thead th {
color: #fff;
}

/*.table thead tr {
    background: #31859d !important;
}*/

.table-striped tbody tr:nth-of-type(2n+1) {
    background: #ddd !important;
}

.table tbody td {
    position: relative;
}

.table tbody td a {
    color: #145388 !important;
    /*position: relative;
    display: block;
    width: 100%;
    border: 1px solid;
    height: 53px;
    z-index: 999999 !important;
    background: red;*/
}

.table tbody td a span {
    color: #145388 !important;
}

.table tbody td a.inout {
/*border: none;
background: unset;*/
    
position: absolute;
display: block;
z-index: 9 !important;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.table tbody td a.inout > input {
/*position: absolute;
display: block;*/
z-index: 1 !important;


}


#clndrEmpShiftSchedule,
#clndrShiftSchedule {
margin:0px auto;
width:90%;
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;
}

.modal hr {
    border-top: 1px solid #145388 !important;
}


.theme-colors.default-transition {
    display: none;
}


.supervisor-holder  img {
    width: 40px;
    height: 40px;
    margin: 8px 8px 8px 0px;
}

.supervisor-holder span {
    margin-top: 12  px;
    display: block;
}

/*login*/
.fixed-background {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00488f+0,0079d3+100 */
    /*background: #00488f; 
background: -moz-linear-gradient(left,  #00488f 0%, #0079d3 100%); 
background: -webkit-linear-gradient(left,  #00488f 0%,#0079d3 100%); 
background: linear-gradient(to right,  #00488f 0%,#0079d3 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00488f', endColorstr='#0079d3',GradientType=1 );*/
    background: #EAE6E3 !important;
}

.my-custom-login .logo-holder {
}

.my-custom-login .logo-holder img {
    width: 170px;
}


.my-custom-login .auth-card .image-side,
.my-custom-login .card.auth-card {
    border-radius: 0px !important;
}

.my-custom-login .text-white {
    color: #fff;
}

.my-custom-login .text-white a  {
    text-decoration: underline;
}

/* login */

/*general*/

/* BOOTSTRAP BUTTON THEME OVERRIDE*/
:root {
    /* Main color for HRIS */
    /* primary button */
    --pdy-blue: #24397F;
    --pdy-blue-alt: #2D489F;
    /* secondary button */
    --pdy-purple: #3D5DC8;
    --pdy-purple-alt: #607BD2;
    /* success button */
    --pdy-green: #5ABB25;
    --pdy-green-alt: #6CD733;
    /* warning button */
    --pdy-orange: #D38E34;
    --pdy-orange-alt: #DAA258;
    /* error button */
    --pdy-red: #DB3D3D;
    --pdy-red-alt: #E36464;
}

.btn-primary {
    background-color: var(--pdy-blue);
    border-color: var(--pdy-blue);
}

    .btn-primary:hover {
        background-color: var(--pdy-blue-alt);
    }

.btn-secondary {
    background-color: var(--pdy-purple);
    border-color: var(--pdy-purple);
}

    .btn-secondary:hover {
        background-color: var(--pdy-purple-alt);
        border-color: var(--pdy-purple-alt);
    }

.btn-success {
    background-color: var(--pdy-green);
    border-color: var(--pdy-green);
}

    .btn-success:hover {
        background-color: var(--pdy-green-alt);
    }

.btn-warning {
    background-color: var(--pdy-purple);
    border-color: var(--pdy-purple);
}

    .btn-warning:hover {
        background-color: var(--pdy-purple-alt);
        border-color: var(--pdy-purple-alt);
    }

.btn-error {
    background-color: var(--pdy-red);
    border-color: var(--pdy-red);
}

.btn-error-alt {
    background-color: var(--pdy-red-alt);
}
/* BOOTSTRAP BUTTON COLOR OVERRIDE*/

/* NAVBAR */
.navbar-logo {
    height: 100%;
    width: 250px;
    background-size: 80%;
    /*background-color: white;*/
    background-blend-mode: multiply;
}

#app-container.menu-sub-hidden .menu-button .sub,
#app-container.sub-hidden .menu-button .sub,
.navbar .menu-button .main {
    fill: #3a3a3a;
}

.navbar .header-icon,
.navbar .user .name {
    fill: #3a3a3a;
}
/* NAVBAR */

/* CUSTOM LOGIN PAGE */
.my-custom-login {
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.auth-card .image-side {
    background-image: url(../img/login-left-side.png);
    background-color: rgba(7, 57, 208, 0.25);
    background-blend-mode: multiply;
    background-size: cover;
    padding: 0;
    border-radius: 0 !important;
    align-items: center;
    display: flex;
}

.auth-card .image-side .logo-side-container {
    background-color: #ffffffc2;
    background-size: 100%;
    height: 50%;
    width: 100%;
}

.auth-card .form-side {
    padding: 20px;
}

.auth-card .form-side .pdy-logo-square {
    background-image: url('../../dore/img/logo/pdy-logo.png');
    height: 100px;
    background-size: contain;
    background-position: center;
}

.pdy-logo {
    background-image: url('../../dore/img/logo/pdy-logo-full.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pdy-logo-square {
    background-image: url('../../dore/img/logo/pdy-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.login-img-container {
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: center;
}

.pdy-logo.logo-full {
    background-color: rgba(255, 255, 255, .85);
    background-position: center;
    background-size: 100%;
    height: 50%;
}

.fixed-background {
    background-color: #0f5798;
    background-image: none;
}

.auth-card .form-side form {
    padding: 20px 50px;
}

.auth-card {
    color: #a19797 !important;
}
/* CUSTOM LOGIN PAGE */

/* NAVBAR */
.pdy-navbar {
    background-color: #fff;
    padding: 0;
}

.navbar-logo-container {
    padding: 5px;
    height: 80%;
    width: 200px;
    /*background-color: white;*/
}

.navbar-logo {
    display: block;
    height: 100%;
    width: 100%;
    background-blend-mode: multiply;
}

#app-container.menu-sub-hidden .menu-button .sub,
#app-container.sub-hidden .menu-button .sub,
.navbar .menu-button .main {
    fill: #3a3a3a;
}

.navbar .header-icon,
.navbar .user .name {
    color: #3a3a3a;
}
/* NAVBAR */

/* CUSTOM-TABLE */
table.table-striped thead {
    background-color: var(--pdy-blue);
}

table.table-striped tr:nth-of-type(2n+1) {
    background: rgba(45, 72, 159, 0.15) !important;
}

table.table-striped tbody tr:hover {
    background: rgba(45, 72, 159, 0.25) !important;
}

table.table-striped tbody tr a {
    font-weight: bolder;
    padding: 5px 10px;
    transition: all ease-in-out 250ms !important;
}

    table.table-striped tbody tr a:hover {
        border-bottom: 1px solid var(--pdy-blue);
    }

table.table-striped tr .btn-action {
    border: 1px solid var(--pdy-blue);
    border-radius: 5px;
}

    table.table-striped .btn-action:hover {
        background-color: var(--pdy-blue-alt);
        border: 1px solid var(--pdy-blue-alt);
        color: #fff !important;
        border-radius: 5px;
    }


    /* btn-xs inside table*/
    table.table-striped .btn-xs {
        padding: 5px 10px;
    }

    table.table-striped .btn-secondary.btn-xs {
        background-color: var(--pdy-blue);
        border-color: var(--pdy-blue);
    }

        table.table-striped .btn-secondary.btn-xs:hover {
            background-color: var(--pdy-blue-alt);
            border-color: var(--pdy-blue-alt);
        }

    table.table-striped .btn-warning.btn-xs {
        background-color: var(--pdy-purple);
        border-color: var(--pdy-purple);
    }

        table.table-striped  .btn-warning.btn-xs:hover {
        background-color: var(--pdy-purple-alt);
        border-color: var(--pdy-purple-alt);
    }
    /* btn-xs inside table*/

.table-img {
    height: 45px;
    width: 45px;
    object-fit: contain;
    display: flex;
    margin: auto;
    border-radius: 100%;
}

.sort-by {
    position: relative;
    display: block;
}

    .sort-by:after {
        content: '\e850';
        font-family: "iconsminds";
        font-style: normal;
        font-weight: normal;
        right: 7px;
        position: absolute;
    }

    .sort-by:before {
        content: '\e889';
        font-family: "iconsminds";
        font-style: normal;
        font-weight: normal;
        right: 15px;
        position: absolute;
    }
/* CUSTOM-TABLE */

/*calenda legend*/
#clndrShiftSchedule {
    border-collapse: collapse;
    border-radius: 1em;
    overflow: hidden;
    background: #0087ea;
    margin: unset;
}

    #clndrShiftSchedule tr th,
    #clndrShiftSchedule tr td {
        background: white;
    }

.calendar-legend {
    border: 1px solid #0087ea;
    padding: 20px;
}

    .calendar-legend ul {
        list-style-type: none;
        padding: 0;
    }

        .calendar-legend ul li {
            display: flex;
            align-items: center;
            font-size: 1rem;
        }

        .calendar-legend ul .cl-marker {
            width: 90px;
            height: 25px;
            margin-right: 5px;
        }

.cl-absent {
    background: #ffb7b7 !important;
}

.cl-future {
    background: #ffffff !important;
}

.cl-marker.cl-holiday {
    background: #efb9ef;
}

.cl-leave {
    background: #00e133 !important;
}

.cl-marker.cl-unpaired {
    background: #f5c881;
}

.cl-no-shift-plotted {
    background: #ff4d4d !important;
}

/* START FIX FOR DROPDOWN */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    ul#AutoCompleteExtender1_completionListElem {
        top: 270px !important;
    }
}

@-moz-document url-prefix() {
    ul#AutoCompleteExtender1_completionListElem {
        top: 38.4px !important;
    }
}
/* END FIX FOR DROPDOWN */

/* CUSTOM-TABLE */
.overlay {
    position: fixed;
    z-index: 1050;
}


.payday-merchants a {
    background-image: url('../../dore/img/logo/payday-merchants.png');
    width: 250px;
    height: 165px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}