@charset "UTF-8";

/*
 * @Description: Stylesheet basic of all files
 * @Author: Lisa
 * @Date: 2021-06-22 11:08:57
 * @LastEditTime: 2021-12-08 13:05:44
 * @LastEditors: Please set LastEditors
 */


/**
 * @description: import fonts
 */

@font-face {
    font-family: 'Titillium-Web';
    font-weight: 700;
    src: url('../../../fonts/Titillium_Web/TitilliumWeb-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium-Web';
    font-weight: 400;
    src: url('../../../fonts/Titillium_Web/TitilliumWeb-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Fira-Sans';
    font-weight: 700;
    src: url('../../../fonts/Fira_Sans/FiraSans-Bold.ttf');
}

@font-face {
    font-family: 'Fira-Sans';
    font-weight: 400;
    src: url('../../../fonts/Fira_Sans/FiraSans-Regular.ttf');
}

 :root {
    /**
     * @description: colors
     */
    --body-background-color: #F9F9F9;
    /* fonts */
    --first-color: #FFFFFF;
    --second-color: #ADADAD;
    --third-color: #484848;
    --fourth-color: #350048;
    --fifth-color: #FF3F62;
    --sixth-color-1: #A15FF0;
    --sixth-color-2: #EB40BB;
    --sixth-color: linear-gradient(180deg, var(--sixth-color-1) 0%, var(--sixth-color-2) 100%);
    --sixth-inverse-color: linear-gradient(180deg, var(--sixth-color-2) 0%, var(--sixth-color-1) 100%);
    --sixth-deep-color-1: #450098;
    --sixth-deep-color-2: #EB00A9;
    --sixth-deep-color: linear-gradient(180deg, var(--sixth-deep-color-1) 0%, var(--sixth-deep-color-2) 100%);
    --sixth-color-moz: -moz-linear-gradient(top, var(--sixth-color-1) 0%, var(--sixth-color-2) 100%);
    --sixth-color-webkit: -webkit-linear-gradient(180deg, var(--sixth-color-1) 0%, var(--sixth-color-2) 100%);
    --sixth-color-o: -o-linear-gradient(top, var(--sixth-color-1) 0%, var(--sixth-color-2) 100%);
    /* logo */
    --logo-google-color: linear-gradient(180deg, #FFBD3D 0%, #EE0081 100%);
    --logo-facebbok-color: linear-gradient(180deg, #0F52FF 0%, #FF20E9 100%);
    --logo-instagram-color: linear-gradient(180deg, #FF20A6 0%, #A7006E 100%);
    --logo-translate-color: #ffffff;
    --logo-translate-hover-color: var(--fourth-color);
    /*#350048*/
    --icon-leaf-color: linear-gradient(180deg, #5FF0D6 0%, #00C6D2 100%);
    /* background */
    --background-first-color: #FFFFFF;
    --background-first-color-transparent-1: rgba(255, 255, 255, 0.5);
    --background-first-color-transparent-2: rgba(255, 255, 255, 0.7);
    --background-second-color-vertical: var(--sixth-color);
    --background-second-color-oblique: linear-gradient(87.27deg, var(--sixth-color-1) 0%, var(--sixth-color-2) 112.69%);
    --background-second-color-oblique-transparent-1: rgba(149, 80, 255, 0.8);
    --background-second-color-oblique-transparent-2: rgba(255, 63, 109, 0.8);
    --background-second-color-oblique-transparent: linear-gradient(103.76deg, var(--background-second-color-oblique-transparent-1) 40.16%, var(--background-second-color-oblique-transparent-2) 100%);
    --background-third-color: linear-gradient(180deg, #FF3F62 0%, #FF96A9 100%);
    --background-second-deep-color: var(--sixth-deep-color);
    --background-trash-color: #F7F5F3;
    /* connexion */
    --background-facebook-connexion-color: linear-gradient(180deg, #38AEFF 0%, #0F52FF 100%);
    --background-google-connexion-color: linear-gradient(180deg, #FFBD3D 0%, #EE0081 100%);
    /* clock */
    --background-clock-color: var(--first-color);
    --clock-color: var(--fourth-color);
    /**
    * @description: font familiy
    */
    --font-family-1: 'Titillium-Web', sans-serif;
    --font-family-2: 'Fira-Sans', sans-serif!important;
    /**
    * @description: font sizes
    */
    --size-1: calc(30px + (36 - 30)*(100vw - 768px)/(1920 - 768));
    --size-2: calc(22px + (24 - 22)*(100vw - 768px)/(1920 - 768));
    --size-3: calc(16px + (18 - 16)*(100vw - 768px)/(1920 - 768));
    --size-4: calc(14px + (16 - 14)*(100vw - 768px)/(1920 - 768));
    --size-5: calc(12px + (14 - 12)*(100vw - 768px)/(1920 - 768));
    --size-6: calc(12px + (14 - 12)*(100vw - 768px)/(1920 - 768));
    /**
    * @description: font weight
    */
    --weight-1: 400;
    --weight-2: 700;
    /**
     * @description: padding
     */
    --padding-navbar: 5.73%;
    --padding-landingpage: 17.79%;
    --padding-reservation: 16.8229%;
    --padding-step-reservation: 16.8229%;
    --padding-account: 31%;
    --padding-success: 31%;
    --padding-loggin: 31.25%;
    /**
     * @description: size
     */
    /* --size-product: 31.3094%; */
    --size-product: 360px;
    /**
     * @description: border-radius
     */
    /* --size-product: 40%; */
    --border-raduis-btn: 50px;
    --border-radius-bootom-left: 0px 0px 0px 40px;
    --border-raduis-input: 0;
    /**
     * @description: height
     */
    --h-main: 52px;
    --h-80: 80px;
    /**
     * @description: width
     */
    --w-1: 260px;
    --w-2: 390px;
    --w-3: 468px;
    /**
    * @description: shadow
    */
    --shadow-img-panier: 0px 5px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1400px) {
     :root {
        --padding-landingpage: 9%;
    }
}

@media (max-width: 992px) {
     :root {
        --padding-landingpage: 8%;
        --padding-account: 20%;
        --padding-loggin: 20%;
    }
}

@media (max-width: 768px) {
     :root {
        --padding-landingpage: 5%;
        --padding-step-reservation: 0.8229%;
        --padding-account: 10%;
        --padding-loggin: 10%;
    }
}

@media (max-width: 576px) {
     :root {
        --padding-account: 5%;
        --padding-loggin: 5%;
    }
}

html {
    height: 100%;
    font-size: 16px;
}

body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-1, sans-serif);
    font-weight: var(--weight-1);
    background-color: var(--body-background-color);
    position: relative;
    color: var(--third-color);
}


/* color alert */

.red {
    color: red;
    padding-right: 1rem;
}


/**
 * @description: Clear label default style
 */

a,
a:hover,
a:link,
a:active {
/*     color: var(--third-color);
    color: #484848; */
    text-decoration: none;
    outline: none;
}

.button {
    border: 0;
    background-color: none;
    outline: none;
    -webkit-appearance: none;
}

select {
    border: none!important;
    border-bottom: 1px solid var(--second-color)!important;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("") no-repeat scroll right center transparent;
    padding-right: 14px;
    color: var(--fourth-color)!important;
}

input:not(#shoppingCartModal input):not(#formReserver input) {
    border: none!important;
    border-bottom: 1px solid var(--second-color)!important;
}

input:focus,
textarea:focus {
    outline: none!important;
    box-shadow: none!important;
}

input[type="email"]::placeholder,
input[type=password]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
textarea::placeholder {
    color: #b6b6b6;
}


/**
 * @description:  Clear bootstrap default style
 */

*:focus,
*:active,
*:focus-within {
    box-shadow: none!important;
}

.btn,
.card {
    border-radius: 0;
}

.col-3,
.col-6,
.col-sm-6,
.col-md-6,
.col-4,
.col-sm-4,
.col-sm-12 {
    padding: 0;
}


/* icon angle bottom */

.dropdown-toggle::after {
    /* display: none; */
}


/* modal header */

.modal-header {
    display: block;
}


/* table border */

.table thead th {
    border-bottom: none;
}

table tr td,
textarea {
    font-family: var(--font-family-2);
}

.form-control,
.custom-select {
    border-radius: var(--border-raduis-input);
}

select option {
    color: var(--fourth-color)!important;
}


/**
 * @description: fonts size
 */

h1 {
    font-size: var(--size-1);
}

h2 {
    font-size: var(--size-2);
}

h3 {
    font-size: var(--size-3);
}

h4 {
    font-size: var(--size-4);
}

h5 {
    font-size: var(--size-5);
}

p,
article {
    font-size: var(--size-6);
    font-family: var(--font-family-2);
}

label {
    font-size: var(--size-4);
    font-family: var(--font-family-2);
}

input[type="email"],
input[type="password"],
input[type="tel"],
input[type="text"] {
    color: var(--fourth-color)!important;
    font-family: var(--font-family-2);
    font-size: var(--size-4);
}


/**
 * @description: fonts family
 */

.f1 {
    font-family: var(--font-family-1, sans-serif);
}

.f2 {
    font-family: var(--font-family-2, sans-serif);
}


/**
 * @description: fonts colors
 */


/* white */

.fc-1 {
    color: var(--first-color);
}


/* light grey */

.fc-2 {
    color: var(--second-color);
}


/* grey */

.fc-3 {
    color: var(--third-color);
}


/* purple principle */

.fc-4 {
    color: var(--fourth-color);
}


/* pink */

.fc-5 {
    color: var(--fifth-color);
}


/* purple red */

.fc-6 {
    background: var(--sixth-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent!important;
}


/* purple red fort !!!*/

.fc-7 {
    background: var(--sixth-deep-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.leaf-color {
    background: var(--icon-leaf-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent!important;
}


/**
 * @description: background color
 */


/* white */

.bgc-1 {
    background: var(--background-first-color);
}

.bgc-t-1 {
    background: var(--background-first-color-transparent-1);
}

.bgc-t-2 {
    background: var( --background-first-color-transparent-2);
}


/* purple red */

.bgc-2-v {
    background: var(--background-second-color-vertical);
}

.bgc-2-ob {
    background: var(--background-second-color-oblique);
}

.bgc-2-ob-t {
    background: var(--background-second-color-oblique-transparent);
}

.bgc-2-d {
    background: var( --background-second-deep-color);
}


/* liner gradient pink */

.bgc-3 {
    background: var(--background-third-color);
}


/**
 * @description: fonts sizes
 */

.fsize-1 {
    font-size: var(--size-1);
}

.fsize-2 {
    font-size: var(--size-2);
}

.fsize-3 {
    font-size: var(--size-3);
}

.fsize-4 {
    font-size: var(--size-4);
}

.fsize-5 {
    font-size: var(--size-5);
}

.fsize-6 {
    font-size: var(--size-6);
}


/**
 * @description: fonts weight
 */

.fw-1 {
    font-weight: var(--weight-1);
}

.fw-2 {
    font-weight: var(--weight-2);
}


/**
 * @description: font decoration
 */

.underline {
    text-decoration: underline!important;
}

.line-through {
    text-decoration: line-through;
}

.line-height-0 {
    line-height: 0px;
}

.dividen {
    height: 1px;
    background: var(--second-color);
}


/* table cell */

.table-cell-top {
    vertical-align: text-top!important;
}


/**
 * @description: z-index, positions of elements
 */

.zr-1 {
    position: relative;
    z-index: 1;
}

.zr-2 {
    position: relative;
    z-index: 2;
}

.za-1 {
    position: absolute;
    z-index: 1;
}

.za-2 {
    position: absolute;
    z-index: 2;
}

.za-n {
    position: absolute;
    z-index: 100000;
}


/**
 * @description: position of block
 */

.block-bottom-0 {
    position: absolute;
    top: auto;
    bottom: 0;
}

.block-bottom-15 {
    position: absolute;
    top: auto;
    bottom: 15px;
}

.block-bottom-30 {
    position: absolute;
    top: auto;
    bottom: 30px;
}


/**
 * @description: sentance
 */

.break-word {
    word-wrap: break-word;
}

footer h4 {
    margin-bottom: 15%;
}


/**
 * @description: make the elements invisible
 */

.hidden {
    display: none;
}

.hide {
    visibility: hidden;
}


/**
 * @description: button style
 */

.btn-main-color {
    /* background: var(--sixth-color); */
    color: var(--first-color);
}


/**
 * @description: the height mainly used
 */

.main-btn-h {
    height: var(--h-main);
}


/**
 * @description: main button style
 */

.main-btn {
    background: var(--background-second-color-vertical);
    color: var(--first-color);
    border: none;
    font-weight: var(--weight-2);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.main-btn-inverse {
    background: var(--first-color);
    color: var(--fourth-color);
    border: 1px solid var(--fourth-color);
    font-weight: var(--weight-2);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.main-btn::after {
    content: "";
    background: var(--first-color);
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%;
    transition: all 0.36s;
    display: block;
}

.main-btn-inverse::after {
    content: "";
    background: var(--background-second-color-vertical);
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%;
    transition: all 0.36s;
    display: block;
}

.main-btn:not(.disabled):hover,
.main-btn:active {
    color: var(--fourth-color);
    border: 1px solid var(--fourth-color);
}

.main-btn-inverse:hover,
.main-btn-inverse:active {
    color: var(--fourth-color);
    border: none;
}

.main-btn:not(.disabled):hover::after,
.main-btn-inverse:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.36s;
}

.btn-20 {
    background: var(--background-second-color-vertical)!important;
    color: var(--first-color)!important;
    border: none!important;
    height: 20px;
    width: 20px;
}

.btn-20-inverse {
    background: var(--first-color);
    color: var(--fourth-color);
    height: 18px;
    width: 18px;
}

.btn-20-inverse:hover {
    background: var(--sixth-color);
    color: var(--first-color);
}

.btn-20-inverse-border {
    background-image: linear-gradient(white, white), var(--sixth-color);
    padding: 1px;
    background-clip: content-box, padding-box;
    width: max-content;
    height: max-content;
}


/* width */

.btn-width-1 {
    max-width: var(--w-1);
    width: 100%;
}

.btn-width-2 {
    max-width: var(--w-2);
    width: 100%;
}

.btn-width-3 {
    max-width: var(--w-3);
    width: 100%;
}


/* back button */

.btn-retourn {
    padding-left: var(--padding-navbar);
    cursor: pointer;
}


/* button a */

.button-to-a a {
    display: inline-block;
    line-height: var(--h-main);
}


/**
 * @description: firstly title
 */

.first-title {
    line-height: 36px;
    padding: 1rem;
}

.first-title a:hover {
    color: var(--fourth-color);
}


/* scrollbar style */

::-webkit-scrollbar {
    width: 8px;
    background-color: #FFFFFF;
}

::-webkit-scrollbar-thumb {
    background: #dddddd;
    opacity: 0.1;
    border-radius: 50px;
}


/**
 * @author: jinlei
 * @date: 20210806
 * @description: 加载时的遮罩
 */

.loading-backdrop {
    display: none;
    align-items: center;
    justify-content: center;
    align-content: center;
    position: absolute;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
}


/* logo color */

.connection-google {
    background: var(--background-google-connexion-color) !important;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
    color: var(--first-color);
    line-height: var(--h-main);
    cursor: pointer;
}

.connection-facebook {
    background: var(--background-facebook-connexion-color) !important;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
    color: var(--first-color);
    line-height: var(--h-main);
    cursor: pointer;
}

.connection-google a,
.connection-facebook a {
    font-size: var(--size-4);
    font-weight: var(--weight-2);
    color: var(--first-color);
    text-align: center;
    margin: auto;
}

.connection-google:hover a,
.connection-facebook:hover a {
    color: var(--fourth-color);
}

.connection-google .fa-google,
.connection-facebook .fa-facebook-f {
    color: var(--first-color);
}

.connection-google:hover .fa-google,
.connection-facebook:hover .fa-facebook-f {
    color: var(--fourth-color);
}


/**
 * @description: for page reservation and checkout
 */


/* style of button toggle */

.btn-toggle-white {
    background: var(--background-first-color);
    border: 1px solid var(--fourth-color);
    color: var(--fourth-color);
    width: 200px;
    height: var(--h-main);
}

.box-menu-toggle-white {
    background: var(--background-first-color-transparent-1);
    width: 200px;
    margin-top: -2px;
    border: 1px solid var(--fourth-color);
    border-top: 0px;
    border-radius: 0;
    backdrop-filter: blur(5px);
}

.box-menu-toggle-white button:active,
.box-menu-toggle-white button:hover {
    background: var(--sixth-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent!important;
}


/**
 * @description: self grid
 */

.self-col-55 {
    flex: 0 0 55%;
    max-width: 55%;
}

.self-col-45 {
    flex: 0 0 45%;
    max-width: 45%;
}


/**
 * @description: all pages accounts
 */


/* .content-order_list,
.content-order_info, */

.content-account>div.row {
    padding: 0 var(--padding-account) 12rem;
}


/* box or order list */

.box-account {
    width: 100%;
    max-width: 720px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
    background: var(--background-first-color);
    padding: 3% 30px 5%;
    margin-bottom: 2rem;
}

.box-account>div:not(.button-to-a) {
    margin: 1% 10%;
}


/* eye-password */

.password-eye {
    position: relative;
}

.password-eye-icon {
    position: absolute;
    cursor: pointer;
    top: 2.5rem;
    right: 0;
}

.forgotten-padding {
    padding: 0 22.9%;
}


/* icon form (login + register + change password)*/

.form-group span.icon {
    position: absolute;
    top: 2.5rem;
    left: 0;
}

.form-group span.icon i {
    font-size: 16px;
}


/* input padding for icon   */

.content-login .form-group input,
.content-password .form-group input {
    padding-left: 30px;
}


/**
 * @description: all page success
 */

.content-success {
    padding: 0 var(--padding-success) 12rem;
}

.box-success {
    width: 100%;
    max-width: 720px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
    background: var(--background-first-color);
    padding: 40px;
    margin-bottom: 2rem;
}

.box-success p {
    width: 72%;
    margin: auto;
}

.box-reset .box-reset-padding {
    padding: 2% 23.6%;
}


/* text  */


/* .text-success-padding {
    padding: 2% 20.8%;
} */


/* gif for page success */

.gif-success {
    max-width: 220px;
    max-height: 220px;
}


/**
 * @description: Modals stylesheets
 */


/* enlever le padding-right de modal  */

.modal {
    padding: 0!important;
}


/* fixer le largeur de modal en 630px */

#productModal .modal-dialog {
    max-width: 800px;
}

.modal-title {
    text-align: center;
}

.ferme {
    font-size: 30px;
    background: var(--sixth-color)!important;
    -webkit-background-clip: text!important;
    background-clip: text!important;
    color: transparent!important;
    float: right;
    top: .8rem;
    position: absolute;
    right: 1rem;
    cursor: pointer;
}

.ferme:active {
    transition: 120ms ease-in-out;
    transform: rotate(135deg);
}

.ferme:hover {
    background: var(--sixth-inverse-color)!important;
    background-clip: text!important;
    -webkit-background-clip: text!important;
    color: transparent!important;
}

.modal-body {
    padding: 0;
    margin-left: auto!important;
    margin-right: auto!important;
}


/**
 * @description: annonce Modal elements
 */

.modal-dialog {
    max-width: 600px;
}

.modal-dialog .modal-header {
    border-bottom: none;
    padding-top: 2rem;
    padding-bottom: 0;
}

.modal-dialog .modal-header h3 {
    color: var(--fourth-color);
    font-size: 20px;
}

.modal-dialog .modal-body {
    padding: .6rem 11.6%;
}

.modal-dialog .modal-body p {
    margin-top: 1rem;
}

/*jinlei 20221008 购物车删除按钮*/
.cartDeleteBtn {
    font-size: 16px;
    cursor: pointer;
    margin-left: 6px;
}
.cartDeleteBtn svg{
    fill: var(--sixth-color-1)!important;
}