:root {
    --MAXWIDTH: 960px;
}

.container, .span12 {
    width: 100% !important;
}


.step-b .main .day, .step-btns {
    cursor: pointer
}

.unsupported-browser {
    display: none
}

[ng-cloak] {
    display: none !important
}

#addthis_hide, #navbar span[ng-show=authenticated] li.disabled ul.dropdown-menu, .step-e .main table td input[type=radio][value=""], .step-e [id*="-e"], .ui-datepicker-next, .ui-datepicker-prev, div.row[class*=step-] {
    display: none
}

body {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    background-color: #f7f7f7 !important
}

#navbar .nav-left {
    float: left;
    margin: 0 10px 0 0
}

.step-c .main table, .step-d .main table {
    margin-top: 4px
}

.header {
    background-image: url(/img/background.jpg);
    background-repeat: no-repeat;
    background-position: left;
}

.step-title {
    float: right
}

.step-btns {
    float: left;
    border-radius: 4px
}

.step-btns:hover {
    opacity: .8
}

.step-btns:active {
    opacity: .9
}

.main, .step-title {
    padding-right: 20px
}

.main .span12 {
    width: 100%
}

.main .span6 {
    /* width: 450px */
    width: calc(var(--MAXWIDTH) / 450)%;
}

.step-a .main .date-input {
    background-color: #fff;
    cursor: pointer
}

.step-b .main .ranged {
    background: #cfe3b0 !important
}

.step-b .main .extra {
    color: red !important
}

.step-b .ui-datepicker {
    width: 350px
}

.step-c .main td {
    width: 50%
}

.step-c .main td input {
    margin-bottom: 0;
    width: 100%
}

.step-c .main td input.valid-false {
    background-color: #e3dcb0
}

.step-c .main td:last-of-type {
    width: 37px
}

.step-c .ui-datepicker {
    width: 350px
}

.step-d .main td {
    width: 50%
}

.step-d .main td input {
    margin-bottom: 0
}

.step-e .main hr {
    border-color: #000
}

.step-e .main form label {
    font-size: 18px
}

.step-e .main table {
    width: 100%
}

.step-e .main table td {
    font-size: 18px;
    padding: 2px 0
}

.step-e .main table td:first-of-type {
    width: 70%
}

.step-e .main table td:last-of-type {
    text-align: left;
    width: 30%
}

.unaddthis.span12 {
    width: 100%;
    padding-right: 20px
}

.ui-datepicker-title {
    margin: 0 !important
}

.lightbox-close {
    float: left;
    background-color: #daa520;
    zoom: 1.5;
    color: #000
}

.page-help, .page-number, .page-title {
    float: right;
    padding-right: 20px
}

.lightbox-close:hover {
    background-color: gold
}

.lightbox-close .icon-remove {
    vertical-align: middle
}

hr {
    margin: 5px
}

.page-number {
    color: #abb090
}

.page-title {
    line-height: 40px
}

.btn-danger-x, .btn-danger-x:hover {
    background-color: #dfb34a !important;
    background-image: linear-gradient(to bottom, #dfb34a, #dfb34a) !important
}

.btn-danger-x:hover, .btn-primary-x:hover {
    opacity: .8
}

.btn-primary-x, .btn-primary-x:hover {
    background-color: #868d4a !important;
    background-image: linear-gradient(to bottom, #868d4a, #868d4a) !important
}

#navbar span[ng-show=authenticated] li.dropdown-rootmenu {
    position: relative
}

#navbar span[ng-show=authenticated] li.dropdown-rootmenu>ul.dropdown-menu {
    margin: 0
}

#navbar span[ng-show=authenticated] li.disabled.dropdown-submenu:hover>a:after {
    border-right-color: #ccc
}