/* SENHAS EM TEMPO REAL */

.main:first-child{
	margin-top: calc( var(--margin-over-map) + 2rem );
}

.senhas {
  
  * {
    font-family: "Open Sans";
  }
}

.servbottom .main .senhas .h4 {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 0;

  span {
    font-weight: 400;
    font-size: 13px;
    text-transform: none;
    margin-left: 20px;
    color: var(--grey-500);
    font-style: italic;
  }
}

.senhas .boxes {
  margin-top: 20px;

  .senhaslot {
    position: relative;
    float: left;
    width: 32.5%;

    &.quarter {
      width: 25%;
    }

    &.half {
      width: 50%;
    }

    &.full {
      width: 100%;
    }

    .box {
      position: relative;
      width: 120px;
      height: 120px;
      margin: 10px auto;
      padding-top: 1px;

      .circvazio {
        position: absolute;
        width: 105px;
        height: 105px;
        border: 2px solid #ccc;
        z-index: 1;
        border-radius: 50%;
        top: 7px;
        left: 7px;
      }

      .circulo {
        position: absolute;
        z-index: 2;
        width: 100px;
        height: 100px;
      }
    }

    p {
      text-align: center;
      color: #666;
      font-size: 12px;
    }

    .h5 {
      margin: 35px auto 0px auto;
      padding-bottom: 3px;
      border-bottom: 1px solid #ccc;
      font-weight: 700;
      text-align: center;
      color: #222;
      font-size: 20px;
      width: 60px;
    }

    &.senhaA .h5 span.senha {
      color: #2C9D36;
    }

    &.senhaB .h5 span.senha {
      color: #0060A9;
    }

    &.senhaC .h5 span.senha {
      color: #49466C;
    }

    
  }
}

.detalheservico-portlet {
  .progress {
    height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #cae2ba;
    background-image: none;
    border-radius: 3px;
    float: left;
    width: 100%;

    /* width: calc(100% - 50px); */
  }

  .progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #659c41;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
  }

  .temp-med {
    position: absolute;
    margin-bottom: 0;
    text-align: right;
    color: #000000;
    right: 5px;
  }
}

.boxes {
  .title {
    margin-bottom: 25px;
    position: relative;
    overflow: auto;

    .horario {
      font-weight: 400;
      font-size: 13px;
      color: #666;
      font-style: italic;
      text-transform: lowercase;
      margin: 0 0 0 20px;
    }

    .estado {
      font-weight: 600;
      font-size: 13px;
      color: #666;
      font-style: italic;
      text-transform: capitalize;
      margin: 10px 0 0 20px;
    }

    .esp_lbl {
      font-size: 13px;
      margin-left: 20px;
      color: #666;
      font-weight: 400;
    }

    .esp_num {
      color: #666;
      font-weight: 600;
    }

    .senha {
      font-weight: 700;
      color: #222;
      font-size: 20px;
      margin: 0;
      width: 100%;
      text-align: center;
      position: absolute;
      padding: 27.5% 0;
    }
  }

  .box {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0;
    float: left;

    .circvazio {
      position: absolute;
      width: 76px;
      height: 76px;
      border: 2px solid #ccc;
      z-index: 1;
      border-radius: 50%;
      top: 0px;
      left: 0px;
    }
  }

  .box-info {
    float: left;
  }

  .title {
    &.A .senha .letter, &.B .senha .letter, &.C .senha .letter, &.D .senha .letter, &.E .senha .letter, &.F .senha .letter, &.G .senha .letter {
      color: #8b0000;
    }

    &.A #progress-bar {
      background-color: #0060A9;

      /*background-color: #49CC55;*/
    }

    &.B #progress-bar {
      background-color: #0060A9;

      /*background-color: #0090FE;*/
    }

    &.C #progress-bar {
      background-color: #0060A9;

      /*background-color: #6C689D;*/
    }

    &.D #progress-bar {
      background-color: #0060A9;

      /*background-color: #908DB5;*/
    }

    &.E #progress-bar {
      background-color: #0060A9;

      /*background-color: #72A4F9;*/
    }

    &.F #progress-bar {
      background-color: #0060A9;

      /*background-color: #00CC56;*/
    }

    &.G #progress-bar {
      background-color: #0060A9;

      /*background-color: #2996BE;*/
    }
  }
}

.localactions {
	--bg-bola-color: var(--grey-400);
	--bola-font-size: 1.2rem;
	
	.greenbtn:hover,
	.greenbtn:focus {
		--bg-bola-color: #26872E;
		--bola-font-size: 1.5rem;
	} 
	.bluebtn:hover,
	.bluebtn:focus {
		--bg-bola-color: #0060A9;
		--bola-font-size: 1.5rem;
	}
	.bola {
		background-color: var(--bg-bola-color);
		height: 3rem;
		width: 3rem;
		color: var(--bs-white);
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-align-items: center;
		border-radius: 50%;
		font-size: var(--bola-font-size);
		transition: font-size .3s;
	}
	
} 

.infocenter {
	.columns {
		columns: 3;
		column-gap: 4rem;
		
		li {
			break-inside: avoid-column;
		}
	}
}

.moradas li ul {
  list-style-type: "\f132";
}
.moradas li ul li::marker {
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  color: var(--bs-link-color);
}
.moradas .title {
  background: #fff;
  font-weight: 400;
  font-size: 1em;
  color: var(--grey-400);
  text-transform: uppercase;
  margin-top: -0.8em;
  width: fit-content;
  padding-right: 1em;
  margin-bottom: 0.5em;
}
.moradas .title-sec {
  font-size: 0.9rem;
  color: var(--grey-400);
  font-weight: 700;
}

.nestecentro .title {
  background: #fff;
  font-weight: 400;
  font-size: 1em;
  color: var(--grey-400);
  text-transform: uppercase;
  margin-top: -0.8em;
  width: fit-content;
  padding-right: 1em;
  margin-bottom: 0.5em;
}