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

body {
    background-color: #fff;
    background-image: url("../img/website/logo.png");
    background-position: center;
    background-repeat: no-repeat; 
    background-size: auto 25vh;
}

#mySidebar{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
#botao {
    display: flex;
    font-size: 14px;
    cursor: pointer;
    background-color: #E4610F;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 25px;
    font-family: 'Arial';
    Box-shadow: none;
    border: none;
    text-align: center;
    margin: auto;
    position: relative;
    bottom: 15px;
}
#botao:hover {
    color: white;
    background-color: #d15e17;
    border: none;
}
#insert_pts_img {
    width: 180px;
    background-color: #ffffff;
    border-radius: 25px;
}
#insert_pts_button{
    width: 180px;
    background-color: #ffffff;
}

#logo_empresa {
    width: 185px;
    position: relative;
    bottom: auto;
    display: flex;
    text-align: center;
    margin: auto;
    /* padding: 15px; */
}

#selectCategory {
    font-family: Arial;
    height: 23px;
    padding: 0px 5px;
    font-size: 10px;
    overflow: auto;
    border-radius: 5px;
    border: none;
    background-color: #fff; 
    color: #E4610F;
    text-align: center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#side_logo_mapa {
    width: 60%;
    margin: auto;
}
#info_text{
    top: 50px;
    font-size: 12px;
    padding: 10px 15px 10px 15px;
    overflow: auto;
    height: 60%; 
    line-height: 1.5;
    color: #1D1D1D;
    padding: 10px;
    margin: 10px;
}
#sidebar_header{
    height: 10%;  
}
#sidebar_footer{
    height: 15%;  
    padding: 20px;
}

.esri-widget--button,
.esri-menu,
.esri-popup__main-container,
.esri-popup .esri-popup__pointer-direction,
.esri-popup .esri-popup__button,
.esri-button,
.esri-input,
.esri-widget a {
    background-color: #ffffff;
    color: #ff6600;
}

.esri-layer-list__item-actions-menu-item {
    background-color: #ffffff;
    color: #ff6600;
    padding: 5px;
}

.esri-widget--button:focus,
.esri-widget--button:hover,
.esri-layer-list__item-actions-menu-item:hover,
.esri-menu li:focus,
.esri-menu li:hover {
    background-color: #ff6600;
    color: #ffffff;
    border: none;
}
.esri-layer-list{
    background-color: white;
    border: none;
    padding: 5px 5px ;
    text-align: center;
}

.esri-button:focus,
.esri-button:hover {
    color: #fff;
    border: none;
}

.esri-search__input::-moz-placeholder {
    color: #000000;
    opacity: 1;
}

.esri-widget,
.esri-search__input:-ms-input-placeholder {
    color: #000000;
}

.esri-search__input::-webkit-input-placeholder {
    color: #000000;
}

.esri-legend__layer-caption {
    display: none;
}

.esriLegendLayerLabel,
.esriLegendServiceLabel,
.esriLegendService a {
    color: #000000;
}

.esri-legend--card__label-container {
    color: #000000;
}


/* popup scroll bar*/
/* width */
::-webkit-scrollbar {
    width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px lightgray; 
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #ff6600; 
    border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #9b3e00;    
}

/* ArcGIS API popup config*/
/* transparent bg-color to buttons inside esri popup */
.sassy-theme .esri-popup .esri-popup__button{
  background-color: rgba(255, 255, 255, 0.0);
}
/* transparent bg-color to elements inside esri popup */
.esri-popup .esri-widget {
  background-color: rgba(255, 255, 255, 0.0);
}
/* Adding a white bg with transparence to the whole bg-color of popup 
 * Adding also a border-radius
 */
.sassy-theme .esri-popup__main-container
{
  background-color: rgba(255, 255, 255, 0.92);
  color: rgb(255, 102, 0);
  border-radius: 5%;
  max-height: 85vh;
}
/* Adding a border-radius to match the main container */
.esri-ui .esri-popup {
  border-radius: 5%;
}
/* Styling the blurred shadow of the popup */
.esri-popup--shadow {
  box-shadow: 0 1px 20px rgba(0, 0, 0, .6);
}
.esri-popup__inline-actions-container, .esri-popup__footer{  
  display:none;  
}  


/* Size of buttons in view */
.esri-view-height-xsmall .esri-widget--button {
  width: 20px;
  height: 20px;
}
.esri-view-height-xsmall [class*="esri-icon"] {
  font-size: 12px;
}

.esri-view-height-small .esri-widget--button {
  width: 22px;
  height: 22px;
}
.esri-view-height-small [class*="esri-icon"] {
  font-size: 11px;
}

.esri-view-height-medium .esri-widget--button {
  width: 24px;
  height: 24px;
}
.esri-view-height-medium [class*="esri-icon"] {
  font-size: 12px;
}

.esri-view-height-medium .esri-widget--button {
  width: 26px;
  height: 26px;
}
.esri-view-height-medium [class*="esri-icon"] {
  font-size: 13px;
}

/* Size of the expand button in view */
.esri-expand {
  min-height: 15px;
  min-width: 15px;
}

/* The mobile configuration for the expand legend when it opens */
.esri-view-width-xsmall .esri-expand--auto .esri-expand__container--expanded{
  background: rgba(255, 255, 255, 0.95)
}

/* scale bar to not appear in front of legend for mobile view*/
.esri-scale-bar__bar-container
{
  z-index: 0;
}


/* New CSS J-edit */
.esri-popup__main-container {
    /* top: 35px; */
    right: 0;
    width: 100%;
    border-radius: 5%;
}

/* color configurations  */
.esri-widget--button {
    color: #E4610F;
    background-color: #ffff;
    border-radius: 5px;
    border: none;
}

.esri-button {
    color: #E4610F;
    border-color: #E4610F;
    background-color: #ffffff;
    border: none;
}

.esri-widget--button:focus,
.esri-widget--button:hover,
.esri-menu li:focus,
.esri-menu li:hover {
    background-color: #E4610F;
    color: #ffffff;
    border: none;
}

.esri-menu,
.esri-popup__main-container,
.esri-popup .esri-popup__pointer-direction,
.esri-popup .esri-popup__button,
.esri-input a {
    color: #E4610F;
    border-color: #E4610F;
    background-color: #ffffff;
}

.esri-button:hover {
    background-color: #E4610F;
    color: #ffffff;
}


/* ................................. */
/* buttons */
/* button info */
.openbtn {
    width: 122px;
    height: 20px;
}

.Actionbtn {
    font-size: 12px;
    cursor: pointer;
    color: #E4610F;
    background-color: #ffffff;
    padding: 0px;
    border: none;
    text-align: center;
    font-family: 'Arial';
}
.Actionbtn:hover {
    background-color: #E4610F;
    color: #ffffff;
    border: none;
}
#info_button{
    width: 20px;
    height: 20px;
}

/* 
.esri-view-height-medium {
    max-height: 200px;
}
.esri-view-height-greater-than-medium .esri-expand .esri-widget--panel,
.esri-view-height-greater-than-medium .esri-expand .esri-widget--panel-height-only,
.esri-view-height-greater-than-medium .esri-ui-corner .esri-component.esri-widget--panel,
.esri-view-height-greater-than-medium .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    max-height: 400px;
    width: 200px;
}
.esri-view-height-small .esri-expand .esri-widget--panel,
.esri-view-height-small .esri-expand .esri-widget--panel-height-only,
.esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel,
.esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    max-height: 250px;
    width: 200px;
} 
*/


/* style configurations */
.esri-widget {
    border-radius: 5px;
}

.esri-component {
    border-radius: 5px;
}

.esri-legend__layer-caption {
    display: none;
}

.esri-feature {
    border: none;
}
/* ................................. */

a:link {
    text-decoration: none;
    color: #555;
}

a:link,
a:visited {
    text-decoration: none;
    color: #555;
    text-decoration: none;
    display: inline-block;
}

a:-webkit-any-link {
    cursor: pointer;
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-style: initial;
    text-decoration-color: initial;
}

.esri-icon-layers:before {
    content: "Legenda";
    color: inherit;
    font-family: 'Arial';
}

.esri-icon-collection:before {
  content: "Camadas";
  color: inherit;
  font-family: 'Arial';
}

.esri-widget--button .esri-icon-layers:before {
    width: 15px;
}

/* The sidebar menu */
.sidebar {
    height: 100%;
    /* 100% Full-height */
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Stay on top */
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.92);
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 30px;
    /* Place content 60px from the top */
    transition: 0.4s;
    /* 0.5 second transition effect to slide in the sidebar */
    /* border: 1px solid black; */
    Box-shadow: 0 0 2px black;
    /* text-align: left; */
    margin: 0;
    width: 0%;
}

p{
    text-align: left;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
    color: #f1f1f1;
    border: none;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#wpp_image {
    width: 185px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
/* @media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }
    .sidebar a {
        font-size: 18px;
    }
    .esri-icon-layers:before{
        width: 40px;
        height: 40px;
    }
    #logo_empresa{
        bottom: auto;
        position: absolute;
        bottom: 10px;
    }
} */
/* @media screen and (max-width: 874px) {
    #logo_empresa{
        bottom: auto;
        position: absolute;
        
    }
    #info_text{
        font-size: 12px;
        padding: 10px 10px 10px 10px;
        overflow: auto;
        height: 60%; 
        line-height: 1.5;
        color: #1D1D1D;
        padding: 10px;
        margin: 50px;
    }
}
@media screen and (min-width: 600px) and (max-width: 874px) {
    #logo_empresa{
        bottom: auto;
        position: absolute;
        bottom: 10px;
        
    }
    #botao{
        top: 200px;
    }
}
@media screen and (min-width: 875px) and (max-width: 1100px){
    #logo_empresa{
        bottom: auto;
        position: absolute;
        
    }
     #sidebar_footer{
        height: 15%;  
        padding: 20px;
    }
    /* #info_text{
        font-size: 12px;
        padding: 10px 15px 10px 15px;
        overflow: auto;
        height: 60%; 
        line-height: 1.5;
        color: #1D1D1D;
        padding: 10px;
    } */
/* }
@media screen and (min-width: 1100px) and (max-width: 1200px){
    #logo_empresa{
        bottom: 100px;
        position: relative;
      
        
    } 
    #sidebar_footer{
        height: 15%;  
        padding: 20px;
    }
} */
/* @media screen and (min-width: 1201px) and (max-width: 1500px){
    #logo_empresa{
        bottom: auto;
        position: absolute;
       
        
    }
    #sidebar_footer{
        height: 30%;  
        padding: 20px;
    }
} */
@media screen and (min-width: 1901px) {
    #logo_empresa {
        width: 90%;
    }
    #wpp_image {
        width: 90%;
    }
}
@media screen and (min-width: 1801px) and (max-width: 1900px) {
    #logo_empresa {
        width: 200px;
    }
    #wpp_image {
        width: 200px;
    }
} 
@media screen and (min-width: 1000px) and (max-width: 1800px){
    #sidebar_footer{
        height: 30%;  
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media screen and (max-width: 1050px){
    #sidebar_footer{
        height: 30%;  
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #logo_empresa {
        width: 90%;
    }
    #wpp_image {
        width: 100%;
    }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* .esri-icon-layers:before {
        content: "\e659";
        color: inherit;
    } */
    .openbtn {
        width: 55px;
    }
    #botao {
        height: 25px;
        font-size: 12px;
    }
    #selectCategory {
        width: 55px;
    }
    p {
        font-size: 12px;
    }
}

/* MODAL */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #E4610F;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #E4610F;
    color: white;
}