@media print {

    #carambol-scoresheet-page-1 {
        padding: 5mm;
    }

    #carambol-scoresheet-container {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        padding: 0;
    }

    login-dialog, player-dialog, matchslip-dialog, keypad-dialog, modal-dialog, .modal,
    #team-table-container,
    #player-home-table-container,
    #player-guest-table-container,
    #match-table-container,
    #carambol-scoresheet-toolbar,
    #carambol-scoresheet-sidebar,
    #placeholder-container,
    pool-scoresheet table.pool-scoresheet .scoreboard,
    #pool-scoresheet-sidebar,
    .clubcloud-link {
        display: none !important;
    }

    /* second page */
    .print-matchslip {
        padding-left: 25px;
    }

    .print-matchslip matchslip {
        display: block;
        overflow: hidden;
        height: 540px;
    }

    .print-matchslip .matchslip-container {
        transform: scale(0.64);
        transform-origin: top left;
    }

    pool-fed-scoresheet {
        margin-top: 20px;
        margin-left: 40px;
    }

    pool-dbu-scoresheet {
        margin-top: 10px;
        margin-left: 30px;
    }

    .pool-matchslip-container {
        padding-top: 10px;
        padding-left: 20px;
    }

    #scoresheet-container > .pool-matchslip-container pool-matchslip .pool-matchslip-container {
        transform: scale(0.94);
        transform-origin: top left;
    }

    #scoresheet-container.print-pool-matchslip .pool-scoresheet-container {
        display: none !important; /* important to override element style that is set with JQuery */
    }

    #scoresheet-container.print-pool-matchslip > .pool-matchslip-container {
        display: block;
    }

    #scoresheet-container.print-pool-scoresheet > .pool-matchslip-container {
        display: none;
    }
}

@media screen {
    #carambol-scoresheet-separator,
    #carambol-scoresheet-2,
    .print-matchslip {
        display: none;
    }

    #pool-scoresheet-container-dbu {
        padding-right: 0 !important;
    }

    /*******************************************************************************/
    /*** grid layout                                                             ***/
    /*******************************************************************************/
    #scoresheet-container {
        height: 100%;
        padding: 10px;
        display: grid;
        grid-template-columns: 600px 374px 374px 50px 1fr;
        grid-template-rows: 260px 1fr;
        gap: 10px;
        overflow: hidden;
    }

    #scoresheet-container.tools-1 {
        grid-template-columns: 600px 374px 374px 100px 1fr;
    }

    #scoresheet-container.tools-2 {
        grid-template-columns: 600px 374px 374px 150px 1fr;
    }

    #scoresheet-container > div,
    .carambol-container > div {
        justify-self: stretch;
        align-self: stretch;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.scoresheet-title {
    text-align: center;
    margin-top: 4px;
    position: relative;
    width: 250px;
}

.scoresheet-title.scoresheet-title-small {
    width: 150px;
}

/*******************************************************************************/
/*** placeholder                                                             ***/
/*******************************************************************************/

#placeholder-container > span {
    display: block;
    width: 400px;
    text-align: center;
    font-size: 5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* placeholder */
#placeholder-container {
    position: relative;
    color: gray;
    background: repeating-linear-gradient(
            -45deg,
            rgba(0, 0, 0, 0.01),
            rgba(0, 0, 0, 0.01) 30px,
            rgba(0, 0, 0, 0.03) 30px,
            rgba(0, 0, 0, 0.03) 60px
    );
}

/*******************************************************************************/
/*** scoresheets                                                             ***/
/*******************************************************************************/

#carambol-scoresheet-separator {
    width: 200mm;
    border: 1px dashed black;
    margin: 20px 0 20px;
    padding: 0;
}

/*******************************************************************************/
/*** toolbar                                                                 ***/
/*******************************************************************************/

.scoresheet-toolbar-buttons .btn.btn-default {
    font-size: 1.3em;
    width: 2.3em;
    pointer-events: auto; /* enable tooltips */
}

#carambol-scoresheet-toolbar {
    margin-top: 114px;
}

.scoresheet-toolbar-buttons {
    margin-top: 12px;
}

.livestreamButton .fa-youtube {
    color: gray;
}

.livestreamButton .fa-youtube.available {
    color: rgb(255, 0, 0);
}

.actionButtons,
.privilegedButtons {
    display: inline-block;
    margin-right: 10px;
}

.actionButtons button.btn,
.privilegedButtons button.btn {
    display: block;
    width: 100px;
    margin-bottom: 4px;
}

.activeButton {
    background-color: #337ab7 !important;
    color: white !important;
}

.blockedButton {
    background-color: #d57384 !important;
    color: white !important;
}

.locked:after {
    position: absolute;
    bottom: -3px;
    right: 40px;
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f023";
    color: #5c5c5c;
    font-size: 0.6em;
}

.unlocked:after {
    position: absolute;
    bottom: -3px;
    right: 40px;
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    font-variant: normal;
    text-rendering: auto;
    content: "\f09c";
    color: #5c5c5c;
    font-size: 0.6em;
}

.scoresheet-title-small .locked:after,
.scoresheet-title-small .unlocked:after {
    right: -5px;
}

/*******************************************************************************/
/*** scroresheet dialog                                                      ***/
/*******************************************************************************/

.pool-scoresheet-dialog .message-list-container {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 100;
    padding: 0 10px 10px 10px;
}

.pool-scoresheet-dialog pool-fed-scoresheet table.pool-fed-scoresheet .clubcloud-link a {
    display: none;
}

/*******************************************************************************/
/*** pool                                                                    ***/
/*******************************************************************************/

#pool-scoresheet-functions {
    overflow-y: auto;
}

#pool-scoresheet-functions button {
    width: 120px;
}

#pool-scoresheet-functions table.attribute-table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 15px;
}

#pool-scoresheet-functions table.attribute-table td:first-child {
    white-space: nowrap;
}

#pool-scoresheet-functions table.attribute-table td:last-child {
    width: 100%;
    padding-left: 10px;
    font-weight: bold;
}

#pool-scoresheet-toolbar {
    height: 50px;
}

#pool-scoresheet-toolbar .privilegedButtons button.btn {
    display: inline-block;
}

#scoresheet-container > .pool-matchslip-container {
    display: none;
}