.sliderExample {
    /* width: 16px; */
    /* position: absolute; */
    /* top: 40px; */
    /* left: 36px; */
}
.sliderExample > div {
    /* margin: 1em 0; */
    /* height: 126px; */
    /* width: 16px; */
    /* border-color: transparent; */
    /* border-radius: 0px; */
    /* border: 0px solid transparent; */
    /* background: transparent; */
}
.vertical-container {
    width: 15%;
    display: inline-block;
}
#swatch {
    width: 0px;
    height: 0px;
    border: 1px solid black;
}
#red .ui-slider-range {
    /* background: #ef2929; */
    /* background: transparent; */
    /* border-radius: 0px; */
}
#red .ui-slider-handle {
    /* border-color: #ef2929; */
    /* border-color: transparent; */
    /* width: 17px; */
    /* height: 17px; */
    /* background: transparent url(../img/VKnob.jpg) 50% 50% no-repeat; */
    /* margin-left: 4px; */
    /* margin-right: 4px; */
    /* cursor: pointer; */
}

.optionsWindow {
    /* position: absolute; */
    /* top: 0px; */
    /* left: 0px; */
    /* float: left; */
    /* background: #263850; */
    /* width: 492px; */
    /* height: 228px; */
}

#title {
    /* position: absolute; */
    /* top: 6px; */
    /* left: 10px; */
    /* z-index: 10000; */
    /* font-size: 14px; */
    /* font-family: Verdana; */
    /* font-weight: normal; */
    /* color: #ffffff; */
}

#topBorderHolder{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

#topLeftBorder{
    position:absolute;
    top: 0px;
    left: 0px;
    background:transparent url(../img/optionsTLB.png) no-repeat;
    width: 9px;
    height: 32px;
    float: left;
}

#topBorder{
    position:absolute;
    top: 0px;
    left: 9px;
    background:transparent url(../img/optionsTB.png) repeat-x;
    width: 100%;
    height: 32px;
    float: left;
}

#topRightBorder{
    position:absolute;
    top: 0px;
    right: -9px;
    background:transparent url(../img/optionsTRB.png) no-repeat;
    width: 11px;
    height: 32px;
    float: left;
}

#leftBorder{
    position: absolute;
    top: 32px;
    left: 0px;
    background: transparent url(../img/optionsLB.png) repeat-y;
    width: 9px;
    height: 100%;
    float: left;
}

#rightBorder{
    position: absolute;
    top: 32px;
    right: -9px;
    background: transparent url(../img/optionsRB.png) repeat-y;
    width: 11px;
    height: 100%;
    float: left;
}

#optionsMidHolder {
    /* position: absolute; */
    /* top: 32px; */
    /* left: 9px; */
    /* width: 100%; */
    /* height: 100%; */
}

#bottomBorderHolder{
    position: absolute;
    bottom: -32px;
    width: 100%;
    height: 34px;
}

#bottomLeftBorder{
    position:absolute;
    bottom: 0px;
    left: 0px;
    background:transparent url(../img/optionsBLB.png) no-repeat;
    width: 9px;
    height: 34px;
    float: left;
}

#bottomBorder{
    position: absolute;
    bottom: 0px;
    left: 9px;
    background:transparent url(../img/optionsBB.png) repeat-x;
    width: 100%;
    height: 34px;
    float: left;
}

#bottomRightBorder{
    position:absolute;
    bottom: 0px;
    right: -9px;
    background:transparent url(../img/optionsBRB.png) no-repeat;
    width: 11px;
    height: 34px;
    float: left;
}

.optionPanel {
    /* position: relative; */
    /* top: 0px; */
    /* left: 0px; */
    /* float: left; */
    /* border-radius: 0px; */
    /* border: 1px solid #a4b5c9; */
    /* background: #263850; */
    /* font-size: 10px; */
    /* margin: 2px; */
}

.optionPanelHeader {
    /* position: relative; */
    /* width: 100%; */
    /* height: 25px; */
    /* line-height: 25px; */
    /* background: #a4b5c9; */
    /* font-size: 10px; */
    /* font-family: Verdana; */
    /* font-weight: bold; */
    /* text-align: center; */
}

/*.optionPanel ul{
    text-align: left;
    font-size: 11px; 
    font-family: Verdana;
    font-weight: bold;
    color: #ffffff;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    line-height: 3;
    padding-left: 10px;
}*/

.optionPanel span{
    width: 200px;
}

input[type="submit"].optionsBtn {
    /* position: absolute; */
    /* height: 33px; */
    /* width: 112px; */
    /* background: transparent url(../img/BlueButN.jpg) no-repeat left top; */
    /* border: none; */
    /* -webkit-transition: background 0.2s ease-out; */
    /* cursor: pointer; */
    /* outline: 0; */
    /* margin: 0px; */
    /* padding: 0px; */
    /* bottom: -32px; */
    /* color: #ffffff; */
    /* font-family: Verdana; */
    /* font-size: 16px; */
    /* padding: 0px 5px 5px 5px; */
    /* float: left; */
}

input[type="submit"].optionsBtn:hover {
    /* position: absolute; */
    /* height: 33px; */
    /* width: 112px; */
    /* background:transparent url("../img/BlueButO.jpg") no-repeat left top;  */
    /* border: none transparent; */
    /* cursor: pointer; */
    /* outline: 0;    */
    /* margin: 0px; */
    /* padding: 0px; */
    /* bottom: -32px; */
    /* color:#ffffff; */
    /* font-family: Verdana; */
    /* font-size: 16px; */
    /* padding: 0px 5px 5px 5px; */
    /* float: left; */
}

input[type="submit"].optionsBtn:active {
    /* position: absolute; */
    /* height: 33px; */
    /* width: 112px; */
    /* background:transparent url("../img/BlueButP.jpg") no-repeat left top;  */
    /* border: none; */
    /* cursor: pointer; */
    /* outline: 0;    */
    /* margin: 0px; */
    /* padding: 0px; */
    /* bottom: -32px; */
    /* color:#ffffff; */
    /* font-family: Verdana; */
    /* font-size: 16px; */
    /* padding: 0px 5px 5px 5px; */
    /* float: left; */
}

input[type="submit"].optionsBtn:disabled {
    /* position: absolute; */
    /* height: 33px; */
    /* width: 112px; */
    /* background:transparent url("../img/BlueButD.jpg") no-repeat left top;  */
    /* border: none; */
    /* cursor: pointer; */
    /* outline: 0; */
    /* margin: 0px; */
    /* padding: 0px; */
    /* bottom: -32px; */
    /* color:#ffffff; */
    /* font-family: Verdana; */
    /* font-size: 16px; */
    /* padding: 0px 5px 5px 5px; */
    /* float: left; */
}

#optionsSaveBtn{
    /* left: 84px; */
}

#optionsCancelBtn{
    /* left: 194px; */
}

#optionsReturnBtn{
    /* right:-5px; */
}

.blueSfareChoiceHolder {
    /* margin: 10px; */
    /* height: 145px; */
}

.blueSfareChoiceBgr {
    /* position: absolute; */
    /* right: 0px; */
    /* top: 25px; */
    /* width: 38px; */
    /* height: 165px; */
    /* background: transparent url(../img/optionsRightColumn.png) right top; */
    /* background-repeat: repeat-y; */
}

.blueSfareChoiceItemHolder {
    /* margin: 0px 0px 0px 0px; */
    /* height: 28px; */
    /* vertical-align: bottom; */
    /* padding: 0px 0px 0px 0px; */
    /* width: 100%; */
}

.blueSfareChoice{
    cursor: pointer;
    color:#ffffff;
    font-family: Tahoma;
    font-size: 12px;
    font-weight: bold;
    line-height: 28px;
    height: 28px;
    vertical-align: middle;
    display: block;
    width: 100%;
}

input[type=radio   ]:not(old){
    width: 18px;
    margin    : 0;
    padding   : 0;
    font-size : 1em;
    opacity   : 0;
    height: 18px;
    position: relative;
    float: right;
    top: -22px;
    z-index: 10000;
    cursor: pointer;
}

input[type=radio   ]:not(old) + label{
    display      : inline-block;
    /* margin-left  : -2em; */
    /* line-height: 28px; */
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    right: -20px;
    top: -24px;
    position: relative;
    vertical-align: middle;
    float: right;
    text-align: -webkit-center;
}

input[type=radio   ]:not(old) + label > span{
    display          : inline-block;
    width: 22px;
    height: 22px;
    margin: 0px 0px 0px 0px;
    border: 0.5px solid rgb(0,0,0,0.75);
    border-radius: 12px;
    background       : rgb(66,79,95);
    background-image :    -moz-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image :     -ms-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image :      -o-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image : -webkit-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image :         linear-gradient(rgb(66,79,95),rgb(66,79,95));
    vertical-align   : bottom;
    -webkit-box-shadow: inset 2px 2px 2px 2px rgba(30,38,49,0.65);
    -moz-box-shadow: inset 2px 2px 2px 2px rgba(30,38,49,0.65);
    box-shadow: inset 2px 2px 2px 2px rgba(30,38,49,0.65);
}

input[type=radio   ]:not(old):checked + label > span{
    background-image :    -moz-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image :     -ms-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image :      -o-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image : -webkit-linear-gradient(rgb(66,79,95),rgb(66,79,95));
    background-image :         linear-gradient(rgb(66,79,95),rgb(66,79,95));
}

input[type=radio]:not(old):checked +  label > span > span{
    display          : block;
    width: 18px;
    height: 18px;
    margin: 1px 1px 1px 1px;
    /*  border: 1px solid rgb(115,153,77);
      border-radius: 10px;
      background       : rgb(153,204,102);
      background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
      background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
      background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
      background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
      background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));*/
    border: 1px solid rgb(3,113,211);
    border-radius: 10px;
    background       : rgb(1,179,249);
    background-image :    -moz-linear-gradient(rgb(2,255,255),rgb(1,179,249));
    background-image :     -ms-linear-gradient(rgb(2,255,255),rgb(1,179,249));
    background-image :      -o-linear-gradient(rgb(2,255,255),rgb(1,179,249));
    background-image : -webkit-linear-gradient(rgb(2,255,255),rgb(1,179,249));
    background-image :         linear-gradient(rgb(2,255,255),rgb(1,179,249));
    /*  -webkit-box-shadow: inset 3px 1px 2px 2px rgba(0,187,255,0.25);
      -moz-box-shadow: inset 3px 1px 2px 2px rgba(0,187,255,0.25);
      box-shadow: inset 3px 1px 2px 2px rgba(0,187,255,0.25);*/
    -webkit-box-shadow:  
        0 -1px 1px #666, /*top external shadow*/ 
        inset -2px -1px 4px 3px rgba(4,114,203,0.8), /*bottom internal shadow*/ 
        inset 1px 1px 2px 1px rgba(255,255,255,1);
    -moz-box-shadow:  
        0 -1px 1px #666, /*top external shadow*/ 
        inset -2px -1px 4px 3px rgba(4,114,203,0.8), /*bottom internal shadow*/ 
        inset 1px 1px 2px 1px rgba(255,255,255,1);
    box-shadow:  
        0 -1px 1px #666, /*top external shadow*/ 
        inset -2px -1px 4px 3px rgba(4,114,203,0.8), /*bottom internal shadow*/ 
        inset 1px 1px 2px 1px rgba(255,255,255,1);

}

input[type=radio]:focus +  label > span> span,
input[type=radio]:hover +  label > span > span{
    display          : block;
    width: 18px;
    height: 18px;
    margin: 1px 1px 1px 1px;
    border: 1px solid rgb(202,132,51);
    border-radius: 10px;
    background       : rgb(202,132,51);
    background-image :    -moz-linear-gradient(rgb(229,150,58),rgb(202,132,51));
    background-image :     -ms-linear-gradient(rgb(229,150,58),rgb(202,132,51));
    background-image :      -o-linear-gradient(rgb(229,150,58),rgb(202,132,51));
    background-image : -webkit-linear-gradient(rgb(229,150,58),rgb(202,132,51));
    background-image :         linear-gradient(rgb(229,150,58),rgb(202,132,51));


    -webkit-box-shadow: 0 -1px 1px #666, inset 2px 2px 2px 2px rgba(202,132,51,0.85);
    -moz-box-shadow: 0 -1px 1px #666,inset 2px 2px 2px 2px rgba(202,132,51,0.85);
    box-shadow: 0 -1px 1px #666, inset 2px 2px 2px 2px rgba(202,132,51,0.85);
}

span.clearFix{
    width: 100%;
    content: 'dfds';
    margin-left: auto;
    margin-right: auto;
}

.line{
    top: 50%;
    width: 198px;
    line-height: 1px;
    margin: 0px 10px 0px 10px;
    height: 1px;
    /* border: 0.5px solid #a4b5c9; */
    background: #a4b5c9;
    position: relative;
    /* left: -15px; */
}

span.optionPanelHeaderSubTitle{
    width: 220px;
    line-height: 7px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: left;
    color: #ffffff;
    font-weight: normal;
    font-family: Tahoma;
    font-size: 11px;
}

.optionCheckboxHolder {
    /* width: 198px; */
    /* height: 32px; */
    /* float: left; */
    /* vertical-align: -webkit-baseline-middle; */
    /* vertical-align: middle; */
    /* margin-bottom: 20px; */
    /* margin-left: 10px; */
    /* margin-right: 10px; */
    /* margin-top: 20px; */
    /* z-index: 10000000; */
    /* position: relative; */
}

.optionCheckboxLabel {
    /* width: 140px; */
    /* height: 32px; */
    /* line-height: 16px; */
    /* color: #ffffff; */
    /* font-family: Tahoma; */
    /* font-size: 12px; */
    /* overflow-wrap: break-word; */
    /* float: left; */
}

.onoffswitch {
    position: relative; width: 50px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    float: left;
    top: 4px;
    z-index: 30000;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
    height: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 9px; 
    color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 5px;
    background-color: #34A7C1; color: #FFFFFF;
    /* width: 50px; */
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 5px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
    /* width: 50px; */
    padding-left: 0px;
}
.onoffswitch-switch {
    display: block; width: 20px; margin: 0px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px;
    position: absolute; top: 0; bottom: 0; right: 26px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

.optionPanel span.onoffswitch-switch{
    width: 20px;
    height: 20px;
}

.optionPanel span.onoffswitch-inner{
    width: 200%;
    height: 20px;
    /* margin-left: 100%; */
}
/*span.clearFix{
   position: absolute;
    right: 0;
    width: 29px;
    height: 27px;
    line-height: 27px;
    padding: 3px;
    color: #FFF;
    text-align: center;
    background:transparent url("../img/checkbox_off.jpg") no-repeat left top; 
}

span.clearFix:after{
    content: "no";
    position: absolute;
    right: 0;
    width: 29px;
    height: 27px;
    line-height: 27px;
    padding: 3px;
    color: #FFF;
}

input.optionRadio{
    position: absolute;
    right: 0;
    margin: 0;
    width: 27px;
    height: 27px;
    hide the radio button
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
}

input[type="radio"].optionRadio + span.clearFix{ the span element that immediately follow the radio button 
        visibility: hidden; temporarily hide the "YES" label
        background:transparent url("../img/checkbox_on.jpg") no-repeat left top; 
}
 
input[type="radio"].optionRadio + span.clearFix:after{
        content: "yes";
}
 
input[type="radio"].optionRadio:checked + span.clearFix{
        visibility: visible; show the "YES" label only if the radio button is checked
}

input[type="radio"].optionRadio:hover + span.clearFix{
        visibility: visible; show the "YES" label only if the radio button is checked
        background:transparent url("../img/checkbox_off_roll.jpg") no-repeat left top; 
}

input[type="radio"].optionRadio:hover + span.clearFix:after{
        visibility: hidden;
        background:transparent url("../img/checkbox_on_roll.jpg") no-repeat left top; 
}*/

/*input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(../img/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(../img/check_radio_sheet.png) -19px top no-repeat;
}

input[type="checkbox"]:hover + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    background:url(../img/check_radio_sheet.png) -19px top no-repeat;
}

input[type="checkbox"]: + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    background:url(../img/check_radio_sheet.png) -19px top no-repeat;
}*/

:root .css3-radios label,
:root .css3-radios input[type="radio"] + span,
:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes label,
:root .css3-checkboxes input[type="checkbox"] + span,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}

:root .css3-radios,
:root .css3-checkboxes
{
    position: relative;
}

:root .css3-radios label *,
:root .css3-checkboxes label *
{
    cursor: pointer;
}

:root .css3-radios input[type="radio"],
:root .css3-checkboxes input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}

:root .css3-radios input[type="radio"] + span,
:root .css3-checkboxes input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}

:root .css3-radios label:hover span::before,
:root .css3-checkboxes label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}

:root .css3-radios label:hover span,
:root .css3-checkboxes label:hover span
{
    color: #000;
}

:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;

    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;

    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

:root .css3-radios input[type="radio"]:checked + span::before,
:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    color: #666;
}

:root .css3-radios input[type="radio"]:disabled + span,
:root .css3-checkboxes input[type="checkbox"]:disabled + span
{
    cursor: default;

    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}

:root .css3-checkboxes input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

:root .css3-radios input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 24px;
}

:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}

span.optionsSlideHeader{
    width: 190px;
    line-height: 7px;
    position: absolute;
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* float: left; */
    color: #ffffff;
    font-weight: normal;
    font-family: Tahoma;
    font-size: 11px;
    margin-top: -20px;
    text-align: -webkit-center;
}
@media (min-width: 768px){
    .modal-dialog {
        width: 495px !important;
    }
}