/* colour of watermark */
.text-colour-phw-red {
    color: #ff0000;
}

/*
#:::::::::::::::::::::::::#
#     Cockpit Styling     #
#:::::::::::::::::::::::::#
*/
/*Changes colour of cockpit cards when highlighted*/
.card.phw-hover-highlight:hover {
    box-shadow: 0px 0px 5px 0px #4b80d6;
}

/* colour of cockpit title */
.text-colour-phw-darkest-blue {
    color: #325083 !important;
}

.cockpit_title {
    font-size: 40px;
    color: #325083;
    font-weight: 500;
}

.copyright {
    font-size: 12px;
    color: #325083;
    font-weight: 200;

}

/* background colour of card headers on cockpit */
.background-colour-phw-lightest-blue {
    background-color: #D6DCE6;
}

/*Explore this data button */
.btn {
    border: 2px solid;
    background-color: white;
    color: #325083;
    padding: 3px 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border-color: #325083;
}

/*Styling for explore data button when hovered/focused */
.explore:hover,
.explore:focus {
    background-color: #325083;
    color: white;
    /*transform: scale(1.1);*/
}

/* divide columns into 5ths */
@media (min-width: 992px) {
    .col-lg-5ths {
        flex: 0 0 auto;
        width: 16%;
    }
}

/*Changes text size of sparkline*/
.fs-08 {
    font-size: 0.8rem;
}

.sparkline-container hr:last-child {
    display: none;
}

.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip:focus {
    position: static;
    width: auto;
    height: auto;
}

.skip_main_content {
    border: 2px solid;
    border-radius: 5px;
    border-color: #325083;
    background-color: white;
    color: #325083;
    transition-duration: 0.4s;
    padding: 3px 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

/*
#=========================#
=     Drilldown pages     #
#=========================#
*/

/*Drilldown text */
.drilldown_text {
    border: 2px solid;
    border-radius: 5px;
    border-color: #325083;
    background-color: white;
    color: #325083;
    padding: 3px 10px;
    font-size: 16px;
}

.drilldown_link {
    border: 2px solid;
    border-radius: 5px;
    border-color: #325083;
    background-color: white;
    color: #325083;
    padding: 3px 10px;
    font-size: 16px;
    margin-bottom: 10px !important;
}

.correction_text {
    border: 2px solid;
    border-radius: 5px;
    border-color: #ad0000;
    background-color: white;
    color: #ad0000;
    padding: 3px 10px;
    font-size: 16px;
    margin-bottom: 10px !important;
}

.radio_button_options {
    border: 2px solid;
    border-radius: 5px;
    border-color: #325083;
    background-color: white;
    color: #325083;
    padding: 1px 5px;
    font-size: 16px;
}

.drilldown {

    height: 480px !important;
    border-style: solid;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 5px;
}

.dropdown-panel {
    height: 510px !important;
    border-style: solid;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 5px;
}

/*Class that includes toggle button*/
.container_fluid {
    margin-top: 2px;
    margin-bottom: 2px;
}

/*Styling to change appearance around each chart*/
.drilldown_boxes {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    margin-top: 10px;
    margin-bottom: 30px;
    border-width: 1px;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 5px;
}

.metadata_text {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    font-weight: bold;
}

/*
#=======================#
#     Chart styling     #
#=======================#
*/
.chart-title {
    font-size: 18px
}

.chart-subtitle {
    font-size: 15px
}

.chart-annotation {
    font-size: 14px
}

.chart-alt-text {
    font-size: 12px;
    color: white
}

.radio-button-input {
    margin-left: 20px;
}

.radio-button-label {
    min-width: 300px
}

.radio-button-label:hover {
    font-weight: bold;
}

.title_text {
    margin-left: 15px !important;
}

/*
#=========================#
#     Language toggle     #
#=========================#
*/
/*Keeps images & text in line with the toggle*/
.lang_toggle {
    display: inline-block !important;
}

/*
#=======================#
#     Navigation bar    #
#=======================#
*/

/*Main class all navbars use*/
/* IMPORTANT -This changes the main navbar & language toggle */
.navigation {
    border-style: solid;
    padding-bottom: 10px;
    border-radius: 10px;
    border-width: 2px;
    padding-top: 10px;
    margin-bottom: 7px !important;
    border-color: #325083;
    display: inline-block;
    width: 100%
}

/*Changes the  return to cockpit & indicator map buttons on main navbar */
.navbar_buttons {
    border-color: #325083;
    color: #325083;
    border-style: solid;
    margin-left: 10px;
    border-width: 2px;
    border-radius: 5px;
    display: inline-block;
}

.navbar_buttons_w {
    border-color: #325083;
    color: #325083;
    border-style: solid;
    margin-left: 10px;
    border-width: 2px;
    border-radius: 5px;
    display: inline-block;
}


/*Changes the  return to cockpit & indicator map buttons on main navbar when hovered/focused */
.navbar_buttons:hover,
.navbar_buttons:focus {
    outline: 2px solid #325083 !important;
    outline-offset: 3px !important;
}

/*Changes the title text within the main navbar*/
.nav_title {
    font-size: 32px;
    display: inline-block !important;
    margin-right: 80px;
    color: #325083;
}

.nav_title_w {
    font-size: 29px;
    display: inline-block !important;
    margin-right: 20px;
    color: #325083;
}

/*Changes properties of the image within the main navbar*/
.nav_img {
    display: inline-block !important;
    margin-right: 20px;
}

/*
#==============================#
#     Dashboard navigation     #
#==============================#
*/

/*The whole navigation bar*/
.dashboard_nav {
    margin-bottom: 10px;
    margin-top: 10px;
}

/*Dashboard nav buttons*/
.dash_nav_bttn {
    background-color: #325083 !important;
    border: 2px solid #325083 !important;
    border-style: solid !important;
    margin-left: 10px;
    margin-right: 10px;
    border-width: 0.5px;
    color: white;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;

}

/*Dashboard nav buttons when hovered/focused*/
.dash_nav_bttn:hover,
.dash_nav_bttn:focus {
    background-color: whitesmoke !important;
    color: #325083;
    outline: 2px solid #325083 !important;
    outline-offset: 5px !important;
    margin-top: 10px;
}

/*Dashboard nav button of page that you're currently on */
.dash_nav_bttn_selected {
    background-color: whitesmoke !important;
    border: 2px solid #325083 !important;
    border-style: solid !important;
    color: #325083 !important;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.meta {
    margin: 0em;
}

/*
#==============================#
#     Dashboard navigation     #
#==============================#
*/

.download_bttn {
    border: 2px solid;
    background-color: white;
    color: #325083;
    padding: 3px 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border-color: #325083;
    border-radius: 5px;
    text-decoration: none;
}

.download_bttn:hover,
.download_bttn:focus {
    outline: 2px solid #325083 !important;
    outline-offset: 3px !important;
}

.download_button {
    border: 2px solid;
    background-color: white;
    color: #325083;
    padding: 3px 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border-color: #325083;
    border-radius: 1px;
    text-decoration: none;
    margin-bottom: 500px !important;
}

/*
#==============#
#     test     #
#==============#
*/

.test:hover,
.test:focus {
    outline: 2px solid #325083 !important;
    outline-offset: 3px !important;
    width: 150px;
    height: 40px;
    margin-bottom: 1px;
    border: #ff0000;
    border-style: groove;
}


.election_note {
    /* border-style: solid;
    border-color: #325083; */
    color: #ff0000;
    border-width: 0.5px;
    text-align: center;
    font-size: large;
    font-weight: bolder;

}