@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

:root {
    --background-color: #d3d9d4;
    --explainbox-color: #2e3944;
    --explainbox-background-color: #d3d9d4;
    --audiowaveform-color: #2e3944;
    --dropshadow-color: rgb(0, 0, 0,0.3);
    --button-color: #2e3944;
    --button-background-color: #d3d9d4;
    --button-background-color-selected: #d3d9d4;
    --button-color-disabled: #849da2;
    --button-background-color-disabled: #d3d9d4;
    --button-border-color: #849da2;
    --button-border-color-selected: #2e3944;
    --button-border-color-selected-hover: #2e3944;
    --button-border-color-hover: #647d82;
    --textarea-color: #2e3944;
    --textarea-background-color: #d3d9d4;
    --textarea-border-color-focus: #d3d9d4;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", serif;
}
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    background-color: var(--background-color);
}

body {
    padding-top: 40px; //room for navbar
    width: 100%;
}

body::-webkit-scrollbar {
    display: none;
}

ul {
    list-style-position: inside;
}
.fullheight { 
    height: 100vh;
}
h1 { font-size: 20px;}

.screen {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#intro-screen,
#upload-screen {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.screen:not(.active) {
    display: none !important;
}

.decisiontree {
    position: relative;
}

.decisiontree .node {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    transition: transform 0.5s ease-in-out;
}

.decisiontree .node img {
    margin-top: 30px;
    margin-bottom: 30px;
}


.off-screen-left {
    transform: translateX(-200%);
}

.on-screen {
    transform: translateX(0);
}

.off-screen-right {
    transform: translateX(200%);
}

.decisiontree { width: 100%; }  

.fakenode { display: none; }

.vflexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gosection,
.documentwriterinputpage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 90%;
    max-width: 900px;
    justify-content: center;
}

.documentwriterinput {
    display: flex;
    flex-direction: column;
    
    
    align-items: stretch;
}

.documentwriterinput textarea,
.explainbox,
#rapport-tinymce,
.button {
    border-radius: 20px;
    font-size: 14px;
    box-shadow: 0px 0px 35px 1px var(--dropshadow-color);
    padding: 2vh 2vw;
    margin: 1vh 1vw;
}

.decisiontree .node .back {
    align-self: center;
    position: absolute;
    left: -100px;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /*    padding: 0 0;*/
    /*    margin: 0 0;*/

}

.button.primary {
    /* todo find nice animation*/     
}

textarea {
    color: var(--textarea-color);
    background-color: var(--textarea-background-color);
}

.multiplechoice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
}


.explainbox,
.button {
    color: var(--button-color);
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.explainbox .content { margin-top: 2vh; }

.explainbox { 
    color: var(--explainbox-color);
    background-color: var(--explainbox-background-color);
}
.button {
    border: 3px solid var(--button-border-color);
    flex: 1;
    background-color: var(--button-background-color);
}
.button * {
    pointer-events: none;
}
/*make sure links still work*/
.button a, .button a * {
    pointer-events: auto;
}
.button:disabled {
    border: 3px solid transparent;
    color:var(--button-color-disabled);
    background-color: var(--button-background-color-disabled);
    box-shadow: 0px 0px 35px 1px rgba(0, 0, 0, 0.2);
}


.button:not(:disabled):hover {
    border: 3px solid var(--button-border-color-hover);
    cursor: pointer;
}

.button:not(:disabled):active {
    
    border: 3px solid var(--button-border-color-selected);
    cursor: pointer;
}

.button.selected {
    border: 3px solid var(--button-border-color-selected);
    background-color: var(--button-background-color-selected);
}

.button.selected:hover {
    border: 3px solid var(--button-border-color-selected-hover);
}

.stoprecordingbutton,
.gobutton,
.nextbutton {
    flex: none;
    width: 30%;
    min-width: 200px;
    align-self: center;
}

.nextbutton:disabled {
    visibility: hidden;
}

.introbutton {
    width: 20vw;
    min-width: 200px;
}

.icon {
    max-width: 12vw;
    margin: 1vh 1vw;
}

.qrcode {
    width: 10vw;
    margin: 1vh 1vw;
}

.audiopanels {
    flex: 0 0 40vh;
    display: flex;
    flex-direction: column;
}

.audiopanel {
    flex:1;
    display: flex;
    align-self: stretch;
}

.audiopanel:not(.active) {
    display: none;
}

.audiopanel.select-source {
    flex-direction: row;
    justify-content: space-between;
}

.audiopanel.qrpanel { position: relative; }
.audiopanel.transcribe { position: relative; }
.audiopanel.transcribe:not(.finished) .icon {
    display: none;
}

.audiopanel.transcribe .spinner {
    margin-bottom: 30px;
}
.audiopanel .progressmessage {
    text-align: center;
}

.recordbutton.permission_denied { background-color: #fcc; }
/*.recordbutton p::before { content: "Begin nieuwe opname"; }*/
/*.recordbutton.permission_denied p::before { content: "Microfoon toegang is uitgeschakeld. Ga naar instellingen om toestemming te geven."; }*/

.button .img { pointer-events: none; }

.audiopanel.transcribe.finished .spinner { display: none; }
.audiopanel .uploadfilebutton { position: relative; }
.audiopanel .uploadfilebutton #sleepmsg { position: absolute; bottom: 30px;}
@media (max-width: 1024px) { .audiopanel .uploadfilebutton #sleepmsg { display: none; } }
.audiopanel .dragging .img { display: none; }
.audiopanel .dragging { background-color: #849da2;}
.audiopanel.textinput { position:relative;}
.audiopanel textarea { flex: 1 1 30vh; }

.documentwriterinput input[type="file"] {
    display: none;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
}

/*settings shared between textarea in audiopanel, and textarea in textareapromptelement*/
.documentwriterinput textarea {
    background-color: var(--textarea-background-color);
    resize: none;
    font-size: 14px;
    /*font-weight: lighter;*/
    outline: 3px solid transparent;
    border: none;
}

.textareadocumentwriterinput textarea { flex: 0 0 30vh; }

.documentwriterinput textarea:focus {
    outline: 3px solid var(--textarea-border-color-focus);
}

.closebutton {
    position: absolute;
    top: 0;
    right: 0;
    margin: 2vh 2vw;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 35px 1px rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
    color: var(--button-color);
    background-color: var(--button-background-color);
}

.closebutton:hover {
    border: 2px solid var(--button-border-color);
    cursor:pointer;
}
.closebutton:active {
    border: 2px solid transparent;
}

.cards {
    display: flex;
    justify-content: center;
    width: 90%;
    gap: 40px;
    margin: 50px auto;
}

.card {
    box-sizing: border-box;
    width: max-content;
    min-width: 300px;
    padding: 25px;
}
.card h1 {
    padding:10px;
    font-size: 30px;
}

.spinner {
    box-sizing: border-box;
    border: 6px solid black;
    border-top: 6px solid transparent;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#rapport-tinymce-container {
    min-width: 65%;
    margin: 0 4vh;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

#uploadbox {
    display: flex;
    width: 300px;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

#result-screen #buttons {
    display:flex;
    flex-direction: row;
    justify-content: stretch;
}

.collapsible {
}
.collapsible h1:hover {
    cursor: pointer;
    text-decoration: underline;
}

.collapsible .content:not(.expanded) {
    display: none;
}

.question h1 { font-size: 16px; }
.question .content { font-size: 14px; margin-top: 3vh; margin-left: 5vw; }
.question { margin: 20px 10vw; }

nav {
    display:flex;
    flex-direction: row;
    justify-content: end;
    background-color: #849da2;
    position: fixed; /* Fixes navbar to the top of the viewport */
    top: 0; /* Align top edge of navbar with top edge of the viewport */
    width: 100%; /* Ensures the navbar stretches across the full width of the viewport */
    z-index: 1000; /* Ensures the navbar stays on top of other content */
}

nav a {
    display: block;
    color: #e3e9e4;
    text-align: center;
    margin: 10px 1vw;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

nav a.active {
    text-decoration: underline;
}