.node.CEO rect {
  fill: #E30613;
}

.node.col00 rect { fill: #56BCB5 }
.node.col01 rect { fill: #1A345C}
.node.col02 rect { fill:  #213A8F}
.node.col03 rect { fill: #1275BB}
.node.col04 rect {  fill: #ED6A3D}
.node.col05 rect { fill:  #FAB522}
.node.col06 rect { fill:  #E30613}
.node.col07 rect {fill:  #CC4E98}
.node.col08 rect {fill:   #ED84A7}
.node.col09 rect { fill:  #008A5E}
.node.col10 rect { fill:  #98A1A7}

[lcn='top-management']>text,
.assistant>text {
    fill: #aeaeae;
}

[lcn='top-management'] circle,
[lcn='assistant'] {
    fill: #aeaeae;
}

.assistant>rect {
    fill: #ffffff;
}

.assistant [data-ctrl-n-menu-id]>circle {
    fill: #aeaeae;
}


:root {
  --white: #fff;
  --gray: #A1A8AC;
  --light-gray: #D9D9D9;
  --dark-gray: #98A1A7;
  --back: radial-gradient(circle, rgba(152,161,167,1) 0%, rgba(152,161,167,0.0) 100%);
  --red: #E30613;
  --red-light: rgba(227, 6, 19, 0.4);
  --blue: #1275BB;
  --green-water: #56BCB5;
  --orange: #ED6A3D;

  --perc: calc( (100vw + 100vh) / (1600 + 900) );
  --perc-width: calc(100vw / 1600);
  --perc-height: calc(100vh / 900);

  --g-shadow: 0px 2px 8px 0px rgba(152,161,167,0.5);
}



html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

  font-family: "Maven Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gray);
  background-color: var(--gray);
  z-index: 999999;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

#current { 
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;

  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center !important;

  background-color: var(--white);
  background-color: yellow;
  background: var(--back);
}

.page {
  position: relative;
  height: calc( 100% - 75 * var(--perc-height) );
  width: calc( 100% - 100 * var(--perc-width) );
  margin: 0 auto;
}

.page .container-fluid {
  position: relative;
  padding: 0;
}

.page > .container-fluid > .row {
  height: calc( 680 * var(--perc-height) );
  margin: 0;
}

/* Start navbar ------------------------------------------------------------- */

#footer {
  width: 100%;
  height: calc( 120 * var(--perc-height) );
  margin-top: calc( 25 * var(--perc-height) );
}

#navbar {
  width: 100%;
  border-radius: 30px;
  background-color: var(--white);
  padding: calc( 16 * var(--perc) );
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
  color: var(--dark-gray);

  z-index: 99;
}

#navbar a {
  text-decoration: none;
  color: var(--dark-gray);
  padding: 0;
  line-height: 1.2;
}

#navbar .nav-item {
  width: calc( 100% / 9 );
  text-align: center;
  font-size: calc(10 * var(--perc));
}

#navbar .material-symbols-outlined {
  font-size: calc(25 * var(--perc));
}

.nav-item-main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc( 120 * var(--perc) );
  height: calc( 120 * var(--perc) );
  margin-top: calc( -60 * var(--perc) );
  margin-left: calc( -60 * var(--perc) );
  border-radius: 50%;
  background-color: var(--white);
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#navbar-logo {
  width: calc( 74 * var(--perc) );
  height: auto;
} 

#notificaDipendenti {
  margin-left: calc( 20 * var(--perc-width) );
  opacity: 0;
}

#notificaDipendenti.show {
  opacity: 100%;
}

#navbar .nav-link.active {
  color: var(--blue);
  background-color: unset !important;
}

/* End navbar --------------------------------------------------------------- */

.colContainer {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.card {
  border-radius: calc( 20 * var(--perc) );
}

.card-body {
  padding: calc( 10 * var(--perc-height) ) calc( 10 * var(--perc-width) );
/*  padding: calc( 20 * var(--perc-height) ) calc( 20 * var(--perc-width) );*/
  display: flex;
  flex-direction: column !important;
}

.back-red {
  background-color: var(--red);
}

.back-blue {
  background-color: var(--blue);
}

.big-number {
  font-size: calc(50 * var(--perc));
  line-height: calc(50 * var(--perc));
  font-weight: 700;
}

.big-number-regular {
  font-size: calc(70 * var(--perc));
  line-height: calc(80 * var(--perc));
  font-weight: 400;
}

.text-10 {
  font-size: calc(10 * var(--perc));
}

.text-15 {
  font-size: calc(15 * var(--perc));
}

.plyr--video {
  border-radius: calc( 20 * var(--perc) )
}

.sliderImage {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1.414;
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

.mb {
  margin-bottom: calc( 25 * var(--perc-height) );
}

.blink {
  border: calc( 5 * var(--perc) ) solid var(--red);
  animation-name: blinkingRed;
  animation-duration: 1s;
  animation-iteration-count: 100;
}

@keyframes blinkingRed {
  50% {
    border-color: var(--red-light);
  }
}

.text-primary {
  color: var(--blue) !important;
}

/* Start swiper fullscreen -------------------------------------------------- */

#fullscreen-swiper {
  display: none;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

#fullscreen-swiper .swiper-slide {
  background: none;
  text-align: center;
  height: initial !important; 
}

#fullscreen-swiper .swiper-slide img {
  height: 80vh;
  width: auto;
}

#fullscreen-swiper-backdrop {
  background: rgba(0, 0, 0, 0.7);
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

#fullscreen-swiper-close {
  color: var(--white);
  cursor: pointer;
  position: absolute;
  top: calc(15 * var(--perc));
  right: calc(30 * var(--perc));
  z-index: 10000;
  text-align: center;
}

#fullscreen-swiper-close span {
  font-size: calc( 52 * var(--perc) );
  margin-bottom: 0;
}

.no-scroll {height: 100%; overflow: hidden}

#fullscreen-swiper .swiper-pagination-bullets {
  bottom: calc(10 * var(--perc));
}

#fullscreen-swiper .swiper-pagination-bullet {
  background: #fff;
  opacity: .5;
}

#fullscreen-swiper .swiper-pagination-bullet-active {
  background: var(--blue);
}

.swiper-pagination-bullet {
  width: calc( 40 * var(--perc) ) !important;
  height: calc( 40 * var(--perc) ) !important;
  text-align: center;
  line-height: calc( 40 * var(--perc) ) !important;
  font-size: calc( 18 * var(--perc) ) !important;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: var(--blue);
}

/* End swiper fullscreen -------------------------------------------------- */

/* Start dashboard ---------------------------------------------------------- */

#infoDataGiorno {
  width: 100%;
  height: 100%;
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#giornoEsteso, #mese {
  font-size: calc( 15 * var(--perc) );
}

#infoDataMese {
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#meteo-weather-icon {
  height: calc( 23 * var(--perc) );
  width: auto;
}

#infoDataVideo {
  width: 100%;
  height: 100%;
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#video {
  border-radius: calc( 20 * var(--perc) );
}

#infoDataFeed {
  width: 100%;
  height: 100%;
  background-color: var(--orange);
  padding: calc( 20 * var(--perc-height) ) calc( 20 * var(--perc-width) );
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#infoDataFeed .card-body{
  overflow: hidden;
  position: relative;
  padding: 0;
}

#feed {
  height: auto;
  max-width: 100%;
  text-align: left;
  position: absolute;
}

#infoDataOrario {
  height: 100%;
  font-weight: bolder; 
  background-color: var(--green-water);
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#infoDataOrario .card-body {
  display: flex;
  align-items: center !important;
  flex-direction: unset !important;
  justify-content: center !important;
}

#ora {
  font-size: calc( 56 * var(--perc) );
  line-height: 1;
}

#ora > span {
  color: var(--green-water);
}

#infoDataNewsInterne {
  width: 100%;
  height: 100%;
  padding: calc( 20 * var(--perc-height) ) calc( 20 * var(--perc-width) );
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#infoDataNewsInterne .card-body{
  overflow: hidden;
  position: relative;
  padding: 0;
}

#news {
  height: auto;
  max-width: 100%;
  text-align: left;
  position: absolute;
}

#news > div:first-child {
  /*  padding-top: calc( 100 * var(--perc-height) );*/
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateY(100%); }
  to { -moz-transform: translateY(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateY(100%); }
  to { -webkit-transform: translateY(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

.boxFeed {
  margin-bottom: calc( 30 * var(--perc) );
}

.boxNews {
  margin-bottom: calc( 30 * var(--perc) );
  min-height: 100%;
}

/* Start template circolari ------------------------------------------------- */

.circolari, .organigrammi {
  height: calc( 680 * var(--perc-height) );
  overflow-y: auto;
  border-radius: calc( 20 * var(--perc) );
  background-color: rgba(18, 117, 187, .5);
  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

.circolari li, .organigrammi li {
  background-color: unset;
  color: var(--white);
  font-size: calc( 16 * var(--perc) );
  cursor: pointer;
  border-radius: 0 !important;
}

.circolari li.active, .organigrammi li.active {
  background-color: var(--white);
  color: rgba(18, 117, 187, .5);
  font-size: calc( 16 * var(--perc) );
  font-weight: 700;
  border: 0;
}

.swiper {
  max-height: calc( 680 * var(--perc-height) );
}

.swiper .swiper-slide {
  height: calc( 680 * var(--perc-height) );
  width: auto;
}

/* End template circolari --------------------------------------------------- */

/* Start Pagina Cerca ------------------------------------------------------- */

#query {
  font-size: calc( 24 * var(--perc) );
  border-radius: 50px;
  text-transform: uppercase;
  padding-left: calc( 17 * var(--perc) );
  padding-right: calc( 17 * var(--perc) );

  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

#tastiera {
  margin: calc( 39 * var(--perc-height) ) 0;
} 

.inputTastiera {
  width: 15%;
  margin: 1% 0 !important;
  text-align: center;
  background-color: var(--light-gray);
  font-size: calc( 28 * var(--perc) );

  -webkit-box-shadow: var(--g-shadow);
  box-shadow: var(--g-shadow);
}

.inputTastiera#inputSpazio {
  width: 78%;
}

.inputTastiera#inputSpazio .material-symbols-outlined {  
  line-height: 0px;
  font-size: 88px;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 88
}

.inputTastiera#inputCancella {
  width: auto;
}

.inputTastiera#inputCancella .material-symbols-outlined {
  font-size: 48px;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48
}

#risultatiRicerca {
  position: relative;
}

#risultatiRicerca .swiper-slide {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: calc(((680 * var(--perc-height)) - 20px) / 2) !important;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

#risultatiRicerca .swiper-zoom-container {
  flex-direction: column !important;
}

#risultatiRicerca .swiper-slide .sliderImage {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: calc( ( (680 * var(--perc-height)) - 40px - ( 40 * var(--perc-height) ) ) / 2) !important;
}

#risultatiRicerca .swiper-slide .title { 
  max-height: calc( 40 * var(--perc-height) );
  font-weight: bold;
  font-size: calc( 14 * var(--perc) );
}

.swiper-grid-column>.swiper-wrapper {
  flex-direction: row !important;
}

#risultatiRicerca .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
}

#risultatiRicerca .swiper-pagination {
  bottom: 0 !important;
}

.loadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  backdrop-filter: blur(2px);
}

/* End Pagina Cerca --------------------------------------------------------- */

/* Start Organigramma ------------------------------------------------------- */

#sliderOrganigramma .sliderImage, 
div[data-id-slider="sliderOrganigramma"] .sliderImage {
  aspect-ratio: initial;
}

/* End  Organigramma -------------------------------------------------------- */

/* Start Archivio ----------------------------------------------------------- */

.archivioAnnualita {
  text-align: center;
  height: calc(((680 * var(--perc-height)) - var(--bs-gutter-y) - var(--bs-gutter-y)) / 3) !important;
  cursor: pointer;
}

.archivioAnnualita .card-body {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center !important;
}

.archivioMese {
  text-align: center;
  height: calc(((680 * var(--perc-height)) - var(--bs-gutter-y) - var(--bs-gutter-y)) / 3) !important;
  cursor: pointer;
}

.archivioMese .card-body {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center !important;
}

/* End  Archivio ------------------------------------------------------------ */ 

.swiper-pagination-bullet-active {
  background: var(--blue) !important;
}

#risultatiArchivioContainer {
  display: flex;
  align-items: center;
}

.templateCircolari:not(#organigramma) .container-fluid > .row {
  display: flex;
  align-items: center;
} 

.noResults {
  display: flex;
  justify-content: center;
  width: 100%;
}