/* Variables */
:root {
    /* hict colors */
    --color-primary:            #00323B;
    --color-secondary:          #EF4129;

    /* active / link colors */
    --color-tertiary:           #84CFC5;
    --color-tertiary-dark:      #51a095;
    --color-tertiary-light:     #84cfc58a;

    /* default colors */
    --color-default:            #54565B;
    --color-default-light:      #A0A4AE;
    --color-disabled:           #54565B;
    --color-default-background: #FFFFFF;

    /* menu / side bar / sub side bar border */
    --color-border:             #dee2e6;
}


/* scrollbar Chrome */

*::-webkit-scrollbar {
    -webkit-appearance: none;
}  
  
*::-webkit-scrollbar:vertical {
    width: 11px;
}


*::-webkit-scrollbar:horizontal {
    height: 11px;
}


*::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    /* should match background, can't be transparent */
    background-color: rgba(70, 70, 70, 0.308);
}

/* reboot */

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

ul, dd, h1, h2, h3, h4, h5, p, a {
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    -moz-padding-start: 0;
    -moz-padding-end: 0;
    -moz-margin-start: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}

/* Nova font */

@font-face {
  font-family: 'hk_novabold_r';
  src: url('/assets/hknova-boldr-webfont.woff2') format('woff2'),
    url('/assets/hknova-boldr-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'hk_novaextrabold_r';
  src: url('/assets/hknova-extraboldr-webfont.woff2') format('woff2'),
    url('/assets/hknova-extraboldr-webfont.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}


@font-face {
  font-family: 'hk_novaheavy_r';
  src: url('/assets/hknova-heavyr-webfont.woff2') format('woff2'),
    url('/assets/hknova-heavyr-webfont.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'hk_novalight_r';
  src: url('/assets/hknova-lightr-webfont.woff2') format('woff2'),
    url('/assets/hknova-lightr-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'hk_novamedium_r';
  src: url('/assets/hknova-mediumr-webfont.woff2') format('woff2'),
    url('/assets/hknova-mediumr-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'hk_novaregular_r';
  src: url('/assets/hknova-regularr-webfont.woff2') format('woff2'),
    url('/assets/hknova-regularr-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;

}

@font-face {
  font-family: 'hk_novasemibold_r';
  src: url('/assets/hknova-semiboldr-webfont.woff2') format('woff2'),
    url('/assets/hknova-semiboldr-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;

}

@font-face {
    font-family: 'primeicons';
    font-display: block;
    src: url('/assets/primeicons.woff2') format('woff2'), url('/assets/primeicons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



h1 {
  font-family: 'hk_novasemibold_r';
  font-weight: 600;
  font-size: 19px;
  color: var(--color-primary);
  margin-bottom: 12px;
}

h2 {
  font-family: 'hk_novasemibold_r';
  font-weight: 600;
  font-size: 17px;
  color: var(--color-primary);
}

h3 {
  font-family: 'hk_novamedium_r';
  font-weight: 500;
  font-size: 14px;
  color: var(--color-default-light);
}

* {
  font-family: 'Source Sans Pro', sans-serif;
}

/* Elements */

/* Radio button */

input[type="radio"] {
    height: 13px;
    width: 13px;

    /* The native appearance is hidden */
    appearance: none;
    -webkit-appearance: none;
    
    /* For a circular appearance we need a border-radius. */
    border-radius: 50%; 
     /* The border will be the spacing between the dot and the outer circle */   
    border: 3px solid #FFF;
    /* The background will be the radio dot's color. */
    /* background: var(--color-default); */
    /* And by creating a box-shadow with no offset and no blur, we have an outer circle */
    box-shadow: 0 0 0 1px var(--color-default);
}


input[type="radio"]:checked {

    /* The background will be the radio dot's color. */
    background: var(--color-tertiary);
    /* And by creating a box-shadow with no offset and no blur, we have an outer circle */
    box-shadow: 0 0 0 1px var(--color-tertiary);

}

/* Dropdown */

/* input box */
.Select-control {
    background-color: #ffffff;
}

.Select-arrow-zone {
    padding-right: 23px;
    padding-top: 3px;
    padding-left: 5px;
}

.Select-arrow {
    border: 0px;
}

.Select-arrow::before {
    content: "\e902";
    font-family: primeicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    color: #848484;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.is-open>.Select-control .Select-arrow {
    top: 0px;    
    border: 0px;
}

.Select-clear-zone {
    
}

.Select-clear {
    border: 0px;
    font-size: 0px;
}

.Select-clear::before {
    content: "\e90b";
    font-size: 14px;
    font-family: primeicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    color: #848484;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* changes the text color of input box */
.Select-value-label {
    color: #333 !important;
}

.Select--single > .Select-control .Select-value, .Select-placeholder {
    border: 1px solid grey;
    border-radius: 4px;
}


/* dropdown menu options */
.VirtualizedSelectOption {
    background: #ffffff;
    color: #333333;
    padding: 0.429rem 0.857rem;
 }


/* dropdown menu hover effect */
.VirtualizedSelectFocusedOption {
    color: #333;
    background: #eaeaea;
    padding: 0.429rem 0.857rem;
}

.VirtualizedSelectSelectedOption {
    color: #FFFFFF;
    font-weight: normal;
    background: var(--color-tertiary);
    padding: 0.429rem 0.857rem;
}


/* border on focus - default is blue
 * shadow box around input box.  default is blue
 */
.is-focused:not(.is-open) > .Select-control {
  border-color: var(--primary); 
  box-shadow: none;
}

.Select--multi .Select-value {
    /* background-color: #ebf5ff; */
    background-color: #FFFFFF;
    border-radius: 2px;
    border: 1px solid var(--color-default-light);
    
    display: inline-block;
    font-size: .9em;
    line-height: 1.4;
    margin-left: 5px;
    margin-top: 5px;
    vertical-align: top;
}

.Select--multi .Select-value-icon:focus, .Select--multi .Select-value-icon {    
    color: var(--color-default-light);
    background-color: #FFFFFF;
}

.Select--multi .Select-value-icon:focus, .Select--multi .Select-value-icon:hover {    
    background-color: var(--color-tertiary-light);
    color: #FFFFFF;
}

/* Button */

button {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;
    font-weight: 400;
    color: #fff;
    padding: .429rem 1rem 0.5rem 1rem;
    font-size: 1rem;
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;
    border-radius: 3px;
    display: inline-flex;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    vertical-align: bottom;
    text-align: center;
    overflow: hidden;
    position: relative;
    background-color: var(--color-tertiary) !important;
    color: #fff;
    border: 1px solid var(--color-tertiary) !important;
}

/* Slider */
.rc-slider-handle:hover {
    border-color: var(--color-tertiary-dark);
}
.rc-slider-handle {
    border: solid 2px var(--color-tertiary);
    background-color: var(--color-tertiary);
}

.rc-slider-track {
    background-color: var(--color-tertiary-light);
}

.rc-slider-dot-active {
    border-color: var(--color-tertiary-light);
    background-color: var(--color-tertiary-light);
}

/* Styling */
.label-title {
    margin-top: 1em; 
}

.label-info {
    margin-top: 0.5em;
    font-weight: normal;       
    color: var(--color-default-light);
}

.action-button {
    margin-top: 1em;
    width: 100%;
}

.demography-indicator-container{
    grid-template-columns: 350px auto;
    display: grid;
}

.demography-indicator-options {
    padding: 0.5em;
}

.demography-indicator-graphs {
    padding: 0.5em;
    width: 95%;
    position: relative;
}

.dash-spinner {
  width: 100px !important;
  height: 100px !important;
}

.dash-spinner-container {
  position: static !important;
  backdrop-filter: blur(4px);
  background-color: transparent !important;
  width: 100% !important;
  height: 100% !important;
}

.parent-spinner {
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
}