:root {    
    --code-button-width: 60px;
    --code-button-height: 60px;
    --code-button-action-height: 48px;
    --code-button-separator: 5px;
}

#page_disable {    
    display: none;
    position: fixed;
    top: 0;    
    left: 0;    
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.9);    
}

#code_key_pad {
    display: none;    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc( var(--code-button-width) * 3 + var(--code-button-separator) * 6);
    /* background-color: aquamarine;     */
}

.code-key-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: "Segoe UI", 'OpenSans-Regular', Helvetica, Calibri, Verdana, Geneva, sans-serif;
}

/* Buttons (ze znakami) */
.code-key-button {
    width: var(--code-button-width);
    height: var(--code-button-height);
    margin: var(--code-button-separator);
    background-color: #333333;
    border: 4px solid #3c3c3c;
    color: #6e6e6e;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;    
    font-size: 16pt;
    font-weight: bold;
    text-shadow: 2px 2px rgba(0,0,0, 0.4);
    box-sizing: border-box;
}
.code-key-button:hover {    
    border: 4px solid #ff6008;    
}
.code-key-button:active {    
    color: #ff6008;    
}

/* Button wysłania podanego kodu */
.code-key-button-send {
    width: var(--code-button-width);
    height: var(--code-button-action-height);
    margin: var(--code-button-separator);
    background-color: #333333;
    background: url('../images/code_key_ok.png') no-repeat 0px 0px;    
    border-radius: 15px;    
    cursor: pointer;    
}
.code-key-button-send:hover {    
    background: url('../images/code_key_ok.png') no-repeat 0px -48px;    
}
.code-key-button-send:active {    
    background: url('../images/code_key_ok.png') no-repeat 0px -96px;
}

/* Button czyszczenia wprowadzonego kodu (zerowania) */
.code-key-button-clear {
    width: var(--code-button-width);
    height: var(--code-button-action-height);
    margin: var(--code-button-separator);
    background-color: #333333;
    background: url('../images/code_key_clear.png') no-repeat 0px 0px;    
    border-radius: 15px;    
    cursor: pointer;    
}
.code-key-button-clear:hover {    
    background: url('../images/code_key_clear.png') no-repeat 0px -48px;    
}
.code-key-button-clear:active {    
    background: url('../images/code_key_clear.png') no-repeat 0px -96px;
}

/* Button wyjścia z klawiatury */
.code-key-button-exit {
    width: var(--code-button-width);
    height: var(--code-button-action-height);
    margin: var(--code-button-separator);
    background-color: #333333;
    background: url('../images/code_key_exit.png') no-repeat 0px 0px;    
    border-radius: 15px;    
    cursor: pointer;    
}
.code-key-button-exit:hover {    
    background: url('../images/code_key_exit.png') no-repeat 0px -48px;    
}
.code-key-button-exit:active {    
    background: url('../images/code_key_exit.png') no-repeat 0px -96px;
}

/* Okienko do drukowania gwiazdek po wcisnięciu klawiszy */
.code-key-pressed-info {
    width: calc( var(--code-button-width) * 3 + var(--code-button-separator) * 4);
    height: 40px;
    margin: var(--code-button-separator);
    display: flex;
    justify-content: center;
    align-items: center;    
    color: #ff6008;       
    font-size: 24pt;
    font-weight: bold;
    letter-spacing: 3px;
}

/* Okienko z tekstem 'Enter the access code' */
.code-key-free {
    width: calc( var(--code-button-width) * 3 + var(--code-button-separator) * 4);
    height: 40px;
    margin: var(--code-button-separator);
    display: flex;
    justify-content: center;
    align-items: center;        
    color: #6e6e6e;       
    font-size: 13pt;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 2px 2px rgba(0,0,0, 0.4);
}

/* =================================================== */
@media screen and (max-width: 800px) {      

}