#main-content{
    background-color: white;
}

.main-content{
    background: white;
}

.wrf-page{
    display: -webkit-inline-box;
    display: block;
    margin: 10px auto;
    max-height:  705px;
    width: 90%;
}

#thunder-select{
    margin-top: 10px;
    width: 100%;
    color: black;
    background-color: darkgray;
    border-radius: 5px;
    outline: black;
    text-align: center;
}

.thunder-select .select-item {
    background-color: darkgray;
    outline: black;
    padding: 5px;
}

.left-col{
    height: 870px;
}

.radio-selection{
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
}

.initial-radio{
    margin-right: 10px;
}

.radio-select{
    text-align: left;
    margin: 5px;
    font-size: 18px;
}

.radio-dot{
    margin-top: -1px;
    vertical-align: middle;
}
.radio-dot:after {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #0F2439;
}

.radio-dot:disabled:after{
    border-color: rgba(118, 118, 118, 0.3);
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
}

.radio-dot:disabled+label{
    color: #4e4e4e;
}

.fa-info-circle{
    font-size: 15px;
    color: #4681b3;
    cursor: pointer;
}
.fa-info-circle:hover{
    color: #5ba0da;
}

input[type='radio']:checked:after {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #766F65;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #0F2439;
}

/*sidebar*/
.wrf-sidebar{
    position: inherit;
    width: auto;
    background-color: #F6F2ED;
    height: inherit;
}
.sidebar-content{
    width: auto;
    height: 100%;
    background-color: #F6F2ED;
    overflow: auto;
}

.sidebar-option.sidebar-header{
    justify-content: center;
    border-top:none;
}

.sidebar-option{
    text-align: left;
    background-color: #C5BFB8;
    padding: 8px;
    display: flex;
    border-top: 2px solid #F6F2ED; 
}
.sidebar-option:hover{
    cursor: pointer;
}
.sidebar-option span{
    padding-left: 8px;
}

.hamburger{
    margin-left: auto;
}

.dropdown-content{
    padding-left: 24px;
}
.dropdown-option{
    padding: 4px;
    display: block;
    text-align: left;
    user-select: none;
}
.dropdown-option:hover{
    cursor: pointer;
}
.dropdown-option i{
    padding-right: 8px;
    font-size: 18px;
}
.drop-check{
    display: none;
}
.drop-check + div{
    display: none;
}
.drop-check:checked + div{
    display: block;
}
.disable-option{
    pointer-events: none;
    color: #dbd4cc;
}
@media only screen and (min-width: 750px){
    .wrf-sidebar{
        background-color: #F6F2ED;
        border-spacing: 0px;
        border-collapse: separate;
        line-height: 0px;
        vertical-align: top;
        margin-left: 15px;
    }
    .sidebar-content{
        line-height: 0px;
        overflow: auto;
        height: 100%;
    }
}

/*page content*/
#wrf-page-content{
    padding-top: 5px;
    background-color: white;
    margin: 0 auto;
}
.page-title{
    width: 100%;
    color: white;
    background-color: #766F65;
    padding: 10px 0px;
}

.banner{
    width: 100%;
    padding: 5px 0px;
    border: 2px solid #766F65;
}

#contact-info{
    padding: 10px 0;
}

.wrf-image-title{
    padding: 12px;
    max-width: 80%;
    margin: auto;
}

#wrf-slide-container{
    width: 90%;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 10px;
}

.controls{
    margin: 0px 25px;
}

@media only screen and (min-width: 750px){
    .wrf-page-content{
        display: table-cell;
    }
}

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.row {
    margin-right: 0px;
    margin-left: -15px;
}

/*override*/
.thunder-slider-controls > button.pause{
    width: auto;
}

.thunder-slider-controls > button.play{
    width: auto;
}

.controls.fas.fa-backward.fa-lg {
    vertical-align: -0.33em;
    cursor: pointer;
}

.controls.fas.fa-forward.fa-lg {
    vertical-align: -0.33em;
    cursor: pointer;
}