#filterform    h4 {
    font-size: 1.2rem;
    padding: 0 0.7rem;
    margin: 0;
    background: #F5F6F7;
    /* border-color: rgb(192, 192, 192); */
    border-radius: 2px;
    margin-bottom: -1px;
    height: 2.75rem;
    cursor: pointer;
    font-weight: 500;
    color: #355064;
    padding-right: 3rem;
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.1;
    font-weight: 700;
    }

#filterform  fieldset {
      /*  border-width: 1px;
        border-style: solid;*/
        margin: 0;
    border-top: 1px solid #D7DCE0;
        margin-bottom: -1px;
            padding: 1rem 0.5rem;
        position: relative;
    font-size:1rem;
    }

#filterform  div fieldset:first-child{border:0;}
#filterform    fieldset>b, .hfset{font-size:1.125rem;font-weight:500;line-height: 1.2;    padding-right: 2rem;}
#filterform   fieldset.nobottom{border-bottom: 0;
    border-top: 0;
    padding-top: 0;
    margin-top: -0.45rem;}
#filterform   fieldset[name="12_6_Constitution"] {border-bottom: 0;
    border-top: 0;}

#filterform   fieldset[name="12_6_Constitution"] .amountvar{display:none}


#filterform   div fieldset:last-child{        margin-bottom:0;}

  #filterform    fieldset label {
       margin-left: 0.2rem;
    padding: 0.4rem;
      line-height: 1.2;
    }

#filterform fieldset label span, #filterform .hfset span{color:#9AA7B2;font-size:0.85rem;margin-left:0.5rem;font-weight:400;}

  #filterform    input[type="submit"] {
        padding: 1rem 2rem;
        font-size: 1.5rem;
        font-weight: bold;
    }

#filterform  .selectables *{  cursor: pointer;}

fieldset[name="12_6_Constitution"]:before{content:"Single issues";
display:block;
font-weight: 500;
    line-height: 1.2;
    padding-right: 2rem;
    border-top: 1px solid #D7DCE0;
    padding-top: 1rem;
}


#searchinput{height:42px;
   border:0;
    background-color:rgba(22, 159, 151, 0.3);
    border-radius:8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color:#355064;
    padding-left: 1rem;
    font-size: 1rem;
    width:calc(100% - 46px);
    float: left;
    font-weight: 300;
}
.textsearch{padding-bottom:1rem;}

#searchbutton{
    background-color:rgba(22, 159, 151, 0.6);
    background-image:url(/typo3conf/ext/ddc_sitepackage/Resources/Public/Icons/actions-search.svg);
    background-size:16px;
    background-position:center;
    background-repeat: no-repeat;
    margin-left: -1px;
     border:0;
    border-radius:8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width:46px;
    height:42px;
     outline-color: transparent;
    outline-style: none;
    outline:0px !important;
}
#searchbutton:hover{opacity:0.8}
#searchbutton:active{opacity:0.5}
*:focus {
   outline-color: transparent;
  outline-style: none;  
}

button:focus { outline:0 !important;  box-shadow: none !important;
}



.has-feedback {
    position: relative;
}
.clearbutton{width: 22px;
    height: 22px;
    background-color: #EBEDEF;
    background-image: url(/typo3conf/ext/ddc_sitepackage/Resources/Public/Icons/actions-close-dark.svg);
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 22px;
    margin-top: 10px;
    margin-right: 60px;}

/* Output LIst */

  .outputresults { 
     /* max-height: 1550px;
    overflow: auto;*/
    padding: 0 15px;

    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;;

}

    .outputresults > div {
       padding: 8px 14px;
   position: relative;
    }
.outputresults > div:before{content: "";
    background: #31D399;
    height: 100px;
    width: 10px;
    display: block;
    position: absolute;
    margin-top: 7.4rem;
}


.outputresults > div .inner{  background:#F5F6F7;
        border-radius:10px;
padding: 1.2rem 1.5rem;
    color:#9AA7B2;
  
}
 


.list_head, .outputresults h3{font-size:1.125rem;color:#355064; font-weight:500;}
.list_continent  .list_localname .list_politicallevel .list_codeinstr{}


.list_country{color:#355064; font-size:1.5rem;font-weight:600; text-transform:uppercase;    margin-bottom: 0;line-height: 1.5rem
    ;}
.list_location{margin-bottom: 1.5rem;}

.outputresults > div .inner div:not(.list_continent, .list_country, .list_location){min-height:4rem;}


    .selectables {
        max-height: 250px;
        overflow-y: auto;
    }

 .selectables>div{
    display: flex;
    align-items: center;}

    .amountvar {
      /*  font-size: 0.7rem;
        right:5px;;
        top: 0;
        position: absolute;
        color:gray;*/
        display:none !important;
    }
.colarea {
    min-height: 2.75rem;
    max-height: 2.75rem;
    overflow: hidden;
    transition: max-height 0.50s ease-in-out;
    margin-top: 1px;
}

.colarea.open{max-height: 2000px;}

.colarea h4:after{content:"▾";
     content: "▾";
    font-size: 1.9rem;
    /* width: 1rem; 
    float: right;
    margin-top: -0.5rem;
   display: flex;
    margin-right: -2rem;*/
    
    top: 0.1rem;
    right: 1rem;
    position: absolute;
}

.colarea.open h4:after{transform: rotate(180deg);
        margin-top: 0.4rem;
}

#outputdetail{}
.detail_head{margin-bottom:4rem;}
.detail_country{font-size: 2.8rem;
    color: #03253D;
    border-bottom: 0.5rem #D2F640 solid;
    padding-bottom: 0.8rem;
    font-weight:700;
    text-transform:uppercase;
}

.detail_location{font-size:1.875rem;
text-transform:uppercase;
    color:#355064;
     margin-left:1rem;
}
.detail_continent{font-size:1.875rem;
text-transform:uppercase;
    color:#D7DCE0;
    margin-left:1rem; 
}



.loadingdetail{width:100%; text-align:center; min-height:300px;}

#outputdetail h4{color:#355064;
font-size:1.375rem;
    font-weight:600;
    margin-bottom:0.3rem;
}


#outputdetail h2{
font-size:2.125rem;
}

.moreinfos h2{max-width:75%; border-bottom: 0.44rem #9AA7B2 solid;
    padding-bottom: 0.8rem;}

.moreinfos{padding:2rem 3rem 2rem 2rem;background-color:#F5F6F7;border-top:#D2F640 solid 1.32rem;  border-radius: 0.6rem 0.6rem 0 0;}

.moreinfos p{font-size:1.75rem;line-height:2.375rem;margin-top: 2rem;}

.legal_definition{ column-count: 2;font-size:1.125rem; margin-bottom:3rem;     column-gap: 3em;}

h2.filterdesigns span{font-weight:300;color:#9AA7B2;font-size:0.9em;}
.detailvalue:not(h4){color:#9AA7B2;font-size:1.125rem;  margin-bottom:2rem;line-height: 1.3;}

.thequery{font-size:9px;color:blue;}


.selectables input[type="checkbox"] {
 -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #9AA7B2;
    border-radius:2px;
       transform: translateY(0.1rem);
   

}

.selectables input[type="checkbox"]::before {
  content: "";
    display: block;
    margin-left:-1px;
    margin-top:-1px;
     width: 1.15rem;
    height: 1.15rem;
     border-radius:2px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    /*box-shadow: inset 1em 1em #03253d;*/
    background:#03253d;
}

.selectables input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.link-detailfull .inner{transition: all 0.2s}

.link-detailfull:hover .inner{-webkit-box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33); 
box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33);}


/* edit */

.editdata select{max-width: 100%; border: 1px solid #ccc;border-radius: 6px;}

.editdata textarea{border: 1px solid #ccc;border-radius: 6px;}
.editlocation input{border:1px solid  #ccc;border-radius: 6px;text-transform:none !important}

input.detail_country{padding-bottom:0;border-bottom: 0.5rem #D2F640 solid;}


.editlatlon input{width:30% !important;}
#outputdetail .editlatlon h4{    font-size: 1.1rem;margin-top:1rem;}

.legal_definition_edit textarea{width:100%;}

.editdata #outputdetail h4{font-size:1.2rem}


.editdata input:hover, .editdata  textarea:hover, .editdata select:hover{-webkit-box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33); 
box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33);}


/* Diagramme */
.diagramme{background:#c3e7f0; padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: visible;

}
.diagramme .frame-inner{display: flex;
    justify-content: space-between;}



.diagramm{background: #fff;
    border-radius: 4px;
    border: 4px white solid;}
.diagramm:hover{transform:scale(1.4); transition:all 0.3s;
-webkit-box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33); 
box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33);z-index:10;

}



.btn-reset{    color: #355064;
    background: #EBEDEF;
    border: 0;
    font-size: 12px;
    border-radius: 3px;
    background-image: url(/typo3conf/ext/ddc_sitepackage/Resources/Public/Icons/actions-close-dark.svg);
    background-size: 14px;
    background-position: 0.1rem center;
    background-repeat: no-repeat;
    padding: 0.2rem 0.3rem 0.2rem 1rem;
    font-weight:400;
}
.btn-reset:hover{  background-color: #E1E1E1}

.btnchart{
    width:34px;
    height:34px;
    border-radius:4px;
    border:1px solid #D7DCE0;
    background: url(/typo3conf/ext/ddc_sitepackage/Resources/Public/Icons/chartbtn.svg);
      background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 1rem;
}

.btnchart{
    position: relative;
    margin-top: -27px;
    margin-bottom: 15px;
    float: right;
}

#filterform  .btnchart{
    position: absolute;
    margin-top: 0;
    margin-bottom: 9;
    float: unset;
    right: 0;
    top: 1rem;
}
.btnchart:hover{opacity:0.7}



svg text[fill="#ffffff"] {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
   /*     font-weight: bold;*/
}

#resultcontainer .filterparameter {
    background: #F5F6F7;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    color: #355064;
    font-size: 0.8125rem;
    margin-bottom: 8px;
    position:relative;
    max-height:46px;
        overflow: hidden;
        transition: max-height 0.50s;
}

#resultcontainer .filterparameter>div>span{color:#169F97;font-weight:500;font-size:0.875rem; margin-right: 0.5rem;}

#resultcontainer .filterparameter .openclose {
    display:block;
    font-size: 1.9rem;
    top: 0rem;
    right: 1rem;
    position: absolute;
    border:0;
    background:none;
    transform: rotate(0);
}
#resultcontainer.filterpopen .filterparameter{max-height:500px; transition: max-height 0.70s;}
#resultcontainer.filterpopen .filterparameter .openclose{transform: rotate(180deg);}
.filterparameter .thefilters{
    /*display:none; */
    margin-top:0.5rem;}
#resultcontainer.filterpopen .filterparameter .thefilters{
   /* display:block*/
}

   #filteropen{display:none;}    

.modal-footer a:hover{opacity:0.8}
.modal-footer a img{cursor:pointer}

/* responsive */


@media (max-width:1400px)
{
    #filterform h4 {
    font-size: 1.1rem;
}
      #filterform fieldset>b, .hfset {
    font-size: 1.05rem;
    
}
}

@media (max-width:1260px)
{
    #filterform h4 {
    font-size: 1rem;

}
    
    #filterform fieldset>b, .hfset {
    font-size: 1rem;


}
    
    #filterform fieldset label {
    margin-left: 0.2rem;
    padding: 0.4rem;
        font-size:0.9rem
}
}


@media (max-width:767px){
    h2, .h2 {
    font-size: calc(1.2rem + 1.05vw);
}
    .btnchart{display:none;}
    .diagramme{overflow-y: auto;display: flex;
    flex-direction: row;}
    .diagramme::after { content: ''; min-width: 1px; }
    .diagramme>div{ flex: 1 1 auto;}
   

    .diagramm{margin-right:0.5rem;margin-left:0.5rem;}
     .outputresults { padding: 0; }
    
 #resultcontainer .filterparameter>div>span {
    font-size: 0.8rem;
    margin-right: 0.2rem;
}
    #resultcontainer .filterparameter {
        padding: 0.75rem 1rem;}
    
    .outputresults > div {
    padding: 0.75rem 1.5rem;
}
    
    #filteropen{display:block; margin-bottom: 1rem;    margin-left: -1.5rem;transition:margin 0.50s;}  
     #filteropen:not(.active) span:last-child{display:none}
    #filteropen.active span:first-child{display:none;     }
    #filteropen.active{margin-left: calc(85% - 2.5rem);}
    
#filtercontainer{
position: absolute;
    z-index: 10;
    background: white;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.50s;
    padding-bottom: 2rem;
    width:85%;
 border-radius: 0 10px 10px 0;
}
    #filtercontainer.open{  
        transform: translateX(0);
     transition: transform 0.50s;
    
       -webkit-box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33); 
box-shadow: 4px 4px 15px 2px rgba(0,0,0,0.33);
    }
    
    
    .legal_definition{ column-count: 1;}
    
    
    
    .detail_country {
    font-size: 1.8rem;
    color: #03253D;
    border-bottom: 0.5rem #D2F640 solid;
    padding-bottom: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
}
    .detail_location {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #355064;
    margin-left: 0;
    display: block;
    margin-top: 0.5rem;
}
    .detail_continent {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #D7DCE0;
    margin-left: 0; 
    display: block;
}
    .detail_head {
    margin-bottom: 2rem;
}
    #outputdetail h2 {
    font-size: 1.5rem;
} .moreinfos p {
    font-size: 1.2rem;
    line-height: 1.8rem;
    margin-top: 1.5rem;
}
    
}

/* Print */
@media screen {
  #printSection {
      display: none;
  }
}

@media print {
    hatml,body{ background:#fff;}
  body * {
    visibility:hidden;
        display: none;
      background:#fff;
    
  }
  #printSection, #printSection * {
    visibility:visible;
        display: block !important;
     
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
      width:100%;
  }
    
    
 #chart_modal>div>div[aria-hidden="true"]{display: none !important;}
    
}