.bokningar-table {
    width: 100%;
    margin:    0;
    min-width: 300px;
    table-layout: fixed;
    border-spacing: 2px;
    border-collapse: collapse;
}

.bokningar-table td {
    display: block;
    vertical-align: bottom;
}

.result-mark {
    font-size: 1.8em;
    padding: 2px;
    border: 1px solid white;
    background: #377731;
    border-radius: 4px;
}

.bokningar-table td:first-child {
    font-weight: bold;
}
.bokningar-table th {
    display: none;
}

.bokningar-table td:before {
    content:     attr(data-th) ": ";
    font-weight: bold;
    width:       3.5em;
    display:     inline-block;
    text-align:  left;
}

.bokningar-table td:first-child:before {
    content: attr(data-th) "";
    width:   6.5em;
    display: inline-block;
}

.bokningar-table tr {
    border-top: 1px solid rgba(16, 124, 36, 1);
}

@media (min-width: 480px) {
    .bokningar-table td:first-child:before {
        width:   50px;
    }
    .bokningar-table td:before {
        display: none;
    }
    .bokningar-table td:nth-child(1) {
    }
    .bokningar-table th:nth-child(1) {
        visibility: hidden;
    }
    .guest-cell {
        border-right: 1px solid white;
    }
    #bokningarWrapper {
        width: 90%;
    }
    .bokningar-table th,
    .bokningar-table td {
        display:     table-cell;
        padding:     0 .5em 7px .5em !important;
        line-height: 15px;
    }
    .bokningar-table th:first-child,
    .bokningar-table td:first-child {
        padding-left: 0;
        width:       20px;
    }
    .bokningar-table th:last-child,
    .bokningar-table td:last-child {
        padding-right: 0;
    }
}

.bokningar-table {
    color: white;
    background-color: rgba(11, 84, 24, 1);
}

.bokningar-table th,
.bokningar-table td:before {
    color: #dd5;
}

.tidvaljare {
    text-align:    left;
    margin-bottom: 0;
}

.tidvaljare label {
    background-color: rgba(11, 84, 24, 0.8);
    border-color:     rgba(11, 84, 24, 0.8) transparent transparent;
    border-width:     2px;
    border-style:     solid;
    display:   inline-block;
    padding:   4px 11px;
    font-size: medium;
    cursor:    pointer;
}
.tidvaljare input[type="radio"]:checked+label {
    background-color: rgba(11, 84, 24, 1);
    border-bottom:    2px solid red;
}

.tidvaljare input[type="radio"] {
    display: none;
}

.bokningar-table .button {
    border-radius: 4px;
    text-shadow:   0 1px 1px rgba(0, 0, 0, 0.2);
    width:         50px;
    text-align:    center;
    font-size:     small;
    padding:       3px;
    cursor:        pointer;
}

.avboka {
    background-color: darkorange;
}

#participantsDataTable .avboka,.boka {
    border-radius: 4px;
    text-shadow:   0 1px 1px rgba(0, 0, 0, 0.2);
    width:         50px;
    text-align:    center;
    font-size:     small;
    padding:       6px;
    cursor:        pointer;
}

.boka {
    background-color: #83AB38;
}

.popup {
    position:   fixed;
    display:    none;
    z-index:    5000;
    height:     100%;
    width:      100%;
    left:       0;
    top:        0;
}

.popup > div {
    border-radius:     10px;
    position:          fixed;
    padding:           30px 15px;
    width:             75%;
    max-width:         80vw;
    z-index:           5001;
    -moz-transform:    translate(-50%, -50%);
    -ms-transform:     translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform:         translate(-50%, -50%);
    left:              50%;
    top:               50%;
    text-align:        center;

    background: #FFFFFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
    border:     5px solid rgba(0, 0, 0, 0.3);
}

.select-player-table {
    font-size: large;
}

@media all and (max-width: 500px) {
    .popup > div {
        width: 85%;
    }
    .select-player-hcp {
        min-width:  5vmin;
        min-height: 5vmin;
        font-size: large;
    }
    .select-player-hcp-button {
        width: 4em;
        height: 2em;
        margin: 0.3em;
    }
    .select-player-table {
        padding-bottom: 1em;
    }
    .select-player-header {
        font-size: x-large;
    }
    .select-player-table th {
        font-size: larger;
    }
}

.popup .button {
    height:       37px;
    width:        25vmin;
    margin-right: 15px;
    font-family:  inherit;
    font-size:    100%;
    padding:      9px;
}

.select-player-hcp {
    float: left;
    height: 2em;
    line-height: 2em;
}

.select-player-hcp-button {
    float: right;
    width: 3em;
}

.guestPlayer {
    font-style: italic;
}

.guestPlayer::before {
    content: "+";
}

#bokningarWrapper img {
    width: 50%;
}
@media all and (max-width: 500px) {
    #bokningarWrapper h1 {
        font-size: 1.5em;
    }
}
@media all and (min-width: 500px) {
    #bokningarWrapper img {
        width: 30%;
        float: right;
    }
}