@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");


:root {
    --red-close: #e81123;
    --red-close-hover: #d10011;
    --red-close-x: #fff;
    --text-size: 13px;
    --background-color: #333;
    --text: #666;
    --text-input: #fff;
    --text-input-shad: 1px 1px 1px rgba(0, 0, 0, 0.3);
    --header-bg: #000;
    --hero-bg: #333;
    --theme: #333333e1;
    --main-bg: #c9d2fa;
    --bnb-txt: #777;
    --bnb-txt-hover: #FFF;
    --nav-border:#222222;

    --wink-logo: url("../custom/logo.svg?v=xcache19");
    --header-shrink: #000;

    --notify-text-color:#f2f2f2;
    

        --label-txt-color:  #c3c3c3;
        
        --form-input-bg: #00000030;
        --form-input-boxshadow:  inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
        --form-input-boxshadow-focus: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
        --form-input-border: 1px solid rgba(0, 0, 0, 0.3);
        --form-option-bg: #000;
        --form-option-bg-highlight: #c3c3c3;
        --form-option-bg-disabled: #222222;
        --form-option-txt-disabled: hsla(214, 100%, 50%, 1);
        --form-option-txt-selected: #C80404;
        --form-txt: hsla(214, 100%, 100%, 1);
        --form-txt-focus: hsla(214, 100%, 95%, 1);
        --form-txt-hover: hsla(214, 100%, 90%, 1);
        --form-txt-active: hsla(214, 100%, 70%, 1);
        --form-txt-highlight: hsla(214, 100%, 80%, 1);
        --form-txt-selected: hsla(214, 100%, 80%, 1);
        --form-txt-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 

        --button-hover: #77777775;

        --bigstats-txt-color: #FFF;
        --bnb-border-top: #444;
        --bnb-txt: #777;
        --bnb-txt-hover: #FFF;

        --graph-title:#f2f2f2;
        --graph-title-size: 15px;
        --graph-txt:#777;
        --graph-txt-size: 11px;
        --graph-bg:#222;
        --graph-hgrid: #333;
        --graph-vgrid: #333;
        --graph-legend:#FFF;
        --graph-legend-size: 13px;

        --tab-font-color: #fff;
         --tab-font-color2: #CCC;
        --tab-border: #22222270;
        --tab-bg: #333333e1;
        --tab-bg2: #474747;
        --tab-bg3: #5e5e5e;
        --tab-bg-active: #000;
        --tab-bg-hover:   #444;   
        
        --darktable-head-bg: rgba(0, 0, 0, 0.3);
        --darktable-head-text: #f2f2f2;
        --darktable-row-a: rgba(0, 0, 0, 0.1);
        --darktable-row-a-text: #f2f2f2;
        --darktable-row-b: rgba(0, 0, 0, 0.2);
        --darktable-row-b-text: #f2f2f2;
        --darktable-row-highlight: #FFFF9180;
        --darktable-row-highlight-txt: #000000;
        --darktable-border: 1px solid rgba(0, 0, 0, 0.3);

        --modal-bg: #333333e1; /* Black w/ opacity */;
        --accent-font-color: #638ed4;
        --accent-font-hover: #a8c7fa;

        -webkit-tap-highlight-color: transparent; /* or rgba(0, 0, 0, 0) for Android - stops flashing on clicks */;

    --menu1: #1f1f1f;
    --menu2: #5e5e5e;
    --menu3: #080707;
    --vZe0jb: #a8c7fa;
    --nwXobb: #638ed4;
    --VuZXBd: #001d35;
    --uLz37c: #545d7e;
    --jINu6c: #001d35;
    --TyVYld: #0b57d0;
    --ZEpPmd: #c3d9fb;
    --QWaaaf: #020202;
    --DEeStf: #f5f8ff;
    --TSWZIb: #e5edff;
    --BRLwE: #d3e3fd;
    --gS5jXb: #dadce0;
    --Aqn7xd: #d2d2d2;
    
    --IXoxUe: #5e5e5e;
    --bbQxAb: #474747;
    --YLNNHc: #1f1f1f;
    --TMYS9: #0b57d0;
    --JKqx2: #1a0dab;
    --mXZkqc: #d2d2d2;
    --Nsm0ce: #0b57d0;
    --vdwxpe: #a8c7fa;
    --ywz01c: #fbbc04;
    --XKMDxc: #f3f5f6;
    --aYn2S: #f3f5f6;
    --Lm570b: #dee1e3;
    -webkit-tap-highlight-color: transparent; /* or rgba(0, 0, 0, 0) for Android - stops flashing on clicks */;

    #theburger {
        stroke: #ccc;
        fill: #ccc;
        }
    #theburger:hover {
        stroke: #fff;
        fill: #fff;
        }
    }

    .light-mode {
        background-color: #f2f2f2;
        color: #000;
        --header-shrink: #fff;
        --text: #000;
        --text-input: #000;
        --text-input-shad: none;
        --header-bg: #FFF;
        --hero-bg: #CCC;
        --theme: #FFFFFFe1;
        --main-bg: #c9d2fa;
        --bnb-txt: #777;
        --bnb-txt-hover: #000;
        --header-bg-color: #e03737;
        --header-font-color: #666;  
        --subnav-font-color: #FFFFFF;

        --nav-border:#f0eeee;

        --label-txt-color:  #666;
        --notify-text-color:#444;

        --button-hover: #dee1e3;

        --form-input-bg: #FFFFFF80;
        --form-input-boxshadow:  inset 0 -5px 45px rgba(225, 225, 225, 0.5), 0 1px 1px rgba(255, 255,255, 0.9);
        --form-input-boxshadow-focus: inset 0 -5px 45px rgba(229, 241, 255, 0.8), 0 1px 1px rgba(255, 255,255, 0.9);
        --form-input-border: 1px solid rgba(100, 100, 100, 0.4);
        --form-option-bg: #FFF;
        --form-option-bg-highlight: #c3c3c3;
        --form-option-bg-disabled: hsla(214, 100%, 36%, 1);
        --form-option-txt-disabled: hsla(214, 100%, 95%, 1);
        --form-option-txt-selected: hsla(214, 100%, 36%, 1);

         --form-txt: #444;
        --form-txt-focus: hsla(214, 100%, 36%, 1);
        --form-txt-hover: hsla(214, 100%, 19%, 1);
        --form-txt-active: hsla(214, 100%, 36%, 1);
        --form-txt-highlight: hsla(214, 100%, 36%, 1);
        --form-txt-selected: hsla(214, 100%, 36%, 1);
        --form-txt-shadow: 1px 1px 1px rgba(7, 5, 5, 0.1);

        --tab-font-color: #777;
        --tab-font-color2: #666;
        --tab-border: #f0eeee;
        --tab-bg: #dee1e3;
        --tab-bg2: #f7f7f7;
        --tab-bg3: #fff;
        --tab-bg-active: #000;
        --tab-bg-hover:   #f5f5f5; 

        --accent-font-color: #638ed4;
        --accent-font-hover: #3a85fd;

        #theburger {
            stroke: #000;
            fill: #000;
            }
        #theburger:hover {
            stroke: #fff;
            fill: #fff;
            }

        }

    .light-mode #header {
        .butt_tn_hamb { background-position:-60px 0px; cursor:pointer; }
        .butt_tn_hamb:hover { background-position:-60px -30px; cursor:pointer; }
        .butt_tn_hamb.active  { background-color: var(--red-close); background-position:-60px -60px; }

        .wink-logo {
            background-image:url("../custom/logo_light.svg?v=xcache19");
            }
        }


/* "Poppins", sans-serif; */
/* 'Open Sans', sans-serif */

body,
html {
    margin: 0;
    font-family: "Poppins", sans-serif;
    color: var(--text);
    display: grid;
    grid-template-rows: min-content 1fr;
    }


*,
*::before,
*::after {
    box-sizing: border-box;
    }

*:focus {
    outline: 0;
  
}

.above-the-fold-spacer {
    height: 100vh;
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    }

#header {
    position: sticky;
    height: 100px;
    margin:0px;  
    padding:0px;
    top: 0;
    grid-column-start: 1;
    grid-row-start: 1;
    padding: 20px;
    background-color: var(--header-bg);
    z-index: 100;

    box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
    
    .wink-logo {
        width:300px;
        height: 50px;
        background-image: var(--wink-logo);
        background-repeat:no-repeat;
        background-size: 300px 50px;
        background-position: left center;
        transition: max-height 400ms ease-in-out;
        } 
}

#header.shrink {
    height: 50px;
    background-color: var(--header-shrink);
    padding: 0px;
    .hamburger2 {
        top: 0px;
        }
    
    .wink-logo {
        /*background-color: #00cec9;*/
        width:300px;
        height: 40px;
        margin-top: 5px;
        margin-left: 15px;
        background-repeat:no-repeat;
        background-size: auto 40px;
        background-position: left center;
        cursor: pointer;
        } 
}


.tnav {
    width: 100%;
    display: grid;
    grid-gap: 0px;
    grid-template-columns:  repeat(3, 1fr);
    grid-area: nav-start nav-cent nav-end;     
    }

.nav-start { background: transparent; }
.nav-cent { background: transparent; font-size: 15px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); margin: auto; color: var(--head-text);}
.nav-end { background: transparent; align-items: right; justify-content: right; }


.gmaps-click-cent { width: 250px; display: flex; margin-top: 20px; color: #000;
        justify-content: center; /* Centers horizontally */
        align-items: center;    /* Centers vertically */}



/* style for  25px buttons */
.butt_tn {
    border: 0px solid #FF0000;
    padding: 12px;
    margin: 0px;
    font-size:0px;
    line-height:0px;
    width: 50px;
    height:50px;
    background: rgba(0,0,0,0);
    background-image:url("../_images/cs3/buttons_25b_ico.svg?v=xcache19");
    background-repeat:no-repeat;
    background-origin: content-box;
    background-size: 275px 150px;
     mask-image: radial-gradient(black 40%, transparent 40%);
    transition: background-position 0.2s ease-in-out; 
	-webkit-appearance: none;
    transition: all .5s ease;
    }

.butt_tn_hamb {    background-image:url("../_images/cs3/hamburger.svg?v=xcache19");
  padding: 10px 0px;
    background-repeat:no-repeat;
    background-origin: content-box;
    background-size: 120px 90px;
    /*background-color: #00cec9; */
    
    width: 75px;
    height:50px;
     cursor:pointer;  

    -webkit-mask-image: linear-gradient(black, black);
    mask-image: linear-gradient(black, black);
    mask-size: 60px 30px; /* Defines the square dimensions */
    mask-position: 0px 10px;
    mask-repeat: no-repeat;
    
}

.butt_tn_hamb:hover { background-position:0px -30px; cursor:pointer; }
.butt_tn_hamb.active  { background-color: var(--red-close); background-position:-0px -60px; }
.butt_tn_hamb.active:hover  { background-color: var(--red-close-hover);  }
	   
.butt_tn_graphs { background-position:-250px -100px; cursor:pointer; }
.butt_tn_graphs:hover { background-position:-250px -125px; cursor:pointer}

.nav-buttons { 
    width: 295px;
    margin-left: auto; margin-right: 0;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 50px 50px 50px 50px 75px;
    grid-template-areas:  "tnb5 tnb4 tnb1 tnb3 tnb2";}

    .tnb1 { grid-area: tnb1; }
    .tnb2 { grid-area: tnb2; }
    .tnb3 { grid-area: tnb3; }
    .tnb4 { grid-area: tnb4; }
    .tnb5 { grid-area: tnb5; }


.hero {
    /*padding: 5rem 2rem;*/
    grid-column-start: 1;
    grid-row-start: 2;
    background-color: var(--hero-bg);
    }

.main {
    min-height: 55rem;
    padding: 5rem 2rem;
    background-color: var(--main-bg);
    }

    
    .light-mode #page_head {
        color: #666;
        }
    
    .light-mode table.darkTable {
        color: #333;
        text-shadow: none;
        }
    
    

/* NAV */

.topnav {
    overflow: hidden;
    background-color: var(--grey);
    padding: 0px 0px;
    position: relative;
    border-bottom: solid 0px #666666;
  }

  #top_buttons {
    float: right;
    right: 0px;
    display: flex;
    position: absolute;
    top: 0px;
    }










  /* Hide the links inside the navigation menu (except for logo/home) */
  #myLinks {
        display: none;
        padding: 0px 0px;
        margin: 0px 5px 0px 0px;  
        background-color: var(--theme);
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 55px;
        border-top: none 0px #ccc;
        height: calc(100vh - 100px);
          scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        overflow: auto !important;
        z-index:99;
        border-radius: 6px;
    box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.4),
    0 2px 4px -2px rgb(0 0 0 / 0.4);
    
      }

#menu_list {

         scrollbar-width: none;
        -ms-overflow-style: none;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;

}


  #map {
    z-index:10;
  }

  .cluster {
    font-size: 1.5em;
    background-color: yellow;
    padding: .25em .5em;
  }
  
  .red {
    color: white;
    font-size: 2em;
    font-weight: bold;
    background-color: red;
  }

.gm-style iframe + div { border:none!important; }

.gm-bundled-control-on-bottom {
 margin-bottom:40px !important
}

/*
.gm-style-mtc{margin-bottom:60px !important}
*/ 

  /* Just use .gm-style-iw 
  
  width: 500px !important;; 
  min-height: 200px !important;;
  
  */ 

.leaflet-control-zoom {
    bottom: 40px;
}
.gm-style-iw, .leaflet-control-window {
    
    color: #e2e2e2 !important;
    margin:0px !important;
    padding:0px 0px !important;
    background-color: var(--theme)  !important; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important;;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;;
    filter: drop-shadow(rgba(0,0,0,0.3) 1rem 1rem 10px) !important; 
    border-radius: 8px 8px 8px 8px !important;
    
   /* overflow: hidden !important;
    white-space: nowrap !important;  */

    .butt_25_close {display: block; margin-left: auto; margin-right: 0;}
  }



  div.gm-style-iw.gm-style-iw-c {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    margin:0px !important;
  }
  

  div.gm-style-iw.gm-style-iw-c div.gm-style-iw-d {
    padding: 0px;
    overflow: unset !important;
    /* overflow: unset !important; */
    }

div.gm-style-iw-ch {padding:0px; background-color: transparent; }


.gmaps-infobox-header { 
    font-weight: bold; line-height: 18px; padding: 5px 5px 5px 5px;  margin:0px 0px; text-indent: 0px; 
    color: var(--text-input); display: flex;  align-items: center; min-width: 300px;
    .title {padding: 0px;}
    }

.gm-ui-hover-effect span {
    display: none !important;
    }

button.gm-ui-hover-effect {
    opacity: 1 !important;
    width: 30px !important;
    height: 30px !important;
    }

button.gm-ui-hover-effect:before {
    display: block;
    content: "";    
    background-image:url("../_images/cs3/buttons_25_ico.svg?v=xcache19");
    background-repeat:no-repeat;
    background-position:-60px -0px;
    width: 30px;
    height: 30px;
    right: 0px;
    top: 0px;
    position: relative;
    }

.light-mode button.gm-ui-hover-effect:before {
        background-color: #CC0000;
    }

button.gm-ui-hover-effect:hover:before {
        background-color: #CC0000;
        background-position:-60px -30px;

      }



/*


    background: rgba(0,0,0,0);
    background-image:url("../_images/cs3/buttons_25_ico.svg");
    background-repeat:no-repeat;
    float:left;
    }

.butt_space { margin: 5px 5px 5px 5px !important}
	   
.butt_25_snapshot { background-position:0px 0px; cursor:pointer; }
    div.gm-style-iw-ch span {
        display:inline-block;
        }
    



      button.gm-ui-hover-effect {
        display: none !important;
        }

    */



.poi-info-window { color: var(--text-input); 
    background-color: transparent !important; 
    padding: 5px;

    div {background-color: transparent;}

    .address, .view-link { background-color: transparent;  padding-left: 5px; }
    .address, .address-line, .transit-container, .view-link {color: var(--graph-txt); }
    }

.gm-title { color: var(--text-input); }
.gm-style .transit-container { 
    background-color: transparent; 
    div { background-color: transparent; padding: 5px; color: var(--text-input)}
    }

.poi-info-window div, .poi-info-window a {color: var(--text-input); background-color: transparent; line-height: 18px;  line-height: 25px;}

.gmaps_infobox_wink { display: block; min-height: 180px; }

  #video { background-color: #000000;  width: 100%; height: 100%; max-height: 500px; max-width: 500px;  }

  #message {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    pointer-events: none;
    padding: 20px;
    box-sizing: border-box;
    text-shadow: 0 0 5px black;
    }

.extra_hero { padding-top: 70px !important; /* background-color: #09da83; */}
.extra_50 { height: calc(100% - 110px) !important; /* background-color: #09da83; */}
.red_alert { background: #cc0000ee; }
.green_alert { background: #75bd1dee; }
.plain_alert { background: #CCCCCCee; }    


#notifiction_alerts { 
    width: 100%; 
    height: 50px;
    margin:0px; 
    padding:10px 15px 10px 15px; 
    display:none; 
	outline: none;
    line-height: 30px;
	font-size: var(--main-txt-size);
	color: var(--notify-text-color);
	border-bottom: var(--form-input-border);

    .nalert {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: auto 30px;
        grid-template-areas:  "msg msg_button";

        .msg { grid-area: msg; }
        .msg_button { grid-area: msg_button;  display: inline-flex;} /* inline-flex removes whitespace around object */
        }    
	}


  .menu_butt {width: 40px; height: 40px; border: #7CBD2F 0px solid; background-color: #e2e2e220;}

  .menu_butt:hover {background-color: #ccc }
  
  .menu_butt img {width: 30px; height: 30px; padding: 5px;}
  
  #menu_buttons { display: flex; padding:5px 5px 5px 5px; height: 50px; border-bottom: solid 1px var(--nav-border)}
  #menu_buttons div {margin:5px 5px 0px 5px; }
  

  .form_input_span { display:inline-block; vertical-align:bottom; margin: 0px 5px 15px 0px;}

  #menu_search {padding:10px 5px 0px 10px; border-bottom: solid 1px var(--nav-border);
    button { margin-left: 10px; }
    input {width:  calc(100% - 80px) !important;  }  
    }

  
.cam_list {
    width: 100%;  
    }
  
.cam_list::-webkit-scrollbar {
    display: none;
    }
  
/* Hide scrollbar for IE, Edge and Firefox */
.cam_list {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    }
  
  
.cam_list a {
    color: var(--tab-font-color2);
    padding: 10px 20px 10px 35px;
    margin: 0px 0px;
    text-decoration: none;
    background-color: var(--tab-bg3);

    font-size: 16px;
    line-height: 20px;
    display: block;
    border-top: solid 0px #00000000;
    border-bottom: solid 1px var(--tab-border);
    }
  
/* Add a grey background color on mouse-over */
.cam_list a:hover {
    background-color: var(--tab-bg-hover);
    color: var(--accent-font-hover);
    border-bottom: solid 1px var(--tab-border);
    }

/* Core styles/functionality */
.tab {
  position: relative;

}
.tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    }
.tab__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s;
    }
.tab input:checked ~ .tab__content {
    max-height: 9000px;
    }

/* Visual styles */
.accordion {
    color: var(--theme);
    border-top: 0px solid var(--tab-border);
    border-right: 1px solid var(--tab-border);
    border-left: 1px solid var(--tab-border);
    overflow: hidden;
    }
.tab__label,
.tab__close {
    display: flex;
    cursor: pointer;
    border-bottom: 0px solid var(--red-close);
    width: 100%;
    }
.tab__label {
    display: flex;
    width: 100%;
    color: var(--tab-font-color);
    justify-content: left;
    padding: 0px 0px 0px 0px;
    border-bottom: 1px solid var(--tab-border);
    font-size: 16px;
    line-height: 40px;
    /*text-indent: 40px;*/
    background-color: var(--tab-bg2);
    button {
        padding: 0px; margin: 5px 10px 0px 5px;
        }
    }

.tab__label:hover {
    color: var(--accent-font-hover);
    border-bottom: 1px solid var(--tab-border);
    background-color: var(--tab-bg-hover);

    button {
    /* Styles for buttons that are direct children of .parent-container */
        background-color: var(--button-hover);
        }


    }
.tab__close {
    color: var(--accent-font-color);
    /* 
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    */
    }

.tab__close:hover {
    color: var(--accent-font-hover); 
    /* 
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    */
    }

.accordion--radio {
    --theme: #22222280;
    }

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
    animation: bounce .5s infinite;
    }
@keyframes bounce {
    25% {
    transform: rotate(90deg) translate(.25rem);
    }
    75% {
    transform: rotate(90deg) translate(-.25rem);
    }
}

.icon_x {
    display: inline-block;
    }

.icon {
    display: inline-block; 
    background-repeat:no-repeat;
    background-position: 2px 2px !important;
    background-color: var(--tab-bg);
    background-size: 26px auto, contain !important;
    height:30px; min-width: 30px !important;
    margin-right: 10px !important;
    }







/* FORMS INPUT and BUTTONS */


/* style for  25px buttons */


.butt_25 {
    border: 0px solid var(--red-close);
    padding: 3px;
    margin: 0px;
    font-size:0px;
    line-height:0px;
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0);
    background-image:url("../_images/cs3/buttons_30_ui.svg?v=xcache19");
    background-repeat:no-repeat;
    background-size: 480px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }


.butt_25_icon {
    background-size: 30px;
}

.butt_25:hover {
    background-color: var(--button-hover);
    }

.butt_25:disabled {
    background-color: none;
    cursor: pointer;
    }

.light-mode .butt_25 {      
    background-image:url("../_images/cs3/buttons_30_ui_light.svg?v=xcache19");
    }

.butt_space { margin: 5px 5px 5px 5px !important}
	   
.butt_25_snapshot { background-position:-150px 0px; cursor:pointer; }
.butt_25_snapshot:hover { background-position:-150px -30px; cursor:pointer}
.butt_25_snapshot:disabled { background-position:-150px -30px; cursor:pointer}

.butt_25_fullscreen { background-position:-30px 0px; cursor:pointer; }
.butt_25_fullscreen:hover { background-position:-30px -30px; cursor:pointer}
.butt_25_fullscreen:disabled { background-position:-30px -30px; cursor:pointer}

.butt_25_share { background-position:-120px 0px; cursor:pointer; }
.butt_25_share:hover { background-position:-120px -30px; cursor:pointer}
.butt_25_share:disabled { background-position:0px -30px; cursor:pointer}

.butt_25_close { background-position:-60px 0px; cursor:pointer;  } /* position: absolute;  right: 5px */
.butt_25_close:hover { background-position:-60px 0px; cursor:pointer; background-color: var(--red-close);}

.butt_25_logout { background-position:0px 0px; cursor:pointer; }
.butt_25_logout:hover { background-position:0px -30px; cursor:pointer}

.butt_25_darkmode { background-position:-90px 0px; cursor:pointer; }
.butt_25_darkmode:hover { background-position:-90px -30px; cursor:pointer}

.butt_25_search { background-position:-180px 0px; cursor:pointer; }
.butt_25_search:hover { background-position:-180px -30px; cursor:pointer}

.butt_25_cams { background-position:-300px 0px; cursor:pointer; }
.butt_25_cams:hover { background-position:-300px -30px; cursor:pointer}

.butt_25_settings { background-position:-330px 0px; cursor:pointer; }
.butt_25_settings:hover { background-position:-330px -30px; cursor:pointer}

.butt_25_star { background-position:-210px 0px; cursor:pointer; }
.butt_25_star:hover { background-position:-210px -30px; cursor:pointer}

.butt_25_refresh { background-position:-270px 0px; cursor:pointer; }
.butt_25_refresh:hover { background-position:-270px -30px; cursor:pointer}

.butt_25_home { background-position:-240px 0px; cursor:pointer; }
.butt_25_home:hover { background-position:-240px -30px; cursor:pointer}

.butt_25_geoloc { background-position:-360px 0px; cursor:pointer; }
.butt_25_geoloc:hover { background-position:-360px -30px; cursor:pointer}

.butt_25_geoloc_on { background-position:-390px 0px; cursor:pointer; }
.butt_25_geoloc_on:hover { background-position:-390px -30px; cursor:pointer}

.butt_25_intall_pwa { background-position:-420px 0px; cursor:pointer; }
.butt_25_intall_pwa:hover { background-position:-420px -30px; cursor:pointer}


button.gsi-material-button {
    width: 320px;
    height: 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    }

button.wink-material-button {
    width: 320px;
    height: 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    }

button.wink-material-button > div {
    vertical-align: middle;
    width: 20px; height:20px;
    display: inline-block;
    }

button.wink-material-button > div > img{
    width: 24px; height:24px;
    }

button.wink-material-button > span {
    vertical-align: middle;
    width:270px;
    padding-right: 25px;
    display: inline-block;
    }

button.wink-forms { 
    min-width: 100px;
    min-height: 35px;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	margin-bottom: 10px;
    }
    
button.wink-forms:focus { 
    outline: 1px dashed var(--form-txt-focus); /* Adds a blue outline */
    }

    

.btn {
    display: inline-block;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 18px;
    color: var(--form-button-txt);
    text-align: center;
    text-shadow: var(--text-shadow);
    letter-spacing: 0.5px; 
    vertical-align: middle;
    background-color: #b9b9b9;
    background-image: -moz-linear-gradient(top, #f2f2f2, #b9b9b9);
    background-image: -ms-linear-gradient(top, #f2f2f2, #b9b9b9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#b9b9b9));
    background-image: -webkit-linear-gradient(top, #f2f2f2, #b9b9b9);
    background-image: -o-linear-gradient(top, #f2f2f2, #b9b9b9);
    background-image: linear-gradient(top, #f2f2f2, #b9b9b9);
    background-repeat: repeat-x;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#f2f2f2, endColorstr=#b9b9b9, GradientType=0);
    border: 1px solid #b9b9b9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    }

.btn:hover {
    color: var(--form-button-hvr);
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
    }

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    filter: none;
	background-color: #b9b9b9;
    }

.btn-white {
    color: #fff;
    background-color: #000000;
    background-image: -moz-linear-gradient(top, #222222, #000000);
    background-image: -ms-linear-gradient(top, #222222, #000000);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#000000));
    background-image: -webkit-linear-gradient(top, #222222, #000000);
    background-image: -o-linear-gradient(top, #222222, #000000);
    background-image: linear-gradient(top, #222222, #000000);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#222222, endColorstr=#000000, GradientType=0);
    border: 1px solid #000000;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.235);
    }

.btn-white:hover{color: #f4f4f4;}

.btn-white:hover,
.btn-white:active,
.btn-white.active,
.btn-white.disabled,
.btn-white[disabled] {
    filter: none;
    background-color: #000000;
    }

.btn-large {
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

.btn-base {
    color: #e2e2e2;
    background-color: #333333;
    background-image: -moz-linear-gradient(top, #555555, #333333);
    background-image: -ms-linear-gradient(top, #555555, #333333);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
    background-image: -webkit-linear-gradient(top, #555555, #333333);
    background-image: -o-linear-gradient(top, #555555, #333333);
    background-image: linear-gradient(top, #555555, #333333);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#555555, endColorstr=#333333, GradientType=0);
    border: 1px solid #333333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    }

.btn-base:hover,
.btn-base:active,
.btn-base.active,
.btn-base.disabled,
.btn-base[disabled] {
    filter: none;
    background-color: #333333;
    color: #666;
    }

.btn-green {
    background-color: #76bd1d;
    background-image: -moz-linear-gradient(top, #76bd1d, #5d8d23);
    background-image: -ms-linear-gradient(top, #76bd1d, #5d8d23);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#76bd1d), to(#5d8d23));
    background-image: -webkit-linear-gradient(top, #76bd1d, #5d8d23);
    background-image: -o-linear-gradient(top, #76bd1d, #5d8d23);
    background-image: linear-gradient(top, #76bd1d, #5d8d23);
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#76bd1d, endColorstr=#5d8d23, GradientType=0);
    border: 1px solid #4a6e1e;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    }

.btn-green:hover,
.btn-green:active,
.btn-green.active,
.btn-green.disabled,
.btn-green[disabled] {
    filter: none;
    background-color: #5d8d23;
    }

.btn-install-app {background: none;  width: 150px;
    height: 30px; border: 1px solid  #ffffff50;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-size:12px; padding: 0px;
    line-height:18px;
    color: #ffffff50; margin-left: auto;

    :hover{
        background: rgba(0,0,0,0);
        color: red !important;
    }
};

.btn-login {
    width: 85px;
    height: 85px;
    position: relative; 
    line-height:16px; font-size:var(--main-txt-size); font-weight:normal;
    margin:  0px 0px 0px 0px;  float: left;
    }

.btn-login img {
    width: 50px;
    height: 50px;
    }

.btn-login span {position: absolute; bottom: 0; left: 0;
    padding: 5px 5px 5px 8px; font-size: 13px; color:#fff; }

#form_error {color: #CC0000; padding-top: 10px;  padding-bottom: 10px;}


label { color: var(--label-txt-color); line-height:20px; font-size: var(--label-txt-size); font-weight:normal; margin-bottom: 5px; }
label { color: var(--label-txt-color); line-height:20px; font-size: var(--label-txt-size); font-weight:normal; margin-bottom: 5px; }

textarea {
    outline: none;
    resize: none;
    width: 100%;
    margin-bottom: 10px;
    background: var(--form-input-bg);
    border: var(--form-input-border);
    padding: 10px;
    font-size: 13px;
    color: var(--form-txt);
    text-shadow: var(--form-txt-shadow);
    border-radius: 4px;
    box-shadow: var(--form-input-boxshadow);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease; 
    }

textarea:focus {
    box-shadow: var(--form-input-boxshadow-focus);
    }

button:focus {
    outline: 0px; /* Adds a blue outline */
    }


input {
    width: 100%;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: var(--form-txt);
    text-shadow: var(--form-txt-shadow);
    border: var(--form-input-border);
    border-radius: 4px;
    background-color: var(--form-input-bg);
    box-shadow: var(--form-input-boxshadow);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
    }

input::selection {
    background-color: transparent; /* Sets the background color of the selected text */
    color: var(--form-txt-selected); /* Sets the color of the selected text */
    }

input:read-only { color:grey; }

input.highlight {
    background: rgba(231, 6, 6, 0.3);
    }

input:focus {
    box-shadow: var(--form-input-boxshadow-focus);
    }

input[type="file"]::file-selector-button {
  border: 1px solid #6c5ce7;
  color: #000;
  padding: 0px 5px;
  border-radius: 4em;
  background-color: #8ec7f1;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #76bd1d;
  border: 1px solid #00cec9;
}

input[type="checkbox"] {
    display:none;
    }

input[type="checkbox"] + label span {
    display:inline-block;
    width:20px;
    height:20px;
    margin:0px 5px 15px 0px;
    padding:0px 0px 0px 0px;
    vertical-align:top;
    background:url("../_images/cs3/check_radio_sheet.png") left top no-repeat;
    cursor:pointer;
    }

input[type="checkbox"]:checked + label span {
    background:url("../_images/cs3/check_radio_sheet.png") -21px top no-repeat;
    }

input[type="radio"] {
    display:none;
    }

input[type="radio"] + label span {
    display:inline-block;
    width:20px;
    height:20px;
    margin:0px 5px 0px 0px;
    padding:0px 0px 0px 0px;
    vertical-align:top;
    background:url("../_images/cs3/check_radio_sheet.png") left top no-repeat;
    cursor:pointer;
    }

input[type="radio"] + label {
    margin:0px 10px 0px 0px;
    padding:0px 0px 0px 0px;
    }
	
input[type="radio"]:checked + label span {
    background:url("../_images/css/icons/check_radio_sheet.png") -21px top no-repeat;
    }

span.tab {
    padding: 80px 80px; 
    }


label[type="checkbox"] { color: #777; line-height:20px; font-size: 13px; }

select {
    /*background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+") no-repeat 100% 50%;
    */
    background: url("../_images/cs3/select_arrow.svg?v=xcache19") no-repeat 100% 50%;
    --radius: 4;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    outline: none;
    line-height: 24px;
    padding: 5px 10px; /* Adjust as needed */
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--form-txt);
    text-shadow: var(--form-txt-shadow);
    border: var(--form-input-border);
    border-radius: 4px;
    background-color: var(--form-input-bg);
    box-shadow: var(--form-input-boxshadow);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
    text-overflow: ellipsis;
    white-space: nowrap;
    }


select:focus {
    box-shadow: var(--form-input-boxshadow-focus);
    background-image: url("../_images/cs3/select_arrow_hover.svg?v=xcache19");
    color: var(--form-txt-selected);  
    }

select:hover {color: var(--form-txt-hover)}

select:active {color: var(--form-txt-active)};

select.highlight {
    background-color: rgba(231, 6, 6, 0.3);
    }
  
select>option {  
     color: var(--form-txt);
    background-color: var(--form-option-bg);
    }

select>option:checked {
    color: var(--form-option-txt-selected); 
    background-color: var(--form-option-bg-highlight);
    }

select>option:disabled {
    color: var(--form-option-txt-disabled); 
    background-color: var(--form-option-bg-disabled); 
    }

optgroup option {
    color: #ff0000; padding-left: 10px; 
    }

/* END FORMS /*

/* Place the navbar at the bottom of the page, and make it stick */
.bnb {
    background-color: var(--theme);
    font-size: 13px;
    color: var(--bnb-txt);
    text-align: center;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top:  1px solid #444;
    z-index: 998;
    }

.bnb a:link     { text-decoration: none; }
.bnb a:active   { color: var(--bnb-txt); }
.bnb a:visited  { color: var(--bnb-txt); }
.bnb a:hover    { color: var(--bnb-txt-hover); }
  
.bnb_container {
    display: flex;
    }

.bnb_container > div {
    flex: 1; /*grow*/
    }

.bnb_left { background-color:#ff000010; 
    display: flex;
    align-items: left;
    justify-content: left;}

.bnb_left > div {
    vertical-align: middle;
    margin-left: 20px;
    width: 100%;
    display: inline-block;
    text-align: left;
    line-height: 40px;
    }

.bnb_cent { background-color:#0000ff10; 
    height:40px;
    line-height: 40px;  
    display: flex;
    align-items: center;
    justify-content: center;
    }

.bnb_rght { background-color:#00800010; 
    display: flex;
    align-items: right;
    justify-content: right;
}
.bnb_rght > div {
    vertical-align: middle;
    margin-right: 20px;
    cursor: pointer;
    }

.card {
    width: 60px;
    height: 20px;
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translateY(-5px);
    }

.card .img-top {
    display: none;
    position: absolute;
     top: 0;
            left: 0;
            z-index: 99;
        }
        .card:hover .img-top {
            display: inline;
        }

    .tooltip {
        position: relative;
        display: inline-flexbox;
        }
      
      .tooltip .tooltiptext {
        visibility: hidden;
        width: 140px;
        background-color: #555;
        color: #fff;
        text-align: center;
        line-height: 24px;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 201;
        bottom: 150%;
        left: 50%;
        margin-left: -75px;
        margin-bottom: 12px;
        opacity: 0;
        transition: opacity 0.3s;
      }
      
      .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
      }
      
      .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
      }

/* Extra small devices (phones, 600px and down) - Iphone Portrait*/
@media only screen and (max-width: 600px) {
    .bnb {border-top:  0px solid olivedrab; display: none;}
    .nav-cent {width:0px;}

    .leaflet-control-window {

        filter: none !important; min-width: 90vw; 
        
        }

    .nav-buttons { 
        width: 75px;
        grid-gap: 5px;
        grid-template-columns: 75px;
        grid-template-areas:  "tnb2";

        .tnb1 {display: none;}
        .tnb3 {display: none;}
        .tnb4 {display: none;}
        .tnb5 {display: none;}
        }
  
    }
  
  /* Small devices (portrait tablets and large phones, 600px and up) Iphone landscape*/
  @media only screen and (min-width: 600px) {
    .bnb {border-top:  0px solid purple;}
    .nav-cent {width:0px; content: none; } 
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    .bnb {border-top:  0px solid blue; display: block;}
    #video { background-color: #000000;  width: 100%; height: 100%; min-width: 320px; min-height: 240px; }
     #myLinks { min-width: 500px; max-width: 500px;  }; 
  } 
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
    .bnb {border-top:  0px solid green; display: block;}
    #video { background-color: #000000;  width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: 600px; max-height: unset !important; }
    .gm-style-iw { max-width: 500px; width:500px  }
  } 
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
    .bnb {border-top:  0px solid #09da83; display: block;}
     #myLinks { min-width: 500px; max-width: 500px;  }
    #video  {background-color: #000000;  width: 100%; height: 100%; min-width: unset; min-height: unset; max-width: 800px; max-height: unset !important;}
    .gm-style-iw { max-width: 800px; width:800px  } 
     
  }
    

  .left, .right {
    float: left;
    width: 30%; /* The width is 20%, by default */
    padding-top: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    /*background-color: #09da83; */
  }

  

  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    .left, .right {
      width: 100%; 
    }
}