/* Ascora Modernisation*/
/* Portal Metro contents has been moved to this file */
/* To prevent conflicts with the Kendo Theme Builder, all overrides have been separated into the following file*/
/* Assets\framework\kendo_2023_3_1010\themebuilder\ascoramodern\css\kendo-custom-overrides.css*/

:root {
    --colour-ascora-orange: #f39c12;
    --svg-visa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000.046' height='323.653' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M433.352 318.984h-81.011l50.67-313.305h81.006zM727.023 13.339C711.045 6.999 685.701 0 654.363 0c-80.001 0-136.336 42.66-136.682 103.652-.664 45 40.335 69.993 70.999 84.998 31.342 15.332 41.996 25.339 41.996 39.006-.319 20.989-25.326 30.664-48.65 30.664-32.343 0-49.673-4.988-76.009-16.666l-10.667-5.006-11.336 70.33c19 8.656 54.006 16.338 90.349 16.674 85.002 0 140.341-42 140.997-106.997.323-35.666-21.326-62.994-68-85.326-28.334-14.335-45.686-24.002-45.686-38.669.332-13.334 14.676-26.992 46.661-26.992 26.336-.669 45.686 5.661 60.345 11.996l7.327 3.327 11.017-67.654h0zm107.671 194.652l32.343-87.66c-.337.669 6.658-18.331 10.658-29.995l5.661 26.996 18.672 90.659h-67.335 0zM934.691 5.679h-62.662c-19.323 0-34.004 5.661-42.342 25.995l-120.33 287.305h85.002l17.002-46.997h104.011l9.666 46.997h75.008l-65.355-313.3h0zm-650.013 0l-79.336 213.644-8.669-43.329C182.005 125.997 136.004 71.677 84.67 44.667l72.669 273.984h85.667L370.34 5.679h-85.662 0z' fill='%2300579f'/%3E%3Cpath d='M131.672 5.679H1.333L0 12.01c101.672 25.999 169.008 88.67 196.673 163.997L168.339 32.015c-4.665-20.01-19-25.676-36.667-26.336h0z' fill='%23faa61a'/%3E%3C/svg%3E");
    --svg-mastercard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='999.2' height='776' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M181.1 774.3v-51.5c0-19.7-12-32.6-32.6-32.6-10.3 0-21.5 3.4-29.2 14.6-6-9.4-14.6-14.6-27.5-14.6-8.6 0-17.2 2.6-24 12v-10.3h-18v82.4h18v-45.5c0-14.6 7.7-21.5 19.7-21.5s18 7.7 18 21.5v45.5h18v-45.5c0-14.6 8.6-21.5 19.7-21.5 12 0 18 7.7 18 21.5v45.5h19.9zm267-82.4h-29.2V667h-18v24.9h-16.3v16.3h16.3V746c0 18.9 7.7 30 28.3 30 7.7 0 16.3-2.6 22.3-6l-5.2-15.5c-5.2 3.4-11.2 4.3-15.5 4.3-8.6 0-12-5.2-12-13.7v-36.9H448v-16.3zm152.8-1.8c-10.3 0-17.2 5.2-21.5 12v-10.3h-18v82.4h18v-46.4c0-13.7 6-21.5 17.2-21.5 3.4 0 7.7.9 11.2 1.7l5.2-17.2c-3.6-.7-8.7-.7-12.1-.7h0zM370 698.7c-8.6-6-20.6-8.6-33.5-8.6-20.6 0-34.3 10.3-34.3 26.6 0 13.7 10.3 21.5 28.3 24l8.6.9c9.4 1.7 14.6 4.3 14.6 8.6 0 6-6.9 10.3-18.9 10.3s-21.5-4.3-27.5-8.6l-8.6 13.7c9.4 6.9 22.3 10.3 35.2 10.3 24 0 37.8-11.2 37.8-26.6 0-14.6-11.2-22.3-28.3-24.9l-8.6-.9c-7.7-.9-13.7-2.6-13.7-7.7 0-6 6-9.4 15.5-9.4 10.3 0 20.6 4.3 25.8 6.9l7.6-14.6h0zm478.9-8.6c-10.3 0-17.2 5.2-21.5 12v-10.3h-18v82.4h18v-46.4c0-13.7 6-21.5 17.2-21.5 3.4 0 7.7.9 11.2 1.7l5.2-17c-3.5-.9-8.6-.9-12.1-.9h0zm-230 43c0 24.9 17.2 42.9 43.8 42.9 12 0 20.6-2.6 29.2-9.4l-8.6-14.6c-6.9 5.2-13.7 7.7-21.5 7.7-14.6 0-24.9-10.3-24.9-26.6 0-15.5 10.3-25.8 24.9-26.6 7.7 0 14.6 2.6 21.5 7.7l8.6-14.6c-8.6-6.9-17.2-9.4-29.2-9.4-26.6-.1-43.8 18-43.8 42.9h0 0zm166.5 0v-41.2h-18v10.3c-6-7.7-14.6-12-25.8-12-23.2 0-41.2 18-41.2 42.9s18 42.9 41.2 42.9c12 0 20.6-4.3 25.8-12v10.3h18v-41.2h0zm-66.1 0c0-14.6 9.4-26.6 24.9-26.6 14.6 0 24.9 11.2 24.9 26.6 0 14.6-10.3 26.6-24.9 26.6-15.4-.9-24.9-12.1-24.9-26.6h0zm-215.4-43c-24 0-41.2 17.2-41.2 42.9 0 25.8 17.2 42.9 42.1 42.9 12 0 24-3.4 33.5-11.2l-8.6-12.9c-6.9 5.2-15.5 8.6-24 8.6-11.2 0-22.3-5.2-24.9-19.7h60.9v-6.9c.8-26.5-14.7-43.7-37.8-43.7h0 0zm0 15.5c11.2 0 18.9 6.9 20.6 19.7h-42.9c1.7-11.1 9.4-19.7 22.3-19.7h0zm447.2 27.5v-73.8h-18v42.9c-6-7.7-14.6-12-25.8-12-23.2 0-41.2 18-41.2 42.9s18 42.9 41.2 42.9c12 0 20.6-4.3 25.8-12v10.3h18v-41.2h0zm-66.1 0c0-14.6 9.4-26.6 24.9-26.6 14.6 0 24.9 11.2 24.9 26.6 0 14.6-10.3 26.6-24.9 26.6-15.5-.9-24.9-12.1-24.9-26.6h0zm-602.6 0v-41.2h-18v10.3c-6-7.7-14.6-12-25.8-12-23.2 0-41.2 18-41.2 42.9s18 42.9 41.2 42.9c12 0 20.6-4.3 25.8-12v10.3h18v-41.2h0zm-66.9 0c0-14.6 9.4-26.6 24.9-26.6 14.6 0 24.9 11.2 24.9 26.6 0 14.6-10.3 26.6-24.9 26.6-15.5-.9-24.9-12.1-24.9-26.6z'/%3E%3Cpath fill='%23ff5a00' d='M364 66.1h270.4v485.8H364z'/%3E%3Cpath fill='%23eb001b' d='M382 309c0-98.7 46.4-186.3 117.6-242.9C447.2 24.9 381.1 0 309 0 138.2 0 0 138.2 0 309s138.2 309 309 309c72.1 0 138.2-24.9 190.6-66.1C428.3 496.1 382 407.7 382 309z'/%3E%3Cpath fill='%23f79e1b' d='M999.2 309c0 170.8-138.2 309-309 309-72.1 0-138.2-24.9-190.6-66.1 72.1-56.7 117.6-144.2 117.6-242.9S570.8 122.7 499.6 66.1C551.9 24.9 618 0 690.1 0 861 0 999.2 139.1 999.2 309z'/%3E%3C/svg%3E");
    --svg-us-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1235' height='650' viewBox='0 0 7410 3900' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M0,0h7410v3900H0' fill='%23b31942'/%3E%3Cpath d='M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0' stroke='%23fff' stroke-width='300'/%3E%3Cpath d='M0,0h2964v2100H0' fill='%230a3161'/%3E%3Cg fill='%23fff'%3E%3Cg id='A'%3E%3Cg id='B'%3E%3Cg id='C'%3E%3Cg id='D'%3E%3Cpath id='E' d='M247 90l70.534 217.082-184.661-134.164h228.254L176.466 307.082z'/%3E%3Cuse href='%23E' y='420'/%3E%3Cuse href='%23E' y='840'/%3E%3Cuse href='%23E' y='1260'/%3E%3C/g%3E%3Cuse href='%23E' y='1680'/%3E%3C/g%3E%3Cuse href='%23D' x='247' y='210'/%3E%3C/g%3E%3Cuse href='%23B' x='494'/%3E%3C/g%3E%3Cuse href='%23A' x='988'/%3E%3Cuse href='%23B' x='1976'/%3E%3Cuse href='%23C' x='2470'/%3E%3C/g%3E%3C/svg%3E");
}

body{
    font-size:14px;
}

html{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.btn:active, .btn.active {
    box-shadow:none;
}

.bg-ascora-orange {
    background-color: var(--colour-ascora-orange);
}

.no-dropshadow{box-shadow:none!important}
.no-border{border:0px!important}
.no-background{background-color:transparent!important; background:none!important}

/* Ascora Modernisation Draft   */
/* 10/11/23                     */

/*:root {
    --modern-primary-blue: #1976D2;
    --modern-secondary-blue: #BBDEFB;
    --accent-color-1: #26A69A;
    --modern-light-grey: #e8f1fa;
    --modern-dark-grey: #424242;
    --modern-white: #FFFFFF;
    --modern-k-grid-border:#d0d4e4;
    --modern-k-grid-selected:#cde3fa;
    --modern-status-completed :#4fd145;
    --modern-status-overdue: #d15445;
    --modern-status-notscheduled: #e8a32a;
}

@font-face {
    font-family: 'Figtree Regular';
    src: url('/Assets/framework/fonts/figtree/Figtree-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Figtree Medium';
    src: url('/Assets/framework/fonts/figtree/Figtree-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Figtree Light';
    src: url('/Assets/framework/fonts/figtree/Figtree-Light.ttf') format('truetype');
}

.modern-app-theme {font-family: "Figtree Light", sans-serif;color: var(--modern-dark-grey);}

.modern-app-theme h1,
.modern-app-theme h2,
.modern-app-theme h3,
.modern-app-theme h4,
.modern-app-theme h5,
.modern-app-theme h6,
.modern-app-theme .h1,
.modern-app-theme .h2,
.modern-app-theme .h3,
.modern-app-theme .h4,
.modern-app-theme .h5,
.modern-app-theme .h6,
select option
{
    font-family: "Figtree Light", sans-serif;
    color: var(--modern-dark-grey);
}

.ascora-main-nav {
    font-family: "Figtree Light", sans-serif;
    color: var(--modern-dark-grey);
    border-radius:0px;
}
.ascora-main-nav .dropdown-menu > li > a,
.ascora-main-nav .sub-menu-categories li a,
.ascora-main-nav .navbar-nav .nav-link{
    color: var(--modern-dark-grey)!important;
}

.ascora-main-nav .bulk_action_group .dropdown-menu {
    background-color: var(--modern-light-grey) !important;
}

.ascora-main-nav .dropdown-menu {
    -webkit-box-shadow: rgba(0,0,0,0.45) 0 20px 30px -10px !important;
    box-shadow: rgba(0,0,0,0.45) 0 20px 30px -10px !important;
}

.ascora-main-nav .dropdown-menu {
    border-radius: 8px;
}

.ascora-main-nav .dropdown-menu,
.ascora-main-nav .sub-menu-categories {
    display:none;
    animation: anim-menu-slide 0.5s
}

@keyframes anim-menu-slide {
    0% {
        top:80%;
        opacity:0;
    }

    100% {
        top: 98%;
        opacity: 1;
    }
}
*/

/*.modern-app-theme .box-ascora > .box-header {
    border-radius: 3px 3px 0 0;
}

.modern-app-theme .k-grid .k-grid-content tr a,
.modern-app-theme .k-grid .k-grid-content tr:hover a {
    color: var(--modern-primary-blue) !important;
}

.modern-app-theme .k-grid .k-grid-content tr a.btn, 
.modern-app-theme .k-grid .k-grid-content tr a.k-button{
    color:white!important;
}

.modern-app-theme .btn-primary {
    background-color: var(--modern-primary-blue) !important;
    border-color: var(--modern-primary-blue) !important;
}

.modern-app-theme .k-popup.k-group,
.modern-app-theme .k-autocomplete.k-state-default,
.modern-app-theme .k-picker-wrap.k-state-default,
.modern-app-theme .k-numeric-wrap.k-state-default,
.modern-app-theme .k-dropdown-wrap.k-state-default,
.modern-app-theme .remove_dropzone .k-upload .k-upload-button,
.modern-app-theme .btn {
    border-radius: 3px !important;
}

.modern-app-theme .k-dropdown-wrap.k-state-default{
    border-color:red;
}

.modern-app-theme .k-header, .k-treemap-title,
.modern-app-theme .k-grid-header .k-header > .k-link {color:black}

.modern-app-theme .k-header {
    background-color: var(--modern-light-grey) !important;
}

.modern-app-theme .k-header, .k-grid-header-wrap,
.modern-app-theme .k-grid .k-grouping-header,
.modern-app-theme .k-grid-header, .k-pager-wrap,
.modern-app-theme .k-pager-wrap .k-textbox,
.modern-app-theme .k-pager-wrap .k-link,
.modern-app-theme .k-grouping-header .k-group-indicator,
.modern-app-theme .k-gantt-toolbar .k-state-default {
    border-color: #d0d4e4 !important;
}

.modern-app-theme .k-autocomplete.k-state-default, 
.modern-app-theme .k-picker-wrap.k-state-default, 
.modern-app-theme .k-numeric-wrap.k-state-default
{
    background-color: var(--modern-primary-blue) !important;
    border-color: var(--modern-primary-blue) !important;
}

.modern-app-theme .k-dropdown-wrap.k-state-default{
    background-color:white;
    color: var(--modern-dark-grey) !important;
    border-color: #d0d4e4;
    border-radius:0px!important;
}

.modern-app-theme .form-control{
    border-color:#d0d4e4;
    font-family: "Figtree Light", sans-serif;
    color: var(--modern-dark-grey);
}

.modern-app-theme .k-dropdown .k-input,
.modern-app-theme .k-dropdown .k-select .k-icon
{
    border-color: #d0d4e4 !important;
    color: var(--modern-dark-grey) !important;
}

.modern-app-theme .k-pager-numbers .k-link {padding:0px}

.modern-app-theme .k-button-group .k-tool, 
.modern-app-theme .k-toolbar, .k-grid-toolbar .k-button{
    background-color: var(--modern-primary-blue) !important;
    border-color: var(--modern-primary-blue) !important;
}

.modern-app-theme .k-header > .k-grid-filter,
.modern-app-theme .k-header > .k-header-column-menu {
    opacity: 0;
}

.modern-app-theme .k-header:hover > .k-grid-filter,
.modern-app-theme .k-header:hover > .k-header-column-menu {
    opacity: 1;
    color: var(--modern-dark-grey) !important;
}

.modern-app-theme .k-grid-header, 
.modern-app-theme .k-grid-footer, 
.modern-app-theme .k-upload.k-header{
    background-color: var(--modern-light-grey) !important;
}
.modern-app-theme .k-pager-wrap{
    background-color: var(--modern-light-grey) !important;
}

.modern-app-theme .k-link:link, 
.modern-app-theme .k-link:visited, 
.modern-app-theme .k-nav-current.k-state-hover .k-link, 
.modern-app-theme .k-pager-wrap
{color: var(--modern-dark-grey) !important;}

.modern-app-theme .k-grid table tr{border:1px solid black}

.modern-app-theme .k-grid tbody tr td{
    border-bottom: var(--modern-k-grid-border) solid 1px;
}

.modern-app-theme .k-grid tbody tr:hover {
    background: var(--modern-k-grid-selected);
    color:var(--modern-dark-grey);
}

.modern-app-theme .k-state-selected,
.modern-app-theme .k-state-selected:link,
.modern-app-theme .k-state-selected:visited,
.modern-app-theme .k-list > .k-state-selected,
.modern-app-theme .k-list > .k-state-highlight,
.modern-app-theme .k-panel > .k-state-selected,
.modern-app-theme .k-ghost-splitbar-vertical,
.modern-app-theme .k-ghost-splitbar-horizontal,
.modern-app-theme .k-draghandle.k-state-selected:hover,
.modern-app-theme .k-scheduler .k-scheduler-toolbar .k-state-selected,
.modern-app-theme .k-scheduler .k-today.k-state-selected,
.modern-app-theme .k-marquee-color {
    background: var(--modern-k-grid-selected);
    color: var(--modern-dark-grey);
}

.modern-app-theme .k-grid tr:hover .k-state-selected,
.modern-app-theme .k-grid tr.k-state-selected:hover td {
    background: var(--modern-k-grid-selected);
}

.modern-app-theme .status-completed {background-color: var(--modern-status-completed)}
.modern-app-theme .status-overdue{background-color: var(--modern-status-overdue)}
.modern-app-theme .status-notscheduled {background-color: var(--modern-status-notscheduled)}

.modern-app-theme .k-grid tr.k-state-selected:hover .status-completed,
.modern-app-theme .k-grid tr:hover .k-state-selected .status-completed,
.modern-app-theme .k-state-selected .status-completed,
.modern-app-theme .k-grid tr:hover .status-completed {background-color: var(--modern-status-completed)}

.modern-app-theme .k-grid tr.k-state-selected:hover .status-overdue,
.modern-app-theme .k-grid tr:hover .k-state-selected .status-overdue,
.modern-app-theme .k-grid tr:hover .status-overdue,
.modern-app-theme .k-state-selected .status-overdue{background-color: var(--modern-status-overdue)}

.modern-app-theme .k-grid tr.k-state-selected:hover .status-notscheduled,
.modern-app-theme .k-grid tr:hover .k-state-selected .status-notscheduled,
.modern-app-theme .k-state-selected .status-notscheduled,
.modern-app-theme .k-grid tr:hover .status-notscheduled{background-color: var(--modern-status-notscheduled)}

.modern-app-theme .k-grid tr:hover td[class^="status"],
.modern-app-theme .k-grid .k-state-selected td[class^="status"] {
    filter: saturate(100%) brightness(110%) grayscale(10%) hue-rotate(5deg);
}
*/
/*Grid Paging*/
/*.modern-app-theme .k-pager-wrap .k-link:hover{
    background-color: var(--modern-k-grid-selected) !important;
    border: 1px solid var(--modern-dark-grey) !important;
}

.modern-app-theme .k-pager-wrap .k-state-selected {
    background-color: var(--modern-primary-blue) !important;
    border: 1px solid var(--modern-primary-blue) !important;
    color: #ffffff;
}*/

/* Date Picker */
/*.modern-app-theme .k-datepicker .k-input{
    border-radius:0px;
}

.modern-app-theme .k-datepicker .k-numeric-wrap::before,
.modern-app-theme .k-datepicker .k-picker-wrap::before {
    padding-bottom: 0px;
}

.modern-app-theme .k-datepicker.k-header {
    background-color: var(--modern-primary-blue) !important;
}*/

/***************************/
/*    New Metro themes     */
/***************************/
/* Training Videos*/
/* Wistia */
.training_videos_content {
}
.training_videos_content h4{font-size: 26px;font-weight: 400;font-family: 'Open Sans',sans-serif;}
.training_videos_content .area-heading {font-size: 20px;font-weight: 400;font-family: 'Open Sans',sans-serif; margin-top:5px; margin-bottom:15px; color:#1c76cc}

.training_videos_content .training_menu{background-color:#1c76cc; min-height:700px}
.training_videos_content .training_menu .btn-primary{background-color:#3bb9f7; border:0px; color:#ffffff}
.training_videos_content .training_menu .btn-primary:hover{background-color:#1aa1e4}
.training_videos_content .training_menu .menu-submenu .nav-link {font-size:14px; padding:6px;}
.training_videos_content .training_menu .menu-submenu .nav-pills .nav-link,
.training_videos_content .training_menu .menu-submenu .nav-pills .nav-link:hover {color: #ffffff !important; text-align:left}
.training_videos_content .training_menu .menu-label {color: white; padding: 10px 0 10px 0; margin:0px; cursor: pointer; font-size:20px;}

.training_videos_content .training_menu .hide-submenu{visibility:hidden;}

.training_videos_content .training_menu .menu-label.open i {
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease
}

.training_videos_content .training_menu .menu-label.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.training_videos_content .training_menu_02 {background-color:#1c76cc; min-height:700px}
.training_videos_content .training_menu_02 .nav-tabs.flex-column {border-right:0px;}
.training_videos_content .training_menu_02 .nav-tabs .nav-link {color:white; border:0px; border-radius:0; cursor:pointer}
.training_videos_content .training_menu_02 .nav-tabs .nav-link.active {background-color:#3bb9f7; color:white; border:0px;}
.training_videos_content .training_menu_02 .nav-tabs .nav-link:hover {background-color:#16a3e9; border:0px;}
.training_videos_content .training_menu_02 .nav-tabs .nav-link .menu-label{font-size:20px; margin-bottom:0px;}
.training_videos_content .training_menu_02 .nav-tabs .nav-link.active .menu-label:after {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 600;
    content: "\f32e";
    float:right;
 }

.training_videos_content .play-icon {
    color: cornflowerblue;
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
.training_videos_content .play-icon {cursor: pointer;}
.training_videos_content .video_summary h4{font-size:26px;font-weight: 400;font-family: 'Open Sans',sans-serif;}
.training_videos_content .video_summary{font-size:18px; border-radius:0.3px; background-color:#e7f0f4; box-shadow:none; border: 1px solid #dee2e6}
.training_videos_content .zoom {transition: transform .2s;}
.training_videos_content .zoom:hover {transform: scale(1.5);}
.training_videos_content .grid-videos .card{border-radius:0.3px; background-color:#e7f0f4; box-shadow:none; border: 1px solid #dee2e6}
.training_videos_content #suggestedVideos .card{border-radius:0.3px; background-color:#e7f0f4; box-shadow:none; border: 1px solid #dee2e6}

/*section training videos*/
.section-training-videos .section-training-menu {border-radius:10px}
.section-training-videos .section-training-menu {background-color:#007ee6; font-family: var(--modern-font-body);padding:0px}
.section-training-videos .section-training-menu .nav-tabs .nav-link .menu-label{
    font-family: var(--modern-font-body);
    color:#ffffff; 
    font-size:14px;
    margin:0px;
}
.section-training-videos .section-training-menu .nav-tabs .nav-link.active .menu-label::after {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 600;
    content: "\f053";
    float: right;
}

.section-training-videos .section-training-menu .nav-tabs .nav-link {background-color:#007ee6; cursor:pointer; border:0px; border-radius:10px 0px 0px 10px;margin:0px}
.section-training-videos .section-training-menu .nav-tabs .nav-link.active {background-color:rgb(0, 170, 255)}
.section-training-videos .section-training-menu .nav-tabs .nav-link:hover {background-color:rgb(0, 170, 255)}


.section-training-videos .section-training-video-content .card-training-video {
    background-color:rgb(247, 248, 255);
    box-shadow:5px 5px 12px -1px rgb(163, 172, 206);
    outline:2px solid rgb(230, 232, 248);
    cursor:pointer;
}

.section-training-videos .section-training-video-content .card-training-video:hover{outline:2px solid #9f5fe6;}

.section-training-videos .section-training-video-content .card-training-video .card-title{
    font-size: 18px;
    color: #9f5fe6;
    font-weight: 550;
    font-variation-settings: "wght" 550;
    text-align: left;
}

.section-training-videos .section-training-menu .menu-submenu {
    background-color: #0d56a5;
    margin-left: -15px;
    margin-right: -15px;
    padding:10px;
}

.section-training-videos .section-training-menu .menu-submenu .nav .nav-item{
    padding-bottom:10px;
}

.section-training-videos .section-training-menu .menu-submenu .nav .nav-item:last-child{
    padding-bottom:0px;
}

.section-training-videos .section-training-menu .menu-submenu .nav .nav-item .nav-link{
    background-color:rgb(0, 170, 255);
    border-radius:10px;
    padding-bottom:5px;
}

.section-training-videos .section-training-menu .menu-submenu .nav .nav-item .nav-link:link,
.section-training-videos .section-training-menu .menu-submenu .nav .nav-item .nav-link:visited,
.section-training-videos .section-training-menu .menu-submenu .nav .nav-item .nav-link:hover,
.section-training-videos .section-training-menu .menu-submenu .nav .nav-item .nav-link:active
{
    background-color:rgb(0, 170, 255);
}

.section-training-videos .section-training-menu .menu-submenu .nav .nav-item .nav-link:hover{
    background-color:rgb(0, 170, 255);
    background-image:var(--tint-light-30);
}


.section-training-videos .section-training-menu .menu-label.open i {
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease
}

.section-training-videos .section-training-menu .menu-label.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}



/*Animations*/
.section-training-videos .scale-up-center {transition: 0.4s ease;}
.section-training-videos .scale-up-center:hover {-webkit-transform: scale(1.02);transform: scale(1.02);transition: 0.4s ease;}
.section-training-videos .progress-bar-green{background-color:#00a756;}

.section-training-videos .thumbnail-training-video .play-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.section-training-videos .section-training-video-content .zoom {transition: transform .2s;}
.section-training-videos .section-training-video-content .zoom:hover {transform: scale(1.2);}
    
.section-training-videos .section-training-video-content h4{font-size:24px;}
.section-training-videos .section-training-video-content h5{font-weight:500; font-size:18px;}




.help_video_hero {color: #ffffff;}
.help_video_hero .videoContent {background-image: url("/Assets/img/bg_wave_metro.png");background-position: center;background-repeat: no-repeat;background-size: cover;}
.help_video_hero .banner_description {color: #ffffff;font-size: 24px;font-weight: 300;font-family: 'Open Sans',sans-serif;}
.help_video_hero a {font-family: 'Open Sans',sans-serif;color: #69ceff; font-weight:400}
.help_video_hero a:hover {color: #7ce8fd;}
.help_video_hero .btn_hero {color:#ffffff;background-color: #3bb9f7;font-size: 16px;font-weight: 400;padding:8px;}
.help_video_hero .btn_hero:hover {background-color: #1aa1e4;}

.help_video_hero .video_buttons .btn-primary{background-color:#3bb9f7; border:0px; color:#ffffff}
.help_video_hero .video_buttons .btn-primary:hover{background-color:#1aa1e4;}
.help_video_hero .zoom {transition: transform .2s;}
.help_video_hero .zoom:hover {transform: scale(1.5);}

/* kendo grid cell read only disabled*/
.KendoGridCellReadOnly {
    color: #637289 !important;
    background-color: #dedfde !important;
}

/* Light blue text when hovered */
.KendoGridCellReadOnly a:hover {
    color: #00b7ff !important;
}

/* Light blue text when hovered in kendo grid*/
.k-grid .k-grid-content tr:hover .KendoGridCellReadOnly a {
    color: #00b7ff !important;
    font-size: 14px;
    font-weight: 400;
}


.KendoGridCellMultiline {
    word-break: break-all !important;
    word-wrap: break-word !important;
    vertical-align: top;
}

.KendoGridCellReadOnly .checkbox_anim_sm input[type=checkbox]:checked ~ label {
    opacity:0.6;
}

/*Grammary conflicts with kendo hiding until theres a nicer solution*/
grammarly-extension {
    display: none !important
}
div[data-grammarly-part="highlights"] {display:none!important}
div[data-grammarly-part="button"] {display:none!important}

.remove_box_border {border-top:0px; box-shadow:none}

.shadow-none {box-shadow: none !important;}

/*Kendo2023 - Remove Hover*/

.remove_grid_hover_Kendo2023.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
.remove_grid_hover_Kendo2023.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover,
.remove_grid_hover_Kendo2023 .k-table-tbody .k-table-row:hover,
.remove_grid_hover_Kendo2023 .k-table-list .k-table-row:hover,
.remove_grid_hover_Kendo2023 .k-table-tbody .k-table-row.k-hover,
.remove_grid_hover_Kendo2023 .k-table-list .k-table-row.k-hover {
    background-color: inherit;
    color: inherit;
    text-decoration: none;
}

.remove_grid_hover_Kendo2023.k-grid .k-table-tbody > .k-table-row:hover a,
.remove_grid_hover_Kendo2023.k-grid .k-table-tbody > .k-table-row.k-hover a {
    color: #3c8dbc;
}

.remove_grid_hover_Kendo2023.k-grid .k-table-row.k-table-alt-row:hover {
    background-color: whitesmoke!important;
}

.remove_grid_hover_Kendo2023.k-grid .history_details .wrapper tbody > tr {
    background-color: #222d32
}

/*Kendo2023 - Make kendo labels and widgets more compact*/

.kendo_filter_compact_Kendo2023 label,
.kendo_filter_compact_Kendo2023 .k-widget {font-size: var(--form-element-compact-font-size); font-weight:var(--font-weight-normal)!important}

.kendo_filter_compact_Kendo2023 .form-control,
.kendo_filter_compact_Kendo2023 .k-input,
.kendo_filter_compact_Kendo2023 .k-dropdownlist, 
.kendo_filter_compact_Kendo2023 .input-group-btn button{font-size: 12px;font-weight:var(--form-element-font-weight)!important;height: 28px;word-wrap: normal;white-space: normal;line-height: 14px}

.kendo_filter_compact_Kendo2023 .k-input .k-input-inner {padding-block: 0px;padding-inline: 0px}


.remove_grid_hover.k-grid tr:hover,
.remove_grid_hover.k-grid tr.k-state-selected,
.remove_grid_hover.k-grid td.k-state-selected:hover,
.remove_grid_hover.k-grid tr:hover.k-state-selected,
.remove_grid_hover.k-grid tr:hover .k-state-selected,
.remove_grid_hover.k-grid tr.k-state-selected:hover td,
.remove_grid_hover.k-grid .k-grid-content tr:hover .status-completed a:hover,
.remove_grid_hover.k-grid .k-grid-content tr:hover .status-overdue a:hover,
.remove_grid_hover.k-grid .k-grid-content tr:hover .status-notscheduled a:hover,
.remove_grid_hover.k-grid .k-grid-content tr:hover.tr.k-alt {
    background-color: inherit;
    color: inherit;
    text-decoration: none;
}
.remove_grid_hover.k-grid .k-grid-content tr:hover a,
.remove_grid_hover.k-grid .k-grid-content tr:hover a:hover{color:#337ab7}
.remove_grid_hover.k-grid .k-grid-content tr:hover .k-icon.k-i-more-vertical {color: #3c8dbc;}
.remove_grid_hover.k-grid .k-grid-content tr:hover .k-pager-wrap .k-link .k-icon{color: #fff;}
.remove_grid_hover.k-grid .k-grid-content tr:hover .k-pager-wrap .k-pager-numbers .k-state-selected {background-color:#3498db}

.remove_grid_hover.k-grid.k-grid tr:hover,
.remove_grid_hover.k-grid tr.k-state-selected,
.remove_grid_hover.k-grid td.k-state-selected:hover,
.remove_grid_hover.k-grid tr:hover.k-state-selected,
.remove_grid_hover.k-grid tr:hover .k-state-selected,
.remove_grid_hover.k-grid tr.k-state-selected:hover td,
.remove_grid_hover.k-grid tr.k-state-selected:hover td,
.remove_grid_hover.k-grid tr:hover .status-completed a:hover,
.remove_grid_hover.k-grid tr:hover .status-overdue a:hover,
.remove_grid_hover.k-grid tr:hover .status-notscheduled a:hover,
.remove_grid_hover.k-grid tr.k-alt {background-color: inherit;color: inherit;text-decoration: none;}
/*.remove_grid_hover.k-grid tr.k-alt {background-color: #f5f5f5!important}*/
.remove_grid_hover.k-grid tr:hover a,
.remove_grid_hover.k-grid tr:hover a:hover {color: inherit;}
.remove_grid_hover.k-grid tr:hover .k-icon.k-i-more-vertical {color: #3c8dbc;}
.remove_grid_hover.k-grid tr:hover .k-pager-wrap .k-pager-numbers .k-state-selected {background-color: #3498db}
.remove_grid_hover.k-grid tr:hover .k-pager-wrap .k-pager-numbers .k-link {color: #ffffff}
.remove_grid_hover.k-grid tr:hover a, 
.remove_grid_hover.k-grid tr.k-state-selected a,
.remove_grid_hover.k-grid tr.k-state-selected:hover a,
.remove_grid_hover.k-grid a:hover {color: #3c8dbc;}
.remove_grid_hover.k-grid .k-grid-header:hover .k-header,
.remove_grid_hover.k-grid .k-grid-header:hover .k-header .k-link,
.remove_grid_hover.k-grid tr:hover .k-pager-wrap .k-link .k-icon,
.remove_grid_hover.k-grid tr:hover .btn,
.remove_grid_hover.k-grid tr:hover .btn:hover,
.remove_grid_hover.k-grid tr:hover thead .k-link {color: #fff;}
.remove_grid_hover.k-grid .k-grid-content tr td a:hover {color: #367fa9;}
.remove_grid_hover.k-grid .k-grid-content tr:hover a {color: #3c8dbc;}

/*remove grid hover onboarding*/

.remove_grid_hover_onboarding.k-grid tr:hover,
.remove_grid_hover_onboarding.k-grid tr.k-state-selected,
.remove_grid_hover_onboarding.k-grid td.k-state-selected:hover,
.remove_grid_hover_onboarding.k-grid tr:hover.k-state-selected,
.remove_grid_hover_onboarding.k-grid tr:hover .k-state-selected,
.remove_grid_hover_onboarding.k-grid tr.k-state-selected:hover td,
.remove_grid_hover_onboarding.k-grid tr:hover .status-completed a:hover,
.remove_grid_hover_onboarding.k-grid tr:hover .status-overdue a:hover,
.remove_grid_hover_onboarding.k-grid tr:hover .status-notscheduled a:hover,
.remove_grid_hover_onboarding.k-grid tr.k-alt {background-color: inherit;color: inherit;text-decoration: none;}
.remove_grid_hover_onboarding.k-grid tr.k-alt {background-color: #f5f5f5}
.remove_grid_hover_onboarding.k-grid tr:hover a,
.remove_grid_hover_onboarding.k-grid tr:hover a:hover {color: inherit;}
.remove_grid_hover_onboarding.k-grid tr:hover .k-icon.k-i-more-vertical {color: #3c8dbc;}
.remove_grid_hover_onboarding.k-grid tr:hover .k-pager-wrap .k-pager-numbers .k-state-selected {background-color: #3498db}
.remove_grid_hover_onboarding.k-grid tr:hover .k-pager-wrap .k-pager-numbers .k-link {color: #ffffff}
.remove_grid_hover_onboarding.k-grid tr:hover a, 
.remove_grid_hover_onboarding.k-grid a:hover {color: #3c8dbc;}
.remove_grid_hover_onboarding.k-grid .k-grid-header:hover .k-header,
.remove_grid_hover_onboarding.k-grid .k-grid-header:hover .k-header .k-link,
.remove_grid_hover_onboarding.k-grid tr:hover .k-pager-wrap .k-link .k-icon,
.remove_grid_hover_onboarding.k-grid tr:hover .btn,
.remove_grid_hover_onboarding.k-grid tr:hover .btn:hover,
.remove_grid_hover_onboarding.k-grid tr:hover thead .k-link {color: #fff;}
.remove_grid_hover_onboarding.k-grid .k-grid-content tr td a:hover {color: #367fa9;}
.remove_grid_hover_onboarding.k-grid .k-grid-content tr:hover a {color: #3c8dbc;}

.remove_grid_hover_onboarding.k-grid tr.k-detail-row:hover .k-grid-header .k-link {
    color: #ffffff
}


/* Custom Grid
   Applied to
    -JobActualsWorkInProgress
    -Order Setting
*/
/*.custom-k-grid-1 .k-grouping-row td{background-color:transparent; color:#263238}
.custom-k-grid-1 .k-grouping-row td,
.custom-k-grid-1 .k-group-footer td,
.custom-k-grid-1 .k-grid-footer td {border-color:#cccccc}
.custom-k-grid-1.k-grid tr:hover,
.custom-k-grid-1.k-grid tr.k-state-selected,
.custom-k-grid-1.k-grid td.k-state-selected:hover,
.custom-k-grid-1.k-grid tr:hover.k-state-selected,
.custom-k-grid-1.k-grid tr:hover .k-state-selected,
.custom-k-grid-1.k-grid tr.k-state-selected:hover td,
.custom-k-grid-1.k-grid tr:hover .status-completed a:hover,
.custom-k-grid-1.k-grid tr:hover .status-overdue a:hover,
.custom-k-grid-1.k-grid tr:hover .status-notscheduled a:hover,
.custom-k-grid-1.k-grid td.k-group-cell{background-color: inherit;color: inherit;text-decoration: none;}
.custom-k-grid-1.k-grid tr:hover a,
.custom-k-grid-1.k-grid tr:hover a:hover {color: inherit;}
.custom-k-grid-1.k-grid tr:hover .k-icon.k-i-more-vertical {color: #3c8dbc;}
.custom-k-grid-1.k-grid tr:hover .k-pager-wrap .k-pager-numbers .k-state-selected {background-color: #3498db}
.custom-k-grid-1.k-grid tr:hover .k-pager-wrap .k-pager-numbers .k-link {color: #ffffff}
.custom-k-grid-1.k-grid tr:hover a, 
.custom-k-grid-1.k-grid a:hover {color: #3c8dbc;}
.custom-k-grid-1.k-grid .k-grid-header:hover .k-header,
.custom-k-grid-1.k-grid .k-grid-header:hover .k-header .k-link,
.custom-k-grid-1.k-grid tr:hover .k-pager-wrap .k-link .k-icon,
.custom-k-grid-1.k-grid tr:hover .btn,
.custom-k-grid-1.k-grid tr:hover .btn:hover,
.custom-k-grid-1.k-grid tr:hover thead .k-link {color: #fff;}
.custom-k-grid-1.k-grid .k-grid-content tr td a:hover {color: #367fa9;}
.custom-k-grid-1.k-grid .k-grid-content tr:hover a {color: #3c8dbc;}

.custom-k-grid-1.k-grid tr a.k-grid-edit,
.custom-k-grid-1.k-grid tr:hover a.k-grid-edit{color:white; background-color:#3c8dbc; border-color:#3c8dbc;}
.custom-k-grid-1.k-grid tr a.k-grid-edit:hover {color: white; background-color:#367fa9; border-color:#367fa9;}

.custom-k-grid-1.k-grid tr a.k-grid-delete,
.custom-k-grid-1.k-grid tr:hover a.k-grid-delete {color: white; background-color:#d15445; border-color:#d15445;}
.custom-k-grid-1.k-grid tr a.k-grid-delete:hover {color: white; background-color:#ca4332; border-color:#ca4332;}

.custom-k-grid-1.k-grid tr a.k-grid-update,
.custom-k-grid-1.k-grid tr:hover a.k-grid-update{color:white; background-color:#3c8dbc; border-color:#3c8dbc;} 
.custom-k-grid-1.k-grid tr a.k-grid-update:hover {color: white; background-color:#367fa9; border-color:#367fa9;}

.custom-k-grid-1.k-grid tr a.k-grid-cancel,
.custom-k-grid-1.k-grid tr:hover a.k-grid-cancel{color: white; background-color:#d15445; border-color:#d15445;}
.custom-k-grid-1.k-grid tr a.k-grid-cancel:hover {color: white; background-color:#ca4332; border-color:#ca4332;}*/

/*add grey alt rows*/
/*.custom-k-grid-1.k-grid tr.k-alt {background-color: inherit;color: inherit;text-decoration: none;}
.custom-k-grid-1.k-grid tr.k-alt {background-color: #f5f5f5!important}*/
/*.custom-k-grid-1.k-grid tbody tr.k-grouping-row:nth-child(2n+1) {background-color: #f5f5f5 !important}*/

.btn-primary.form-control[disabled],
.btn-primary.form-control[readonly] {
    background-color: #3c8dbc;
}

.k_disabled{
    opacity:0.5;
    pointer-events:none;
  }

.table-layout {display:table;width:100%;}
.table-layout .table-cell {display:table-cell;}

.fixed-width-200 {width:200px;}
.fixed-width-300 {width:300px;}
.fixed-width-400 {width:400px;}
.fixed-width-500 {width:500px;}

/*********************/
/*  No Records Box   */
/*********************/
.no_records_box{
    top: 50%;
    left: 50%;
    /*margin-left: -10em;*/
    margin-top: 2em;
    margin-bottom: 2em;
    /*position: absolute;*/
}

.no_records_box_message{
    top: 50%;
    left: 50%;
    margin-left: -10em;
    margin-top: -2em;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    width: 20em;
    height: 4em;
    line-height: 4em;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
}

/***************************/
/*     Prompt Window       */
/***************************/

/* overrides */
#SupplyInventoryGrid.k-grid td {
    overflow:visible !important;
}

.ascora-blue .k-window-titlebar {background-color:var(--accent2-15); border-color:var(--accent2-35)}

.prompt_window.k-window {padding-top:3.4em!important;}
.prompt_window.k-window .k-window-titlebar {margin-top:-2.3em!important;}

.prompt_window.k-window .k-window-titlebar, 
.prompt_window.k-window .k-header {height:1.4em; font-size:1.5em; font-weight:600;}
.prompt_window.k-window .modal-body {padding:15px 0 0}
.prompt_window.k-window .k-window-content {padding:0px;}
.prompt_window.k-window .k-window-content .container-fluid{box-sizing:border-box;}
.prompt_window.k-window .modal-body #alertWindowMessage,
.prompt_window.k-window .modal-body #alertWindowContent,
.prompt_window.k-window .modal-body #infoWindowMessage,
.prompt_window.k-window .modal-body #infoWindowContent,
.prompt_window.k-window .modal-body #successWindowMessage,
.prompt_window.k-window .modal-body #successWindowContent,
.prompt_window.k-window .modal-body #questionWindowMessage,
.prompt_window.k-window .modal-body #questionWindowContent {margin-top:0px; font-size: 16px; font-weight: normal;}
.prompt_window.k-window .modal-body .alert_icon {font-size: 65px; margin-top: 5px;}
.prompt_window.k-window .modal-body .modal-footer {border-top:0px;
}

.ascora_alert {font-size:12px; line-height:16px; padding:8px; margin-bottom:5px;}

/***************************/
/*   Release Notes PopUp   */
/***************************/

#ReleaseNotesPopUp {}
#ReleaseNotesPopUp .releaseNoteModal {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    z-index: 1050;
}

#ReleaseNotesPopUp .releaseNoteModal .ascoraLogo {height:auto; width:70px; position:absolute; left:50%; margin-left:-30px}
#ReleaseNotesPopUp .releaseNoteModal h5 {text-align:center; font-size:18px; line-height:22px; font-weight:400; color:#1c7ed7; margin:0px 0px 10px}
#ReleaseNotesPopUp .releaseNoteModal p {font-size:14px; margin-bottom:5px;}
#ReleaseNotesPopUp .releaseNoteModal .modal-body {padding:15px 15px}

#ReleaseNotesPopUp2 {position: absolute; right:15px; top:10px;}

/***************************/
/*   General PopUp   */
/***************************/

.popupAnchor {
    position: relative;
    z-index: 5;
}

    .popupAnchor > .popupContainer {
        position: absolute;
        width: 250px;
        top: 50px;
        left: -25px;
    }

        .popupAnchor > .popupContainer .ascoraLogo {
            height: auto;
            width: 70px;
            position: absolute;
            left: 50%;
            margin-left: -30px
        }

        .popupAnchor > .popupContainer h5 {
            text-align: center;
            font-size: 18px;
            color: var(--primary-color);
            font-weight:400;
        }

/***************************/
/*     Widget Colours      */
/***************************/
.widget_blue.k-widget .k-dropdown-wrap {background-color:green; border:green}

/***************************/
/*     Default Styles      */
/***************************/
.info_box_compact {display:table}
.info_box_compact .info-box-icon{display:table-cell; float:none; vertical-align:middle; line-height:28px; width:60px; height:60px}
.info_box_compact .info-box-icon .fa{font-size:30px; line-height:60px;}
.info_box_compact .info-box-content {
    font-size:11px;
    line-height:14px;
    display:table-cell;             
    vertical-align:top; 
    height:auto;
}

/* set readonly styling on inputs */
input[readonly].readonlyinput {
    border-color:#d2d6de;
    background-color:#eeeeee!important;
    color:gray; 
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity:1;
    cursor:default;
}

input:focus[readonly].readonlyinput {
    border-color:#d2d6de;
    background-color:#eeeeee!important;
    color:gray; 
    outline: none;  
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity:1;
    cursor:default;
}


/*make grid rows appear disabled*/
.k-grid tr.row_disabled {background-color:#e9ecef; color:#495057}
.k-grid tr.row_disabled:hover {background-color:#e9ecef; color:#495057}

.k-grid-norecords h3{margin:60px 0}

/*positon bulk action buttons absolutely so that the drop down isn't trimmed when the heading overflow is set to auto*/
.bulk_action_wrapper {position:absolute; right:15px; z-index:100000000}

/* Bulk Action Group Dropdown*/
.bulk_action_group .dropdown-menu {

    /*background-color:#607D8B;*/ /*blue grey*/
    /*background-color:#388E3C;*/ /* green */
    background-color:#3c8dbc; /*blue*/
    width: 300px;
    border:0px;
    border-radius:0px;

    left:auto;
    right:0px;
}

.bulk_action_group .dropdown-menu > li > a{
    font-weight:400;
    word-wrap: normal;
    white-space: normal;
    padding: 8px 10px;
    color:#ffffff;
    cursor:pointer;
    padding-left: 38px;
}

.bulk_action_group .dropdown-menu > li > a:hover,
.bulk_action_group .dropdown-menu > li > a:focus,
.bulk_action_group .dropdown-menu > li > button:hover{
    background-color: #90A4AE; /*blue grey*/
    /*background-color: #00C853;*/ /*green*/
    /*background-color: #3bb9f7;*/ /*blue*/
    color:#ffffff;
    cursor:pointer;
}

.bulk_action_group .remove_dropzone .k-upload .k-upload-button:hover{background-color: #64B5F6;}
.bulk_action_group .dropdown-menu > li > .btn-primary:hover{background-color: #64B5F6;}
.bulk_action_group .dropdown-menu > li > .btn-danger:hover{background-color: #E57373;}

.bulk_action_group .dropdown-menu > li > .btn,
.bulk_action_group .dropdown-menu > li > .btn:hover
.bulk_action_group .dropdown-menu > li > .btn:focus{border:0px}

/*.bulk_action_group .btn-group-vertical {
    float: left;
    width: 46%;
    margin-right: 10px;
}*/

.bulk_action_group .dropdown-menu li > a .fa,
.bulk_action_group .dropdown-menu li > button .fa,
.bulk_action_group .dropdown-menu li > a .fas,
.bulk_action_group .dropdown-menu li > button .fas
{
    position: absolute;
    clear: both;
    left: 14px;
    padding-top: 2px;
}

.bulk_action_group .dropdown-menu li > button .fa {
   padding-top:4px;
}

.bulk_action_group .dropdown-menu li > button {
    border: 0px;
    background-color: transparent;
    width: 100%;
    padding: 8px 10px;
    color: #ffffff;
    font-weight: 400;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    padding-left: 38px;
}

.bulk_action_group .dropdown-menu .btn {text-align:left}


.bulk_action_group .remove_dropzone,
.bulk_action_group .remove_dropzone .k-button,
.bulk_action_group .remove_dropzone .k-upload-button-wrap {
    width: 100%;
}

.bulk_action_group .remove_dropzone .k-upload {
    border: 0
}
.bulk_action_group .remove_dropzone .k-upload .k-upload-button-wrap input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
}
.bulk_action_group .remove_dropzone .k-upload .k-upload-button-wrap .k-upload-button {
    background-image: none;
}

.bulk_action_group .remove_dropzone .k-upload .k-upload-button-wrap:hover .k-upload-button {
    background-color: #64B5F6
}

.bulk_action_group .remove_dropzone .k-upload-button-wrap .k-button {
    justify-content: flex-start
}

.bulk_action_group .remove_dropzone .k-button span::before {
    margin-left: 5px;
    margin-right: 11px;
}
.bulk_action_group .remove_dropzone .k-upload .k-upload-button {
    font-weight:400;
    word-wrap: normal;
    white-space: normal;
    color:#ffffff;
    cursor:pointer;
    border:0px;
    padding: 8px;
    text-align: left;
}

/* Disable Grid */
.disable_grid.k-grid tr, 
.disable_grid.k-grid tr.k-alt td {background: #d7e5ec!important; color:#90A4AE!important; cursor:default!important}

.disable_grid.k-grid tr a, 
.disable_grid.k-grid tr a:hover, 
.disable_grid.k-grid tr a:active, 
.disable_grid.k-grid tr a:visited{color:#90A4AE!important; text-decoration:none!important; cursor:default!important}

/*.k-state-default > .k-select {background-color:blue}*/

.k-window .k-overlay {
    -ms-opacity: 0 !important;
    opacity: 0 !important;
}

/*Kendo Modal Overlay*/
.force-overlay .k-overlay {
    -ms-opacity: .5 !important;
    opacity: .5 !important;
}

/*form inline override*/
/*allows form-inline to be used within form-horizontal*/
.form-inline-override .form-group{
    margin-left:0px; margin-right:0px;
}

.form-inline.form-inline-override .radio, 
.form-inline.form-inline-override .checkbox {
    display: inline-block;
    margin-bottom: 1px;
    margin-top: 0;
    padding-top:0px;
    vertical-align: middle;
    min-height:0px;
}


.picker_date_sm {
    width:120px;
}

.picker_number_sm {
    width:80px;
}

.helper_popover, .helper_popover:hover, .helper_popover:focus {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    padding:0px;
}

.helper_popover .fa {
    font-size:18px;
    -webkit-font-smoothing: antialiased;
}

/* Margins */
.margin_top_0 {margin-top:0px}
.margin_top_5 {margin-top:5px}
.margin_top_10 {margin-top:10px}
.margin_top_15 {margin-top:15px}
.margin_top_20 {margin-top:20px}

.margin_right_0 {margin-right:0px}
.margin_right_5 {margin-right:5px}
.margin_right_10 {margin-right:10px}
.margin_right_15 {margin-right:15px}
.margin_right_20 {margin-right:20px}

.margin_bottom_0 {margin-bottom:0px}
.margin_bottom_5 {margin-bottom:5px}
.margin_bottom_10 {margin-bottom:10px}
.margin_bottom_15 {margin-bottom:15px}
.margin_bottom_20 {margin-bottom:20px}

.margin_left_0 {margin-left:0px}
.margin_left_5 {margin-left:5px}
.margin_left_10 {margin-left:10px}
.margin_left_15 {margin-left:15px}
.margin_left_20 {margin-left:20px}

.margin_forms {margin-left:-15px; margin-right:-15px}


/*Remove Padding*/
.remove_padding_left {padding-left:0px!important;}
.remove_padding_right {padding-right:0px!important;}
.remove_padding_top {padding-top:0px!important;}
.remove_padding_bottom {padding-bottom:0px!important;}
.remove_padding_x {padding-left:0px!important; padding-right:0px!important;}

/*Remove All Padding*/
.remove_padding_all {padding:0px!important;}

/*Remove Margins*/
.remove_margin_left {margin-left:0px!important;}
.remove_margin_right {margin-right:0px!important;}
.remove_margin_bottom {margin-bottom:0px!important;}
.remove_margin_top {margin-top:0px!important;}

/*Remove All Margin*/
.remove_margin_all {margin:0px!important;}

/* Spaces */
.space_vertical_5 {display:block; margin-bottom:5px; clear:both}
.space_vertical_8 {display:block; margin-bottom:8px; clear:both}
.space_vertical_10 {display:block; margin-bottom:10px; clear:both}
.space_vertical_15 {display:block; margin-bottom:15px; clear:both}
.space_vertical_20 {display:block; margin-bottom:20px; clear:both}
.space_vertical_30 {display:block; margin-bottom:30px; clear:both}
.space_vertical_40 {display:block; margin-bottom:40px; clear:both}
.space_vertical_50 {display:block; margin-bottom:50px; clear:both}
.space_vertical_60 {display:block; margin-bottom:60px; clear:both}
.space_vertical_70 {display:block; margin-bottom:70px; clear:both}
.space_vertical_80 {display:block; margin-bottom:80px; clear:both}

.space_horizontal_5 { display: inline-block; width: 5px; }
.space_horizontal_10 { display: inline-block; width: 10px; }
.space_horizontal_15 { display: inline-block; width: 15px; }
.space_horizontal_20 { display: inline-block; width: 20px; }
.space_horizontal_30 { display: inline-block; width: 30px; }
.space_horizontal_40 { display: inline-block; width: 40px; }


/*Set input height to 26*/
.kendo_input_h_26 .k-input {height:26px;}

/*inline block*/
.inline_block {display:inline-block}

/*set min width of modal buttons*/
.modal-footer .btn{min-width:100px}

/* Sets direction of text indentation*/
.indent_text_left .k-textbox > input {direction:ltr;}
.indent_text_left .k-numeric-wrap .k-input {direction:ltr;} 
.indent_text_left .k-selectbox .k-input{direction:ltr;}


.indent_text_right .k-textbox > input {width: 95%; text-align: right; padding-right: 5% !important;}
.indent_text_right .k-numeric-wrap .k-input {width: 95%; text-align: right; padding-right: 5% !important;} 
.indent_text_right .k-selectbox .k-input{width: 95%; text-align: right; padding-right: 5% !important;}

.indent_amount_right .k-numeric-wrap .k-input {width: 98%; text-align: right; height: 27px; padding-right: 2% !important;} 


/* Min Heights*/
.min_height_500 {min-height:500px;}
.min_height_600 {min-height:600px;}
.min_height_700 {min-height:700px;}
.min_height_800 {min-height:800px;}

/* Add margin to font awesome icons */
.box-title .fa {margin-right:5px;}
button .fa {margin-right:5px;}
.btn .fa {margin-right:5px;}
.btn-sm .fa{margin-right:5px;}
.k-button .fa{margin-right:5px;}

/* Add margin to font awesome icons */
.box-title .far {margin-right:5px;}
button .far {margin-right:5px;}
.btn .far {margin-right:5px;}
.btn-sm .far{margin-right:5px;}
.k-button .far{margin-right:5px;}

/* Add margin to font awesome icons */
.box-title .fal {margin-right:5px;}
button .fal {margin-right:5px;}
.btn .fal {margin-right:5px;}
.btn-sm .fal{margin-right:5px;}
.k-button .fal{margin-right:5px;}

/* Add margin to font awesome icons */
.box-title .fas {margin-right:5px;}
button .fas {margin-right:5px;}
.btn .fas {margin-right:5px;}
.btn-sm .fas{margin-right:5px;}
.k-button .fas{margin-right:5px;}

/* Different Sized for Font Awesome Fonts*/
.icon_s1 {
    font-size: 25px;
    cursor: pointer;
    transition: transform .2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.icon_s1:hover {
    transform: scale(1.2);
}

/* Center Column */
.col_centered {
    float:none;
    margin:auto
}

.grid_controls {margin-top:10px; margin-bottom:20px; }

.window_title {
    display:block;
    border-bottom:1px solid #d2d6de;
    margin-bottom:20px;
}

.window_title h3{
    font-size:20px;
    margin-bottom:10px;
    margin-top:10px;
    color:#444;
}

.reduce_form_group_margin .form-group{
    margin-bottom:10px;
}

.reduce_help_block_margin .help-block{
    margin-bottom:0px;
}

.control-label.control_margin_bottom {
    margin-bottom:5px;
}

/*Center Navigation*/
.align_nav_middle {text-align:center;}
.align_nav_middle .navigation-menu{display:inline-block}

.submenu {text-align:left}


/* Colour Picker, moves color picker infront of kendo window*/
.colorpicker {z-index:10100!important}

.k-popup.k-group .k-color-value {
    color: #263238 !important
}

/* position notification box for upload button*/
.qq-upload-list {
    left: -124px;
    list-style: outside none disc;
    margin: 14px 35px;
    padding: 0;
    position: absolute;
    width: 400px;
}

.box.box_no_top_border {
    border-top:0px solid #d2d6de;
}

/*Offset Checkbox so that inputs line up*/
.offset_checkbox {

}

.offset_checkbox input{
    margin-left: 15px;
}

/*Validation error messages*/
.field-validation-error {
    font-size:12px;
}

/* validation */
.password-invalid {color:#dd4b39!important}
.password-valid {color:#00a65a!important}

/* remove padding from k-dropdown*/
/*.custom_form_upload .k-dropzone {
    padding:0px!important;
}*/

.custom_form_upload .k-dropzone .k-upload-status {
    line-height:1.2;
}

.custom_form_upload .k-upload-button {
    padding: 6px 12px;
    line-height:inherit;
    min-width:200px;
}

.custom_form_upload .k-dropzone-hint.k-hidden {
    display: block !important;
    margin-left: 10px;
    text-align:left;
}

/* custom form options list */

.custom_form_options_list {list-style:none; padding-left:0px;}
.custom_form_options_list li {margin-bottom:10px;}

.receipt_number {
    font-family: 'roboto',sans-serif; font-weight: 400; font-size: 18px
}

/*Filter style*/
.ascora-blue .ascora_filter .btn-group .btn-primary {background-color: #E7F3FF!important;border:0px; color:var(--primary-color)!important;background-image:none!important;border:1px solid #B9DCFF}
.ascora-blue .ascora_filter .btn-group .btn-primary.active {background-color: var(--toggle-color-blue-pastel-active)!important; box-shadow:none!important; background-image:none!important; color:#ffffff!important}
.ascora-blue .ascora_filter .btn-group .btn-primary.active .fa {display: inline-block;}
.ascora-blue .ascora_filter .btn-group .btn-primary .fa {display: none;margin: 0;padding: 0;}

/*Add checkbox to checklist items*/

.ChecklistCheckbox {
	width: 28px;
	height: 28px;
	background: transparent;
	position: relative;
    display:inline-block;
}

.ChecklistCheckbox label {
	cursor:default;
	position: absolute;
	width: 22px;
	height: 22px;
	left: 4px;
	top: 4px;
    background-color:transparent;
}

.ChecklistCheckbox label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
	top: 0px;
	left: 0px;
    background-image:url("/Assets/img/tick_green.png");
    background-size: 100% 100%;
}

.ChecklistCheckbox input[type=checkbox]:checked ~ label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.ChecklistCheckbox input[type=checkbox] {
	visibility: hidden;
}

/* increase size of dropdown to match buttons */
.input_group_large .form-control.k-widget{float:none;}
.input_group_large .form-control.k-widget .k-dropdown-wrap {border-width:initial}
.input_group_large .input-group-btn {padding-left:5px;}

/********************************************************************/
/*  Boostrap addons                                                 */
/* Allows columns to be positioned at the top or bottom of the row  */
/********************************************************************/
.position-cols[class*='cols-'] {display:table;}
.position-cols[class*='cols-'] > * {
		float: none;
	    position: relative;
	    /* old ie fixes */
	    *zoom: 1; 
	    *display: inline;
	    display: table-cell;
}
.position-cols.cols-bottom > * {vertical-align: bottom;}
.position-cols.cols-top > * {vertical-align: top;}
.position-cols.p-top {vertical-align: top;}


/********************************************************************/
/*  Compact Form:                                                   */
/*  Makes forms more compact by reducing margins between form groups*/
/********************************************************************/
.form_compact .form-group {
    margin-bottom: 0px;
}

.form_compact .form-control-static {
    padding-top:3px;
    padding-bottom:3px;
    min-height:30px;
}

.form_compact_5 .form-group {
    margin-bottom: 5px;
}



/********************************************************************/
/*  grid_compact_lite: Font Reduced, Padding Reduced                */
/********************************************************************/
.grid_compact_lite {font-size:12px;}
.grid_compact_lite .k-grid-header th{padding:4px;}
.grid_compact_lite .k-grid-content td{padding:4px;}

/********************************************************************/
/*  grid_compact_lite: Same Font Size, Padding Reduced              */
/********************************************************************/
.grid_compact_lite_02 {font-size:14px;}
.grid_compact_lite_02 .k-grid-header th{padding:4px;}
.grid_compact_lite_02 .k-grid-content td{padding:4px;}
.grid_compact_lite_02 .k-grid-header th.k-with-icon .k-link {margin-right:0px;}


/********************************************************************/
/*  compact button group                                            */
/********************************************************************/

/*Horizontal*/
/*.ascora_filter_compact .btn{font-size:12px;padding:5px; width:65px; height:65px; word-wrap:normal; white-space:normal; line-height:12px}
.ascora_filter_compact .btn .fa {display:block; position:absolute; font-size:40px; top:10px; left:10px; opacity:0.3; color:#fff; z-index:-10}
.ascora_filter_compact .btn.active {background-color: #00a8e1; box-shadow:none}*/

/*vertical*/
.ascora_filter_compact .btn{font-size:11px;padding:3px; width:130px; height:26px; word-wrap:normal; white-space:normal; line-height:12px}
.ascora_filter_compact .btn .fa {display:block; position:absolute; font-size:10px; top:10px; left:10px; opacity:0.8; color:#fff; z-index:-10}
.ascora_filter_compact .btn.active {background-color: #00a8e1; box-shadow:none}



/* apply to the row element and content of the columns will be vertically aligned to the bottom*/
.row_content_bottom {
    display: table;
    width: 100%;
}
.row_content_bottom [class^="col"] {
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

/*Form Group Comment, a comment that goes next to an input control*/

.form_group_comment {
    width: 160px; 
    display:inline-block; 
    vertical-align:middle;
    font-size:12px;
}

/********************************/
/* General Font Awesome Colours */
/********************************/
.warning-color-fa {
    font-size:26px;
    color:#f39c12; 
}

.warning-color-text {
    color: #f39c12;
}

/*************************/
/*  General Alert Style  */
/*************************/
.general_alert_window{
    
}

.general_alert_window .alert_icon {
    font-size:100px; color:#d15445;
}

.general_alert_window .message_icon {
    font-size:80px; color:#01579B;
}

.alert_window_message,
.alert_window_content {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.alert_window_message_bold {
    text-align: center; font-weight: bold; font-size: 1.5em;
}

.alert_window_footer {
    margin: 0 auto;
    width: fit-content; /* Required for JobScheduler, width does not match the width of the content. */
}

.alert_window_message_no_wrap {
    text-align: left;
    font-weight: normal;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*************************/
/*  General Info Style   */
/*************************/

/* 13/08/2026 - CMS - The info window was the odd one out: a 100px icon in a col-md-3 column, with no
   vertical centring, so the icon drove the row height and the message sat cramped beside it. Matched to
   the success window, whose 90px icon in col-md-2 with a centred row already reads correctly. */
.general_info_window .info_icon {
    font-size:90px; color:#3c9cff;
}

.general_info_window div:first-child[class^="col"] {
    display: flex;
    align-items: center;
}

.info_window_message,
.info_window_content {
    text-align: left; font-weight: bold; font-size: 16px;
}

/****************************/
/*  General Warning Style   */
/****************************/

.general_warning_window .warning_icon {
    font-size: 100px;
    color: #f39c12;
}

.warning_window_message,
.warning_window_content {
    text-align: left; font-weight: bold; font-size: 16px;
}

/***********************************/
/*  General Success Window Style   */
/***********************************/

.general_success_window .success_icon {
    font-size:90px; color:#009900;
}

.general_success_window div:first-child[class^="col"]{
    display: flex;
    align-items: center;
}


.success_window_message,
.success_window_content {
    text-align: left; font-weight: bold; font-size: 16px;
}

/***********************************/
/*  General Question Window Style  */
/***********************************/

.general_question_window .question_icon {
    font-size: 48px;
    color: #3c9cff;
    line-height: 1;
    display: inline-block;
}

.question_window_message,
.question_window_content {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}

/***************************************/
/*  Processing Animation for Windows   */
/***************************************/
.processing_box {
    background-color: #1a72c7;
    width: 100%;
    height: 100%;
    min-height: 100%;
    /*background-image: url('/Assets/img/loading_ascora_box.png');*/
    /*background-image: var(--svg-waves-ascora-1);*/
    background-image: var(--svg-waves-processing-1);

    -ms-background-size: cover;
    background-size:cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10100;
    border-radius:0px;
}

/* fixed position for mobiles so that the loadings window fills the screen */
.processing_box.processing_mobile {
    background-color: #1a72c7;
    width: 100%;
    height: 100%;
    min-height:100%;
    background-image: url('/Assets/img/loading_ascora_box.png');
    -ms-background-size: 100% 100%;
    background-size: 100% 100%;
    position:fixed;
    top:0;
    right:0px;
    bottom:0px;
    left:0;
    z-index: 10100;
}

.processing_box .logo_box {
    margin-top:-30px;
}

.processing_box .processing_table {
    display: table;
    width: 100%;
    height: 100%;
}

.processing_box .processing_table .processing_cell {
    display:table-cell;
    vertical-align:middle;
}

.processing_box p{ 
    font-size:16px;
}

.processing_box .loading_logo {
    background-image:url('/Assets/img/loading_ascora_logo.png');
    background-size: 100% auto;
    background-repeat:no-repeat;
    display: block;
    margin: auto;
    width: 263px;
    height: 37px;
    vertical-align:middle;
}

.processing_box .loading_logo_gear_outer {
    width:130px;
    height:60px;
    overflow:hidden;
    margin:auto;
    position: relative;
    left:8px;
}

.processing_box .loading_logo_gear_outer .fa-spin{
    animation: fa-spin 3.8s infinite linear;
}

.processing_box .loading_logo_gear_inner {
    background-image:url('/Assets/img/loading_ascora_cog.png');
    background-repeat:no-repeat;
    width:130px;
    height:130px;
    background-size:100% 100%;
}

.processing_box .loading_msg {text-align:center;color:#ffffff;margin-top:30px;}

#ascLoadWindow{border-radius: 20px;}

div.k-window[aria-labelledby="ascLoadWindow_wnd_title"] {
    border: 0px;
    outline: 8px solid rgba(186, 218, 253, 0.8);
    box-shadow: 5px 5px 22px -1px rgba(0, 0, 0, 0.3) !important;
    border-radius: 20px;
}

/***************************/
/*       Loading Box       */
/***************************/
/*ShowAscLoad()*/
.ascora_loading_box {
    background-color: #ffffff;
    margin: 60px auto 60px auto;
    width: 360px;
    height: 380px;
    background-image: url('/Assets/img/loading_ascora_box.png');
}

.ascora_loading_box p{ 
    font-size:16px;
}

.ascora_loading_box .loading_logo {
    background-image:url('/Assets/img/loading_ascora_logo.png');
    background-size: 100% auto;
    display: block;
    margin: auto;
    width: 263px;
    height: 37px;
}

.ascora_loading_box .loading_logo_gear_outer {
    width:130px;
    height:60px;
    overflow:hidden;
    margin:auto;
    position: relative;
    left:8px;
}

.ascora_loading_box .loading_logo_gear_outer .fa-spin{
    animation: 3.8s linear 0s normal none infinite running fa-spin;
}

.ascora_loading_box .loading_logo_gear_inner {
    background-image:url('/Assets/img/loading_ascora_cog.png');
    width:130px;
    height:130px;
    background-size:100% 100%;
}

.ascora_loading_box .loading_msg {
    text-align:center;
    color:#ffffff;
    margin-top:40px;
}

.introjs-tooltip {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(232, 234, 237);
    border-radius: 8px;
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
    padding: 15px 15px;
}

.introjs-helperLayer {
    outline: 3px solid var(--accent-color-1);
    border-radius: 6px;
    box-shadow: 6px 8px 4px -1px rgba(0, 25, 73, 0.40);
}

.introjs-helperNumberLayer {background-color: #dc3545 !important}

.introjs-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff !important;
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
    letter-spacing: normal;
    border-radius: var(--button-radius);
}

.introjs-tooltipbuttons .introjs-prevbutton {font-family: var(--modern-font-body); margin-right:5px;}

.introjs-tooltipbuttons {display:flex}
.introjs-tooltipbuttons .introjs-skipbutton{margin-right:auto}

/***************************/
/*      Loading Input      */
/***************************/
.input-waiting {
    background: url('https://kendo.cdn.telerik.com/2016.3.914/styles/Flat/loading-image.gif') no-repeat right center;
    background-size: auto 90%
}

/***************************/
/*          Tour           */
/***************************/

/*.intro_box {
    width:300px;
    height:auto;
    background-image:url('/Assets/img/loading_ascora_box.png');
}

.intro_box .intro_logo {
    display:block;
    padding-top:20px;
}

.intro_box .intro_logo img{
    display:block;
    width: 80%;
    height: auto;
    margin:auto;
}

.intro_box .intro_content {
    display:block;
    padding:20px 20px 30px 20px;
    font-family: 'roboto',sans-serif;
    font-size:15px;
    color:#ffffff;
}*/

.intro_box {
    width:300px;
    height:auto;
    background-image:var(--svg-waves-ascora-1);
    background-size:cover;
}

.intro_box .intro_logo {
    display:block;
    padding-top:20px;
}

.intro_box .intro_logo img{
    display:block;
    width: 60%;
    height: auto;
    margin:auto;
}

.intro_box .intro_content {
    display:block;
    padding:20px 20px 30px 20px;
    font-family: var(--modern-font-body);
    font-size:16px;
    color:#ffffff;
}

.introjs-tooltip {border-radius:6px;}

.introjs-tooltip,
.introjs-tooltiptext {
    font-family: var(--modern-font-body);
    font-size: 16px;
    letter-spacing:normal;
}



/***************************/
/*    Background Colours   */
/***************************/
.bg-ascora-grey {
    background-color: var(--primary-bg-subtle) !important;
    color: #37474f;
}

.bg-ascora-grey.callout {
    font-size:0.95em;
    font-weight:400;
    border:1px solid var(--primary-border-subtle);
    border-left: 5px solid var(--primary-border-dark);
    margin-bottom:0px;
    border-radius:8px;
    box-shadow:none;
}

.bg-ascora-grey.callout a {
    color: #3c8dbc;
    text-decoration: underline;
}

.callout-email-connection {
    display: inline;
    font-weight: 500;
    font-size: 1.1rem;
    font-style: italic;
    color: #9f5fe6;
}

/***************************/
/*        Messages         */
/***************************/
.message_box {
    padding:10px;
}

.text-primary {
    font-weight:600;
}

/**************************************/
/*  kendo Notification Success Template  */
/**************************************/

/*was upload_success_box, renamed to notification box so that it is more generic*/

.notification_box {display:table; min-height:100px;}
.notification_box .box_icon {display:table-cell; width:10%}
.notification_box .box_icon i{font-size:30px; vertical-align:middle; padding-right:10px;}
.notification_box .box_message {display:table-cell; width:90%}
.notification_box .box_message h3{margin:0px; padding:0px;}


/***************************/
/*    Google Autocomplete  */
/***************************/

/* Added due to modal dialog hiding Google Autocomplete */
.ui-autocomplete {
    z-index: 20000 !important;
}

.pac-container {
    z-index: 20000 !important;
}


/**********************************************
    Bootstrap Override 
**********************************************/

/*Low profile version of the modal footer*/
.modal-footer {
    padding-top:10px;
    padding-bottom:10px;
}

/***************************/
/*      Tab Badges         */
/***************************/

.tab_badge {
   width:40px;
   margin-left:-20px;
   position:absolute;
   top:31px;
   left:50%;
   pointer-events: none;
   font-size:12px;
   line-height:12px;
   padding: 2px 0;
}

.badge_inline {
   height:15px;
   width:40px;
   pointer-events: none;
   display:inline-block;
}

/***************************/
/*    Sortable Handler     */
/***************************/
.sortable_handler .item {
    background-color:transparent;
    border-radius: 3px;
    font-size: 1.3em;
    line-height: 2.5em;
}

.sortable_handler .handler {
    display: inline-block;
    width: 30px;
    border-radius: 3px 0 0 3px;
    background: url('/Assets/img/handle.png') no-repeat 50% 50% #ccc;
    cursor: move;
}

.sortable_handler .handler:hover {
    background-color: #2db245;
}

/****************************/
/*         Nav Tabs         */
/****************************/
.nav_tabs_ascora {
    margin-bottom:0px;
}
.nav_tabs_ascora .nav > li > a{
    padding-top:10px;
    padding-bottom:18px;
}

/****************************/
/* jQuery Datatable Styling */
/****************************/
.dataTables_length select {

}

/***************************/
/* Horizontal Menu Toggle  */
/***************************/
.main-header .horizontal_nav_toggle {
    background-color: transparent;
    background-image: none;
    float: left;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 600;
    padding: 15px;
    color:#fff;
}

.main-header .horizontal_nav_toggle::before {
    content: "\f0c9";
}
.main-header .horizontal_nav_toggle:hover {
    color: #fff;
}
.main-header .horizontal_nav_toggle:focus, .horizontal_nav_toggle .sidebar-toggle:active {
    background: transparent none repeat scroll 0 0;
}
.main-header .sidebar-toggle .icon-bar {
    display: none;
}

/**************************/
/*    Metro Header Box    */
/**************************/
.metro_header_box {margin-bottom:30px;}
.metro_header_box .header_title {
    color:#333; 
    font-family: "roboto",sans-serif;
    font-size:24px;
    font-weight: 500;
    display:inline-block;
}

.metro_header_box .header_action_buttons {margin-top:88px;}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .box-title {
    font-size: 18px;
    font-weight:400;
}

.page-box-title {
    font-size: 24px;

}

.box-title {
    font-size: 20px;
    font-weight: 400;
    color:#455a64;
}

/**************************/
/*    Custom Boxes        */
/**************************/
.box_custom_01 {
    border-top:1px solid #d2d6de;
    border:1px solid #d2d6de;
    box-shadow:none;
}

.box_custom_01 .box-header{
    padding:6px;
}

.box_custom_01 .box-header.with-border {
    border-bottom:1px solid #d2d6de;
}


.box_custom_01 .box-header .box-title{
    font-size:16px;
    font-weight:400;
}

/**************************/
/*    Box Status          */
/**************************/
.box_status_bar {

}

/**************************/
/*      Main Headings     */
/**************************/
/*.ascora_content_header {
    margin-top:4px;
    margin-bottom:18px;
    overflow:auto;
    padding-top: 6px;
    padding-bottom: 6px;
}*/

/*.ascora_content_header {
    margin-top:4px;
    margin-bottom:18px;
    padding-top: 6px;
    padding-bottom: 6px;
}*/

.ascora_content_header {
    margin-top:0px;
    margin-bottom:16px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora_content_header:before,
.ascora_content_header:after {
    content: " "; display: table;
}

.ascora_content_header:after {
    clear:both;
}

.ascora_content_header h1, .ascora_content_header h2, .ascora_content_header h3{
    font-size: 28px;
    padding:0px; 
    margin:0px;
}

.ascora_content_header .fa {
    padding-right:5px;
}

.ascora_content_header .btn .fa {
    padding-right:0px;
}

/*.main-header > .navbar.navbar-admin {
    background-color: #455a64;
}

.main-header > .navbar.navbar-admin > .logo,
.main-header > .navbar.navbar-admin > .btn_tour {
    background-color: #263238;
}*/

/**************************/
/*    Box Title Large     */
/**************************/
.box_title_large {

}

/**************************/
/* Custom Horizontal Menu */
/**************************/

/* Place 9th menu item on a new line */
.navigation-menu li:nth-child(9) { clear:both }

/*#topnav .navbar-custom {height:88px;}*/

/* Override Custom Horizontal Menu */
/* Slide menu up when topnav_collapse class is added to the body*/
/*body #topnav {
    position:absolute;
    -webkit-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    -o-transform: translate(0, 50px);
    transform: translate(0, 50px);

    z-index: 850;
    transition: all 0.5s ease 0s;
}

body.topnav_collapse #topnav {
    position:absolute;
    -webkit-transform: translate(0px, -38px);
    -ms-transform: translate(0px, -38px);
    -o-transform: translate(0px, -38px);
    transform: translate(0px, -38px);

    z-index: 850;
}*/


/*body #topnav {
    position:relative;
    display:block;
    z-index: 850;
}*/

/*
body.topnav_collapse #topnav {
    position:relative;
    display:none;
    z-index: 850;
}
*/


/* Override AdminLTE Menu */
/* Remove Additional space from the header when the menu slides up */

/*body.topnav_collapse .content-wrapper {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);

    transition: all 0.5s ease 0s;
}

.content-wrapper {
    -webkit-transform: translate(0px, 88px);
    -ms-transform: translate(0px, 88px);
    -o-transform: translate(0px, 88px);
    transform: translate(0px, 88px);

    transition: all 0.5s ease 0s;
}*/

/************************************/
/* Adjust Glyphs in Horizontal Menu */
/************************************/
#topnav .navigation-menu > li .submenu li a .fa{margin-right:5px;font-size:15px;}
#topnav .navigation-menu > li .submenu li a .far{margin-right:5px;}
#topnav .navigation-menu > li .submenu li a .fas{margin-right:5px;}

/**************************/
/*      User Header       */
/**************************/
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    padding-top:20px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header .fa{
    color:#ffffff;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header p small{
    font-size:22px;
}

/**************************/
/*     Navbar Menus       */
/**************************/
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
    margin-left:0px; 
}
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
    margin-left:0px;
    font-size:15px;
    color:#72afd2;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
    color:#ffffff;
    background-color:#0d56a5;
    font-size:18px;
    padding: 6px 10px;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a, 
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a, 
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
    font-size:14px;
    background-color:#0d56a5!important;
    border-color:#367fa9!important;
    color:#ffffff!important;
}


/***********************************/
/*  Import Result Navigation       */
/***********************************/
/*.import_result_nav {}
.import_result_nav .tab_error {background-color:#dd4b39!important; color:#fff!important;}
.import_result_nav .tab_success {background-color:#00c0ef!important; color:#fff!important;}*/

.nav-tabs > li > a.tab_error {background-color:#90A4AE; color:#fff; border:1px solid #90A4AE;}
.nav-tabs > li > a.tab_error:hover {background-color:#607D8B; color:#fff; border:1px solid #607D8B;}
.nav-tabs > li.active > a.tab_error,
.nav-tabs > li.active > a.tab_error:hover,
.nav-tabs > li.active > a.tab_error:focus {background-color:#dd4b39; color:#fff; border:1px solid #dd4b39;}

.nav-tabs > li > a.tab_success {background-color:#90A4AE; color:#fff; border:1px solid #90A4AE;}
.nav-tabs > li > a.tab_success:hover {background-color:#607D8B; color:#fff; border:1px solid #607D8B;}
.nav-tabs > li.active > a.tab_success,
.nav-tabs > li.active > a.tab_success:hover,
.nav-tabs > li.active > a.tab_success:focus {background-color:#00c0ef; color:#fff; border:1px solid #00c0ef;}

/***********************************/
/*  Change Width of Dropdown Menu  */
/***********************************/

#topnav .navigation-menu > li .submenu.submenu_categories {
    background-color: #ffffff;
    border: 1px solid #e7e7e7;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    left: -600px;
    list-style: outside none none;
    min-width: 700px;
    opacity: 0;
    padding: 15px 0;
    position: absolute;
    top: 100%;
    transition: all 0.2s ease 0s;
    visibility: hidden;
    z-index: 1000;
}

#topnav .navigation-menu > li .submenu.submenu_categories .box-header{
    padding:6px;
}

#topnav .navigation-menu > li .submenu li a{
    padding:6px 25px;
}


/***********************************/
/*  Dropdown Menu - Sub Menu       */
/***********************************/

#topnav .navigation-menu > li .submenu .subtitle {
    background-color:#eaeaea; padding:5px; font-size:14px;
}

#topnav .navigation-menu > li .submenu .box_automation {
    
}
#topnav .navigation-menu > li .submenu .box_automation li a {
    font-size:12px;
    padding:6px 12px;
}

#topnav .navigation-menu > li .submenu .box_automation li a small{
    font-size:10px;
}

/*********************************/
/* WINDOW: Activity Feed List    */
/*********************************/
.activity_feed_container {height:100%; overflow-y:scroll}
.activity_feed_container .header{
    background-color:#3c8dbc; 
    padding:10px; 
    font-size:22px; 
    font-weight:500; 
    color:#ffffff; 
    display:block; 
    width:100%;
    height:52px;
}
.activity_feed_container ul {margin-left:0px; padding-left:0px; height:100%;}
.activity_feed_container ul li{text-decoration:none; list-style:none; padding:10px; border-top:1px solid #f4f4f4}
.activity_feed_container ul li:nth-of-type(2n+1) {background-color:#f9f9f9;}

.activity_feed_container .activity_item_content h4 {font-size:15px; margin-bottom:3px;}
.activity_feed_container .activity_item_content p {font-size:15px;}


/******************************/
/* MENU: Activity Feed List   */
/******************************/
.activity_feed_menu_container ul li{border-top:1px solid #f4f4f4}
.activity_feed_menu_container ul li:nth-of-type(2n+1) {background-color:#f9f9f9;}

.activity_feed_menu_container .activity_item_content {
    width:100%; 
    padding:10px; 
    display:table; 
    clear:both
}

.activity_feed_menu_container .activity_item_content h4 {font-size:15px; margin-bottom:0px;}
.activity_feed_menu_container .activity_item_content p {font-size:15px;}

/*Resize Activity Feed*/
.navbar-nav > .messages-menu > .dropdown-menu.dropdown_activity_feed {
    width:380px;
}
.navbar-nav > .messages-menu > .dropdown-menu.dropdown_activity_feed > li .menu {
    max-height:350px;
}
.navbar-nav > .messages-menu > .dropdown-menu.dropdown_activity_feed .footer {

}

/******************************/
/* MENU: Tutorial Help Guides */
/******************************/
.menu_tutorial_guides li a{padding:10px;}

/*****************/
/* History grid */
/****************/

.history_attachment {
    display: inline-block;
    padding: 4px 8px;
    background-color: #eceff1;
    font-weight:normal;
}

.history_attachment a{
    color:#37474f;
    font-weight:normal;
}

.history_attachment a:hover{
    color:#546e7a!important;
    font-weight:normal!important;
}

.history_attachment:first-child {
    margin: 0 3px 0 0;
}

.history_item {}
.history_item .history_actions{border-bottom:1px dashed #cccccc; border-top:1px dashed #cccccc; padding:10px; display: flex; flex-wrap:wrap; gap: 0.3em}
.history_item .history_details{margin-top:10px; margin-bottom:10px;}
.history_item .attachment_wrapper {background-color:#90a4ae; padding:4px; display:inline-block; margin-right:5px;}

/*prevents hilighing on the history links when hovering over a row*/
.k-grid .k-grid-content tr:hover .history_attachment a{color:#37474f; font-weight:normal!important}

.k-grid .k-grid-content tr .history_attachment a {font-weight:normal!important}


/****************************/
/* Using menu with intro js */
/****************************/
/* allow menu to be opened using the open class*/
#topnav .navigation-menu > li .submenu.submenu_categories.open {
    margin-left: 0;
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    z-index:1000000!important;
}

/*adjust zindex for dropdown menus*/
/*#topnav .navigation-menu .introjs-fixParent {
    z-index:1000000!important;
}

#topnav .navigation-menu .introjs-showElement {
    z-index: 999999 !important;
}

.introjs-helperLayer {
    z-index: 9999999 !important;
    background-color:transparent!important;
}*/

/*.submenu_categories.introjs-fixParent {
    z-index:10000000!important;
}*/
.email_connection_btns .btn-primary {background-color:#247ba8;border-color:#00628d;}
.email_connection_btns .btn-primary.active{background-color:#00a8e1;}
.email_connection_btns .btn-primary [class^="fa"]:first-child {display:none;padding:0px;margin:0px;}
.email_connection_btns .btn-primary.active [class^="fa"]:first-child{display:inline-block;}

/******************************/
/* JOB MAP                    */
/******************************/
.job_map_content .map_filters {}
.job_map_content .map_filters .btn-group .btn{font-size:var(--font-size-default); padding:5px 10px;}

.job_map_content .map_filters .filter_dropdowns {}
.job_map_content .map_filters .filter_dropdowns .form-group{font-size:var(--font-size-default)}
.job_map_content .map_filters .filter_dropdowns .form-group .k-dropdown{}

.job_map_content .map_filters .btn-primary{background-color:#247ba8;border-color:#00628d;}
.job_map_content .map_filters .btn-primary.active{background-color:#00a8e1;}
.job_map_content .map_filters .btn-primary [class^="fa"]{display:none;padding:0px;margin:0px;}
.job_map_content .map_filters .btn-primary.active [class^="fa"]{display:inline-block;}

.job_map_content .job_list {height:100%; overflow-y:scroll}

/*Modernisation*/
/*Adjust info-box to show job data*/
.ascora-blue .job_map_content .job_list .info-box .info-box-icon {line-height:16px; font-size:16px;}
.ascora-blue .job_map_content .job_list .info-box .info-box-icon .job_number_text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 12px;
    word-wrap:break-word;
    word-break:break-all;
}

.ascora-blue .job_map_content .job_list .info-box {height:90px; overflow:hidden}

.ascora-blue .job_map_content .job_list .info-box .info-box-icon .job_status_text {
    color:#ffffff;
    font-size: 14px;
    word-wrap:break-word;
    word-break:break-all;
}

.ascora-blue .job_map_content .job_map {height:100%}
.ascora-blue .job_map_content .job_map .mapPlaceHolder{height:100%}

.ascora-blue .job_map_content .job_item_box .info-box-content .info-box-text{white-space:normal; word-wrap: break-word;}
.ascora-blue .job_map_content .job_item_box .info-box-content .info-box-text{font-size:14px; color:var(--text-color)!important}
.ascora-blue .job_map_content .job_item_box .info-box-content .info-box-text:first-child {margin-bottom:3px;}
.ascora-blue .job_map_content .job_item_box .info-box-content .info-box-text:first-child b{font-size:16px; margin-bottom:3px; font-weight:600}

.ascora-blue .job_list .job_item_link .info-box.booked {background-color: var(--status-green);}

.ascora-blue .job_map_content .map_filters .btn-group .btn {
    color: var(--primary-color)!important;
    background-color: var(--toggle-color-blue-pastel-default);
    border:1px solid var(--toggle-border-blue-pastel-default);

    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

.ascora-blue .job_map_content .map_filters .btn-group .btn.active{
    color: #ffffff!important;
    background-color: var(--toggle-color-blue-pastel-active) !important;
    box-shadow: var(--elevation-8) !important;
    background-image:none !important;
}

.ascora-blue .job_map_content .map_filters .btn-group .btn i[class^="fa"]{
    line-height:inherit;
}


/*******************************/
/* JOB MAP: INFO WINDOW        */
/* (When clicking on job pins) */
/*******************************/
/*.infoWindow {
    width: 250px;
    height: 95px;
    border: 2px solid #01579b;
    border-radius: 6px;
    background: white;
    margin: 7px 0px 0px 0px;
}
.infoWindow a:link {text-decoration: none;}
.infoWindow .cat{font-size:14px; line-height:18px; color:#0288D1; display:block; padding:5px 0px 0px 10px; margin:0px 0 0 0; font-weight:600; font-family: 'roboto',sans-serif}
.infoWindow .subCat{font-size:12px; color:#455a64; display:block; padding:5px 0px 0px 10px; margin:0px; font-weight:400; font-family: 'roboto',sans-serif }
.infoWindow .location{font-size:11px; color:#455a64; display:block; padding:0px; margin:0px; font-weight:normal !important;}
.infoWindow .date{font-size:10px; color:#455a64; display:block; padding:0px; margin:2px 0px 0px 0px }
.infoWindow .infoImg{font-size:9px; color:#455a64; width:60px; height:60px; float:left; margin: 10px 10px 0 10px; border:0px}*/


/*Fix for non clickable links, applies z-index directly to the close button instead of the info window*/
img:has(+div.infoWindow) {
    z-index: 100;
}

.infoWindow {
    width: 250px;
    min-height: 95px;
    font-family: var(--modern-font-body);
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(232, 234, 237);
    border-radius: 8px;
    color: #293951;
    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
    padding: 10px 5px 20px 5px;
    font-weight: 500 !important;
    position:relative;
}

.infoWindow a:link,
.infoWindow .cat,
.infoWindow .subCat,
.infoWindow .location,
.infoWindow .date,
.infoWindow .infoImg {font-family: var(--modern-font-body);}

.infoWindow a:link {text-decoration: none;}
.infoWindow .cat{font-size:14px; line-height:18px; color:#007ee6; display:block; padding:5px 0px 0px 10px; margin:0px 0 0 0; font-weight:600; }
.infoWindow .subCat{font-size:14px; color:#293951; display:block; padding:5px 0px 0px 10px; margin:0px; font-weight:400;}
.infoWindow .location{font-size:14px; color:#293951; display:block; padding:0px; margin:0px; font-weight:normal !important;}
.infoWindow .date{font-size:14px; color:#293951; display:block; padding:0px; margin:2px 0px 0px 0px }
.infoWindow .infoImg{font-size:14px; color:#293951; width:60px; height:60px; float:left; margin: 10px 10px 0 10px; border:0px}

/******************************/
/* JOB MAP: STATUS COLOURS    */
/******************************/

/*.job_list .info-box {box-shadow:none; margin-bottom:10px}

.job_list .info-box.not_scheduled .info-box-icon{background-color:#f07220}
.job_list .info-box.booked .info-box-icon{background-color:#48891c}
.job_list .info-box.in_progress .info-box-icon{background-color:#4595c9}
.job_list .info-box.completed .info-box-icon{background-color:#434343}

.job_list .info-box.not_scheduled {background-color:#f1f1f1;}
.job_list .info-box.booked {background-color:#f1f1f1}
.job_list .info-box.in_progress {background-color:#f1f1f1}
.job_list .info-box.completed {background-color:#f1f1f1}*/

.job_list .info-box.not_scheduled {background-color:#f07220}
.job_list .info-box.booked {background-color:#48891c}
.job_list .info-box.in_progress {background-color:#4595c9}
.job_list .info-box.completed {background-color:#434343}


/************************/
/* fix button position  */
/************************/
/*.button_group_cell .button_pos_delete {position:absolute; top:5px; right:170px}
.button_group_cell .button_pos_save {position:absolute; top:5px; right:320px}
.button_group_cell .button_pos_close {position:absolute; top:5px; right:0px}
.button_group_cell .button_close_job {position:absolute; top:5px; right:0px}
.button_group_cell .button_cancel {position:absolute; top:5px; right:50px}*/

/*************************/
/* Info Box: Header Box  */
/*************************/

/* Allow header box to expand vertically incase the names wrap multiple lines.
   width:100% because display:table otherwise shrinks to fit its content and
   the header stops short of the column's right edge on wide screens. */
.header_box {display:table; width:100%}
.header_box .info-box-icon{display:table-cell; float:none; vertical-align:middle}
.header_box .info-box-content {
    display:table-cell;             
    vertical-align:top; 
    height:auto;
    /*overflow:hidden;*/ /*removed for bulk action dropdown, double check removing this doesn't have side effects*/
}

.info-box-text {white-space:wrap}

.header_box .info-box-text{font-size:18px; margin-top:5px; word-break:break-word}
.header_box .button_group {margin-top:42px}
.header_box .job_status_text {font-size:18px; word-break:break-word}
.header_box .job_section_text {font-size:18px; word-break:break-word}

.header_box .button_group_table {display:table; width:100%; height:90px}
.header_box .button_group_table .button_group_cell{display:table-cell; height:90px; vertical-align:middle; text-align:right;}
.header_box .button_group_table .btn {margin-top:3px; margin-bottom:3px;}

.scheduler_header .info-box { min-height: 0;}
.scheduler_header .header_box {display:table}
.scheduler_header .header_box .info-box-text{vertical-align:middle; line-height:50px; margin-top:0px; font-family:'Open Sans',sans-serif; font-size:20px; font-weight:normal;}

.scheduler_header .header_box .info-box-icon{display:table-cell; float:none; vertical-align:middle; line-height:50px; width:50px; height:50px; font-size:26px;}
.scheduler_header .header_box .info-box-content {display:table-cell; vertical-align:middle; height:auto; overflow:hidden;}

.scheduler_header .header_box .button_group {margin-top:42px}
.scheduler_header .header_box .job_status_text {font-size:18px;}
.scheduler_header .header_box .job_section_text {font-size:18px;}

/*.scheduler_header .header_box .button_group_table {display:table; width:100%; height:auto}*/
.scheduler_header .header_box .button_group_table {display:table; height:auto; width:auto}
.scheduler_header .header_box .button_group_table .button_group_cell{display:table-cell; height:50px; vertical-align:middle; text-align:right;}
.scheduler_header .header_box .button_group_table .btn {margin-top:3px; margin-bottom:3px;}

/*.scheduler_header .header_box .filter_group_table {display:table; width:100%; height:auto}*/
.scheduler_header .header_box .filter_group_table {display:table; height:auto; width:auto}
.scheduler_header .header_box .filter_group_table .filter_group_cell{display:table-cell; height:50px; vertical-align:middle; text-align:left;}


/*************************/
/* Small Header          */
/*************************/

.small_header .info-box { min-height: 0;}
.small_header .header_box {display:table}
.small_header .header_box .info-box-text{vertical-align:middle; line-height:50px; margin-top:0px; font-family:'Open Sans',sans-serif; font-size:20px; font-weight:normal;}
.small_header .header_box .info-box-text-multi-line{vertical-align:middle; line-height:normal; margin-top:0px; font-family:'Open Sans',sans-serif; font-size:20px; font-weight:normal;}

.small_header .header_box .info-box-icon{display:table-cell; float:none; vertical-align:middle; line-height:50px; width:50px; height:50px; font-size:26px;}
.small_header .header_box .info-box-content {display:table-cell; vertical-align:middle; height:auto; overflow:hidden;}

.small_header .header_box .button_group {margin-top:42px}
.small_header .header_box .job_status_text {font-size:18px;}
.small_header .header_box .job_section_text {font-size:18px;}
.small_header .header_box .total_text {font-size:16px;}

.small_header .header_box .button_group_table {display:table; height:auto; width:auto}
.small_header .header_box .button_group_table .button_group_cell{display:table-cell; height:50px; vertical-align:middle; text-align:right;}
.small_header .header_box .button_group_table .btn {margin-top:3px; margin-bottom:3px;}

.small_header .header_box .filter_group_table {display:table; height:auto; width:auto}
.small_header .header_box .filter_group_table .filter_group_cell{display:table-cell; height:50px; vertical-align:middle; text-align:left;}

.alert_job_info {width:460px; margin-bottom:10px; padding:10px; margin:10px 0px; display:block}

/*************************/
/* Info Box: Report      */
/*************************/

.report_item_box {
    display:table;
    margin-bottom:5px;
    cursor:pointer;
    min-height:80px;
}

.report_item_box .info-box-content {display:table-cell; vertical-align:top; height:auto; overflow:hidden;}

.report_item_box .info-box-icon{
    display:table-cell; 
    float:none; 
    vertical-align:middle;
    width:80px;
    height:80px;
    line-height:80px;
    font-size:40px;
}

/*.report_item_box:hover .info-box-icon,
.report_item_box:active .info-box-icon
{
    background: rgba(0, 0, 0, 0.5);
}

.report_item_box:hover .info-box-content,
.report_item_box:active .info-box-content
{
    background: rgba(0, 0, 0, 0.2);
}

.report_item_box.selected .info-box-icon{
    background: rgba(0, 0, 0, 0.5);
}

.report_item_box.selected .info-box-content{
    background: rgba(0, 0, 0, 0.2);
}*/

.report_item_box h4 {
    margin-top:4px;
    margin-bottom:5px;
}

.report_item_box p {
    margin-bottom:0px;
}

/******************************/
/* Info Box: Job List         */
/******************************/

/* Allow header box to expand vertically incase the names wrap multiple lines*/
.job_item_box {display:table; margin-bottom:10px;box-shadow:5px 5px 6px -6px rgba(0, 0, 0, 0.6)}
.job_item_box .info-box-icon{display:table-cell; float:none; vertical-align:middle}
.job_item_box .info-box-content {display:table-cell; vertical-align:top; height:auto; overflow:hidden;}

.job_item_box .info-box-icon
{
    color:#ffffff;
    background: rgba(0, 0, 0, 0.0);
}

.job_item_box .info-box-content
{
    color:#3f3f3f;
    background-color:#f1f1f1;
}

a.job_item_link.active .job_item_box .info-box-icon,
a.job_item_link:hover .job_item_box .info-box-icon,
a.job_item_link:active .job_item_box .info-box-icon
{
    color:#ffffff;
    background: rgba(0, 0, 0, 0.2);
}

a.job_item_link.active .job_item_box .info-box-content,
a.job_item_link:hover .job_item_box .info-box-content,
a.job_item_link:active .job_item_box .info-box-content
{
    color:#3f3f3f;
    background: rgba(255, 255, 255, 0.8);
}

/***************************/
/* Info Box: Statement Box */
/***************************/

/* Allow header box to expand vertically incase the names wrap multiple lines*/
.statement_box {display:table}
.statement_box .info-box-icon{display:table-cell; float:none; vertical-align:middle}
.statement_box .info-box-content {display:table-cell; vertical-align:top; height:auto; overflow:hidden;}

.statement_box.info-box .header_title {
    color:#333; 
    font-family: "roboto",sans-serif;
    font-size:24px;
    font-weight: 500;
    margin-top:5px;
    margin-bottom:5px;
    display:block;
}

.statement_box.info-box .address_txt {
    color:#333; 
    font-family: "roboto",sans-serif;
    font-size:18px;
    font-weight: 500;
    margin:0px;
    display:block;
}

/********************************/
/*     Admin LTE Overrides      */
/********************************/
.main-header {max-height:inherit}
.page-header {border-bottom:1px solid #cccccc; font-size: 20px; font-weight:400; color:#455a64}

b, strong {
    font-family: 'roboto',sans-serif;
    font-weight: 600;
}

/*body {
    font-family: 'Open Sans',sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Open Sans',sans-serif;
}*/

body {
    font-family: 'roboto',sans-serif;
    font-weight:300;
    color:#263238;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'roboto',sans-serif;
}

.nav-tabs-custom > .nav-tabs {
    border-bottom-color:#d2d6de;
}

.nav-tabs-custom > .nav-tabs > li {
    border-top:3px solid transparent;
}

.nav-tabs-custom > .nav-tabs > li > a {
    color:var(--text-color);
    font-weight:400;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
    color:var(--accent-color-1);
    font-weight:500;
}

.nav-tabs-custom > .nav-tabs > li.active a {
    color:var(--text-color);
    font-weight:500;
    border-left-color:#d2d6de;
    border-right-color:#d2d6de;
}

.nav-tabs-custom > .nav-tabs > li.active a:hover {
    color:var(--text-color);
    font-weight:500;    
}

.nav-tabs-custom > .nav-tabs > li a:hover {
    cursor: pointer;
}

.box.box-solid > .box-header .btn.btn-default {
  background-color:#f4f4f4;
  color:#444;
  border-color:#ddd;
}

.box.box-solid > .box-header .btn:hover,
.box.box-solid > .box-header a:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Buttons */

.btn-danger
{
    background-color: #d15445;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.hover
{
    background-color: #ca4332;
}

/* Tour Button*/
.btn_tour,
.btn_tour:link
{
    background-color: #0d56a5;
    color:#ffffff;
}

.btn_tour:hover, 
.btn_tour:active
{
    background-color: #04448e;
    color:#ffffff;
}

/* Sample Data Button*/
.btn_sample_data,
.btn_sample_data:link
{
    border-radius: 6px;
    background-color: #1ea9ff!important;
    color:#ffffff!important;
    min-width:200px;
    width:100%;
}

.btn_sample_data:hover, 
.btn_sample_data:active
{
    border-radius: 6px;
    background-color: #0392ea!important;
    color:#ffffff!important;
    min-width:200px;
    width:100%
}

.btn_download_guide,
.btn_download_guide:link
{
    border-radius:var(--button-radius);
    width:100px; background-color:var(--primary-color); padding:10px; text-align:center; cursor:pointer; border:1px solid #3c8dbc; color:#ffffff;
}

.btn_download_guide:hover,
.btn_download_guide:active
{
    border-radius:var(--button-radius);
    width:100px; background-color:var(--primary-color); padding:10px; text-align:center; cursor:pointer; border:1px solid #3c8dbc; color:#ffffff;
    background-image:var(--tint-dark-1);
}

.btn_download_guide .fa{
    font-size:20px;
}

.k-grid td {
    padding: 0.8em 0.6em;
}

/********************************/
/*     Default Box Height       */
/********************************/
.default_box_height .box-body{
    height:400px;
}

/* Custom padding for Kit Pricing Box*/
.box-body .kit_pricing_padding {
    padding: 10px 60px 10px 60px;
}


/*Set Grid Heights to a percentage*/
#creditNoteGrid
{
    height: 100%; /* DO NOT USE !important for setting the Grid height! */
}

/*************************/
/*  Kits: Kit Breakdown  */
/*************************/
.kitbreakdown.well {
    margin-bottom:0px;
}

/************************************/
/*  Custom Box (Replicates Legend)  */
/************************************/
.box.custom_box {
    background-color:#f8f9fa;
    box-shadow:none;
    border:1px solid #e2e9f0 !important;
    margin-bottom:0px;
}

.box.custom_box .box-header {
    border-bottom:1px solid #d2d6de;
}

/************************/
/*  Contract Customers  */
/************************/
.contract_customers_box_outer {

}

.contract_customers_box_outer .box_inner{
    float:left;
    width:45%;
}

.contract_customers_box_outer .commands{
    float:left;
    width:10%;
    text-align:center;
    margin-top:70px;
}

.contract_customers_box_outer .commands .btn{
    margin-bottom:5px;
}


/**********************/
/*    Control Set     */
/**********************/
.jobControlSet01 {}
.jobControlSet01 .k-multiselect{display:inline-block}


/*****************************/
/*    Job Advanced Search    */
/*****************************/
.advancedSearchBoxOuter {min-width:850px;}


.valueBreakDown {
    max-width:45%;
}

.quoteBreakDown {
    max-width:45%;
}

.quoteBreakDownContent {
    max-width:900px;
}

/******************************************/
/*   Reports: Reports Item Box            */
/*   Menu items in list on Reports Screen */
/******************************************/

.box-header .large-box-title
{
    font-size: 34px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/******************************************/
/*   Custom Widget Colour                 */
/******************************************/
.box.box-ascora {
  border-top-color: #f39c12; 
}

.box.box-solid.box-ascora {
  border: 0px;
}

.box.box-solid.box-ascora > .box-header {
  color: #ffffff;
  background: #f39c12;
  background-color: #f39c12;
}

.box.box-solid.box-ascora > .box-header h3 {color: #ffffff;}

.box.box-solid.box-ascora > .box-header a, 
.box.box-solid.box-ascora > .box-header .btn {
    color: #ffffff;
}

/*Box Ascora Blue*/
.box.box-ascora-blue {
  border-top-color: #2770b9; 
}

.box.box-solid.box-ascora-blue {
  border: 0px;
}

.box.box-solid.box-ascora-blue > .box-header {
  color: #ffffff;
  background: #2770b9;
  background-color: #2770b9;
}

.box.box-solid.box-ascora-blue > .box-header h3{
  color: #ffffff;
}

.box.box-solid.box-ascora-blue > .box-header a, 
.box.box-solid.box-ascora-blue > .box-header .btn {
    color: #ffffff;
}

/*********************************/
/*   Reports: Report Content     */
/*********************************/
.report_content {
}

.report_content .chart_box {width:100%; height:400px;}


/*********************************/
/*   Reports: Cost Breakdown     */
/*********************************/
.travelCostBreakDownTable {
    max-width:400px;
}

.calloutCostBreakDownTable {
    max-width:600px;
}

/*********************************/
/*    Scheduler                  */
/*********************************/
.sch-horizontal .sch-timelineview td .x-grid-cell-inner {height: 55px;}
#Wizard_CustomerSelect .k-grid td {height:35px}
#Wizard_BillingCustomerSelect .k-grid td {height:35px}
.k-pager-numbers .k-link {padding: 3px 8px;}
.sch-event-inner{margin-left:0px; margin-top:0px} /*override sch-all.css to remove padding so that the coloured strip is flush*/


.sch-resourcezone, .availability-scheduler .sch-event {
    background: #80FFFF;
}

.sch-timelineview .x-grid-item td.sch-timetd {
    background: silver;
}

.sch-resourcezone{
    opacity:0.5;
}

.sch-timelineview .myZoneStyle {
    background: #999999 url('/Assets/img/texture.png') repeat !important; /* was whitesmoke */
}


/*********************************/
/*   Scheduler: Colour Strip     */
/*********************************/
/*adds stripe to side in horizontal view*/
.sch-horizontal .sch-event .scheduler_coloured_strip{width:12px; height:100%; margin-right:5px; float:left}

/*adds stripe to side in vertical view*/
.sch-vertical .sch-event .scheduler_coloured_strip{width:100%; height:10px; display:block;}

.sch-event {background:none; background-color:#00e5ff; border:1px solid #718792}

.sch-event .scheduler_coloured_strip ~ div {padding-left:5px; padding-right:5px;}

.sch-event .sch-event-inner .sch-event-header {font-size:11px}
.sch-event .sch-event-inner .sch_job_description {font-size:11px}
.sch-event .sch-event-inner .sch-event-footer {font-size:11px}
.sch-event .sch-event-inner {margin-right:0px;}

.sch-vertical .sch-event .sch-event-inner div{
    white-space:normal; 
    word-wrap: break-word;
}

/*flat stripe colours*/
.scheduler_booked{background: #4caf50}/*Green*/
.scheduler_unscheduled {background: #ef6c00;}/*orange*/
.scheduler_in_progress {background: #03a9f4;}/*blue*/
.scheduler_closed {background: #cfd8dc;}/*grey*/
.scheduler_reattend {background: #ef5350;}/*red*/
.scheduler_completed {background: #455a64;}/*black*/
.scheduler_ready_to_invoice {background: #fdd835;}/*gold*/
.scheduler_readytoinvoice {background: #fdd835;}/*gold*/
.scheduler_travelling_to {background: #ab47bc;}/*purple*/
.scheduler_deferred {background: #aa66cc; }/*purple*/


.scheduler_booked_old{/*Green*/
background: #839f4a; /* Old browsers */
background: -moz-linear-gradient(top,  #839f4a 0%, #48891c 50%, #2e7d00 50%, #0c7c00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#839f4a), color-stop(50%,#48891c), color-stop(50%,#2e7d00), color-stop(100%,#0c7c00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #839f4a 0%,#48891c 50%,#2e7d00 50%,#0c7c00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #839f4a 0%,#48891c 50%,#2e7d00 50%,#0c7c00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #839f4a 0%,#48891c 50%,#2e7d00 50%,#0c7c00 100%); /* IE10+ */
background: linear-gradient(to bottom,  #839f4a 0%,#48891c 50%,#2e7d00 50%,#0c7c00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#839f4a', endColorstr='#0c7c00',GradientType=0 ); /* IE6-9 */
}

.scheduler_unscheduled_old{/*orange*/
background: #e89b49; /* Old browsers */
background: -moz-linear-gradient(top,  #e89b49 0%, #f16d1b 50%, #f85c00 50%, #f83e00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e89b49), color-stop(50%,#f16d1b), color-stop(50%,#f85c00), color-stop(100%,#f83e00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e89b49 0%,#f16d1b 50%,#f85c00 50%,#f83e00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e89b49 0%,#f16d1b 50%,#f85c00 50%,#f83e00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e89b49 0%,#f16d1b 50%,#f85c00 50%,#f83e00 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e89b49 0%,#f16d1b 50%,#f85c00 50%,#f83e00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e89b49', endColorstr='#f83e00',GradientType=0 ); /* IE6-9 */
}
			
.scheduler_in_progress_old{/*blue*/
background: #4f7098; /* Old browsers */
background: -moz-linear-gradient(top,  #4f7098 0%, #407aac 50%, #2e72a9 50%, #50a4d7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f7098), color-stop(50%,#407aac), color-stop(50%,#2e72a9), color-stop(100%,#50a4d7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4f7098 0%,#407aac 50%,#2e72a9 50%,#50a4d7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4f7098 0%,#407aac 50%,#2e72a9 50%,#50a4d7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4f7098 0%,#407aac 50%,#2e72a9 50%,#50a4d7 100%); /* IE10+ */
background: linear-gradient(to bottom,  #4f7098 0%,#407aac 50%,#2e72a9 50%,#50a4d7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f7098', endColorstr='#50a4d7',GradientType=0 ); /* IE6-9 */
}
			
.scheduler_closed_old{/*grey*/
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top,  #efefef 0%, #e5e5e5 50%, #cccccc 51%, #bfbfbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(50%,#e5e5e5), color-stop(51%,#cccccc), color-stop(100%,#bfbfbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #efefef 0%,#e5e5e5 50%,#cccccc 51%,#bfbfbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #efefef 0%,#e5e5e5 50%,#cccccc 51%,#bfbfbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #efefef 0%,#e5e5e5 50%,#cccccc 51%,#bfbfbf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #efefef 0%,#e5e5e5 50%,#cccccc 51%,#bfbfbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */
}
			
.scheduler_cancelled_old{/*red*/
background: #ae6f6f; /* Old browsers */
background: -moz-linear-gradient(top,  #ae6f6f 0%, #834b4b 50%, #692d2d 50%, #6e2b28 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ae6f6f), color-stop(50%,#834b4b), color-stop(50%,#692d2d), color-stop(100%,#6e2b28)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ae6f6f 0%,#834b4b 50%,#692d2d 50%,#6e2b28 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ae6f6f 0%,#834b4b 50%,#692d2d 50%,#6e2b28 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ae6f6f 0%,#834b4b 50%,#692d2d 50%,#6e2b28 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ae6f6f 0%,#834b4b 50%,#692d2d 50%,#6e2b28 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae6f6f', endColorstr='#6e2b28',GradientType=0 ); /* IE6-9 */
}

.scheduler_completed_old{/*black*/
background: #323438; /* Old browsers */
background: -moz-linear-gradient(top,  #323438 0%, #222326 49%, #191a1c 51%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#323438), color-stop(49%,#222326), color-stop(51%,#191a1c), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #323438 0%,#222326 49%,#191a1c 51%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #323438 0%,#222326 49%,#191a1c 51%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #323438 0%,#222326 49%,#191a1c 51%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #323438 0%,#222326 49%,#191a1c 51%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323438', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.scheduler_readytoinvoice_old{/*gold*/
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #f9b300 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#f9b300)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f9b300',GradientType=0 ); /* IE6-9 */
}

.scheduler_unused_old{/*purple*/
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #f9b300 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#f9b300)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#f9b300 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f9b300',GradientType=0 ); /* IE6-9 */
}

/*********************************/
/*   Scheduler: Legend           */
/*********************************/
.legend_status {display:inline-block; border:0px; border-collapse:separate; border-spacing:5px; margin:10px 10px 0 5px; background-color:#ffffff; border:1px solid #b1b1b1; border-radius:3px; padding:5px;}
.legend_status .key_label {padding-left:5px;padding-right:10px;}
.legend_status .key_colour {width:15px; height:15px; border:1px solid #1c1c1c}
.legend_status .legend_heading {padding:3px;border: 1px solid #b1b1b1; border-radius:3px; background-color:#00acd6; color:#ffffff}

/*.legend_job_status .booked {background-color:#4e8b18}
.legend_job_status .unscheduled {background-color:#ff6400}
.legend_job_status .inprogress {background-color:#005985}
.legend_job_status .completed {background-color:#323438}
.legend_job_status .cancelled {background-color:#932525}
.legend_job_status .closed {background-color:#efefef}
.legend_job_status .readytoinvoice {background-color:#f5e100}*/

.bg_lime {background-color:#a4c400 !important}
.bg_green {background-color:#43a047 !important}
.bg_lightgreen {background-color:#009688 !important}
.bg_emerald {background-color:#008a00 !important}
.bg_teal {background-color:#00aba9 !important}
.bg_cyan {background-color:#0097a7 !important}
.bg_blue_grey {background-color:#f5f5f5 !important}
.bg_blue {background-color:#2196f3 !important}
.bg_navy {background-color:#3f51b5 !important}
.bg_cobalt {background-color:#0050ef !important}
.bg_indigo {background-color:#6a00ff !important}
.bg_violet {background-color:#aa00ff !important}
.bg_pink {background-color:#f472d0 !important}
.bg_purple {background-color:#673ab7 !important}
.bg_purple_02 {background-color:#aa66cc !important}
.bg_magenta {background-color:#d80073 !important}
.bg_crimson {background-color:#a20025 !important}
.bg_red {background-color:#f44336 !important}
.bg_orange {background-color:#ffc107 !important}
.bg_deeporange {background-color:#ff5722 !important}
.bg_amber {background-color:#f0a30a !important}
.bg_brown {background-color:#825a2c !important}
.bg_olive {background-color:#6d8764 !important}
.bg_steel {background-color:#647687 !important}
.bg_mauve{background-color:#76608a !important}
.bg_sienna {background-color:#a0522d !important}
.bg_black {background-color:#455a64 !important}
.bg_yellow {background-color:#fdd835 !important}
.bg_grey {background-color:#cfd8dc !important}

/*********************************/
/*   Accounts Integration        */
/*********************************/
.confirmation_box{width:180px; background-color:#eeeeee; border:1px solid #cccccc; border-radius:3px; padding:10px; display:inline-block; margin-left:10px;}
.confirmation_box .confirmation_tick {display:inline-block; margin:auto; width:25px;}
.confirmation_box .confirmation_message {display:inline-block; text-align:center; margin:0px;}

.status_tick, .status_cross, .status_info {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-left: 2px;
}

.icon_status_tick { font-size:26px; color: #009900; vertical-align:middle}
.icon_status_cross { font-size:26px; color:#ff6400; vertical-align:middle}
.icon_status_info {font-size: 26px;color: #3662F0;vertical-align: middle;cursor: pointer}
.icon_status_info:hover {color: #4D9FFA;}

.account_details h1 {}
.account_details p {font-size:15px;}
.account_details .accounts_list_title{margin-top:25px; margin-bottom:15px; font-size:18px; line-height:18px}
.account_details .accounts_list {font-size:15px; list-style-type: none; padding-left: 0; margin-left: 0; margin-bottom:20px;}
.account_details .accounts_list li {
    font-weight:600;
    display:flex;
    align-items:center;
}
.account_details .accounts_list li:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f138";
    font-weight:300;
    font-size:35px;
    line-height:35px;
    margin-right:8px;
}

/*This is required to center the text vertically when text is wrapping*/
.account_details .accounts_list .list_item_outer{display:table; height:50px;}
.account_details .accounts_list .list_item_inner{display:table-cell; vertical-align:middle}

.account_details .account_titlebar {margin-bottom:20px;}
.account_details .account_titlebar .account_heading{display:inline-block; vertical-align:middle; padding:0px; margin:0px;}
.account_details .account_titlebar .account_icon {width:45px; height:45px; display:inline-block; vertical-align:middle; margin-right:10px}
.account_details .account_titlebar .account_icon_myob {width:100px; display:inline-block; vertical-align:middle; margin-right:10px}

.account_buttons_qb {
    /*Get rid of the button text*/
    text-indent: -9999px;
    white-space: nowrap;
    color: transparent;
    border: none;
    width: 223px;
    height: 36px;
    background-color: transparent !important;
    background: url('/Assets/img/C2QB_green_btn_med_default.svg') no-repeat;
    background-size: contain;
}

.account_buttons_qb:active,.account_buttons_qb:hover {
    background:url('/Assets/img/C2QB_green_btn_med_hover.svg') no-repeat;
    background-size: contain;
}

.user-settings-pending 
{
    /*border: 1px dashed black;*/
    background-color: #fff8dc;
    border:1px solid #d3c489;
}


.account_note{width:100%; padding:10px; margin-top:15px; margin-bottom:15px; border:0px solid black; border-radius:6px; background-color:#3c3c3c; color:#ffffff; font-size:14px; text-align:center}
.account_note .attention{font-size:16px; font-weight:bold; color:#ff7575; font-style:italic}

.input_description_box {width:238px; font-size:12px; line-height:18px;}

/* Set Input Sizes*/
.input_size_medium input{max-width:200px}
.input_size_medium .k-widget{width:100%; max-width:200px}


#connected_status {vertical-align:middle;}
#connected_status span, #connected_status i {vertical-align:middle;}
 
/***********************************/
/*       Payroll Integration       */
/***********************************/

.payroll_details h1 {}
.payroll_details p {font-size:15px;}
.payroll_details .payroll_list_title{margin-top:25px; margin-bottom:15px; font-size:18px; line-height:18px}
.payroll_details .payroll_list {font-size:15px; list-style-type: none; padding-left: 0; margin-left: 0; margin-bottom:20px;}
.payroll_details .payroll_list li {font-weight:bold; background: url('/Assets/img/list_arrow_right.png') left center no-repeat; padding-left:48px;}

/*This is required to center the text vertically when text is wrapping*/
.payroll_details .payroll_list .list_item_outer{display:table; height:50px;}
.payroll_details .payroll_list .list_item_inner{display:table-cell; vertical-align:middle}

.payroll_details .payroll_titlebar {margin-bottom:20px;}
.payroll_details .payroll_titlebar .payroll_heading{display:inline-block; vertical-align:middle; padding:0px; margin:0px;}
.payroll_details .payroll_titlebar .payroll_icon {width:45px; height:45px; display:inline-block; vertical-align:middle; margin-right:10px}
.payroll_details .payroll_titlebar .payroll_icon_deputy {    width: 200px; height: 37px; display:inline-block; vertical-align:middle; margin-right:10px}
.payroll_dropdown_packages{width:240px;}

.payroll_buttons_deputy {
    /*Get rid of the button text*/
    text-indent: -9999px;  
    white-space: nowrap;      
    color: transparent;
    border: none;
    width: 200px;
    height: 44px;
    background-color: transparent !important;
    background :url('/Assets/img/ConnectDeputy.png') no-repeat;
    background-size: 100%
}


.payroll_buttons_deputy:active,.payroll_buttons_deputy:hover {
    background:url('/Assets/img/ConnectDeputy.png') no-repeat;
    background-size: 100%
}

/*********************************/
/*   Job Schedule Settings       */
/*********************************/
.job_schedule_content {display:table; height:200px; width:100%;}
.job_schedule_content h1{font-size:20px; margin-bottom:10px;}
.job_schedule_content .col_left{width:50%; min-height:200px; float:left; vertical-align:top}
.job_schedule_content .col_right{width:48%; min-height:200px; float:left; vertical-align:top; margin-left:2%}
.job_schedule_content .field_list {width:100%;}

.job_schedule_content .job_schedule_display {display:flex; width:100%; height:200px; border:0px solid #0c7c00; border-radius:var(--widget-radius);box-shadow:var(--elevation-7);overflow:hidden}
.job_schedule_content .job_schedule_display .job_colour{width:10%;height:100%;background: var(--status-green);}

.job_schedule_content .job_schedule_display .job_schedule_box{width:90%; height:100%; background-color:rgba(105, 195, 82, 0.4); display:flex; align-items:center; justify-content:center;}

.job_schedule_content .job_schedule_display .job_field_box{width:90%}

.job_schedule_content .job_schedule_display .job_field_box .fields{display:block; font-size:14px; height:30px; width:100%; border-radius:6px}
.job_schedule_content .job_schedule_display .job_field_box .fields.selected{border:2px solid var(--status-green);}

.job_schedule_content .job_schedule_display .job_field_box .field1{margin-bottom:15px;}
.job_schedule_content .job_schedule_display .job_field_box .field2{margin-bottom:15px}


.job_schedule_content #commands {text-align:center; width:10%; vertical-align:middle; float:left; margin-top:133px;}		
.job_schedule_content #commands div {padding: 5px;}		
.job_schedule_content #commands div a {width: 30px;text-align: center;}


/*********************************/
/* Enquiry Bookings              */
/*********************************/
.enquiry_booking_content {}
.enquiry_booking_content .form-group {margin-bottom:0px;}
.enquiry_booking_content .btn_submit{padding: 12px 60px; font-size:18px;}
.enquiry_booking_content .enquiry_header h2{font-size:28px; margin-bottom:15px;}
.enquiry_booking_content .enquiry_banner {position:relative; background-color:#2770b9; margin-left:-15px; margin-right:-15px; margin-top:-15px;} /*height:300px*/
.enquiry_booking_content .enquiry_banner .img_branding {display:block; margin:auto; max-width: 1130px; padding-top: 10px; padding-bottom: 10px;} /* height:100%; Added max width so limit image size */
.enquiry_booking_content .enquiry_banner .img_ascora_logo {width:150px; position:absolute; left:15px; top:15px}
.enquiry_booking_content .enquiry_box {max-width:1280px; margin:auto}


/*********************************/
/* Enquiry Bookings Preview      */
/*********************************/

.preview_wrap {
    float: left;
    height: auto;
    margin-bottom: -245%
}

.enquiry_booking_preview #previewAdvert {overflow:hidden}

.enquiry_booking_preview {}
.enquiry_booking_preview.scale{
    -ms-transform: scale(0.45, 0.45); /* IE 9 */
    -webkit-transform: scale(0.45, 0.45); /* Safari */
    transform: scale(0.45, 0.45);

    -webkit-transform-origin:left top 0;
    -moz-transform-origin:left top 0;
    transform-origin:left top 0;
}
.enquiry_booking_preview .form-group {margin-bottom:10px;}
.enquiry_booking_preview .form-group .form-control{border:2px solid #d2d6de}
.enquiry_booking_preview .btn_submit{padding: 12px 60px; font-size:18px;}
.enquiry_booking_preview .enquiry_header h2{font-size:28px; margin-bottom:15px;}
.enquiry_booking_preview .enquiry_banner {position:relative; background-color:#2770b9;} /*height:300px*/
.enquiry_booking_preview .enquiry_banner .img_branding {display:block; margin:auto; padding-top: 10px; padding-bottom: 10px;} /*height:100%;*/
.enquiry_booking_preview .enquiry_banner .img_ascora_logo {width:150px; position:absolute; left:15px; top:15px}
.enquiry_booking_preview .enquiry_box {width:1280px; min-height:800px; margin:auto; padding:20px;}


/*********************************/
/* Enquiry Settings              */
/*********************************/
.enquiry_settings_content .enquiry_button_generator {max-width:990px; margin:auto;}
.enquiry_settings_content .enquiry_button_generator h4{font-size:14px; margin-bottom:5px}
.enquiry_settings_content .enquiry_button_generator .inner{background-color:#eeeeee; padding-top:15px; padding-bottom:15px;}
.enquiry_settings_content .enquiry_button_generator .btn_enquiry {width:100%}

/*********************************/
/* Enquiry Steps                 */
/*********************************/
.enquiry_steps {max-width:990px; margin:auto;}
.enquiry_steps .fa {line-height:200px; font-size:45px;}
.enquiry_steps .box {display:table; height:200px; font-size:20px; text-align:center; vertical-align:middle; border:4px solid #cfd8dc}
.enquiry_steps .box .box-body {display:table-cell; vertical-align:middle}

/*********************************/
/* Enquiry Conversion            */
/*********************************/
.enquiry_convert_customer.ecc-readonly {
    border-color: #999;
}
.enquiry_convert_customer.ecc-readonly .k-multiselect-wrap {
    background-color: #E4E4E4;
}

.enquiry_convert_customer.ecc-readonly .k-input.k-readonly {
    background-color: #E4E4E4;
}

/*********************************/
/* CSS Checkbox: Green Check Box */
/*********************************/
input[type=checkbox].css-checkbox
{
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox ~ label.css-label
{
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 13px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 13px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox:checked ~ label.css-label{
    background-position: 0 -15px;
}

label.css-label
{
    background: url('/Assets/img/checkbox_green_light.png') 15px 15px no-repeat;
}


/***************************/
/*  CSS CHECKBOX: Large    */
/***************************/
input[type=checkbox].css-checkbox-lg {
    position:absolute; 
    z-index:-1000; 
    left:-1000px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; width:1px; 
    margin:-1px; 
    padding:0;
    border:0;
}

input[type=checkbox].css-checkbox-lg ~ label.css-label-lg {
    padding-left:30px;
    line-height:30px;
    height:30px; 
    display:inline-block;
    background-repeat:no-repeat;
    background-position: 0 0;
    vertical-align:middle;
    cursor:pointer;
}

input[type=checkbox].css-checkbox-lg:checked ~ label.css-label-lg {
    background-position: 0 -30px;
}

label.css-label-lg {
    background-image:url("/Assets/img/checkbox_lg.png");
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/*********************/
/* PURE CSS CHECKBOX */
/*********************/

.squared_checkbox_wrapper {display:inline-block; vertical-align:middle}
.squared_checkbox_wrapper > label {vertical-align:middle; margin-bottom:0px;}
.squared_checkbox_wrapper .squaredCheckbox {vertical-align:middle}

.squaredCheckbox {
	width: 26px;
	height: 26px;
	background: #2988c3;
	position: relative;
    display:inline-block;
}

.squaredCheckbox label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 3px;
	top: 3px;
    background-color:#ffffff;
}

.squaredCheckbox label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 14px;
	height: 8px;
	background: transparent;
	top: 5px;
	left: 3px;
	border: 3px solid #5eb624;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.squaredCheckbox label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.squaredCheckbox input[type=checkbox]:checked ~ label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.squaredCheckbox input[type=checkbox] {
	visibility: hidden;
}


/********************************/
/* PURE CSS CHECKBOX SMALL      */
/* Suitable for grid checkboxes */
/********************************/

.squaredCheckbox_sm {
	width: 20px;
	height: 20px;
	background: #2988c3;
	position: relative;
    display:inline-block;
    cursor:pointer;
}

.squaredCheckbox_sm label {
	cursor: pointer;
	position: absolute;
	width: 16px;
	height: 16px;
	left: 2px;
	top: 2px;
    background-color:#ffffff;
}

.squaredCheckbox_sm label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 12px;
	height: 6px;
	background: transparent;
	top: 4px;
	left: 2px;
	border: 2px solid #5eb624;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.squaredCheckbox_sm label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.squaredCheckbox_sm input[type=checkbox]:checked ~ label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.squaredCheckbox_sm input[type=checkbox] {
	visibility: hidden;
}


/***********************************************/
/* PURE CSS CHECKBOX SMALL ANIMATED CHECKBOXES */
/***********************************************/

.checkbox_anim_sm {
	width: 18px;
	height: 18px;
	position: relative;
    display:inline-block;
    cursor:pointer;
    border-radius:3px;
}

/* allows labels to wrap checkbox so that it is not pushed to the next line*/
.checkbox_anim_sm + label {
    display:inline;
}

.checkbox_anim_sm label {
    background-color:#eceff1;
    -ms-border-radius:3px;
    border-radius:3px;
    border:1px solid #b0bec5;
    box-sizing:content-box;
	cursor: pointer;
	position: absolute;
	width: 18px;
	height: 18px;
	left: 0px;
	top: 0px;
}

.checkbox_anim_sm label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
    -ms-opacity: 0;
    opacity: 0;
	content: '';
	position: absolute;
	width: 12px;
	height: 6px;
	background: transparent;
	top: 5px;
	left: 3px;
	border: 2px solid #ffffff;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.checkbox_anim_sm label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.checkbox_anim_sm input[type=checkbox]:checked ~ label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

    animation-duration: 0.5s;
    animation-name: animationCheckbox;
}

.checkbox_anim_sm input[type=checkbox]:checked ~ label{
    background-color:#2988c3;
    border:1px solid #2988c3;
    box-sizing:content-box;
}

.checkbox_anim_sm input[type=checkbox] {
	visibility: hidden;
    margin:0px;
}

/* fade in animation for checkboxes*/
@keyframes animationCheckbox{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes animationCheckbox{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes animationCheckbox {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes animationCheckbox {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

/*************************************/
/* PURE CSS CHECKBOX SMALL ANIMATED  */
/*              GRIDS                */
/*************************************/

.checkbox_anim_grid_sm {
	width: 20px;
	height: 20px;
	position: relative;
    display:inline-block;
    cursor:pointer;
    border-radius:3px;
}

.checkbox_anim_grid_sm label {
    background-color:#eceff1;
    -ms-border-radius:3px;
    border-radius:3px;
    border:1px solid #b0bec5;
    box-sizing:content-box;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 0px;
	top: 0px;
}

.checkbox_anim_grid_sm label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
    -ms-opacity: 0;
    opacity: 0;
	content: '';
	position: absolute;
	width: 12px;
	height: 6px;
	background: transparent;
	top: 6px;
	left: 4px;
	border: 2px solid #ffffff;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.checkbox_anim_grid_sm label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.checkbox_anim_grid_sm input[type=checkbox]:checked ~ label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

    animation-duration: 0.5s;
    animation-name: animationCheckbox;
}

.checkbox_anim_grid_sm input[type=checkbox]:checked ~ label{
    background-color:#2988c3;
    border:1px solid #2988c3;
    box-sizing:content-box;
}

.checkbox_anim_grid_sm input[type=checkbox] {
	visibility: hidden;
}


/*************************************/
/* CHECK BOX BUTTON WITH TEXT        */
/*                                   */
/*************************************/

.checkbox_txt_btn {
    display: inline-block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    padding:5px 5px 5px 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border:1px solid #ccc;
    border-radius:3px;
}

.checkbox_txt_btn input {position: absolute;opacity: 0;cursor: pointer;}

.checkbox_txt_btn .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    margin:8px;
    background-color: #eee;
}

.checkbox_txt_btn:hover input ~ .checkmark {background-color: #ccc;}
.checkbox_txt_btn input:checked ~ .checkmark {background-color: #2196F3;}

.checkbox_txt_btn .checkmark:after {content: "";position: absolute;display: none;}
.checkbox_txt_btn.checkbox_txt_btn input:checked ~ .checkmark:after {display: block;}

.checkbox_txt_btn .checkmark:after {
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/********************************/
/* PURE SVG CHECKBOX SMALL      */
/* Suitable for grid checkboxes */
/********************************/

.checkbox_svg {
    vertical-align:middle;
    margin-bottom:0px;
}

.checkbox_svg .svg-scale {
    transform-origin: 0 0;
    /*transform: scale(0.7);
    -ms-transform: scale(0.7);
    -webkit-transform: scale(0.7);*/
}

.checkbox_svg input[type="checkbox"] {
  display:none;
}

.checkbox_svg input[type="checkbox"] + .checkbox_inner {
  display:flex;
}

.checkbox_svg input[type="checkbox"] + .checkbox_inner .icon-checkbox {
  height: 20px;
  width: 20px;
}

.checkbox_svg input[type="checkbox"] + .checkbox_inner .icon-checkbox-checked {
  display: none;
  height: 20px;
  width: 20px;
}

.checkbox_svg input[type="checkbox"]:checked + .checkbox_inner .icon-checkbox-checked {
  display:flex;
}

.checkbox_svg input[type="checkbox"]:checked + .checkbox_inner .icon-checkbox {
  display: none;
}

/*********************************/
/* table                         */
/*********************************/
.table-striped > thead > tr > th {
    background-color:#51aae0;
    color:#fff;
}

.table-striped > thead > tr.alt_tr > th{
    background-color:#84bde0;
}

.table-striped > tbody > tr{
    background-color:#f6fafd;
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color:#d1e6f3;
}

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

/* Labour Breakdown grid (Job Details) sits directly under the profitability and
   invoicing summary tables, so its header is dressed as those headers rather
   than as a stock Kendo one: the same blue and white text as the
   .table-striped thead above, with the white hairline the bordered tables use.
   Both levels of its grouped header take the same fill so the block reads as
   one header. Scoped to the single grid by id, since every other Kendo grid in
   the app should keep the theme's header. The Kendo rules being beaten are
   themselves !important, hence the !important here. */
#labourBreakDownGrid .k-grid-header,
#labourBreakDownGrid .k-grid-header-wrap,
#labourBreakDownGrid .k-grid-header thead,
#labourBreakDownGrid .k-grid-header th,
#labourBreakDownGrid .k-grid-header th.k-header {
    background-color: #51aae0 !important;
    border-color: #fff !important;
}

#labourBreakDownGrid .k-grid-header th,
#labourBreakDownGrid .k-grid-header th.k-header,
#labourBreakDownGrid .k-grid-header th .k-link,
#labourBreakDownGrid .k-grid-header th a,
#labourBreakDownGrid .k-grid-header th span,
#labourBreakDownGrid .k-grid-header th div,
#labourBreakDownGrid .k-grid-header th i {
    color: #fff !important;
    font-weight: bold !important;
    text-transform: none !important;
}


/*********************************/
/* table: Quote Breakdown        */
/*********************************/
.table_quote_breakdown {
}

.table_quote_breakdown > tbody > tr.bold_tr{
    font-weight:bold;
}

.table_quote_breakdown > tbody > tr.solid_tr{
    background-color:#9acbeb;
    font-weight:bold;
}


/*********************************/
/* Account: Billing Details      */
/*********************************/
.box_billing_details {

}

.box_billing_details .icon_help_btn {
    font-size:22px;
    cursor:pointer;
}

.box_billing_details .icon_promo_status {font-size:22px;cursor:pointer;}
.box_billing_details .icon_promo_status.text-success{color:#009900}
.box_billing_details .icon_promo_status.text-danger{color:#ff6400}

.box_billing_details .current_cc_box{
    font-weight:bold;
    padding:10px;
    text-align:center;
}

.box_billing_details .box_ssl_note {

}

.box_account_faq {
    
}

.box_account_faq ul{
    
}

.box_account_faq ul li{
    padding-bottom:6px;
}

.box_billing_details .input-group-addon {
    min-width:45px;
    padding:0px 5px 0px 5px;
}


/*********************************/
/* Emailer                       */
/*********************************/
.emailer {
}

.emailer .emailer_content {
}

.emailer .emailer_content .recipients_list {

}

.emailer .emailer_content .recipients_list li{
    list-style:none;
}

/*********************************/
/* recurring jobs                */
/*********************************/

/*New*/
.ascora-blue .panel.panel-primary {
    border-color: var(--accent-color-1) !important;
    border-radius:var(--widget-radius);
    overflow:hidden;
}

.ascora-blue .panel.panel-primary .panel-heading {
    background-color: var(--accent-color-1) !important;
    border-color: var(--accent-color-1) !important;
    padding:10px;
}

.ascora-blue .panel.panel-primary .panel-heading .panel-title {
    color: white;
    font-size:16px;
}

.ascora-blue .recurring_checkbox_box {
    border:1px solid rgba(0, 123, 255, .2);
    background-color: rgba(0, 123, 255, .15);
    border-radius:var(--widget-radius);
}

.ascora-blue .recurring_checkbox_box {
    padding: 5px 10px;
    margin-left: 0 !important;
    margin-right: 0px !important;
    margin-bottom: 10px;
    font-size: 14px;
    font-family: var(--modern-font-body);
    font-weight: 200;
    display: table;
    width: 100%;
}

.ascora-blue .recurring_grid_panel {
    border: 1px solid rgba(0, 123, 255, .2);
    background-color: rgba(0, 123, 255, .15);
    border-radius: var(--widget-radius);
}

.ascora-blue .recurring_checkbox_box.active{
    background-color:var(--accent-color-1) !important
}

.recurring_checkbox_box_cell {
    display:table-cell; vertical-align:middle; height:60px
}

.recurring_checkbox_box label{
    font-family: var(--modern-font-body);
    font-weight:200;
}

.recurring_checkbox_box .k-numerictextbox .k-numeric-wrap,
.recurring_checkbox_box .k-timepicker .k-picker-wrap,
.recurring_checkbox_box .form-control
{
    border:1px solid #176da6;
}

.recurring_checkbox_box.active {
    background-color:#51aae0;
    color:#ffffff;
}

.recurring_checkbox_box .recurring_controls {
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
}

.recurring_checkbox_box .recurring_controls:first-child {
    display:inline-block;
    margin-left:0px;
}

.scheduler_booked{background: #69c352}/*Green*/
.scheduler_unscheduled {background: #ef6c00;}/*orange*/
.scheduler_in_progress {background: #03a9f4;}/*blue*/
.scheduler_closed {background: #cfd8dc;}/*grey*/
.scheduler_reattend {background: #ef5350;}/*red*/
.scheduler_completed {background: #455a64;}/*black*/
.scheduler_ready_to_invoice {background: #fdd835;}/*gold*/
.scheduler_readytoinvoice {background: #fdd835;}/*gold*/
.scheduler_travelling_to {background: #ab47bc;}/*purple*/
.scheduler_deferred {background: #aa66cc; }/*purple*/

/*********************************/
/* Job List Status Colours     */
/*********************************/

.job-status-new {
    background-color: #ef6c00; /* orange */
}

.job-status-inprogress {
    background-color: #03a9f4; /* Blue */
}

.job-status-completed {
    background-color: #455a64; /* Black */
}

.job-status-notcompleted {
    background-color: #ab47bc; /* Purple */
}

.job-status-closed {
    background-color: #cfd8dc; /* White */
}

.job-status-booked {
    background-color: #4caf50; /* Green */
}

.job-status-unscheduled {
    background-color: #ef5350; /* Red */
}

.job-status-readytoinvoice {
    background-color: #fdd835; /* Yellow */
}

.job-status-cancelled {
    background-color: #ef6c00; /* Orange */
}

/*span.job-status-new-span,
span.job-status-inprogress-span,
span.job-status-completed-span,
span.job-status-notcompleted-span,
span.job-status-closed-span,
span.job-status-booked-span,
span.job-status-unscheduled-span,
span.job-status-readytoinvoice-span,
span.job-status-cancelled-span {
    color: #ffffff;
}*/

.ascora-blue .k-grid .k-table-row .k-table-td span[class*="job-status"],
.ascora-blue .k-grid .k-table-row .k-table-td span[class*="quote-status"] {
    color: #ffffff;
}

span.job-status-closed-span {
    color: #000000;
}




/*********************************/
/* Client Doc Details Status Colours     */
/*********************************/
#ClientDocDetailsGrid .quote-status-lost {background-color:#FF5050; /* Red */}
#ClientDocDetailsGrid .quote-status-won {background-color:#FFEB3B; /* Gold */}
#ClientDocDetailsGrid .quote-status-won span{color:#263238 /* Gold */}
#ClientDocDetailsGrid .quote-status-sent {background-color:#4fd145; /* Green */ }






/* set size and colour of buttons in grid*/
/*.k-grid a.btn,
.k-grid a.k-button
{
    font-size:12px;
    font-weight:400;
}*/

/* colour text in the buttons when the user hovers over the row*/
/*.k-grid tr:hover a.btn,
.k-grid tr:hover a.k-button
{
    font-size:12px;
    font-weight:400;
}*/

/*add hilight colour and underline to links when hovered over on the grid*/
/*.k-grid .k-grid-content tr:hover a:hover,
.k-grid .k-grid-content tr:hover .status-completed a:hover,
.k-grid .k-grid-content tr:hover .status-overdue a:hover,
.k-grid .k-grid-content tr:hover .status-notscheduled a:hover
{
   color:#fffa00;
   font-weight:400;
   text-decoration:underline;
}*/

/*set buttons in the grids to white*/
/*.k-grid .k-grid-content tr:hover a.btn,
.k-grid .k-grid-content tr:hover a.k-button
{
   color:#ffffff!important;
   font-weight:400!important;
   text-decoration:none!important;
   font-size:12px!important;
}*/


/*set buttons in the grids to white*/
/*.k-grid .k-grid-content tr a.btn,
.k-grid .k-grid-content tr a.k-button
{
   font-size:12px!important;
}*/

.k-state-selected .status-completed,
.k-state-selected .status-overdue,
.k-state-selected .status-notscheduled
{background-color:#3498db}

/*.k-state-selected a{color:#ffffff}*/
/*.k-grid tr:hover a{color:#ffffff}*/


/**************************************/
/* Logo Sizing, Maintain Aspect Ratio */
/**************************************/

/* set container size of image*/
.img600x300 {width:600px; height:300px; margin:auto;}

/* maintain aspect ratio while fitting it's container*/
.img_fit img {
    width:100%!important; 
    height:100%!important; 
    object-fit:contain!important;  /* maintain aspect ratio while fitting it's container*/
}

/*********************************/
/* External Invoice              */
/*********************************/

.external_invoice_wrapper .invoice_content{
    max-width:1000px;
    margin:auto;
}

.external_invoice_wrapper .invoice_content .invoice_company_logo {
    width:100%; 
    height:auto; 
    max-height:176px;
    object-fit: contain;
}

.external_invoice_wrapper .invoice_content .title_invoice {
    text-align:center;
    font-size:20px;
    color:#78909c;
    border-top:3px solid #78909c;
    border-bottom:3px solid #78909c;
    padding:10px 0px;
    text-transform:uppercase
}

.external_invoice_wrapper .invoice_content .box_status_paid {
    text-align:center; 
    font-size:20px; 
    color:#ffffff; 
    background-color:#43a047; 
    padding:10px 0px; 
    text-transform:uppercase; 
    margin-top:12px;
}

.external_invoice_wrapper .invoice_content .box_status_unavailable {
    text-align:center; 
    font-size:20px; 
    color:#ffffff; 
    background-color:#ffb300; 
    padding:10px 0px; 
    text-transform:uppercase; 
    margin-top:12px;
}

.external_invoice_wrapper .invoice_content .box_amount_due {
    text-align:center; 
    font-size:20px; 
    color:#ffffff; 
    background-color:#ffb300; 
    padding:10px 0px; 
    text-transform:uppercase; 
    margin-top:12px;
}

.external_invoice_wrapper .invoice_content .box_recieved {
    text-align:center;
    font-size:20px;
    color:#ffffff;
    background-color:#90a4ae;
    padding:10px 0px;
    text-transform:uppercase;
    margin-top:12px;
}

.external_invoice_wrapper .invoice_content .btn_pay_now {
    background-color:#0277bd; 
    width:100%; 
    padding:10px 0px; 
    text-transform:uppercase; 
    font-size:20px; 
    border-radius:0px; 
    margin-top:12px;
}

/*********************************/
/* Toggle Switch                 */
/*********************************/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/*******************/
/* Static Switch   */
/*******************/

/* The switch - the box around the slider */
.switch_02 {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

/* The slider */
.slider_02 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider_02:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

/*Toggle On*/
.switch_02.toggle_on .slider_02:before{
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*change slider colour to green*/
.switch_02.toggle_on .slider_02 {
  background-color: #04ce72;
}

/*change slider colour to blue*/
.switch_02.toggle_off .slider_02 {
  background-color: #2196f3;
}

/* Rounded sliders */
.slider_02.round {
  border-radius: 34px;
}

.slider_02.round:before {
  border-radius: 50%;
}

/**********************************************/
/* Radio Switch                               */
/**********************************************/
.radio_switches {
    font-family: "arial", Tahoma, Verdana, sans-serif;
    font-weight: bold;
    overflow: hidden;
}

.radio_switches input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.radio_switches label {
    display: inline-block;
    float: left;
    min-width: 65px;
    background-color: #3c8dbc;
    font-size: 14px;
    text-align: center;
    padding: 5px 6px;
    border: 2px solid #204D74;
    color: #FFF;
    line-height: 25px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin:0px;
}

.radio_switches label:hover {
    cursor: pointer;
}

.radio_switches label:first-of-type {
    border-radius: 4px 0 0 4px;
    border-right: 0px;
}

.radio_switches label:last-of-type {
    border-radius: 0 4px 4px 0;
    border-left: 0px;
}

.radio_switches label:only-of-type {
    border-radius: 4px;
    border: 2px solid;
}

.radio_switches input:checked + label {
    background-color: #3498DB;
    border-color: #286090;
    color: #FFF;
}

.ascora-blue .radio_switches input:checked + label {
    background-color: #3498DB;
    border-color: #286090;
    color: #FFF!important;
}

.radio_switches input:checked + label:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c \00a0";
    font-weight:600;
    font-size:14px;
    line-height:14px;
}

.radio_switches label.active {
    background-color: #00a8e1!important;
    border-color: #286090!important;
    color: #FFF;
}

.radio_switches label.active:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c \00a0";
    font-weight:600;
    font-size:14px;
    line-height:14px;
}

.radio_switches input:focus + label {
/*    -webkit-box-shadow: inset 0px 0px 0px 2px #FFF; 
    box-shadow: inset 0px 0px 0px 2px #FFF;*/
}

.radio_switches button.active {
    background-color: #3498DB;
    border-color: #286090;
    color: #FFF;
}

.radio_switches button.active:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c \00a0";
    font-weight:600;
    font-size:14px;
    line-height:14px;
}


/**********************************************/
/* Equipment Servicing: Pass Fail Switch      */
/**********************************************/

.pass_fail_switch {
    font-weight: 500 !important;
    overflow: hidden;
}

.pass_fail_switch input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.pass_fail_switch label {float: left;}

.pass_fail_switch label {
    display: inline-block;
    min-width: 65px;
    background-color: #f7f7fb;
    font-size: 14px;
    text-align: center;
    padding: 5px 6px;
    border: 1px solid #8f8fb5;
    color:#37474F;
    line-height:20px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    font-weight: 500!important;
}

.pass_fail_switch label.not_tested{
    font-size:12.5px;
}

.pass_fail_switch label:hover {cursor: pointer;}
.pass_fail_switch label:first-of-type {border-radius: 4px 0 0 4px;border-right:0px;}
.pass_fail_switch label:last-of-type {border-radius: 0 4px 4px 0;border-left:0px;}
.pass_fail_switch input:checked + label.pass{background-color:#4caf50; color:#FFF; border:1px solid #368C39}
.pass_fail_switch input:checked + label.fail{background-color:#db4d59; color:#FFF; border:1px solid #A3363F; border-left:0px}
.pass_fail_switch input:checked + label.not_tested{background-color:#db4d59; color:#FFF; border:1px solid #A3363F; border-right:0px}



/*********************************/
/* Custom Field Templates        */
/*********************************/

.custom-field-col {
    min-height: 100px;
    background-color: #f3f8ff;
    border:1px dashed #cccccc;
}

.custom-field-col .form-group {margin-left:0px; margin-right:0px;}

/*hide the buttons until the user hovers over the tempalte*/
.custom-field-template .ctrl_btns {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    -webkit-transition: 0.1s; /* Safari */
    transition: 0.1s;
    transition-timing-function: linear;
    opacity:0;
}

/*when the user hovers over the template the buttons are shown*/
.custom-field-template:hover .ctrl_btns {
    opacity:0.5;
}

/*when the user hovers over the template and the button the button becomes fully opaque*/
.custom-field-template:hover .ctrl_btns:hover {
    opacity:1;
}

.custom-field-template .btn_edit_round {
    background-color:#3c8dbc;
    color:#ffffff;
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.custom-field-template .btn_delete_round {
    background-color:#d15445;
    color:#ffffff;
    position:absolute;
    top:10px;
    right:45px;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

/* hide handle by default*/
.custom-field-template .handle {
    display:none;
}

/* This parent can be any width and height */
.custom-field-template:hover .handle {
  display:block;
  height:100%;
  text-align: center;
  white-space: nowrap;
  position:absolute;
  top:0px;
  left:10px;
  font-size:26px;
  opacity:0.5;
}
 
/* The ghost, nudged to maintain perfect centering */
.custom-field-template:hover .handle:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.custom-field-template:hover .handle .handle_inner {
  display: inline-block;
  vertical-align: middle;
}

.custom-field-template {
   position: relative;
   cursor:grab;

   padding: 20px;
   margin: 10px 0 10px 0;
   background: #cce6ff;
   border: 1px dashed #6ea5d8;
   border-radius: 2px;
}

.custom-field-template:hover {
   background: #cce6ff;
   border: 1px dashed #444;
   border-radius: 2px;
}

.custom-field-template-locked {
    cursor: crosshair;
}

.prevent-input {
    position:absolute;
    left:0;
    bottom:0;
    display:block;
    width:100%;
    height:100%;
    z-index:100;
}

/************************/
/* MEETING              */
/************************/
    .meeting-template {
        position: relative;
        cursor: grab;
        padding: 5px 10px;
        margin: 0px 0 0px 0;
        background: #cce6ff;
        border: 1px dashed #6ea5d8;
        border-radius: 2px;
        height:70px;
        box-sizing:border-box;
    }

    .meeting-template h4{
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        line-height:20px;
        margin:0px;
        padding:0px;
    }

    .meeting-template .ctrl_btns,
    .meeting-template .ctrl_btns i {
        margin: 0;
        padding: 0;
    }

    .meeting-template .ctrl_btns {
        box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
        -webkit-transition: 0.1s; /* Safari */
        transition: 0.1s;
        transition-timing-function: linear;
        opacity: 0.5;
        width: 28px;
        height: 28px;
    }

    .meeting-template:hover .ctrl_btns {
        opacity: 1;
    }

    .meeting-template:hover .ctrl_btns:hover {
        opacity: 1;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: box-shadow 0.6s;
        transition: all 0.2s;
        width: 30px;
        height: 30px;
    }

    .meeting-template .btn_info_round_01 {
        background-color: #3c8dbc;
        color: #ffffff;
        position: absolute;
        top: 5px;
        right: 10px;
        border: 0px solid #ccc;
        border-radius: 15px;
        text-decoration: none;
        z-index: 101;
    }

    .meeting-template .btn_info_round_02 {
        background-color: #5cb85c;
        color: #ffffff;
        position: absolute;
        top: 5px;
        right: 45px;
        border: 0px solid #ccc;
        border-radius: 15px;
        text-decoration: none;
        z-index: 101;
    }

/************************/
/* IMPORT CUSTOMER CSV  */
/************************/

.maps_to_col {text-align:center; vertical-align: middle; min-height: 600px}
.maps_to_col .maps_to_box {display:inline-block; margin-top :250px; padding:10px; color:#37474F}
.maps_to_col .maps_to_box p {margin-bottom:0px;}
.maps_to_col .maps_to_box .fa {font-size:50px;}

/*Change background colour of the window*/
#EditCsvMapping {background-color:#ecf0f5}

/* wraps all the areas */
.import_source_list {height:560px; overflow-y:scroll; background-color: #f3f8ff;border: 1px dashed #cccccc;padding:10px;margin-bottom:5px;}
.import_target_list {height:560px; overflow-y:scroll}

/* the area items are dragged into */
.import_target_item {background-color: #f3f8ff;border: 1px dashed #cccccc;padding:15px; margin-bottom:5px;}
.import_target_item .toggle_preview_hide, .customer_import_field .toggle_preview_hide{font-weight:600; cursor:pointer;}
.import_target_item .toggle_preview_show, .customer_import_field .toggle_preview_show {font-weight:600; cursor:pointer;}

/* the draggable item */
.customer_import_field {
   position: relative;
   padding: 5px;
   background: #cce6ff;
   border: 1px solid #6ea5d8;
   border-radius: 2px;
   cursor:grab;
   margin-bottom:5px;
}

.customer_import_field .handle {display:none;}

.customer_import_field:hover .handle {
  display:block;
  height:100%;
  text-align: center;
  white-space: nowrap;
  position:absolute;
  top:0px;
  right:10px;
  font-size:16px;
  opacity:0.5;
}
 
.customer_import_field:hover .handle:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.customer_import_field:hover .handle .handle_inner {
  display: inline-block;
  vertical-align: middle;
}

.customer_import_field:hover .handle .handle_inner .fa{
  font-size:16px;
}

.customer_import_field i[data-asc-role='close']{
  cursor:pointer;
}

.customer_import_field .customer_import_preview > div:first-child{
    margin-top:10px;
}

.field_error_colour {
    background-color:#D32F2F;
    color:#ffffff;
}

.field_error_colour .customer_import_field {
    color:#263238;
}

/*****************************************************/
/* Scheduler Groupings - Board (userScheduleGrouping) */
/*****************************************************/
/* Kanban configuration of the groups that order users on the Scheduler.        */
/* Accent follows the portal theme (--primary-color); per-entity swatch colours */
/* are applied inline from JS. Everything is scoped under .sgb so it does not    */
/* leak into the rest of the portal.                                            */

.sgb {
    --sgb-accent: var(--primary-color, #1391E0);
    font-family: 'Figtree', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1f2733;
    -webkit-font-smoothing: antialiased;
}
.sgb *, .sgb *::before, .sgb *::after { box-sizing: border-box; }
.sgb button { font-family: inherit; cursor: pointer; }
.sgb input { font-family: inherit; }
.sgb .sgb-hidden { display: none !important; }

/* Top bar */
.sgb-topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px; margin-bottom: 4px;
    background: #fff; border: 1px solid #e4e9ef; border-radius: 14px;
}
.sgb-appicon {
    width: 42px; height: 42px; border-radius: 11px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--sgb-accent); color: #fff;
    box-shadow: 0 4px 12px rgba(19,145,224,.30);
}
.sgb-title-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sgb-title { font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: #1f2733; }
.sgb-subtitle { font-size: 12.5px; font-weight: 500; color: #7c8896; }
.sgb-spacer { flex: 1; }

.sgb-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 16px; border-radius: 10px;
    font-size: 13.5px; border: 1px solid transparent; transition: background .12s, border-color .12s, box-shadow .12s;
}
.sgb-btn-secondary { background: #fff; border-color: #d7dee6; color: #334; font-weight: 600; }
.sgb-btn-secondary:hover { border-color: #b9c4d0; }
.sgb-btn-secondary.is-over { border-color: var(--sgb-accent); background: #eef6fd; color: var(--sgb-accent); }
.sgb-btn-primary { background: var(--sgb-accent); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(19,145,224,.32); }
.sgb-btn-primary:hover { filter: brightness(.96); }

/* Body layout */
.sgb-body { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0; flex-wrap: wrap; }
.sgb-boardwrap { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; }

.sgb-caption { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; flex-wrap: wrap; }
.sgb-caption-label { font-size: 13px; font-weight: 700; color: rgba(70,83,98,.5); text-transform: uppercase; letter-spacing: .6px; }
.sgb-caption-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: #7c8896;
    background: #fff; border: 1px solid #e4e9ef; border-radius: 20px; padding: 4px 11px;
}

/* Board / columns row (also a drop target for create-by-drop) */
.sgb-board {
    position: relative;
    display: flex; gap: 16px; align-items: flex-start;
    overflow-x: auto; padding: 4px;
    min-height: 180px; max-height: calc(100vh - 250px);
    outline: 2px dashed transparent; outline-offset: -4px; border-radius: 14px;
    transition: outline-color .12s;
}
.sgb-board.is-over { outline-color: var(--sgb-accent); }

/* The column currently being dragged (its full snapshot is the drag image). */
.sgb-col--dragging { opacity: .4; }
/* Vertical insertion line showing where a reordered group will land. */
.sgb-group-insline {
    position: absolute; width: 3px; border-radius: 99px; background: var(--sgb-accent);
    box-shadow: 0 0 0 3px rgba(19,145,224,.18); pointer-events: none; z-index: 5;
}

.sgb-col {
    flex: none; width: 286px; align-self: flex-start;
    background: #fff; border: 1px solid #e4e9ef; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28,42,61,.04);
    display: flex; flex-direction: column; overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.sgb-col.is-over { border-color: var(--sgb-accent); box-shadow: 0 8px 22px rgba(28,42,61,.12); }

.sgb-col-head { display: flex; align-items: center; gap: 9px; padding: 12px 12px 10px; border-bottom: 1px solid #f0f3f6; }
.sgb-grip { display: flex; flex: none; color: #c2cad4; cursor: grab; }
.sgb-grip:active { cursor: grabbing; }
.sgb-badge {
    flex: none; width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff;
}
.sgb-name-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-size: 15px; font-weight: 700; color: #26303c; padding: 2px 0;
}
.sgb-count {
    flex: none; font-size: 11.5px; font-weight: 700; color: #7c8896;
    background: #eef1f5; border-radius: 20px; padding: 3px 9px;
}
.sgb-del {
    flex: none; width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent;
    color: #b7c0cb; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s;
}
.sgb-del:hover { background: #fdeaea; color: #e5484d; }

.sgb-col-body { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 11px; min-height: 120px; }

/* User card (in a column) */
.sgb-card {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e7ecf1; border-left: 4px solid #cfd6de;
    border-radius: 10px; padding: 8px 11px; cursor: grab;
    box-shadow: 0 1px 2px rgba(28,42,61,.04);
}
.sgb-card:active { cursor: grabbing; }
.sgb-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700; color: #fff;
}
.sgb-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.sgb-card-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sgb-card-name { font-size: 13.5px; font-weight: 600; color: #26303c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgb-card-role { font-size: 11px; font-weight: 500; color: #8a96a4; }
.sgb-card-grip { flex: none; color: #cfd6de; display: flex; }

/* Empty column drop zone */
.sgb-empty {
    flex: 1; border: 1.5px dashed #d3dbe4; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #9aa6b3; font-size: 12.5px; font-weight: 500; text-align: center;
    padding: 14px; min-height: 80px; transition: border-color .12s, background .12s;
}
.sgb-empty.is-over { border-color: var(--sgb-accent); background: #eef6fd; }

/* Insertion line (moved around during a drag, never rebuilt) */
/* Horizontal insertion line for placing a user card; absolutely positioned (the column body is
   position:relative) so it is clearly visible and does not shift the cards, matching the vertical
   group reorder line. */
.sgb-insline {
    position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 99px;
    background: var(--sgb-accent); box-shadow: 0 0 0 3px rgba(19,145,224,.18);
    pointer-events: none; z-index: 4;
}

/* New group button (click to add empty group, drop a user to create one) */
.sgb-newgroup {
    flex: none; width: 200px; align-self: flex-start; min-height: 120px;
    border: 1.5px dashed #cdd6df; border-radius: 16px; background: #fafbfc; color: #7c8896;
    font-weight: 600; font-size: 13.5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px;
    transition: border-color .12s, background .12s, color .12s;
}
.sgb-newgroup:hover { border-color: #b9c4d0; }
.sgb-newgroup.is-over { border-color: var(--sgb-accent); background: #eef6fd; color: var(--sgb-accent); }
/* While a user is dragged over it, the label reads "Drop to create group". */
.sgb-newgroup.is-over .sgb-newgroup-label { font-size: 0; }
.sgb-newgroup.is-over .sgb-newgroup-label::before { content: 'Drop to create group'; font-size: 13.5px; }

/* Available users palette (drop target = unassign) */
.sgb-palette {
    flex: none; width: 300px; align-self: flex-start;
    background: #fff; border: 1px solid #e4e9ef; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28,42,61,.04);
    /* overflow must stay visible so the Quick-add tooltip can escape the panel; the scrolling
       list clips itself and carries the rounded bottom corners. */
    display: flex; flex-direction: column; overflow: visible;
    transition: border-color .12s, box-shadow .12s;
}
.sgb-palette.is-over { border-color: var(--sgb-accent); box-shadow: 0 8px 22px rgba(28,42,61,.12); }
.sgb-palette-head { padding: 14px 14px 12px; border-bottom: 1px solid #f0f3f6; }
.sgb-palette-titlerow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.sgb-palette-title { font-size: 14px; font-weight: 700; color: #26303c; }

.sgb-search { position: relative; display: flex; align-items: center; }
.sgb-search-icon { position: absolute; left: 11px; z-index: 2; pointer-events: none; }
/* .sgb prefix + !important on the left padding so the portal's global input rules cannot
   shrink it and let the placeholder text slide under the search icon. */
.sgb .sgb-search-input {
    width: 100%; height: 38px; border: 1px solid #e4e9ef; border-radius: 10px; background: #f6f8fa;
    padding: 0 12px 0 36px !important; font-size: 13.5px; outline: none; color: #26303c;
}
.sgb-search-input:focus { border-color: var(--sgb-accent); background: #fff; }

.sgb-quickadd { margin-top: 11px; }
.sgb-quickadd-head { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.sgb-quickadd-label { font-size: 11px; font-weight: 700; color: #9aa6b3; text-transform: uppercase; letter-spacing: .5px; }
.sgb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sgb-preset {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #3a4654;
    background: #f3f6f9; border: 1px solid #e4e9ef; border-radius: 8px; padding: 5px 9px;
    transition: border-color .12s, background .12s;
}
.sgb-preset:hover { border-color: var(--sgb-accent); background: #eef6fd; }
.sgb-preset-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.sgb-palette-list { flex: 1; overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 7px; max-height: calc(100vh - 330px); border-radius: 0 0 16px 16px; }
.sgb-pool-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e7ecf1; border-radius: 10px; padding: 7px 10px; cursor: grab; }
.sgb-pool-item:active { cursor: grabbing; }
.sgb-pool-empty { padding: 28px 14px; text-align: center; color: #9aa6b3; font-size: 12.5px; font-weight: 500; }

/* Quick-add info tooltip */
.sgb-tip { position: relative; display: inline-flex; color: #b3bcc7; cursor: help; }
.sgb-bubble {
    visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .14s;
    /* Anchor to the right of the info icon and open leftward: the icon sits near the right edge
       of the screen (inside the palette), so a left-anchored bubble ran off-screen. The viewport
       cap keeps it on-screen on narrow layouts too. */
    position: absolute; top: 140%; right: -8px; left: auto; z-index: 40; width: 236px; max-width: calc(100vw - 32px);
    background: #1f2733; color: #eef2f6; font-size: 11.5px; line-height: 1.5; font-weight: 500;
    padding: 9px 11px; border-radius: 9px; box-shadow: 0 8px 22px rgba(15,27,45,.28); pointer-events: none;
}
.sgb-bubble::after { content: ""; position: absolute; bottom: 100%; right: 13px; left: auto; border: 6px solid transparent; border-bottom-color: #1f2733; }
.sgb-bubble b { color: #fff; font-weight: 700; }
.sgb-tip:hover .sgb-bubble, .sgb-tip:focus-visible .sgb-bubble { visibility: visible; opacity: 1; transform: none; }

@media (max-width: 991px) {
    .sgb-palette { width: 100%; }
    .sgb-palette-list { max-height: 360px; }
}

/***********************************/
/* Quote Inclusions and Exclusions */
/***********************************/

.inclusions-exclusion-col {
    min-height: 200px;
    background-color: #f3f8ff;
    border:1px dashed #cccccc;
}

.inclusions-exclusion-col .form-group {margin-left:0px; margin-right:0px;}


.inclusions-exclusions-template .inclusions-exclusions-template {
    margin-left:0px;
    margin-right:0px;
}

/*hide the buttons until the user hovers over the tempalte*/
.inclusions-exclusions-template .ctrl_btns {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    -webkit-transition: 0.1s; /* Safari */
    transition: 0.1s;
    transition-timing-function: linear;
    opacity:0;
}

/*when the user hovers over the template the buttons are shown*/
.inclusions-exclusions-template:hover > .ctrl_btns {
    opacity:0.5;
}

/*when the user hovers over the template and the button the button becomes fully opaque*/
.inclusions-exclusions-template:hover > .ctrl_btns:hover {
    opacity:1;
}

.inclusions-exclusions-template .btn_add_round {
    background-color:#3c8dbc;
    color:#ffffff;
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.inclusions-exclusions-template .btn_edit_round {
    background-color:#3c8dbc;
    color:#ffffff;
    position:absolute;
    top:10px;
    right:45px;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.inclusions-exclusions-template .btn_delete_round {
    background-color:#d15445;
    color:#ffffff;
    position:absolute;
    top:10px;
    right:80px;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

/* hide handle by default*/
.inclusions-exclusions-template .handle {
    display:none;
}

/* This parent can be any width and height */
.inclusions-exclusions-template:hover > .handle {
  display:block;
  height:100%;
  text-align: center;
  white-space: nowrap;
  position:absolute;
  top:0px;
  left:10px;
  font-size:26px;
  opacity:0.5;
}
 
/* The ghost, nudged to maintain perfect centering */
.inclusions-exclusion-col > .inclusions-exclusions-template:hover > .handle:first-child {
    display: none
}

.inclusions-exclusions-template:hover .handle:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.inclusions-exclusions-template:hover .handle .handle_inner {
  display: inline-block;
  vertical-align: middle;
}

.inclusions-exclusions-template {
   position: relative;
   cursor:grab;

   padding: 20px;
   margin: 10px;
   background: #cce6ff;
   border: 1px dashed #6ea5d8;
   border-radius: 2px;
}

.inclusions-exclusions-template:hover {
   background: #cce6ff;
   border: 1px dashed #444;
   border-radius: 2px;
}

.inclusions-exclusions-template-locked {
    cursor: crosshair;
}

.prevent-input {
    position:absolute;
    left:0;
    bottom:0;
    display:block;
    width:100%;
    height:100%;
    z-index:100;
}

/***********************************/
/*  inclusions exclusions window   */
/***********************************/
.inclusions_exclusions_window h3{margin-top:0px; margin-bottom:15px;}

/***********************************/
/*  purchase order window   */
/***********************************/
.update_purchase_orders_wrapper {height:500px; overflow-y:scroll; background-color:#ecf0f5}
.update_purchase_orders_wrapper .ordered_title {background-color:#ffffff; border:1px solid #cccccc; padding:10px; margin:10px}
.update_purchase_orders_wrapper .ordered_supply_box {padding:10px; margin:10px; background-color:#ffffff; border:1px solid #cccccc}




/***********************************/
/* Quote Pipeline                  */
/***********************************/

/* set the height of the dropzone to 100% when the sticky class is added to the header*/
.sticky-header.sticky ~ .quote-pipeline-card-dropzone{
    height: calc(100%);
}

.pipeline-content-box .box-header h3{
    font-size:24px
}

.pipeline_canvas {
    height:700px;
    /*-moz-box-flex: 1;
    flex-grow: 1;*/
    position: relative;

    overflow-x: auto;
    overflow-y: scroll;
    background-color: #f3f8ff;
    border:1px dashed #cccccc;
}

.pipeline_canvas .board {
    /*bottom: 0;
    left: 0;*/
    /*overflow-x: auto;
    overflow-y: scroll;*/
    /*padding-bottom: 20px;*/
    /*position: absolute;
    right: 0;
    top: 0;*/
    white-space: nowrap;
    /*width:100%;*/
    /*min-height: 100px;*/
    /*background-color: #f3f8ff;
    border:1px dashed #cccccc;*/

    border-spacing:10px;
    display:table;
    height:100%;
}

.quote-pipeline-card-dropzone {
    width:320px;
    min-height:320px;
    height: calc(100% - 80px); /* set height to 100% minus the height of the header*/
}

.pipline-quote-link {
    position:absolute;
    right:6px;
    top:6px;
}

.pipline-quote-link .fa {
    font-size:28px;
}

.pipline-quote-link .fa:hover {
  animation: zoomAnimFrames ease-in-out 0.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: zoomAnimFrames ease-in-out 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: zoomAnimFrames ease-in-out 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: zoomAnimFrames ease-in-out 0.5s;
  -o-animation-iteration-count: 0.5;
  -o-transform-origin: 50% 50%;
  -ms-animation: zoomAnimFrames ease-in-out 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.quote-pipeline-template {
    background: #cce6ff none repeat scroll 0 0;
    outline: 3px solid #10a7f252;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: grab;
    display: inline-block;
    margin: 10px 20px 10px 0;
    height: 100%;
    min-height: 300px;
    position: relative;
    vertical-align: top;
    white-space: nowrap;
    width: 300px;
    z-index: 1;
    display: table-cell;
    border-spacing: 0px;
    overflow: hidden;
}

.quote-pipeline-lane-total h1{
    font-size:10px;
    display:block;
    font-size:14px;
    font-weight:600!important;
    line-height:12px;
    margin-bottom:6px;
    margin-top:0px;
    text-transform:uppercase;
    letter-spacing: -0.5px !important;
    color:#ffffff!important;
}

.quote-pipeline-template .quote-pipeline-lane-total {
   background-color:var(--accent-color-1);
   padding:8px 8px 5px 8px;
}

.quote-pipeline-template .quote-pipeline-lane-total span {
    color:#ffffff;
    margin:0px;
    font-size:16px;
    padding:0px;
    line-height:normal;
}

.quote-pipeline-template .quote-pipeline-lane-title {
    font-size: 16px;
    margin:0px;
    word-wrap: break-word;
    padding:6px;
    font-weight:500;
}

.quote-pipeline-template .quote-pipeline-lane-title-input {
    font-size: 16px;
    padding:6px 6px;
    font-weight:400;
}

.quote-pipeline-template:first-child {
    margin-left:10px;
}

/*hide the buttons until the user hovers over the tempalte*/
.quote-pipeline-template .ctrl_btns {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    -webkit-transition: 0.1s; /* Safari */
    transition: 0.1s;
    transition-timing-function: linear;
    opacity:0;
}

/*when the user hovers over the template the buttons are shown*/
.quote-pipeline-template:hover .ctrl_btns {
    opacity:0.5;
}

/*when the user hovers over the template and the button the button becomes fully opaque*/
.quote-pipeline-template:hover .ctrl_btns:hover {
    opacity:1;
}

.quote-pipeline-template .btn_add_round {
    background-color:#3c8dbc;
    color:#ffffff;
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.quote-pipeline-template .btn_edit_round {
    background-color:#3c8dbc;
    color:#ffffff;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;

    position:absolute;
    right:40px;
    top:5px;
}

.quote-pipeline-template .btn_delete_round {
    background-color:#d15445;
    color:#ffffff;
    width:30px;
    height:30px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;

    position:absolute;
    right:5px;
    top:5px;
}

/* hide handle by default*/
.quote-pipeline-template .handle {
    display:none;
}

.quote-pipeline-template:hover .handle {
  display:block;
  height:100%;
  text-align: center;
  white-space: nowrap;
  position:absolute;
  top:0px;
  left:10px;
}
 
.quote-pipeline-template:hover .handle:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: top;
  margin-right: -0.7em;
}

.quote-pipeline-template:hover .handle .handle_inner {
  display: inline-block;
  vertical-align: top;
  margin-top:2px;
  font-size:20px;
}

.quote-pipeline-template:hover {
   background: #cce6ff;
   outline:3px solid #10a7f2;
   overflow:hidden
}

.quote-pipeline-template:hover .quote-pipeline-lane-title{
    margin-left:20px;
}

.quote-pipeline-template-locked {
    cursor: crosshair;
}

/******************/
/* Card           */
/******************/

.quote-pipeline-card .quote-item-name h1{
    font-size:16px!important;
    font-weight:700!important;
}

.quote-pipeline-card {
   position: relative;
   cursor:grab;
   margin: 6px 0;
   background: #ffffff;
   border: 0px solid #ccc;
   border-radius: 6px;
   border-spacing:0px;
   overflow:hidden;
   box-shadow:var(--elevation-7);
}

.quote-pipeline-card:hover {
   background: #ffffff;
   border: 0px solid #ccc;
   border-radius: 6px;
   border-spacing:0px;
   overflow:hidden;
}


.quote-pipeline-card-header {
    width:100%;
    background-color:var(--wb-orange);
    padding:8px 8px;
}

.quote-pipeline-card-header h1 {
    font-size:14px;
    line-height:14px;
    font-weight:400!important;
    color:#ffffff;
    margin-top:0px;
    margin-bottom:6px;
    word-wrap: break-word;
    white-space: normal;
    color:#ffffff !important
}

.quote-pipeline-card-header p {
    font-size:14px;
    line-height:14px;
    font-weight:600!important;
    color:#ffffff;
    margin-bottom:0px;
    word-wrap: break-word;
    white-space: normal;
}

.quote-pipeline-card-content {
    padding:8px 8px;
}

.quote-pipeline-card-content h1 {
    display:block;
    font-size:12px;
    line-height:12px;
    margin-bottom:6px;
    margin-top:0px;
    text-transform:uppercase;
    letter-spacing: -0.5px !important;
    font-weight:500!important;
}
.quote-pipeline-card-content p {
    display:block;
    font-size:14px;
    line-height:14px;
    font-weight:700!important;
    margin-bottom:0px;
}

/*******************/
/* Whiteboard Card */
/*******************/
.whiteboard-dates .k-list-item {padding:3px;}
.whiteboard-dates .k-list-item .k-list-item-text{width:100%}

.ascora-blue #leaveList {border: 2px solid #e1e7ef;border-radius: var(--widget-radius);}
.ascora-blue #leaveList .leaveCard.badge-success {
    background-color:var(--wb-green);
    border-radius: 30px;
    font-family:var(--modern-font-body);
    margin:3px;
}

.ascora-blue .whiteboard-card .badge_no {
    font-family: var(--modern-font-body);
    font-size: 18px;
    font-weight: 400;
    border-radius:30px;
}

.k-drag-clue .k-list-item-text::before,
.k-drag-clue .k-list-header-text::before,
.k-drag-clue .k-list-optionlabel::before {
    content: none;
}

.k-drag-clue {
    padding-block: 0px;
    padding-inline: 0px;
    border-radius: var(--wb-card-radius);
    background-color:transparent;
    border-width:0px;
    box-shadow:var(--wb-card-drag-shadow);
}

.whiteboard-card {
    position: relative;
    cursor: grab;
    border-radius: var(--wb-card-radius);
    border-spacing: 0px;
    /*min-width: 220px;*/
    width: 100%;
    background-color: #f1f1f1;
    overflow: hidden;
    box-shadow: 2px 2px 6px -3px rgba(0, 25, 73, 0.40);
}

.ascora-blue .whiteboard-dates .k-list-item-text::before,
.ascora-blue .whiteboard-dates .k-list-header-text::before,
.ascora-blue .whiteboard-dates .k-list-optionlabel::before {
    content: none;
}


.whiteboard-dates .card{
    border:1px solid #cccccc;
    box-shadow:none;
}

/* Set all contents of card to use content-box sizing instead of the default border-box*/
.whiteboard-card *{
    -webkit-box-sizing:content-box!important;
    box-sizing:content-box!important;
}

.whiteboard-card .handle {display:none; z-index:2}
.whiteboard-card:hover .handle {display:block;height:100%;text-align: center;white-space: nowrap;position:absolute;top:0px;right:10px;font-size:26px;}
.whiteboard-card:hover .handle .handle_inner {display: inline-block;vertical-align: middle; opacity:0.2;}
.whiteboard-card:hover .handle:before {content: '';display: inline-block;height: 100%;vertical-align: middle; color:black;}

.whiteboard-card .badge_no {
    display:inline-block;
    background-color: #ffffff;
    color: #263238;
    font-weight: bold;
    padding: 5px;
    font-size: 14px;
    line-height: 15px;
    border-radius:60px;
    width:15px;
    height:15px;
    text-align:center;
}

.whiteboard-card-content {
    padding:20px 0px 0px 0px;
    min-height:60px;
}

.whiteboard-card-content p {
    font-family: var(--modern-font-body);
    font-size: var(--wb-card-font-size-1);
    font-weight: 400;
    line-height:16px;

    display:block;
    margin-bottom:0px;
    color:black;
}

.ascora-blue .k-list-item .k-list-item-text .whiteboard-card-content p {
    font-family: var(--modern-font-body);
    font-size: var(--wb-card-font-size-1);
    font-weight: 400;
    line-height: 14px;
}

.whiteboard-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15px
}
.ascora-blue .whiteboard-dates .card .card-header{border:0px;}
.ascora-blue .whiteboard-dates .card .card-header h5{font-size: 16px; word-wrap: break-word;font-weight:400}

.ascora-blue .whiteboard-dates .k-list-scroller {
    border: 1px dashed var(--wb-column-border);
    border-top-style: dashed;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-style: dashed;
    background-color: var(--wb-column-bg);
}

.ascora-blue .whiteboard-dates .k-list-scroller {
    min-height: 100px;
}

.ascora-blue .whiteboard-card-dropzone {
    width: 320px;
    min-height: 320px;
    height: calc(100% - 80px);
}

.k-listbox .k-list-scroller.userListSrollAreaStyle {border: 1px dashed #6ea5d8; border-style:dashed; background-color:#f3f8ff}

.whiteboard-dates .k-ghost {border: 1px dashed #6ea5d8; border-style:dashed;-webkit-box-sizing:border-box;box-sizing:border-box;}

.whiteboard-dates .k-listbox .k-item {padding:3px;}

/*.whiteboard-vh {height: calc(100% - 165px);}*/
.whiteboard-vh {height:82%; min-height:500px;}
.whiteboard-vh .k-listbox {height:100%}
.whiteboard-vh .card {height:100%}

/***********************/
/*   Follow ups     */
/***********************/
#EmailTemplateDiv table.k-editor
{
    height: 894px;
}

.followup_content .page-header{
    font-size:20px;
}

.section-header
{
    font-size: 20px !important;
    font-weight: 500;
    margin-left: 0;
    margin-right: 0px;
    margin-top: 20px;
    color:#455a64;
}

/***********************/
/*   Access Denied     */
/***********************/
.access_denied_content {max-width:500px; margin-bottom:auto; text-align:center; display: block; margin: auto; height:500px}
.access_denied_content p {margin-bottom:15px;}
.access_denied_content h2{margin-top:5px; margin-bottom:25px; color:#ff8f00}
.access_denied_content .access_denied_glyph{font-size:50px;}


.access_denied_content .btn{min-width:300px; margin-bottom:5px;}

/***********************/
/*   Error Page        */
/***********************/
.error_content {max-width:500px;margin: auto;display: block; margin-top:100px}
.error_content .error_coffee_image {width:100%; height:auto}
.error_content .error_message {position:relative; top:120px; text-align:center; font-family: 'roboto',sans-serif; font-size:18px; color:#3e2723}

/***********************/
/*   Feature Locked    */
/***********************/
.feature_locked_content {max-width:1000px; margin:auto}
.feature_locked_content h2{margin-bottom:20px; margin-top:0px;}
.feature_locked_content .feature_locked_img {width:100%; height:auto}
.feature_locked_content .alert .fa {font-size:25px; vertical-align:middle}
.feature_locked_content .alert span {vertical-align:middle}

/***********************/
/*   alert             */
/***********************/
.alert_content {text-align:center}
.alert_content h1 {margin:0px; font-size:20px;}
.alert_content p {line-height:22px}
.alert_content .alert_glyph {font-size:60px; margin-bottom:10px; color:#ffab00;}

/****************************/
/*   Convert Quote to Job   */
/****************************/
.convert_job_table {display:table; border-collapse:collapse; width:100%}
.convert_job_table .btn{width:100%}
.convert_job_table .convert_job_row{display:table-row}
.convert_job_table .convert_job_cell{display:table-cell; border:1px solid #d2d6de; padding:5px; vertical-align:middle}
.convert_job_table .convert_job_cell:first-child{width:100px}


/****************************************/
/*   Supplier Invoice Allocate to Job   */
/****************************************/
#allocateToJobWindow #jobGrid .k-grid-content {min-height:300px;}

/***********************/
/*   Footer            */
/***********************/
.main-footer {}
.main-footer .powered_by_ascora {vertical-align:middle}
.main-footer .powered_by_ascora label{display:inline-block; vertical-align:middle; margin-bottom:0px; margin-right:8px;}
.main-footer .powered_by_ascora img{display:inline-block; width:200px; vertical-align:middle}

/***********************/
/*  iframe fix for IE  */
/***********************/
/*ie fix so that dropdowns appear over iframes*/
iframe.embed {
z-index: 1  !important;
position: relative  !important;
}

/*ie fix so that dropdowns appear over iframes*/
.k-calendar-container{
    z-index: 9999999999 !important;
    position: absolute !important;
}

/*ie fix so that dropdowns appear over iframes*/
iframe.ie-fix {
    position: absolute;
    border: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}


/*Style numeric input spinner*/
.quantity_spinner {
  display:inline-block;
  vertical-align:middle;
  position: relative;
}

.quantity_spinner input[type=number]::-webkit-inner-spin-button,
.quantity_spinner input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

.quantity_spinner input[type=number]
{
  -moz-appearance: textfield;
}

.quantity_spinner input {
  height: 34px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding: 0 40px;
  border: 1px solid #3498db;
  text-align:right;
}

.quantity_spinner input:focus {
  outline: 0;
}

.quantity_spinner .quantity-nav {
  float: left;
  position: relative;
  height: 34px;
}

.quantity_spinner .quantity-button {
  position: relative;
  cursor: pointer;
  width: 28px;
  text-align: center;
  color: #333;
  font-size: 12px;
  font-family: 'roboto',sans-serif;
  line-height: 1.4;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity_spinner .quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  background-color:#3498db;
}

.quantity_spinner .quantity-button.quantity-down {
  position: absolute;
  bottom: 1px;
  height: 50%;
  background-color:#3498db;
}

/************************/
/* change mobile access */
/************************/

.change_access_window h2 {margin-bottom:20px;}

.change_access_window .callout p{font-size:14px; font-weight:400}

.change_access_window .table_mobile_access {height:500px; width:100%;}

.change_access_window .table_mobile_access .title{
    height:20px;
    background-color: #0277bd;
    color: #ffffff;
    font-family: "roboto",sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}
.change_access_window .table_mobile_access .title h2{
    color: #ffffff;
    font-family: "roboto",sans-serif;
    font-size: 28px;
    font-weight: 400;
    margin-top:15px;
    margin-bottom:15px;
}
.change_access_window .table_mobile_access .summary{padding:10px; background-color:#e1f5fe}
.change_access_window .table_mobile_access .summary ul {
    margin-bottom: 10px;
    margin-top: 10px;
    padding-left: 20px;
}
.change_access_window .table_mobile_access .summary ul li{padding: 0 0 10px 0}

.change_access_window .table_mobile_access .cost {
    height:20px;
    background-color: #0277bd;
    color: #ffffff;
    font-family: 'roboto',sans-serif;
    font-size: 30px;
    font-weight: 300;
    padding-bottom: 25px;
    padding-top: 25px;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
}
.change_access_window .table_mobile_access .button {height:20px; text-align:center; padding:10px;}


/*********************************/
/* Supplier Invoice      */
/*********************************/

/*.k-popup.k-group {width:300px;}*/

/*********************************/
/* Process Supplier Invoice      */
/*********************************/


/*
    orange
    #C97E00 - orange
    #F2B245 - light orange
    #FFD58E - very light orange

    blue
    #2770B9 - blue
    #81C0FF - light blue
    #C3E1FF - very light blue
*/

/*[data-asc-rowid] .k-grid > div > table > tbody > tr.error_row {
    background-color: #ff0000
}

[data-asc-rowid] .k-grid > div > table > tbody > tr.error_row.k-alt {
    background-color: #ff7000
}*/

/*[data-asc-rowid] .k-grid > div > table > tbody > tr.valid_row {
    background-color: #90ee90
}

[data-asc-rowid] .k-grid > div > table > tbody > tr.valid_row.k-alt {
    background-color: #90fe90
}

#supplierInvoiceGrid.k-grid > div > table > tbody > tr.error_row {
    background-color: #ffc6c6
}

#supplierInvoiceGrid.k-grid > div > table > tbody > tr.error_row.k-alt {
    background-color: #ffd6c6
}*/

/*#supplierInvoiceGrid.k-grid > div > table > tbody > tr.valid_row {
    background-color: #F2B245
}

#supplierInvoiceGrid.k-grid > div > table > tbody > tr.valid_row.k-alt {
    background-color: #C3E1FF
}

#supplierInvoiceGrid.k-grid .k-detail-row .k-header{
    background-color: #C97E00;
}


tr.dirty_row {
    background-color: #fbff00 !important
}*/



/*#supplierInvoiceGrid.k-grid th.k-header,
#supplierInvoiceGrid.k-grid .k-grid-header
{
    background:#2770b9;
}

#supplierInvoiceGrid.k-grid th.k-header,
#supplierInvoiceGrid.k-grid th.k-header .k-link
{
    background:#2770b9;
}

#supplierInvoiceGrid.k-grid .k-grid-content>table>tbody>tr
{
    background:#8DDAFF;
}


#supplierInvoiceGrid.k-grid .k-grid-content>table>tbody>.k-alt
{
    background:#C1EAFF;
}

#supplierInvoiceGrid.k-grid table tr.k-state-selected
{
    background: #f99;
    color: #fff;
}*/

/*inner grid*/
#supplierInvoiceGrid .k-detail-row .k-grid th.k-header,
#supplierInvoiceGrid .k-detail-row .k-grid .k-grid-header
{
    /*dark blue*/
    background-color:#007DB9;
}

/*rows*/
#supplierInvoiceGrid .k-detail-row .k-grid .k-grid-content>table>tbody>tr
{
    /*light blue*/
    background:#8DDAFF;
}

#supplierInvoiceGrid .k-detail-row .k-grid .k-grid-content > table > tbody > .k-alt {
    /*very light blue*/
    background: #C1EAFF;
}

/*selection*/
#supplierInvoiceGrid.k-grid table tr.k-state-selected
{
    background: #f99;
    color: #fff;
}

/*remove hover state for expanded content*/
#supplierInvoiceGrid .k-grid .k-grid-content > table > tbody > tr:hover {
    color:#263238;
}

/* Dirty Row */
/* hi-lights edited row*/
#supplierInvoiceGrid.k-grid table tr.dirty_row {
    background-color: #fdd835 !important;
    color:#263238 !important;
}


#supplierInvoiceGrid {
    font-size:10pt; 
    /*word-break:break-all; 
    word-spacing:normal; 
    word-wrap:break-word*/
}

/*************************************************************************************/
/* Import Supplier Invoice                                                           */
/* Set height on td, center checkboxes, add margin to bottom of checkbox             */
/*************************************************************************************/

#supplierInvoiceGrid.k-grid td.grid-check-cell {height:40px; text-align:center; padding:0px;}
#supplierInvoiceGrid.k-grid th.grid-check-cell {height:40px; text-align:center; vertical-align:middle; padding:0px;}
#supplierInvoiceGrid.k-grid th.grid-check-cell .squaredCheckbox_sm{margin-bottom:0.4em}

/*
#supplierInvoiceGrid.k-grid td.grid-check-cell label{height:100%!important; display:block}
#supplierInvoiceGrid.k-grid td.grid-check-cell label input[type="checkbox"]{height:100%!important; width:100%; display:block; margin:0px;}*/

/*************************************************************************************/
/* Manual Import Supplier Invoice                                                    */
/* Set height on td, center checkboxes, add margin to bottom of checkbox             */
/*************************************************************************************/

#manualImportGrid.k-grid td.grid-check-cell {height:40px; text-align:center; padding:0px;}
#manualImportGrid.k-grid th.grid-check-cell {height:40px; text-align:center; vertical-align:middle; padding:0px;}
#manualImportGrid.k-grid th.grid-check-cell .squaredCheckbox_sm{margin-bottom:0.4em}

/*
#manualImportGrid.k-grid td.grid-check-cell label{height:100%!important; display:block}
#manualImportGrid.k-grid td.grid-check-cell label input[type="checkbox"]{height:100%!important; width:100%; display:block; margin:0px;}*/



/********************************/
/* Email Invoice Window         */
/********************************/
#StatementEmailerForm .form-group,
#jobEmailerForm .form-group,
#quoteEmailerForm .form-group,
#invoiceEmailerForm .form-group,
#emailBookingWindow .form-group{
    margin-bottom:10px
}

#StatementEmailerForm #recipientGrid.k-grid,
#jobEmailerForm #recipientGrid.k-grid,
#quoteEmailerForm #recipientGrid.k-grid,
#invoiceEmailerForm #recipientGrid.k-grid,
#emailBookingWindow #recipientGrid.k-grid{
    height:160px!important;
    font-size:0.95rem; 
    line-height:10px; 
    word-break:break-all; 
    word-wrap:break-word; 
    white-space:normal
}

#StatementEmailerForm #recipientGrid.k-grid td,
#jobEmailerForm #recipientGrid.k-grid td,
#quoteEmailerForm #recipientGrid.k-grid td,
#invoiceEmailerForm #recipientGrid.k-grid td,
#emailBookingWindow #recipientGrid.k-grid td,
#StatementEmailerForm #recipientGrid.k-grid th,
#jobEmailerForm #recipientGrid.k-grid th,
#quoteEmailerForm #recipientGrid.k-grid th,
#invoiceEmailerForm #recipientGrid.k-grid th,
#emailBookingWindow #recipientGrid.k-grid th{
    font-size:0.95rem; 
    padding:5px;
}

/*********************************/
/* Bulk Actions                  */
/*********************************/
/*span.bulk-hint, i.bulk-hint {
    font-size: 30px;
    position: relative;
    left: 10px;
    top: 10px;
    padding-right: 10px;

}

span.bulk-hint-sm, i.bulk-hint-sm {
    font-size: 20px;
    left: 9px;
    padding-right: 9px;
    position: relative;
    top: 2px;
}*/

/*********************************/
/* Bulk Actions: revised         */
/*********************************/

.bulk-hint-sm {
    font-size: 15px;
    margin-right:10px;
    color:#2770b9;
}

.bulk-hint-sm .fa {
    font-size: 20px;
    left: 9px;
    padding-right: 2px;
    position: relative;
    top: 2px;
    margin-right:10px;
}

/*********************************/
/* Asc Grid                      */
/*********************************/

/*td.grid-check-cell,
th.grid-check-cell {
    padding: 0!important
}

td.grid-check-cell > label,
th.grid-check-cell > label {
    margin: 0;
    width: 100%;
    height: 100%;
    display:block;
    text-align:center;
}*/


/*********************************/
/* Button Spinner                */
/*********************************/

/*
.has-spinner .spinner{
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

.has-spinner .hide_on_spin {
  display: inline-block;
  opacity: 1;
  width: auto;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

.has-spinner .fa{
    margin-right:0px;
}

.has-spinner.processing {
  cursor:progress;
}

*/

/*
.has-spinner.processing .spinner {
    opacity: 1;
    width: auto;
    display:inline-block
}
*/

/*hide the other icon when the spin icon appears*/
/*
.has-spinner.processing .hide_on_spin {
    display: inline-block;
    opacity: 0;
    width: 0;
}
*/

/*.has-spinner.btn-mini.active .spinner {
    width: 10px;
}

.has-spinner.btn-small.active .spinner {
    width: 13px;
}

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}*/

/* Purchase Order lines*/
#purchaseOrderLinesGrid #purchaseOrderLinesGrid .k-grouping-header,
/*#purchaseOrderLinesGrid .k-pager-wrap,*/
#purchaseOrderLinesGrid .k-group-footer td,
/*#purchaseOrderLinesGrid .k-grid-footer,*/
/*#purchaseOrderLinesGrid .k-footer-template td,*/
#purchaseOrderLinesGrid .k-widget .k-status,
#purchaseOrderLinesGrid .k-calendar th,
#purchaseOrderLinesGrid .k-dropzone-hovered,
#purchaseOrderLinesGrid .k-widget.k-popup {/*background-color:#f39c12;*/ background-color:#007db9}

#purchaseOrderLinesGrid .k-grid-content td.k-group-cell {background-color:#007db9}

#purchaseOrderLinesGrid .k-grouping-row td {background-color:#8ddaff; border-bottom:1px solid #007db9; color:#4c5356}


/* addSupplies.css file, this is legacy styling that may or may not be needed*/
/**#addSuppliesTable_length select 
{
    width: 30%;
}

#addEquipmentTable_length select 
{
    width: 30%;
}**/

.select_filter {
    width: 90px;
}
.search_init {
    color: #999;
}
   
#addSupplies_modalDialog
{
    /*width: 950px;
    margin: -400px 0 0 -475px;*/

    margin: -320px 0 0 -540px;
    width: 1050px;
}
 
#addEquipment_modalDialog
{
    width: 950px;
    margin: -250px 0 0 -475px;
}

#addQuoteSupplies_modalDialog .modal-body
{
    /*max-height:620px;*/
}

/*.modal-body {max-height:620px;}*/

.editJobSupplies .control-group{margin-bottom:10px;}
/*.editJobSupplies .modal-body{max-height:620px}*/
/*                      */

/*********************************/
/* Franchise Wizard: Step Circles    */
/*********************************/
.franch-circles .fa{font-size:30px;}
.franch-circles {}
.franch-circles .nav-item {
    background: #f5f5f5 none repeat scroll 0 0;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color: #bbb;
    height: 75px;
    outline-style: none;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
    width: 75px;
    z-index: 99;
    cursor:pointer;
}

.franch-circles .nav-item::before {
    background-color: #cfd8dc;
    height: 5px;
    position: absolute;
    top: 50%;
    width: 90%;
    z-index: 0;
    margin-left:60px;
}


#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}

#progressbar .active {
    color: #000000
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 25%;
    float: left;
    position: relative
}

#progressbar #account:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f023"
}

#progressbar #personal:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f007"
}

#progressbar #payment:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f09d"
}

#progressbar #confirm:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c"
}

#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 18px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: skyblue
}

/*********************************/
/* Setup Wizard: Step Circles    */
/*********************************/

.wizard-circles .fa{font-size:30px;}
.wizard-circles .sw-container {min-height: 300px;}
.wizard-circles .step-content {background-color: #fff;padding: 10px 0;text-align: left;}

.wizard-circles > ul.step-anchor {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    display: block;
    list-style: outside none none;
    margin-bottom: 40px;
    margin-top:20px;
    position: relative;
}

.wizard-circles > ul.step-anchor::before {
    background-color: #cfd8dc;
    height: 5px;
    position: absolute;
    top: 50%;
    width: 80%;
    z-index: 0;
    margin-left:60px;
}

.wizard-circles > ul.step-anchor > li {border: medium none;margin-left: 60px;}
.wizard-circles > ul.step-anchor > li:first-child {border: medium none;margin-left: 0px;}

.wizard-circles > ul.step-anchor > li > a {
    background: #f5f5f5 none repeat scroll 0 0;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color: #bbb;
    height: 75px;
    outline-style: none;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
    width: 75px;
    z-index: 99;
    cursor:pointer;
}

.wizard-circles > ul.step-anchor > li > a:hover {background: #f5f5f5 none repeat scroll 0 0;border-width: 2px;color: #bbb;}
.wizard-circles > ul.step-anchor > li > a > small {bottom: -30px;color: #ccc;display: block;position: relative;}

.wizard-circles > ul.step-anchor > li.active > a {background-color: #ffffff;border:3px solid #90a4ae;color: #90a4ae; cursor:pointer;}
.wizard-circles > ul.step-anchor > li.active > a:hover {color:#607d8b; border:3px solid #607d8b}
.wizard-circles > ul.step-anchor > li.active > a:hover > small{color:#607d8b;}
.wizard-circles > ul.step-anchor > li.active > a > small {color: #90a4ae;}

.wizard-circles > ul.step-anchor > li.done > a {background: #03a9f4 none repeat scroll 0 0;border-color: #03a9f4;color: #fff; cursor:pointer;}
.wizard-circles > ul.step-anchor > li.done > a > small {color: #03a9f4;}

.wizard-circles > ul.step-anchor > li.current > a {background-color: #ffffff;border:3px solid #03a9f4;color: #03a9f4; cursor:pointer;}
.wizard-circles > ul.step-anchor > li.current > a > small {color: #03a9f4;}

/*animated bar*/
.wizard-circles .wizard_step_bar {
    background-color: #03a9f4;
    color: blue;
    height: 5px;
    left: -65px;
    position: absolute;
    top: 49%;
    width: 1px;
}

/*animate bar*/
/*animate the bar to full width when a step is clicked*/
.wizard-circles li.current .wizard_step_bar{
  width:68px;

  animation: slide 1s; /* Normal */
  -webkit-animation: slide 1s; /* Safari and Chrome */
  -moz-animation: slide 1s; /* Mozilla */
  -ms-animation: slide 1s; /* IE */
  -o-animation: slide 1s; /*Opra */
}

/* set the bar to full width if the step has already been done*/
.wizard-circles li.done .wizard_step_bar{width:68px;}

@keyframes slide{from {width:0px;}to {width:68px;}}  /* Normal */
@-webkit-keyframes slide {from {width:0px;}to {width:68px;}} /* Safari and Chrome */
@-moz-keyframes slide {from {width:0px;}to {width:68px;}} /* Mozilla */
@-ms-keyframes slide {from {width:0px;}to {width:68px;}} /* IE */

/* animate circle */
.wizard-circles li.current a{
  animation: zoomAnimFrames ease-in-out 0.5s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: zoomAnimFrames ease-in-out 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: zoomAnimFrames ease-in-out 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: zoomAnimFrames ease-in-out 0.5s;
  -o-animation-iteration-count: 0.5;
  -o-transform-origin: 50% 50%;
  -ms-animation: zoomAnimFrames ease-in-out 0.5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes zoomAnimFrames{
  0% {transform:  scaleX(1.00) scaleY(1.00) ;}
  50% {transform:  scaleX(1.20) scaleY(1.20) ;}
  100% {transform:  scaleX(1.00) scaleY(1.00) ;}
}

@-moz-keyframes zoomAnimFrames{
  0% {-moz-transform:  scaleX(1.00) scaleY(1.00) ;}
  50% {-moz-transform:  scaleX(1.20) scaleY(1.20) ;}
  100% {-moz-transform:  scaleX(1.00) scaleY(1.00) ;}
}

@-webkit-keyframes zoomAnimFrames {
  0% {-webkit-transform:  scaleX(1.00) scaleY(1.00) ;}
  50% {-webkit-transform:  scaleX(1.20) scaleY(1.20) ;}
  100% {-webkit-transform:  scaleX(1.00) scaleY(1.00) ;}
}

@-ms-keyframes zoomAnimFrames {
  0% {-ms-transform:  scaleX(1.00) scaleY(1.00) ;}
  50% {-ms-transform:  scaleX(1.20) scaleY(1.20) ;}
  100% {-ms-transform:  scaleX(1.00) scaleY(1.00) ;}
}

/*********************************/
/* Setup Wizard: Content         */
/*********************************/

.box-wizard .box-body{min-height:600px; padding-bottom: 80px;}

.box-wizard .btn_wizard.btn_start img{width:50px; height:auto; margin-bottom:4px;}
.box-wizard .btn_wizard.btn_finish {margin:auto; display:block;}
.box-wizard .btn_wizard.btn_finish img{width:65px; height:auto; margin-bottom:6px;}

.box-wizard .btn_wizard,
.box-wizard .btn_wizard:link, 
.box-wizard .btn_wizard:active
{
    background-color: #0288d1!important;
    padding:20px 45px;
    border:0px;
    color: #ffffff!important;
    font-family: "Open Sans",sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration:none;
    text-align:center;
}

.box-wizard .btn_wizard:hover{border:0px; background-color: #03a9f4!important; color: #ffffff!important; text-decoration:none;}

.box-wizard .welcome_message {font-size:18px; color:#00a65a}
.box-wizard h3 {margin-bottom:20px;}

.box-wizard .welcome_message h4{font-size:28px; font-family: "roboto",sans-serif; font-weight:400}
.box-wizard .welcome_message ul li{margin-bottom:10px; line-height:26px;}

.box-wizard .wizard_complete_tick {background: #00a65a none repeat scroll 0 0;border-radius: 50%;width:100px;height:100px;text-align: center;}
.box-wizard .wizard_complete_tick .fa{color:#ffffff;font-size:60px;line-height:100px;}

.box-wizard .wizard_complete_table {width:600px;display:table; margin:auto; display:block; margin-bottom:60px;}
.box-wizard .wizard_complete_table p{font-size:18px;}
.box-wizard .wizard_complete_table .wizard_complete_cell {display:table-cell; vertical-align:middle; padding-right:20px;}

.box-wizard .wizard_nav_buttons {max-width:1000px; width:100%; position:absolute; bottom:10px;}
.box-wizard .wizard_nav_buttons .btn {padding:10px 20px; font-size:20px}

.box-wizard .wizard_alert {margin-top:100px}

.box-wizard .wizard_alert p {
    position: relative; /* Helps us control overlap */
    padding-left: 65px; /* Creates space for the Phone Icon */
}

.box-wizard .wizard_alert p:after {
  content: '\f071';
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 600;
  position: absolute;
  left: 0; /* Adjust as needed */
  top: 17px; /* Adjust as needed */
  font-size:50px;
  line-height:50px;
}

#wizardContent {max-width:1000px; width:100%; margin:auto; display:block}


.wizard_complete_animation{
  animation: tadaAnimFrames linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaAnimFrames linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaAnimFrames linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: tadaAnimFrames linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: tadaAnimFrames linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

/*Animation: Zoom in then shake*/
@keyframes tadaAnimFrames{
  0% {transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
  10% {transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  20% {transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  30% {transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  40% {transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  50% {transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  60% {transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  70% {transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  80% {transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  90% {transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  100% {transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;}
}

@-moz-keyframes tadaAnimFrames{
  0% {-moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
  10% {-moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  20% {-moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  30% {-moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  40% {-moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  50% {-moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  60% {-moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  70% {-moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  80% {-moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  90% {-moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  100% {-moz-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;}
}

@-webkit-keyframes tadaAnimFrames {
  0% {-webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
  10% {-webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  20% {-webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  30% {-webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  40% {-webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  50% {-webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  60% {-webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  70% {-webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  80% {-webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  90% {-webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  100% {-webkit-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;}
}

@-ms-keyframes tadaAnimFrames {
  0% {-ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;}
  10% {-ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  20% {-ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;}
  30% {-ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  40% {-ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  50% {-ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  60% {-ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  70% {-ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  80% {-ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;}
  90% {-ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;}
  100% {-ms-transform:  rotate(0deg) scaleX(1.20) scaleY(1.20) ;}
}

.wizard-transition_Disable {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/*Style Placeholder Text*/

.box-wizard ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: gray;
  font-style:italic;
  opacity: 0.5;
}
.box-wizard ::-moz-placeholder { /* Firefox 19+ */
  color: gray;
  font-style:italic;
  opacity: 0.5;
}
.box-wizard :-ms-input-placeholder { /* IE 10+ */
  color: gray;
  font-style:italic;
  opacity: 0.5;
}
.box-wizard :-moz-placeholder { /* Firefox 18- */
  color: gray;
  font-style:italic;
  opacity: 0.5;
}

.box-wizard ::-moz-placeholder {
  color: gray;
  font-style:italic;
  opacity: 0.5;
}

/*Remove Dropzone on file uploader*/
.remove_dropzone {display:inline-block}
.remove_dropzone .k-upload.k-header{background-color:transparent!important; border-color:transparent!important}
.remove_dropzone .k-upload .k-upload-button {margin-right:0px; padding:6px; line-height:1.42857143em; background-color:#3c8dbc; border-color:#367fa9; cursor:pointer}
.remove_dropzone .k-upload .k-upload-button:hover {background-color:#367fa9; cursor:pointer}
.remove_dropzone .k-upload .k-upload-button input {font:14px normal !important; top:0; width:100%; cursor:pointer}
.remove_dropzone .k-upload .k-dropzone-active em {display:none}
.remove_dropzone .k-upload .k-upload-files{display:none}
.remove_dropzone .k-dropzone {background-color:transparent!important; border-color:transparent!important; color:transparent; padding:0px;}
.remove_dropzone .k-dropzone .k-upload-status {display:none}
.remove_dropzone .k-dropzone-active.k-dropzone-hovered {background-color:transparent!important; border-color:transparent!important; color:transparent}
.remove_dropzone .k-dropzone-active em {color:transparent}
.remove_dropzone .k-dropzone-hint {display:none}

/*add upload icon to button*/
.remove_dropzone .k-button span:before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 600;
    content: "\f56f";
    color: #ffffff;
    margin-right: .5em;}

.box.box-solid > .box-header > .box-tools .remove_dropzone .k-upload .k-upload-button {
    border:0px;
}


/***************************/
/* Roster: Client          */
/***************************/

.roster_info {
    padding:10px;
    font-size:12px;
}
.roster_info ol{
    padding:0px 0px 0 15px;
    margin:0px;
}

#clientRosterUserTable.k-grid td{padding:5px 0.6em}
#clientRosterUserTable .k-grid-content {
    max-height: 130px;
}


/*.clientRosterTable tbody {
    max-height: 368px;
    overflow-y: auto;
    overflow-x: hidden;
}*/

.clientRosterTable {
    background-color:#e1f5fe;
    border-collapse: separate; 
    border-spacing: 5px;
    margin:auto;
    padding:5px;
}

.clientRosterTable tbody, .clientRosterTable thead tr, .clientRosterTable tfoot tr { display: block; }
.clientRosterTable tbody td, .clientRosterTable thead th, .clientRosterTable tfoot td {width: 120.4444px;}
.clientRosterTable tbody {height: 440px;overflow-y: scroll;overflow-x: scroll;}

.clientRosterTable thead {background-color:#01579b; color:#ffffff}
.clientRosterTable thead th {text-align: center; border:1px solid #0288D1; background-color:#0288D1}
.clientRosterTable thead, .clientRosterTable tbody { display: block; }

.clientRosterTable thead th:first-child, .clientRosterTable tbody td:first-child, .clientRosterTable tfoot td:first-child {
    width: 180.6666px !important;
}

.clientRosterTable thead th:nth-child(2), .clientRosterTable tbody td:nth-child(2), .clientRosterTable tfoot td:nth-child(2) {
    width: 60.2222px !important;
}

.clientRosterTable thead th:last-child, .clientRosterTable tfoot td:last-child {
    width: 138.22px; /* 140px + 16px scrollbar width */
    padding-right: 18px;
}

.clientRosterTable tfoot {background-color:#01579b; color:#ffffff; font-weight:400}
.clientRosterTable tfoot td {border:1px solid #0288D1; background-color:#0288D1}

.clientRosterTable .cell_rostered.name {background-color: #90caf9;}
.clientRosterTable .cell_rostered.hours {background-color: #90caf9;}

.clientRosterTable .cell_rostered.booked {background-color: #2196f3; color:#ffffff; border-radius:8px}

.ascora-blue .clientRosterTable .cell_rostered,
.ascora-blue .clientRosterTable .cell_rostered .cell_inner{border-radius:8px; border:0px}

.clientRosterTable .cell_rostered.available{background-color: #fdd835; cursor:pointer}

.clientRosterTable th, .clientRosterTable td {padding: 10px;}
.clientRosterTable td {text-align:center;}

/*Client Roster Modernised*/

.ascora-blue .cell_rostered {font-family:var(--modern-font-body);}

.ascora-blue .clientRosterTable {border-radius:var(--cr-card-radius); border:0px!important; background-color:#E3F1FF; margin:0px}

.ascora-blue .clientRosterTable tfoot,
.ascora-blue .clientRosterTable thead {background-color:var(--accent-color-1);border-radius:var(--cr-card-radius)}

.ascora-blue .clientRosterTable tfoot td,
.ascora-blue .clientRosterTable thead th {
    border-radius:var(--cr-card-radius);
    font-family:var(--modern-font-body);
    font-weight:600;
    font-size:15px;
    background-color:rgba(255, 255, 255, 0.3);
    border:0px;
    padding:5px;
}

.ascora-blue .clientRosterTable .name,
.ascora-blue .clientRosterTable .hours
{
    color:#ffffff;
}

/*.ascora-blue .clientRosterTable thead tr th:nth-child(2),
.ascora-blue .clientRosterTable tbody tr td:nth-child(2),
.ascora-blue .clientRosterTable tfoot tr td:nth-child(2)
{
    width:80px!important;
}*/

.ascora-blue .clientRosterTable .cell_rostered .btn_new_round,
.ascora-blue .clientRosterTable .cell_rostered .btn_copy_round,
.ascora-blue .clientRosterTable .cell_rostered .btn_delete_round,
.ascora-blue .clientRosterTable .cell_rostered .btn_grey_round,
.ascora-blue .clientRosterTable .cell_rostered .btn_darkgrey_round,
.ascora-blue .clientRosterTable .cell_rostered .btn_edit_round
{
    width:26px;
    height:26px;
}

/* Make client roster responsive*/
.ascora-blue .clientRosterTable{
    width:100%!important;
}

.ascora-blue .clientRosterTable thead tr,
.ascora-blue .clientRosterTable tbody tr,
.ascora-blue .clientRosterTable tfoot tr
{
    display:flex!important;
}

.ascora-blue .clientRosterTable thead tr th,
.ascora-blue .clientRosterTable tbody tr td,
.ascora-blue .clientRosterTable tfoot tr td
{
    width:11.11%!important;
}

.ascora-blue .clientRosterTable tfoot tr{padding-top:5px; padding-bottom:5px; padding-left:5px;}

.ascora-blue .clientRosterTable tfoot tr td{margin-right:5px}
.ascora-blue .clientRosterTable tfoot tr td:last-child{margin-right:22px}

.ascora-blue .clientRosterTable thead tr{padding-top:5px; padding-bottom:5px; padding-left:5px;}
.ascora-blue .clientRosterTable thead tr th{margin-right:5px}
.ascora-blue .clientRosterTable thead tr th:last-child{margin-right:22px}

.ascora-blue .clientRosterTable tbody {margin-left:5px;}
.ascora-blue .clientRosterTable tbody tr{margin-top:5px; margin-bottom:5px;height:120px; max-height:100%}
.ascora-blue .clientRosterTable tbody tr td{display:flex; align-items:center; justify-content:center;height:100%;width:100%;margin-right:5px}

.ascora-blue .clientRosterTable .cell_rostered .cell_inner{height:100%;width:100%;}
.ascora-blue .clientRosterTable .cell_rostered.available .btn_new_round{margin-right:5px;}
.ascora-blue .clientRosterTable .cell_rostered.booked .cell_inner{display:flex;flex-direction:column;}
.ascora-blue .clientRosterTable .cell_rostered.booked .roster_button_set_02{display:flex;justify-content:space-evenly;}

.ascora-blue .clientRosterTable .cell_rostered.booked .cell_inner {position:relative}
.ascora-blue .clientRosterTable .cell_rostered.booked .cell_inner .roster_button_set_02{position:absolute; bottom:5px}

.ascora-blue .modal-body {padding:0px}

/***************************/
/* Roster: Control buttons */
/***************************/
.clientRosterTable .cell_rostered .cell_inner span {
    display: block;
}

.clientRosterTable .cell_rostered .cell_inner {
    white-space:normal;
    word-break: break-all;
    word-wrap: break-word;
}

.clientRosterTable .cell_rostered .cell_inner .roster_time {font-weight:600}
.clientRosterTable .cell_rostered .cell_inner .roster_hours {font-weight:600}

.clientRosterTable .cell_rostered .cell_inner {margin: 0; padding: 0; position:relative; display:block; border:1px solid #0D47A1; padding:5px; background-color:#1976D2; margin-top:5px; margin-bottom:5px}
.clientRosterTable .cell_rostered .cell_inner a {color:#fff200; text-decoration:underline}

.clientRosterTable .cell_rostered {
    padding:0px;
    height:100px;
}

/*hide the buttons until the user hovers over the tempalte*/
/*.clientRosterTable .cell_rostered .ctrl_btns {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    -webkit-transition: 0.1s;
    transition: 0.1s;
    transition-timing-function: linear;
    opacity:0;
}*/

/*when the user hovers over the template the buttons are shown*/
/*.clientRosterTable .cell_rostered:hover .ctrl_btns {
    opacity:0.5;
}*/

/*when the user hovers over the template and the button the button becomes fully opaque*/
/*.clientRosterTable .cell_rostered:hover .ctrl_btns:hover {
    opacity:1;
}*/

/*.clientRosterTable .roster_button_set_02 {position:absolute; right:0px; bottom:0px; left:0px;}*/

.clientRosterTable .cell_rostered .ctrl_btns {box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); -webkit-transition: 0.1s; /* Safari */transition: 0.1s; transition-timing-function: linear; opacity:0.7;}
.clientRosterTable .cell_rostered:hover .ctrl_btns {opacity:0.7;}
.clientRosterTable .cell_rostered:hover .ctrl_btns:hover {opacity:1; box-shadow: 1px 2px 4px rgba(0, 0, 0, .6);}
.clientRosterTable .roster_button_set_02 {position:relative; right:0px; bottom:0px; left:0px; padding-top:5px;}

.clientRosterTable .cell_rostered .cell_inner i{font-size:12px; line-height:25px;}

.clientRosterTable .cell_rostered .btn_edit_round {
    background-color:#4CAF50;
    color:#ffffff;
    width:25px;
    height:25px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.clientRosterTable .cell_rostered .btn_new_round {
    /*background-color:#0091EA;*/
    background-color:#00B0FF;
    color:#ffffff;
    width:25px;
    height:25px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.clientRosterTable .cell_rostered .btn_copy_round {
    /*background-color:#0091EA;*/
    background-color:#00B0FF;
    color:#ffffff;
    width:25px;
    height:25px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.clientRosterTable .cell_rostered .btn_delete_round {
    background-color:#EF5350;
    color:#ffffff;
    width:25px;
    height:25px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.clientRosterTable .cell_rostered .btn_grey_round {
    background-color:#cccccc;
    color:#ffffff;
    width:25px;
    height:25px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

.clientRosterTable .cell_rostered .btn_darkgrey_round {
    background-color:#90A4AE;
    color:#ffffff;
    width:25px;
    height:25px;
    border:0px solid #ccc;
    border-radius:15px;
    text-decoration: none;
    z-index:101;
}

/* Tutorial Slide In Menu*/

#slide-in-help {
    /*position: absolute;
    top: -96px;
    left: 0;*/

    position:fixed;
    top:54px;
    left:0px;

    width: 230px;
    margin-left: -230px;
    border: solid #e9e9e9;
    border-width: 1px 1px 1px 0;
    z-index:100000;
}

#slide-in-handle {
    position: absolute;
    left: 230px;
    width: 15px;
    height: 85px;
    background: #1b7458 url(../content/web/fx/share-handle.png) no-repeat 50% 50%;
    color: #fff;
    /*text-indent: -999em;*/
}

#slide-in-handle .fa{
    position:relative;
    top:25px;
    left:4px;
}

#slide-in-help ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 85px;
    background: #fff;
    text-align: center;
}

#slide-in-help li {
    width:65px;
    display: inline-block;
    margin: 0 2px;
}

#slide-in-help li span{
    font-size:12px;
    line-height:12px;
}

#slide-in-help li p{
    font-size:12px;
    line-height:14px;
}

.share-button {
    background: #fff url(../content/web/fx/social-buttons.png) no-repeat 50% 50%;
    border: 4px solid #a6a6a6;
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-top: 10px;
    margin-bottom:5px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    border-radius: 21px;
    /*text-indent: -999em;*/
    color: #a6a6a6;
}

.share-button:hover {
    border-color: #333;
    color: #333;
}

.share-button .fa {
    font-size: 14px;
    position: relative;
    left: 2px;
    top: -4px;
}

.share-button span {
    text-align:center;
}


/* video js */

.tutorialVideoPlayerModal .callout{}
.tutorialVideoPlayerModal .callout p{font-size:18px;}
.tutorialVideoPlayerModal .callout h4{
    font-size: 22px;
    margin-bottom: 5px;
    font-weight: 400;}
.tutorialVideoPlayerModal h4 {font-size:22px; margin-bottom:0px;}

.tutorialVideoPlayerModal .video-js {width:100%!important; height: 520px!important;}
.tutorialVideoPlayerModal .video-js .vjs-big-play-button {left: 40%;top: 40%;width: 20%;height: 20%;font-size: 6em;}
.tutorialVideoPlayerModal .modal-dialog {width:1000px}

.tutorialVideoPlayerModal .modal-header{
    background-color:#01639b;
    padding:5px;
}

.tutorialVideoPlayerModal .modal-header .close {
    color: #fff;
    opacity: 0.8;
    font-weight: 400;
}

.tutorialVideoPlayerModal .modal-header .modal-title{
    font-size: 1.2em;
    color:#ffffff;
}

.tutorialVideoPlayerModal .modal-content{
    border: 1px solid white;
}


/*#videoPlayerModal .modal-dialog {
    width:800px
}*/


/**************************************/
/*      Service M8 Results Table      */
/**************************************/
/*.servicem8_ImportResults {width:500px; display:block; margin:auto}*/
.servicem8_ImportResults .tick_success{text-align:center}
.servicem8_ImportResults .tick_success .fa{font-size:150px; color:#00a65a}
.servicem8_ImportResults .tick_success p{font-weight:400; font-size:28px}

/**************************************/
/*         Progress Claims            */
/**************************************/

#gridJobClaimSections.k-grid tr:hover,
#gridProgressClaimDetails.k-grid tr:hover
{
    color:#263238;
    background: transparent;
}
 
#gridJobClaimSections.k-grid tr.k-alt:hover,
#gridProgressClaimDetails.k-grid tr.k-alt:hover
{
    color:#263238;
    background: #f1f1f1;
}

/* Disabled*/
.disabled_td {background-color:#e9f3f7} 
#gridJobClaimSections.k-grid tr.k-alt td.disabled_td,
#gridProgressClaimDetails.k-grid tr.k-alt td.disabled_td
{
	background: #d7e5ec;
}

/*html .k-grid tr:hover {
    color:#263238;
    background: transparent;
}
 
html .k-grid tr.k-alt:hover {
    color:#263238;
    background: #f1f1f1;
}

html .k-grid tr.k-alt td.disabled_td {
    background: #B0BEC5;
}*/


.icon_base64_arrow {
    width: 60px;
    height: 60px;
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQwMC45NDMgNDAwLjk0MyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAwLjk0MyA0MDAuOTQzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTM5OC45NjEsMTc0LjcyOWMwLjYxMi0zLjA2LDAuNjEyLTYuMTItMC42MTItOS43OTJjLTcuOTU2LTIzLjg2OC0zNC44ODQtNDEuNjE2LTUzLjg1NS01Ni4zMDQgICBjLTE4Ljk3My0xNC42ODgtNDcuMTI0LTQyLjIyOS03Mi4yMTYtNDUuOWMtMC42MTItMS4yMjQtMS4yMjUtMy4wNi0yLjQ0OC0zLjY3MmMtMS44MzYtMS44MzYtNS41MDgtMi40NDgtNy45NTYtMS4yMjQgICBjLTYuNzMyLDQuMjg0LTUuNTA4LDE1LjkxMi02LjczMiwyMi42NDRjLTEuMjI0LDguNTY4LTIuNDQ4LDE3Ljc0OC0zLjA2LDI2LjkyOGMtNTIuMDIxLDQuMjg0LTEwMi4yMDQsOC41NjgtMTQ5LjMyOCwzMy4wNDggICBjLTQ2LjUxMiwyNC40OC04MC43ODQsNjcuOTMzLTEwMi4yMDQsMTE1LjA1N2MtMS44MzYsNC4yODQsMS4yMjQsNy45NTYsNC44OTYsNy45NTZjMS4yMjQsMS44MzYsMy4wNiwyLjQ0OCw0Ljg5NiwxLjIyNCAgIGMyLjQ0OC0xLjIyNCw0LjI4NC0yLjQ0OCw2LjczMi00LjI4NGMxMi4yNCw2LjczMiwyNi4zMTYsMTMuNDY0LDM5LjE2OCwxNi41MjRoMC42MTJjMCwzLjA2LDMuNjcyLDYuNzMyLDYuNzMyLDQuMjg0ICAgYzQzLjQ1Mi0yOS45ODgsMTA2LjQ4OC0yNi45MjksMTU1LjQ0OC0xNy43NDhjMC42MTEsMCwxLjIyNCwwLDEuODM2LDBjMy4wNiwyNS43MDQsNy45NTYsNTAuNzk2LDE1LjkxMiw3NS4yNzUgICBjMS44MzYsNC44OTYsNy4zNDQsNi43MzIsMTEuNjI4LDMuMDYxYzMxLjIxMi0yNi45MjgsNjguNTQ0LTQ2LjUxMiwxMDAuMzY3LTczLjQ0YzI4LjE1Mi0yMy44NjgsMzkuNzgtNTUuMDgsNTAuNzk3LTg5LjM1MiAgIEM0MDIuMDIxLDE3OC40LDQwMC43OTcsMTc1Ljk1MywzOTguOTYxLDE3NC43Mjl6IE0xNi40NjEsMjUyLjQ1M2MyNC40OC00MC4zOTIsNTIuMDItNzQuNjY0LDkzLjYzNi05OC41MzIgICBjMjcuNTQtMTUuOTEyLDU2LjkxNi0yMi42NDQsODcuNTE2LTI1LjcwNGMxOC45NzItMS44MzYsMzkuMTY4LTEuMjI0LDU3LjUyOC02LjczMmMzLjA2MSwxLjgzNiw2LjczMiwwLjYxMiw4LjU2OC0zLjA2aDAuNjEyICAgYzMuNjcyLTEuODM2LDMuMDYtNi43MzIsMC42MTEtOS4xOGMxLjIyNS04LjU2OCwzLjA2MS0xNy43NDgsNC4yODQtMjYuMzE2YzAtMS4yMjQsMC42MTItMy4wNiwxLjIyNC00Ljg5NiAgIGMzNi4xMDgsMjkuMzc2LDg1LjA2OCw0Ny4xMjQsMTExLjM4NSw4OC4xMjhjMTQuNjg4LDIyLjY0NC04My44NDUsODcuNTE3LTExMC4xNiwxMDguOTM3YzAtMy42NzItMS4yMjUtNy45NTYtMS4yMjUtMTEuNjI4ICAgYy0xLjIyNC0xMi44NTMtMy42NzItMjYuMzE2LTcuOTU1LTM4LjU1N2MwLDAsMCwwLDAtMC42MTFjMy42NzItMy4wNjEsMy4wNi0xMC40MDQtMi40NDgtMTEuNjI4ICAgQzE4Mi45MjUsMTkzLjcwMSw4My4xNjksMjA0LjcxNywxNi40NjEsMjUyLjQ1M3ogTTMyMC4wMTMsMjc3LjU0NWMtMjMuMjU2LDE3LjEzNi00OC4zNDgsMzEuODIzLTcwLjk5Miw1MC4xODQgICBjLTYuNzMxLTIyLjY0NC0xMS42MjgtNDYuNTEyLTE5LjU4NC02OS4xNTZjMC0wLjYxMS0wLjYxMS0xLjIyNC0xLjIyNC0xLjIyNGMtMC42MTItMS44MzYtMS44MzYtMy4wNjEtNC4yODQtMy42NzIgICBjLTQ3LjEyNC0xMS4wMTctMTE3LjUwNC0xNC4wNzYtMTU4LjUwOCwxNy43NDhjMC0xLjgzNi0xLjIyNC0zLjA2MS0zLjA2LTMuNjcyYy0xMC40MDQtNC4yODQtMjIuMDMyLTguNTY4LTMzLjA0OC0xMS42MjggICBjMzMuNjYtMTguMzYsNjkuNzY4LTI4LjE1MiwxMDguOTM2LTMyLjQzN3M3Ni41LDEuODM2LDExNS42NjgsMy4wNjFsMCwwYzEuODM2LDEyLjIzOSwxLjgzNiwyNC40NzksMi40NDgsMzcuMzMyICAgYzAsNi43MzEtMC42MTIsMTguMzU5LDQuODk2LDIzLjg2N2MxLjgzNiwxLjgzNiw1LjUwOCwyLjQ0OCw3LjM0NCwwLjYxMmMxLjgzNiwxLjIyNCw0Ljg5NiwxLjgzNiw3LjM0NS0wLjYxMiAgIGMyNS43MDQtMjMuMjU2LDU1LjY5MS00MS4wMDQsODIuMDA4LTYzLjAzNmM0LjI4NC0zLjY3MiwxMS42MjgtOS4xOCwxOC45NzItMTUuOTExICAgQzM2NC4wNzcsMjM1LjMxNywzNDcuNTUzLDI1Ni43MzcsMzIwLjAxMywyNzcuNTQ1eiIgZmlsbD0iIzA3MGIxYSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}


/*Background Animations*/

/* Radial Out */
.hvr-radial-out {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.hvr-radial-out:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: inherit;

    filter: brightness(120%);
    -webkit-filter: brightness(120%);
    /*filter: contrast(120%);
    -webkit-filter: contrast(120%);*/
    /*filter: hue-rotate(-0.8rad);
    -webkit-filter: hue-rotate(-0.8rad);*/

    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
    color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
    -webkit-transform: scale(2);
    transform: scale(2);
}

/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}

/*******************************************/
/*         Job Totals           */
/*******************************************/

#jobTotalDetailTable,
#jobTotalDetailTable .k-table-td {border-color:#ffffff}

/* header */
#jobTotalDetailTable .k-grid-header .k-header {
    background-color: #51AAE0;
    border-color: #FFFFFF;
    border-width: 1px;
    display: none;
}

/*rows*/
#jobTotalDetailTable tr
{
    background-color: #D1E6F3;
}

#jobTotalDetailTable td
{
    color: #263238;
}

#jobTotalDetailTable .k-alt
{
    background-color: #F6FAFD;
}

/*footer*/
#jobTotalDetailTable .k-footer-template td
{
    background-color: #84BDE0;
}

/*footer text*/
#jobTotalDetailTable .k-footer-template div
{
    color: #000000;
}


/*******************************************/
/*       Inventory and Stock Take          */
/*******************************************/
.stock_take_details, 
.stock_take_details .box, 
.stock_take_details .box .box-body {height:100%;}

.stock_take_details #StockTakeDetailsGrid .k-grid-content,
.stock_take_details #StockTakeCountGrid .k-grid-content{height:100%; min-height:600px; max-height:600px }


/*******************/
/* Map Scheduler   */
/*******************/

.remove_list_style {list-style-type: none;}

.map_sched_item {box-sizing:border-box; position: relative;cursor:grab; padding:0px;margin:0px;background: #cce6ff;border: 1px dashed #6ea5d8;border-radius: 2px;width:400px;display:table;}
.map_sched_item:hover {background: #cce6ff;border: 1px dashed #444;border-radius: 1px;}
.map_sched_item:hover .handle {display:block;height:100%;text-align: center;white-space: nowrap;position:absolute;top:0px;left:10px;font-size:26px;opacity:0.5;}
.map_sched_item .handle {display:none;}
.map_sched_item:hover .handle .handle_inner {display: inline-block;vertical-align: middle;}
.map_sched_item:hover .handle:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -0.25em;}

.map_sched_item .timestamp {position:absolute; right:5px; top:5px; background-color:#ffffff; color:#263238; font-weight:bold; padding:5px; font-size:14px; line-height:14px}

.map_sched_item .box_icon {display:table-cell; border:1px solid black; width:75px; height:60px; text-align:center; vertical-align:middle}
.map_sched_item .box_icon p {margin-bottom:2px}
.map_sched_item .box_icon .job_number_text {color: #ffffff; font-size: 12px!important; line-height:12px; font-weight: 600!important; word-wrap: break-word; word-break: break-all;}
.map_sched_item .box_icon .job_status_text {color: #ffffff; font-size: 12px!important; line-height:12px; font-weight: 600; word-wrap: break-word; word-break: break-all;}

.map_sched_item .box_content {display:table-cell; border:1px solid black; padding: 5px 10px; background-color:#f1f1f1; color:#3f3f3f}
.map_sched_item .box_content p {margin-bottom:2px}
.map_sched_item .box_content .box_text {font-size:0.95rem!important; line-height:14px;display:block}
.map_sched_item .box_content .box_text b {font-weight:600}
.map_sched_item .box_content .box_text:first-child {margin-bottom:4px;}

#mapPopUp .popupbox .popup-description li{margin-bottom:5px;}

.scroll_lists .map_sched_item{width:100%}

.userListStyle {min-height: 20px;width: 100%;height: 100%}
.userListSrollAreaStyle {min-height: 100px;width: 100%;}
.userListTitleStyle {color: white;font-weight: bold;background: black;margin:10px 0 0; padding:5px; }
.userHintStyle {background: black;width: 100px}

/*set heights*/
#mobileUserContainer .userListSrollAreaStyle{min-height:600px}

.scroll_lists .k-ghost {display:none!important;}

.titleUnscheduledList {color:#ffffff; font-weight: bold; background: #000000; padding:5px; margin:0px}

.map_sched_item.not_scheduled .box_icon{background-color:#f07220}
.map_sched_item.booked .box_icon{background-color:#48891c}
.map_sched_item.in_progress .box_icon{background-color:#4595c9}
.map_sched_item.completed .box_icon{background-color:#434343}

/*Modernisation*/
.ascora-blue .scroll_lists {}
.ascora-blue .scroll_lists .k-listbox{display:flex;flex-direction:column;}
.ascora-blue .scroll_lists .k-list-item .k-list-item-text{width:100%; display:flex}
.ascora-blue .scroll_lists .k-list-item .k-list-item-text > div{width:100%;}

.ascora-blue .scroll_lists .k-list-item{padding-inline:0.2rem}

.map_sched_item .box_icon {border:0px}
.map_sched_item .box_content{border:0px;background-color:white;}

.map_sched_item:hover,
.map_sched_item{border-radius:6px;overflow:hidden}
.map_sched_item.booked .box_icon {background-color: var(--status-green);}
.map_sched_item.not_scheduled .box_icon {background-color: var(--status-orange);}
.k-list-item .k-list-item-text {width: 100%;display: flex}
.k-list-item.k-selected {overflow:hidden; border-radius:6px}

.ascora-blue .scroll_lists .titleUnscheduledList,
.ascora-blue .scroll_lists .userListTitleStyle {
    background: var(--accent-color-1) !important;
    color: #ffffff;
    border-radius: 6px;
}


/* Add dotted line around draggabled areas*/
.k-listbox .k-list-scroller.userListSrollAreaStyle {border: 1px dashed #6ea5d8; border-style:dashed; background-color:#f3f8ff}




/* ascora help panel */

.panel_ascora_help .panel-heading {padding:5px;}
.panel_ascora_help .panel-heading .panel-title {font-size:14px;}

.panel_ascora_help {margin-bottom:0px}
.panel_ascora_help .btn{padding:3px 6px; font-size:11px; line-height:14px}
.panel_ascora_help .btn .fa {margin-right:0px;}
.panel_ascora_help .panel-body {text-align:center; padding:8px;}

/* Photo Watermark Settings */

.photo_wm_preview {
    width:100%; height:400px; 
    background:#cccccc; 
    position:relative;
    background-image:url('/Assets/img/placeholder_photo.png');
    background-size: 100% 100%;
}

.wm_img {
    position:absolute;
    width:200px; height:65px;
    left: 0%; top:0%;
    transition:all 0.5s linear;
    /*background-image:url('/Assets/img/placeholder_logo_coffee_02.png');*/
    background-size: 100% 100%;
}

.wm_text {
    position:absolute;
    width:200px; height:100px;
    background-color: rgba(100, 100, 100, 0.3);
    left: 0%; top:0%;
    transition:all 0.5s linear;
    padding-top:10px;
}

.wm_text p {margin-bottom:4px; font-size:10px; font-weight:400 ; line-height:10px;}

/* Set margin based on position */
.wm_img.move_tl {}
.wm_img.move_tr {margin-left:-200px;}
.wm_img.move_br {margin-top:-65px}
.wm_img.move_bl {margin-top:-65px}
.wm_text.move_tl {}
.wm_text.move_tr {margin-left:-200px;}
.wm_text.move_br {margin-left:-200px; margin-top:-100px}
.wm_text.move_bl {margin-top:-100px}

/* move to position */
.move_tl {left:0%;top:0%;}
.move_tr {left:100%;top:0%; margin-left:-200px;}
.move_br {left:100%;top:100%; margin-left:-200px; margin-top:-100px}
.move_bl {left:0%;top:100%; margin-top:-100px}

/* new bootstrap to make transition easier*/
.w-100 {width:100%}
.hide {display:none}

.text-wrap {
    white-space: normal !important;
}

/* Admin LTE overrides*/
.callout p{margin-bottom:5px;}



/*Quick Sale*/
.border-bottom-2 {border-bottom:2px solid #455a64;}
.border-bottom-3 {border-bottom:3px solid #455a64;}
.border-bottom-4 {border-bottom:4px solid #455a64;}
.border-bottom-5 {border-bottom:5px solid #455a64;}
.border-bottom-6 {border-bottom:6px solid #455a64;}

.quicksales_table.table > thead > tr > th, 
.quicksales_table.table > tbody > tr > th, 
.quicksales_table.table > tfoot > tr > th, 
.quicksales_table.table > thead > tr > td, 
.quicksales_table.table > tbody > tr > td, 
.quicksales_table.table > tfoot > tr > td {border:0px; padding:6px;}

.quicksales_table {font-size:20px; border:0px}

/*******************************************/
/*       Stages                            */
/*******************************************/
#stagesTable > .k-grid-content table{border-collapse:collapse;}
/*#stagesTable > .k-grid-content {overflow:hidden}*/

/*#stagesTable > .k-grid-header,*/
/*#stagesTable > .k-grid-footer,
#stagesTable > .k-pager-wrap {
    display:none
}*/

#stagesTable > .k-grid-header {
    padding-right: 0px !important;
}
/*
#stagesTable .k-master-row {
    background-color: #90A4AE !important;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border: 3px solid #455a64
}*/
#stagesTable .k-master-row .k-icon{font-size:22px;}
#stagesTable .k-master-row td {padding:0.5em}

/*#stagesTable .k-grid .k-grid-toolbar,
#stagesTable .k-grid .k-grid-pager,
#stagesTable .k-grid .k-grouping-header
{
    display:none
}*/

#stagesTable .k-master-row td[class*="stage"]{border-left:0px}

#stagesTable .k-grid-header th.k-header {text-align:center}
#stagesTable .k-grid-header th.k-header:nth-child(3) {text-align:left}

#stagesTable .k-grid-header th.k-header[data-field*="Cost"],
#stagesTable .k-grid-header th.k-header[data-field*="Amount"]{
    border-left:0px;
}

/*#stagesTable .k-grid-header th.k-header[data-field="QuotedSupplyCost"],
#stagesTable .k-grid-header th.k-header[data-field="QuotedLabourCost"],
#stagesTable .k-grid-header th.k-header[data-field="TotalQuotedCost"],
#stagesTable .k-grid-header th.k-header[data-field="QuotedAmountExTax"]
{
    border-left:1px solid #5f9edd;
}*/

/*
    Prevent scroll bars from showing on the stagesTable,
    Targets only the highest level of k-grid-content to prevent inner tables from having their overflow be visible.
*/
#stagesTable > .k-grid-content {overflow:visible}

/* Apply border-box to everything in the stages table to prevent contents from overflowing*/
/*#stagesTable.k-widget,
#stagesTable.k-widget *,
#stagesTable.k-widget ::before {box-sizing:border-box}*/

/* Apply content-box to row content to keep Kendo elements happy*/
/*#stagesTable .k-detail-row * {box-sizing:content-box}*/


#activityGrid {height:600px;}
#activityGrid.k-grid .k-grid-pager {
    display:block;    
}

#divStagesPartial{
  overflow-x: auto;
  white-space: nowrap;
}

#divStagesPartial > div[class^="col"]{
  display: inline-block;
  float: none;
}

.stages-board .k-listbox .k-listbox-toolbar .k-button[data-command="remove"]{background-color:#d15445; border-color:#d15445;}
.stages-board .k-listbox .k-listbox-toolbar .k-button.k-state-disabled[data-command="remove"]{background-color:grey; border-color:grey;}
.stages-board .k-listbox.k-listbox-toolbar-top {padding:20px 0 1.42857143em;}
.stages-board .k-listbox.k-listbox-toolbar-top .k-listbox-toolbar {padding-left:5px;}


/************************/
/* Stages Activity Card */
/************************/

.stages-board {
    overflow: scroll;
    height: 700px;
    background-color: #fff;
}

.stages-board > div[class^="col"]{
    max-width:300px
}

.stages-board .k-list-scroller{
    border: 1px dashed #6ea5d8;
    border-top-style: dashed;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-style: dashed;
    background-color: #f3f8ff;
}

.stages-board .card{border:1px solid #cccccc;box-shadow:none;}
.stages-board .card .card-header h5{font-size: 16px; word-wrap: break-word;}
.stages-board .card .k-widget {box-sizing:border-box}

.stages-board .k-ghost {border: 1px dashed #6ea5d8; border-style:dashed;-webkit-box-sizing:border-box;box-sizing:border-box;}
.stages-board .k-listbox .k-item {padding:3px;}

.stages-activity-card {padding:4px; font-weight:600; box-sizing:border-box}

.stages-activity-card {position: relative;cursor:grab;border: 1px solid #ccc;border-radius: 2px;border-spacing:0px;width:100%;background-color:#f1f1f1;}
.stages-activity-card *{-webkit-box-sizing:content-box!important;box-sizing:content-box!important;}
.stages-activity-card .handle {display:none; z-index:2}
.stages-activity-card:hover {border: 1px solid #ccc;border-radius: 2px;}
.stages-activity-card:hover .handle {display:block;height:100%;text-align: center;white-space: nowrap;position:absolute;top:0px;right:10px;font-size:26px;}
.stages-activity-card:hover .handle .handle_inner {display: inline-block;vertical-align: middle; opacity:0.2;}
.stages-activity-card:hover .handle:before {content: '';display: inline-block;height: 100%;vertical-align: middle; color:black;}

.stages-board-vh {height:82%;}
.stages-board-vh .k-listbox {height:100%}
.stages-board-vh .card {height:100%}

/*
.whiteboard-card-content {padding:20px 0px 0px 0px;min-height:60px;}
.whiteboard-card-content p {display:block;font-size:12px;line-height:12px;font-weight:400;margin-bottom:0px;color:black;}
.whiteboard-card-dropzone {width:320px;min-height:320px;height: calc(100% - 80px);}
*/

/*#stagesTable .k-master-row .k-icon.k-i-collapse::before {
  content: "\f151";
}*/


/*******************************************/
/*       Ascora Bootstrap 4 styles         */
/*******************************************/

/*Ascora theme colour*/
.bg-aqua {background-color:#00c0ef !important; color:white}

/*custom bootstrap 4 info box for ascora*/
.ascora_box_bs4 .info-box-content .info-box-text{font-size:18px; margin-top:5px; word-break:break-all}
.ascora_box_bs4 .info-box-content .job_status_text {font-size:18px; word-break:break-all}
.ascora_box_bs4 .info-box-content .job_section_text {font-size:18px; word-break:break-all}

/*custom ascora nav tabs*/
.nav_tabs_ascora_bs4 .nav-tabs > li {border:0px;}

.nav_tabs_ascora_bs4 .nav-tabs > li > a {display: block; padding: 10px 15px 15px;}

.nav_tabs_ascora_bs4 .nav-tabs > li.active > a, 
.nav_tabs_ascora_bs4 .nav-tabs > li.active > a:hover, 
.nav_tabs_ascora_bs4 .nav-tabs > li.active > a:focus {
    color: #3c8dbc;
    font-weight: 400;
    background-color:white;
    border-top:4px solid #3c8dbc;
    border-radius:0px;
}

/* Borders only get applied in bootstrap 4 tabs when nav-link is added to the anchor within the tab, added this style so this isn't required*/
.nav_tabs_ascora_bs4 .nav-tabs a{
    border: 1px solid transparent;
}

/*allow popover menus and tooltips to display in front of the kendo grid*/
.k_grid_overflow_visible tr td {overflow:visible!important;}

/* right align labels next to form controls*/
.form-horizontal .col-form-label {text-align:right; font-size:14px}

.alert-danger
{
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

/*set min height on tracking assets grid*/
#gridAssets.k-grid .k-grid-content{min-height:400px}

/*style dropdown in tracking assets grid*/
#gridAssets.k-grid .k-grid-content tr .dropdown-menu a:hover, 
#gridAssets.k-grid .k-grid-content tr .dropdown-menu a 
{
	font-weight: 400;
	color: #212529;
    text-decoration:none;
}

/* Tracking Styles */
.popupbox ul{margin:0px; padding:0px; list-style:none; font-size:14px;}
.popupbox .header {border-bottom:2px solid #ccc; font-size:16px; margin-bottom:5px}
.popupbox .footer {padding:5px;}


/* Trip View*/
/*.trip_details_box {margin-bottom:0px; background-color:transparent; cursor:pointer}
.trip_details_box.card {box-shadow:none}*/

/*.trip_details_box .btn-group a i{color:#455a64}*/
/*.trip_details_box .card-body{padding:10px;}
.trip_details_box .card-body .trip_details {color:black!important; margin-top:10px}
.trip_details_box .card-body .trip_details h5{font-size:16px;}
.trip_details_box .card-body .trip_details p{padding:0px; margin-bottom:5px;}*/

.card-trip-details{}
.card-trip-details h5{font-size:16px!important;font-weight:500!important; padding:8px 0px 3px 0px}
.card-trip-details p{margin-bottom:8px;}

.tracked_grid .k-grid .k-grid-content tr.k-state-selected,
.tracked_grid .k-grid .k-grid-content tr.k-state-selected:link,
.tracked_grid .k-grid .k-grid-content tr.k-state-selected:visited,
.tracked_grid .k-grid .k-grid-content tr.k-state-selected:hover{background-color:#b3e1ff; color:#455a64}

.tracked_grid .k-grid .k-grid-content tr:hover td,
.tracked_grid .k-grid .k-grid-content tr.k-state-selected:hover td{background-color:#65c3ff; color:#455a64}

.tracked_grid .k-grid td {padding:5px;}

.trip_footer_inner {margin:0 15px}


.tracked_asset_grid table tr {cursor:pointer}


.user-menu .user-footer .btn-primary{background-color:#2897ec!important}


/*******************************************/
/*       Ascora Bootstrap 4.5 styles       */
/*******************************************/


.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
        border-left-color: rgb(238, 238, 238);
        border-left-width: 1px;
    border-left-width: .25rem;
    border-radius: .25rem;
    background-color:#fff;
}

.bd-callout-info h4 {
    color: #5bc0de;
}

.bd-callout-info {
    border-left-color: #5bc0de;
}

/*******************************************/
/*     Reports - user timesheet import     */
/*******************************************/
/*remove row hilight from timesheet import grid*/
#timesheetImportResultsGrid.k-grid tr:hover, .k-grid td.k-state-selected:hover {
    color:inherit;
}

/* Button for franchise wizard*/
.fancy_btn {width:200px; height:200px; border:1px solid #ccc;margin:auto; padding:20px; border-radius:6px; background-color:#ffffe5}
.fancy_btn h4{font-size:16px;}
.fancy_btn i[class^="fa"]:first-child{color:#4CAF50}
.fancy_btn i[class^="fa"]:nth-child(2){color:#fff;}

.duration_footer {font-weight:400; border-top:3px solid grey; border-bottom:3px solid grey; padding:5px;}

/*Palette for tracking map*/
.pal01 {color:#ef0d0d}/*red  */
.pal02 {color:#ff4e00}/*orange  */
.pal03 {color:#b9722f}/*brown */
.pal04 {color:#f2b072}/*light brown */
.pal05 {color:#018e00}/* dark green*/
.pal06 {color:#29dc15}/* light green*/
.pal07 {color:#e8c600}/* dark yellow*/
.pal08 {color:#fff659}/* light yellow*/
.pal09 {color:#463eed}/* dark blue*/
.pal10 {color:#669bf6}/* light blue*/
.pal11 {color:#26bda5}/* dark teal  */
.pal12 {color:#40fed7}/* light teal*/
.pal13 {color:#644294}/* dark purple*/
.pal14 {color:#f039f2}/* light purple*/
.pal15 {color:#ff8b8b}/* peach*/
.pal16 {color:#f5b0ff}/* Pink*/
.pal17 {color:#000000}/* black*/
.pal18 {color:#645e5f}/* dark grey*/
.pal19 {color:#c4c2c0}/* light grey*/
.pal20 {color:#ffffff}/* white*/

.green {}
.red {}
.blue {}

.btn_toggle_round i[class^="fa"] {margin-right:0px;}
.btn_toggle_round {
    width: 24px;
    height: 24px;
    border-radius: 20px;
    line-height: 24px;
    text-align: center;
    margin-right: 8px;
    padding: 0px;
    background-color: rgba(96, 125, 139, 0.3);
}
.btn_toggle_round.active i {color:#03f4c8;opacity: 1.0;}
.btn_toggle_round.active {background-color: #03a9f4; box-shadow: 0 0 0 .2em rgba(0,123,255,.25)!important}

/* Set font weight of labels to match rest of site*/
label:not(.form-check-label):not(.custom-file-label) {font-weight:300}




/*******************************************/
/*     External Rating                     */
/*******************************************/

.rating {
    border: none;
    float: left;
    font-family: "Font Awesome 5 Pro";
}

/*show star outline*/
.rating > input {
    display: none;
}

.rating > label:before {
    margin: 5px;
    font-size: 2.2rem;
    display: inline-block;
    content: "\f005";
    font-weight: 400;
}

/*show full star*/
.rating > input:checked ~ label:before {
    margin: 5px;
    font-size: 2.2rem;
    display: inline-block;
    content: "\f005";
    font-weight: bold;
}

.rating > label {
    color: #ddd;
    float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/
/* show gold star when clicked */
/* hover current star */
.rating > input:checked ~ label, 
.rating:not(:checked) > label:hover, 
.rating:not(:checked) > label:hover ~ label {
    color: #FFD700;
}

/* hover previous stars in list */
/* hover current star when changing rating */
/* lighten current selection */
.rating > input:checked + label:hover, 
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, 
.rating > input:checked ~ label:hover ~ label {
    color: #FFED85;
}


/*******************************************/
/*   External Rating: Mobile Media Queries */
/*******************************************/

.section_external_rating .rating_emoji {font-size:5rem; color:#FFD700;}

/* (0 to 576px) */
@media (min-width: 0px) {
    .section_external_rating h2 {font-size:2.5rem; text-transform:uppercase}
    .section_external_rating {font-size:1.6rem}
    .section_external_rating label {font-size:1.6rem}
    .section_external_rating .rating > input:checked ~ label:before,
    .section_external_rating .rating > label:before {font-size: 2.2rem;}
    .section_external_rating button {font-size:1.6rem}
    .section_external_rating .text_powered {font-size:1.0rem}
    .section_external_rating .alert {font-size:1.0rem}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .section_external_rating h2 {font-size:2.5rem}
    .section_external_rating p {font-size:2.0rem}
    .section_external_rating {font-size:1.0rem}
    .section_external_rating label {font-size:1.2rem}
    .section_external_rating .rating > input:checked ~ label:before,
    .section_external_rating .rating > label:before {font-size: 2rem;}
    .section_external_rating button {font-size:1.2rem}
    .section_external_rating .text_powered {font-size:1.2rem}
}

.m-0 { margin: 0 !important; }
.mt-0, .my-0 { margin-top: 0 !important; }
.mr-0, .mx-0 { margin-right: 0 !important; }
.mb-0, .my-0 { margin-bottom: 0 !important; }
.ml-0, .mx-0 { margin-left: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.mt-1, .my-1 { margin-top: 0.25rem !important; }
.mr-1, .mx-1 { margin-right: 0.25rem !important; }
.mb-1, .my-1 { margin-bottom: 0.25rem !important; }
.ml-1, .mx-1 { margin-left: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.mt-2, .my-2 { margin-top: 0.5rem !important; }
.mr-2, .mx-2 { margin-right: 0.5rem !important; }
.mb-2, .my-2 { margin-bottom: 0.5rem !important; }
.ml-2, .mx-2 { margin-left: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.mt-3, .my-3 { margin-top: 1rem !important; }
.mr-3, .mx-3 { margin-right: 1rem !important; }
.mb-3, .my-3 { margin-bottom: 1rem !important; }
.ml-3, .mx-3 { margin-left: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.mt-4, .my-4 { margin-top: 1.5rem !important; }
.mr-4, .mx-4 { margin-right: 1.5rem !important; }
.mb-4, .my-4 { margin-bottom: 1.5rem !important; }
.ml-4, .mx-4 { margin-left: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.mt-5, .my-5 { margin-top: 3rem !important; }
.mr-5, .mx-5 { margin-right: 3rem !important; }
.mb-5, .my-5 { margin-bottom: 3rem !important; }
.ml-5, .mx-5 { margin-left: 3rem !important; }
.p-0 { padding: 0 !important; }
.pt-0, .py-0 { padding-top: 0 !important; }
.pr-0, .px-0 { padding-right: 0 !important; }
.pb-0, .py-0 { padding-bottom: 0 !important; }
.pl-0, .px-0 { padding-left: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1, .py-1 { padding-top: 0.25rem !important; }
.pr-1, .px-1 { padding-right: 0.25rem !important; }
.pb-1, .py-1 { padding-bottom: 0.25rem !important; }
.pl-1, .px-1 { padding-left: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2, .py-2 { padding-top: 0.5rem !important; }
.pr-2, .px-2 { padding-right: 0.5rem !important; }
.pb-2, .py-2 { padding-bottom: 0.5rem !important; }
.pl-2, .px-2 { padding-left: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3, .py-3 { padding-top: 1rem !important; }
.pr-3, .px-3 { padding-right: 1rem !important; }
.pb-3, .py-3 { padding-bottom: 1rem !important; }
.pl-3, .px-3 { padding-left: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4, .py-4 { padding-top: 1.5rem !important; }
.pr-4, .px-4 { padding-right: 1.5rem !important; }
.pb-4, .py-4 { padding-bottom: 1.5rem !important; }
.pl-4, .px-4 { padding-left: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5, .py-5 { padding-top: 3rem !important; }
.pr-5, .px-5 { padding-right: 3rem !important; }
.pb-5, .py-5 { padding-bottom: 3rem !important; }
.pl-5, .px-5 { padding-left: 3rem !important; }

.m-auto { margin: auto !important; }
.mt-auto, .my-auto { margin-top: auto !important; }
.mr-auto, .mx-auto { margin-right: auto !important; }
.mb-auto, .my-auto { margin-bottom: auto !important; }
.ml-auto, .mx-auto { margin-left: auto !important; }

@media (min-width: 992px) {
    .pl-lg-3, .px-lg-3 {
        padding-left: 1rem !important;
    }
}

/*Make kendo labels and widgets more compact*/
.kendo_filter_compact label{font-size:0.88rem;font-weight:var(--font-weight-normal)!important;}
.kendo_filter_compact .k-widget{font-size:0.88rem;font-weight:var(--font-weight-normal)!important;}
.kendo_filter_compact .form-control,
.kendo_filter_compact .k-input,
.kendo_filter_compact .k-dropdownlist {
    word-wrap: normal;
    white-space: normal;
    box-sizing: border-box;
    font-size: 0.88rem;
    font-weight: var(--font-weight-normal) !important;
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-weight: var(--form-element-font-weight);
}

.kendo_filter_compact .k-datepicker .k-input-inner {
    padding-left:5px;
    padding-right:5px;
}

.kendo_filter_compact .k-multiselect .k-input-inner {
    padding-top:0px;
    padding-bottom:0px;
}

.kendo_filter_compact .input-group-btn button {
    font-size: 12px;
    padding: 3px;
    height: 26px;
    word-wrap: normal;
    white-space: normal;
    line-height: 12px
}

/************************************/
/*     CSS used for tab styling     */
/************************************/

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        /*background-color: inherit;*/
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    padding-top: 20px;
}


/*bootstrap 4 styles*/
/* Some styles from bootstrap 4 to assist in migration, can be removed once the site has been entirely upgraded to bootstrap 4*/

/* Custom styling for email job window, adds flex so that the k-editable-area expands when the window expands*/
.custom-flex-tabs .k-tabstrip-wrapper {display: flex;flex-direction: column;height:100%!important;}
.custom-flex-tabs #tabstrip {height: 100% !important;flex: 1;display: flex;flex-direction: column;}
.custom-flex-tabs #tabstrip-1 {height: 100%!important;}
.custom-flex-tabs #tabstrip-1 table{display: flex;flex-direction: column;height: 100%!important;}
.custom-flex-tabs #tabstrip-1 table tbody {height:calc(100% - 45px)!important;}
.custom-flex-tabs #tabstrip-1 table tbody tr:nth-child(2) {display: flex;height:100%!important;}
.custom-flex-tabs #tabstrip-2 {height: 100%!important}


.bs4_migrate .d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.bs4_migrate .flex-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

.bs4_migrate .custom-flex-1 {
    flex:1;
}

.bs4_migrate .flex-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
}

.bs4_migrate .col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.bs4_migrate .col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.bs4_migrate .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.bs4_migrate .flex-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.bs4_migrate .form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.bs4_migrate .form-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.bs4_migrate .ml-auto, .bs4_migrate .mx-auto {
    margin-left: auto !important;
}

.bs4_migrate .align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.bs4_migrate .align-items-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
}

.bs4_migrate .align-items-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
}

.bs4_migrate .col-form-label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.bs4_migrate .bs4_card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.bs4_migrate .bs4_card .card-header{
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.bs4_migrate .bs4_card .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

.bs4_migrate .col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.bs4_migrate .form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}


.mt-auto, .my-auto {
    margin-top: auto !important;
}

@media (min-width: 768px) {
    .bs4_migrate .col-md {-ms-flex-preferred-size: 0;flex-basis: 0;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}
}

@media (min-width: 992px){ 
    .bs4_migrate .col-lg-auto {-ms-flex: 0 0 auto;flex: 0 0 auto;width: auto;max-width: none;}
}

@media (min-width: 1200px) {
    .bs4_migrate .col-xl-auto {-ms-flex: 0 0 auto;flex: 0 0 auto;width: auto;max-width: none;}
}

/*
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(17, 17, 17, 0.15) !important;
}
*/

.shadow {
    box-shadow: 0 0.2rem 0.8rem rgba(17, 17, 17, 0.2) !important;
}

/* Request a Demo */

.section_request_booking {
    font-size:14px;
}

.section_request_booking #BookingEmbed {
    transform: scale(0.75);
    transform-origin: left;
    margin-top:-85px;
    margin-bottom:-85px;
}

.section_request_booking .calendly-inline-widget {
    height:700px!important;
}

.section_request_booking label {
    margin-bottom: 5px;
}

.section_request_booking h5 {
    font-size: 14px;
}

.section_request_booking .faqHeader {
    padding: 8px;
    background-color: #3bb9f7;
    border: 0px;
    color: #ffffff;
    cursor: pointer;
}

.section_request_booking .faq_accordian h3 {
   margin-top:0px; 
}

.section_request_booking .faqHeader h4 {
    font-size: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.section_request_booking .faqBody {
    padding: 5px;
    background-color: #ffffff;
}

.section_request_booking .callout {
    background-color: #00c0ef !important;
    color: #ffffff
}

.section_request_booking .callout p {
    margin-bottom: 0px;
}

.section_request_booking.modal-body {
    padding:10px;
}

.btn_book_demo > div {
    background: #f79518 !important;
    border-radius: 20px;
    font-size: inherit;
    color: #1a1100;
    box-shadow: none;
    border: none;
    text-shadow: none;
    padding: 8px 15px;
    transition: background-color 0.25s;
    font-size: 14px;
    font-weight: 500;
    margin: 8px;
    box-shadow: var(--elevation-8);
}

.btn_book_demo:hover > div {
    background: #ffa839 !important;
    box-shadow: var(--elevation-8);
}



.container_ratio {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/*******************/
/* Main Logo */
/*******************/

.main-header .logo {padding:0px;}
.main-header .logo-lg {position:relative; width:100%; height:100%;}

/*******************/
/* Animations      */
/*******************/
.confetti-container {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    overflow:hidden;
}

.confetti-container .confetti {
    width: 15px;
    height: 15px;
    background-color: #f2d74e;
    position: absolute;
    left: 50%;
    animation: confetti 5s ease-in-out -2s infinite;
    transform-origin: left top;
}

.confetti-container .confetti:nth-child(1) {background-color: #f2d74e;left: 10%;animation-delay: 0;}
.confetti-container .confetti:nth-child(2) {background-color: #95c3de;left: 20%;animation-delay: -5s;}
.confetti-container .confetti:nth-child(3) {background-color: #ff9a91;left: 30%;animation-delay: -3s;}
.confetti-container .confetti:nth-child(4) {background-color: #f2d74e;left: 40%;animation-delay: -2.5s;}
.confetti-container .confetti:nth-child(5) {background-color: #95c3de;left: 50%;animation-delay: -4s;}
.confetti-container .confetti:nth-child(6) {background-color: #ff9a91;left: 60%;animation-delay: -6s;}
.confetti-container .confetti:nth-child(7) {background-color: #f2d74e;left: 70%;animation-delay: -1.5s;}
.confetti-container .confetti:nth-child(8) {background-color: #95c3de;left: 80%;animation-delay: -2s;}
.confetti-container .confetti:nth-child(9) {background-color: #ff9a91;left: 90%;animation-delay: -3.5s;}
.confetti-container .confetti:nth-child(10) {background-color: #f2d74e;left: 100%;animation-delay: -2.5s;}

@keyframes confetti {
    0% {transform: rotateZ(15deg) rotateY(0deg) translate(0,0);}
    25% {transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh);}
    50% {transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh);}
    75% {transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh);}
    100% {transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh);}
}

/*******************/
/* Christmas Theme */
/*******************/
.snow {
    opacity: 0.8;
    position: absolute;
    top: -50px;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    color: white
}
.snow.a {filter: blur(1px)}
.snow.layer1 {animation-duration: 6s;left:10%; font-size:12px;}
.snow.layer1.a {animation-delay: -3s;}
.snow.layer2 {animation-duration: 8s;left: 30%; font-size:12px;}
.snow.layer2.a {animation-delay: -4s;}
.snow.layer3 {animation-duration: 10s;left: 50%; font-size:10px;}
.snow.layer3.a {animation-delay: -5s;}
.snow.layer4 {animation-duration: 12s;left: 70%; font-size:10px;}
.snow.layer4.a {animation-delay: -6s;}
.snow.layer5 {animation-duration: 14s;left: 80%; font-size:10px;}
.snow.layer5.a {animation-delay: -7s;}

@keyframes fall {
    100% {
        transform: translateY(100px);
    }
}

/****************/
/* NEW YEAR text*/
/****************/

.newYear-text {
    font-family: 'Carter One',sans-serif;
    position: absolute;
    top: -12px;
    left:50%;
    background-image: -webkit-linear-gradient(45deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: newYear-hue 5s infinite linear;
    animation: newYear-hue 5s infinite linear;
}

@-webkit-keyframes newYear-hue {
    from {
        -webkit-filter: hue-rotate(0deg) contrast(175%);
    }

    to {
        -webkit-filter: hue-rotate(-360deg) contrast(175%);
    }
}

@-moz-keyframes newYear-hue {
    from {
        filter: hue-rotate(0deg) contrast(175%) brightness(100%);
    }

    to {
        filter: hue-rotate(-360deg) contrast(175%);
    }
}

@-ms-keyframes newYear-hue {
    from {
        filter: hue-rotate(0deg) contrast(175%);
    }

    to {
        filter: hue-rotate(-360deg) contrast(175%);
    }
}

@-o-keyframes newYear-hue {
    from {
        filter: hue-rotate(0deg) contrast(175%);
    }

    to {
        filter: hue-rotate(-360deg) contrast(175%);
    }
}

@keyframes newYear-hue {
    from {
        filter: hue-rotate(0deg) brightness(170%);
    }

    to {
        filter: hue-rotate(-360deg) brightness(170%);
    }
}

/***********/
/*fireworks*/
/***********/

.pyro_wrapper, balloon_wrapper, .snow_wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

:root {
    --pyro-color: #0008ff;
}

@-webkit-keyframes pyro-hue {
    from {
        filter: hue-rotate(0deg) contrast(175%);
        opacity: 1;
    }

    to {
        filter: hue-rotate(-360deg) contrast(175%);
        opacity: 0;
    }
}

@-ms-keyframes pyro-hue {
    from {
        filter: hue-rotate(0deg) contrast(175%);
        opacity: 1;
    }

    to {
        filter: hue-rotate(-360deg) contrast(175%);
        opacity: 0;
    }
}

@-o-keyframes pyro-hue {
    from {
        filter: hue-rotate(0deg) contrast(175%);
        opacity: 1;
    }

    to {
        filter: hue-rotate(-360deg) contrast(175%);
        opacity: 0;
    }
}

@keyframes pyro-hue {
    from {
        filter: hue-rotate(0deg) contrast(175%);
    }

    to {
        filter: hue-rotate(-360deg) contrast(175%);
        opacity:0;
    }
}

.pyro1 > .before, .pyro1 > .after {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
}

.pyro2 > .before, .pyro2 > .after {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards, pyro-hue 5s infinite linear;
}

.pyro1 > .after, .pyro2 > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: 15px -39px var(--pyro-color), 8px -1px var(--pyro-color), -9px 4px var(--pyro-color), 8px -13px var(--pyro-color), -3px -41px var(--pyro-color), -16px -39px var(--pyro-color), 20px -31px var(--pyro-color), -5px -40px var(--pyro-color), -18px -10px var(--pyro-color), -7px -18px var(--pyro-color), -15px -21px var(--pyro-color), 19px -1px var(--pyro-color), -2px -30px var(--pyro-color), 20px -10px var(--pyro-color), -10px -27px var(--pyro-color), -8px -21px var(--pyro-color), 16px -34px var(--pyro-color), 3px 3px var(--pyro-color), -2px -19px var(--pyro-color), 0px -27px var(--pyro-color), -2px 7px var(--pyro-color), -18px -34px var(--pyro-color), -21px -4px var(--pyro-color), -22px -5px var(--pyro-color), -7px -10px var(--pyro-color), 3px -15px var(--pyro-color), 5px -35px var(--pyro-color), -6px 8px var(--pyro-color), 2px -21px var(--pyro-color), 22px -15px var(--pyro-color), 2px -41px var(--pyro-color);
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: 15px -39px var(--pyro-color), 8px -1px var(--pyro-color), -9px 4px var(--pyro-color), 8px -13px var(--pyro-color), -3px -41px var(--pyro-color), -16px -39px var(--pyro-color), 20px -31px var(--pyro-color), -5px -40px var(--pyro-color), -18px -10px var(--pyro-color), -7px -18px var(--pyro-color), -15px -21px var(--pyro-color), 19px -1px var(--pyro-color), -2px -30px var(--pyro-color), 20px -10px var(--pyro-color), -10px -27px var(--pyro-color), -8px -21px var(--pyro-color), 16px -34px var(--pyro-color), 3px 3px var(--pyro-color), -2px -19px var(--pyro-color), 0px -27px var(--pyro-color), -2px 7px var(--pyro-color), -18px -34px var(--pyro-color), -21px -4px var(--pyro-color), -22px -5px var(--pyro-color), -7px -10px var(--pyro-color), 3px -15px var(--pyro-color), 5px -35px var(--pyro-color), -6px 8px var(--pyro-color), 2px -21px var(--pyro-color), 22px -15px var(--pyro-color), 2px -41px var(--pyro-color);
    }
}

@-o-keyframes bang {
    to {
        box-shadow: 15px -39px var(--pyro-color), 8px -1px var(--pyro-color), -9px 4px var(--pyro-color), 8px -13px var(--pyro-color), -3px -41px var(--pyro-color), -16px -39px var(--pyro-color), 20px -31px var(--pyro-color), -5px -40px var(--pyro-color), -18px -10px var(--pyro-color), -7px -18px var(--pyro-color), -15px -21px var(--pyro-color), 19px -1px var(--pyro-color), -2px -30px var(--pyro-color), 20px -10px var(--pyro-color), -10px -27px var(--pyro-color), -8px -21px var(--pyro-color), 16px -34px var(--pyro-color), 3px 3px var(--pyro-color), -2px -19px var(--pyro-color), 0px -27px var(--pyro-color), -2px 7px var(--pyro-color), -18px -34px var(--pyro-color), -21px -4px var(--pyro-color), -22px -5px var(--pyro-color), -7px -10px var(--pyro-color), 3px -15px var(--pyro-color), 5px -35px var(--pyro-color), -6px 8px var(--pyro-color), 2px -21px var(--pyro-color), 22px -15px var(--pyro-color), 2px -41px var(--pyro-color);
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: 15px -39px var(--pyro-color), 8px -1px var(--pyro-color), -9px 4px var(--pyro-color), 8px -13px var(--pyro-color), -3px -41px var(--pyro-color), -16px -39px var(--pyro-color), 20px -31px var(--pyro-color), -5px -40px var(--pyro-color), -18px -10px var(--pyro-color), -7px -18px var(--pyro-color), -15px -21px var(--pyro-color), 19px -1px var(--pyro-color), -2px -30px var(--pyro-color), 20px -10px var(--pyro-color), -10px -27px var(--pyro-color), -8px -21px var(--pyro-color), 16px -34px var(--pyro-color), 3px 3px var(--pyro-color), -2px -19px var(--pyro-color), 0px -27px var(--pyro-color), -2px 7px var(--pyro-color), -18px -34px var(--pyro-color), -21px -4px var(--pyro-color), -22px -5px var(--pyro-color), -7px -10px var(--pyro-color), 3px -15px var(--pyro-color), 5px -35px var(--pyro-color), -6px 8px var(--pyro-color), 2px -21px var(--pyro-color), 22px -15px var(--pyro-color), 2px -41px var(--pyro-color);
    }
}

@keyframes bang {
    to {
        box-shadow: 15px -39px var(--pyro-color), 8px -1px var(--pyro-color), -9px 4px var(--pyro-color), 8px -13px var(--pyro-color), -3px -41px var(--pyro-color), -16px -39px var(--pyro-color), 20px -31px var(--pyro-color), -5px -40px var(--pyro-color), -18px -10px var(--pyro-color), -7px -18px var(--pyro-color), -15px -21px var(--pyro-color), 19px -1px var(--pyro-color), -2px -30px var(--pyro-color), 20px -10px var(--pyro-color), -10px -27px var(--pyro-color), -8px -21px var(--pyro-color), 16px -34px var(--pyro-color), 3px 3px var(--pyro-color), -2px -19px var(--pyro-color), 0px -27px var(--pyro-color), -2px 7px var(--pyro-color), -18px -34px var(--pyro-color), -21px -4px var(--pyro-color), -22px -5px var(--pyro-color), -7px -10px var(--pyro-color), 3px -15px var(--pyro-color), 5px -35px var(--pyro-color), -6px 8px var(--pyro-color), 2px -21px var(--pyro-color), 22px -15px var(--pyro-color), 2px -41px var(--pyro-color);
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(50px);
        -moz-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -o-transform: translateY(50px);
        -ms-transform: translateY(50px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(50px);
        -moz-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -o-transform: translateY(50px);
        -ms-transform: translateY(50px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(50px);
        -moz-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -o-transform: translateY(50px);
        -ms-transform: translateY(50px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(50px);
        -moz-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -o-transform: translateY(50px);
        -ms-transform: translateY(50px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(50px);
        -moz-transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -o-transform: translateY(50px);
        -ms-transform: translateY(50px);
        opacity: 0;
    }
}

@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 2%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 8%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 10%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 12%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 14%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 2%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 8%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 10%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 12%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 14%;
        margin-left: 80%;
    }
}

@-o-keyframes position {
    0%, 19.9% {
        margin-top: 2%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 8%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 10%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 12%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 14%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 2%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 8%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 10%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 12%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 14%;
        margin-left: 80%;
    }
}

@keyframes position {
    0%, 19.9% {
        margin-top: 2%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 8%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 10%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 12%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 14%;
        margin-left: 80%;
    }
}

/***************/
/*Newyear Logos*/
/***************/

.newyear-logo-1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-linear-gradient(45deg, #f35626, #feab3a);
    mask: url("/Assets/img/ascora_logo_long_blue.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-animation: newYear-hue 5s infinite linear;
    animation: newYear-hue 5s infinite linear;
}

.newyear-logo-2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("/Assets/img/ascora_logo_wide_1024.png");
    background-repeat: no-repeat;
    background-size: 140px auto;
    background-position-y: center;
    background-position-x: 10px;
}

/************/
/* baloons  */
/************/

@keyframes balloon-hue {
    from {
        filter: hue-rotate(0deg) brightness(110%);
    }

    to {
        filter: hue-rotate(-360deg) brightness(110%);
    }
}

.balloon_wrapper {
    text-align:right;
    padding-right:10px;
}

.balloon {
    display: inline-block;
    width: 26px;
    height: 28px;
    line-height: 28px;
    background: hsl(215,50%,65%);
    border-radius: 80%;
    position: relative;
    box-shadow: inset -10px -10px 0 rgba(0,0,0,0.07);
    margin: 12px -8px;
    padding: 0px;
    transition: transform 1s ease;
    z-index: 10;
    -webkit-animation: balloons 4s ease-in-out infinite, balloon-hue 10s infinite linear;
    animation: balloons 4s ease-in-out infinite, balloon-hue 10s infinite linear;
    transform-origin: bottom center;
    text-align: center;
}

.balloon span{
    color:#ffffff;
    font-family: 'Carter One',sans-serif;

    /*center test*/
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes balloons {
    0%,100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-5px) rotate(4deg);
    }
}


.balloon:before {
    content: "▲";
    font-size: 14px;
    color: hsl(215,30%,50%);
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -14px;
    z-index: -100;
}

.balloon:after {
    display: inline-block;
    top: 32px;
    position: absolute;
    height: 100px;
    width: 1px;
    margin: 0 auto;
    left: 50%;
    content: "";
    background: rgba(0,0,0,0.3);
    z-index:-200;
}

.balloon:nth-child(2) {
    background: hsl(245,40%,65%);
    animation-duration: 3.5s;
    width: 28px;
    height: 32px;
}

.balloon:nth-child(2):before {
    color: hsl(245,40%,65%);
}

.balloon:nth-child(3) {
    background: hsl(139,50%,60%);
    animation-duration: 3s;
}

.balloon:nth-child(3):before {
    color: hsl(139,30%,50%);
}

.balloon:nth-child(4) {
    background: hsl(59,50%,58%);
    animation-duration: 4.5s;
    width: 28px;
    height: 32px;
}

.balloon:nth-child(4):before {
    color: hsl(59,30%,52%);
}

.balloon:nth-child(5) {
    background: hsl(23,55%,57%);
    animation-duration: 5s;
}

.balloon:nth-child(5):before {
    color: hsl(23,44%,46%);
}

/* Easter Theme */

.easter-theme {
    position:relative;
    z-index:10;
}

.easter-theme .eggOne, .easter-theme .eggTwo, .easter-theme .eggThree {
    position: absolute;
    overflow: hidden;
    display: inline-block;
    width: 30px;
    height: 36px;
    padding:3px;
    box-shadow: inset -10px -10px rgba(0,0,0,0.1);
    top: 8px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.easter-theme .eggOne{
    width: 32px;
    height: 38px;
    padding: 3px;

    left: 30.6%;
    top:6px;
    background: repeating-linear-gradient(#f9c74f, #f9c74f 5px, #90be6d 5px, #90be6d 10px);
}

.easter-theme .eggTwo{
    width: 30px;
    height: 36px;
    padding: 3px;

    left: 60%;
    background-color: #f94144;
}

.easter-theme .eggThree{
    width: 26px;
    height: 32px;
    padding: 3px;

    top:12px;
    left: 78%;
    background: repeating-linear-gradient(-45deg, #70c1b3, #70c1b3 6px, #247ba0 5px, #247ba0 10px);
}

.easter-theme .eggTwo div{
    transform:scale(1.2);
    position:relative;
    top:6px;
}

.easter-theme .eggThree div{
    transform:scale(1.4);
    position:relative;
    top:0px;
}

.easter-theme .eggOne div{
    position:relative;
    top:4px;
}

.easter-theme .eggTwo:before {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    height: 5px;
    width: 5px;
    left: 30%;
    box-shadow: 
        9.6px 4.8px #fff, 
        16.8px 14.4px #fff,
        24px 7.2px #fff, 
        7.2px 42px #fff,
        4.8px 14.4px #fff,
        -2.4px 22.8px #fff,
        -4.8px 32.4px #fff,
        7.2px 32.4px #fff,
        7.2px 22.8px #fff,
        16.8px 25.2px #fff,
        -2.4px 9.6px #fff, 
        19.2px 37.2px #fff;
    opacity:0.35;
}

@-webkit-keyframes anim-frames-rocking {
    0% {
        -webkit-transform: rotate(10deg);
    }

    50% {
        -webkit-transform: rotate(-5deg)
    }

    100% {
        -webkit-transform: rotate(10deg);
    }
}

@keyframes anim-frames-rocking {
    0% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-5deg)
    }

    100% {
        transform: rotate(10deg);
    }
}

.anim-rocking {
    -webkit-transform-origin: 50% 90%;
    transform-origin: 50% 90%;
    -webkit-animation: anim-frames-rocking 3.5s ease-in-out forwards infinite;
    animation: anim-frames-rocking 3.5s ease-in-out forwards infinite;
}

:root {
    --svg-wave-short: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M894.5 98.5c-84.7 51-98-57.2-200 0-84.8 51-98-57.2-200 0-85 51-97.7-57.2-200 0-85 51-97.6-57.2-200 0C47.2 132.3 0 94 0 94v206h1000V94s-59-28.8-105.5 4.5z' fill='%2343deff'/%3E%3C/svg%3E");
    --gear-color: #17ff00;
    --svg-ascora-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 509 54.2' fill='%23fff' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M212.6 21.6a19 19 0 0 0-5.7-13.8C203.3 4 198.3 2 193.2 2h-38.8a19 19 0 0 0-13.7 5.7 19 19 0 0 0-5.7 14v32.6h26v-13h25.8v13h26zm-51.8 6.6v-6.6c0-1.7.7-3.4 2-4.6 1.2-1.2 2.8-2 4.6-2h13c1.7 0 3.4.7 4.6 2 1.2 1.2 2 3 2 4.6v6.6zm112.6 3.2h-36.2c0-2.5 2-4.5 4.5-4.6h31.7v-9h-40.7a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v9h36.2c0 1.2-.5 2.4-1.3 3.2-.8 1-2 1.4-3.2 1.4H219v9h40.8a13 13 0 0 0 9.6-4c2.6-2.5 4-6 4-9.7zM300.6 45c-1.2 0-2.4-.5-3.2-1.3-1-.8-1.3-2-1.3-3.2v-9c0-2.5 2-4.5 4.5-4.6h9c1.2 0 2.3.5 3.2 1.3 1 .8 1.4 2 1.3 3.2h18c.1-3.6-1.4-7-4-9.7a13 13 0 0 0-9.6-4h-27a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v9c-.1 3.6 1.4 7 4 9.7a13 13 0 0 0 9.6 4h31.7c2.4 0 4.8-1 6.4-2.7 1.7-1.7 2.7-4 2.7-6.4zm90.6-13.6c.1-3.6-1.4-7-4-9.7a13 13 0 0 0-9.6-4h-27a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v9c-.1 3.6 1.4 7 4 9.7a13 13 0 0 0 9.6 4h27.2a13 13 0 0 0 9.6-4c2.6-2.5 4-6 4-9.7zm-19.5 12.3c-.8 1-2 1.4-3.2 1.3h-9c-1.2 0-2.4-.5-3.2-1.4-1-.8-1.3-2-1.3-3.2v-9c0-2.5 2-4.5 4.5-4.6h9c1.2 0 2.4.5 3.2 1.3 1 .8 1.4 2 1.3 3.2v9c0 1.2-.5 2.4-1.3 3.2zm78.3 3c.1-2.5-1.2-5-3.4-6.3 2.3-2.5 3.5-5.8 3.4-9 .1-3.6-1.4-7-4-9.7a13 13 0 0 0-9.6-4h-40.8v36.5h18V26.8h13.6c1.2 0 2.4.5 3.2 1.4 1 1 1.3 2 1.3 3.2s-.5 2.4-1.3 3.2c-.8 1-2 1.4-3.2 1.3H416v9h11.3c1.2 0 2.4.5 3.2 1.3 1 .8 1.4 2 1.3 3.2V54h18zm59-15.4c.1-3.6-1.4-7-4-9.7a13 13 0 0 0-9.6-4h-27a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v22.8h18v-9h18v9h18zM472.7 36v-4.6c0-2.5 2-4.5 4.5-4.6h9c1.2 0 2.4.5 3.2 1.3 1 .8 1.4 2 1.3 3.2V36z'/%3E%3Cpath d='M103.2 47c3.2.5 6.3 1 9.4 2 .2 1.6.4 3.2.4 5H93.8A37 37 0 0 0 86.3 34c-8.6-11.3-22.8-16.8-36.7-14s-25.2 13-29 26.6a37 37 0 0 0-1.3 7.4H.3l-.2-.1.5-5 9.3-1.5c.2-1.2.5-2.4 1-3.6l1-3.5-7-6.6c.7-1.5 1.4-3 2.2-4.5l9.2 2 2-3 2.3-2.8c-1.5-2.8-2.8-5.7-4-8.7 1.2-1.2 2.4-2.3 3.7-3.3 2.7 1.5 5.3 3.2 8 5l3-2c1-.6 2-1.2 3.2-1.8C34 11 33.8 8 34 4.7L38.5 3l5.5 7.6a44 44 0 0 1 3.6-.8 40 40 0 0 1 3.6-.6l3-9h5l2.4 9 3.6.5 3.6.8a75 75 0 0 1 6-7.4 61 61 0 0 1 4.6 1.8c-.2 3-.5 6.2-1 9.3l3.2 1.8c1 .6 2 1.3 3 2a76 76 0 0 1 8.3-4.9l3.7 3.4a85 85 0 0 1-4.3 8.3l2.3 3c.7 1 1.4 2 2 3l9.4-1.5 2.2 4.5-7 6.2 1.2 3.5 1 3.6z' fill-rule='evenodd'/%3E%3C/svg%3E");
    --svg-ascora-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M78.8 35c.1-5.2-2-10.2-5.7-13.8-3.6-3.7-8.6-5.8-13.7-5.7H20.6c-5-.1-10 2-13.7 5.7a19 19 0 0 0-5.7 13.9v32.6h26v-13H53v13h26V35zM27 41.4V35c0-1.7.7-3.4 2-4.6 1.2-1.2 3-2 4.6-2h13c1.7 0 3.4.7 4.6 2 1.2 1.2 2 3 2 4.6v6.6H27z' fill='%23fff'/%3E%3C/svg%3E");
    --svg-ascora-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M69.2 35.8H33c0-2.5 2-4.5 4.5-4.6h31.7v-9H28.5a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v9H51c0 1.2-.5 2.4-1.3 3.2-.8 1-2 1.4-3.2 1.4H14.8v9h40.8a13 13 0 0 0 9.6-4c2.6-2.5 4-6 4-9.7v-9z' fill='%23fff'/%3E%3C/svg%3E");
    --svg-ascora-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M37.5 47.5c-1.2 0-2.4-.5-3.2-1.4-1-1-1.4-2-1.3-3.2v-9c0-2.5 2-4.5 4.5-4.6h9c1.2 0 2.3.5 3.2 1.4 1 .8 1.4 2 1.3 3.2h18c.1-3.6-1.4-7-4-9.7a13 13 0 0 0-9.6-4H28.5a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v9c-.1 3.6 1.4 7 4 9.7a13 13 0 0 0 9.6 4h31.7c2.4 0 4.8-1 6.4-2.7 1.7-1.7 2.7-4 2.7-6.4H37.5z' fill='%23fff'/%3E%3C/svg%3E");
    --svg-ascora-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M69.2 33.8c.1-3.6-1.4-7-4-9.7a13 13 0 0 0-9.6-4h-27a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v9c-.1 3.6 1.4 7 4 9.7a13 13 0 0 0 9.6 4h27.2a13 13 0 0 0 9.6-4c2.6-2.5 4-6 4-9.7v-9zM49.8 46c-.8 1-2 1.4-3.2 1.4h-9c-1.2 0-2.4-.5-3.2-1.4-1-1-1.4-2-1.3-3.2v-9c0-2.5 2-4.5 4.5-4.6h9c1.2 0 2.4.5 3.2 1.4 1 .8 1.4 2 1.3 3.2v9c0 1.2-.5 2.4-1.3 3.2z' fill='%23fff'/%3E%3C/svg%3E");
    --svg-ascora-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M69.2 49.2c.1-2.5-1.2-5-3.4-6.3 2.3-2.5 3.5-5.8 3.4-9 .1-3.6-1.4-7-4-9.7-2.5-2.6-6-4-9.6-4H14.8v36.5h18V29.3h13.6c1.2 0 2.4.5 3.2 1.4 1.8 1.8 1.8 4.6 0 6.4h0c-.8 1-2 1.4-3.2 1.4H35.2v9h11.3c1.2 0 2.4.5 3.2 1.3 1 .8 1.4 2 1.3 3.2v4.5h18v-7.4z' fill='%23fff'/%3E%3C/svg%3E");
    --svg-ascora-aa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M69.2 33.8c.1-3.6-1.4-7-4-9.7-2.5-2.6-6-4-9.6-4h-27a13 13 0 0 0-9.6 4c-2.6 2.5-4 6-4 9.7v22.8h18v-9h18v9h18V33.8zM33 38.4v-4.6c0-2.5 2-4.5 4.5-4.6h9c1.2 0 2.4.5 3.2 1.4 1 .8 1.4 2 1.3 3.2v4.6H33z' fill='%23fff'/%3E%3C/svg%3E");
    --svg-ascora-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M106.7 78.4a77 77 0 0 1 9.4 2c.2 1.6.4 3.2.4 5H97.3a37 37 0 0 0-7.5-19.9C77.3 49 54 45.8 37.4 58.2 31 63 26.2 70 24 78a37 37 0 0 0-1.3 7.4h-19l-.2-.1.5-5 9.3-1.5c.2-1.2.5-2.4 1-3.6l1-3.5-7-6.6c.7-1.5 1.4-3 2.2-4.5l9.2 2 2-3 2.3-2.8a77 77 0 0 1-4-8.7c1.2-1.2 2.4-2.3 3.7-3.3 2.7 1.5 5.3 3.2 8 5l3-2c1-.6 2-1.2 3.2-1.8-.4-3.2-.6-6.4-.6-9.6l4.6-1.8 5.5 7.6a44 44 0 0 1 3.6-.8 40 40 0 0 1 3.6-.5l3-9h5l2.4 9 3.7.5 3.6.8a74 74 0 0 1 6-7.5 61 61 0 0 1 4.6 1.8 86 86 0 0 1-1.1 9.3l3.2 1.8c1 .6 2 1.3 3 2 2.7-1.8 5.5-3.4 8.3-5L100 48c-1.3 3-2.7 5.6-4.3 8.3l2.3 3c.7 1 1.4 2 2 3l9.5-1.5 2.2 4.5-7 6.2 1.2 3.5 1 3.6z' fill-rule='evenodd' fill='%23fff'/%3E%3C/svg%3E");
    --svg-bunny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M372 24.8c13.3-16.6-40.4-31.6-69.7-5.6C279 40 269.6 105.7 266.8 131l-13.6-1.3-8 .4c-3-25.8-12.2-90.3-35.4-111-29.2-26-83-11-69.7 5.6 25.8 32 48.8 36 72.8 117.5-18.6 13.4-30 36.3-30.2 62.3a56 56 0 0 0-29 43.3c0 17.6 17.6 32.2 35.3 34.7-28 32-46.5 79.3-46.5 115.5 0 60.5 51.8 109.5 112.3 109.5S367 458.6 367 398.2c0-36.6-19-84.4-47.4-116.5 16-4.2 30.5-17.7 30.5-33.7 0-14.6-12-33.4-26.2-41.8 0-.1 0-.2 0-.3 0-24.3-9.5-46-25.7-60 24.4-85 47.6-88.5 73.8-121z' fill='%23e7e0e0'/%3E%3Cpath d='M202 37.2c-3.4-6.2-12.8-7.2-18.2-4s-3.6 12.5-1.3 18.2c21.3 19 34.7 71.6 34.7 71.6 2.7 4.7 6.2 8.7 11 6s6.3-11 3.6-15.8c0 0-12.8-63.5-29.7-76zm126.4-4c-5.4-3-14.8-2-18 4-16.8 12.4-29.7 76-29.7 76-2.7 4.7-1 13 3.6 15.8 4.7 2.7 8.2-1.3 11-6 0 0 13.3-52.5 34.7-71.6 2.2-5.6 4-15-1.3-18zM256 210c-10 0-26.3 18-18.2 24 9.8 7.3 8.2-1.4 18.3-1.4s11.2 9.4 18.3 1.4c6.7-7.6-8.2-24-18.2-24z' fill='%23faa5a5'/%3E%3Cpath d='M297 240.6c0 10.4-8.4 18.8-18.8 18.8-9.2 0-16.8-6.6-18.5-15.3.2-1 .3-2.3.3-3.5h-.6-5.4-.6a25 25 0 0 0 .3 3.5c-1.6 8.7-9.3 15.3-18.5 15.3-10.4 0-18.8-8.4-18.8-18.8h-6c0 13.7 11 24.8 24.8 24.8 9.2 0 17.2-5 21.5-12.5 4.3 7.4 12.3 12.5 21.5 12.5 13.7 0 24.8-11 24.8-24.8h-6z' fill='%23919191'/%3E%3Cpath d='M140 8.2c-53 16.8 0 79.6 0 79.6s16.4 0 26.5-26.5 53-26.5 53-26.5S193-8.6 140 8.2zm232 0c-53-16.8-79.6 26.5-79.6 26.5s43 0 53 26.5c10 26.5 26.5 26.5 26.5 26.5s53-62.8 0-79.6z' fill='%23e7e0e0'/%3E%3Cpath d='M226.5 167.4c-7.7 0-14 10.2-14 22.8s6.3 22.8 14 22.8 14-10.2 14-22.8-6.3-22.8-14-22.8zm56.7 0c-7.7 0-14 10.2-14 22.8s6.3 22.8 14 22.8 14-10.2 14-22.8c0-12.6-6.3-22.8-14-22.8z' fill='%23404040'/%3E%3Cpath d='M341 253.5s-13-7.6-27-9.7-26 .7-26 .7c-1.5-.2-3 .8-3.2 2.4-.2 1.5.8 3 2.4 3.2 0 0 9.7-3 23.8-1 13.6 2 29 10 29 10 1.5.2 3-.8 3.2-2.4.2-1.5-.8-3-2.4-3.2zm17.7-16.3s-22.6-5.2-36.6-5-30.7 3.6-30.7 3.6c-1.6 0-2.8 1.3-2.7 3s1.3 2.8 3 2.7c0 0 14.4-3 28.6-3.5 13.8-.4 38.7 4.8 38.7 4.8 1.6 0 2.8-1.3 2.7-3s-1.3-2.8-3-2.7zm-69-2.7s10.5-4.8 24.5-7.4c13.6-2.5 30.7-2.7 30.7-2.7 1.5-.3 2.5-1.7 2.3-3.3s-1.7-2.5-3.3-2.3c0 0-14.8-.2-28.6 2.3s-26.6 7.8-26.6 7.8c-1.5.3-2.5 1.7-2.3 3.3.3 1.5 1.7 2.5 3.3 2.3zM227 247c-.2-1.5-1.7-2.6-3.2-2.4 0 0-12-2.7-26-.7s-27 9.7-27 9.7c-1.5.2-2.6 1.7-2.4 3.2s1.7 2.6 3.2 2.4c0 0 15.4-8 29-10a60 60 0 0 1 23.8 1c1.5-.2 2.6-1.7 2.4-3.2zm-35-8.8a177 177 0 0 1 28.6 3.5c1.6 0 2.8-1.2 3-2.7s-1.2-2.8-2.7-3l-30.7-3.6c-14-.4-36.6 5-36.6 5-1.6 0-2.8 1.2-3 2.7s1.2 2.8 2.7 3c0 0 25-5.2 38.7-4.8zm-24.7-13.6a221 221 0 0 0 30.7 2.7c14 2.6 24.5 7.4 24.5 7.4 1.5.3 3-.7 3.3-2.3s-.7-3-2.3-3.3c0 0-12.8-5.2-26.6-7.7s-28.6-2.3-28.6-2.3c-1.5-.3-3 .7-3.3 2.3-.3 1.5.7 3 2.3 3.3z' fill='%23a6a5a5'/%3E%3Cpath d='M228 170.8a7 7 0 1 0 0 14 7 7 0 1 0 0-14zm56 0a7 7 0 1 0 0 14 7 7 0 1 0 0-14z' fill='%23fafafa'/%3E%3C/svg%3E");
    --svg-st-patricks-hat-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1451 1451' xmlns:v='https://vecta.io/nano'%3E%3Cstyle%3E%3C!%5BCDATA%5B.H%7Benable-background:new%7D%5D%5D%3E%3C/style%3E%3Cpath d='M1151.5 783c-113.3 43.2-261.4 52.6-423 52.6-148 0-285.3-16-395.3-50C175 736.3 84 790 74 861.4c-31.8 225 106.5 289 239 358 223.3 117.6 654.5 94.5 871-15.4 292.6-116.5 295.7-530.4-32.5-420.8z' fill='%235fc41e' class='H'/%3E%3Cpath d='M1151.5 750.6c-113.3 43.2-261.4 52.6-423 52.6-148 0-285.3-16-395.3-50C175 703.8 84 757.6 74 829c-31.8 225 106.5 289 239 358 223.3 117.6 654.5 94.5 871-15.4 292.6-116.6 295.7-530.4-32.5-420.8z' fill='%232b8501' class='H'/%3E%3Cpath d='M299 255S415.6 544.5 349 837c-30.6 167.4 358.6 332.5 730.6 101.7 42.6-27.8 36.3-68.8 32.5-112.5-26-305.2 45.4-520.2 54-565.2 9.8-51.5-867-6-867-6z' fill='%235fc41e' class='H'/%3E%3Cpath d='M1106.7 692c-386.3 214.2-719.7 10.8-740 4-231.6 320.3 966.8 324 740-4z' fill='%23333' class='H'/%3E%3Cpath d='M814.5 759.8H661.7a30 30 0 0 0-30 30v54H628c-8 0-14.5 6.5-14.5 14.5-1.2 10.5 1 25 14.5 24.8h3.8v59.5a30 30 0 0 0 30 30h152.8a30 30 0 0 0 30-30V789.8a30 30 0 0 0-30-30zm-1.2 159a20 20 0 0 1-20 20H685.5a20 20 0 0 1-20-20V883h35c13.6.2 15.6-14.3 14.5-24.8 0-8-6.5-14.5-14.5-14.5h-35v-33a20 20 0 0 1 20-20h107.8a20 20 0 0 1 20 20v107.7z' fill='%23ffe779' class='H'/%3E%3Cpath d='M732 145.8c-575-.8-575 216.3 0 215.5 577 .8 577-216.3 0-215.5z' fill='%232b8500' class='H'/%3E%3Cpath d='M996.8 659l-43.8-9.5a215 215 0 0 0-9.5-33.1l33-28.8-10.3-21c-49.6 2.4-33.4 20.8-65-20.6a404 404 0 0 0 20.4-38.9l-17.2-15.7c-46 20.6-23.5 31.4-68 4.5a402 402 0 0 0 5-43.6c-7-3-14.3-6-21.7-8.4-35 35.3-10.6 37.7-62 28.6l-11-42.5-23.3-.1c-19.8 45.2 3.7 39.2-47.3 49-8-12.4-16.4-24-25.7-35.6l-21.7 8.4c-2.2 49.2 17.5 35.3-26.5 62.8-11.6-8.4-24-16.6-36.8-24a278 278 0 0 0-17.3 15.6c16.2 47.6 29 26.2-1.8 68.2l-43-9c-3.7 6.8-7.2 13.7-10.4 20.8 32 38.3 36.6 14 22.8 64.3l-43.3 7c-.1 7.4-4 17.7-1 23.8h89c21.2-214.3 327.2-214.5 348.4 0h90a275 275 0 0 0-2.1-22.7z' fill='%23206200' class='H'/%3E%3C/svg%3E");
    --svg-st-patricks-hat-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1451 1451' xmlns:v='https://vecta.io/nano'%3E%3Cstyle%3E%3C!%5BCDATA%5B.H%7Benable-background:new%7D%5D%5D%3E%3C/style%3E%3Cpath d='M1145.5 794.6c-113.3 43.2-252.4 52.6-414 52.6-148 0-298-6-404.3-50-166-68.7-336.6 26.6-253.3 218 137.8 378 1167.3 394.3 1303.3 2.3 84.3-194.6-82-279.8-231.8-222.7z' fill='%235fc41e' class='H'/%3E%3Cpath d='M1145.5 766.6c-113.3 43.2-252.4 52.6-414 52.6-148 0-298-6-404.3-50C161.4 700.3-9.3 795.6 74 987c137.8 378 1167.3 394.3 1303.3 2.3 84.3-194.6-82-279.8-231.8-222.7z' fill='%232b8501' class='H'/%3E%3Cpath d='M1167.2 261l-871.6-6s110 409 66 705c-1.7 62.5 123 132.5 369.6 140.7 246.3-6.3 390.2-83.7 379-143.2-33.7-249 57-696.5 57-696.5z' fill='%235fc41e' class='H'/%3E%3Cpath d='M1110 764c-117.7 91-614.5 112.5-743 0-26.4 46.8-22.2 115.8-6 161 132.3 102.3 625.3 99.5 755 0 22-48 30.3-112-6-161z' fill='%23333' class='H'/%3E%3Cpath d='M832.6 796.8H629.8a30 30 0 0 0-30 30v73.7h-8c-18.4.4-14 21.8-14.5 34 0 8 6.5 14.5 14.5 14.5h8v80.4a30 30 0 0 0 30 30h202.7a30 30 0 0 0 30-30V826.8a30 30 0 0 0-30-30zm-8.5 201a20 20 0 0 1-20 20H661.7a20 20 0 0 1-20-20V949h46.6c8 0 14.5-6.5 14.5-14.5-.3-12.2 4-33.6-14.5-34h-46.6v-45.3a20 20 0 0 1 20-20H804a20 20 0 0 1 20 20v142.4z' fill='%23fff600' class='H'/%3E%3Cpath d='M732 145.8c-580 1.2-580 214.4 0 215.5 580-1.2 580-214.3 0-215.5z' fill='%232b8500' class='H'/%3E%3Cpath d='M1061.4 697.6l-54-2-11.2-39.5c14.8-13.6 29-28.3 43-44l-12-25a597 597 0 0 0-56.8 17.5c-7.6-11.7-16.2-22.7-25.5-33l28.3-55.7L952 497c-18.2 11.5-35 23.2-51.2 36a250 250 0 0 0-37-21.1l8-59.4-28-9a479 479 0 0 0-36.8 49.1c-14.2-3-28.7-5.3-43.3-6.3l-15.3-56c-10.2-.3-20.3 0-30.4.5a531 531 0 0 0-15.5 57.1c-14.5 1.8-29 4.6-43 8.4-10.5-16.7-22-32.4-35.2-48.5L597 458l6.2 59.6a321 321 0 0 0-36.6 21.6l-48-35.2c-7.4 5.7-14.4 12-21.3 18 7.8 19 16 37.2 25 54.8l-25.8 31.7-54.4-19-12.6 23.8a554 554 0 0 0 40.7 44.8 226 226 0 0 0-11.2 39l-54-.4-2.7 28 113.6 18c1.5-67 43.8-126.6 101.2-159.7 135-81.8 321.2-3.7 335 159l111.4-16.5a405 405 0 0 0-2.3-28z' fill='%23236b01' class='H'/%3E%3C/svg%3E");
    --svg-clover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1451 1451' xmlns:v='https://vecta.io/nano'%3E%3Cstyle%3E%3C!%5BCDATA%5B.E%7Benable-background:new%7D%5D%5D%3E%3C/style%3E%3Cg fill='%232b8501' class='E'%3E%3Cpath d='M767 623.7c-49.6-5.8-74.5 4.4-74.5 4.4s81.7 555.3-108 727.5c11.8 196.6 283.2-154 182.6-732z'/%3E%3Cpath d='M1027.6 393.2c30-17.4 44.3-29.5 71-54.5 135-126.3-13-234.6-136.8-207-42.6-186.3-287-109-268 106.4-29.2-58-57.8-90-116.7-137.6-144-116.2-241.2 54.4-188.4 166-151.4 48-108 276.8 90 253.7-44.6 35.7-64.7 64.3-97 119.7-93 160 89.3 232.2 191.4 163C601 856.3 685 921.6 776 827.6c20.8-21.5 30.6-37.5 31-75C909.7 922 1080 803.2 1037.7 645c127.8-16.6 157.8-213.7-10-252z'/%3E%3C/g%3E%3Cpath d='M999.3 397c29.3-17 57.7-37.5 83.8-61.8 131.6-123-15.7-224.2-130.4-188.4-11-57.5-63.2-140.7-174.5-78.5-55.6 31-73.6 122-74.8 211.4C675 223 632.5 164 575.2 117.8 435 4.6 355.4 164.5 406.8 273 243.5 332 315.3 534 515 506.6c-43.5 34.8-85.4 79.6-116.8 133.7-90.5 155.8 79.7 210 179.2 142.8 44.5 105.8 218.2 102.3 223.2-59.3 108.3 173 263 78 223.3-87.4 136.7-17.8 152-211-24.5-239.5z' fill='%235fc41e' class='E'/%3E%3Cpath d='M746 198c63.8-125.8 171.6-71.7 171.6-71.7C859.6 17 732.3 84.6 746 198zm273-28.6c-30 6.8-42.3 21.3-57 44.8 38.4-15 75.2-29 139.4 0-8-30.6-47.3-53-82.5-44.8zM546 120c-99-61.2-130 49-130 49-.1-.1 53-51.6 151 5 17.2 15 7-36.7-21-54zM403.5 310c-62.7 8.7-82.8 74.6-45.4 135 1.7-97.7 93.4-103 45.4-135z' fill='%2383d84c' class='E'/%3E%3Cg fill='%232b8501' class='E'%3E%3Cpath d='M590.7 724c-8 15.7 5.8 33 23.2 19 45.6-28.2 98.4-254.5 96.5-259.3C662.7 628 595.6 715.5 590.7 724zm337.7-494.8c12-13 3.4-33.5-17.2-24.5C859.6 219.5 747.4 423 748 428.2c85-126.2 173.4-192 180.4-199zM699 444.4c-140.5-58.5-222.5-132-230.6-137.6-15-9.3-33.5 3.3-20.6 21.6C472.5 376 694.2 446 699 444.4zm289.6 149.8c-22-49-239.8-130.3-244.8-129C881.2 531 959.2 609 967 614.8c14.5 10 33.6-1.5 21.7-20.5z'/%3E%3Cpath d='M988.7 594.3c-22-49-239.8-130.3-244.8-129C881.2 531 959.2 609 967 614.8c14.5 10 33.6-1.5 21.7-20.5z'/%3E%3C/g%3E%3C/svg%3E");
    --svg-halloween-pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 307.2 307.2' xmlns:v='https://vecta.io/nano'%3E%3Cstyle%3E%3C!%5BCDATA%5B.K%7Benable-background:new%7D.L%7Bfill:%23ffb94a%7D%5D%5D%3E%3C/style%3E%3Cpath d='M194.4 80.6c-7 0-13.5 2.4-19.5 6.7-5.5-7.3-11.8-11.5-18.5-11.5-6.8 0-13.2 4.3-18.7 12-6.2-4.5-13-7-20-7-28 0-50.8 38.8-50.8 86.7s22.7 86.8 50.8 86.8c5 0 9.6-1.2 14-3.4 6.8 13.8 15.4 22 24.8 22 9.3 0 18-8 24.6-21.7 4.3 2 8.8 3 13.4 3 28 0 50.8-38.8 50.8-86.7 0-48-22.7-86.7-50.8-86.7z' fill='%23c24900' class='K'/%3E%3Cpath d='M83.6 92c-28 0-50.8 38.8-50.8 86.8s22.7 86.8 50.8 86.8 50.8-38.8 50.8-86.7S111.6 92 83.6 92zm140 0c-28 0-50.8 38.8-50.8 86.8s22.7 86.8 50.8 86.8c28 0 50.8-38.8 50.8-86.7S251.7 92 223.6 92z' fill='%23f24f07' class='K'/%3E%3Cpath d='M197.2 44.8c7.3-8.8 8-26.7-7.3-26.6-17.5.1-33.8 21-39.4 37.2l-7.6 25c-8.4 11.3-23 22.6-23 22.6l37 10.7 37.4-10.7L170.3 80c.8.2-8.4-5 1.2-24.8 3.7-7.6 15-7.8 25.7-10.4z' fill='%236d2e06' class='K'/%3E%3Cpath d='M190 18.2c-17.5.1-33.8 21-39.4 37.2l-5 16c1-.3 2.3-1.4 4-2.5 2.3-1.6 3 3 3 4.8-.1 1.7-.5 7 1.8 4.2s2-9 3.6-9 1.3 5.5 3 6c1.7.5 3.7-2.6 4.2-4.2.5-1.5.1.8 2 1.7a34 34 0 0 1 4.3-17.2c3.7-7.6 15-7.8 25.7-10.4 7.3-8.8 8-26.7-7.3-26.6z' fill='%23ac5019' class='K'/%3E%3Cellipse cx='192.9' cy='31.8' rx='9.9' ry='13.2' class='K L'/%3E%3Cpath d='M208 92.8c-23 0-42.7 24-51 58-8.3-34-28-58-51-58-30.5 0-55.2 42-55.2 94s24.7 94 55.2 94c23 0 42.7-24 51-58 8.3 34 28 58 51 58 30.5 0 55.2-42 55.2-94s-24.7-94-55.2-94z' fill='%23fc8201' class='K'/%3E%3Cpath d='M186 97c-10.6 0-20.5 4.8-29 13-8.5-8.3-18.4-13-29-13-31.4 0-57 42-57 93.6s25.5 93.6 57 93.6c10.6 0 20.5-4.8 29-13 8.5 8.3 18.4 13 29 13 31.4 0 57-42 57-93.6S217.3 97 186 97z' fill='%23fe9c01' class='K'/%3E%3Cellipse cx='156.4' cy='190.5' rx='39.3' ry='98.5' class='K L'/%3E%3Cpath d='M245.3 213l-15.3-3.3-1.4-5.8-2-5.7 11.6-10-3.6-7.3a121 121 0 0 0-15.5 2.4l-3.5-5c-1.2-1.6-2.5-3-3.8-4.7a141 141 0 0 0 7.1-13.6l-6-5.5c-4.8 2.4-9.2 5-13.6 8l-5-3.4-5.3-3c1-5 1.4-10 1.8-15.3a93 93 0 0 0-7.6-2.9c-3.6 4-6.8 8-9.8 12.2l-6-1.3-6-1-4-15h-8.2l-4.7 15-6 1c-2 .4-4 .8-6 1.4-2.7-4.3-5.7-8.4-9-12.5l-7.6 3a124 124 0 0 0 1 15.6l-5.2 3c-1.7 1-3.4 2.2-5 3.4a138 138 0 0 0-12.9-8.3 101 101 0 0 0-6 5.5 123 123 0 0 0 6.6 14.2l-3.8 4.7-3.4 5-15-3.2c-1.3 2.4-2.5 4.8-3.6 7.3l11.3 11-2 5.7-1.4 6-15 2.5c-.4 2.7-.6 11.4-.8 14 .1.1.3.1.4.2h31l2-18a61 61 0 0 1 26.5-35.3 61 61 0 0 1 43.4-8.3c7.4 1.4 14.6 4 21 8 6.4 4 12 9 16.7 15 4.6 6 8 12.8 10 20 1.2 4 2 14.3 2.2 18.4H246l-.7-14z' fill='%235c1000' class='K'/%3E%3Cpath d='M246 223.2h-26.6c-.4-6.5-1.4-14-3.6-19.6a67 67 0 0 0-62.2-42.8c-27 0-51.6 17.4-61.7 42.2-2.4 6-3.5 13.5-4 20.2H61.3l-.1 3.5c.1.1.3.1.4.2h31l2-18a61 61 0 0 1 26.5-35.3 61 61 0 0 1 43.4-8.3c7.4 1.4 14.6 4 21 8 6.4 4 12 9 16.7 15 4.6 6 8 12.8 10 20 1.2 4 2 14.3 2.2 18.4H246v-3.7z' opacity='.6' class='K L'/%3E%3C/svg%3E");
    --svg-valentines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:v='https://vecta.io/nano'%3E%3Cstyle%3E%3C!%5BCDATA%5B.N%7Benable-background:new%7D%5D%5D%3E%3C/style%3E%3Cpath d='M377.5 209.4l-151.3 167V428c155-92.6 159.4-143.6 151.3-218.4z' fill='%237f3244' class='N'/%3E%3Cpath d='M80 204.2c-5.3 76.6-9.5 121.6 146 223.7v-51.3L80 204.2z' fill='%23bc556d' class='N'/%3E%3Cpath d='M377.5 214.7c-3-111.2-133-64.5-151.3-46-6.6-9.2-109.7-72.5-143.4 22.4C54.4 277.4 226 389.7 226 389.7s153.6-87.5 151.3-175z' fill='%23d25472' class='N'/%3E%3Cpath d='M226.3 178c-6.3-8.8-104.7-72.5-136.4 16.6-27 82.2 136.4 189 136.4 189s146-83.2 144-166.5c-2.8-105.8-126.4-56.6-144-39z' fill='%23ac5019' class='N'/%3E%3Cpath d='M363 252.4c-.2-105.7-118.3-54.6-136.5-33-6-8.3-98.7-82.5-129 2.8-19 67 126.7 157.6 129 161.2 4.4-2.5 108-62.6 136.6-131zm-136.6 131l-.2.1c.2.1.2 0 .2-.1z' fill='%236d2e06' class='N'/%3E%3Cpath d='M287 366.6L272.4 422C466 366.4 485.4 312.6 498 229.5l-211 137z' fill='%23c54a67' class='N'/%3E%3Cpath d='M178.7 139c-27.6 81-45 128.5 93.7 283l14.7-55.4L178.7 139z' fill='%23e8829a' class='N'/%3E%3Cpath d='M346.4 142.3c-4.5-11.8-97.7-109.5-161-16.8-55.2 85.2 98 255.4 98 255.4S474 330.3 496.6 235.2c28.6-120.8-125-107.5-150-93z' fill='%23d25472' class='N'/%3E%3Cpath d='M422.4 289a148 148 0 0 0-16.7-8.6 107 107 0 0 0-1.9-14.9l14-8.3a113 113 0 0 0-2.9-9.2l-16.7-1.7-6-12.4 9.4-12.2-5.3-7.2-15 4.3a87 87 0 0 0-9.2-9.1 127 127 0 0 0 4.6-14.3l-7-4.7a113 113 0 0 0-12.2 9 85 85 0 0 0-11.3-5.2 123 123 0 0 0-.4-14.8c-2.6-.8-5.3-1.5-8-2l-8.4 12.5c-4-.6-8.3-1-12.4-1l-5.3-14-8.3.7a114 114 0 0 0-3.9 14.8l-12.5 3.4c-3-4-6.5-8-10-11.4a124 124 0 0 0-8.1 3.6c.1 5.3.5 10.5 1.4 15.8-4 2.3-7.8 5-11.4 8a141 141 0 0 0-14.6-7.5l-7 6.5a112 112 0 0 0 7.2 14.9c-3.2 3.8-6.3 7.8-9 12-6-1-12-1.4-18.2-1.6-1.8 3-6.7 13.2-8.3 16.4l.3.3 36 9.5c35.2-90.8 154.8-59.3 140.5 37.2l36.3 9.6 1-18.2z' fill='%23b6405b' class='N'/%3E%3Cpath d='M421.5 277.7a148 148 0 0 0-16.7-8.6 107 107 0 0 0-1.9-14.8l14-8.3a113 113 0 0 0-2.9-9.2l-16.7-1.7-6-12.4 9.4-12.2-5.3-7.2-15 4.3a87 87 0 0 0-9.2-9.1 127 127 0 0 0 4.6-14.3l-7-4.7a113 113 0 0 0-12.2 9 85 85 0 0 0-11.3-5.2 123 123 0 0 0-.4-14.8c-2.6-.8-5.3-1.5-8-2l-8.4 12.5c-4-.6-8.3-1-12.4-1l-5.3-14-8.3.7a114 114 0 0 0-3.9 14.8l-12.5 3.4c-3-4-6.5-8-10-11.4a124 124 0 0 0-8.1 3.6c.1 5.3.5 10.5 1.4 15.8-4 2.3-7.8 5-11.4 8a141 141 0 0 0-14.6-7.5l-7 6.5a112 112 0 0 0 7.2 14.9c-3.2 3.8-6.3 7.8-9 12-6-1-12-1.4-18.2-1.6-1.8 3-6.7 13.2-8.3 16.4l.3.3 36 9.5c35.2-90.8 154.8-59.3 140.5 37.2l36.3 9.6 1-18.2z' fill='%23ffe6be' class='N'/%3E%3Cpath d='M88 293l-66.8-2.6s-1.4 6.4-7 40c9.4 36 67.5 35 80.6 2.6-4.3-22.8-7-40-7-40z' fill='%23513020' class='N'/%3E%3Cpath d='M54.3 270.4c-49.7 2.5-37.4 41.8 1 43.4 39.2.8 48.4-43-1-43.4z' fill='%23733d35' class='N'/%3E%3Cpath d='M76.8 293.8c-.4-3.8-.8-6-7-7.8-11-3.3-20.3 5.4-25 8.7-3.2 2.2-9-.8-7-7.8 3.3-11 26-6 26-6 9.8-7.6-31-11.3-32 7.8-2 12 10.6 16.3 15.6 12 8-6.7 18.7-13.5 20.8-7.8 1 2.6-1.7 8.5-12 10.4-2.3.4-5 4.7 2.6 5.2s18.8-8 18.2-14.7z' fill='%23eb9961' class='N'/%3E%3Cpath d='M161.4 349.5L78 346.2s-1.8 8-8.7 49.8c11.7 45 84.2 43.8 100.6 3.3-5.4-28.5-8.7-49.8-8.7-49.8z' fill='%23513020' class='N'/%3E%3Cpath d='M119.2 321.4c-62 3-46.7 52 1 54 48.8 1 60.4-53.7-1-54z' fill='%23733d35' class='N'/%3E%3Cpath d='M147.3 350.6c-.4-4.8-1-7.4-8.7-9.7-13.8-4-25.3 6.7-31.4 10.8-4 2.7-11.3-1-8.7-9.7 4-13.7 32.4-7.6 32.4-7.6 8-4-8-9.8-16.2-7.6-33.6.8-29 42.6-4.3 32.4 10-8.4 23.3-16.8 26-9.7 1.2 3.3-2 10.6-15 13-2.8.5-6.2 6 3.3 6.5 9.5.6 23.5-10 22.7-18.4z' fill='%23eb9961' class='N'/%3E%3C/svg%3E");
    --svg-anzac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384' xmlns:v='https://vecta.io/nano'%3E%3Cstyle%3E%3C!%5BCDATA%5B.F%7Benable-background:new%7D%5D%5D%3E%3C/style%3E%3Cpath d='M31.5 174.7c-16.6 9-16 20.7-23.5 41-7.4 20.2 1.3 31 16.3 48 15 17 7.4 33 20.4 55.2s47.8 25.2 73.4 39c16 8.6 10.4 15.6 36.7 13.3s28.8-26.3 40.8-42-3.8-137-3.8-137L31.5 174.7zm331.6-52c-15-17-7.4-33-20.4-55.2s-41.2-15.7-64.4-33.2c-15-11.3-19.6-21.3-46-19s-29 26.3-41 42S192 192 192 192s147.5 28.5 164 19.6 16-20.7 23.5-41c7.4-20.2-1.3-31-16.4-48z' fill='%23e83c32' class='F'/%3E%3Cpath d='M369 214.3c-6.5-25.6-27-28.7-45.8-36.5-17.8-7.2-125.6 10.8-131 11.7 1.8-19.4 13-148.5 3.2-163-10.6-15.6-22.2-14-43-19.3-20.8-5.3-30.6 4.4-46 21s-32 10.7-52.7 26-25.5 48.6-31 77.2c-3 15.4-14.4 12-9.5 38 5 26 29 26 45.7 36.5 16.2 10 127-12.7 133-14-2 19.7-15.3 150.6-5.5 165 10.6 15.6 22.2 14 43 19.3s30.6-4.4 46-21 32-10.7 53-26 24-49 31.2-77c7.2-28.2 13.3-23 9.5-38z' fill='%23db2116' class='F'/%3E%3Cpath d='M167.5 194c9.3-6.2-17-4.5-28.3-.5-4.2-4-13.2-2.3-13 5.2-.2 9.8 15.3 10 15.2 0l-.1-1.4c9-4 24-3.3 26.4-3.3zm21-49c.5.1 1 .2 1.4.2 2 9.6-2.4 24-3 26.2 4 10.4 8.4-15.2 7.2-27.2 5-3 5.4-12.2-2-13.8-9.6-2.5-13.4 12.4-3.6 14.6zm52.2 46.2c-.1.5-.2 1-.2 1.4-9.7 2-24-2.4-26.4-3-10.5 3.8 15.4 8.3 27.4 7 3 5 12.3 5.3 14-2 2.5-9.5-12.5-13.2-14.7-3.6zM193 242c-.5-.1-1-.2-1.4-.2-2-9.7 2-24.2 2.5-26.5-4-10.4-8 15.5-6.6 27.5-4.8 3.2-5 12.4 2.3 14 9.6 2.3 13-12.8 3.3-14.8zM153.4 164a9 9 0 0 0 1-1c9 4 18.4 15.8 20 17.6 11 3-7.8-15.6-18.3-21.6.3-5.8-7-11.4-12.6-6.4-7.5 6.4 2.7 18 10 11.4zm75-3.7c5.7 1.3 12.4-4.8 8.3-11.2-5-8.5-18.2-.7-13 7.8.3.4.6.8 1 1.2-5.4 8-18.6 15.2-20.6 16.4-4.8 10.2 16.7-4.8 24.3-14zm-.3 66c-.4.3-.8.5-1.2.8-8.2-5.5-15.4-18.7-16.6-20.8-10.2-5 5 16.7 14.4 24.4-1.3 5.7 5 12.5 11.3 8.4 8.5-5 .4-18.2-8-13zm-74-1c-5.7-1.2-12.4 5.2-8.3 11.5 5 8.4 18.2.1 12.8-8-.3-.4-.6-.8-1-1.2 5.4-8.3 18.5-15.7 20.5-17 4.7-10.3-16.6 5.3-24.2 14.8z' fill='%237a1d17' class='F'/%3E%3Cpath d='M211.3 171c-4.6-9-10-14.3-20.3-14.3-9.3 0-16.5 5.3-20 13.5-4 9-16.2 12-16.2 22.7 0 10.6 9.7 17 18.6 22.5 7.5 4.6 8.2 13.7 17.7 13.7 10.4 0 13-11.8 21-17 7-4.5 15.2-9.6 15.2-19.3 0-9.6-12-14-16-22z' fill='%23580702' class='F'/%3E%3C/svg%3E");
    --svg-anzac-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:v='https://vecta.io/nano'%3E%3Cstyle%3E%3C!%5BCDATA%5B.G%7Benable-background:new%7D%5D%5D%3E%3C/style%3E%3Cg fill='%23977139' class='G'%3E%3Cpath d='M283.3 267S11 284.8 11.7 318.6C5.4 364 407 396 283.3 267z'/%3E%3Cpath d='M357.8 154.5c-73.4-29.8-187.3-11.4-206.5 42.3-11.7 32 0 116.8 0 116.8 87.2 57.4 252.8-18.5 253-25.4s8.2-105.4-46.6-133.7z'/%3E%3C/g%3E%3Cpath d='M393.3 218.8c-34.5 18.8-163.4 67-247 22-9.3 30.5 0 72.8 0 72.8 63.5 52.3 234.4-6.5 250.5-16 0 0 8.3-85.2-3.4-78.7z' fill='%23e8c978' class='G'/%3E%3Cpath d='M316.3 242.5C291 294 250.8 356.3 189.4 355s-145-19-177-40.6c-3 2-5.8 17.8-2.5 20.3 31.3 23.7 135.2 41.5 182.7 36 119.2-13.4 247-58 296.3-79.3 69.4-84-129.5-137-172.6-49z' fill='%23ffe5a1' class='G'/%3E%3Cpath d='M413.2 197.7c-103.2 10.7-82 111-173 166A1625 1625 0 0 0 489 291.6c38.3-47-8-86.5-75.8-94z' fill='%23e8c978' class='G'/%3E%3Cpath d='M310 141.7C265.5 138 206.6 144 165.7 175c-8 6-20 31.2-4.2 37.7 53.2 32.3 29.8-44.6 158-52.7 16.7-3.2 25.4-15.4-9.4-18.3z' fill='%236d4c1c' class='G'/%3E%3Cpath d='M163.2 199c2-42.3 104.5-57.8 92.3-57.3C94.8 155.3 157 267.6 210 206c24.8-32 75.4-41.8 95-44.3-34.7 2.4-63.6.3-110.7 43.6-16.2 15-32.5.4-31-6.3zM305 161.6l5.7-.4c4.7-.4 1.8-.5-5.7.4z' fill='%23bf9a64' class='G'/%3E%3C/svg%3E");
    --svg-hard-hat-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 307.2 307.2' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M258 197.5c-18.7-120-91.6-130.5-107.7-134-19.2-14.4-53-4-58 8.3-62 18-67.7 103.6-67.7 103.6l-6 8.3-.4 12.4L8 204.4v9.7l13.8-11 15.2-1.4 48.3 20.7 62.2 20.7 107.7-1.4c34-.8 42.8-13.8 42.8-13.8s-18-10-40-30.4z' fill='%23fc0'/%3E%3Cpath d='M260.5 199.5c-.2-1.3-3.4-4.5-3.6-5.8-5 12.2-115.6 19-161.6 12.3-10.7.8-52.6-26-75.6-17.3l-.8 7.4-11.3 8.3v9.7l15.8-11c19.4-2.2 14.3-1.4 31.8 5.5 19.6 10.2 72.3 27.6 94 34.5l106.7-2.4c33.7-4.5 42.8-13.8 42.8-13.8s-16-7-38-27.4z' fill='%23ffe032'/%3E%3Cpath d='M146.8 87.8C61.2 31.6 25.5 147 26 175.4H26l84.7-2.8c15.7-65.7 50-57 36-85z' fill='%23fc0'/%3E%3Cpath d='M18.6 180.8l.3 12.4c16-.1 59.6 9.4 59.6 9.4v-26.8c-8.7-4.4-60 5-60 5z' fill='%23fbe979'/%3E%3Cpath d='M145 239l-94-34.5C26.6 192 8.2 207 8.2 207s-1.2 13.7 0 12.4c16.7-17.7 32-10 41.2-6.5l95.5 35.5c39.3 3 126.4 6 153.3-12.4v-9.7c-23.2 17-131.7 18-153.2 12.7zm6-175a217 217 0 0 1 86.4 82.4C232 106.4 172 66 151 64zm-17 10.8c-20.2-8.8-44.4-.2-44.4-.2 41 2.3 48.2 11.3 54 18 5 5.7 8.4 10.5 2.8 15.2-5.2 4.3-32 35.3-36 52.5s-24 7-29.5 7c-26-.8-59 1.8-62.2 13.8 56.3-8 57.4 8 93.4-.3 3-1.7 10.7-7 10.4-14-1-23.3 35-55.8 38.4-59.2s-2.6-13-6.4-17.5c-5.3-6.3-7.6-9.5-20.3-15z' fill='%23eba602'/%3E%3Cpath d='M191.6 141.7s-16.8-2.7-7.4 10c8 10.8 12.4 37 6.7 54.6 0 0 39.2.5 39.5-4.4.5-9.8-12.8-48.3-38.8-60.2zM96 130.3c-4.5-20.4-53.4 15.3-49.5 37.5 10.5.2 29-3.2 37.5 0 0 0-3.2-16.6 12-37.5z' fill='%23fbe979'/%3E%3C/svg%3E");
    --svg-hard-hat-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 307.2 307.2' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M259.5 197.5C241 77.6 168 67 151.8 63.5c-19.2-14.4-53-4-58 8.3C31.7 90 26 175.4 26 175.4l-7 8.3-1.4 12.4-8.3 8.3v9.7l13.8-11 15.2-1.4L87 222.3 149 243l107.7-1.4c34-.8 42.8-13.8 42.8-13.8s-18-10-40-30.4z' fill='%23fc0'/%3E%3Cpath d='M259.5 197.5l-.6-3.8c-5 12.2-117.6 19-163.6 12.3-10.7.8-53.6-26-76.6-17.3l-.8 7.4-8.3 8.3v9.7l13.8-11c19.4-2.2 14.3-1.4 31.8 5.5 19.6 10.2 72.3 27.6 94 34.5l107.7-1.4c34-.8 42.8-13.8 42.8-13.8s-18-10-40-30.4z' fill='%23ffe032'/%3E%3Cpath d='M146.8 87.8C61.2 31.6 25.5 147 26 175.4H26l84.7-2.8c15.7-65.7 50-57 36-85z' fill='%23fc0'/%3E%3Cpath d='M19.6 175.8s-.7 13.3 1.3 17.4c2.8 5.4 57.6 9.4 57.6 9.4v-26.8c-8.7-4.4-59 0-59 0z' fill='%23fbe979'/%3E%3Cpath d='M145 239l-94-34.5C26.6 192 8.2 207 8.2 207s-1.2 13.7 0 12.4c16.7-17.7 32-10 41.2-6.5l95.5 35.5c39.3 3 126.4 6 153.3-12.4v-9.7c-23.2 17-131.7 18-153.2 12.7zm6-175a217 217 0 0 1 86.4 82.4C232 106.4 172 66 151 64zm-20 7.8c-24.4-10.4-41.4 2.8-41.4 2.8 41 2.3 48.2 11.3 54 18 5 5.7 8.4 10.5 2.8 15.2-5.2 4.3-32 35.3-36 52.5s-24 7-29.5 7c-26-.8-57 1.8-60.2 13.8 56.3-8 55.4 8 91.4-.3 3-1.7 10.7-7 10.4-14-1-23.3 32-52.8 35.4-56.2s3.2-14 .6-19.5c-3.6-7.5-5.4-9.7-27.3-19z' fill='%23eba602'/%3E%3Cpath d='M189.6 143.7s-9.2 1.5-5.4 8c5 2.2 8.5 48.6 6.7 53.6 0 0 31-1.2 33.5-5.4 5-10-17.4-57.6-34.8-56.2zM96 130.3c-4.5-20.4-53.4 15.3-49.5 37.5 10.5.2 29-3.2 37.5 0 0 0-3.2-16.6 12-37.5z' fill='%23fbe979'/%3E%3Cpath d='M243.2 177.2c-2.8-1-5.7-1.6-8.5-2a79 79 0 0 0-2.7-8.7c2-2.4 3.8-5 5.5-7.8l-2.5-5.4c-2.8.4-5.6 1-8.2 2a69 69 0 0 0-4.7-7.1c1-3.3 2-6.7 3-10.2l-3.7-4c-2.5 1.8-4.8 3.7-7 6-2-1.7-4-3.3-6.3-4.7.2-3.8.1-7.6-.1-11.5-1.5-.8-3-1.6-4.5-2.3l-5 9.2a39 39 0 0 0-7.1-1.7l-3.3-11.5a42 42 0 0 0-4.9-.1c-.8 3.8-1.5 7.6-2 11.6-2.4.3-4.8 1-7 1.7l-6.4-10-4.6 2.2a125 125 0 0 0 1.5 12.5c-2.2 1.5-4.3 3.3-6.2 5.2a102 102 0 0 0-8.9-6.8l-3.7 4.5 5.2 11.7-4.3 8c-3.4-1-6.8-1.8-10.4-2.4l-2 6.3a100 100 0 0 0 8.3 9c-.7 3.3-1.3 6.6-1.6 10-3.5.7-7 1.6-10.5 2.8l.2 12.4h.3l21.6-1.6c-4.2-66.8 68.2-71.3 74.8-5.5l17.2-1.3-1.5-10.5z' fill='%23a04400'/%3E%3C/svg%3E");
    --svg-hammer-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M568.1 196.3l-22.62-22.62c-4.533-4.533-10.56-7.029-16.97-7.029s-12.44 2.496-16.97 7.029l-5.654 5.656l-20.12-20.12c4.596-23.46-2.652-47.9-19.47-64.73l-45.25-45.25C390.2 17.47 347.1 0 303.1 0C258.2 0 216 17.47 184.3 49.21L176.5 57.05L272.5 105.1v13.81c0 18.95 7.688 37.5 21.09 50.91l49.16 49.14c13.44 13.45 31.39 20.86 50.54 20.86c4.758 0 9.512-.4648 14.18-1.387l20.12 20.12l-5.654 5.654c-9.357 9.357-9.357 24.58-.002 33.94l22.62 22.62c4.535 4.533 10.56 7.031 16.97 7.031s12.44-2.498 16.97-7.031l90.53-90.5C578.3 220.8 578.3 205.6 568.1 196.3zM270.9 192.4c-3.846-3.846-7.197-8.113-10.37-12.49l-239.5 209.2c-28.12 28.12-28.16 73.72-.0371 101.8C35.12 505 53.56 512 71.1 512s36.84-7.031 50.91-21.09l209.1-239.4c-4.141-3.061-8.184-6.289-11.89-9.996L270.9 192.4z' fill='%23ffcc00' /%3E%3C/svg%3E");
    --svg-tap-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M695.6 512H622c-30.6-24.5-67-42.8-110-55V365l-61.2-6-61.2 6V457c-42.8 12.2-79.4 30.6-110 55H53c-18.4 0-30.6 12.2-30.6 30.6v183.6c0 18.4 12.2 30.6 30.6 30.6h177.4c35 73.4 122.4 122.4 220.4 122.4s183.6-49 220.3-122.4h24.5c36.7 0 61.2 24.3 61.2 61 0 36.7 24.5 61.4 61.2 61.4h122.4c36.7 0 61.2-24.4 61.2-61a303 303 0 0 0-306-306.1zM512 230.5v-.8-54.2c0-18.4-12.2-30.6-30.6-30.6h-61.2c-18.4 0-30.6 12.2-30.6 30.6v54.3.8l61.2 6 61.2-6z' fill='%23ffe032' enable-background='new'/%3E%3Cpath d='M720 206l-208 23.7h0l-61.2 7-61.2-7h0l-208-23.7c-18.4 0-36.7 12.2-36.7 30.6v61.2c0 18.4 18.4 30.6 36.7 30.6l269.3-30.6L720 328.4c18.4 0 36.7-12.2 36.7-36.7v-55c0-18.4-18.4-30.6-36.7-30.6z' fill='%23eba602' enable-background='new'/%3E%3Cpath d='M653 681l-34-7.4-3-13-4.2-12.7 25.7-22.4-8-16.2a267 267 0 0 0-34.3 5.3l-7.7-11c-2.6-3.6-5.6-7-8.5-10.3a313 313 0 0 0 15.8-30.1L581.3 551c-10.6 5.3-20.5 11-30 17.5l-11-7.5-11.7-6.5a312 312 0 0 0 3.9-33.9 216 216 0 0 0-16.8-6.5 273 273 0 0 0-21.8 27l-13-3-13.2-2-8.6-33h-18l-10.5 33-13.2 2-13 3a310 310 0 0 0-19.9-27.6l-16.8 6.5a273 273 0 0 0 2.1 34.6l-11.6 6.6c-3.8 2.3-7.4 5-11 7.5a307 307 0 0 0-28.6-18.5 217 217 0 0 0-13.4 12.1 272 272 0 0 0 14.6 31.5l-8.4 10.4-7.6 11-33.4-7c-3 5.3-5.6 10.6-8 16l25 24.2-4 12.7-3 13L246 680l-1.7 18c.3.1.6.3 1 .4h69a135 135 0 0 1 4.7-26.7c4.5-16 12-31.4 22-44.7a135 135 0 0 1 36.7-33.6c14-8.8 30-15 46.5-18 16.4-3 33.3-3.2 49.7-.2 16.4 3 32.3 9 46.5 18 14.3 8.8 27 20.2 37 33.5 10 13.3 17.6 28.4 22.3 44.5a139 139 0 0 1 4.9 27.6h70c-.2-6-.8-11.8-1.6-17.7z' fill='%23a04400' enable-background='new'/%3E%3C/svg%3E");
    --svg-mustache-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 290' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M414.4 4C369.5-4.2 308 14 283 59c-84.8 129.6-217.7 91.4-252.6 86.4-31.6-5-40 10-10 35 156.2 133 310 115.5 370.6 88C449 242 507.7 189.8 509 118.7 510.4 54.4 459.3 12.4 414.4 4z' fill='%2387e9ff' enable-background='new'/%3E%3Cpath d='M508.8 107c-1.4-11-4-21.8-7.5-32a120 120 0 0 0-86.9-70.9C369.5-4.2 308 14 283 59l-24 31-14.2 38c47-33 49.4-54.5 112-54a292 292 0 0 0-93 92c58.6-27.5 116.4-46.5 135-37-29.4 17.5-64.6 33.5-115 80 86-24.2 135.4-30.5 147-27 2.4 16-28.6 60.5-105 85 61.5 1.7 110.2-24.3 141.4-52.4 24.2-26 41-58.3 41.7-95.8a113 113 0 0 0-.3-11.7z' fill='%233fbeff' enable-background='new'/%3E%3C/svg%3E");
    --svg-mustache-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 290' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M480.5 145.4c-35 5-168 43.2-252.6-86.4C203 14 141.5-4.2 96.6 4S.6 54.4 2 118.8C3.3 190 62 242.2 120 268.4c60.5 27.4 214.4 45 370.6-88 30-25 21.6-40-10-35z' fill='%2387e9ff' enable-background='new'/%3E%3Cpath d='M247 166a292 292 0 0 0-93-92c62.6-.5 65 21 112 54-5-11.8-9.3-25-14.2-38-8.3-9-16.3-19.3-24-31C203 14 141.5-4.2 96.6 4A120 120 0 0 0 9.8 75a158 158 0 0 0-7.5 32.1L2 118.8c.8 37.5 17.5 69.8 41.7 95.8A203 203 0 0 0 185.1 267c-76.4-24.5-107.4-69-105-85 11.6-3.5 61 2.8 147 27-50.4-46.5-85.6-62.5-115-80 18.5-9.5 76.3 9.5 135 37z' fill='%233fbeff' enable-background='new'/%3E%3C/svg%3E");
}

@-webkit-keyframes anim-mustache-rocking-l {
    0% {
        -webkit-transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(-10deg)
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes anim-mustache-rocking-l {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-10deg)
    }

    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes anim-mustache-rocking-r {
    0% {
        -webkit-transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(10deg)
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes anim-mustache-rocking-r {
    0% {
        -webkit-transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(10deg)
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

.anim-mustache-rocking-l {
    -webkit-animation: anim-mustache-rocking-l 3.5s ease-in-out forwards infinite;
    animation: anim-mustache-rocking-l 3.5s ease-in-out forwards infinite;
}

.anim-mustache-rocking-r {
    -webkit-animation: anim-mustache-rocking-r 3.5s ease-in-out forwards infinite;
    animation: anim-mustache-rocking-r 3.5s ease-in-out forwards infinite;
}

.movember-theme {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 0px;
}

.movember-theme .svg-ascora-long-embed {
    width: 180px;
    height: 20px;
    position: absolute;
    top: 18px;
    left:20px;
}

.movember-theme .text-wrapper {
    position: absolute;
    display: inline-block;
    top: 18%;
    left: 46%;
    font-size: 14px;
    line-height: 9px;
    letter-spacing: 2px;
    font-family: 'Anton', 'Open Sans Condensed', sans-serif;
    color: #87e9ff;
    filter: drop-shadow(0 0 3px rgba(000, 000, 000, 0.5));
}

.movember-theme .wrapper-mustache {
    width: 65px;
    height: 16px;
    position: absolute;
    top: 24px;
    left: 118px;
    /*filter: brightness(110%) contrast(120%) drop-shadow(0 0 3px rgba(000, 000, 000, 0.5)) hue-rotate(35deg) saturate(100%);*/
    filter: drop-shadow(0 0 3px rgba(000, 000, 000, 0.5));
}

.movember-theme .wrapper-mustache .svg-mustache-l {
    background-image: var(--svg-mustache-l);
    background-repeat: no-repeat;
    background-size: contain;
    width:50%;
    height:100%;
    position:absolute;
    left:8%;
    top:0px;

    -webkit-transform-origin: 80% 50%;
    transform-origin: 80% 50%;
}

.movember-theme .wrapper-mustache .svg-mustache-r {
    display: inline-block;
    background-image: var(--svg-mustache-r);
    background-repeat: no-repeat;
    background-size: contain;
    width:50%;
    height:100%;
    position:absolute;
    right:8%;
    top:0px;

    -webkit-transform-origin: 10% 50%;
    transform-origin: 10% 50%;
}



@keyframes flux {
    0%, 100% {
        filter:
            drop-shadow(0 0 5px rgba(214, 234, 255, 0.6)) 
            drop-shadow(0 0 7px rgba(214, 234, 255, 0.6))
            drop-shadow(0 0 9px rgba(44, 127, 212, 0.6)) 
            drop-shadow(0 0 11px rgba(44, 127, 212, 0.6))
            hue-rotate(0deg);
        fill: #ffffff;
    }

    50% {
        filter:  
            drop-shadow(0 0 2px rgba(214, 234, 255, 0.3)) 
            drop-shadow(0 0 3px rgba(214, 234, 255, 0.3))
            drop-shadow(0 0 4px rgba(44, 127, 212, 0.3)) 
            drop-shadow(0 0 5px rgba(44, 127, 212, 0.3))
            hue-rotate(30deg);
        fill: #ffffff;
    }
}

.electrician-theme .spin-gear-2 {
    animation-name: spin-slow;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.electrician-theme .flux {
    animation: flux 2s linear infinite;
    -moz-animation: flux 2s linear infinite;
    -webkit-animation: flux 2s linear infinite;
    -o-animation: flux 2s linear infinite;
}

.electrician-theme {
    position: absolute;
    width: 100%;
    height: 100%;
}

.electrician-theme .text-wrapper {
    position: absolute;
    display: inline-block;
    top: 18%;
    left: 33%;
    font-size: 9px;
    line-height: 9px;
    font-weight: bold;
    z-index:2;
}

.electrician-theme .svg-ascora-long-embed {
    position: absolute;
    display: inline-block;
    width:150px;
    left:58px;
    top:20px;
}

.electrician-theme .svg-ascora-gear-full-embed
{
    width:42px;
    height:42px;
}

.electrician-theme .gear-outer {
    position: absolute;
    display: inline-block;
    width:42px;
    height:21px;
    left:12px;
    top:20px;
    overflow:hidden;
}

.tap-wrapper {
    position: absolute;
    width: 45px;
    height: 45px;
    left: 30px;
    top: 2px;
    line-height: 0px;
    z-index: 2;
}

.svg-tap {
    display: inline-block;
    background-image: var(--svg-tap-solid);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

@keyframes wave-animation {
    0% {
        background-position: 0 0px;
    }

    100% {
        background-position: 100px 0px;
    }
}

@keyframes wave-fill-animation {
    0% {
        background-size: 100px 30px;
    }

    100% {
        background-size: 100px 38px;
    }
}

.world-plumbing-theme-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    left:-8px;
}

.world-plumbing-theme-1 .text-wrapper {
    position: absolute;
    display: inline-block;
    top: 20%;
    left: 46%;
    font-size: 9px;
    line-height: 9px;
    font-weight: bold;
}

.world-plumbing-theme-1 .clip-logo {
    position: absolute;
    top: 17px;
    left: 75px;
    width: 200px;
    height: 19px;
    overflow:hidden;
}


.world-plumbing-theme-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    left:0px;
}

.world-plumbing-theme-2 .text-wrapper {
    position: absolute;
    display: inline-block;
    top: 20%;
    left: 46%;
    font-size: 9px;
    line-height: 9px;
    font-weight: bold;
}

.world-plumbing-theme-2 .clip-logo {
    position: absolute;
    top: 17px;
    left: 75px;
    width: 200px;
    height: 19px;
    overflow:hidden;
}

.world-plumbing-theme-1 .ascora-logo-water-fill {
    background-image: var(--svg-wave-short);

    color: transparent;
    background-color: #ffffff;
    text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
    animation: wave-animation 5s infinite linear, wave-fill-animation 5s infinite linear alternate;
    transform: translate3d(0, 0, 0);
    background-size: 100px 39px;
    background-repeat: repeat-x;
    opacity: 1;
    mask: var(--svg-ascora-long);
    mask-repeat: no-repeat;
    position: absolute;
    left:-42px;

    width: 200px;
    height: 19px;
}

.world-plumbing-theme-2 .ascora-logo-water-fill {
    background-image: var(--svg-wave-short);

    color: transparent;
    background-color: #ffffff;
    text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
    animation: wave-animation 5s infinite linear, wave-fill-animation 5s infinite linear alternate;
    transform: translate3d(0, 0, 0);
    background-size: 100px 39px;
    background-repeat: repeat-x;
    opacity: 1;
    mask: var(--svg-ascora-long);
    mask-repeat: no-repeat;

    position: absolute;
    left: 25px;
    top: 18px;

    width: 200px;
    height: 19px;
}

@keyframes drip {
    to {
        top: 35px;
    }
}

@keyframes rippleone {
    from {
        opacity: 1;
    }

    to {
        width: 100%;
        height: 100%;
        border-width: 1px;
        opacity: 0;
    }
}


@keyframes rippletwo {
    from {
        opacity: 1;
    }

    to {
        width: 35%;
        height: 35%;
        border-width: 1px;
        opacity: 0;
    }
}

.drop-wrapper {
    position: relative;
    width: 50px;
    height: 20px;
    left: 128px;
    top:22px;
}

.drop-wave-1 {
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    position: absolute;

    opacity: 0;
    width: 10%;
    height: 10%;
    border: #FFF 3px solid;
    -moz-border-radius: 300px / 150px;
    -webkit-border-radius: 300px / 150px;
    border-radius: 300px / 150px;
    -moz-animation-name: rippleone;
    -webkit-animation-name: rippleone;
    animation-name: rippleone;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


.drop-wave-2 {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    opacity: 0;
    width: 1%;
    height: 1%;
    border: #FFF 3px solid;
    -moz-border-radius: 300px / 150px;
    -webkit-border-radius: 300px / 150px;
    border-radius: 300px / 150px;
    -moz-animation-name: rippletwo;
    -webkit-animation-name: rippletwo;
    animation-name: rippletwo;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


.world-plumbing-theme-1 .drop {
    display:block;
    position: relative;
    width: 10px;
    height: 10px;
    top: -12px;
    left:148px;
    background: #43deff;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-animation-name: drip;
    -webkit-animation-name: drip;
    animation-name: drip;
    -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
    -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
    animation-timing-function: cubic-bezier(1,0,.91,.19);
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.world-plumbing-theme-1 .drop:before {
    display:block;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 14px solid #43deff;
    top: -10px;
}

.world-plumbing-theme-2 .drop {
    display:block;
    position: relative;
    width: 10px;
    height: 10px;
    top: -12px;
    left:148px;
    background: #43deff;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-animation-name: drip;
    -webkit-animation-name: drip;
    animation-name: drip;
    -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
    -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
    animation-timing-function: cubic-bezier(1,0,.91,.19);
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.world-plumbing-theme-2 .drop:before {
    display:block;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 14px solid #43deff;
    top: -10px;
}

.anzac-theme {
    position: relative;
}

.anzac-wrapper {
    /*overflow: hidden;*/
    width: 22px;
    height: 22px;
    position: absolute;
    display: inline-block;
    top: 9px;
    left: 61.7%;
}

.tradesmen-theme {
    position: absolute;
    width:100%;
    height:100%;
}

.tradesmen-theme .text-wrapper{
    position: absolute;
    display: inline-block;
    bottom: 3%;
    left: 37%;
    font-size:9px;
    line-height:9px;
    font-weight:bold;
}

.svg-hard-hat {
    display: inline-block;
    background-image: var(--svg-hard-hat-2);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-hammer {
    display: inline-block;
    background-image: var(--svg-hammer-solid);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.hammer-wrapper {
    /*overflow: hidden;*/
    width: 22px;
    height: 22px;
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 57%;
    line-height:0px;
}

.tradesmen-hat-wrapper {
    /*overflow: hidden;*/
    width: 56px;
    height: 56px;
    position: absolute;
    display: inline-block;
    top: -2px;
    left: 9%;
}


.svg-anzac {
    display: inline-block;
    background-image: var(--svg-anzac);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-anzac-hat {
    display: inline-block;
    background-image: var(--svg-anzac-hat);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.anzac-hat-wrapper {
    /*overflow: hidden;*/
    width: 40px;
    height: 40px;
    position: absolute;
    display: inline-block;
    top: -2px;
    left: 8%;
    transform:rotate(-15deg);
}


.halloween-theme {
    position: relative;
}

.pumpkin-wrapper {
    /*overflow: hidden;*/
    width: 55px;
    height: 55px;
    position: absolute;
    display: inline-block;
    top: -2px;
    left: 8%;
}

/*
.img-pumpkin-gear {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAF3SURBVGgF7dPBreQgDABQI6TlSAmUQmmhNEpxCRwjfRTvz+RDCDGMNtrRHtY++fAytrEH6E28BwIECBAgQIAAAQIECBAgQECyHwdoZmA9gBsCXHawmSEInqKhrKZAT4HbwToBdgdpAgwFTTgHiuIE6AzgZ0AFABX0GMArxiB+GOQWOAYkX5pUlC0D0G7wE0syDIgmF+BRc0ClAmxgAWABv4ADCE2YJ+DogOjoYgQc0ToFe/KCDFhLaZwAVxLPgLy/8Z5sY6DqYS0M2Or0OAS2zrPwJXybcVMs9bfYi4Ka8y+J544js6yvb2CqZUByEexZTSfbAYQArltLB5rZMgNi2UTZhn4CqAYDEECdINxBuvyp473JtQe2A7l8Uwr6Crpr6C6iAuoB9eB46dqRuoF4BfoGEPwJMpg/BxGWE2ygnwBqggHhCtQDoFoQHgC4AujB2gN7BVu9l3oxywWkO7AXgHdg/lNgWoB/H3Dxr4AAAQIECBAgQMBvgFUSiBhldcMAAAAASUVORK5CYII=');
    position: absolute;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}
*/

.svg-gear {
    position: absolute;
    display: inline-block;
}

.svg-gear path {
    fill: #0c7c00;
}

.svg-gear-shadow {
    animation: svg-gear-shadow 3s ease-in-out infinite alternate;
}

.svg-gear-shadow path{
    animation: svg-gear-fill 3s ease-in-out infinite alternate;
}

@keyframes svg-gear-fill {
    from {
        fill: #5c1000;
    }

    to {
        fill: #feffad;
    }
}

@keyframes svg-gear-shadow {
    from {
        filter:
        drop-shadow(0 0 2px rgba(255,255,255,0.2))
        drop-shadow(0 0 2px rgba(255,255,255,0.2))
        drop-shadow(0 0 4px rgba(255,221,27,0.2))
        drop-shadow(0 0 4px rgba(255,221,27,0.2))
        drop-shadow(0 0 4px rgba(255,221,27,0.2)) 
    }

    to {
        filter: 
        drop-shadow(0 0 2px rgba(255,255,255,0.6))
        drop-shadow(0 0 2px rgba(255,255,255,0.6))
        drop-shadow(0 0 4px rgba(255,221,27,0.6))
        drop-shadow(0 0 4px rgba(255,221,27,0.6))
        drop-shadow(0 0 4px rgba(255,221,27,0.6))
    }
}

.valentines-theme {
    position: relative;
}


.valentines-wrapper {
    overflow: hidden;
    width: 58px;
    height: 58px;
    position: absolute;
    display: inline-block;
    top: -4px;
    left: 7%;
}

.svg-valentines {
    display: inline-block;
    background-image: var(--svg-valentines);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-pumpkin {
    display: inline-block;
    background-image: var(--svg-halloween-pumpkin);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.st-patricks-theme {
    position: relative;
}

.clover-wrapper {
    overflow: hidden;
    width: 30px;
    height: 30px;
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 61%;
}

.svg-st-patricks-hat {
    display: inline-block;
    background-image: var(--svg-st-patricks-hat-2);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-clover {
    display: inline-block;
    background-image: var(--svg-clover);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.cloverOne {
    position: relative;
    top: 0px;
}

.hat-wrapper {
    overflow: hidden;
    width: 55px;
    height: 55px;
    position: absolute;
    display: inline-block;
    top: -2px;
    left: 8%;
}

.svg-bunny {
    display: inline-block;
    background-image: var(--svg-bunny);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.bunny-wrapper {
    overflow: hidden;
    width: 50px;
    height: 20px;
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 9.5%;
}

.bunny-position {
    display: inline-block;
    width: 50px;
    height: 50px;

    position:relative;
    top:22px;
}

.anim-bunny {
    position: relative;
    -webkit-animation: anim-bunny-glide 8s ease-in-out alternate infinite;
}

@-webkit-keyframes anim-bunny-glide {
    75% {
        -webkit-transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(-20px);
    }
}

@keyframes anim-bunny-glide {
    75% {
        -webkit-transform: translateY(0px);
    }

    100% {
        -webkit-transform: translateY(-20px);
    }
}

.svg-ascora-a {
    display: inline-block;
    background-image: var(--svg-ascora-a);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-ascora-s {
    display: inline-block;
    background-image: var(--svg-ascora-s);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-ascora-c {
    display: inline-block;
    background-image: var(--svg-ascora-c);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-ascora-o {
    display: inline-block;
    background-image: var(--svg-ascora-o);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-ascora-r {
    display: inline-block;
    background-image: var(--svg-ascora-r);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-ascora-gear {
    display: inline-block;
    background-image: var(--svg-ascora-gear);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.svg-ascora-aa {
    display: inline-block;
    background-image: var(--svg-ascora-aa);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.btn_outline {
    border: 2px solid black;
    background-color: white;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
}

.btn_outline.info {
    border-color: #2196F3;
    color: dodgerblue
}


/* Boostrap 3 styling to work with boostrap 4 layout*/
/* Required for allowing shared modals that were styled for bootstrap 3 to work with layouts using bootstrap 4*/

.BS4toBS3 {}
.BS4toBS3 .k-combobox .k-dropdown-wrap::before,
.BS4toBS3 .k-numeric-wrap::before,
.BS4toBS3 .k-picker-wrap::before {
    display: none !important;
}

.BS4toBS3 .form-group .k-widget {width:80%}
.BS4toBS3 .form-group .input-group-addon {width:20%}

.BS4toBS3 .form-inline .input-group {display: inline-table;vertical-align: middle;}
.BS4toBS3 .form-inline {}

.BS4toBS3 .input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-top-color: rgb(204, 204, 204);
    border-right-color: rgb(204, 204, 204);
    border-bottom-color: rgb(204, 204, 204);
    border-left-color: rgb(204, 204, 204);
    border-left-style: solid;
    border-left-width: 1px;
    border-radius: 4px;
}

.BS4toBS3 .form-group {position: relative;display: flex;flex-wrap: wrap;align-items: stretch;}
.BS4toBS3 .form-horizontal .form-group .control-label {text-align: right;}

.BS4toBS3 .form-group > .form-control,
.BS4toBS3 .form-group > .form-control-plaintext,
.BS4toBS3 .form-group > .form-control-plaintext,
.BS4toBS3 .form-group > .custom-select,
.BS4toBS3 .form-group > .custom-file {position: relative;flex: 1 1 auto;width: 1%;min-width: 0;margin-bottom: 0;}

.BS4toBS3 .nav-tabs > li.active > a,
.BS4toBS3 .nav-tabs > li.active > a:hover,
.BS4toBS3 .nav-tabs > li.active > a:focus {color: #555;background-color: #fff;border: 1px solid #ddd;border-top-color: rgb(221, 221, 221);border-right-color: rgb(221, 221, 221);border-bottom-color: rgb(221, 221, 221);border-left-color: rgb(221, 221, 221);border-bottom-color: transparent;cursor: default;}

.BS4toBS3 .nav > li > a {position: relative;display: block;padding: 10px 15px;padding-top: 10px;padding-bottom: 10px;}
.BS4toBS3 .nav-tabs-custom > .nav-tabs > li.active a {color: #3c8dbc;font-weight: 400;border-left-color: #d2d6de;border-right-color: #d2d6de;}
.BS4toBS3 .nav-tabs-custom > .nav-tabs > li.active {border-top-color: #3c8dbc;}



/* Training Video Header */
.position-relative {position: relative;}

/* hide for now */
/*section.training_video_header {display:none;}*/

section.training_video_header {background-color: var(--primary90); padding: 0px 0px; border-radius:10px ;color: #ffffff; border: 0px solid #273e55; box-shadow: var(--elevation-5);}
section.training_video_header .collapsible {color:#425669; background-color:var(--secondary100)}
section.training_video_header .collapsible:hover {color:#ffffff; background-color:var(--secondary100)}
section.training_video_header .collapsible:hover::after {color:#ffffff}
section.training_video_header .collapsible::after {font-family: "Font Awesome 5 Pro";content: "\f067";font-size: 13px;color:#425669;float: right;margin-left: 5px;}
section.training_video_header .videoActive:after {content: '\f068';color: #425669;}

section.training_video_header a {color: #ffffff; font-weight:300}
section.training_video_header a:hover {color:#7fffff; font-weight:300}
section.training_video_header h2 {font-size: 16px;margin-top: 0px; margin-bottom:10px; color: #ffffff;font-weight:400}
section.training_video_header .training_video_thumbnail .play-icon {font-style:normal;font-weight:600;font-size:30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);text-align: center;}
section.training_video_header .training_video_thumbnail .play-icon i{font-style: normal;}
section.training_video_header .training_video_thumbnail .play-icon.zoom {transition: transform .3s;}
section.training_video_header .training_video_thumbnail .play-icon.zoom:hover {transform: translate(-50%, -50%) scale(1.2);}
section.training_video_header .training_video_controls {position: absolute;right: 0px;top: 0px;z-index: 10; padding:10px;}
section.training_video_header .training_video_controls a {color: #ffffff; font-weight:300; font-size:12px;}
section.training_video_header .training_video_controls a:hover {color:#7fffff; font-weight:300; font-size:12px;}
section.training_video_header.fixed-bottom {position: fixed;bottom: 5%;left: 50%;transform: translate(-50%, 0);width: 100%; max-width:800px;z-index: 100;}
section.training_video_header .btn_video_collapse {text-align:left;}

section.training_video_header .videoContent {padding: 10px 10px;transition: max-height 0.2s ease-out;}

section.training_video_header .training_video_thumbnail .play-icon i:nth-child(1){color:rgba(0, 170, 255, 0.9); opacity:0.9}
section.training_video_header .training_video_thumbnail .play-icon i:nth-child(2){color:#ffffff; opacity:0.9}
section.training_video_header .training_video_thumbnail .img_thumbnail {width:100%; height:100%;}

section.training_video_header .training_video_description h1{font-size: 20px; margin-bottom:5px; margin-top:0px; font-weight:400; color:#ffffff}
section.training_video_header .training_video_description p{font-size: 14px;line-height: 20px; color:#ffffff; font-weight:300; margin-bottom:0px;}

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}

/*
.onboarding_panel_heading_checkbox {
    background-color: #425669;
    padding: 0px 0px;
    color: #ffffff;
    border: 3px solid #273e55;
    cursor:pointer;
}

.onboarding_panel_heading_checkbox:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f067";
    font-size: 13px;
    color: #ffffff;
    float:left;
    line-height:40px;
    padding:0 10px;
}

.onboarding_panel_description {
    padding: 5px 15px;
    border: 1px solid rgba(0,0,0,.125);
}

.onboarding-container {
    min-width: 600px;
    min-height: 600px;
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}

.onboardingSelection {
    background-color: cornflowerblue;
}

.onboarding-container > div {
    min-height: 100%;
}

#Description {
    display: none;
    width: 100%;
}

.MenuItem {
    padding: 5px;
    margin: 3px;
}

#TitleBar {
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 200;
    font-size: large;
}
*/

/*.training_video_header {
    display:none;
}*/

#VideoBar .videoRow {
    display: flex;
    column-gap: 10px;
}

#VideoBar .videoRow .vidblock {
    display: flex;
    flex-basis: auto;
    max-width: 33.333333%;
}

#onboardingMenu .onboarding-accordion-button span[class*="tick"]::after {
    font-size: 30px;
}

#onboardingMenu .onboarding-accordion-item .onboarding-accordion-button {
    border-left: 6px solid transparent;
}

#onboardingMenu .onboarding-accordion-item .onboarding-accordion-button::before {
    content: "";
}

#onboardingMenu .onboarding-accordion-item.onboardingSelection .onboarding-accordion-button {
    border-left: 6px solid green;
}

#onboardingMenu .onboarding-accordion-item.onboardingSelection .onboarding-accordion-button::before {
    /*font-family: "Font Awesome 5 Pro";
    content: "\f067";
    font-size: 13px;
    color: #425669;
    float: right;
    margin-right: 10px;*/

    content: "";
}

.onboarding-column-header {
    font-size: 14px;
    padding: 1rem 1.25rem;
    background-color: #1c76cc;
    color: #ffffff;
}

.onboarding-accordion-item {
    background-color: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.125);
}

.onboarding-accordion-item .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.onboarding-accordion-item .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.onboarding-accordion-header {
    margin-bottom: 0;
}
.onboarding-accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    /*font-size: 1rem;*/
    color: #212529;
    text-align: left;
    background-color: rgba(0,0,0,.03);
    border: 0;
    border-radius: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
    /*extra*/
    background-color: rgba(0,0,0,.03);
    cursor: pointer;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    font-size: 16px;
}
.onboarding-accordion-collapse{}

.onboarding-accordion-body {
    background-color:#ffffff;
    padding: 20px;
}

.onboarding-accordion-checkbox {

}

.onboarding-accordion-slider {
    margin-left: auto;
}

.onboarding-accordion-slider .k-slider-items .k-tick .k-label {
    font-size:11px;
}

.onboarding-accordion-slider .k-slider .k-button{
    width: 22px;
    height: 22px;
}

.onboarding-accordion-slider .k-slider-horizontal {
    height: 22px;
}

/*.onboarding-accordion-button::before,
.onboarding-accordion-button.active::before,
.onboardingSelection .onboarding-accordion-button::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f068";
    font-size: 13px;
    color: #425669;
    float: right;
    margin-right: 10px;
}*/

.onboarding-accordion-button {
    color: #425669;
    background-color: rgba(0,0,0,.02);
}

.onboarding-accordion-button:hover {
    background-color: #cce6ff
}

.onboarding-accordion-button.active,
.onboardingSelection .onboarding-accordion-button {
    background-color: #cce6ff
}

.onboarding-video-thumbnail .play-icon {
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer
}
.onboarding-video-thumbnail .play-icon i{font-style: normal;}
.onboarding-video-thumbnail .play-icon.zoom {transition: transform .3s;}
.onboarding-video-thumbnail .play-icon.zoom:hover {transform: translate(-50%, -50%) scale(1.2);}
.onboarding-video-thumbnail .play-icon i:nth-child(1){color:#14c1fd; opacity:0.9}
.onboarding-video-thumbnail .play-icon i:nth-child(2){color:#ffffff}
.onboarding-video-thumbnail .img_thumbnail {width:100%; height:100%;}

.completeMarker::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f058";
    font-size: 18px;
    color: green;
    float: right;
    margin-right: 10px;
    font-weight:700;
}

.incompleteMarker::after {
    font-family: "Font Awesome 5 Pro";
    content: "\f058";
    font-size: 18px;
    color: dimgray;
    float: right;
    margin-right: 10px;
    font-weight: 700;
}

#fancybox-thumbs {
    z-index:90000!important;
}

/*remove padding from grid footer so the grids line up correctly*/
#stagesTable div.k-grid-footer {padding-right:0px!important;}


/*********************************/
/* Custom theme for kendo editor */
/*********************************/

:root {
    --customEditorBorder: #e1e1e1;
    --customEditorBorderBtns: #f7f7f7;
    --customEditorBorderBtnsHover: #ECEFF1;
    --customEditorBtnsDefault: #f7f7f7;
    --customEditorBtnsSelected: #e1e1e1;
    --customEditorBtnsHover: #e1e1e1;
    --customEditorTextColour: #333333;
    --customEditorBackgroundColour: #f7f7f7;
}

/*.custom-editor-theme-1 .k-editor.k-header {
    background-color: var(--customEditorBackgroundColour);
    border-color: var(--customEditorBorder);
}

.custom-editor-theme-1 .k-editor .k-button-group .k-tool {
    border-color: var(--customEditorBorderBtns);
    background-color: var(--customEditorBtnsDefault);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-dropdown-wrap {
    border-color: var(--customEditorBorderBtns);
}

.custom-editor-theme-1 .k-editor .k-button-group .k-state-selected {
    background-color: var(--customEditorBtnsSelected);
}

.custom-editor-theme-1 .k-editor .k-button-group .k-selected {
    background-color: var(--customEditorBtnsSelected);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-autocomplete,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-picker-wrap,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-numeric-wrap,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-dropdown-wrap {
    background-color: var(--customEditorBtnsDefault);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-tool-icon.k-icon {
    color: var(--customEditorTextColour);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-state-hover,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-state-hover:hover {
    background-color: var(--customEditorBtnsHover);
    border-color: var(--customEditorBorderBtnsHover);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-picker-wrap.k-state-hover,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-dropdown-wrap.k-state-hover {
    background-color: var(--customEditorBtnsHover);
    border-color: var(--customEditorBorderBtnsHover);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-picker-wrap.k-state-focused,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-dropdown-wrap.k-state-focused {
    background-color: var(--customEditorBtnsSelected);
    border-color: var(--customEditorBorderBtnsHover);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-autocomplete,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-picker-wrap,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-numeric-wrap,
.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-dropdown-wrap {
    border-color: var(--customEditorBorderBtns);
}

.custom-editor-theme-1 .k-editor .k-editor-toolbar .k-state-default > .k-select {
    border-color: var(--customEditorBorderBtns);
}


.custom-editor-theme-1 .k-editor .k-tool-group .k-editor-dropdown .k-input {
    color: var(--customEditorTextColour);
}

.custom-editor-theme-1 .k-editor .k-icon {
    color: var(--customEditorTextColour);
}

.custom-editor-theme-1 .k-editor-toolbar.k-toolbar {
    background-color: var(--customEditorBackgroundColour);
    border-color: var(--customEditorBorder);
}*/

/*Guantt Chart Styling*/

.k-gantt .k-gantt-line-h, .k-gantt .k-gantt-line-v {
    background-color: #37474F !important
}

.k-gantt .k-gantt-line.k-state-selected {
    background-color: #7678db !important
}

.k-gantt .k-tooltip {
    background-color: var(--accent-color-1);
    box-shadow: var(--elevation-6);
}

.k-gantt .k-gantt-timeline .k-grid tr:hover {
    background-color: #B3E5FC;
}

.k-gantt .k-state-selected.k-task-milestone,
.k-gantt .k-state-selected .k-task-summary-complete {
    background-color: #0277BD
}

.k-gantt .k-state-selected.k-task-summary {
    background-color: #4FC3F7
}

.k-gantt .k-grid tr:hover .k-state-selected {
    background-color: #9688fd
}

.k-gantt .k-state-selected .k-arrow-w,
.k-gantt .k-state-selected .k-arrow-e {
    color: #7678db !important
}

.k-gantt .k-state-selected .k-task-summary-complete {
    border-color: #0277BD;
    background: #0277BD;
}

.k-gantt .k-state-selected.k-task-summary {
    border-color: #4FC3F7;
    background: #4FC3F7;
}


.k-gantt .k-task .k-task-template {
    color:#ffffff;
}

.k-gantt .k-task-single {
    background-color: #9688fd;
    border-color: #9688fd;
}

.k-gantt .k-task-complete {
    background-color: #3949ab;
    border-color: #3949ab;
}

.k-gantt .k-task-single.k-state-selected {
    background-color: #9688fd;
    border-color: #9688fd;
}

.k-gantt .k-state-selected,
.k-gantt .k-state-selected:link,
.k-gantt .k-state-selected:visited {
    background-color: #3bb9f7;
    border-color: #3bb9f7;
}

.k-gantt .k-task-draghandle {
    color: #3949ab;
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    margin: 0 18px;
    border-width: 5px;
    border-style: solid;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    display: none;
    cursor: e-resize;
}

#gantt .k-button-group .k-button.k-button-solid-base {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    color: #444;
    background-image: none;
}

#gantt .k-button-group .k-button.k-button-solid-base.k-selected {
    background-color: #7390af;
    border: 1px solid #7390af;
    color: #ffffff;
    background-image: var(--tint-dark-1);
}

/***********************************/
/* Custom theme for kendo tabstrip */
/***********************************/
/*tab strip*/
.k-tabstrip {
    padding: 0;
}

.k-tabstrip-items-wrapper > ul,
.k-tabstrip-wrapper > ul {
    background-color: #f1f1f1;
    /*border: 1px solid #ccc;*/
    border: 0;
    color: black;
}

.k-tabstrip-items-wrapper .k-tabstrip-top,
.k-tabstrip-wrapper .k-tabstrip-top {
    background-color: inherit;
    border-color: inherit;
    background-color: inherit;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    border-radius: 0px;
}

.k-tabstrip-items-wrapper .k-content,
.k-tabstrip-wrapper .k-content {
    padding: 0px;
    overflow: hidden
}

.k-tabstrip-items-wrapper.k-hstack {
    overflow-x: auto;
}

.k-tabstrip-items-wrapper .k-item,
.k-tabstrip-wrapper .k-item {
    background-color: #f1f1f1;
    transition: 0.3s;
    border: none;
    outline: none;
    cursor: pointer;
}
    .k-tabstrip-items-wrapper .k-item .k-link,
    .k-tabstrip-wrapper .k-item .k-link {
        padding: 1em;
        background-color: inherit;
        color: black;
    }

.k-tabstrip-items-wrapper .k-tabstrip-items,
.k-tabstrip-wrapper .k-tabstrip-items {
    padding: 0;
    background-color: #f1f1f1;
}

.k-tabstrip-items-wrapper .k-item .k-loading,
.k-tabstrip-wrapper .k-item .k-loading {
    background-color: #ccc;
    color: orange;
}
    .k-tabstrip-items-wrapper .k-item .k-loading.k-complete,
    .k-tabstrip-wrapper .k-item .k-loading.k-complete {
        background-color: #ccc;
        color: #01579B;
    }
.k-tabstrip-items-wrapper .k-item.k-state-active .k-link,
.k-tabstrip-wrapper .k-item.k-state-active .k-link {
    background-color: white;
    color: black;
}
.k-tabstrip-items-wrapper .k-item.k-state-hover .k-link,
.k-tabstrip-wrapper .k-item.k-state-hover .k-link {
    background-color: #ddd;
    color: black;
}

.k-tabstrip-items-wrapper .k-content.k-state-active,
.k-tabstrip-wrapper .k-content.k-state-active {
    border: 0;
}

.k-tabstrip-items-wrapper .k-item.k-state-active > .k-loading,
.k-tabstrip-wrapper .k-item.k-state-active > .k-loading {
    transition: 0.3s;
}

.k-tabstrip-items-wrapper .k-item.k-state-active:hover > .k-loading,
.k-tabstrip-wrapper .k-item.k-state-active:hover > .k-loading {
    color: white;
}

.k-tabstrip > .k-tabstrip-content {
    border: none;
    margin: 0;
}
#new-job-type-tabstrip .k-tabstrip-items {background-color:#f8f9fa}
#new-job-type-tabstrip .k-tabstrip-items .k-tabstrip-item {background-color:transparent}
#new-job-type-tabstrip .k-tabstrip-items li .k-link{border-top: 7px solid #ccc;border-radius: var(--nav-radius) var(--nav-radius) 0 0;border-left: 1px solid #d2d6de;border-right: 1px solid #d2d6de;background-color:white}
#new-job-type-tabstrip .k-tabstrip-items li.k-active .k-link{border-top: 7px solid var(--accent-color-1);border-radius: var(--nav-radius) var(--nav-radius) 0 0;border-left: 1px solid #d2d6de;border-right: 1px solid #d2d6de;}
#new-job-type-tabstrip .k-tabstrip-items li.k-active .k-link{color:var(--accent-color-1); font-weight:500; background-color:#ffffff}
#new-job-type-tabstrip .k-tabstrip-items-wrapper {overflow:hidden; padding-top:10px;}
#new-job-type-tabstrip .k-tabstrip-items {border:1px solid rgb(232, 234, 237); border-radius:6px 6px 0px 0px;}
#new-job-type-tabstrip .k-tabstrip-items li.k-active {box-shadow:none}

/*Cases*/
/* Animated line when tab is selected*/
#caseTabstrip .k-tabstrip-items-wrapper .k-item,
#caseTabstrip .k-tabstrip-items .k-item {
    position: relative;
}
    #caseTabstrip .k-tabstrip-items-wrapper .k-item:before,
    #caseTabstrip .k-tabstrip-items .k-item:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 5px;
        background-color: #00B0FF;
        -webkit-transition: .5s;
        transition: .5s
    }
    #caseTabstrip .k-tabstrip-items-wrapper .k-item.k-state-active:before,
    #caseTabstrip .k-tabstrip-items .k-item.k-state-active:before {
        width: 100%
    }

/* Bold test when tab is selected*/
    #caseTabstrip .k-tabstrip-items-wrapper .k-item,
    #caseTabstrip .k-tabstrip-items .k-item {
        line-height: 20px;
    }

    #caseTabstrip .k-tabstrip-items-wrapper .k-item.k-state-active,
    #caseTabstrip .k-tabstrip-items .k-item.k-state-active {
        font-weight: bold;
    }

    #caseTabstrip .k-tabstrip-items-wrapper .k-item.k-state-active .k-link:before,
    #caseTabstrip .k-tabstrip-items .k-item.k-state-active .k-link:before {
        content: "\f0da";
        color: #00B0FF;
        font-family: 'Font Awesome 5 Pro';
        font-size: 20px;
        position: absolute;
        left: 10px;
        top: calc(50% - 10px);
    }

    #caseTabstrip .k-tabstrip-items-wrapper .k-item .k-link,
    #caseTabstrip .k-tabstrip-items .k-item .k-link {
        padding: 15px 20px 15px 25px
    }

    #caseTabstrip .k-tabstrip-items-wrapper .k-item.k-state-active .k-link,
    #caseTabstrip .k-tabstrip-items .k-item.k-state-active .k-link {
        background-color: #ffffff;
    }

    #caseTabstrip .k-tabstrip-items-wrapper .k-item .k-link .k-sprite,
    #caseTabstrip .k-tabstrip-items .k-item .k-link .k-sprite {
        display: none;
    }

/* Proposal tab styling*/

#proposalForm .k-tabstrip-items-wrapper .k-item,
#proposalForm .k-tabstrip-items .k-item {position: relative;}
#proposalForm .k-tabstrip-items-wrapper .k-item:before,
#proposalForm .k-tabstrip-items .k-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 5px;
    background-color: #00B0FF;
    -webkit-transition: .5s;
    transition: .5s
}

#proposalForm .k-tabstrip-items-wrapper .k-item.k-state-active:before,
#proposalForm .k-tabstrip-items .k-item.k-state-active:before {
    width: 100%
}

/* Bold test when tab is selected*/
#proposalForm .k-tabstrip-items-wrapper .k-item,
#proposalForm .k-tabstrip-items .k-item {
    line-height: 20px;
    background-color: #f1f1f1;
}

#proposalForm .k-tabstrip-items-wrapper .k-item.k-state-active,
#proposalForm .k-tabstrip-items .k-item.k-state-active {
    font-weight: bold;
}

#proposalForm .k-tabstrip-items-wrapper .k-item.k-state-active .k-link:before,
#proposalForm .k-tabstrip-items .k-item.k-state-active .k-link:before {
    content: "\f0da";
    color: #00B0FF;
    font-family: 'Font Awesome 5 Pro';
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: calc(50% - 10px);
}

#proposalForm .k-tabstrip-items-wrapper .k-item .k-link,
#proposalForm .k-tabstrip-items .k-item .k-link {
    padding: 15px 20px 15px 25px
}

#proposalForm .k-tabstrip-items-wrapper .k-item.k-state-active .k-link,
#proposalForm .k-tabstrip-items .k-item.k-state-active .k-link {
    background-color: #ffffff;
}

#proposalForm .k-tabstrip-items-wrapper .k-item .k-link .k-sprite,
#proposalForm .k-tabstrip-items .k-item .k-link .k-sprite {
    display: none;
}


.radio_switches_compact > label {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}


:root {
    --colour-ascora-orange: #f39c12;
    --kendo-small-widget-default-background-color: #3498db;
    --kendo-small-widget-hover-background-color: #3bb9f7;
    --kendo-widget-color: #ffffff;
}

.emailerContainer .tab-strip-anchor {
    position: relative;
}

.emailerContainer .tab-strip-anchor > .tab-strip-custom-toolbar {
    position: absolute;
    z-index: 1000;
    height: 3.4em;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 1em;
    padding-right: 1em;
    gap: 1em;
    top: 0;
    right: 0
}

.emailerContainer .tab-strip-anchor > .tab-strip-custom-toolbar > .form-inline > label {
    margin-left: 0.5em;
    margin-bottom: 0;
}

.emailerContainer #tabstrip [class^="k-"] {
    box-sizing: border-box
}

.emailerContainer .k-tabstrip-content.k-active,
.emailerContainer .k-tabstrip-content:is([style*="transition"]) {
    display: flex !important;
    flex-direction: column;
}

.emailerContainer .k-editor {
    flex: 1 1 0;
}

.emailerContainer #tabstrip .k-content,
.emailerContainer #tabstrip .k-grid-container {
    overflow: auto;
}

.emailerContainer .k-editor-content {
    display: flex;
    flex-direction: column;
}

.emailerContainer .k-editor-content .k-content {
    flex: 1 1 0;
}

.emailerContainer .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
.emailerContainer .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
    margin-bottom: 0;
}

.emailerContainer .k-tabstrip-wrapper {
    height: 100%
}

.emailerContainer #tabstrip {
    display: flex;
    flex-flow: column;
    min-height: 360px
}

.emailerContainer .k-tabstrip-items-wrapper{
    flex-shrink:0;
}


/* tabstrip-2 Styles for attachment tab*/

.emailerContainer #tabstrip-2 #attachmentGrid .k-grid-header .k-column-title {
    white-space: wrap;
}

.emailerContainer #tabstrip-2 #attachmentGrid .k-grid-content {
/*    display: flex;
    flex: 1 1 0;*/
    position: relative;
    height: 100% !important
}

.emailerContainer #tabstrip-2 #attachmentGrid {
    flex: 1 1 0;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4285714286;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* tabstrip-1 Styles for Rich text editor tab*/
.emailerContainer #tabstrip-1,
.emailerContainer #tabstrip-1 .k-editor {
    height: 100%!important
}


/* fix for k-grid-content-expander causing a horizontal scroll bar on the progress grid when zoomed in*/
#gridJobClaims .k-grid-content-expander {width:100%!important}

/*Grouped Calendar*/
.grouped-calendar .k-nav-current {color:var(--text-color) !important}

.grouped-calendar .calendar_event_content{
    color:#1b1b1b;
    font-size:12.5px;
    line-height:16px;
    font-weight:500;
    padding:8px;
}

#Wizard_JobDetails .k-multiselect-wrap {border: 1px solid #ccc;}
#Wizard_JobDetails a{font-size:14px;}
#Wizard_JobDetails #siteCustomerPhoneDetailsWizardDisplay,
#Wizard_JobDetails #billingCustomerPhoneDetailsWizardDisplay {font-size:14px;}
#Wizard_JobDetails #jobTools {font-size:14px;}

#gridJobClaims .k-grid-content-expander {
    width: 100% !important
}

/* Headings on Stages and Sections grid weren't lining up due to scroll bar*/
#stagesTable .k-grid-container > .k-grid-content {
    overflow-y: hidden
}

/* Allow grid to shrink*/
#bookingGrid,
#bookingGrid .k-grid-container .k-grid-content,
#invoicesJobTable,
#invoicesJobTable .k-grid-container .k-grid-content {
    height: 100% !important
}

/* making tooltips visible*/
.k-grid .k-table-thead th{overflow:visible}

/* Removing dark border when editing supply description*/

/**********************************/
/* scrollbar webkit fix for safari*/
/**********************************/
.tracked_assets #assetGrid .k-grid-content::-webkit-scrollbar,
.tracked_assets #tripHistoryGrid .k-grid-content::-webkit-scrollbar {
    display: inherit;
}

.tracked_assets #assetGrid .k-grid-content::-webkit-scrollbar,
.tracked_assets #tripHistoryGrid .k-grid-content::-webkit-scrollbar {
    width: 15px;
}

.tracked_assets #assetGrid .k-grid-content::-webkit-scrollbar-track,
.tracked_assets #tripHistoryGrid .k-grid-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
    border-radius: 8px;
    -webkit-border-radius: 8px;
}

.tracked_assets #assetGrid .k-grid-content::-webkit-scrollbar-thumb,
#tripHistoryGrid .k-grid-content::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/*#stagesTable .k-detail-cell .k-svg-icon.k-svg-i-caret-alt-down:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f0d7";
    font-style: normal;
    font-weight: 600;
}

#stagesTable .k-detail-cell .k-svg-icon.k-svg-i-caret-alt-right:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f0da";
    font-style: normal;
    font-weight: 600;
}*/

.asc-checkbox-anim {
    height: 20px;
    position: relative;
    display: inline-flex;
    cursor: pointer;
    gap: 1em;
    outline: none;
}

    .asc-checkbox-anim > input {
        background-color: #eceff1;
        border-radius: 3px;
        border: 1px solid #b0bec5;
        box-sizing: border-box;
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin: 0;
        appearance: none;
        position: relative;
        outline: none;
    }

        .asc-checkbox-anim > input:focus {
            outline: none
        }

    .asc-checkbox-anim > input:checked {
        border: 1px solid #2988c3;
    }

        .asc-checkbox-anim > input::before {
            content: '';
            background-color: #2988c3;
            position: absolute;
            width: 100%;
            height: 100%;
            outline: none;
        }

        .asc-checkbox-anim > input::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 6px;
            background: transparent;
            top: 5px;
            left: 3px;
            border: 2px solid #ffffff;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .asc-checkbox-anim > input::before,
        .asc-checkbox-anim > input::after {
            opacity: 0;
            transition: opacity cubic-bezier(.4,.0,.23,1) 0.25s;
        }

        .asc-checkbox-anim > input:checked::before,
        .asc-checkbox-anim > input:checked::after {
            opacity: 1;
        }

/*******************************/
/* New Modern Styles  NOV 2023 */
/*******************************/
/*may move these into a separate file maybe ascora-bootstrap-overrides.css*/
/*using ascora-blue temporarily for scoping*/

/*Initialise main styles*/

/*Flex from Bootstrap 4*/
.d-flex{display:-ms-flexbox!important;display:flex!important}
.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}
.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}
.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}
.flex-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}
.flex-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}
.flex-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}
.flex-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}
.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}
.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}
.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}
.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}
.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}
.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}
.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}
.align-items-center{-ms-flex-align:center!important;align-items:center!important}
.align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}
.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}
.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}
.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}
.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}
.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}
.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}
.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}
.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}
.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}
.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}
.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}
.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}
.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}


/*Font*/
body {font-weight: var(--font-weight-normal);}
body.ascora-blue {font-family: var(--modern-font-body);}
b, strong {
    font-family: var(--modern-font-body);
    font-weight: 600;
}


.ascora-blue textarea {border: 1px solid var(--border-light-1)}

/*Colours*/
.ascora-blue .bg-success {background-color:var(--success-color)!important; color:#ffffff!important;}

.ascora-blue .danger-color{color:var(--danger-color)}
.ascora-blue .warning-color{color:var(--warning-color)}
.ascora-blue .success-color{color:var(--success-color)}
.ascora-blue .info-color{color:var(--info-color)}

.ascora-blue .k-table-th.bg-success{border-color:#008947}
.ascora-blue .k-table-th.bg-success .k-sort-icon .k-icon {color:#ffffff;}
.ascora-blue .k-picker.k-dropdownlist.bg-success{background-color:var(--success-color)!important; color:#ffffff!important;}

/*Elevation Shadows*/
.ascora-blue .elevation-0{box-shadow:var(--elevation-0)!important}
.ascora-blue .elevation-3{box-shadow:var(--elevation-3)!important} /*Inline Alerts Errors (Not windows)*/
.ascora-blue .elevation-4{box-shadow:var(--elevation-4)!important} /*Menu - Bootstrap Nav Tabs*/
.ascora-blue .elevation-5{box-shadow:var(--elevation-5)!important} /*Menu - Dropdowns (Kendo & Bootstrap) and Nav Tabs*/
.ascora-blue .elevation-6{box-shadow:var(--elevation-6)!important} /*Menu - Ascora Main Menu - dropdown menus*/
.ascora-blue .elevation-7{box-shadow:var(--elevation-7)!important} /*Widgets*/
.ascora-blue .card-shadow{box-shadow:var(--card-shadow)!important} /*Cards Boxes*/

/*Experiment only add shadow to outer Box Elements*/
/*.ascora-blue div:first-child > .box {
    box-shadow: var(--elevation-7) !important;
    border:3px solid red;
}*/

/*.ascora-blue div:first-child > .box {
    box-shadow: var(--elevation-7) !important;
    border: 3px solid red;
}*/

/*Radio Switches & Toggles*/
.ascora-blue .radio_switches {font-family:var(--modern-font-body)}

.ascora-blue .radio_switches label.btn-primary,
.ascora-blue .radio_switches label, 
.ascora-blue .radio_switches button
{
    font-size: var(--form-element-font-size);
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-sizing: border-box;
/*  border: 1px solid var(--toggle-border-blue-pastel-default);
    background-color: var(--toggle-color-blue-pastel-default);
    color: var(--primary-color) !important;
*/
    color: #444!important;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    font-weight: 400!important;
}

.ascora-blue .radio_switches label.btn-primary.active,
.ascora-blue .radio_switches label.btn-primary:active,
.ascora-blue .radio_switches label.active,
.ascora-blue .radio_switches label:active,
.ascora-blue .radio_switches button:active,
.ascora-blue .radio_switches button.focus
{
    /*background-color:var(--toggle-color-blue-pastel-active)!important;*/
    background-image:none!important;
    color:#ffffff!important;
    /*border: 1px solid var(--toggle-border-blue-pastel-default)!important;*/

    background-color: #7390af!important;
    border: 1px solid #7390af!important;
}

.ascora-blue #taskApproveddatepicker,
.ascora-blue #taskApprovedByName,
.ascora-blue #taskCompleteddatepicker,
.ascora-blue #taskCompletedByName
{
    border: 1px solid var(--input-border-color);
}

.ascora-blue .k-grid .k-table-row .k-table-td[class*="job-status"]{
    border-bottom:1px solid white;
}

.ascora-blue .content-wrapper, .right-side {
    background-color: var(--background-color);
}

.ascora-blue .box-header.with-border,
.ascora-blue .box {
    border: 0px;
    box-shadow: none;
    border-radius: var(--widget-radius);
}

.ascora-blue .alert {
    border: 0px;
    font-weight: 500;
    border-radius: var(--widget-radius);
}

.ascora-blue .bg-yellow,
.ascora-blue .callout.callout-warning,
.ascora-blue .alert-warning, .label-warning,
.ascora-blue .modal-warning .modal-body {
    background-color: var(--warning-color) !important;
}

.ascora-blue .alert-primary{
    background-color: var(--accent-color-1) !important;
}

/* BS4 Elements*/
/*.form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}

.form-inline .form-group
{
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }*/

/*HTML Elements*/

.ascora-blue #lblLockButton {
    font-size: var(--form-element-font-size);
    font-family: var(--modern-font-body);
    font-weight:var(--form-element-font-weight);
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    padding-top:0px;
    padding-bottom:0px;
}

.ascora-blue #lblLockButton:before{
    font-family: 'Font Awesome 5 Pro';
}

.ascora-blue .quantity_spinner input{
    height: var(--form-element-height);
    line-height:var(--form-element-height)
}

.ascora-blue .quantity_spinner .quantity-nav {
    height: var(--form-element-height);
}

.ascora-blue .quantity_spinner .quantity-button.quantity-up,
.ascora-blue .quantity_spinner .quantity-button.quantity-down {
    background-color: var(--primary-color);
    color: #ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ascora-blue .quantity_spinner .quantity-button .k-icon {
    font-size: var(--form-element-font-size);
    font-weight:var(--form-element-font-weight)
}


/*Input sizing*/
.ascora-blue input {border-radius: var(--input-radius)}

.ascora-blue input#searchFilter, 
.ascora-blue input#kitSearch
{
    border-radius: var(--input-radius);
    border: 1px solid var(--input-border-color);
    height: var(--form-element-height);
    padding: 4px;
    line-height: 18px;
}

.ascora-blue input#searchFilter:focus,
.ascora-blue input#kitSearch:focus
{
    outline: var(--interactive-element-hover-color) solid 3px;
}

.ascora-blue #addServiceIntervalWindow input[name="Name"] {
    display: inline-block;
    padding: 4px;
    font-size: 13px;
    line-height: 18px;
    color: gray;
    color: #555;
    border: 1px solid #ccc;
}

.ascora-blue #addServiceIntervalWindow input[name="Name"]:hover {
    outline: var(--interactive-element-hover-color) solid 3px;
}


.ascora-blue textarea {
    border-radius: var(--input-radius);
}

.ascora-blue select,
.ascora-blue select option {
    font-family: var(--modern-font-body),Arial, sans-serif !important; /*custom fonts not working for select?*/
    border-radius: var(--input-radius);
}

a {color: var(--primary-color);font-weight:400;}
a:hover {color: var(--primary-color);font-weight:400;}

.ascora-blue .btn.btn_topbar {color:white}

/*Bootstrap Buttons*/
.ascora-blue .btn-primary,
.ascora-blue .btn-danger,
.ascora-blue .btn-warning,
.ascora-blue .btn-default, 
.ascora-blue .btn-secondary
{
    border-radius: var(--button-radius);
}

.ascora-blue .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff !important;
}

.ascora-blue .btn-danger {
    background-color: var(--button-danger-bg);
    border-color: var(--button-danger-bg);
    color: #ffffff !important;
}

.ascora-blue .btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: #ffffff !important;
}

.ascora-blue .btn-secondary {
    background-color: var(--button-secondary-bg);
    border-color: var(--button-secondary-bg) !important;
    color: #ffffff !important;
}

.ascora-blue .box.box-solid > .box-header .btn:hover,
.ascora-blue .box.box-solid > .box-header a:hover {
    background-image: var(--tint-dark-1);
}

.ascora-blue .box.box-solid > .box-header .btn.btn-primary:hover {
    background-color: var(--primary-color);
    background-image: var(--tint-dark-1);
}

.ascora-blue .box.box-solid > .box-header .btn.btn-danger:hover {
    background-color: var(--button-danger-bg);
    background-image: var(--tint-dark-1);
}

/*.bulk_action_group .remove_dropzone .k-upload .k-upload-button:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}*/

/*btn pastel primary*/
.ascora-blue .btn-pastel-primary {
    color: var(--primary-color);
    background-color: var(--button-pastel-primary);
}

.ascora-blue .btn-pastel-oulined-primary {
    color: var(--primary-color);
    background-color: var(--button-pastel-primary);
    border: 2px solid var(--primary-color);
}

.ascora-blue .btn-primary:hover{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: var(--tint-dark-1);
}

.ascora-blue .btn-primary:active,
.ascora-blue .btn-primary.active,
.ascora-blue .open > .dropdown-toggle.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: var(--tint-dark-1);
}

.ascora-blue .btn-primary:focus,
.ascora-blue .btn-primary.focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: var(--tint-dark-1);
}

/*btn-danger*/
.ascora-blue .btn-danger:hover,
.ascora-blue .btn-danger.hover {
    background-color: var(--button-danger-bg);
    border-color: var(--button-danger-bg);
    background-image: var(--tint-dark-1);
}

.ascora-blue .btn-danger:active,
.ascora-blue .btn-danger.active,
.ascora-blue .open > .dropdown-toggle.btn-danger {
    background-color: var(--button-danger-bg);
    border-color: var(--button-danger-bg);
    background-image: var(--tint-dark-1);
}

.ascora-blue .btn-danger:focus,
.ascora-blue .btn-danger.focus {
    background-color: var(--button-danger-bg);
    border-color: var(--button-danger-bg);
    background-image: var(--tint-dark-1);
}


.ascora-blue .btn-secondary:active,
.ascora-blue .btn-secondary.active,
.ascora-blue .btn-secondary:focus,
.ascora-blue .btn-secondary.focus,
.ascora-blue .btn-secondary:hover,
.ascora-blue .btn-secondary.hover{
    background-color: var(--button-secondary-bg);
    border-color: var(--button-secondary-bg);
    background-image: var(--tint-dark-1);
}




/* Headings */
.ascora-blue h1,
.ascora-blue h2,
.ascora-blue h3,
.ascora-blue h4,
.ascora-blue h5,
.ascora-blue h6,
.ascora-blue .h1,
.ascora-blue .h2,
.ascora-blue .h3,
.ascora-blue .h4,
.ascora-blue .h5,
.ascora-blue .h6
{
    color:var(--text-color);
    font-family: var(--modern-font-body);
    font-weight: 300;
}

.ascora-blue h3 {font-size:20px; font-weight:400;}

.ascora-blue h3.box-title
{
    font-size:20px; 
    font-weight:400; 
    color:var(--text-color); 
}

.ascora-blue h3.page-header
{
    font-size:20px; 
    font-weight:400; 
    color:var(--heading-accent-color-3); 
    border-bottom: 2px solid var(--heading-accent-color-4);
}
.ascora-blue h3.page-header i{color:var(--heading-accent-color-1); font-weight:400;}
/***************/
/*   Widgets   */
/***************/

.ascora-blue .info-box.statement_box {border-radius:var(--widget-radius)}
.ascora-blue .info-box.statement_box .info-box-icon {border-radius:var(--widget-radius)}

.ascora-blue .info-box.statement_box .info-box-text{font-size: 22px;font-weight: 500; color:var(--text-color)}
.ascora-blue .info-box.statement_box small{font-size: 16px;font-weight: 300;}

.ascora-blue .info-box.statement_box h3{
    font-family: var(--modern-font-body) !important;
    font-size:20px;
    font-weight:400;
    color: var(--text-color) !important;
}
.ascora-blue .info-box.statement_box p{
    font-family: var(--modern-font-body) !important;
    font-size:16px;
    font-weight:300;
    color: var(--text-color) !important;
}

/***Info Box***/
.ascora-blue .info-box.header_box {border-radius:var(--widget-radius)}
.ascora-blue .info-box.header_box .info-box-icon {border-radius:var(--widget-radius)}
/*.ascora-blue .info-box.header_box .info-box-icon {display:flex;justify-content:center;align-items:center;}*/
.ascora-blue .info-box.header_box .info-box-icon .fa,
.ascora-blue .info-box.header_box .info-box-icon .far{font-size:50px;font-weight:300}

.ascora-blue .info-box.header_box .info-box-text{font-size: 22px;font-weight: 500; color:var(--text-color)}
.ascora-blue .info-box.header_box small{font-size: 16px;font-weight: 300;}

/************************/
/*   Ascora Main Menu   */
/************************/

/*Modern sub menu*/
.ascora-main-nav .dropdown-menu.sub-menu-categories div[class*="col-"] {
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.ascora-main-nav .dropdown-menu.sub-menu-categories .card{
    border:1px solid #A8C5E1;
    border-radius:var(--widget-radius);
    box-shadow:none;
}
.ascora-main-nav .dropdown-menu.sub-menu-categories .card .card-header{
    background-color: #E3F1FF;
    border-bottom:1px solid #A8C5E1;
    border-top:0px;
}
.ascora-main-nav .dropdown-menu.sub-menu-categories .card .card-header a{
    font-weight:400;
}
.ascora-main-nav .dropdown-menu.sub-menu-categories .card .card-body,
.ascora-main-nav .dropdown-menu.sub-menu-categories .card.card-automation .card-body{
    padding:0px;
}
.ascora-main-nav .dropdown-menu.sub-menu-categories .card.card-automation .card-body .subtitle {
    background-color: #f2f9ff;
    border-bottom: 1px solid #afcae473;
    border-top: 1px solid #afcae47a;
    margin-top: -1px;
    font-weight:400;
}

.ascora-main-nav .sub-menu-categories .card.card-automation .card-body a,
.ascora-main-nav .sub-menu-categories .card .card-body a {
    font-size: 12.8px;
}



.ascora-main-nav .dropdown-menu > li > a:hover,
.ascora-main-nav .sub-menu-categories li a:hover {
    background-color: var(--interactive-element-hover-color);
}

.ascora-main-nav {
    font-family: var(--modern-font-body) !important;
    color: var(--text-color) !important;
    border-radius: 0px;
}
.ascora-main-nav .dropdown-menu > li > a,
.ascora-main-nav .sub-menu-categories li a,
.ascora-main-nav .navbar-nav .nav-link{
    color: var(--text-color)!important;
}

.ascora-main-nav .bulk_action_group .dropdown-menu {background-color:white}

.ascora-main-nav .dropdown-menu {
    -webkit-box-shadow: var(--elevation-6);
    box-shadow: var(--elevation-6);
}

.ascora-main-nav .dropdown-menu {border-radius: 8px;}

.ascora-main-nav .dropdown-menu,
.ascora-main-nav .dropdown-menu.sub-menu-categories,
.ascora-main-nav .dropdown:hover > .sub-menu-categories, 
.ascora-main-nav .dropdown:hover > .sub-menu-categories li a {
    animation: anim-menu-slide 0.5s;
}

/*Remove animation when shown via tour*/
.ascora-main-nav .dropdown-menu.sub-menu-categories.show,
.ascora-main-nav .dropdown:hover > .sub-menu-categories.show, 
.ascora-main-nav .dropdown:hover > .sub-menu-categories.show li a {
    animation:none;
}

@keyframes anim-menu-slide {
    0% {top:80%;opacity:0;}
    100% {top: 98%;opacity: 1;}
}

/***********************/
/*   custom nav-tabs   */
/***********************/

.ascora-blue #customFieldsTabStrip .k-tabstrip-items,
.ascora-blue #customFieldsTabStrip .k-tabstrip-items .k-item {
    background-color: #ffffff;
}

.ascora-blue #customFieldsTabStrip .k-tabstrip-items li.k-active {
    border-top: 5px solid var(--accent-color-1);
    border-radius: var(--nav-radius);
}

.ascora-blue #customFieldsTabStrip .k-tabstrip-items li .k-link {
    padding-top: 10px;
    padding-bottom: 18px;
    font-family: var(--modern-font-body) !important;
    font-weight: 500;
    color: #6F7B91;
}

.ascora-blue #customFieldsTabStrip .k-tabstrip-items li.k-active .k-link{
    font-family: var(--modern-font-body)!important;
    color: var(--accent-color-1);
    border-left: 1px solid #d2d6de;
    border-right: 1px solid #d2d6de;
}

.ascora-blue .nav-tabs-custom > .nav-tabs > li {
    margin-bottom: 0px;
    height: 52px;
}

.ascora-blue .nav-tabs-custom > .nav-tabs > li.active {
    --shadow-color: 0deg 0% 78%;
    border-top: 5px solid var(--accent-color-1);
    border-radius: var(--nav-radius);
    box-shadow: 0.1px -0.1px 0.2px hsl(var(--shadow-color) / 0.08), 2.2px -4.1px 5.1px -0.5px hsl(var(--shadow-color) / 0.39);
    height: 52px;
}

.ascora-blue .nav-tabs-custom > .nav-tabs > li.active a {
    font-family: var(--modern-font-body)!important;
    color: var(--accent-color-1);
}


/*Navigation using BS4 Card*/

.ascora-blue .card .card-header{
    background-color:#ffffff;
}

.ascora-blue .card .card-header .nav-tabs-custom > .nav-tabs > li a {
    font-family: var(--modern-font-body) !important;
    color: var(--text-color);
    font-weight: 400;
    font-size: var(--font-size-default);
    display: block;
    padding: 10px 15px 18px 15px;
    border:0px;
}

.ascora-blue .card .card-header .nav-tabs-custom > .nav-tabs > .nav-item a:hover {
    font-weight: 500;
    font-size: var(--font-size-default);
    padding: 10px 15px 18px 15px;
    border: 0px;
}

.ascora-blue .card .card-header .nav-tabs-custom > .nav-tabs > .nav-item.active a {
    font-weight: 500;
    font-size: var(--font-size-default);
    padding: 10px 15px 18px 15px;
    color: var(--accent-color-1);
    border-left: 1px solid;
    border-right: 1px solid;
    border-left-color: #d2d6de;
    border-right-color: #d2d6de;
}

/*20/06/24*/

.ascora-blue .custom-modern-nav-tabs{
    background-color:#ffffff;
    position:relative;
    z-index:10;
}

.ascora-blue .custom-modern-nav-tabs .nav-tabs li{
    margin-bottom:-2px;
}

.ascora-blue .custom-modern-nav-tabs .nav-tabs li a {
    font-family: var(--modern-font-body) !important;
    font-weight: 500;
    font-size: var(--font-size-default);
    color: #6F7B91;

    border-top: 3px solid #ffffff;
    border-radius: var(--nav-radius);

    display: block;

    padding: 10px 15px 18px 15px;
    margin-right:5px;

    background-color:#ffffff;
}

.ascora-blue .custom-modern-nav-tabs .nav-tabs li a.active {
    color:var(--accent-color-1);

    border-top: 5px solid var(--accent-color-1);
    border-radius: var(--nav-radius) var(--nav-radius) 0 0;

    border-left:1px solid #d2d6de;
    border-right:1px solid #d2d6de;

    background-color:#ffffff;

    --shadow-color: 0deg 0% 78%;
    box-shadow: 0.1px -0.1px 0.2px hsl(var(--shadow-color) / 0.08), 2.2px -2.1px 4.3px -0.5px hsl(var(--shadow-color) / 0.39);
    
    border-radius: var(--nav-radius) var(--nav-radius) 0 0;
}

/*info-box*/

.ascora-blue .info-box.header_box {
    -webkit-box-shadow: var(--elevation-7);
    box-shadow: var(--elevation-7);
    border:1px solid var(--content-box-border-grey);
}

.ascora-blue .info-box {line-height:1.2}

.ascora-blue .info-box .info-box-icon.bg-aqua {
    background-color: var(--accent-color-1) !important;
}
.ascora-blue .info-box .info-box-content .info-box-text {
    color: var(--accent-color-1) !important;
    /*font-size: 20px;*/
    font-size: 1.4rem;
    font-weight:500;
}
.ascora-blue .info-box .info-box-content .info-box-text small {
    color:var(--text-color);
    font-weight:500;
    font-size:0.95rem; 
    line-height:0.9rem; 
    color:var(--text-color); 
    display:flex; 
    align-items:center;
    margin-left:8px;
}
.ascora-blue .info-box .info-box-content .job_section_text {
    margin-top:3px;
    /*font-size:16px;*/
    font-size:1.1rem;
    line-height:16px;
    font-weight:400;
}
.ascora-blue .info-box .info-box-content .quote_text{
    margin-top:3px;
    /*font-size:16px;*/
    font-size:1.1rem;
    line-height:16px;
    font-weight:400;
}

.ascora-blue .info-box .info-box-content .quote-status-text,
.ascora-blue .info-box .info-box-content .job_status_text{
    margin-top:3px;
    /*font-size:16px;*/
    font-size:1.1rem;
    line-height:16px;
    font-weight:500;
}

.ascora-blue .info-box.bg-blue .info-box-content{
    font-size:16px;
    font-weight:400;
    line-height:1.2;
}

.ascora-blue .info-box.bg-blue{
    background-color: var(--accent-color-1) !important;
}

.ascora-blue .card.bg-blue .info-box-content{
    font-size:16px;
    font-weight:400;
    line-height:1.2;
}

.ascora-blue .card.bg-blue{
    background-color: var(--accent-color-1) !important;
}

.ascora-blue .card.text-white h1{
    color:#ffffff;
}

.ascora-blue .info-box .info-box-content .job_section_text span{
    color:var(--accent-color-1) !important;
}

/* info-box bg-yellow */

.ascora-blue .info-box{border-radius:var(--widget-radius);}

.ascora-blue .info-box.bg-yellow{display:flex;}
.ascora-blue .info-box.bg-yellow .info-box-icon{
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-left:15px;
    padding-right:15px;
    background:rgba(0, 0, 0, 0.1);
}

.ascora-blue .info-box.bg-yellow .info-box-content {margin-left:0px;}
.ascora-blue .info-box.bg-yellow .info-box-content .info-box-text{color:#ffffff!important;font-size:16px;font-weight:500}

/* Ascora Header*/
.ascora-blue .ascora_content_header h3 {
    font-size: 26px;
    font-weight: 400;
}
/* Ascora Box */
/* Use form > to prevents inner elements from having a shadow*/
.ascora-blue form > .box.box-ascora {
    border-radius: var(--widget-radius);
    -webkit-box-shadow: var(--elevation-7);
    border-top: 0px solid var(--accent-color-1);
}

.ascora-blue form > .box.box_no_top_border {
    border-radius: 0 0 var(--widget-radius) var(--widget-radius);
    -webkit-box-shadow: var(--elevation-7);
}

/* Box and Card shadow*/

/*only add shadow to to first occurance of the box or card*/
/*CSS selector for only the first level/descendant of a specific class*/
.ascora-blue .content .box-ascora:not(.box-ascora .box-ascora),
.ascora-blue .content .box:not(.box .box),
.ascora-blue .content .card:not(.card .card) {
    -webkit-box-shadow: var(--elevation-7);
    border:1px solid var(--content-box-border-grey);
}

#customFieldsTabStrip .k-tabstrip-content {
    -webkit-box-shadow: var(--elevation-7);
}

/* Ascora Box box-solid box-ascora-blue*/
.ascora-blue .box .box-header h3.box-title {
    font-size: 20px;
    font-weight: 385;
    font-variation-settings: "wght" 385;
}

.ascora-blue .box.box-solid.box-ascora-blue > .box-header,
.ascora-blue .box.box-solid.box-ascora > .box-header {
    background-color: var(--accent-color-1);
    border:1px solid var(--accent-color-1);
}

.ascora-blue .box.box-solid.box-ascora-blue > .box-header h3.box-title,
.ascora-blue .box.box-solid.box-ascora > .box-header h3.box-title,
.ascora-blue .box.box-solid.box-ascora-blue > .box-header i.fa,
.ascora-blue .box.box-solid.box-ascora > .box-header i.fa
{
    font-size: 18px;
    font-weight: 400;
    color:#ffffff!important;
}

.ascora-blue .card > .card-header h3.card-title
{
    font-size: 18px;
    font-weight: 400;
    color:var(--text-color);
}

.ascora-blue .card{border:0px;}

.ascora-blue .card {
    border-radius: var(--widget-radius);
}

.ascora-blue .card .card-header {
    border-radius: var(--widget-radius) var(--widget-radius) 0 0;
}

.ascora-blue .card.card-ascora-blue > .card-header {
    background-color: var(--accent-color-1);
    border: 1px solid var(--accent-color-1);
    padding: 10px;
}

.ascora-blue .card.card-ascora-blue > .card-header .card-title{
    font-size: 18px;
    font-weight: 400;
    color: #ffffff !important;
}

.ascora-blue .box-footer.bg-gray {
    font-family: var(--modern-font-body) !important;
    color: var(--text-color);
    background-color: #ffffff !important;
    border-radius: 0 0 var(--widget-radius) var(--widget-radius);
    -webkit-box-shadow: var(--elevation-7);
}

.ascora-blue .box-footer.bg-gray label {
    font-size: 14px;
    font-weight: 500!important;
    padding:0px!important;
    margin:0px!important;
    line-height:30px!important;
    height:30px!important;
    margin-right:10px!important;
}

.ascora-blue .alert-error {
    background-color: var(--button-danger-bg) !important;
    border-radius: var(--widget-radius);
    color: #ffffff !important;
}

.ascora-blue .alert-error .alert-heading
{
    font-size:16px;
    color: #ffffff !important;
    line-height:1.5;
}



/* Alert*/
.ascora-blue .alert.alert-danger {
    background-color: var(--button-danger-bg) !important;
    color: #ffffff;
    border: 0px;
    border-radius: var(--nav-radius);
    -webkit-box-shadow: var(--elevation-3);
    box-shadow: var(--elevation-3);
}
.ascora-blue .alert.alert-danger .alert-heading {
    color: #ffffff;
    font-size:16px;
    font-weight:500;
}

.ascora-blue .alert.alert-danger ul{
    font-size:15px;
    font-weight:300;
}

/* Horizontal Nav Bar*/
/* Fix box shadow overlap*/
.ascora-blue .nav-tabs-custom.nav_tabs_ascora {
    position: relative;
    z-index: 10;
    border-top: 1px solid var(--content-box-border-grey);
    border-right: 1px solid var(--content-box-border-grey);
    border-left: 1px solid var(--content-box-border-grey);
    border-radius: 8px 8px 0 0;
    box-shadow:none;
}

/* Style Job Profitability to use Accent Colour*/
.ascora-blue #jobProfitabilitySection table.table-striped {
    border-spacing: 0;
    border-radius: var(--widget-radius);
    overflow: hidden;
    font-family: var(--modern-font-body) !important;
    font-size:15px;
    color: var(--text-color);
}

.ascora-blue #jobProfitabilitySection table.table-striped strong {
    font-family: var(--modern-font-body) !important;
    font-weight: var(--font-weight-bold);
}

.ascora-blue #jobProfitabilitySection table.table-striped > thead > tr > th {
    background-color: var(--accent-color-1) !important
}
.ascora-blue #jobProfitabilitySection table.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-1) !important;
}

.ascora-blue #jobProfitabilitySection table.table-striped > tbody > tr {
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-2) !important;
}

/*labourBreakDownGrid*/

.ascora-blue #labourBreakDownGrid {
    border-radius: var(--widget-radius);
    font-family: var(--modern-font-body) !important;
    font-size: 15px;
    color: var(--text-color);
    overflow: hidden;
    border:0px solid;
}

.ascora-blue #labourBreakDownGrid .k-grid-header .k-header {
    background-color: var(--accent-color-1) !important;
    font-family: var(--modern-font-body) !important;
    font-weight:500;
    font-size:16px;
    color:#ffffff;
}

.ascora-blue #labourBreakDownGrid .k-footer-template td {
    background-color: var(--accent-color-1) !important;
    font-family: var(--modern-font-body) !important;
    background-image: var(--table-row-tint-1) !important;
    font-weight:500;
    font-size:16px;
    color:#ffffff;
}

.ascora-blue #labourBreakDownGrid .k-footer-template div{
    color:var(--text-color) !important;
}


.ascora-blue #labourBreakDownGrid.k-grid tbody tr.k-table-row{
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-2) !important;
}

.ascora-blue #labourBreakDownGrid.k-grid tbody tr.k-alt{
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-1) !important;
}

.ascora-blue #labourBreakDownGrid.k-grid td, 
.ascora-blue #labourBreakDownGrid.k-grid .k-table-td{
    border:1px solid white;
}

.ascora-blue label:not(.form-check-label):not(.custom-file-label) {
    font-weight: var(--form-element-font-weight);
}

/*job Total Detail Table*/
.ascora-blue #jobTotalDetailTable td {
    color: var(--text-color);
    font-weight:400;
    font-size:15px;
}

.ascora-blue #jobTotalDetailTable,
.ascora-blue #jobTotalDetailTable .k-table-td {
    border-color: var(--grid-border-color);
}

.ascora-blue #jobTotalDetailTable .k-grid-header .k-header {
    background-color: #51AAE0;
    border-color: var(--grid-border-color);
    border-width: 1px;
    display: none;
}

.ascora-blue #jobTotalDetailTable tr
{
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-2) !important;
}

.ascora-blue #jobTotalDetailTable .k-alt
{
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-1) !important;
}

/*Breakdown*/

.ascora-blue .planDetails.table-striped,
.ascora-blue div[id*="Breakdown"] .table-striped {
    color: var(--text-color);
    border-radius: var(--widget-radius);
    overflow: hidden;
}

.ascora-blue .planDetails.table-striped > tbody > tr:nth-of-type(2n+1),
.ascora-blue div[id*="Breakdown"] .table-striped > tbody > tr:nth-of-type(2n+1){
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-1) !important;
}

.ascora-blue .planDetails.table-striped > tbody > tr,
.ascora-blue div[id*="Breakdown"] .table-striped > tbody > tr{
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-2) !important;
}

.ascora-blue .planDetails.table-striped > tbody > tr td,
.ascora-blue div[id*="Breakdown"] .table-striped > tbody > tr td{
    border-top:1px solid white;
    border-bottom:1px solid white;
    border-color:white;
}

.ascora-blue .planDetails.table-striped > tbody > tr.bold_tr,
.ascora-blue div[id*="Breakdown"] .table-striped > tbody > tr.bold_tr{
    font-weight:600;
}

.ascora-blue .planDetails.table-striped > tbody > tr.solid_tr,
.ascora-blue div[id*="Breakdown"] .table-striped > tbody > tr.solid_tr{
    color:white;
    background-color: var(--accent-color-1) !important;
    background-image:none !important;
}

/* Q1 2025 Trevor*/

.ascora-blue .planCostDetails {
    font-size: 1.2rem;
}

.ascora-blue .planCostDetails.table th {
    font-size: 1.2rem;
    font-weight: 700;
}

.ascora-blue .planCostDetails strong {
    font-size: 1.2rem;
}

.ascora-blue .planCostDetails .text-muted {
    color: #5d5d5d;
    font-size: 1.0rem;
}

.ascora-blue .planCostDetails .horizontal-line {
    background-color: #dee1e6;
    border: 0px;
    height: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ascora-blue .planCostDetails .table-total strong {
    font-size: 1.4rem;
    font-weight:700;
}

.ascora-blue .planCostDetails.table th,
.ascora-blue .planCostDetails.table td {
    border: 0px !important;
    padding: 0.5rem 0px;
}


/*footer*/
.ascora-blue #jobTotalDetailTable .k-footer-template td
{
    background-color: #84BDE0;
}

/*footer text*/
.ascora-blue #jobTotalDetailTable .k-footer-template div
{
    color: #000000;
}

.ascora-blue #billingContactDetails,
.ascora-blue #siteContactDetails {
    margin-top:8px;
}

.ascora-blue #divEditSupplyImage {
    display:flex;
}

.ascora-blue #divEditSupplyImage .k-upload{
    
    border-radius:var(--button-radius);
    border:0px;
}

.ascora-blue #divEditSupplyImage .btn{
    margin-left:5px;
}

.ascora-blue legend {
    color: var(--heading-accent-color-3);
    border-bottom: 2px solid var(--heading-accent-color-4);
}


/* Alerts */

.ascora_alert {font-size:12px; line-height:18px; padding:12px; margin-bottom:10px; font-weight:400;}

/*.ascora-blue .callout{
    display:flex;
    align-items:center;
}*/

.ascora-blue .callout.callout-info,
.ascora-blue .alert.alert-info {
    color: #ffffff !important;
    border-radius: var(--widget-radius);
    background-color: var(--info-color) !important;
    border: 0px;
}

.ascora-blue .callout.callout-info h1,
.ascora-blue .alert.alert-info h1,
.ascora-blue .callout.callout-info h2,
.ascora-blue .alert.alert-info h2,
.ascora-blue .callout.callout-info h3,
.ascora-blue .alert.alert-info h3,
.ascora-blue .callout.callout-info h4,
.ascora-blue .alert.alert-info h4
{
    color: #ffffff;
}

.ascora-blue .alert.alert-error {
    color: #ffffff !important;
    border-radius: var(--widget-radius);
    background-color: var(--danger-color) !important;
    border: 0px;
}

.ascora-blue .alert.alert-error .alert-heading{
    font-size: 15px !important;
    font-weight: 400;
}

/* Trevor 221025 */

.ascora-blue .alert.alert-error ul {
    font-size: 80% !important;
    color: rgba(255,255,255,.8) !important;
    line-height: 14px;
    padding-left: 20px;
}

.ascora-blue .alert.alert-error ul li{
    font-size: 0.95rem;
    color: rgba(255,255,255,.8) !important;
    line-height: 15px;
    font-weight: normal;
}

.ascora-blue h4.alert-heading {
    color: #ffffff !important;
    line-height:1.2;
    margin:0px;
}

/* validation error*/
.field-validation-error {
    color:var(--danger-color);
    font-weight:400;
}

.field-validation-error.k-tooltip .k-tooltip-content{
    color: white!important;
    font-weight: 400;
}

.field-validation-error.k-tooltip .k-icon{
    color: white!important;
    font-weight: 400;
}


/*.ascora-blue #siteCustomerWindow .btn-sm {
    padding:6px 12px;
    line-height:1.42857143;
    font-size:14px;
}*/

/*white*/
/*.ascora-blue .box.box-solid.box-ascora > .box-header {
    background-color: white;
    border:1px solid var(--gray-color-500);
}

.ascora-blue .box.box-solid.box-ascora > .box-header i[class*="fa"]{
    color:var(--text-color);
    color:var(--text-color);
    font-size:18px;
    font-weight:400;
}

.ascora-blue .box.box-solid.box-ascora > .box-header .box-title {
    color:var(--text-color);
    font-size:18px;
    font-weight:400;
}*/

/* fix inconsistent button sizes*/
/*.ascora-blue #paymentDetailPanel .btn.btn-primary,
.ascora-blue #InvoiceItems .btn.btn-sm {
    line-height: 1;
}*/
/*.ascora-blue #statementTypeDropdown {
    padding-block: .375rem;
    padding-inline: .75rem;
    height:30px;
}*/

.ascora-blue .history_item .attachment_wrapper {
    background-color:white;
    padding:0px;
}

.ascora-blue .history_item .attachment_wrapper .history_attachment {
    background-color: white;
    padding:0px;
}

.ascora-blue .history_item .attachment_wrapper .history_attachment .far{
    padding:0 5px 0 0;
}

.ascora-blue .history_item .attachment_wrapper .history_attachment a{
    background-color:var(--primary-color);
    color:white!important;
    padding:.375rem .75rem;
    border-radius: var(--button-radius);
    text-decoration:none;
    display: inline-block;
}

.ascora-blue .history_item .attachment_wrapper .history_attachment a:hover {
    color: white !important;
    text-decoration: none;

    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: var(--tint-dark-1);
}

.ascora-blue .bulk_action_group .dropdown-menu {
    width: 350px;
}

.ascora-blue .navbar.ascora-main-nav {
    box-shadow: var(--elevation-7);
}

.ascora-blue #kitImage {
    border-radius:var(--widget-radius);
    box-shadow: var(--card-shadow);
}

/* Modern Summary Widget */
.widget-summary {display:flex; flex-direction:column; padding-left:0px; border-radius:var(--widget-radius); background-color:#f7f7fb !important;padding:10px 0 10px 0;}
.widget-summary {border:3px solid #8f8fb56b; box-shadow:none}
.widget-summary .widget-summary-item {display:flex; justify-content: center;padding:15px 10px;width:100%; text-align:center;}
.widget-summary .widget-summary-item a .h6{color:var(--primary-color)}
.widget-summary .widget-summary-item label.h6{margin-bottom:3px; font-size:26px;font-weight:500;margin-top:0px}
.widget-summary .widget-summary-item small {display:block;margin-top:3px;margin-bottom:0; font-size:16px;font-weight:400;color:var(--text-color-muted)}
.widget-summary .widget-summary-item .help-block{margin:0px; padding:0px}

.widget-summary-totals{
    display:flex; 
    flex-direction:column; 
    padding-left:0px; 
    border-radius:var(--widget-radius); 
    background-color:var(--accent-color-2); 
    background-image:var(--tint-light-3);
    padding:10px 0 10px 0;
    min-width:420px;
}

.widget-summary-totals label{
    font-weight:400!important;
}


/* Make both HTML and Kendo controls small*/
.form-group-sm input{
    height: calc(1.8125rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

/* Button groups*/
.ascora-blue .btn-group .btn-primary.active {
    background-color: var(--primary-color)!important;
    background-image: var(--tint-dark-1)!important;
}

/*Round Buttons*/
.ascora-blue .ctrl_btns.btn_delete_round {
    background-color: var(--button-danger-bg) !important;
}
.ascora-blue .ctrl_btns.btn_edit_round {
    background-color: var(--primary-color) !important;
}

.ascora-blue .ctrl_btns.btn_add_round {
    background-color: var(--button-green-bg) !important;
}

/*********************************************/
/* Make all form Elements Same Size 07/12/23 */
/*********************************************/


.ascora-blue .k-chip-list .k-chip .k-chip-label{font-size: var(--kendo-grid-button-font-size)}

.ascora-blue .panel_ascora_help button.btn {height: auto;line-height:15px;padding:10px;}
.ascora-blue .panel_ascora_help button.btn i[class^="fa"] {line-height:15px}

/* Bootstrap*/
.ascora-blue button.btn,
.ascora-blue a.btn,
.ascora-blue span.btn {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-button-font-size);
    font-weight: var(--form-element-font-weight);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora-blue button.btn.custom-btn-lg,
.ascora-blue a.btn.custom-btn-lg
{
    height: var(--form-element-height-lg);
    line-height: var(--form-element-height-lg);
    font-size: var(--form-element-font-size-lg);
    font-weight: var(--form-element-font-weight-lg);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora-blue button.btn.custom-btn-lg i[class*="fa"],
.ascora-blue a.btn.custom-btn-lg i[class*="fa"] {
    font-size: var(--form-element-font-size-lg);
}

.ascora-blue .box.box-solid.box-ascora > .box-header button.btn i[class*="fa"],
.ascora-blue .box.box-solid.box-ascora > .box-header a.btn-primary i[class*="fa"] {
    font-size: var(--form-element-font-size);
    color:#ffffff;
}

.ascora-blue select.form-control,
.ascora-blue input.form-control {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-weight: var(--form-element-font-weight);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius:var(--button-radius)!important;
}

/*form font size*/
.ascora-blue .input-group select,
.ascora-blue select.form-control,
.ascora-blue input.form-control {
    font-size: var(--form-element-font-size);
}

/* Kendo Grid*/
.ascora-blue .k-grid .btn,
.ascora-blue .k-grid a.btn,
.ascora-blue .k-grid a.k-button,
.ascora-blue .k-grid button.btn {
    height: var(--form-element-height);
    line-height:var(--form-element-height); 
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top:0px; 
    padding-bottom:0px;
}

/* Kendo Grid Toolbar*/
.ascora-blue .k-grid-toolbar button i[class*="fa"] {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Kendo Date Pickers*/
.ascora-blue .k-input.k-datepicker,
.ascora-blue .k-input.k-timepicker {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    box-sizing: border-box;
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
}

/*Firefox fix for cropped date pickers*/
.ascora-blue .k-input.k-datepicker input{width:100%!important}

/* Kendo Numeric Textbox*/
.ascora-blue .k-input.k-numerictextbox {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    box-sizing: border-box;
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
}

/* Bulk Action*/
.ascora-blue .bulk_action_group .dropdown-menu > li > a,
.ascora-blue .bulk_action_group .dropdown-menu > li > button,
.ascora-blue .bulk_action_group .dropdown-menu > li > .btn i[class*="fa"] {
    line-height: var(--form-element-height);
    font-size: var(--font-size-default);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora-blue .bulk_action_group .dropdown-menu > li{

}

.ascora-blue .bulk_action_group .dropdown-menu > li a{
    white-space: normal;
    float: left;
    width: 100%;
    height: auto;
    word-wrap: break-word;

    display:flex;
    align-items:center;
    line-height:20px;
    min-height:30px;

}

.ascora-blue input[id*="Search"] {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-button-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
}

/*Icons*/
.ascora-blue .btn i[class^="fa"] {
    font-size: var(--form-button-font-size);
    font-weight: var(--form-element-font-weight);
    line-height: var(--form-element-height);
}

.ascora-blue .btn .k-icon {
    font-size: var(--form-button-font-size);
    font-weight: var(--form-element-font-weight);
    line-height: var(--form-element-height);
}

.ascora-blue .k-grid button .k-icon {
    font-size: var(--kendo-grid-button-font-size);
}

.ascora-blue .k-grid .k-grid-toolbar .btn .k-icon {
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
    line-height: var(--form-element-height);
    height: var(--form-element-height);
}

.ascora-blue .k-button-md.k-icon-button .k-icon {
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
}

.ascora-blue .k-button.k-grid-edit i[class*="fa"] {
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
}

.ascora-blue .k-grid a.btn::before {
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
}

/*Kendo Buttons*/
.ascora-blue .k-button-md {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

.ascora-blue .k-button.k-grid-edit {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora-blue input.btn {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--kendo-grid-button-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora-blue .remove_dropzone .k-upload .k-upload-button{
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
    box-sizing:border-box;
}

.ascora-blue .bulk_action_group .remove_dropzone .k-upload .k-upload-button {
    font-size: 14px;
}

/*Remove border when dropdown is removed*/
.ascora-blue .remove_dropzone .k-upload{border:0px;}

/*Main NavBar*/
.ascora-blue .k-picker.k-dropdownlist {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora-blue .k-picker.k-dropdownlist .k-input-value-text {
    display: flex;
    align-items: center;
}


/*Billing Customer Link*/
.ascora-blue #billingCustomerLink {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    padding-top: 0px;
    padding-bottom: 0px;
}

.ascora-blue .input-group select {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
}

/*Main NavBar*/

.ascora-blue .main-header .navbar > .btn {line-height: 20px;font-size: 14px;height: auto}
.ascora-blue .main-header .navbar > .btn i[class^="fa"] {line-height: 20px;}

/*Main NavBar Bootstrap 4*/
.ascora-blue .main-header .nav-item > .btn {line-height: 20px;font-size: 14px;height: auto; background-color: #0d56a5;color:#ffffff;}
.ascora-blue .main-header .nav-item > .btn:hover {background-image:var(--tint-dark-1);}

.ascora-blue .main-header .nav-item > nav-link:hover {background-image:var(--tint-dark-1);}

.ascora-blue .main-header .nav-item > .btn i[class^="fa"] {line-height: 20px;}

/* custom btn group vertical */
.ascora-blue .custom-btn-group-vertical .btn-group .btn {
    width:150px!important;
}

.ascora-blue .custom-btn-group-vertical .btn-group .btn {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
    padding-top: 0px;
    padding-bottom: 0px;
    border-color: #B9DCFF;
}

.ascora-blue .custom-btn-group-vertical .btn-group .btn i[class^="fa"] {
    height: var(--form-element-height);
    font-size: 10px;
    font-weight: var(--form-element-font-weight);
    line-height: 1;
}

.ascora-blue .custom-btn-group-vertical .btn-group .btn {
    background-color: #E7F3FF !important;
    background-image: none !important;
    color: var(--primary-color) !important;
}

.ascora-blue .custom-btn-group-vertical .btn-group .btn.active {
    background-color:var(--toggle-color-blue-pastel-active)!important;
    background-image:none!important;
    color:#ffffff!important;
    border:0px;
}

.ascora-blue .custom-btn-group-vertical .btn-group > .btn:first-child {border-radius: 3px 3px 0px 0px;}
.ascora-blue .custom-btn-group-vertical .btn-group > .btn:last-child {border-radius: 0px 0px 3px 3px;}

.ascora-blue .btn-group.calculation > .btn{border-radius: 0px 0px 0px 0px}
.ascora-blue .btn-group.calculation > .btn:first-child {border-radius: 3px 0px 0px 3px}
.ascora-blue .btn-group.calculation > .btn:last-child {border-radius: 0px 3px 3px 0px;}

/*k-datepicker set date picker width*/
.ascora-blue .k-datepicker {width:130px}

/*form questions*/
.ascora-blue .form_questions .k-grid-toolbar .k-button,
.ascora-blue .form_questions .k-grid-toolbar .k-button:hover {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #ffffff;
    border-radius: .25rem;
}

.ascora-blue .form_questions .k-grid-toolbar .k-button:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: var(--tint-dark-1);
}

.box-ascora-gold {
    border-top: 3px solid #f39c12 !important;
}

.ascora-blue .k-upload-button .k-button-text::before {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 600;
    content: "\f093";
    margin-right: 5px;
}

/*fix issue with form-control-static adding too much height*/
.ascora-blue .box.box-ascora .box-header .form-control-static {
    min-height:auto;
    padding-top:0px;
    padding-bottom:0px;
}

/* Subscription */
/* Account Details */
/* Profile Plan */

.ascora-blue .comparison_table .pro h1,
.ascora-blue .comparison_table .prem h1,
.ascora-blue .comparison_table .ulti h1,
.ascora-blue .comparison_table .pro h3,
.ascora-blue .comparison_table .prem h3,
.ascora-blue .comparison_table .ulti h3 {
    color:white;
}

.ascora-blue #additionalFeatures .addon_content .addon_glyph {
    background-color:var(--accent-color-1) !important
}
.ascora-blue #additionalFeatures .addon_content .addon_text .addon_list {
    font-family: var(--modern-font-body);
}

.ascora-blue #additionalFeatures .addon_content .addon_text .fa-li {
    top:0px;
}

.ascora-blue #additionalFeatures .addon_content {
    border-radius: var(--widget-radius);
    overflow:hidden;
}

.ascora-blue .addon_content .addon_prices p{
    font-size:14px;
}

.ascora-blue #additionalFeatures .addon_content .addon_text .addon_list{
    color:var(--text-color);
}

/*Quick Sale*/

.ascora-blue .quicksales_table.table-striped .table-primary > td {
    background-color: var(--accent-color-1) !important;
    background-image:none;
    color:#ffffff;
}

.ascora-blue .quicksales_table.table-striped {
    color: var(--text-color);
    border-radius: var(--widget-radius);
    overflow: hidden;
    font-size: 18px;
}

.ascora-blue .quicksales_table.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-1) !important;
}

.ascora-blue .quicksales_table.table-striped > tbody > tr {
    background-color: var(--accent-color-1) !important;
    background-image: var(--table-row-tint-2) !important;
}

.ascora-blue .quicksales_table.table-striped > tbody > tr td {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    border-color: white;
}


/*Reports*/

.ascora-blue .report_item_box h4,
.ascora-blue .report_item_box p{color:white;}

.ascora-blue .report_item_box {
    background-color: var(--accent-color-1) !important;
    color: white;
}

.ascora-blue .report_item_box:hover {
    background-color: var(--accent-color-1) !important;
    background-image: var(--tint-dark-1) !important;
}
.ascora-blue .report_item_box.selected{
    background-color: var(--accent-color-1) !important;
    background-image: var(--tint-dark-1) !important;
}

.ascora-blue .card-ascora {
    border-radius: var(--widget-radius);
    -webkit-box-shadow: var(--elevation-7);
}

.ascora-blue .card-ascora .card-header {
    background-color: var(--accent-color-1);
    box-shadow: none;
    border-radius: var(--widget-radius);
    padding: 10px;
    border:0px;
}

.ascora-blue .card-ascora .card-header h3{
    font-size: 18px;
    font-weight: 400;
    color: #ffffff !important;
}

.ascora-blue .ascora-widget-rating-star {
    background-color: var(--accent-color-1);
    border-radius: var(--widget-radius);
    -webkit-box-shadow: var(--elevation-7);
    text-align:center;
    color:#ffffff;
    padding:10px;
}

.ascora-blue .ascora-widget-rating-star h1{font-size:20px;margin-top:10px;margin-bottom:10px;color:#ffffff;}
.ascora-blue .ascora-widget-rating-star h2{font-size:30px;margin:0px;color:#ffffff;}
.ascora-blue .ascora-widget-rating-star .rating-glyphs{}
.ascora-blue .ascora-widget-rating-star .rating-glyphs .noRating,
.ascora-blue .ascora-widget-rating-star .rating-glyphs .yesRating {font-size: 28px}
.ascora-blue .ascora-widget-rating-star .rating-glyphs .noRating {color: white;}
.ascora-blue .ascora-widget-rating-star .rating-glyphs .yesRating {color: #ffcf50;}

/************/
/* Tracking */
/************/

/*Tracked Assets*/
.ascora-blue .tracked_assets .card-header .btn.btn_toggle_round {
    height: var(--form-element-height);
    width: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius:60px;
    margin:0px 0px 0px 5px;
}

.ascora-blue .tracked_assets .input-group-append .btn-group .btn-secondary {
    background-color: var(--button-secondary-bg);
    border-radius: var(--input-radius);
}

.ascora-blue .tracked_assets .card-header {
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.ascora-blue .tracked_assets .card-header h5{
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color);
}

.ascora-blue .tracked_assets .dropdown-menu .dropdown-item{
    background-color: white;
    color: var(--text-color) !important;
}
.ascora-blue .tracked_assets .dropdown-menu .dropdown-item:hover{
    background-color:var(--interactive-element-hover-color);
}

.ascora-blue #gridAssets .dropdown-menu .dropdown-item {
    background-color: white;
    color: var(--text-color) !important;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    line-height: 20px;
    min-height: 30px;
}
.ascora-blue #gridAssets .dropdown-menu .dropdown-item:hover {background-color: var(--interactive-element-hover-color);}

/*Boostrap 4 card heading*/

.ascora-blue .ascora-widget-card-heading-sm {
    color: var(--text-color) !important;
    font-family: var(--modern-font-body);
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight)
}

.ascora-blue .ascora-widget-card-heading-sm .form-group label{
    font-size: 14px;
}

.ascora-blue .ascora-widget-card-heading-sm .card-icon {
    width:50px;
    min-height:50px;
    background-color:var(--accent-color-1) !important;
    color:#ffffff;
    border-radius: var(--widget-radius);
}

.ascora-blue .ascora-widget-card-heading-sm .card-icon i[class*="fa"]{font-size:18px;}

/* -----------------------------------------------------------------------------
 * Shared "page header icon + title" used by the Scheduler family — Whiteboard,
 * Calendar, Grouped Calendar — so they read as the same product surface. The
 * gradient + bold title were originally defined locally in JobWhiteboard.css
 * (.whiteboard-header-icon / -title); replicated here so the same look can be
 * applied via a class without each page rolling its own block.
 * --------------------------------------------------------------------------- */
.asc-page-header-icon {
    width: 48px !important;
    min-height: 48px !important;
    height: 48px;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1e7fc9 0%, #10a7f2 100%) !important;
    color: #ffffff !important;
    flex: 0 0 auto;
}
.asc-page-header-icon i[class*="fa"] {
    font-size: 22px !important;
    line-height: 1;
}
.asc-page-header-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: #1f2d3d !important;
}

/*whiteboard*/
.ascora-blue .whiteboard-dates {}

/*Global Search*/
.ascora-blue .asc-search-box {display: flex;gap: 0.5em;border: solid 1px #999;border-radius: 1em;}
.ascora-blue .asc-search-box > button {color: #999;background: none;border-radius: 1em 0em;}
.ascora-blue .asc-search-box > button:active:focus,
.ascora-blue .asc-search-box > button:focus {outline: none;outline-offset: unset;color: #3c8dbc;}
.ascora-blue .asc-search-box:has(input:focus) {border: solid 1px #3c8dbc;}
.ascora-blue .asc-search-box input{border:0px}

.ascora-blue .global-search-all-container .card .card-header {padding: 5px;}
.ascora-blue .global-search-all-container .card .card-body {padding: 0px;}
.ascora-blue .global-search-all-container .card .card-header {background-color:var(--accent-color-1)}
.ascora-blue .global-search-all-container .card .card-header .card-title {
    margin-bottom: 0px;
    padding: 0px;
    font-family: var(--modern-font-body);
    font-size: 14px;
    font-weight: 300;
    color:#ffffff;
}

.ascora-blue .global-search-all-container .card .card-header .card-title a{color:#ffffff;}

.ascora-blue .global-search-row-container .info-block {
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
}
.ascora-blue .global-search-row-container > .row {display: flex;}

.ascora-blue .global-search-all-container .card{border:1px solid var(--border-light-1);}
.ascora-blue .global-search-all-container .card .card-header{border-radius: var(--widget-radius) var(--widget-radius) 0 0;}

.ascora-blue .view-details-link {
    width: min-content;
    display: flex;
    justify-content: right;
    align-items: center;
    text-align: center;
}

.ascora-blue .asc-search-box {
    border: solid 1px var(--input-border-color);
}
/* Global Search Nav Bar*/
.ascora-blue .global-search-container .k-tabstrip-items .k-item.k-active .k-link {
    border-top: 5px solid var(--accent-color-1) !important;
    border-radius: var(--nav-radius) var(--nav-radius) 0 0;
    color: var(--accent-color-1);
    padding-top: 5px;
    padding-bottom: 10px;
    border-left: 1px solid #d2d6de !important;
    border-right: 1px solid #d2d6de !important;
}

.ascora-blue .global-search-container .k-tabstrip-items {
    border-bottom: 1px solid #d2d6de;
}

/*Ascora Main menu - saved search*/
.ascora-blue .saved-searches-dropdown .dropdown-toggle{
    color:#ffffff!important;
}

.ascora-blue .saved-searches-dropdown .dropdown-menu{
    padding:0px!important; 
    width:400px!important; 
    overflow:hidden;
    box-shadow: var(--elevation-5);
    border-radius: var(--widget-radius);
}
.ascora-blue .saved-searches-dropdown .dropdown-menu .header{
    padding:8px!important;
    background-color:#ffffff!important;
    color:var(--text-color)!important;
    font-size:16px!important;
}

.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container{
    padding-bottom:8px!important;
}
.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn{
    border:0px;
}
.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn.btn-light {
    background-color: #ffffff;
}
.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn.btn-light:hover{
    background-color:var(--interactive-element-hover-color);
    background-image:none;
}

.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn {
    align-items:center;
}

.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn span{
    text-wrap:wrap;
    line-height:1.0;
    display:flex;
    align-items:center;
    flex: 1 1 auto;
}

.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn span:first-child{
    flex: 1 1 auto;
}

.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn span:last-child{
    flex: 100 1 auto;
}

.ascora-blue .saved-searches-dropdown .dropdown-menu .saved-search-container .saved-search-row-container .btn span i {
    width:10px;
}

/* Custom Cards*/

/*Warning*/
.ascora-blue .card.card-custom-warning {box-shadow: var(--elevation-5);border-radius: var(--widget-radius);border:1px solid #eee}
.ascora-blue .card.card-custom-warning h1{font-size:26px;font-weight:600;}
.ascora-blue .card.card-custom-warning .card-icon{width:100px; min-height:100px;background-color:#f55555;color:#ffffff;border-radius: var(--widget-radius);font-size:40px;}

/*info*/
.ascora-blue .card.card-custom-info {box-shadow: var(--elevation-5);border-radius: var(--widget-radius);border:1px solid #eee}
.ascora-blue .card.card-custom-info h1{font-size:20px;font-weight:600;}
.ascora-blue .card.card-custom-info .card-icon{width:100px; min-height:100px;background-color:var(--accent-color-1) !important;color:#ffffff;border-radius: var(--widget-radius);font-size:40px;}

.ascora-blue .btn-download-guide {height:auto!important; line-height:22px!important; padding:5px !important}
.ascora-blue .btn-download-guide i[class^="fa"]{font-size:26px;font-weight:600;}
.ascora-blue .btn-download-guide p{font-size:14px;font-weight:500;margin-bottom:0px;}

/*.ascora-blue .email_connection_btns .btn i[class^="fa"]{font-size:16px}*/

.ascora-blue .email_connection_btns button.btn {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-size: var(--form-element-font-size);
    font-weight: var(--form-element-font-weight);
}

.ascora-blue .info-box.bg-blue {
}
.ascora-blue .info-box.bg-blue .info-box-content .info-box-text{
    color:#ffffff!important;
    white-space:normal;
    font-size:16px;
}

.ascora-blue #jobCalendar .k-event {
    box-shadow: var(--calendar-card-shadow);
    border-radius:6px;
}

/*Fix for when labels are too wide an break the formatting*/

.ascora-blue #detailsCol .form-group,
.ascora-blue #customCol1 .form-group,
.ascora-blue #customCol2 .form-group,
.ascora-blue #customCol3 .form-group {display:flex;flex-wrap: wrap;}

.ascora-blue #detailsCol .form-group .control-label,
.ascora-blue #customCol1 .form-group .control-label,
.ascora-blue #customCol2 .form-group .control-label,
.ascora-blue #customCol3 .form-group .control-label
{
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
    text-align:right;
}

.ascora-blue .navbar-nav .dropdown-header {
    background-color: #ffffff !important;
    color: var(--text-color) !important;
    border-radius: 6px 6px 0 0;
}

.ascora-blue .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.ascora-blue .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.ascora-blue .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
    background-color: #007ee6 !important;
    color: #ffffff !important;
    border-radius: 0 0 6px 6px;
}

.ascora-blue .navbar-nav .dropdown-footer {
    background-color: #007ee6 !important;
    color: #ffffff !important;
    border-radius: 0 0 6px 6px;
}

.ascora-blue .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.ascora-blue .navbar-nav > .messages-menu > .dropdown-menu > li.header,
.ascora-blue .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
    background-color: #ffffff !important;
    color: var(--text-color) !important;
    border-radius: 6px 6px 0 0;
}

.ascora-blue .navbar-nav > li > .dropdown-menu {
    border-radius: 6px;
}

/*Title bar styling BS4*/
.ascora-blue .main-header .navbar-nav .nav-item .nav-link:hover,
.ascora-blue .main-header .navbar-nav .nav-item .nav-link:active,
.ascora-blue .main-header .navbar-nav .nav-item .nav-link:focus {
    background: rgba(0, 170, 255, 0.7);
    border-radius: 6px;
}

.ascora-blue .main-header .navbar-nav .nav-item .nav-link {font-size: 16px;}
.ascora-blue .main-header .navbar-nav .nav-item.user-menu .nav-link {font-size: 14px;}

/*Title bar styling BS3*/ 
/*.ascora-blue .main-header .navbar .nav > li > a {font-size:16px;padding:15px;}*/
.ascora-blue .main-header .navbar .nav .messages-menu > a {font-size:16px;padding:15px;}
.ascora-blue .main-header .navbar .nav > li.user-menu > a {font-size: 14px;}


.ascora-blue .main-header .logo {
    background-color: #046cd6
}

.ascora-blue .btn_tour {margin-right:5px}

.ascora-blue .main-header .nav-item > .btn,
.ascora-blue .btn_tour,
.ascora-blue .btn_tour:link,
.ascora-blue .btn_topbar {
    background: rgba(0, 170, 255, 0.6);
    border-radius: 6px;
    padding: 10px !important;
    margin-block: 5px;
}

.ascora-blue .main-header .nav-item > .btn:hover,
.ascora-blue .btn_tour:hover,
.ascora-blue .btn_tour:link:hover,
.ascora-blue .btn_topbar:hover {
    background: rgba(0, 170, 255, 1);
    border-radius: 6px;
    padding: 10px !important;
    margin-block: 5px;
}

.ascora-blue .main-header .navbar .nav > li > a:hover,
.ascora-blue .main-header .navbar .nav > li > a:active,
.ascora-blue .main-header .navbar .nav > li > a:focus,
.ascora-blue .main-header .navbar .nav .open > a,
.ascora-blue .main-header .navbar .nav .open > a:hover,
.ascora-blue .main-header .navbar .nav .open > a:focus,
.ascora-blue .main-header .navbar .nav > .active > a {
    background: rgba(0, 170, 255, 0.7);
    border-radius: 6px;
}

.ascora-blue .main-header,
.ascora-blue .main-header .navbar {
    font-family: var(--modern-font-body);
    background-color: var(--title-bar-background-colour-1);
    background-image: var(--svg-waves-title-1);
    background-size: cover;
}

.ascora-blue .main-header li.user-header {
    font-family: var(--modern-font-body);
    background-color:  #007ee6;
    background-image:var(--svg-waves-user);
    background-size:cover;
    text-wrap:wrap;
    word-wrap: break-word;
}

.ascora-blue .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
    font-size:14px;
    font-weight:400;
    color:#ffffff;
    margin-top:15px;
}

.ascora-blue .navbar-nav > .user-menu > .dropdown-menu > li.user-header p small {
    font-size:20px;
    font-weight:500;
    line-height:20px;
    margin-top:5px;
    color:#ffffff;
}

.ascora-blue .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    border-radius: 0 0 var(--user-dropdown-radius) var(--user-dropdown-radius);
}
.ascora-blue .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    border-radius: var(--user-dropdown-radius) var(--user-dropdown-radius) 0 0;
}
.ascora-blue .navbar-nav > .user-menu > .dropdown-menu {
    border-radius: var(--user-dropdown-radius);
}
.ascora-blue .navbar-nav > .user-menu > .dropdown-menu .fa.fa-user::before{
    content: "\f2bd";
}

/*navbar Dropdown hover states*/
.ascora-blue .navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: var(--interactive-element-hover-color);
}

/*Color navbar dark grey for admin and impersonating*/
.ascora-blue .main-header > .navbar.navbar-admin,
.ascora-blue .main-header > .navbar.navbar-admin > .logo {
    background-color: #303f4e;
    background-image: none;
}
/*Color navbar dark grey for admin and impersonating*/
.ascora-blue .main-header.navbar.navbar-admin,
.ascora-blue .main-header.navbar.navbar-admin .navbar-nav .logo {
    background-color: #303f4e;
    background-image: none;
}

/*Custom Callouts*/
.ascora-blue .custom-callout-purple {
    border: 3px solid #dedeef;
    box-shadow: none;
    border-radius: 12px;
}

    .ascora-blue .custom-callout-purple a {
        color: var(--button-primary-bg);
        font-weight: var(--kendo-grid-link-font-weight);
        text-decoration: none;
    }

    .ascora-blue .custom-callout-purple a:hover {
        color: var(--button-primary-hover);
        font-weight: var(--kendo-grid-link-font-weight);
        text-decoration: auto;
    }

.ascora-blue .custom-callout-purple h1 {
    color: var(--heading-accent-color-3);
    font-size: 20px;
    font-weight: 500;
}

.ascora-blue .custom-callout-purple h4 {
    color: var(--heading-accent-color-3);
    font-size: 18px;
    font-weight: 500;
}

.ascora-blue .custom-callout-purple p {
    color: #677890;
    font-size: 16px;
}

.ascora-blue .custom-callout-purple ul li {
    color: #677890;
    font-size: 16px;
    margin-bottom:8px;
}


/*Enquiry Settings*/
.section-enquiry-settings h6{font-weight:500}
.section-enquiry-settings .custom-card-enquiry {
    background-color: var(--primary-bg-subtle);
    box-shadow: none;
    border: 1px solid var(--primary-border-subtle);
}

.card.custom-card-waves {background-image: var(--svg-waves-user);background-size: cover; border-radius:15px;border:0px!important;}
.card.custom-card-waves p {font-size:16px; font-weight:500; color:white}

/*form controls with floating labels*/

.ascora-blue .form-label-group {position: relative;margin-bottom: 1rem;}

.ascora-blue .form-label-group input{border:2px solid var(--enquiry-form-border-default); font-size:16px; background-color:var(--enquiry-form-input-background); border-radius:8px!important; outline:none!important;box-shadow:none}
.ascora-blue .form-label-group input:focus{border:2px solid var(--enquiry-form-border-selection); background-color:var(--enquiry-form-input-background);outline:none!important;box-shadow:none}
.ascora-blue .form-label-group label.control-label{font-size:14px; line-height:14px; font-weight:500; color:var(--enquiry-form-input-label); margin-top:3px}

.ascora-blue .form-label-group input,
.ascora-blue .form-label-group > label {height: 55px;padding: .75rem;}

.ascora-blue .form-label-group > label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0; /* Override default `<label>` margin */
    line-height: 1.5;
    color: #495057;
    pointer-events: none;
    cursor: text; /* Match the input under the label */
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
}

.ascora-blue .form-label-group input::-webkit-input-placeholder {color: transparent;}
.ascora-blue .form-label-group input::-moz-placeholder {color: transparent;}
.ascora-blue .form-label-group input:-ms-input-placeholder {color: transparent;}
.ascora-blue .form-label-group input::-ms-input-placeholder {color: transparent;}
.ascora-blue .form-label-group input::placeholder {color: transparent;}

.ascora-blue .form-label-group input {padding-top: 22px;padding-bottom: 3px;}
.ascora-blue .form-label-group input ~ label {padding-top: 5px;padding-bottom: 3px;font-size: 12px;}

#gridStockLocation input{
    width:20px;
    height:20px;
}

.grouped-calendar-job-grid .k-table-tbody {
    font-size: 12.8px !important;
}

.ascora-blue .k-grid#auditLogGrid .k-table-td,
.ascora-blue .k-grid#invoicesJobTable .k-table-td {
    padding:10px;
}

#paymentWindow #paymentDetailPanel .alert h4{font-size:14px}
#paymentWindow .help-block {margin:0px;}

.k-upload .k-file-icon-wrapper, 
.k-upload .k-file-name {color:var(--text-color)}

#Wizard_JobDetails h3.box-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--heading-accent-color-3);
}

#Wizard_CustomerCreate h3.box-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--heading-accent-color-3);
}

.slide-in {
    z-index: 10;
    position: absolute;
    overflow: hidden;
}

.slide-in.from-left {left: 0;}
.slide-in.from-right {right: 0;}

.slide-in-content {
    padding: 5px 12px 5px 30px;
    background: #eee;
    transition: transform .5s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    height:100%;
    border-radius:6px;
}

.slide-in-content p{
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    font-weight: 500;
    margin-top: 6px;
    margin-bottom: 6px;
}

.slide-in.from-left .slide-in-content {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.slide-in.from-right .slide-in-content {
    transform: translateX(90%);
    -webkit-transform: translateX(90%);
}

.slide-in.show .slide-in-content {
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

#slide-in-basics {
    z-index:1000;
    position:fixed;
    top:55px;
    height:90px;
}

#slide-in-basics #toggle{
    display:flex;
    position: absolute;
    z-index: 10;
    width:20px;
    height:100%;
    justify-content:center;
    align-items:center;
    background-color:var(--accent1-80);
    border-radius:0px 6px 6px 0px;
}

#slide-in-basics #toggle .fa{
    color:#ffffff;
}

div[data-asc-role="details-section"] .box-audit-log {
    padding: 0 10px 10px 10px !important
}

div[data-asc-role="details-section"] > .box-body .box-audit-log {
    padding: 0px !important
}

#extjsScheduler #displayedDateRange {
    font-family: var(--modern-font-body);
    font-weight: 400;
    font-size: 18px;
    margin-left: 10px !important;
}

/*Make tooltip visible on certain grids*/
/*applying overflow hidden to k-grid-header-wrap causes the grid headers to remain stationary when scrolling*/
/*may need a javascript solution to work in all scenarios*/

/* 2025 - Trevor - This is causing text to overlap, now that overflow is hidden, bootstrap tooltips should be replaced with kendo tooltips*/

/*#gridJobClaimSections.k-grid .k-grid-header-wrap,
#gridJobClaimSections.k-grid .k-grid-header-wrap .k-table-row,
#gridJobClaimSections.k-grid .k-grid-header-wrap .k-table-row .k-header,
#gridJobClaimSections.k-grid .k-grid-header-wrap .k-table-row .k-header .k-cell-inner,
#gridJobClaimSections.k-grid .k-grid-header-wrap .k-table-row .k-header .k-cell-inner .k-link {
    overflow: visible;
}

#labourBreakDownGrid.k-grid .k-table-row .k-header,
#labourBreakDownGrid.k-grid .k-table-row .k-header .k-cell-inner,
#labourBreakDownGrid.k-grid .k-table-row .k-header .k-cell-inner .k-link {
    overflow: visible;
}*/

/*modern ascora table*/

.table-orientation-module-tasks{border-collapse: separate;border-spacing:0 5px;}
.table-orientation-module-tasks tbody tr > td {padding-top:15px; padding-bottom:15px;}
.table-orientation-module-tasks .fa,
.table-orientation-module-tasks .far,
.table-orientation-module-tasks .fad{font-size:22px;}
.table-orientation-module-tasks thead tr > th {border-top: var(--grid-border-color) 1px solid;border-bottom: var(--grid-border-color) 1px solid;}
.table-orientation-module-tasks tbody tr > td {border-top: var(--grid-border-color-light) 1px solid;border-bottom: var(--grid-border-color-light) 1px solid;}
.table-orientation-module-tasks tbody tr td {background-color: #F9FAFD;}
.table-orientation-module-tasks tbody tr.selected td{background-color: var(--grid-selected-row-color)}
.table-orientation-module-tasks tbody tr:hover td{background-color: var(--grid-selected-row-color)}
.table-orientation-module-tasks tbody tr:hover {background-color:transparent}
.table-orientation-module-tasks tr td:first-child {border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-left: var(--grid-border-color) 1px solid}
.table-orientation-module-tasks tr td:last-child {border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-right: var(--grid-border-color) 1px solid}

.table-orientation-module-tasks thead tr th {background-color: var(--kendo-table-header)}
.table-orientation-module-tasks thead tr th:first-child {border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-left: var(--grid-border-color) 1px solid}
.table-orientation-module-tasks thead tr th:last-child {border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-right: var(--grid-border-color) 1px solid}

#orientationModuleDetails h3{color:#9f5fe6}
#orientationModuleDetails .card-training-video {box-shadow:5px 5px 6px -1px rgb(163, 172, 206)}

#SelectOrientationModulesWindow .list-group {display: flex;flex-wrap: wrap;flex-direction: row;gap: 10px;}
#SelectOrientationModulesWindow .list-group .list-group-item{
    width:calc(25% - 10px);
    background-color: #F9FAFD;
    border:var(--grid-border-color) 1px solid;
    border-radius: 10px;
}
#SelectOrientationModulesWindow .list-group .list-group-item .checkbox_anim_sm + label{
    cursor:pointer
}


.menu-modules {border-radius: 10px;overflow: hidden}
.menu-modules.nav-pills .nav-link.active,
.menu-modules.nav-pills .nav-link:hover,
.menu-modules.nav-pills .show > .nav-link {
    background-color: rgb(0, 170, 255);
    color:#ffffff;
}
.menu-modules.nav-pills .nav-link {
    border:0px;
}

/*Custom Fields make options full width*/
#editFieldWindow .k-chip {
    width:100%
}

/*Bootstrap 4 Custom Migrate*/
.bs4-custom-migrate .align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}
.bs4-custom-migrate .form-row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -5px;margin-left: -5px;}
.bs4-custom-migrate .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.bs4-custom-migrate .col {-ms-flex-preferred-size: 0;flex-basis: 0;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}

.bs4-custom-migrate .form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}

.bs4-custom-migrate .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
}

.bs4-custom-migrate .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
}

.bs4-custom-migrate .form-inline .form-control-plaintext {
    display: block;
    width: 100%;
    padding: 0.375rem 0;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

.bs4-custom-migrate .col-form-label {padding-top: calc(0.375rem + 1px);padding-bottom: calc(0.375rem + 1px);margin-bottom: 0;font-size: inherit;line-height: 1.5;}

.bs4-custom-migrate .col,
.bs4-custom-migrate .col-1,
.bs4-custom-migrate .col-10,
.bs4-custom-migrate .col-11,
.bs4-custom-migrate .col-12,
.bs4-custom-migrate .col-2,
.bs4-custom-migrate .col-3,
.bs4-custom-migrate .col-4,
.bs4-custom-migrate .col-5,
.bs4-custom-migrate .col-6,
.bs4-custom-migrate .col-7,
.bs4-custom-migrate .col-8,
.bs4-custom-migrate .col-9,
.bs4-custom-migrate .col-auto,
.bs4-custom-migrate .col-lg,
.bs4-custom-migrate .col-lg-1,
.bs4-custom-migrate .col-lg-10,
.bs4-custom-migrate .col-lg-11,
.bs4-custom-migrate .col-lg-12,
.bs4-custom-migrate .col-lg-2,
.bs4-custom-migrate .col-lg-3,
.bs4-custom-migrate .col-lg-4,
.bs4-custom-migrate .col-lg-5,
.bs4-custom-migrate .col-lg-6,
.bs4-custom-migrate .col-lg-7,
.bs4-custom-migrate .col-lg-8,
.bs4-custom-migrate .col-lg-9,
.bs4-custom-migrate .col-lg-auto,
.bs4-custom-migrate .col-md,
.bs4-custom-migrate .col-md-1,
.bs4-custom-migrate .col-md-10,
.bs4-custom-migrate .col-md-11,
.bs4-custom-migrate .col-md-12,
.bs4-custom-migrate .col-md-2,
.bs4-custom-migrate .col-md-3,
.bs4-custom-migrate .col-md-4,
.bs4-custom-migrate .col-md-5,
.bs4-custom-migrate .col-md-6,
.bs4-custom-migrate .col-md-7,
.bs4-custom-migrate .col-md-8,
.bs4-custom-migrate .col-md-9,
.bs4-custom-migrate .col-md-auto,
.bs4-custom-migrate .col-sm,
.bs4-custom-migrate .col-sm-1,
.bs4-custom-migrate .col-sm-10,
.bs4-custom-migrate .col-sm-11,
.bs4-custom-migrate .col-sm-12,
.bs4-custom-migrate .col-sm-2,
.bs4-custom-migrate .col-sm-3,
.bs4-custom-migrate .col-sm-4,
.bs4-custom-migrate .col-sm-5,
.bs4-custom-migrate .col-sm-6,
.bs4-custom-migrate .col-sm-7,
.bs4-custom-migrate .col-sm-8,
.bs4-custom-migrate .col-sm-9,
.bs4-custom-migrate .col-sm-auto,
.bs4-custom-migrate .col-xl,
.bs4-custom-migrate .col-xl-1,
.bs4-custom-migrate .col-xl-10,
.bs4-custom-migrate .col-xl-11,
.bs4-custom-migrate .col-xl-12,
.bs4-custom-migrate .col-xl-2,
.bs4-custom-migrate .col-xl-3,
.bs4-custom-migrate .col-xl-4,
.bs4-custom-migrate .col-xl-5,
.bs4-custom-migrate .col-xl-6,
.bs4-custom-migrate .col-xl-7,
.bs4-custom-migrate .col-xl-8,
.bs4-custom-migrate .col-xl-9,
.bs4-custom-migrate .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.bs4-custom-migrate .col {flex-basis: 0;flex-grow: 1;max-width: 100%;}
.bs4-custom-migrate .align-self-start {align-self: flex-start !important;}
.bs4-custom-migrate .justify-content-end {justify-content: flex-end !important;}

.bs4-custom-migrate .col-auto {flex: 0 0 auto;width: auto;max-width: 100%;}
.bs4-custom-migrate .col-1 {flex: 0 0 8.33333333%;max-width: 8.33333333%;}
.bs4-custom-migrate .col-2 {flex: 0 0 16.66666667%;max-width: 16.66666667%;}
.bs4-custom-migrate .col-3 {flex: 0 0 25%;max-width: 25%;}
.bs4-custom-migrate .col-4 {flex: 0 0 33.33333333%;max-width: 33.33333333%;}
.bs4-custom-migrate .col-5 {flex: 0 0 41.66666667%;max-width: 41.66666667%;}
.bs4-custom-migrate .col-6 {flex: 0 0 50%;max-width: 50%;}
.bs4-custom-migrate .col-7 {flex: 0 0 58.33333333%;max-width: 58.33333333%;}
.bs4-custom-migrate .col-8 {flex: 0 0 66.66666667%;max-width: 66.66666667%;}
.bs4-custom-migrate .col-9 {flex: 0 0 75%;max-width: 75%;}
.bs4-custom-migrate .col-10 {flex: 0 0 83.33333333%;max-width: 83.33333333%;}
.bs4-custom-migrate .col-11 {flex: 0 0 91.66666667%;max-width: 91.66666667%;}
.bs4-custom-migrate .col-12 {flex: 0 0 100%;max-width: 100%;}

.bs4-custom-migrate .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.bs4-custom-migrate .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.bs4-custom-migrate .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

/* two-factor-authentication */
#add-sign-in-method-modal .btn-2fa-choice{padding:20px 20px 20px 60px; border-radius:6px; position:relative}
#add-sign-in-method-modal .btn-2fa-choice::before {
    content: "";
    position: absolute;
    left: 18px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 2px solid #c5c9d2;
    z-index: 2;
    top: 50%;
    transition: .3s all ease-in-out;
    color: white;
    font-size: 25px;
    text-align: center;
    line-height: 25px;
    font-weight: 500;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}


#add-sign-in-method-modal .btn-2fa-choice:hover::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    border: 2px solid white;
}

.video-wizard-2fa{
    border-radius:30px;
    box-shadow:3px 3px 12px -3px rgba(0, 25, 73, 0.20); /*Widgets*/
    margin:10px 10px 15px 10px;
}

/*custom-floating-action-bar 2025 Trevor*/
/* .asc-grid-bulk-bar is the same bar under a name that only its own script selects. Screens that embed
   a grid tab inside another screen use it, because the older list scripts still reach for
   $(".custom-floating-action-bar-wrapper") across the whole document and would drive both. */
.custom-floating-action-bar-wrapper,
.asc-grid-bulk-bar {
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 10000;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display:none;
}

@keyframes bulkActionBarContainerSlideUp {
    from {bottom: -5%;opacity: 0;}
    to {bottom: 5%;opacity: 1;}
}

.custom-floating-action-bar-wrapper.show,
.asc-grid-bulk-bar.show {
    animation: bulkActionBarContainerSlideUp 0.5s ease forwards; /* Slide in animation */
}

.custom-floating-action-bar {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 20px -3px rgba(0, 25, 73, 0.60);
    overflow:hidden;
    width:100%;
    display:flex;
}

.custom-floating-action-bar .batch-actions-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content:center;
    align-items:center;
    cursor: pointer;
    margin-left:10px;
    margin-right:10px;
    /*max-width: 100px;*/
    /*word-wrap: break-word;*/
    width: 100px;
    line-height:18px;
    border:0px;
    background-color:transparent;
}

.custom-floating-action-bar .batch-actions-item{color:#333;}
.custom-floating-action-bar .batch-actions-item:hover{color:var(--primary-color)}

.custom-floating-action-bar .batch-action-content {
    display: flex;
    padding: 5px;
    /*flex-wrap: wrap;*/
}

.custom-floating-action-bar .batch-actions-item .item-text{
    font-size:14px;
    line-height:18px;
    white-space: normal;
}

.custom-floating-action-bar .batch-actions-item .fa,
.custom-floating-action-bar .batch-actions-item .fal
{
    font-size:18px;
    margin:0px;
    padding:0px;
    margin-bottom:5px;
}

.custom-floating-action-bar a[id*="btnBulkDelete"]{color:#dc3545;}
.custom-floating-action-bar a[id*="btnBulkDelete"]:hover{color:#b62a38;}

.custom-floating-action-bar .batch-actions-item i {
    pointer-events: none !important;
}

.custom-floating-action-bar .batch-action-num-box{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width:70px;
    min-height:70px;
    height:100%;
    background-color:blue;
    color:#ffffff;
    font-size:28px;
    background-color: var(--accent-color-1) !important;
    line-height:28px;
}

.custom-floating-action-bar .batch-action-num-box .batch-action-num-label {
    font-size:14px;
    line-height:20px;
}

@keyframes bulkBarBtnFadeAndSlideAnim {
    0% {transform: scale(1) translateY(20px);opacity: 0;}
    50% {opacity: 0.5;}
    100% {opacity: 1;transform: scale(1) translateY(0);}
}

.bulkBarBtnFadeAndSlideAnim {
    opacity: 0;
    transform: scale(1) translateY(20px);
    animation: bulkBarBtnFadeAndSlideAnim 0.3s cubic-bezier(0, 0, 0.4, 1) forwards;
}

.bulkBarBtnFadeAndSlideAnim:nth-child(1) {animation-delay: 200ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(2) {animation-delay: 240ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(3) {animation-delay: 280ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(4) {animation-delay: 320ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(5) {animation-delay: 360ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(6) {animation-delay: 400ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(7) {animation-delay: 440ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(8) {animation-delay: 480ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(9) {animation-delay: 520ms}
.bulkBarBtnFadeAndSlideAnim:nth-child(10) {animation-delay:560ms}

/* Scaling for smaller screens */
@media (max-width: 1200px) {.custom-floating-action-bar {transform: scale(0.9);transform-origin: center;}}
@media (max-width: 992px) {.custom-floating-action-bar {transform: scale(0.7);}}
@media (max-width: 768px) {.custom-floating-action-bar {transform: scale(0.6);}}
@media (max-width: 576px) {.custom-floating-action-bar {transform: scale(0.5);}}

.info-box .info-box-icon .custom-status-indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: RGBA(255,255,255, 0.5);
    padding: 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-box .info-box-icon .custom-status-indicator .custom-status-bar-color {
    height:5px; border-radius:80px; width:100%
}

/*use bulk-action-grid-override when a bulk action dropdown is within a grid*/

.ascora-blue .bulk-action-grid-override .dropdown-menu > li > a {
    font-weight: 400!important;
    word-wrap: normal!important;
    white-space: normal!important;
    padding: 8px 10px!important;
    color: #ffffff!important;
    cursor: pointer!important;
    padding-left: 38px!important;
}

.ascora-blue .k-grid .k-grid-content tr .bulk-action-grid-override .dropdown-menu a,
.ascora-blue .k-grid .k-grid-content tr .bulk-action-grid-override .dropdown-menu .btn,
.ascora-blue .k-grid .k-grid-content tr:hover .bulk-action-grid-override .dropdown-menu .btn-primary {
    background-color: white !important;
    color: var(--text-color) !important;
}

.ascora-blue .k-grid .k-grid-content tr .bulk-action-grid-override .dropdown-menu a:hover,
.ascora-blue .k-grid .k-grid-content tr .bulk-action-grid-override .dropdown-menu .btn:hover,
.ascora-blue .k-grid .k-grid-content tr .bulk-action-grid-override .dropdown-menu .btn-primary:hover {
    background-color: var(--interactive-element-hover-color)!important;
    background-image: none!important;
}

/*Shared Badge*/
.shared-badge-blue {
    display: inline-flex;
    background-color: transparent;
    padding: 0px;
}

.shared-badge-blue .shared-badge-base {
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background-color: #007ee6;
    border-radius: 60px;
    display: inline-flex;
    color: white;
    font-weight: 500;
    font-size: 14px;
    line-height:14px;
    font-family: "Inter", Helvetica;
}

.box-ascora.box_billing_details {
    border:0px!important;
    box-shadow:none!important;
}

/* Created / Modified metadata footer - used inside .box-footer.box_status_bar
   on detail screens (Customer, Enquiry, Quote, Job, Invoice, Supplier Invoice)
   to show record provenance in a compact, lightly styled row */
.entity-meta-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 10px 16px;
    font-size: 13px;
    color: #5a6a72;
}
.entity-meta-footer .entity-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.entity-meta-footer .entity-meta-item i {
    color: #8a96a0;
    font-size: 14px;
}
.entity-meta-footer .entity-meta-label {
    font-weight: 600;
    color: #445058;
    letter-spacing: 0.2px;
}
.entity-meta-footer .entity-meta-by {
    color: #8a96a0;
    font-style: italic;
    margin: 0 2px;
}
.entity-meta-footer .entity-meta-divider {
    width: 1px;
    height: 14px;
    background-color: #d0d7dc;
}

/* Modern popover tooltip with the info icon*/
.tooltip-info-modern {
    font-family: var(--modern-font-body);
    background-color: transparent;
    font-size: 16px;
    padding: 0px;
    border: 0px;
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    vertical-align: middle;
}

.tooltip-info-modern:hover {
    color: #8462ff;
}

/* Modern tooltips: Bootstrap's .tooltip-inner defaults to black; the modern theme
   renders them white (matching the info popovers used on Accounts Integration). */
.tooltip .tooltip-inner {
    background-color: #ffffff !important;
    color: #2A363C !important;
    border: 1px solid #dbe1e8;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    text-align: left;
}
.tooltip.top .tooltip-arrow,
.tooltip.bs-tooltip-top .arrow::before { border-top-color: #ffffff !important; }
.tooltip.bottom .tooltip-arrow,
.tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: #ffffff !important; }
.tooltip.left .tooltip-arrow,
.tooltip.bs-tooltip-left .arrow::before { border-left-color: #ffffff !important; }
.tooltip.right .tooltip-arrow,
.tooltip.bs-tooltip-right .arrow::before { border-right-color: #ffffff !important; }

/* Custom Kendo Popover */
.k-popover {}
.k-popover .k-popover-header {
    font-weight: 600;
    padding-bottom: 0px;
    border-bottom: 0px;
}

.k-popover .k-popover-body {

}

/* custom ascora kendo tabstrip */
.custom-ascora-tabstrip .k-tabstrip-items-wrapper {overflow:hidden}
.custom-ascora-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items {background-color:#ffffff}
.custom-ascora-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item {background-color:#ffffff}
.custom-ascora-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active {
    --shadow-color: 0deg 0% 78%;
    border-top: 5px solid var(--accent-color-1);
    border-radius: var(--nav-radius);
    box-shadow: 0.1px -0.1px 0.2px hsl(var(--shadow-color) / 0.08), 2.2px -4.1px 5.1px -0.5px hsl(var(--shadow-color) / 0.39);
    height: 52px;
}
.custom-ascora-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active .k-link{
    font-weight: 500;
    border-left: 1px solid #d2d6de;
    border-right: 1px solid #d2d6de;
    color: var(--accent-color-1);
}

/* AI Editor 2025 - Trevor*/

[data-role="aiprompt"] {display:flex; flex-direction:column}
[data-role="aiprompt"] .k-prompt-content {flex-grow:1}
[data-role="aiprompt"] .k-prompt-footer .k-actions{margin-top:0px;}

[data-role="aiprompt"] .k-prompt-expander-content {margin-top:5px;}

[data-role="aiprompt"] .k-toolbar .k-button {
    border-radius: 3px;
}

[data-role="aiprompt"] .k-toolbar .k-button.k-selected {
    border-radius: 3px;
    background-color:#10a7f2!important;
    color:#ffffff;
}

[data-role="aiprompt"] .k-toolbar .k-button.k-selected::before {
    background: none !important;
}

[data-role="aiprompt"] [data-role="togglebutton"] {
    border-radius: 3px;
    font-weight:500;
}

[data-role="aiprompt"] [data-role="togglebutton"]:hover {
    border-radius: 3px;
    background-color: #cbe5fe !important;
}

[data-role="aiprompt"] [data-role="togglebutton"]:hover::before  {
    border-radius: 3px;
    background-color: #cbe5fe !important;
}

[data-role="aiprompt"] [data-role="togglebutton"].k-selected {
    border-radius: 3px;
    background-color: #cbe5fe !important;
    color: var(--primary-color);
}

[data-role="aiprompt"] [data-role="togglebutton"].k-selected::before {
    background: none !important;
}

[data-role="aiprompt"] .k-prompt-content {
    padding:10px;
}

[data-role="aiprompt"] .k-input-separator {
    display: none !important;
}

[data-role="aiprompt"] + .k-splitbar .k-collapse-prev .k-svg-icon.k-icon-xs,
[data-role="aiprompt"] + .k-splitbar .k-expand-prev .k-svg-icon.k-icon-xs {
    width: 18px;
    height: 18px;
}

[data-role="aiprompt"] .k-prompt-suggestion {
    background-color: #cbe5fe !important;
    color: var(--primary-color);
    border-radius: 20px;
    cursor: pointer;
    padding: 5px 10px;
    margin-bottom:5px;
    font-size:12px;
}

[data-role="aiprompt"] .k-prompt-suggestion:hover {
    background-color: #cbe5fe !important;
    color: var(--primary-color);
    outline: solid 2px var(--primary-color);
    border-radius: 20px;
    padding-left: 10px;
    cursor: pointer;
}


.k-editor .k-editor-toolbar .k-button-toggle-ai-prompt {
    height: 28px !important;
    width: 28px !important;
}

[data-role="aiprompt"].k-collapsed + .k-splitbar {
    border-radius: 10px 0px 0px 10px
}

[data-role="aiprompt"] .k-prompt-content .k-prompt-view .k-textarea{
    border:0px;
}

[data-role="aiprompt"] .k-prompt-header .k-toolbar {
    border-color:#cdd8e7;
}

[data-role="aiprompt"] .k-prompt-content {
    background-color: #f3f8ff;
    background-color: #f8f9fa;
}

[data-role="aiprompt"] .k-input-suffix {
    background-color: #f3f8ff;
    background-color: #f8f9fa;
}

[data-role="aiprompt"] .k-prompt-footer .k-actions {
    border-top: 1px solid #cdd8e7;
}

.k-splitter {
    border-radius: 10px
}

.k-splitbar {
    /*background-color: #cdd8e7;*/
    /*border-left:1px solid #c5c4c9;*/
}


/* AI Prompt Popup - Trevor*/
/* Quote Inclusion Exclusions*/

#aiGroupPrompt .k-prompt-suggestion {
    background-color: #cbe5fe !important;
    color: var(--primary-color);
    border-radius: 20px;
    padding-left: 10px;
    cursor: pointer;
    line-height: 20px;
}

#aiGroupPrompt .k-prompt-suggestion:hover {
    background-color: #cbe5fe !important;
    color: var(--primary-color);
    outline: solid 2px var(--primary-color);
    border-radius: 20px;
    padding-left: 10px;
    cursor: pointer;
}

#aiGroupPopup .k-prompt-content .k-prompt-view .k-textarea textarea{
    height: 118px;
}

#aiGroupPopup .k-prompt-content .k-prompt-view .k-textarea{
    border: 0px;
}

#aiGroupPopup .k-prompt-content {
    background-color: #f3f8ff;
    background-color: #f8f9fa;
}

#aiGroupPopup .k-prompt-header .k-toolbar {
    border-color: #cdd8e7;
}

#aiGroupPopup .k-prompt-footer .k-actions {
    margin: 0px;
    border-top: 1px solid #cdd8e7;
}

#aiGroupPopup .k-prompt-expander-content {
    margin-top: 5px;
}

#aiGroupPopup .k-prompt-expander .k-button:hover::before {
    opacity:0.1;
}


/* Checklists*/
#aiPrompt .k-prompt-suggestion {
    padding: 5px 10px;
    margin-bottom: 5px;
    line-height:20px;
}

#aiPrompt .k-prompt-suggestion {
    background-color: #cbe5fe !important;
    color: var(--primary-color);
    border-radius: 20px;
    padding-left: 10px;
    cursor: pointer;
    font-size:12px;
}

#aiPrompt .k-prompt-suggestion:hover {
    background-color: #cbe5fe !important;
    color: var(--primary-color);
    outline: solid 2px var(--primary-color);
    border-radius: 20px;
    padding-left: 10px;
    cursor: pointer;
}

#aiPrompt .k-prompt-content .k-prompt-view .k-textarea textarea {
    height: 118px;
}

#aiPrompt .k-prompt-content .k-prompt-view .k-textarea{
    border:0px;
}

#aiPrompt .k-prompt-content {
    background-color: #f3f8ff;
    background-color: #f8f9fa;
}

#aiPrompt .k-prompt-header .k-toolbar {
    border-color: #cdd8e7;
}

#aiPrompt .k-prompt-footer .k-actions {
    margin: 0px;
    border-top: 1px solid #cdd8e7;
}

#aiPrompt .k-prompt-expander-content {
    margin-top:5px;
}

#aiPrompt .k-prompt-expander .k-button:hover::before {
    opacity: 0.1;
}

.k-popup {border:0px;}

.k-popup .k-prompt-view .k-textbox {
    padding: 5px;
}

.k-popup .k-input-prefix .k-button {
    /*background: linear-gradient(90deg, #4B5AFA 0%, #AC58FF 100%)!important;*/
    /*color:#ffffff!important;*/
    background-color: #f4f4f4 !important;
    color: #444 !important;
    border-color: #ddd !important;
    padding: .375rem;
}

.k-popup .k-input-suffix .k-button {
    background-color: #f4f4f4!important;
    color: #444!important;
    border-color: #ddd!important;
    padding: .375rem;
}

/* Trevor 190925 */
#eventSchedulerModal .btn-group > .btn{border-radius:0px;}
#eventSchedulerModal .btn-group > .btn:first-child {border-radius: 3px 0px 0px 3px;}
#eventSchedulerModal .btn-group > .btn:last-child {border-radius: 0px 3px 3px 0px;}

#eventSchedulerModal .tooltip-info-modern {
    height:auto;
    line-height:16px;
}

#NewCustomerDetails {}

#NewCustomerDetails .bootstrap4-override .col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

/* Set min height to asc load window*/
#asc-load-kendo-window {min-height: 500px;}


/* Solution to fix the styling for the setting the columns on grids*/
/* Only k-menu-expand-arrow seems to trigger the click event so this has been brought forward with z-index*/
.asc-custom-grid-picker-launcher {
    display: flex;
    flex-direction: row;
}

.asc-custom-grid-picker-launcher .k-menu-group {width:100%}
.asc-custom-grid-picker-launcher .k-menu-group .k-menu-link-text {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asc-custom-grid-picker-launcher .k-menu-expand-arrow{
    z-index:100;
    width:100%;
    display:flex;
    justify-content:end;
    cursor:pointer
}

.asc-custom-grid-picker-launcher .k-menu-expand-arrow .k-icon{ 
    margin-right: 14px;
}

.asc-custom-grid-picker-launcher .k-menu-expand-arrow:hover + .k-menu-group {
    background-color: #f5f5f5;
    color: #000;
}

/* Validation Alignment*/
/* Eventually needs to be applied site wide */
/* Not all asterisk are nested in the label*/
/* Needs to be compatible with Bootstrap 3 & 4 (control-label vs col-form-label)*/


.control-label .glyph-required,
.col-form-label .glyph-required {
    position:absolute;
    right:5px;
}

#editBookingWindow .control-label tooltip-info-modern,
#editBookingWindow .col-form-label .tooltip-info-modern {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

/* Only implemented this way on the job template screen*/
.control-label.required-field::after {
    position: absolute;
    right: 5px;
}

.validation-summary-errors > span:first-child {
    font-size: 15px !important;
    line-height: 15px;
    margin-bottom: 5px;
    font-weight: 400;
    display:block;
    margin-bottom:5px;
}

.validation-summary-errors ul {
    padding-left:20px;
    list-style:none;
}

.validation-summary-errors ul li {
    font-size: 0.95rem;
    color: rgba(255,255,255,.8) !important;
    line-height: 15px;
    font-weight:normal;
}

/* The way validation is implemented isn't consistent site wide*/
/* Was easier to wrap the validation for this scenario */
/* New Customer Type and New Lead Source uses this*/

.custom-validation-summary .alert.alert-error .alert-heading {
    font-size: 15px !important;
    line-height: 15px;
    margin-bottom: 5px;
    font-weight: 400;
    margin-bottom: 5px;
}

.custom-validation-summary .alert.alert-error ul li {
    font-size: 0.95rem;
    color: rgba(255,255,255,.8) !important;
    line-height: 15px;
    font-weight: normal;
}

.field-validation-valid {
    font-size: 12px;
    color:rgb(220, 53, 69);
}

/* Bulk action styling 171125*/
.ascora-blue .bulk_action_group .dropdown-menu > li {
    display: flex;
    flex-direction: column;
}

.ascora-blue .bulk_action_group .dropdown-menu > li .btn {margin:0px;}

/* dropdown divider for bulk action dropdown menu*/
.dropdown-divider {
    overflow: hidden;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    opacity: 1;
    margin: 5px 0;
}

/* Make delete buttons red in bulk action dropdown menu*/
.bulk_action_group .dropdown-menu .btn.btn-danger {
    color: var(--button-danger-bg) !important;
}

/*86d18d51j - Hover icon for job number on job list*/

/*Hide by default*/
.ascora-blue .k-grid.k-grid-md .k-table .k-table-tbody .k-table-row.k-master-row .icon-row-hover-open {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.ascora-blue .k-grid.k-grid-md .k-table .k-table-tbody .k-table-row.k-master-row:hover .icon-row-hover-open {
    opacity: 1;
}

/* Trevor 2025 - 86d12jjgm */
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

/* Remove caret icon from bulk action group*/
.bulk_action_group .caret {
    display:none
}

/*Job Status Colours*/
.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-new-span {
    border: 1px solid rgba(239, 108, 0, 1.0);
    background-color: rgba(239, 108, 0, 0.2);
    color: rgba(239, 108, 0, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-booked-span {
    border: 1px solid rgba(76, 175, 80, 1.0);
    background-color: rgba(76, 175, 80, 0.2);
    color: rgba(76, 175, 80, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-notcompleted-span {
    border: 1px solid rgba(171, 71, 188, 1.0);
    background-color: rgba(171, 71, 188, 0.2);
    color: rgba(171, 71, 188, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-unscheduled-span {
    border: 1px solid rgba(239, 83, 80, 1.0);
    background-color: rgba(239, 83, 80, 0.2);
    color: rgba(239, 83, 80, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-inprogress-span {
    border: 1px solid rgba(3, 169, 244, 1.0);
    background-color: rgba(3, 169, 244, 0.2);
    color: rgba(3, 169, 244, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-completed-span {
    border: 1px solid rgba(69, 90, 100, 1.0);
    background-color: rgba(69, 90, 100, 1.0);
    color: rgba(255, 255, 255, 1.0);
}

/*Quote Status Colours*/
.ascora-blue .k-grid .k-table-row .k-table-td span.quote-status-sent-span {
    border: 1px solid rgba(69, 90, 100, 1.0);
    background-color: rgba(69, 90, 100, 0.2);
    color: rgba(69, 90, 100, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.quote-status-inprogress-span {
    border: 1px solid rgba(0, 171, 169, 1.0);
    background-color: rgba(0, 171, 169, 0.2);
    color: rgba(0, 171, 169, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.quote-status-won-span {
    border: 1px solid rgba(67, 160, 71, 1.0);
    background-color: rgba(67, 160, 71, 0.2);
    color: rgba(67, 160, 71, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.quote-status-lost-span {
    border: 1px solid rgba(244, 67, 54, 1.0);
    background-color: rgba(244, 67, 54, 0.2);
    color: rgba(244, 67, 54, 1.0);
}

/* Accepted, Declined and Cancelled had no pill here, so the generic white status text above left them blank in the list.
   Accepted is indigo so it cannot be mistaken for Won; Declined matches its Quote header bubble. */
.ascora-blue .k-grid .k-table-row .k-table-td span.quote-status-accepted-span {
    border: 1px solid rgba(57, 73, 171, 1.0);
    background-color: rgba(57, 73, 171, 0.2);
    color: rgba(57, 73, 171, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.quote-status-declined-span {
    border: 1px solid rgba(173, 20, 87, 1.0);
    background-color: rgba(173, 20, 87, 0.2);
    color: rgba(173, 20, 87, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.quote-status-cancelled-span {
    border: 1px solid rgba(154, 74, 0, 1.0);
    background-color: rgba(154, 74, 0, 0.2);
    color: rgba(154, 74, 0, 1.0);
}

/* Task status pills - Option A design (light bg + contrasting text +
   small leading dot). These override the legacy saturated bg + border
   styling. Higher specificity (.ascora-blue chain) and !important so
   they always win regardless of whether task.css is loaded yet. */
.ascora-blue .k-grid .k-table-row .k-table-td span.status-pill,
.ascora-blue .k-grid tr td span.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 9px 3px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Leading dot via ::before pseudo so the pill always has its dot,
   independent of whether the inner <span class="status-pill-dot">
   markup is wrapped/stripped by anything down the rendering path. */
.ascora-blue .k-grid .k-table-row .k-table-td span.status-pill::before,
.ascora-blue .k-grid tr td span.status-pill::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    flex: 0 0 6px !important;
    display: inline-block !important;
    align-self: center;
}

/* Hide the inner-span dot if present so we don't double-render */
.ascora-blue .k-grid .k-table-row .k-table-td span.status-pill .status-pill-dot,
.ascora-blue .k-grid tr td span.status-pill .status-pill-dot {
    display: none !important;
}

.ascora-blue .k-grid .k-table-row .k-table-td span.status-completed-span,
.ascora-blue .k-grid tr td span.status-completed-span {
    background-color: #e3f5ec !important;
    color: #1d8f5a !important;
    border: 0 !important;
}

.ascora-blue .k-grid .k-table-row .k-table-td span.status-overdue-span,
.ascora-blue .k-grid tr td span.status-overdue-span {
    background-color: #fbe5e3 !important;
    color: #c4362c !important;
    border: 0 !important;
}

.ascora-blue .k-grid .k-table-row .k-table-td span.status-notscheduled-span,
.ascora-blue .k-grid tr td span.status-notscheduled-span {
    background-color: #fdf2dc !important;
    color: #b6791e !important;
    border: 0 !important;
}

.ascora-blue .k-grid .k-table-row .k-table-td span.status-default-span,
.ascora-blue .k-grid tr td span.status-default-span {
    background-color: #e8f4fc !important;
    color: #135f8f !important;
    border: 0 !important;
}

/* Reset the legacy full-cell paint that JS adds to <td> via
   .status-completed/.status-overdue/.status-notscheduled. */
.ascora-blue .k-grid .k-table-td.status-completed,
.ascora-blue .k-grid .k-table-td.status-overdue,
.ascora-blue .k-grid .k-table-td.status-notscheduled,
.ascora-blue .k-grid td.status-completed,
.ascora-blue .k-grid td.status-overdue,
.ascora-blue .k-grid td.status-notscheduled {
    background-color: transparent !important;
}

/* Add Missing*/
.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-closed-span {
    border: 1px solid rgba(69, 90, 100, 1.0);
    background-color: rgba(69, 90, 100, 0.2);
    color: rgba(69, 90, 100, 1.0);
}

.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-readytoinvoice-span {
    border: 1px solid #f39c12;
    background-color: rgba(253, 216, 53, 0.1);
    color: #f39c12;
}

.ascora-blue .k-grid .k-table-row .k-table-td span.job-status-cancelled-span {
    border: 1px solid rgba(239, 108, 0, 1.0);
    background-color: rgba(239, 108, 0, 0.1);
    color: rgba(239, 108, 0, 1.0);
}

/* Trevor 2025 - 86d12jjgm  */
/* Apply to all grids       */
/* 05/12/25                 */

/* Grid Colour Variables*/
.ascora-blue .k-grid,
.ascora-blue .k-grid {
    /* Grid and Table Colors */
    --grid-header-color: #e8f1fa;
    --grid-border-color: #6D99C491;
    --grid-border-color-light: #6D99C454;
    --grid-group-background-color: #f4faff;
    --input-border-color: #cacede;
    --grid-selected-row-color: #CBE5FE;
    --grid-hover-row-color: #CBE5FE;
    --interactive-element-hover-color: #CBE5FE;
    --kendo-table-header: #FFFFFF;
}

.ascora-blue .k-grid .k-table-tbody .k-table-td,
.ascora-blue .k-grid .k-table-thead .k-header,
.ascora-blue .k-grid .k-grid-footer .k-table-td
{
    border-left: 0px;
    border-right: 0px;
}

.ascora-blue .k-grid .k-table-tbody .k-table-td a{
    font-weight: 600;
}

.ascora-blue .k-grid .k-table-alt-row{
    background-color: transparent;
}

.ascora-blue .k-grid .k-table-alt-row:hover{
    background-color: var(--grid-hover-row-color);
    -webkit-box-shadow: var(--elevation-0);
    box-shadow: var(--elevation-0);
}

.ascora-blue .k-grid .k-grid-header .k-header{
    font-weight: 700!important;
}

.ascora-blue .k-grid .k-table-row .k-table-td[class*="status"]{
    background-color: transparent !important;
    border-bottom: var(--grid-border-color-light) 1px solid;
}

/* Status Bubbles*/
.ascora-blue .k-grid .k-table-row .k-table-td span[class*="status"]{
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Clear cell colour*/
.ascora-blue .k-grid .k-table-td[class*="status"]{
    background-color: transparent !important;
}
/* Button Border Radius 8px */
.ascora-blue .k-button.k-grid-save-changes,
.ascora-blue .btn-primary,
.ascora-blue .btn-danger,
.ascora-blue .btn-warning,
.ascora-blue .btn-default,
.ascora-blue .btn-secondary,
.ascora-blue .btn-success,
.ascora-blue .k-button.k-grid-add,
.ascora-blue .k-button.k-grid-edit,
.ascora-blue .k-button.k-grid-View,
.ascora-blue .k-button.k-grid-excel,
.ascora-blue .k-button.k-upload-button {
    border-radius: 8px;
}

.ascora-blue .btn-primary.k-grid-edit,
.ascora-blue .btn-danger.k-grid-delete {
    border-radius: 8px;
}

.ascora-blue .input-group-btn .btn-primary {
    border-radius: .25rem
}

/* Sections Jobs - Right align headings*/
.ascora-blue .k-grid .k-table-th[data-title='Supply Sell'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Labour Sell'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Labour Hours'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Total Sell'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Budget'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Committed'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Actual'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Labour'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Timesheet Hrs'] .k-cell-inner .k-link {
    justify-content: right;
    padding-inline:0.5rem;
}

/* Quote Supplies & Kits - centre the Optional / Group / Type column headings over their centred cells
   (the flex-based Kendo header ignores text-align on the th, so justify the header link instead) */
#suppliesAndKitsGrid.k-grid .k-table-th[data-title='Optional'] .k-cell-inner .k-link,
#suppliesAndKitsGrid.k-grid .k-table-th[data-title='Group'] .k-cell-inner .k-link,
#suppliesAndKitsGrid.k-grid .k-table-th[data-title='Type'] .k-cell-inner .k-link {
    justify-content: center;
}

/* Sections Quotes - Right align headings*/
.ascora-blue .k-grid .k-table-th[data-title='Labour Hrs'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Labour Cost'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Supplies Cost'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Labour Ex Tax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Supplies Ex Tax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Additional Markup'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Amount Ex Tax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Margin'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Profit'] .k-cell-inner .k-link {
    justify-content: right;
    padding-inline: 0.5rem;
}

/* Supply Suppliers tab - Buy Price heading sits over right-aligned money cells */
#SupplierSupplyGrid.k-grid .k-table-th[data-field='BuyPrice'] .k-cell-inner .k-link {
    justify-content: right;
    padding-inline: 0.5rem;
}

/* Job Supplies - Right align headings*/
.ascora-blue .k-grid .k-table-th[data-field='UnitCost'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='Markup'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TotalAmountExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TotalCost'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='ItemSellExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='QuantityInvoiced'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='QuantityUsed'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='Quantity'] .k-cell-inner .k-link
{
    justify-content: right;
    padding-inline: 0.5rem;
}

/* 86d254jcd - Data Misaligned with Column Headers
   These headers are right aligned to sit over right aligned cell values. Header
   position is driven by justify-content here, NOT text-align: the theme renders
   th > .k-cell-inner > .k-link > .k-column-title and both wrappers are flex
   containers declared justify-content:inherit, so a text-align on the th has no
   effect at all. Keep this list to genuinely numeric columns.

   25-07-26 CMS - the date fields were removed from this list. Date columns are
   left aligned across the product now, so their headers must be left too, which
   for a header means simply not appearing here. Removed: StartDate, Start, End,
   CreatedOn, StartTime, EndTime, DateOfLastBooking, DueDate, CheckedIn,
   CheckedOut, PaymentDate, InvoiceDate, DateUploaded, LastModified, Completed,
   DueOn, DateSent, DateRequired, ServerModifiedOn, DateGiven, EndDate,
   ExpiryDate, DateDue, RecurringJobDate, ExpectedDate, CompletionDate. */
.ascora-blue .k-grid .k-table-th[data-field='MinutesIncluded'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='NumberOfHours'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='Rate'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='Hours'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='Amount'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='Surcharge'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TotalPaid'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='UnitCostExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='UnitPriceExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='WeightedAverage'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='StockValue'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TotalRecentlyUsed'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='UnitSellPriceExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TotalAmountIncTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TaxableSupplierInvoiceLinesTotalAmountIncTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='PercentClaimedToDate'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TotalValueClaimedToDateExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='BalanceRemainingExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='ClaimValuePercent'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='ClaimValueExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='ValueClaimedToDatePercent'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='InvoiceAmount'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='RetentionAmountExTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='RetentionTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='HourlyRateExTax'] .k-cell-inner .k-link
{
    justify-content: right;
    padding-inline: 0.5rem;
}

.ascora-blue .k-grid .k-table-th .k-cell-inner .k-link .k-sort-icon{margin:0px}


/* Sections Quotes - Right align headings*/
.ascora-blue .k-grid .k-table-th[data-field='TotalProfit'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='ProfitMargin'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='TotalIncTax'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-field='AmountExTax'] .k-cell-inner .k-link {
    justify-content: right;
    padding-inline: 0.5rem;
}

/* Job invoices tab*/
.ascora-blue .k-grid .k-table-th[data-title='Total Ex Tax Less Retention'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Total Inc Tax Less Retention'] .k-cell-inner .k-link,
.ascora-blue .k-grid .k-table-th[data-title='Outstanding'] .k-cell-inner .k-link {
    justify-content: right;
    padding-inline: 0.5rem;
}

/* Credit Notes grids and the Customer Invoices tab - Right align money headings over their
   right-aligned cells. Scoped per grid rather than by field name alone, unlike the money rules
   above: AdjustedAmountExTax also carries a column on the Invoice Manager Invoices list and the
   Invoiced Supplies report, and BOTH of those set columnMenu, whose absolutely positioned dots
   take no layout space and would then sit on top of a flush-right caption. #invoicesJobTable has
   no column menu at all; #creditNoteGrid (both Credit Notes grids share the id) gets the
   hover-reveal fix below. 'Amount' is already right aligned by the block further up. */
#creditNoteGrid.k-grid .k-table-th[data-field='AmountUsed'] .k-cell-inner .k-link,
#creditNoteGrid.k-grid .k-table-th[data-field='RemainingBalance'] .k-cell-inner .k-link,
#invoicesJobTable.k-grid .k-table-th[data-field='AdjustedAmountExTax'] .k-cell-inner .k-link,
#invoicesJobTable.k-grid .k-table-th[data-field='AdjustedAmountIncTax'] .k-cell-inner .k-link,
#invoicesJobTable.k-grid .k-table-th[data-field='OutstandingAmount'] .k-cell-inner .k-link {
    justify-content: right;
    text-align: right;
    padding-inline: 0.5rem;
}

/* The column menu dots are absolutely positioned at the cell edge and take no layout space, so
   a flush-right caption runs underneath them. Same fix the legacy grids use: hide the dots until
   the header is hovered or the menu is open. Both Credit Notes grids share this id. */
#creditNoteGrid .k-table-th .k-grid-column-menu {
    opacity: 0;
}

#creditNoteGrid .k-table-th:hover .k-grid-column-menu,
#creditNoteGrid .k-table-th .k-grid-column-menu:focus,
#creditNoteGrid .k-table-th .k-grid-column-menu.k-active {
    opacity: 1;
}

/* Add border to last row*/
.k-grid-content .k-table-row:last-child > td,
.k-grid-content .k-table-row:last-child > .k-table-td,
.k-grid-content-locked .k-table-row:last-child > td,
.k-grid-content-locked .k-table-row:last-child > .k-table-td {
    border-bottom-width: 1px;
}

/* Fix for blue border on red button*/
.ascora-blue .k-button.k-button-solid-base.btn-danger {
    border-color: var(--button-danger-bg) !important;
}

/* Remove redundant lines from stages grid*/
#stagesTable .k-table-row .k-hierarchy-cell {
    border-bottom:0px;
}

/* Remove grey sorted column */
.ascora-blue .k-grid col.k-sorted,
.ascora-blue .k-grid th.k-sorted {
    background-color: transparent !important;
}

/* Add bubbles to job header (info box)*/

#jobStatusSpan {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

#jobStatusSpan[class*='Completed'] {
    border: 1px solid rgba(69, 90, 100, 1.0);
    background-color: rgba(69, 90, 100, 1.0);
    color: rgba(255, 255, 255, 1.0)!important;
}

#jobStatusSpan[class*='Closed'] {
    border: 1px solid rgba(69, 90, 100, 1.0);
    background-color: rgba(69, 90, 100, 0.2);
    color: rgba(69, 90, 100, 1.0)!important;
}

#jobStatusSpan[class*='Booked'] {
    border: 1px solid rgba(76, 175, 80, 1.0);
    background-color: rgba(76, 175, 80, 0.2);
    color: rgba(76, 175, 80, 1.0);
}

#jobStatusSpan[class*='Cancelled'] {
    border: 1px solid rgba(239, 108, 0, 1.0);
    background-color: rgba(239, 108, 0, 0.1);
    color: rgba(239, 108, 0, 1.0);
}

#jobStatusSpan[class*='Not Completed'] {
    border: 1px solid rgba(171, 71, 188, 1.0);
    background-color: rgba(171, 71, 188, 0.2);
    color: rgba(171, 71, 188, 1.0)!important;
}

#jobStatusSpan[class*='Ready To Invoice'] {
    border: 1px solid #f39c12;
    background-color: rgba(253, 216, 53, 0.1);
    color: #f39c12!important;
}

#jobStatusSpan[class*='New']
{
    border: 1px solid rgba(239, 108, 0, 1.0);
    background-color: rgba(239, 108, 0, 0.2);
    color: rgba(239, 108, 0, 1.0);
}

#jobStatusSpan[class*='In Progress']{
    border: 1px solid rgba(3, 169, 244, 1.0);
    background-color: rgba(3, 169, 244, 0.2);
    color: rgba(3, 169, 244, 1.0)!important;
}

/* Add bubbles to quote header (info box)*/

#quoteStatusSpan {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

#quoteStatusSpan[class*='New'] {
    border: 1px solid rgba(239, 108, 0, 1.0);
    background-color: rgba(239, 108, 0, 0.2);
    color: rgba(239, 108, 0, 1.0);
}

#quoteStatusSpan[class*='Won'] {
    border: 1px solid rgba(67, 160, 71, 1.0);
    background-color: rgba(67, 160, 71, 0.2);
    color: rgba(67, 160, 71, 1.0);
}

#quoteStatusSpan[class*='Lost'] {
    border: 1px solid rgba(244, 67, 54, 1.0);
    background-color: rgba(244, 67, 54, 0.2);
    color: rgba(244, 67, 54, 1.0);
}

#quoteStatusSpan[class*='Sent To Client'] {
    border: 1px solid rgba(69, 90, 100, 1.0);
    background-color: rgba(69, 90, 100, 0.2);
    color: rgba(69, 90, 100, 1.0);
}

#quoteStatusSpan[class*='In Progress'] {
    border: 1px solid rgba(3, 169, 244, 1.0);
    background-color: rgba(3, 169, 244, 0.2);
    color: rgba(3, 169, 244, 1.0) !important;
}

/* Declined online - deliberately distinct from Lost, which is a closed status the office sets. */
#quoteStatusSpan[class*='Declined'] {
    border: 1px solid rgba(173, 20, 87, 1.0);
    background-color: rgba(173, 20, 87, 0.2);
    color: rgba(173, 20, 87, 1.0);
}

/* Accepted by the customer while the quote is still open - indigo, so it cannot be mistaken for Won. An exact match,
   because a Lost quote carries its reason in the class and a reason that mentions Accepted must stay red. */
#quoteStatusSpan[class='Accepted'] {
    border: 1px solid rgba(57, 73, 171, 1.0);
    background-color: rgba(57, 73, 171, 0.2);
    color: rgba(57, 73, 171, 1.0);
}

/* Job Header Box*/
.ascora-blue .info-box.job-header-box .info-box-text {
    font-size:20px;
    font-weight:620;
    text-transform: capitalize;
    color:#000000!important;
}

.ascora-blue .info-box.job-header-box .job_section_text,
.ascora-blue .info-box.job-header-box .job_section_text span{
    font-size: 20px;
    color: #000000 !important;
}
.ascora-blue .info-box.job-header-box .quote_text,
.ascora-blue .info-box.job-header-box .info-box-customer-address small {
    font-size: 16px;
    font-weight: 500;
    color: #000000 !important;
}

.ascora-blue .info-box.header_box .info-box-icon {
    font-size:45px;
    line-height:45px;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

.ascora-blue .info-box .info-box-icon.bg-aqua {
    background-color: transparent !important;
}

.ascora-blue .info-box .info-box-icon.bg-aqua i {
    width:70px;
    height:70px;
    background-color: var(--accent-color-1) !important;
    border-radius: 5px;
    align-content:center;
}

/* Status 2026*/
.ascora-blue .info-box.header_box .info-box-content .job_status_text .label-info {
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-weight:600;
    background-color:var(--accent-color-1) !important;
}

/* Quote Header Box*/
.ascora-blue .info-box.quote-header-box .info-box-text {
    font-size:20px;
    font-weight:620;
    text-transform: capitalize;
    color:#000000!important;
}
.ascora-blue .info-box.quote-header-box .job-reason-text,
.ascora-blue .info-box.quote-header-box .job-number-text {
    font-size: 16px;
    font-weight: 500;
    color: #000000 !important;
}

.ascora-blue .info-box.quote-header-box .job_section_text,
.ascora-blue .info-box.quote-header-box .job_section_text span {
    font-size: 20px;
    color: #000000 !important;
}

.ascora-blue .info-box.quote-header-box .info-box-customer-address small {
    font-size: 16px;
    font-weight: 500;
    color: #000000 !important;
}

.ascora-blue .quote-header-box .first-text-row .job_section_text,
.ascora-blue .quote-header-box .first-text-row .info-box-text {
    margin-top: 0px;
}

/* Enquiry Header Box*/
.ascora-blue .info-box.enquiry-header-box .info-box-text {
    font-size: 20px;
    font-weight: 620;
    text-transform: capitalize;
    color: #000000 !important;
}

.ascora-blue .info-box.enquiry-header-box h4 {
    font-size: 16px;
    font-weight: 500;
    color: #000000 !important;
}

.ascora-blue .info-box.enquiry-header-box .job_section_text,
.ascora-blue .info-box.enquiry-header-box .job_section_text span {
    font-size: 20px;
    color: #000000 !important;
}

.ascora-blue .info-box.enquiry-header-box .info-box-customer-address small {
    font-size: 16px;
    font-weight: 500;
    color: #000000 !important;
}

.ascora-blue .custom-status-bubble {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ascora-blue .info-box.enquiry-header-box .custom-status-bubble[class*='Converted'] {
    border: 1px solid rgba(67, 160, 71, 1.0);
    background-color: rgba(67, 160, 71, 0.2);
    color: rgba(67, 160, 71, 1.0);
}

.ascora-blue .info-box.enquiry-header-box .custom-status-bubble[class*='Open'] {
    border: 1px solid rgba(239, 108, 0, 1.0);
    background-color: rgba(239, 108, 0, 0.2);
    color: rgba(239, 108, 0, 1.0);
}

.ascora-blue .info-box.enquiry-header-box .custom-status-bubble[class*='Closed'] {
    border: 1px solid rgba(69, 90, 100, 1.0);
    background-color: rgba(69, 90, 100, 0.2);
    color: rgba(69, 90, 100, 1.0);
}

/* Invoice Header Box*/
.ascora-blue .info-box.invoice-header-box .info-box-text {
    font-size: 20px;
    font-weight: 620;
    text-transform: capitalize;
    color: #000000 !important;
}

.ascora-blue .info-box.invoice-header-box .info-box-text a {
    font-size: 20px;
    font-weight: 620;
}

.ascora-blue .info-box.invoice-header-box .job_status_text {
    font-size: 16px;
    font-weight: 500;
    color: #000000 !important;
}

/* Invoice header action cluster.
   The buttons are built by Invoices/PartialViews/_Details.cshtml and moved into the header, which
   outlives that partial when the user changes tab - so their layout has to live here rather than in
   a style block that goes away with the partial.
   One wrapping flex container holds the groups: while there is room they sit on a single line, and
   when there is not they wrap as whole groups, every line still ending on the same right edge. */
.ascora-blue .info-box.invoice-header-box .invoice-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 90px;
}

.ascora-blue .info-box.invoice-header-box .invoice-header-action-groups {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 16px;
    /* Without this the group cannot shrink below the width of one long line, so it overflows the
       header instead of wrapping. */
    min-width: 0;
}

/* A group is one run of related buttons and never splits across lines. */
.ascora-blue .info-box.invoice-header-box .invoice-header-action-group {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
}

/* Save is hidden until the form is dirty; the column stays reserved so the cluster does not shift
   sideways the moment it appears. */
.ascora-blue .info-box.invoice-header-box .invoice-header-save {
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    min-width: 80px;
}

.ascora-blue .info-box.invoice-header-box .invoice-header-actions .btn {
    margin: 0;
}

/* Joined pairs (Download + View Invoice) keep the single-pill look. */
.ascora-blue .info-box.invoice-header-box .invoice-header-action-group .btn-group > .btn + .btn {
    margin-left: -1px;
}


/* Quicksale Header Box*/
.ascora-blue .info-box.quicksale-header-box .info-box-text-qsn {
    font-size: 20px;
    font-weight: 620;
    text-transform: capitalize;
    color: #000000 !important;
}

.ascora-blue .info-box.quicksale-header-box .info-box-text-customer small{
    margin-left:0px;
    font-size: 16px;
    font-weight: 500;
    margin-top:3px;
}


/* Equipment Header Box*/
.ascora-blue .info-box.equipment-header-box .info-box-text {
    font-size: 20px;
    font-weight: 620;
    text-transform: capitalize;
    color: #000000 !important;
}

/* Templates Header Box*/
.ascora-blue .info-box.templates-header-box .info-box-text {
    font-size: 20px;
    font-weight: 620;
    text-transform: capitalize;
    color: #000000 !important;
}

.ascora-blue .info-box.templates-header-box .info-box-text small {
    margin-left:0px;
    font-size: 16px;
    font-weight: 500;
    line-height:1.2;
}

.ascora-blue .info-box.templates-header-box .job-recurring-status {
    margin-left: 0px;
    font-size: 16px;
    font-weight: 500;
}

/* Templates Header Box*/
.ascora-blue .info-box.customer-header-box .info-box-text,
.ascora-blue .info-box.supplier-header-box .info-box-text,
.ascora-blue .info-box.po-header-box .info-box-text,
.ascora-blue .info-box.contract-header-box .info-box-text,
.ascora-blue .info-box.checklist-header-box .info-box-text {
    font-size: 20px;
    font-weight: 620;
    text-transform: capitalize;
    color: #000000 !important;
}

.ascora-blue .info-box.job-header-box .info-box-text,
.ascora-blue .info-box.job-header-box .job_section_text {
    margin-top: 0px
}
.ascora-blue .info-box.job-header-box .first-text-row {margin-top:6px;margin-bottom:6px;}
.ascora-blue .info-box.job-header-box .info-box-customer-address {margin-bottom:5px;}

.ascora-blue .info-box.quote-header-box .first-text-row {margin-top:6px;margin-bottom:6px;}
.ascora-blue .info-box.quote-header-box .info-box-customer-address {margin-bottom:3px;}

#jobStatusSpan,
#quoteStatusSpan {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

#schedulerPanel .separator {
    width: 2px;
    height: 32px;
    margin: 0 4px;
    background-color: #ddd;
}

#schedulerPanel .btn-default.active {
    background-color: #7390af;
    color: #ffffff;
    border: 1px solid #7390af;
}

#schedulerPanel .x-border-layout-ct {
    background-color:transparent;
}

/* Splitter */
#schedulerPanel .x-splitter .x-collapse-el {
    position: absolute;
    cursor: pointer;
    background-color: transparent;
    background-repeat: no-repeat !important;
}

#schedulerPanel .x-splitter-vertical {
    background: rgba(0, 0, 0, 0.35);
    width:2px!important;
}

#schedulerPanel .x-splitter-vertical [class*='x-collapse'] {
    width:15px; 
    height:15px;
    background-color:black;
}
#schedulerPanel .x-splitter-vertical [class*='x-collapse']::before{
    font-size: 15px;
    line-height: 15px;
    font-weight: 500;
    font-family: "Font Awesome 5 Pro";
    content: '\f053';
    color: white;
}

/* Splitter */
#schedulerPanel .x-splitter-vertical {
    margin-left: -6px !important;
}

#schedulerPanel .x-splitter-vertical [class*='x-collapse'] {
    margin-left:-6px;
    background-image:none;
    height:23px;
    background-color:rgba(34, 34, 34, 0.85);
    border-radius:11px;
}

#schedulerPanel .x-splitter-vertical [class*='x-collapse']{
    display: flex;
    align-items: center;
    justify-content: center;
}

#schedulerPanel .x-splitter-vertical [class*='x-collapse']::before{
    font-size:12px;
    font-weight:900;
    font-family: "Font Awesome 6 Pro";
    content: "\f053";
}

#schedulerPanel .x-splitter-vertical.collapsed [class*='x-collapse']::before{
    font-size:12px;
    font-weight:900;
    font-family: "Font Awesome 6 Pro";
    content: "\f054";
}

/* Trevor 2026 - Gantt Fix */
/* There were extra lines on the grid and the links didn't line up*/

.k-gantt .k-grid tbody tr td {border-bottom: 0px;}
.k-gantt .k-gantt-tasks td,
.k-gantt .k-gantt-tasks .k-table-td {border-bottom: #6D99C454 1px solid;}
.k-gantt .k-task-single {border-style: none;}

/* Supplier Invoice Details Styling*/
/* Make the KendoWindow content area scrollable if needed */

/* 86d1jhtvm supplier invoice attachments pop out*/
/* Constrain proportions so the image doesn't exceed screen size*/

/* Ensure the kendo content area fills available space */
#FloatingAttachmentWindow,
#FloatingAttachmentWindow .k-window-content {
    height: 100%;
    overflow: hidden;
}

/* Wrapper fills window content */
#FloatingAttachmentWindow .floating-img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image scales correctly in both directions with window */
#FloatingAttachmentWindow .floating-img-wrap img {
    max-width: 1000px;
    max-height: 900px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Input and badge was not the same height as the k-input*/
#jobEmailTemplateFormatView #importAsJobAndQuoteSettingGroup input {
    box-sizing: content-box
}

#jobEmailTemplateFormatView #importAsJobAndQuoteSettingGroup .badge {
    height: var(--form-element-height);
    line-height: var(--form-element-height);
    font-weight: var(--form-element-font-weight);
    display:flex;
    align-items:center;
    font-weight:600;
    font-size:0.90rem;
}

.badge-enabled {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(76, 175, 80, 1.0);
    background-color: rgba(76, 175, 80, 0.2);
    color: rgba(76, 175, 80, 1.0);
}

.badge-disabled {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(220, 53, 69, 1.0);
    background-color: rgba(220, 53, 69, 0.2);
    color: rgba(220, 53, 69, 1.0);
}


/* =========================================================
   Home page section header rail (Option A)
   Loaded via the Modern bundle (portal-modern-R3-2023.css).
   Scoped to .section-dashboard so it doesn't leak to other
   pages that also use .box-header.
   ========================================================= */

.section-dashboard .box.box-ascora.box-solid {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-bottom: 16px;
}

.section-dashboard .box.box-ascora.box-solid > .box-header {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 14px;
    padding: 11px 22px 11px 28px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%) !important;
    border: 1px solid #e6ebf2 !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 1px 1px rgba(15, 27, 45, 0.03);
    overflow: hidden;
    line-height: 1.2;
    min-height: 58px;
    cursor: pointer;
}

.section-dashboard .box.box-ascora.box-solid > .box-header:hover {
    background: linear-gradient(180deg, #ffffff 0%, #eef7fc 100%) !important;
}

/* Left brand stripe per Option A design. Uses the same lighter blue
   (#1f8fd6) as the active Due Date chip so the dashboard accent reads
   consistently. .ascora-blue prefix bumps specificity so other rules
   cannot suppress the pseudo-element. */
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 4px !important;
    background: #1f8fd6 !important;
    border-radius: 0 4px 4px 0 !important;
    pointer-events: none;
    display: block !important;
    z-index: 1;
}

/* Icon chip - any direct FA icon child of the header (regardless of
   position). Excludes the chevron inside .btn-box-tool, since that's
   not a direct child of .box-header. .ascora-blue ancestor is
   required to win specificity over the existing rule that forces
   color:#fff on box-header > i.fa with !important. */
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header > i,
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header > i.fa,
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header > .fa,
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header > .fas,
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header > .far,
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header > .fal {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    background: #e8f4fc !important;
    color: var(--modern-primary-blue, #1976D2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 36px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header .box-title,
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header > .box-title,
.ascora-blue .section-dashboard .box.box-ascora.box-solid > .box-header h3.box-title,
.ascora-blue .box.box-solid.box-ascora > .box-header h3.box-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f1b2d !important;
    letter-spacing: -0.1px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
}

.section-dashboard .box.box-ascora.box-solid > .box-header .box-tools,
.section-dashboard .box.box-ascora.box-solid > .box-header > .box-tools,
.section-dashboard .box.box-ascora.box-solid > .box-header > .box-tools.pull-right {
    margin-left: auto !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    position: relative;
    z-index: 1;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

.section-dashboard .box.box-ascora.box-solid > .box-header .btn-box-tool {
    box-sizing: border-box !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #e6ebf2 !important;
    background: #fff !important;
    color: #344256 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 120ms ease, transform 200ms ease;
    flex: 0 0 34px;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
}

.section-dashboard .box.box-ascora.box-solid > .box-header .btn-box-tool:hover {
    background: #f7fbfe !important;
    color: #0f1b2d !important;
}

/* Hide whatever FA icon is inside (could be fa-minus, fa-plus, or
   fa-chevron-up depending on AdminLTE state) and draw a CSS chevron
   so the button is always visually a chevron-up that flips on
   collapse, independent of which FA glyph AdminLTE swaps in. */
.section-dashboard .box.box-ascora.box-solid > .box-header .btn-box-tool .fa {
    font-size: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

.section-dashboard .box.box-ascora.box-solid > .box-header .btn-box-tool::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(-45deg);
    margin-top: 3px;
    transition: transform 200ms ease;
}

.section-dashboard .box.box-ascora.box-solid.collapsed-box > .box-header .btn-box-tool::before {
    transform: rotate(135deg);
    margin-top: -3px;
}

.section-dashboard .box.box-ascora.box-solid.collapsed-box > .box-header {
    border-radius: 14px !important;
    border-bottom: 1px solid #e6ebf2 !important;
}

.section-dashboard .box.box-ascora.box-solid > .box-body {
    background: #ffffff !important;
    border: 1px solid #e6ebf2 !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    padding: 14px 18px !important;
}

/* Empty-state placeholder shown inside chart containers when there is
   no data yet (e.g. Time Summary, Job Summary). */
.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: #6b7a90;
    text-align: center;
    padding: 32px 20px;
    box-sizing: border-box;
}

.dashboard-empty-state > i,
.dashboard-empty-state > .fa {
    font-size: 44px !important;
    color: #d1d5db !important;
    margin-bottom: 14px;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    flex: none !important;
}

.dashboard-empty-state strong {
    font-size: 15px;
    font-weight: 600;
    color: #344256;
    margin-bottom: 4px;
}

.dashboard-empty-state small {
    font-size: 13px;
    color: #6b7a90;
    max-width: 320px;
    line-height: 1.4;
}

/* Defensive global Kendo grid header + footer override - matches the
   --kendo-table-header variable in style-variables.css. Targets EVERY
   header/footer surface (including the checkbox column header cell
   and modern .k-table-* class names) so nothing renders white. */
.ascora-blue .k-grid-header,
.ascora-blue .k-grid-header-wrap,
.ascora-blue .k-grid .k-grid-header,
.ascora-blue .k-grid .k-grid-header tr,
.ascora-blue .k-grid .k-grid-header th,
.ascora-blue .k-grid .k-grid-header .k-header,
.ascora-blue .k-grid .k-grid-header .k-table-th,
.ascora-blue .k-grid .k-grid-header .k-checkbox-th,
.ascora-blue .k-grid .k-grid-header .k-hierarchy-cell,
.ascora-blue .k-grid.k-grid-md .k-table.k-grid-header-table .k-table-thead,
.ascora-blue .k-grid.k-grid-md .k-table.k-grid-header-table .k-grid-header,
.ascora-blue .k-grid.k-grid-md .k-table-thead .k-table-row,
.ascora-blue .k-grid.k-grid-md .k-grid-header .k-table-row {
    background-color: #f9fafb !important;
}

/* Footer row + pager - aggressive coverage of every Kendo footer
   surface, including the .k-pager strip at the bottom of grids
   (which is the actual element the user sees as a "footer"). */
.ascora-blue .k-grid .k-grid-footer,
.ascora-blue .k-grid .k-grid-footer tr,
.ascora-blue .k-grid .k-grid-footer td,
.ascora-blue .k-grid .k-grid-footer th,
.ascora-blue .k-grid .k-grid-footer .k-footer-template,
.ascora-blue .k-grid .k-grid-footer .k-footer-template td,
.ascora-blue .k-grid .k-grid-footer-wrap,
.ascora-blue .k-grid .k-grid-footer-wrap > table,
.ascora-blue .k-grid .k-grid-footer-wrap > table > tbody,
.ascora-blue .k-grid .k-grid-footer-wrap > table > tbody > tr,
.ascora-blue .k-grid .k-grid-footer-wrap > table > tbody > tr > td,
.ascora-blue .k-grid .k-grid-footer-wrap > table > tfoot,
.ascora-blue .k-grid .k-grid-footer-wrap > table > tfoot > tr,
.ascora-blue .k-grid .k-grid-footer-wrap > table > tfoot > tr > td,
.ascora-blue .k-grid .k-table-tfoot,
.ascora-blue .k-grid .k-table-tfoot tr,
.ascora-blue .k-grid .k-table-tfoot td,
.ascora-blue .k-grid .k-table-tfoot .k-table-td,
.ascora-blue .k-grid .k-table-tfoot .k-table-row,
.ascora-blue .k-grid .k-table-footer,
.ascora-blue .k-table-footer,
.ascora-blue .k-footer-template,
.ascora-blue .k-footer-template td,
.ascora-blue tfoot.k-grid-footer,
.ascora-blue tfoot.k-grid-footer tr,
.ascora-blue tfoot.k-grid-footer td,
/* Kendo pager strip at the bottom of every grid - this is what
   visually reads as the "grid footer" to most users. */
.ascora-blue .k-pager,
.ascora-blue .k-pager-md,
.ascora-blue .k-grid-pager,
.ascora-blue .k-pager.k-grid-pager,
.ascora-blue .k-pager-wrap,
.ascora-blue .k-grid > .k-pager,
.ascora-blue .k-grid > .k-pager-wrap,
.ascora-blue .k-grid .k-pager-numbers,
.ascora-blue .k-grid .k-pager-info {
    background-color: #f9fafb !important;
    background-image: none !important;
}

.ascora-blue .k-grid-header .k-header,
.ascora-blue .k-grid-header .k-table-th,
.ascora-blue .k-grid-header .k-link {
    color: #344256 !important;
    font-weight: 600;
}

/* Always on grid cell editors - the editor is rendered permanently in the cell rather than
   appearing only once the cell is clicked, so editable values look and behave like fields. */
.asc-cell-editor {
    display: block;
    width: 100%;
    /* Kendo pads the cell for read only text; pull that back a little so a row of fields is not
       taller than a row of plain values. Done here rather than on the cell so it needs no :has(). */
    margin-top: -2px;
    margin-bottom: -2px;
}

.asc-cell-editor > .k-widget,
.asc-cell-editor > .k-input,
.asc-cell-editor > .k-numerictextbox,
.asc-cell-editor > .k-textbox,
.asc-cell-editor > input {
    width: 100%;
    min-width: 0;
}

/* Filter sections - give every control a consistent gap underneath so that when the row wraps at
   narrower widths the lines do not sit flush against each other or against the grid below. */
.kendo_filter_compact > *,
.kendo_filter_compact .form-group,
.kendo_filter_compact_Kendo2023 > *,
.kendo_filter_compact_Kendo2023 .form-group {
    margin-bottom: 10px;
}

/* The blocks themselves need it too. A filter row is usually a pull-left group beside a pull-right
   search group; once the viewport is too narrow to hold both they stack, and with no margin on the
   blocks the search sat flush against the row above it. */
.kendo_filter_compact,
.kendo_filter_compact_Kendo2023 {
    margin-bottom: 10px;
}

/* A quiet explanatory note. The themed .alert-info is a solid saturated fill with white text, which
   reads as a warning and competes with the figures it is meant to explain; this says the same thing
   in a pale tint with a thin border and normal body text. It gets its own class rather than
   overriding .alert-info, both because those rules set colour with !important and because the loud
   treatment is still the right one for actual alerts elsewhere. */
.asc-info-note {
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid #cfe3f7;
    border-radius: var(--widget-radius, 6px);
    background-color: #f2f8fd;
    color: var(--enquiry-form-text-primary, #293951);
    font-weight: 400;
    line-height: 1.5;
}

/* Only the icon carries the accent, so the note reads as information rather than as a status. */
.asc-info-note .fa-info-circle {
    color: var(--primary-color, #007ee6);
}

/* The same note at the top of a modal dialog. The icon gets its own column here rather than sitting
   inline: these messages run to two lines at a 600px dialog width, and inline flow wrapped the
   second line back underneath the icon instead of aligning it with the text. */
.asc-info-note-dialog {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* .k-window-content form already insets the dialog by 20px, so this only has to hold the note
       off the first form row, which carries no top margin of its own. */
    margin-bottom: 20px;
}

.asc-info-note-dialog > .fa {
    font-size: 16px;
    /* Optically centred on the first line of text rather than on the block as a whole. */
    margin-top: 1px;
}

/* States the outcome before the reason, so the note is scannable without reading the sentence. */
.asc-info-note .asc-info-note-title {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}

/* A filter is a label bound to one control, so it has to travel as one unit. Left as loose inline
   siblings the row could break between them - "Linked User" ended a line with its dropdown starting
   the next - and the label sat on the widget's baseline, which is low on a 28px control, so every
   label read as dropped. inline-flex centres the pair; nowrap also holds it together for the blocks
   a script re-shows as display:inline. */
.asc-filter-field {
    display: inline-flex;
    align-items: center;
    /* Bound to its own control, clearly apart from the next: the pair gap has to stay well under
       the gap between pairs, which was not true when both were about 10px. */
    gap: 6px;
    margin-right: 18px;
    vertical-align: middle;
    white-space: nowrap;
}

.asc-filter-field > label {
    margin-bottom: 0;
    white-space: nowrap;
}

/* Floating a button inside an input-group takes it out of the cell, which left the magnifier in
   place and dropped the word "Search" onto its own line below the field. */
.kendo_filter_compact_Kendo2023 .input-group-btn > .btn {
    float: none;
    white-space: nowrap;
}