/* Layout helpers ———————————-*/ .ui-helper-hidden {

display: none;

} .ui-helper-hidden-accessible {

border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

} .ui-helper-reset {

margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;

} .ui-helper-clearfix:before, .ui-helper-clearfix:after {

content: "";
display: table;
border-collapse: collapse;

} .ui-helper-clearfix:after {

clear: both;

} .ui-helper-zfix {

width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter:Alpha(Opacity=0); /* support: IE8 */

}

.ui-front {

z-index: 100;

}

/* Interaction Cues ———————————-*/ .ui-state-disabled {

cursor: default !important;
pointer-events: none;

}

/* Icons ———————————-*/ .ui-icon {

display: inline-block;
vertical-align: middle;
margin-top: -.25em;
position: relative;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;

}

.ui-widget-icon-block {

left: 50%;
margin-left: -8px;
display: block;

}

/* Misc visuals ———————————-*/

/* Overlays */ .ui-widget-overlay {

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

} .ui-button {

padding: .4em 1em;
display: inline-block;
position: relative;
line-height: normal;
margin-right: .1em;
cursor: pointer;
vertical-align: middle;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

/* Support: IE <= 11 */
overflow: visible;

}

.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active {

text-decoration: none;

}

/* to make room for the icon, a width needs to be set here */ .ui-button-icon-only {

width: 2em;
box-sizing: border-box;
text-indent: -9999px;
white-space: nowrap;

}

/* no icon support for input elements */ input.ui-button.ui-button-icon-only {

text-indent: 0;

}

/* button icon element(s) */ .ui-button-icon-only .ui-icon {

position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;

}

.ui-button.ui-icon-notext .ui-icon {

padding: 0;
width: 2.1em;
height: 2.1em;
text-indent: -9999px;
white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {

width: auto;
height: auto;
text-indent: 0;
white-space: normal;
padding: .4em 1em;

}

/* workarounds */ /* Support: Firefox 5 - 40 */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner {

border: 0;
padding: 0;

} .ui-controlgroup {

vertical-align: middle;
display: inline-block;

} .ui-controlgroup > .ui-controlgroup-item {

float: left;
margin-left: 0;
margin-right: 0;

} .ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {

z-index: 9999;

} .ui-controlgroup-vertical > .ui-controlgroup-item {

display: block;
float: none;
width: 100%;
margin-top: 0;
margin-bottom: 0;
text-align: left;

} .ui-controlgroup-vertical .ui-controlgroup-item {

box-sizing: border-box;

} .ui-controlgroup .ui-controlgroup-label {

padding: .4em 1em;

} .ui-controlgroup .ui-controlgroup-label span {

font-size: 80%;

} .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {

border-left: none;

} .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {

border-top: none;

} .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {

border-right: none;

} .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {

border-bottom: none;

}

/* Spinner specific style fixes */ .ui-controlgroup-vertical .ui-spinner-input {

/* Support: IE8 only, Android < 4.4 only */
width: 75%;
width: calc( 100% - 2.4em );

} .ui-controlgroup-vertical .ui-spinner .ui-spinner-up {

border-top-style: solid;

}

.ui-checkboxradio-label .ui-icon-background {

box-shadow: inset 1px 1px 1px #ccc;
border-radius: .12em;
border: none;

} .ui-checkboxradio-radio-label .ui-icon-background {

width: 16px;
height: 16px;
border-radius: 1em;
overflow: visible;
border: none;

} .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {

background-image: none;
width: 8px;
height: 8px;
border-width: 4px;
border-style: solid;

} .ui-checkboxradio-disabled {

pointer-events: none;

} .ui-spinner {

position: relative;
display: inline-block;
overflow: hidden;
padding: 0;
vertical-align: middle;

} .ui-spinner-input {

border: none;
background: none;
color: inherit;
padding: .222em 0;
margin: .2em 0;
vertical-align: middle;
margin-left: .4em;
margin-right: 2em;

} .ui-spinner-button {

width: 1.6em;
height: 50%;
font-size: .5em;
padding: 0;
margin: 0;
text-align: center;
position: absolute;
cursor: default;
display: block;
overflow: hidden;
right: 0;

} /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button {

border-top-style: none;
border-bottom-style: none;
border-right-style: none;

} .ui-spinner-up {

top: 0;

} .ui-spinner-down {

bottom: 0;

}

.ui-spinner {

display: table-cell;
vertical-align: middle;
height: 100%;
margin: 0;
font-size: 20px;
font-weight: bold;
border: none;
width: 3em;
text-align: center;
margin-left: auto;
position: relative;
padding-right: 50px;
.ui-spinner-input {
        margin: 0;
        border: none;
        width: 38px;
        height: 38px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        background: $light-gray;
        border-radius: 0;
        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
        }
}
a.ui-spinner-button {
        display: block;
        position: absolute;
        color: $white;
        z-index: 10;
        width: 50px;
        border: 1px solid $ace-navy;
        right: 0;
        cursor: pointer;
        &:after {
                content: '';
                display: inline-block;
                position: absolute;
                right: 0;
                left: 0;
                margin: auto;
                width: 0.8em;
                height: 0.8em;
                border: none;
                transform: rotate(45deg);
        }
        &.ui-spinner-up {
                top: 0;
                bottom: 50%;
                &:after {
                        top: 50%;
                        bottom: 0;
                        border-top: solid 0.3em $white;
                        border-left: solid 0.3em $white;
                }
        }
        &.ui-spinner-down {
                top: 50%;
                bottom: 0;
                &:after {
                        top: 0;
                        bottom: 50%;
                        border-bottom: solid 0.3em $white;
                        border-right: solid 0.3em $white;
                }
        }
        &:hover, &:focus {
                background-color: $white;
                &:after {
                        border-color: $black;
                }
        }
}

}