.mpStyle input,
.mpStyle optgroup,
.mpStyle select,
.mpStyle textarea,
.mpStyle button{font-family: inherit;}

.mpStyle form{margin: 0;padding: 0;line-height: 1.25;}
/***************************/
.mpStyle .formControl::placeholder{color: #555;}
.mpStyle .formControl {
    width: 100%;color: #222;height: auto;
    border: 1px solid var(--default-border-color);
    font-size: var(--default-font-size);
    min-width: auto;max-width: inherit;
    padding: var(--default-mp-xs);
    line-height: 1;
}
.mpStyle textarea.formControl{height: auto;}

.mpStyle .mageForm label {margin: var(--default-mp-xs) 0 0 0;text-transform: capitalize;}
.mpStyle .mageForm label span {width: 100%;margin: 0 0 var(--default-mp-xs) 0;}
.mpStyle .mageForm label span::before {padding: 0 var(--default-mp-xs);}
.mpStyle .mageForm button.mage_button {height: 40px;}

/****************/
.mpStyle .inputList {margin: var(--default-mp) 0 0 0;position: relative;}
.mpStyle .inputList textarea.formControl { height: auto;}
/******* group form*********/
.mpStyle .inputGroup {width: 100%;padding: 0 0 var(--default-mp-xs) 0;}
.mpStyle .inputGroup label {width: auto;padding: 0 var(--default-mp) 0 0;}
.mpStyle .inputGroup label input[type="checkbox"] {margin: 0 var(--default-mp-xs);}
/******* input as a select*********/
.mpStyle .inputList .mage_input_select .formControl:focus {border-color: var(--default-border-color);}
.mpStyle div.mage_input_select {position: relative;}
.mpStyle ul.mage_input_select_list {
    display: none;z-index: 111;overflow: auto;max-height: 250px;height: auto;width: 100%;margin: 1px 0 0 0 ;padding: 10px;
    position: absolute;left: 0;top: 100%;right: 0;
    border: 1px solid var(--default-border-color);
    background-color: var(--default-bg);
}
.mpStyle ul.mage_input_select_list li {padding: 10px;cursor: pointer;border-bottom: 1px solid var(--default-border-color);margin: 0;list-style-type: none;}
.mpStyle ul.mage_input_select_list li:last-child {border-bottom: none;}
.mpStyle ul.mage_input_select_list li:hover {background-color: #777;color: #FFF;}
/*****Form inline*******/
.mpStyle .inputInline {padding: 15px;margin: 15px 0 0 0;}
.mpStyle .inputInline .inputList {max-width: calc(20% - 10px);width: 100%;margin: 0 5px;}
/********Form Horizontal**************/
.mpStyle .inputHorizontal .mageForm {max-width: 500px;width: 100%;}
/*****Form Qty inc dec*******/

/**********Checkbox Custom*********/
.mpStyle .customCheckbox {padding: 0 0 0 30px;position: relative;width: 100%;}
.mpStyle .customCheckbox::before {
    content: "";position: absolute;
    left: 0;top: 0;height: 20px;width: 20px;
    background-color: #FFF;
    border: 2px rgba(0, 0, 0, 0.5) solid;
    border-radius: 2px;
}
.mpStyle .customCheckboxLabel {padding: 0 0 10px 0;cursor: pointer;font-size: var(--default-font-size);}
.mpStyle .customCheckboxLabel input:checked ~ .customCheckbox::before {border-color: #07C;background: #07C;}
.mpStyle .customCheckboxLabel input:focus ~ .customCheckbox::before {
    border-color: #07C;outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.3); box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.3);
}
.mpStyle .customCheckboxLabel input:checked ~ .customCheckbox::after {
    content: "";position: absolute;
    left: 2px;top: 4px;height: 8px;width: 16px;
    border: 2px solid #FFF;border-top: none;border-right: none;
    z-index: 11;background-color: transparent;
    -webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);
}
/*********Group Content*******/
.mpStyle .groupContent {
    font-size: var(--default-font-size);
    border: 1px solid var(--default-border-color);
    background-color: var(--theme-color);
    color: var(--theme-alternate-color);
    text-align: center;
    position: relative;
}
.mpStyle .groupContent *{line-height: 1;}
.mpStyle .groupContent>*{
    border-right: 1px solid var(--default-border-color);
}
.mpStyle .groupContent>*:last-child{border: none;}
.mpStyle .groupContent .formControl {
    text-align: center;border: none;
    background-color: var(--default-bg);
    color: var(--theme-color);
    height: 100%;
}
.mpStyle .groupContent textarea.formControl{text-align: left;}
.mpStyle .groupContent input[type="radio"]{}
.mpStyle .groupContent input[type="radio"]::after{
    margin: 10px;
    position: absolute;content: '';width: 20px;height: 20px;left: 0;top: 0;
    border: 1px solid var(--default-border-color);border-radius: 50%;
}
.mpStyle .groupContent input[type="radio"]:checked::after{border-color: var(--theme-color);}
.mpStyle .groupContent input[type="radio"]:checked::before{
    margin: 10px;
    position: absolute;content: '';width: 14px;height: 14px;left: 3px;top: 3px;
    border: 1px solid var(--theme-color);border-radius: 50%;
    background-color: var(--theme-color);
}
.mpStyle .groupContent input[type="radio"],
.mpStyle .groupContent input[type="radio"]~input:focus{-webkit-box-shadow: none;box-shadow: none;}
.mpStyle .addonGroupContent {
    min-width: 40px;cursor: pointer;
    padding: var(--default-mp-xs);
}
.mpStyle .qtyIncDec{max-width: 175px;}
/**********Responsive*********/
@media only screen and (max-width: 1250px) {
    .mpStyle .inputInline .inputList {max-width: calc(25% - 10px);}
}
@media only screen and (max-width: 1050px) {
    .mpStyle .inputInline .inputList {max-width: calc(33.33% - 10px);}
}
@media only screen and (max-width: 850px) {
    .mpStyle .inputInline .inputList {max-width: calc(50% - 10px);}
}
@media only screen and (max-width: 600px) {
    .mpStyle .inputInline .inputList {max-width: 100%;min-width: 100%;}
}