html{
  font-size: 16px;
}
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: #2C6494;
}
body.homepage{
  font-size: 1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #FFF;
  height: 100vh;
  overflow: hidden;
}
img{
  display: block;
  margin: auto;
  max-width: 100%;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2.5rem;
  flex-wrap: wrap;
  padding: 0.3125rem 3.75rem ;
  background: #235988;
}

.back-icon{
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0px 3px 6px 0px rgb(255 255 255  / 16%);
  background: #FFF;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .icons{
  display: flex;
  gap: 1rem;
  
}
header .icons .icon{
  display: inline-block;
  width: 4.75rem;
  height: 4.75rem;
  border:2px solid rgba(198 , 236 , 255,50%);
  background: #FFF;
  border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -ms-border-radius: 9px;
  -o-border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-weather img{
  display: inline-block;
}
.date-weather > div{
  display: flex;
  align-items: center;
  justify-content: center;
}
.date-weather > div > img{
  margin-right: 1rem;
  margin-left: 0;
}

main{
  height: calc(100vh - 16rem);
  overflow: auto;
}

main::-webkit-scrollbar{
  width: 15px;
  background: rgba(255, 255, 255, 40%);
}

main::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 100%);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

main .cards{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  padding:2.5em 4em;
}

main .cards .card , main .cards channel-card{
  background-color: #0E161A;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  width: calc(20% - 1em);
  margin-right: 0.5em;
  margin-left: 0.5em;
  margin-bottom: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .cards .card.active , main .cards channel-card.active{
  /* box-shadow: inset 0px 0px 10px rgb(255 255 255 / 100%) , 0px 0px 10px rgb(255 255 255 / 100%); */
  /* box-shadow: inset 0px 0px 10px rgb(0 0 0 / 16%) , 0px 0px 10px rgb(0 0 0  / 16%); */
  box-shadow: inset 0px 0px 8px rgb(255 255 255 / 90%), 0px 0px 25px rgb(255 255 255 / 90%);
}

main .cards .card .image{
  max-width: 10rem;
  margin: auto;
}

main .cards .card.active .image{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

video , iframe {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

main .cards .card a, main .cards channel-card a{
  width: 100%;
  height: 100%;
  padding: 4rem 3rem ;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer{
  font-size: 2.5rem;
  padding: 1.875rem 2.5rem;
  background: rgba(35, 89, 136, 90%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer > img{
  display: inline-block;
}

footer div.patient-data{
  flex-grow: 1;
  display: flex;
  gap: 2.875rem;
}

footer div.patient-data > div{
  display: flex;
  align-items: center;
}

.netsync-icon-container{
  max-width: 10rem;
  padding: 0.8rem 1rem;
  background-color: #FFF;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.header > .back{
  width: 16.25rem;
}

@media(max-width:1600px){
  main .cards .card , main .cards channel-card{
    width: calc(25% - 1em);
  }
}

@media(max-width:1350px){
  html{
    font-size: 13px;
  }
  main {
    height: calc(100vh - 20rem);
    overflow: auto;
  }
}

@media(max-width:1130px){

  .header > .back{
    width: initial;
  }
}

@media(max-width:1100px){

  main .cards .card , main .cards channel-card{
    width: calc(33% - 1em);
  }
}

@media(max-width:1080px){
  .header{
    flex-wrap: wrap;
    padding: 0.25em 1em;
  }

  .header > .back{
    flex-grow: 1;
    width: 50%;
    order: 1;
  }
  .header > .icons{
    width: 50%;
    order: 2;
  }
  .header > .date-weather{
    order: 3;
    width: 100%;
  }
  .header .icons{
    justify-content: flex-end;
  }
  main {
    height: calc(100vh - 24rem);
  }
}

@media(max-width:990px){
  .header{
    font-size: 2em;
  }

}

@media(max-width:768px){
  header {
    font-size: 1.8em;
  }
  header .date{
    flex-grow: 1;
    width: 100%;
  }

  main .cards .card , main .cards channel-card{
    /* padding: 4em 3em ; */
    width: calc(50% - 1em);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1em;
  }

}

@media(max-width:580px){
  html{
    font-size: 12px;
  }
  main .cards{
    padding: 2rem;
  }

  header .icons .icon , .back-icon{
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.25rem;
  }

  main .cards .card , main .cards channel-card{
    width:100%;
  }

  .date-weather > div > img{
    max-width: 4.5rem;
    margin-top: 1rem;
  }

  footer{
    font-size: 1.5rem;
    padding: 1rem;
  }
  footer .patient-data img{
    max-width: 2.5rem;
    margin-right: 0.5rem;
  }
  main {
    height: calc(100vh - 21rem);
  }

  footer div.patient-data{
    gap: 1rem;
  }

}

@media(max-width:488px){
  
  footer .netsync-icon{
    max-width: 5rem;
  }
}