body {
    font-size: small;
    font-family: Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
    background-color: aliceblue;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Common */
.clear {
    clear: both;
}


.left {
    float: left;
}

.right-login {
    float: right;
    margin-bottom: 140px !important;
    z-index: 2;
    margin-right: 190px;
}

.right {
    float: right;
}

.error {
    color: red;
}

.bold {
    font-weight: bold;
}
/* Header */


#logo {
    width: 100px;
    float: left;
    padding-left: 10px;
    padding-top: 5px;
}

#hlLogo > img {
    border: 0;
}

#logoApp {
    width: 50px;
    float: right;
    padding-left: 20px;
    padding-top: 25px;
    padding-right: 50px;
}

#headerDetails {
    float: left;
}

#topBarMenu {
    float: left;
    margin: 25px 0 0 100px;
    height: 60px;
    /*background-color:pink;*/
}

#header-swoosh {
    position: absolute;
    top: 0px;
    right: 0px;
}


#userDetailsSection {
    position: absolute;
    top: 3px;
    right: 15px;
    font-size: small;
    float: right;
    color: white;
    line-height: normal;
    margin-right: 10px;
}

#userDetailsControls {
    float: right;
}

.header-text {
    font-size: smaller;
}

.username {
}

.userLoginDetails {
}

#LoginSwoosh {
    right: 0;
    background-image: url(../../Core/images/Small_Swoosh.png);
    height: 100px;
    width: 189px;
    display: block;
}

/* Navigation */
#Nav {
    height: 25px;
}


#footerLeft {
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    width: 50%;
}

#footerRight {
    float: right;
    margin-right: 5px;
    margin-top: 5px;
}

#main-content {
    padding: 10px;
}
/* Telerik overrides */

/* Nav bar (RadNavigation) */
html .RadNavigation .rnvMore,
html .RadNavigation .rnvRootLink {
    padding: 5px 15px;
    font-size: small;
}

html .RadNavigation .rnvBackLink {
    font-size: small;
    width: 30px;
}

    html .RadNavigation .rnvBackLink .radImage {
        margin-left: -8px;
        margin-top: 1px;
    }

/* Forms */

#form-details {
    padding: 2px 10px 10px 10px;
}

#form-controls {
    height: auto;
    padding: 5px;
    /*border-top: 1px solid black;*/
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: auto;
    /* Force to bottom of parent div: https://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div */
    left: 0;
    right: 0;
    position: absolute;
    width: 65%;
}

#form-controls-login {
    height: 150px;
    padding: 5px;
    /*border-top: 1px solid black;*/
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: auto;
    /* Force to bottom of parent div: https://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div */
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: 65%;
    z-index: -10;
}

.success {
    color: green;
    /*font-weight:bold;*/
}

.form-label {
    width: 200px !important;
}

.form-control {
    position: relative;
    left: 250px;
    width: 300px !important;
}




/* Password strength */
#password-strength {
    margin-left: 155px;
}

#password-strength-indicator {
    border: 1px solid black;
    width: 200px;
    /*padding:2px;*/
    background-color: lightgray;
    font-size: small;
}

#password-strength-hint {
    font-size: small;
    color: silver;
}

/* Header, footer scrollable content taken from: https://stackoverflow.com/questions/4069734/fixed-header-footer-with-scrollable-content */
#bibby-header {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    right: 0;
    overflow: hidden;
    background-color: #141446;
}

#bibby-main {
    position: absolute;
    top: 100px;
    bottom: 25px;
    left: 0;
    right: 0;
    background-color: white;
}

#bibby-nav {
    position: absolute;
    top: 0;
    height: 25px;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 1;
}

#bibby-content {
    position: absolute;
    top: 25px;
    left: 10px;
    right: 10px;
}

#no-nav {
    top: 0;
}

#bibby-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 25px;
    width: 100%;
    color: white;
    text-align: center;
}

/* Links */
a img {
    text-decoration: none; /* no underline */
    border: none;
}

/* centre screen div for toast notifications */
.toast-centre-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Overridden Telerik drag line */
/* Taken from: https://www.telerik.com/forums/change-drag-and-drop-line */
div.rtDropAbove,
div.rtDropBelow {
    border: 2px dotted blue;
    font-size: 3px;
    line-height: 3px;
    height: 3px;
    margin-top: -1px;
}

div.rtDropAbove {
    border-bottom: 0;
}

div.rtDropBelow {
    border-top: 0;
}

/*New colour changes*/

.RadInput_Hover_Default, .RadInput_Office2010Blue.RadInputHovered .riTextBox, .RadInput_Office2010Blue.RadInputHovered .riSelect, .Rad {
    border-color: #64c8e6 !important;
}

.RadForm_Office2010Blue .rfdTextInput:focus, .fdTextArea.RadForm_Office2010Blue textarea:focus,
.RadForm_Office2010Blue .rfdTextInput:hover, .fdTextArea.RadForm_Office2010Blue textarea:hover,
.RadForm_Office2010Blue .rfdTextInput:active, .fdTextArea.RadForm_Office2010Blue textarea:active {
    border-color: #64c8e6 !important;
}

/* Taken from: https://stackoverflow.com/questions/18078482/how-to-rotate-radgrid-header-text-in-ie */
.radgrid-vertical-header {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.radgrid-compact {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* group box*/
.groupbox {
    float: left;
    background-color: WhiteSmoke;
    border: 1px solid silver;
    padding: 5px;
    margin: 0 10px 10px 0;
}

.page-heading {
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 5px;
    background: #495158!important;
    border-color: #E5E5E5!important;
    border-radius: 5px;
    font-size: large!important;
}

.heading-text {
    color: white!important;
    padding: 5px 0 5px 20px!important;
}

.page-heading-controls {
    color: white!important;
    font-size: small!important;
    float: right!important;
    margin-top: 4px!important;
    padding-right: 10px;
}

    .page-heading-controls > .button {
        color: #384e73;
    }

    .page-heading-controls > .div-picker > .date-picker {
        width: 130px;
    }

    .page-heading-controls > .div-picker > .time-picker {
        width: 80px;
    }

    .page-heading-controls > .div-picker {
        padding-right: 20px;
        float: left;
    }

.nav-sub-menu-heading {
    background-color: orange!important;
}

.RadInput_Office2010Blue a:hover, .RadPicker_Office2010Blue.rcCalPopupOpen .rcCalPopup, .RadCalendarTimeView_Office2010Blue .rcHover a {
    background-color: #64c8e6!important;
    background-image: none!important;
    border-color: #64c8e6!important;
}

.RadPicker .RadInput > input {
    background-image: linear-gradient(#fafbfd, #bfcddf) !important;
}

.RadNum {
    background-image: linear-gradient(#fafbfd, #bfcddf) !important;
    color: #384e73!important;
}


.RadCalendar_Office2010Blue .rcSelected a, .RadCalendar .rcHover a, .RadPicker_Office2010Blue.rcTimePopupOpen .rcTimePopup {
    background-color: #64c8e6!important;
    background-image: none!important;
    border-color: #64c8e6!important;
}

.RadPicker_Office2010Blue.rcCalPopupOpen .RadInput, .RadPicker_Office2010Blue.rcTimePopupOpen .RadInput {
    border-color: #64c8e6!important;
}


.RadCalendar .rcPrev:hover, .RadCalendar .rcNext:hover, .RadCalendar .rcFastPrev:hover, .RadCalendar .rcFastNext:hover {
    background-color: #64c8e6!important;
    background-image: none!important;
    border-color: #64c8e6!important;
}

.RadCalenderMonthView_Office2010Blue .rcButtons a:hover {
    background-color: #64c8e6!important;
    background-image: none!important;
    border-color: #64c8e6!important;
}

.RadCalendarMonthView_Office2010Blue .rcSelected a, .RadCalendarTimeView_Office2010Blue .rcSelected a {
    background-color: #64c8e6!important;
    background-image: none!important;
    border-color: #64c8e6!important;
}

.RadCalendarMonthView_Office2010Blue a:hover {
    background-color: #64c8e6!important;
    background-image: none!important;
    border-color: #64c8e6!important;
}

.chart-no-message {
    text-align: center;
}

/* session debug */
/*.debug-session {
    overflow-x:auto;
    z-index:1000;
    background-color:lightgoldenrodyellow;
    position:absolute;
  top: 123px;
  color:black;
}*/

.debug-session {
    padding: 10px;
    background-color: lightgoldenrodyellow;
    color: black;
    border: 2px solid red;
}