@charset "utf-8";

@font-face {
    font-family: 'CooperBlackReg';
    src: url('../fonts/Cooper Black Regular.woff2') format('woff2');
}

:root {
    --shuffle-duration: 1.2s;
    --card-width: 12.5vmin;
    --card-height: 20vmin;
    --motion-distance-r: 10vmin;
    --motion-distance-l: -10vmin;
    --motion-distance-t: -10vmin;
    --motion-distance-b: 10vmin;
}

/*** Selectors ***/

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    width: 100%;
    margin: 0;
    font-size: x-large;
}

button {
    cursor: pointer;
    outline: none;
    border: none;
    background-color: transparent;
    color: inherit;
    border-radius: 7px;
    margin-left: 10px;
    margin-right: 10px;
}

button:disabled {
    display: none;
}

html {
    direction: ltr;
    background-color: whitesmoke;
}

h1 {
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}

input, select, td, th {
    font-size: x-large;
}

input {
    border: 1px solid darkgray;
    background-color: inherit;
    color: inherit;
}

input[type="number"] {
    text-align: right;
    width: 4.2em;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    pointer-events: auto;
    margin: 1px;
}

optgroup {
    font-style: normal;
    font-weight: normal;
}

table {
    margin: auto;
    border-spacing: 0;
}

tbody td {
    padding: 0.2em 0.2em;
}

tbody tr,
tfoot tr {
    outline: medium solid darkgray;
}

tfoot tr {
    background-color: white;
    color: black;
}

select {
    border-color: darkgray;
    border-style: solid;
    border-width: 1px;
    background-color: inherit;
    color: inherit;
}

select optgroup, select option {
    background-color: white;
    color: black;
    font-weight: normal;
}

/*** Identifiers ***/

#author {
    font-size: 70%;
}

#close {
    display: none;
}

#end {
    display: none;
    font-size: 25vmin;
    color: black;
}

#help-text {
    text-align: left;
}

#logItem {
    opacity: 1;
    top: 0px;
    font-size: 5vh;
    text-align: center;
    height: auto;
    position: fixed;
}

#menu-dropdown-content {
    font-size: x-large;
    cursor: auto;
    color: #000;
    background-color: #fff;
    display: none;
    position: absolute;
    min-width: 360px;
    margin-left: 15px;
    padding: 10px 20px;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.2);
    top: 10px;
    left: 5px;
    z-index: 1;
}

#menu-dropdown-hover {
    position: absolute;
    display: inline-block;
    top: 5px;
    z-index: 2;
}

#menu-dropdown-hover .menu-line {
    display: block;
    padding: 8px 16px;
}

#menu-dropdown-hover:hover .menu-line:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

#menu-dropdown-hover:hover #menu-dropdown-content {
    display: block;
    cursor: pointer;
}

#menu-icon {
    font-size: 5vh;
    position: fixed;
    top: 0px;     
}

#next, #prev {
    opacity: 0.7;
    font-size: x-large;
    font-family: sans-serif;
}

#read-only {
    display: none;
    font-size: 1em;
    font-weight: bold;
    color: black;
    background-color: orange;
    text-align: center;
    margin: -1em auto 0.5em;
    padding: 0.5em 0.7em;
    width: 8em;
    border: double medium;
}

#registration {
    max-height: 100vh;
    overflow-y: auto;
}

#watermark {
    background-image: url(../images/tombola_draw_icon_wh2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50vmin;
    position: fixed;
    right: 50%;
    bottom: 25%;
    opacity: 0.1;
    z-index: -1;
    pointer-events: none;
    width: 50vmin;
    height: 50vmin;
    transform: translate(50%, 50%);
}


#registrationButtons {
    position: relative;
}

#insert, #ready{
    background-color: white;
}

#repetition {
    height: auto;
    opacity: 1;
    font-size: 5vh;
    position: fixed;
    right: 12px;
    top: 0px;
}

/* Splash screen base styles */
#splash-screen {
    width: 50vmin;
    height: 50vmin;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideUp 1.2s ease-out forwards;
}

/* Animation keyframes */
@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#page-heading {
    display: block;
}

#review-button {
    opacity: 0.3;
}

#warning {
    display: none;
}

#present-winner {
    display: none;
    height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 1.2s ease-in;    
}

/*** Classes ***/

.button-left {
    position: fixed;
    bottom: 5px;
    left: 0%;
}

.button-right {
    position: fixed;
    bottom: 5px;
    right: 0%;
}

.button-row {
    position: fixed;
    text-align: center;
    height: 60px;
    width: 100%;
    align-items: center;
}

.button-set {
    width: 120px;
    height: 50px;
    top: 5px;
    border: 2px solid darkgray;
    background-color: transparent;
    opacity: 1;
}

.cancel-x {
    opacity: 0.5;
    margin-left: auto;
    width: 1.4em;
}

.elem-center {
    text-align: center;
}

.elem-hide {
    visibility: hidden;
}

.hover-effect:hover, .hover-effect:focus {
    background-color: rgba(0, 0, 0, 0.2);
}

.num-tickets {
    text-align: right;
}

.remove-item {
    opacity: 1;
    cursor: pointer;
}

.remove-item:active {
    opacity: 0.5;
}

.shortcut {
    font-weight: bold;
    min-width: 6.3em;
    display: inline-flex;
    margin-left: 1em;
    font-family: sans-serif;
    text-align: center;
}

.slider {
    width: 90%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 1;
    transition: opacity 0.2s;
    cursor: pointer;
}

.status-light {
    background-color: orange;
    border-radius: 50%;
    display: inline-block;
    height: 1.3em;
    width: 1.3em;
    vertical-align: -0.3em;    
    margin-left: 10px;
    margin-right: 10px;
    border: 2px solid darkgray;
}

.color-bright-blue{color:white;background-color:blue;}
.color-bright-red{color:white;background-color:red;}
.color-grey{color:black;background-color:gainsboro;}
.color-whitesmoke{color:black;background-color:whitesmoke;}
.color-pale-blue{color:black;background-color:#add8e6;}
.color-pale-green{color:black;background-color:lightgreen;}
.color-pale-red{color:black;background-color:pink;}
.color-pale-yellow{color:black;background-color:#fffacd;}
.color-skybound-blue{color:white;background-color:#5e9ed6;}
.color-meadow-mint{color:black;background-color:#81c995;}
.color-golden-hour-glow{color:black;background-color:#f0d264;}
.color-tangerine-drift{color:white;background-color:#e98b50;}
.color-rosewood-blush{color:white;background-color:#d76b72;}
.color-orange{color:black;background-color:orange;}
.color-purple{color:white;background-color:#904FA0;}
.color-teal{color:white;background-color: #008080;}
.color-burgundy{color:white;background-color:#800020;}
.color-bronze {color:navajowhite;background-color:#6A3805;}
.color-silver{color:#484848;background-color:gainsboro;}
.color-gold {color:saddlebrown;background-color:#DF9F28;}
.color-cerulean {color: white;background-color:#007898;}
.color-slate-teal {color: white;background-color:#2E6A7D;}

.splash-font {      
    font-family: 'CooperBlackReg', cursive;
    font-weight: 400;
    padding: 40px;
    -webkit-text-stroke: 0.5vmin black;
    text-stroke: 0.5vmin black;
    line-height: 1;
}

.line1 {
    color: #C0E8F9; /*#ccffff; /*#add8e6; /* light blue */
    font-size: 11vmin;
    transform: scaleY(1.8);
    transform-origin: bottom;
    animation: textPop 0.6s ease-out forwards;
}

.line2 {
    color: #FFF4C3; /*#fffacd; /* lemon chiffon */
    font-size: 17vmin;
    transform: scaleY(1.8);
    animation: textPop 0.6s ease-out forwards;
}

@keyframes textPop {
    0% {
        transform: scaleY(1.0);
        opacity: 0;
    }
    100% {
        transform: scaleY(1.8);
        opacity: 1;
    }
}

.w3-animate-top{position:relative;animation:animateTop 1.5s}@keyframes animateTop{from{transform: translateY(-200%);} to{transform: translateY(0%);}}
.w3-button{font-size:large;border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;margin:0.5em;
    text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-button:hover {color:#000!important;background-color:#ccc!important;opacity:0.6;}
.w3-button:disabled{cursor:not-allowed;opacity:0.3;}
.w3-button-border{border:1px solid darkgray}
.w3-card-4{box-shadow:0 4px 10px 0 rgba(0,0,0,0.4),0 4px 20px 0 rgba(0,0,0,0.3);}
.w3-container{padding:16px;}
.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-middle{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;max-width: 500px;max-height: 90vh;overflow-y: auto;z-index:8;}
.w3-modal{display:none;padding-top:7vh;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;z-index:7;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.3)}

/*** Media (screen < 600) ***/

@media screen and (max-width: 599px) {

    input,
    select {
        display: inline;
    }

    label {
        display: inline-block;
        margin-right: 0.5em;
        padding-left: 0;
        width: 9em;
    }

    table {
        border: 0;
    }

    table td {
        display: block;
        text-align: right;
        margin-top: auto;
        margin-left: 1em;
        margin-right: 1em;
        position: relative;
    }

    table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    table thead {
        display: none;
    }

    tr {
        display: block;
        margin-bottom: 0.8em;
        padding-bottom: 0.5em;
        padding-top: 0.3em;
        width: 320px;
    }

    #totalLabel {
        display: inline;
        font-weight: bold;
        margin-left: 1em;
        text-align: left;
        text-transform: uppercase;
    }

    #totalNo {
        display: block;
        float: right;
        margin-right: 1em;
        text-align: right;
    }

    .item-no {
        text-align: center;
    }

    .status-light {
        margin-left: 0;
        float: left;
    }

    .w3-modal-content {
        max-width: 380px;
    }
}

/*** Medias (screen <= 420) ***/

@media screen and (max-width: 420px) {

    #registration h1 {
        font-size: 1.5em;
    }

    #registration tr {
        width: 16em;
    }
}

/*** Media (screen >= 600) ***/

@media screen and (min-width: 600px) {

    table {
        border-spacing: 0 0.8em;
    }

    td {
        line-height: 2.5em;
        margin-right: 0.3em;
    }

    thead th {
        text-align: left;
        text-transform: uppercase;
    }

    .item-no {
        text-align: right;
        width: 1em;
    }
    
    #totalLabel {
        font-weight: bold;
        text-align: left;
        text-transform: uppercase;
    }

    #totalNo {
        text-align: right;
    }
}

/*** Media (screen < 800)  ***/

@media screen and (max-width: 799px) {

    body {
        font-size: large;
    }

    input, select, td, th {
        font-size: large;
    }

    #menu-dropdown-content {
        font-size: large;
        min-width: 235px;
    }

    .status-light {
        height: 1.3em;
        width: 1.3em;
        margin-top: 5px;
    }
}

/* Spinner container */

#spinner-panel {
    position: fixed; /* instead of relying on viewport scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(40, 40, 40);
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    position: relative;
    width: 40vmin;
    height: 40vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 2px dashed cyan;*/
}

.card {
    position: absolute;
    top: 50%;
    left: 50%;    
    width: var(--card-width);
    height: var(--card-height);
    border-radius: 10%;
    /*border: 1px solid white;*/
    transform-origin: center;
    transition: transform 0.5s ease;
    animation-duration: var(--shuffle-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* Card color + animation assignments */
.card.one   { background-color: #E91E63; animation-name: position1; }
.card.two   { background-color: #00BCD4; animation-name: position2; }
.card.three { background-color: #4CAF50; animation-name: position3; }
.card.four  { background-color: #FFC107; animation-name: position4; }
/* blue, red, green, #FFF000 */

/* Square path animations */

@keyframes position1 {
    0%    { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-t)) skewY(-10deg) scale(0.9); z-index: 0; }
    25%   { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-t)) skewY(-10deg) scale(1.0); z-index: 3; }
    50%   { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-b)) skewY(-10deg) scale(1.0); z-index: 2; }
    75%   { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-b)) skewY(-10deg) scale(0.9); z-index: 1; }
    100%  { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-t)) skewY(-10deg) scale(0.9); z-index: 0; }
}

@keyframes position2 {
    0%   { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-t)) skewY(-10deg) scale(1.0); z-index: 3; }
    25%  { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-b)) skewY(-10deg) scale(1.0); z-index: 2; }
    50%  { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-b)) skewY(-10deg) scale(0.9); z-index: 1; }
    75%  { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-t)) skewY(-10deg) scale(0.9); z-index: 0; }
    100% { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-t)) skewY(-10deg) scale(1.0); z-index: 3; }
}

@keyframes position3 {
    0%   { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-b)) skewY(-10deg) scale(1.0); z-index: 2; }
    25%  { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-b)) skewY(-10deg) scale(0.9); z-index: 1; }
    50%  { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-t)) skewY(-10deg) scale(0.9); z-index: 0; }
    75%  { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-t)) skewY(-10deg) scale(1.0); z-index: 3; }
    100% { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-b)) skewY(-10deg) scale(1.0); z-index: 2; }
}

@keyframes position4 {
    0%   { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-b)) skewY(-10deg) scale(0.9); z-index: 1; }
    25%  { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-t)) skewY(-10deg) scale(0.9); z-index: 0; }
    50%  { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-t)) skewY(-10deg) scale(1.0); z-index: 3; }
    75%  { transform: translate(-50%, -50%) translate(var(--motion-distance-r), var(--motion-distance-b)) skewY(-10deg) scale(1.0); z-index: 2; }
    100% { transform: translate(-50%, -50%) translate(var(--motion-distance-l), var(--motion-distance-b)) skewY(-10deg) scale(0.9); z-index: 1; }
}

/**/

#suspensionBar {
    width: 33vmin;
    /*background: #ddd;*/
    display: block;
    bottom: 25vh;
    position: fixed;   
}

#barFill {
    height: 10px;
    background: orange;
    width: 100%;
}