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

        .esri-time-slider {
            cursor: default;
            min-width: 200px;
            box-shadow: 0 1px 2px rgb(0 0 0 / 30%);
        }


        #timeSliderBrotes {
            opacity: 0.9;
            position: absolute;
            left: 55px;
            right: 10px;
            bottom: 50px;
        }

        #timeSliderAlertas {
            opacity: 0.9;
            position: absolute;
            left: 55px;
            right: 10px;
            bottom: 125px;
            margin-bottom: 20px;
        }

        .esri-slider__thumb {
            background-color: #242424;
            border: 1px solid #adadad;
            border-radius: 5px;
            height: 14px;
            left: -14x;
            position: absolute;
            top: -3px;
            touch-action: none;
            width: 5px;
            transition: transform 125ms ease-in-out;
            z-index: 1;
            }
            

        #infoDiv {
            opacity: 0.8;
            height: 200px;
            padding: 10px;
            width: 280px;
        }

        #infoDiv span {
            color: #ff0000;
            font-size: 12pt;
            font-weight: bolder;
        }

        #info {
            opacity: 0.9;
            height: 400px;
            padding: 20px;
            width: 480px;
        }

        /* legend */

        .esri-ui-corner .esri-expand .esri-widget--panel, .esri-ui-corner .esri-expand .esri-widget--panel-height-only, .esri-ui-corner .esri-component>.esri-widget--panel, .esri-ui-corner .esri-component.esri-widget--panel {
            width: 150px;
        }

        #myButtonBrotes {
            font-size: medium;
            font-weight: bold;
            color: #ff0000;
            border: 1px solid #242424;
            margin-top: -100px;
            display: flex;
            overflow: visible;
            position: absolute;
            z-index: 3;
            background-color: #242424;
            opacity: 0.8;
            left: 15px;
            box-shadow: 0 1px 2px rgb(0 0 0 / 30%);

        }

        #myButtonAlerta {
            font-size: medium;
            font-weight: bold;
            color: #ff0000;
            border: 1px solid #242424;
            margin-top: -100px;
            display: flex;
            overflow: visible;
            position: relative;
            z-index: 200;
            background-color: #242424;
            opacity: 0.8;
            left: 15px;
            box-shadow: 0 1px 2px rgb(0 0 0 / 30%);

        }

      

        .esri-icon-non-visible {
            color: #fcf9f9;            
            font-size: medium;
        }

        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .flex-container {
            height: 100%;
            display: flex;
            z-index: 1;
            background-color: #fcf9f9;

        }

        #viewDiv {
            flex: 2;
            padding: 0;
            margin: 0;
            z-index: 2;
        }

        .side-panel {
            flex: 1;
            padding: 1em;

            height: 50%;
            width: 50%;
        }

        .container {
            border-bottom: solid 1px rgb(209, 99, 99);
        }

        h3 {
            color: #ffa500;
        }

        .esri-feature__title {
            background-color: #aa1a1a;
            padding: 0.25em;
        }

        .esri-feature__size-container {
            background: #3a3838;
        }


        #rutaDiv {

            position: absolute;
            bottom: 240px;
            width: 50px;
            margin: 10px;
            z-index: 3;
            font-family: 'Arial';
            text-align: center;
            background-color: transparent;
        }

        

        .ruta {
            z-index: 4;
            margin-top: -255px;
            margin-right: -1910px;
            right: 2750px;
            background-color: #242424;
            color: #adadad;
            position: absolute;
            border: 1px solid #242424;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            height: 40px;
            width: 50px;

        }

        #ruta:hover {
            background-color: #303030;
            border-color: #303030;
            color: #ededed
        }

        #rutaDivMigrations {

            position: absolute;
            bottom: 198px;
            width: 50px;
            margin: 10px;
            z-index: 3;
            font-family: 'Arial';
            text-align: center;
            background-color: transparent;
        }

        .migrations {
            z-index: 4;
            margin-bottom: 360px;
            right: 2750px;
            background-color: #242424;
            color: #adadad;
            position: absolute;
            border: 1px solid #242424;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            height: 40px;
            width: 50px;

        }

        #migrations:hover {
            background-color: #303030;
            border-color: #303030;
            color: #ededed
        }

        #broteDiv {
            position: absolute;
            bottom: 360px;
            width: 50px;
            margin: 10px;
            z-index: 3;
            font-family: 'Arial';
            text-align: center;
            background-color: transparent;
        }

        #alertasDiv {
            position: absolute;
            bottom: 300px;
            width: 50px;
            margin: 10px;
            z-index: 3;
            font-family: 'Arial';
            text-align: center;
            background-color: transparent;
        }

        .logoINIA {
            width: 135px;
        }

        .logoMinisterio {
            width: 224px;
        }


        /* ZOOM BROTES */

        .icon-brotes {
            
            background-color: #242424;
            color: #ff4545;
            cursor: pointer;
            border: 1px solid #242424;
            width: 32px;
            height: 32px
        }

        .icon-brotes:hover {
            background-color: #303030;
            border-color: #303030;
            color: #ededed
        }

        .icon-brotes-Logo {
            
            background-color: #24242400;
            color: #ff454500;
            cursor: pointer;
            width: 22px;
        }

        /* ZOOM ALERTAS */

        .icon-alertas {
            
            background-color: #242424;
            color: #ff4545;
            cursor: pointer;
            border: 1px solid #242424;
            width: 32px;
            height: 32px
        }

        .icon-alertas:hover {
            background-color: #303030;
            border-color: #303030;
            color: #ededed
        }

        /* SCALE BAR */

        .esri-scale-bar__label {
            font-size: inherit;
            color: #ff0000;
            white-space: nowrap;
            font-weight: 600;
        }

        .esri-scale-bar__line--top {
            bottom: -8px;
            border-bottom: 2px solid #d1d1d1;
        }

        .esri-scale-bar__label-container--top {
            bottom: -6px;
        }

        /* ACTIVAR RUTAS */
        .icon-rutas {
            
            background-color: #242424;
            color: #33c8c8;
            cursor: pointer;
            border: 1px solid #242424;
            width: 32px;
            height: 32px;
            margin-left: -120px
        }

        .icon-rutas:hover {
            background-color: #303030;
            border-color: #303030;
            color: #ededed
        }

        .icon-rutas-Logo {
            
            background-color: #24242400;
            color: #ff454500;
            cursor: pointer;
            width: 22px;
            margin-left: -2px;
            margin-top: 2px;
        }

        

        /* ACTIVAR RUTAS europa */
        .icon-migrations{
            
            background-color: #242424;
            color: #33c8c8;
            cursor: pointer;
            border: 1px solid #242424;
            width: 32px;
            height: 32px;
            margin-left: -42px;
        }

        .icon-migrations:hover {
            background-color: #303030;
            border-color: #303030;
            color: #ededed
        }

        .esri-icon-down:before {
            content: "\e681";
            color: inherit;

        }

        .esri-search__input::-moz-placeholder {
            
            opacity: 0.1;
          }
        .esri-search--warning .esri-search__warning-menu {
            transition: opacity 125ms ease-in-out;
            visibility: visible;
            opacity: 0.1;
            max-height: inherit;
          }

        .esri-search__warning-menu {
            z-index: 1;
            font-size: 14px;
            opacity: 0.1;
        }

        .esri-widget--button:hover {
            background-color: #303030;
            color: red;
        }

        .esri-navigation-toggle:hover .esri-navigation-toggle__button, .esri-navigation-toggle:focus .esri-navigation-toggle__button {
            color: red;
        }