.BrandedOptEnabled .checkboxBranded {
    width: 36px;
    height: 36px;
    background: url(checkbox.png) no-repeat;
    display: block;
    position: absolute;
    margin: -3px 3px .6em 0;
}

.BrandedRblEnabled .radioBranded {
    width: 36px;
    height: 36px;
    background: url(radio.png) no-repeat;
    display: block;
    position: absolute;
    margin: -3px 3px .6em 0;
}

.BrandedRblEnabled .inputtyperbloption .radioBranded {
    margin: auto !important;
    float: none !important;
    position: relative;
}

.selectBranded {
    position: absolute;
    width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(select.gif) no-repeat;
    overflow: hidden;
}

.DesktopMode .BrandedRblEnabled .rbloption {
    /*padding: .25em 0;*/
}
/*.BrandedOptEnabled .cataOption { padding:.25em 0;}*/

.MobileMode .rbloption span {
    width: fit-content !important;
}

.BrandedRblEnabled .radioButtonList .rbloption span, .BrandedRblEnabled div.rb-list:not(.radio-fill) .rbloption span.radioButtonHolder:not(.rbTileHolder),
.BrandedOptEnabled .cataOption span.checkboxholder {
    width: 36px;
    height: 36px;
    float: left;
    margin-left: 0px;
    margin-right: 3px;
}

.BrandedRblEnabled div.radioButtonsInline div.radioButtonList span {
    position: relative;
}

/* BrandedRblEnabled and BrandedOptEnabled classes are located against different elements between desktop and mobile. */
body.rightToLeft .BrandedRblEnabled .radioButtonList .rbloption span, body.rightToLeft .BrandedRblEnabled .rbloption span.radioButtonHolder,
body.rightToLeft .BrandedOptEnabled .cataOption span.checkboxholder, body.rightToLeft.BrandedRblEnabled .radioButtonList .rbloption span, body.rightToLeft.BrandedRblEnabled .rbloption span.radioButtonHolder,
body.rightToLeft.BrandedOptEnabled .cataOption span.checkboxholder {
    float: right;
    margin-left: 6px;
    margin-right: 0px;
}

.rtljustify {
    justify-content: right !important;
    letter-spacing: 0px !important;
}

.MobileMode .checkboxBranded {
    margin: 0 0 0 0;
}

.checkboxSimpleInput {
    width: 36px !important;
    height: 36px !important;
    display: block;
    position: absolute;
    margin: -3px 3px .6em 0;
    background-size: cover !important;
}

.radioSimpleInput {
    width: fit-content;
    height: 36px !important;
    background-size: cover !important;
    justify-content: left;
    align-items: center;
    display: flex;
    white-space:nowrap
}

.MobileMode .radioSimpleInput {
    white-space: normal;
}

.radioButtonHolder:not(.rbTileHolder) {
    display: flex;
}

.radioButtonHolder:not(.rbTileHolder) {
    display: flex;
}

.MobileMode .checkboxSimpleInput, .MobileMode .radioSimpleInput {
    margin: 0 0 36px 0;
}

.checkboxSimpleInput {
    background: url(../../images/WSE_Checkboxes_@1x.png) no-repeat;
}

label[class*="rtljustify"]:before {
    letter-spacing: 0px !important;
    padding-left: 10px !important;
}

input[type="radio"] ~ label.radioSimpleInput:before {
    letter-spacing: 10px;
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f111";
}

input[type="radio"]:checked ~ label.radioSimpleInput:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f192";
}

input[type="radio"] ~ label.spanSimpleInput.radio-heart:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f004";
}

.MobileMode input[type="radio"] ~ label.spanSimpleInput.radio-heart:before {
    letter-spacing: 10px;
}

input[type="radio"]:checked ~ label.spanSimpleInput.radio-heart:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f004";
}

input[type="radio"] ~ label.spanSimpleInput.radio-star:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f005";
}

.MobileMode input[type="radio"] ~ label.spanSimpleInput.radio-star:before {
    letter-spacing: 10px;
}

input[type="radio"]:checked ~ label.spanSimpleInput.radio-star:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

input[type="radio"] ~ label.spanSimpleInput.radio-thumb1:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f164";
}

input[type="radio"] ~ label.spanSimpleInput.radio-thumb2:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f165";
}

input[type="radio"]:checked ~ label.spanSimpleInput.radio-thumb1:before,
input[type="radio"]:checked ~ label.spanSimpleInput.radio-thumb2:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

input[type="radio"] ~ label.spanSimpleInput.na-option:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f05e";
}

.MobileMode input[type="radio"] ~ label.spanSimpleInput.na-option:before {
    letter-spacing: 10px;
}

input[type="radio"]:checked ~ label.spanSimpleInput.na-option:before {
    font-family: "Font Awesome 5 Pro";
    color: #E91C27;
    font-weight: 900;
}

/*smiley faces*/

input[type="radio"] ~ label.spanSimpleInput.radio-smile1:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f556";
}

input[type="radio"] ~ label.spanSimpleInput.radio-smile2:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f119";
}

input[type="radio"] ~ label.spanSimpleInput.radio-smile3:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f11a";
}

input[type="radio"] ~ label.spanSimpleInput.radio-smile4:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f118";
}

input[type="radio"] ~ label.spanSimpleInput.radio-smile5:before {
    font-size: 2em;
    font-family: "Font Awesome 5 Pro";
    content: "\f582";
}

input[type="radio"]:checked ~ label.spanSimpleInput.radio-smile1:before,
input[type="radio"]:checked ~ label.spanSimpleInput.radio-smile2:before,
input[type="radio"]:checked ~ label.spanSimpleInput.radio-smile3:before,
input[type="radio"]:checked ~ label.spanSimpleInput.radio-smile4:before,
input[type="radio"]:checked ~ label.spanSimpleInput.radio-smile5:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.MobileMode .checkboxSimpleInput {
    background: url(../../images/WSE_Checkboxes_@2x.png) no-repeat;
}

.MobileMode .radioSimpleInput, .MobileMode .checkboxSimpleInput, .MobileMode .radioBranded {
    margin-top: 0;
}

.MobileMode .cataList {
    display: table;
}

.MobileMode .cataOption label {
    flex: 1;
    margin-top: -4px;
}

.MobileMode .cataOption label span {
    margin-top: -4px;
}

.inputtyperbloption .radioSimpleInput {
    margin: auto !important;
    float: none !important;
    position: relative;
}

.spanSimpleInput {
    width: 36px !important;
    height: 36px !important;
    display: block;
    background-size: cover;
    margin: auto;
    float: none !important;
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.MobileMode .spanSimpleInput {
    display: flex;
}

span.radio-smile5 {
    background-size: 36px !important;
}

.MobileMode div.rbloption:not(.wse-rb-tile) label:not(.hf) {
    position: relative;
    margin: 0;
}

div.rbloption:not(.wse-rb-tile) label:not([class]) {
    position: relative;
    display: inline-block;
    padding-top: 0.46em;
    max-width: calc(100% - 4em);
}

div.cataOption:not(.wse-tile) {
    min-height: 36px;
}

div.cataOption:not(.wse-tile) > label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-top: 0.4em !important;
    max-width: calc(100% - 4em);
}

.MobileMode .cataOption:not(.wse-tile) > label {
    position: relative;
    margin-left: 0;
    display: inline-block;
    vertical-align: middle;
    padding-top: 0.66em !important;
    max-width: calc(100% - 6em);
}

.cataOption:not(.wse-tile) .Inputtypeother .textinputwrapper,
.rbloption:not(.wse-rb-tile) .Inputtypeother .textinputwrapper {
    position: absolute;
    padding-left: 1.1em;
    padding-top: .5em;
}

.MobileMode .cataOption:not(.wse-tile) .Inputtypeother .textinputwrapper,
.MobileMode .rbloption:not(.wse-rb-tile) .Inputtypeother .textinputwrapper {
    position: relative;
    padding-left: 0;
    padding-top: 0.66em;
    display: block;
}

.rightToLeft .cataOption:not(.wse-tile) .Inputtypeother .textinputwrapper,
.rightToLeft .rbloption:not(.wse-rb-tile) .Inputtypeother .textinputwrapper {
    position: absolute;
    padding-right: 1.1em;
    padding-top: 0.4em;
}

body.IndexPage div.radioButtonList {
    padding-bottom: 2em;
}

select.customCtrlLarge {
    position: relative;
    width: 190px;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 5;
}

.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.fill-radio span.radioButtonHolder {
    margin-right: 0;
}

.MobileMode .rbListContainer .sr-only,
.MobileMode .checkboxholder .sr-only {
    position: absolute !important;
    height: 30px;
    width: 30px;
    clip-path: inherit !important;
    clip: inherit !important;
    z-index: 1;
    opacity: 0;
}

.MobileMode .wse-tile .checkboxholder {
    opacity: 0;
    position: absolute;
}
.DesktopMode .wse-tile .checkboxholder {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}