a:focus,
input[type=submit]:focus,
button:focus,
.button:focus,
select:focus,
:focus {
    outline: none;
}

input[type=submit]:focus,
button:focus,
.button:focus {
    box-shadow: inset 0 0 4px 1px #564BC2;

}

@media (max-width: 800px) {
    .content .container {
        padding: 0 30px;
    }
}

.Accordion.Application a,
.content-wrapper a,
.basket-wrap a,
#NoResults a {
    color: #e94190;
    font-weight: bold;
}

    .Accordion.Application a:hover,
    .content-wrapper a:hover,
    .basket-wrap a:hover,
    #NoResults a:hover {
        color: #564BC2;
    }

body {
    line-height: normal;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.row {
    max-width: none;
}

.form-panel .single-checkbox span {
    display: inline;
}

.single-checkbox label,
.radioList-horizontal label {
    display: inline;
    margin-right: 1em;
}

.single-checkbox:not(.label-before) {
    margin: .5em 0;
    position: relative;
}

.single-checkbox input,
.radioList-horizontal input {
    margin: .2em .6em;
}

.FormSubmit .anchorLink {
    margin-top: .7em;
}

.space-vertical {
    margin: 1em 0;
}

    .space-vertical + .space-vertical {
        margin-top: 0;
    }

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.progress-inner {
    position: relative;
}

.navigation {
    margin-top: 1.5em;
}

p {
    margin: 1em 0;
}

legend + p {
    margin-top: 0;
}

.kinetic-wrapper {
    margin-bottom: 1.25rem;
}

.form-panel,
.content-wrapper,
.user-summary {
    background: #ebeee6;
}

.form-panel,
.content-wrapper {
    border: none;
    padding-left: 0;
}

.content-wrapper {
    padding: 20px 0;
}

    .content-wrapper + .content-wrapper {
        margin-top: 2em;
    }

.form-panel:not(.content-wrapper) {
    padding: 0;
}

.form-panel.stand-alone {
    padding-top: 1em;
}

.RoomDetails-tab .Tab:hover {
    color: #564BC2;
}


.Login .form-panel {
    padding: 1.2em 0;
}

.form {
    border: none;
    margin-bottom: 0;
}
    /*margin on reset password*/
    .form legend,
    .sub-heading {
        color: #564BC2;
        font-family: 'Segoe UI', sans-serif !important;
        font-size: 1.5em;
        margin: 0 0 10px;
        text-indent: 0;
    }

.sub-heading {
    margin-top: 20px;
}

p + .sub-heading {
    margin-top: 0;
}

.primary {
    background-color: #FCD116;
}

div.content div#PageContent.Login .primary {
    background-color: #ebeee6;
}

.form-label {
    font-weight: bold;
}

.button-reset {
    border: none;
    cursor: pointer;
}

.title {
    color: #564BC2;
    font-size: 1.8em;
    font-weight: bold;
    margin: .5em 0;
}

div.content div#PageContent.Login .title {
    color: #564BC2;
}

div.content div#PageContent.Login .primary .title,
.form-panel .anchorLink {
    color: #564BC2;
}

    .form-panel .anchorLink:hover {
        color: #9e9fff;
    }

.user-summary {
    margin-bottom: 1em;
}

    .user-summary ul {
        list-style: none;
        padding: 0;
    }

        .user-summary ul li span + span {
            font-weight: bold;
            padding-left: 1em;
            word-wrap: break-word;
        }

    .user-summary li {
        margin: .5em;
    }

.heading {
    color: #564BC2;
    font-size: 1.7em;
    margin: 0 0 .5em;
    padding-right: 2em;
    position: relative;
}

ol.LabelList {
    margin: 0 0 20px 0;
}

    ol.LabelList li,
    ol.links li,
    .content-wrapper ol li {
        font-weight: bold;
        margin-left: 0;
    }

        .content-wrapper ol li span {
            font-weight: normal;
            display: inline-block;
            min-width: 30%;
        }

        .content-wrapper ol li .listInformation,
        .content-wrapper ol li .listInformation span {
            font-weight: bold;
        }

        ol.LabelList li span {
            min-width: inherit;
        }

ol.links,
.content-wrapper ol,
.content-wrapper ol li {
    margin-left: 0;
}

    ol.links a {
        color: #a0248e;
    }

.your-offer {
    min-height: 436px;
}

.content-spacer {
    margin: 20px 0;
}

table.generic {
    text-align: center;
}

    table.generic th:last-child,
    table.generic td:last-child {
        text-align: right;
    }

    table.generic th {
        background: #564BC2;
        color: #fff;
    }

    table.generic th,
    table.generic td {
        padding: .4em .7em;
    }

    table.generic tr:not(:last-child) td {
        border-bottom: 1px solid #9E9E9E;
    }

table tr:last-child td.Amount {
    font-weight: bold;
}

.user-summary ul li span:first-child,
ul.Clearfix li span:first-child {
    width: 33%;
    display: inline-block;
    vertical-align: top;
}

.user-summary ul li span:last-child,
ul.Clearfix li span:last-child {
    width: 67%;
    display: inline-block;
}

fieldset {
    padding: 0;
}

    fieldset.Personal table,
    fieldset.Personal table tr {
        background: transparent;
        border: none;
    }

.Accordion .title {
    margin-top: 12px;
}

.Accordion .Disabled {
    cursor: not-allowed;
    opacity: .5;
}

.title:not(.Disabled) + .ui-accordion-content {
    padding: 1em 1.5em;
}

.accordion-action {
    margin-bottom: 1em;
}

    .accordion-action p {
        margin: 0;
    }

.button-secondary {
    background: #333E48;
}

    .button-secondary:hover {
        background: #000000;
    }

.fakeRow {
    height: 48px;
    padding-top: 10px;
}

.alert {
    background-color: #f04124;
    border: 1px solid #de2d0f;
    color: #FFFFFF;
    font-size: .8rem;
    padding: 1em;
    margin-bottom: 1em;
}

    .alert br {
        display: none;
    }

    .alert ul {
        font-size: 1em;
        margin: .5em 0 0 2em;
    }

        .alert ul li {
            list-style: disc;
        }

.YearTemplate .heading {
    margin-bottom: .5em;
}

.offerAgreements .heading.standard-heading {
    background: #EBEEE6;
    clear: both;
    margin: 0;
    padding: .7em 1em;
    text-indent: 0;
    padding-right: 2em;
}

.offerAgreements h3 {
    text-indent: 0;
}

.offerAgreements .heading.standard-heading span {
    color: #564BC2;
    font-size: .7em;
    margin-left: .5em;
}

.offerAgreements .ui-accordion-content {
    border: 10px solid #EBEEE6;
    border-top: none;
    margin: 0;
    padding: 1em;
}

.TheContract h3:before {
    display: none;
}

.TheContract h3:hover {
    background: #EBEEE6;
    border-color: #EBEEE6;
    cursor: auto;
}


.RoomInfo-row {
    clear: both;
}

.room-list,
.RoomInfo,
.RoomDetails {
    list-style: none;
    margin: 0;
    padding: 0;
}

.RoomRow {
    border: 3px solid #ebeee6;
    border-bottom-width: 10px;
    margin: 1.5em;
    padding: 1em 0 0;
}

    .RoomRow.Pref {
        border-color: #e94190;
    }

#Results .RoomRow {
    padding-bottom: 1em;
}

.RoomInfo-title,
.RoomInfo-description {
    margin: .3em 0;
}

.RoomInfo-title {
    clear: left;
    float: left;
    text-align: right;
    width: 25%;
}

.RoomInfo-description {
    float: right;
    font-weight: bold;
    margin-left: 5%;
    width: 70%;
    padding-left: 20px;
}

.preference .ui-widget-content .ui-state-default,
.OBS .preference .ui-widget-content .ui-state-default {
    border: none;
}

.RoomSelectBlocked {
    margin-top: .5em;
}

.RoomDetails-tab {
    color: #58595b;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    margin-top: 10px;
}

.icon-circle {
    background-color: #333E48;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-left:20px
}

.Tab:hover .icon-circle,
.Tab:focus .icon-circle,
.Tab:active .icon-circle {
    background-color: #564bc2;
}

.RoomInfo-selectionTitle {
    font-size: 1.1em;
    font-weight: bold;
    padding-top: .4em;
}

.ThumbSection a {
    display: block;
    float: left;
    margin: 2.6%;
    width: 28%;
}

.TabSwitcher ul {
    margin-top: 1em;
}

    .TabSwitcher ul li {
        float: left;
        margin-bottom: .3em;
        width: 50%;
    }

.inlineContent label,
.inlineContent span,
#basket label {
    display: inline-block;
}

#basket {
    list-style: none;
    margin: 0 0 1em;
    padding: 0;
}

.remove-pref {
    left: .5em;
    position: relative;
    top: -.2em;
}

#removeFromBasket {
    margin-bottom: 1em;
}

hr {
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    height: 0;
}

.listReset {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .listReset li {
        margin: .5em 0;
    }

.scrollToTop {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em 0 0;
    white-space: nowrap;
}

#SliderRangeStops {
    display: none;
}

#PriceSlider {
    margin-top: 2em;
}

#Loading {
    bottom: 0 !important;
    background: rgba(255, 255, 255, .8);
    height: auto !important;
    left: 0 !important;
    position: fixed;
    right: 0 !important;
    top: 0 !important;
    width: auto !important;
    z-index: 5000;
}

.Loading-image {
    left: 50%;
    margin-left: -4em;
    margin-top: -6em;
    position: absolute;
    top: 50%;
}

.responsiveTable {
    overflow: auto;
    padding-bottom: .5em;
}

#standardSearch select[disabled=disabled],
.roomSearch select[disabled=disabled] {
    opacity: .5;
}

#ResultsHeader {
    margin-top: 2em;
}

.labelValueSpacing {
    margin-bottom: 1.2em;
}

.offerAgreements {
    margin-top: 1em;
}

.Statement {
    text-align: center;
    width: 100%;
}

.Detail {
    margin-top: 2.5em;
}

.Statement td {
    padding: 5px;
}

.Overview {
    font-weight: bold;
}

.messages-container {
    height: 60px;
    padding: 15px;
    clear: both;
}

    .messages-container h3 {
        margin-bottom: 8px;
    }

    .messages-container p {
        float: left;
        margin-right: 10px;
    }

.student-message, .global-message {
    position: relative;
    padding: 20px;
    margin: 1em 0 3em;
    border: 5px solid #5A8F3B;
    color: #333;
    background: #fff; /* css3 */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 5px 0 10px #cecece;
}

    .student-message:before, .global-message:before {
        content: "";
        position: absolute;
        bottom: -20px; /* value = - border-top-width - border-bottom-width */
        left: 40px; /* controls horizontal position */
        border-width: 20px 20px 0;
        border-style: solid;
        border-color: #5A8F3B transparent; /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }


.noRooms {
    clear: both;
}

.rooms {
    padding: 1em 0;
}

.list-headings {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: .5em;
    padding-top: .5em;
}

.room-item {
    background: #EEE;
    line-height: 3.5;
    padding-left: 1.5em;
}

.gender {
    margin-left: 1em;
}

.room-item.selected {
    background: #e94190;
    color: #fff;
}

.RoomSelect hr {
    margin-top: .4em;
}

.disabledRoom {
    background: #CEFFD1;
}

.qtip-default {
    background: #564BC2;
    border: none;
    color: #fff;
    font-size: 1em;
    line-height: 1.4;
    padding: .5em .7em;
}

#NoResults {
    border: 3px solid #EBEEE6;
    margin-top: 1.5em;
    padding: 1em 1em 0;
}

.content .progress-bar {
    font-size: 1.5em;
    font-weight: bold;
    list-style: none;
    margin: 0 0 1em;
    padding: 0;
    text-align: center;
}

.Accordion.Application li {
    margin: .4em 0;
}

.offerAgreements h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.row .navigation {
    margin-top: 2em;
}

.row .row-space,
form .row.row-space {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.row .row-space-bottom {
    margin-bottom: 1.5rem;
}
/* Base styles */
.sticky,
.Iamsticky {
    width: 100%;
    max-width: 346px;
    margin-top: 10px;
    box-sizing: border-box;
}

/* Medium screens: 641px to 1200px */
@media only screen and (min-width: 641px) and (max-width: 1200px) {

    .Iamsticky {
        width: 30%; /* Adjust as needed */
        max-width: 100%; /* Prevents overflow */
    }
}

@media only screen and (max-width: 640px) {
    .sticky,
    .Iamsticky {
        position: static !important;
        top: auto !important;
    }
}


/*.sticky,
.Iamsticky {
    width: 346px;
}

.Iamsticky {
    margin-top: 10px;
}

@media only screen and (max-width: 1200px) {
    .sticky,
    .top {
        width: 100%;
    }

    .Iamsticky,
    .bottom {
        width: 39%;
    }
}


    .Iamsticky,
    .bottom {
        width: 37%;
    }*/
@media only screen and (max-width: 960px) {
    .progress-bar > li:first-child {
        padding-left: 0;
    }

    .progress-bar > li:last-child {
        padding-right: 0;
    }

    .progress-inner {
        font-size: .8em;
    }
}

@media only screen and (max-width: 768px) {
    .progress-bar > li {
        padding-left: .3rem;
        padding-right: .3rem;
    }

        .progress-bar > li:first-child {
            padding-left: 0;
        }

        .progress-bar > li:last-child {
            padding-right: 0;
        }
}

@media only screen and (max-width: 40.1em) {
    .progress-bar > li {
        padding-left: 0;
        padding-right: 0;
    }

    .progress-inner {
        font-size: 1em; 
        border-top: 0;
    }

    .progress-bar > li:first-child .progress-inner {
        border-top: 4px solid #FCD116;
    }
}

/*jQuery DatePicker*/
#ui-datepicker-div {
    border: 1px solid #000;
    border-radius: 0;
    font-size: 1em;
    margin-top: .5em;
}


    .ui-datepicker .ui-widget-header .ui-state-hover .ui-icon, .ui-datepicker .ui-widget-header .ui-icon {
        background-image: url(../images/ui-icons_ffffff_256x240.png);
    }

.ui-datepicker .ui-state-default .ui-icon {
    float: right;
}

.ui-datepicker .ui-state-highlight, .ui-widget-content .ui-state-highlight {
    background-color: #003f77;
    color: #b4b453;
}

body #ui-datepicker-div .ui-widget-header {
    border-radius: 0;
    border: 1px solid #564BC2;
    background: #564BC2;
    color: #fff;
    padding: 5px 0;
}

.ui-datepicker td a.ui-state-active {
    border: none;
    padding: 2px 5px 2px 2px;
}

.ui-datepicker .ui-state-default, .ui-datepicker .ui-widget-content .ui-state-default {
    border: none;
    display: block;
    padding: 5px 9px;
}

table.ui-datepicker-calendar thead tr {
    background: #fff;
}

table.ui-datepicker-calendar {
    margin-bottom: 0;
}

    table.ui-datepicker-calendar tr {
        background: #efefef;
    }

    table.ui-datepicker-calendar tbody tr td {
        text-align: center;
    }

        table.ui-datepicker-calendar tbody tr td:hover {
            background: #564BC2;
            cursor: pointer;
        }

            table.ui-datepicker-calendar tbody tr td:hover a {
                color: #fff;
            }

#ui-datepicker-div .ui-datepicker-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

#ui-datepicker-div .ui-widget-header a.ui-datepicker-prev,
#ui-datepicker-div .ui-widget-header a.ui-datepicker-next {
    border: 1px solid transparent;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: 11px;
    right: 10px;
    width: 20px;
    background-image: url(../../images/Main/ui-icons_ffffff_256x240.png);
    background-position: -31px 0;
    text-indent: -99999px;
}

#ui-datepicker-div .ui-widget-header a.ui-datepicker-prev {
    position: absolute;
    left: 10px;
    background-position: -96px 0;
}

    #ui-datepicker-div .ui-widget-header a.ui-datepicker-prev .ui-state-hover,
    #ui-datepicker-div .ui-widget-header a.ui-datepicker-next .ui-state-hover {
        background: transparent;
    }

#ui-datepicker-div .ui-widget-header a.ui-state-hover {
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}

table.ui-datepicker-calendar td.ui-datepicker-current-day {
    background: #564BC2;
}

.ui-widget-content .ui-state-active {
    color: #fff;
    background: transparent;
}

    .ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-hover,
    .ui-datepicker .ui-state-active,
    .ui-widget-content .ui-state-active:not(.ui-tabs-selected) {
        border-color: #564BC2;
        color: #fff !important;
    }

.ui-datepicker-calendar .ui-state-disabled {
    background: #f8f8f8;
    color: #bebebe;
}

    .ui-datepicker-calendar .ui-state-disabled:hover {
        background: #f8f8f8;
        cursor: default;
    }


div.content div#PageContent.RoomOptions div#slider-range {
    border: #a5a5a5 1px solid;
    background: #F3F3F3;
    border-radius: 4px;
    height: 20px;
    margin: auto;
    position: relative;
}

    div.content div#PageContent.RoomOptions div#slider-range .ui-slider-handle {
        background: url(../../images/Main/sprite.png) -8px -166px no-repeat;
        border: none;
        cursor: pointer;
        height: 17px;
        outline: none;
        position: absolute;
        text-decoration: none;
        top: -16px;
        width: 8px;
        z-index: 10;
    }

    div.content div#PageContent.RoomOptions div#slider-range div + .ui-slider-handle {
        background-position: left -166px;
        margin-left: -8px;
    }

    div.content div#PageContent.RoomOptions div#slider-range .ui-slider-handle span.HandleRightAmount,
    div.content div#PageContent.RoomOptions div#slider-range .ui-slider-handle span.HandleLeftAmount {
        color: #e94190;
        position: absolute;
        top: -10px;
    }

    div.content div#PageContent.RoomOptions div#slider-range .ui-slider-handle span.HandleLeftAmount {
        left: 10px;
    }

    div.content div#PageContent.RoomOptions div#slider-range .ui-slider-handle span.HandleRightAmount {
        right: 10px;
        text-align: right;
    }

    div.content div#PageContent.RoomOptions div#slider-range div.ui-slider-range {
        border: 1px solid #564BC2;
        background: #564BC2;
        border-radius: 3px;
        display: block;
        height: 18px;
        margin-left: 0;
        position: absolute;
        top: 0;
        z-index: 1;
    }

div.content div#PageContent.RoomOptions div#SliderRangeStops {
    margin-top: 3px;
    width: 190px;
}

    div.content div#PageContent.RoomOptions div#SliderRangeStops span {
        background: url(../../images/Main/SliderRangeStop.png) center top no-repeat;
        display: inline-block;
        float: left;
        font-size: 0.6em;
        font-weight: bold;
        height: 20px;
        padding-top: 6px;
        text-align: center;
        width: 20%;
    }



@media only screen and (max-width: 1025px) {
    .user-summary ul li span:first-child,
    ul.Clearfix li span:first-child {
        width: 20%;
    }

    .user-summary ul li span:last-child,
    ul.Clearfix li span:last-child {
        width: 80%;
    }
}

@media only screen and (max-width: 992px) and (min-width: 641px) {
    .button.medium-4 {
        width: 60%;
    }

    .roomadvert .advertbuttons .button.medium-4,
    .roomadvert .booknowbutton .button.medium-4 {
        width: 50%;
    }

    .button.medium-3 {
        width: 40%;
    }
}

@media only screen and (max-width: 641px) {
    .Accordion .title {
        padding-left: 1.5em;
        font-size: 1em;
    }

    .user-summary ul li span:first-child,
    ul.Clearfix li span:first-child {
        width: 30%;
    }

    .user-summary ul li span:last-child,
    ul.Clearfix li span:last-child {
        width: 70%;
    }

    div.content div#PageContent.RoomOptions div#PriceSlider {
        width: 100%;
    }

    div.content div#PageContent.RoomOptions div#slider-range {
        width: 80%;
    }

    div.content div#PageContent.RoomOptions div#SliderRangeStops {
        width: 100%;
    }

    div.content div#PageContent.RoomOptions div#slider-range a {
        background: #564BC2;
        height: 40px;
        margin-bottom: -26px;
    }
}

@media only screen and (max-width: 767px) {
    .respond-767px-12 {
        width: 100%;
        clear: both;
    }
}

@media only screen and (max-width: 950px) {
    .pref-info {
        clear: both;
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    ol.LabelList li span,
    .content-wrapper ol li span {
        width: 50%;
    }

    .user-summary ul li span:first-child,
    ul.Clearfix li span:first-child {
        width: 40%;
    }

    .user-summary ul li span:last-child,
    ul.Clearfix li span:last-child {
        width: 60%;
    }
}

@media only screen and (min-width: 992px) {
    .roomadvert .advertbuttons .button.medium-4 {
        width: 32%;
    }

    .roomadvert .booknowbutton .button.medium-4 {
        width: 31.6%;
    }


    .kx-remove {
        padding-right: 0;
        padding-left: 0
    }

}

/*ARRIVAL PASS GRID*/
.ArrivalPassWrapper {
    width: 100%;
    float: left;
    margin-bottom: 2em;
}

.ArrivalPass {
    border: 5px solid #d57f32;
    border-radius: 10px;
    margin: 10px;
    float: left;
}

    .ArrivalPass .columns.arrival-right {
        padding-right: 0;
        margin: 0 -4% -4%;
        width: 108%;
        padding-left: 0;
        background: #863a8b;
    }

    .ArrivalPass .columns.arrival-welcome > div {
        padding: 2.5em 0 0;
    }

    .ArrivalPass .columns.arrival-date > div {
        padding: 1.5em 0 0;
    }

    .ArrivalPass .columns.arrival-pass {
        background: #863a8b;
    }

    .ArrivalPass .columns.arrival-address {
        background: #61316b;
    }

@media only screen and (max-width: 641px) {
    .ArrivalPass {
        background: transparent;
    }

        .ArrivalPass .columns.arrival-pass > div {
            padding: 5.5em 0;
        }

        .ArrivalPass .columns.arrival-address > div {
            padding: 2em 0;
        }
}

@media only screen and (max-width: 479px) {
    .ArrivalPass .columns.arrival-right .small-6 {
        width: 100%;
    }

    .ArrivalPass .columns.arrival-pass > div {
        padding: 2em 0;
    }

    .ArrivalPass .columns.arrival-address > div {
        padding: 2em 0;
    }
}

@media only screen and (min-width: 480px) {
    .ArrivalPass .columns.arrival-right {
        margin: 0 -3% -3%;
        width: 106%;
    }
}

@media only screen and (min-width: 642px) {
    .ArrivalPass {
        margin-left: 0;
        margin-right: 8px;
    }

        .ArrivalPass .columns.arrival-left {
            width: 70%;
        }

        .ArrivalPass .columns.arrival-right {
            width: 30%;
            margin: -12px -12px -12px 0;
            padding-left: 15px;
            background: transparent;
        }

        .ArrivalPass .columns.arrival-pass,
        .ArrivalPass .columns.arrival-address {
            display: table;
        }

            .ArrivalPass .columns.arrival-pass > div,
            .ArrivalPass .columns.arrival-address > div {
                height: 210px;
                display: table-cell;
                vertical-align: middle;
                float: none;
                clear: both;
                width: 100%;
            }

            .ArrivalPass .columns.arrival-address > div {
                height: 350px;
                padding: 2em 0;
            }
}

@media only screen and (min-width: 768px) {
    .ArrivalPass .columns.arrival-left {
        width: 75%;
    }

    .ArrivalPass .columns.arrival-right {
        width: 25%;
    }
}

@media only screen and (min-width: 1026px) {
    .ArrivalPass {
        border: 8px solid #d57f32;
        border-radius: 16px;
        margin: 16px 8px 16px 0;
    }

        .ArrivalPass .columns.arrival-left {
            width: 80%;
        }

        .ArrivalPass .columns.arrival-right {
            width: 20%;
            margin: -16px -16px -16px 0;
        }

        .ArrivalPass .columns.arrival-welcome > div {
            padding-top: 3em;
            padding-left: 3em;
        }

        .ArrivalPass .columns.arrival-date > div {
            padding-top: 3em;
            padding-left: 3em;
        }

        .ArrivalPass .columns.arrival-pass > div {
            height: 210px;
        }

        .ArrivalPass .columns.arrival-address > div {
            height: 250px;
        }

    .large-8 .ArrivalPass {
        border: 5px solid #d57f32;
        border-radius: 10px;
        margin: 10px 7px 10px 0;
    }

        .large-8 .ArrivalPass .columns.arrival-left {
            width: 75%;
        }

        .large-8 .ArrivalPass .columns.arrival-right {
            width: 25%;
            margin: -12px -12px -12px 0;
        }

        .large-8 .ArrivalPass .columns.arrival-welcome > div {
            padding-top: 3em;
            padding-left: 0;
        }

        .large-8 .ArrivalPass .columns.arrival-date > div {
            padding-top: 3em;
            padding-left: 0;
        }

        .large-8 .ArrivalPass .columns.arrival-pass > div {
            height: 210px;
        }

        .large-8 .ArrivalPass .columns.arrival-address > div {
            height: 250px;
        }
}

@media only screen and (min-width: 1440px) {
    .large-8 .ArrivalPass {
        border: 6px solid #d57f32;
        border-radius: 10px;
        margin: 15px 9px 15px 0;
    }

        .large-8 .ArrivalPass .columns.arrival-left {
            width: 80%;
        }

        .large-8 .ArrivalPass .columns.arrival-right {
            width: 20%;
            margin: -15px -15px -15px 0;
        }
}

/*ARRIVAL PASS CONTENT*/
.ArrivalPass h2,
.ArrivalPass h3 {
    font-family: Montserrat,sans-serif;
    text-transform: none;
    font-size: 1em;
    font-size: 1.7em;
    letter-spacing: -1px;
    font-weight: normal;
    margin: 0;
}

.ArrivalPass p {
    line-height: 1em;
    margin-bottom: 2em;
}

.ArrivalPass span a {
    color: inherit;
    font-weight: inherit;
}

.ArrivalPass small {
    line-height: 1.2em;
    font-size: 70%;
}

    .ArrivalPass small i.fa {
        padding-right: 1.5em;
    }

.ArrivalPass .arrival-left h2 {
    font-size: 3.2em;
    letter-spacing: -2px;
    font-weight: bold;
    color: #863a8b;
    line-height: 0.85em;
}

.ArrivalPass .arrival-left h3 {
    margin: 0 0 30px;
}

.ArrivalPass .arrival-right h3 {
    font-size: 2.3em;
    line-height: 1em;
}

    .ArrivalPass .arrival-right h3 b {
        font-size: 1.4em;
        font-weight: bold;
        display: block;
    }

.ArrivalPass .columns.arrival-left img {
    max-width: 60%;
}

.large-8 .ArrivalPass .columns.arrival-left img {
    max-width: 70%;
}

.ArrivalPass .columns.arrival-right *,
.ArrivalPass .columns.arrival-right *:hover,
.ArrivalPass .columns.arrival-right *:focus {
    color: white;
}

.ArrivalPass .columns.arrival-right h3,
.ArrivalPass .columns.arrival-right p,
.ArrivalPass .columns.arrival-right ul,
.ArrivalPass .columns.arrival-right ul li {
    padding: 0;
    margin: 0;
    text-align: center;
}

    .ArrivalPass .columns.arrival-right p small {
        font-size: 0.82em;
    }

.ArrivalPass .columns.arrival-right ul {
    font-size: 1.27em;
    line-height: 1.2em;
    font-family: Montserrat,sans-serif;
}

.ArrivalPass .columns.arrival-right p + ul {
    margin-top: 30px;
}

@media only screen and (max-width: 1025px) {
    .ArrivalPass .columns.arrival-left img {
        display: none;
    }
}

@media only screen and (min-width: 480px) {
    .ArrivalPass .arrival-left h2 {
        white-space: nowrap;
    }
}

@media only screen and (min-width: 1026px) {
    .ArrivalPass .arrival-right h3 {
        font-size: 2.9em;
    }

    .large-8 .ArrivalPass .arrival-right h3 {
        font-size: 2.3em;
    }

    .ArrivalPass .columns.arrival-right ul {
        font-size: 1.4em;
    }

    .large-8 .ArrivalPass .columns.arrival-right ul {
        font-size: 1.1em;
    }
}

@media only screen and (min-width: 1440px) {
    .ArrivalPass .arrival-right h3 {
        font-size: 3.2em;
    }

    .large-8 .ArrivalPass .arrival-right h3 {
        font-size: 2.3em;
    }

    .large-8 .ArrivalPass .columns.arrival-right ul {
        font-size: 1em;
    }
}

.roompanel.single-room {
    background: #ebeee6;
    padding: 10px;
    margin-bottom: 10px;
}

    .roompanel.single-room .booknowbutton button {
        margin-bottom: 0;
    }

.dropdown-hide {
    display: none;
}

.spacer {
    margin-top: 20px;
}

h1.dropdown {
    cursor: pointer;
    overflow: hidden;
}

    h1.dropdown span {
        margin: 7px;
        font-size: 60%;
        color: #6f6f6f;
    }

@media only screen and (max-width: 768px) {
    h1.dropdown span {
        float: left;
        margin-bottom: 5px;
    }
}

.reset-margin-padding {
    margin: 20px 0;
    padding: 0;
}

.clear {
    clear: both;
}

.left {
    float: left;
    display: flex;
    flex-direction: column;
}

.right {
    float: right;
}

.margin-left {
    margin-left: 20px;
}

.full-width-withInfo {
    width: calc(100% - 50px);
}

span.info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23564BC2'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    top: -.4em;
}

div.content div#PageContent.Login span.info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23564BC2'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    left: .5em;
    top: 0;
}

div.content div#PageContent.Login .form-panel:not(.primary) span.info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23564BC2'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.heading span.info {
    position: absolute;
    margin: -0.5em 1.7em 0 0;
    top: 0.6em;
    right: 1.0em; 
    font-size: 1em;
}


select.KxError,
input.KxError,
textarea.KxError {
    border: 1px solid #e00 !important;
}

span.KxError label {
    color: #e00;
}

span.KxError.alert-box {
    background-color: #e00 !important;
}

.ui-datepicker-title select {
    width: 25%;
    color: #000;
    font-size: .7em;
    font-weight: normal;
    -webkit-appearance: menulist-button;
    margin: 0 5px 4px;
}

    .ui-datepicker-title select::-ms-expand {
        display: inline-block;
    }

.ui-datepicker-calendar th {
    padding: 3px 0;
}

.ui-datepicker-trigger {
    padding: 1px;
    margin-left: 5px;
    float: left;
}

.DOBDatePicker {
    width: 80% !important;
    width: calc(100% - 39px) !important;
    float: left;
}


/* Preference Pages */
ul.RoomDetails {
    background: #EBEEE6;
    margin-left: 0;
    padding: 0;
}

div.TabSwitcher,
div.TabSwitcher .RoomDetails {
    width: 100%;
    float: left;
}

div.RoomSelectBlocked.columns,
div.RoomSelectBlocked.columns.clear {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

div.TabContentWrap div.PaneTwo div img,
div.TabContentWrap div.PaneFive dl dd img {
    -webkit-box-shadow: 0px 1px 2px 1px #2f2c2c;
    box-shadow: 0px 1px 2px 1px #2f2c2c;
}

div.TabContentWrap div.PaneTwo div img {
    height: auto;
}

div.TabContentWrap {
    float: none;
    width: 100%;
}

    div.TabContentWrap > div {
        float: none;
    }

    div.TabContentWrap p {
        background: none;
        padding: 0;
    }

div.ui-tabs-hide {
    display: none;
}
/* Need to fix so does not break map under map tab*/
div.TabContentWrap div.ui-tabs-hide {
    visibility: hidden;
    position: absolute;
}
/*visibility > display as it breaks Google maps*/
div.TabContentWrap div.PaneOne {
    padding: 15px;
}

    div.TabContentWrap div.PaneOne #map_canvas {
        border: none;
        height: 230px;
        width: 593px;
    }

        div.TabContentWrap div.PaneOne #map_canvas * {
            background: none;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

div.TabContentWrap div.PaneTwo div.bx-wrapper {
    width: 633px !important;
}

    div.TabContentWrap div.PaneTwo div.bx-wrapper .bx-next,
    div.TabContentWrap div.PaneTwo div.bx-wrapper .bx-prev {
        height: 44px;
        overflow: hidden;
        position: absolute;
        text-indent: -999px;
        top: 110px;
        width: 14px;
    }

    div.TabContentWrap div.PaneTwo div.bx-wrapper .bx-prev {
        background-position: left -50px;
        left: 20px;
    }

    div.TabContentWrap div.PaneTwo div.bx-wrapper .bx-next {
        background-position: -16px -50px;
        right: 20px;
    }

    div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window {
        clear: both;
        width: 633px !important;
    }


        div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection {
            width: 552px !important;
            margin: 14px 0 4px 45px;
        }

            div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a {
                float: left;
                margin: 0 20px 10px 0;
                position: relative;
            }

                div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a.Fourth {
                    clear: left;
                }

                div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a img {
                    margin: 0;
                }

                div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a span.Zoom {
                    background-position: -29px -50px;
                    display: none;
                    position: absolute;
                    height: 47px;
                    left: 55px;
                    top: 35px;
                    width: 46px;
                }

                div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a:hover img {
                    -webkit-box-shadow: 0px 4px 10px 1px #2f2c2c;
                    box-shadow: 0px 4px 10px 1px #2f2c2c;
                }

                div.TabContentWrap div.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a:hover span.Zoom {
                    display: inline-block;
                }

div.TabContentWrap div.PaneTwo,
div.TabContentWrap div.PaneThree {
    padding: 20px 10px 19px;
    width: 100%;
}

    div.TabContentWrap div.PaneThree ul,
    div.TabContentWrap div.PaneThree ul li {
        border: none;
        overflow: hidden;
    }

    div.TabContentWrap div.PaneThree ul {
        background: none;
        clear: none;
        float: none;
        height: auto;
        width: 100%;
        columns: 2;
    }

        div.TabContentWrap div.PaneThree ul li {
            background: url(../../images/Main/facilitytick.png) left 5px no-repeat;
            border: none;
            font-size: 1em;
            padding: 1px 0 2px 25px;
            text-align: left; 
        }

            div.TabContentWrap div.PaneThree ul li.InActiveFacility {
                background: none;
                color: #848081;
            }

div.TabContentWrap div.PaneFour {
    padding: 29px 30px 10px 30px;
    width: 573px;
}

    div.TabContentWrap div.PaneFour * {
        color: #fff;
    }

    div.TabContentWrap div.PaneFour h3 {
        font-size: 1.2em;
        margin: 0 0 5px 0;
    }

    div.TabContentWrap div.PaneFour p {
        margin: 0 0 20px 0;
    }

div.TabContentWrap div.PaneFive {
    clear: both;
    height: 235px;
    padding: 15px 0 10px 25px;
    overflow: auto;
    width: 600px;
}
    div.TabContentWrap div.PaneFive dl {
        clear: both;
        color: #fff;
        float: left;
        margin: 7px 0;
        width: 100%;
    }

        div.TabContentWrap div.PaneFive dl dt {
            clear: both;
            font-size: 1.1em;
            margin: 10px 0 0 93px;
        }

        div.TabContentWrap div.PaneFive dl dd img {
            margin-left: 2px;
        }

        div.TabContentWrap div.PaneFive dl dt + dd {
            position: relative;
            top: -15px;
        }

        div.TabContentWrap div.PaneFive dl dd + dd {
            color: #efefef;
            clear: right;
            width: 480px;
            float: right;
        }

        div.TabContentWrap div.PaneFive dl dd.Comment {
            float: left;
            margin: 0 0 31px 10px;
        }

        div.TabContentWrap div.PaneFive dl dd p {
            display: block;
            margin-bottom: 10px;
        }


div.RoomOptionInfo .navigation span.text-right {
    float: right;
}

div.RoomOptionInfo .navigation a {
    padding: .625rem 0 .6875rem !important;
    width: 100%;
}

    div.RoomOptionInfo .navigation a:hover {
        text-decoration: none;
    }

span[data-control-target=ConfirmCheckBox] input[type=checkbox] {
    position: absolute;
    margin-top: 3px;
}

    span[data-control-target=ConfirmCheckBox] input[type=checkbox] + label {
        padding-left: 1.4em;
    }
/* END Preference Pages */


/* OBS Advert */
div.TabContentWrap.PaneTwo div.bx-wrapper {
    width: 633px !important;
}

    div.TabContentWrap.PaneTwo div.bx-wrapper .bx-next,
    div.TabContentWrap.PaneTwo div.bx-wrapper .bx-prev {
        height: 44px;
        overflow: hidden;
        position: absolute;
        text-indent: -999px;
        top: 110px;
        width: 14px;
    }

    div.TabContentWrap.PaneTwo div.bx-wrapper .bx-prev {
        background-position: left -50px;
        left: 20px;
    }

    div.TabContentWrap.PaneTwo div.bx-wrapper .bx-next {
        background-position: -16px -50px;
        right: 20px;
    }

    div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window {
        clear: both;
        width: 633px !important;
    }

        div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection {
            width: 552px !important;
            margin: 14px 0 4px 45px;
        }

            div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a {
                float: left;
                margin: 0 20px 10px 0;
                position: relative;
            }

                div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a.Fourth {
                    clear: left;
                }

                div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a img {
                    margin: 0;
                }

                div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a span.Zoom {
                    background-position: -29px -50px;
                    display: none;
                    position: absolute;
                    height: 47px;
                    left: 55px;
                    top: 35px;
                    width: 46px;
                }

                div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a:hover img {
                    -webkit-box-shadow: 0px 4px 10px 1px #2f2c2c;
                    box-shadow: 0px 4px 10px 1px #2f2c2c;
                }

                div.TabContentWrap.PaneTwo div.bx-wrapper div.bx-window div.ThumbWrap div.ThumbSection a:hover span.Zoom {
                    display: inline-block;
                }

div.TabContentWrap.PaneTwo,
div.TabContentWrap.PaneThree {
    padding: 20px 10px 19px;
    width: 100%;
}

    div.TabContentWrap.PaneThree ul,
    div.TabContentWrap.PaneThree ul li {
        border: none;
        color: #fff;
        float: none;
        margin: 0;
        overflow: hidden;
    }

    div.TabContentWrap.PaneThree ul {
        background: none;
        clear: none;
        float: none;
        height: auto;
        width: 100%;
        columns: 2;
    }

        div.TabContentWrap.PaneThree ul li {
            background: url(../images/facilitytick.png) left 4px no-repeat;
            border: none;
            font-size: 1em;
            padding: 1px 0 2px 25px;
            text-align: left;
        }

            div.TabContentWrap.PaneThree ul li.InActiveFacility {
                background: none;
                color: #848081;
            }

.advertbuttons {
    border-top: 5px solid #ebeee6;
    padding-top: 10px;
}

/* END OBS Advert */

.content .room-list li.ui-tabs-selected.ui-state-active {
    border-bottom-color: #4d4849;
}


.KxExtError {
    color: #e00;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.2em;
}

    .KxExtError br {
        display: none;
    }

.slotsarea {
    margin-bottom: 1em;
    overflow: auto;
}

.slots {
    background: #fff;
    border: 1px solid #ccc;
    float: left;
    margin-bottom: .5em;
    text-align: center;
}

    .slots tr:nth-child(even) {
        background: #eee;
    }

    .slots td {
        min-width: 9em;
        padding: 1em;
    }

.advertcontent {
    position: relative;
}

    .advertcontent .left img {
        margin-bottom: 15px;
    }

    .advertcontent .scrollToTop {
        position: absolute;
        right: 2em;
        top: 19em;
    }

@media only screen and (max-width: 950px) {
    div.RoomOptionInfo .navigation span {
        min-width: 7em;
    }

    div.RoomOptionInfo .navigation div.columns {
        width: 100%;
    }

    div.RoomOptionInfo .navigation a {
        padding: .625rem 1.25rem .6875rem !important;
    }

    div.TabContentWrap div.PaneTwo div img {
        width: 100%;
    }

    div.TabContentWrap div.PaneTwo div a:last-child img {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 768px) {
    div.TabSwitcher .RoomDetails > li.medium-6 {
        width: 50%;
    }
}

.contactDetails .telNumber,
.emailAddress a {
    color: #564BC2;
}

/*Main device styling*/
.UserInput.Login {
    margin: 1.5em 0;
}

.full-width label {
    margin: 0;
}
@media only screen and (max-width: 1024px) {
    .user-summary {
        margin-top: 1em;
    }
}
    @media only screen and (max-width: 800px) {
        .button-primary-button, .button-reset {
            position: relative;
            display: inline-block;
            padding: 10px 35px;
            margin: 6px 0;
            text-align: center;
            background-color: #564BC2;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: background 0.3s ease-in-out;
            line-height: 1.2;
            width: 100%
        }

        .button-secondary, .button-cancel {
            position: relative;
            display: inline-block;
            padding: 10px 35px;
            margin: 6px 0;
            text-align: center;
            background-color: #333E48;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: background 0.3s ease-in-out;
            line-height: 1.2;
            width: 100%
        }

        .kx-Padding {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .button-primary-button:hover, .button-reset:hover {
            background-color: #9e9fff;
            color: #000000
        }

        .button-secondary:hover, .button-cancel:hover {
            background-color: #000000;
            color: #fff
        }

        .accordion-list .accordion h3:before, .Accordion h3:before {
            top: 7px;
        }

        .progress-step {
            display: none;
        }

        .progress-step.current {
            display: block;
        }

        .progress-bar > li:first-child .progress-inner,
        .progress-step.current .progress-inner:before {
            border: none;
        }

        .fakeRow {
            height: auto; 
        }

        .content .progress-bar {
            margin-bottom: 1em;
        }

        .RoomInfo-selectionTitle {
            margin-bottom: .5em;
            text-align: center;
        }

        .RoomDetails-tab .Tab,
        .RoomDetails-tab .Tab:hover, .RoomDetails-tab.ui-tabs-active .Tab {
            background: none;
        }

        div.content div#PageContent.RoomOptions div#slider-range {
            height: 30px;
        }

            div.content div#PageContent.RoomOptions div#slider-range div.ui-slider-range {
                height: 28px;
            }

        .advertcontent .scrollToTop {
            display: none;
        }

        .advertcontent .RoomInfo {
            margin-top: 1em;
        }

        .content .clusterrooms ul {
            margin: 0 .3em;
            padding-left: 0;
        }

        .room-item {
            line-height: 1.5;
            padding: .7em 1.5em;
        }

        .heading {
            padding-right: 0;
        }
    }

    @media only screen and (max-width: 1026px) {
        .arrival-pass-right {
            margin-top: 1.5em;
        }
    }

    @media only screen and (min-width: 800px) {
        .column.content-column {
            padding-left: 0;
            padding-right: 0;
        }
    }

    .arrival-pass .bottom {
        width: 100%;
    }

    /*Main rework*/
    .YearTemplate .form-panel {
        background: none;
    }

    .YearTemplate .DATAAcademicYearID {
        font-size: 1.5em;
        margin: .5em 0;
    }

    @media only screen and (max-width:642px) {
        .YearTemplate .DATAAcademicYearID {
            margin: .7em;
            padding-right: 1.6em;
            width: auto;
        }
    }

    .Accordion.Application .button.book-now {
        position: relative;
        display: inline-block;
        padding: 10px 35px;
        margin: 6px 0;
        text-align: center;
        background-color: #564BC2;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        border: none;
        border-radius: 15px;
        cursor: pointer;
        transition: background 0.3s ease-in-out;
        line-height: 1.2;
        width: auto;
    }

    .Accordion.Application .button.book-now:hover {
        position: relative;
        display: inline-block;
        padding: 10px 35px;
        margin: 6px 0;
        text-align: center;
        background-color: #9e9fff;
        color: #000000;
        font-size: 15px;
        font-weight: 700;
        border: none;
        border-radius: 15px;
        cursor: pointer;
        transition: background 0.3s ease-in-out;
        line-height: 1.2;
        width: auto;
    }

.GenderF {
    background: url(../../images/Main/female.png) 93% 2% no-repeat #564BC2;
    color: #fff;
    background-color: #FD86E9;
}

.GenderM {
    background: url(../../images/Main/male.png) 93% 2% no-repeat #564BC2;
    color: #fff;
    background-color: #59A3FF;
}


    .hide {
        display: none;
    }

    .scrollToTop.availability {
        background: #564BC2;
        bottom: 0;
        color: #fff;
        padding: .5em 1em;
        position: fixed;
        right: 0;
    }

    .group-detail {
        padding-left: 1em;
    }

    .accordion-list .accordion h3:before,
    .Accordion h3:before {
        margin-top: -12.5px;
        top: 50%;
    }

    @media only screen and (max-width:1026px) {
        .paymentScheduleSelection.single-checkbox label {
            margin-right: 0;
            width: 73%;
        }

            .paymentScheduleSelection.single-checkbox label .info {
                float: right;
                top: 0;
            }
    }

    .Accordion.Cancelled h3 + .ui-accordion-content {
        padding: 1em 1.5em;
    }

    #Results .RoomRow .noRooms {
        padding-left: .9375rem;
        padding-right: .9375rem;
    }

    @media only screen and (max-width: 800px) {
        .offerAgreements .heading.standard-heading span + span {
            display: inline-block;
        }
    }

        .single-checkbox.paymentScheduleSelection .info {
            display: block;
            float: right;
            margin: .5em 0;
        }

    .button.additional-statement-btn, .button.additional-statement-btn:hover {
        background-color: #fcce01;
        padding: 10px;
        width: 85%;
        position: relative
    }

        .button.additional-statement-btn p {
            margin: 0.4em;
            margin-top: 0;
        }

    .button.statement-btn p {
        margin: 0.5em;
        margin-top: 0;
        color: #000000;
        text-align: right
    }

    .purple {
        background-color: #564bc2;
        color: #ffffff;
        padding: 2rem 1rem;
        border-bottom: 2px solid #ffffff;
    }

    .purple-header {
        background-color: #564bc2;
        color: #ffffff;
        padding: 2rem 1rem;
    }

    .flex-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .logo-area {
        display: flex;
        align-items: center;
        margin-bottom: 2.75rem;
    }

    .logo-text {
        font-size: 1.5rem;
        margin-left: 0.75rem;
        font-weight: 700;
    }

    .footer-links .horizontal-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .footer-links .horizontal-links li a {
            color: #ffffff;
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s;
        }

    @media (max-width: 990px) {
        .footer-links .horizontal-links li a {
            font-size: 0.8rem;
        }

        .contact-info address {
            font-style: normal;
            text-align: left!important;
            font-size: 0.8rem;
        }
    }

.footer-links .horizontal-links li a:hover,
.footer-links .horizontal-links, .contact-info li a:focus {
    border-color: #ffffff;
    outline: none;

}

    .footer-links .horizontal-links li a:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
        border-color: #ffffff;
    }

    .contact-info address {
        font-style: normal;
        text-align: right;
    }

.contact-info a {
    color: #ffffff;
    text-decoration: none;
     border-bottom: 1px solid transparent; 
    transition: border-color 0.2s;
}

        .contact-info a:hover, .contact-info a:focus-visible {
            border-color: #ffffff!important;
            outline: none;
        }

    footer .copyright {
        background-color: #564bc2;
        color: #ffffff;
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .kx-important-message {
        font-size: 1.2em;
        color: #FF0000;
        font-weight: bold;
        line-height: 1.6;
        padding: 20px 20px 0px 20px;
    }

    .row.no-before::before {
        content: none;
        display: none;
    }

    .kx-radio-inline-group {
        display: block;
        margin: 1em 0;
    }

        .kx-radio-inline-group label.form-label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .kx-radio-inline-group .radioList-horizontal {
            display: flex;
            flex-wrap: wrap;
            margin-right: -0.5rem; /* compensate for child margins */
            margin-bottom: -0.5rem;
        }

    .ui-tooltip-cream {
        background-color: #9e9fff;
        color: #000000;
    }

    .kx-Padding {
        padding-left: 0px;
        padding-right: 0px;
    }
@media only screen and (min-width: 640px) {
    .kx-auto-width {
        width: auto;
    }
}
.kx-margin {
    margin-right: 5px;
}

.terms label {
    font-weight: bold;
    font-size: 15px;
    display: inline;
    padding-bottom: 6px;
}

.logo-area a:focus-visible img, .contact-info a:focus-visible, .header-content a:focus-visible img {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.responsive-iframe {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin: 0 auto; /* Center the iframe horizontally */
}

    .responsive-iframe iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
#PageAside {
    position: sticky;
    top: 0; /* or some offset like 10px */
    z-index: 1000; /* ensures it stays above other content */
}


/* Optional: limit width and adjust responsiveness */
@media (max-width: 768px) {
    #PageAside {
        max-width: 100%;
    }
    .kx-noPadding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.kx-width {
    width: 100%;
}

.Contract a:hover {
    text-decoration: underline;
}