/* Yttre scrollområde */
.availability-scroll {
    width: 100%;
    max-width: 100%;
	margin: auto;

    max-height: calc(100vh - 160px);

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    position: relative;
}


/* Tabellen */
.availability-table {
    border-collapse: separate;
    border-spacing: 0;

    width: max-content;
    min-width: 100%;

    white-space: nowrap;
}


/* Alla celler */
.availability-table th,
.availability-table td {
    box-sizing: border-box;

    border-right: 1px solid #999;
    border-bottom: 1px solid #999;

    padding: 0;
    text-align: center;

    background: white;
}


/* ==================================================
   DATUMRUBRIKER
   ================================================== */

.availability-table thead th {
    position: sticky;
    top: 0;

    height: 120px;

    background: white;

    z-index: 5;
}


/* Datumkolumner */
.availability-table th.date-column {
    width: 36px;
    min-width: 36px;
    max-width: 36px;

    vertical-align: bottom;
}


/* Datumtext – läses nerifrån och upp */
.availability-table th.date-column span {
    display: inline-block;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    white-space: nowrap;

    padding: 6px 8px;

    font-weight: normal;
}


/* ==================================================
   NAMNKOLUMN
   ================================================== */

.availability-table .name-column {
    width: 180px;
    min-width: 180px;
    max-width: 180px;

    text-align: left;

    padding: 6px 10px;

    background: white;
}


/* Namnen följer med vid horisontell scroll */
.availability-table tbody td.name-column {
    position: sticky;
    left: 0;
    z-index: 10;
}


/*
 * Övre vänstra hörnet måste vara sticky
 * både horisontellt och vertikalt.
 */
.availability-table thead th.name-column {
    position: sticky;

    top: 0;
    left: 0;

    z-index: 20;

    background: white;
}

/* Setting colors on rows with active or passive players */
.availability-table tr.activePlayer td {
	background-color: #D8F5BF;
}
.availability-table tr.passivePlayer td {
	background-color: #FCE7B3;
}


/* ==================================================
   CHECKBOX-CELLER
   ================================================== */

.availability-table tbody td:not(.name-column) {
    width: 36px;
    min-width: 36px;
    max-width: 36px;

    height: 34px;
}


.availability-table input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0;

    cursor: pointer;
}


/* ==================================================
   HOVER PÅ DESKTOP
   ================================================== */

.availability-table tbody tr:hover td {
    background: #eee;
}

.availability-table tbody tr:hover td.name-column {
    background: #eee;
}


/* Sparstatus */
#saveStatus {
    min-height: 22px;
    margin-top: 8px;
}