@font-face {
    font-family: "Alleyn W01";
    font-weight: 400;
    src: url("./fonts/alleyn-w01-regular.woff2") format("woff2"),
        url("./fonts/alleyn-w01-regular.woff") format("woff");
}

@font-face {
    font-family: "Alleyn W01";
    font-weight: 700;
    src: url("./fonts/alleyn-w01-bold.woff2") format("woff2"),
        url("./fonts/alleyn-w01-bold.woff") format("woff");
}

@font-face {
    font-family: "Alleyn W01";
    font-weight: 400;
    font-style: italic;
    src: url("./fonts/alleyn-w01-regular-italic.woff2") format("woff2"),
        url("./fonts/alleyn-w01-regular-italic.woff") format("woff");
}

@font-face {
    font-family: "Cera GR";
    font-weight: 400;
    src: url("./fonts/cera-gr-light.woff2") format("woff2"),
        url("./fonts/cera-gr-light.woff") format("woff");
}

@font-face {
    font-family: "Cera GR";
    font-weight: 700;
    src: url("./fonts/cera-gr-bold.woff2") format("woff2"),
        url("./fonts/cera-gr-bold.woff") format("woff");
}

@font-face {
    font-family: "Cera GR";
    font-weight: 400;
    font-style: italic;
    src: url("./fonts/cera-gr-light-italic.woff2") format("woff2"),
        url("./fonts/cera-gr-light-italic.woff") format("woff");
}

body {
    background-color: #FEFCFA;
}

.nav-pills .nav-link.active {
    color: #FFFFFF;
    background-color: #FFFFFF;
}

.Select--multi .Select-control .Select-value {
    background-color: #D6E5E3;
    border-color: #D6E5E3;
    color: #0D1F57;
}

.Select-control {
    background-color: #FEFCFA !important;
    overflow-wrap: break-word;
}

.layout {
    background-color: #FEFCFA;
    margin-left: 20rem;
    margin-right: 2rem;
    padding: 2rem 1rem;
    margin-top: 1rem;
}

.heading-image {
    text-align: center;
    font-weight: bold;
    font-size: 200%;
    padding-bottom: 50px
}

.heading-logo-cpca {
    text-align: center;
}

.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 18rem;
    padding: 2rem 1rem;
    background-color: #FCF7F2;
    height: fit-content;
}

.content {
    background-color: #FEFCFA;
    margin-left: 20rem;
    margin-right: 4rem;
    padding: 2rem 1rem;
}

.hidden-element{
    display: none;
}

.state-of-the-region-data-portal-heading {
    font-family: 'Cera GR', 'sans-serif';
    text-align: center;
    font-size: 150%;
    color: #0D1F57;
}

.about-description {
    font-family: 'Cera GR', 'sans-serif';
    text-align: center;
    font-size: 120%;
    color: #000000;
    margin-top: 40px;
    margin-bottom: 40px;
}

.indicator-description {
    font-family: 'Cera GR', 'sans-serif';
    text-align: left;
    font-size: 120%;
    color: #000000;
    margin-top: 20px;
    margin-bottom: 20px;
}

.indicator-dropdown {
    font-family: 'Cera GR', 'sans-serif';
    color: #000000;
    background-color: #D6E5E3;
    font-size: 90%;
    width: 18rem
}

.geographic-area-dropdown {
    font-family: 'Cera GR', 'sans-serif';
    color: #000000;
    background-color: #D6E5E3;
    font-size: 90%;
}

.characteristic-dropdown{
    font-family: 'Cera GR', 'sans-serif';
    color: #000000;
    background-color: #D6E5E3;
    font-size: 90%;
}

.indicator-dropdown-label{
    font-family: 'Cera GR', 'sans-serif';
}

.geographic-area-dropdown-label{
    font-family: 'Cera GR', 'sans-serif';
}

.characteristic-dropdown-label{
    font-family: 'Cera GR', 'sans-serif';
}

.button {
    background-color: #D6E5E3;
    color: #0D1F57;
    border: 0px;
    font-family: 'Cera GR', 'sans-serif';
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.button:disabled,
.button[disabled]{
    background-color: #EDEDED;
    color: #0D1F57;
    border: 0px;
    font-family: 'Cera GR', 'sans-serif';
  }