@font-face {
    font-family: 'roboto';
    src: url('../fonts/RobotoMono-Regular.ttf');
}

.disclaimer {
    padding: 10px;
    padding-left: 40px;
    padding-right: 50px;
    border-radius: 10px;
    position: fixed;
    left: 35%;
    top: 50px;
    height: 80vh;
    width: 60vw;
    background-color: #D9D9D9;
    color: black;
    font-family: 'roboto';
    z-index: 9999;
    transition: left 1s ease;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* column-count: 2; */

}


.close-button {
    font-size: 12pt;
    margin-bottom: 20px;
}

.disclaimer.show {
    left: calc(100% - 35px); /* Show only a part of the disclaimer, e.g., 50px */
  }

.disclaimer.hover:hover {
    left: calc(100% - 50px); 
}

.disclaimer-text {
    hyphens: auto;
    display: flex;
    column-gap: 20px; /* Space between the two columns */
    height: calc(100% - 50px); /* Adjust height to fit the disclaimer box */
}




.disclaimer-c1, .disclaimer-c2 {
    width: 50%; /* Each column takes up half the width */
    height: 100%; /* Set height to fill the available space */
    overflow-y: scroll; /* Enable individual scrolling for each column */
    padding-right: 15px; /* Add padding inside each column */
}

.disclaimer-a {
    font-size: 12pt;
    margin: 0 !important;
    padding: 0;
    text-decoration: underline;
    /* font-size: 12pt; */
    /* font-weight: bold; */
    /* margin-bottom: 10px; */
}


/* Close button */


.close-button span {
position: absolute;
top: 15px;
left: 20px;
cursor: pointer;
}

.close-icon, .rotated-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 1s ease;
}

.close-icon {
font-size: 20px;
opacity: 1; /* Initially visible */
}

.rotated-text {
font-size: 14px;
opacity: 0; /* Initially hidden */
transform: translate(-50%, -50%) rotate(90deg); /* Rotated 90 degrees */
}

/* When the disclaimer is visible, fade out the "X" and fade in the "Test" */
.disclaimer.show .close-icon {
opacity: 0;
}

.disclaimer.show .rotated-text {
opacity: 1;
top: 50%;
}


.modal {
    hyphens: auto;
    columns: 2;
    font-family: 'roboto';
    display: none; /* Hidden by default */
    position: fixed;
    font-size: 11pt;
    color: black;
    margin-bottom: 30px;
    left: 50%; /* Position to the right of the button */
    /* top: 12px; */
    height: fit-content;
    width: 500px;
    /* transform: translateY(-50%); Center the modal vertically */
    background-color: #D9D9D9;
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    padding: 10px;
    z-index: 9999999;
    /* white-space: nowrap; Prevent text from wrapping */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-items:hover .modal {
    display: block; /* Show modal on hover */
}