@charset "UTF-8";

/* CSS3 mobile detection code. */
/* More info about how to use css queries can be found here: */
/* http://engineering.hoteltonight.com/using-css-media-queries-for-multi-platform/ */

/* NOTE: Web System is designed to be mobile responsive on devices in PORTRAIT view ONLY. */

/* reduces the height of modals */

@media only screen and (max-width: 1400px) {

    .modal .modal-body{
        overflow-y: auto!important;
        max-height: 300px!important;
    }
}

/* Code for Mobile Menu */
/* General styles for all menus */

.mobileButtonCurve {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.mobileButtonOpen {
    position: absolute;
    padding-top: 5px;
}

.mobileButtonClose {
    position: absolute;
    padding-top: 10px;
    padding-left: 75%;
}

.cbp-spmenu {
    background: #47a3da;
    position: fixed;
    z-index: 100000 !important;
}

.cbp-spmenu h3 {
    color: #afdefa;
    font-size: 1.9em;
    padding: 20px;
    margin: 0;
    font-weight: 300;
    background: #0d77b6;
}

.cbp-spmenu a {
    display: block;
    color: #fff;
    font-size: 1.1em;
    font-weight: 300;
}

.cbp-spmenu a:hover {
    background: #258ecd;
}

.cbp-spmenu a:active {
    background: #afdefa;
    color: #47a3da;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
    width: 290px;
    height: 99.99%;
    top: 0;
    overflow-y: auto;
    z-index: 100000 !important;
}

.cbp-spmenu-vertical a {
    border-bottom: 1px solid #258ecd;
    padding: 1em;
}

/* Vertical menu that slides from the left */

.cbp-spmenu-left {
    left: -290px;
}

.cbp-spmenu-left.cbp-spmenu-open {
    left: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.cbp-spmenu-push-toleft {
    left: -290px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Mobile Menu media queries */

@media screen and (max-height: 47.938em){

    .cbp-spmenu-vertical {
        width: 240px;
    }

    .cbp-spmenu-left,
    .cbp-spmenu-push-toleft {
        left: -240px;
    }

    .mobileButtonClose {
        padding-left: 70%;
    }

}

@media screen and (max-height: 26.375em){

    .cbp-spmenu-vertical {
        font-size: 90%;
        width: 190px;
    }

    .cbp-spmenu-left,
    .cbp-spmenu-push-toleft {
        left: -190px;
    }

}


/* Smaller screens */

@media only screen and (max-width: 979px) {

    .diary-font {
        font-size: 0.7em;
    }

    .buttonAlignMobile {
        float: right !important;
        margin-top: -10px !important;
        margin-bottom: 10px !important;
    }

}

@media only screen and (max-width: 979px) and (-webkit-min-device-pixel-ratio : 1) {

    .diary-font {
        font-size: 0.7em;
    }

    .buttonAlignMobile {
        float: right !important;
        margin-top: -10px !important;
    }

}

@media only screen and (max-width: 1199px) {

    .day-orb {
        margin-top: 1px;
        margin-bottom: 1px;
        width: 80px;
        height: 80px;
        line-height: 0;
        padding-top: 0.5em;
        float: none !important;
    }

    .day {
        width: 115px;
        height: 115px;
    }

    .day h1 {
        font-size: 30px;
    }

    .mobileWidthEx {
        padding-left: 10%;
    }

    .orbAlignMobile {
        padding-left: 8%;
        padding-right: 8%;
    }

    .mobilePageIndent {
        padding-left: 5%;
        padding-right: 5%;
        width: 90%;
    }

    .diaryMobilePlace {
        width: 45% !important;
    }

    .visible-largescreen {
        display: none;
    }

    h1 {
        font-size: 1.5em;
        line-height: 1em;
    }

    h2 {
        font-size: 1.25em;
    }

    h3 {
        font-size: 1.5em;
    }

    .h3MobileSize {
        font-size: 2em;
    }

    legend {
        font-size: 2em;
    }

    .form-horizontal {
        width: 100% !important;
    }

    .input-xxlarge {
        width: 90% !important;
    }

    .hideSpan {
        display: none !important;
    }

    .uploadSize {
        width: 100% !important;
        margin-top: 5px !important;
    }

    .uploadResized {
        width: 50% !important;
        margin-top: 10px !important;
    }

    .deviceHide {
        display: none !important;
    }

    .deviceShow {
        display: block !important;
    }

    .login-details-popout{
        width:40%;
        left:30%;
    }

}

@media only screen and (max-width: 1199px) and (-webkit-min-device-pixel-ratio : 1) {

    .login-details-popout{
        width:40%;
        left:30%;
    }

    .day-orb {
        margin-top: 1px;
        margin-bottom: 1px;
        width: 80px;
        height: 80px;
        line-height: 0;
        padding-top: 0.5em;
        float: none !important;
    }

    .day {
        width: 115px;
        height: 115px;
    }

    .day h1 {
        font-size: 30px;
    }

    .mobileWidthEx {
        padding-left: 10%;
    }

    .orbAlignMobile {
        padding-left: 8%;
        padding-right: 8%;
    }

    .mobilePageIndent {
        padding-left: 5%;
        padding-right: 5%;
        width: 90%;
    }

    .diaryMobilePlace {
        width: 45% !important;
    }

    .visible-largescreen {
        display: none;
    }

    h1 {
        font-size: 1.5em;
        line-height: 1em;
    }

    h2 {
        font-size: 1.25em;
    }

    h3 {
        font-size: 1.5em;
    }

    .h3MobileSize {
        font-size: 2em;
    }

    legend {
        font-size: 2em;
    }

    .form-horizontal {
        width: 100% !important;
    }

    .input-xxlarge {
        width: 90% !important;
    }

    .hideSpan {
        display: none !important;
    }

    .uploadSize {
        width: 100% !important;
        margin-top: 5px !important;
    }

    .uploadResized {
        width: 50% !important;
        margin-top: 10px !important;
    }

    .deviceHide {
        display: none !important;
    }

    .deviceShow {
        display: block !important;
    }

}


/* Mobile devices, screen width less than 768px.  Mainly deactivates the main menu and replaces it with the mobile version */

/* Set the styles for page elements with different screen widths */
@media only screen and (max-width: 767px) {

    html, body {
        overflow-x: none;
        -webkit-text-size-adjust: none;
        height: 100%;
    }

    body {
        font-size: 0.8em;
        line-height: 1.5em;
    }

    pre {
        font-size: 12px;
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .day-orb {
        margin-top: 2px;
        width: 87px;
        height: 87px;
        line-height: 0;
        padding-top: 0.5em;
    }

    .day {
        width: 95px;
        height: 95px;
    }

    .diary-box {
        height: 100%;
        font-size: 2em;
    }

    .diaryMobilePlace {
        width: 90% !important;
    }

    .rowNewLine {
        margin: 10px 10px 10px 0;
        float: left;
    }

    .buttonDivide {
        float: left;
        margin-bottom: 10px;
    }

    label.control-label {
        text-align: left !important;
    }

    label,
    input,
    button,
    select,
    textarea {
        vertical-align: none !important;
    }

    button {
        float: none !important;
    }

    .modal .modal-header .close {
        float: right !important;
    }

    .uploadSize {
        width: 50% !important;
        margin-top: 5px !important;
    }

    .uploadResized {
        margin-top: 10px !important;
    }

    .selectMobile {
        width: 100% !important;
    }

    .pull-left-Mobile {
        float: left !important;
    }

    .align-left-Mobile {
        float: left !important;
        width: 100%;
    }

    .container,
    .navbar,
    .navbar-inner,
    .navbar-static-top {
        width: 100% !important;
        padding: 0 !important;
    }

    .navbar,
    .navbar-inner,
    .navbar-static-top {
        height: 45px !important;
    }

    .navButtonMargin {
        margin-top: 7.5px !important;
    }

    .mobileAlignUp {
        margin-top: 10px !important;
    }

    .input-xxlarge {
        width: 95% !important;
    }

    .mobileButtonOpen {
        margin-left: 40px !important;
        margin-top: -2.5px !important;
    }

    .detailsMobile {
        float: right !important;
    }

    .eventsButtonShow {
        display: block !important;
    }

    .eventsButtonHide {
        display: none !important;
    }

    .systemLogo{
        width:80%;
    }

    .login-details-popout{
        width:50%;
        left:25%;
    }


}

@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio : 1) {

    html, body {
        overflow-x: none;
        -webkit-text-size-adjust: none;
        height: 100%;
    }

    body {
        font-size: 0.8em;
        line-height: 1.5em;
    }

    pre {
        font-size: 12px;
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .systemLogo{
        width:80%;
    }

    .login-details-popout{
        width:50%;
        left:25%;
    }

    .day-orb {
        margin-top: 2px;
        width: 87px;
        height: 87px;
        line-height: 0;
        padding-top: 0.5em;
    }

    .day {
        width: 95px;
        height: 95px;
    }

    .diary-box {
        height: 100%;
        font-size: 2em;
    }

    .diaryMobilePlace {
        width: 90% !important;
    }

    .rowNewLine {
        margin: 10px 10px 10px 0;
        float: left;
    }

    .buttonDivide {
        float: left;
        margin-bottom: 10px;
    }

    label.control-label {
        text-align: left !important;
    }

    label,
    input,
    button,
    select,
    textarea {
        vertical-align: none !important;
    }

    button {
        float: none !important;
    }

    .modal .modal-header .close {
        float: right !important;
    }

    .uploadSize {
        width: 50% !important;
        margin-top: 5px !important;
    }

    .uploadResized {
        margin-top: 10px !important;
    }

    .selectMobile {
        width: 100% !important;
    }

    .pull-left-Mobile {
        float: left !important;
    }

    .align-left-Mobile {
        float: left !important;
        width: 100%;
    }

    .container,
    .navbar,
    .navbar-inner,
    .navbar-static-top {
        width: 100% !important;
        padding: 0 !important;
    }

    .navbar,
    .navbar-inner,
    .navbar-static-top {
        height: 45px !important;
    }

    .navButtonMargin {
        margin-top: 7.5px !important;
    }

    .mobileAlignUp {
        margin-top: 10px !important;
    }

    .input-xxlarge {
        width: 95% !important;
    }

    .mobileButtonOpen {
        margin-left: 40px !important;
        margin-top: -2.5px !important;
    }

    .detailsMobile {
        float: right !important;
    }

    .eventsButtonShow {
        display: block !important;
    }

    .eventsButtonHide {
        display: none !important;
    }

}

@media only screen and (min-width: 768px) and (max-width: 979px) {

    .day-orb {
        width: 105px;
        height: 105px;
    }

    .container {
        width: 100% !important;
        padding: 0 !important;
    }

    .diary-box {
        height: 100%;
        font-size: 1.75em;
    }

    .tabletWidth {
        margin-top: 10px;
        width: 97.5% !important;
    }

    .diaryMobilePlace {
        width: 41% !important;
    }

}

@media only screen and (min-width: 768px) and (max-width: 979px) and (-webkit-min-device-pixel-ratio : 1) {

    .day-orb {
        width: 105px;
        height: 105px;
    }

    .container {
        width: 100% !important;
        padding: 0 !important;
    }

    .diary-box {
        height: 100%;
        font-size: 1.75em;
    }

    .tabletWidth {
        margin-top: 10px;
        width: 97.5% !important;
    }

    .diaryMobilePlace {
        width: 41% !important;
    }

}

@media only screen and (min-width: 979px) and (max-width: 1199px) {

    .diary-box {
        height: 100%;
        font-size: 1.5em;
    }

}

@media only screen and (min-width: 979px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio : 1) {

    .diary-box {
        height: 100%;
        font-size: 1.5em;
    }

}

/* Medium Devices ----------- */
@media only screen and (min-width : 480px) and (max-width : 767px) {

    .day-orb {
        width: 85px;
        height: 85px;
    }

    .diary-box {
        height: 100%;
        font-size: 1.75em;
    }

    li.noteList {
        font-size: 0.8em;
    }

    .notifications li {
        width: 400px;
    }

    .mobileMediumPadding {
        padding-left: 15%;
        padding-right: 15%;
    }

    .dropdownReduceSize {
        width: 50%;
    }

    .navbar .brand {
        padding-left: 30px !important;
    }

}

@media only screen and (min-width : 480px) and (max-width : 767px) and (-webkit-min-device-pixel-ratio : 1) {

    .day-orb {
        width: 85px;
        height: 85px;
    }

    .diary-box {
        height: 100%;
        font-size: 1.75em;
    }

    li.noteList {
        font-size: 0.8em;
    }

    .notifications li {
        width: 400px;
    }

    .mobileMediumPadding {
        padding-left: 15%;
        padding-right: 15%;
    }

    .dropdownReduceSize {
        width: 50%;
    }

    .navbar .brand {
        padding-left: 30px !important;
    }

}

/* All Mobiles smaller than 480px ----------- */
@media only screen and (max-width : 480px) {

    .login-details-popout{
        width:100%;
        left:0;
    }

    .day-orb {
        width: 80px;
        height: 80px;
        margin: 0 !important;
    }

    .diary-box {
        height: 100%;
        font-size: 1.5em;
    }

    h2 {
        font-size: 1em;
    }

    h3 {
        font-size: 1em;
    }

    .nonMobileColumn {
        display: none !important;
    }

    .elementHidden {
        display: none !important;
    }

    .notifications li {
        width: 300px;
    }

    .taskColumn {
        display: none;
    }

    .dropdownReduceSize {
        width: 65%;
    }

    .buttonDivide {
        width: 100% !important;
    }

    .mobileButtonLeft,
    input,
    select,
    textarea {
        /*float: none !important;*/
    }

    .well {
        width: 95% !important;
        overflow: hidden !important;
    }

}

@media only screen and (max-width : 480px) and (-webkit-min-device-pixel-ratio : 1) {
    .login-details-popout{
        width:100%;
        left:0;
    }


    .day-orb {
        width: 80px;
        height: 80px;
        margin: 0 !important;
    }

    .diary-box {
        height: 100%;
        font-size: 1.5em;
    }

    h2 {
        font-size: 1em;
    }

    h3 {
        font-size: 1em;
    }

    .nonMobileColumn {
        display: none !important;
    }

    .elementHidden {
        display: none !important;
    }

    .notifications li {
        width: 300px;
    }

    .taskColumn {
        display: none;
    }

    .buttonDivide {
        width: 100% !important;
    }

    .mobileButtonLeft,
    input,
    select,
    textarea {
        /*float: none !important;*/
    }

}

/* All Mobiles smaller than 320px  ----------- */
@media only screen and (max-width : 320px) {

    .mobileButtonClose {
        padding-left: 65%;
    }

    .notifications li {
        width: 250px;
    }

    .form-horizontal {
        width: 95% !important;
    }

}

@media only screen and (max-width : 320px) and (-webkit-min-device-pixel-ratio : 1) {

    .mobileButtonClose {
        padding-left: 65%;
    }

    .notifications li {
        width: 250px;
    }

    .form-horizontal {
        width: 95% !important;
    }

}

/* These next few media queires fix an isue which prevents users from scrolling modal forms on small devices */
@media (max-width: 600px) {

    .modal {
        height: 500px; /* Set a default max height of the modal (adjusted later)*/
        position: fixed; /* Display modal in the centre of your screen */
        overflow-y: scroll; /*  Ensure that the modal is scroll-able */
        overflow-x: none; /*  While ensuring that the modal can't be scrolled horizontally */
        -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
    }

    .form-horizontal .modal .controls {
        margin-left: 0;
    }

    .modal.fade.in {
        top: 5px; /* Use more screen real estate */
    }

    .modal-body {
        /* Increase the max height of the modal body to try & avoid both it,
        * and the modal container having scroll bars which results in odd behavior */
        max-height: 2400px;
    }
}

/* Now adjust the height so it handles various screen sizes & orientations */
/* You could make this as granular as you like, or have it more granular at common screen sizes
* but it should start at the height we set on .modal (i.e. 500px) & work down */
@media (max-width: 600px) and (max-height: 500px){.modal{ height: 450px}}
@media (max-width: 600px) and (max-height: 450px){.modal{ height: 400px}}
@media (max-width: 600px) and (max-height: 400px){.modal{ height: 350px}}
@media (max-width: 600px) and (max-height: 350px){.modal{ height: 300px}}
@media (max-width: 600px) and (max-height: 300px){.modal{ height: 250px}}
@media (max-width: 600px) and (max-height: 250px){.modal{ height: 200px}}
@media (max-width: 600px) and (max-height: 200px){.modal{ height: 150px}}


/* THESE NEXT FEW QUERIES ARE FOR TABLET DETECTION */

/* Basic Tablets ----------- */
@media only screen and (min-width : 768px) and (max-width : 1199px) {

    .iPadPortrait {
      clear: both;
  }

  input[type="file"],
  .selectRating {
    font-size: 1em;
}

.dateBirthResize {
    width: 80% !important;
}

.tabletSpanWidth {
    width: 48.5% !important;
}

.formMoveTablet {
    margin-left: -7.5% !important;
}

.classMoveTablet {
   margin-left: -10% !important;
}

.centerFormButton {
    margin-left: 7.5% !important;
}

.textTabletShow {
    display: block !important;
}

.textTabletHide {
    display: none !important;
}

}

@media only screen and (min-width : 768px) and (max-width : 1199px) and (-webkit-min-device-pixel-ratio : 1) {

    .iPadPortrait {
      clear: both;
  }

  #myModal .modal-body {
    max-height: 1000px;
}

input[type="file"],
.selectRating {
    font-size: 1em;
}

.dateBirthResize {
    width: 80% !important;
}

.tabletSpanWidth {
    width: 48.5% !important;
}

.tabletFormSpace {
    display: block !important;
}

.formMoveTablet {
    margin-left: -7.5% !important;
}

.classMoveTablet {
   margin-left: -10% !important;
}

.centerFormButton {
    margin-left: 7.5% !important;
}

.textTabletShow {
    display: block !important;
}

.textTabletHide {
    display: none !important;
}

}

/* THESE LAST TWO QUERIES DEAL WITH LARGE DESKTOP SCREEN SIZES */

/* Desktops and laptops ----------- */
@media only screen and (min-width : 980px) {
    .login-details-popout{
        /*width:40%;
        left:30%;*/
        left:35%;
        width: 30%;
    }

    .loginWidth {
        width: 60% !important;
        padding-left: 20% !important;
    }

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

}