/* helper classes voor chartjs support */

/* voor jquery-popup*/
.ui-dialog {
   z-index: 100000 !important;
}

#graph_dialog {
   height: 100% !important;
}

.graph-outer-container {
   position: relative;
   height: 100%;
   width: 100%;
}

.graph-remote-wrapper {
   position: relative;
}

.graph-wrapper {
   height: 100%;
   /*display: flex;*/
   position: relative;
   border-radius: 5px;
   padding: 25px 15px 45px 15px;
}

.graph-pagination-icon {
   cursor: pointer;
   transition: all 200ms;
   margin: 0 auto;
}

.graph-element:hover > .graph-pagination-icon-left {
   transform: translateX(-5px);
}
.graph-element:hover > .graph-pagination-icon-right {
   transform: translateX(5px);
}

.graph-element {
   cursor: pointer;
   font-size: 35px;
   color: #4cb3e3;
   display: inline-flex;
   align-items: center;
   min-height: 100%;
   text-align: center;
   height: 100%;
   /*
   cursor: pointer;
   font-size: 35px;
   color: #4cb3e3;
   display: inline-flex;
   align-items: center;
   min-height: 100%;
   text-align: center;
   height: 100%;
   width: 5%;
   */
}

.chart-wrapper {
   /*
   max-width: 90%;
   flex-grow: 1;
   z-index: 99;
   margin: 0 auto;
   */
   width: 100%;
   height: 100%;
}

.button-wrapper {
   margin-top: 5px;
   text-align: center;
   display: inline-block;
   z-index: 101;
   width: 100%;
   height: 35px;
}

.label-bold {
   font-weight: 600;
}

#chartjs-tooltip {
   position: absolute;
   /*transform: rotate(90deg);*/
   background-color: #fff;
   border-radius: 3px;
   margin-left: 60px;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   padding: 1em;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   z-index: 104;
}

.graph_election_data {
   height: 300px;
   top: 25%;
   right: 7% ;
   z-index: 100;
   position: absolute;
}

.graph_election_data > table {
   border: 1px solid #333;
   padding:0;
   margin:0;
   font-family: Arial, Helvetica, sans-serif;
   font-weight:100;
   font-size:0.8em;
   background-color: #fff;
   border-collapse: unset;
   box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),
   0 0.9375rem 1.40625rem rgba(4,9,20,0.03),
   0 0.25rem 0.53125rem rgba(4,9,20,0.05),
   0 0.125rem 0.1875rem rgba(4,9,20,0.03);

}

.graph_election_data > table th{
   border-bottom: 1px solid #119DA4;
   background-color: #00a1e1;
   text-align: center;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
}


.graph_election_data > table th,
.graph_election_data > table td {
   padding: 8px 14px 8px 14px;
}


.graph_election_data > table tr:nth-child(odd){
   background-color: #f2f2f2;
}


.graph_election_data > table td:first-child{
   text-align:left;
   border-right:1px solid #D1F0E4;
}

.graph_election_data > table td {
   border-bottom: 1px solid #ddd ;
}

.graph-button.disabled {
   cursor: not-allowed;
   opacity: 0.9 !important;
}

.graph-button {
   transition: all 100ms;
}

.graph-pagination-icon.disabled {
   cursor: not-allowed;
   opacity: 0.5 !important;
}

.elektor-frame {
   height: 100%;
   padding: 10px;
   background-color: white;
   max-width: 99vw;
}

.elektor-frame .form-errors {
   margin-left: -40px;
}

.elektor-frame .save-button {
   margin-bottom: 20px;
}

.graph-additional-data {

   padding: 0;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 100;
   font-size: 0.8em;
   background-color: #fff;
   border-collapse: collapse;
   position: absolute;
   right: 8%;
   top: 25%;

}
.graph-additional-data > table {
   width: 200px;
   font-size: 12px;
   border: 1px solid #333;
}

.graph-additional-data td {
   padding: 8px;
   border: 1px solid #333;
   padding: 8px 14px 8px 14px;
}

.graph-additional-data tr:nth-child(even) td {
   background-color: #f2f2f2;
}

.graph-additional-data th {
   border-bottom: 1px solid #119DA4;
   background-color: #00a1e1;
   text-align: center;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   padding: 8px 14px 8px 14px;
}

.graphs-remote-button {
   position: absolute;
   right: 20px;
   top: 20px;
   z-index: 999;
}

.graphs-remote-graphs {
   /*
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 30%;
  min-width: 400px;
  */

   padding: 0 10px 0 10px;
   width: 100%;
   height: 100%;
   min-height: 100%;
   overflow-y: auto;
}

.graphs-remote-graphs-graph {
   cursor: pointer;
   transition: all 300ms;
   box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,0.03),0 0.9375rem 1.40625rem rgba(4,9,20,0.03),0 0.25rem 0.53125rem rgba(4,9,20,0.05),0 0.125rem 0.1875rem rgba(4,9,20,0.03);
   background-color: #00a1e1;
   color: white;
   padding: 0px 20px 0px 20px;
   border-radius: 3px;
   text-align: left;
   display: flex;
   flex-direction: column;
   margin-top: 20px;
}

.graphs-remote-graphs-graph h2 {
   font-size: 18px;
   font-weight: 300;
}

.graphs-remote-graphs-graph h4, .graphs-remote-graphs-graph span  {
   font-size: 14px;
   font-weight: 300;
   line-height: 1.1;
   margin: 5px 0;
}

.graphs-remote-graphs-graph h4 {
   width: 350px;
}

.graphs-remote-graphs-graph:first-child {
   margin-top: 0;
}

.graphs-remote-graphs-graph > div {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
}

.graphs-remote-graphs-graph:hover {
   transform: scale(1.02);
}

.remote-wrapper {
   text-align: center;
   /*
   flex-direction: column;
   */
   min-height: 100%;
   height: 100%;
   padding: 135px 0 170px 0px;
   width: 580px;
   margin: 0 auto;
}

.remote-header {
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
}

.remote-bottom {
   position: absolute;
   width: 100%;
   bottom: 15px;
}

.remote-bottom h3{
   font-size : 16px;
   margin: 5px;
}

.graph-page-element-wrapper {
   max-height: 50px;
   display: flex;
   flex-direction: row;
   justify-content: center;
}
.graph-page-element-wrapper > div {
   margin: 10px;
}

#grand-total-button-div {
   float: right;
}

#presentation_overlay {
   display: none;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 40000;
   padding: 15px;
   background-color: rgba(0,0,0, .5)
}

#presentation_overlay button.close-overlay {
   border: 2px solid transparent;
   border-radius: 5px;
   background-color: #00a1e1;
   color: #ffffff;
   font-weight: bold;
   padding: 1px 5px;
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 20px;
   transition: 0.3s;
   z-index: 1000;
}

#presentation_overlay button.close-overlay:hover {
   border-color: #00a1e1;
   color: #00a1e1;
   background-color: #ffffff;
}

.chart-buttons-wrapper {
   /*
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   */
   text-align: center;
}

.chart-buttons-wrapper button {
   background-color: #00a1e1;
   color: #ffffff;
   border: 2px solid transparent;
   border-radius: 3px;
   padding: 2px 5px;
   font-size: 20px;
}

@media(max-width: 640px) {
   .chart-buttons-wrapper button {
      font-size: 15px;
   }
}