[class^="mageStyle"] input[type="date"]:focus,
[class^="mageStyle"] input[type="datetime"]:focus,
[class^="mageStyle"] input[type="datetime-local"]:focus,
[class^="mageStyle"] input[type="email"]:focus,
[class^="mageStyle"] input[type="month"]:focus,
[class^="mageStyle"] input[type="number"]:focus,
[class^="mageStyle"] input[type="password"]:focus,
[class^="mageStyle"] input[type="search"]:focus,
[class^="mageStyle"] input[type="tel"]:focus,
[class^="mageStyle"] input[type="text"]:focus,
[class^="mageStyle"] input[type="time"]:focus,
[class^="mageStyle"] input[type="url"]:focus,
[class^="mageStyle"] input[type="week"]:focus,
[class^="mageStyle"] [class*="formControl"]:focus{border: none !important;}

[class^="mageStyle"] [class*="formControl"]{padding: 0 var(--default-mp);}
[class^="mageStyle"] [class*="formControl"] {
    width: 100%;color: #222;height: 40px;
    border: 1px solid var(--default-border-color);
    font-size: var(--default-font-size);
    min-width: auto;max-width: inherit;
}
textarea[class*="formControl"]{height: auto;}

[class^="mageStyle"] [class*="mageForm"] label span {width: 100%;margin: 0 0 var(--default-mp-xs) 0 !important;}
[class^="mageStyle"] [class*="mageForm"] label span::before {padding: 0 var(--default-mp-xs);}
[class^="mageStyle"] [class*="mageForm"] button[class*="mage_button"] {height: 40px;}

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

/**********Checkbox Custom*********/
[class^="mageStyle"] .customCheckbox {padding: 0 0 0 30px;position: relative;width: 100%;}
[class^="mageStyle"] .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;
}
[class^="mageStyle"] .customCheckboxLabel {padding: 0 0 10px 0;cursor: pointer;font-size: var(--default-font-size);}
[class^="mageStyle"] .customCheckboxLabel input:checked ~ .customCheckbox::before {border-color: #07C;background: #07C;}
[class^="mageStyle"] .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);
}
[class^="mageStyle"] .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*******/
[class*="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;
}
[class*="groupContent"]>*{
    border-right: 1px solid var(--default-border-color);
}
[class*="groupContent"]>*:last-child{border: none;}
[class*="groupContent"] [class*="formControl"] {
    text-align: center;border: none;
    background-color: var(--default-bg);
    color: var(--theme-color);
}
[class*="groupContent"] textarea[class*="formControl"]{text-align: left;}
[class*="groupContent"] input[type="radio"]{}
[class*="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%;
}
[class*="groupContent"] input[type="radio"]:checked::after{border-color: var(--theme-color);}
[class*="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);
}
[class*="groupContent"] input[type="radio"],
[class*="groupContent"] input[type="radio"]~input:focus{-webkit-box-shadow: none;box-shadow: none;}
[class*="addonGroupContent"] {
    min-width: 50px;cursor: pointer;
    padding: var(--default-mp-xs);
}
.qtyIncDec,
[class*="_qtyIncDec"] {
    max-width: 175px;
}
/**********Responsive*********/
@media only screen and (max-width: 1250px) {
    [class^="mageStyle"] [class*="inputInline"] [class*="inputList"] {max-width: calc(25% - 10px);}
}
@media only screen and (max-width: 1050px) {
    [class^="mageStyle"] [class*="inputInline"] [class*="inputList"] {max-width: calc(33.33% - 10px);}
}
@media only screen and (max-width: 850px) {
    [class^="mageStyle"] [class*="inputInline"] [class*="inputList"] {max-width: calc(50% - 10px);}
}
@media only screen and (max-width: 600px) {
    [class^="mageStyle"] [class*="inputInline"] [class*="inputList"] {max-width: 100%;min-width: 100%;}
}