table
{
    border-collapse: collapse;
    margin: 10px 10px;
}
table td
{
    border: 1px solid rgba(0,0,0,0.35);

}
table tr:nth-child(odd)
{
    background: rgba(255,255,255,0.35);

}
h1
{
    font-family: 'Helvetica Neue',Arial, Helvetica, sans-serif;
    margin-top:0px;
    font-weight: 300;
    font-size:24px;
    text-shadow: 0px 1px 0px #ffffff;
    text-shadow: 0px -px 0px #000000;
    margin-bottom: 0px;


}
body
{
    font-family: 'Helvetica Neue',"Trebuchet MS", Arial, Helvetica, sans-serif;
    background-image: url("woodBackground.png");
    background-size: cover;


    height:100%;
    width: 100%;
    margin:0px;


}

button.imageButton
{
    font-family: 'Helvetica Neue',"Trebuchet MS", Arial, Helvetica, sans-serif;
    position: relative;
    font-weight: 200;
    height: 50px;
    width:50px;
    font-size: 15px;


    -webkit-appearance:none;
    color: #000000;
    border-radius:5px;

    padding:0px 0px 0px 0px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(100,100,100,1)); /* For Safari */
    display: inline-block;


}
button.imageButtonSmall
{
    font-family: 'Helvetica Neue',"Trebuchet MS", Arial, Helvetica, sans-serif;
    position: relative;
    font-weight: 200;
    height: 40px;
    width:40px;
    font-size: 15px;


    -webkit-appearance:none;
    color: #000000;
    border-radius:5px;

    padding:0px 0px 0px 0px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(100,100,100,1)); /* For Safari */
    display: inline-block;


}


.buttonCenterText
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    position: absolute;
    z-index: 3;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 20%; /* Adjust this value to move the positioned div up and down */
    text-align: center;
    margin: 0px;
    padding: 0px;
    /*background-color: rgba(200,200,255,0.75);*/
    background-color: transparent;

    color:rgba(255,255,255,0.85);
    text-shadow: 0px 1px 2px #000000;
    font-size:1.7em;


}

.buttonTopText
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    position: absolute;
    z-index: 3;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 32%; /* Adjust this value to move the positioned div up and down */
    text-align: center;
    margin: 0px;
    padding: 0px;
    /*background-color: rgba(200,200,255,0.75);*/
    background-color: transparent;

    color:rgba(255,255,255,0.75);

    font-size:0.8em;
}

.buttonBottomText
{
    position: absolute;
    z-index: 3;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 5%; /* Adjust this value to move the positioned div up and down */
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    color:lightgreen;
    text-shadow: 0px 1px 2px #ffffff;
    font-size:0.7em;
}






.toggleButton

{
    background: #ddd;
    cursor: pointer;
    border-top: solid 2px #eaeaea;
    border-left: solid 2px #eaeaea;
    border-bottom: solid 2px #777;
    border-right: solid 2px #777;

    font-size: 1.25em;


}

button.down
{
    background: #bbb;
    border-top: solid 2px #777;
    border-left: solid 2px #777;
    border-bottom: solid 2px #eaeaea;
    border-right: solid 2px #eaeaea;
    font-size: 1.25em;
}


.hrefButton
{
    font: 11px Arial;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margins: 10px;
    padding:10px;

}
.button-42 {
   background-color: initial;
   background-image: linear-gradient(-180deg, #cccccc, #aaaaaa);
   border-radius: 6px;
   box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
   color: #000000;
   cursor: pointer;
   display: inline-block;
   font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
   height: 40px;
   line-height: 40px;
   outline: 0;
   overflow: hidden;
   padding: 0 2px;
    margin:2px;
   pointer-events: auto;
   position: relative;
   text-align: center;
   touch-action: manipulation;
   user-select: none;
   -webkit-user-select: none;
   vertical-align: top;
   white-space: nowrap;
   z-index: 9;
   border: 0;
   transition: box-shadow .2s;
}

.button-42:hover
{
    box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
}

#mainDiv
{
    width:100%;
    height:100%;
}


#bodyDiv
{

}



label
{
    font-size:18px;
    color:black;
    /*text-shadow:0px 1px 1px #000000;*/
}

input
{
    height: 40px;
    font-size:21px;
}

input[type='checkbox']:hover
{
    background: #555555;
    opacity: 0.25;

}
input[type='checkbox']:checked
{
    opacity: 1;
    background: url('check-markDark.png');
}
input[type='checkbox']
{
    /*-webkit-appearance:none;*/
    width:24px;
    height:24px;
    border-radius:10px;
    border:3px solid #ffffff;
    box-shadow: 0px 1px 1px #ffffff;
    margin: 1px 1px;

}

.hrefbuttonClass
{
    padding: 0px;
    border: none;
    background: none;
    color: blue;
    cursor: Pointer;
}

.modalDialog
{
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    opacity:0;
    z-index: 99999;/*The very front...*/
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target
{
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div
{
    max-width:90%;
    width: 700px;
    position: relative;
    margin: 2% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 5px;
    background: #fff;
    background: -moz-linear-gradient(#ffffff, #bbbbbb, #bbbbbb);
    background: -webkit-linear-gradient(#ffffff, #bbbbbb, #bbbbbb);
    background: -o-linear-gradient(#ffffff, #bbbbbb, #bbbbbb);
    box-shadow:5px 5px 5px #000000;
    border: 1px solid white;
    color:black;
}
.close {
    background: #ff0000;
    color: #FFFFFF;
    line-height: 0;
    position: absolute;
    right: 1px;
    text-align: center;
    top: 0;
    width: 43px;
    text-decoration: none;
    font-weight: bold;
    height:43px;
    border-radius: 5px;

}
.close:hover { background: #ff8080; }


input[type='checkbox']:hover
{
    background: #555555;
    opacity: 0.25;

}
input[type='checkbox']:checked
{
    opacity: 1;
    background: url('Checkmark_green.svg');
    background-color:white;
}

button.menubutton
{
    width:50%;
}
/*BLINK/*
-----------------------------------
 */
@keyframes blinkerBlue
{
    0%
    {
        
        background-color: rgba(0,0,255,0);
    }
    
    100%
    {
        
        background-color: rgba(0,0,255,1);
        color:white;
    }
}
.blinkBlue
{
    animation: blinkerBlue 5s linear infinite;
}


.ui-accordion .ui-accordion-header
{

    padding:1px;
    background-image: linear-gradient(lightgrey , darkgray);
    font-family: Arial;
    color:black;
    font-size: 1.5em;
    font-weight: bold;

}
.ui-accordion .ui-accordion-content
{
    background-color:gray;
    color:black;
    font-size: 1.2em;
    font-weight: bold;
    padding:0px;
    margin: 0px;
}

/************************RAIN************************/

html{height:100%;}


.drop {
    background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
    background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width:1px;
    height:89px;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
    -moz-animation: fall .63s linear infinite;

}

/* animate the drops*/
@-webkit-keyframes fall {
    to {margin-top:900px;}
}
@-moz-keyframes fall {
    to {margin-top:900px;}
}

.fade-out
{
    animation: fadeOut ease 5s;
    -webkit-animation: fadeOut ease 5;
    -moz-animation: fadeOut ease 5s;
    -o-animation: fadeOut ease 5s;
    -ms-animation: fadeOut ease 5s;
}
@keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/*SNOW

 */
.snowflake {
    --size: 1vw;
    width: var(--size);
    height: var(--size);
    background: white;
    border-radius: 50%;
    position: absolute;
    top: -5vh;
}

@keyframes snowfall {
    0% {
        transform: translate3d(var(--left-ini), 0, 0);
    }
    100% {
        transform: translate3d(var(--left-end), 110vh, 0);
    }
}


for $i from 1 through 50 {
    .snowflake:nth-child(#{$i}) {
        --size: #{random(5) * 0.2}vw;
        --left-ini: #{random(20) - 10}vw;
        --left-end: #{random(20) - 10}vw;
        left: #{random(100)}vw;
        animation: snowfall #{5 + random(10)}s linear infinite;
        animation-delay: -#{random(10)}s;
    }
}

/* added small blur every 6 snowflakes*/
.snowflake:nth-child(6n) {
    filter: blur(1px);
}

/* --- Wood Frame Container --- */
.wood-frame {
    /* Display and Padding */
    display: inline-block; /* Allow padding and fit content */



    padding: 3px; /* Space between button and wood edge */
    margin: 5px 5px;
    border-radius: 12px; /* Slightly rounded corners for the frame */

    /* --- Dark Stained Wood Background --- */
    /* Layered gradients to simulate wood grain */
    background-color: #6b4226; /* Base dark brown color */
    background-image:
        /* Subtle lighter grain lines */
            linear-gradient(90deg, rgba(139, 90, 43, 0.4) 1px, transparent 1px),
            linear-gradient(0deg, rgba(139, 90, 43, 0.4) 1px, transparent 1px),
                /* Darker base grain texture */
            linear-gradient(45deg, rgba(74, 46, 26, 0.6) 25%, transparent 25%, transparent 75%, rgba(74, 46, 26, 0.6) 75%),
            linear-gradient(-45deg, rgba(74, 46, 26, 0.6) 25%, transparent 25%, transparent 75%, rgba(74, 46, 26, 0.6) 75%);
    background-size: 10px 10px, 10px 10px, 20px 20px, 20px 20px; /* Control grain pattern size */

    /* --- Frame Shadow --- */
    box-shadow:
        inset 0 0 2px rgba(0, 0, 0, 0.5); /* Inner shadow for depth */
        border: 2px solid #4a2e1a; /* Dark border for definition */
}


/* The metallic button style (Unchanged) */
.metallic-button {
    /* Button dimensions and layout */
    padding: 5px 10px;
    margin:5px 5px;
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Dark text color for contrast */
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5); /* Subtle light text shadow for depth */

    /* --- Metallic Gradient Background --- */
    background: linear-gradient(to bottom, #f8f8f8 0%, #cccccc 100%);

    /* --- Border and Rounded Corners --- */
    border: 1px solid #999; /* Medium grey border */
    border-radius: 8px; /* Slightly rounded corners */

    /* --- 3D Effect using Box Shadow --- */
    box-shadow:
            inset 0px 1px 1px rgba(255, 255, 255, 0.7), /* Inner top highlight */
            0px 4px 6px rgba(0, 0, 0, 0.3),        /* Main bottom shadow */
            0px 1px 0px rgba(255, 255, 255, 0.4);  /* Subtle top edge highlight */

    /* --- Interaction --- */
    cursor: pointer; /* Indicate it's clickable */
    transition: all 0.05s ease; /* Smooth transitions for hover/active */
    outline: none; /* Remove default browser outline */
    display: inline-flex; /* Ensure button takes block display within the frame */
}

/* Hover state - make it slightly brighter and lift (Unchanged) */
.metallic-button:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%); /* Brighter gradient */
    box-shadow:
            inset 0px 1px 1px rgba(255, 255, 255, 0.8),
            0px 6px 8px rgba(0, 0, 0, 0.35), /* Slightly larger shadow */
            0px 1px 0px rgba(255, 255, 255, 0.5);
    transform: translateY(-1px); /* Slight lift effect */
}

/* Active state - simulate pressing down (Unchanged) */
.metallic-button:active {
    background: linear-gradient(to bottom, #cccccc 0%, #bbbbbb 100%); /* Darker gradient */
    box-shadow:
            inset 0px 2px 3px rgba(0, 0, 0, 0.3), /* Inner shadow simulating press */
            0px 2px 3px rgba(0, 0, 0, 0.2);    /* Smaller bottom shadow */
    transform: translateY(2px); /* Move down */
    color: #222; /* Slightly darker text */
    text-shadow: none; /* Remove text shadow when pressed */
}

.statusStyle
{
    background-color: rgba(0,0,0,0.25);
    border-top: rgba(0,0,0.75) solid 1px;
    border-left: rgba(0,0,0.75) solid 1px;
    border-bottom:rgba(255,255,255,0.75) solid 1px;
    border-right:rgba(255,255,255,0.75) solid 1px;
    padding: 5px;
    min-width: 50px;
    margin: 2px;
    
    
    align-content: center; 
    text-align: center;
    font-size: x-small;
    color: rgba(255,255,255,0.75);
}
.statusErrorStyle
{
    background-color: rgba(255,255,0,0.75);
    border-top: rgba(255,255,0.75) solid 1px;
    border-left: rgba(0,0,0.75) solid 1px;
    border-bottom:rgba(255,255,255,0.75) solid 1px;
    border-right:rgba(255,255,255,0.75) solid 1px;
    padding: 5px;
    min-width: 50px;
    margin: 2px;
    
    
    align-content: center; 
    text-align: center;
    font-size: x-small;
    color: rgba(0,0,0,0.75);
}
/***/