:root {
    --text-color: #141414;
    --text-rev-color: white;
    --btn-text-color: var(--text-rev-color);
    --btn-text-hover-color: var(--text-rev-color);
    --btn-color: #3c3c3b;
    --btn-hover-color: #444648;
    --btn-primary-text-color: var(--btn-text-color);
    --btn-primary-text-hover-color: var(--btn-text-hover-color);
    --btn-primary-color: #163678;
    --btn-primary-hover-color: #7487AF;
    --nav-bar-color: var(--btn-color);
    --nav-bar-border-color: var(--nav-bar-color);
    --header-background-color: white;
    --body-background-color: #f6f6f6;
    --footer-background-color: white;
    --login-background-hover-color: var(--btn-hover-color);
    --login-background-color: white;
    --login-text-color: var(--text-color);
    --login-text-hover-color: var(--text-rev-color);
    --menu-border-color: #3c3c3b;
    --menu-background-color: white;
    --menu-background-hover-color: var(--btn-hover-color);
    --menu-background-active-color: #a7b4bb;
    --menu-text-color: var(--text-color);
    --menu-text-hover-color: white;
    --menu-text-active-color: white;
    --hyperlink-color: #009bc0;
    --check1: red;
    --check2: pink;
    --check3: orange;
}

* {
    outline-color: var(--btn-color) !important;
}

@font-face {
    font-family: "Roboto";
    src: url(../fonts/Roboto/Roboto-Regular.ttf) format('truetype'), url(../fonts//Roboto/Roboto-Regular.woff) format('woff'), url(../fonts//Roboto/Roboto-Regular.otf) format('opentype');
    font-weight: normal;
    font-style: normal;
}

html, body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, table, tr, td {
    font-family: "Roboto", "Arial", sans-serif !important;
}


body {
    background: var(--body-background-color);
}

hr {
    border-top: 3px solid black !important;
    opacity: 0.75 !important;
}

.fa {
    font-size: 14px !important;
    font-weight: normal !important;
}

#KxBnB .KxBnBContent {
    padding-left: 20px !important;
}

.btn, #KxBnWidget, #KxBnBWidget .KxBnBWidget label, .mainNavigation ul li a {
    /* Front page buttons */
    border: none !important;
}

#KxBnBWidget {
    border-top: 1px solid var(--nav-bar-border-color) !important;
    border-bottom: 1px solid var(--nav-bar-border-color) !important;
}

.addToCart, .removeFromCart {
    text-transform: uppercase;
}

.btn {
    color: var(--btn-text-color) !important;
    background-color: var(--btn-color) !important;
    border-radius: 0px !important;
}

        .btn:hover {
            color: var(--btn-text-hover-color) !important;
            background-color: var(--btn-hover-color) !important;
            border: none !important;
        }

    .btn.active:focus, #KxBnB .btn:focus {
        outline: none !important;
        box-shadow: none !important;
    }

#KxBnBWidget .tab ul li {
    border-left: 1px solid var(--menu-border-color);
    border-right: 1px solid var(--menu-border-color);
    border-top: none !important;
    border-bottom: none !important;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    background: url("../Images/part_border.png") top center no-repeat !important;
}

    #KxBnBWidget .tab ul li:first-of-type {
        background-image: none !important;
    }

    #KxBnBWidget .tab ul li:hover, #KxBnBWidget .tab ul li:focus {
        color: var(--menu-text-hover-color) !important;
        background-color: var(--menu-background-hover-color) !important;
    }

    #KxBnBWidget .tab ul li:hover {
        background: url("../Images/full_border.png") top center no-repeat !important;
        background-color: var(--menu-background-hover-color) !important;
    }
    #KxBnBWidget .tab ul li:hover + li {
        background-image: none !important;
    }
   
    #KxBnBWidget, #KxBnBWidget > .KxBnBWidget {
        background-color: var(--nav-bar-color) !important;
    }

    #KxBnBWidget > .KxBnBHorizontalWidget fieldset .tab.active .hide-content {
        color: var(--btn-color) !important;
        border: none !important;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px !important;
    }

    .tab, .promotion-wrapper, .pageHeader > .container-fluid:first-child + .container-fluid {
        background-color: var(--btn-color) !important;
    }
    
    .tab:hover, .promotion-wrapper:hover {
        color: var(--btn-hover-color) !important;
        background-color: var(--btn-hover-color) !important;
    }
    
    .tab.active label, .tab.active i, .tab.active {
        color: var(--menu-text-active-color) !important;
        background-color: var(--menu-background-active-color) !important;
    }

    .list-location, .list-room {
        border-bottom: 1px solid var(--nav-bar-color) !important;
    }

#KxBnB .KxBnBContent select, #KxBnB .KxBnBContent textarea, #KxBnB .KxBnBContent input[type="text"], #KxBnB .KxBnBContent input[type="password"] {
    border-radius: 0px !important;
}
    
#KxBnB .KxBnBContent select:focus, #KxBnB .KxBnBContent textarea:focus, #KxBnB .KxBnBContent input[type="text"]:focus, #KxBnB .KxBnBContent input[type="password"]:focus {
    border-color: var(--nav-bar-color) !important;
    border-radius: 0px !important;
    box-shadow: inset 0 1px 1px lightgrey, 0 0 8px lightgrey !important;
}

.show-more, .show-more:hover {
    background-color: transparent !important;
    text-decoration: underline !important;
    color: var(--hyperlink-color) !important;
}

#SearchButton {
    color: var(--btn-text-color) !important;
    border: none !important;
    font-size: 14px !important;
}

.pageHeader > .container-fluid:first-child + .container-fluid {
    display: none;
}

.pageHeader {
    height: 85px;
    background-color: var(--header-background-color);
}

    .pageHeader .logo {
        margin: 15px 0 15px 0 !important;
    }

.CartWrapper, .CartWrapper > div {
    background-color: var(--body-background-color) !important;
}
.CartWrapper > div > h2 {
    color: var(--text-color) !important;
    font-size: 18px !important;
}
.SearchMessage > div > span, .ShoppingCart, .SummaryDetail {
    color: var(--text-color) !important;
    font-size: 13px !important;
    font-weight: normal !important; 
}

.clientLogin, .adminLogin {
    position: relative !important;
    top: 30px !important;
    right: 0px !important;
    height: 2px !important;
}

.LoginSignupLinksPanel {
    /* Home, create account, login buttons */
    position: relative;
    padding: 5px !important;
    color: white !important;
    background-color: var(--nav-bar-color) !important;
    border-radius: 0px !important;
    font-size: 5px;
}

    .LoginSignupLinksPanel .btn {
        color: var(--login-text-color) !important;
        background-color: var(--login-background-color) !important;
        border: none;
        margin: 2px;
        padding: 5px;
        font-size: 14px;
    }
    .LoginSignupLinksPanel .btn:hover {
        background-color: var(--login-background-hover-color) !important;
        color: var(--login-text-hover-color) !important;
    }


.logo {
    background: url(../Images/LSE_Logo.jpg) top center no-repeat !important;
    background-size: cover !important;
    width: 150px !important;
    height: 53px !important;
}

.siteName, .languageSelect {
    display: none !important;
}

#KxBnB .KxBnBContent {
    margin-top: 20px;
    margin-bottom: 20px;
}

.pageFooter * {
    color: var(--text-color) !important;
    font-size: 12px !important;
}

.pageFooter {
    padding-top: 30px;
    background-color: var(--footer-background-color) !important;
}

.footerAddress {
    display: block;
    line-height: 1.5em;
}

.footerLinks {
    margin-bottom: 10px;
}

    .footerLinks a:hover {
        text-decoration: none;
    }

.socialRow {
    margin: 10px 0 20px 0;
    float: right;
}

.socialLink {
    display: inline-block;
    color: var(--text-color) !important;
    padding: 3px;
    margin-right: 3px;
    float: right;
    width: 25px;
    height: 25px;
}

    .socialLink.instagram {
        margin-left: 0;
    }


/* Date picker */

#KxBnB .ui-state-default, #KxBnB .ui-widget-content .ui-state-default, #KxBnB .ui-widget-header .ui-state-default, #KxBnBLoginWrapper .ui-state-default, #KxBnBLoginWrapper .ui-widget-content .ui-state-default, #KxBnBLoginWrapper .ui-widget-header .ui-state-default {
    background-color: #7487AF !important;
    color: white !important;
}

#ui-datepicker-div .ui-state-active {
    color: #FFFFCC;
}

#ui-datepicker-div .ui-state-highlight {
    color: #DCDCDC;
}

/* Other styles */
.AdvertTotal p {
    background-color: white !important;
    color: var(--text-color) !important;
    border: 1px solid var(--nav-bar-color);
}

.AdvertBookingDetails label, .AdvertTotal p {
    font-weight: normal !important; 
}

#KxBnB .componentSearchResults .AvailabilitySignHeader.RoomAvailableHeader p:first-child, .componentCart .title, .componentCart .ItemTitle {
    font-weight: normal !important;
    color: var(--text-color) !important;
}

.componentCart {
    box-shadow: none !important;
    outline-color: transparent !important;
}

.proceeed {
    width: 100% !important;
    max-width: none !important;
    margin: 2em 0 1em 0 !important;
}

.componentBookingConfirmation *, .ItemTitle {
    font-weight: normal !important;
}

.TotalInfoSummary label, .DepositPaidSummary label, .PayableNowSummary label {
    font-weight: bold !important;
}

.col-xs-1, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .socialRow {
    border: 0px dotted red; /* debug */
}

.LoginSignupLinksPanel {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
}

.componentBookerLogin {
    background-color: white !important;
    border: 1px solid var(--nav-bar-color) !important;
    color: var(--text-color) !important;
    margin: 20px auto 20px auto !important;
    padding: 30px 30px 0 30px !important;
    float: none !important;
    width: 75%;
}

.componentBookerLogin * {
    line-height: 30px;
}

.componentBookerLogin h3 {
    margin-left: 10px;
}

#mydetailscontent .container {
    width: 70% !important;
}
.componentBookerDetails > div > div > div > div {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#MainContentPlaceHolder_lnkBtnLogin, #MainContentPlaceHolder_SaveButton, .addToCart, .removeFromCart {
    line-height: 20px !important;
}

#MainContentPlaceHolder_lnkBtnLogin, #MainContentPlaceHolder_SaveButton {
    width: 100px !important;
}

#MainContentPlaceHolder_lnkBtnLogin {
    margin-top: 50px !important;
}

.btn-primary {
    color: var(--btn-primary-text-color) !important;
    background-color: var(--btn-primary-color) !important;
}

.btn-primary:hover {
    color: var(--btn-primary-text-hover-color) !important;
    background-color: var(--btn-primary-hover-color) !important;
}

.UserNavigationBar .Highlight {
    color: var(--text-color) !important;
}

.panel-heading, .panel-heading > div, .panel-heading.Booking-Accordian-Header, .panel-heading.Booking-Accordian-Header.fa {
    color: white !important;
    background-color: var(--btn-color) !important;
}

.panel-body.Booking-panel-body {
    color: var(--text-color) !important;
    background-color: white !important;
}

#KxBnB .componentPagination ul > li.selected > a, #KxBnB .componentPagination ul > li.Selected > a {
    background-color: var(--btn-color) !important;
    color: var(--text-rev-color) !important;
}

    #KxBnB .componentPagination ul > li.selected > a:hover, #KxBnB .componentPagination ul > li.Selected > a:hover {
        background-color: var(--btn-hover-color) !important;
        color: var(--text-rev-color) !important;
    }

#KxBnB .componentPagination ul > li > a, #KxBnB .componentPagination ul > li > span {
    color: var(--text-color) !important;
}

.footerLinks div {
    padding-left: 20%;
}

/* Responsive design */
@media (max-width: 1000px) {
    .footerLinks div {
        padding-left: 0px;
    }
}
@media (max-width: 767px) {
    .LoginSignupLinksPanel {
        top: -55px;
    }

    .container {
        padding: 0 5px !important;
    }

    .pageFooter {
        padding: 5px !important;
    }
    .pageFooter * {
        text-align: left !important;
    }
}

@media (max-width: 480px) {
    .LoginSignupLinksPanel {
        margin-left: auto !important;   
        margin-right: auto !important;
    }

    .AdvertHeader {
        display: none;
    }
}


/* Content switching - initial values */
.x_faculty, .x_public {
    display: none;
}
.x_showPublic:hover, .x_showFaculty:hover, .x_showNeither:hover {
    cursor: pointer;
    text-decoration: underline;
}