@font-face {
    font-family: "Title";
    src: url("./fonts/Play-Regular.ttf") format('truetype');
    font-display: swap;
}
@font-face {
    font-family: "Textpage";
    src: url("./fonts/Play-Bold.ttf") format('truetype');
    font-display: swap;
}
@font-face {
    font-family: "Buttons";
    src: url("./fonts/AGENCYB.ttf") format('truetype');
    font-display: swap;
}
body {
    background: rgba(0, 0, 0, .25) url('./images/iss47_islands.webp'); /*url('./images/Earth.jpg');*/
    background-blend-mode: darken;
    background-size: cover;
    background-attachment: fixed;
    font-family: "Title";
    color: white;
}
.container {
    width: 75%;
}



/* TOP NAVBAR MENU */
nav{
    z-index: 99;
    width: 100%;
    background: rgba(16, 16, 47, 0.2);
}
nav .wrapper{
    position: relative;
    max-width: 1300px;
    padding: 0px 30px;
    height: 70px;
    line-height: 70px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wrapper .logo a{
    color: #f2f2f2;
    font-size: 30px;
    font-weight: 600;
    text-decoration: none;
}
.wrapper .nav-links{
    display: inline-flex;
}
.nav-links li{
    list-style: none;
    position: relative;
}
.nav-links li a{
    color: #f2f2f2;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 9px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.nav-links li a:hover{
    background: #032f5b;
}
.nav-links .mobile-item{
    display: none;
}
.nav-links .drop-menu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #0a1d30;
    line-height: 45px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    z-index: 100;
    padding: 0;
    margin: 0;
}
.nav-links li:hover .drop-menu{
    transition: all 0.3s ease;
    top: 60px;
    opacity: 1;
    visibility: visible;
}
.drop-menu li a{
    display: block;
    padding: 0;
    text-align: center;
    line-height: 45px;
    color: #f2f2f2;
    font-weight: 400;
}
.wrapper .btn{
    display: none;
}
.wrapper .btn.close-btn{
    position: absolute;
    right: 30px;
    top: 10px;
}  
nav input{
    display: none;
}



/* BORDERS AND TABLES WITH FLEX CONTENT */
td {
    flex-grow: 1; /* Permette alle celle di espandersi uniformemente */
    height: 100%; /* Imposta l'altezza al 100% per garantire l'uguaglianza */
}
.table th, .table td {
    border-top: none;
}
tbody tr td span.indicators {
    /* Il tuo stile qui */
    font-family: "Textpage";
    src: url("./fonts/Play-Bold.ttf") format('truetype');
    font-display: swap;
    color: black;
}
tbody tr td span.indicatorsw {
    /* Il tuo stile qui */
    font-family: "Textpage";
    src: url("./fonts/Play-Bold.ttf") format('truetype');
    font-display: swap;
    color: white;
}



/* MODAL BANNERS (WHEN EXECUTING CODES) */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
.modal.is-open {
    display: block;
}


/* TEXT BOXES */

.par-input {
    padding: 5px 5px;
    font-size: 15px;
    border-width: 1px;
    border-color: #212dda;
    background-color: #000000;
    color: #ffffff;
    border-style: solid;
    border-radius: 20px;
    box-shadow: 0px 0px 5px rgba(33,45,218,.75);
    text-shadow: 0px 0px 5px rgba(66,66,66,.75);
}
.par-input:focus {
    outline:none;
}
.par-input:disabled {
    color: #808080;
}
.par-input-inst {
    padding: 5px 5px;
    font-size: 15px;
    border-width: 1px;
    border-color: #19a337;
    background-color: #000000;
    color: #ffffff;
    border-style: solid;
    border-radius: 20px;
    box-shadow: 0px 0px 5px rgba(20, 134, 58, 0.75);
    text-shadow: 0px 0px 5px rgba(66,66,66,.75);
}
.par-input-inst:focus {
    outline:none;
}
.par-input-inst:disabled {
    color: #808080;
}
.par-input-surf {
    padding: 5px 5px;
    font-size: 15px;
    border-width: 1px;
    border-color: #e6270e;
    background-color: #000000;
    color: #ffffff;
    border-style: solid;
    border-radius: 20px;
    box-shadow: 0px 0px 5px rgba(207, 20, 10, 0.75);
    text-shadow: 0px 0px 5px rgba(66,66,66,.75);
}
.par-input-surf:focus {
    outline:none;
}
.par-input-surf:disabled {
    color: #808080;
}


/* FILE SELECTOR */
label {
    box-shadow: inset 0px 1px 2px 0px #000000;
    background:linear-gradient(to bottom, #005db4 5%, #0008a8 100%);
    background-color: #005db4;
    border-radius: 7px;
    border: 1px solid #ffffff;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: "Buttons";
    font-size: 18px;
    padding: 8px 8px;
    text-decoration: none;
    text-shadow: 0px 1px 7px #528ecc;
}
label:hover {
    background:linear-gradient(to bottom, #0008a8 5%, #005db4 100%);
    background-color:#0008a8;
}
label:active {
    position: relative;
    top: 1px;
}


/* SELECT ELEMENTS */
.customselect {
    box-shadow:inset 0px 1px 2px 0px #000000;
    background:linear-gradient(to bottom, #a5a5a5 5%, #191919 100%);
    background-color:#a5a5a5;
    border-radius:14px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Buttons";
    font-size:18px;
    padding:5px 15px;
    text-decoration:none;
    text-shadow:0px 1px 7px #528ecc;
    width: "max-content";
}
.customselect:hover {
    background:linear-gradient(to bottom, #191919 5%, #a5a5a5 100%);
    background-color:#191919;
}
.customselect:active {
    position:relative;
    top:1px;
}


/* PRIMARY BUTTONS */
.btn-primary {
    box-shadow:inset 0px 1px 2px 0px #000000;
    background:linear-gradient(to bottom, #005db4 5%, #0008a8 100%);
    background-color:#005db4;
    border-radius:7px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Buttons";
    font-size:18px;
    padding:8px 24px;
    text-decoration:none;
    text-shadow:0px 1px 7px #528ecc;
}
.btn-primary:hover {
    background:linear-gradient(to bottom, #0008a8 5%, #005db4 100%);
    background-color:#0008a8;
}
.btn-primary:active {
    position:relative;
    top:1px;
}


/* SECONDARY (RESET) BUTTONS */
.btn-secondary {
    box-shadow:inset 0px 1px 2px 0px #000000;
    background:linear-gradient(to bottom, #faff75 5%, #eb4a00 100%);
    background-color:#faff75;
    border-radius:7px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Buttons";
    font-size:18px;
    padding:8px 24px;
    text-decoration:none;
    text-shadow:0px 1px 7px #528ecc;
}
.btn-secondary:hover {
    background:linear-gradient(to bottom, #eb4a00 5%, #faff75 100%);
    background-color:#eb4a00;
}
.btn-secondary:active {
    position:relative;
    top:1px;
}


/* ACTION! BUTTONS */
.btn-action {
    box-shadow:inset 0px 1px 2px 0px #000000;
    background:linear-gradient(to bottom, #75ff9e 5%, #015a17 100%);
    background-color:#75ff9e;
    border-radius:7px;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Buttons";
    font-size:18px;
    padding:8px 24px;
    text-decoration:none;
    text-shadow:0px 1px 7px #528ecc;
}
.btn-action:hover {
    background:linear-gradient(to bottom, #015a17 5%, #75ff9e 100%);
    background-color:#015a17;
}
.btn-action:active {
    position:relative;
    top:1px;
}


/* TABLES */
.custom-table {
    width: 80%; /* Set the table width as you need */
    margin: auto; /* Center the table */
}
.custom-col {
    width: 40%; /* Each column is 35% of the window width */
}
/* Custom CSS to remove borders and margins */
.no-borders {
    border: none !important;
}
.no-margins {
    margin: 0 !important;
}
.custom-table img[src="css/images/info.png"] {
    cursor: help; /* Added by EL */
}


/* SELECT MENUS */
select {
    padding: 5px 15px;
    font-family:"Buttons";
    font-size: 17px;
    border: 1px solid #ffffff;
    border-radius: 20px;
    background: linear-gradient(to bottom, #73efff 5%, #272c8f 100%);
    background-color: #73efff;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    appearance: none; /* Resetta lo stile del browser */
    -webkit-appearance: none; /* Per i browser basati su WebKit (come Chrome e Safari) */
    -moz-appearance: none; /* Per i browser basati su Gecko (come Firefox) */
    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* INFO ICON PROPERTIES */
.input-with-info {
    position: relative;
    display: inline-block;
}
.input-with-info .info-icon {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-color: #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold; /* You can adjust the font styles as needed */
}
.input-with-info .info-icon:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 1;
}


/* BUTTONS FOR FIGURE OPTIONS AND OTHERS */
.optionbutton {
	background:linear-gradient(to bottom, #000000 5%, #071780 100%);
	background-color:#000000;
	border-radius:23px;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:"Buttons";
	font-size:14px;
	padding:10px 15px;
	text-decoration:none;
}
.optionbutton:hover {
	background:linear-gradient(to bottom, #071780 5%, #000000 100%);
	background-color:#071780;
}
.optionbutton:active {
	position:relative;
	top:1px;
}


/* SELECTORS */
.custom-checkbox {
    display: none;
}
.switch {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: rgb(99, 99, 99);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(126, 126, 126);
    box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
}
.switch svg {
    width: 1.5em;
}
.switch svg path {
    fill: rgb(48, 48, 48);
}
.custom-checkbox:checked + .switch {
    box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
      0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
      0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
      0px 0px 5px rgb(151, 243, 255);
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(146, 180, 184);
}
.custom-checkbox:checked + .switch svg {
    filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));
}
.custom-checkbox:checked + .switch svg path {
    fill: rgb(255, 255, 255);
}