﻿/* 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 {
    /* Font/text values */
    --unnamed-font-family-leelawadee-ui: Leelawadee UI;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-14: 14px;
    --unnamed-font-size-11: 11px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-33: 33px;
    --unnamed-line-spacing-28: 28px;
    --unnamed-line-spacing-20: 20px;
}

html {
    height: 100%;
    position: relative;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 0px) {
    * {
        font-size: var(--unnamed-font-size-11);
        line-height: var(--unnamed-line-spacing-20);
    }
}

@media (min-width: 470px) {
    * {
        font-size: var(--unnamed-font-size-14);
        line-height: var(--unnamed-line-spacing-28);
    }
}

@media (min-width: 993px) {
    /*Ventes*/
    * {
        font-size: var(--unnamed-font-size-16);
        line-height: var(--unnamed-line-spacing-33);
    }
}

* {
    font-family: var(--unnamed-font-family-leelawadee-ui);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.col-4-5 {
    /* Achat */
    flex: 0 0 auto;
    width: 35%;
}

.col-5-5 {
    /* Achat */
    flex: 0 0 auto;
    width: 45%;
}

.col-6-5 {
    /* Achat */
    flex: 0 0 auto;
    width: 56%;
}

/* REMOVE ARROW ON INPUT TYPE NUMBERS */
input[type="number"]:not(.input-arrow)::-webkit-inner-spin-button,
input[type="number"]:not(.input-arrow)::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"]:not(.input-arrow) {
    -moz-appearance: textfield;
}

/* UNDERLINE H WITHOUT <u> */
.underline-h {
    text-decoration: underline;
    text-decoration-color: #000000;
}

/* NAVBAR */
.bg-navbar {
    box-shadow: 0px -3px 15px 7px #d3d3d3;
}

#webTitle {
    color: #52a55d;
    font-family: "Monserrat", sans-serif;
    text-shadow: 5px 5px 0px #d2ffbf, 5px 5px 0px white;
}

#logoutBtn {
    color: black;
    font-size: 160%;
}
/* END NAVBAR */

/* LOGIN PAGE */
.login-div {
    border-radius: 20px;
    background-color: #efefef;
    box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
    border-style: solid;
    border-color: green;
}

.inner-addon {
    position: relative;
}

    .inner-addon .bi {
        position: absolute;
        padding: 3px;
        pointer-events: none;
    }

.left-addon .bi {
    left: 25px;
    font-size: 25px;
}

.left-addon input {
    padding-left: 47px;
}

.form-control-lg {
    height: calc(1em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 0.3rem;
}

.connectBtn {
    background-color: #00664c;
    margin-top: 8%;
    color: white;
    height: 50%;
}

    .connectBtn:hover {
        background-color: rgba(0, 102, 76, 0.5) !important;
    }

.userInputcontrol .connectBtn {
    width: 40% !important;
    line-height: 3 !important;
}

/* END LOGIN PAGE */

/* HOMEPAGE */
.AVContainer {
    background-color: white;
    box-shadow: rgb(30, 40, 40) 0px 0px 20px -10px;
    cursor: pointer;
    overflow: hidden;
}

    .AVContainer:hover {
        box-shadow: rgb(38, 57, 77) 0px 20px 20px -10px;
        background-color: #f9f9f9;
    }
/* END HOMEPAGE */

/* TOOLTIP */
.tooltip-accueil {
    background-color: #d2ffbf !important;
    color: #00664c !important;
    border: 1px solid #00664c !important;
    min-width: 280px !important;
}

.img-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -23px;
}

.tooltip-recap {

    --bs-tooltip-max-width: max-content;
}

    .tooltip-recap > .tooltip-arrow::before {
        border-bottom-color: #00664c !important;
    }

    .tooltip-recap.tooltip-inner {
        background-color: #d2ffbf !important;
        color: #00664c !important;
        border: 1px solid #00664c !important;
    }

/* END TOOLTIP*/

/* TITLE PAGE */
.bi-4em {
    font-size: 4em !important;
}
/* END TITLE PAGE */

/* OVERRIDE & IMPLEMENT BT RESPONSIVE */

/* -md- bootstrap breakpoint*/
@media (min-width: 768px) {
    .md-justify-content-center {
        justify-content: center !important;
    }

    .md-ms-0 {
        margin-left: 0rem !important;
    }

    .md-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .md-mb-3 {
        margin-bottom: 1rem !important;
    }
}

/* -lg- bootstrap breakpoint*/
@media (min-width: 992px) {
    .lg-justify-content-center {
        justify-content: center !important;
    }

    .lg-mb-0 {
        margin-bottom: 0rem !important;
    }

    .lg-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .lg-mb-3 {
        margin-bottom: 1rem !important;
    }

    .border-lg-end {
        border-right: 2px solid #d3d3d3;
    }
}

/* -xl- bootstrap breakpoint*/
@media (min-width: 1200px) {
    .col-xl-5-5 {
        width: 45.833333335% !important;
    }

    .xl-justify-content-center {
        justify-content: center !important;
    }

    .xl-mb-0 {
        margin-bottom: 0rem !important;
    }

    .xl-mb-2 {
        margin-bottom: 0.5rem !important;
    }

    .xl-mb-3 {
        margin-bottom: 1rem !important;
    }

    .xl-me-3 {
        margin-right: 1rem !important;
    }

    .border-xl-end {
        border-right: 2px solid #d3d3d3;
    }

    .border-xl-bottom-0 {
        border-bottom: none !important;
    }
}

/* -xxl- bootstrap breakpoint*/
@media (min-width: 1400px) {
    .xxl-justify-content-between {
        justify-content: space-between !important;
    }

    .xxl-mb-0 {
        margin-bottom: 0rem !important;
    }

    .xxl-me-0 {
        margin-right: 0rem !important;
    }

    .border-xxl-end {
        border-right: 2px solid #d3d3d3;
    }

    .border-xxl-bottom-0 {
        border-bottom: none !important;
    }
}

/* END OVERRIDE & IMPLEMENT BT RESPONSIVE */

/* IMAGE RESPONSIVE */
img.img-resp-20, svg.img-resp-20 {
    width: 100%;
    max-width: 20px;
    height: auto;
}

img.img-resp-25, svg.img-resp-25 {
    width: 100%;
    max-width: 25px;
    height: auto;
}

img.img-resp-30, svg.img-resp-30 {
    width: 100%;
    max-width: 30px;
    height: auto;
}

img.img-resp-40, svg.img-resp-40 {
    width: 100%;
    max-width: 40px;
    height: auto;
}

img.img-resp-50, svg.img-resp-50 {
    width: 100%;
    max-width: 50px;
    height: auto;
}

img.img-resp-60, svg.img-resp-60 {
    width: 100%;
    max-width: 60px;
    height: auto;
}

img.img-resp-70, svg.img-resp-70 {
    width: 100%;
    max-width: 70px;
    height: auto;
}

img.img-resp-80, svg.img-resp-80 {
    width: 100%;
    max-width: 80px;
    height: auto;
}

img.img-resp-100, svg.img-resp-100 {
    width: 100%;
    max-width: 100px;
    height: auto;
}

img.img-resp-120, svg.img-resp-120 {
    width: 100%;
    max-width: 120px;
    height: auto;
}

img.img-resp-160, svg.img-resp-160 {
    width: 100%;
    max-width: 160px;
    height: auto;
}

img.img-resp-180, svg.img-resp-180 {
    width: 100%;
    max-width: 180px;
    height: auto;
}

img.img-resp-300, svg.img-resp-300 {
    width: 100%;
    max-width: 200px;
    height: auto;
}

img.img-resp-220, svg.img-resp-220 {
    width: 100%;
    max-width: 220px;
    height: auto;
}

@media (max-width: 577px) {
    img.img-resp-sm-13, svg.img-resp-sm-13 {
        width: 100%;
        max-width: 13px;
        height: auto;
    }

    img.img-resp-sm-15, svg.img-resp-sm-15 {
        width: 100%;
        max-width: 15px;
        height: auto;
    }

    img.img-resp-sm-20, svg.img-resp-sm-20 {
        width: 100%;
        max-width: 20px;
        height: auto;
    }

    img.img-resp-sm-40, svg.img-resp-sm-40 {
        width: 100%;
        max-width: 40px;
        height: auto;
    }

    img.img-resp-sm-50, svg.img-resp-sm-50 {
        width: 100%;
        max-width: 50px;
        height: auto;
    }

    img.img-resp-sm-85, svg.img-resp-sm-85 {
        width: 100%;
        max-width: 85px;
        height: auto;
    }
    
}

/* END IMAGE RESPONSIVE */

/* GENERAL */
.color-greenDSP {
    color: #00664c;
}

.btn.bg-greenDSP, .bg-greenDSP {
    background-color: #00664c;
    color: white;
}

    .btn.bg-greenDSP:hover {
        background-color: #FFFFFF;
        color: #00664c;
        border: 1px solid #00664c;
    }

.border-greenDSP {
    border: 1px solid #00664c;
}

.bg-alertGreen {
    background-color: #dff0d8;
    color: #3c763d;
}

a.btn.bg-greenDSP:hover > img.handBackward {
    content: url('../Pictures/hand-backward-green.svg');
}

a.btn.bg-greenDSP:hover > img.handForward {
    content: url('../Pictures/hand-forward-green.svg');
}

.fs-14 {
    font-size: 14px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-9 {
    font-size: 0.9em;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

@media (max-width: 577px) {
    .fs-sm-14 {
        font-size: 14px !important;
    }
}

.w-75 {
    width: 75% !important;
}

.w-90 {
    width: 90% !important;
}

.opacity-1 {
    opacity: 1 !important;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

.w-max-content {
    width: max-content;
}

.h-max-content {
    height: max-content;
}
/* END GENERAL */

/* FORM SOUHAIT VENTE */
#unlockCase > option {
    font-size: 15px;
    margin-left: 3px;
    margin-right: 3px;
}

@media (max-width: 577px) {
    #unlockCase > option {
        font-size: 13px !important;
    }
}

/* OVERRIDE CSS OF AUTOCOMPLETE */
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px white !important;
}

    input:-webkit-autofill:focus {
        border-color: #86b7fe !important;
        -webkit-box-shadow: inset 0 0 0 1000px white, 0 0 0 0.25rem rgb(13 110 253 / 25%) !important;
    }

form.needs-validation input.valid:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' style='color: 198754; z-index:1;' class='bi bi-check-circle' viewBox='0 0 16 16'> <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/> <path d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/> </svg>") !important;
    border-color: #198754;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}

form.needs-validation
input.input-validation-error:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' style='color: DC3545; z-index:1' class='bi bi-exclamation-circle' viewBox='0 0 16 16'> <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/> <path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/> </svg>") !important;
    border-color: #dc3545;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}

.invalid-feedback:has(.field-validation-error) {
    display: block;
}

.summaryModel > ul {
    list-style: none;
}

    .summaryModel > ul > li {
        font-weight: bold;
        font-size: 1.2rem;
    }


.bg-login {
    background: url("../Pictures/Ventes/fond_CTI_1920x1280.png") no-repeat center center fixed;
    background-size: cover;
}
