.op_buttonIcon  {
    font-family: "Font Awesome 5 Free" !important;
    margin-right: 8px;
}
a#op_productButton {
    margin: 0px;
    margin-bottom: 18px;

    background-color: #2fb5d3;
    padding: 12px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 16px;
    color: white !important;
    margin-top: 8px;
    display: inline-block;
    border-radius: 3px;
    text-decoration: none;
}
a#op_productButton:hover {
    opacity: 0.8;    
    text-decoration: none;
}
#op_builder {
    display: none;
    margin-bottom: 18px;
    box-sizing: border-box;
    margin-top: 28px;
    padding: 18px;
}
#op_builder.op_modal {
    position: fixed;
    z-index: 99999;
    width: 680px;
    max-height: 480px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 2px 4px;
    padding: 24px;
    padding-top: 8px;
    max-width: 100%;
    overflow-y: auto;
    margin: 0px;
}
@media (max-width: 480px) {
    #op_builder.op_modal {
        max-height: 100%;
        height: 100%;

    }
}

.opshowprice{
    display: none;
    margin-left: 10px;
    font-weight: bold;
    font-size: 12px;
}
#op_modalBackground {
    display: none;
    position: fixed;
    left:0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 99900;
    background-color: rgba(0,0,0,0.2);
}
#op_builder.op_modal .op_btnCloseModal {
    position: absolute;
    right: 14px;
    top: 8px;
    font-size: 26px;
    color: #2fb5d3;
}
#op_builder.op_modal .op_btnCloseModal:hover {
    opacity: 0.6;
}

#op_builder.op_centerContent {
    text-align: center;
}
#op_builder .pretty {
    text-align: left;
    max-width: 100%;
    display:flex;
}
#op_builder .pretty label,
#op_builder .pretty input[type="checkbox"]+label{
    margin-top: 0px;
}
#op_builder .pretty label {
    margin-bottom: 0px;
    margin-left:10px;
}
#op_builder input[type="number"].op_field,
#op_builder input[type="text"].op_field,
#op_builder input[type="password"].op_field,
#op_builder input[type="url"].op_field,
#op_builder input[type="date"].op_field, 
#op_builder input[type="email"].op_field,
#op_builder select.op_field,
#op_builder textrea.op_field {
    width: 240px;    
    max-width: 100%;
    padding: 6px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0px;
    margin-bottom: 8px;
    outline: none;
}
#op_builder textrea.op_field  {
    height: 80px;
}
.op_tooltipIcon{float:right;cursor: pointer;}
.op_tooltipContent{
    background: rgb(235 235 235);
    border: dashed rgb(206 206 206);
    border-radius: 5px;
    padding: 5px;
    display: none;

}
#op_builder.op_centerContent input[type="number"].op_field,
#op_builder.op_centerContent input[type="text"].op_field,
#op_builder.op_centerContent input[type="password"].op_field,
#op_builder.op_centerContent input[type="url"].op_field,
#op_builder.op_centerContent input[type="date"].op_field, 
#op_builder.op_centerContent input[type="email"].op_field,
#op_builder.op_centerContent select.op_field,
#op_builder.op_centerContent textarea.op_field 
{
    width: 100%;        
}
#op_builder textrea.op_field {
    width: 100%;
}
#op_builder[data-opid] .op_fields {
    transition: max-height 1s ease-in-out, opacity 1s ease-in-out;
    max-height: 100000px;
    opacity: 1;
}

#op_builder[data-opid] #op_nextStepBtn {
    margin-top: 18px;
    outline: none;
}
#op_builder[data-opid].op_modal #op_nextStepBtn {
    margin-top: 28px;   
}
#op_builder[data-opid] .op_fields.op_closed {
    opacity: 0;
    max-height: 0px;
    transition: max-height 0.25s cubic-bezier(0, 1, 0, 1), opacity .25s cubic-bezier(0, 1, 0, 1);
}
#op_builder[data-opid].op_modal .op_fields.op_closed {
    max-height: 100000px;    
}
#op_builder[data-opid] .op_invalid input:not([type="checkbox"]):not([type="radio"]):not([type="color"]){
    color: #ee5253;
    border-color: #ee5253;
}
#op_builder .op_invalid .pretty .state label:before {
    border-color: #ee5253;    
}
#op_builder[data-opid] .op_invalid .op_fieldLabel {
    color: #ee5253;
}
#op_builder[data-opid] .op_invalid .op_buttonField {
    background-color: #ee5253;
    color: white;
}
#op_builder[data-opid]  input[type="color"]{
    height: 32px;
    width: 32px;
    padding: 2px;
    box-sizing: border-box;
}
#op_builder .pretty  input[type="checkbox"] + label {
    margin: 0px;
}
#op_builder .dropzone .dz-message .dz-button {
    background-color: transparent !important;    
}
#op_builder input[type=checkbox] + label,
#op_builder  input[type=radio] + label {
    padding: 0px;
    font-size: 18px;
}
#op_builderMeta table thead th {
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
}
#op_builder label {
    display: block;
    margin-bottom: 12px;
    text-align: left;
}
.op_disabled {
    display:none;
    opacity: 0.4 !important;
    pointer-events: none !important;
}
#op_builder a.op_button{
    background-color: #2fb5d3;
    padding: 12px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 16px;
    line-height: 16px;
    color: white !important;
    margin-top: 8px;
    display: inline-block;
    border-radius: 3px;
    text-decoration: none;
}

@media (max-width: 480px) {
    #op_builder a.op_button{
        width: 100%;
        display: block;
        text-align: center;
    }
}
#op_builder a.op_button:hover {
    opacity: 0.8;
}
#op_builder .op_buttonField .op_icon {
    margin-right: 4px;
}
#op_mainBtn {
    margin: 0px;
    margin-top: 0px;
    clear: both;
}
#op_mainBtn:before,
#op_mainBtn:after{
    display: none !important;
}
#op_mainBtn.op_done {
    opacity: 0.6;
}
#op_mainBtn .op_icon{
    margin-right: 8px;
}
.op_stepTitle {
    font-size: 24px;
    line-height: 26px;
    padding-bottom: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid #ddd;
    color: #777;
}
.op_modal .op_stepTitle {
    margin-bottom: 28px;
    padding-bottom: 18px;
}
#op_builderMeta {    
    clear: both;
    padding-top: 18px;
}
#op_builderMeta ul {
    margin-left: 18px;
}
table.op_optionsTable tr td,
table.op_optionsTable tr th
{
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
table.op_optionsTable tr td.op_optionTableStepTitle {
    font-weight: bold;
}
.text-xs-right .modal{
    text-align: left!important;
}
#op_productSelection td {
    padding: 4px;    
    padding-left: 12px;
    padding-right: 12px;
}
#op_productSelection td,
#op_productSelection th {
    border: 1px solid;
    text-align: left;
}
#op_productSelection .op_totalTd{
    font-weight: bold;
}
#op_productSelection .op_totalTd,
#op_productSelection .op_priceTd,
#op_productSelection .op_valueTd{
    text-align: right;   
}
#op_productSelection .op_labelTd {
    text-align: left;   
}
#op_productSelection .op_totalLabelTd {
    text-align: right;   
}
#op_productSelection table {
    margin: 0px;
}
#op_builder .op_buttonField {
    padding: 8px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 16px;
    border-radius: 3px;
    text-decoration: none !important;
}
#op_productSelection {
    margin-bottom: 12px;
}
#op_builder .op_buttonField.op_selected {
    opacity: 0.8;
}
#op_builder .op_fieldBloc {
    margin-top: 12px;
    margin-bottom: 12px;
    position: relative;
}
#op_builder.op_modal .op_fieldBloc {
    margin-top: 18px;
    margin-bottom: 18px;
}
#op_builder.op_modal .op_fieldBloc:last-child{
    margin-bottom: 0px;
}
#op_builder .op_row .op_fieldBloc {
    display: inline-block;
    margin: 12px;
    margin-top: 0px;
}
#op_builder .op_selectableImage:hover {
    opacity: 0.6;
}
#op_builder .op_imgCheckmark {
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-size: 26px;
    color: #2fb5d3;    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
#op_builder .op_selected .op_imgCheckmark{
    opacity: 1;
}

#op_productSelectionTitle {
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 18px;
}
#op_psproduct_optionsPrice {
    display: inline-block;
    margin-left: 4px;
}

table.op_optionsTable.wdm_options_table  {
    width: auto;
    max-width: 100%;
    margin: 0px;
    margin-top: 18px;
    border: 1px dashed #c8d6e5;
    font-size: 14px;
}
table.op_optionsTable.wdm_options_table  tr {
    border: none;
    height: auto;
}
table td.op_priceTd,
table th.op_priceTd  {
    text-align: right;
}


.product-total {
    vertical-align: top;    
}
.op_field.dz-clickable {
    border: 1px dashed #dcd7ca;
    height: 140px;
    padding: 8px;
}
#op_builder .dropzone .dz-preview{
    margin: 4px;
}
#op_builder .op_fieldBloc[data-wiotype="button"]{
    padding-top: 8px; 
    padding-bottom: 8px;
}
#op_builder .datetimepicker {
    position: absolute;
    background-color: #34495e;
    color: white;
    padding: 10px;
    display: none;
    margin-top: 0px;
    opacity: 1;
    visibility: visible;
    transition: none;
    width: auto;

}
#op_builder.op_modal .op_fields {
        padding-left: 18px;
    padding-right: 18px;
}
#op_builder .pretty.p-switch .state label:after, #op_builder .pretty.p-switch .state label:before {    
    top:1px;
}
.op_selectableImage img {
    max-width: 100%;
    max-height: none!important;
}
#op_builder.op_centerContent .pcr-app.visible {    
    margin: 0 auto;
}
#op_builder .pcr-app.visible {    
    margin-bottom: 22px;
}
#op_builder .pcr-app .pcr-interaction .pcr-result {    
    height: 38px;
}
#op_builder .pretty .state label:after, #op_builder .pretty .state label:before {
    top: 0px;
}
#op_builder .pretty.p-switch .state:before {
    top: 0px;    
}