#username {
    text-align: center;
}

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

    padding: 1rem;

    height: 100%;
    width: calc(100%);
    max-width: 30rem;
    overflow: hidden;
}


.button-wrapper {
    width: 100%;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 2;
    /*-webkit-border-image: url("../img/button-bg.png") 61 repeat;*/
    border-image: url("../img/button-bg.png") 1 fill;
}

.button-wrapper button, .button-wrapper a{
    background: -webkit-gradient(linear,left top,left bottom,from(#ffe2b4),to(#ffc15e));
    background: -webkit-linear-gradient(top,#ffe2b4,#ffc15e);
    background: linear-gradient(180deg,#ffe2b4,#ffc15e);
    border: 1px solid #fff;
    color: #000;

    box-shadow: 0 4px 4px rgba(0,0,0,.25);
    height: 34px;
    min-width: auto;
    font-size: 12px;
    padding: 0 15px;
    position: relative;
    z-index: 2;
    -webkit-transition: none;
    transition: none;
    margin: 25px 0 30px;
    cursor: pointer;
}

input.wizard-code, input.wizard-mail {
    z-index: 10;
    font-family: 'Benne', Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;

    display: block;
    width: 100%;
    height: 36px;

    margin-bottom: 36px;
    padding: 8px;
    line-height: 36px;

    color: #000;
    background-color: #fff;
    border-radius: 3px;
    outline: none;
    border: 1px solid hsla(0,0%,59.2%,.7);
}

input.wizard-mail {
    text-align: center;
}

.button-gray {
    background: lightgray !important;
}

form {
    z-index: 1;
    width: 100%;
}

.signature {
    padding-left: 16px;
    font-family: 'DearMrPotter', Arial, sans-serif;
    font-size: 60px;
}

.question-bg{
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -100;
}

.question-wrapper {
    z-index: 100;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.question-container-content{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.question-container-bottom {
    flex-grow: 0;
}

.question-intitule {
    font-family: 'Benne', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
    color: white;
    user-select: none;
    -webkit-user-select: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;

    width: 100%;
    height: 240px;
    min-height: 240px;
    max-height: 400px;

    font-size: 20px;
    line-height: 2rem;

    background-image:
            url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzciIGhlaWdodD0iNzciIHZpZXdCb3g9IjAgMCA3NyA3NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03NC40MTA0IDcyLjgyNjdDNzMuNTExMiA3Mi44MjY3IDcyLjc4MjQgNzMuNTQ1NiA3Mi43ODI0IDc0LjQzMjZDNzIuNzgyNCA3NS4zMTgyIDczLjUxMTIgNzYuMDM3MSA3NC40MTA0IDc2LjAzNzFDNzUuMzA4MSA3Ni4wMzcxIDc2LjAzNjkgNzUuMzE4MiA3Ni4wMzY5IDc0LjQzMjZDNzYuMDM2OSA3My41NDU2IDc1LjMwODEgNzIuODI2NyA3NC40MTA0IDcyLjgyNjdaTTU5LjU4OTEgNzUuMTYxOFY2Ny4yMTZINjcuMDk0NVY1OS44MTExSDc1LjE1MDRMNzUuMTUwNCA3LjYzMDY2SDczLjY2OTFMNzMuNjY5MSA1OC4zNDk5SDY3LjA5NDVWMzQuNjYwNEg2NS42MTMyVjU4LjM0OTlINTguMTA3N1Y2NS43NTQ3SDM0LjA5MlY2Ny4yMTZINTguMTA3N1Y3My43MDA1TDcuNzM1MjkgNzMuNzAwNVY3NS4xNjE4TDU5LjU4OTEgNzUuMTYxOFpNNjUuNjEzMiA2NS43NTQ3SDU5LjU4OTFWNTkuODExMUg2NS42MTMyVjY1Ljc1NDdaTTY0LjcyNjIgNzQuNDMyNkM2NC43MjYyIDczLjU0NTYgNjUuNDUzNSA3Mi44MjY3IDY2LjM1NDEgNzIuODI2N0M2Ny4yNTE4IDcyLjgyNjcgNjcuOTc5MiA3My41NDU2IDY3Ljk3OTIgNzQuNDMyNkM2Ny45NzkyIDc1LjMxODIgNjcuMjUxOCA3Ni4wMzcxIDY2LjM1NDEgNzYuMDM3MUM2NS40NTM1IDc2LjAzNzEgNjQuNzI2MiA3NS4zMTgyIDY0LjcyNjIgNzQuNDMyNlpNNzQuNDEwNCA2NC44ODAyQzczLjUxMTIgNjQuODgwMiA3Mi43ODI0IDY1LjU5OTIgNzIuNzgyNCA2Ni40ODQ3QzcyLjc4MjQgNjcuMzcwMiA3My41MTEyIDY4LjA4OTIgNzQuNDEwNCA2OC4wODkyQzc1LjMwODEgNjguMDg5MiA3Ni4wMzY5IDY3LjM3MDIgNzYuMDM2OSA2Ni40ODQ3Qzc2LjAzNjkgNjUuNTk5MiA3NS4zMDgxIDY0Ljg4MDIgNzQuNDEwNCA2NC44ODAyWk03Mi43ODI0IDEuNjQxMTRDNzIuNzgyNCAwLjc1NTYwOCA3My41MTEyIDAuMDM2NjU5MiA3NC40MTA0IDAuMDM2NjU5MkM3NS4zMDgxIDAuMDM2NjU5MiA3Ni4wMzY5IDAuNzU1NjA4IDc2LjAzNjkgMS42NDExNEM3Ni4wMzY5IDIuNTI2NjYgNzUuMzA4MSAzLjI0NzA3IDc0LjQxMDQgMy4yNDcwN0M3My41MTEyIDMuMjQ3MDcgNzIuNzgyNCAyLjUyNjY2IDcyLjc4MjQgMS42NDExNFpNMS42NjMzNCA3Mi44MjY3QzAuNzY0MTc1IDcyLjgyNjcgMC4wMzY4NDIzIDczLjU0NTYgMC4wMzY4NDIzIDc0LjQzMjZDMC4wMzY4NDIzIDc1LjMxODIgMC43NjQxNzUgNzYuMDM3MSAxLjY2MzM0IDc2LjAzNzFDMi41NjI1IDc2LjAzNzEgMy4yODk4MyA3NS4zMTgyIDMuMjg5ODMgNzQuNDMyNkMzLjI4OTgzIDczLjU0NTYgMi41NjI1IDcyLjgyNjcgMS42NjMzNCA3Mi44MjY3WiIgZmlsbD0iI0QyRDNEQiIvPgo8L3N2Zz4K'),
            url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzciIGhlaWdodD0iNzYiIHZpZXdCb3g9IjAgMCA3NyA3NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03Mi44MjY1IDEuNjI2NDlDNzIuODI2NSAyLjUyNTY1IDczLjU0NTQgMy4yNTQ0NiA3NC40MzI0IDMuMjU0NDZDNzUuMzE3OSAzLjI1NDQ2IDc2LjAzNjkgMi41MjU2NSA3Ni4wMzY5IDEuNjI2NDlDNzYuMDM2OSAwLjcyODgwOSA3NS4zMTc5IDAgNzQuNDMyNCAwQzczLjU0NTQgMCA3Mi44MjY1IDAuNzI4ODA5IDcyLjgyNjUgMS42MjY0OVpNNzUuMTYyNCAxNi40NDhINjcuMjE0OVY4Ljk0MjM4TDU5LjgxMTggOC45NDIzOFYwLjg4NjcxOUw3LjYzMTI5IDAuODg2NzE5VjIuMzY4MDRMNTguMzUwNSAyLjM2ODA0VjguOTQyMzhMMzQuNjU5MyA4Ljk0MjM4VjEwLjQyMzdMNTguMzUwNSAxMC40MjM3VjE3LjkyOTNINjUuNzUzNlY0MS45NDQ3SDY3LjIxNDlWMTcuOTI5M0g3My43MDEyTDczLjcwMTIgNjguMzAxNUg3NS4xNjI0TDc1LjE2MjQgMTYuNDQ4Wk02NS43NTM2IDEwLjQyMzdWMTYuNDQ4SDU5LjgxMThWMTAuNDIzN0w2NS43NTM2IDEwLjQyMzdaTTc0LjQzMjQgMTEuMzA5NkM3My41NDU0IDExLjMwOTYgNzIuODI2NSAxMC41ODIzIDcyLjgyNjUgOS42ODE2NUM3Mi44MjY1IDguNzgzOTcgNzMuNTQ1NCA4LjA1NjY0IDc0LjQzMjQgOC4wNTY2NEM3NS4zMTc5IDguMDU2NjQgNzYuMDM2OSA4Ljc4Mzk3IDc2LjAzNjkgOS42ODE2NUM3Ni4wMzY5IDEwLjU4MjMgNzUuMzE3OSAxMS4zMDk2IDc0LjQzMjQgMTEuMzA5NlpNNjQuODggMS42MjY0OUM2NC44OCAyLjUyNTY1IDY1LjU5OSAzLjI1NDQ2IDY2LjQ4NDUgMy4yNTQ0NkM2Ny4zNyAzLjI1NDQ2IDY4LjA4OSAyLjUyNTY1IDY4LjA4OSAxLjYyNjQ5QzY4LjA4OSAwLjcyODgwOSA2Ny4zNyAwIDY2LjQ4NDUgMEM2NS41OTkgMCA2NC44OCAwLjcyODgwOSA2NC44OCAxLjYyNjQ5Wk0xLjY0MTMzIDMuMjU0NDZDMC43NTU4MDYgMy4yNTQ0NiAwLjAzNjg1NzYgMi41MjU2NSAwLjAzNjg1NzYgMS42MjY0OUMwLjAzNjg1NzYgMC43Mjg4MDkgMC43NTU4MDYgMCAxLjY0MTMzIDBDMi41MjY4NiAwIDMuMjQ3MjcgMC43Mjg4MDkgMy4yNDcyNyAxLjYyNjQ5QzMuMjQ3MjcgMi41MjU2NSAyLjUyNjg2IDMuMjU0NDYgMS42NDEzMyAzLjI1NDQ2Wk03Mi44MjY1IDc0LjM3MzZDNzIuODI2NSA3NS4yNzI3IDczLjU0NTQgNzYgNzQuNDMyNCA3NkM3NS4zMTc5IDc2IDc2LjAzNjkgNzUuMjcyNyA3Ni4wMzY5IDc0LjM3MzZDNzYuMDM2OSA3My40NzQ0IDc1LjMxNzkgNzIuNzQ3MSA3NC40MzI0IDcyLjc0NzFDNzMuNTQ1NCA3Mi43NDcxIDcyLjgyNjUgNzMuNDc0NCA3Mi44MjY1IDc0LjM3MzZaIiBmaWxsPSIjRDJEM0RCIi8+Cjwvc3ZnPgo='),
            url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzYiIGhlaWdodD0iNzciIHZpZXdCb3g9IjAgMCA3NiA3NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjIxMDQxIDc0LjQxMDZDMy4yMTA0MSA3My41MTE1IDIuNDkxNDcgNzIuNzgyNyAxLjYwNDQ3IDcyLjc4MjdDMC43MTg5NDUgNzIuNzgyNyAwIDczLjUxMTUgMCA3NC40MTA2QzAgNzUuMzA4MyAwLjcxODk0NSA3Ni4wMzcxIDEuNjA0NDcgNzYuMDM3MUMyLjQ5MTQ3IDc2LjAzNzEgMy4yMTA0MSA3NS4zMDgzIDMuMjEwNDEgNzQuNDEwNlpNMC44NzQ0MzcgNTkuNTg5MUg4LjgyMTk5TDguODIxOTkgNjcuMDkzOEgxNi4yMjUxVjc1LjE1MDRINjguNDA1NlY3My42NjkxSDE3LjY4NjNWNjcuMDkzOEg0MS4zNzc2VjY1LjYxMjRIMTcuNjg2M1Y1OC4xMDc4SDEwLjI4MzNWMzQuMDkxNUg4LjgyMTk5VjU4LjEwNzhIMi4zMzU3MUwyLjMzNTcxIDcuNzM1NkgwLjg3NDQzN0wwLjg3NDQzNyA1OS41ODkxWk0xMC4yODMzIDY1LjYxMjRMMTAuMjgzMyA1OS41ODkxSDE2LjIyNTFWNjUuNjEyNEgxMC4yODMzWk0xLjYwNDQ3IDY0LjcyNzVDMi40OTE0NyA2NC43Mjc1IDMuMjEwNDEgNjUuNDU0OCAzLjIxMDQxIDY2LjM1NTVDMy4yMTA0MSA2Ny4yNTMxIDIuNDkxNDcgNjcuOTgwNSAxLjYwNDQ3IDY3Ljk4MDVDMC43MTg5NDUgNjcuOTgwNSAwIDY3LjI1MzEgMCA2Ni4zNTU1QzAgNjUuNDU0OCAwLjcxODk0NSA2NC43Mjc1IDEuNjA0NDcgNjQuNzI3NVpNMTEuMTU2OCA3NC40MTA2QzExLjE1NjggNzMuNTExNSAxMC40Mzc5IDcyLjc4MjcgOS41NTIzNSA3Mi43ODI3QzguNjY2ODIgNzIuNzgyNyA3Ljk0Nzg4IDczLjUxMTUgNy45NDc4OCA3NC40MTA2QzcuOTQ3ODggNzUuMzA4MyA4LjY2NjgyIDc2LjAzNzEgOS41NTIzNSA3Ni4wMzcxQzEwLjQzNzkgNzYuMDM3MSAxMS4xNTY4IDc1LjMwODMgMTEuMTU2OCA3NC40MTA2Wk03NC4zOTU1IDcyLjc4MjdDNzUuMjgxMSA3Mi43ODI3IDc2IDczLjUxMTUgNzYgNzQuNDEwNkM3NiA3NS4zMDgzIDc1LjI4MTEgNzYuMDM3MSA3NC4zOTU1IDc2LjAzNzFDNzMuNTEgNzYuMDM3MSA3Mi43ODk2IDc1LjMwODMgNzIuNzg5NiA3NC40MTA2QzcyLjc4OTYgNzMuNTExNSA3My41MSA3Mi43ODI3IDc0LjM5NTUgNzIuNzgyN1pNMy4yMTA0MSAxLjY2MzU1QzMuMjEwNDEgMC43NjQzODkgMi40OTE0NyAwLjAzNzA2MzYgMS42MDQ0NyAwLjAzNzA2MzZDMC43MTg5NDUgMC4wMzcwNjM2IDAgMC43NjQzODkgMCAxLjY2MzU1QzAgMi41NjI3MSAwLjcxODk0NSAzLjI5MDA0IDEuNjA0NDcgMy4yOTAwNEMyLjQ5MTQ3IDMuMjkwMDQgMy4yMTA0MSAyLjU2MjcxIDMuMjEwNDEgMS42NjM1NVoiIGZpbGw9IiNEMkQzREIiLz4KPC9zdmc+Cg=='),
            url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzYiIGhlaWdodD0iNzYiIHZpZXdCb3g9IjAgMCA3NiA3NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjYyNjUgMy4yMTAzOUMyLjUyNTY2IDMuMjEwMzkgMy4yNTQ0NyAyLjQ5MTQ1IDMuMjU0NDcgMS42MDQ0NkMzLjI1NDQ3IDAuNzE4OTQgMi41MjU2NiAwIDEuNjI2NSAwQzAuNzI4ODEyIDAgMCAwLjcxODk0IDAgMS42MDQ0NkMwIDIuNDkxNDUgMC43Mjg4MTIgMy4yMTAzOSAxLjYyNjUgMy4yMTAzOVpNMTYuNDQ3OCAwLjg3NDI0OFY4LjgyMjE2SDguOTQyMzhWMTYuMjI0OEgwLjg4NjQ4MlY2OC40MDVIMi4zNjc4MVYxNy42ODYxSDguOTQyMzhWNDEuMzc3NkgxMC40MjM3VjE3LjY4NjFIMTcuOTI5MVYxMC4yODM0SDQxLjk0NDhWOC44MjIxNkgxNy45MjkxVjIuMzM1NTFINjguMzAxNlYwLjg3NDI0OEgxNi40NDc4Wk0xMC40MjM3IDEwLjI4MzRIMTYuNDQ3OFYxNi4yMjQ4SDEwLjQyMzdWMTAuMjgzNFpNMTEuMzEwNyAxLjYwNDQ2QzExLjMxMDcgMi40OTE0NSAxMC41ODM0IDMuMjEwMzkgOS42ODI3NCAzLjIxMDM5QzguNzg1MDUgMy4yMTAzOSA4LjA1NzcyIDIuNDkxNDUgOC4wNTc3MiAxLjYwNDQ2QzguMDU3NzIgMC43MTg5NCA4Ljc4NTA1IDAgOS42ODI3NCAwQzEwLjU4MzQgMCAxMS4zMTA3IDAuNzE4OTQgMTEuMzEwNyAxLjYwNDQ2Wk0xLjYyNjUgMTEuMTU2OEMyLjUyNTY2IDExLjE1NjggMy4yNTQ0NyAxMC40Mzc5IDMuMjU0NDcgOS41NTIzN0MzLjI1NDQ3IDguNjY2ODUgMi41MjU2NiA3Ljk0NzkxIDEuNjI2NSA3Ljk0NzkxQzAuNzI4ODEyIDcuOTQ3OTEgMCA4LjY2Njg1IDAgOS41NTIzN0MwIDEwLjQzNzkgMC43Mjg4MTIgMTEuMTU2OCAxLjYyNjUgMTEuMTU2OFpNMy4yNTQ0NyA3NC4zOTU1QzMuMjU0NDcgNzUuMjgxMSAyLjUyNTY2IDc2IDEuNjI2NSA3NkMwLjcyODgxMiA3NiAwIDc1LjI4MTEgMCA3NC4zOTU1QzAgNzMuNTEgMC43Mjg4MTIgNzIuNzg5NiAxLjYyNjUgNzIuNzg5NkMyLjUyNTY2IDcyLjc4OTYgMy4yNTQ0NyA3My41MSAzLjI1NDQ3IDc0LjM5NTVaTTc0LjM3MzUgMy4yMTAzOUM3NS4yNzI3IDMuMjEwMzkgNzYgMi40OTE0NSA3NiAxLjYwNDQ2Qzc2IDAuNzE4OTQgNzUuMjcyNyAwIDc0LjM3MzUgMEM3My40NzQzIDAgNzIuNzQ3IDAuNzE4OTQgNzIuNzQ3IDEuNjA0NDZDNzIuNzQ3IDIuNDkxNDUgNzMuNDc0MyAzLjIxMDM5IDc0LjM3MzUgMy4yMTAzOVoiIGZpbGw9IiNEMkQzREIiLz4KPC9zdmc+Cg==');
    background-position: calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 12px,12px calc(100% - 12px),12px 12px;
    background-size: 15%;
    background-repeat: no-repeat;
    max-width: 488px;

    background-color: rgba(88,88,88,.4);
    border-radius: 15px;
    padding: 2rem;
    box-sizing: border-box;
    margin-bottom: 2rem;
}

.question-number {
    position: absolute;
    top: 30px;
    font-family: 'Benne', Arial, sans-serif;
    font-weight:normal;
    font-style:normal;
    color: white;
    user-select: none;
    -webkit-user-select: none;
}

.question-reponses-wrapper {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    width: 100%;
    outline: none!important;
    -webkit-tap-highlight-color: transparent!important;
}

.question-reponses-wrapper .nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20px;
    text-align: center;
    flex-grow: 0;
    color: white;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
    -webkit-user-select: none;
}

.question-reponses-wrapper .nav.hidden {
    visibility: hidden;
}

.question-reponses-wrapper .reponses {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 24px;
    padding: 1rem;
    user-select: none;
    -webkit-user-select: none;
}

.question-reponses-wrapper .reponses .reponse {
    display: none;
}

.question-reponses-wrapper .reponses .reponse.selected {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0;
}

.question-response-button {
    font-family: 'Benne', Arial, sans-serif;
    font-size: 20px;
    font-weight:normal;
    font-style:normal;
    line-height: 20px;
    text-align: center;

    display: block;
    position: relative;
    width: 100%;
    height: 4rem;

    color: black;
    background: #fff;

    border: none;
    border-radius: 4px;
    padding: 0 16px;
    margin-bottom: 10px;
    cursor: pointer;
}

.reponse-dots {
    font-size: 80%;
    color: #fff;
    text-align: center;
}

.hint {
    display: block;
    text-align: center;
    font-size: 12px;
    color: white;
    margin-bottom: 0.5rem;
}

.qualite{
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;

    color: white;
    font-size: 3.5rem;
    font-family: 'Benne', Arial, sans-serif;
}

.resultats-wrapper {
    z-index: 100;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2rem;
}

.resultats {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    font-family: 'Benne', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    color: white;
    user-select: none;
    -webkit-user-select: none;

    width: 100%;
    height: 650px;
    font-size: 20px;
    line-height: 2rem;


    background-color: rgba(107,99,181,.4);
    padding: 1rem;
    max-width: 488px;

    box-sizing: border-box;
}

.resultats-container{
    display: flex;
    display: -webkit-flex;
    box-sizing: border-box;
    flex-grow: 1;
    -moz-box-sizing: border-box;
    padding: 1rem;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

    grid-gap: 1rem;
    gap: 2rem;
    -webkit-align-items: center;
    align-items: center;
    border-image-slice: 34% 34% 34% 34%;
    border-image-width: 14px 14px 14px 14px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: round round;
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqAQMAAAD/DVsYAAAABlBMVEUAAADCu/8df2MfAAAAAXRSTlMAQObYZgAAADVJREFUGNNjYJD//48BCAQYmDAoGSDFh05hVYlK/f/AwPz/AEMDSMSBfhTUWiIcSILHwMEDABIWGiMe/BMvAAAAAElFTkSuQmCC);
    border-style: solid;
    overflow: hidden;
}

.resultat-maison-w {
    width: 100%;
    flex-basis: 50%;
}

.resultat-maison {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 0;
    justify-content: space-around;
    font-size: 3rem;
    letter-spacing: 1px;
    font-family: 'Magical', Arial, sans-serif;
    z-index: 400;
    height: 100%;
}

.logo-maison-nom{
    display: flex;
    flex-direction: column;
}

.resultat-maison img{
    z-index: 1000;
}

#choixpeau-dialogue{
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    width: inherit;
    height: 312px;
    padding: 2rem;
    text-align: center;
    display: flex;
    font-size: 2rem;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    z-index: 399;
}

.resultat-scores {
    width: 100%;
    height: 300px;
    background-color: #f9f4f2;
    color: #10141b;
    border-radius: 10px;
    padding: 0 0;
    position: relative;
    z-index: 200;
}

.resultat-sc:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.resultat-sc {
    padding: 1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    grid-gap: 15px;
    gap: 15px;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
}

.resultat-sc.active-griffondor {
    background: rgba(222,85,75,.2);
}

.resultat-sc.active-serpentard {
    background: rgba(8,108,92,.2);
}

.resultat-sc.active-serdaigle {
    background: rgba(38,92,170,.2);
}

.resultat-sc.active-poufsouffle {
    background: rgba(252,181,66,.2);
}

.resultat-sc-place{
    width: 40px;
    color: #10141b;
    font-size: 1.5rem;
    font-family: 'Benne', Arial, sans-serif;
}

.resultat-sc-logo{
    width: 33.5px;
    height: 42.5px;
}

.resultat-sc-compteur{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    grid-gap: 6px;
    gap: 6px;
    flex-grow: 1;
}

.resultat-sc-compteur-detail{
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}

.resultat-sc-compteur-barre{
    background-color: #eaeaea;
    height: 5px;
    width: 100%;
    overflow: hidden;
}

.barre{
    height: 100%;
    width: 0;
    border-radius: 6.60417px;
    overflow: hidden;
    position: relative;
    -webkit-animation: QuizStats_slideIn__3M2SD .75s ease-in-out;
    animation: QuizStats_slideIn__3M2SD .75s ease-in-out;
    animation-fill-mode: none;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-delay: 0.6s;
}

.barre.barre-griffondor{
    background: #e58d61;
}

.barre.barre-serpentard{
    background: #a2bc9c;
}

.barre.barre-serdaigle{
    background: #6e8da6;
}

.barre.barre-poufsouffle{
    background: #d9af60;
}

.prefet {
    display: none;
    position: absolute;
    right: 2rem;
    top: 2rem;
}

.hidden {
    display: none;
}

.wrapper-full{
    padding: 0!important;
}

.img-g{
    height: 200px; width: 182px
}

.img-s{
    height: 200px; width: 171px
}

.img-r{
    height: 200px; width: 194px
}

.img-h{
    height: 200px; width: 170px
}

/* Size on phone */
@media (max-height: 930px) {
    .resultats {
        height: 100%;
    }
}

.resultat-sc-place{
    display: none;
}

.resultat-sc-logo-maison{
    display: none;
}

.resultat-sc-logo img {
    width: 32px;
    height: 40px;
}

/* Handle small screen size */
@media (max-height: 670px) {
    .resultat-scores{
        height: fit-content;
    }

    .resultat-sc{
        padding: .75rem;
    }

    .img-g{
        height: 160px; width: 146px
    }

    .img-s{
        height: 160px; width: 137px
    }

    .img-r{
        height: 160px; width: 155px
    }

    .img-h{
        height: 160px; width: 136px
    }
}

/* Remove pw on small phone screen*/
@media (max-width: 340px) {
    .pts-txt{
        display: none;
    }
}