/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* From Uiverse.io by zanina-yassine */

#wrapper {
    background: none !important;
    margin-top: 0 !important;
}

.bg_opacity {
    background: none !important;
}

#privatebox {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-color: #ffffff;
    box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
        0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
        0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 11px;
    font-family: "Inter", sans-serif;
}

#logo_basic {
    box-sizing: border-box;
    background: none !important;
    filter: drop-shadow(0px 0.5px 0.5px #efefef) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
}

#logo_basic img {
    border-radius: 11px;
}

#privatebox .private-subheading {
    border-bottom: none;
    font-family: "Inter", sans-serif;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}

#privatebox div.form_content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#privatebox input.form-control {
    width: auto;
    height: 40px;
    padding: 0 0 0 40px;
    border-radius: 7px;
    outline: none;
    border: 1px solid #e5e5e5 !important;
    filter: drop-shadow(0px 1px 0px #efefef) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
    transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

#privatebox input.form-control:focus {
    border: 1px solid transparent !important;
    box-shadow: 0px 0px 0px 2px #242424;
    background-color: transparent !important;
}

#privatebox #pshop_bottom_footer,
#privatebox #new-private-account footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

#privatebox #pshop_bottom_footer li.submit,
#privatebox #new-private-account footer div {
    float: none;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    list-style-type: none;
}

#privatebox ul#pshop_bottom_footer li,
ul#pshop_bottom_footer li div,
#privatebox #new-private-account footer div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#privatebox #pshop_bottom_footer .submit div,
#privatebox #new-private-account footer div {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 7px;
    outline: none;
}

#privatebox #pshop_bottom_footer .submit div.login,
#privatebox #new-private-account footer div.login {
    background: #115DFC;
    color: #ffffff;
}

#privatebox #pshop_bottom_footer .submit div.register,
#privatebox #new-private-account footer div.register {
    background: #212121;
    color: #ffffff;
    justify-content: center;
    font-weight: 700;
}

#privatebox #pshop_bottom_footer .submit div.send {
    background: #ffffff;
    color: #115dfc !important;
    border: 1px solid;
    height: 40px;
    justify-content: center;
    font-weight: 700;
}

.separator {
    margin-top: 15px;
    color: grey;
}

/** CODE CSS BEN **/

@media screen and (min-width: 992px) {
    div#privatebox {
        width: 50%;
    }
}

@media screen and (max-width: 991px) {
    div#privatebox {
        width: 70%;
    }
}

div#privatebox {
    margin: auto;
    padding: 40px;
}

body#bg-private-color {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #dbdbdb;
}

#privatebox p#logo_basic img {
    width: 70%;
}

#privatebox p#logo_basic {
    text-align: center;
    margin: 0;
}

#privatebox tr.pshop_fields_row {
    gap: 5px;
    display: flex;
    flex-direction: column;
}

#privatebox table.private_login_table {
    width: 100%;
}

#privatebox input#email,
#privatebox input#passwd,
#privatebox .private_login_table input,
#privatebox #new-private-account input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 0 15px !important;
    box-sizing: border-box;;
}

#privatebox h1.pshop_title_shop {
    text-align: center;
}

#privatebox .form_content.clearfix {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

#privatebox p.lost_password.form-group {
    margin: 10px 0 20px 0 !important;
    font-size: .8rem;
}

#privatebox p.lost_password.form-group a {
    text-decoration: none !important;
    color: grey;
}

#privatebox tr.exttra_row {
    display: none;
}

#privatebox ul#pshop_bottom_footer li,
ul#pshop_bottom_footer li div {
    align-items: initial !important;
}

#privatebox button#SubmitLogin,
#privatebox #pshop_bottom_footer .submit div button {
    background: none;
    border: none;
    height: 100%;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

#privatebox #error_holder .alert.alert-danger {
    background: #d600000d;
    border: 1px solid #D60000;
    border-radius: 10px;
    margin: 20px 0 20px 0;
}

#privatebox #error_holder .alert.alert-danger ol li {
    list-style: none;
    text-align: center;
    color: #D60000;
}

#privatebox #error_holder .alert.alert-danger ol {
    padding: 0;
}

#privatebox ul#pshop_bottom_footer li {
    gap: 5px;
}

#privatebox li.submit {
    margin-top: 10px;
}

#privatebox table.private_login_table tbody tr:not(:first-child) {
    margin-top: 20px;
}

#privatebox label + div {
    margin-top: 5px;
}

#privatebox label {
    margin-left: 5px;
}

#privatebox .login button,
#privatebox .register,
#privatebox .send
{
  cursor: pointer;
}

#privatebox h2.private-subheading {
    margin-top: 10px !important;
}

#privatebox #new-private-account .radio-inline{
    display: inline-flex;
    column-gap: 5px;
}

#privatebox #new-private-account section > div{
    margin-top: 20px;
}

#privatebox #new-private-account section section fieldset > div{
    margin-top: 20px;
}

#privatebox #new-private-account .password-field .js-parent-focus{
    display: flex;
    position: relative;
}

#privatebox fieldset {
    padding: 0;
}

#privatebox .radio-input input {
  display: none;
}

#privatebox .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  color: #000000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}

#privatebox .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 500;
  letter-spacing: -1px;
  font-size: 14px;
}

#privatebox .selection {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
}

#privatebox .radio-input label:has(input:checked) {
  color: #fff;
}

#privatebox .radio-input label:has(input:checked) ~ .selection {
  background-color: rgb(11 117 223);
  display: inline-block;
}

#privatebox .radio-input label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 0 / 2));
}

#privatebox .radio-input label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 2 / 2));
}

#privatebox .pshop_show_hide button{
    border: none;
    background:none;
}

#privatebox .pshop_show_hide {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

#privatebox #new-private-account .type_multiboxes input{
    width: 0px !important;
    height: 0px;
}

#privatebox #registration_fields input[type="checkbox"]:not(old) + label > span{
    border: 1px solid #e5e5e5 !important;
    background: #fff;
    border-radius: 7px;
}

#privatebox input[type="checkbox"][name="newsletter"]{
    display: none;
}

#privatebox #new-private-account .type_multiboxes svg,
#privatebox input[type="checkbox"][name="newsletter"] + svg {
  overflow: visible;
}

#privatebox #new-private-account .type_multiboxes .path,
#privatebox input[type="checkbox"][name="newsletter"] + svg .path {
  fill: none;
  stroke: #115dfc;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
  stroke-dasharray: 241 9999999;
  stroke-dashoffset: 0;
}

#privatebox #new-private-account .type_multiboxes input:checked ~ svg .path,
#privatebox input[type="checkbox"][name="newsletter"]:checked + svg .path {
  stroke-dasharray: 70.5096664428711 9999999;
  stroke-dashoffset: -262.2723388671875;
}

#privatebox #new-private-account footer a {
    color: #ffffff;
    text-decoration: none;
}

#privatebox #new-private-account footer .login {
    margin-bottom: 20px;
}

#privatebox #new-private-account footer .login button {
    background: none;
    border: none;
    height: 100%;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

#privatebox #private-back button#default_back {
    width: 100%;
    border-radius: 7px;
    background: #115dfc;
    border: 0px;
    padding: 10px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}

#privatebox #private-lost-password form fieldset{
    border: none;
}

#privatebox #private-lost-password form fieldset button{
    width: 100%;
    padding: 10px;
    border-radius: 7px;
    border: none;
    background: #115DFC;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}

#privatebox #private-lost-password ul{
    text-align: center;
    width: 100%;
    padding: 0;
}

#privatebox #private-lost-password li{
    list-style: none;
}

#privatebox #private-lost-password ul li a{
    text-decoration: none;
    background: #212121;
    color: #ffffff;
    padding: 10px;
    border-radius: 7px;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
}


/** FIN PAGE DE CONNEXION/INSCRIPTION **/

/** DEBUT PAGE DE PRODUIT **/

body#product #product-accessories {
    margin-top: 0 !important;
}

body#product h2.section-title {
    padding-top: 0.25rem !important;
    padding-bottom: 1.25rem !important;
    margin: 0 !important;
}

body#product h2.accordion-header {
    padding-top: 0.25rem !important;
    padding-bottom: 1.25rem !important;
    margin: 0 !important;
}

section.product-accessories.mt-3 {
    margin-top: 0 !important;
}

body#product #attachments .attachment .button {
  --height: 35px;
  --tooltip-height: 35px;
  --tooltip-width: 90px;
  --gap-between-tooltip-to-button: 18px;
  --button-color: #1163ff;
  --tooltip-color: #fff;
  width: var(--width);
  height: var(--height);
  background: var(--button-color);
  position: relative;
  text-align: center;
  border-radius: 0.45em;
  font-family: "Arial";
  transition: background 0.3s;
}

body#product #attachments .attachment .button::before {
  position: absolute;
  content: attr(data-tooltip);
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  background-color: var(--tooltip-color);
  font-size: 0.9rem;
  color: #111;
  border-radius: .25em;
  line-height: var(--tooltip-height);
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
  left: calc(50% - var(--tooltip-width) / 2);
}

body#product #attachments .attachment .button::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: var(--tooltip-color);
  left: calc(50% - 10px);
  bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
}

body#product #attachments .attachment .button::after,
body#product #attachments .attachment .button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

body#product #attachments .attachment .text {
  display: flex;
  align-items: center;
  justify-content: center;
}

body#product #attachments .attachment .button-wrapper,
body#product #attachments .attachment .text,
body#product #attachments .attachment .icon {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
}

body#product #attachments .attachment .text {
  top: 0
}

body#product #attachments .attachment .text,
body#product #attachments .attachment.icon {
  transition: top 0.5s;
}

body#product #attachments .attachment .icon {
  color: #fff;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body#product #attachments .attachment .icon svg {
  width: 24px;
  height: 24px;
}

body#product #attachments .attachment .button:hover {
  background:#0b5ed7;
  cursor: pointer;
}

body#product #attachments .attachment .button:hover .text {
  top: -100%;
}

body#product #attachments .attachment .button:hover .icon {
  top: 0;
}

body#product #attachments .attachment .button:hover:before,
body#product #attachments .attachment .button:hover:after {
  opacity: 1;
  visibility: visible;
}

body#product #attachments .attachment .button:hover:after {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
}

body#product #attachments .attachment .button:hover:before {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
}

body#product #attachments .attachment .button a {
    color: #ffffff;
}

body#product #attachments #product-attachments-collapse{
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 7px;
}

body#product #attachments #product-attachments-heading {
    font-size: 1.5rem;
}


/** FIN PAGE DE PRODUIT **/


/** DÉBUT HOMEPAGE **/

@media screen and (min-width: 992px) {
    ul#hp-liste-fournisseur {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: 10px;
    } 
}

@media screen and (max-width: 991px) {
    ul#hp-liste-fournisseur {
    display: grid;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    grid-template-columns: 2fr 2fr;
    gap: 10px;
    } 
}

.rich-text ul{
    padding-left: 0 !important;
}

/** FIN HOMEPAGE **/