/*
    actual product colour (SQR website button, lighter logo colour): #fa9101
    darker version (one colour to the left in colorhexa.com's mono range): #e18201
    
    darker version (from logo): #f88600
    darker version (one colour to the left in colorhexa.com's mono range): #df7800
*/

/*==========================*/
/* nav bar - primary colour */
/*==========================*/
 
#CommonToolBar {
    border-color: #e18201;
    background-color: #fa9101;
    background-image: url("images/Pattern-1920-x-1080.png");
    background-size: 300px 100px;
}

/*============================*/
/* tab strip - primary colour */
/*============================*/

.k-tabstrip-items .k-state-active, .k-panelbar .k-tabstrip-items .k-state-active {
    border-color: #e18201;
    background-color: #f88600;
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);
}

.k-tabstrip-top > .k-tabstrip-items .k-state-active, .k-panelbar .k-tabstrip-top > .k-tabstrip-items .k-state-active {
    border-bottom-color: #e18201;
}

.k-tabstrip-items .k-state-active .k-link, .k-panelbar > li.k-state-active > .k-link {
    color: #ffffff;
}

ul.k-tabstrip-items {
    background-color: #ffffff;
}

.k-tabstrip .k-content.k-state-active {
    background-color: #dcdcdc;
    color: #2e2e2e;
}

/*===========================*/
/* window - secondary colour */
/*===========================*/

.k-window-titlebar {
    color: #ffffff;
    border-color: #003418;
    background-color: #004d24;
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);
}

/*==================================*/
/* grid pagination - primary colour */
/*==================================*/

ul.k-pager-numbers span.k-state-selected {
    border-color: #e18201;
    background-color: #fa9101;
}

/*===============*/
/* active button */
/*===============*/

.k-button:active, .k-button.k-state-active {
    color: #ffffff;
    border-color: #e18201;
    background-color: #fa9101;
    /*background-image: none,linear-gradient(to bottom,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);*/
}

.k-split-button:focus > .k-button {
    border-color: #bbbbbb;
    color: #2e2e2e;
    background-color: #e9e9e9;
    background-position: 50% 50%;
    background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0) 100%);
}

/*==================================================================*/
/* selected option in menu - primary colour (telerik report viewer) */
/*==================================================================*/

.k-menu .k-state-selected > .k-link {
    color: #ffffff;
    border-color: #e18201;
    background-color: #fa9101;
    background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0px, rgba(255, 255, 255, 0) 100%);
}

/*==========*/
/* calendar */
/*==========*/

.k-calendar .k-today .k-link {
    color: #f88600;
    box-shadow: inset 0 0 0 1px #e18201
}

.k-calendar td.k-state-focused .k-link {
    box-shadow: inset 0 0 2px 1px #e18201
}

.k-calendar .k-footer .k-nav-today {
    color: #f88600
}

.k-calendar .k-footer .k-nav-today:hover {
    color: #df7800;
}

.k-calendar-range td.k-state-selected .k-link {
    border-color: #e18201;
    color: #fff;
    background-color: #fa9101
}

.k-calendar td.k-state-selected .k-link {
    border-color: #e18201;
    color: #fff;
    background-color: #fa9101;
    background-image: url(textures/highlight.png);
    background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, .15) 0, rgba(255, 255, 255, 0) 100%)
}

.k-calendar-range td.k-state-focused .k-link {
    box-shadow: inset 0 0 2px 1px #e18201
}

.k-calendar-range .k-footer .k-nav-today {
    color: #f88600;
    background: 0 0
}

/*================*/
/* primary button */
/*================*/

/* bootstrap - btn-primary */

.btn-primary {
    color: #ffffff;
    border-color: #e18201;
    background-color: #fa9101;
}

.btn-primary:focus,
.btn-primary.focus {
    color: #ffffff;
    border-color: #df7800;
    background-color: #f88600;
}

.btn-primary:hover {
    color: #ffffff;
    border-color: #df7800;
    background-color: #f88600;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #ffffff;
    border-color: #df7800;
    background-color: #f88600;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #ffffff;
    border-color: #c66a00;
    background-color: #df7800;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    border-color: #e18201;
    background-color: #fa9101;
}

.btn-primary .badge {
    color: #fa9101;
    background-color: #ffffff;
}

/* kendo - k-primary */

.k-primary {
    color: #ffffff;
    border-color: #e18201;
    background-color: #fa9101;
    background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0) 100%);
}

.k-primary.k-state-default {
    border-color: #e18201;
}

.k-primary:hover,
.k-primary.k-state-hover {
    color: #ffffff;
    border-color: #df7800;
    background-color: #f88600;
    background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0px, rgba(255, 255, 255, 0) 100%);
}

.k-primary:active,
.k-primary.k-state-active {
    color: #ffffff;
    border-color: #df7800;
    background-color: #f88600;
    background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0px, rgba(255, 255, 255, 0) 100%);
}

/*================*/
/* product images */
/*================*/

#toolbarProductNameContainer {
    background-image: url("images/Cane_Logistics_White_Text_Only.svg");
    background-size:contain;
    background-repeat: no-repeat;
    height: 20px;
    width: 128px;
    margin-left: 5px;
    margin-top: 5px
}

.landing-page .jumbotron {
    background-image: url(images/Banner_2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: white;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

#landingPageProductLogo {
    background-image: url("images/SQR-logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    min-width: 140px;
    max-width: 300px;
    height: 155px;
    margin-left: auto;
    margin-right: auto;
}

/*==============*/
/* Landing Page */
/*==============*/

.landing-page-hr {
    max-width: 1920px;
}

.vertical-center {
    width: 100%;
    text-align: center; /* align the inline(-block) elements horizontally */
    font: 0/0 a; /* remove the gap between inline(-block) elements */
}

.vertical-center:before { /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
}

.landing-page {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.landing-page .container {
    width: 510px;
}

.landing-page .jumbotron .container {
    max-width: 100%;
    background-color: rgba(255,255,255,0.9);
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
    font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
    padding: 35px 0px;
    position: relative;
    right: 20%;
}

.landing-page-button-row {
    margin: 20px 0px 0px 0px;
}

.landingButtonRow {
    text-align: center;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.landingButton {
    display: inline-block;
    vertical-align: top;
    width: 260px;
    margin: 10px;
    padding: 10px;
}

.landingButton a {
    color: rgb(88, 94, 97);
    width: 100%;
    display: inline-block;
    text-decoration: none;
}

.landingButton:hover {
    box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.05);
}

.imagecontainer {
    display: inline-block;
    max-width: 300px;
}

.imagecontainer img {
    height: 150px;
    width: 100%;
    padding-top: 10px;
}

@media (max-width: 992px) {
    .landing-page .vertical-center:before {
        display: none;
    }

    .landing-page .jumbotron .container {
       right: 0%;
    }
}

@media (min-width: 1300px) {
    .imagecontainer img {
        height: 170px;
    }

    .landingButton {
        width: 400px;
    }
}

@media (min-width: 1400px) {
    #landingPageProductLogo {
        height: 200px;
    }

    .landing-page .container {
        width: 600px;
    }

    .landing-page .jumbotron .container {
        padding: 70px 0px;
    }
}

@media (min-width: 2000px) {
    .landing-page .jumbotron .container {
        padding: 80px 0px;
    }

    .landing-page .vertical-center:before {
        min-height: 530px;
    }
}