/*DOP*/
/*
    color: #003C69;
    background: #00ADD0;
*/

/*
v index
 body {
  --calcite-ui-brand: purple;
  --calcite-ui-brand-hover: rgb(94, 0, 94);
  --calcite-ui-brand-press: rgb(87, 0, 87);
}

body.calcite-theme-dark {
  --calcite-ui-brand: rgb(125, 0, 209);
  --calcite-ui-brand-hover: rgb(121, 0, 205);
  --calcite-ui-brand-press: rgb(141, 0, 225);
}

*/
:root {
--main-color-1: #003C69;
--main-color-2: #00ADD0;
--calcite-ui-focus-color: #00ADD0;
--calcite-ui-icon-color: white;
--calcite-action-indicator-color:rgb(212, 26, 229);
--calcite-ui-brand:  #003C69;
--calcite-ui-icon-color: #003C69;
--calcite-ui-text-1: #003C69;
--calcite-ui-text-2: rgb(27, 27, 27);

/*--calcite-ui-foreground-2: #003C69;*/

/*--calcite-ui-foreground-1:red !important;*/
/*--calcite-ui-foreground-2:fuchsia !important;*/
--calcite-ui-foreground-3:#00ADD0 !important;

--calcite-shell-panel-width: 400px;
--calcite-shell-panel-max-width: 900px;

/*--calcite-shell-panel-height: 200px;*/
/*--calcite-shell-panel-width: 500px;*/

--calcite-scrim-background: none !important;
}



calcite-scrim {
    
    background-color: var(--calcite-ui-background) !important;
    background-color: transparent !important;
}

#span-loading {    
    min-width: 25px;
    /*width: 50px;    */
    display: inline-block;
  }
#img-loading {
    margin: 0px;
    padding: 0px;
    height: 20px;   
    display: inline;     
  }

#span-BPloading {    
    min-width: 25px;
    /*width: 50px;    */
    display: inline-block;
  }
#img-BPloading {
    margin: 0px;
    padding: 0px;
    height: 20px;   
    display: inline;     
  }  

  #map-left-bottom{
    position: absolute;
    bottom: 20px;
    left: 15px;
    font-size: 15px;
    font-weight: bold;
  }

calcite-shell-panel {
    /*height: var(--calcite-shell-panel-height);*/
    /*width: var(--calcite-shell-panel-width);    */
    /*background-color: var(--calcite-ui-background);*/
    
}

calcite-fab{
       padding-left: 7px;
       padding-right: 7px;
}

#dot {
    height: 32px;
    width: 32px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor:default ;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
}
#dot  img{
height: 27px;
}

.dotFadeOut{
    opacity: 0%;
    transition: opacity 1s;
  }
.dotFadeIn{
    opacity: 100%;
    transition: opacity 0.5s;
  }

.dot1  {    
    animation: fadeIn 15s;
    -webkit-animation: fadeIn 15s;
    -moz-animation: fadeIn 15s;
    -o-animation: fadeIn 15s;
    -ms-animation: fadeIn 15s;
  }



#shell-action-right{
    width: 50px;
    background-color: var(--main-color-1);
    display: flex;
    align-items: flex-start;
}

#shell-action-right calcite-action-bar{
    border: none;
}

#information{
    color: var(--main-color-1);
}


#header-title {
    margin-left: 0rem;
    margin-right: 0rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding-left: 0rem;
    background-color: var(--main-color-1) !important;
    color:white;
  }
  
calcite-shell h2{
    padding: 0px;
    margin: 0px;
    padding-left: 17px !important;
  }

  .button{
    color:  green;
    background-color: var(--main-color-1) !important;
  }

  Xcalcite-action-bar{
    background-color: var(--main-color-1) !important;
  }

  Xcalcite-action{
    background-color: var(--main-color-1) !important;
  }


.esri-widget--button:hover {
    background-color: var(--main-color-1);
    color: white !important;
}

.esri-widget {
    color: var(--main-color-1) !important;
}
.esri-popup__header {
    /*background-color: var(--main-color-1) !important;*/
    /*color: white;*/
    color: var(--main-color-1) !important;
}
.esri-popup__pagination-icon, .esri-popup__footer calcite-icon {
    color: var(--main-color-1);
}

.esri-popup__header-title{
    color: var(--main-color-1);
}




.esri-ui-bottom-left .esri-expand__content,
.esri-ui-bottom-right .esri-expand__content {
  bottom: 20px;
}
.esri-ui-bottom-left {
    bottom: 20px;
    left: 0;
}
.esri-view-height-small .esri-ui-corner .esri-component .esri-expand__content {
       max-height: 540px;
}




.esri-view-width-xlarge .esri-popup__main-container,
.esri-view-width-large .esri-popup__main-container,
.esri-view-width-medium .esri-popup__main-container,
.esri-view-width-less-than-medium
{
  max-height: 400px !important;
  /*max-width: 300px !important;*/
  min-width: 540px !important;
}
.esri-popup__main-container {
       width: 540px !important;
   }

#filters{
       width: 470px !important;
       max-height: 540px;
       overflow-y: auto;
       position: relative;
       padding: 1px;
     }

calcite-panel{
    background-color: var(--main-color-1) !important;
    color: white;

}

calcite-label{
    padding: 10px;
    font-weight: bold;        
}

calcite-tab-title{
  padding: 4px;
  font-weight: bold;        
}

.esri-popup__action-text{
color: var(--main-color-1);       
font-weight: bold;
}

.button:focus{

}

:host([scale="m"]) .button {
    background: red;
}

:host([active]) .button, :host([active]) .button:hover, :host([active]) .button:focus, :host([active][loading]) .button {
    background-color: green;
    fill: fuchsia;
    color: blue;
}


.alert-icon{
    background-color: var(--main-color-1) !important;
}

.alert-close {
    background-color: var(--main-color-1) !important;
}

calcite-alert{
    color:rebeccapurple !important;
}


scalcite-tab-title:focus:has(> .container:focus){
  outline: none;
}


.esri-popup__button esri-popup__pagination-next{
background: #ffff0057 !important;
}

.esri-popup__pagination-icon, .esri-popup__footer calcite-icon{
color: red  !important;
}

#selectROK{
    position: absolute;
    top: 15px;
    left: 100px;
    z-index: 1000;
    padding:4px;
}