.pxwidget {
    background-color: white;
    position: relative;
}

.pxwidget canvas {
    width: 100%;
}

.pxwidget .pxwidget-canvas-wrapper {
    height: 70vh;
}

.pxwidget img {
    display: block;
    margin: auto;
    max-width: 60%;
}

.pxwidget p {
    width: 100%;
}

.pxwidget .dt-buttons {
    margin-bottom: 5px;
}

.pxwidget .dataTables_filter {
    clear: both;
}

.pxwidget .leaflet-legend {
    color: #555;
    padding: 6px 8px;
    font: 12px Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.pxwidget .leaflet-legend ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    clear: both;
}

.pxwidget .leaflet-legend li {
    display: inline-block;
    width: 30px;
    height: 22px;
}

.pxwidget .leaflet-legend .min {
    float: left;
    padding-bottom: 5px;
}

.pxwidget .leaflet-legend .max {
    float: right;
}

/*If the device window is 575px or smaller*/

@media (max-width: 575px) {
    .pxwidget .pxwidget-canvas-wrapper {
        height: 80vh;
    }
}

/* Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
    .pxwidget .pxwidget-canvas-wrapper {
        height: 80vh;
    }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .pxwidget .pxwidget-canvas-wrapper {
        height: 80vh;
    }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .pxwidget .pxwidget-canvas-wrapper {
        height: 60vh;
    }
}

/* Extra Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .pxwidget .pxwidget-canvas-wrapper {
        height: 70vh;
    }
}


@media print {
/*  fix issue with multiple blank pages when widget is on the page, only happens for ChartJs 2.9.4, fixed in v3 onwards
  https://stackoverflow.com/questions/74820718/chart-js-printing-a-webpage-containing-chart-js-canvas-prints-out-hundreds-of
  backward compatibility for old widgets 
  */
  .pxwidget .chartjs-size-monitor{
    position: fixed;
    
  }
}