#map {
    height: 400px;
}

h1 {
    color: #ff0000;
    font-family: arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 1px;
}
#map0 {
      height: 350px;
      margin-bottom: 5px;
}
#mapBox {
      height: 350px;
      margin-bottom: 5px;
}

#textareaContainer {
      display: flex;
      gap: 7px; /* Espaço entre as duas textareas */
      margin-top: 1px;
      margin-bottom: 5px;
}

#bairroText1, #bairroText2 {
      width: 48%; /* Cada textarea ocupará metade do espaço disponível */
}

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
      color: #0366d6;
}

.btn-primary {
      color: #fff;
      background-color: #1b6ec2;
      border-color: #1861ac;
}


.round {
      border: 1px solid !important;
      /*color: #fff !important;*/
      border-radius: 6px !important;
      text-decoration: none;
}

.roundt {
      border: 1px solid transparent !important;
      /*color: #fff !important;*/
      border-radius: 6px !important;
      text-decoration: none;
}


.oval {
      border: 1px solid transparent !important;
      /*color: #fff !important;*/
      border-radius: 61px !important;
      text-decoration: none;
}


.content {
      padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
      outline: 1px solid #26b050;
}

.invalid {
      outline: 1px solid red;
}

.validation-message {
      color: red;
}

#blazor-error-ui {
      background: lightyellow;
      bottom: 0;
      box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
      display: none;
      left: 0;
      padding: 0.6rem 1.25rem 0.7rem 1.25rem;
      position: fixed;
      width: 100%;
      z-index: 1000;
}

      #blazor-error-ui .dismiss {
            cursor: pointer;
            position: absolute;
            right: 0.75rem;
            top: 0.5rem;
      }


.spinner_loader {
      background-color: transparent;
      border: 12px solid #f3f3f3;
      border-radius: 50%;
      border-top: 12px solid #969696;
      border-bottom: 12px solid #969696;
      width: 135px;
      height: 135px;
      -webkit-animation: spin 600ms linear infinite;
      animation: spin 400ms linear infinite;
}



.nobull {
      list-style-type: none;
}



.svg-contato {
      width: 1em;
      height: 1em;
      fill: currentColor;
      color: red;
}

.svg-512 {
      width: 10em;
      height: 10em;
      fill: currentColor;
      color: red;
}

/*
    Avatars
   ------------------------
*/
.avatar {
      display: inline-block;
      position: relative;
      width: 3rem;
      height: 3rem;
      text-align: center;
      border: #e7e7e7;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      line-height: 3rem;
      max-width: 100%;
}

      .avatar.avatar-xs {
            width: 1.8rem;
            height: 1.8rem;
            line-height: 1.8rem;
      }

      .avatar.avatar-sm {
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
      }

      .avatar.avatar-md {
            width: 4rem;
            height: 4rem;
            line-height: 4rem;
      }

      .avatar.avatar-lg {
            width: 5rem;
            height: 5rem;
            line-height: 5rem;
      }

      .avatar.avatar-xl {
            width: 7rem;
            height: 7rem;
            line-height: 7rem;
      }

      .avatar.avatar-xxl {
            width: 14rem;
            min-width: 14rem;
            height: 14rem;
            line-height: 14rem;
      }

      .avatar.avatar-border-white {
            border: solid 2px #fff;
      }

.avatar-stacked {
      margin-left: -.5rem;
}


.my-reconnect-modal > div {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
      overflow: hidden;
      background-color: #fff;
      opacity: 0.8;
      text-align: center;
      font-weight: bold;
}

.components-reconnect-hide > div {
      display: none;
}

.components-reconnect-show > div {
      display: none;
}

.components-reconnect-show > .show {
      display: block;
}

.components-reconnect-failed > div {
      display: none;
}

.components-reconnect-failed > .failed {
      display: block;
}

.components-reconnect-rejected > div {
      display: none;
}

.components-reconnect-rejected > .rejected {
      display: block;
}

.lineContainer {
      overflow: hidden; /* clear the float */
      border: 1px solid #000;
      justify-content: space-between
}

      .lineContainer div {
            height: 10px
      }

.left {
      width: 100px;
      float: left;
      border-right: 1px solid #000
}

.right {
      overflow: hidden;
      float: right;
      background: #ccc
}

.product .badge {
      position: absolute;
      top: 1rem;
      left: 6rem;
      z-index: 999;
}

.badge {
      display: inline-block;
      padding: 0.35em 0.65em;
      font-size: 0.75em;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: 0.25rem;
}

      .badge:empty {
            display: none;
      }

.btn .badge {
      position: relative;
      top: -1px;
}

.badge-primary-light {
      color: #4650dd;
      background-color: theme-color-level("primary", -11);
}

.badge-secondary-light {
      color: #6c757d;
      background-color: theme-color-level("secondary", -11);
}

.badge-success-light {
      color: #28a745;
      background-color: theme-color-level("success", -11);
}

.badge-info-light {
      color: #17a2b8;
      background-color: theme-color-level("info", -11);
}

.badge-warning-light {
      color: #ffc107;
      background-color: theme-color-level("warning", -11);
}

.badge-danger-light {
      color: #dc3545;
      background-color: theme-color-level("danger", -11);
}

.badge-light-light {
      color: #f8f9fa;
      background-color: theme-color-level("light", -11);
}

.badge-dark-light {
      color: #111111;
      background-color: theme-color-level("dark", -11);
}

.bg-pentagon-home {
      background: url("../img/texture-turquoise-mini.png") center center repeat;
}

.popup-mapa {
      max-height: 200px; /* Defina a altura máxima desejada */
      overflow-y: scroll; /* Adicione a rolagem vertical */
      display: flex;
      flex-direction: column;
      align-items: center;
}


.red {
      background: #945a59;
      border-radius: 0.5em;
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      line-height: 1.0em;
      height: 1.0em;
      margin-right: 15px;
      text-align: center;
      width: 2.0em;
      position: relative;
}
      .red::after {
            content: '';
            position: absolute;
            bottom: -0.54em;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0.5em 0.5em 0 0.5em;
            border-style: solid;
            border-color: #945a59 transparent transparent transparent;
            width: 0;
            height: 0;
      }
.grey {
      background: #52857f;
      border-radius: 0.5em;
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      line-height: 1.0em;
      height: 1.0em;
      margin-right: 15px;
      text-align: center;
      width: 2.0em;
      position: relative;
}

      .grey::after {
            content: '';
            position: absolute;
            bottom: -0.54em;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0.5em 0.5em 0 0.5em;
            border-style: solid;
            border-color: #52857f transparent transparent transparent;
            width: 0;
            height: 0;
      }



.green {
      background: #5EA226;
      border-radius: 0.5em;
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      line-height: 1.0em;
      height: 1.0em;
      margin-right: 15px;
      text-align: center;
      width: 1.9em;
      position: relative;
}

      .green::after {
            content: '';
            position: absolute;
            bottom: -0.54em;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0.5em 0.5em 0 0.5em;
            border-style: solid;
            border-color: #5EA226 transparent transparent transparent;
            width: 0;
            height: 0;
      }



.blue {
      background: #5178D0;
      border-radius: 0.5em;
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      line-height: 1.0em;
      height: 1.0em;
      margin-right: 15px;
      text-align: center;
      width: 2.0em;
      position: relative;
}

      .blue::after {
            content: '';
            position: absolute;
            bottom: -0.54em;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0.5em 0.5em 0 0.5em;
            border-style: solid;
            border-color: #5178D0 transparent transparent transparent;
            width: 0;
            height: 0;
      }

.neutral-target {
      background: #5178D0;
      border-radius: 97%;
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      font-size: 1.0em;
      line-height: 1.0em;
      height: 1.0em;
      margin-right: 15px;
      text-align: center;
      width: 2em;
      position: relative;
      box-shadow: 0 0 10px rgba(255, 69, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.5);
}

      .neutral-target::before,
      .neutral-target::after,
      .neutral-target .arrow-top,
      .neutral-target .arrow-bottom {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
      }

      .neutral-target::before {
            top: 50%;
            left: -0.55em;
            border-width: 0.25em 0.55em 0.25em 0;
            border-color: transparent #5178D0 transparent transparent;
            transform: translateY(-50%);
      }

      .neutral-target::after {
            top: 50%;
            right: -0.55em;
            border-width: 0.25em 0 0.25em 0.55em;
            border-color: transparent transparent transparent #5178D0;
            transform: translateY(-50%);
      }

      .neutral-target .arrow-top {
            top: -0.65em;
            left: 50%;
            border-width: 0 0.25em 0.55em 0.25em;
            border-color: transparent transparent #5178D0 transparent;
            transform: translateX(-50%);
      }

      .neutral-target .arrow-bottom {
            bottom: -0.55em;
            left: 50%;
            border-width: 0.55em 0.25em 0 0.25em;
            border-color: #5178D0 transparent transparent transparent;
            transform: translateX(-50%);
      }