/* Commented out below. Hopefully it's not needed */
/* .gui-panel {
    display: inline-block;
    width: 100%;
}

.gui-panel-bordered {
    border: 1px solid #ddd;
}

.gui-panel-bordered .gui-panel-header {
    border-bottom: 1px solid #ddd;
} */

/*--------------- START - DROPDOWN PANEL ---------------*/
.gui-panel input[class='panel-checkbox'] {
    display: none;
}
.gui-panel {
    width: 100%;
    margin-bottom: 0;
    font-weight: normal;
    position: relative;
}
.gui-panel-content {
    display: none;
}
.gui-panel input[class='panel-checkbox']:checked ~ .gui-panel-content {
    display:block;
}
.gui-panel-title.gui-icon-right:after {
    transition: transform 0.2s;
    -webkit-transition: transform 0.2s;
}
/*--------------- END - DROPDOWN PANEL ---------------*/

/*--------------- START - OFF CANVAS PANEL ---------------*/
.gui-off-canvas input[class='off-canvas-checkbox'] {
    display: none;
}
.gui-off-canvas input[class='off-canvas-checkbox']:checked ~ .gui-panel-content {
    display: block;
}
.gui-off-canvas-content {
    display: grid;
    grid-template-rows: auto 1fr;
    position: fixed;
    top: 0;
    left: 100vw;
    width: 100vw;
    height: 100vh;
    z-index: 2001;
    background: #F2F2F2;
    box-sizing: border-box;
    transition: left 0.2s;
    -webkit-transition: left 0.2s;
}

.gui-off-canvas-content .gui-panel-content {
    display: block;
    border-top: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.gui-off-canvas input[class='off-canvas-checkbox']:checked ~ .gui-off-canvas-content {
    left: 0;
}

.off-canvas-panel-actions {
    border-bottom: 1px solid #CCC;
    top: 0px;
    width: 100%;
    background: #e8e8e8;
    box-sizing: border-box;
}

.off-canvas-panel-actions .gui-btn {
    margin-bottom: 0;
}
/*--------------- END - OFF CANVAS PANEL ---------------*/