/* VARIABLES */
#dmverriere {
    --leftside-width: 40%;
    --span-size: 40px;
    --horizontal-padding: 50px;
    --primary: rgb(145, 0, 0);
}
@media (max-width: 1199px) {
    #dmverriere {
        --leftside-width: 50%;
    }
}

/* GLOBAL */
#dmverriere .dmverriere-hide { display: none !important; }
#dmverriere .margin-top { margin-top: 3rem !important; }
#dmverriere img { max-width: 100%; }

/* FORMS */
#dmverriere .form-check-input { position: relative; margin: 0; }
#dmverriere .form-check-label { padding: 0; }
#dmverriere .form-label { font-weight: bold; }
#dmverriere .form-check + .form-check { margin-top: 0; }

/* CONTAINER */
#dmverriere { display: flex; flex-direction: column; margin-bottom: 30px; }

/* HEADER */
#dmverriere-header { display: flex; background: white; padding: 10px; border-bottom: 1px solid #ddd; }
#dmverriere-header .dmverriere-header-title { width: 50%; }
#dmverriere-header .dmverriere-header-title h3 { margin: 0; }
#dmverriere-header .dmverriere-header-cart { width: 50%; padding-right: 10px; }
#dmverriere-header .dmverriere-total-price { float: right; }

/* STEPS - HEAD */
#dmverriere-steps ul { display: flex; flex-flow: row; margin-bottom: 2rem; border: 0; list-style: none; padding: 0; }
#dmverriere-steps ul li { width: 100%; text-align: center; position: relative; }
#dmverriere-steps ul li:after { content: ''; position: absolute; display : inline-block; height : 0; width : 0; border-top : 6px solid transparent; border-bottom : 6px solid transparent; border-left : 10px solid #000; right: -6px; top: calc(50% - 6px); }
#dmverriere-steps ul li:last-child:after { display: none; }
#dmverriere-steps ul li i, #dmverriere-steps ul li img { display: block; width: 100px; height: 100px; font-size: 70px; border: 5px solid #000; border-radius: 50%; line-height: 90px; margin: auto; }
#dmverriere-steps ul li img.active { display: none; }
#dmverriere-steps ul li .active img.active { display: block; }
#dmverriere-steps ul li .active img.not-active { display: none; }
#dmverriere-steps ul li a { background: transparent !important; border: 0 !important; color: #000; text-transform: uppercase; }
#dmverriere-steps ul li a span { padding-top: 10px; display: block; }
#dmverriere-steps ul li .active i { color: var(--primary); }
#triangle-code { display : inline-block; height : 0; width : 0; border-top : 6px solid transparent; border-bottom : 6px solid transparent; border-left : 10px solid red; }

/* BODY */
#dmverriere-body { display: flex; flex-direction: row; background: white; box-shadow: 0 0 10px #999; }

/* FORMS */
#dmverriere .form-width-small { width: 300px; margin: auto; }
#dmverriere input,
#dmverriere select { border: 2px solid var(--primary); border-radius: 7px; background: #fff; }
#dmverriere label { text-align: left; text-transform: uppercase; font-weight: 500; font-size: 1rem; }
#dmverriere .form-step-price { border: 2px solid var(--primary); border-radius: 10px; background: #fff; display: table; margin: 5rem auto 0; padding: .8rem .9rem; text-transform: uppercase; font-size: 1.1rem; }
#dmverriere .form-step-price .dmverriere-total-price { color: var(--primary); font-weight: bold; }
#dmverriere .help-block { font-size: .7rem; text-align: center; margin: 0; }
#dmverriere .col-form-label { padding: .7rem 0; }
/* FORMS - MODELS STEP */
#dmverriere .dmverriere-step-models { display: -ms-flex; display: -webkit-flex; display: flex; padding: 0 3rem; }
#dmverriere .dmverriere-step-models .form-check { width: 50%; display: -ms-flex; display: -webkit-flex; display: flex; flex-flow: column; }
#dmverriere .dmverriere-step-models .form-check img { width: 100%; margin-top: .3rem; margin-bottom: 2rem; }
/* FORMS - RADIO */
#dmverriere .form-check { margin-bottom: 1.5rem; }
#dmverriere .form-check .form-check-label { display: block; padding: 0 2rem; }
#dmverriere .form-check .form-check-label input[type="radio"] { display: none !important; *display: inline; }
#dmverriere .form-check .form-check-label input[type="radio"] + span { display: block; position: relative; padding-right: 1.5rem; }
#dmverriere .form-check .form-check-label input[type="radio"] + span:before { content: ""; width: 20px; height: 20px; position: absolute; right: 0; border: 2px solid var(--primary); background-color: #fff; border-radius: 5px; }
#dmverriere .form-check .form-check-label input[type="radio"]:checked + span:before { background: var(--primary); }
#dmverriere .form-check .form-check-label input[type="radio"]:checked + span:after { content: "✔"; position: absolute; top: 0; right: 5px; width: 12px; height: 12px; color: #fff; }
/* ADD TO CART */
#dmverriere form { margin-top: 1rem; text-align: center; }

/* BODY - LEFT SIDE */
#dmverriere-body #dmverriere-leftside { width: var(--leftside-width); background: rgb(249,249,249); }
#dmverriere-body #dmverriere-leftside .selected { border-color: green; }
#dmverriere-body #dmverriere-leftside #dmverriere-step-tabs > li { width: 25%; margin: 0; text-align: center; }
#dmverriere-body #dmverriere-leftside #dmverriere-step-tabs > li > a { background: #eee; }
#dmverriere-body #dmverriere-leftside #dmverriere-step-tabs > li > a.active { background: transparent; }
#dmverriere-body #dmverriere-leftside #dmverriere-step-content .tab-pane { padding: 100px 10px 50px 10px; position: relative; }
#dmverriere-body #dmverriere-leftside #dmverriere-step-content .tab-pane .dmverriere-step-title { background: var(--primary); color: #fff; position: absolute; left: 0; top: 0; padding: 1.3rem 3rem; font-size: 1.5rem; font-weight: bold; text-transform: uppercase; border-radius: 0 0 30px; }
#dmverriere-body #dmverriere-leftside #dmverriere-step-content .tab-pane h3 { border-bottom: 2px solid var(--primary); font-size: 1.3rem; text-transform: uppercase; margin: 0 auto 3rem auto; display: table; width: auto; }

/* BODY - RIGHT SIDE */
#dmverriere-body #dmverriere-rightside { width: calc(100% - var(--leftside-width)); /*overflow-y: auto;*/ position: relative; }
#dmverriere-body #dmverriere-rightside > div { position: sticky; top: 0; }

/* STEPS */
.dmverriere-step-items { display: flex; flex-wrap: wrap; font-size: .85rem; }
.dmverriere-item { text-align: center; display: inline-block; cursor: pointer; border: 1px solid #999; width: 24%; margin: 5px .5%; }
.dmverriere-dimension-help-button { text-align: center; margin-top: 2rem; }
.dmverriere-dimension-help-button button { background: transparent; border: 2px solid transparent; color: var(--primary); font-size: .9rem; padding: .2rem .4rem; text-decoration: underline; cursor: pointer; }
.dmverriere-dimension-help-button button:hover { background: #fff; border-color: var(--primary); text-decoration: none; }

/* PREVIEW */
#dmverriere-preview { padding: 5rem 4rem 7rem 2rem; }
.dmverriere-preview-container { margin: auto; width: 400px; height: 500px; position: relative; }
.dmverriere-preview-container .dmverriere-preview-structure { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #12345622; }
.dmverriere-preview-container .dmverriere-preview-structure > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dmverriere-preview-container .dmverriere-preview-structure .dmverriere-structure-item { position: absolute; background: #000; }
.dmverriere-preview-container .dmverriere-preview-structure [data-direction="horizontal"] { left: 0; right: 0; height: var(--span-size); z-index: 1; }
.dmverriere-preview-container .dmverriere-preview-structure [data-direction="vertical"] { top: 0; bottom: 0; width: var(--span-size); }
.dmverriere-preview-container .dmverriere-preview-structure [data-dmverriere-type="top"] { top: 0; }
.dmverriere-preview-container .dmverriere-preview-structure [data-dmverriere-type="bottom"] { bottom: 0; }
.dmverriere-preview-container .dmverriere-preview-structure [data-dmverriere-type="left"] { left: 0; }
.dmverriere-preview-container .dmverriere-preview-structure [data-dmverriere-type="right"] { right: 0; }
.dmverriere-preview-container .dmverriere-preview-structure [data-dmverriere-type="soubassement"] { bottom: var(--span-size); border-top: 5px solid #333; border-right: 5px solid #333; border-bottom: 5px solid #999; border-left: 5px solid #999; }

.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item { position: absolute; background: var(--primary); color: #666; font-size: 14px; font-weight: bold; }
.dmverriere-hide-dimensions .dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item { display: none !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="height"] { top: 0; bottom: 0; right: -30px; width: 2px !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="height"] span { transform: rotate(90deg); transform-origin: top left; position: absolute; left: 20px; top: 10%; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="width"] { left: 0; right: 0; bottom: -40px; height: 2px !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="width"] span { position: absolute; bottom: 0; width: 100%; text-align: center; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="span"] { bottom: -20px; height: 2px !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="span"] span { position: absolute; bottom: 0; width: 100%; text-align: center; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="sleeper"] { top: 0; right: -10px; width: 2px !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="sleeper"] span { transform: rotate(90deg); transform-origin: top left; position: absolute; left: 20px; top: 10%; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="blade"] { bottom: -20px; height: 2px !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="blade"] span { position: absolute; bottom: 0; width: 100%; text-align: center; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="crosspiece"] { top: 0; right: -10px; width: 2px !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="crosspiece"] span { transform: rotate(90deg); transform-origin: top left; position: absolute; left: 20px; top: 10%; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="basement"] { bottom: 0; right: -10px; width: 2px !important; }
.dmverriere-preview-container .dmverriere-dimension .dmverriere-dimension-item[data-dmverriere-type="basement"] span { transform: rotate(90deg); transform-origin: top left; position: absolute; left: 20px; top: 10%; }

/* CHECK */
#dmverriere-step-check-content ul { list-style: none; }
#dmverriere-step-check-content ul li { margin-bottom: 1rem; }
#dmverriere-step-check-content ul li .dmverriere-list-value { float: right; }
#dmverriere-step-check-content .dmverriere-list-value { font-weight: bold; }

/* PREV/NEXT */
#dmverriere .dmverriere-prevnext-btn { text-align: center; margin: 1rem; }


@media (max-width: 991px) {
    #dmverriere {
        --leftside-width: 100%;
    }
    #dmverriere-body { flex-direction: column; }
    #dmverriere-body #dmverriere-rightside { width: 100%; }
}

@media (max-width: 767px) {
    #dmverriere-steps ul li i { width: 60px; height: 60px; font-size: 40px; line-height: 50px; }
    #dmverriere-steps ul li span { font-size: .9rem; }
    #dmverriere .form-width-small { width: 100%; padding: 0 2rem; }
}

@media (max-width: 575px) {
    #dmverriere-body #dmverriere-leftside #dmverriere-step-content .tab-pane h3 { font-size: 1.1rem; margin-bottom: 1.5rem; }
    #dmverriere-body #dmverriere-leftside #dmverriere-step-content .tab-pane .dmverriere-step-title { font-size: 1rem; padding: .7rem 1.4rem }
    #dmverriere-body #dmverriere-leftside #dmverriere-step-content .tab-pane { padding: 70px 10px 0 10px; position: relative; }
    #dmverriere-steps ul li:after { display: none; border: 3px solid #000; }
    #dmverriere-steps ul li a { padding: 0; }
    #dmverriere-steps ul li a span { display: none; }
    #dmverriere-steps ul li i, #dmverriere-steps ul li img { width: 60px; height: 60px; border-width: 3px; }
    #dmverriere .dmverriere-step-models { padding: 0; }
    #dmverriere .col-form-label { margin: 0; }
    #dmverriere .form-check .form-check-label { padding: 0 .3rem; }
    #dmverriere .dmverriere-step-models .form-check { margin-bottom: 1rem; }
    #dmverriere .dmverriere-step-models .form-check img { margin-bottom: 0; }
    #dmverriere-step-check-content ul { padding: 0; }
    #dmverriere-step-check-content ul li .dmverriere-list-value { float: none; display: block; }
    #dmverriere .form-step-price { margin-top: 2rem; }
    #dmverriere .margin-top { margin-top: 1rem !important; }
}


/* BUTTONS */
#dmverriere .btn-primary {
    margin-top: 20px;
    color: #ffffff !important;
    letter-spacing: 1px;
    font-size: 16px;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    background-color: #910000;
    padding: 15px 25px;
    text-align: center;
    margin: 0 auto;
    transition: background-color 0.3s ease-out;
    border-radius: 10px;
}

#dmverriere .dmverriere-prevnext-btn .btn-primary { padding: 10px 20px; font-size: 14px; font-weight: 300 !important; }

/* FIX THEME */
#dmverriere .tab-content > .tab-pane { display: none; }
#dmverriere .tab-content > .active { display: block; }
#dmverriere .modal { display: none; z-index: 1050; position: fixed; top: 0; right: 0; bottom: 0; left: 0; outline: 0; overflow: hidden; }
#dmverriere .modal-dialog { max-width: 600px; position: relative; width: auto; }
#dmverriere .modal-content { position: relative; outline: 0; background-color: #fff; background-clip: padding-box; }
#dmverriere .modal-body { position: relative; padding: 15px; }
#dmverriere .modal-footer { padding: 15px; text-align: right; }
#dmverriere .fade { opacity: 0; transition: opacity .15s linear; }
#dmverriere .fade.in { opacity: 1; }
.modal-open { overflow: hidden; }
.modal-open #dmverriere .modal { overflow-x: hidden; overflow-y: auto; }
#dmverriere .form-control { padding: .5rem 1rem; max-width: 100%; color: #7a7a7a; }