/*From sticky-footer-navbar

html {
	position: relative; min-height: 100%;
}
body {
	margin-bottom: 60px;
}
.footer {
	width: 100%; height: 60px; bottom: 0px; position: absolute; background-color: rgb(245, 245, 245);
}*/
/* the following two ensure the top of the page starts below the navbar*/
body > .container {
    padding: 60px 15px 0;
}

body > .container-fluid {
    padding: 50px 0 0;
}

.container .text-muted {
    margin: 20px 0;
}

.footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 15px;
}

code {
    font-size: 80%;
}
/*END From sticky-footer-navbar*/

/*
body {
    background-color: #e7e7e7;
}*/

/* context menu start*/
#context-menu {
    font: bold 14px "Arial", serif !important;
    color: darkblue;
}

/*menu drop downs*/
.navbar.bigmenutext .dropdown-menu>li>a {
    font-weight:bold;
    font-style: oblique;
    font-size: large;
}
.fa-fw {
    color: dodgerblue;
}
.redText,
.redText > .k-link {
    color: red;
}

    .redText.k-state-disabled > .k-link {
        color: lightcoral;
    }
/* context menu end*/

.billsBody {
    height: 620px;
    overflow-y: auto;
}

.well-blue {
    background-color: aliceblue;
}

.well-blue-withborder {
    background-color: aliceblue;
    border-color: lightskyblue;
}


.well {
    margin-top: 8px;
}

#page {
    margin: 80px 15px 0 15px;
}

.panel {
    background-color: #fff;
    padding: 9px;
}

    .panel h2, .panel h3 {
        margin: 0;
    }

.userSelection-true {
    height: 160px;
    overflow-y: auto;
}

.userSelection-false {
    height: 85px;
    overflow-y: auto;
}

/*Add strikethrough decoration */
.valid-false {
    /*text-decoration: line-through;*/
    color: red;
}

.toolbar-btns {
    margin-left: 5px;
}
/* make scheduler view buttons sit on left*/
.k-scheduler-toolbar > ul {
    float: none;
}
/* stop scheduler buttons floating over menu in ipad type width*/
.k-scheduler-toolbar>ul.k-scheduler-views{
    z-index: 500 !important; /* Set up a value suitable for your app */
}

/* change navigation header calendar date format to long so the day is visible */
.k-sm-date-format {
    display: none !important;
}
.k-lg-date-format {
    display: inline !important;
}
/* end date format */

.error {
    color: red;
}

.patternTable-short {
    height: 320px;
    overflow-y: auto;
}

.patternTable-short-ex {
    height: 240px;
    overflow-y: auto;
}


.patternTable-long {
    height: 580px;
    overflow-y: auto;
}

/* reduce space taken*/
hr {
    margin-top: 1px;
    margin-bottom: 10px;
}

/* for page wrapper and left hand sidebar*/

#wrapper {
    width: 100%;
}

#page-wrapper {
    padding: 0 15px;
    /* min-height: 568px; removed this because it was causing scroll bars when height reduced greatly*/
    /*    background-color: #ffffff; */
}

/* if using kendo bootstrap css, need to override these values*/
.k-scheduler-times tr, .k-scheduler-times th, .k-scheduler-table td, .k-scheduler-header th, .k-scheduler-header-wrap, .k-scheduler-times {
    border-color: #c5c5c5;
}

.k-scheduler-table .k-today, .k-today > .k-scheduler-datecolumn, .k-today > .k-scheduler-groupcolumn {
    background-color: white;
}
/* end of kendo boostrap override*/

/* kendo context menu - prevent word wrap*/
.k-context-menu .k-link {
    white-space: nowrap;
}

/* kendo grid*/
#genGrid .k-grid-header .k-header {
    background-color: aliceblue;
}

#genGrid .k-grid-header-wrap {
    background-color: aliceblue;
}

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 225px;
        /*padding: 10px 10px 0px;*/
        border-left: 1px solid #e7e7e7;
    }
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

.sidebar .sidebar-search {
    padding: 15px;
}

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
}

    .sidebar ul li a.active {
        background-color: #eee;
    }

.sidebar .arrow {
    float: right;
}

.sidebar .fa.arrow:before {
    content: "\f104";
}

.sidebar .active > a > .fa.arrow:before {
    content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: 0 !important;
}

    .sidebar .nav-second-level li a {
        padding-left: 37px;
    }

    .sidebar .nav-third-level li a {
        padding-left: 52px;
    }

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 220px;
        margin-top: 0px;
        background: #ffffff;
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}

/* END page wrapper and left hand sidebar*/
/*
.transitsBody-false .table td:not(:first-child), .investments .table th:not(:first-child) {
    text-align: right;
}
*/


.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #edf2f8;
}

.table-hover > tbody > tr:hover {
    background-color: #e0dcf1;
}

/* centre items in cell*/
/*
   .filter-form {
    width: 250px;
    position: fixed;
    right: 0;
    top: 0;
    padding: 8px;
    z-index: 1040;
}
.td vcenter {
    vertical-align: middle;
    text-align:center;
}
.table-striped > tbody > td vleft {
    text-align: left;
}

.imagineTable, .imagineTable td{
   border-color: black;
}


.filter-form {
    width: 250px;
    position: fixed;
    right: 0;
    top: 0;
    padding: 8px;
    z-index: 1040;
}
    */

@media (max-width: 768px) {
    .filter-form {
        right: 64px;
    }
}

/* field validaton set red if invalid*/
.form-validation input.ng-invalid.ng-touched {
    background-color: #FA787E;
}


/* kendo console for debug*/
.console div {
    /*background-image: url("/appkendo/img/sprite.png");*/
    background-repeat: no-repeat;
    background-color: transparent;
}

* html .console div {
    background-image: url("sprite_ie6.png");
}

.console {
    background-color: #FFF;
    border: 1px solid #CCC;
    color: #333;
    font: 11px Consolas, Monaco, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    height: 200px;
    margin: 1.4em 0 0;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: left;
}

    .console .count {
        background-color: #91AFEF;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        color: #FFFFFF;
        font-size: 10px;
        margin-left: 5px;
        padding: 2px 6px 2px 5px;
    }

    .console div {
        background-position: 6px -95px;
        border-bottom: 1px solid #DDD;
        padding: 5px 5px 4px 24px;
    }

    .console .error {
        background-position: 6px -135px;
    }

/*
tr {
    height: 20px;   
}
td {
    text-align: center;
    vertical-align: middle;  
}
    */


/*
.table-hover tbody tr {
    cursor: pointer;
}

.bs-example {
    font-family: sans-serif;
    position: relative;
    margin: 100px;
}


}*/

.table-imagine-bordered {
    border: 2px solid black;
    font-size: 85%;
}

    .table-imagine-bordered > thead > tr > th,
    .table-imagine-bordered > tbody > tr > th,
    .table-imagine-bordered > tfoot > tr > th,
    .table-imagine-bordered > thead > tr > td,
    .table-imagine-bordered > tbody > tr > td,
    .table-imagine-bordered > tfoot > tr > td {
        border: 1px solid black;
    }

    .table-imagine-bordered > thead > tr > th,
    .table-imagine-bordered > thead > tr > td {
        border-bottom-width: 2px;
    }

/* Add horizontal scrolling to Kendo UI scheduler
.k-scheduler-layout {
        table-layout: fixed;
    }
      
    .k-scheduler-layout > tbody > tr > td:first-child
    {
        width: 80px;
    }
      
    .k-scheduler-content .k-scheduler-table,
    .k-scheduler-header .k-scheduler-table
    {
        width: 2000px
    }
*/
/* In case you want to prevent the Delete button (icon) from appearing inside the events on hover, you can use CSS: */
#scheduler .k-event .k-event-delete,
#scheduler tr > td > .k-task .k-event-delete {
    display: none;
}


/* service card classes */


.white {
    color: white;
}

    .white:hover {
        color: white;
    }

.card {
    background-color: #fff;
    border: 1px solid #d4d4d4;
    height: 100px;
    margin-bottom: 20px;
    position: relative;
}

.cardHeader {
    background-color: #027FF4;
    font-size: 14pt;
    color: white;
    padding: 5px;
    width: 100%;
}

.cardClose {
    color: white;
    font-weight: bold;
    margin-right: 5px;
}

.cardContainer {
    width: 85%;
}

.cardBody {
    padding-left: 5px;
}

.cardBodyLeft {
    margin-top: -5px;
}

.cardBodyRight {
    margin-left: 20px;
    margin-top: 2px;
}

.cardBodyContent {
    width: 100px;
}

.cardImage {
    height: 50px;
    width: 50px;
    margin-top: 10px;
}

.cardContainer .col-md-3 {
    padding-left: 0px;
}

.servicePanel .panel-heading {
    color: #fff;
    background-color: #027FF4;
    border-color: #dddddd;
}

/* Animations  slides pages right to left*/
.slide-animation-container {
    position: relative;
}

.slide-animation.ng-enter, .slide-animation.ng-leave {
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
    position: relative;
    /*top: 0;
    left: 0;
    right: 0;*/
    height: 1000px;
}

.slide-animation.ng-enter {
    z-index: 100;
    left: 100px;
    opacity: 0;
}

    .slide-animation.ng-enter.ng-enter-active {
        left: 0;
        opacity: 1;
    }

.slide-animation.ng-leave {
    z-index: 101;
    opacity: 1;
    left: 0;
}

    .slide-animation.ng-leave.ng-leave-active {
        left: -100px;
        opacity: 0;
    }

body.skip-animations * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.show-hide-animation.ng-hide-add,
.show-hide-animation.ng-hide-remove {
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
    display: block !important;
    height: 1000px;
}

.show-hide-animation.ng-hide-remove {
    opacity: 0;
}

    .show-hide-animation.ng-hide-remove.ng-hide-remove-active {
        opacity: 1;
    }

.show-hide-animation.ng-hide-add {
    opacity: 1;
}

    .show-hide-animation.ng-hide-add.ng-hide-add-active {
        opacity: 0;
    }

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
    position: relative;
}

.repeat-animation.ng-enter {
    left: 10px;
    opacity: 0;
}

    .repeat-animation.ng-enter.ng-enter-active {
        left: 0;
        opacity: 1;
    }

.repeat-animation.ng-leave {
    left: 10px;
    opacity: 1;
}

    .repeat-animation.ng-leave.ng-leave-active {
        left: -10px;
        opacity: 0;
    }

.repeat-animation.ng-move {
    opacity: 0.5;
}

    .repeat-animation.ng-move.ng-move-active {
        opacity: 1;
    }
/* animations end*/

/* Kendo UI notifcations template */

.k-notification-info.k-group {
    background: rgba(0%,0%,0%,.7);
    color: #fff;
}

.new-mail {
    width: 300px;
    height: 100px;
}

    .new-mail h3 {
        font-size: 1em;
        padding: 32px 10px 5px;
    }

    .new-mail img {
        float: left;
        margin: 30px 15px 30px 30px;
    }

/* modal form */

@media (min-width:760px) {
    .modal-xlg .modal-dialog {
        width: 750px;
    }
}
@media (min-width:1010px) {
    .modal-xlg .modal-dialog {
        width: 1000px;
    }
}
@media (min-width:1100px) {
    .modal-xlg .modal-dialog {
        width: 1300px;
    }
}

/* Error template */
.k-notification-error.k-group {
    background: rgba(100%,0%,0%,.7);
    color: #ffffff;
}

.wrong-pass {
    width: 400px;
    height: 150px;
}

.k-notification-wrong-pass.k-group {
    background: rgba(100%,0%,0%,.7);
    color: #ffffff;
}

.wrong-pass h3 {
   /* font-size: 1em;*/
    padding: 10px 10px 5px;
}
/*30px 15px 30px 30px;*/
.wrong-pass img {
    float: left;
    margin: 5px 15px 60px 10px;
}

/* Success template */
.k-notification-upload-success.k-group {
    background: rgba(0%,60%,0%,.7);
    color: #fff;
}

.upload-success {
    width: 205px;
    height: 100px;
    padding: 0 30px;
    line-height: 100px;
}

    .upload-success h3 {
        font-size: 1.7em;
        font-weight: normal;
        display: inline-block;
        vertical-align: middle;
        color: white;
    }

    .upload-success img {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }
/* end of notifications*/
/* login form */
.form-login {
    max-width: 330px;
    padding: 0 15px 5px 15px;
    margin: 0 auto;
}

    .form-login .form-login-heading {
        margin-bottom: 10px;
    }

    .form-login .form-control {
        position: relative;
        height: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
    }

        .form-login .form-control:focus {
            z-index: 2;
        }

    .form-login input[type="password"] {
        margin-top: 5px;
        margin-bottom: 5px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
/* end of form login*/
/* experimental front screen images*/
#box2 {
    color: #000000;
    font-weight: bolder;
    background-image: url("/img/backgrnd2.jpg");
    background-repeat: repeat;
    height: 360px;
    opacity: 1;
    width: 100%;
}

#box3 {
    color: #000000;
    font-weight: bolder;
    background-image: url("/img/backgrnd2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 650px;
    opacity: 1;
    width: 100%;
}

/* black and white */
.BandW {
    background-color: black !important;
    color: white;
    font-weight: bold;
    font-size: larger;
}

.billRed {
    color: #ffffff;
    background-color: #cd0200;
    font-weight: bold;
    font-size: larger;
}

/* printing */
h5.billCenter {
    text-align: center;
}

.table td.tdRight {
    text-align: right;
}

.table td.tdCenter {
    text-align: center;
}

.table-nonfluid {
    width: auto;
}

.td {
    background-color: #474949;
    color: white;
}

.billWell {
    background-color: skyblue;
    color: black;
}

@media print {

    .pdf-page {
        margin: 0 auto;
        box-sizing: border-box;
        box-shadow: 0 5px 10px 0 rgba(0,0,0,.3);
        background-color: #fff !important;
        color: #333 !important;
        position: relative;
    }

    .pdf-header {
        position: absolute;
        top: .5in;
        height: .6in;
        left: .5in;
        right: .5in;
        border-bottom: 1px solid #e5e5e5;
    }

    .invoice-number {
        padding-top: .17in;
        float: right;
    }

    .pdf-footer {
        position: absolute;
        bottom: .5in;
        height: .6in;
        left: .5in;
        right: .5in;
        padding-top: 10px;
        border-top: 1px solid #e5e5e5;
        text-align: left;
        color: #787878;
        font-size: 12px;
    }

    .pdf-body {
        position: absolute;
        top: 2.7in;
        bottom: 1.2in;
        left: .5in;
        right: .5in;
    }

    .size-a4 {
        width: 8.3in;
        height: 11.7in;
    }

    .company-logo {
        font-size: 30px !important;
        font-weight: bold !important;
        color: #3aabf0 !important;
    }

    .for {
        position: absolute;
        top: 1.5in;
        left: .5in;
        /*width: 2.5in;*/
    }

    .from {
        position: absolute;
        top: 1.5in;
        right: .5in;
        width: 2.5in;
    }

        .from p, .for p {
            color: #787878 !important;
        }

    .signature {
        padding-top: .5in;
    }
}

/* selection in stylist order*/
.selected {
    color: white;
    background-color: black;
}
/* online symbols*/

.connected {
    color: #26FA29;
}

.waitingForConnection {
    color: red;
    font-weight: bold;
    animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
    -webkit-animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes blinker {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* print in receipt size*/
.receipt {
    width: 80mm;
    /*margin-top: -120px; this was added to try and reduce gap at top of receipt, not sure its needed now*/
    float: none;
    font-size: 18px;
    font-family: helvetica, aerial;
    line-height: .4;
}

    .receipt .table > tbody > tr > td {
        padding: 6px;
        line-height: 0.8;
    }

.printA4 {
}

.receipt-cli-details {
    width: 80mm;
    /*margin-top: -120px; this was added to try and reduce gap at top of receipt, not sure its needed now*/
    float: none;
    font-size: 8px;
    font-family: helvetica, aerial;
    line-height: .4;
}

    .receipt-cli-details .table > tbody > tr > td {
        padding: 6px;
        line-height: 0.8;
    }
/* scheduler print*/
@media print {
    .k-scheduler,
    .k-scheduler-content,
    .k-scheduler-times {
        height: auto !important;
    }

    .k-scheduler-content {
        overflow-y: scroll !important;
    }
}
/* stylist photo */
   .thumb {
        width: 48px;
        height: 48px;
        float: none;
        position: relative;
        top: 7px;
    }

    form .progress {
        line-height: 15px;
    }

    .progress {
        display: inline-block;
        width: 100px;
        border: 3px groove #CCC;
    }

    .progress div {
        font-size: smaller;
        background: orange;
        width: 0;
    }

/*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/
#grid-min-width table {
    min-width: 1000px;
}


/* reports grid */
.k-grid.reports-grid {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    font-size: 12px;      
}

.k-grid.reports-grid .k-button {
    float: right;  /* tool bar button */
}

.k-grid.reports-grid tr {
    background-color: #fff; /* remove alternalte row colour in bootstrap css */
}
.k-grid.reports-grid-center {
        
    padding-left:0;
    padding-right:0;
} 
.k-grid.reports-grid-narrow {
        
    margin-left:15px;
    margin-right:15px;
}
.k-grid.reports-grid .k-grid-header .k-header {
    text-align: center;
    font-weight:bold;
}   

/* till recon grid*/
.k-grid.recon-grid .k-grid-header .k-header {
    text-align: center;
    font-weight:bold;
}  

/* navbar collapse - make it collapse at 1000px*/
@media (max-width: 1000px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
    .navbar-collapse.in {
        overflow-y: auto !important;
    }
	.navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
    .navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #999;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, 
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #fff;
        background-color: transparent;
        background-image:none;
    }
}
/* Problem with 15 min time slots switching to 50% width when zoom is < 50%
  Scheduler items have set minimal height so the first line will not be cropped. If you would like to remove this rule, you can achieve it by applying the following CSS: */
.k-event {
    min-height: 0 !important;
}

/* kendo recommendations to get bootstrap to work correctly
https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#use-form-control-bootstrap-css-class
*/
.form-control.k-widget
{
    padding: 0;
    width: 100%;
    height: auto;
}

.form-control.k-widget:not(.k-autocomplete)
{
    border-width: 0;
}

.ng-pageslide {
    background: #eee;
}

.scrollableDiv {
    height: calc(98vh - 6em);
    overflow-y: auto;
    /*   margin-bottom: 20px;*/
}