/* Base style (mobile first) */


.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.honk-regular {
  font-family: "Honk", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" 25,
    "SHLN" 50;
}

.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}


div.modalBackground {
    position:fixed;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0, 0.3);
    z-index: 10;

}

div.modal-box {
    font-size: 20px;
}

div.modal-title {       
    font-family: 'Times New Roman', Times, serif;
    color: white;
    height: 1.5em;
    line-height: 1.5em;
    background-color: rgb(59, 89, 152);    
}

div.modal-content{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 1em;
}

div.modal-content div.row {   
    width: auto;    
}

    div.modal-content div.row div.firstColumn {
        display: inline-block;
        position: relative;      
        text-align: left;   
        vertical-align: top;
    }

    div.modal-content div.row div.secondColumn {
        display: inline-block;
        position: relative;
        padding-left: 0.25em;    
        text-align: left;      
        vertical-align: top;
    }

div.modal-content div.LeftDiv {
    text-align: left;
}

div.modal-content div.CenterDiv {
    text-align: center;
}

div.modal-content div.RightDiv {
    text-align: right;
}

div.modal-content div.MarginTop {
    margin-top: 1.5em;
}

div.modal-content div.SubTitle {
    color: gray;
}

div.modal-content div.FootNote {
    font-size: 0.5em;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
}

div.modal-content div.Question, div.modal-content div.MainContent {
    font-size: 1em;
    font-weight: bold;    
}

div.modal-content div.BorderBox {
    padding: 0.5em;
    border: 1px solid lightgray;  
    border-radius: 5px;
}

div.modal-content div.ColorRed {
    color: red;
}

div.modal-content div.ColorBlue {
    color: blue;
}

div.modal-content div.Table {    
    display: inline-table;
    padding: 0.25em;
}

div.modal-content div.Table div.TableRow{
    display: table-row;
    padding: 0.25em;
}

div.modal-content div.Table div.TableRow div.TableCell {
    display: table-cell;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

div.modal-content div.Bold {
    font-weight: bold;
}


*.disableTextSelection {                
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
   
/* *contextmenu */
div.ContextMenuContainer {
    display: none;     
    position: fixed;       
    border: 1px solid grey;
    background: white;
    box-shadow: 5px 5px 3px grey;  
    color: black !important;    
    margin: 5px, 5px;  
    border-radius: 5px;
}

div.ContextMenuContainer ul.ContextMenuUnorderedList {
    list-style: none;      
    padding: 0px;  
    margin: 5px 0px;
    font-size: 15px !important;  
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: normal !important;
}

div.ContextMenuContainer ul.ContextMenuUnorderedList li.ContextMenuItem:not(:last-child) {
    border-bottom: 1px dotted gray !important;  
    padding: 2px 5px !important;
    text-align: start !important;
}

div.ContextMenuContainer ul.ContextMenuUnorderedList li.ContextMenuItem:last-child {   
    padding: 2px 5px !important;
    text-align: start !important;
}

div.ContextMenuContainer ul.ContextMenuUnorderedList li.ContextMenuItem:hover {
    background: darkgray !important;
    color: white !important;
}



html {
    font-size: 20px;
}

body {
    height: 100vh;  
    margin: 0px;
    font-size: 1em;
    background: lightgreen;                        
}

body:before {   
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("zipladin_background_lamp.jpg");
    background-repeat: repeat;    
    background-size: 100px 100px;
    opacity: 0.1;   /* 👈 Adjust just the background */
    z-index: -1;    /* Send behind content */    
}

div.whole_page {
    display: flex;
    flex-direction: column;   
    justify-content: start;
    align-items: center;
    height: 100%;
}
     
div#pageTitle {
    font-size: 1.5em;    
    margin-top: 2.5em;      
}
    
div#space_top {
    height: 1.5em;
}
    
div.section_instruction {        
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;        
}

    div.instruction {
        font-size: 0.8em;       
        font-family: "Roboto", sans-serif;     
        text-align: center;        
    }

    
div.section_input {        
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 2em;
}
    
    input#download_code, input#email_address {        
        font-size: 1em;
        height: 100%;
    }
                
    button.round-btn {
        box-sizing: border-box;
        height: 100%;       
        background-color: darkgreen;
        color: white;
        font-size: 1.5em;
        border: none;
        border-radius: 5px;            
        transition: background-color .2s ease;
        margin-left: 1em;;
    }
    
    button.round-btn.ghost {
        height: 0px;
    }
                                                    
    button.round-btn:disabled {
        background-color: lightgray;
        color: darkgray;
        cursor: not-allowed;
        pointer-events: none; /* prevents hover from “sticking” */
    }
    
    button.round-btn:not(:disabled):hover { 
        background-color: #45a049; 
        cursor: hand;
    }
    
                        
div.section_archive {   
    position: relative;     
    margin-top: 2.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

    img#download_pointer {
        position: absolute;   /* absolute positioning */
        top: -160px;           /* shift up by 50px */
        left: 50%;            /* center horizontally */
        transform: translateX(-50%); /* truly center the image */
        width: 200px;         /* adjust size */
        height: auto;         /* maintain aspect ratio */        
        opacity: 0.7;
    }

    .download-anchor {
        display: inline-block;           /* allow padding & width */
        padding: 12px 24px;             /* size */
        background-color: darkgreen;      /* green background */
        color: white;                    /* text color */
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;          /* remove underline */
        border-radius: 20px;            /* round edges */
        transition: background-color 0.3s, transform 0.2s;
        cursor: pointer;
        text-align: center;            
    }
    
    .download-anchor:hover {
        background-color: #45a049;      /* darker green on hover */
        transform: scale(1.05);         /* subtle grow effect */
    }
    
    .download-anchor:active {
        transform: scale(0.98);         /* small click effect */
    }
    
    .download-anchor.disabled, .download-anchor:hover.disabled, .download-anchor:active.disabled {
        background-color: lightgray;
        color: ghostwhite;
        pointer-events: none; /* prevents hover from “sticking” */
    }
    
    table#TableArchive {
        font-family: 
            'Trebuchet MS', 
            Arial, 
            Helvetica, 
            sans-serif;
        margin: 10px;    
        padding: 10px;
        background-color: lightgray;
        border-radius: 10px;;
    }
                    
    table#TableArchive thead {
        display: none;
    }
    
        table#TableArchive tr:nth-child(odd):hover, table#TableArchive tr:nth-child(even):hover {
        background-color: darkslategray;
        color: white;
    }
            
    table#TableArchive tr:nth-child(odd) {
        background-color: cornsilk;
    }
    
    table#TableArchive tr:nth-child(even) {
        background-color: lavenderblush;
    }
    
    table#TableArchive td {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    table#TableArchive td:first-child{
        padding-right: 20px;
    }
    
    table#TableArchive td:nth-child(2) {
        text-align: end;
    }
    
button#archiveRemovalButton {
    display: inline-block;           /* allow padding & width */
    padding: 0.5em 1.2em;             /* size */
    background-color: darkred;      /* green background */
    color: white;                    /* text color */
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;          /* remove underline */
    border-radius: 20px;            /* round edges */
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
    text-align: center;
}

button#archiveRemovalButton:hover {
    background-color: red;     
    transform: scale(1.05);         /* subtle grow effect */
}

button#archiveRemovalButton:active {
    transform: scale(0.98);         /* small click effect */
}

button#archiveRemovalButton:disabled, button#archiveRemovalButton:hover:disabled, button#archiveRemovalButton:active:disabled {
    background-color: lightgray;
    color: ghostwhite;
}

/* Extra small devices (phones, portrait) */
@media (max-width: 480px) {  
   body {      
        font-size: 36px;
        background: black;
    }
    
    div#pageTitle {
        font-size: 2em;    
        margin-top: 100px;      
    }
   
    div#space_top {
        height: 50px;
    }
    
    div.instruction {
        font-size: 0.7em;       
    }
            
    div.section_input {        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        width: 80%;
        height: auto;
    }
             
        input#download_code, input#email_address {           
            font-size: 1.2em;    
            padding: 10px;       
            height: 2em; 
            width: 100%;           
        }       
                
        button.round-btn {
            font-size: 1.4em;
            height: 2em;      
            padding-left: 0.5em;
            padding-right: 0.5em;
            margin-top: 50px;
            align-self: end;
            border-radius: 20px;            
          }
                                                     
          button.round-btn:disabled {
            background-color: lightgray;
            color: darkgray;
            cursor: not-allowed;
            pointer-events: none; /* prevents hover from “sticking” */
          }
          
          button.round-btn:not(:disabled):hover { 
            background-color: #45a049; 
            cursor: hand;
          }
          
        button.round-btn.ghost {
            display: none;            
        }    
        
    img#download_pointer {        
        top: -160px;   
    }
        
    .download-anchor {       
        padding: 0.5em 0.5em;                                 
        font-size: 1em;     
        margin-top: 1em;       
    }
    
    div.section_archive {
        margin-top: 1em;    
    }   
                
    table#TableArchive {
        font-size: 0.8em;
    }
    
    button#archiveRemovalButton {
        margin-top: 0.5em;
        font-size: 1.2em;
        padding: 0.5em 0.5em;     
        align-self: center; 
    }
      
    div.instruction, table#TableArchive caption {       
        color: white;   
    }      
}

/* Small devices (phones, landscape / bigger phones) */
@media (min-width: 481) and (max-width: 767px) { 
    body {      
        font-size: 36px;
        background: pink;
    }
      
    div#pageTitle {
        font-size: 2em;    
        margin-top: 100px;      
    }
   
    div#space_top {
        height: 50px;
    }
    
    div.instruction {
        font-size: 0.7em;       
    }
            
    div.section_input {        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        width: 80%;
        height: auto;
    }
             
        input#download_code, input#email_address {           
            font-size: 1.2em;    
            padding: 10px;       
            height: 2em; 
            width: 100%;           
        }       
                
        button.round-btn {
            font-size: 1.4em;
            height: 2em;      
            padding-left: 0.5em;
            padding-right: 0.5em;
            margin-top: 50px;
            align-self: end;
            border-radius: 20px;            
          }
                                                     
          button.round-btn:disabled {
            background-color: lightgray;
            color: darkgray;
            cursor: not-allowed;
            pointer-events: none; /* prevents hover from “sticking” */
          }
          
          button.round-btn:not(:disabled):hover { 
            background-color: #45a049; 
            cursor: hand;
          }
          
        button.round-btn.ghost {
            display: none;            
        }    
    
    img#download_pointer {        
        top: -160px;   
    }
        
    .download-anchor {       
        padding: 0.5em 0.5em;                                 
        font-size: 1em;     
        margin-top: 1em;       
    }
    
    div.section_archive {
        margin-top: 1em;    
    }   
                
    table#TableArchive {
        font-size: 0.8em;
    }
    
    button#archiveRemovalButton {
        margin-top: 0.5em;
        font-size: 1.2em;
        padding: 0.5em 0.5em;     
        align-self: center; 
    }
}

/* Medium devices (tablets, small laptops) */
@media (min-width: 768px) and (max-width: 1024px) {  
    body {      
        font-size: 40px;
        background: lightblue;
    }
    
    div#pageTitle {
        font-size: 2em;    
        margin-top: 100px;      
    }
   
    div#space_top {
        height: 50px;
    }
    
    div.instruction {
        font-size: 0.7em;       
    }
            
    div.section_input {        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        width: 80%;
        height: auto;
    }
             
        input#download_code, input#email_address {           
            font-size: 1.2em;    
            padding: 10px;       
            height: 2em; 
            width: 100%;           
        }       
                
        button.round-btn {
            font-size: 1.4em;
            height: 2em;      
            padding-left: 0.5em;
            padding-right: 0.5em;
            margin-top: 50px;
            align-self: end;
            border-radius: 20px;            
          }
                                                     
          button.round-btn:disabled {
            background-color: lightgray;
            color: darkgray;
            cursor: not-allowed;
            pointer-events: none; /* prevents hover from “sticking” */
          }
          
          button.round-btn:not(:disabled):hover { 
            background-color: #45a049; 
            cursor: hand;
          }
          
        button.round-btn.ghost {
            display: none;            
        }    
    
    img#download_pointer {        
        top: -160px;   
    }
        
    .download-anchor {       
        padding: 0.5em 0.5em;                                 
        font-size: 1em;     
        margin-top: 1em;       
    }
    
    div.section_archive {
        margin-top: 1em;    
    }   
                
    table#TableArchive {
        font-size: 0.8em;
    }
    
    button#archiveRemovalButton {
        margin-top: 0.5em;
        font-size: 1.2em;
        padding: 0.5em 0.5em;     
        align-self: center; 
    }
}

@media (max-width: 1023px) {        
    div#modal-window div.modal-box div.modal-inner div.modal-title {    
        height: 3em;
    }

    div#modal-window div.modal-box div.modal-inner div.modal-title h3 {
        font-size: 2em;       
    }

    div#modal-window div.modal-box div.modal-inner div.modal-buttons a.modal-btn {
        font-size: 1em;
    }

    div#modal-window div.modal-box div.modal-inner div.modal-buttons a.modal-btn {
        font-size: 1em;
    }
}

/* Large devices (desktops) */
@media (min-width: 1025px) and (max-width: 1440px) {  
    img#download_pointer {
        display: none;
    }
  /* Styles for most laptops and desktops */
}

/* Extra large devices (big desktops / 4K) */
@media (min-width: 1441px) {  
    img#download_pointer {
        display: none;
    }
  /* Styles for large monitors */
}



textarea.Glow:focus, input.Glow:focus, select.Glow:focus {
    box-shadow: 0 0 10px #6CB4EE;
}

textarea.Glow, input.Glow, select.Glow {
    box-sizing: border-box;  
    outline: none;
    border: none;
    border-color: #4e4e4e;
    box-shadow: 0 0 10px #535353;
    border-radius: 5px;
}

select.Glow {
    background-color: whitesmoke;
}

input[type="checkbox"].ScaledOnHover {
    vertical-align: middle;  
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
}

input[type="checkbox"].ScaledOnHover:hover {
    transform: scale(2);
    transition: transform 0.2s ease-in-out; /* Optional: Adding a transition for smooth animation */    
}

input[type="text"]:disabled {
    background-color: gainsboro;
}

input[type="text"]:disabled:invalid {
    background-color: gray;
}    




/* *modal */