/****** GLOBAL ******/

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;400;600&display=swap');

body {
    overflow-x: hidden;
    font-family: 'Raleway', sans-serif;
}

#user_purchases___name___purchasedAt {
    margin-bottom: 1rem;
}

#user_purchases___name___purchaseReceiptFile {
    display: block;
}

strong {
    font-weight: 700;
}

.nobr {
    white-space: nowrap;
}

h1 {
    font-weight: 600;
}

h5 {
    font-size: 1.15rem;
}

li {
    list-style: none;
}

a {
    color: black;
    text-decoration: none;
}

.link {
    color: blue !important;
    text-decoration: underline;
}

::placeholder {
    color: black !important;
    opacity: 1;
    /* Firefox */
}

.cc-revoke {
    display: none !important;
}

/****** COOKIES ******/

.cwHlYw svg path {
    fill: black !important;
}

.cwHlYw svg path:last-child {
    fill: rgb(255, 255, 255) !important;
}


.alertform {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/****** HEADER ******/

.nav-link {
    color: black !important;
}

.navbar-nav {
    width: 100%;
}

.logo-header img {
    width: 100%;
}

.menu {
    margin: 0 auto;
}

.menu img {
    width: 100%;
}

.active {
    font-weight: 600;
}

.alertachat {
    border: 2px solid #dc3545;
    color: #dc3545;
    display: block;
}

.banner {
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 33%;
    background-image: url('../images/Banniere-pierre-retravaillee.jpg');
    /* (img-height / img-width * container-width) */
    /* (853 / 1280 * 100) */
}

/****** INDEX PAGE ******/

main {
    width: 70%;
    margin: 0 auto;
}

/****** PURCHASE PAGE ******/

.required-fields-message {
    display: none;
}

.tooltiptext {
    display: none;
}

.purchase-proof-box {
    width: 48%;
    border: 1px solid #e8e8e8;
}

.form-label-civility {
    display: block;
}

#user_gender_0,
#user_gender_1 {
    margin-right: 4px !important;
}

#user_gender .form-check {
    display: inline-block;
}


label[for=user_gender_0] {
    margin-right: 1rem !important;
}

label {
    display: inline;
}

.select2-selection__arrow {
    height: 46px !important;
}

.select2-selection__arrow {
    display: none !important;
}

.select2-container .select2-selection--single {
    height: 39px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 39px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: -3px;
    right: 1px;
    width: 40px;
}

.select2-selection--single {
    border: 1px solid #dce0e5 !important;
    margin-bottom: 1rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-bottom: 10px;
    background-image: url(../images/icons/download.svg);
    background-repeat: no-repeat;
    background-size: 12px 22px;
    border: none;
    line-height: 1.5;
    color: #212529;
    padding: 2.375rem 2.25rem 0.375rem .75rem;
    position: relative;
    top: 49px;
    left: 18px;
}

.select2 .select2-container .select2-container--default {
    width: 100% !important;
}

/****** SOCIAL MEDIA BLOCK ******/

.social-media-icon img {
    width: 35px;
    height: 35px;
    object-fit: cover;
}

.instagram-link:hover {
    color: black !important;
}

.underline {
    color: black !important;
    font-weight: bold;
    display: inline-block;
    padding-bottom: 2px;
    background-image: linear-gradient(#000, #000);
    background-position: 100% 100%;
    /*OR bottom left*/
    background-size: 100% 2px;
    background-repeat: no-repeat;
    transition:
        background-size 0.3s,
        background-position 0s 0.3s;
    /*change after the size immediately*/
}

.underline:hover {
    background-position: 0% 100%;
    /*OR bottom right*/
    background-size: 0% 2px;
}

/****** CONFIDENTIALITY PAGE ******/

table {
    width: 100%;
}

table>thead>tr>th,
table>tbody>tr>th,
table>tfoot>tr>th,
table>thead>tr>td,
table>tbody>tr>td,
table>tfoot>tr>td {
    padding: 11px 10px;
    vertical-align: top
}

/****** FOOTER ******/

.cc-revoke {
    display: none;
}

.cookies {
    background: white;
    padding: 25px;
    width: 100%;
    height: 135px;
    box-shadow: 0 10px 30px rgba(65, 72, 86, 0.06);
    transition: all 400ms ease-in-out;
    position: fixed;
    z-index: 111;
    bottom: 0;
}

.cookies p {
    font-size: 14px;
}

.cookies-icon {
    height: 36px;
    width: 36px;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.fade-img {
    opacity: 1 !important;
    transform: scale(1);
}

.cookies-accept {
    text-align: center;
    cursor: pointer;
    transition: background 250ms ease-in-out;
}

.cookies-message {
    height: 36px;
    padding: 0px 10px;
    line-height: 36px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 38px;
}

.cookies a {
    color: #fff;
}

.btn-cookie {
    width: 9%;
}


footer {
    border-top: dotted 3px #e8e8e8;
}

footer img {
    width: 100%;
}


/******* MOBILE VERSION *******/

@media (max-width: 768px) {

    .btn-cookie {
        width: 36%;
    }

    .cookies {
        height: 180px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .logo-header img {
        width: 80%;
        margin: 0 auto;
        display: block;
        margin-top: 2%;
    }

    .small {
        font-size: 0.7rem;
    }

    .navbar-light .navbar-toggler {
        border-color: rgba(0, 0, 0, 0) !important;
    }

    .navbar-brand {
        display: none;
    }

    .banner {
        background-image: url('../images/PL_datagest_1440x616px.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 39.64%;
    }

    .footer-mobile-width {
        margin: 0 auto;
        width: 83%;
    }


    .footer-mobile-width-second {
        margin: 0 auto;
        width: 100%;
    }


    main {
        padding: 5%;
        width: 100%;
        text-align: justify;
    }

    .row {
        display: block;
    }

    footer img {
        width: 100%;
        display: block;
    }

    .custom-text-center {
        text-align: center;
    }

    .purchase-proof-box {
        width: 100%;
        margin-top: 10%;
    }

    @media (max-width: 768px) and (orientation: portrait) {

        h1 {
            font-size: 1.5rem;
        }

        .logo-header img {
            width: 80%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }

        .small {
            font-size: 0.7rem;
        }

        .navbar-light .navbar-toggler {
            border-color: rgba(0, 0, 0, 0) !important;
        }

        .navbar-brand {
            display: none;
        }

        .banner {
            background-image: url('../images/PL_datagest_1440x616px.jpg');
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            height: 0;
            padding-top: 39.64%;
        }

        .footer-mobile-width {
            margin: 0 auto;
            width: 83%;
        }

        main {
            padding: 5%;
            width: 100%;
            text-align: justify;
        }

        .row {
            display: block;
        }

        footer img {
            width: 100%;
            display: block;
        }

        .custom-text-center {
            text-align: center;
        }

        .purchase-proof-box {
            width: 100%;
            margin-top: 10%;
        }
    }

    /******* IPAD VERSION *******/

    /* iPad Landscape */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        .menu-right-block {
            width: 82% !important;
        }

        .logo-header {
            margin-left: 1.5rem !important;
        }
    }

    /* iPad Portrait */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {


        .navbar-brand {
            display: none;
        }

        .menu-right-block {
            width: 100% !important;
        }

        .logo-header img {
            width: 40%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }
    }


    select {
        height: calc(1.5em + .75rem + 2px);
        padding: .375rem 1.75rem .375rem .75rem;
        font-size: 22rem;
        font-weight: 400;
        line-height: 1.5;
        vertical-align: middle;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    option {
        font-weight: normal;
        display: block;
        white-space: break !important;
        min-height: 1.2em;
        padding: 0px 2px 1px;
    }

    #user_form_purchases___name__ div:nth-child(2) {
        font-style: italic;
    }

}