/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
:root {
    --light-gray: #F0F3F6;
    --green: #5FD18E;
    --dark-gray: #A5B0C4;
    --purple-blue: #8396FA;
    --footer-pt: 40px;
    --footer-pb: 50px;
}

@media (max-width: 992px) {
    .container, .container-sm, .container-md {
        max-width: 855px;
    }
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.centered-body {
    display: block;
    margin-top: 1.5rem;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    padding-top: 10px
}

/* Sticky footer styles
-------------------------------------------------- */
.border-top {
    border-top: 1px solid #e5e5e5;
}
.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.locked-by-disclaimer {
    background-color: inherit;
    opacity: 0.65;
    pointer-events: none;
}

.disabled-element,
.form-group.disabled,
.form-control:disabled,
.form-control[disabled],
.form-control[readonly],
.form-select:disabled,
.form-select[disabled],
.form-select[readonly] {
    background-color: inherit;
    color: var(--bs-gray-dark);
    pointer-events: none;
}

.form-control[readonly],
.form-select[readonly] {
    pointer-events: fill;
}

.hidden-element {
    display: none;
}

.pourcentage-field::after {
    margin-top: 5px;
    margin-left: 2px;
    position: absolute;
    content: "%";
}

.pourcentage-field input {
    display: inline-block !important;
}

.icon-check {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(~/../../images/icon_check.png);
    background-size: 100% 100%;
}

.icon-warning {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(~/../../images/icon_warning.png);
    background-size: 100% 100%;
    float: left;
}

.icon-octave-separator {
    display: inline-block;
    width: 18px;
    height: 10px;
    background-image: url(~/../../images/octave-icon-small.png);
    background-size: 100% 100%;
}

.weight-5 {
    display: inline-block;
    width: 41px;
    height: 15px;
    background-image: url(~/../../images/weight_5.png);
    background-size: 100% 100%;
}

.weight-4 {
    display: inline-block;
    width: 41px;
    height: 15px;
    background-image: url(~/../../images/weight_4.png);
    background-size: 100% 100%;
}

.weight-3 {
    display: inline-block;
    width: 41px;
    height: 15px;
    background-image: url(~/../../images/weight_3.png);
    background-size: 100% 100%;
}

.weight-2 {
    display: inline-block;
    width: 41px;
    height: 15px;
    background-image: url(~/../../images/weight_2.png);
    background-size: 100% 100%;
}

.weight-1 {
    display: inline-block;
    width: 41px;
    height: 15px;
    background-image: url(~/../../images/weight_1.png);
    background-size: 100% 100%;
}

.weight-0 {
    display: inline-block;
    width: 41px;
    height: 15px;
}

.icon-edit {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url(~/../../images/Iconographie/OCT-Icone-S-Modifier.png);
    background-size: 100% 100%;
}

.link-octave {
    color: blue;
    text-decoration: none;
}

.required:after {
    content: "*";
    color: red;
    font-size: 14px;
}

.floating-div {
    display: block;
    height: auto;
    margin: 10px auto;
    padding: 15px;
    border-radius: 8px;
    background-color: white;
}

.selected-step,
.not-selected-step,
.completed-step {
    background-color: var(--purple-blue);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 2em;
}

    .selected-step {
        background-color: var(--purple-blue);
    }

    .not-selected-step {
        background-color: var(--dark-gray);
    }

    .completed-step {
        background-color: var(--green);
    }

/* ----- Login ----- */

.flex-top-button {
    margin: auto;
    display: block;
    width: 60%;
    min-width: 320px;
}

.flex-box,
.login-box {
    margin: auto;
    display: block;
    width: 50%;
    min-width: 320px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: none;
}

.flex-box {
    width: 60%;
    background-color: white;
}

    .flex-box .flex-message-section {
        padding: 4rem;
        border-bottom: 1px solid var(--dark-gray);
    }

    .flex-box .flex-header,
    .login-box .flex-header {
        padding: 1.5rem;
        border-bottom: 1px solid var(--dark-gray);            
    }

        .flex-box .flex-header .header-content,
        .login-box .flex-header .header-content {
            display: flex;
            margin: auto;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
            .flex-header .header-content > h2 {
                margin-bottom: auto;
            }

    .flex-box .flex-body,
    .login-box .flex-body {
        padding: 1rem 1.5rem;
    }

        .flex-body .body-block {
            position: relative;
            display: flex;
            width: auto;
            flex-direction: column;
            justify-content: center;
            margin: 15px;
        }

.flex-box .flex-footer,
.login-box .flex-footer {
    border-radius: 0 0 16px 16px;
    background-color: var(--purple-blue);
    text-align: justify;
    text-justify: inter-word;
    padding: 30px;
}

.link-octave,
.link-octave:visited {
    color: var(--bs-primary);
    transition: 0.3s all;
}

    .link-octave:hover {
        -webkit-filter: contrast(40%);
        filter: contrast(40%);
        cursor: pointer;
    }


.file-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.download-link {
    color: #0366d6;
}

.download-link:hover {
    cursor: pointer;
}

.image-icon {
    width: auto;
    height: 30px;
    background-color: transparent;
    color: #101820;
    padding-right: 5px;
}

.question-dimensions {
    width: 100%;
    height: 120px;
    min-height: 80px;
    resize: both;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.autocomplete-create-new {
    color: #cf8b00 !important;
}

.autocomplete-header {
    margin-left: 14px;
    margin-right: 28px;
}

.dropdown-link-new option {
    color: #212529;
}

.dropdown-link-new {
    color: #cf8b00 !important;
}

/* Syncfusion */
.e-input-octave {
    align-items: center;
    padding-left: 0 !important;
    font-size: inherit !important;
}

.grid-disabled {
    pointer-events: none;
    opacity: 0.6;
}

.grid-wrapper-disabled {
    cursor: not-allowed;
}

.dashboard-top-cards {
    border-style: solid;
    border-width: 3px;
    border-radius: 15px;
}

.primary-button {
    border-color: var(--purple-blue);
    background-color: var(--purple-blue);
}

.secondary-button {
    border-color: var(--purple-blue);
    background-color: var(--purple-blue);
}

.submit-button {
    border-color: var(--light-gray);
    background-color: var(--light-gray);
}

    .primary-button > span,
    .secondary-button > span,
    .tertiary-button > span,
    .submit-button > span {
        margin: auto;
    }

.primary-button,
.secondary-button,
.tertiary-button,
.submit-button {
    border-style: solid;
    border-width: 3px;
    border-radius: 15px;
    color: #000;
    margin: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s all;
}

    .secondary-button:hover {
        -webkit-filter: saturate(60%);
        filter: saturate(60%);
    }

    .submit-button:hover {
        -webkit-filter: brightness(0.9) contrast(100%);
        filter: brightness(0.9) contrast(100%);
    }

    .primary-button:hover,
    .tertiary-button:hover {
        border-color: var(--dark-gray);
        background-color: var(--dark-gray);
        cursor: pointer;
    }

.tertiary-button {
    border-width: 2.3px;
    border-radius: 11px;
    padding: 5px;
    font-weight: bold;
}

.image-icon {
    width: auto;
    height: 30px;
    background-color: transparent;
    color: #101820;
}

#anonymous-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    width: 100%;
}

#anonymous-content {
    padding: 5em 0;
}

.larger-textarea {
    min-height: 25vh !important;
}

.color-d-gray {
    color: var(--dark-gray) !important;
}

.text-decoration-u {
    text-decoration: underline;
}

.bg-green-elipses-w-50,
.bg-blue-elipses-w-60,
.bg-purple-circles-w-50 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: right top;
    background-position-y: 10%;
}

.bg-green-elipses-w-50 {
    background-image: url(~/../../images/Textures/Vert/Texture-04-Vert.png);
}

.bg-blue-elipses-w-60 {
    background-size: 60% auto;
    background-position: right bottom;
    background-image: url(~/../../images/Textures/Bleu/Texture-03-Bleu-1-Top-Half.png);
}

.bg-purple-circles-w-50 {
    background-position-y: 50%;
}

.bg-dashboard {
    border-start-start-radius: 1.5rem;
    border-end-start-radius: 1.5rem;
    background-size: 180% 180%;
    background-position: 100% 50%;
}

    .bg-dashboard,
    .bg-purple-circles-w-50 {
        background-image: url(~/../../images/Textures/Violet/Texture-03-Violet.png);
    }

.fs-xsm {
    font-size: 1rem;
}

.check-list-box {
    overflow: hidden;
    border: 1px solid var(--dark-gray) !important;
    border-radius: 1.5rem;
}

.check-list-box > .check-list-box-content {
    overflow: auto;
    height: 280px;
    margin-right: 3px;
}

    .check-list-box-content::-webkit-scrollbar {
        width: 0.5em;
    }

    .check-list-box-content::-webkit-scrollbar-thumb {
        background-color: var(--bs-gray-dark);
        border-radius: 1.5rem;
    }

.album-image {
    background-color: var(--light-gray);
    border-color: var(--dark-gray);
    height: 100%;
    border-radius: 1.5rem;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.position-sm-absolute {
    position: absolute;
}

.position-sm-absolute.top-sm-grid-header {
    top: 0.2rem;
    z-index: 800;
}

.icon.icon-y-sm {
    height: var(--icon-height, auto);
}

.text-overflow-dots {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.text-overflow-dots-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.dropdown-wrap {
    white-space: normal;
}

.w-sm-75{
    width:75%;
}
.p-md-1-5 {
    padding: 1rem 5rem !important ;
}

.support-info {
    position: absolute;
    width: 30rem;
    right: 0;
    margin-top: 1.2rem;
    background-color: transparent;
    z-index: 100;
}

    .support-info .card.card-action {
        padding: 1.5rem;
        border: 1px solid var(--bs-gray-light);
    }

/* Validations */
.field-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.field-validation-error {
    display: block;
    position: relative;
    padding: 1rem 1rem;
    top: 0.5rem;
    width: fit-content;
    color: black !important;
    background-color: #fecfc7;
    border: 2px solid var(--bs-danger);
    border-radius: 1.5rem;
    font-size: 1.2rem;
}

    .field-validation-error::before {
        content: "";
        background-size: 20px 20px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url("../images/Iconographie/OCT-Icone-L-Attention-Danger.png");
        vertical-align: top;
        margin-right: 0.5rem;
    }

.btn-custom:disabled, .btn-custom.disabled {
    color: black;
    background-color: var(--bs-gray-light);
    border-color: var(--bs-gray-light);
}
  
.btn-row > *:not(:last-child) {
    margin-right: 1rem;
}

/* Hide the "reveal pwd" in Edge since we already have our own */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.tooltip-container {
    display: inline-flex;
}

.as-a-tag {
    border: 0;
    text-decoration: underline;
}

    .as-a-tag:hover {
        color: #6978c8;
    }

.footer-header {
    height: 70px;
}

/* Spinner */
.loader {
    border: 8px solid var(--bs-gray-light);
    border-top: 8px solid var(--bs-primary);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    position: absolute;
    left: calc(50% - 30px);
    z-index: 999;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.card-secondary {
    background-color: var(--bs-gray-light);
}

.autocomplete-new-clear-icon {
    position: absolute;
    right: 0.5rem;
    cursor: pointer;
    top: 50%;
}

/* collapsible section */
.collapse-closed,
.collapse-opened {
    display: flex;
    cursor: pointer;
}

.collapse-closed:before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url(~/../../images/Iconographie/OCT-Icone-S-Chevron-Droite.png);
    background-size: 100% 100%;
}

.collapse-opened:before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url(~/../../images/Iconographie/OCT-Icone-S-Chevron-Bas.png);
    background-size: 100% 100%;
}

.subinfo {
    color: var(--bs-gray-dark);
    font-weight: bold;
}

/* on submit style */
form.is-submitting button[type="submit"].btn-white:hover { /* remove the hover style */
    -webkit-filter: brightness(1) contrast(100%);
    filter: brightness(1) contrast(100%);
}

    form.is-submitting button[type="submit"].btn-white::before {
        position: absolute;
        content: '';
        height: 100%;
        width: 10%;
        left: 0;
        right: 0;
        top: 0;
        background: var(--bs-gray-light);
        animation: working 1s linear infinite;
        border-radius: 1.5rem;
    }

/*Explication des pourcentages :
La barre de loading fait 10% du bouton de large, donc un transform translateX de 100% la déplace de 100% de sa taille,
i.e. ça la déplace à 10% de la taille du bouton. Pour déplacer la barre de loading à 100% du bouton il faut donc un translateX de 1000%.
Mais avec 1000% le début de la barre est bien à 100% du bouton, par contre la fin de la barre est donc à 110% et dépasse,
on utilise donc un translateX de 900%, de cette façon la barre de loading, à la fin du transform, commence à 90% du bouton et termine à 100% du bouton.
De plus on enlève 10% au début et à la fin pour commencer après, et finir avant, la border du bouton.*/
@keyframes working {
    0% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(890%);
    }
}