@import "../../../assets/css/abstracts/custom-variables.scss";



// Who's out today full day badge styling
.badge-custom-whos-out {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid $gray-300;
    margin-left: 0.25rem;
}


// Holiday groups tree
.tree-box-hp {
    overflow: auto;
    width: 100%
}
.tree-box-hp table {
    width: 100%;
}
.tree-box-hp .standartTreeImage {
    width: 20px;
}
.tree-box-hp table td {
    padding: 0;
}


// Holiday details table
.hp-string .holiday-user-cell {
    padding: 2px 0;
}

.hp-string .theading td {
    border-top: 1px solid $gray-500;
    background: $gray-100;
    padding: 3px 5px;
    text-align: left;
}

.hp-string td:first-child {
    text-indent: 4px;
    text-align: left;
}

.hp-string > tbody > tr > td {
    padding: 0;
    text-align: center;
}

.hp-string tr.boxes-row {
    display: none;
}

.hp-string .num-row td {
    background: $gray-200;
    padding: 4px;
}

.hp-string col.day-num-col {
    width: 26px;
}

.hp-string td.hover {
    background-color: $gray-400;
}


// My holidays year toggle buttons
.hp-current-year, .year-text {
    margin: 0 0.25rem;
    padding: 0 0.25rem;
}

.hp-current-year {
    font-weight: bold;
    color: $gray-800;
}

.year-text {
    color: $gray-600;
}

.year-chevron {
    color: $gray-400;
}




// My holidays mini months
.calendar-month {
    width: 163px;
    height: 200px !important;
    float: left;
    text-align: center;
    margin: 10px;
    zoom: 1;
}

.calendar-day-wrapper {
    float: left;
}
.calendar-day-wrapper .calendar-day {
    margin: 0 1px 1px 0;
}
.hp-day-type {
    width: 250px;
    float: left;
    padding: 4px;
}
.calendar-day {
    display: inline-block;
    border: 11px solid #fff;
    width: 22px !important;
    height: 22px !important;
    line-height: 24px;
    position: relative;
    vertical-align: middle;
}
.calendar-day .calendar-day-val {
    position: absolute;
    top: 	-12px;
    left: 	-12px;
    right: 	-12px;
    text-align: center;
}
.calendar-month .hpl-div-cleared {
    width: 0 !important;
    height: 0 !important;
    margin: 0;
}

.holidays-month {
    font-weight: bold;
    display:block;
    clear: both;
    padding-bottom: 5px;
}


.hp-day-wrapper {
    min-width: 22px;
    min-height: 20px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
    background-position: center;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* combined date picker for my team diagram */
.diagram-picker input {
    display: inline-block;
}

.dropdown-menu .diagram-month.active > a:hover {
    background-color: $gray-700;
}

/* show date when hovering over each month */
.calendar-month .original-date,
.calendar-month:hover .obscur {
    display: none;
}

.calendar-month:hover .original-date {
    display: inline;
}



// Holiday request status badges
.hp-status-0,.hp-status-4, .hp-status-1 {
    color: #fff;
}

// Declined/Cancelled statuses
.hp-status-0,
.hp-status-4 {
    background: $red-600;
}

// Approved status
.hp-status-1 {
    background: $green-600;
}

// Requested status
.hp-status-2 {
    background: $gray-200;
    color: $gray-700;
}

// Cancellation request status
.hp-status-3 {
    background: $yellow-500;
    color: $gray-900;
}





.approved-day {
    font-weight: bold;
}

.declined-day1 {
    font-weight: bold;
    color: $red-700;
}

.requested-day1 {
    font-weight: bold;
    color: black;
}

.set-action {
    color: $blue-600;
    cursor: pointer;

    &:hover {
        color: $blue-700;
        cursor: pointer;
    }
}

.group-separator {
    background-color: $gray-200;
}

.group-separator td {
    text-align: left;
    padding: 3px 3px 3px 15px;
}

.holiday-planner .wrapper {
    border: none;
}

.label-info-dark {
    background-color: $blue-600;
}

@media only screen and (min-width : 1024px) {
    .holidays-panel {
        min-height: 290px;
    }
}

.holiday-text-link {
    text-decoration: underline;
}

/* Workaround BT19037 for iPhone bug */

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {

    .half-day-notification {
        display: none;
    }

}

.date-picker-to {
    display: inline-block;
    vertical-align: top;
    margin: 7px 0;
}



// Print styling
@media print {
    h2 {
        font-size: 2.8em;
    }
    .holiday-planner {
        font-size: 1em;
    }
    .calendar-month {
        margin: 3px;
    }
}
