/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14-Oct-2015, 11:23:39 AM
    Author     : josephzhao
*/

.thematicmap_legends {
    margin: 3px 0;
    padding: 3px;
    width: 100%;
    height: 445px;
    overflow: auto;
    border: 1px grey solid;
    border-radius: 3px;
}

.thematic-legend {
    line-height: 18px;
    color: #555;
}


.thematic-legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

div#thematicmap_colorlegends div#ramps div.ramp input[type='radio'] {
    margin: 0 5px 3px 5px;
}
div#thematicmap_colorlegends div#ramps div.ramp label {
    width:60px;
}

div.thematicmap_colors ul {
    list-style: none;
    padding-left: 15px;
}
div.thematicmap_colors li {
    border-bottom: 1px solid gainsboro;
    padding-top: 5px;
}
div.thematicmap_colors li label {
    margin-left: 10px;
    width:120px;
    background-color: #eeeeee;
    margin-bottom: 3px;
    transition: width 0.5s;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    div.thematicmap_colors li label {
        width: 80px;
    }
}

div#create_thematicmap .panel-group .panel {
    margin-bottom: 0;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: unset;
}
div#create_thematicmap .panel.panel-default {
    padding:0px;
    overflow: unset;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: 0;
    border-top-left-radius: 0;
}
div#create_thematicmap .panel-body {
    padding: 8px;
}
div#create_thematicmap .panel-heading.accordion-toggle {
    padding: 5px 15px;
}
div#create_thematicmap .panel-heading.accordion-toggle.collapsed {
    margin-bottom: 0px;
}
div#create_thematicmap .panel-heading.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    position: relative;
    bottom: 21px;
    font-size: 10pt;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */
}
div#create_thematicmap .panel-heading.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content:"\e080";
    /* adjust as needed, taken from bootstrap.css */
}
div#create_thematicmap .panel-heading:hover {
    cursor: pointer;
}
div#create_thematicmap .panel-heading:hover h4 {
    text-decoration: underline;
}

div#select_classificatifon {
    margin-top: 0;
}

div#create_thematicmap div.create_thematicmap_from_spatialfile select#spatialfile_labelling_fields option input[type='checkbox'] {
    margin-right: 8px;
}

div#create_thematicmap div#collapseFour label {
    width:90px;
}

.label-font-size-s {
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
}

.label-font-size-m {
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
}

.label-font-size-l {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
}


.leaflet-control-maplegend-interior
{
    width: 190px;
    height: 320px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    opacity: 0.85;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

.leaflet-control-maplegend-interior:hover
{
    background-color: #F4F4F4;
}

table#labelling_fields_table tbody {
    tr {
        cursor: pointer;
    }
    tr:hover {
        background-color: #dae2f2;
    }
    tr.selected:hover {
        background-color: #92a8d2;
    }
}

/* POL-13247 Customizing Thematic Map Labels*/
#thematic_label_options,#poi_label_options,#subscribed_label_options,#allocation_label_options {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    gap: 5px;

    .label_setting {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 3px;

        .setting_title {
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            margin: 0 20px;
        }
        label {
            font-weight: normal;
            margin: 0;
            input {
                cursor: pointer;
            }
        }
    }
}

.leaflet-tooltip.tooltip-transparent-background {
    background-color: transparent;
    border: none;
    box-shadow: none;
}
.leaflet-tooltip.tooltip-transparent-background::before {
    display: none!important;
}

@media screen and (max-width: 767px) {
    div#bound-style-wrap, div#colour-width-wrap {
        display: inline-flex;
    }
    div#bound-style-wrap > div {
        display: inline;
    }
    div#colour-width-wrap > div {
        display: inline;
    }
    div#colour-width-wrap > div ~ div {
        margin-left: 15px;
    }
}

#thematicmap_label_attr_change {
    width: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;

    .tooltip_actions_li {
        display: flex;
        justify-content: space-between;

        span[name='label'] {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #bg_color_picker,#pointer_line_color_picker,#poi_color_picker {
            padding: 0;
            border: none;
            height: 2rem;
            cursor: pointer;
        }
    }
    .tooltip_buttons {
        gap: 12px;
        button {
            flex: 1 1 auto;
        }
    }
}

/* On-map thematic legend (bottom-left control). The div is created by
   createthematicmap.js (id="thematic_map_legend") as a child of #leafmap but
   OUTSIDE .leaflet-control-container so the easyPrint PNG download captures it.
   The box body is pointer-events:none so map panning works over it; only the
   header drag handle (⠿) is interactive and moves the box (mirrors React).
   Selectors are scoped under .thematic-map-legend at equal-or-higher specificity
   than the sidebar legend rules above so they win without touching the sidebar. */
.thematic-map-legend {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1000; /* above map panes; map controls sit in .leaflet-control-container */
    background: #fff;
    border: 1px grey solid;
    border-radius: 3px;
    padding: 4px 8px 6px;
    max-height: 40vh;
    overflow-y: auto;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    user-select: none;
}

.thematic-map-legend .thematic-map-legend-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.thematic-map-legend .thematic-map-legend-handle {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #f5f5f5;
    color: #555;
    font-size: 11px;
    line-height: 1;
    cursor: move;
    touch-action: none;
}
.thematic-map-legend .thematic-map-legend-handle:hover {
    background: #e8e8e8;
}

.thematic-map-legend .thematic-map-legend-title {
    font-weight: bold;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Let the title shrink so a long name cannot push the close button out of the box.
       A flex item will not shrink below its content without min-width:0, and the
       ellipsis above only engages once it is allowed to. */
    flex: 1 1 auto;
    min-width: 0;
    /* The legend body is pointer-events:none so map panning works over it; the
       title re-enables events so its title="" tooltip (map name + variable
       caption) can actually fire on hover. */
    pointer-events: auto;
    cursor: default;
}

/* Hide-legend button, top-right of the header. Sized like the drag handle so the two
   corners match. pointer-events:auto is load-bearing: the box root is
   pointer-events:none so the map keeps panning under it, which would otherwise make
   this button unclickable. margin-left:auto pushes it right - the header is a plain
   flex row with no justify-content. Mirrors
   assets/react/styles/Modules/MappingCentre/ThematicMapLegend.css. */
.thematic-map-legend .thematic-map-legend-close {
    pointer-events: auto;
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #f5f5f5;
    color: #555;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.thematic-map-legend .thematic-map-legend-close:hover {
    background: #e8e8e8;
}

.thematic-map-legend .thematic-map-legend-body {
    font-size: 12px;
    color: #333;
}

.thematic-map-legend .thematicmap_colors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.thematic-map-legend .thematicmap_colors li {
    border-bottom: 1px solid gainsboro;
    padding: 2px 0;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.thematic-map-legend .thematicmap_colors li:last-child {
    border-bottom: none;
}

/* Rows are a verbatim copy of the sidebar rows (incl. the minicolors swatches the
   plugin builds around each hidden input). Make the swatch square match its parent
   div.minicolors wrapper: width 16px and height 100% of that wrapper, and let the
   inner .minicolors-swatch-color fill it (do NOT force its size, or it detaches
   from the wrapper). !important beats the minicolors CSS. */
.thematic-map-legend .minicolors-swatch {
    width: 16px !important;
    height: 100% !important;
    margin: 0 6px 0 0;
    vertical-align: middle;
    flex: 0 0 16px;
}

.thematic-map-legend .minicolors-swatch-color {
    /* colour square fills .minicolors-swatch (minicolors sets it absolute) */
    width: 100%;
    height: 100%;
}

.thematic-map-legend .thematicmap_colors li label {
    margin: 0 2px;
    font-weight: normal;
    background: transparent;
    width: auto;
}