@import "plugs.css?v=10";

:root {
    --primary: #732053;
    --first-color: #f49404;
    --second-color: #7c0039;
    --third-color: #bc7306;
    --forth-color: #7c0039;

    --my-second-color: #b23370;

}

[draggable=true] {
    -khtml-user-drag: element;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.jstree ul ul a {
    background: unset;
}

/***********************PAGE :: layout ***********************************************/
html {
    height: 100%;
    box-sizing: border-box;
}

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

body {
    position: relative;
    margin: 0;
    /*padding-bottom: 6rem;*/
    min-height: 100%;
    /*font-family: "Helvetica Neue", Arial, sans-serif;*/
    color: var(--primary);
    margin-bottom: 21px; /* Margin bottom by footer height */
}

.footer {
    position: absolute;
    bottom: -22px;
    width: 100%;
    height: 21px; /* Set the fixed height of the footer here */
    line-height: 21px; /* Vertically center the text there */
    background-color: var(--primary);
    color: white;
    text-align: center;
    font-size: smaller;
}

.footer > p {
    margin: 0px;
    padding: 0px;
}

.body-content {
    padding: 0px !important;
    background-color: var(--my-second-color);
}

.body-content > nav {
    margin-bottom: 10px;
}

#bdr-division {
    color: #F28F27;
    font-size: small;
}


.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

#overlay_loading {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 250, 250, 0.5);
    z-index: 2;
    cursor: pointer;
}

#text_loading {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30px;
    color: white;
    text-align: center;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    cursor: pointer;
}

#textAm {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30px;
    color: white;
    text-align: center;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.tab-content {
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: 0px solid #ecf0f1;
    border-bottom: 1px solid #ecf0f1;
    border-right: 0px solid #ecf0f1;
    /*min-height: 45vh;*/
}

/***********************PAGE :: home/index ***********************************************/
#dir-img-img{
    float: left;
    margin-bottom: 5px;
}
.text-first {
    color: var(--first-color) !important;
}

.text-second {
    color: var(--second-color) !important;
}

.text-third {
    color: var(--third-color) !important;
}

.text-forth {
    color: var(--forth-color) !important;
}

.border-first {
    border-color: var(--first-color) !important;
}

.border-second {
    border-color: var(--second-color) !important;
}

.border-third {
    border-color: var(--third-color) !important;
}

.border-forth {
    border-color: var(--forth-color) !important;
}

#map-min {

    height: 150px;
    /*float: left;*/
    width: 150px;
    border: solid 1px;
    border-color: rgba(140, 68, 99, 0.5);
    position: absolute;
    right: 0px;
    top: 22px;
    display: none;
}

#dir-img , #dir-pie, #dir-bar{
    position: absolute;
    left: 15px;
    bottom: 0px;
    display: none;
    z-index: 9;
}

.tooltip-chart {
    text-align: left;

}

.tooltip-chart-ar {
    text-align: right;
}

.map-tooltip {
    /* position: absolute;
     display: block !important;

     white-space: nowrap;
     z-index: 9999999;
     transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;*/
    background-color: rgba(245, 245, 245, 0.8);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(204, 204, 204);
    border-radius: 4px;
    color: rgb(0, 0, 0);
    font: 14px/21px "Microsoft YaHei";
    padding: 5px;
    /*!*left: 10px;*!
    !*top: 10px;*!
    pointer-events: none;*/
}

.map-tooltip-ar {
    position: absolute;
    display: block !important;
    border-style: solid;
    white-space: nowrap;
    z-index: 9999999;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    background-color: rgba(245, 245, 245, 0.8);
    border-width: 1px;
    border-color: rgb(204, 204, 204);
    border-radius: 4px;
    color: rgb(0, 0, 0);
    font: 14px/21px "Microsoft YaHei";
    padding: 10px;
    right: 10px;
    top: 10px;
    pointer-events: none;
}


#metric-row div {
    padding-left: 0px;
    padding-right: 15px;
}

#metric-row div:first-child {
    padding-left: 15px;
}

#metric-row.ar div {
    padding-left: 15px;
    padding-right: 0px;
}
#metric-row.ar div:first-child {

    padding-right: 15px;
}
#metric-row h6 {
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 15px;
    margin-left: 5px;
}

#metric-row .card-body {
    display: inline-flex;
}

#metric-row .external-link-alt {
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: unset;
}

#metric-row.ar .external-link-alt {
    left: 20px !important;
    right: unset !important;
}

#first-col.chart-col {
    background: white;
    /*border-left: solid 10px #fcfcfc;*/
    /*border-right: solid 10px #fcfcfc;*/
    border-left: solid 15px var(--my-second-color);
    border-right: solid 15px var(--my-second-color);
}


#second-col.chart-col {
    background: var(--my-second-color);
    /*border-left: solid 10px #fcfcfc;*/
    /*border-right: solid 10px #fcfcfc;*/
    /*border-left: solid 15px var(--primary);*/
    /*border-right: solid 15px var(--primary);*/
    padding: 0px;
}

#second-col.chart-col > div {
    background: white;
    border-right: solid 15px var(--my-second-color);
}

#second-col.ar.chart-col > div {
    border-right: unset;
    border-left: solid 15px var(--my-second-color);
}
.col-vertical-separator {
    border: 7.5px solid var(--my-second-color);
    padding: 0;
    margin: 0;
}

#metric-row {
    margin-bottom: 10px;
}

.ipc-ville-div {
    display: block;
    width: 100%;
    height: 20%;
    cursor: pointer;
    margin-bottom: 2rem !important;

}

.ipc-ville-div.active:after {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 25px 0;
    border-color: transparent var(--third-color) transparent transparent;
    position: absolute;
    right: 15px;
}

.ipc-ville-div.ar.active:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent var(--third-color);
    left: 15px;
    right: unset;
}


.ipc-ville-div img {
    height: 100%;
}

.ipc-ville-div span {
    font-size: 20px;
    color: var(--primary);
}

.btn-metric {
    cursor: pointer;

}

.btn-metric.active:before {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 0;
    border-right: 32px solid transparent;
    border-bottom: 32px solid;
    border-bottom-color: currentColor;
}

.btn-metric.ar.active:before {
    content: " ";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 0;
    width: 0;
    border-right: unset;
    border-left: 32px solid transparent;
    border-bottom: 32px solid;
    border-bottom-color: currentColor;
}

/***********************PAGE :: home/about ***********************************************/

/***********************PAGE :: indicator/index ******************************************/
.indicator-card {
    background: white;
    color: black;
    border: solid 2px #7C0039;
}

.indicator-card a {
    color: black;
}

/***********************PAGE :: indicator/view *******************************************/
#pivot-chart table {
    color: orange;
    width: 100%;
    /*display: block;*/
    /*float: left;*/
}

#pivot-chart table > thead > tr > th, #pivot-chart table > tbody > tr > td {
    white-space: nowrap;
}

/*#pivot-chart table > thead , #pivot-chart table > tbody > tr > td:first-child {*/
/*background: #902110;*/
/*color: white;*/
/*font-weight: bold;*/
/*}*/
#pivot-chart table .pivot-column, #pivot-chart table .pivot-row, #pivot-chart table .pivot-pivot {
    background: var(--primary);
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-color: var(--second-color);
    padding: 2px 5px;
}


#pivot-chart table .pivot-column {

    text-align: center;
}

/*#meta-fields-content .span-field, #row-fields-content .span-field, #column-fields-content .span-field {*/
/*!*word-wrap: break-word;*!*/
/*text-overflow: ellipsis;*/
/*white-space: nowrap;*/
/*overflow: hidden;*/
/*}*/
#meta-fields-content .span-field-label, #row-fields-content .span-field-label, #column-fields-content .span-field-label {
    /*word-wrap: break-word;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*#mCSB_1_container {*/
/*margin-left: 5px;*/
/*margin-right: 5px;*/
/*}*/
.filter-default-value.hide, .filter-value.hide {
    display: none;
}

.span-default-value.hide {
    display: none;
}

#row-fields-content .span-field-label {
    /*margin-left: 0px;*/
    /*margin-right: 0px;*/
    width: 100%;
}

#meta-fields-content, #column-fields-content, #row-fields-content {
    color: #7d5a29;
    background-color: var(--first-color);

    border-color: var(--second-color);
    border-width: 3px;
}

.span-field {
    margin: 2px;
}

/***********************PAGE :: theme/index **********************************************/

/***********************PAGE :: theme/view ***********************************************/
.theme-card {
    background: #F28F27;
    color: white;
    /*min-height: 20vh;*/
    /*max-height: 20vh;*/
}

.sector-card {
    background: #902110;
    color: white;
}

.theme-card a, .sector-card a {
    color: white;
}

.theme-card .card-subtitle, .sector-card .card-subtitle, .indicator-card .card-subtitle {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: inherit;
}

.theme-card:hover, .sector-card:hover, .indicator-card:hover, .theme-card.active, .sector-card.active, .indicator-card.active {
    background: #7C0039;
    color: white;
}

.indicator-card:hover a {
    color: white;
}

.indicator-active, .theme-active {
    background: #7C0039;
    padding: 5px;
    color: white;
}

.theme-tile {
    height: inherit;
    background-color: var(--my-second-color);
    /*color: #7C0039;*/
}

.indicator-tile {
    height: inherit;
    background-color: var(--my-second-color);
    color: white;
    border: 1px solid var(--my-second-color) !important;
}
.indicator-tile * {
    color:  white;
}
.theme-tile * {
    color: var(--white);
}

.theme-tile .dropdown-menu {
    background-color: var(--my-second-color);
    color: white;
}

.theme-tile .active * {
    color: #fff !important;
}

.btn-sous-theme.active, .anchor-theme:hover, .theme-tile .external-link-alt:hover, .indicator-tile:hover {
    /*background-color: rgba(124, 0, 57, 0.81);*/
    background-color: var(--primary);
    color: var(--first-color) !important;
}


.theme-tile .external-link-alt {
    padding: 0.5rem 1rem 0.5rem 1rem;
}

  .indicator-tile:hover * {
    color: var(--first-color);
}
.theme-tile:hover *:not(.dropdown-item) {
    color: white;
}

.anchor-theme, .anchor-indicator {
    text-align: start;
    /*font-size: 100%;*/
    overflow-wrap: break-word;

    word-wrap: break-spaces;

    /*word-wrap: break-word;*/
    /*word-break: break-all;*/
    word-break: break-word;

    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;

}
 .indicator-unite{
    font-size: 80%;
    font-weight: bold;
    /*font-style: italic;*/
    color: var(--first-color);
}

.anchor-theme h5 {
    margin: 0px;
}


.filterDiv {
    display: none;
}

.show-theme {
    display: block;
}


#newsTicker1 .bn-news {
    right: 5px !important;
}

#newsTicker1 .bn-controls {
    width: 15px;

}


#indicators-breadcrumb-parent {
    height: 105px;
    background-color: var(--my-second-color);

}

#sidebar{
    border: 1px solid rgba(0, 0, 0, 0.1);
}
#filter-inpt, #geo-filter-inpt {
    background-image: url('./content/searchicon.png');
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid var(--primary);
    margin-bottom: 12px;
}



#filter-inpt:focus, #geo-filter-inpt:focus {
     outline-color: var(--primary);
    outline-style: double;
}