/*****************************************************/
/********************** FONTS ************************/
/*****************************************************/

@font-face {
    font-family: 'SourceSansPro';
    font-weight: 600;
    src: url('SourceSansPro-SemiBold.ttf') format('truetype');
}

/*****************************************************/
/********************** COLORS ***********************/
/*****************************************************/

:root {
    --topbarIconColor: white;
    --topbarBgColor: #03212c;
    --topbarContainerBgColor: white;
    --topbarElementColor: #e1e1e1;
    --articleProgressColor: #d8d8d8;

    --nightModeTopbarContainerBgColor: #1b2937;
    --nightModeTopbarElementColor: white;
    --nightModeArticleProgressColor: #d8d8d8;
}

a {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/*****************************************************/
/********************* TOP BAR ***********************/
/*****************************************************/

#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 110px;
    background: var(--topbarBgColor);
}

#top-bar #left-menu {
    width: auto;
    float: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--topbarIconColor);
}

#top-bar #right-menu {
    display: flex;
    width: auto;
    float: right;
    align-items: center;
}

#top-bar #right-menu .right-icon {
    width: 44px;
    height: 44px;
    display: inline-block;
    mask-size: auto 20px;
    -webkit-mask-size: auto 20px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

#top-bar #right-menu .right-icon.outer-right-icon {
    margin-right: -12px;
}

#top-bar #right-menu .right-icon#kiosk-btn {
    -webkit-mask-image: url('ic_kiosk.png');
    mask-image: url('ic_kiosk.png');
    background-color: var(--topbarIconColor);
    display: none;
}

#top-bar #right-menu .right-icon#night-mode-btn {
    -webkit-mask-image: url('ic_night_mode.svg');
    mask-image: url('ic_night_mode.svg');
    background-color: var(--topbarIconColor);
}

#top-bar #right-menu .right-icon#font-size-btn {
    -webkit-mask-image: url('ic_fontsize.svg');
    mask-image: url('ic_fontsize.svg');
    background-color: var(--topbarIconColor);
}

#top-bar #right-menu .right-icon#close-btn {
    -webkit-mask-image: url('ic_close.svg');
    mask-image: url('ic_close.svg');
    background-color: var(--topbarIconColor);
}

#top-bar #right-menu .right-icon#toc-toggle {
  -webkit-mask-image: url('ic_toc.svg');
  mask-image: url('ic_toc.svg');
  -webkit-mask-size: 36px;
  mask-size: 36px;
  background-color: var(--topbarIconColor);
}

#font-size-container {
    display: none;
    flex-direction: column;
    z-index: 40;
    position: fixed;
    width: 176px;
    filter: drop-shadow(0px 1px 5px rgba(0,0,0,0.3));
    background-color: var(--topbarContainerBgColor);
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}

#font-size-container #font-size-container-top-bg {
    position: absolute;
    top: -9px;
    right: 10px;
    width: 20px;
    height: 13px;
    -webkit-mask: url('container_triangle_bg.svg') no-repeat;
    -webkit-mask-size: contain;
    mask: url('container_triangle_bg.svg') no-repeat;
    mask-size: contain;
    background-color: var(--topbarContainerBgColor);
}

#font-size-container #font-size {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

#font-size-container #font-size span {
    position: relative;
    font-family: 'SourceSansPro', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--accentColor);
}

#font-size-container #font-size span.font-size-large {
    font-size: 24px;
}

#font-size-container input[type=range] {
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -moz-appearance: none;
    border-radius: 4px;
    height: 40px;
    margin: -10px 13px -5px;
}

#font-size-container input[type=range]::-webkit-slider-runnable-track {
    height: 2px;
    background-color: var(--topbarElementColor);
}

#font-size-container input[type='range']::-moz-range-track {
    border: none;
    background-color: var(--topbarElementColor);
    outline: none;
}

#font-size-container input[type=range]:focus {
    outline: none;
    border: none;
}

#font-size-container input[type=range]::-webkit-slider-thumb,
#font-size-container input[type=range]::-webkit-media-slider-thumb {
    -webkit-appearance: none !important;
    background-color: var(--topbarElementColor);
    height: 13px;
    width: 13px;
    border: none;
    border-radius: 50%;
    position: relative;
    transform:translateY(-50%);
}

#font-size-container input[type=range]::-webkit-slider-thumb:before,
#font-size-container input[type=range]::-webkit-media-slider-thumb:before {
    content:'';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
}

#font-size-container input[type=range]::-moz-range-thumb {
    -moz-appearance: none !important;
    background-color: var(--topbarElementColor);
    height: 11px;
    width: 11px;
    border: none;
    border-radius: 50%;
}


#progress-cont {
    height: 13px;
    position: absolute;
    width: 100%;
    top: 54px;
    z-index: 3;
}

#progress-cont #progress-bar {
    -webkit-transition: width 0.15s ease;
    transition: width 0.15s ease;
    height: 100%;
    background-color: var(--articleProgressColor);
}


/*****************************************************/
/******************** NIGHT MODE *********************/
/*****************************************************/

body.night-mode #top-bar #right-menu .right-icon#night-mode-btn {
    -webkit-mask-image: url('ic_night_mode_active.svg');
    mask-image: url('ic_night_mode_active.svg');
}

body.night-mode #font-size-container {
    filter: drop-shadow(0px 1px 5px rgba(0,0,0,1));
}

body.night-mode #font-size-container,
body.night-mode #font-size-container #font-size-container-top-bg {
    background-color: var(--nightModeTopbarContainerBgColor);
}

body.night-mode #font-size-container #font-size span {
    color: var(--nightModeAccentColor);
}

body.night-mode #font-size-container input[type=range] {
    background-color: transparent;
}

body.night-mode #font-size-container input[type=range]::-webkit-slider-runnable-track,
body.night-mode #font-size-container input[type=range]::-webkit-slider-thumb,
body.night-mode #font-size-container input[type=range]::-webkit-media-slider-thumb {
    background-color: var(--nightModeTopbarElementColor);
}

body.night-mode #font-size-container input[type=range]::-moz-range-track,
body.night-mode #font-size-container input[type=range]::-moz-range-thumb {
    background-color: var(--nightModeTopbarElementColor);
}

body.night-mode #progress-cont #progress-bar {
    background-color: var(--nightModeArticleProgressColor);
}


/*****************************************************/
/****************** MEDIA QUERIES ********************/
/*****************************************************/

/*** TABLETS ***/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #top-bar {
        padding: 0 80px;
    }
}

/*** PHONES ***/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    #top-bar {
        padding: 0 80px;
    }

    #progress-cont {
        height: 10px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 812px) and (orientation: landscape) {
    #progress-cont {
        height: 10px;
    }
}

@media only screen and (max-width: 650px) {
    #top-bar {
        padding: 0 60px;
    }
}

@media only screen and (max-width: 560px) {
    #top-bar {
        padding: 0 34px;
    }
}

/*** SMALL PHONES ***/
@media only screen and (max-width: 355px) {
    #top-bar #left-menu {
        width: 0;
    }

    #top-bar #right-menu {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    #top-bar #right-menu .right-icon {
        margin: 0;
    }
}