.GPimportMapBoxpRoot {
    padding: 5px;
}

.GPEditorMapBoxContainer {
    width: 100%;
    height: auto;
    position: relative;
    padding: 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: 0 0 5px #000000;
            box-shadow: 0 0 5px #000000;
    border-style: solid;
    border-width: 1px;
    border-color: lightskyblue;
    border-radius: 5px;
}

.GPEditorMapBoxSep {
    display: block;
    width: 50%;
    border-style: double;
    border-width: 4px;
    border-color: lightskyblue;
}

.GPEditorMapBoxLayersTitle,
.GPEditorMapBoxThemesTitle {
    padding: 5px;
    font-style: italic;
    font-weight: bold;
}

/* desactive un composant */
.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/*******************************************************************************
GROUPS
*******************************************************************************/
.GPEditorMapBoxGroupContainer {}

/* FIXME : modifier la couleur de la puce ? */
.GPEditorMapBoxGroupDetails {
    border-style: dotted;
    border-width: 1px;
    border-radius: 5px;
    border-color: lightskyblue
}

.GPEditorMapBoxGroupSummary {}

/*******************************************************************************
LAYERS
*******************************************************************************/

/* - container principal */
.GPEditorMapBoxLayersContainer {

}
/* - container layers */
.GPEditorMapBoxLayerContainer {
    width: 100%;
    min-height: 28px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /* background-color: red; */
}
/* - container titre */
.GPEditorMapBoxLayerTitleContainer {
    width: inherit;
    min-height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /* background-color: grey; */
}
.GPEditorMapBoxLayerImageInput {
    display: none;
}
.GPEditorMapBoxLayerImageLabel {
    min-width: 24px;
    min-height: 28px;
    cursor: pointer;
    /* position: absolute; */
    background-image: url("img/GPEditorLayerTools.png");
    background-position: -56px 0;
    /* background-color: green; */
}
input[type="checkbox"]:checked + .GPEditorMapBoxLayerImageLabel {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}
.GPEditorMapBoxLayerTypeImage {
    min-width: 30px;
    min-height: 30px;
    margin-right: 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    /* position: absolute; */
    /* background-image: url("img/GPEditorLayerTypeIcon.svg"); */
    background-image: url("img/GPEditorLayerTypeIcon.png");
    background-position: 0px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: 2px 2px 1px lightgrey;
            box-shadow: 2px 2px 1px lightgrey;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: gray;
    /* background-color: blue; */
}
.GPEditorMapBoxLayerTitleInput {
    display: none;
}
.GPEditorMapBoxLayerTitleLabel {
    width: inherit;
    /* margin-inline-start: 28px; */
    cursor: pointer;
    /* background-color: yellow; */
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: gray;
    -webkit-box-shadow: 2px 2px 1px lightgrey;
            box-shadow: 2px 2px 1px lightgrey;
    padding: 5px;
    margin-left: 5px;
    word-break: break-word;
}
input[type="checkbox"]:checked + .GPEditorMapBoxLayerTitleLabel {
    background-color: lightgrey;
}

/* - container legend */
.GPEditorMapBoxLayerLegendContainer {

}

/* - container outils */
.GPEditorMapBoxToolsContainer {
    min-width: 28px;
    height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /* background-color: pink; */
}
.GPEditorMapBoxToolsVisibilityInput {
    display: none;
}
.GPEditorMapBoxToolsVisibilityInputDisable {
    display: "block";
}

.GPEditorMapBoxToolsVisibilityLabel {
    width: 28px;
    height: 28px;
    cursor: pointer;
    /* position: absolute; */
    background-image: url("img/GPEditorLayerTools.png");
    background-position: -28px 0;
    /* background-color: white; */
}
.GPEditorMapBoxToolsVisibilityLabelDisable {
    cursor: pointer;
}

input[type="checkbox"]:checked + .GPEditorMapBoxToolsVisibilityLabel {
  background-position: 0 0;
}

/*******************************************************************************
 FILTERS
*******************************************************************************/

/* - container principal */
.GPEditorMapBoxFilterContainer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    /* background-color: red; */
    margin-left: 28px;
}
/* - container titre + editeur json */
.GPEditorMapBoxFilterJsonContainer {
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    padding: 5px;
}
.GPEditorMapBoxFilterTitleJson {

}
.GPEditorMapBoxFilterDisplayJson {
    width: 175px;
    height: 125px;
    cursor: pointer;
    overflow: scroll;
    resize: vertical;
}

/* - container outils editions */
.GPEditorMapBoxFilterToolsEditionContainer {
    /* border-style: solid;
    border-radius: 5px;
    padding: 5px; */
}
/* - container outils boutons enregister/annuler */
.GPEditorMapBoxFilterToolsButtonsContainer {
    /* border-style: solid;
    border-radius: 5px;
    padding: 5px; */
}

/*******************************************************************************
 THEMES
*******************************************************************************/

/* - container principal */
.GPEditorMapBoxThemesContainer {
    width: 175px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    /* background-color: red; */
}

/* - container d'un theme */
.GPEditorMapBoxThemeContainer {
    width: inherit;
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    text-align: center;
}

.GPEditorMapBoxThemeContainer:focus {
    background-color: lightgrey;
}

.GPEditorMapBoxThemeImage {
    width: 120px;
    height: 60px;
    cursor:pointer;
}
.GPEditorMapBoxThemeTitle {
    padding: 5px;
    cursor:pointer;
}

.GPEditorMapBoxThemeMessage {
    font-style: italic;
    color: red;
}
/*******************************************************************************
 STYLES
*******************************************************************************/

/* - container principal */
.GPEditorMapBoxStyleContainer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    /* background-color: red; */
    margin-left: 28px;
}
/* - container titre + editeur json */
.GPEditorMapBoxStyleJsonContainer {
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    padding: 5px;
}
.GPEditorMapBoxStyleTitleJson {

}
.GPEditorMapBoxStyleJsonDisplay {
    width: 175px;
    height: 125px;
    cursor: pointer;
    overflow: scroll;
    resize: vertical;
}
/* - container outils Scale */
.GPEditorMapBoxStyleToolsScaleContainer {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content; /* FIXME */
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    padding: 5px;
}
.GPEditorMapBoxStyleScaleTitle {}
.GPEditorMapBoxStyleToolsScaleMaxContainer,
.GPEditorMapBoxStyleToolsScaleMinContainer {
    width: 175px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
.GPEditorMapBoxStyleScaleLabelMin {}
.GPEditorMapBoxStyleScaleInputMin {}
.GPEditorMapBoxStyleScaleLabelMax {}
.GPEditorMapBoxStyleScaleInputMax {}

/* - container outils editions */
.GPEditorMapBoxStyleToolsEditionContainer {
    /* border-style: solid;
    border-radius: 5px;
    padding: 5px; */
}
    /* - container outils boutons enregister/annuler */
.GPEditorMapBoxStyleToolsButtonsContainer {
    /* border-style: solid;
    border-radius: 5px;
    padding: 5px; */
}

/*******************************************************************************
JSON display Editor
*******************************************************************************/
.gp-json-string { color: green; }
.gp-json-number { color: darkorange; }
.gp-json-boolean { color: blue; }
.gp-json-null { color: magenta; }
.gp-json-key { color: red; }


/*******************************************************************************
LEGEND
*******************************************************************************/

.GPEditorMapBoxLegendContainer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin-left: 28px;
}

.GPEditorMapBoxLegendRenderContainer {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 175px;
    padding: 5px;
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    overflow-y: auto;
}

.GPEditorMapBoxLegendInput {

}
.GPEditorMapBoxLegendRender {
    min-width: 28px;
    min-height: 28px;
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 1px grey;
            box-shadow: 2px 2px 1px grey;
    cursor: pointer;
}
.GPEditorMapBoxLegendEditable {
    border-color: black;
}
.GPEditorMapBoxLegendTitle {
    margin-left: 10px;
}

.GPEditorMapBoxLegendToolsContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 230px;
    padding: 5px;
}

.legend-background {}
.legend-fill ,
.legend-line {
    /* margin: auto;
    padding: 5px; */
}
.legend-icon {}
.legend-text {}
.legend-circle {}
.legend-unknow,
.legend-not-implemented {
    background-color: #FFFFFF;
}
.legend-unknow:before {
    content: '\2753';
    color: red;
    font-size: 15px;
}
.legend-not-implemented:before {
    content: '\2718';
    color: red;
    font-size: 15px;
}
.legend-fill-not-editable {

}
.legend-circle-not-editable,
.legend-line-not-editable {
    border-color: white;
}

.legend-styling-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.legend-styling {
    width: 50px;
}