@import (inline)  "lfh-font.css";
@import (inline)  "../lib/awesome-marker/leaflet.awesome-markers.css";

.lfhicon() {
    display: inline-block;
    font: normal normal normal 14px/1 "lfhiker";
        font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

  html, body{
       width:100%;
       height:100%;
       font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
       font-size:16px;
    }
    #map, #fade{
        width:100%;
        height:100%;
        margin:0;
        padding:0
    }
    #banner{
        position:fixed;
        z-index:1001;
        bottom:0px;
        right:20px;
        height:auto;
        text-align:right;
        display:inline-block;
    }
    #lfh-control{
        font-size:16px;
    }
    input[type="button"],
    input[type="reset"]{
        margin: 0px 7px 3px 0;
        padding: 6px 18px;
        height: 50px;
        vertical-align:middle;
        max-width:150px;
        font-size: 14px;
        line-height: 1.4285714;
        white-space: normal;
        background: #0085ba;
        border-width:1px;
        border-style: solid;
        border-radius:3px;
        border-color: #0073aa #006799 #006799;
        color: #fff;
        text-decoration: none;
        text-shadow: 0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799;
        vertical-align: top;
        display: inline-block;
        cursor: pointer;
        box-sizing: border-box;
        text-align:center;
        box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    }
    input[type="button"]:disabled{
        background-color: lightgrey;
    }
    input[type="button"]:disabled:hover{
        background-color: lightgrey;
    }
    input[type="button"]:hover{
        background-color: #0089bc;
    }
    #fade input[type="button"],
    form input[type="button"],
    form input[type="reset"]{
        margin: 7px 7px 0px 0;
        padding: 3px 9px;
        height: auto;
        font-size: 12px;
        line-height: 1.2;
    }
    #fade input[type="button"]{
        font-size:14px;
    }
    form input[type="number"]{
        width:50px;
        direction: rtl;
        padding-right: 3px;
    }
    .lfh-form-edit{
       padding:0px;
       width:350px;
       position:fixed;
       z-index:1000;
       background-color:white;
       height:auto;
       box-shadow: 0 1px 5px rgba(0,0,0,0.65);
       border-radius: 4px;
    }

     #window-add-marker{
       top:125px;
       left:55px;
       display:none;
    }
    #window-edit-marker{
        top:50px;
        left:60px;
    }
    #window-edit-map{
        top:5px;
        right:60px;
    }
    .lfh-form-edit .header{
        background-color: #23282d;
        color:white;
        padding-left:10px;
        margin:0px;
        cursor: move;
    }
    .lfh-form-edit .header h3{
        margin:3px;
        display:inline;
        width:180px;
        vertical-align:middle;
    }
    .header div.lfhicon{
        float:right;
        display:inline-block;
        vertical-align:top;
        cursor:pointer;
        padding : 3px;
    }
    form{
        padding-top:10px;
        overflow-y:auto;
        height:auto;
        max-height:395px;
        padding-bottom:10px;
    }
    label{
        text-align:right;
        width:150px;
        padding-right:5px;
        color: #124964;
    }
    input,
    select,
    textarea{
        font-size: 12px;
        border-width: 1px;
        border-style: solid;
        border-color: #ddd;
    }
    input[type=text],
    textarea{
        width: 165px;
        max-width:165px;
        line-height:1.4;
    }
    label, input{
        display:inline-block;
        vertical-align:top;
    }
    input:focus,
    select:focus,
    textarea:focus{
        border-color: #5b9dd9;
    }
    textarea{
        height:33px;
    }
    #selected-icon,
    #selected-color{
        cursor:pointer;
    }
    #selected-icon{
        margin-left:10px;
    }
    .to-extend{
        margin-top: -5px;
    }
    .to-extend > div{
       width:165px; 
       margin:2px;
       text-align:center;
       background-color:#f3f3f3;
       overflow:hidden;
    }
    #center-map,
    #selected-color,
    #selected-icon,
    .to-extend div{
        display:inline-block;
        position:static;
        -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    }
    #center-map{
        background-color:#f3f3f3;
        margin:0 6px 6px 6px;
        padding:0 5px 5px 5px;
        text-align: right;
       
    }
    .to-extend label{
        cursor:pointer;
    }
    .to-extend label:hover{
        font-size:18px;
    }
    
    .to-extend > div > div{
        margin:0;
        padding:0px;
        cursor:pointer;
    }    
    .to-extend > div > div:hover{
        background-color: #fff;
        padding:1px;
    }
    #icon-marker div{
        min-width:19px;
        text-align:center;
    }
    .to-extend > div > div.selected{
        background-color:#b5d0d0;
        -webkit-box-shadow: inset 0 0 0 1px rgba(91,157,217,.9);
        box-shadow: inset 0 0 0 1px rgba(91,157,217,.9);
    }
    *::-moz-placeholder {
        color: #72777c;
        opacity: 1;
    }
    .leaflet-control .fa{
        width:22px;
        font-size:18px;
        text-align:center;
        margin:0;
        padding:2px;
        border-radius:2px;
     
        cursor:pointer;
    }
    .leaflet-control .active{
        background-color:rgba(240, 214, 215, 1);
        -webkit-box-shadow: inset 0 0 0 2px rgba(231, 107, 111, 0.6);
        box-shadow: inset 0 0 0 2px rgba(231, 107, 111, 0.6);
    }
    #map-position, #text-pan{
        display:block;
        text-align:left;
        padding-left:9px;
        font-size:12px;
    }
    #text-pan{
        padding-left:3px;
        font-size:14px;
        color:#d12a2f;
    }
    #fade{
        position:fixed;
        top:0;
        left:0;
        background-color:rgba(25, 25, 25, 0.8);
        width:100%;
        height:100vh;
        display:block;
        text-align:center;
        z-index:1002;
        opacity:1;
        transition: opacity 0.5 ease;
    }
    #fade.hidden{
        display:none;
        opacity:0;
    }
    #fade::before{
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        
    }
    .modal{
        text-align:left;
        margin:auto;
        width:350px;
        padding:10px;
        vertical-align:middle;
        background-color:#fff;
        border-radius: 15px 15px 15px 15px;
        -moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        border: 10px solid #9e9e9e;
        box-shadow: 0 1px 5px rgba(0,0,0,0.65);
        display:inline-block;
        
    }
    .modal label{
        width:250px;
    }
    .modal h3{
        font-size:18px;
        margin:10px 0 18px 10px;
    }