:root {
    --red: #ab0e29;
    --red-border: #7c0a1e;
    --red-hover: #930c23;
}

/* depth */

.top-bar {
    box-shadow: 0px 1px 2px rgba(57, 0, 0, 0.2)
}

footer {
    box-shadow: 0px -1px 2px rgba(57, 0, 0, 0.2)
}

ul.dropdown, .f-dropdown {
    box-shadow: 0px 3px 5px rgba(57, 0, 0, 0.2)
}

.alert-box, .panel, ul.accordion, table, fieldset, .kalendar-months .month .box-d, .li-month, dl.sub-nav {
    box-shadow: 0px 1px 2px rgba(57, 0, 0, 0.2), 0px 1px 1px rgba(255, 255, 255, 0.6) inset !important
}

.rotate {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}


/* geowacht styling for top-bar */

.top-bar {
    background-image: url("../img/bgr-header.png") !important;
    background-position: center bottom;
}

.top-bar .name {
    background: rgba(0, 0, 0, 0) url("../img/bgr-logo-mini-ico.png") no-repeat scroll 0 0 !important;
    padding-left: 40px;
    margin-left: 20px;
}

.top-bar .logo-kava {
    background: rgba(0, 0, 0, 0) url("../img/xxx-undefined.png") no-repeat scroll 0 0 !important;
    padding-left: 40px;
    margin-left: 20px;
}

.top-bar .logo-wase {
    background: rgba(0, 0, 0, 0) url("../img/wase-logo.png") no-repeat scroll 0 0 !important;
    padding-left: 80px;
    margin-left: 20px;
}

.top-bar .logo-geowacht {
    background: rgba(0, 0, 0, 0) url("../img/bgr-logo-mini-ico.png") no-repeat scroll 0 0 !important;
    padding-left: 40px;
    margin-left: 20px;
}

.top-bar .logo-waals {
    background: url("../img/xxx-undefined.png") no-repeat scroll 0 0 !important;
    padding-left: 40px;
    margin-left: 20px;
}

.anonymous-top-bar {
    background-image: url("../img/bgr-header.png") !important;
    background-position: center bottom;
    height: 168px;
    padding-top: 25px;
}

.top-bar-section ul li {
    background: none;
}

.top-bar-section .has-form {
    background: none;
}

.top-bar-section li:not(.has-form) a:not(.button) {
    background: none;
}

.top-bar-section ul > li.divider {
    border-right: 1px solid #000;
    box-shadow: 1px 0 0 #555;
}

.top-bar-section ul.dropdown > li.divider {
    border-bottom: 1px solid #555;
    box-shadow: 0 -1px 0 #000;
    border-top: 0px;
    border-right: 0px;
}

.top-bar-section ul.dropdown li:not(.has-form) > a:not(.button) {
    line-height: 2.3125rem;
}

.top-bar-section li.active:not(.has-form) a:not(.button) {
    background: var(--red);
    border-color: var(--red-border)
}

.top-bar-section li.active:not(.has-form):hover a:not(.button) {
    background: var(--red);
    border-color: var(--red-border)
}

.top-bar .username {
    font-variant: small-caps;
}

/* ajax loading spinner */
.spinner {
    /* Spinner size and color */
    width: 1.5rem;
    height: 1.5rem;
    border-top-color: #444;
    border-left-color: #444;

    /* Additional spinner styles */
    animation: spinner 400ms linear infinite;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* page layout */

html {
    height: 100%;
    font-size: 90%
}

body {
    background-color: #f0efed;
    width: 100%;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    padding: 0 !important;
}

#mainContent {
    top: 0px;
    margin-top: 20px !important;
    padding-bottom: 80px !important;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

footer {
    background-image: url("../img/bgr-footer.png");
    bottom: 0;
    height: 80px;
    left: 0;
    margin: 0 !important;
    padding: 25px 0 !important;
    position: absolute;
    width: 100%;
    z-index: 1
}

.row {
    max-width: 1320px;
}

body.slim .row {
    max-width: 790px;
}

h1, h2, h3, h4, h5 {
    font-weight: bold;
    color: #b40d25;
}

h1 {
    font-size: 2.4rem
}

h2 {
    font-size: 1.9rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.2rem
}

h5, .panel h5, .panel.callout h5 {
    color: #6f6f6f;
    font-size: 1rem;
}

small {
    font-size: 90%;
}

/* login form */
#drop-login-button, #drop-login-button:hover {
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: none;
    background-color: var(--red);
    border-radius: 0.4rem;
}

#drop-login {
    background-color: var(--red);
    color: #fff;
    border-color: transparent;
    padding: 0.75rem;
    border-radius: 0 0 0.4rem 0.4rem;
    max-width: 20rem;
    margin-top: -0.5rem;
    margin-left: 1px;
}

#drop-login:before {
    display: none;
}

#drop-login:after {
    display: none;
}

#drop-login label, #drop-login a {
    color: #fff;
    font-weight: bold
}

#drop-login button {
    background-color: #363835;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: none;
}

#drop-login hr {
    height: 2px;
}

#drop-login input, #drop-login button {
    margin-bottom: 0.5rem;
}

#drop-login p {
    border-top: 2px solid #bc3e54;
}


/* Tabs */

.tabs .tab-title > a {
    padding: 0.5rem 1.5rem;
    border-top: 3px solid transparent;
}

.tabs .tab-title > a.important {
    color: var(--red);
    font-weight: bold;
}

.tabs .tab-title.active > a {
    border-top: 3px solid var(--red);
    border-bottom: 1px solid #fff;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    margin-bottom: -1px;
    background-color: #FDFDF6;
}

.tabs-content > .content {
    border: 1px solid #d9d9d9;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #FDFDF6;
}

.tabs-content > .content > *:last-child {
    margin-bottom: 0;
}

.sidebar-tabs .tab-title > a > i {
    font-size: 1.25rem;
}


/* articles */

article + article {
    border-top: 1px solid #ddd;
    padding-top: 2rem;
}

/* panels */

.panel {
    background-color: #FDFDF6;
}

.panel.callout {
    background-color: #dbedfb;
}

.panel.callout.warning {
    background-color: #fddfb4;
}

/* side-nav */
.side-nav li {
    margin: 0;
}

.panel > .side-nav {
    padding: 0;
}

.panel *:last-child {
    margin-bottom: 0px;
}

/* accordion */

ul.accordion .accordion-navigation > a {
    border: 1px solid #d8d8d8;
    font-size: 1.125rem;
    font-weight: bold;
}

ul.accordion .accordion-navigation.active > a {
    border: 0px;
    border-top: 3px solid var(--red);
    background-color: #FDFDF6;
}

ul.accordion {
    margin-left: 0;
    margin-bottom: 1.25rem
}

ul.accordion > .accordion-navigation.warning > a {
    background-color: #fddfb4;
}

ul.accordion > .accordion-navigation.warning > .content.active {
    background-color: #fddfb4;
}

ul.accordion > .accordion-navigation > a:after {
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 6px;
    content: "";
    border-color: #9d9d9d transparent transparent transparent;
    margin-top: 0.5rem;
    float: right;
}

ul.accordion > .accordion-navigation.active > a:after {
    content: "";
    border-color: transparent #9d9d9d transparent transparent;
}

/* alerts */

.alert-box {
    border-width: 0 0 0 0.35rem;
}

.alert-box.radius {
    border-radius: 0.6rem;
}

.alert-box.primary {
    border-left-color: #446cb3;
    background-color: #8da6d4;
}

.alert-box.primary strong {
    color: #446cb3;
}

.alert-box.secondary {
    border-left-color: #57595e;
    background-color: #e6e8eb;
}

.alert-box.secondary strong {
    color: #57595e;
}

.alert-box.info {
    border-left-color: #446cb3;
    background-color: #dbedfb;
}

.alert-box.info strong {
    color: #446cb3;
}

.alert-box.alert {
    border-left-color: #f04124;
    background-color: #fbbeb8;
    color: #222;
}

.alert-box.alert strong {
    color: #f04124;
}

.alert-box.success {
    border-left-color: #43ac6a;
    background-color: #dbf2d7;
    color: #222;
}

.alert-box.success strong {
    color: #43ac6a;
}

.alert-box.warning {
    border-left-color: #f08a24;
    background-color: #fddfb4;
    color: #222;
}

.alert-box.warning strong {
    color: #f08a24;
}

.alert-box.reminder {
    border-left-width: 1.5rem;
}

.alert-box.reminder:before {
    position: absolute;
    left: -0.9rem;
    top: 50%;
    color: #fff;
    content: "!";
    font-size: 1.375rem;
    line-height: .9;
    margin-top: -0.6875rem;
    padding: 0 0px 4px;
}

.alert-box.reminder .solution {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    font-size: 1.375rem;
    line-height: .9;
    margin-top: -0.6875rem;
    padding: 0 6px 4px;
}

.alert-box.metadata {
    border-left-width: 0;
    background-color: #e6e8eb;
    color: #57595e;
}

/* links */

a, .side-nav li a:not(.button) {
    color: var(--red)
}

a:hover, .side-nav li:hover a:not(.button) {
    color: var(--red-hover)
}

a:focus, .side-nav li a:not(.button):focus {
    color: var(--red);
    outline: none
}

/* buttons */

.button, button {
    font-size: 0.875rem;
    line-height: 0.875rem;
    padding: 0.65625rem 1rem;
}

.button, button {
    border-radius: 3px;
}

.button-group > *, .button-group > * > a, .button-group > * > button, .button-group > * > .button, .prefix.button, .postfix.button {
    border-radius: 0px;
}

.button-group > *:first-child, .button-group > *:first-child > a, .button-group > *:first-child > button, .button-group > *:first-child > .button, .prefix.button {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.button-group > *:last-child, .button-group > *:last-child > a, .button-group > *:last-child > button, .button-group > *:last-child > .button, .postfix.button {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.button-group > li > button, .button-group > li .button {
    border-color: #b9b9b9;
    border-left: 0px none;
}

.button-group > li:first-child button, .button-group > li:first-child .button {
    border-left: 1px solid #b9b9b9;
}

.button-group > li:first-child {
    margin-left: 0px;
}

.button, button, button.disabled, button[disabled], .button.disabled, .button[disabled] {
    background: var(--red);
    border: 1px solid var(--red-border);
}

.button, button {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.button:hover, button:hover {
    background-color: var(--red-border)
}

.button.disabled:hover, button.disabled:hover, button[disabled]:hover, .button[disabled]:hover {
    background: var(--red);
}

.button:focus, button:focus {
    background: var(--red-border);
    box-shadow: 0 0 4px var(--red), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.button.disabled:focus, button.disabled:focus, button[disabled]:focus, .button[disabled]:focus {
    background: var(--red-border);
}

.button.success:focus, button.succes:focus {
    box-shadow: 0 0 4px #43ac6a, 0 1px 0 rgba(255, 255, 255, 0.5) inset
}

.button.warning:focus, button.warning:focus {
    box-shadow: 0 0 5px #f08a24, 0 1px 0 rgba(255, 255, 255, 0.5) inset
}

.button.alert:focus, button.alert:focus {
    box-shadow: 0 0 4px #f04124, 0 1px 0 rgba(255, 255, 255, 0.5) inset
}

.button.secondary:focus, button.secondary:focus {
    box-shadow: 0 0 5px #e7e7e7, 0 1px 0 rgba(255, 255, 255, 0.5) inset
}

.button.disabled:focus, button.disabled:focus, button[disabled]:focus, .button[disabled]:focus {
    box-shadow: none;
}

.button.dropdown {
    text-align: left;
}

.button.dropdown {
    padding-right: 3.0625rem;
}

.button.dropdown::after {
    right: 0.90625rem;
}

.button.dropdown small {
    font-size: 90%;
}

/* progress bars */

div.progress .meter {
    background: #acdd00;
}

/* images / thumbnails */

.th:hover img, .th:focus img {
    box-shadow: 0 0 6px 1px rgba(171, 14, 41, 0.5)
}

/* pagination */

ul.pagination li.current a, ul.pagination li.current a:hover, ul.pagination li.current a:focus {
    background: var(--red);
}

/* filters */

dl.sub-nav {
    background-color: #FDFDF6;
    width: 100%;
    padding: 0.4rem 0;
}

dl.sub-nav dt {
    color: #000;
    font-variant: small-caps;
    font-weight: bold;
    text-transform: capitalize;
}

dl.sub-nav dt, dl.sub-nav dd {
    padding: 0.225rem 0px;
}

/* icon bar */

.icon-bar > * {
    padding: 0;
}

/* dropdown content */

.f-dropdown.f-dropdown-bar {
    padding: 0px;
}

.f-dropdown.f-dropdown-bar .icon-bar {
    background-color: #666;
}

.f-dropdown.f-dropdown-bar .icon-bar .item {
    padding-top: 2px;
    padding-bottom: 2px;
}

.f-dropdown.f-dropdown-bar .f-dropdown-content {
    padding: 0.5rem;
}

.f-dropdown.f-dropdown-bar .f-dropdown-content > *:last-child {
    margin-bottom: 0;
}

ul.f-dropdown > li.divider {
    border-top: 1px solid #ccc;
}

/* tabellen */

td.buttons {
    padding-top: 0;
    padding-bottom: 0;
}

td.buttons > .button, td.buttons > button, td.buttons > .button-group .button, td.buttons > .button-group button,
td.buttons > form button, td.buttons > form input, td.buttons > form .button {
    margin-bottom: 0;
}

/* definition lists */

dl dt {
    margin-bottom: 0;
}

dl dd {
    margin-bottom: 1.25rem;
}

dl dt input[type="checkbox"] {
    margin-bottom: 0;
}

dl dt label {
    font-size: inherit;
    font-weight: inherit;
}

/* labels */

.label.special {
    background-color: #b170a1
}

/* tijdslijn spreidingsaanmaak */

.nicetabs {
    overflow: hidden;
    width: 100%;
    height: auto;
    margin-left: 1px !important;
}

.nicetabs dd {
    float: left;
    margin: 5px 15px 5px 23px;
}

.nicetabs dd a,
.nicetabs dd a:visited {
    background: #366fb4;
    color: #fff;
    float: left;
    text-decoration: none;
    position: relative;
    height: 43px;
    padding: 3px 10px;
    line-height: 1.4;
    text-align: center;
    font-size: 0.8125rem;
}

.nicetabs a:hover {
    cursor: default;
}

.nicetabs a::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -22px;
    border-width: 21px 0 22px 21px;
    border-style: solid;
    border-color: #366fb4 #366fb4 #366fb4 transparent;
    left: -21px;
}

.nicetabs dd a:focus {
}

.nicetabs a::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -22px;
    border-top: 21px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 21px solid #366fb4;
    right: -21px;
}

.nicetabs .active a,
.nicetabs .active:hover a {
    color: #fff !important;
    background-color: #d95165 !important;
}

.nicetabs .active a::before {
    border-color: #d95165 #d95165 #d95165 transparent;
}

.nicetabs .active a:hover::before {
    border-color: #d95165 #d95165 #d95165 transparent;
}

.nicetabs .active a::after {
    border-left: 21px solid #d95165;
}

.nicetabs .active a:hover::after {
    border-left-color: #d95165;
}

/* kalender layout */

.kalendar-view {
}

.kalendar-view .month {
    width: 16%;
    float: left;
    height: 230px;
    margin: 0 0 0 0.8%;
}

.kalendar-view ul {
    list-style: none;
    margin: 0;
}

.kalendar-view .box-d {
    float: left;
    background-color: #fff;
    overflow: hidden;
    border: 1px solid #d7d7d7;
    position: relative;
    z-index: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 0px 0px 3px #e1e0df;
    -webkit-box-shadow: 0px 0px 3px #e1e0df;
    box-shadow: 0px 0px 3px #e1e0df;
}

.kalendar-view .month-1, .kalendar-view .month-7 {
    margin-left: 0;
}

.kalendar-view .box-d li {
    float: left;
    width: 14.28%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 11px;
    color: #2b2b2b;
    border: 1px solid #ebebeb;
    font-weight: bold;
    background-repeat: no-repeat;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.kalendar-view .box-d li.li-dn {
    height: 28px;
    line-height: 28px;
    background-color: #fff;
    font-size: 9px;
    color: #9e9e9e;
    border-width: 0 0 1px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.kalendar-view .box-d li.li-month {
    font-size: 13px;
    color: #fff;
    background-color: var(--red);
    height: 37px;
    line-height: 37px;
    width: 100%;
    border: none;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    position: relative
}

.kalendar-view .li-vorige-maand, .li-volgende-maand {
    opacity: 0.05;
}

.li-dag.li-readonly.li-volgende-maand, .li-dag.li-readonly.li-vorige-maand {
    opacity: 0.05;
}

.kalendar-view .li-readonly {
    opacity: 0.35;
}

.kalendar-view .month-12 .li-volgende-maand {
    opacity: 1;
}

.kalendar-view .month-12 .li-readonly {
    opacity: 0.35;
}

/* kalender navigatie */

.calnav {
    position: absolute;
    top: 0;
    width: 25px;
    height: 100%;
    background: url(../img/bgr-calendar-prev-next.png) no-repeat;
}

.calnav-prev {
    left: 0;
    background-position: 8px 0
}

.calnav-next {
    right: 0;
    background-position: -40px 0;
}

/* kalender inkleuring */

.li-white {
    background-color: #fff;
    border: 1px solid #c0c0c0 !important;
}

.li-feestdagen {
    background-color: #fff;
    border: 1px solid #c9c9c9 !important;
}

.li-schoolvakantie {
    background-color: #ededed;
    border: 1px solid #c9c9c9 !important;
    color: #000 !important
}

.li-blackpoint-1 {
    background-color: #000;
    border: 1px solid #000 !important;
    color: #fff !important
}

.li-blackpoint-2 {
    background-color: #92d193;
    border: 1px solid #72b273 !important;
    background-image: url(../img/bgr-calendar-sprite.png);
    background-position: -93px -89px;
    color: #559557
}

.li-blackpoint-3 {
    background-color: #f7c5cd;
    border: 1px solid #be9399 !important;
    background-image: url(../img/bgr-calendar-sprite.png);
    background-position: 1px -88px;
    color: #bb8992
}

.li-blackpoint-4 {
    background-color: #DB7093;
    border: 1px solid #DB7093 !important;
    color: #fff !important
}

.li-blackpoint-5 {
    background-color: #9da8cd;
    border: 1px solid #8494cc !important;
    color: #000 !important
}

.li-vooringestelde-wachtdeel-1 {
    background-color: #ff8000;
    border: 1px solid #e67300 !important;
    background-image: url(../img/bgr-calendar-sprite.png);
    background-position: 3px 3px;
}

.li-vooringestelde-wachtdeel-4 {
    background-color: #a8a8ad;
    border: 1px solid #939393 !important;
    background-image: url(../img/bgr-calendar-sprite.png);
    background-position: -74px 16px;
}

.li-vooringestelde-wachtdeel-1.li-vooringestelde-wachtdeel-4 {
    background: url(../img/bgr-vooringestelde-day-night.png) no-repeat 50% 50%;
    border-color: #e67300 #939393 #939393 #e67300 !important
}

.li-wachtdeel-1 {
    background-color: #ffc000;
    border: 1px solid #f1b500 !important;
    background-image: url(../img/bgr-calendar-sprite.png);
    background-position: 3px 3px;
}

.li-wachtdeel-4 {
    background-color: #a8a8ad;
    border: 1px solid #939393 !important;
    background-image: url(../img/bgr-calendar-sprite.png);
    background-position: -74px 16px;
}

.li-wachtdeel-1.li-wachtdeel-4 {
    background: url(../img/bgr-day-night.png) no-repeat 50% 50%;
    border-color: #f1b500 #939393 #939393 #f1b500 !important
}

.li-feestdagen {
    color: var(--red) !important;
}

/* kalender form */

#kalendar-backing-form {
    clear: left;
}

/* kalender legende */
.legende ul {
}

.legende li {
    line-height: 30px;
}

ul.legende {
    list-style: outside none none;
    padding-bottom: 1.5em;
}

.inline-list li{
    margin-left : 15px;
}

ul.legende li {
    line-height: 30px;
    padding-bottom: 0.25rem;
}

ul.legende.inline li {
    display: inline;
    padding-bottom: 0;
}

ul.legende span {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 25px;
    font-weight: bold;
    border-radius: 2px;
    background-clip: padding-box;
    margin-right: 5px;
    font-size: 11px;
}

ul.legende span.li-wachtdeel-4 {
    background-position: -78px 12px;
}

ul.legende span.li-wachtdeel-1.li-wachtdeel-4 {
    background: url(../img/bgr-day-night.png) no-repeat 50% 50%;
}

div.user-legende ul.legende li {
    font-size: 90%;
    line-height: 16px;
}

div.user-legende ul.legende span {
    float: left
}

/* kalender toolbox */

.kalendar-toolbox li {
    display: inline-block;
}

.kalendar-toolbox li span {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    border-radius: 2px;
    background-clip: padding-box;
    margin-right: 10px;
    font-size: 11px;
}

.kalendar-toolbox li span.selected {
    border: 2px solid var(--red) !important;
}

.kalendar-toolbox ul {
    list-style: outside none none;
    margin: 0;
}

/* forms */

fieldset legend {
    background-color: transparent;
}

fieldset {
    background-color: #FDFDF6;
    padding-bottom: 0;
}

ul.radio {
    list-style: outside none none;
    margin-left: 0;
    padding-top: 0.5625rem;
    font-size: 0.875rem;
}

ul.inline-list.radio label, ul.inline-list.radio input {
    display: inline-block;
}

ul.inline-list.radio li:first-child {
    margin-left: 0;
}

input[type="checkbox"] + label, input[type="radio"] + label {
    margin-left: 0;
}

label > input[type="checkbox"] {
    margin-bottom: 0
}

/* rechtstreeks overgenomen van andere input velden  */
input[type="file"] {
    background-color: #ffffff;
    border-color: #cccccc;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-family: inherit;
    font-size: 0.875rem;
    height: 2.3125rem;
    margin: 0 0 1rem;
    padding: 0 0.5rem;
    transition: border-color 0.15s linear 0s, background 0.15s linear 0s;
    width: 100%;
}

input[type="file"]:focus {
    background: #fafafa none repeat scroll 0 0;
    border-color: #999999;
    outline: medium none;
}

a.button.jsinfoButton {
    float: left;
    padding: 0.225rem 0.425rem;
    margin-right: 0.5rem;
    margin-top: 0.2rem;
}

.jsinfoButton i {
    font-size: 1.1rem;
}

/* form info fields */

aside p {
    font-size: 90%;
    font-style: italic;
}

aside *:last-child {
    margin-bottom: 0px;
}

.required {
    color: red;
}

/* jquery-ui */

ul.ui-menu li.ui-menu-item {
    font-size: 0.875rem
}

/* preferences radio buttons */

.prefRadio .PREFER input[type="radio"],
.prefRadio .AVOID input[type="radio"],
.prefRadio .NO_PREFERENCE input[type="radio"] {
    display: none !important;
}

.prefRadio .PREFER input[type="radio"] + label,
.prefRadio .AVOID input[type="radio"] + label,
.prefRadio .NO_PREFERENCE input[type="radio"] + label {
    display: inline-block;
    padding: 0;
    cursor: pointer;
}

.prefRadio .PREFER input[type="radio"] + label {
    background-image: url("/img/gw-preference-prefer.png");
}

.prefRadio .AVOID input[type="radio"] + label {
    background-image: url("/img/gw-preference-avoid.png");
}

.prefRadio .NO_PREFERENCE input[type="radio"] + label {
    background-image: url("/img/gw-preference-no_preference.png");
}

.prefRadio .PREFER input[type="radio"]:checked + label {
    background-color: #43AC6A;
    border-radius: 15px;
}

.prefRadio .AVOID input[type="radio"]:checked + label {
    background-color: #f3664f;
    border-radius: 15px;
}

.prefRadio .NO_PREFERENCE input[type="radio"]:checked + label {
    background-color: #dbdb4c;
    border-radius: 15px;
}