@import url('//fonts.googleapis.com/css?family=Clicker Script');
@import url('//fonts.googleapis.com/css?family=Raleway');

body {
    /*display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;*/
    margin: 0;
}

.ui-dialog span {
    font-family: Raleway;
}

.dialog div, .dialog p {
    font-family: Raleway;
}

.background {
    background: url('../resource/ice-rink-7564565_1280.jpg') center 80% fixed no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.background-dist {
    /*background: url('../resource/christmas-3026688_1920.jpg') center center fixed no-repeat;*/
    background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url('../resource/christmas-1911637_1920_.jpg') center center fixed no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

td.door, td.empty {
    color: rgb(43,89,112);
    font-family: Clicker Script;
    font-weight: bold;
    font-size: clamp(24px, 3vw, 48px);
    text-align: center;
}

.door div.pic {
    aspect-ratio: 1/1;
    margin: 0 auto;
    border: 1px solid whitesmoke;
    border-radius: 50%;
}

.door div.displayWish, .door div.displayGift, .door div.displayMail, .door div.displayNo {
    aspect-ratio: 1/1;
    width: 45%;
    top: 0;
    left: 0;
    position: relative;
    background-size: contain !important;   
}

@media (orientation: landscape) {
    td {
        width: 16.6%; 
        height: 20%;
    }
    .door div.pic {
        height: 100%;
        max-height: 100px;
    }
    .door div.displayWish, .door div.displayGift, .door div.displayMail, .door div.displayNo {
        transform: translate(-20%, -10%);
    }

}

/* greift nur im Hochformat */
@media (orientation: portrait) {
    td {
        width: 20%; 
        height: 16.6%;
    }
    .door div.pic {
        width: 90%;
    }
    .door div.displayWish, .door div.displayGift, .door div.displayMail, .door div.displayNo {
        transform: translate(-10%, -20%);
    }
    .overlay {
        transform: rotate(90deg);
        transform-origin: left top;
    }
}

.door div.displayNo {
    border-radius: 50%;
}

div.container {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-top: .5em;
    margin-bottom: .5em; 
}

label[for=checkbox] {
    margin: 0 10px; /* Abstand zwischen Checkbox und Text */
}

label {
    margin-right: 3px;
}

.icon {
    height: 32px;
    width: 32px;
    background-size: contain !important;    
}

.errorLabel {
    color: red;
}

.displayWish {
    background: rgba(0,0,0,0) url('../resource/icons8-wunschliste-48.png') no-repeat center;
}

.displayGift {
    background: rgba(0,0,0,0) url('../resource/icons8-geschenk-48.png') no-repeat center;
}

.displayMail {
    background: rgba(0,0,0,0) url('../resource/icons8-gutschein-48.png') no-repeat center;
}

.displayChristmasMen {
    background: rgba(0,0,0,0) url('../resource/icons8-weihnachten-48.png') no-repeat center;
}

.door div.displayNo {
    background-size: contain !important;
    background-color: rgb(200,200,200);
}

.dialog_icon {
    height: 50px;
    width: 50px;
    border: 1px solid whitesmoke;
    border-radius: 50%;
}

.door div p {
    padding-top: 3px;
}

.door div.pic {
    position: relative;        
} 

.door div span {
    position: absolute; 
    top: 55%; 
    left: 50%; 
    transform: translate(-55%, -50%);
}

.open {
    background-size: cover !important;    
}

.closed, .to_open, .dialog_icon {
    background-color: rgba(245,245,245,0.5) !important;
    background: url('../resource/icons8-geschenka-96.png') no-repeat center;
    background-size: 60%;
}

.to_open, [status=open][link] {
    cursor: pointer;    
}

.tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
}

.actionChooseFile {
    height: 96px;
    width: 96px;
    background-position: center;  
    background-image: url(''), url(''), url('../resource/icons8_add_image_48px.png'); 
    background-size: cover, 96px 96px, 48px 48px;
    background-repeat: no-repeat;
    float: left;
    margin-bottom: 1em;
    border: 2px solid lightgray;
}

.hiddenfile {
    display: none;
}

.btn {
    display: inline-block !important;
    position: relative;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    /*background-color: whitesmoke;*/
    opacity: 1 !important;
    color: transparent !important;
    text-shadow: none !important;
    padding: 5px 0px 5px 30px;
    border: 1px solid transparent;
}

.save {
    background-image: url('../resource/Ok_48px.png');
}

.overlay {
    position: absolute;
    pointer-events: none; /* lässt Klicks durch */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: rgb(43,89,112);
    font-family: Clicker Script;
    font-weight: bold;
    font-size: clamp(24px, 3vw, 48px);
    text-align: center;
}