// Maps
.map {
   margin-bottom: 40px;
   .map__content {
      border: 1px solid #d5dbdb;
      position: relative;
      z-index: 1;

      .map-svg {
         background: none;
         background-size: contain;
         background-repeat: no-repeat;
         @include position(absolute, $top: 0, $left: 0, $height: 100%, $width: 100%);

         .map-svg-comprar {
            cursor: pointer;
            fill: #006cd8;
            transition: all 0.3s ease;
            &:hover,
            &:focus {
               fill-opacity: 0.6;
            }
         }

         .map-svg-comprar-selected {
            fill: $orange;
            fill-opacity: 0.8;
         }

         .map-svg-comprar-active {
            fill-opacity: 0.4;
         }

         .map-svg-inhabilitado {
            fill: url(#inhabilitado);
         }
      }
      img {
         width: 100%;
      }
   }
   .map__table {
      overflow-y: hidden;
      overflow-x: scroll;
   }
   .map__references {
      margin: 10px 0;
      li {
         font-size: 12px;
         margin-right: 15px;
         span {
            font-size: 12px;
            &:first-child {
               display: inline-block;
               @include border-radius(50%);
               margin-right: 5px;
               height: 10px;
               width: 10px;

               &.disp {
                  background: #5cb85c;
               }
               &.seleccion {
                  background: #e67e22;
               }
               &.bloq {
                  background: #e3e7e7;
               }
               &.otro {
                  background: #006cd8;
               }
               &.cortesia {
                  background: #d7328f;
               }
               &.res {
                  background: #f64848;
                  -webkit-mask: url(../assets/svg/ico-accesibility.svg) no-repeat 50% 50%;
                  mask: url(../assets/svg/ico-accesibility.svg) no-repeat 50% 50%;
               }
            }
         }
      }
   }
}

// Control map
.ol-control {
   @include position(absolute, $top: 10px, $left: 10px, $width: 30px);
   &.zoom {
      left: auto;
      right: 5px;
   }
   button {
      background: $blue;
      border: none;
      display: block;
      @include border-radius(3px);
      color: white;
      font-weight: 600;
      margin-bottom: 5px;
      &:hover,
      &:focus {
         background: darken($blue, 5%);
      }
   }
}

.ol-rotate {
   display: none;
}

.not-click {
   .map-svg-comprar {
      cursor: default !important;
      &:hover,
      &:focus {
         fill-opacity: 0.8 !important;
      }
   }
   .map-svg-comprar-active {
      &:hover,
      &:focus {
         fill-opacity: 0.4 !important;
      }
   }
}

.file-seats {
   margin: 0 auto;
   .table-box {
      overflow-x: auto;
      overflow-y: hidden;
   }
   td {
      white-space: nowrap;
      &.empty {
         background-color: #fff;
         height: 10px;
      }
      .esc {
         text-align: center;
         color: #fff;
         background-color: #7f8c8d;
         display: block;
         padding: 6px;
         margin: 0 auto;
         width: 200px;
      }
   }
   a,
   span {
      background: url("../assets/seat.png") no-repeat center center;
      display: inline-block;
      height: 16px;
      margin: 3px;
      width: 15px;
      vertical-align: middle;

      &.disp {
         background-color: #5cb85c;
      }
      &.vend {
         background-color: #d5dbdb;
      }
      &.bloq {
         background-color: #e3e7e7;
         &:hover,
         &:focus {
            cursor: not-allowed;
         }
      }
      &.res {
         background: url("../assets/accesibility.png") no-repeat center center #e64747;
         width: 16px;
      }
      &.seleccion {
         background-color: #e67e22;
      }
      &.pasillo {
         background-color: #fff;
      }
      &.otro {
         background-color: #006cd8;
         &:hover,
         &:focus {
            cursor: not-allowed;
         }
      }
      &.bloq-cortesia {
         background-color: #007fff;
      }
      &.novisible {
         background-color: #e3e7e7;
      }
      &.cortesia {
         background-color: #d7328f;
      }
   }
}

.select-row,
.no-select-row {
   background: url("../assets/svg/ico-select.svg") $blue no-repeat center center !important;
   border: none;
   border-radius: 50%;
   position: relative !important;
   margin: 0 !important;
   padding: 0;
   width: 16px !important;
   background-size: 12px !important;
}

.no-select-row {
   background: url("../assets/svg/ico-no-select.svg") $blue no-repeat center center !important;
   background-size: 12px !important;
}