/**
 * 2011-2022 DMConcept
 *
 *  @author    DMConcept <support@dmconcept.fr>
 *  @copyright 2022 DMConcept
 *  @license   Commercial
 */

/* GLOBAL */
.dm_pattern_configurator-hide { display: none !important; }
body {overflow-y: hidden; color: #232323;}
label {color: #232323;}

/* CONTAINER */
#dm_pattern_configurator {  }
#dm_pattern_configurator.dm_pattern_configurator-fullpage { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; }
#dm_pattern_configurator.dm_pattern_configurator-fullpage #dm_pattern_configurator-body { height: calc(100% - 80px); }

/* HEADER */
#dm_pattern_configurator-header { display: flex; background: white; padding: 10px; border-bottom: 1px solid #ddd; height: 80px; }
#dm_pattern_configurator-header i { font-size: 40px; color: #ec0881;}
#dm_pattern_configurator-header i:hover {color: #bb0d66;}
#dm_pattern_configurator-header img { max-height: 69px; }
#dm_pattern_configurator-header .dm_pattern_configurator-header-actions { width: 25%; height: fit-content; margin: auto;}
#dm_pattern_configurator-header .dm_pattern_configurator-header-title { width: 50%; text-align: center;}
#dm_pattern_configurator-header .dm_pattern_configurator-header-cart { width: 25%; text-align: right; padding-right: 10px; height: fit-content; margin: auto;}

/* BODY */
#dm_pattern_configurator-body { position: relative; background: white; margin-bottom: 30px; }
#dm_pattern_configurator-body #dm_pattern_configurator-leftside, #dm_pattern_configurator-body #dm_pattern_configurator-rightside { padding: 15px; }

/* BODY - LEFT SIDE */
#dm_pattern_configurator-body #dm_pattern_configurator-leftside { position: absolute; top: 0; left: 0; width: 400px; bottom: 0; height: 100%; overflow-y: scroll; }

/* BODY - RIGHT SIDE */
#dm_pattern_configurator-body #dm_pattern_configurator-rightside { position: absolute; top: 0; left: 400px; right: 0; bottom: 0; overflow-y: auto; padding-left: 10%; padding-right: 10%; border-left: 1px solid #ddd; }

/* CART */
#dm_pattern_configurator-cart { padding: 1rem; text-align: center; }
#dm_pattern_configurator-cart > div { max-width: 500px; margin: auto; }
#dm_pattern_configurator-cart .dm_pattern_configurator-cart-total-price { font-size: 1.4rem; padding: 1rem 1rem 2rem; }
#dm_pattern_configurator-cart .dm_pattern_configurator-cart-total { font-size: 2rem; }
#dm_pattern_configurator-cart .dm_pattern_configurator-reset-btn { margin-top: 2rem; }
#dm_pattern_configurator-cart .dm_pattern_configurator-cart-detail-toggle { margin-top: 1rem; margin-bottom: 1rem; }
#dm_pattern_configurator-cart .dm_pattern_configurator-cart-name { margin-bottom: .5rem; }
#dm_pattern_configurator-cart .dm_pattern_configurator-cart-add-button { width: calc(100% - 90px); }
#dm_pattern_configurator-cart .dm_pattern_configurator-cart-add-button button { width: 100%; }
#dm_pattern_configurator-cart .dm_pattern_configurator-cart-quantity { width: 90px; }


/* MOBILE / TABLET */
@media (max-width: 1350px) {
    /* HEADER */
    #dm_pattern_configurator-header { overflow: hidden; }
    #dm_pattern_configurator-header .dm_pattern_configurator-header-actions { width: 80px; }
    #dm_pattern_configurator-header .dm_pattern_configurator-header-actions span { display: none; }
    #dm_pattern_configurator-header .dm_pattern_configurator-header-actions a { padding: .2rem; }
    #dm_pattern_configurator-header .dm_pattern_configurator-header-title { width: calc(100% - 80px);}
    #dm_pattern_configurator-header .dm_pattern_configurator-header-cart { width: 80px; padding-right: .2rem; }

    /* BODY - LEFT SIDE */
    #dm_pattern_configurator-body #dm_pattern_configurator-leftside { background: #fff; display: flex; flex-direction: column-reverse; position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 181px; border-top: 1px solid #ddd; border-right: none; z-index: 10; }
    #dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-step-content { position: relative; height: 140px; overflow: hidden; }
    /*#dm_pattern_configurator-body #dm_pattern_configurator-leftside .collapse { height: 100px; overflow: auto; }*/

    /* BODY - RIGHT SIDE */
    #dm_pattern_configurator-body #dm_pattern_configurator-rightside { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll; height: calc(100% - 181px);}

    /* CART */
    #dm_pattern_configurator-cart { padding: 1rem; text-align: center; padding-bottom: 180px; }
    #dm_pattern_configurator-cart .dm_pattern_configurator-cart-total-price { padding: .5rem .5rem 1rem; }
    #dm_pattern_configurator-cart .dm_pattern_configurator-cart-total { font-size: 1.5rem; }
    #dm_pattern_configurator-cart .dm_pattern_configurator-cart-detail-toggle { margin-top: 1rem; margin-bottom: 1rem; }

    /* ACCORDION */
    #dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-header { padding: 0.25rem 0.5rem; }
    #dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn { padding: 0.25rem 0.5rem; }

    /* INPUTS */
    #dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group {margin-bottom: unset !important;}

    /* RESUME */
    #dm_pattern_configurator-resume {
        width: 100% !important;
    }
}

/* TOOLTIP */
.tooltip-info .tooltip-inner { background-color: #696969; }
.tooltip-info .tooltip-inner p { color: #f5f5f5; }
.tooltip.bs-tether-element-attached-left .tooltip-inner:before, .tooltip-info.bs-tooltip-right .arrow:before { border-right-color: #696969; }
.tooltip.bs-tether-element-attached-bottom .tooltip-inner:before, .tooltip-info.bs-tooltip-top .arrow:before { border-top-color: #696969; }
.tooltip.bs-tether-element-attached-right .tooltip-inner:before, .tooltip-info.bs-tooltip-left .arrow:before { border-left-color: #696969; }
.tooltip.bs-tether-element-attached-top .tooltip-inner:before, .tooltip-info.bs-tooltip-bottom .arrow:before { border-bottom-color: #696969; }

/* ACCORDION */
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-header { background-color: #ec0881;border-radius: 5px;border: 0; }
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-header:hover { background-color: #bb0d66; }
#dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn { box-shadow: none;text-align: start;background-color: inherit !important; }
#dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn:hover { background-color: inherit !important; }
#dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn:hover, #dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn:focus { background-color: #ec0881;outline: none; }
#dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn:hover span, #dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn:focus span { text-decoration: none; }
#dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn:hover sup, #dm_pattern_configurator-accordion .dm_pattern_configurator-card-header .btn:focus sup { text-decoration: none; }
.dm_pattern_configurator-sup { width: 30px;padding: 0 5px;text-transform: lowercase;border: solid 1px;border-radius: 20px;font-size: 10px; }
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card { box-shadow: none;border: none; }
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body { padding: 10px 0; }

/* INPUTS */
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group {display: inline-block;width: 100%;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control-label{text-align: start;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control-input{display: flex;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control.is-valid{border-color: #33ac30;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control.is-invalid{border-color: #ac3030;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control-input .form-control:focus{outline: none;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control-suffix{border: 1px solid rgba(0,0,0,.25);padding: 0 5px 0 5px;border-left: none;font-size: .875rem;display: inherit;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control-suffix span{margin: auto;}
#dm_pattern_configurator-body #dm_pattern_configurator-leftside #dm_pattern_configurator-accordion .dm_pattern_configurator-card-body .form-group .form-control-info {float: right;font-style: italic;font-size: 12px;}

/* COLOR SELECT */
.dm_pattern_configurator-color .card:hover {outline: #ec0881 2px solid;cursor: pointer;}
.dm_pattern_configurator-color-option .card{border-color: rgba(0,0,0,.3);}
.dm_pattern_configurator-color-option.selected .card{outline: #33ac30 2px solid;}
.dm_pattern_configurator-color .card-body .row {margin: 0;}
.dm_pattern_configurator-color .card-body .dm_pattern_configurator-color-option {width: 115px;position: relative;padding-right: 15px;padding-left: 15px;float: left;}
.dm_pattern_configurator-color .card-body .card .card-body {height: 82px;display: flex;cursor: pointer;overflow: hidden}
.dm_pattern_configurator-color .card-body .card .card-body img{width: -webkit-fill-available;margin: auto;}
.dm_pattern_configurator-color .card-body .card .card-footer {text-overflow: ellipsis;    padding: 0.25rem 0.5rem; overflow: hidden; height: 48px;}

/* COLOR LIST */
#dm_pattern_configurator-color-list {overflow-x: hidden;}
#dm_pattern_configurator-color-list .row {padding: 5px 0;display: flex;height: 50px;overflow: hidden;}
#dm_pattern_configurator-color-list .row div {margin: auto 0;height: 100%;}
#dm_pattern_configurator-color-list .row div img {height: 100%;}
#dm_pattern_configurator-color-list .row i:hover {cursor: pointer; opacity: 0.7;}

/* PREVIEW */
#dm_pattern_configurator-ppr-block {
    padding: 0;
    position: relative;
    height: 50%;
    max-height: 50%;
}
#dm_pattern_configurator-picture-block, #dm_pattern_configurator-preview-block, #dm_pattern_configurator-resume-block {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 15px 0;
}
#dm_pattern_configurator-picture-block {z-index: 1;}
#dm_pattern_configurator-picture-block img {max-height: 450px;}
#dm_pattern_configurator-preview-block {z-index: 2; background-color: white; display: none;}
#dm_pattern_configurator-resume-block {z-index: 3; display: none; backdrop-filter: blur(3px); background: rgba(255, 255, 255, 0.7);}
#dm_pattern_configurator-preview {
    margin: auto;
    height: 100%;
    border:  black solid 1px;
    width: fit-content;
    max-width: 100%;
}
#dm_pattern_configurator-strap-preview {
    margin: auto;
    display: flex;
    height: 90%;
    max-width: inherit;
    overflow-x: scroll;
}
#dm_pattern_configurator-strap-preview div{
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat-y: repeat;
}

/* RESUME */
#dm_pattern_configurator-resume {
    margin: auto;
    margin-top: 40px;
    width: 40%;
    background-color: #ffffff;
    border: 3px solid #ec0881;
    border-top: unset;
}
#dm_pattern_configurator-resume div{
    background-color: #ec0881;
    color: #ffffff;
    padding: 10px;
}
#dm_pattern_configurator-resume .close {
    font-size: 35px;
    line-height: unset;
    text-shadow: unset;
    opacity: unset;
    color: #ffffff;
}
#dm_pattern_configurator-resume .close:hover {
    opacity: 0.5;
}
#dm_pattern_configurator-resume-block dl {
    text-align: start;
    padding: 10px;
    margin-bottom: 0;
}
#dm_pattern_configurator-resume-block dl span{
    font-weight: normal;
    width: 70%;
    float: right;
}
#dm_pattern_configurator-resume-block dd {
    display: block;
    margin-inline-start: 30%;
}

/* ACTIONS */
#dm_pattern_configurator-actions {
    text-align: center;
}
#dm_pattern_configurator-show-resume {
    text-decoration: underline;
    font-weight: bold;
}
#dm_pattern_configurator-show-resume:hover {
    opacity: 0.5;
    cursor: pointer;
}
#dm_pattern_configurator-qty-block {
    width: max-content;
    float: none;
    display: flex;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 15px auto;
    box-shadow: unset;
}
#dm_pattern_configurator-qty-block .input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    vertical-align: middle;
    padding: unset;
    width: 50px;
    margin: auto 0;
}
#dm_pattern_configurator-qty-block .input-group-btn .btn {
    height: 34px;
    width: 34px;
    border-radius: 50%;
    background: #ec0881;
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    border: none;
    margin: auto;
    padding: unset;
}
#dm_pattern_configurator-qty-block .input-group-btn .btn:hover {
    background: #bb0d66;
}
#dm_pattern_configurator-qty-block #quantity_wanted {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #bb0d66;
    width: 75px;
    float: unset;
    z-index: unset;
    text-align: center;
    border: 1px solid #ddd;
}
#dm_pattern_configurator-price {
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #ec0881;
}
#dm_pattern_configurator-add-to-cart {
    background-color: #ec0881;
    padding: 0.5rem 1.25rem;
    border-radius: 0.3rem;
}
#dm_pattern_configurator-add-to-cart:hover {
    background-color: #bb0d66;
}

#dm_pattern_configurator-leftside::-webkit-scrollbar, #dm_pattern_configurator-leftside div::-webkit-scrollbar {
    width: 6px;
}
#dm_pattern_configurator-leftside::-webkit-scrollbar-thumb, #dm_pattern_configurator-leftside div::-webkit-scrollbar-thumb {
    background-color: #ec0881;
    border-radius: 10rem;
}
#dm_pattern_configurator-leftside::-webkit-scrollbar-track, #dm_pattern_configurator-leftside div::-webkit-scrollbar-track {
    position: absolute;
    right: -3rem;
    top: -50rem;
    background: transparent;
}

#dm_pattern_configurator-rightside::-webkit-scrollbar {
    width: 6px;
}
#dm_pattern_configurator-rightside #dm_pattern_configurator-preview-block::-webkit-scrollbar, #dm_pattern_configurator-rightside #dm_pattern_configurator-preview-block div::-webkit-scrollbar {
    height: 6px;
}
#dm_pattern_configurator-rightside::-webkit-scrollbar-thumb, #dm_pattern_configurator-rightside div::-webkit-scrollbar-thumb {
    background-color: #ec0881;
    border-radius: 10rem;
}
#dm_pattern_configurator-rightside::-webkit-scrollbar-track, #dm_pattern_configurator-rightside div::-webkit-scrollbar-track {
    position: absolute;
    right: -3rem;
    top: -50rem;
    background: transparent;
}

.agJsWidget, .agJsWidget .sag_badge {
    display: none !important;
}