@media only screen and (orientation: landscape) {
  i[type="icon"]{
    font-size: clamp(2rem, 2vw, 3rem);
  }

  .i-not-validate::before{
    font-size: clamp(0.8rem, 1vw, 1.5rem);
  }

  .i-validate::before{
    font-size: clamp(0.8rem, 1vw, 1.5rem);
  }

  .title{
    font-size: clamp(2rem, 2.25vw, 3.5rem);
  }

  .text{
    font-size: clamp(1rem, 1vw, 1.5rem);
  }

  .function-area-title{
    font-size: clamp(1.5rem, 1.75vw, 2.5rem);
  }

  .general-button{
    font-size: clamp(1rem, 1vw, 1.5rem);
  }

  .input-container > .input-desc{
    font-size: clamp(0.75rem, 0.75vw, 0.9rem);
  }

  .input-container > .input-data{
    font-size: clamp(1rem, 1vw, 1.5rem);
  }
}

@media only screen and (orientation: portrait) {
  i[type="icon"]{
    font-size: clamp(7rem, 8vw, 12rem);
  }

  .i-not-validate::before{
    font-size: clamp(2rem, 4vw, 6rem);
  }

  .i-validate::before{
    font-size: clamp(2rem, 4vw, 6rem);
  }

  .title{
    font-size: clamp(3.25rem, 7vw, 10rem);
  }

  .text{
    font-size: clamp(3rem, 4vw, 6rem);
  }

  .function-area-title{
    font-size: clamp(3.5rem, 5.5vw, 7.5rem);
  }

  .general-button{
    font-size: clamp(3rem, 6vw, 6rem);
  }

  .input-container > .input-desc{
    font-size: clamp(2rem, 3vw, 4rem);
  }

  .input-container > .input-data{
    font-size: clamp(3rem, 4vw, 6rem);
  }
}


  @font-face {
      font-family: 'Copperplate';
      font-style: normal;
      font-weight: normal;
      src: local('Copperplate'), url('/resources/fonts/text/Copperplate/Copperplate.woff') format('woff');
  }

  @font-face {
      font-family: 'Roboto Regular';
      font-style: normal;
      font-weight: normal;
      src: local('Roboto Regular'), url('/resources/fonts/text/Roboto/Roboto-Regular.woff') format('woff');
  }

  @font-face {
      font-family: 'Roboto Thin';
      font-style: normal;
      font-weight: normal;
      src: local('Roboto Thin'), url('/resources/fonts/text/Roboto/Roboto-Thin.woff') format('woff');
  }

  @font-face {
      font-family: 'Roboto Black';
      font-style: normal;
      font-weight: normal;
      src: local('Roboto Black'), url('/resources/fonts/text/Roboto/Roboto-Black.woff') format('woff');
  }

  @font-face {
      font-family: 'Fontawasome-solid';
      src: local('Fontawasome-solid'), url('/resources/fonts/icons/FontAwason/fa-solid-900.woff2') format('woff2');
  }

  /* animation */
  @keyframes rotate {
    from { -webkit-transform: rotate(0deg) }
    to { -webkit-transform: rotate(360deg) }
  }

  @keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
  }

  @keyframes leftEntrance {
    from {
        margin-left: -100%
    }

    to {
        margin-left: 0;
    }
  }

	/* icone */
  i[type="icon"]{
    cursor: pointer;
    font-style: normal;
  }

  i[type="icon"]:hover{
    color: gainsboro;
  }

  .icon-link{
    text-decoration: none;
    color: black;
  }


  .i-arrow::before{font-family: 'Fontawasome-solid'; content:'\f0da';}
  .i-filter::before{font-family: 'Fontawasome-solid'; content:'\f0b0';}
  .i-split::before{font-family: 'Fontawasome-solid'; content:'\f0c4';}
  .i-table::before{font-family: 'Fontawasome-solid'; content:'\f0ce';}
  .i-user-out::before{font-family: 'Fontawasome-solid'; content:'\f506';}
  .i-user-in::before{font-family: 'Fontawasome-solid'; content:'\f406';}
  .i-loading::before{font-family: 'Fontawasome-solid'; content:'\f1ce';}
  .i-loading{animation:rotate 3s  infinite linear;}

  .i-play::before{font-family: 'Fontawasome-solid'; content:'\f04b';}
  .i-pause::before{font-family: 'Fontawasome-solid'; content:'\f04c';}
  .i-stop::before{font-family: 'Fontawasome-solid'; content:'\f04d';}
  .i-slot{rotate: 180deg;}
  .i-slot::before{font-family: 'Fontawasome-solid'; content:'\f1da';}



	.i-registry::before{font-family: 'Fontawasome-solid'; content:'\f46d';}
	.i-search::before{font-family: 'Fontawasome-solid'; content:'\f002';}
	.i-update::before{font-family: 'Fontawasome-solid'; content:'\f110';}
	.i-syncro::before{font-family: 'Fontawasome-solid'; content:'\f2f1';}
  .i-modify::before{font-family: 'Fontawasome-solid'; content:'\f304';}
	.i-delete::before{font-family: 'Fontawasome-solid'; content:'\f00d';}
	.i-not-validate::before{font-family: 'Fontawasome-solid'; content:'\f057';color:red;}
	.i-validate::before{font-family: 'Fontawasome-solid'; content:'\f058';color:green;}

/* layout page */
body{
  margin: 0;
  padding: 0;
  width: 100%;
}

html{
  margin: 0;
  padding: 0;
  width: 100vw;
  width: 100dvw;
}

.page-container{
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  row-gap: 20px;
}

.central-section{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.side-menu{
  width: 30vw;
  height: 100%;
}

.data-section{
  width: 70vw;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}

/* regole generali */
.hidden{
    display: none !important;
}

/* color text shadow */
.red-box-shadow{
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(206,0,0,1) 47%, rgba(173,0,0,1) 67%, rgba(119,0,0,1) 100%);
}

.yellow-box-shadow{
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,5,1) 47%, rgba(227,214,49,1) 67%, rgba(255,192,0,1) 100%);
}

.green-box-shadow{
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(146,208,80,1) 47%, rgba(142,217,115,1) 67%, rgba(39,83,23,1) 100%);
}

.blue-box-shadow{
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(166,202,236,1) 47%, rgba(78,149,217,1) 67%, rgba(22,62,100,1) 100%);
}

.grey-box-shadow{
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(217,217,217,1) 47%, rgba(191,191,191,1) 67%, rgba(127,127,127,1) 100%);
}

/* testi */
.title{
  font-family: "Copperplate";
}

.function-area-title{
  font-family: "Copperplate";
  text-transform: uppercase;
  font-weight: bold;
  font-style: oblique;
  width: 70%;
  text-align: center;
  //text-shadow: 2px 1px 0 #7A7A7A;
  color: black;
}

/* bottoni */
.general-button{
  order: 1;
  background: rgba(21,96,130,1);
  font-family: "Roboto Black";
  font-style: oblique;
  color: white;
  text-shadow: 1px 2px 0 #7A7A7A;
  border: solid 3px rgba(242,242,242,1);
  padding: 10px;
  border-radius: 10px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}

.general-button:active{
  background: white;
  border: solid 3px rgba(21, 96, 130, 1);
  color: rgba(242, 242, 242, 1);
}

/* input */
.input-container{
  display: inline-flex;
  flex-direction: column;
  border: solid 1px gainsboro;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

.input-container > .input-desc{
  font-family: "Roboto Thin";
  background: gainsboro;
  width: fit-content;
  font-weight: bold;
  padding: 5px;
}

.input-container > .input-data{
  border: none;
  font-family: "Roboto";
}

.input-container > .input-data:focus{
  outline: none;
}

::file-selector-button {
  display: none;
}