/* 1. bleu foncé #-005792 */
/* 2. orange #-F57C00 */
/* 3. gris clair #-E1E1E1 */


/* ************************************* */
/* FIX DE LA STRUCTURE ACTUELLE */
/* ************************************* */

.container.page {
    max-width: 100% !important;
    padding: 0 !important;
    background-color: #fff;
}

/* ************************************* */
/* GENERAL */
/* ************************************* */

body {
    font-size: 14px;
    overflow-x: hidden;
    font-family: Roboto, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, arial, sans-serif;
    color: #1F2F3E;
    background-color: #151515;
}

p {
    color: #444;
    letter-spacing: 0.8px
}

a {
    text-decoration: none
}

a.link {
    color: #33BFBF
}

a.link:hover {
    color: #3bcfcf
}

.separator {
    border-top: 4px solid #eee
}

/* BUTTONS --- */
.btn {
    font-size: 14px;
    padding: 0.375rem 1.75rem;
}

.btn-lg {
    font-size: 16px;
    padding: 0.8rem 2.1rem;
}

.btn-xl {
    font-size: 22px;
    padding: 1.2rem 2.8rem;
}


.btn-primary {
    background-color: #33BFBF;
    border-color: #33BFBF;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: #289a9a;
    border-color: #289a9a;
    transition: all 0.2s ease-in-out;
}

.btn-outline-primary {
    border-color: #33BFBF;
    color: #33BFBF;
}

.btn-outline-primary:hover {
    border-color: #33BFBF;
    background-color: #33BFBF;
}

.btn-primary.disabled, .btn-primary:disabled {
    opacity: 0.7;
    background-color: #33BFBF !important;
    border-color: #33BFBF !important;
}

.btn-light-primary {
    border-color: #dffdfd;
    background-color: #dffdfd;
    color: #33BFBF;
}

.btn-light-primary:hover {
    border-color: #b2eeee;
    background-color: #b9f1f1;
}

.btn-white {
    background-color: #fff;
    border-color: #fff;
    color: #555;
}

.btn-white:hover, .btn-white:active, .btn-white:focus {
    background-color: #fff;
    border-color: #ddd;
    color: #222;
    transition: all 0.2s ease-in-out;
}

.btn-outline-white {
    border-color: #33BFBF;
    color: #33BFBF;
}

.btn-outline-primary:hover {
    border-color: #33BFBF;
    background-color: #33BFBF;
}

.btn-white.disabled, .btn-white:disabled {
    opacity: 0.7;
    background-color: #fff !important;
    border-color: #fff !important;
}

.form-control {
    font-size: 15px;
    padding: .5rem .8em;
    background-color: #f6f6f6;
}

.form-control.disabled {
    color: #777
}

.form-control::placeholder {
    color: #aaa;
    font-size: 13px
}

.fw-light {
    font-weight: 100 !important
}

.fw-normal {
    font-weight: 300 !important
}

.fw-bold {
    font-weight: 700 !important
}

.fw-black {
    font-weight: 900 !important
}

.shadow-sm {
    box-shadow: 0 .1rem .35rem rgba(0, 0, 0, .03) !important
}

.shadow-md {
    box-shadow: 0 .1rem 2.5rem rgba(0, 0, 0, .04) !important
}

.text-shadow {
    text-shadow: 0 1px 3px #666
}

.text-shadow1 {
    text-shadow: 0 1px 2px #333
}

.text-shadow-white {
    text-shadow: 0 1px 1px #fff
}

.text-xs {
    font-size: 11px !important
}

.text-sm {
    font-size: 12px !important
}

.text-md {
    font-size: 14px !important
}

.text-lg {
    font-size: 16px !important
}

.text-xl {
    font-size: 18px !important
}

.text-xxl {
    font-size: 20px !important
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.4
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 25px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 14px;
}

.bg-white-gradient {
    background: linear-gradient(1deg, #f4f4f4 0%, #ffffff 100%);
}

.bg-light {
    background-color: #eeeeee !important
}

.bg-medium {
    background-color: #e8e9ea !important
}

.bg-medium-gradient {
    background: linear-gradient(1deg, #e8e8e8 0%, #f1f1f1 100%);
}

.bg-secondary {
    background-color: #707e8b !important;
}

.bg-dark {
    background-color: #1f2f3e !important;
}

.bg-black {
    background-color: #000 !important;
}

.bg-primary {
    background-color: #33BFBF !important;
}

.bg-primary-gradient {
    background: linear-gradient(1deg, #248989 0%, #3de3e3 100%);
}

.bg-success {
    background-color: #58be48 !important
}

.bg-warning {
    background-color: #fdb100 !important
}

.bg-warning-gradient {
    background: linear-gradient(1deg, #f19203 0%, #ffd900 100%);
}

.bg-danger {
    background-color: #ef822f !important
}

.text-medium {
    color: #e8e9ea !important
}

.text-primary {
    color: #33BFBF !important;
}

.text-warning {
    color: #fdb100 !important;
}

.text-muted {
    color: #989898 !important
}

.text-white {
    color: #fff !important
}

.text-dark {
    color: #1f2f3e !important;
}

.border-primary {
    border-color: #33BFBF !important;
}

.border-medium {
    border-color: #e8e9ea !important
}

.hr-dark {
    border-color: #444;
    opacity: 1 !important
}

.hr-light {
    border-color: #ddd;
    opacity: 1 !important
}

u {
    border-bottom: 1px solid #33BFBF;
    text-decoration: none
}

.hero {
    font-size: 150px !important;
    line-height: 1
}

.hero1 {
    font-size: 100px !important;
    line-height: 1
}

.hero2 {
    font-size: 70px !important;
    line-height: 1
}


.hero2-v{
    color: #33BFBF;
    font-weight: bold;
    background-color: #fff;
    padding: 2px 20px;
    border-radius: 9rem;
    font-size: 30px;
} 


.hero3 {
    font-size: 50px !important;
    line-height: 1
}

.hero4 {
    font-size: 40px !important;
    line-height: 1
}

.hero5 {
    font-size: 30px !important;
    line-height: 1
}

.hero6 {
    font-size: 22px !important;
    line-height: 1
}


/* ********************************** */
/* LAYOUT */
/* ********************************** */

.stack {
    width: auto !important;
    position: fixed !important;
    right: 0;
    z-index: 999;
    border-radius: 0 0 0 5px
}


/* ********************************** */
/* SIDENAV */
/* ********************************** */


/* Structure */
.sidenav-header {
    height: 4.4rem;
    border-bottom: 1px solid #304050;
}

.navbar-vertical.navbar-expand-xs {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 12.625rem !important;
    overflow-y: auto;
    padding: 0;
    box-shadow: none;
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    display: block;
    overflow: auto;
    height: calc(100vh - 220px);
}

.main-content, .sidenav {
    transition: all 0.2s ease-in-out;
}

.sidenav {
    z-index: 9999;
}

@media (min-width: 1200px) {
    .sidenav.fixed-start ~ .main-content {
        margin-left: 12.625rem;
    }

    .sidenav.fixed-end ~ .main-content {
        margin-right: 17.125rem;
    }
}

@media (max-width: 1199.98px) {
    .g-sidenav-show.rtl .sidenav {
        transform: translateX(17.125rem);
    }

    .g-sidenav-show:not(.rtl) .sidenav {
        transform: translateX(-17.125rem);
    }

    .g-sidenav-show .sidenav.fixed-start ~ .main-content {
        margin-left: 0 !important;
    }

    .g-sidenav-show.g-sidenav-pinned .sidenav {
        transform: translateX(0);
    }
}

/* Design */
.navbar-vertical .navbar-nav .nav-link {
    padding: 15px;
    font-weight: 300;
    font-size: 13px;
    color: #fff;
    border-bottom: 1px solid #304050;
    opacity: 0.8;
}

.navbar-vertical .navbar-nav .nav-link i {
    font-size: 30px;
    line-height: 1;
}

.navbar-vertical .navbar-nav .nav-link:hover {
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    background-color: #1a2734;
    opacity: 1;
}

.navbar-vertical .navbar-nav .nav-link.active {
    color: #33BFBF;
    background: #131e27;
    opacity: 1;
}


/* ********************************** */
/* Sales team view */
/* ********************************** */

#PickMonth label {
    display: none
}

#PickMonth .input-group {
    box-shadow: 0 0 8px #ccc
}

#PickMonth .input-group * {
    padding: 8px
}

#PickMonth .form-control {
    border-radius: inherit;
    padding: 8px 8px 8px 20px;
    text-transform: uppercase;
    font-weight: bold;
    color: #1f2f3e;
    border-color: #fff
}

#PickMonth .input-group-text {
    background-color: #33BFBF !important;
    color: #fff;
    border-radius: 0;
    padding: 8px 12px;
    border-color: #fff
}


/* ********************************** */
/* Fix Phone input */
/* ********************************** */
.iti__flag {
    background-image: url("../images/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../images/flags%402x.png");
    }
}

.iti {
    display: block !important;
    width: 100% !important;
}


/* STEPS - on top of the pages */
.stepwizard2 {
    display: table;
    position: relative;
    width: 100%;
}

.stepwizard2 .stepwizard-row {
    display: table-row;
}

.stepwizard2 .multi-wizard-step {
    text-align: center;
    position: relative;
    display: table-cell;
}

.stepwizard2 .step {
    width: 44px;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 3px;
    border-radius: 0;
    color: #eee;
    background: transparent
}

.stepwizard2 .step.active {
    font-weight: bold;
    background-color: #fff;
    color: #333;
}

/* FOOTER */
#footer {
    color: #333;
    border-top: 1px solid #fff;
}

#footer * {
    font-size: 14px;
}

#footer button, #footer a {
    color: #333;
    text-decoration: none
}

/* ********************************** */
/* QUIZZ */
/* ********************************** */

/* Questions Radio Buttons */
.list-group-checkable {
    display: grid;
    gap: 10px;
}

.list-group-checkable .list-group-item {
    cursor: pointer;
    border: none;
    padding-left: 30px;
    border: 1px solid #eee;
    border-bottom: 2px solid #eee;
    background: #fff;
    color: #666;
    border-radius: 0px !important;
}

.list-group-checkable .list-group-item:hover {
    background: #eee;
    color: #333 !important;
    border: 1px solid #eee;
    border-bottom: 2px solid #eee;
}

.list-group-item-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    background: #3bcfb8;
}

.list-group-item-check:hover + .list-group-item {
    color: #fff;
}

:root { /* Animation between questions */
    --animate-duration: 0.2s;
}


.icon-wrraper {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background-color: rgba(51, 191, 191, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.flex-grow-1 {
    text-align: left;
    margin-left: 15px;
}

.counter-box .count-number {
    background-color: rgba(51, 191, 191, 0.1);
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.counter-box .count-number h3 {
    font-size: 24px;
    margin-bottom: unset;
    color: #33BFBF;
    font-weight: bold;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: rgba(21, 21, 21, 0.14);
    display: none;

}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 0px);
    left: calc(50% - 30px);
    border: 6px solid #3BDADA;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: animate-preloader 1s linear infinite;
    animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/* ********************************** */
/* OVERLAY REFONT WEBSITE */
/* ********************************** */

.btn{
    font-weight: bold;
}

.btn-goback{
    background-color: #fff;
    color: #1F2F3E;
    border-radius: 2rem;
    padding: 2px 12px;
}

.btn-goback:hover{
    background-color: #ececec;
  
}



#banner{
    background-color: #1F2F3E;
}

#banner h1{
    line-height: 150%;
}

.bold{
    font-weight: bold;
}

.tag{
    background-color: #33BFBF;
    color: #1F2F3E;
    font-weight: bold;
    border-radius: 2rem;
    text-transform: capitalize;
    padding: 2px 12px;
}

.head{
    height: 72px;
}

#postuler h2{
    font-size: 28px;
}

.txt-banner{
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .menu-pc {
        display: none;
    }
}