/*
* Fonts
*/
@font-face {
    font-family: Noto_Sans;
    src: url(../assets/fonts/NotoSans-Regular.ttf);
}
/* Specific for Arabic */
@font-face {
    font-family: Noto_Sans;
    src: url(../assets/fonts/NotoSansArabic-Regular.ttf);
    unicode-range: U+0600-06FF, U+0750-077F; /* Arabic Unicode ranges */
}
/* Specific for Hebrew */
@font-face {
    font-family: Noto_Sans;
    src: url(../assets/fonts/NotoSansHebrew-Regular.ttf);
    unicode-range: U+0590-05FF; /* Hebrew Unicode range */
}
/* Specific for Japanese */
@font-face {
    font-family: Noto_Sans;
    src: url(../assets/fonts/NotoSansJP-Regular.ttf);
    unicode-range: U+3040-309F, U+30A0-30FF, U+4E00-9FFF; /* Hiragana, Katakana, and Kanji */
}
/* Specific for Chinese Simplified */
@font-face {
    font-family: Noto_Sans;
    src: url(../assets/fonts/NotoSansSC-Regular.ttf);
    unicode-range: U+4E00-9FFF; /* Common Han characters */
}
/* Specific for Thai */
@font-face {
    font-family: Noto_Sans;
    src: url(../assets/fonts/NotoSansThai-Regular.ttf);
    unicode-range: U+0E00-0E7F; /* Thai Unicode range */
}

#themeProvider {
    height: 100%;
}

* {
    scrollbar-width: none;
}

#chapterSearchContent h2:first-of-type {
    padding-left: 16px;
}

.photo {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.photo input[type='file'] {
    display: none;
}

#messageError {
    display: none;
}

#imageLoading {
    display: none;
}

#truckImageLoading {
    width: 100px;
}

#rotateTruckImg {
    display: none;
}

/*Splash view*/
.homeContent {
    display: none;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    flex-flow: column;
    flex: 1 1 auto;
}

#noSearchResult {
    display: none;
    width: 100%;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.selectedTruckImgDiv {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 18px;
}

#selectedTruck {
    margin-top: 12px;
    margin-bottom: 16px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#newsDiv {
    background: white;
    margin-bottom: 10px;
    padding: 10px;
    display: none;
    color: black;
}

.newsPanel {
    background-color: rgb(117, 139, 161);
    margin-top: 10px;
    padding: 5px;
    cursor: pointer;
}

.newsPanel label,
.newsPanel p {
    pointer-events: none;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.4;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.4;
    }
}

#homeButtonsDiv {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/*Search view*/
#searchResultContent {
    overflow: hidden;
    width: fit-content;
}

#freeTextSearch {
    display: none;
}

.freeTextSearchContent {
    display: none;
}

.freeTextSearchInput {
    width: 100%;
}

#freeTextSearchLoading {
    display: none;
    justify-content: center;
    height: 100%;
    align-items: center;
}

#freeTextSearchResult {
    display: none;
    flex: 1 1 auto;
    overflow-y: auto;
    z-index: 1;
    box-sizing: border-box;
    height: 100%;
}

/*Chapters view*/
.chapterContent {
    display: none;
}

/*Topic view*/
#topicsContent {
    display: none;
}

#topicContent {
    word-break: break-word;
    overflow-y: auto;
    height: 100%;
}

.wbPicture {
    max-width: 100%;
}

.topicLink {
    cursor: pointer;
}

/*Quick search*/
#searchImg {
    float: right;
    margin-right: 5px;
}

#searchResults {
    display: none;
    height: 100%;
}

#searchResultsContent {
    display: flex;
    flex: 1 1 auto;
    overflow-y: auto;
    z-index: 1;
    box-sizing: border-box;
    height: 100%;
}

#searchLoading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#searchLoadingImg {
}

/*Download chassi*/
#loadingPanel {
    display: none;
}

#downloadTopic {
    display: none;
    position: fixed;
    height: 64px;
    right: 60px;
    left: 60px;
    top: 75vh;
    z-index: 1;
}

#downloadTopicProgressBar {
    background-color: #e0dfdf;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 36px;
}

#loadingBar {
    background-color: #337ab7;
    border-radius: 6px;
    float: left;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    height: 100%;
    width: 0%;
}

#loadingText {
    position: absolute;
    text-align: center;
    color: black;
    margin-left: 3px;
    font-size: 28px;
    width: 100%;
}

#loadTopic {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    z-index: 999999;
}

/*Offline image*/
#offlineIconBig {
    width: 100%;
    height: 100%;
}

#offlineIconBig img {
    position: relative;
    top: 90px;
    left: 40px;
}

/*Scroll content*/
.scrollDiv {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
}

.scrollContent {
    flex: 1 1 auto;
    height: 100%;
}

/*Debug panel*/
#debugPanel {
    display: none;
    position: fixed;
    font-family: helvetica;
    font-size: 0.7em;
    border: solid 2px;
    padding: 5px;
    cursor: pointer;
    left: 1vw;
    background: whitesmoke;
    bottom: 1vw;
    padding: 2px 4px;
    z-index: 1;
    overflow: hidden;
    width: 40px;
    height: 40px;
}

#debugPanel > ul {
    margin: 0px;
    padding: 0px;
}

#debugPanel:hover {
    width: auto;
    height: auto;
}

/*Other*/
.semContent {
    display: none;
}

#page {
    height: 100%;
    overflow: hidden;
    /*background-color: var(--bgcolor);*/
}

#pageContent {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#pageContent.disabled {
    pointer-events: none;
    opacity: 0.1;
}

.borderPanel {
    display: inline-block;
}

.panelHeader {
    position: relative;
    left: 5px;
}

.panelCloseImg {
    margin-right: 4px;
}

#center {
    overflow: auto;
    height: 100%;
    -ms-overflow-style: none;
}

.flexPanel {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
}

.menu24Icons {
    width: 24px;
    height: 24px;
    position: relative;
    margin-left: 4px;
    font-size: 24px;
}

.iconsWhite {
    filter: brightness(0) invert(1);
}

.fullyHide {
    display: none !important;
}
.hide {
    opacity: 0;
}
.fadeOut {
    opacity: 0;
    transition: opacity 0.5s;
}
.fadeIn {
    opacity: 1;
    transition: opacity 0.5s;
}

/*General*/
html {
    overflow-x: hidden;
}

body {
    margin: 0;
    background-color: white;
    display: none;
    height: 100%;
}

input {
    -webkit-tap-highlight-color: transparent;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input::-webkit-calendar-picker-indicator {
    opacity: 100;
}

input:focus {
    outline: none;
}

input[type='text'] {
    height: 28px;
    padding: 3px;
}

button {
    outline: none;
    cursor: pointer;
    background: none;
    border: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

select {
    height: 28px;
}

select:focus,
select:active,
select:hover {
    outline: none;
    background: white;
}

select:focus::-ms-value {
    outline: none;
    color: black;
    background: white;
}

.blurme {
    filter: blur(10px);
    transition: filter 1s;
}


ul {
    list-style-type: none;
    padding-inline-start: 10px;
    -webkit-padding-start: 10px;
    padding-right: 10px;
}

li {
    margin-bottom: 0.3em;
}

dfn,
em {
    font-style: normal;
}

strong {
    font-weight: bold;
}

u {
    text-decoration: none;
}

section.hideContent section, section.hideContent vcdk-list {
    display: none !important;
}

section.selfLink {
    display: none !important;
}

.getStarted_top {
    display: flex;
}

section.objTypeFolder > h2 {
    display: none;
}

#popupTopicContainer {
    z-index: 2;
    position: absolute;
}
#popupOldBrowserContainer.showPopup > div {
    /*make sure this adapts to older browsers as well*/
    background: #ffffff;
    box-shadow: 0px 0.3px 2px rgba(0, 0, 0, 0.18), 0px 3px 8px rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0px 0.3px 2px rgba(0, 0, 0, 0.18), 0px 3px 8px rgba(0, 0, 0, 0.19);
    border-radius: 4px;
    -webkit-transition: -webkit-transform 240ms cubic-bezier(.45, 0, .125, 1);
    transition: transform 240ms cubic-bezier(.45, 0, .125, 1);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 400px;
    max-width: 800px;
    display: box; /* Older Flexbox */
    display: flexbox; /* IE10 draft spec */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 16px;
    z-index: 10;
}
#popupOldBrowserContainer.showPopup {
    max-width: calc(100% - 448px);
    justify-content: center;
    height: 100%;
}
#popupOldBrowserBackground.showPopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
}
@media (max-width: 904px) {
    #popupOldBrowserContainer.showPopup > div {
        left: unset;
        transform: translate(0, -50%);
        top: 16%;
    }
    #popupOldBrowserContainer.showPopup {
        max-width: 100%;
    }
}

.speechBubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1px 8px 5px;
    color: var(--whiteText);
    font-size: 12px;
    max-height: 303px;
    width: 202px;
    word-break: break-word;
}

.speechBubble h2 {
    margin: 0;
}

.speechBubble .firstHeader {
    margin-top: 0;
}

.speechBubble .rc {
    max-height: 264px;
    overflow: hidden;
}

img.popupTopic {
    border: 1.5px dashed var(--granite);
    border-radius: 1px;
    padding: 2px;
}

dfn.popupTopic {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--granite);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    display: inline-block;
}