/* Reset & base styles */
html {
    scroll-padding-top: 100px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    height: 1fr;
    width: 1fr%;
    background-color: #ADB6CC;
    color: black;
    font-family: "Myriad Web Pro";
    font-size: medium;
    margin: 10px;
}
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Start off-screen to the right */
    animation: marquee 30s linear infinite; /* Control speed with the time value (e.g., 10s) */
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); } /* End off-screen to the left */
}
.antispam
{
    display: none;
}
.title{
    position: top;
    top:0px;
    font-size: 35px;
    width: 100%;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    color: #000000;
    user-select: none;
    border-radius: 15px 15px 15px 15px;
    background-color: #ADB6CC;
}
/* Page title */
.page-title {
    position: fixed;
    top:0px;
    width: 100%;
    font-weight: 600;
    text-align: center;
    line-height: 100px;
    color: #000000;
    user-select: none;
    border-radius: 8px 8px 0px 0px;
    font-size: 3rem;
    background-color: #ADB6CC;
    z-index: 990;
}
/* Topline with dropdowns */
.topline {
    display: flex;
  /*  gap: 15px;    */
    justify-content: center;
    align-items: center;
    background-color: #ADB6CC;
    padding: 10px;
    border-radius: 0px 0px 8px 8px;
    margin-bottom: 25px;
    z-index: 1000;
   /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);     */
}
.topline select {
    padding: 0px 12px;
    border-radius: 0px 0px 8px 8px;
    font-size: 1rem;
    border-radius: 5px;
  /*  border: 1px solid #B7C1C3;     */
    background-color: #ADB6CC;
    cursor: pointer;
    z-index: 900;
}
.topline2 {
    display: flex;
  /*  gap: 15px;    */
    justify-content: center;
    align-items: center;
    background-color: #ADB6CC;
    padding: 10px;
    border-radius: 0px 0px 8px 8px;
    margin-bottom: 0px;
    z-index: 1000;
   /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);     */
}
.topline2 select {
    padding: 0px 12px;
    border-radius: 0px 0px 8px 8px;
    font-size: 1rem;
    border-radius: 5px;
  /*  border: 1px solid #B7C1C3;     */
    background-color: #ADB6CC;
    cursor: pointer;
    z-index: 900;
}
/* Three-column layout */
.columns {
    display: grid;
    grid-template-columns: 15% 65% 1fr;
    gap: 20px;
    margin-top: 30px;
    z-index: 500;
}
.columns2 {
    display: grid;
    grid-template-columns: 15% 65% 1fr;
    gap: 20px;
    margin-top: 160px;
    z-index: 500;
}
/* Individual columns */
.column1 {
    background-color: #ADB6CC;
    padding: 10px;
    border-radius: 0px;
    min-height: 200px;
    justify-content: center;
    align-items: center;
    text-align: center;
  /*  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);   */
    z-index: 500;
}
.column2 {
    background-color: #ADB6CC;
    color: #000000;
    padding: 20px;
    border-radius: 8px 8px 8px 8px;
    min-height: 200px;
  /*  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);   */
    z-index: 500;
}
.column3 {
    background-color: #ADB6CC;
    padding: 10px;
    border-radius: 0px;
    min-height: 200px;
    justify-content: center;
    align-items: center;
    text-align: center;
   /*  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);   */
    z-index: 500;
}
.button-container2 {
    justify-content: left;
    gap: 15px;
    text-align: center; /* Centers inline-level content horizontally */
    flex-wrap: wrap; /* Allows buttons to wrap to the next line if space is insufficient */
    flex-direction: column;
    z-index: 910;
}
.button-14 {
    width: 165px;
    align-items: center;
    background-color: white;
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
    color : #3D36FF;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Helvetica, sans-serif;
    justify-content: center;
    line-height: 20px;
    height: 40px;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    vertical-align: center;
}

.button-14:disabled {
   width: 165px;
    align-items: center;
    background-color: white;
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
    color : #3D36FF;
    cursor: not-allowed;
    display: inline-flex;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Helvetica, sans-serif;
    justify-content: center;
    line-height: 20px;
    height: 40px;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    vertical-align: center;
}
.button-1 {
    width: 165px;
    align-items: center;
    background-color: #0000b6;
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
    color: #FFFF0F;
    cursor: pointer;
    display: inline-flex;
    font-size: 10px;
    font-weight: normal;
    font-family: Verdana, Helvetica, sans-serif;
    justify-content: left;
    line-height: 20px;
    height: 40px;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    touch-action: manipulation;
    user-select: none;
    vertical-align: center;
}
.button-1:hover,
.button-1:focus {
    background-color: #000000;
    font-size: 12px;
    color: #00FF00;
}
.button-1:active {
    background: #000b6;
    color: rgb(255, 255, 255, .7);
}

.button-1:disabled {
        cursor: not-allowed;
        background: rgba(0, 0, 0, .08);
        color: rgba(0, 0, 0, .3);
}
.button-2 {
        width: 165px;
        align-items: center;
        background-color: #006400;
        border: 0;
        border-radius: 8px;
        box-sizing: border-box;
        color: #FFFF0F;
        cursor: pointer;
        display: inline-flex;
        font-size: 10px;
        font-weight: normal;
        font-family: Verdana, Helvetica, sans-serif;
        justify-content: left;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
        padding: 0px;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        touch-action: manipulation;
  /*   transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;  */
        user-select: none;
        vertical-align: middle;
}

.button-2:hover,
.button-2:focus {
        background-color: #000000;
        font-size: 14px;
        color: #fff;
}

.button-2:active {
        background: #000b6;
        color: rgb(255, 255, 255, .7);
}

.button-2:disabled {
        cursor: not-allowed;
        background: rgba(0, 0, 0, .08);
        color: rgba(0, 0, 0, .3);
}
.button-4 {
        width: 165px;
        align-items: center;
        background-color: #B7C1C3;
        border: 0;
        border-radius: 8px;
        box-sizing: border-box;
        color: #783839;
        cursor: pointer;
        display: inline-flex;
        font-size: 10px;
        font-weight: bold;
        font-family: Verdana, Helvetica, sans-serif;
        justify-content: left;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
        padding: 0px;
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        touch-action: manipulation;
        user-select: none;
        vertical-align: middle;
}

.button-4:hover,
.button-4:focus {
    background-color: #B7C1C3;
    font-size: 14px;
    color: #fff;
}

.button-4:active {
    background: #B7C1C3;
    color: rgb(255, 255, 255, .7);
}

.button-4:disabled {
    cursor: not-allowed;
    background: rgba(0, 0, 0, .08);
    color: rgba(0, 0, 0, .3);
}
.button7-container {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers buttons horizontally */
    flex-wrap: wrap;
    gap: 10px; /* Or use margin on the buttons themselves */
    z-index: 500;
}
.button-7 {
 //   margin-right: calc((100% - (4 * 100px)) / 2);
    width: 165px;  //width: 25%;
    align-items: center;
    background-color: #000000;
    border: 0;
    border-radius: 100px;
    box-sizing: border-box;
    color: #B7C1C3;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: center;
    line-height: 20px;
    height: 50px;
 //   overflow: hidden;
    padding: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    margin-bottom: 20px;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    //-webkit-user-select: none;
    vertical-align: middle;
    z-index: 500;
}
.button-7.tooltip2 {
    justify-content: center;
    align-items: center;
    position: relative;
    display: inline-flex;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    z-index: 500;
}

/* Tooltip text */
.button-7.tooltip2 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #FFFF00;
    color: #000;
    font-size: 10px;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

/* Position the tooltip text */
    position: absolute;
    z-index: 500;
    bottom: 0%;
    right: 110%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.button-7.tooltip2 .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;  */
    right: 10%;
    z-index: 500;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FFFF00 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.button-7.tooltip2:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 500;
}
.button-8 {
 //   margin-right: calc((100% - (4 * 100px)) / 2);
    width: 165px;  //width: 25%;
    align-items: center;
    background-color: #000080;
    border: 0;
    border-radius: 100px;
    box-sizing: border-box;
    color: #ADB6CC;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: center;
    line-height: 20px;
    height: 50px;
 //   overflow: hidden;
    padding: 0px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    margin-bottom: 20px;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    user-select: none;
    //-webkit-user-select: none;
    vertical-align: middle;
    z-index: 500;
}
.button-8.tooltip2 {
    justify-content: center;
    align-items: center;
    position: relative;
    display: inline-flex;
    z-index: 500;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.button-8.tooltip2 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #FFFF00;
    color: #000;
    font-size: 10px;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

/* Position the tooltip text */
    position: absolute;
    z-index: 500;
    bottom: 0%;
    right: 110%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}

/* Tooltip arrow */
.button-8.tooltip2 .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;  */
    right: 10%;
    z-index: 500;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FFFF00 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.button-8.tooltip2:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 500;
}
.button-9 {
    width: 165px;
    align-items: center;
    background-color: #66777A;
    border-radius: 8px;
    box-sizing: border-box;
    color: #FFFF0F;
    cursor: pointer;
    display: inline-flex;
    font-size: 10px;
    font-weight: normal;
    font-family: Verdana, Helvetica, sans-serif;
    justify-content: left;
    line-height: 20px;
    height: 40px;
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    touch-action: manipulation;
    user-select: none;
    vertical-align: middle;
}
.button-9:hover,
.button-9:focus {
    background-color: #000000;
    font-size: 12px;
    color: #ffffff;
}

.button-9:active {
    background: #000b6;
    color: rgb(255, 255, 255, .7);
}

.button-9:disabled {
    cursor: not-allowed;
    background: rgba(0, 0, 0, .08);
    color: rgba(0, 0, 0, .3);
}
.logo {
        position: fixed; /* Positions the element relative to the viewport */
        top: 20px; /* Positions the logo at the top of the viewport */
        left: 20px; /* Positions the logo at the left edge of the viewport */
        width: auto; /* Sets the width automatically based on content */
        height: auto; /* Sets the height automatically based on content */
    /*  max-height: 120px;  Sets a maximum height
        max-width: 144px;  Sets a maximum width */
        padding: 0px;
        z-index: 990;
}
a:link {
    color: #ADB6CC;  /* Sets the color of unvisited links to red */
    text-decoration: none;
}
a:visited {
    color: #FFFF0F;
}
a:focus   { outline: 2px solid orange; }
.special-link:link {
    color: #0000FF;
    text-decoration: none;
}
ul.vertical {
        font: bold 11px Verdana;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 140px;
        background-color: #323232;
        overflow:hidden;
    /*  overflow-y:scroll;    */
    /*  position: auto;  Make it stick, even on scroll */
    /*  overflow: auto;  Enable scrolling if the sidenav has too much content */
}
li.vertical2 a {
        font: bold 10px Verdana;
        display: block;
        color: #000000;
        padding: 8px 16px;
        border-bottom: 1px solid #778;
        text-decoration: none;
        background-color: #FF00CC;
}
li.vertical3 a {
        font: bold 10px Verdana;
        display: block;
        color: #000000;
        padding: 8px 16px;
        border-bottom: 1px solid #778;
        text-decoration: none;
        background-color: #33CC66;
}
li.vertical a {
        font: bold 10px Verdana;
        display: block;
        color: #b7c1c3;
        padding: 8px 16px;
        border-bottom: 1px solid #778;
        text-decoration: none;
}

/* Change the link color on hover */
li.vertical a:hover {
        background-color: #555;
        color: white;
}
@media print {
    body{ background-color:#FFFFFF; background-image:none; color:#000000 }
    /* Hide all columns by default */
    .column1 {
        display: none;
    }
    /* Reveal only the center column (assuming class .center) */
    .column2 {
        display: flex; /* or display: flex; / display: grid; depending on original layout */
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        }
    .column3 {
        display: none;
    }
}
/* Responsive behavior */
@media (max-width: 900px) {
    .columns {
        grid-template-columns: 1fr;
    }

    .topline {
        flex-direction: column;
        align-items: stretch;
    }
}