.vacation-create-modal {
    position: relative;
    width: 1300px;
}

.vac-default-text-color,
#FilterCalculationForYear::placeholder {
    color: $main-text-color;
}

.vac-gray-bg-color {
    background-color: $disabled-header-field !important;
}

.vac-default-bg-element {
    background-color: $content-background-color !important;
}

.vac-filter-selectpicker .bootstrap-select .dropdown-toggle .filter-option {
    font-weight: 600;
}

.categorySelectPicker .dropdown-menu.inner {
    max-height: 350px;
}

.vac-font-label {
    font-weight: 500;
}

.vac-font-bold {
    font-weight: 600;
}

.vac-border-right-lightgray {
    border-right: thin solid lightgray;
}

.vac-caret {
    font-size: 12px;
    padding-bottom: 1px;
    padding-right: 10px;
}

.vac-table-input {
    border: none;
    outline: none;
    text-align: right;
    width: 100%;
}

//Vacation details
.vacation-details-modal {
    position: relative;
    width: 1100px;
}

.table-vacation {
    background-color: $disabled-header-field;
}

.table-vacation th {
    border-top: 2px solid lightgray !important;
    border-bottom: 2px solid lightgray !important;
}

.table-vacation tbody {
    border-left: none;
    border-right: none;
}

.table-vacation tr td:first-child {
    border-right: thin solid lightgray;
}

.table-vacation td {
    border-bottom: thin solid lightgray;
}

.table-vacation-no-border tr td:first-child {
    border-right: none;
}

// Vacation create filter
.vac-status-dropdown {
    margin-right: 15px;
}

#vacation-create-filter-table {
    width: 100%;
}

#vacation-create-filter-table td {
    border: 1.5px solid $table-border-color;
    border-top: 2px solid $table-border-color;
    border-bottom: 2px solid $table-border-color;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#vacation-create-filter-table #sh-dropdown-menu {
    height: 100%;
    padding-top: 20px;
    border-top: 1.5px solid $table-border-color;
    border-right: 1.5px solid $table-border-color;
    border-bottom: 1.5px solid $table-border-color;
}

#vacation-create-filter-table #sh-dropdown-menu > a {
    background-color: transparent;
}

.vac-filter-width {
    width: 15%;
}

.vac-filter-max-width {
    min-width: 140px;
    max-width: 140px;
}

.vac-filter-option .filter-option-inner-inner {
    max-width: 80%;
}

// Vacations
.vacations {
    width: 100%;
    height: calc(96vh - 150px);
    overflow-y: scroll;
    overflow-x: hidden;
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.vacations-table th {
    background-color: $content-background-color !important;
}

.vacation-round-border {
    border-radius: 10px;
    border: 1px solid lightgray;
    width: 120px;
    margin: auto;
}

#worker-vacations {
    width: calc(100% - 30px) !important;
    margin: 8px 15px;
}

#worker-vacations tbody,
#worker-vacations tr {
    width: 100% !important;
}

.vacation-worker-img {
    width: 6%;
}

.vacation-worker-name{
    padding-left: 10px;
}

.td-padding-left-vac {
    padding-left: 10px;
}

.vac-worker-status-div {
    display: flex;
    padding-top: 6px;
}

@media only screen and (min-width: 991px) and (max-width: 1300px) {
    .vacation-create-modal {
        width: auto;
    }

    .vacation-details-modal {
        width: auto;
    }
}

// Tablet and mobile
@media only screen and (max-width: $max-screen-sm) {
    .vacations {
        height: calc(96vh - 286px) !important;
    }

    .vacation-create-modal {
        width: auto;
    }

    .vacation-details-modal {
        width: auto;
    }

    // Vacation create filter
    .vac-status-dropdown {
        margin-right: 0;
    }

    #vacation-create-filter-table table,
    #vacation-create-filter-table tbody,
    #vacation-create-filter-table td,
    #vacation-create-filter-table tr {
        display: block;
    }

    #vacation-create-filter-table tr{
        margin-bottom: 0;
    }

    #vacation-create-filter-table td:not(:first-child) {
        border-top: none;
    }

    #vacation-create-filter-table #sh-dropdown-menu {
        height: 68px;
        border-right: 1.5px solid #ddd;
    }

    #vacation-create-filter-table .sh-dropdown-position {
        right: 0;
        top: 20px;
    }

    .vac-filter-width {
        width: auto;
    }

    .vacation-round-border {
        margin: 0;
    }

    .vac-filter-max-width {
        max-width: 766px;
    }
}

//Mobile
@media only screen and (max-width: 580px) {
    .vacations {
        height: calc(96vh - 400px) !important;
    }

    .vacation-create-modal {
        width: auto;
    }

    .vacation-details-modal {
        width: auto;
    }

    .vac-filter-width {
        width: auto;
    }

    //Mobile vacations
    .vac-year-text {
        text-align: right !important;
    }

    .vacation-table table,
    .vacation-table thead,
    .vacation-table tbody,
    .vacation-table th,
    .vacation-table tr,
    .vacation-table td:not(.td-education-align) {
        display: block;
    }

    .vacation-table tr {
        border: 1px solid #eee;
    }

    .vacation-table td:not(.td-education-align) {
        border: none;
        position: relative;
        white-space: normal;
        text-align: left;
        width: 100% !important;
    }

    .vacation-table td.td-education-align {
        border: none;
    }

    .td-padding-left-vac {
        padding-left: 0px;
    }
 
    #worker-vacations table,
    #worker-vacations thead,
    #worker-vacations tbody,
    #worker-vacations th,
    #worker-vacations td,
    #worker-vacations tr {
        display: block;
    }
 
    #worker-vacations thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #worker-vacations tr {
        border: 1px solid #ccc;
    }

    #worker-vacations td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

    #worker-vacations td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    #worker-vacations td:before {
        content: attr(data-title);
    }

    .vacation-round-border {
        margin: 0;
    }

    .vac-filter-max-width {
        max-width: 558px;
    }
}

@media only screen and (max-width: 320px) {
    .vac-filter-max-width {
        max-width: 298px;
    }
}