/* Stili schermo responsivi */

/* Cellulari */
@media screen and (max-width: 450px) {
  html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }

  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  p, div {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
  }

  tr td:first-child {
    white-space: nowrap;
  }

  #main {
    grid-template-columns: auto;
    grid-template-areas:
      "header"
      "position"
      "content"
      "sidebar"
      "footer";
  }

  #main,
  #wrap,
  #piepagina {
    width: 99%;
    margin: 1px auto;
    padding: 0;
  }

  #intestazione,
  #intestazione-home {
    background-position: 0 top !important;
    background-size: 100% auto !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  #intro-home,
  #intro,
  #intro h2 {
    padding-left: 0 !important;
    font-size: 95%;
  }

  #logo,
  #top-menu {
    margin-left: 1px;
  }

  #contenuto.wide,
  #contenuto {
    margin: 0 !important;
    padding: 0 !important;
  }

  #barra-laterale {
    width: 95%;
    height: auto !important;
    padding: 0 !important;
    margin: 1rem auto 1rem auto !important;
  }

  #piepagina {
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"] {
    width: 98% !important;
    max-width: 98% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.1rem;
    resize: horizontal;
  }

  input[type="number"] {
    width: 6rem !important;
  }

  textarea {
    max-width: 98% !important;
    width: 98%;
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 0 !important;
    margin-right: 1px !important;
    font-size: 1.1rem;
    resize: vertical;
  }

  #login input[type="text"],
  #login input[type="password"] {
    width: 15rem !important;
  }

  label {
    font-size: 1.1rem;
  }

  select[multiple] {
    min-width: 70%;
  }

  #contenuto table {
    width: 100%;
    max-width: 100%;
  }

  #contenuto table td {
    max-width: 150px;
    /* overflow: hidden; text-overflow: ellipsis; */
    white-space: wrap;
  }

  #contenuto ul,
  #contenuto ol,
  #barra-laterale ul {
    list-style-position: outside;
    text-indent: 0 !important;
  }

  #contenuto img,
  #contenuto video,
  #contenuto iframe {
    max-width: 99% !important;
  }

  #contenuto article img,
  #contenuto section img {
    max-width: 90%;
    height: auto;
    float: none !important;
    display: block;
    margin: 1em auto !important;
  }

  #contenuto section h2:first-child,
  #contenuto section h3:first-child,
  #contenuto section h4:first-child {
    width: 90%;
  }

  .listamc {
    column-count: 1;
    column-gap: normal;
  }

  #toc {
    width: 90%;
  }

  #posizione {
    width: 99% !important;
  }

  .pagination a {
    font-size: 105%;
  }

  .avviso-https {
    width: 95% !important;
  }

  #chart-box {
    width: 100%;
  }

  #dedica {
    width: initial;
  }

  #almanacco-home, .pagination {
    text-align: left !important;
  }


  /* Compatibilità con VoiceOver */

  #elenco-voci ul li::before,
  .lista-eventi ul > li {
    content: "\200B";
  }
}

/* Tablet e netbook */
@media screen and (min-width: 451px) and (max-width: 760px) {
  html {
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }

  :root {
    /*--border-color: white; */ /* debug */
  }

  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  p, div {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
  }

  #main {
    grid-template-columns: auto;
    grid-template-areas:
      "header"
      "position"
      "content"
      "sidebar"
      "footer";
  }

  #main,
  #wrap,
  #piepagina {
    width: 99%;
    padding: 0 !important;
    margin: 1px auto !important;
  }

  #contenuto {
  }

  #barra-laterale {
    width: 95%;
    padding: 0 !important;
    margin: 1rem auto 1rem auto !important;
  }

  #piepagina {
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"] {
    width: 98% !important;
    max-width: 98% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 1.1rem;
    resize: horizontal;
  }

  input[type="number"] {
    width: 6rem !important;
  }

  #login input[type="text"],
  #login input[type="password"] {
    width: 15rem !important;
  }

  label {
    font-size: 1.1rem;
  }

  #contenuto ul,
  #contenuto ol,
  #barra-laterale ul {
    list-style-position: outside;
    text-indent: 0 !important;
  }

  #contenuto.wide,
  #contenuto {
    margin: 0 !important;
    padding: 0 !important;
  }

  #contenuto section h2:first-child,
  #contenuto section h3:first-child,
  #contenuto section h4:first-child {
    width: 90%;
  }

  .listamc {
    column-count: 1;
    column-gap: normal;
  }

  #posizione {
    width: 90% !important;
  }

  #toc {
    width: 85% !important;
    font-size: medium;
  }

  .pagination a {
    font-size: 105%;
  }

  .avviso-https {
    width: 95% !important;
  }


  /* Compatibilità con VoiceOver */

  #elenco-voci ul li::before,
  .lista-eventi ul > li {
    content: "\200B";
  }
}


/* Desktop grandi */
@media screen and (min-width: 1000px) {
  #main, #wrap, #piepagina {
    width: 99% !important;
    max-width: 1280px !important;
    margin-left: auto;
    margin-right: auto;
  }

  #piepagina {
    overflow-x: hidden;
    text-align: center;
  }
}