/*-------------------------------*/
/* Base styling for the pfp page */
/*-------------------------------*/

#map_container {
    height: 100vh;
}

/*----------------------------*/
/* disclaimer related styling */
/*----------------------------*/
#div_disclaimer_content {
    max-height: 50vh;
}

/*------------------------*/
/* button related styling */
/*------------------------*/

.classic_button:hover {
    background-color: #9ea7b6;
}

.default_clickable_element.iframe_displayed:hover {
    color: #002d5f;
}

.default_clickable_element:hover {
    color: #ffffff;
    background-color: #9ea7b6;
}

.iframe_displayed {
    color: #ffffff;
    background-color: #9ea7b6;
}

/*---------------------------*/
/* 'two option' line styling */
/*---------------------------*/

.two_option_indicator:hover {
    background-color: #9ea7b6;
}

/*-----------------------------*/
/* 'multi option' line styling */
/*-----------------------------*/

.multi_option_element > span {
    font-size: 14px;
    text-transform: uppercase;
    padding: 0 8px 0 30px;
}

.multi_option_element_indicator {
    position: absolute;
    margin-left: -2px;
    top: 50%;
    transform: translateY(-50%);
}

.multi_option_selected_element {
    background-color: #002d5f !important;
    color: #ffffff !important;
}

.multi_option_indicator:hover {
    background-color: #9ea7b6;
}
#layer_display_control {
    margin: 0 0 10px 10px;
}

.layer_container:not(:first-of-type) {
    margin-left: 5px;
}
.layer_container:not(:last-of-type) {
    margin-right: 5px;
}
.layer_container > .multi_option_element {
    max-width: 250px;
}
.layer_container > .multi_option_element > span {
    text-align: center;
}
.layer_container
    > .multi_option_element:not(.multi_option_selected_element)
    + .layer_operations_container {
    visibility: hidden;
}

.layer_operations_container > .multi_option_element {
    margin: 10px 0 0 20px;
    max-width: 230px;
}
.layer_operations_container > .multi_option_element > span {
    font-size: 12px;
    padding-left: 26px;
}
.layer_operations_container
    > .multi_option_element
    > .multi_option_element_indicator {
    width: 20px;
    height: 20px;
}

/*------------------------*/
/* random control styling */
/*------------------------*/

#city_level_of_service:hover {
    background-color: #a7a9ac !important;
}

#external_site_news_frame,
#external_site_weather_frame,
.twitter-timeline {
    width: 95%;
    margin: auto;
}

/*------------------------*/
/* search control styling */
/*------------------------*/
#search_container {
    background-color: #9ea7b6;
}
#input_search:hover {
    border-color: #ffffff;
}

#local_news_container,
#local_weather_container {
    background-color: lightblue;
    padding-bottom: 10px;
    height: 75vh;
}

#btn_close_news_container:hover,
#btn_close_search_container:hover,
#btn_close_weather_container:hover {
    color: #002d5f;
}

/*----------------------*/
/* zoom control styling */
/*--------------------- */
#map_zoom_control .zoom_button {
    font-size: 12px;
    padding: 3px 12px;
}

#zoom_in {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right: none !important;
}

#zoom_out {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-left: none !important;
}

#zoom_divider {
    background-color: #ffffff;
    border-top: 2px solid #002d5f;
    border-bottom: 2px solid #002d5f;
}
#zoom_divider > div {
    width: 1px;
    height: 12px;
    margin: 3px 0;
    background-color: #002d5f;
}

/*---------------------------------*/
/* 'toggle switch' control styling */
/*---------------------------------*/

#priority_switch_control {
    margin: 0 10px 10px 0;
    width: 310px;
}

.toggle_switch_controller:hover {
    border-color: #9ea7b6;
}

/*--------------------*/
/* legend box styling */
/*--------------------*/
#legend_control {
    margin: 0 10px 10px 0;
}

#div_legend_container {
    padding: 0 10px 10px 10px;
}

#div_legend_container {
    background-color: #f5f6f9;
    width: 285px;
}

#legend_tab_div_container > div:first-of-type {
    color: #002d5f;
    margin: 5px 0;
    text-align: center;
}

/*-----------------------------------------------*/
/* focus branding and portal information styling */
/*-----------------------------------------------*/

#focus_branding a:hover {
    background: none !important;
}
#focus_branding:hover {
    opacity: 1;
    background-color: #a7a9ac;
}

#focus_branding:hover .focus-logo-here {
    color: #f2f2f2;
}

/*--------------------*/
/* bubble_text styling */
/*--------------------*/

#btn_close_bubble_text:hover {
    color: #002d5f;
    background-color: #f5f6f9;
}