@charset "UTF-8";

@-ms-viewport{
 width: device-width
}

:root{     
 font-size: 16px
}

*, *:before, *:after{
 box-sizing: border-box
}

html, body{ 
 font-size: 10px;
 direction: ltr
}

html{
 font-family: sans-serif;
 -ms-text-size-adjust: 100%; 
 -webkit-text-size-adjust: 100%;
 -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 )
}

body{
 margin: 0;
 text-align: left
}

body, input, select, textarea, button{
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 font-size: 0.875rem;
 font-weight: 400;
 line-height: 1.5;
 background-color: #fff;
 color: #000
}

article, aside, figcaption, figure, footer, header, hgroup, iframe, main, nav, section{
 display: block
}

caption{
 text-align: left
}

p,
h1, 
h2,
h3,
h4,
h5,
h6{
 margin: 0
}

button{
 cursor: pointer;
 user-select: none
}

button{
 overflow: visible
}

button::-moz-focus-inner{
 border: 0;
 padding: 0
}

a, label, [tabindex]{
 outline: 0
}

ol, ul, menu, dir, figure{
 margin: 0;
 padding: 0
}

ol{
 margin: 0;
 padding-left: 14px
}

ul{
 list-style-type: none
}

hr{
 margin: 0;
 border: solid 0 #8f8f9d;
 border-bottom-width: 1px
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{
 display: none
}
input[type="checkbox"]:not(.styled){
 -webkit-appearance: checkbox;
 -moz-appearance: checkbox;
 appearance: checkbox	
}
input[type="radio"]:not(.styled){
 -webkit-appearance: radio;
 -moz-appearance: radio;
 appearance: radio
}
select, textarea, button, input[type="text"], input[type="search"], input[type="password"], input[type="file"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="color"], input[type="checkbox"].styled, input[type="radio"].styled{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none
}
select, textarea, button, a.btn, span.btn, span.textonly, input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="color"], input[type="checkbox"].styled+label, input[type="radio"].styled+label{
 display: inline-block;
 border: solid 1px #8f8f9d;
 background-color: #fff;
 outline: 0;
}
select, textarea, button, a.btn, span.btn, input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="color"]{
 margin: 0;
 padding: 5px 12px;
 resize: none
}
span.textonly{
 padding: 5px 0;
}
input[type=hiddenn]{
 background-color: #ffff00;
 border-radius: 0
}
select{
 background-position: calc( 100% - 12px ) 50%, calc(100% - 7px ) 50%;
 background-image: linear-gradient( 45deg, transparent 50%, #8f8f9d 50% ), linear-gradient( 135deg, #8f8f9d 50%, transparent 50% );
 background-size: 5px 5px, 5px 5px;
 background-repeat: no-repeat;
 padding-right: 25px
}
select:focus{
 background-image: linear-gradient( 45deg, transparent 50%, #8f8f9d 50% ), linear-gradient( 135deg, #8f8f9d 50%, transparent 50% )
}

/*
 Checkbox, Radio
 */
 
input[type="checkbox"].large,
input[type="radio"].large{
 width: 22px; 
 height: 22px
} 
input[type="checkbox"].styled,
input[type="radio"].styled{
 display: none
}
input[type="checkbox"].styled+label,
input[type="radio"].styled+label{
 position: relative;
 width: 20px;
 height: 20px;
 vertical-align: middle;
 cursor: pointer
}
input[type="checkbox"].styled.slider+label,
input[type="radio"].styled.slider+label{
 width: 40px
}
input[type="checkbox"].styled+label+span,
input[type="radio"].styled+label+span{
 display: inline-block;
 min-width: 22px;
 margin-left: 8px;
 vertical-align: middle
}
input[type="checkbox"].styled+label+span+input+label,
input[type="radio"].styled+label+span+input+label{
 margin-left: 14px
}
input[type="checkbox"].styled.round+label,
input[type="radio"].styled.round+label{
 border-radius: 10px      
}
input[type="checkbox"].styled:checked+label,
input[type="radio"].styled:checked+label{
 background-color: #fff
}
input[type="checkbox"].styled+label::before,
input[type="radio"].styled+label::before{
 position: absolute;
 display: block;
 content: '';
 border: solid transparent 0
}

input[type="checkbox"].styled:not(.slider )+label::before,
input[type="radio"].styled:not( .slider )+label::before{
 top: 50%;
 left: 50%;
 width: 8px;
 height: 12px;
 margin-left: -4px;
 margin-top: -7px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 transform: rotate(40deg)
}
input[type="checkbox"].styled.slider+label::before,
input[type="radio"].styled.slider+label::before{
 top: 2px;
 left: 2px;
 width: 14px;
 height: 14px;
 border-width: 1px;
 border-color: #8f8f9d;
 transition: linear left 200ms
}
input[type="checkbox"].styled:checked+label::before,
input[type="radio"].styled:checked+label::before{
 border-color: #8f8f9d
}
input[type="checkbox"].styled.slider:checked+label::before,
input[type="radio"].styled.slider:checked+label::before{
 left: 21px
}
input[type="checkbox"].styled+label+span::before,
input[type="radio"].styled+label+span::before{
 content: 'off'
}
input[type="checkbox"].styled:checked+label+span::before,
input[type="radio"].styled:checked+label+span::before{
 content: 'on'
}
input[type="checkbox"].styled.yesno+label+span::before,
input[type="radio"].styled.yesno+label+span::before{
 content: 'no'
}
input[type="checkbox"].styled.yesno:checked+label+span::before,
input[type="radio"].styled.yesno:checked+label+span::before{
 content: 'yes'
}
input[type="checkbox"].styled+label+.label,
input[type="radio"].styled+label+.label{
 display: inline-block;
 margin-left: 7px
}

input[type="checkbox"].styled-banner,
input[type="radio"].styled-banner{
 display: none
}
input[type="checkbox"].styled-banner+label,
input[type="radio"].styled-banner+label{
 display: block;
 width: 100%;
 border: solid transparent 0;
 cursor: pointer
}



/*
 Range
 */

input[type=range]{
 -webkit-appearance: none;
 appearance: none; /* Hides the slider so that custom slider can be made */
 width: 100%; /* Specific width is required for Firefox. */
 background: transparent /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb{
 -webkit-appearance: none
}
input[type=range]:focus{
 outline: none /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

/*
 Style Range https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
 */
 
input[type=range]::-webkit-slider-thumb{ /* Special styling for WebKit/Blink */
 -webkit-appearance: none;
 border: 1px #a7acb2 solid;
 height: 16px;
 width: 10px;
 border-radius: 0;
 background-color: #FFF;
 cursor: pointer;
 margin-top: -2px /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
input[type=range]::-moz-range-thumb{ /* All the same stuff for Firefox */
 border: 1px solid #a7acb2;
 height: 16px;
 width: 10px;
 border-radius: 0;
 background-color: #FFF;
 cursor: pointer
}
input[type=range]::-webkit-slider-runnable-track{
 width: 100%;
 height: 14px;
 cursor: pointer;
 border-radius: 2px;
 border: solid #a7acb2 1px;
 background-color: #f0f0f0
}
input[type=range]:focus::-webkit-slider-runnable-track{
 background-color: #f0f0f0
}
input[type=range]::-moz-range-track{
 width: 100%;
 height: 14px;
 cursor: pointer;
 border-radius: 2px;
 border: solid #a7acb2 1px;
 background-color: #f0f0f0
}
.range-master>input[type=range]+div{
 margin-top: 7px
}

/*
 Margin top/bottom support
 */

.bafta:before, .bafta:after, .____:before, .____:after{
 display: table;
 content: ''
}

.bafta:after, .____:after{
 clear: both
}