/* Set variables*/
/*--first_container: #222;
    --first_container_text: #fff;
    --second_container: #444;
    --second_container_text: #fff;
    --third_container: #375a7f;
    --third_container_text: #fff;
    --main_warning_color: #F39C12;
    --main_warning_color: #C27C0E;*/
:root {
    --main_background_color: #fafafa;
    --main_text_color: #000;
    --main_warning_color: #d55e00;
    
    --navbar_background_color: #f1f1f1;
    --navbar_title_text_color: #000;
    --navbar_active_background_color: #375a7f;
    --navbar_active_text_color: #fff;
    --navbar_active_hover_background_color: #333;
    --navbar_active_hover_text_color: #fafafa;
    --navbar_inactive_background_color: #f1f1f1;
    --navbar_inactive_text_color: #000;
    --navbar_inactive_hover_background_color: #333;
    --navbar_inactive_hover_text_color: #fafafa;
    
    --navbar_submenu_active_background_color: #375a7f;
    --navbar_submenu_active_text_color: #fff;
    --navbar_submenu_active_hover_background_color: #333;
    --navbar_submenu_active_hover_text_color: #fafafa;
    --navbar_submenu_inactive_background_color: #f1f1f1;
    --navbar_submenu_inactive_text_color: #000;
    --navbar_submenu_inactive_hover_background_color: #333;
    --navbar_submenu_inactive_hover_text_color: #fafafa;
    
    --menu_background_color: #f1f1f1;
    --menu_text_color: #000;
    --menu_border_color: #666;
    --menu_info_icon_color: #ccc;
    
    --menu_tab_active_background_color: #375a7f;
    --menu_tab_active_text_color: #fff;
    --menu_tab_inactive_background_color: #f1f1f1;
    --menu_tab_inactive_text_color: #000;
    
    --submenu_background_color: #375a7f;
    --submenu_text_color: #fff;
    
    --menu_button1_background_color: #00bc8c;
    --menu_button1_text_color: #000;
    --menu_button1_hover_background_color: #009670;
    --menu_button1_hover_text_color: #222;
    --menu_button1_hover_border_color: #008966;
    
    --menu_button2_background_color: #3498DB;
    --menu_button2_text_color: #000;
    --menu_button2_hover_background_color: #2384c6;
    --menu_button2_hover_text_color: #222;
    --menu_button2_hover_border_color: #217dbb;
    
    --menu_button3_background_color: #f36b00;
    --menu_button3_text_color: #000;
    --menu_button3_border_color: #000;
    --menu_button3_hover_background_color: #c25600;
    --menu_button3_hover_text_color: #222;
    --menu_button3_hover_border_color: #222;    
    
    --menu_home_button1_background_color: #3498DB;
    --menu_home_button1_text_color: #000;
    --menu_home_button1_border_color: #000;
    --menu_home_button1_hover_background_color: #2384c6;
    --menu_home_button1_hover_text_color: #222;
    --menu_home_button1_hover_border_color: #222;
    
    --menu_home_button2_background_color: #cc79a7;
    --menu_home_button2_text_color: #000;
    --menu_home_button2_border_color: #000;
    --menu_home_button2_hover_background_color: #ba4a88;
    --menu_home_button2_hover_text_color: #222;
    --menu_home_button2_hover_border_color: #222;    
    
    --menu_home_button3_background_color: #00bc8c;
    --menu_home_button3_text_color: #000;
    --menu_home_button3_border_color: #000;
    --menu_home_button3_hover_background_color: #009670;
    --menu_home_button3_hover_text_color: #222;
    --menu_home_button3_hover_border_color: #222;
    
    --menu_home_button4_background_color: #f36b00;
    --menu_home_button4_text_color: #000;
    --menu_home_button4_border_color: #000;
    --menu_home_button4_hover_background_color: #c25600;
    --menu_home_button4_hover_text_color: #222;
    --menu_home_button4_hover_border_color: #222;
    
    --table_background_color: #fafafa;
    --table_text_color: #000;
    --table_header_background_color: #375a7f;
    --table_header_text_color: #fff;
    --table_glyphicon_color: #999;
}

/* Set global font and color */
body {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";    
  background-color: var(--main_background_color);
  color: var(--main_text_color);
}

/* Set the overall width of the page */
.cc_main > .container-fluid {
    margin: 0px;
    padding: 0px;
    width: 100%;
}
    
/* Set the global values to 0 */
.well {
    margin: 0px;
    padding: 0px;
    margin-bottom: 0px;
}

/**** NAV BAR ****/
/* Title */
.cc_main > .container-fluid > .navbar {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    background-color: var(--navbar_background_color);
    color: var(--navbar_text_color);
}

.cc_main > .container-fluid > .navbar .navbar-brand {
    font-size: 16px;
    color: var(--navbar_title_text_color);
}

/* Main  menu - active */
.cc_main > .container-fluid > .navbar li.active a {
    background-color: var(--navbar_active_background_color);
    color: var(--navbar_active_text_color);
    font-size: 16px;
    font-weight: 600;
}
.cc_main > .container-fluid > .navbar li.active a:hover,
.cc_main > .container-fluid > .navbar li.active a:focus {
    background-color: var(--navbar_active_hover_background_color);
    color: var(--navbar_active_hover_text_color);
    font-size: 16px;
    font-weight: 600;
}

/* Main  menu - inactive */
.cc_main > .container-fluid > .navbar a {
    background-color: var(--navbar_inactive_background_color);
    color: var(--navbar_inactive_text_color);
    font-size: 16px;
    font-weight: 600;
}
.cc_main > .container-fluid > .navbar a:hover,
.cc_main > .container-fluid > .navbar a:focus {
    background-color: var(--navbar_inactive_hover_background_color);
    color: var(--navbar_inactive_hover_text_color);
    font-size: 16px;
    font-weight: 600;
}

/* Submenu - active */
.cc_main > .container-fluid > .navbar .dropdown > .dropdown-menu li.active a {
    background-color: var(--navbar_submenu_active_background_color);
    color: var(--navbar_submenu_active_text_color);
    font-size: 16px;
    font-weight: 600;
}
.cc_main > .container-fluid > .navbar .dropdown > .dropdown-menu li.active a:hover,
.cc_main > .container-fluid > .navbar .dropdown > .dropdown-menu li.active a:focus {
    background-color: var(--navbar_submenu_active_hover_background_color);
    color: var(--navbar_submenu_active_hover_text_color);
    font-size: 16px;
    font-weight: 600;
}

/* Submenu - active */
.cc_main > .container-fluid > .navbar .dropdown > .dropdown-menu li a {
    background-color: var(--navbar_submenu_inactive_background_color);
    color: var(--navbar_submenu_inactive_text_color);
    font-size: 16px;
    font-weight: 600;
}
.cc_main > .container-fluid > .navbar .dropdown > .dropdown-menu li a:hover,
.cc_main > .container-fluid > .navbar .dropdown > .dropdown-menu li a:focus {
    background-color: var(--navbar_submenu_inactive_hover_background_color);
    color: var(--navbar_submenu_inactive_hover_text_color);
    font-size: 16px;
    font-weight: 600;
}

/**** TABS ****/
/*
.nav-tabs {
    border-bottom: 2px solid var(--second_container);
}
.nav-tabs a {
    font-size: 18px;
}
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
    color: var(--tab_selected_text);
    background-color: var(--third_container);
    border-color: transparent;
}
.nav-tabs li a {
    color: var(--tab_other_text);
    background-color: var(--tab_other_background);
}
.nav-tabs li a:hover {
    background-color: var(--tab_other_background);
    border-color: var(--second_container) var(--second_container) transparent;
}
*/

/**** OPTIONS BAR ****/
/* Set the title options */
.cc_options_bar_title {
    padding: 0px 0px 10px 0px;
    color: var(--main_text_color);
    font-size: 18px;
}

/* Set the borders of the whole bar */
.cc_options_bar > .well {
    padding: 0px 0px 10px 0px;
    background-color: var(--menu_background_color);
    border-color: var(--menu_border_color);
    border-width: 2px;
    border-radius: 5px;
}

/* Sub tabs */
.cc_options_bar .nav-tabs {
    margin: 5px 0px 0px 0px;
    padding: 0px 0px 0px 5px;
    border-bottom: 2px solid var(--menu_tab_active_background_color);
}

.cc_options_bar .nav-tabs a {
    font-size: 16px;   
}

.cc_options_bar .nav-tabs li.active a,
.cc_options_bar .nav-tabs li.active a:hover,
.cc_options_bar .nav-tabs li.active a:focus {
    padding: 5px 10px;
    color: var(--menu_tab_active_text_color);
    background-color: var(--menu_tab_active_background_color);
    border-color: transparent;
}

.cc_options_bar .nav-tabs li a {
    padding: 5px 10px;
    color: var(--tab_other_text);
    background-color: var(--menu_tab_inactive_background_color);
    border-bottom: 1px solid var(--menu_tab_active_background_color);
}

.cc_options_bar .nav-tabs li a:hover {
    background-color: var(--menu_tab_inactive_background_color);
    border-color: var(--menu_tab_active_background_color) var(--menu_tab_active_background_color) transparent;
    border-bottom: 1px solid var(--menu_tab_active_background_color);
}

/* Format the title of each wellPanel */
h4.cc_box_title {
    font-weight: bold;
    margin: 10px 15px 0px 15px;
}

/* Set the borders of each container in the bar */
.cc_options_container > .well {
    margin: 10px 30px 0px 30px;
    padding: 0px 0px 10px 0px;
    background-color: var(--submenu_background_color);
    border-color: var(--submenu_background_color);
    color: var(--submenu_text_color);
}
/* Set the borders for the title of each container in the bar */
.cc_options_container .well h4 {
    margin: 10px;
}
/* Format columns for when there is an icon in the header of the well */
.cc_options_container .well .col-sm-2,
.cc_options_container .well .col-sm-10 {
    margin: 0px;
    padding: 0px;
}
/* Format the icon in the header */
.cc_options_container .cc_icon i {
    color: var(--info_icon);
    padding: 10px;
}
/* Set the borders for the text inputs */
.cc_options_container .shiny-input-container {
    margin: 0px 10px 0px 10px;
    padding: 0px;
}
/* Set the borders for the select inputs */
.cc_options_container .selectize-control {
    margin: 0px;
    padding: 0px;
}
/* Set the min and max height for select inputs with many options accepted */
.cc_options_container .cc_selectize_input_many .selectize-input {
    min-height: 34px;
    max-height: 84px;
    overflow-y: auto;
}
/* Set the size of textarea inputs*/
.cc_textarea_input textarea {
    resize: none;
        min-height: 34px;
    max-height: 84px;
    overflow-y: auto;
}
/* Set the width for the dropdown for select inputs (if necessary) */
/*
.cc_options_container .cc_selectize_input_many .selectize-dropdown {
    min-width: 300px;
}
*/
/* Set the borders for the chackboxes inputs */
.cc_options_container .checkbox {
margin: 5px 0px 5px 0px;
}
/* Set the borders for the labels of the inputs */
.cc_options_container .shiny-input-container .control-label {
    margin: 5px 0px 5px 0px;
}
/* Set the borders for when there are two columns */
div.cc_two_columns_container {
    padding: 0px;
}
.cc_two_columns_container div.col-sm-6 {
    padding: 0px;
}
.cc_two_columns_container_left .shiny-input-container {
    margin: 0px 5px 0px 25px;
}
.cc_two_columns_container_left .shiny-input-container .control-label {
    margin: 0px;
}
.cc_two_columns_container_right .shiny-input-container {
    margin: 0px 25px 0px 5px;
}
.cc_two_columns_container_right .shiny-input-container .control-label {
    margin: 0px;
}
/* Set the borders for the buttons */
.cc_options_bar .action-button,
.cc_options_bar .shiny-download-link {
    margin: 10px 0px 0px 0px;
}
.cc_options_bar .cc_large_button .action-button,
.cc_options_bar .cc_large_button .shiny-download-link {
    width: 60%;
}
.cc_options_bar .cc_main_button .action-button,
.cc_options_bar .cc_main_button .shiny-download-link {
    color: var(--menu_button1_text_color);
    background-color: var(--menu_button1_background_color);
    border-color: var(--menu_button1_background_color);
}
.cc_options_bar .cc_main_button .action-button:hover,
.cc_options_bar .cc_main_button .shiny-download-link:hover {
    color: var(--menu_button1_hover_text_color);
    background-color: var(--menu_button1_hover_background_color);
    border-color: var(--menu_button1_hover_border_color);
}
.cc_options_bar .cc_main_button .action-button:focus,
.cc_options_bar .cc_main_button .shiny-download-link:focus {
    color: var(--menu_button1_hover_text_color);
    background-color: var(--menu_button1_hover_background_color);
    border-color: var(--menu_button1_hover_border_color);
}

.cc_options_bar .cc_extra_button .action-button,
.cc_options_bar .cc_extra_button .shiny-download-link {
    color: var(--menu_button2_text_color);
    background-color: var(--menu_button2_background_color);
    border-color: var(--menu_button2_background_color);
}
.cc_options_bar .cc_extra_button .action-button:hover,
.cc_options_bar .cc_extra_button .shiny-download-link:hover {
    color: var(--menu_button2_hover_text_color);
    background-color: var(--menu_button2_hover_background_color);
    border-color: var(--menu_button2_hover_border_color);
}
.cc_options_bar .cc_extra_button .action-button:focus,
.cc_options_bar .cc_extra_button .shiny-download-link:focus {
    color: var(--menu_button2_hover_text_color);
    background-color: var(--menu_button2_hover_background_color);
    border-color: var(--menu_button2_hover_border_color);
}
/* Set the borders for the extra buttons */
.cc_extras_bar > div.row {
    width: 100%;
    margin: 0px;
}
.cc_extras_bar .action-button {
    margin: 10px 0px 0px 0px;
}
.cc_extras_bar .cc_goback_button .action-button {
    width: 50%;
}
.cc_extras_bar .cc_goback_button .action-button {
    color: var(--menu_button2_text_color);
    background-color: var(--menu_button2_background_color);
    border-color: var(--menu_button2_background_color);
}
.cc_extras_bar .cc_goback_button .action-button:hover {
    color: var(--menu_button2_hover_text_color);
    background-color: var(--menu_button2_hover_background_color);
    border-color: var(--menu_button2_hover_border_color);
}
.cc_extras_bar .cc_goback_button .action-button:focus {
    color: var(--menu_button2_hover_text_color);
    background-color: var(--menu_button2_hover_background_color);
    border-color: var(--menu_button2_hover_border_color);
}
.cc_fetch_button .action-button {
    width: 50%;
}
.cc_fetch_button .action-button {
    color: var(--menu_button3_text_color);
    background-color: var(--menu_button3_background_color);
    border-color: var(--menu_button3_background_color);
}
.cc_fetch_button .action-button:hover {
    color: var(--menu_button3_hover_text_color);
    background-color: var(--menu_button3_hover_background_color);
    border-color: var(--menu_button3_hover_border_color);
}
.cc_fetch_button .action-button:focus {
    color: var(--menu_button3_hover_text_color);
    background-color: var(--menu_button3_hover_background_color);
    border-color: var(--menu_button3_hover_border_color);
}

/**** PLOT BOX ****/
div.cc_plot_page_box {
    padding: 10px 10px 0px 10px;    
}
.cc_plot_page_box >  div.row {
    margin: 0px;
}
.cc_plot_page_box >  .row > div.row {
    margin: 0px;
}
.cc_plot_page_box > .row > div.col-sm-12 {
    margin: 0px;
    padding: 0px;
}
.cc_plot_page_box > .row > .col-sm-12 > div.row {
    margin: 0px;
}
.cc_plot_page_box > .row > .col-sm-12 > .row > div.col-sm-2 {
    margin: 0px;
    padding: 0px;
}
.cc_plot_page_box > .row > .col-sm-12 > .row > div.col-sm-10 {
    padding-right: 10px;
}

.cc_plot_box .cc_html_output .shiny-html-output {
    padding: 0px;
    color: black;
}

/* Add the error color*/
.cc_plot_box .shiny-html-output {
    padding: 10px 0px 0px 0px;
}
.cc_plot_box .shiny-html-output ul {
    color: var(--main_warning_color);
}
.cc_plot_box .well {
    /*padding: 10px 10px 0px 0px;*/
    padding: 0px;
    margin: 0px;
    background-color: var(--main_background_color);
    border-width: 0px;
    /*border-width: 2px;
    border-color: #666;*/
}
.cc_plot_box .well > .row {
    padding: 0px 20px 0 20px;
}

/* Add the error color*/
.cc_plot_box .shiny-html-output {
    padding: 0px 0px 0px 20px;
    color: var(--main_warning_color);
}

/**** DATA TABLE ****/
div.cc_dt_page_box {
    padding: 10px 0px 0px 10px;    
}
.cc_dt_page_box > div.row {
    margin: 0px;
}
.cc_dt_page_box > .row > div.col-sm-12 {
    margin: 0px;
    padding: 0px;
}
.cc_dt_page_box > .row > .col-sm-12 > div.row {
    margin: 0px;
}
.cc_dt_page_box > .row > .col-sm-12 > .row > div.col-sm-2 {
    margin: 0px;
    padding: 0px;
}

/* Fix the borders for the data table */
.cc_data_table .well {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px 0px 5px;
    background-color: var(--table_background_color);
    border-style: solid;
    border-color: #666;
    border-width: 2px;
}
.cc_data_table .dataTables_scrollHead {
    background-color: var(--table_header_background_color);
    color: var(--table_header_text_color);
}
.cc_data_table .dataTables_scrollHead thead tr:first-child {
    color: var(--table_header_text_color);
    font-size: 15px;
}
.cc_data_table .dataTables_scrollBody {
    color: var(--table_text_color);
}
.cc_data_table .well > .row {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    
}
.cc_data_table .glyphicon {
    color: var(--table_glyphicon_color);
}
/* Add the error color*/
.cc_data_table .shiny-html-output {
    padding: 0px 0px 0px 20px;
    color: var(--main_warning_color);
}
/* Fix text color around table */
.cc_data_table .dataTables_length label,
.cc_data_table .dataTables_filter label,
.cc_data_table div.dataTables_info {
    color: var(--table_text_color);
}
.cc_data_table .dataTables_length select {
    border-color: var(--table_header_background_color);
    background-color: var(--table_background_color);
}
.cc_data_table .dataTables_filter input {
    color: var(--table_text_color);
}
/* Pagination */
.cc_data_table .dataTables_wrapper .dataTables_paginate a.paginate_button {
    color: var(--table_text_color) !important;
    background-color: transparent;
}
.cc_dt_page_box .cc_warning_button .action-button {
    border: none;
    background: transparent;
    color: var(--main_warning_color);
    padding: 0px;
}

/**** TOOLTIP ****/
/* Tooltip container */
.cc_tooltip {
    position: relative;
    display: block;
    opacity: 1;
    z-index: 999; /* This is because otherwise the div can get overlapped by other divs */
}

/* Tooltip text */
.cc_tooltip .cc_tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 6px;
    
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 5;
    
    /* text-align: justify; */
    text-align: left;
        
    /* Tooltip fades in */
    opacity: 0;
    transition: opacity 0.5s;
    
    /* To add line breaks to the tooltips */
    white-space: pre-line;
}
/* Tooltip position for checkboxes */
.cc_tooltip .cc_tooltiptext_checkbox {
    /* To make the tooltip be on top of the word*/
    width: 240px;
    bottom: 125%; /* 125% instead of 100% to raise it a bit mode */
    left: 61%;
    margin-left: -120px; /* Use half of the width to center the tooltip */
}
/* Tooltip position for icons */
.cc_tooltip .cc_tooltiptext_icon {
    width: 260px;
    top: -20px;
    left: 105%;
}
/* Tooltip position for buttons */
.cc_tooltip .cc_tooltiptext_action_button {
    top: -10px;
    left: 20px;
    width: 145px;
    text-align: center;
}
/* Show the tooltip text when you mouse over the tooltip container */
.cc_tooltip:hover .cc_tooltiptext {
    visibility: visible;
    
    /* Tooltip fades in */
    opacity: 1;
}
/* Tooltip arrow */
/* Disabled for now
.cc_tooltip .cc_tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; 
    margin-top: -8px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
*/

/**** MARKDOWNS ****/
/* Set up css to import iframe and fit the space correctly */
.cc_markdown {
    margin: auto;
    max-width: 1200px;
}
.cc_markdown iframe {
    height: 100%;
}
.cc_markdown_page_box {
    height: 100%;
}
.cc_markdown_page_box div {
    height: 100%;
}
.cc_markdown_page_box .col-sm-12 {
    padding: 0px 0px 0px 0px;
}
.cc_main > .container-fluid > .container-fluid {
    padding: 0px 0px 0px 0px;
}
.cc_markdown_page_box .row {
    margin: 0px 0px 0px 0px;
}

#ci_markdown_summary, #ci_markdown_about {
    height: 600px;
}

/**** MAIN PAGE ****/
#ci_markdown_home {
    width: 60%;
    min-width: 100px;
    margin: auto;
    overflow: auto;
}

#ci_markdown_home h1 {
    font-variant: all-small-caps;
}

#ci_markdown_home h2 {
    color: #980000;
    font-size: 20px;
    font-variant: all-small-caps;
}

#ci_markdown_home p {
    font-size: 15px;
}

#ci_markdown_home img {
    width: 100%;
    padding: 0px 0px 20px 0px;
}

#ci_markdown_home .well {
    height: 160px;
    margin: 0px 10px 20px 10px;
    padding: 10px;
    background-color: var(--menu_background_color);
    border-color: var(--menu_border_color);
    border-width: 2px;
    border-radius: 5px;
    font-size: 16px;
}

#ci_markdown_home #cc_home_bottom_row div.col-sm-3 {
    padding: 0px;
}

/* Set the borders for the buttons */
#ci_markdown_home div.cc_action_button {
    height: auto;
}

#ci_markdown_home .cc_home_dt_button .action-button,
#ci_markdown_home .cc_home_plot_button .action-button,
#ci_markdown_home .cc_home_static_plot_button .action-button {
    width: 90%;
    height: 60px;
    margin: 0px 0px 10px 0px;
    font-size: 16px;
    font-weight: bold;
}

#ci_markdown_home .cc_home_extra_button .action-button {
    min-width: 60%;
    min-height: 33px;
    margin: 0 10px 10px 10px;
    font-weight: bold;
}

/* Set the colors for the buttons */
#ci_markdown_home .cc_home_dt_button .action-button {
    color: var(--menu_home_button1_text_color);
    background-color: var(--menu_home_button1_background_color);
    border-color: var(--menu_home_button1_border_color);
}
#ci_markdown_home .cc_home_dt_button .action-button:hover {
    color: var(--menu_home_button1_hover_text_color);
    background-color: var(--menu_home_button1_hover_background_color);
    border-color: var(--menu_home_button1_hover_border_color);
}
#ci_markdown_home .cc_home_dt_button .action-button:focus {
    color: var(--menu_home_button1_hover_text_color);
    background-color: var(--menu_home_button1_hover_background_color);
    border-color: var(--menu_home_button1_hover_border_color);
}

#ci_markdown_home .cc_home_plot_button .action-button {
    color: var(--menu_home_button2_text_color);
    background-color: var(--menu_home_button2_background_color);
    border-color: var(--menu_home_button2_border_color);
}
#ci_markdown_home .cc_home_plot_button .action-button:hover {
    color: var(--menu_home_button2_hover_text_color);
    background-color: var(--menu_home_button2_hover_background_color);
    border-color: var(--menu_home_button2_hover_border_color);
}
#ci_markdown_home .cc_home_plot_button .action-button:focus {
    color: var(--menu_home_button2_hover_text_color);
    background-color: var(--menu_home_button2_hover_background_color);
    border-color: var(--menu_home_button2_hover_border_color);
}

#ci_markdown_home .cc_home_static_plot_button .action-button {
    color: var(--menu_home_button3_text_color);
    background-color: var(--menu_home_button3_background_color);
    border-color: var(--menu_home_button3_border_color);
}
#ci_markdown_home .cc_home_static_plot_button .action-button:hover {
    color: var(--menu_home_button3_hover_text_color);
    background-color: var(--menu_home_button3_hover_background_color);
    border-color: var(--menu_home_button3_hover_border_color);
}
#ci_markdown_home .cc_home_static_plot_button .action-button:focus {
    color: var(--menu_home_button3_hover_text_color);
    background-color: var(--menu_home_button3_hover_background_color);
    border-color: var(--menu_home_button3_hover_border_color);
}

#ci_markdown_home .cc_home_extra_button .action-button {
    color: var(--menu_home_button4_text_color);
    background-color: var(--menu_home_button4_background_color);
    border-color: var(--menu_home_button4_border_color);
}
#ci_markdown_home .cc_home_extra_button .action-button:hover {
    color: var(--menu_home_button4_hover_text_color);
    background-color: var(--menu_home_button4_hover_background_color);
    border-color: var(--menu_home_button4_hover_border_color);
}
#ci_markdown_home .cc_home_extra_button .action-button:focus {
    color: var(--menu_home_button4_hover_text_color);
    background-color: var(--menu_home_button4_hover_background_color);
    border-color: var(--menu_home_button4_hover_border_color);
}