:root {
    --blue-navbar-title: #4054B2;
    --orange-navbar-title: #cd2653;
    --blue-input: 35, 41,103;
    --blue-title: #8085B5;
    --primary-blue: #550034;
    --var-weight: 700;
    --dark-blue: #232967;
    --light-blue: rgba(58, 147, 217, 0.1);
    --light-grey: #EBEBEB;
    --green-btn: #02C39A;
    --orange-red: #F45B69;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Inter-var.woff2") format('woff2');
}

html {
    font-size: 14px;
    font-family: 'Inter','Public Sans', sans-serif;
    position: relative;
    height: 100vh;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Inter','Public Sans', sans-serif;
    height: 100%;
}

main {
    height: 100%;
}

h1 {
    color: var(--dark-blue);
    font-weight: 700;
    font-size: 2rem;
    line-height: 40px;
}

h3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: var( --blue-title );
    margin: 0px 10px;
}

label {
    color: var( --blue-title );
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

nav a {
    color: var(--blue-navbar-title);
    text-decoration: none;
    font-size: 20px;
    padding: 13px 10px;
}

    nav a:hover {
        color: var(--orange-navbar-title);
    }

/* ======  Chat CSS  ===========*/

#messageInput {
    width: 100%;
}
/* width */
#messagesList::-webkit-scrollbar {
    width: 5px;
}

/* Track */
#messagesList::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
#messagesList::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    #messagesList::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.logo {
    width: 85px;
/*    background: var(--primary-blue)*/
}
.logo-custom {
    width: 85px;
}
.card {
    width: 100%;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
    border-radius: 10px;
    margin: auto;
    padding: 20px;
}

button {
    margin: 10px;
}

    button.full-width {
        margin: 10px auto;
        width: 100%;
    }

.btn {
    box-shadow: none !important;
    border-radius: 5px;
    font-size: 12px !important;
    font-weight: 500;
}

.btn-saved {
    width: auto;
    margin-left: auto;
}
/*Button primary normal state*/
.btn-primary {
  /*  background-color: var(--primary-blue);*/
    border: 1px solid var(--primary-blue);
    padding: 12px 20px;
    height: fit-content;
}

    .btn-primary.small {
        padding: 4px 8px;
    }

    /*Button primary hover state*/
    .btn-primary:hover {
        background-color: var(--primary-blue);
        border: 1px solid var(--primary-blue);
    }

    /*Button primary clicked*/
    .btn-primary:focus {
        background: var(--primary-blue);
        border: 1px var(--primary-blue);
    }

    /*Button primary Disabled*/
    .btn-primary:disabled {
        background: var(--primary-blue);
        opacity: 0.5;
        border: 1px solid var(--primary-blue);
    }

/*Secondary buttons main color*/
.btn-secondary {
    padding: 12px 20px;
    background: none !important;
    border: 1px solid var(--primary-blue);
    border-radius: 2px;
    color: var(--primary-blue);
    height: fit-content;
}

    .btn-secondary.small {
        padding: 4px 8px;
    }

    .btn-secondary:hover {
        border: 1px solid var(--primary-blue);
        color: var(--primary-blue);
    }

    .btn-secondary:focus {
        border: 1px solid var(--primary-blue);
        color: var(--primary-blue);
    }

    .btn-secondary:disabled {
        color: var(--primary-blue);
        border: 1px solid var(--primary-blue);
        opacity: 0.5;
    }

.btn.btn-green {
    background: var(--green-btn);
    color: white;
}

.btn.btn-red {
    background: var(--orange-red);
    color: white;
}

.btn.btn-white {
    background: unset;
    color: black;
}

/* input */

input[type="text"], input[type="password"], input[type="email"] {
    width: 100%;
    border: 1px solid rgba(var(--blue-input), 0.2);
    padding: 8px 20px;
    border-radius: 5px;
    margin: 10px 0px;
}

input:focus-visible, input:focus {
    outline: 1px solid var(--primary-blue);
}

.navtree a {
    font-size: 14px;
    font-family: "Inter";
    font-weight: 600;
    color: var(--dark-blue);
    text-decoration: none;
}

.space-evenly {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px;
}

.header {
    height: 80px;
}

/* MENU */

.page {
    height: 100%;
}

.menu {
    border: 1px solid var(--light-grey);
    height: 100%;
    min-height: 100vh;
    background: white;
    position: relative;
}

.initials {
    width: 40px;
    height: 40px;
    background: var(--light-blue);
    border-radius: 40px;
    text-align: center;
    margin: 10px;
    line-height: 40px;
    color: var(--blue-title);
    font-weight: 700;
    font-family: 'Inter';
}

.menu ul {
    list-style-type: none;
    padding: 10px;
}

.menu li a {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--dark-blue);
    margin: 10px;
    text-decoration: none;
    line-height: 35px;
}

.menu li.selected {
    background: var(--light-blue);
    border-radius: 10px;
}

.menu h3 {
    line-height: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 170px;
}

.menu .progress-bar {
    background-color: var(--dark-blue);
}

@media screen and (min-width: 700px) {
    .page {
        display: grid;
        grid-template-columns: 250px 1fr;
    }

    .header {
        height: 100px;
    }
}

.main-window {
    margin: 20px 50px;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
}


    .main-window::-webkit-scrollbar {
        display: none; /* for Chrome, Safari, and Opera */
    }

.menu .menu-footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

/* ****** customize tables ****** */

table {
    margin-top:50px;
}

table thead th {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 24px;
    padding-bottom: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

table tbody tr {
    line-height: 50px;
}

    table tbody td:not(.kebab-selection) {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

.table > :not(:last-child) > :last-child > * {
    border-bottom-color: inherit;
}

table tbody td.button {
    width: 120px;
}

    /*table tbody td.button a {
        width: 120px;
        height: 40px;
        line-height: 40px;
        padding: 0px !important;
    }*/


/* ****** customize culture switcher ****** */

#culture-switcher {
    text-align: center;
}

    #culture-switcher select {
        width: 150px;
        border-radius: 5px;
        padding: 5px 20px;
    }

/* ****** customize dropdown with kebab menu ****** */

.kebab-selection .dropdown-toggler:hover {
    cursor: pointer;
}

.kebab-selection .dropstart {
    margin-top: 12px;
}

.kebab-selection figure {
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background: grey;
    margin: 3px 0;
}

.dropstart .dropdown-menu {
    left: -60px !important
}

.dropdown-item {
    height: 40px;
    line-height: 35px;
    padding: 0px 20px;
}

    .dropdown-item:hover {
        color: var(--dark-blue);
        font-weight: bold;
        background: inherit;
    }

    .dropdown-item.red {
        color: var(--orange-red);
    }

    div.dropdown-item:hover {
        cursor: pointer;
    }

/* ****** customize froms (for creation, edition deletion...) ****** */

.form-container {
    max-width: 400px;
    text-align: center;
    margin: 80px auto !important;
}

.form-container .form-group {
    margin-top: 10px;
    margin-bottom: 10px;
}

    .form-container.details {
        max-width: 550px;
        text-align: left;
    }

        .form-container.details div[class^=col-] {
            max-width: 550px;
            text-align: left;
            margin: 20px 0px;
        }

    .form-container .btn {
        width: 100%;
    }

    .form-container label {
        width: 100%;
        margin: 0px;
    }

/* ****** customize modals ****** */

h3.modal-title {
    color: var(--orange-red);
}

/*.modal .btn {
    width: 100px;
    height: 40px;
}*/

/* ****** filter bar ****** */
.filter-bar {
    max-width: 500px;
    margin: auto;
    text-align: center;
}

.filter-bar input[type=submit] {
    max-width: 150px;
    margin: 10px;
}

/* ****** discount container ****** */
.discount-container {
    display: flex;
    justify-content: center;
    max-width: 700px;
    text-align: center;
    margin: auto;
    box-shadow: -7px 0px 11px 0px rgb(0 0 0 / 50%);
    border-radius: 5px;
}

    .discount-container label {
        color: black;
        max-width: 60px;
        margin-right: 20px;
        margin-top: 15px;
    }

.discount-container input {
    width: auto;
}

.discount-wrong {
    color: darkred;
    background-color: lightsalmon;
    padding: 5px 20px;
    border-radius: 5px;
    width: fit-content;
    margin: 10px auto;
}

.discount-applied {
    color: black;
    font-weight: 900;
    line-height: 64px;
    margin-left: 10px;
}

.code-applied {
    display: flex;
    max-width: 700px;
    margin: auto;
}

    .code-applied label {
        line-height: 64px;
    }


/* ****** Message div styles ****** */
.info {
    display: flex;
    gap: 10px;
    background: #def0ff;
    color: #80c5ff;
    border: 1px solid #80c5ff;
    border-radius: 5px;
    width: fit-content;
    margin: auto;
    padding: 10px 40px;
}

.warning {
    background: #fce6e1;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
    width: fit-content;
    margin: auto;
    padding: 10px 40px;
}

.info i, .warning i {
    height: 12px;
}


/* ****** adventure component ****** */

.adventure {
    width: 100%;
    height: 100%;
    
}

    .adventure .down-bar {
        box-shadow: 0px -6px 14px 1px #888;
        background: white;
        text-align: right;
    }


    .adventure .tab-content {
        height: 100%;
        background: white;
    }

        .adventure .tab-content:has(> .tab-clues.active) {
            overflow-y: auto;
        }

        .adventure .tab-content .tab-pane {
            height: 100%;
        }
        .adventure .tab-content .tab-pane#clues {
            padding: 10px;
        }

    .adventure .tab-content embed {
        width: 100%;
        height: 100%;
    }

    .adventure .tab-pane ul li {
        list-style-type: none;
    }

    .adventure .tab-pane .row {
        margin-right: inherit;
        margin-left: inherit;
    }

    .adventure .tab-pane ul .col-md-4 {
        text-align: center;
    }

    .adventure .tab-pane ul .col-md-8 {
        text-align: right;
    }

    .adventure .tab-pane ul .col-md-8 .btn {
        margin: 0px;
    }

    .adventure .tab-pane ul .col-md-8 textarea{
        height: 90%;
        width: 100%;
    }

        .adventure .tab-pane ul .col-md-4 h3 {
            line-height: 64px;
        }

    .adventure .nav-tabs .nav-item {
        background: white;
        border-radius: 5px;
    }

@media only screen and (min-width: 768px) {
    .adventure .tab-pane ul .col-md-4 {
        border-right: 2px solid #D3D3D3;
    }
}



/* ****** Question creation / edition ****** */

.answer-image img {
    max-height: 90px;
}

.answer-image, .answer-text > div {
    display: flex;
    gap: 20px;
    align-items: center;
}

.answer-text input[type=text] {
    width: 50%;
}

.answer-image label, .answer-text label {
    margin: 0px;
}

.question_img_container {
    width: 200px;
    position: relative;
}

.question_img {
    width: 100%;
}

.question_img_close {
    height: 20px;
    width: 20px;
}

    .question_img_close:hover {
        cursor: pointer;
    }

.question_img_container .question_img_close {
    position: absolute;
    top: 3px;
    right: 3px;
}

.btn_link_to_node {
    background-color: var(--green-btn);
    border: 1px solid var(--green-btn);
    color: white;
}

.checkbox-container {
    margin-bottom: 20px;
}

.type-answer {
    display: flex;
    gap: 20px;
    margin-left: 20px;
}

.type-answer > div {
    display: flex;
    gap: 20px;
}

.audio_container {
    display: flex;
    gap: 20px;
}

/* ****** ContentTools ****** */

/* Alignment styles for images, videos and iframes in editable regions */

/* Center (default) */
[data-editable] iframe,
[data-editable] image,
[data-editable] [data-ce-tag=img],
[data-editable] img,
[data-editable] video {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* Left align */
[data-editable] .align-left {
    clear: initial;
    float: left;
    margin-right: 0.5em;
}

/* Right align */
[data-editable].align-right {
    clear: initial;
    float: right;
    margin-left: 0.5em;
}

/* Alignment styles for text in editable regions */
[data-editable] .text-center {
    text-align: center;
}

[data-editable] .text-left {
    text-align: left;
}

[data-editable] .text-right {
    text-align: right;
}


@media (min-width: 800px) {
    .hotspot-editor-modal .modal-dialog {
        width: 70%;
        min-width: 800px;
        max-width: 100%;
    }
}

#hs_table {
    width: 100%;
    margin-top: 0px;
}

    #hs_table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: white;
    }

    #hs_table tbody td {
        max-width: 100%;
    }
#hs_table td img {
    height: 30px;
}

    #hs_table td img:hover {
        cursor: pointer;
    }

.hotspot-editor-modal .modal-dialog {
    height: 95%;
}

.hotspot-editor-modal .modal-dialog .modal-content {
    height: 100%;
}

    .hotspot-editor-modal .modal-dialog .modal-content .modal-body {
        overflow-y: auto;
        height: 100%;
    }

.hotspot-icon {
    position: relative;
    width: fit-content;
}

.hotspot-delete-icon {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0px;
    right: 0px;
}

.hotspot-images img:hover {
    cursor: pointer;
}

.hotspot-images {
    padding-left: calc(var(--bs-gutter-x) * .5);
    overflow-x: auto;
    max-height: 100px;
    height: 100px;
}

#hs_table tr.selected {
    background: #def0ff;
}

.hotspot-images img:not(.hotspot-delete-icon) {
    height: 50px;
    width: auto;
}

.hotspot-images img.selected {
    border: 2px solid darkblue;
}

.version {
    position: absolute;
    bottom: 10px;
    left: 10px;
    opacity: 0.3;
    font-weight: bold;
}