@font-face {
    font-family: 'montserratblack';
    src: url('fonts/montserrat-black-webfont.woff2') format('woff2'), url('fonts/montserrat-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratbold';
    src: url('fonts/montserrat-bold-webfont.woff2') format('woff2'), url('fonts/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'), url('fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.wizard,
.tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard a,
.tabcontrol a {
    outline: 0;
}

.wizard ul,
.tabcontrol ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
    font-family: montserratregular;
}

.wizard ul>li,
.tabcontrol ul>li {
    display: block;
    padding: 0;
}


/* Accessibility */

.wizard>.steps .current-info,
.tabcontrol>.steps .current-info {
    position: absolute;
    left: -999em;
}

.wizard>.content>.title,
.tabcontrol>.content>.title {
    position: absolute;
    left: -999em;
}


/*
    Wizard
*/

.wizard>.steps {
    position: relative;
    display: block;
    width: 100%;
}

.wizard.vertical>.steps {
    display: inline;
    float: left;
    width: 30%;
    box-sizing: border-box;
    line-height: 100%;
}

.wizard>.steps .number {
    font-family: montserratbold;
    font-size: 16px;
    color: #828282;
    background: #fff;
    width: 30px;
    height: 30px;
    line-height: 34px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin-right: 5px;
}

.wizard>.steps>ul>li {
    width: 25%;
}

.wizard>.steps>ul>li,
.wizard>.actions>ul>li {
    float: left;
    line-height: 100%;
}

.wizard.vertical>.steps>ul>li {
    float: none;
    width: 100%;
}

.wizard>.steps a,
.wizard>.steps a:hover,
.wizard>.steps a:active {
    display: block;
    width: auto;
    margin: 0 7px 7px;
    padding: 13px;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 16px;
}

.wizard>.steps .disabled a,
.wizard>.steps .disabled a:hover,
.wizard>.steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default;
}

.wizard>.steps .current a,
.wizard>.steps .current a:hover,
.wizard>.steps .current a:active {
    background: #2184be;
    color: #fff;
    cursor: default;
    font-family: montserratbold;
}

.wizard>.steps .done a,
.wizard>.steps .done a:hover,
.wizard>.steps .done a:active {
    background: #9dc8e2;
    color: #fff;
}

.wizard>.steps .error a,
.wizard>.steps .error a:hover,
.wizard>.steps .error a:active {
    background: #ff3111;
    color: #fff;
}

.wizard>.content {
    /* background: #fff; */
    border: 1px solid #ddd;
    display: block;
    margin: 10px;
    min-height: 624px;
    overflow: hidden;
    position: relative;
    width: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    line-height: 100%;
}

.wizard.vertical>.content {
    display: inline;
    float: left;
    margin: 0 2.5% 10px 2.5%;
    width: 65%;
    font-family: montserratregular;
    box-sizing: border-box;
}

.wizard>.content>.body {
    float: left;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    top: 0;
    line-height: 100%;
}

.wizard>.content>.body ul {
    list-style: disc !important;
}

.wizard>.content>.body ul>li {
    display: list-item;
    list-style-position: inside;
}

.wizard>.content>.body>iframe {
    border: 0 none;
    width: 100%;
    height: 100%;
}

.wizard>.content>.body input {
    display: block;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
}

.wizard>.content>.body input[type="checkbox"] {
    display: inline-block;
}

.wizard>.content>.body input[type=number]::-webkit-inner-spin-button,
.wizard>.content>.body input[type=number]::-webkit-outer-spin-button,
.wizard>.content>.body input[type=date]::-webkit-inner-spin-button,
.wizard>.content>.body input[type=date]::-webkit-outer-spin-button {
    opacity: 1;
}

.wizard>.content>.body input.error {
    background: rgb(251, 227, 228);
    border: 1px solid #fbc2c4;
    color: #8a1f11;
}

.wizard>.content>.body label {
    display: inline-block;
    margin-bottom: 6px;
}

.wizard>.content>.body label.error {
    color: #8a1f11;
    display: inline-block;
    margin-left: 16px;
}

.wizard>.actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
}

.wizard.vertical>.actions {
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%;
}

.wizard>.actions>ul {
    display: inline-block;
    line-height: 100%;
    text-align: right;
}

.wizard>.actions>ul>li {
    margin: 0 14px;
}

.wizard.vertical>.actions>ul>li {
    margin: 0 0 0 14px;
}

.wizard>.actions a,
.wizard>.actions a:hover,
.wizard>.actions a:active {
    background: #2184be;
    color: #fff;
    display: block;
    padding: 14px 15px 11px;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: montserratbold;
    font-size: 16px;
    line-height: 18px;
}

.wizard>.actions .disabled a,
.wizard>.actions .disabled a:hover,
.wizard>.actions .disabled a:active {
    background: #eee;
    color: #aaa;
}

.wizard>.loading {}

.wizard>.loading .spinner {}


/*
    Tabcontrol
*/

.tabcontrol>.steps {
    position: relative;
    display: block;
    width: 100%;
}

.tabcontrol>.steps>ul {
    position: relative;
    margin: 6px 0 0 0;
    top: 1px;
    z-index: 1;
}

.tabcontrol>.steps>ul>li {
    float: left;
    margin: 5px 2px 0 0;
    padding: 1px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tabcontrol>.steps>ul>li:hover {
    background: #edecec;
    border: 1px solid #bbb;
    padding: 0;
}

.tabcontrol>.steps>ul>li.current {
    background: #fff;
    border: 1px solid #bbb;
    border-bottom: 0 none;
    padding: 0 0 1px 0;
    margin-top: 0;
}

.tabcontrol>.steps>ul>li>a {
    color: #5f5f5f;
    display: inline-block;
    border: 0 none;
    margin: 0;
    padding: 10px 30px;
    text-decoration: none;
}

.tabcontrol>.steps>ul>li>a:hover {
    text-decoration: none;
}

.tabcontrol>.steps>ul>li.current>a {
    padding: 15px 30px 10px 30px;
}

.tabcontrol>.content {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 624px;
    overflow: hidden;
    border-top: 1px solid #bbb;
    padding-top: 20px;
}

.tabcontrol>.content>.body {
    float: left;
    position: absolute;
    width: 95%;
    height: 95%;
    padding: 2.5%;
}

.tabcontrol>.content>.body ul {
    list-style: disc !important;
}

.tabcontrol>.content>.body ul>li {
    display: list-item;
}

#ck_clickcollect {
    background-color: #fff;
    padding: 28px;
    margin: 14px 5px;
    border-radius: 10px;
    background-image: url(clickcollect.png);
    background-size: 420px;
    background-repeat: no-repeat;
    background-position-x: 15px;
    background-position-y: calc(100% - 10px);
    width: calc(100% - 10px);
    box-sizing: border-box;
    line-height: 100%;
}

#ck_clickcollect .actions {
    padding: 0;
    background: none;
    line-height: 100%;
}

#ck_clickcollect .steps:before {
    content: "";
    display: block;
    width: calc(100% - 20px);
    height: 200px;
    background: url("express_command.svg") center center no-repeat;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

#ck_clickcollect .steps li:first-child a {
    background: #f55142;
}

#ck_clickcollect .steps li.current:first-child a {
    background: #f5a342;
}


/*
#ck_clickcollect .steps li:nth-child(2) a {
    background: #61beea;
}
#ck_clickcollect .steps li.current:nth-child(2) a {
    background: #02a7c1;
}
*/

.logo-clickcollect {
    padding: 10px;
    box-sizing: border-box;
    margin: 0 10px 0px 10px;
    /* display: flex; */
    border-radius: 3px;
    border-bottom: 1px solid #ddd;
    /* z-index: 99999; */
    line-height: 100%;
}

.logo-clickcollect ul {
    display: flex;
    width: 100%;
}

.logo-clickcollect ul li {
    display: inline-flex;
    margin-right: 15px;
    line-height: 15px;
    font-size: 12px;
    letter-spacing: -0.06em;
    font-family: montserratbold;
    color: #666;
    border-left: 1px solid #ddd;
    padding-left: 17px;
    position: relative;
    z-index: 1;
}

.logo-clickcollect ul li.active {
    color: #31af91;
}

.logo-clickcollect ul li.cancel {
    color: #c93636;
}

.logo-clickcollect ul li:first-child {
    padding-left: 0px;
    border: none;
}

.logo-clickcollect ul li:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.logo-clickcollect ul li.active:before {
    background: url("ico_clickcollectValid.svg") center center no-repeat;
}

.logo-clickcollect ul li.cancel:before {
    background: url("ico_clickcollectCancel.svg") center center no-repeat;
}

.logo-clickcollect ul li img {
    height: 30px;
    display: inline-flex;
    margin-right: 5px;
    margin-left: 5px;
}

.logo-clickcollect ul li.cancel img {
    filter: hue-rotate(190deg);
}

#ck_clickcollect .body {
    background-repeat: no-repeat;
    background-position: bottom left;
}

#ck_clickcollect h2,
#ck_clickcollect h3,
#ck_clickcollect h4,
#ck_clickcollect h5,
#ck_clickcollect h6 {
    font-family: montserratbold;
    line-height: 120%;
}

#ck_clickcollect-p-0 {
    background-image: url(bgClickcollect-info.png);
    background-size: 496px;
}

#ck_clickcollect-p-1 {}

#ck_clickcollect-p-2 {}

#ck_clickcollect-p-3 {
    background-image: url(bgClickcollect-command.png);
    background-size: 730px;
    background-position: bottom right !important;
}

.boxcontent_clickcollect {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 622px;
    color: #555;
    font-family: montserratregular;
    line-height: 100%;
    box-sizing: border-box;
}

.boxcontent_clickcollect p{
    margin-bottom: 10px;
}

.boxcontent_clickcollect li{
    margin-bottom: 5px;
}

.ccinfoAccueil h2,
.ccinfoAccueil h3,
.ccinfoAccueil h4,
.ccinfoAccueil h5,
.ccinfoAccueil h6 {
    color: #ff6500;
    padding-bottom: 6px;
}


#ck_clickcollect h2{font-size: 22px !important;}
#ck_clickcollect h3{font-size: 19px !important;}
#ck_clickcollect h4{font-size:17px !important;}
#ck_clickcollect h5{font-size:15px !important;}
#ck_clickcollect h6 {font-size:14px !important;}

#ck_clickcollect .actions li a[href='#finish'] {
    position: relative;
    border: none;
    box-shadow: 0 0 0 0 rgba(0, 162, 38, 0.7);
    background-color: rgb(0, 162, 38);
    cursor: pointer;
    -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

#ck_clickcollect .actions li a[href='#finish']:hover {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
    background-color: rgb(10, 200, 54);
}

@-webkit-keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

@-ms-keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

#ck_clickcollect .actions li a.closeclickcollect{
    background-color: rgb(255, 149, 14);
}

#ck_clickcollect .actions li a.closeclickcollect:hover{
    background-color: rgb(245, 81, 66);
}

.ccinfoAccueil {
    position: absolute;
    right: 20px;
    top: 80px;
    width: calc(100% - 300px);
    max-height: 260px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 10px;
    flex-wrap: wrap;
    overflow: auto;
    font-size: 13px;
    line-height: 20px;
    font-size: 13px;
    box-sizing: border-box;
}

.ccinfoCommande {
    margin: 20px auto 0;
    max-width: 80%;
    width: 100%;
    max-height: 260px;
    padding: 10px;
    flex-wrap: wrap;
    overflow: auto;
    font-size: 13px;
    line-height: 160%;
    border: 1px solid #00a226;
    box-shadow: 1px 3px 4px #ddd;
    background: #ffffffee;
}

.ccinfoCommande h2,
.ccinfoCommande h3,
.ccinfoCommande h4,
.ccinfoCommande h5,
.ccinfoCommande h6 {
    color: #00a226;
    padding-bottom: 6px;
}

#clickcollectValid {
    margin: 20px auto 0;
    max-width: 80%;
    line-height: 100%;
    font-size: 14px;
}

#contentclickcollectValid {
    background: #7cbb00;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-family: montserratbold;
    -webkit-animation: pulse 2.25s forwards cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse 2.25s forwards cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse 2.25s forwards cubic-bezier(0.66, 0, 0, 1);
    animation: pulse 2.25s forwards cubic-bezier(0.66, 0, 0, 1);
    box-shadow: 0 0 0 0 rgb(124, 187, 0);
}

#contentclickcollectError {
    background: #F00;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-family: montserratbold;
}

@media only screen and (max-width:840px) {
    .wizard.vertical>.steps {
        float: none;
        display: inline-block;
        width: 100%;
    }
    .wizard.vertical>.content {
        float: initial;
        margin: 0 8px 8px;
        width: calc(100% - 16px);
        display: block;
    }
}

@media only screen and (max-width:600px) {
    .logo-clickcollect ul li {
        font-size: 0;
    }
    .logo-clickcollect ul li:hover {
        font-size: 13px;
        cursor: pointer;
    }

    .ccinfoAccueil{
        width: calc(100% - 40px);
        background: #fffffff5;
    }
}

.ccproductlist {
    margin: 10px;
    text-align: left;
    border: 1px solid #2184be;
    max-height: 420px;
    overflow: auto;
    line-height: 100%;
    box-sizing: border-box;
}

.cctableproduct {
    width: 100%;
    border: none;
    border-collapse: collapse;
    line-height: 100%;
}

.cctableproduct th {
    font-family: montserratblack;
    color: #2184be;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    font-size: 16px;
    line-height: 26px;
    padding: 8px;
    background: #edf5f9;
    border-bottom: 1px solid #2184be;
}

.cctableproduct td {
    padding: 8px;
    line-height: 100%;
}

.cctableproduct tr:nth-child(even) {
    background: #f6f6f6;
}

.cctableproduct tr:nth-child(odd) {
    background: #ddd;
}

.ccnomproduct {
    font-size: 15px;
    text-transform: uppercase;
    line-height: 100%;
}

.ccdescproduct {
    font-size: 12px;
    font-style: italic;
    color: #888;
    line-height: 16px;
}

.ccpriceproduct {
    font-family: montserratbold;
    color: #f60;
    line-height: 100%;
    font-size: 15px;
}

.ccproductpanier {
    margin: 10px 10px 0px auto;
    display: block;
    width: 255px;
    text-align: right;
    padding: 5px 10px;
    background: #f55142;
    border-radius: 5px;
    color: #fff;
    font-family: montserratbold;
    text-transform: uppercase;
    font-size: 13px;
    box-sizing: border-box;
}

.ccnbproductpanier {
    font-family: montserratblack;
    font-size: 17px;
    margin-right: 6px;
    line-height: 100%;
}

.ccinfopricepanier {
    text-align: right;
    margin-right: 11px;
    font-style: italic;
    color: #303030;
    line-height: 20px;
    white-space: pre-line;
    font-size: 13px;
    letter-spacing: -0.02em;
    line-height: 20px;
}


/*FORM CLIENT*/

.ccformboxclient {
    height: calc(100% - 70px);
    overflow: auto;
    border: 1px solid #2184be;
    margin: 10px 10px;
    line-height: 100%;
    box-sizing: border-box;
}

.lineccformclient {
    padding: 4px 10px;
    line-height: 20px;
    box-sizing: border-box;
    font-size: 16px;
}

.ccdescbox {
    font-family: montserratbold;
    background: #f60;
    text-align: center;
    padding: 10px;
    color: #fff;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 100%;
}

.lineccformclient label {
    margin-bottom: 0 !important;
    font-size: 12px;
    line-height: 18px;
    font-family: montserratbold;
    color: #2184be;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.ccformclient {
    width: 100%;
    text-align: left !important;
    padding: 0px 4px;
    color: #333;
    line-height: 24px!important;
    border: 1px solid #ccc;
}

.ccformclient.date {
    width: initial;
}

textarea.ccformclient {
    min-height: 80px;
}

.messagecc {
    background: #F00;
    color: #FFF;
    display: inline-block;
    vertical-align: top;
    padding: 6px 12px;
    border-radius: 5px;
    letter-spacing: -0.02em;
    line-height:25px;
    font-size:16px;
}

.ccrequired {
    text-transform: none;
    font-family: montserratregular;
    color: #F00;
    line-height: 100%;
}

.quantiteccprod {
    color: #333;
}

.quantiteccprod.ccerror,
.ccformclient.ccerror {
    color: #f00;
    border: 1px solid #F00 !important;
}

.ccrgpd {
    padding: 10px 20px;
    color: #444;
    font-size: 13px;
    line-height: 100%;
}

.ccrgpd.ccerror {
    color: #F00;
}

.inputccrgpd {
    width: 17px;
    height: 17px;
    margin-right: 5px;
    vertical-align: text-bottom;
}

.ccrgpd a {
    color: #444;
    border-bottom: 1px dashed #AAA;
}


/*BUTTON*/

#clickcollectfront {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    line-height: 100%;
    z-index: 99999;
}

#clickcollectcontent {
    max-width: 1140px;
    max-height: 80%;
    margin: auto;
    top: calc(50% + 50px);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    line-height: 100%;
}

#clickcollectbutton {
    position: fixed;
    background-color: #ff6262;
    padding: 15px 10px 15px 50px;
    display: block;
    z-index: 9999999;
    cursor: pointer;
    font-family: montserratbold;
    color: #FFF;
    border-radius: 5px;
    background-image: url(/data/plugins/cekome-click-collect/cc_cart.svg);
    box-shadow: 2px 2px 6px #00000088;
    background-size: 34px;
    background-repeat: no-repeat;
    background-position: 6px center;
    font-size: 16px;
    line-height: 18px;
}
#clickcollectbutton.active,
#clickcollectbutton.active:hover{
    background-image: url(/data/plugins/cekome-click-collect/ico_clickcollectCancel.svg);
    background-color: #1968c2;
}


#clickcollectbutton:hover {
    background-color: #F00;
}

#clickcollectbutton.bg {
    bottom: 10px;
    left: 10px;
}

#clickcollectbutton.bd {
    bottom: 10px;
    right: 10px;
}

#clickcollectbutton.hg {
    top: 10px;
    left: 10px;
}

#clickcollectbutton.hd {
    top: 10px;
    right: 10px;
}
.datepicker > .datepicker_inner_container > .datepicker_timelist > div.timelist_item{
    color:#666;
}