/*
	CSS - Skype.com
	FORM : Textfield
*/



/* Remove default styles from iOS & Webkit fields
----------------------------------------------------------------------------------------------------*/

input, select, textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -webkit-font-smoothing: subpixel-antialiased;
    border-radius: 0;
    cursor: pointer;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[disabled] {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}



/* Text Styling within Forms
----------------------------------------------------------------------------------------------------*/


.fieldRow + h2 {
    padding-top: 18px;
}

h2 + .fieldRow.checkbox {
    margin-top: 24px;
}



/* Form Elements
----------------------------------------------------------------------------------------------------*/


/* Field Row */

.fieldRow {
    position: relative;
    padding: 0 10px 23px;
    margin-top: -2px;
    max-width: 260px;
    clear: both;
    z-index: 5;
}

    .fieldRow.active {
        z-index: 10;
    }

    .fieldRow:last-child {
        padding-bottom: 0;
    }

    .fieldRow.select {
        min-height: 63px;
    }

    .fieldRow.correctInput,
    .fieldRow.error {
        padding-right: 35px;
        max-width: 235px;
    }

    .fieldRow.select.correctInput,
    .fieldRow.select.error {
        padding-right: 10px;
        max-width: 260px;
    }

    .fieldRow.shortInput.correctInput,
    .fieldRow.shortInput.error {
        padding-right: 10px;
    }


/* Label */

.fieldRow label {
    width: 100%;
    display: block;
    float: none;
    padding-bottom: 8px;
    padding-right: 20px;
    margin-left: -10px;
}


/* Input */

.fieldRow input {
    color: #333534;
    position: relative;
    width: 100%;
    height: 31px;
    line-height: 20px;
    padding: 1px 9px;
    border: 1px solid #00AFF0;
    margin: 1px -10px;
    font-size: 16px;
    background: transparent;
    outline: none;
    cursor: text;
    /*z-index: 2;*/
}

    .shortInput input {
        width: 120px;
    }

    .fieldRow input:focus,
    .fieldRow input:hover {
        margin: 0 -11px;
        border: 2px solid #00AFF0;
    }

    .error input:focus,
    .error input:hover {
        margin: 0 -11px;
        border: 2px solid #E81123;
    }
    
    .correctInput input:focus,
    .correctInput input:hover {
        margin: 0 -11px;
        border: 2px solid #00AFF0;
    }


/* Select */

*html .error select {
    color: #ff0000;
}

select[disabled=disabled] {
    cursor: not-allowed;
}

select.customSelectElement {
    position: absolute;
    float: left;
    left: 10px;
    width: 100%;
    height: 36px;
    line-height: 33px;
    padding: 0 9px 2px;
    margin: 1px -10px;
    font-size: 13px;
    z-index: 10;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: none;
    opacity: 0;
}

    .rtl select.customSelectElement {
        float: right;
    }

span.styledSelect {
    border: solid 1px #00aff0;
    cursor: pointer;
    float: left;
    font-size: 16px;
    height: 33px;
    left: 0;
    line-height: 32px;
    margin: 1px;
    margin-left: -10px;
    margin-right: 0;
    overflow: hidden;
    padding-right: 18px;
    position: relative;
    text-indent: 10px;
    top: auto;
    width: 100%;
    word-break: break-all;
    -webkit-font-smoothing: subpixel-antialiased;
}

    .fieldRow .styledSelect.active,
    .fieldRow .styledSelect.hover {
        margin: 0;
        margin-left: -11px;
        border: solid 2px #00aff0;
    }

    .rtl span.styledSelect {
        float: right;
        right: 0;
        background-position: -31px -273px;
    }


    /* Select - Short */

    select.short {
        width: 120px;
    }

    .short .customSelectElement {
        width: 140px;
    }

    span.styledSelect.short {
        width: 120px;
    }


    /* Select - Inline */

    .fieldRow.inline select {
        width: auto;
    }

    span.styledSelect.inline {
        display: inline-block;
        border: none;
        font-size: 16px;
        margin-left: -11px;
        margin-top: 0;
        padding-right: 35px;
        border: 2px solid #ffffff;
        color: #0078CA;
    }

    .fieldRow .styledSelect.inline.active,
    .fieldRow .styledSelect.inline.hover {
        margin: 0;
        margin-left: -11px;
    }

    .rtl span.styledSelect.inline {
        padding-right: 0px;
        padding-left: 35px;
    }

    .fieldRow.inline.hover span.styledSelect {
        text-decoration: underline;
        border: none;
        margin: 3px;
    }

    .fieldRow.inline.active span.styledSelect {
        margin: 0;
        margin-left: -11px;
        border: solid 2px #00aff0;
    }


    /* Select - Logo & Flag */

    span.hasLogo, span.hasFlag {
        text-indent: 58px;
    }

        .hasLogo .logo,
        .hasFlag .flag {
            display: block;
            position: absolute;
            left: 8px;
            top: 4px;
            width: 37px;
            height: 23px;
            background-color: #e4eef2;
            border: 1px solid #abc6d1;
        }

        .rtl .hasLogo .logo {
            right: 12px;
        }

        .fieldRow.error .styledSelect.active,
        .fieldRow.error .styledSelect.hover {
            border: solid 2px #e81123;
        }

        .fieldRow.disabled .hasLogo .logo,
        .fieldRow.disabled .hasFlag .flag {
            filter: alpha(opacity=25);
            -moz-opacity: 0.25;
            -khtml-opacity: 0.25;
            opacity: 0.25;
        }


    /* Select - Dual Input */

    .dualInput.short select,
    .dualInput.short span.styledSelect {
        width: 100%;
        top: 0;
    }

        .rtl .dualInput select {
            float: none;
        }

    .dualInput.short span.styledSelect {
        margin-left: 0;
        padding-right: 0;
    }

        .dualInput.short span.styledSelect.active,
        .dualInput.short span.styledSelect.hover {
            margin-left: -1px;
        }

    .dualInput .first,
    .dualInput .second {
        float: left;
        margin-left: -10px;
        padding-right: 2px;
        position: relative;
        width: 50% !important;
    }

    .dualInput .second {
        left: 16px;
        margin-left: 0;
    }

        .rtl .dualInput .second {
            right: 16px;
            margin-right: 0;
        }


    /* Select - Datepicker */

    .datePicker.short select,
    .datePicker.short span.styledSelect {
        width: 100%;
        top: 0;
    }

        .rtl .datePicker select {
            float: none;
        }

    .datePicker.short span.styledSelect {
        margin-left: 0;
        padding-right: 0;
    }

        .datePicker.short span.styledSelect.active,
        .datePicker.short span.styledSelect.hover {
            margin-left: -1px;
        }

    .datePicker .day,
    .datePicker .month,
    .datePicker .year {
        float: left;
        margin-left: -10px;
        padding-right: 2px;
        position: relative;
        width: 30% !important;
    }

    .datePicker .month {
        left: 8px;
        margin-left: 0;
        width: 40% !important;
    }

    .datePicker .year {
        left: 16px;
        margin-left: 0;
        width: 30% !important;
    }

        .rtl .datePicker .month {
            right: 8px;
            margin-right: 0;
        }

        .rtl .datePicker .year {
            right: 16px;
            margin-right: 0;
        }


    /* Select - States */

    .error span.styledSelect {
        border: 1px solid #e81123;
    }

    .disabled span.styledSelect {
        border: 1px solid #e4eef2;
        color: #abc6d1;
    }

    .short.disabled span.styledSelect {
        border: 1px solid #e4eef2;
        color: #abc6d1;
    }


/* Prefix - Textfields */

.fieldRow.prefixInput .prefix {
    background-color: #ECF3F6;
    border-right: 4px solid #FFFFFF;
    cursor: default;
    font-size: 16px;
    font-weight: 600;
    height: 33px;
    left: 1px;
    line-height: 33px;
    min-width: 50px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 28px;
    cursor: text;
}

    .fieldRow.prefixInput {
        padding-left: 60px;
        max-width: 210px;
    }

    .fieldRow.prefixInput label {
        margin-left: -60px;
    }

    .fieldRow.prefixInput input {
        margin-left: -60px;
        padding-left: 59px;
    }

    .fieldRow.prefixInput input:focus,
    .fieldRow.prefixInput input:hover {
        margin: 0 -61px;
    }

    .fieldRow.prefixInput.correctInput,
    .fieldRow.prefixInput.error {
        max-width: 185px;
    }

    .fieldRow.prefixInput.disabled input,
    .fieldRow.prefixInput.disabled input:focus,
    .fieldRow.prefixInput.disabled input:hover {
       margin: 1px -60px;
    }

    .fieldRow.prefixInput.error .prefix {
        background-color: #fef2f3;
    }

    .fieldRow.prefixInput.disabled .prefix {
        cursor: not-allowed;
        background-color: #FFFFFF;
        color: #ABC6D1;
        border-right: 1px solid #E4EEF2;
    }


/* Icons - Textfields */

.fieldRow .icon {
    position: absolute;
    width: 0;
    height: 33px;
    right: 1px;
    top: 28px;
    background-image: url("../assets/images/ui-elements/ui-elements-textfield.png");
    background-repeat: no-repeat;
    background-position: right 30px;
    -webkit-background-size: 60px 198px;
    -o-background-size: 60px 198px;
    -moz-background-size: 60px 198px;
    background-size: 60px 198px;
    cursor: text;
    pointer-events: none;
}

    .no-svg .fieldRow .icon { 
        background-image:  url('../assets/images/ui-elements/ui-elements-textfield.png');
    }

    .svg .fieldRow .icon { 
        background-image:  url('../assets/images/ui-elements/ui-elements-textfield.svg');
    }

        .rtl .fieldRow .icon {
            background-position: left 99px;
            left: 1px;
        }

    .fieldRow.shortInput .icon {
        left: 91px;
        display: none;
    }

        .rtl .fieldRow.shortInput .icon {
            right: 91px;
            display: none;
        }

    .fieldRow.error .icon,
    .fieldRow.correctInput .icon {
        display: inline;
    }


/* Icons - Dropdowns */

.fieldRow.select .icon {
    position: absolute;
    width: 70px;
    height: 33px;
    top: 28px;
    right: 1px;
    background-image: url("../assets/images/ui-elements/ui-elements-dropdown.png");
    background-repeat: no-repeat;
    background-position: right -33px;
    -webkit-background-size: 70px 264px;
    -o-background-size: 70px 264px;
    -moz-background-size: 70px 264px;
    background-size: 70px 264px;
}

    .no-svg .fieldRow.select .icon { 
        background-image:  url('../assets/images/ui-elements/ui-elements-dropdown.png');
    }

    .svg .fieldRow.select .icon { 
        background-image:  url('../assets/images/ui-elements/ui-elements-dropdown.svg');
    }

        .rtl .fieldRow.select .icon {
            left: 1px;
        }

    .fieldRow.select.error .icon {
        background-position: right -99px;
    }

        .rtl .fieldRow.select.error .icon {
            background-position: left -231px;
        }

    .fieldRow.select.disabled .icon {
        background-position: right -66px;
    }

        .rtl .fieldRow.select.disabled .icon {
            background-position: left -198px;
        }

    .fieldRow.select.shortInput .icon {
        left: 69px;
        display: block;
    }

        .rtl .fieldRow.select.shortInput .icon {
            right: 69px;
            display: block;
        }

    .fieldRow.select.inline .icon {
        background-position: right 0px;
    }

        .rtl .fieldRow.select.inline .icon {
            background-position: left 132px;
        }

    .fieldRow.select.dualInput .icon,
    .fieldRow.select.datePicker .icon {
        top: 2px;
    }


/* State */

form .error input {
    border: 1px solid #E81123;
}

form .correctInput input,
form .error input {
    padding-right: 34px;
}

form .shortInput.correctInput input,
form .shortInput.error input {
    width: 95px;
}

form .disabled input,
form .disabled input:focus,
form .disabled input:hover {
   cursor: not-allowed;
   color: #abc6d1;
   -webkit-text-fill-color: #abc6d1;
   border: 1px solid #e4eef2 !important;
   margin: 1px -10px;
}

form .correctInput .icon {
    background-position: right -33px;
    width: 48px;
}

form .shortInput.correctInput .icon {
    background-position: right -33px;
    width: 48px;
}

form .error .icon {
    background-position: right -66px;
    width: 48px;
}


/* Tooltip Message - Long */

.fieldRow .message {
    display: none;
    position: absolute;
    width: 100%;
    left: 100%;
    top: 26px;
    padding-left: 30px;
    line-height: 18px;
    zoom: 1;
    z-index: 2;
    overflow: hidden;
}

    .rtl .fieldRow .message {
        right: 100%;
    }

    .fieldRow .message strong,
    .fieldRow .message span,
    .shortInputsWrapper .message strong {
        display: block;
        padding-bottom: 6px;
    }

    .fieldRow .message .content span:last-child {
        padding-bottom: 0;
    }

.fieldRow .message .content {
    padding: 9px 20px 10px;
}

    .fieldRow.tip .message.tip .content {
        /*background-color: #daeff9;*/
        background-color: rgba(217, 243, 253, 0.975);
    }

    .fieldRow.error .message.error .content {
        /*background-color: #fadadc;*/
        background-color: rgba(251, 220, 222, 0.975);
    }

.fieldRow .arrow {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 100%;
    top: 25px;
    margin-left: 10px;
    background-image: url("../assets/images/ui-elements/misc-elements-sprite.png");
    opacity: 0.975;
    filter: alpha(opacity=97.5);
    -moz-opacity: 0.975;
    -khtml-opacity: 0.975;
    opacity: 0.975;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-background-size: 60px 440px;
    -o-background-size: 60px 440px;
    -moz-background-size: 60px 440px;
    background-size: 60px 440px;

}

    .no-svg .fieldRow .arrow { 
        background-image:  url('../assets/images/ui-elements/misc-elements-sprite.png');
    }

    .svg .fieldRow .arrow { 
        background-image:  url('../assets/images/ui-elements/misc-elements-sprite.svg');
    }

    .fieldRow.tip.active .arrow,
    .fieldRow.tip.active .message.tip,
    .fieldRow.error.active .arrow,
    .fieldRow.error.active .message.error {
        display: block;
    }

    .fieldRow.tip .arrow {
        background-position: -32px -115px;
    }

    .fieldRow.error .arrow {
        background-position: -32px -85px;
    }

    .rtl .fieldRow.tip .arrow {
        background-position: -2px -115px;
        right: 9px;
    }

    .rtl .fieldRow.error .arrow {
        background-position: -2px -85px;
        right: 9px;
    }


/* Tooltip Message - Short */

.fieldRow.shortInput .message {
    left: 140px;
}

    .rtl .fieldRow.shortInput .message {
        right: 140px;
    }

.fieldRow.shortInput.error .arrow,
.fieldRow.shortInput.tip .arrow {
    left: 140px;
}

    .rtl .fieldRow.shortInput.tip .arrow,
    .rtl .fieldRow.shortInput.error .arrow {
        right: 140px;
    }

    .fieldRow.select.shortInput.error .arrow {
        background-position: -32px -85px;
    }

    .rtl .fieldRow.select.shortInput.error .arrow {
        background-position: -2px -85px;
        
    }

.fieldRow.noClear {
    clear: none;
}

.fieldRow.noRightMargin {
    margin-right: 0;
}

.fieldRow.shortInput.tip .arrow {
    background-position: -32px -115px;
    
}

.fieldRow.combinedError {
    display: none;
}

.fieldRow.active.combinedError {
    display: block;
}



/* Text Area
----------------------------------------------------------------------------------------------------*/

.fieldRow textarea {
    border: 1px solid #00AFF0;
    color: #333534;
    cursor: text;
    overflow: hidden;
    position: relative;
    resize: none;
    width: 100%;
    transition: height 0.15s;
    -moz-transition: height 0.15s; /* Firefox 4 */
    -webkit-transition: height 0.15s; /* Safari and Chrome */
    -o-transition: height 0.15s; /* Opera */
}

    .fieldRow.areaInput.error {
        max-width: 270px;
        padding-right: 10px;
    }

    .textAreaCommon {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        margin: 1px -10px;
        min-height: 40px;
        padding: 7px 9px 10px;
    }

    .textAreaHidden {
        border: 1px solid #ffffff;
        display: none;
        width: 99%;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
    }

    .textAreaCounter {
        left: -10px;
        position: relative;
        top: 5px;
    }

    .fieldRow textarea:focus,
    .fieldRow textarea:hover {
        margin: 0 -11px;
        border: 2px solid #00AFF0;
    }

    .fieldRow.error textarea {
        border: 1px solid #E81123;
    }

    .fieldRow.error textarea:focus,
    .fieldRow.error textarea:hover {
        margin: 0 -11px;
        border: 2px solid #E81123;
    }





/* Checkbox
----------------------------------------------------------------------------------------------------*/

.checkbox {
    position: relative;
}

.fieldRow.checkbox {
    padding: 0 0 14px;
    margin-top: 0;
    /*max-width: 290px;*/
    max-width: none;
}

    .checkbox input,
    .error .checkbox input {
        position: absolute;
        top: 0;
        left: -2000px;
        vertical-align: top;
    }

        .rtl .checkbox input,
        .rtl .error .checkbox input {
            right: -2000px;
            /*display: none;*/ /* make opera work properly (horizontal scroll issue for rtl) */
            display: block\0/; /* ie8 and above */
        }

        *:first-child+html.rtl .checkbox input {
            display: none !important;
        }
        
    .checkbox label {
        cursor: pointer;
        width: auto;
        font-size: 16px;
        margin-left: 0;
        padding-bottom: 0;
        padding-left: 36px;
        padding-right: 0;
        overflow: hidden;
    }

        .rtl .checkbox label {
            padding-right: 35px;
        }

    .checkbox label.disabled {
        cursor: not-allowed;
        color: #BDD1DC;
    }

        .checkbox label .icon {
            cursor: pointer;
            position: absolute;
            top: 0;
            left: -1px;
            float: left;
            width: 25px;
            height: 25px;
            margin: 0 0 0 0;
            background-image: url("../assets/images/ui-elements/ui-elements-radio&checkbox.png");
            background-repeat: no-repeat;
            background-position: 0 -241px;
            background-size: 120px 510px;
        }

            .no-svg .checkbox label .icon { 
                background-image:  url('../assets/images/ui-elements/ui-elements-radio&checkbox.png');
            }

            .svg .checkbox label .icon { 
                background-image:  url('../assets/images/ui-elements/ui-elements-radio&checkbox.svg');
            }

        .rtl .checkbox label .icon {
            background-position: 0 -241px;
            float: right;
            left: 0;
            right: -1px;
        }        

        .checkbox label.checked .icon {
            background-position: -30px -241px;
        }

        .checkbox.error label .icon {
            background-position: 0 -371px;
        }

        .checkbox.error.hover label .icon,
        .checkbox.error.focus label .icon {
            background-position: 0px -403px;
        }

        .checkbox label.disabled .icon {
            background-position: 0 -265px;
        }

        .checkbox.hover label .icon,
        .checkbox.focus label .icon {
            background-position: -0px -276px;
        }

        .checkbox.hover label.checked .icon,
        .checkbox.focus label.checked .icon {
            background-position: -30px -276px;
        }

        .checkbox label.disabled .icon,
        .checkbox.hover label.disabled .icon {
            background-position: -60px -241px;
        }

        .checkbox.checked label.disabled .icon {
            background-position: -90px -241px;
        }



        .checkbox label .text {
            font-weight: 400;
            font-size: 16px;
            line-height: 20px;
        }

            .checkbox label .text p {
                margin-bottom: 0;
                line-height: 18px;
            }

            .checkbox label .text .title {
                display: block;
                padding: 3px 0 7px;
                font-weight: 600;
                font-size: 16px;
            }

            .checkbox label .text .subtitle {
                font-size: 14px;
            }

            .checkbox .inlineError p {
                line-height: 18px;
            }

            .checkbox .inlineError .title {
                font-weight: 600;
                font-size: 14px;
                margin-bottom: 0;
            }

            .checkbox .inlineError .subtitle {
                font-size: 14px;
            }


        .checkbox .inlineError {
            display: none;
        }

        .checkbox.error .inlineError {
            color: #e81123;
            display: block;
            margin-top: 6px;
            margin-bottom: 6px;
        }




/* TABLET
----------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 959px) {

}



/* MOBILE
----------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 600px) {


    /* Text styling within forms
    ----------------------------------------*/
    
    form h2 {
        font-weight: 600;
    }

    .fieldRow + h2 {
        padding-top: 19px;
    }

    h2 + .fieldRow {
        margin-top: 23px;
    }

    h2 + .fieldRow.checkbox {
        margin-top: 25px;
    }


    /* Textfields & Selects
    ----------------------------------------*/

    .fieldRow {
        max-width: none;
    }

    .fieldRow.correctInput,
    .fieldRow.error,
    .fieldRow.select.correctInput,
    .fieldRow.select.error {
        max-width: none;
    }

    .fieldRow .message {
        width: auto;
        position: relative;
        left: 0;
        top: 10px;
        clear: both;
        margin-top: 1px;
        margin-bottom: 10px;
        margin-left: -10px;
        padding: 0;
        background: none !important;
        color: #e81123;
    }

        .rtl .fieldRow .message,
        .rtl .shortInputsWrapper .message {
            right: 0;
        }

        .fieldRow .message strong {
            padding-bottom: 0;
        }

    .fieldRow .message .content {
        padding: 0;
        background-color: transparent !important;
    }

    .fieldRow .tip,
    .tip .arrow,
    .error .arrow {
        display: none !important;
    }

    .fieldRow.shortInput .message,
    .fieldRow.shortInput.error .arrow {
         left: 0; 
    }

    .rtl .fieldRow.shortInput .message,
    .rtl .fieldRow.shortInput.error .arrow {
         right: 0; 
    }

        .fieldRow.error .message.error {
            padding-left: 0;
            padding-top: 0;
            width: auto;
            display: block;
            padding: 0;
            width: 100%;
            visibility: visible;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            -khtml-opacity: 1;
            opacity: 1;
        }

            .fieldRow.select span.error.message {
                display: none;
            }

            .fieldRow.select.error span.error.message {
                display: block;
            }

        .fieldRow.shortInput.error .arrow {
            background-position: -177px -147px;
        }

        .fieldRow.shortInput.tip .arrow {
            background-position: -177px -166px;
        }

    .fieldRow.select.shortInput .message {
        left: auto;
    }

    .fieldRow.prefixInput,
    .fieldRow.prefixInput.correctInput,
    .fieldRow.prefixInput.error {
        max-width: none;
    }

    .fieldRow.prefixInput.error .message.error {
        margin-left: -60px;
    }


    /* Text Area
    ----------------------------------------*/

    .fieldRow.areaInput.error {
        max-width: none;
    }


    /* Checkbox
    ----------------------------------------*/

    .checkbox {

    }

        .fieldRow.checkbox {
            max-width: none;
            padding: 0 0 14px;
        }

        form .checkbox input {
            position: absolute;
            left: -2000px;
            margin: 0;
            padding: 0;
        }

            .rtl form .checkbox input {
                right: -2000px;
            }

        .checkbox label {
            font-size: 18px;
            line-height: 21px;
        }

            .checkbox label .text {
                font-size: 14px;
                line-height: 16px;
            }

            .checkbox label .text .title {
                padding-top: 1px;
            }

        .checkbox label .icon {
            background-position: 0px -312px; 
        }

            .checkbox.hover label .icon,
            .checkbox.focus label .icon {
                background-position: -0px -343px;
            }

        .checkbox label.checked .icon {
            background-position: -30px -312px; 
        }

            .checkbox.hover label.checked .icon,
            .checkbox.focus label.checked .icon {
                background-position: -30px -343px;
            }

        .checkbox.error label .icon {
            background-position: 0 -436px;
        }

            .checkbox.error.hover label .icon,
            .checkbox.error.focus label .icon {
                background-position: 0px -464px;
            }

        .checkbox label.disabled .icon {
            background-position: 0 -265px;
        }

            .checkbox label.disabled .icon,
            .checkbox.hover label.disabled .icon {
                background-position: -60px -312px;
            }

        .checkbox.checked label.disabled .icon {
            background-position: -90px -312px;
        }

}
