::-webkit-input-placeholder {
    color: #202020;
}

input, textarea, select {
    -webkit-appearance: none;
}

label.red {
    color: red;
}

.hidden {
    display: none;
}

.login_alert {
    color:#eb3e97;
    font-size: 18px;
    font-weight: 500;
}

.min_margin {
    margin-right: 0.3em;
    margin-bottom: 0.3em;
}

.w5em {
    width: 4em !important;
    margin-right: 1em;
}

.w7em {
    width: 6em !important;
    margin-right: 1em;
}

.w8em {
    width: 7em !important;
    margin-right: 1em;
}

.w9em {
    width: 8em !important;
    margin-right: 1em;
}

.w10em {
    width: 9em !important;
    margin-right: 1em;
}

.w11em {
    width: 10em !important;
    margin-right: 1em;
}

.w12em {
    width: 11em !important;
    margin-right: 1em;
}

.w14em {
    width: 13em !important;
    margin-right: 1em;
}

.w15em {
    width: 14em !important;
    margin-right: 1em;
}

.w17em {
    width: 16em !important;
    margin-right: 1em;
}

.w20em {
    width: 19em !important;
    margin-right: 1em;
}

.w21em {
    width: 20em !important;
    margin-right: 1em;
}

.w22em {
    width: 21em !important;
    margin-right: 1em;
}

.w23em {
    width: 22em !important;
    margin-right: 1em;
}
.w24em {
    width: 23em !important;
    margin-right: 1em;
}

.w25em {
    width: 24em !important;
    margin-right: 1em;
}

.w27em {
    width: 26em !important;
    margin-right: 1em;
}

.w30em {
    width: 29em !important;
    margin-right: 1em;
}

.w33em {
    width: 33em !important;
}

.w32em {
    width: 32em !important;
}

.w40em {
    width: 40em !important;
}

/* dropdown */

.w6emD {
    width: 6em !important;
}

.w9emD {
    width: 9em !important;
}
.w14emD {
    width: 14em !important;
}
.w16emD {
    width: 16em !important;
}
.w17emD {
    width: 17em !important;
}
.w19emD {
    width: 19em !important;
}

.w21emD {
    width: 21em !important;
}

.w23emD {
    width: 23em !important;
}
.w24emD {
    width: 24em !important;
}
.w25emD {
    width: 25em !important;
}
.w26emD {
    width: 26em !important;
}
.w27emD {
    width: 27em !important;
}

.w30emD {
    width: 30em !important;
}

.w33emD {
    width: 33em !important;
}

.mL1em {
    margin-left: 1em !important;
}

.mR1em {
    margin-right: 1em !important;
}

.f2em {
    font-size: 2em !important;
}

.fw,
.fw:before {
    color: #fff !important;
}

.label {
    display: block;
    float: left;
    line-height: 3em;
    padding-right: 1em;
    color: #000;
}

.text {
    display: block;
    float: left;
    width: 9em;
    height: 3em;
    border: 0;
    padding: 0 0.5em;
    font-size: 1em;
    box-sizing: border-box;
    background: #fff;
    color: #000;
}

.text:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.text.error {
    border: 0.1em solid red;
    padding: 0 0.4em;
}

.text:read-only {
    background: #ccc;
    cursor: not-allowed;
}

.textarea{
    width:40em;
    height:3em;
}

.filter {
    display: block;
    float: left;
    width: 19em;
    height: 3em;
    border: 0;
    padding: 0 0.5em;
    font-size: 1em;
    box-sizing: border-box;
    background: #fff;
    color: #000;
}
.business_unit_popup .filter {
    width: 22em;
}

.filter_icon {
    display: block;
    float: left;
    height: 3em;
    background: #fff;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.filter_icon:before {
    display: block;
    float: left;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    font: 1.5em/2em manager_icons;
    color: #000;
    content: "F";
}
.filter_icon.filter_clear {
    background: #ccc;
}
.filter_icon.filter_clear:before {
    font: 2em/1.5em manager_icons;
    content: "C";
}
.filter_icon.filter_clear:hover {
    background: #4c4c4c;
}
.filter_icon.filter_clear:hover:before {
    color: #fff;
}
.filter_icon.filter_clear:active {
    background: #666;
}

.filter:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.filter.error {
    border: 0.1em solid red;
    padding: 0 0.4em;
}

.percent {
    display: block;
    float: left;
    width: 4em;
    height: 3em;
    border: 0;
    padding: 0 0.5em;
    font-size: 1em;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    text-align: right;
}

.percent::-webkit-inner-spin-button,
.percent::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.percent_icon {
    display: block;
    float: left;
    width: 3em;
    height: 3em;
    box-sizing: border-box;
    background: #fff;
}

.percent_icon:before {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    font: 1.1em/2.9em manager_icons;
    color: #000;
    content: "%";
}

.percent:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.percent:read-only {
    background: #ccc;
    cursor: not-allowed;
}

.percent.error {
    border: 0.1em solid red;
    padding: 0 0.4em;
    border-right: 0;
}

.percent.error + .percent_icon {
    border: 0.1em solid red;
    border-left: 0;
}

.number {
    display: block;
    float: left;
    width: 7em;
    height: 3em;
    border: 0;
    padding: 0 0.5em;
    font-size: 1em;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    text-align: right;
    position: relative;
}

.number::-webkit-inner-spin-button,
.number::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.number_stepUp,
.number_stepDown {
    display: block;
    float: left;
    width: 3em;
    height: 3em;
    background: #333;
}

.number_stepUp:before,
.number_stepDown:before {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font: 1.5em/2em manager_icons;
    color: #fff;
}

.number_stepUp:before {
    content: "+";
}

.number_stepDown:before {
    content: "-";
}

.number:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.number:read-only {
    background: #ccc;
    cursor: not-allowed;
}

.number.error {
    border: 0.1em solid red;
    padding: 0 0.4em;
    box-shadow: none !important;
}

.timepicker {
    display: block;
    float: left;
    width: 4em;
    height: 3em;
    border: 0;
    padding:0 0.6em;
    font-size: 1em;
    box-sizing: border-box;
    background: #fff;
    color: #000;
}

.timepicker_label {
    display: block;
    float: left;
    line-height: 3em;
    padding: 0 0.5em;
    color: #000;
}

.timepicker_icon {
    display: block;
    float: left;
    width: 3em;
    height: 3em;
    box-sizing: border-box;
    background: #fff;
    margin-left: 0 !important;
}

.timepicker_icon:before {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font: 1.4em/2.143em manager_icons;
    color: #000;
    content: "t";
}

.datepicker {
    display: block;
    float: left;
    width: 6em;
    height: 3em;
    border: 0;
    padding: 0 0.5em;
    font-size: 1em;
    box-sizing: border-box;
    background: #fff;
    color: #000;
}

.datepicker_label {
    display: block;
    float: left;
    line-height: 3em;
    padding: 0 0.5em;
    color: #000;
}

.datepicker_icon {
    display: block;
    float: left;
    width: 3em;
    height: 3em;
    box-sizing: border-box;
    background: #fff;
}

.datepicker_icon:before {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font: 1.4em/2.143em manager_icons;
    color: #000;
    content: "D";
}

.datepicker:disabled,
.datepicker:disabled + input + .datepicker_icon {
    background: #ccc;
    cursor: not-allowed;
}

.datepicker.error {
    border: 0.1em solid red;
    padding: 0 0.4em;
    border-right: 0;
}

.datepicker.error + input + .datepicker_icon {
    border: 0.1em solid red;
    border-left: 0;
}

#ui-datepicker-div {
    border: 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#ui-datepicker-div .ui-datepicker-close {
    display: none;
}

#ui-datepicker-div .ui-datepicker-current {
    padding: 0;
    background-color: #ccc;
    width: 100%;
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-current:hover {
    background: #00adef;
}

#ui-datepicker-div .ui-datepicker-buttonpane {
    padding: 0;
    border: 0;
}

#ui-datepicker-div .ui-datepicker-title,
#ui-datepicker-div .ui-datepicker-title * {
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-title:hover {
    background-color: #e5e5e5;
}

#ui-datepicker-div .ui-datepicker-month-selector {
    background-color: #fff;
    margin-top: 1em;
}

#ui-datepicker-div .ui-datepicker-month-selector tr {
    margin: 0.1em;
}

#ui-datepicker-div .ui-datepicker-month-selector tr:hover {
    background: transparent;
    color: #000;
}

#ui-datepicker-div .ui-datepicker-month-selector td {
    padding: 0.1em;
    width: 7.2em;
    height: 4em;
}

#ui-datepicker-div .ui-datepicker-month-selector td a {
    background-color: #e5e5e5;
    text-align: center;
    display: block;
    width: 100%;
    line-height: 4em;
    padding: 0;
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-month-selector td a:hover {
    background-color: #ccc;
}

.checkbox {
    display: block;
    float: left;
    width: 3em;
    height: 3em;
    font-size: 1em;
}

.checkbox:before {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font: 2em/1.5em manager_icons;
    color: #000;
    content: "q";
}

.checkbox:disabled:before {
    color: #ccc;
}

.checkbox:checked:before {
    content: "Q";
}

.checkbox_label {
    display: block;
    float: left;
    line-height: 3em;
    padding-right: 0.5em;
    color: #000;
}

.checkbox_label.disabled {
    color: #ccc;
}

.radio {
    display: block;
    float: left;
    width: 3em;
    height: 3em;
    font-size: 1em;
}

.radio:before {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font: 1.5em/2em manager_icons;
    color: #000;
    content: "o";
}

.radio:disabled:before {
    color: #ccc;
}

.radio:checked:before {
    content: "O";
}

.radio_label {
    display: block;
    float: left;
    line-height: 3em;
    padding-right: 0.5em;
    color: #000;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

.radio_label.disabled {
    color: #ccc;
}

.label_button {
    display: inline-block;
    width: 3em;
    height: 3em;
    line-height: 3em;
    background: #ccc;
    color: #000;
    text-align: center;
}

.label_button_disabled {
    display: inline-block;
    width: 3em;
    height: 3em;
    line-height: 3em;
    background: #ccc;
    color: #000;
    text-align: center;
}

.label_button:hover {
    background: #4c4c4c;
    color: #fff;
}

.label_button_disabled:hover {
    background: #4c4c4c;
    color: #fff;
}

input[type=checkbox]:checked + .label_button {
    background: #00adef;
    color: #fff;
}

input[type=checkbox]:checked + .label_button_disabled {
    background: #eb3e97;
    color: #fff;
}

input[type=checkbox]:checked + .label_button:hover {
    background: #008abf;
}

input[type=checkbox]:checked + .label_button_disabled:hover {
    background: #eb3e97;
}

textarea {
    padding: .5em;
    color: #000;
    font-size: 1em;
    resize: none;
    border: 0;
    box-sizing: border-box;
}

.file::-webkit-file-upload-button {
    height: 2.7em;
    padding: 0 1em;
    border: 0;
    box-sizing: border-box;
    font: 1em Roboto, Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #fff;
    background: #666;
    outline: none;
}

.file::-webkit-file-upload-button:hover {
    background: #555;
}

.file::-webkit-file-upload-button:active {
    background: #444;
}

.file.error::-webkit-file-upload-button {
    background: red;
}

.color {
    width: 2em;
    height: 2em;
    background: #fff;
    margin-right: .5em;
}

.color:checked {
    border: 2px solid #000;
}

.colordisplay {
    height: 3em;
    line-height: 3em;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 500;
}

.color_picker_color.nocolor,
.articles_group_color {
    text-align: center;
    vertical-align: top;
}

.color_picker_color.nocolor:before,
.articles_group_color:before {
    content: attr(data-before);
    color: rgba(0, 0, 0, 0.4);
    font-weight: 500;
    line-height: 1.5em;
    font-size: 1.2em;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.color_picker_color:checked {
    border: 2px solid #000;
}

.color_picker_color:hover {
    border: 2px solid #4c4c4c;
    cursor: pointer;
}

.colordisplay-popup {
    position: absolute;
    max-width: 34em;
    background-color: #fff;
    margin-top: 0.6em;
    padding: 0.6em;
    border: 1px solid #000;
    top: 4em;
    margin: 0.5em;
}

.colordisplay-preview {
    width: 100%;
    height: 80px;
    background-color: #333;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    box-sizing: border-box;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.colordisplay-preview div span {
    float: left;
    display: block;
    width: 100%;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0.4;
}

.colordisplay-preview .discount {
    width: 50%;
}

.colordisplay-preview .group_name {
    font-size: 10px;
}

.colordisplay-preview .name {
    text-align: center;
    text-transform: uppercase;
    opacity: 1;
    line-height: 2.3em;
}

.colordisplay-preview .price {
    text-align: right;
    float: right;
    width: 50%;
    font-size: 10px;
}

.colordisplay-preview div {
    width: 150px;
    height: 60px;
    color: black;
    padding: 3px;
    box-sizing: border-box;
}

.choose_button {
    width: auto;
    height: 3em;
    vertical-align: middle; 
    line-height: 1em;
    border: 0;
    font-size: 1.1em;
    box-sizing: border-box;
}