@colour1: #ffffff; // Colour1
@colour2: #efefef; // Colour2
@colour3: #a9a9a9; // Colour3
@colour4: #c9c9c9; // Colour4
@colour5: #58595b; // Colour5
@colour6: #000000; // Colour6
@colour7: #58595b; // Colour7
@colour8: #a9a9a9;// Colour8
@colour9: #58595b; // Colour9
@colour10: #a9a9a9;// Colour10
@colour11: #58595b; // Colour11
@colour12: #58595b; // Colour12
@colour13: #58595b; // Colour13
@colour14: #a9a9a9; // Colour14
@colour15: #dedede; // Colour15

// Width variables (appears count calculates by raw css)
@width11: 100%; // Appears 12 times
@width15: 50%; // Appears 6 times

// Height variables (appears count calculates by raw css)
@height6: 100%; // Appears 12 times
@swooshurl:"../../content/images/v8_waves_background.png";

// @import (css) "googlefont/googlefont.css";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(../styles/iconfonts/css/hcm.css); 

*  {     margin: 0; }

html, body { height: 100%; }

.tile {
    background-color: @colour1;
    text-align: center;
    padding: 20px 10px;
    min-height: 320px;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px 0 @colour4
}

.chart-tile {
    padding: 1px;
}

@media screen and (max-width: 768px) {
    .tile {
        min-height: 320px;
    }

    .truncate-overflow {
        max-height: 240px;
    }
}

@media screen and (min-width:769px) and (max-width: 1000px) {
    .tile {
        min-height: 400px;
    }

    .truncate-overflow {
        max-height: 280px;
    }
}

@media screen and (min-width:1001px) and (max-width: 1200px) {
    .tile {
        min-height: 360px;
    }

    .truncate-overflow {
        max-height: 220px;
    }
}

@media screen and (min-width:1201px) and (max-width: 1450px) {
    .tile {
        min-height: 400px;
    }

    .truncate-overflow {
        max-height: 300px;
    }
}

@media screen and (min-width:1451px) and (max-width: 1700px) {
    .tile {
        min-height: 380px;
    }

    .truncate-overflow {
        max-height: 300px;
    }
}

@media screen and (min-width: 1701px) {
    .truncate-overflow {
        max-height: 160px;
    }
}

/* restrict the height for the profile image for tiles on the PM landing page for larger screens */
@media screen and (min-width: 1024px) {
    .tile > div.col-sm-3 > img {
        max-height: 150px;
    }
}

.landing-page-module-tile {
    height: 285px;
    position: relative;
    padding: 0px;
}

.hram-headline-tile {
    height: auto;
    min-height: 0;
}

.tile-icon-red {
    color: @colour10;
}

.tile-icon-orange {
    color: @colour8;
}

.tile-icon-green {
    color: @colour14;
}

.tile-icon {
    padding-top: 30px;
    font-size: 100px;
}

.custom-tile-icon {
    font-size: 50px;
}

.tile-icon-small {
    font-size: 80px;
}

.tile-task {
    font-size: 30px;
}

.tile-task-label {
    font-size: 15px;
}

.tile-heading {
    margin-top: 10px;
}

.contentwrapper {
    height: @height6;
    height: auto !important;
    margin: 0 auto -30px;
    min-height: @height6;
}

.footer, .push { height: 30px; }

body {
    -moz-border-bottom-left-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    background: @colour2;
    background-attachment: fixed;
    background-color: @colour2;
    //background-image: url("../../content/images/contentbg.png"),url(@swooshurl);
    background-position: left bottom;
    background-repeat: repeat, no-repeat;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    clear: both;
    color: @colour5;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    margin: 0px !important;
    padding: 0px !important;
    text-rendering: optimizeLegibility;
}

ul {
    li {
    }
}
a, a:hover, a:focus  {
    outline: none;
    text-decoration: none;
}
#container {
    height: @height6;
    width: @width11;
}
.login-body {
    background-color: @colour1;
}
.form-signin {
    -webkit-border-radius: 5px;
    background: @colour1;
    border-radius: 5px;
    margin: 100px auto 0;
    max-width: @width15;
    h2.form-signin-heading {
        -webkit-border-radius: 5px 5px 0 0;
        background: @colour13;
        border-radius: 5px 5px 0 0;
        color: @colour1;
        font-family: 'Open Sans', sans-serif;
        font-size: 18px;
        font-weight: 300;
        margin: 0;
        padding: 20px 15px;
        text-align: center;
        text-transform: uppercase;
    }
    .checkbox {
        color: @colour5;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        font-weight: normal;
        margin-bottom: 14px;
    }
    .form-control {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 16px;
        height: auto;
        padding: 10px;
        position: relative;
        &:focus {
            z-index: 2;
        }
    }
    input[type="text"] {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid @colour3;
        box-shadow: none;
        font-size: 15px;
    }
    input[type="password"] {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        border: 1px solid @colour3;
        box-shadow: none;
        font-size: 15px;
    }
    .btn-login {
        background: @colour13;
        box-shadow: 0 4px @colour13;
        color: @colour1;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        margin-bottom: 20px;
        padding: 5px;
        text-transform: uppercase;
    }
    p {
        color: @colour5;
        font-size: 16px;
        font-weight: 300;
        text-align: center;
    }
    a {
        color: @colour13;
        &:hover {
            color: @colour13;
        }
    }
}
.login-wrap {
    padding: 20px;
}
#main-content {
}

#error-401-content {
    padding: 50px;
    text-align:center;
}

.header, .footer {
    min-height: 60px;
    padding: 0 15px;
}

.header {
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1002;
}


.white-bg {
    background: @colour1;
    border-bottom: 1px solid @colour1;
}
.wrapper {
    display: inline-block;
    margin-top: 10px;
    padding: 15px;
    padding-bottom: 0;
    padding-left: 12px;
    width: @width11;
}
.logo {
    color: @colour6;
    float: left;
    font-size: 21px;
    margin-top: 5px;
    padding-left: 5px;
    text-transform: uppercase;
    &:hover {
        outline: none;
        text-decoration: none;
    }
}
.banner {
    color: @colour6;
    float: left;
    font-size: 21px;
    margin-top: 10px;
    text-transform: uppercase;
}

a.logo {
    &:focus {
        outline: none;
        text-decoration: none;
    }
}
img.logo {
    height: 40px;
}
ul.top-menu>li>a {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid @colour2 !important;
    color: @colour5;
    font-size: 16px;
    margin-right: 15px;
    padding: 2px 6px;
}
.dropdown-menu.extended {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
    max-width: 300px !important;
    min-width: 160px !important;
    padding: 0;
    top: 25px;
    width: 235px !important;
    li {
        p {
            -webkit-border-radius: 4px 4px 0px 0px;
            background-color: @colour1;
            border-radius: 4px 4px 0px 0px;
            color: @colour5;
            margin: 0;
            padding: 10px;
        }
        a {
            border-bottom: 1px solid @colour2 !important;
            display: inline-block;
            font-size: 13px;
            list-style: none;
            padding: 15px 10px !important;
            width: @width11;
            &:hover {
                background-color: @colour1 !important;
                color: @colour6;
            }
        }
    }
    .progress {
        height: 10px;
        margin-bottom: 0 !important;
    }
}
.dropdown-menu.tasks-bar {
    .task-info {
        .desc {
            font-size: 13px;
            font-weight: normal;
        }
        .percent {
            display: inline-block;
            float: right;
            font-size: 13px;
            font-weight: 600;
            margin-top: -4px;
            padding-left: 10px;
        }
    }
}
.top-nav {
    margin-top: 7px;
    ul.top-menu>li {
        margin-left: 10px;
        .dropdown-menu.logout {
            width: 268px !important;
        }
    }
    li.dropdown {
        .dropdown-menu {
            left: auto;
            float: right;
            right: 0;
        }
    }
    .username {
        color: @colour5;
        font-size: 13px;
    }
    ul.top-menu>li>a {
        -webkit-border-radius: 4px;
        background: none;
        border-radius: 4px;
        border: 1px solid @colour1;
        margin-right: 0;
        padding: 6px;
        &:hover {
            background: @colour1;
            border: 1px solid @colour1;
            .caret {
                border-bottom-color: @colour5;
                border-top-color: @colour5;
            }
        }
        &:focus {
            background: @colour1;
            border: 1px solid @colour1;
        }
    }
    .dropdown-menu.extended.logout {
        top: 40px;
    }
    .dropdown-menu.extended.notification {
        top: 40px;
    }
    .nav {
        .caret {
            border-bottom-color: @colour5;
            border-top-color: @colour5;
        }
    }
}
.dropdown-menu.extended.logout>li {
    float: left;
    text-align: center;
    width: 33.3%;
    &:last-child {
        background: @colour13;
        border-radius: 0 0 3px 3px;
        float: left;
        text-align: center;
        width: @width11;
    }
    &:last-child>a {
        border-bottom: none !important;
        color: @colour1;
        text-transform: uppercase;
        hover {
            border-bottom: none !important;
            color: @colour1;
            text-transform: uppercase;
        }
        hover>i {
            color: @colour1;
        }
    }
}
.dropdown-menu.extended.logout>li>a {
    border-bottom: none !important;
    color: @colour5;
    &:hover {
        background: none !important;
        i {
            color: @colour11;
        }
    }
    i {
        font-size: 17px;
    }
}
.full-width {
    .dropdown-menu.extended.logout>li>a {
        &:hover {
            background: none !important;
            color: @colour11 !important;
        }
    }
    #main-content {
        margin-left: 0;
    }
    .navbar-header {
        width: @width11;
    }
    .dropdown-menu {
        box-shadow: none;
    }
    .dropdown-menu>li>a {
        font-size: 13px;
        padding: 10px 20px;
    }
}
.dropdown-menu.extended.logout>li>a>i {
    display: block;
}
.log-arrow-up {
    background: url("../images/arrow-up.png") no-repeat;
    height: 11px;
    position: absolute;
    right: 20px;
    top: -10px;
    width: 20px;
}
.border-head {
    h3 {
        border-bottom: 1px solid @colour5;
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 0;
        padding-bottom: 5px;
        width: @width11;
    }

    h4 {
        border-bottom: 1px solid @colour5;
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 0;
        padding-bottom: 5px;
        width: @width11;
        color: @colour5
    }
}
.inline-block {
    display: inline-block;
}
.task-thumb {
    float: left;
    margin-bottom: 5px;
    margin-right: 10px;
    width: 150px;
    img {
        -webkit-border-radius: 4px;
        border-radius: 4px;
        border:1px solid @colour3;
    }
}
.timeline {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    position: relative;
    table-layout: fixed;
    width: @width11;
    &:before {
        background-color: @colour5;
        bottom: 0px;
        content: "";
        left: 50%;
        position: absolute;
        top: 0;
        width: 2px;
        z-index: 0;
    }
    .timeline-icon {
        -webkit-border-radius: 50%;
        background: @colour5;
        border-radius: 50%;
        border: 3px solid @colour1;
        box-shadow: 0 0 0 3px @colour5;
        display: block;
        height: 12px;
        left: -30px;
        position: absolute;
        top: 15px;
        width: 12px;
    }
    .timeline-icon.red {
        background: @colour9;
        box-shadow: 0 0 0 3px @colour9;
    }
    .timeline-icon.green {
        background: @colour14;
        box-shadow: 0 0 0 3px @colour14;
    }
    .timeline-icon.blue {
        background: @colour11;
        box-shadow: 0 0 0 3px @colour11;
    }
    .time-icon {
        &:before {
            font-size: 16px;
            margin-top: 5px;
        }
    }
    .timeline-date {
        left: -200px;
        position: absolute;
        text-align: right;
        top: 12px;
        width: 150px;
    }

    .timeline-longdate {
        left: -200px;
        position: absolute;
        text-align: right;
        top: 12px;
        width: 250px;
    }
}
h3.timeline-title {
    color: @colour5;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    margin: 0 0 5px;
    text-transform: uppercase;
}
.t-info {
    color: @colour5;
}
.timeline-item {
    display: table-row;
    &:before {
        content: "";
        content: "";
        display: block;
        display: block;
        width: @width15;
        width: @width15;
    }
    .timeline-desk {
        .arrow {
            border-bottom: 8px solid transparent;
            border-right: 8px solid @colour1 !important;
            border-top: 8px solid transparent;
            display: block;
            height: 0;
            left: -7px;
            position: absolute;
            top: 13px;
            width: 0;
        }
    }
}
.timeline-item.alt {
    &:after {
        content: "";
        content: "";
        display: block;
        display: block;
        width: @width15;
        width: @width15;
    }
    .timeline-desk {
        .arrow-alt {
            border-bottom: 8px solid transparent;
            border-left: 8px solid @colour1 !important;
            border-top: 8px solid transparent;
            display: block;
            height: 0;
            left: auto;
            position: absolute;
            right: -7px;
            top: 13px;
            width: 0;
        }
    }
    .timeline-icon {
        left: auto;
        right: -32px;
    }
    &:before {
        display: none;
    }
    .panel {
        margin-left: 0;
        margin-right: 25px;
    }
    .timeline-date {
        left: auto;
        right: -200px;
        text-align: left;
    }
    .timeline-longdate {
        left: auto;
        right: -300px;
        text-align: left;
    }
}
.timeline-desk {
    display: table-cell;
    vertical-align: top;
    width: @width15;
    h1 {
        font-size: 12px;
        font-weight: bold;
        margin: 0 0 5px;
    }
    .panel-body {
        padding: 6px;
    }
    .panel {
        background: @colour1;
        display: block;
        margin-bottom: 5px;
        margin-left: 25px;
        position: relative;
        text-align: left;
    }
    span {
        a {
            text-transform: uppercase;
        }
        a.blue {
            color: @colour11;
        }
    }
    h1.blue {
        color: @colour11;
    }
    h5 {
        span {
            color: @colour5;
            display: block;
            font-size: 12px;
            margin-bottom: 4px;
        }
    }
    p {
        font-size: 12px;
        margin-bottom: 0;
    }
    a {
        color: @colour9;
    }
    .album {
        margin-top: 20px;
        a {
            float: left;
            margin-right: 5px;
        }
    }
    .notification {
        background: none repeat scroll 0 0 @colour1;
        margin-top: 20px;
        padding: 8px;
        right: auto
    }
}
.mbot30 {
    margin-bottom: 30px;
}
.table-advance {
    tr {
        td {
            vertical-align: top !important;
        }
    }
}
.no-border {
    border-bottom: none;
}
.border-top {
    border-top: 1px solid @colour5;
}
.btn-row {
    margin-bottom: 10px;
}
.progress-xs {
    height: 8px;
}
.progress-sm {
    height: 12px;
}.panel  {
    border-radius: 0 !important;
}
.panel-heading {
    border-radius: 0 !important;
    padding: 10px;
    .nav {
        border: medium none;
        font-size: 13px;
        margin: -10px -15px -11px;
    }
    .nav>li>a {
        color: @colour1;
        &:hover {
            background: @colour1;
            color: @colour13;
        }
    }
    .nav>li.active>a {
        background: @colour1;
        color: @colour13;
    }
    .nav>li {
        &:first-child.active>a {
            -webkit-border-radius: 4px 0 0 0;
            border-radius: 4px 0 0 0;
        }
        &:first-child>a {
            hover {
                -webkit-border-radius: 4px 0 0 0;
                border-radius: 4px 0 0 0;
            }
        }
    }
}
.panel-heading .nav>li>a, .panel-heading .nav>li.active>a, .panel-heading .nav>li.active>a:hover, .panel-heading .nav>li.active>a:focus  {
    border-radius: 0;
    border-width: 0;
}
.tab-right {
    height: 38px;
}
.panel-heading.tab-right {
    .nav>li {
        &:first-child.active>a {
            -webkit-border-radius: 0;
            border-radius: 0;
        }
        &:last-child.active>a {
            -webkit-border-radius: 0 4px 0 0;
            border-radius: 0 4px 0 0;
        }
    }
    .nav-tabs>li>a {
        margin-left: 1px;
        margin-right: 0px;
    }
}
.tab-right.panel-heading {
    .nav>li {
        &:first-child>a {
            hover {
                -webkit-border-radius: 0;
                border-radius: 0;
            }
        }
        &:last-child>a {
            hover {
                -webkit-border-radius: 0 4px 0 0;
                border-radius: 0 4px 0 0;
            }
        }
    }
}
.m-bot20 {
    margin-bottom: 20px;
}
.m-bot-none {
    margin-bottom: 0;
}
.wht-color {
    color: @colour1;
}
.close-sm {
    font-size: 14px;
}
.sm-input {
    width: 175px;
}
.round-input {
    -webkit-border-radius: 500px;
    border-radius: 500px;
}
.m-bot15 {
    margin-bottom: 15px;
}
.checkbox, .checkbox:hover, .checkbox:focus  {
    border: none;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br  {
    border-bottom-right-radius: 0 !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl  {
    border-bottom-left-radius: 0 !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr  {
    border-top-right-radius: 0 !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl  {
    border-top-left-radius: 0 !important;
}
#eq {
    span {
        float: left;
        height: 120px;
        margin: 15px;
    }
}
.ui-widget-content {
    -webkit-border-radius: 15px !important;
    background: @colour1 !important;
    border-radius: 15px !important;
    border: none !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default  {
    -webkit-border-radius: 50% !important;
    background: @colour1 !important;
    border-radius: 50% !important;
    border: 3px solid @colour11 !important;
}
.checkboxes {
    label {
        cursor: pointer;
        display: block;
        font-weight: 300;
        line-height: 20px;
        padding-bottom: 7px;
    }
}
.radios {
    padding-top: 18px;
    label {
        cursor: pointer;
        display: block;
        font-weight: 300;
        line-height: 20px;
        padding-bottom: 7px;
    }
}
.label_check {
    input {
        margin-right: 5px;
    }
}
.label_radio {
    input {
        margin-right: 5px;
    }
}
.add-on {
    float: right;
    margin-top: -37px;
    padding: 3px;
    text-align: center;
    .btn {
        padding: 9px;
    }
}
.daterangepicker {
    .ranges {
        .range_inputs>div {
            &:nth-child(2) {
                margin-bottom: 10px;
                padding-left: 0px;
            }
        }
        label {
            padding-bottom: 0;
            padding-top: 8px;
        }
    }
    .calendar {
        th {
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            text-align: center;
            white-space: nowrap;
        }
        td {
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            text-align: center;
            white-space: nowrap;
        }
    }
}
.daterangepicker td.active, .daterangepicker td.active:hover, .datepicker td.active:hover, .datepicker td.active:hover:hover, .datepicker td.active:active, .datepicker td.active:hover:active, .datepicker td.active.active, .datepicker td.active.active:hover, .datepicker td.active.disabled, .datepicker td.active.disabled:hover, .datepicker td.active[disabled], .datepicker td.active[disabled]:hover, .datepicker td span.active:hover, .datepicker td span.active:active, .datepicker td span.active.active, .datepicker td span.active.disabled, .datepicker td span.active[disabled], .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active:hover:hover, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td.active.disabled:hover:hover, .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active.active:hover, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled.active:hover, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td.active.disabled.disabled, .datetimepicker table tr td.active.disabled.disabled:hover, .datetimepicker table tr td.active[disabled], .datetimepicker table tr td.active[disabled]:hover, .datetimepicker table tr td.active.disabled[disabled], .datetimepicker table tr td.active.disabled[disabled]:hover  {
    background: @colour11;
}
.datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active  {
    background: @colour11;
}
.daterangepicker td.active, .daterangepicker td.active:hover, .datepicker td.active, .datepicker td.active:hover, .datepicker td span.active  {
    text-shadow: none;
}
.datepicker {
    th.switch {
        width: 125px;
    }
    td {
        span {
            height: 40px;
            line-height: 40px;
        }
    }
    td.today {
        background-color: @colour2;
        background-image: -moz-linear-gradient(top, @colour2, @colour2);
        background-image: -ms-linear-gradient(top, @colour2, @colour2);
        background-image: -o-linear-gradient(top, @colour2, @colour2);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@colour2), to(@colour2));
        background-image: -webkit-linear-gradient(top, @colour2, @colour2);
        background-image: linear-gradient(top, @colour2, @colour2);
        background-repeat: repeat-x;
        border-color: @colour2 @colour2 @colour2;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        color: @colour6;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colour2', endColorstr='@colour2', GradientType=0);
        &:hover {
            background-color: @colour2;
            background-image: -moz-linear-gradient(top, @colour2, @colour2);
            background-image: -ms-linear-gradient(top, @colour2, @colour2);
            background-image: -o-linear-gradient(top, @colour2, @colour2);
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@colour2), to(@colour2));
            background-image: -webkit-linear-gradient(top, @colour2, @colour2);
            background-image: linear-gradient(top, @colour2, @colour2);
            background-repeat: repeat-x;
            border-color: @colour2 @colour2 @colour2;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            color: @colour6;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colour2', endColorstr='@colour2', GradientType=0);
        }
    }
}
.bootstrap-timepicker {
    table {
        td {
            input {
                -webkit-border-radius: 3px;
                border-radius: 3px;
                border: 1px solid @colour2;
            }
        }
    }
}
.btn-space {
    padding-left: 11.6%;
    padding-right: 11%;
}
.tools {
    a {
        color: @colour5;
        font-size: 12px;
        margin-left: 10px;
    }
}
#sortable {
    list-style-type: none;
    margin: 0 0 20px 0;
    padding: 0;
    width: @width11;
    li {
        font-size: 12px;
        padding-left: 3em;
        i {
            cursor: pointer;
            left: 6px;
            padding: 4px 10px 0 10px;
            position: absolute;
        }
        input[type=checkbox] {
            margin-top: 0;
        }
    }
}
.ui-sortable>li {
    background: @colour1;
    border-bottom: none !important;
    margin-bottom: 2px;
    padding: 15px 0 15px 35px !important;
    position: relative;
}
.ui-sortable {
    li.list-primary {
        border-left: 3px solid @colour13;
    }
    li.list-success {
        border-left: 3px solid @colour13;
    }
    li.list-danger {
        border-left: 3px solid @colour9;
    }
    li.list-warning {
        border-left: 3px solid @colour7;
    }
    li.list-info {
        border-left: 3px solid @colour13;
    }
    li.list-inverse {
        border-left: 3px solid @colour2;
    }
}
.sortable {
    .panel {
        .panel-heading {
            cursor: move;
        }
    }
}
.mega-menu {
    background-color: @colour13;
    float: left;
    margin: 0;
    width: @width11;
    .navbar-nav {
        height: 45px;
    }
    ul {
        li {
            a {
                color: @colour13;
                display: inline-block;
                margin-bottom: 15px;

                &:hover {
                    background-color: @colour1;
                    color: @colour13;
                }

                &:focus {
                    background-color: @colour1;
                    color: @colour13;
                }

                i {
                    line-height: 26px;
                    margin-right: 8px;
                    text-align: center;
                    vertical-align: bottom;
                    width: 1.28571429em;

                    & + .icon-desk {
                        line-height: 26px;
                        vertical-align: bottom;
                    }
                }
            }
        }
        li.dropdown {
            a {
                display: block;

                &:hover {
                    background-color: @colour1;
                    display: block;
                }
            }
        }
    }

    .dropdown-menu {
        border-color: @colour13;
        border-radius: 0;
        border-top: 0;
        box-shadow: none;
        margin-left: -1px;
        top: 45px;
    }
}
.bluetext {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}
.blue {
    color: @colour1 !important;

    #ninebox:hover > &,
    &:hover {
        color: @colour13 !important;
    }
    #ninebox:focus > &,
    &:focus {
        color: @colour13 !important;
    }
}
.mega-menu .nav .open>a, .mega-menu .nav .open>a:hover, .mega-menu .nav .open>a:focus  {
    background-color: @colour1;
    height: 45px;
    color: @colour13;
}

.mega-menu .nav .current>a, .mega-menu .nav .current>a:hover, .mega-menu .nav .current>a:focus  {
    background-color: @colour2;
    max-height: 45px;
    color: @colour13;
}

.mega-nav {
    #main-content {
        margin-left: 0px;
    }
    .title {
        color: @colour6;
        font-size: 14px;
        font-weight: bold;
        text-transform: none;
    }
    .d-title {
        display: block;
    }
    .d-desk {
        color: @colour5;
        display: block;
        font-size: 12px;
    }
}

.custom-nav-img {
    position: static;
    .desk {
        font-size: 13px;
        line-height: 25px;
    }
}

.yamm-content {
    position: relative;
}
.icon-img {
    float: left;
    margin-right: 10px;
}
.icon-desk {
    display: inline-block;
}
.nine-box-icon {
    font-size: 2.5em;
}
.modal.top-modal-with-space {
    .modal-dialog {
        margin: 20px auto;
    }
}
.modal.fade.left-modal-with-space {
    .modal-dialog {
        left: 20px;
        position: absolute;
    }
}
.modal.fade.right-modal-with-space {
    .modal-dialog {
        position: absolute;
        right: 20px;
    }
}
.modal.top-modal-without-space {
    .modal-dialog {
        margin: 0px auto;
    }
}
.modal.fade.left-modal-without-space {
    .modal-dialog {
        left: 0px;
        position: absolute;
    }
}
.modal.fade.right-modal-without-space {
    .modal-dialog {
        position: absolute;
        right: 0px;
    }
}
.modal.fade.modal-dialog-center {
    height: @height6;
    .modal-dialog {
        display: table;
        height: @height6;
    }
    .modal-content-wrap {
        display: table-cell;
        vertical-align: middle;
    }
}
.modal.fade.full-width-modal-left .modal-dialog .modal-content, .modal.fade.full-width-modal-right .modal-dialog .modal-content, .modal.fade.full-width-modal-right .modal-dialog .modal-content-wrap, .modal.fade.full-width-modal-left .modal-dialog .modal-content-wrap  {
    height: @height6;
}
.modal.fade.full-width-modal-right {
    .modal-dialog {
        height: @height6;
        margin: 0;
        position: absolute;
        right: 0px;
    }
}
.modal.fade.full-width-modal-left {
    .modal-dialog {
        height: @height6;
        left: 0px;
        margin: 0;
        position: absolute;
    }
}
.full-width-modal-right .modal-header, .full-width-modal-right .modal-content, .full-width-modal-left .modal-header, .full-width-modal-left .modal-content  {
    border-radius: 0;
}
.navbar {
    position: relative;
    top: 45px;
    margin-bottom: 10px !important;
}
.panel {
    border: 1px solid @colour2;
    padding: 0;
    padding: 2px;
}
.navbar-brand {
    background-color: @colour13;
    color: @colour1;
    padding-top: 20px;
    z-index: 1;
}
.horizontal-menu {
    float: left;
    .navbar-nav>li {
        &:hover {
            background-color: @colour1;
            a {
                color: @colour13;
                margin-bottom: 0 !important;
                padding-bottom: 10px !important;
            }
        }
    }
    .navbar-nav>li>a {
        color: @colour1;
        padding-top: 20px;
        /*&:hover {
            padding-bottom: 10px;
        }*/
    }
}
.full-width .nav>li>a:hover, .full-width .nav li.active a, .full-width .nav li.dropdown a:hover, .full-width .nav li.dropdown.open a:focus, .full-width .nav .open>a, .full-width .nav .open>a:hover, .full-width .nav .open>a:focus  {
    -webkit-transition: all 0.3s ease 0s;
    background-color: @colour13;
    color: @colour1;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
#splash-page {
    z-index: 99999 !important;
    .bar {
        width: @width11;
    }
}
.page-splash {
    -moz-backface-visibility: hidden;
    -moz-transition: opacity 0.3s linear;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -o-transition: opacity 0.3s linear;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.3s linear;
    backface-visibility: hidden;
    background-color: @colour5;
    height: @height6;
    left: 0;
    opacity: .9;
    pointer-events: auto;
    position: fixed !important;
    top: 0;
    transition: opacity 0.3s linear;
    width: @width11;
    z-index: 99999 !important;
}
.page-splash-message {
    -webkit-text-shadow: 2px 2px @colour6;
    color: @colour13;
    font-family: 'Open Sans', sans-serif;
    font-size: 400%;
    font-weight: normal;
    margin: 20% auto 0 auto;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 2px 2px @colour6;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
}

.page-session-timeout-message {
    color: @colour13;
    font-size: 200%;
    font-weight: normal;
    margin: 20% auto 0 auto;
    padding: 50px;
    text-align: center;
    background-color: @colour1;
}

.page-splash-message.page-splash-message-subtle {
    font-size: 200%;
    margin: 30% auto 0 auto;
}
.flag-haschanges {
    display: inline;
    position: fixed !important;
}
.fa-asterisk.fa-asterisk-large {
    color: @colour13;
    font-size: 180%;
    vertical-align: middle;
}
.fa-asterisk.fa-asterisk-alert {
    color: @colour13;
}
.fa-asterisk-inline {
    padding: 0 4px 0 0;
}
.progress {
    margin: 30px 10% !important;
}
.page-progress-bar {
    margin: 30px 10% !important;
}
.ngplus-overlay-background {
    background-color: @colour5;
    height: @height6;
    left: 0px;
    opacity: 0.2;
    padding-left: 100px;
    position: fixed;
    top: 0px;
    width: @width11;
    z-index: 10000;
}
.ngplus-overlay-content {
    font-weight: bold;
    height: 150px;
    height: 15em;
    position: fixed;
    text-align: center;
    width: 20em;
    width: 180px;
    z-index: 10000;
}

/*Optional Animations*/
.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
    display: inline !important;
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
}

    .dissolve-animation.ng-hide-remove.ng-hide-remove-active,
    .dissolve-animation.ng-hide-add {
        opacity: 1;
    }

        .dissolve-animation.ng-hide-add.ng-hide-add-active,
        .dissolve-animation.ng-hide-remove {
            opacity: 0;
        }

.page-spinner-message {
    color: @colour7;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: normal;
    opacity:initial;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.overlay-box {
    background-color: @colour1;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px;
    border-style: solid;
    border-color: @colour12;
}
.page-spinner-message.page-spinner-message-subtle {
    font-size: 200%;
    margin: 30% auto 0 auto;
}
.overlay-message {
    font-size: 200%;
}
.spinner {
    left: auto;
    margin: 20% auto 0 auto;
    top: auto !important;
}
.required {
    color: @colour9;
}
.invalidMessage {
    color: @colour9;
}
.warningMessage{
    color: @colour7;
}
.toast-orange {
    background-color: @colour7;
    &:before {
        content: "\f00c";
        font-family: FontAwesome;
        font-size: 16px;
        left: 30px;
        position: absolute;
        top: 14px;
    }
}
.toast-gray {
    background-color: @colour5;
    &:before {
        content: "\f00c";
        font-family: FontAwesome;
        font-size: 16px;
        left: 30px;
        position: absolute;
        top: 14px;
    }
}
.spinner-color {
    color: @colour11;
}
a {
    cursor: hand;
    cursor: pointer;
}

.panel-transparent > .panel-heading {
    background: none;
    -webkit-border-radius: 5px 5px 0 0;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
}

.panel-default > .panel-heading {
    -webkit-border-radius: 5px 5px 0 0;
    background: @colour11;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: @colour1;
    font-weight: bold;
}
h3.panel-title {
    color: @colour1;
    font-weight: bold;
    a {
        &:hover {
            color: @colour1;
            font-weight: bold;
        }
    }
}
h4.panel-title {
    color: @colour1;
    font-weight: bold;
    a {
        &:hover {
            color: @colour1;
            font-weight: bold;
        }
    }
}
.red {
    color: @colour9;
}
.green {
    color: @colour14;
}

.dropdown-menu {
    font-size: 13px;
    min-width: 240px;
}

.yamm-remove-padding {
    padding-left: 0;
}

.yamm-1 {
    width: 25%;
}

.yamm-2 {
    width: 50%;
}

.yamm-3 {
    width: 75%;
}

.yamm-4 {
    width: 90%;
}

.min-height-200 {
    min-height: 200px;
}
.no-gutter>[class*='col-'] {
    padding-left: 5px;
    padding-right: 5px;
}
.row-eq-height {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.datepicker td.today:hover, .datepicker td.today:hover:hover, .datepicker td.today:today, .datepicker td.today:hover:today, .datepicker td.today.today, .datepicker td.today:hover.today, .datepicker td.today.disabled, .datepicker td.today:hover.disabled, .datepicker td.today[disabled], .datepicker td.today:hover[disabled] {
    background-color: @colour2;
}
.datepicker td.today:today, .datepicker td.today:hover:today, .datepicker td.today.today, .datepicker td.today:hover.today  {
    background-color: @colour2;
}
.cropit-image-preview.cropit-image-loaded {
    cursor: move;
}
body.modal-open {
    overflow: hidden;
}
h1.infobox {
    margin-top: 5px;
    font-size: 18px
}
.btn {
    font-size: 14px;
    white-space: normal;
    border-radius: 0 !important;
}
.lookup-btn {
    white-space: nowrap; 
}
h1 {
    font-size: 24px;
}
h4 {
    font-size: 14px;
}
.form-control {
    font-size: 13px;
}
.tour-backdrop {
    -ms-opacity: 0.6;
    opacity: 0.6;
}
.popover-title {
    background-color: @colour11;
    color: @colour1;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: bold;
}
.popover-content {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}
.cropit-image-preview {
    border: 1px dashed @colour5;
}
.radio {
    > .radio-inline:first-child {
        padding-left: 0;
    }

    &.no-top-padding {
        &,
        > .radio-inline {
            padding-top: 0;
        }
    }
}
.no-left-padding {
    padding-left: 0 !important;
}
.dragBox {
    background-color: @colour1;
    border: 1px solid @colour13;
    padding: 10px;
}
.dropHover {
    background-color: @colour3 !important;
}
.repeated-item.ng-enter {
    -webkit-animation: slideInLeft 0.5s;
    animation: slideInLeft 0.5s;
}
.repeated-item.ng-move {
    -webkit-animation: slideInLeft 0.5s;
    animation: slideInLeft 0.5s;
}
.repeated-item.ng-enter.ng-enter-active {
    opacity: 1;
}
.repeated-item.ng-move.ng-move-active {
    opacity: 0;
}
.shuffle-animation.ng-enter {
    -moz-transition: ease-out all 0.3s 0.4s;
    -o-transition: ease-out all 0.3s 0.4s;
    -webkit-transition: ease-out all 0.3s 0.4s;
    left: 2em;
    opacity: 0;
    position: relative;
    transition: ease-out all 0.3s 0.4s;
}
.shuffle-animation.ng-leave {
    -moz-transition: 0.3s ease-out all;
    -o-transition: 0.3s ease-out all;
    -webkit-transition: 0.3s ease-out all;
    left: 0;
    opacity: 1;
    position: relative;
    transition: 0.3s ease-out all;
}
.shuffle-animation.ng-enter.ng-enter-active {
    left: 0;
    opacity: 1;
}
.shuffle-animation.ng-leave.ng-leave-active {
    left: 2em;
    opacity: 0;
}
.fader-animation.ng-enter, .fader-animation.ng-leave, .fader-animation.ng-move  {
    position: relative;
}
.fader-animation.ng-enter {
    -moz-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
    -o-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
    -webkit-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
    opacity: 0;
    opacity: 1;
    transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
}
.fader-animation.ng-leave {
    -moz-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
    -o-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
    -webkit-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
    opacity: 1;
    transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
}
.fader-animation.ng-leave.ng-leave-active {
    opacity: 0;
}
.fader-animation.ng-enter.ng-enter-active {
    opacity: 1;
}
.fader-animation.ng-move {
    opacity: 0.5;
}
.fader-animation.ng-move.ng-move-active {
    opacity: 1;
}
.dissolve-animation.ng-hide-remove {
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    -webkit-transition: 0.5s linear all;
    display: inline !important;
    opacity: 0;
    position: fixed !important;
    transition: 0.5s linear all;
}
.dissolve-animation.ng-hide-add {
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    -webkit-transition: 0.5s linear all;
    display: inline !important;
    opacity: 1;
    position: fixed !important;
    transition: 0.5s linear all;
}
.dissolve-animation.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}
.dissolve-animation.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}
.fa-check {
    color: @colour14;
}
.fa-times.fa-4x {
    color: @colour9;
}
.fa-unsigned {
    color: @colour9;
}

.ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell {
    background-color: @colour11 !important;
    color: @colour1;
}

.ui-grid-row.ui-grid-row-selected>[ui-grid-row]>[ps-draggable]>.ui-grid-cell {
    background-color: @colour11 !important;
    color: @colour1;
}

h3 {
    font-size: 18px;
}
.h3 {
    font-size: 18px;
}
ul.nav {
    li.dropdown {
        &:hover>ul.dropdown-menu {
            display: block;
        }
    }
}
ul.response {
    list-style: none;
}



//start angular ui tree
.angular-ui-tree-placeholder {
    background: @colour3;
    border: 2px dashed @colour4;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.angular-ui-tree-nodes .hidden {
    display:none !important
}

.angular-ui-tree-node-selected {
    background-color:@colour3;
    padding:3px
}

.angular-ui-tree-node-editing {
    background-color:@colour2;
    padding:3px
}

.angular-ui-tree-empty {
    background-color: @colour1;
    border:0
}
//end angular ui tree

.drop-hover {
    background-color: @colour2;
    border: 1px dashed @colour11;
}

.btn-plain {
    background-color: @colour1;
    border-color: @colour3;
    color: @colour5;
}
.btn-plain:hover, .btn-plain:focus, .btn-plain:active, .btn-plain.active, .open .dropdown-toggle.btn-plain  {
    background-color: @colour2;
    border-color: @colour3;
    color: @colour5;
}
.btn-shadow.btn-plain {
    box-shadow: 0 4px @colour2;
}
.yamm-content div ul li a {
    background-color: @colour1 !important
}

.italic {
    font-style: italic
}

/**start video player*/
.videogular-container {
    width: 640px;
    height: 360px;
    overflow: hidden;
}

.landing .videogular-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.landing-small .videogular-container {
    width: 240px;
    height: 135px;
    overflow: hidden;
}
/**end video player*/

.warning {
    border:1px solid @colour10;
    background-color: @colour10;
    color: @colour6;
    padding-left:30px;
    padding-top: 5px;
    margin: 5px
}

.warning a {
    color: @colour1;
    text-decoration: underline
}

.ui-grid {
    margin:1px
}

.ui-grid-cell-focus{
    background-color: inherit !important;
}

.ui-grid-sort-priority-number {
    display:none;
}

.warningBorder{
    border:1px solid @colour9;
}

.weighting input.ng-invalid.ng-touched {
    background-color: @colour9;
}

.weighting input {
    min-width: 55px !important;
}

.weighting .input-group-addon {
    border: 1px solid @colour3;
}

.weighting .left {
    border-right: none !important;
}

.weighting .right {
    border-left: none !important;
}

div.category .panel-heading {
    background-color: @colour11 !important;
}

.category-header {
    color: @colour1 !important;
}

.objective-header {
    color: @colour5 !important;
}

div.category a {
    color: @colour1 !important;
}

div.item a {
    color: @colour13 !important;
}

div.item a:hover {
        color: @colour1 !important;
}

div.item .panel-heading {
    background-color: @colour15 !important;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: @colour11;
  border-color: @colour4;
}

::-ms-clear { display: none; }

.multiSelect { padding-left: 2px }

.input-group-addon {
    border: 1px solid @colour3;
    background-color: @colour2
}

.smalltext {font-size:12px}

.form-horizontal .control-label {
    padding-top: 0;
}

.navbar-collapse {
    padding-left: 10px
}

.state-overview {
    .panel {
        display: table;
        width: 100%;
    }
    .symbol {
        -webkit-border-radius: 4px 0px 0px 4px;
        border-radius: 4px 0px 0px 4px;
        display: table-cell;
        padding: 10px 15px;
        text-align: center;
        width: 40%;
        i {
            color: @colour1;
            font-size: 50px;
        }
    }
    .value {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 58%;
        h1 {
            color: @colour5;
            font-weight: 300 !important;
            margin: 0 !important;
            padding-right: 5px
        }
    }
    .blue {
        background: @colour11;
    }
}

#top_menu .nav > li, ul.top-menu > li {
    float: left;
}

.badge.bg-warning {
    background: @colour9;
}

.notify-arrow-yellow {
    border-color: transparent transparent @colour11;
    border-bottom-color: @colour11 !important;
    border-top-color: @colour11 !important;
}

.notify-arrow {
    border-style: solid;
    border-width: 0 9px 9px;
    height: 0;
    margin-top: 0;
    opacity: 0;
    position: absolute;
    left: 7px;
    top: -18px;
    transition: all 0.25s ease 0s;
    width: 0;
    z-index: 10;
    margin-top: 10px;
    opacity: 1;
}

.dropdown-menu.extended li p.yellow {
    background-color: @colour11;
    color: @colour1;
}

.top-nav li.dropdown .dropdown-menu.notification {
    left: 0
}

.multiSelect .checkboxLayer .checkBoxContainer {
    max-height: 300px;
    overflow-y: auto; /* or scroll */
    }

.textAreaBtn {
    vertical-align: top
}

.translationWarningMessage {
    padding-left: 16px;
    font-weight: bold;
    color: @colour9;
}

.timeline li timeline-badge {
    box-shadow: 0 0 0 4px @colour14, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) !important;
    background-color: @colour1 !important
}

.note {
    border: 1px solid @colour4;
    background-color: @colour2;
    padding: 5px;
    margin-bottom: 10px
}

.note ul {
    padding-left: 20px
}

/**START DRAG N DROP LISTS*/
/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
    position: relative;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.simpleDemo ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: @colour4;
    min-height: 42px;
}

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
.simpleDemo ul[dnd-list] li {
    background-color: @colour1;
    border: 1px solid @colour4;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
}

/**
 * Show selected elements in green
 */
.simpleDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

/**END DRAG N DROP LISTS*/


/**START TIMELINE MESSAGES*/
.timeline-messages:before {
    background: @colour3;
    bottom: 0;
    top: 0;
    width: 2px;
}

.timeline-messages:before, .msg-time-chat:before, .msg-time-chat .text:before {
    content: "";
    left: 60px;
    position: absolute;
    top: -2px;
}

.timeline-messages, .msg-time-chat , .timeline-messages .msg-in, .timeline-messages .msg-out {
    position: relative;
}

.timeline-messages .msg-in .arrow {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    display: block;
    height: 0;
    left: -8px;
    position: absolute;
    top: 13px;
    width: 0;
}

.timeline-messages .msg-out .arrow {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    display: block;
    height: 0;
    left: -8px;
    position: absolute;
    top: 13px;
    width: 0;
}

.msg-time-chat:first-child:before {
    margin-top: 16px;
}
.msg-time-chat:before {
    background: @colour14;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    height: 14px;
    margin: 23px 0 0 -6px;
    width: 14px;
}

.msg-time-chat:first-child {
    padding-top: 0;
}
.message-img {
    float: left;
    margin-right: 30px;
    overflow: hidden;
}
.message-img img {
    display: block;
    height: 44px;
    width: 44px;
}
.message-body {
    margin-left: 80px;
}
.msg-time-chat .msg-in .text {
    border: 1px solid @colour4;
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

.msg-time-chat .msg-out .text {
    border: 1px solid @colour4;
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
.msg-time-chat p {
    margin: 0;
}
.msg-time-chat .attribution {
    font-size: 11px;
    margin: 0px 0 5px;
}
.msg-time-chat {
    overflow: hidden;
    padding:8px 0;
}
/**END TIMELINE MESSAGES*/

.tablesorter-headerRow {
    background-color: @colour4
}

.tasi-form .panel {
    border-color: @colour3
}

.nav-tabs {
  > li {
    > a {
      border: 1px solid @colour4;
      border-radius: 4px 4px 0 0;
      }
    // Actual tabs (as links)
    // Active state, and its :hover to override normal :hover
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @colour5;
        background-color: @colour4;
        border-bottom-color: transparent;
        cursor: default;
        font-weight: bold
      }
    }
  }
}

.form-horizontal .form-group {
    margin-right: 0;
}

.reviewBody {
    border-left:1px solid @colour3;
    border-right:1px solid @colour3;
    border-bottom:1px solid @colour3;
    padding:5px
}

.input-group-btn {
    vertical-align: top;
    z-index: 4;
}

.richtext {
    white-space: pre-wrap;

    &:first-line {
        //line-height: 0px;
    }

    img {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }

    ul, ol {
        padding-left: 40px;
    }
}

.commentbox {
    border:1px solid @colour2;
    max-height: 200px;
    min-height: 30px;
    overflow-y: auto;
    padding: 5px
}

.input-group .form-control {
    //position: initial
    border-top: 1px solid @colour3;
    border-bottom: 1px solid @colour3;
    border-right: 1px solid @colour3;
}

.dashboardBody {
    border-left:1px solid @colour4;
    border-right:1px solid @colour4;
    border-bottom:1px solid @colour4;
    padding: 10px;
}

.dashboardTabBody {
    border-left:1px solid @colour3;
    border-right:1px solid @colour3;
    border-bottom:1px solid @colour3;
    padding: 5px
}

.dashboardBody .nav {
  > li {
    > a {
      padding: 5px 7px;
    }
  }
}

#dashboardTabs li a {
    border-color: @colour4;
    background-color: @colour2;
}

#dashboardTabs li.active a {
    border-bottom-color: transparent;
    background-color: @colour1 ;
    color: @colour11
}

.planHeaderRow {
    background-color: @colour2 !important;
}

//Wrapping for cell headers in ui-grid, but causes issues with rows getting pushed below the footer
/* .ui-grid-header-cell .ui-grid-cell-contents {
     height: auto !important;
     white-space: normal;
     -ms-text-overflow: clip;
     -o-text-overflow: clip;
     text-overflow: clip;
     overflow: visible;
}*/

.legendBox {
     border: 1px solid @colour3;
     background-color: @colour2;
     padding: 10px;
     text-align: center;
     margin-top: 20px
}

.legendSwatch {
    border: 1px solid @colour3;
    padding-left: 7px;
    padding-right: 7px
}

div.dashboard .panel-default>.panel-heading {
    background-color: @colour11 !important;
    background-image: linear-gradient(to bottom, @colour11 0%, @colour11 100%);
}

div.dashboard .panel-default>.panel-heading>.panel-title {
    color: @colour1 !important
}

.fa-bigger {
    font-size: 16px;
    font-weight: normal;
}

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

ol.tree-list .tree-list {
    padding-left: 20px;
}

.modal-xl {
    width: calc(100vw - 60px);
    height: calc(100vh - 60px);
}

.modal-xl .modal-content {
    height: 100%;
}

.modal-content {
    border-radius: 0 !important;
}

.modal-header {
    border-radius: 0 !important;
}

.modal-xl .modal-content .modal-body {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: calc(100vh - 173px);
    overflow-y: auto;
    overflow-x: hidden
}

.k-filter-row th, .k-grid-header th.k-header {
    font-weight: bold
}

.fa.k-sprite,
      .fa.k-sprite::before {
        font-size: 12px;
        line-height: 12px;
        vertical-align: middle;
      }

.k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
}

.k-grid  .k-grid-header  .k-header {
    white-space: normal;
    vertical-align: top;
}

.k-grid tr.k-state-selected {
        background-color: @colour11
}

.k-grid tr.k-state-selected:hover {
        background-color: @colour11
}

.k-primary {
    background-color: @colour7;
    border-color: @colour7;
    color: @colour1;
}

.no-wrap-dropdown {
    font-size: 14px;
}

.no-wrap-dropdown.k-dropdown {
    width: auto;
}
.no-wrap-dropdown.k-list-container {
    width: auto !important;
}
.no-wrap-dropdown.k-list-container .k-list .k-item {
    white-space: nowrap;
}

.whitebox {
    border: 1px solid @colour1;
    background-color: @colour1
}

.greybox {
    border: 1px solid @colour2;
    background-color: @colour2;
    padding: 0;
}

.k-scheduler .k-scheduler-toolbar .k-nav-hide-datepicker .k-link .k-i-calendar {
    display: none
}

.k-scheduler .k-scheduler-toolbar .k-nav-hide-datepicker .k-link .k-sm-date-format {
    display: none
}

.k-scheduler-toolbar .k-nav-hide-datepicker .k-link {
    cursor: default !important;
}

/**START KENDO*/
/**
 * Kendo UI v2016.3.1118 (http://www.telerik.com/kendo-ui)
 * Copyright 2016 Telerik AD. All rights reserved.
 *
 * Kendo UI commercial licenses may be obtained at
 * http://www.telerik.com/purchase/license-agreement/kendo-ui-complete
 * If you do not own a commercial license, this file shall be governed by the trial license terms.
*/
@accent: @colour11;
@base: @colour2;
@background: @colour1;

@border-radius: 4px;

@normal-background: @colour1;
@normal-text-color: @colour5;
@normal-gradient: "rgba(255,255,255,.6) 0%, rgba(255,255,255,.0) 100%";
@hover-background: @colour4;
@hover-text-color: @colour5;
@hover-gradient: "rgba(255,255,255,.4) 0%, rgba(255,255,255,.0) 100%";
@selected-background: @colour11;
@selected-text-color: @colour1;
@selected-gradient: "rgba(255,255,255,.2) 0%, rgba(255,255,255,.0) 100%";

@error: @colour9;
@warning: @colour7;
@success: @colour11;
@info: @colour3;

@series-a: #ff6800;
@series-b: #a0a700;
@series-c: #ff8d00;
@series-d: #678900;
@series-e: #ffb53c;
@series-f: #396000;

// graphics
@image-folder: "Default";
@texture: none;
@fallback-texture: url('textures/highlight.png');

/*!






















*/
@tooltip-texture: url('textures/highlight.png');
@widget-text-color: @normal-text-color;
@inverse-text-color: contrast(@normal-text-color);
@widget-gradient: @normal-gradient;
@widget-background-color: @background;
@widget-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 8%), 0.5);
@widget-shadow: none;
@select-background-color: @base;
@select-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 20%), 0.5);
@select-hover-background-color: saturate(@hover-background, 1%);
@select-group-background-color: @base;
@input-background-color: contrast(@normal-text-color, @base, @colour1, 0.5);
@input-text-color: @normal-text-color;
@link-text-color: saturate(@normal-text-color, 1%);
@header-text-color: contrast(@selected-background, lighten(@normal-text-color, 1%), darken(@normal-text-color, 13%), 0.5);
@header-background-color: saturate(@base, 4%);
@button-text-color: @normal-text-color;
@button-background-color: saturate(@base, 1%);
@group-background-color: contrast(@base, lighten(@background, 4%), darken(@background, 4%), 0.5);
@group-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@content-background-color: @background;
@hover-background-color: @hover-background;
@hover-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 20%), 0.5);
@hover-shadow: none;
@selected-background-color: @accent;
@selected-border-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 13%), 0.5);
@selected-shadow: none;
@focused-border-color: @widget-border-color;
@focused-shadow: 0 0 3px 0 @shadow-color;
@focused-item-shadow: inset 0 0 3px 1px contrast(@selected-background, lighten(@normal-text-color, 50%), lighten(@normal-text-color, 30%), 0.5);
@focused-active-item-shadow: inset 0 0 3px 1px darken(@selected-border-color, 10%);
@active-text-color: contrast(@selected-background, lighten(@normal-text-color, 1%), darken(@normal-text-color, 13%), 0.5);
@active-gradient: none;
@active-background-color: desaturate(@background, 1%);
@active-border-color: contrast(@base, lighten(@base, 2%), darken(@base, 29%), 0.5);
@active-shadow: none;
@error-text-color: contrast(@hover-background, lighten(@accent, 29%), darken(@accent, 4%), 0.5);
@error-background-color: contrast(@selected-background, lighten(@hover-background, 24%), darken(@hover-background, 29%), 0.5);
@error-border-color: darken(@error, 29%);
@disabled-text-color: contrast(@base, lighten(@base, 40%), darken(@base, 15%), 0.5);
@notification-info-background-color: @info;
@notification-info-text-color: @colour1;
@notification-info-border-color: @notification-info-background-color;
@notification-success-background-color: @success;
@notification-success-text-color: @notification-info-text-color;
@notification-success-border-color: @notification-success-background-color;
@notification-warning-background-color: @warning;
@notification-warning-text-color: @colour6;
@notification-warning-border-color: @notification-warning-background-color;
@notification-error-background-color: @error;
@notification-error-text-color: @notification-info-text-color;
@notification-error-border-color: @notification-error-background-color;
@notification-gradient: "rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 100%";
@tooltip-text-color: @header-text-color;
@tooltip-background-color: @header-background-color;
@tooltip-border-color: @secondary-border-color;
@validation-text-color: contrast(@validation-background-color, lighten(@warning, 80%), darken(@warning, 60%), 0.5);
@validation-background-color: @warning;
@validation-border-color: @warning;
@splitbar-background-color: saturate(@base, 1%);
@draghandle-border-radius: 7px;
@draghandle-border-color: @button-border-color;
@draghandle-background-color: lighten(@base, 15%);
@draghandle-shadow: none;
@draghandle-hover-border-color: @button-hover-border-color;
@draghandle-hover-background-color: desaturate(@hover-background, 2%);
@draghandle-hover-shadow: none;
@alt-background-color: contrast(@base, lighten(@background, 3%), lighten(@base, 3%), 0.5);
@nested-alt-background-color: darken(@alt-background-color, 8%);
@cell-border-color: contrast(@base, lighten(@base, 12%), darken(@base, 14%), 0.5);
@column-highlight-background-color: contrast(@selected-background, lighten(@base, 6%), darken(@base, 3%), 0.5);
@active-filter-background-color: desaturate(@background, 1%);
@scheduler-background-color: contrast(@normal-text-color, @background, darken(@background, 10%), 0.5);
@current-time-color: darken(@error, 29%);
@event-background-color: contrast(@selected-background, lighten(@selected-background, 33%), darken(@selected-background, 7%), 0.5);
@event-text-color: contrast(@event-background-color, @normal-text-color, @primary-button-text-color, 0.4);
@event-inverse-text-color: contrast(@normal-text-color, @background, darken(@background, 10%), 0.5);
@scheduler-nonwork-background-color: contrast(@selected-background, lighten(@base, 3%), darken(@base, 5%), 0.5);
@resize-background-color: contrast(@hover-background, lighten(@normal-text-color, 29%), darken(@normal-text-color, 1%), 0.5);
@upload-progress-background-color: @info;
@upload-progress-text-color: @header-text-color;
@upload-success-background-color: @success;
@upload-success-text-color: @upload-success-background-color;
@upload-error-background-color: @error;
@upload-invalid-color: lighten(@error, 29%);
@upload-error-text-color: @upload-error-background-color;
@task-summary-color: lighten(@widget-text-color, 25%);
@task-summary-selected-color: lighten(@selected-background-color, 25%);
@loading-panel-color: contrast(@selected-background, lighten(@background, 5%), darken(@background, 1%), 0.5);
@shadow-color: rgba(0, 0, 0, .3);
@shadow-inset-color: contrast(@base, lighten(@success, 27%), darken(@success, 9%), 0.5);
@main-border-radius: @border-radius;
@list-border-radius: @main-border-radius - 1;
@inner-border-radius: @main-border-radius - 1;
@slider-border-radius: 13px;
@default-icon-opacity: 0.9;
@calendar-border-radius: 4px;
@calendar-content-text-color: saturate(@normal-text-color, 1%);
@calendar-footer-background: @background;
@calendar-footer-text-decoration: none;
@calendar-footer-hover-text-decoration: underline;
@calendar-footer-hover-background: @background;
@calendar-header-hover-text-decoration: none;
@calendar-header-hover-background: @hover-background;
@calendar-footer-active-background: @background;
@button-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@menu-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@tabstrip-items-border: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@tabstrip-active-background: desaturate(@background, 1%);
@tabstrip-tabs-color: @normal-text-color;
@form-widget-color: saturate(@normal-text-color, 1%);
@drop-down-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@drop-down-hover-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 20%), 0.5);
@drop-down-focused-border-color: contrast(@base, lighten(@background, 1%), darken(@background, 26%), 0.5);
@calendar-group-background-color: contrast(@base, lighten(@background, 4%), darken(@background, 4%), 0.5);
@drop-down-background: contrast(@selected-background, lighten(@base, 1%), darken(@base, 9%), 0.5);
@drop-down-text-color: @normal-text-color;
@secondary-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@secondary-text-color: @normal-text-color;
@numeric-selected-background: @accent;
@panelbar-items-border: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@panelbar-content-background: @background;
@panelbar-content-color: @normal-text-color;
@window-shadow-style: 1px 1px 7px 1px;
@filter-menu-content-background: @background;
@icon-background-color: transparent;
@disabled-background-color: saturate(@base, 1%);
@disabled-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@disabled-gradient: @normal-gradient;
@primary-button-text-color: lighten(@selected-text-color, 12%);
@primary-button-background-color: lighten(@accent, 7%);
@primary-button-border-color: contrast(@base, lighten(@accent, 3%), darken(@accent, 3%), 0.5);
@primary-gradient: @selected-gradient;
@primary-shadow: none;
@primary-hover-text-color: lighten(@selected-text-color, 12%);
@primary-hover-background-color: lighten(@accent, 3%);
@primary-hover-border-color: contrast(@base, lighten(@hover-background, 1%), darken(@hover-background, 20%), 0.5);
@primary-hover-gradient: @hover-gradient;
@primary-hover-shadow: none;
@primary-focused-color: @primary-button-text-color;
@primary-focused-border-color: darken(@primary-button-background-color, 10%);
@primary-focused-gradient: @hover-gradient;
@primary-focused-active-item-shadow: 0 0 3px 0 @accent;
@primary-active-text-color: desaturate(@selected-text-color, 9%);
@primary-active-background-color: desaturate(@accent, 1%);
@primary-active-gradient: @selected-gradient;
@primary-active-border-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 13%), 0.5);
@primary-active-shadow: none;
@primary-disabled-text-color: darken(@selected-text-color, 10%);
@primary-disabled-background-color: lighten(@accent, 8%);
@primary-disabled-border-color: @primary-disabled-text-color;
@primary-disabled-gradient: @selected-gradient;
@button-hover-text-color: @hover-text-color;
@button-hover-background-color: @hover-background;
@button-hover-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 20%), 0.5);
@button-active-background: @accent;
@button-active-border-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 13%), 0.5);
@button-focused-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@button-focused-shadow: inset 0 0 3px 1px @hover-border-color;
@button-focused-active-shadow: inset 0 0 3px 1px darken(@selected-border-color, 10%);

/* Kendo skin */

@theme-name: ~"default";

/*!






















*/
.transition(@transition) {
    transition: ~"@{transition}";
}

.flexbox() {
    display: flex;
}

.flexbox(@type) {
    display: ~"@{type}-flex";
}

.animation(...) {
    animation: @arguments;
}

.animation-delay(...) {
    animation-delay: @arguments;
}

.flex-direction(@direction) {
    flex-direction: @direction;
}

.flex-wrap(@wrap) {
    flex-wrap: @wrap;
}

.flex(@amount) {
    flex: @amount;
}

.flex-align(@alignment) {
    flex-align: @alignment;
}

.flex-align-items(@alignment) {
    align-items: @alignment;
}

.flex-align-content(@alignment) {
    align-content: @alignment;
}

.flex-pack(@pack) {
    flex-pack: @pack;
}

.text-size-adjust(...) {
    text-size-adjust: @arguments;
}

.prohibit-selection() {
    user-select: none;
}

.disable-high-contrast() {
    -ms-high-contrast-adjust: none;
}

.box-sizing(@sizing) {
    box-sizing: @sizing;
}

.transform(...) {
    transform: @arguments;
}

.transform-origin(...) {
    transform-origin: @arguments;
}

.transform-style(...) {
    transform-style: @arguments;
}

.transition(...) {
    transition: @arguments;
}

.guarded-border-radius(@value) when (@value < 0) {
    border-radius: 0;
}

.guarded-border-radius(@value) when (@value >= 0) {
    border-radius: @value;
}

.box-shadow(...) {
    box-shadow: @arguments;
}

.window-shadow(@shadow-color) when not (@shadow-color = transparent) {
    border-color: @shadow-color;
    .box-shadow(@window-shadow-style lighten(@shadow-color, 50%));

    &.k-state-focused {
        border-color: @shadow-color;
        .box-shadow(@window-shadow-style @shadow-color);
    }
}

.window-shadow(@shadow-color) when (@shadow-color = transparent) and (lightness(@widget-background-color) < 50%) {
    border-color: @widget-border-color;

    &.k-state-focused {
        border-color: lighten(@widget-border-color, 20%);
    }
}

.window-shadow(@shadow-color) when (@shadow-color = transparent) and (lightness(@widget-background-color) >= 50%) {
    border-color: @widget-border-color;

    &.k-state-focused {
        border-color: darken(@widget-border-color, 10%);
    }
}

.background-clip(@type) {
    background-clip: @type;
}

.composite-background(@gradient) when (@gradient = none) {
    background-image: @texture;
}

.composite-background(@gradient) when not (@gradient = none) {
    background-image: @fallback-texture;
    background-image: @texture, ~"linear-gradient(to bottom, @{gradient})";
}

.selection(@color) {
    ::selection {
        background-color: @color;
        text-shadow: none;
        color: @colour1;
    }

    ::-moz-selection {
        background-color: @color;
        text-shadow: none;
        color: @colour1;
    }
}

/*!






















*/
.k-theme-test-class,
.ktb-theme-id-@{theme-name} {
    opacity: 0;
}

// serialize original values
.ktb-var-accent              { color: @accent; }
.ktb-var-base                { color: @base; }
.ktb-var-background          { color: @background; }

.ktb-var-border-radius       { border-radius: @border-radius; }

.ktb-var-normal-background   { color: @normal-background; }
.ktb-var-normal-gradient     { .composite-background(@normal-gradient); }
.ktb-var-normal-text-color   { color: @normal-text-color; }

.ktb-var-hover-background    { color: @hover-background; }
.ktb-var-hover-gradient      { .composite-background(@hover-gradient); }
.ktb-var-hover-text-color    { color: @hover-text-color; }

.ktb-var-selected-background { color: @selected-background; }
.ktb-var-selected-gradient   { .composite-background(@selected-gradient); }
.ktb-var-selected-text-color { color: @selected-text-color; }

.ktb-var-error               { color: @error; }
.ktb-var-warning             { color: @warning; }
.ktb-var-success             { color: @success; }
.ktb-var-info                { color: @info; }

.ktb-var-series-a            { color: @series-a; }
.ktb-var-series-b            { color: @series-b; }
.ktb-var-series-c            { color: @series-c; }
.ktb-var-series-d            { color: @series-d; }
.ktb-var-series-e            { color: @series-e; }
.ktb-var-series-f            { color: @series-f; }

.k-grid-norecords-template {
    background-color: @widget-background-color;
    border: 1px solid @widget-border-color;
}


.k-in,
.k-item,
.k-window-action
{
    border-color: transparent;
}

/* main colors */
.k-block,
.k-widget
{
    background-color: @widget-background-color;
}

.k-block,
.k-widget,
.k-input,
.k-textbox,
.k-group,
.k-content,
.k-header,
.k-filter-row > th,
.k-editable-area,
.k-separator,
.k-colorpicker .k-i-arrow-60-down,
.k-textbox > input,
.k-autocomplete,
.k-dropdown-wrap,
.k-toolbar,
.k-group-footer td,
.k-grid-footer,
.k-footer-template td,
.k-state-default,
.k-state-default .k-select,
.k-state-disabled,
.k-grid-header,
.k-grid-header-wrap,
.k-grid-header-locked,
.k-grid-footer-locked,
.k-grid-content-locked,
.k-grid td,
.k-grid td.k-state-selected,
.k-grid-footer-wrap,
.k-pager-wrap,
.k-pager-wrap .k-link,
.k-pager-refresh,
.k-grouping-header,
.k-grouping-header .k-group-indicator,
.k-panelbar > .k-item > .k-link,
.k-panel > .k-item > .k-link,
.k-panelbar .k-panel,
.k-panelbar .k-content,
.k-treemap-tile,
.k-calendar th,
.k-slider-track,
.k-splitbar,
.k-dropzone-active,
.k-tiles,
.k-toolbar,
.k-tooltip,
.k-button-group .k-tool,
.k-upload-files,
.k-popup.k-align .k-list .k-item:last-child,
.k-editor-dialog .k-tabstrip-items
{
    border-color: @widget-border-color;
}

.k-group,
.k-toolbar,
.k-grouping-header,
.k-pager-wrap,
.k-group-footer td,
.k-grid-footer,
.k-footer-template td,
.k-widget .k-status,
.k-calendar th,
.k-dropzone-hovered,
.k-widget.k-popup
{
    background-color: @group-background-color;
}

.k-grouping-row td,
td.k-group-cell,
.k-resize-handle-inner
{
    background-color: @header-background-color;
}

ps-lds-simple-activities div.k-grid-content table > tbody > tr.k-grouping-row td
{
    background-color: #ffffff;
}
ps-lds-simple-activities div.k-grid-content table > tbody > tr > td.k-group-cell
{
    background-color: #ffffff;
}

.k-list-container
{
    border-color: @group-border-color;
    background-color: @select-group-background-color;
}

.k-content,
.k-editable-area,
.k-panelbar > li.k-item,
.k-panel > li.k-item,
.k-tiles
{
    background-color: @content-background-color;
}

.k-alt,
.k-separator,
.k-resource.k-alt,
.k-pivot-layout > tbody > tr:first-child > td:first-child
{
    background-color: @alt-background-color;
}

.k-pivot-rowheaders .k-alt .k-alt,
.k-header.k-alt
{
    background-color: @nested-alt-background-color;
}

.k-textbox,
.k-autocomplete.k-header,
.k-dropdown-wrap.k-state-active,
.k-picker-wrap.k-state-active,
.k-numeric-wrap.k-state-active
{
    border-color: @widget-border-color;
    background-color: @select-background-color;
}

.k-textbox > input,
.k-autocomplete .k-input,
.k-dropdown-wrap .k-input,
.k-autocomplete.k-state-focused .k-input,
.k-dropdown-wrap.k-state-focused .k-input,
.k-picker-wrap.k-state-focused .k-input,
.k-numeric-wrap.k-state-focused .k-input
{
    border-color: @widget-border-color;
}

input.k-textbox,
textarea.k-textbox,
input.k-textbox:hover,
textarea.k-textbox:hover,
.k-textbox > input
{
    background: none;
}

.k-input,
input.k-textbox,
textarea.k-textbox,
input.k-textbox:hover,
textarea.k-textbox:hover,
.k-textbox > input,
.k-multiselect-wrap
{
    background-color: @input-background-color;
    color: @input-text-color;
}

// Bootstrap readonly input styling has more specificity than ours.
.k-input[readonly]
{
    background-color: @input-background-color;
    color: @input-text-color;
}

.k-block,
.k-widget,
.k-popup,
.k-content,
.k-toolbar,
.k-dropdown .k-input
{
    color: @widget-text-color;
}

.k-inverse
{
    color: @inverse-text-color;
}

.k-block
{
    color: @header-text-color;
}

.k-link:link,
.k-link:visited,
.k-nav-current.k-state-hover .k-link
{
    color: @link-text-color;
}

.k-tabstrip-items .k-link,
.k-panelbar > li > .k-link
{
    color: @widget-text-color;
}

.k-header,
.k-treemap-title,
.k-grid-header .k-header > .k-link
{
    color: @header-text-color;
}

.k-header,
.k-grid-header,
.k-toolbar,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-grouping-header,
.k-pager-wrap,
.k-textbox,
.k-button,
.k-progressbar,
.k-draghandle,
.k-autocomplete,
.k-state-highlight,
.k-tabstrip-items .k-item,
.k-panelbar .k-tabstrip-items .k-item,
.km-pane-wrapper > .km-pane > .km-view > .km-content
{
    .composite-background(@widget-gradient);
    background-position: 50% 50%;
    background-color: @header-background-color;
}

.k-block,
.k-header,
.k-grid-header,
.k-toolbar,
.k-grouping-header,
.k-pager-wrap,
.k-button,
.k-draghandle,
.k-treemap-tile,
html .km-pane-wrapper .k-header
{
    background-color: @header-background-color;
}

.k-mediaplayer-toolbar
{
    background-color: fade(@group-background-color, 70%);
}

/* icons */
.k-icon:hover,
.k-state-hover .k-icon,
.k-state-selected .k-icon,
.k-state-focused .k-icon,
.k-column-menu .k-state-hover .k-sprite,
.k-column-menu .k-state-active .k-sprite,
.k-pager-numbers .k-current-page .k-link:hover:after,
.k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view.k-state-hover > .k-link:after
{
    opacity:1;
}

.k-icon,
.k-state-disabled .k-icon,
.k-column-menu .k-sprite,
.k-pager-numbers .k-current-page .k-link:after,
.k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after
{
    opacity: @default-icon-opacity;
}

.k-mobile-list .k-check:checked,
.k-mobile-list .k-edit-field [type=checkbox]:checked,
.k-mobile-list .k-edit-field [type=radio]:checked
{
    opacity: @default-icon-opacity;
}

.k-tool
{
    border-color: transparent;
}

.k-loading,
.k-state-hover .k-loading,
.k-i-loading,
.k-state-hover .k-i-loading
{
    background-image: url('@{image-folder}/loading.gif');
    background-position: 50% 50%;
}

.k-loading-image { background-image: url('@{image-folder}/loading-image.gif'); }
.k-loading-color { background-color: @loading-panel-color; }

.k-button
{
    color: @button-text-color;
    border-color: @button-border-color;
    background-color: @button-background-color;
}

.k-draghandle
{
    border-color: @draghandle-border-color;
    background-color: @draghandle-background-color;
    .box-shadow(@draghandle-shadow);
}

.k-draghandle:hover
{
    border-color: @draghandle-hover-border-color;
    background-color: @draghandle-hover-background-color;
    .box-shadow(@draghandle-hover-shadow);
}

/* Scheduler */

.k-scheduler
{
    color: @event-text-color;
    background-color: @scheduler-background-color;
}

.k-scheduler-layout
{
    color: @widget-text-color;
}

.k-scheduler-datecolumn,
.k-scheduler-groupcolumn
{
    background-color: @scheduler-background-color;
    color: @widget-text-color;
}

.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: @cell-border-color;
}

.k-nonwork-hour
{
    background-color: @scheduler-nonwork-background-color;
}

.k-gantt .k-nonwork-hour
{
    background-color: fade(@base, 20%);
}

.k-gantt .k-header.k-nonwork-hour
{
    background-color: fade(@base, 15%);
}

.k-scheduler-table .k-today,
.k-today > .k-scheduler-datecolumn,
.k-today > .k-scheduler-groupcolumn
{
    background-color: @column-highlight-background-color;
}

.k-scheduler-now-arrow
{
    border-left-color: @current-time-color;
}

.k-scheduler-now-line
{
    background-color: @current-time-color;
}

.k-event,
.k-task-complete
{
    border-color: @event-background-color;
    background: darken(@event-background-color, 15%) 0 -257px @tooltip-texture repeat-x;
    color: @event-text-color;
}

.k-event-inverse {
    color: @event-inverse-text-color;
}

.k-event.k-state-selected
{
    background-position: 0 0;
    .box-shadow(0 0 0 2px @normal-text-color);
}

.k-event .k-resize-handle:after,
.k-task-single .k-resize-handle:after
{
    background-color: @resize-background-color;
}

.k-scheduler-marquee:before,
.k-scheduler-marquee:after
{
    border-color: @selected-background-color;
}

.k-panelbar .k-content,
.k-panelbar .k-panel,
.k-panelbar .k-item
{
    background-color: @panelbar-content-background;
    color: @panelbar-content-color;
    border-color: @secondary-border-color;
}

.k-panelbar > li > .k-link
{
    color: @panelbar-content-color;
}

.k-panelbar > .k-item > .k-link
{
    border-color: @secondary-border-color;
}

.k-panel > li.k-item
{
    background-color: @panelbar-content-background;
}

/* states */
.k-state-active,
.k-state-active:hover,
.k-active-filter,
.k-tabstrip .k-state-active
{
    background-color: @active-background-color;
    border-color: @active-border-color;
    color: @active-text-color;
}

.k-fieldselector .k-list-container
{
    background-color: @active-background-color;
}

.k-button:focus,
.k-button.k-state-focused
{
    border-color: @button-focused-border-color;
}

.k-button:hover,
.k-button.k-state-hover
{
    color: @button-hover-text-color;
    border-color: @button-hover-border-color;
    background-color: @button-hover-background-color;
}

.k-button:active,
.k-button.k-state-active
{
    color: @selected-text-color;
    background-color: @button-active-background;
    border-color: @button-active-border-color;
}

.k-button:active:hover,
.k-button.k-state-active:hover
{
    color: @primary-hover-text-color;
    border-color: @primary-hover-border-color;
    background-color: @primary-hover-background-color;
}

.k-button[disabled],
.k-button.k-state-disabled,
.k-state-disabled .k-button,
.k-state-disabled .k-button:hover,
.k-button.k-state-disabled:hover,
.k-state-disabled .k-button:active,
.k-button.k-state-disabled:active
{
    color: @disabled-text-color;
    border-color: @disabled-border-color;
    background-color: @disabled-background-color;
    .composite-background(@disabled-gradient);
}

.k-button:focus:not(.k-state-disabled):not([disabled])
{
    .box-shadow(@button-focused-shadow);
}

.k-button:focus:active:not(.k-state-disabled):not([disabled])
{
    .box-shadow(@button-focused-active-shadow);
}

.k-menu .k-state-hover>.k-state-active
{
    background-color: transparent;
}

.k-button-bare {
    &.k-state-focused .k-font-icon,
    &:focus .k-font-icon {
        text-shadow: 0 0 3px currentColor;
    }
}

html .k-mediaplayer-toolbar .k-button-bare {
    &:active,
    &.k-state-active,
    &.k-state-active:hover {
    color: @accent;
    }
}

.k-menu {
    .k-state-selected > .k-link {
        color: @selected-text-color;
        background-color: @selected-background-color;
        border-color: @selected-border-color;
        .composite-background(@selected-gradient);
    }

    .k-link.k-state-active {
        background-color: @active-background-color;
        border-color: @active-border-color;
        color: @active-text-color;
    }

    .k-state-hover > .k-link {
        color: @hover-text-color;
        background-color: @hover-background-color;
        border-color: @hover-border-color;
        .composite-background(@hover-gradient);
    }
}

.k-state-highlight
{
    background: @active-background-color;
    color: @active-text-color;
}

.k-state-focused,
.k-grouping-row .k-state-focused
{
    border-color: @focused-border-color;
}

.k-calendar {
    .k-link {
        color: @calendar-content-text-color;
    }

    .k-footer {
        padding: 0;
    }

    .k-footer .k-nav-today {
        color: @form-widget-color;
        text-decoration: @calendar-footer-text-decoration;
        background-color: @calendar-footer-background;
    }

    .k-footer .k-nav-today:hover,
    .k-footer .k-nav-today.k-state-hover {
        background-color: @calendar-footer-hover-background;
        text-decoration: @calendar-footer-hover-text-decoration;
    }

    .k-footer .k-nav-today:active {
        background-color: @calendar-footer-active-background;
    }

    .k-link.k-nav-fast {
        color: @form-widget-color;
    }

    .k-nav-fast.k-state-hover {
        text-decoration: @calendar-header-hover-text-decoration;
        background-color: @calendar-header-hover-background;
        color: @hover-text-color;
    }

    .k-link.k-state-hover {
        border-radius: @calendar-border-radius;
    }

    .k-today {
        box-shadow: inset 0 0 0 1px @accent;
    }

    .k-today .k-link {
        color: contrast(@widget-background-color, @accent, @selected-text-color, 0.5);
        font-weight: bold;
    }

    td.k-today.k-state-focused,
    td.k-today.k-state-focused.k-state-hover {
        box-shadow: @focused-item-shadow;
    }

    td.k-today.k-state-hover,
    td.k-today.k-state-selected {
        box-shadow: none;
    }

    td.k-today.k-state-hover .k-link {
        color: @calendar-content-text-color;
    }

    .k-footer .k-link {
        border-radius: 0;
    }

    th {
        background-color: @calendar-group-background-color;
    }

    td.k-state-selected.k-state-hover {
        background-color: saturate(@selected-background-color, 7%);
        .composite-background(none);
    }

    td.k-state-selected .k-link,
    td.k-today.k-state-selected.k-state-hover .k-link {
        color: @selected-text-color;
    }

    td.k-state-focused.k-state-selected,
    td.k-state-selected.k-state-active,
    td.k-state-selected:active,
    td.k-state-selected.k-state-hover:active {
        .box-shadow(@focused-item-shadow);
    }
}

.k-window-titlebar .k-link {
    border-radius: @calendar-border-radius;
}

.k-calendar-container.k-group {
    border-color: @group-border-color;
}

.k-state-selected,
.k-state-selected:link,
.k-state-selected:visited,
.k-list>.k-state-selected,
.k-list>.k-state-highlight,
.k-panel > .k-state-selected,
.k-ghost-splitbar-vertical,
.k-ghost-splitbar-horizontal,
.k-draghandle.k-state-selected:hover,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-marquee-color
{
    color: @selected-text-color;
    background-color: @selected-background-color;
    border-color: @selected-border-color;
}

.k-virtual-item.k-first,
.k-group-header + .k-list > .k-item.k-first,
.k-static-header + .k-list > .k-item.k-first
{
    border-top-color: @hover-border-color;
}

.k-group-header + div > .k-list > .k-item.k-first:before {
    border-top-color: contrast(@widget-background-color, darken(@header-background-color, 20%), @alt-background-color, .5);
}

.k-popup > .k-group-header,
.k-popup > .k-virtual-wrap > .k-group-header
{
    background: @hover-border-color;
    color: @selected-text-color;
}

.k-popup .k-list .k-item > .k-group
{
    background: contrast(@widget-background-color, darken(@header-background-color, 20%), @alt-background-color, .5);
    color: contrast(darken(@header-background-color, 20%), @colour1, @hover-text-color, .6);
    border-bottom-left-radius: @inner-border-radius;
}

.k-popup .k-treeview .k-item > .k-group
{
    background: transparent;
    color: @widget-text-color;
}

.k-treeview span.k-in {
    width: 90%;
}

.k-treeview span.k-in .form-control {
    padding: 2px;
    padding-right: 0;
}

.k-marquee-text
{
    color: @selected-text-color;
}

.k-state-focused,
.k-list>.k-state-focused,
.k-listview>.k-state-focused,
.k-grid-header th.k-state-focused,
td.k-state-focused,
.k-button.k-state-focused
{
    .box-shadow(@focused-item-shadow);
}

.k-state-focused.k-state-selected,
.k-list>.k-state-focused.k-state-selected,
.k-listview>.k-state-focused.k-state-selected,
td.k-state-focused.k-state-selected
{
    .box-shadow(@focused-active-item-shadow);
}

.k-ie8 .k-panelbar span.k-state-focused,
.k-ie8 .k-menu li.k-state-focused,
.k-ie8 .k-listview>.k-state-focused,
.k-ie8 .k-grid-header th.k-state-focused,
.k-ie8 td.k-state-focused,
.k-ie8 .k-tool.k-state-hover,
.k-ie8 .k-button:focus,
.k-ie8 .k-button.k-state-focused
{
    background-color: @hover-background-color;
}

.k-list>.k-state-selected.k-state-focused,
.k-list-optionlabel.k-state-selected.k-state-focused
{
    .box-shadow(none);
}

.k-state-selected>.k-link,
.k-panelbar > li > .k-state-selected,
.k-panelbar>li.k-state-default>.k-link.k-state-selected
{
    color: @selected-text-color;
}

.k-state-hover,
.k-state-hover:hover,
.k-splitbar-horizontal-hover:hover,
.k-splitbar-vertical-hover:hover,
.k-list>.k-state-hover,
.k-scheduler .k-scheduler-toolbar ul li.k-state-hover,
.k-pager-wrap .k-link:hover,
.k-dropdown .k-state-focused,
.k-filebrowser-dropzone,
.k-mobile-list .k-item > .k-link:active,
.k-mobile-list .k-item > .k-label:active,
.k-mobile-list .k-edit-label.k-check:active,
.k-mobile-list .k-recur-view .k-check:active
{
    color: @hover-text-color;
    background-color: @hover-background-color;
    border-color: @hover-border-color;
}

/* this selector should be used separately, otherwise old IEs ignore the whole rule */
.k-mobile-list .k-scheduler-timezones .k-edit-field:nth-child(2):active
{
    color: @hover-text-color;
    background-color: @hover-background-color;
    border-color: @hover-border-color;
}

.k-ie8 .k-window-titlebar .k-state-hover
{
    border-color: @hover-border-color;
}

.k-state-hover > .k-select,
.k-state-focused > .k-select
{
    border-color: @hover-border-color;
}

.k-button:hover,
.k-button.k-state-hover,
.k-button:focus,
.k-button.k-state-focused,
.k-textbox:hover,
.k-state-hover,
.k-state-hover:hover,
.k-pager-wrap .k-link:hover,
.k-other-month.k-state-hover .k-link,
div.k-filebrowser-dropzone em,
.k-draghandle:hover
{
    .composite-background(@hover-gradient);
}

.k-pager-wrap
{
    background-color: @header-background-color;
    color: @header-text-color;
}

.k-autocomplete.k-state-active,
.k-picker-wrap.k-state-active,
.k-numeric-wrap.k-state-active,
.k-dropdown-wrap.k-state-active,
.k-state-active,
.k-state-active:hover,
.k-state-active>.k-link,
.k-button:active,
.k-panelbar>.k-item>.k-state-focused
{
    .composite-background(@active-gradient);
}

.k-state-selected,
.k-button:active,
.k-button.k-state-active,
.k-draghandle.k-state-selected:hover
{
    .composite-background(@selected-gradient);
}

.k-button:active,
.k-button.k-state-active,
.k-draghandle.k-state-selected:hover
{
    background-position: 50% 50%;
}

.k-state-hover>.k-link,
.k-other-month.k-state-hover .k-link,
div.k-filebrowser-dropzone em
{
    color: @hover-text-color;
}

.k-autocomplete.k-state-hover,
.k-autocomplete.k-state-focused,
.k-picker-wrap.k-state-hover,
.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-hover,
.k-numeric-wrap.k-state-focused,
.k-dropdown-wrap.k-state-hover,
.k-dropdown-wrap.k-state-focused
{
    background-color: @select-hover-background-color;
    .composite-background(@hover-gradient);
    background-position: 50% 50%;
    border-color: @select-border-color;
}

.km-pane-wrapper .k-mobile-list input:not([type="checkbox"]):not([type="radio"]),
.km-pane-wrapper .km-pane .k-mobile-list select:not([multiple]),
.km-pane-wrapper .k-mobile-list textarea,
.k-dropdown .k-state-focused .k-input
{
    color: @widget-text-color;
}

.km-pane-wrapper .km-pane .k-mobile-list.k-filter-menu {
    .k-space-right {
        .composite-background(@widget-gradient);
        background-position: 50% 50%;
        background: contrast(@selected-background, lighten(@base, 1%), darken(@base, 9%), 0.5);
        border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);

        > input {
            background: @background;
            border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);

            &:focus {
                .box-shadow(@focused-shadow);
            }
        }
    }
}

.k-dropdown .k-state-hover .k-input
{
    color: @hover-text-color;
}

.k-state-error
{
    border-color: @error-border-color;
    background-color: @error-background-color;
    color: @error-text-color;
}

.k-state-disabled
{
    opacity:.7;
}

.k-ie8 .k-state-disabled
{
    filter:alpha(opacity=70);
}

.k-tile-empty.k-state-selected,
.k-loading-mask.k-state-selected {
    border-width: 0;
    background-image: none;
    background-color: transparent;
}

.k-state-disabled,
.k-state-disabled .k-link,
.k-state-disabled .k-button,
.k-other-month,
.k-other-month .k-link,
.k-dropzone em,
.k-tile-empty strong,
.k-slider .k-draghandle
{
    color: @disabled-text-color;
}

.k-dropzone .k-upload-status
{
    color: @disabled-text-color;
}

/* Progressbar */

.k-progressbar-indeterminate
{
    background: url('@{image-folder}/indeterminate.gif');
}

.k-progressbar-indeterminate .k-progress-status-wrap,
.k-progressbar-indeterminate .k-state-selected
{
    display: none;
}

/* Slider */
.k-slider-track
{
    background-color: @widget-border-color;
}

.k-slider-selection
{
    background-color: @selected-background-color;
}

.k-slider-horizontal .k-tick
{
    background-image:url('@{image-folder}/slider-h.gif');
}

.k-slider-vertical .k-tick
{
    background-image:url('@{image-folder}/slider-v.gif');
}

/* Tooltip */
.k-widget.k-tooltip
{
    .composite-background(@widget-gradient);
    background-position: 50% 50%;
    background-color: @tooltip-background-color;
    color: @tooltip-text-color;
    border-color: transparent;
    .box-shadow(0 4px 6px @shadow-color);
}

.k-widget.k-tooltip-validation
{
    border-color: @validation-border-color;
    background-color: @validation-background-color;
    color: @validation-text-color;
}

/* Bootstrap theme fix */
.input-prepend .k-tooltip-validation,
.input-append .k-tooltip-validation
{
    font-size: 12px;
    position: relative;
    top: 3px;
}

.k-callout-n
{
    border-bottom-color: @tooltip-background-color;
}

.k-callout-w
{
    border-right-color: @tooltip-background-color;
}

.k-callout-s
{
    border-top-color: @tooltip-background-color;
}

.k-callout-e
{
    border-left-color: @tooltip-background-color;
}

.k-tooltip-validation .k-callout-n
{
    border-bottom-color: @validation-border-color;
}

.k-tooltip-validation .k-callout-w
{
    border-right-color: @validation-border-color;
}

.k-tooltip-validation .k-callout-s
{
    border-top-color: @validation-border-color;
}

.k-tooltip-validation .k-callout-e
{
    border-left-color: @validation-border-color;
}

/* Splitter */
.k-splitbar
{
    background-color: @splitbar-background-color;
}

.k-restricted-size-vertical,
.k-restricted-size-horizontal
{
    background-color: @error-text-color;
}

/* Upload */

.k-file
{
    background-color: @active-background-color;
    border-color: @widget-border-color;
}

.k-file-progress
{
    color: @upload-progress-text-color;
}

.k-file-progress .k-progress
{
    background-color: @upload-progress-background-color;
}

.k-file-success
{
    color: @upload-success-text-color;
}

.k-file-success .k-progress
{
    background-color: @upload-success-background-color;
}

.k-file-error
{
    color: @upload-error-text-color;
}

.k-file-error .k-progress,
.k-file-invalid .k-progress
{
    background-color: @upload-error-background-color;
}

.k-file-extension-wrapper,
.k-multiple-files-extension-wrapper {
    color: @disabled-text-color;
    border-color: @disabled-text-color;
}

.k-file-invalid .k-file-name-invalid {
    color: @error;
}

.k-file-invalid-extension-wrapper,
.k-multiple-files-invalid-extension-wrapper {
    color: @error;
    border-color: @upload-invalid-color;
}

.k-file-extension-wrapper:before,
.k-multiple-files-extension-wrapper:before {
    background-color: @widget-background-color;
    border-color: transparent transparent @disabled-text-color @disabled-text-color;
}

.k-file-invalid-extension-wrapper:before,
.k-multiple-files-invalid-extension-wrapper:before {
    background-color: @widget-background-color;
    border-color: transparent transparent @upload-invalid-color @upload-invalid-color;
}

.k-multiple-files-extension-wrapper:after {
    border-top-color: @disabled-text-color;
    border-left-color: @disabled-text-color;
}

.k-multiple-files-invalid-extension-wrapper:after {
    border-top-color: @upload-invalid-color;
    border-left-color: @upload-invalid-color;
}

.k-file-size,
.k-file-information,
.k-file-validation-message {
    color: @disabled-text-color;
}

.k-upload .k-upload-selected {
    color: contrast(@base, @widget-text-color, @accent, .9);
    border-color: @widget-border-color;
}

/* ImageBrowser */

.k-tile
{
    border-color: @content-background-color;
}

.k-textbox:hover,
.k-tiles li.k-state-hover
{
    border-color: @hover-border-color;
}

.k-tiles li.k-state-selected
{
    border-color: @selected-border-color;
}

.k-filebrowser .k-tile .k-folder,
.k-filebrowser .k-tile .k-file,
.k-filebrowser .k-tile .k-i-folder,
.k-filebrowser .k-tile .k-i-file
{
    background-image: url('@{image-folder}/imagebrowser.png');
    background-size: auto auto;
}

/* TreeMap */

.k-leaf,
.k-leaf.k-state-hover:hover
{
    color: @colour1;
}

.k-leaf.k-inverse,
.k-leaf.k-inverse.k-state-hover:hover
{
    color: @colour6;
}

/* Shadows */
.k-widget,
.k-button
{
    .box-shadow(@widget-shadow);
}

.k-slider,
.k-treeview,
.k-upload
{
    .box-shadow(none);
}

.k-state-hover
{
    .box-shadow(@hover-shadow);
}

.k-textbox:focus,
.k-autocomplete.k-state-focused,
.k-dropdown-wrap.k-state-focused,
.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-focused
{
    .box-shadow(@focused-shadow);
}

.k-state-selected
{
    .box-shadow(@selected-shadow);
}

.k-state-active
{
    .box-shadow(@active-shadow);
}

.k-grid tr:hover {
    background-color: @select-hover-background-color;
    .composite-background(@hover-gradient);
    background-position: 50% 50%;
}

.k-grid .k-filter-row:hover,
.k-pivot-rowheaders .k-grid tr:hover {
    background: none;
}

.k-grid tr.k-state-selected:hover,
.k-grid td.k-state-selected:hover {
    background-color: saturate(@selected-background-color, 7%);
    .composite-background(none);
}

.k-popup,
.k-menu .k-menu-group,
.k-grid .k-filter-options,
.k-time-popup,
.k-datepicker-calendar,
.k-autocomplete.k-state-border-down,
.k-autocomplete.k-state-border-up,
.k-dropdown-wrap.k-state-active,
.k-picker-wrap.k-state-active,
.k-multiselect.k-state-focused,
.k-filebrowser .k-image,
.k-tooltip
{
    .box-shadow(0 2px 2px 0 @shadow-color);
}

.k-treemap-tile.k-state-hover
{
    .box-shadow(inset 0 0 0 3px @widget-border-color);
}

/* Window */

.k-window
{
    .window-shadow(@shadow-color);
    background-color: @widget-background-color;
}

.k-window.k-window-maximized,
.k-window-maximized .k-window-titlebar,
.k-window-maximized .k-window-content
{
    border-radius: 0;
}

.k-shadow
{
    .box-shadow(0 1px 2px 0 @shadow-color);
}

.k-inset
{
    .box-shadow(inset 0 1px 1px @shadow-color);
}

/* Selection */
.k-editor-inline {
    .selection(@selected-border-color);
}

/* Notification */

.k-widget.k-notification.k-notification-info
{
    background-color: @notification-info-background-color;
    color: @notification-info-text-color;
    border-color: @notification-info-border-color;
}

.k-widget.k-notification.k-notification-success
{
    background-color: @notification-success-background-color;
    color: @notification-success-text-color;
    border-color: @notification-success-border-color;
}

.k-widget.k-notification.k-notification-warning
{
    background-color: @notification-warning-background-color;
    color: @notification-warning-text-color;
    border-color: @notification-warning-border-color;
}

.k-widget.k-notification.k-notification-error
{
    background-color: @notification-error-background-color;
    color: @notification-error-text-color;
    border-color: @notification-error-border-color;
}

.k-widget.k-notification {
    .composite-background(@notification-gradient);
}

/* Gantt */

.k-gantt .k-treelist
{
    background: @alt-background-color;
}

.k-gantt .k-treelist .k-alt
{
    background-color: contrast(@alt-background-color, lighten(@alt-background-color, 5%), darken(@alt-background-color, 5%), 0.5);
}

.k-gantt .k-treelist tr:hover {
   .composite-background(@widget-gradient);
    background-color: contrast(@widget-background-color, darken(@header-background-color, 20%), @header-background-color, .5);
}

.k-gantt .k-treelist .k-state-selected,
.k-gantt .k-treelist .k-state-selected td,
.k-gantt .k-treelist .k-alt.k-state-selected,
.k-gantt .k-treelist .k-alt.k-state-selected > td
{
    background-color: @selected-background-color;
    .composite-background(@selected-gradient);
}

.k-gantt .k-treelist .k-state-selected:hover,
.k-gantt .k-treelist .k-state-selected:hover td
{
    background-color: saturate(@selected-background-color, 7%);
    .composite-background(none);
}

.k-task-dot:after
{
    background-color: @widget-text-color;
    border-color: @widget-text-color;
}

.k-task-dot:hover:after
{
    background-color: @active-background-color;
}

.k-task-summary
{
    border-color: @task-summary-color;
    background: @task-summary-color;
}

.k-task-milestone,
.k-task-summary-complete
{
    border-color: @widget-text-color;
    background: @widget-text-color;
}

.k-state-selected.k-task-summary
{
    border-color: @task-summary-selected-color;
    background: @task-summary-selected-color;
}

.k-state-selected.k-task-milestone,
.k-state-selected .k-task-summary-complete
{
    border-color: @selected-background-color;
    background: @selected-background-color;
}

.k-task-single
{
    background-color: lighten(@event-background-color, 7%);
    border-color: @event-background-color;
    color: @event-text-color;
}

.k-state-selected.k-task-single
{
    border-color: @selected-border-color;
}

.k-line
{
    background-color: @widget-text-color;
    color: @widget-text-color;
}

.k-state-selected.k-line
{
    background-color: @selected-background-color;
    color: @selected-background-color;
}

.k-resource
{
    background-color: @widget-background-color;
}

/* PivotGrid */

.k-i-kpi-decrease,
.k-i-kpi-denied,
.k-i-kpi-equal,
.k-i-kpi-hold,
.k-i-kpi-increase,
.k-i-kpi-open
{
    background-image: url('@{image-folder}/sprite_kpi.png');
}

/* Border radius */
.k-block,
.k-button,
.k-textbox,
.k-drag-clue,
.k-touch-scrollbar,
.k-window,
.k-window-titleless .k-window-content,
.k-window-action,
.k-inline-block,
.k-grid .k-filter-options,
.k-grouping-header .k-group-indicator,
.k-autocomplete,
.k-multiselect,
.k-combobox,
.k-dropdown,
.k-dropdown-wrap,
.k-datepicker,
.k-timepicker,
.k-colorpicker,
.k-datetimepicker,
.k-notification,
.k-numerictextbox,
.k-picker-wrap,
.k-numeric-wrap,
.k-colorpicker,
.k-list-container,
.k-calendar-container,
.k-calendar td,
.k-calendar .k-link,
.k-treeview .k-in,
.k-editor-inline,
.k-tooltip,
.k-tile,
.k-slider-track,
.k-slider-selection,
.k-upload,
.k-split-button
.k-gantt-views,
.k-gantt-views > .k-current-view
{
    border-radius: @main-border-radius;
}

.k-tool {
    text-align: center;
    vertical-align: middle;
}

.k-tool.k-group-start,
.k-toolbar .k-split-button .k-button,
.k-toolbar .k-button-group .k-group-start
{
    border-radius: @main-border-radius 0 0 @main-border-radius;
}

.k-rtl .k-tool.k-group-start,
.k-rtl .k-toolbar .k-split-button .k-button,
.k-rtl .k-toolbar .k-button-group .k-group-start
{
    border-radius: 0 @main-border-radius @main-border-radius 0;
}

.k-toolbar .k-button-group > .k-group-end {
    border-radius: @main-border-radius;
}

.k-tool.k-group-end,
.k-toolbar .k-button-group .k-button + .k-group-end,
.k-toolbar .k-split-button .k-split-button-arrow
{
    border-radius: 0 @main-border-radius @main-border-radius 0;
}

.k-rtl .k-tool.k-group-end,
.k-rtl .k-toolbar .k-button-group .k-group-end,
.k-rtl .k-toolbar .k-split-button .k-split-button-arrow
{
    border-radius: @main-border-radius 0 0 @main-border-radius;
}

.k-group-start.k-group-end.k-tool
{
    border-radius: @main-border-radius;
}

.k-calendar-container.k-state-border-up,
.k-list-container.k-state-border-up,
.k-autocomplete.k-state-border-up,
.k-multiselect.k-state-border-up,
.k-dropdown-wrap.k-state-border-up,
.k-picker-wrap.k-state-border-up,
.k-numeric-wrap.k-state-border-up,
.k-window-content,
.k-filter-menu
{
    border-radius: 0 0 @main-border-radius @main-border-radius;
}

.k-autocomplete.k-state-border-up .k-input,
.k-dropdown-wrap.k-state-border-up .k-input,
.k-picker-wrap.k-state-border-up .k-input,
.k-picker-wrap.k-state-border-up .k-selected-color,
.k-numeric-wrap.k-state-border-up .k-input
{
    border-radius: 0 0 0 @main-border-radius;
}

.k-multiselect.k-state-border-up .k-multiselect-wrap
{
    border-radius: 0 0 @main-border-radius @main-border-radius;
}

.k-window-titlebar,
.k-block > .k-header,
.k-tabstrip-items .k-item,
.k-panelbar .k-tabstrip-items .k-item,
.k-tabstrip-items .k-link,
.k-calendar-container.k-state-border-down,
.k-list-container.k-state-border-down,
.k-autocomplete.k-state-border-down,
.k-multiselect.k-state-border-down,
.k-dropdown-wrap.k-state-border-down,
.k-picker-wrap.k-state-border-down,
.k-numeric-wrap.k-state-border-down,
.k-gantt-views.k-state-expanded,
.k-gantt-views.k-state-expanded > .k-current-view
{
    border-radius: @main-border-radius @main-border-radius 0 0;
}

.k-split-button.k-state-border-down > .k-button
{
    border-radius: @main-border-radius 0 0 0;
}

.k-split-button.k-state-border-up > .k-button
{
    border-radius: 0 0 0 @main-border-radius;
}

.k-split-button.k-state-border-down > .k-split-button-arrow
{
    border-radius: 0 @main-border-radius 0 0;
}

.k-split-button.k-state-border-up > .k-split-button-arrow
{
    border-radius: 0 0 @main-border-radius 0;
}

.k-dropdown-wrap .k-input,
.k-picker-wrap .k-input,
.k-numeric-wrap .k-input
{
    border-radius: @inner-border-radius 0 0 @inner-border-radius;
}

.k-rtl .k-dropdown-wrap .k-input,
.k-rtl .k-picker-wrap .k-input,
.k-rtl .k-numeric-wrap .k-input
{
    border-radius: 0 @inner-border-radius @inner-border-radius 0;
}

.k-numeric-wrap .k-link
{
    border-radius: 0 @inner-border-radius 0 0;
}

.k-numeric-wrap .k-link + .k-link
{
    border-radius: 0 0 @inner-border-radius 0;
}

.k-colorpicker .k-selected-color
{
    border-radius: @inner-border-radius 0 0 @inner-border-radius;
}

.k-rtl .k-colorpicker .k-selected-color
{
    border-radius: 0 @inner-border-radius @inner-border-radius 0;
}

.k-autocomplete.k-state-border-down .k-input
{
    border-radius: @main-border-radius @main-border-radius 0 0;
}

.k-dropdown-wrap.k-state-border-down .k-input,
.k-picker-wrap.k-state-border-down .k-input,
.k-picker-wrap.k-state-border-down .k-selected-color,
.k-numeric-wrap.k-state-border-down .k-input
{
    border-radius: @main-border-radius 0 0 0;
}

.k-numeric-wrap .k-link.k-state-selected
{
    background-color: @numeric-selected-background;
}

.k-multiselect.k-state-border-down .k-multiselect-wrap
{
    border-radius: @inner-border-radius @inner-border-radius 0 0;
}

.k-dropdown-wrap .k-select,
.k-picker-wrap .k-select,
.k-numeric-wrap .k-select,
.k-datetimepicker .k-select+.k-select,
.k-list-container.k-state-border-right
{
    border-radius: 0 @main-border-radius @main-border-radius 0;
}

.k-rtl .k-dropdown-wrap .k-select,
.k-rtl .k-picker-wrap .k-select,
.k-rtl .k-numeric-wrap .k-select,
.k-rtl .k-datetimepicker .k-select+.k-select,
.k-rtl .k-list-container.k-state-border-right
{
    border-radius: @main-border-radius 0 0 @main-border-radius;
}

.k-numeric-wrap.k-expand-padding .k-input
{
    .guarded-border-radius(@main-border-radius);
}

.k-textbox > input,
.k-autocomplete .k-input,
.k-multiselect-wrap
{
    .guarded-border-radius(@inner-border-radius);
}

.k-list .k-state-hover,
.k-list .k-state-focused,
.k-list .k-state-highlight,
.k-list .k-state-selected,
.k-fieldselector .k-list .k-item,
.k-list-optionlabel,
.k-dropzone
{
    .guarded-border-radius(@list-border-radius);
}

.k-slider .k-button,
.k-grid .k-slider .k-button
{
    border-radius: @slider-border-radius;
}

.k-draghandle
{
    border-radius: @draghandle-border-radius;
}

.k-scheduler-toolbar > ul li:first-child,
.k-scheduler-toolbar > ul li:first-child .k-link,
.k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li,
.k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li .k-link
{
    border-radius: @main-border-radius 0 0 @main-border-radius;
}

.k-rtl .k-scheduler-toolbar > ul li:first-child,
.k-rtl .k-scheduler-toolbar > ul li:first-child .k-link,
.k-rtl .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li,
.k-rtl .k-scheduler-toolbar > ul.k-scheduler-views li:first-child + li .k-link,
.km-view.k-popup-edit-form .k-scheduler-toolbar > ul li:last-child,
.km-view.k-popup-edit-form .k-scheduler-toolbar > ul li:last-child .k-link
{
    border-radius: 0 @main-border-radius @main-border-radius 0;
}

.k-scheduler-phone .k-scheduler-toolbar > ul li.k-nav-today,
.k-scheduler-phone .k-scheduler-toolbar > ul li.k-nav-today .k-link,
.k-edit-field > .k-scheduler-navigation
{
    border-radius: @main-border-radius;
}

.k-scheduler-toolbar .k-nav-next,
.k-scheduler-toolbar ul + ul li:last-child,
.k-scheduler-toolbar .k-nav-next .k-link,
.k-scheduler-toolbar ul + ul li:last-child .k-link
{
    border-top-right-radius: @main-border-radius;
    border-bottom-right-radius: @main-border-radius;
}

.k-rtl .k-scheduler-toolbar .k-nav-next,
.k-rtl .k-scheduler-toolbar ul + ul li:last-child,
.k-rtl .k-scheduler-toolbar .k-nav-next .k-link,
.k-rtl .k-scheduler-toolbar ul + ul li:last-child .k-link
{
    border-radius: @main-border-radius 0 0 @main-border-radius;
}

.k-scheduler div.k-scheduler-footer ul li,
.k-scheduler div.k-scheduler-footer .k-link
{
    border-radius: @main-border-radius;
}

.k-more-events,
.k-event,
.k-task-single,
.k-task-complete,
.k-event .k-link
{
    border-radius: @inner-border-radius;
}

.k-scheduler-mobile .k-event
{
    border-radius: @inner-border-radius - 1;
}

/* Adaptive Grid */

.k-grid-mobile .k-column-active + th.k-header
{
    border-left-color: @widget-text-color;
}

html .km-pane-wrapper .km-widget,
.k-ie .km-pane-wrapper .k-widget,
.k-ie .km-pane-wrapper .k-group,
.k-ie .km-pane-wrapper .k-content,
.k-ie .km-pane-wrapper .k-header,
.k-ie .km-pane-wrapper .k-popup-edit-form .k-edit-field .k-button,
.km-pane-wrapper .k-mobile-list .k-item,
.km-pane-wrapper .k-mobile-list .k-edit-label,
.km-pane-wrapper .k-mobile-list .k-edit-field
{
    color: @widget-text-color;
}

@media screen and (-ms-high-contrast: active)
              and (-ms-high-contrast: none) {
    div.km-pane-wrapper a
    {
        color: @widget-text-color;
    }
}

.km-pane-wrapper .k-mobile-list .k-item,
.km-pane-wrapper .k-mobile-list .k-edit-field,
.km-pane-wrapper .k-mobile-list .k-recur-view > .k-edit-field .k-check
{
    background-color: @widget-background-color;
    border-top: 1px solid @cell-border-color;
}

.km-pane-wrapper .k-mobile-list .k-edit-field textarea
{
    outline-width: 0;
}

.km-pane-wrapper .k-mobile-list .k-item.k-state-selected
{
    background-color: @selected-background-color;
    border-top-color: @selected-border-color;
}

.km-pane-wrapper .k-mobile-list .k-recur-view > .k-edit-field .k-check:first-child
{
    border-top-color: transparent;
}

.km-pane-wrapper .k-mobile-list .k-item:last-child
{
    .box-shadow(inset 0 -1px 0 @cell-border-color);
}

.km-pane-wrapper .k-mobile-list > ul > li > .k-link,
.km-pane-wrapper .k-mobile-list .k-recur-view > .k-edit-label:nth-child(3),
.km-pane-wrapper #recurrence .km-scroll-container > .k-edit-label:first-child
{
    color: darken(@cell-border-color, 30);
}

.km-pane-wrapper .k-mobile-list > ul > li > .k-link
{
    border-bottom: 1px solid @cell-border-color;
}

.km-pane-wrapper .k-mobile-list .k-edit-field
{
    .box-shadow(0 1px 1px @cell-border-color);
}

.km-actionsheet .k-grid-delete,
.km-actionsheet .k-scheduler-delete,
.km-pane-wrapper .k-scheduler-delete,
.km-pane-wrapper .k-filter-menu .k-button[type=reset]
{
    color: @colour1;
    border-color: @error-border-color;
    background-color: red;
    background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,.15));
}

.km-actionsheet .k-grid-delete:active,
.km-actionsheet .k-scheduler-delete:active,
.km-pane-wrapper .k-scheduler-delete:active,
.km-pane-wrapper .k-filter-menu .k-button[type=reset]:active
{
    background-color: darken(red, 20);
}

/* /Column Menu */

.k-autocomplete.k-state-default,
.k-picker-wrap.k-state-default,
.k-numeric-wrap.k-state-default,
.k-dropdown-wrap.k-state-default
{
    .composite-background(@widget-gradient);
    background-position: 50% 50%;
    background-color: @drop-down-background;
    border-color: @drop-down-border-color;
}

.k-autocomplete.k-state-hover,
.k-picker-wrap.k-state-hover,
.k-numeric-wrap.k-state-hover,
.k-dropdown-wrap.k-state-hover
{
    background-color: @select-hover-background-color;
    .composite-background(@hover-gradient);
    background-position: 50% 50%;
    border-color: @drop-down-hover-border-color;
}

input.k-textbox,
textarea.k-textbox,
.k-multiselect.k-header
{
    border-color: @drop-down-border-color;
}

.k-multiselect.k-header.k-state-hover
{
    border-color: @drop-down-hover-border-color;
}

.k-autocomplete.k-state-focused,
.k-picker-wrap.k-state-focused,
.k-numeric-wrap.k-state-focused,
.k-dropdown-wrap.k-state-focused,
.k-multiselect.k-header.k-state-focused
{
    background-color: @select-hover-background-color;
    .composite-background(@hover-gradient);
    background-position: 50% 50%;
    border-color: @drop-down-focused-border-color;
    .box-shadow(@focused-shadow);
}

.k-list-container
{
    color: @drop-down-text-color;
}

.k-nodata {
    color: @disabled-text-color;
}

.k-dropdown .k-input,
.k-dropdown .k-state-focused .k-input,
.k-menu .k-popup
{
    color: @drop-down-text-color;
}

.k-state-default > .k-select
{
    border-color: @drop-down-border-color;
}

.k-state-hover > .k-select
{
    border-color: @drop-down-hover-border-color;
}

.k-state-focused > .k-select
{
    border-color: @drop-down-focused-border-color;
}

.k-tabstrip:focus
{
    .box-shadow(@focused-shadow);
}

.k-tabstrip-items .k-state-default .k-link,
.k-panelbar > li.k-state-default > .k-link
{
    color: @tabstrip-tabs-color;
}

.k-tabstrip-items .k-state-hover .k-link,
.k-panelbar > li.k-state-hover > .k-link,
.k-panelbar>li.k-state-default>.k-link.k-state-hover
{
    color: @hover-text-color;
}

.k-panelbar > .k-state-focused.k-state-hover
{
    background: @hover-background-color;
    .box-shadow(none);
}

.k-tabstrip-items .k-state-default
{
    border-color: @tabstrip-items-border;
}

.k-tabstrip-items .k-state-hover
{
    border-color: @hover-border-color;
}

.k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-items .k-state-active
{
    background-color: @active-background-color;
    .composite-background(@active-gradient);
    border-color: @active-border-color;
}

.k-tabstrip-top .k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-top .k-tabstrip-items .k-state-active {
   border-bottom-color: @widget-background-color;
}

.k-tabstrip .k-content.k-state-active
{
    background-color: @tabstrip-active-background;
    color: @widget-text-color;
}

.k-menu.k-header,
.k-menu .k-item
{
    border-color: @menu-border-color;
}

.k-column-menu,
.k-column-menu .k-item,
.k-overflow-container .k-overflow-group
{
    border-color: @secondary-border-color;
}

.k-overflow-container .k-overflow-group
{
    box-shadow: inset 0 1px 0 lighten(@secondary-border-color, 30%), 0 1px 0 lighten(@secondary-border-color, 30%);
}

.k-toolbar-first-visible.k-overflow-group,
.k-overflow-container .k-overflow-group + .k-overflow-group
{
    box-shadow: 0 1px 0 lighten(@secondary-border-color, 30%);
}

.k-toolbar-last-visible.k-overflow-group
{
    box-shadow: inset 0 1px 0 lighten(@secondary-border-color, 30%);
}

.k-column-menu .k-separator
{
    border-color: @secondary-border-color;
    background-color: transparent;
}

.k-menu .k-group
{
    border-color: @group-border-color;
}

.k-grid-filter.k-state-active
{
    background-color: @active-filter-background-color;
}

.k-grouping-row td,
.k-group-footer td,
.k-grid-footer td
{
    color: @secondary-text-color;
    border-color: @secondary-border-color;
    font-weight: bold;
}

.k-grouping-header
{
    color: @secondary-text-color;
}

.k-grid td.k-state-focused
{
    .box-shadow(@focused-item-shadow);
}

.k-header,
.k-grid-header-wrap,
.k-grid .k-grouping-header,
.k-grid-header,
.k-pager-wrap,
.k-pager-wrap .k-textbox,
.k-pager-wrap .k-link,
.k-grouping-header .k-group-indicator,
.k-gantt-toolbar .k-state-default
{
    border-color: @secondary-border-color;
}

//Primary buttons
.k-primary,
.k-overflow-container .k-primary
{
    color: @primary-button-text-color;
    border-color: @primary-button-border-color;
    .composite-background(@primary-gradient);
    background-position: 50% 50%;
    background-color: @primary-button-background-color;
    .box-shadow(@primary-shadow);
}

.k-primary:focus,
.k-primary.k-state-focused
{
    color: @primary-focused-color;
    border-color: @primary-focused-border-color;
    .composite-background(@primary-focused-gradient);
    .box-shadow(@primary-focused-active-item-shadow);
}

.k-primary:hover
{
    color: @primary-hover-text-color;
    border-color: @primary-hover-border-color;
    .composite-background(@primary-hover-gradient);
    background-color: @primary-hover-background-color;
    .box-shadow(@primary-hover-shadow);
}

.k-primary:focus:active:not(.k-state-disabled):not([disabled]),
.k-primary:focus:not(.k-state-disabled):not([disabled])
{
    .box-shadow(@primary-focused-active-item-shadow);
}

.k-primary:active
{
    color: @primary-active-text-color;
    border-color: @primary-active-border-color;
    .composite-background(@primary-active-gradient);
    background-color: @primary-active-background-color;
    .box-shadow(@primary-active-shadow);
}

.k-primary.k-state-disabled,
.k-state-disabled .k-primary,
.k-primary.k-state-disabled:hover,
.k-state-disabled .k-primary:hover,
.k-primary.k-state-disabled:hover,
.k-state-disabled .k-primary:active,
.k-primary.k-state-disabled:active
{
    color: @primary-disabled-text-color;
    border-color: @primary-disabled-border-color;
    background-color: @primary-disabled-background-color;
    .composite-background(@primary-disabled-gradient);
    .box-shadow(none);
}

// Fix for responsive design
.k-pager-numbers .k-link,
.k-treeview .k-in
{
    border-color: transparent;
}

.k-treeview .k-icon,
.k-scheduler-table .k-icon,
.k-grid .k-hierarchy-cell .k-icon
{
    background-color: @icon-background-color;
    border-radius: @calendar-border-radius;
}

.k-scheduler-table .k-state-hover .k-icon
{
    background-color: transparent;
}

.k-button:focus,
.k-split-button:focus {
    outline:none;
}

.k-split-button:focus {
    box-shadow: inset 0 0 4px 2px @hover-border-color;
}

.k-split-button:focus > .k-button {
    background: transparent;
    border-color: @button-focused-border-color;
}

.k-editor .k-tool:focus
{
   outline: 0;
   border-color: @button-focused-border-color;
   .box-shadow(@button-focused-shadow);
}

// Custom Insert Hyperlink Icon
.k-editor .k-i-custom-hyperlink:before {
    content: "\e10f";
}

/*!






















*/
@checkbox-border-color: darken(@base, 12%);
@checkbox-border-radius: 3px;
@checkbox-background-color: @background;
@checkbox-hover-border-color: darken(@base, 24%);
@checkbox-hover-box-shadow: none;
@checkbox-checked-border-color: darken(@base, 12%);
@checkbox-checked-background-color: @background;
@checkbox-checked-color: @accent;
@checkbox-active-border-color: lighten(@accent, 13%);
@checkbox-active-box-shadow: 0 0 2px 0 @checkbox-active-border-color;
@checkbox-disabled-background-color: @background;
@checkbox-disabled-color: darken(@base, 29%);
@checkbox-disabled-border-color: darken(@base, 12%);
@checkbox-indeterminate-gradient: @selected-gradient;
@checkbox-indeterminate-border-color: @checkbox-active-border-color;
@checkbox-indeterminate-background-color: @checkbox-checked-color;
@checkbox-indeterminate-hover-background-color: @checkbox-indeterminate-background-color;
@checkbox-indeterminate-hover-border-color: @checkbox-indeterminate-background-color;
@checkbox-indeterminate-border-radius: @checkbox-border-radius - 1;

.k-checkbox-label:before{
    border-color: @checkbox-border-color;
    background: @checkbox-background-color;
    border-radius: @checkbox-border-radius;
}

.k-checkbox-label:hover:before,
.k-checkbox:checked + .k-checkbox-label:hover:before  {
    border-color: @checkbox-hover-border-color;
    box-shadow: @checkbox-hover-box-shadow;
}

.k-checkbox:checked + .k-checkbox-label:before {
    background-color: @checkbox-checked-background-color;
    border-color: @checkbox-checked-border-color;
    color: @checkbox-checked-color;
}

.k-checkbox-label:active:before {
    box-shadow: @checkbox-active-box-shadow;
    border-color: @checkbox-active-border-color;
}

.k-checkbox:checked + .k-checkbox-label:active:before {
    box-shadow: @checkbox-active-box-shadow;
    border-color: @checkbox-active-border-color;
}

.k-checkbox:disabled + .k-checkbox-label {
    color: @checkbox-disabled-color;
}

.k-checkbox:disabled + .k-checkbox-label:hover:before {
    box-shadow: none;
}

.k-checkbox:disabled + .k-checkbox-label:before,
.k-checkbox:checked:disabled + .k-checkbox-label:before,
.k-checkbox:checked:disabled + .k-checkbox-label:active:before,
.k-checkbox:checked:disabled + .k-checkbox-label:hover:before  {
    color: @checkbox-disabled-color;
    background: @checkbox-disabled-background-color;
    border-color: @checkbox-disabled-border-color;
    border-radius: @checkbox-border-radius;
}

.k-checkbox:focus + .k-checkbox-label:before {
    border-color: @checkbox-active-border-color;
    box-shadow: @checkbox-active-box-shadow;
}

.k-checkbox:indeterminate + .k-checkbox-label:after {
    background-color: @checkbox-indeterminate-background-color;
    .composite-background(@checkbox-indeterminate-gradient);
    border-color: @checkbox-indeterminate-border-color;
    border-radius: @checkbox-indeterminate-border-radius;
}

.k-checkbox:indeterminate:hover + .k-checkbox-label:after {
    border-color: @checkbox-indeterminate-hover-border-color;
    background-color: @checkbox-indeterminate-hover-background-color;
}

@checkbox-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@checkbox-background-color: @colour1;
@checkbox-hover-border-color: contrast(@base, lighten(@base, 2%), darken(@base, 24%), 0.5);
@checkbox-checked-background-color: @colour1;
@checkbox-checked-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 29%), 0.5);
@checkbox-active-border-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 29%), 0.5);
@checkbox-active-box-shadow: 0 0 3px 0 @accent;
@checkbox-disabled-background-color: lighten(@hover-background, 21%);
@checkbox-disabled-color: @disabled-text-color;

/*!






















*/
@radio-border-color: darken(@base, 12%);
@radio-border-radius: 50%;
@radio-border-width: 1px;
@radio-background-color: @background;
@radio-hover-border-color: darken(@base, 24%);
@radio-hover-box-shadow: none;
@radio-checked-background-color: @accent;
@radio-active-border-color: lighten(@accent, 13%);
@radio-active-box-shadow: 0 0 2px 0 lighten(@accent, 13%);
@radio-disabled-background-color: @background;
@radio-disabled-color: darken(@base, 10%);
@radio-disabled-border-color: darken(@base, 12%);
@radio-disabled-box-shadow: none;

.k-radio-label:before {
   border-color: @radio-border-color;
   border-radius: @radio-border-radius;
   background-color: @radio-background-color;
   border-width: @radio-border-width;
}

.k-radio-label:hover:before,
.k-radio:checked + .k-radio-label:hover:before {
   border-color: @radio-hover-border-color;
   box-shadow: @radio-hover-box-shadow;
}

.k-radio:checked + .k-radio-label:after {
   background-color: @radio-checked-background-color;
   border-radius: @radio-border-radius;
}

.k-radio-label:active:before {
   border-color: @radio-active-border-color;
   box-shadow: @radio-active-box-shadow;
}

.k-radio:checked + .k-radio-label:active:before {
  box-shadow: @radio-active-box-shadow;
  border-color: @radio-active-border-color;
}

.k-radio:disabled + .k-radio-label {
   color: @radio-disabled-color;
}

.k-radio:disabled + .k-radio-label:before,
.k-radio:disabled + .k-radio-label:active:before,
.k-radio:disabled + .k-radio-label:hover:after,
.k-radio:disabled + .k-radio-label:hover:before {
    background: @radio-disabled-background-color;
    border-color: @radio-disabled-border-color;
    box-shadow: @radio-disabled-box-shadow;
}

.k-radio:disabled:checked+.k-radio-label:after {
    background-color: @radio-checked-background-color;
    opacity: .5;
}

.k-radio:focus + .k-radio-label:before {
   border-color: @radio-active-border-color;
   box-shadow: @radio-active-box-shadow;
}



@radio-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@radio-background-color: @colour1;
@radio-hover-border-color: contrast(@base, lighten(@base, 2%), darken(@base, 24%), 0.5);
@radio-checked-background-color: contrast(@selected-background, lighten(@accent, 3%), darken(@accent, 29%), 0.5);
@radio-active-border-color: contrast(@selected-background, lighten(@accent, 1%), darken(@accent, 29%), 0.5);
@radio-active-box-shadow: 0 0 3px 0 @accent;
@radio-disabled-background-color: lighten(@hover-background, 21%);
@radio-disabled-color: @disabled-text-color;
@radio-disabled-border-color: @colour4;


// High contrast mode
@media screen and (-ms-high-contrast: active) {
    .k-editor-toolbar-wrap .k-dropdown-wrap.k-state-focused,
    .k-editor-toolbar-wrap .k-button-group .k-tool:focus {
        border-color: @colour1;
    }
}

/* Responsive styles */

@media only screen and (max-width: 1024px) {
    .k-webkit,
    .k-ff,
    .k-ie11,
    .k-edge,
    .k-safari {

        .k-pager-numbers,
        .k-grid .k-pager-numbers {
            transform: translatey(-100%);
            -webkit-transform: translatey(-100%);
        }

        .k-pager-numbers .k-current-page,
        .k-grid .k-pager-numbers .k-current-page {
            transform: translatey(100%);
            -webkit-transform: translatey(100%);
        }

        .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view,
        .k-pager-numbers .k-current-page .k-link
        {
            .composite-background(@widget-gradient);
            background-position: 50% 50%;
            background-color: @drop-down-background;
            border-color: @widget-border-color;
        }

        .k-pager-numbers .k-current-page .k-link
        {
            border-color: @secondary-border-color;
        }

        .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view
        {
            border-radius: @main-border-radius;
        }

        .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded > li {
            border-radius: 0;
        }

        .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded > li.k-current-view
        {
            border-radius: @inner-border-radius @inner-border-radius 0 0;
        }

        .k-scheduler-toolbar > ul li:first-child, .k-scheduler-toolbar > ul li:first-child .k-link,
        .k-scheduler-toolbar > ul.k-scheduler-views li,
        .k-scheduler-toolbar > ul.k-scheduler-views li .k-link
        {
            border-radius: 0;
        }

        .k-scheduler-toolbar > ul.k-scheduler-views li:last-child,
        .k-scheduler-toolbar > ul.k-scheduler-views li:last-child .k-link
        {
            border-radius: 0 0 @inner-border-radius @inner-border-radius;
        }

        .k-pager-numbers .k-current-page .k-link:hover,
        .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view:hover
        {
            border-color: @hover-border-color;
            .composite-background(@hover-gradient);
            background-color: @hover-background-color;
        }

        .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link
        {
            color: @widget-text-color;
            min-width: 75px;
        }

        .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view:hover > .k-link
        {
            color: @hover-text-color;
        }

        .k-pager-numbers .k-current-page .k-link:after,
        .k-scheduler-views > li.k-state-selected > .k-link:after {
            display: block;
            content: "";
            position: absolute;
            top: 50%;
            margin-top: -0.5em;
            right: 0.333em;
            width: 1.333em;
            height: 1.333em;
        }

        .k-pager-numbers.k-state-expanded,
        .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded
        {
            border-width: 1px 1px 0 1px;
            border-style: solid;
            border-color: @secondary-border-color;
            background-color: @header-background-color;
            border-radius: @main-border-radius @main-border-radius 0 0;
            .box-shadow(0 2px 2px 0 @shadow-color);
        }

        .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded
        {
            border-width: 1px;
            background-image: none;
            border-radius: @main-border-radius;
        }

        .k-pager-numbers .k-state-selected,
        .k-pager-numbers .k-link
        {
            .guarded-border-radius(@list-border-radius);
        }

        .k-widget.k-grid .k-pager-nav + .k-pager-numbers
        {
            position: absolute;
        }
    }
}

.k-chart .k-mask {
    background-color: @background;
    filter: alpha(opacity=68);
    opacity: 0.68;
}

.k-chart .k-selection {
    border-color: rgba(0,0,0,.2);
    box-shadow: inset 0 1px 8px rgba(0,0,0,.1);
    transition: box-shadow .2s linear, border-color .2s linear;
}

.k-chart .k-selection:hover {
    border-color: rgba(0,0,0,.3);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.2);
}

.k-chart .k-handle {
    background-color: @colour2;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}

.k-chart .k-handle:hover {
    background-color: @colour1;
    border-color: @colour4;
    box-shadow: 0 0 0 2px rgba(111,101,96,.5);
}
.k-chart .k-navigator-hint .k-tooltip {
    border: 3px solid @colour1;
    box-shadow: 0 0 0 3px rgba(0,0,0,.2);
    background: @colour1;
    color: @colour5;
}

.k-chart .k-navigator-hint .k-scroll {
    background: fadeout(@accent, 30%);
    height: 4px;
}

/* Map */

.k-map .k-marker {
    background-image: url("@{image-folder}/markers.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.2),
       only screen and (min-device-pixel-ratio: 1.2) {
    .k-map .k-marker {
        background-image: url("@{image-folder}/markers_2x.png");
    }
}

.k-map .k-attribution {
    color: @colour5;
}

/*!






















*/
@spreadsheet-header-border: @spreadsheet-pane-border;
@spreadsheet-header-background: @base;
@spreadsheet-pane-border: darken(@base, 20%);
@spreadsheet-cell-border: darken(@base, 10%);
@spreadsheet-selection-background: fadeout(@selected-background, 80%);
@spreadsheet-selection-border: @selected-background;
@spreadsheet-header-selection-border: fadein(@spreadsheet-selection-background, 80%);
@spreadsheet-page-orientation-background: @normal-background;
@spreadsheet-page-orientation-border-color: contrast(@base, lighten(@base, 1%), darken(@base, 14%), 0.5);
@spreadsheet-page-orientation-gradient: @normal-gradient;

.k-spreadsheet-row-header,
.k-spreadsheet-column-header {
    background-color: @background;
}

.k-spreadsheet-top-corner,
.k-spreadsheet-row-header,
.k-spreadsheet-column-header {
    background-color: @spreadsheet-header-background;
    background-image: none;
    color: contrast(@spreadsheet-header-background);
    border-color: @spreadsheet-header-border;
}

.k-spreadsheet-top-corner {
    border-color: @spreadsheet-header-border;

    &:after {
        border-color: transparent @spreadsheet-header-border @spreadsheet-header-border transparent;
    }
}

.k-spreadsheet-pane {
    border-color: @spreadsheet-pane-border;

    .k-spreadsheet-vaxis,
    .k-spreadsheet-haxis {
        border-color: @spreadsheet-cell-border;
    }

    .k-spreadsheet-column-header,
    .k-spreadsheet-row-header {
        border-color: @spreadsheet-header-border;
    }

    .k-spreadsheet-merged-cell {
        background-color: @background;
    }

    .k-selection-partial,
    .k-selection-full {
        border-color: @spreadsheet-selection-background;
        background-color: @spreadsheet-selection-background;
    }

    .k-filter-range {
        border-color: @spreadsheet-selection-border;
    }

    .k-spreadsheet-column-header .k-selection-partial,
    .k-spreadsheet-column-header .k-selection-full {
        border-bottom-color: @spreadsheet-header-selection-border;
    }

    .k-spreadsheet-row-header .k-selection-partial,
    .k-spreadsheet-row-header .k-selection-full {
        border-right-color: @spreadsheet-header-selection-border;
    }
}

.k-auto-fill,
.k-spreadsheet-selection {
    border-color: @spreadsheet-selection-border;
    box-shadow: inset 0 0 0 1px @background, 0 0 0 1px @spreadsheet-selection-border;
}

.k-spreadsheet-selection {
    background-color: @spreadsheet-selection-background;
}

.k-spreadsheet-active-cell {
    // enforce border color of active cell to match selection
    border-color: @spreadsheet-selection-border !important;
    background-color: @background;
}

.k-spreadsheet-active-cell.k-single {
    color: @normal-text-color;
    background-color: @background;
}

.k-spreadsheet {
    .k-spreadsheet-action-bar {
        background-color: @background;
        border-color: @widget-border-color;

        .k-spreadsheet-name-editor {
            border-color: @spreadsheet-header-border;
        }

        .k-spreadsheet-formula-bar::before {
            border-color: @spreadsheet-header-border;
        }
    }

    .k-spreadsheet-formula-input {
        background-color: @background;
        color: @normal-text-color;
    }

    .k-resize-handle,
    .k-resize-hint-handle,
    .k-resize-hint-marker {
        background-color: @selected-background;
    }

    .k-resize-hint-vertical .k-resize-hint-handle,
    .k-resize-hint-vertical .k-resize-hint-marker {
        background-color: @selected-background;
    }

    .k-single-selection::after {
        background-color: @spreadsheet-selection-border;
        border-color: @background;
    }

    .k-auto-fill-punch {
        background-color: fadeout(@background, 50%);
    }

    .k-single-selection.k-dim-auto-fill-handle::after {
        background-color: fadeout(@spreadsheet-selection-border, 50%);
    }
}

.k-spreadsheet-format-cells .k-spreadsheet-preview {
    border-color: @widget-border-color;
}

.k-spreadsheet-filter {
    border-radius: @border-radius;
    background-color: @background;

    box-shadow: inset 0 0 0 1px @spreadsheet-cell-border;

    &.k-state-active {
        color: @selected-text-color;
        background-color: @selected-background;
    }

    &:hover {
        color: @hover-text-color;
        background: @hover-background;
        border-color: darken(@hover-background, 8%);
    }
}

.k-action-window .k-action-buttons {
    border-color: @widget-border-color;
}

.k-spreadsheet-sample {
    color: lighten(@normal-text-color, 30%);

    .k-state-selected & {
        color: inherit;
    }
}

.k-spreadsheet-window .k-list-wrapper,
.k-spreadsheet-window .k-list {
    border-color: @widget-border-color;
    border-radius: @border-radius;
}

.k-spreadsheet-window {
    .export-config,
    .k-edit-field > .k-orientation-label {
        border-color: @widget-border-color;
    }

    .k-edit-field > input[type="radio"]:checked+.k-orientation-label {
        .composite-background(@spreadsheet-page-orientation-gradient);
        background-color: @accent;
        color: lighten(@selected-text-color, 12%);
    }

    .k-page-orientation {
        border-color: @spreadsheet-page-orientation-border-color;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1)
    }

    .k-page-orientation:before {
        background: @spreadsheet-page-orientation-background;
        border-color: transparent;
        border-bottom-color: @spreadsheet-page-orientation-border-color;
        border-left-color: @spreadsheet-page-orientation-border-color;
    }

    .k-margins-horizontal,
    .k-margins-vertical {
        background: transparent;
        border-color: @widget-border-color;
    }

    .hint-wrapper:before {
        background: @widget-border-color;
    }
}

.k-spreadsheet-toolbar {
    &.k-toolbar .k-button-group .k-button {
        border-radius: @border-radius;
    }

    > .k-widget,
    > .k-button,
    > .k-button-group {
        border-radius: @border-radius;
    }

    > .k-separator {
        border-color: @widget-border-color;
    }

    .k-overflow-anchor {
        border-radius: 0;
    }
}

.k-spreadsheet-popup {
    border-radius: @border-radius;

    .k-separator {
        background-color: @widget-border-color;
    }

    .k-button {
        background-color: transparent;

        &:hover {
            background-color: @hover-background;
        }
    }

    .k-state-active {
        background-color: @selected-background;
        color: contrast(@selected-text-color);

        &:hover {
            background-color: darken(@selected-background, 10%);
        }
    }
}

.k-spreadsheet-filter-menu {
    .k-details {
        border-color: @widget-border-color;
    }

    .k-details-content .k-space-right {
        background-color: @background;
    }

    .k-spreadsheet-value-treeview-wrapper {
        background-color: @background;
        border-color: @widget-border-color;
        border-radius: @border-radius 0 0 @border-radius;
    }
}

.k-syntax-ref { color: #ff8822; }
.k-syntax-num { color: #0099ff; }
.k-syntax-func { font-weight: bold; }
.k-syntax-str { color: #38b714; }
.k-syntax-error { color: red; }
.k-syntax-bool { color: #a9169c; }
.k-syntax-startexp { font-weight: bold; }
.k-syntax-paren-match { background-color: #caf200; }

.k-series-a {
    border-color: @series-a;
    background-color: fade(@series-a, 15%);
}

.k-series-b {
    border-color: @series-b;
    background-color: fade(@series-b, 15%);;
}

.k-series-c {
    border-color: @series-c;
    background-color: fade(@series-c, 15%);;
}

.k-series-d {
    border-color: @series-d;
    background-color: fade(@series-d, 15%);;
}

.k-series-e {
    border-color: @series-e;
    background-color: fade(@series-e, 15%);;
}

.k-series-f {
    border-color: @series-f;
    background-color: fade(@series-f, 15%);;
}


.k-spreadsheet-sheets-remove:hover .k-icon {
    color: #cc2222;
}

.k-spreadsheet-formula-list {
    .k-state-focused {
        background-color: @selected-background;
        color: @selected-text-color;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .k-icon.k-font-icon {
        background-image: none;
    }
}


.k-spreadsheet {
    .k-widget {
        &[data-property='fontSize'] { width: 60px; }
        &[data-property='format'] { width: 100px; }
        &[data-property='fontFamily'] { width: 130px; }
    }
}

.k-spreadsheet-toolbar .k-combobox {
    .k-input {
        color: @normal-text-color;
    }

    .k-state-hover,
    .k-state-active,
    .k-state-focused
    {
        .k-input {
            color: @input-text-color;
        }
    }
}

@spreadsheet-page-orientation-gradient: @primary-gradient;

/* Dialog */

.k-dialog {
    .k-content {
        border-bottom-right-radius: @border-radius;
        border-bottom-left-radius: @border-radius;
    }
    &.k-dialog-titleless .k-content {
        border-top-right-radius: @border-radius;
        border-top-left-radius: @border-radius;
    }
    .k-dialog-buttongroup {
        &.k-dialog-button-layout-stretched {
            width: 100%;
            .k-button {
                display: inline-block;
                padding: 0.75em 0 0.75em 0;
                border-radius: 0;
                border-width: 1px 0 1px 1px;
            }
            li.k-button:first-child {
                border-bottom-left-radius: @border-radius;
                border-left-width: 0;
            }
            li.k-button:last-child {
                border-bottom-right-radius: @border-radius;
                border-right-width: 0;
            }
        }
        &.k-dialog-button-layout-normal {
            width: auto;
            margin: 0;
            padding: 1em;
            text-align: right;
            .k-button {
                margin-left: 0.5em;
                &:first-child {
                    margin-left: 0;
                }
            }
        }
    }
}

.k-rtl .k-dialog {
    a.k-dialog-action.k-dialog-close {
        left: .5em;
    }
    .k-dialog-buttongroup {
        &.k-dialog-button-layout-stretched {
            li.k-button:first-child {
                border-bottom-right-radius: @border-radius;
            }
            li.k-button:last-child {
                border-bottom-left-radius: @border-radius;
            }
        }
        &.k-dialog-button-layout-normal {
            text-align: left;
            .k-button {
                margin-left: 0;
                margin-right: 0.5em;
                &:first-child {
                    margin-right: 0;
                }
            }
        }
    }
}

.k-i-unlink { background-position: -288px -72px; }

.k-grid-header
{
padding: 0 !important;
}

.k-grid-content
{
overflow-y: visible;
}
/**END KENDO*/

.attendanceList tr {
    line-height: 30px
}

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}
/* bootstrap hack end */

/*kendo multiselect dropdown start*/
.selected-value {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background-size: 100%;
    margin-right: 5px;
}

#kendo-multiselect-list .k-item {
    line-height: 1em;
    min-width: 300px;
}

/* Material Theme padding adjustment*/

.k-material #kendo-multiselect-list .k-item,
.k-material #kendo-multiselect-list .k-item.k-state-hover,
.k-materialblack #kendo-multiselect-list .k-item,
.k-materialblack #kendo-multiselect-list .k-item.k-state-hover {
    padding-left: 5px;
    border-left: 0;
}

#kendo-multiselect-list .k-item > span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    margin: 20px 10px 10px 5px;
}

#kendo-multiselect-list .k-item > span:first-child {
    margin: 10px;
    width: 50px;
    height: 50px;
    background-size: 100%;
    background-repeat: no-repeat;
}

#kendo-multiselect-list h3 {
    font-size: 1.2em;
    font-weight: normal;
    margin: 0 0 1px 0;
    padding: 0;
}

#kendo-multiselect-list p {
    margin: 0;
    padding: 0;
    font-size: .8em;
}
/*kendo multiselect dropdown end*/

.table-striped thead {
    background-color: @colour2
}

.fixed-table {
    position: relative; 
    width:100%; 
    margin: auto; 
    overflow: auto;
    max-height: 500px;

    table {
        text-align: center;
        position: relative;
        border-collapse: separate;
        display: inline;
    }

    th {
        background-color: @colour2;
        position: sticky;
        top: 0;
    }

    td, th {
        min-width: 250px;
        max-width: 250px;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
    }

    td:first-child, th:first-child {
        background-color: @colour2;
        min-width: 250px;
        max-width: 250px;
        position: sticky;
        left: 0;
        z-index: 1;
        font-weight: bold;
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: #ddd;
    }

    th:first-child {
        width: auto;
        z-index: 2;
    }
}

.miniTab a {
      padding: 5px !important;
}

.miniTabBody {
      padding: 5px !important;
      border-left: 1px solid @colour2;
      border-right: 1px solid @colour2;
      border-bottom: 1px solid @colour2;
}

.animatedNumber {
    font-size: 72px;
    margin-top: -10px;
    color: @colour11;
    font-weight: bold;
}

table.k-editor
{
    height: 200px;
    padding-bottom: 20px;
}

.k-icon.k-i-close
{
display: none !important;
}

button .k-icon.k-i-close
{
display: block !important;
}

.k-header-column-menu .k-icon,
.k-column-menu .k-icon,
.k-column-menu .k-sprite {
    background-image: none;
    font-size: 1em;
}

.k-header-column-menu .k-icon:before,
.k-header-column-menu .k-sprite:before,
.k-column-menu .k-icon:before,
.k-column-menu .k-sprite:before {
    display: inline-block;
    padding-top: 0.5em;
    color: @colour5;
    width: 20px;
    height: 20px;
}

.k-header-column-menu .k-i-arrow-chevron-down:before{
    content: "\f0dc";
    font-size: 11px !important;
}

.k-column-menu .k-i-sort-asc:before{
    content: "\f0d8";
}


.k-column-menu .k-i-sort-desc:before{
    content: "\f0d7";
}

.navbar-brand {
    color: @colour1;
    background: @colour13;
    height: 45px;
    line-height: 10px;
    padding-top: 24px;
}

.navbar-brand:hover {
    height: 45px;
    color: @colour6 !important;
    background: @colour1 !important;
    .navbar-brand-link {
        color: @colour13 !important;
        background: @colour1 !important;
    }
}

.navbar-brand-link {
    color: @colour1 !important;
    background-color: @colour11 !important;
}

.wrapTree .k-in{
     white-space: normal;
     width:90%;
}

.libraryTree {
    padding: 0 0 0 25px;
    position: relative;
}

.libraryTree img {
    left: 0;
    position: absolute;
    top: 0;
}

.header-image {
    max-height:120px;
    max-width:120px;
}

.k-filter-row th, .k-grid-header th.k-header, .ui-grid-header-cell-label {
    font-weight: normal !important;
}

.k-filter-row th input, .k-grid-header th.k-header input {
    font-weight: normal !important;
}

ps-lds-simple-activities .k-grid-header table > thead > tr > th.k-header {
    font-weight: bold !important;
}

.k-filter-row th, .k-grid-header th.k-header {
    border: 0 !important;
}

.k-header, .k-grid-header, .ui-grid-top-panel {
    background: @colour2 !important;
}

ps-lds-simple-activities table > thead > tr > th.k-header {
    color: @colour1;
    font-weight: bold;
    background: @colour13 !important;
}

.k-header.k-drag-clue
{
    min-height: 20px;
    padding-left: 26px;
}

.k-header.k-drag-clue > .k-drag-status
{
    position: absolute;
    left: 4px;
    top: 50%;
    margin-top: -8px;
}

.panel-title-objective {
    font-weight: normal !important;
}

.k-scheduler-monthview .custom-event {
    line-height: 25px;
}

.grey {
    color: @colour3;
}

.btn-landing {
    background-color: @colour11;
    color: @colour1;
    font-weight: bold;
}

.btn-landing-tile {    
    border-radius: 0 !important;
    color: @colour11;
    font-weight: 600;
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    padding: 20px 0;
    border-top-style: solid;
    border-top-color: #ececec;
    white-space: nowrap;
}

.ui-grid-selection-row-header-buttons {
    opacity: 1;
}

.ui-grid-icon-up-dir:before {
    content: "\25b2";
}

.ui-grid-icon-down-dir:before {
    content: "\25bc";
}

div.category a.view-courses {
    color: @colour13 !important;
}

.navbar-header {
    background-color: @colour13;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: @colour13 !important;
    border: none;
    color: @colour1;
}

.navbar-default .navbar-toggle {
    background-color: @colour13 !important;
    border: none;
    color: @colour1;
}

.socialstreme {
    color: @colour1;
    font-size: 14pt;
}

.print-only {
    display: none;
}

.screen-only {
    display: '';
}

.relationship-chart-img {
    max-height: 40px;
    width: auto;
}

.relationship-chart {
    margin-left: 20px
}
.grey {
    color: @colour3;
}

.lds-simple-btn {
    background-color: white;
    border-color: #bababa;
    font-weight: bold;
}

.lds-simple-btn:hover {
    color: @colour1;
    background-color:@colour13;
}

.lds-simple-grid {
    float:left;
    margin-top:10px;
    margin-bottom:10px;
}

.module-tile-heading {
    margin-top: auto;
    padding-top: 25%
}

.custom-tile-heading {
    font-size: 18px;
    height: 105px;
}

.preceda-tile-heading {
    min-height: 170px;
}

.hram-dashboard-row {
    margin-bottom: 10px;
    margin-left: -5px;
    margin-right: -5px;

    > [class^="col-"] {
        padding: 0 5px;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.hram-headline-table {
    font-size:20px;
    text-align:center;
    font-weight: bold;
    border: none;
}
.hram-headline-table tbody tr td,
.hram-headline-table tbody tr th {
    border-width: 0;
}
.hram-headline-number {
    font-size:25px;
    color: @colour13;
}
.hram-headline-button {
    font-size:20px;
    font-weight: bold;
    padding: 5px;
}

.preceda-tile-heading > img {
    max-width: 100%;
    height: auto;
}

.tile-mega-wrapper {
    margin: 25px -15px 0 -12px;
    padding: 10px 10px 0;
}

.truncate-overflow {
    overflow: hidden;
    padding-right: 1rem;
  }

@media (min-width: 768px) {
    .tile-mega-wrapper {
        margin-top: 6px;
        padding: 15px 7.5px 0;

        &::after {
            clear: both;
            content: '';
            display: table;
            width: 100%;
        }
    }

    .tile {
        margin-bottom: 15px;
    }

    .tile-wrapper {
        float: left;
        margin: 0 7.5px;
    }

    .profile-tile-wrapper {
        width: calc(33.33% - 15px);
    }

    .other-tiles-wrapper {
        margin: 0;
        width: 66.67%;

        .tile-wrapper {
            width: calc(50% - 15px);
        }
    }

    .announcement-tile-wrapper {
        clear: left;
        margin-left: calc(33.33% + 7.5px);
        margin-right: 7.5px;
        width: calc(66.67% - 15px);
    }

    .performance-tile-wrapper {
        width: calc(50% - 15px);
    }

    .hram-headline-tile-wrapper {
        float: none;
    }
}

@media (min-width: 1200px) {
    .profile-tile-wrapper {
        width: calc(16.67% - 15px);
    }

    .other-tiles-wrapper {
        width: 83.33%;

        .tile-wrapper {
            width: calc(20% - 15px);
        }
    }

    .has-announcement .other-tiles-wrapper {
        width: 33.33%;

        .tile-wrapper {
            width: calc(50% - 15px);
        }
    }

    .announcement-tile-wrapper {
        clear: none;
        margin: 0 7.5px;
        width: calc(50% - 15px);
    }

    .performance-tile-wrapper {
        width: calc(33.33% - 15px);
    }
}

@media (min-width: 800px) {
    .lds-results-dropdown-width {
        width: 20%;
    }
}

.k-tooltip-content ul {
    padding-left: 20px;
    text-align: left;
}

@import "go1.less";
@import "responsive-navigation.less";