/* CSS changes to bootstrap for Sonelle  - Version Superbus July 2016 */

@font-face{ 
	font-family: 'Open Sans';
	src: url('fonts/OpenSans-Regular.ttf');
}

body {font-family: 'Open Sans', sans-serif; font-size: 16px;font-weight: 200;}

.font-size-bigger {font-size:1.6rem;}
.font-weight-bold {font-weight:700;}

/* used to set up the two column layout with background colours and images - SDH 21-09-2021 */
html,body,.container-fluid-oswald {  height:100%;}
.container-fluid-oswald { display:table; width: 100%; margin-top: 0px;  padding: 0px 0 0 0;  box-sizing: border-box;}
.row-oswald { height: 100%; display: table-row;}
.row-oswald .no-float {display: table-cell; float: none; vertical-align: top;}


/* header changes */
.left-menu {padding-left:15px; list-style:none;float:left;width:100%;}
.left-menu li {padding:15px 0px; border-bottom:1px solid #ececec;}
.left-menu li:last-child{border:none;}
.left-menu li a {color:#444444; font-size:14px;}
/* .left-menu li a {color:#ffffff; font-size:14px;} */

.menu-shadow{
  /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.065); */
  border-right:1px solid #ececec;
}
.top-menu-shadow{
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.065); */
  border-bottom:1px solid #ececec;
}

.top-menu-shadow:before{
  position: absolute;
  height: 55px;
  width: 5px;
  top: 0;
  margin-left: -3px;
  background-color: #fff;
}


.left-footer {position: fixed; bottom: 10px;padding-left: 15px;}

.header-settings {padding-bottom: 0%;background:#ffffff;}
.header-settings .menu-bar {padding-right:2%;padding-top:0.8%; padding-bottom:0.5%; font-size:30px;color:#999999;}
.header-settings .menu-bar:hover, .header-settings .menu-bar:active {color:#959CA1;}


.header-settings .navbar-brand img {/*max-width:90%;*/float:left;padding-left:0%;margin-top:-1%; height:50px;}
.header-settings .menu-right {margin-right:1%;margin-top:0.8%;}
.header-settings .navbar-header {max-width:300px;}
.header-settings .btn-brwn { padding: 8px 12px 8px 12px;}

.header-settings .navbar-nav .open .dropdown-menu {min-width:280px;background:#959CA1;color:#ffffff;border:0px;-webkit-box-shadow:0px 0px 0px;box-shadow:0px 0px 0px;padding:20px;border-radius: 0px;margin:0px;}

.dropdown-toggle { cursor:pointer; }
.dropdown-menu>li>a {padding: 5px 20px;font-size:inherit;  color: #fff; margin:8px 0px 8px 0px;}
/*.dropdown-menu>li>a:hover, .dropdown-menu>li>a:active, .dropdown-menu>li>a:focus {background:#a59d86;color: #fff;}*/

/* end header changes */


/* elements that are colour controlled across different systems - these are the main elements to changes for each site*/
/* perhaps they should be housed in a separate CSS going forward allowing easier customisation? */


.col-grey-badge {background:#999999;border-color:#999999;color: #ffffff;}
.col-grey-badge:hover {background:#999999;border-color:#999999;color: #ffffff;}
.col-grey-font {color:#999999;}
.col-font-85 {font-size:0.85em;}
.col-font-145 {font-size:1.45em}
.col-font-125 {font-size:1.25em}
.col-font-225 {font-size:2.25em}
.col-font-110 {font-size:1.10em}


@media screen and (max-width:1569px)  {
	.md-font-size-biggest {font-size:1.4rem!important;}
	.md-font-size-bigger {font-size:1.1rem!important;}	
	.md-font-size-big {font-size:1rem!important;}
	.md-font-size-normal {font-size:0.9rem!important;}
	.md-font-size-small {font-size:0.7rem!important}
	.md-font-size-smaller {font-size:0.55rem!important}
	.display-block-md {display: block;}
}

.noresults {display:none;}/*used in the options search section - SDH 03-10-2021*/
.results {background: #f9f9f9; display:block}


/* generic amendments for all elements */
input.invalid, textarea.invalid, select.invalid {border: 1px solid red;}

.panel .shadow {
    filter: drop-shadow(0px 3px 3px #686868cc);
    filter: drop-shadow(2px 2px 10px #00000033);
}

.text-decoration-none {text-decoration:none!important}
.two-tone-dark-bg {background: linear-gradient(to right, #f5f5f5 0%, #f5f5f5 35%, #ffffff 35%, #ffffff 100%);}
/* .two-tone-dark-bg {background: linear-gradient(to right, #05163a 0%, #05163a 35%, #ffffff 35%, #ffffff 100%);} */
/* .two-tone-light-bg {background: linear-gradient(to right, #0a256a 0%, #0a256a 30%, #ffffff 30%, #ffffff 100%);} */
.two-tone-light-bg {background: linear-gradient(to right, #ffffff 0%, #ffffff 30%, #f5f5f5 30%, #f5f5f5 100%);}
.shadow {border-color: rgb(255 255 255 / 15%); box-shadow: 1px 2px 9px 4px rgb(0 0 0 / 21%); -webkit-box-shadow: 1px 2px 9px 4px rgb(0 0 0 / 21%);  -moz-box-shadow: 1px 2px 9px 4px rgba(0,0,0,0.21);border: 0px;}
.vcenter {display: inline-block; vertical-align: middle; float: none;}

.tabs-large-right {font-size:16px;}
.tabs-large-right .nav-tabs {border-bottom: 0px;}
.tabs-large-right .nav-tabs>li>a {background:#ffffff;font-weight:600; border-bottom: 0px;}
.tabs-large-right .nav-tabs>li.float-right {float:right;}
.tabs-large-right .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {background:#F8F8F8; color: #202020;border: 0px solid #05163a;border-bottom-color:transparent;}
.tabs-large-right .tab-content {background:#F8F8F8;}


.model-panel.panel {margin: 15px 10px; padding: 0px;}
.model-panel.panel .panel-heading {text-align: center;font-weight: 600;font-size: 15px;color:#000000;}
.model-panel.panel .panel-body {padding:0px}
.model-panel.panel .panel-footer { font-size: 14px; font-weight: 600; color: #05163a; text-align: center;  border-top: 0px;}
.model-panel{
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);

  cursor: pointer;
}

.model-panel:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.btn {border-radius: 10px !important;}
.page-backdrop{background: #EEEEEE url(/photos/banner_buildit.jpg) no-repeat center center; background-size:cover;}
.table-danger{background-color: #f5c6cb;}
.nopadding {padding-left:0px; padding-right:0px;}
.table-striped>tbody .pinned-row:nth-of-type(odd) {background-color:#d1e9f5;}
.clear {clear:both;}
.row-nomargin {margin-left: 0 !important;margin-right: 0 !important;}
.col-nopadding {padding-left: 0 !important;padding-right: 0 !important;}
.top-buffer-center {margin-top:5%;}
/* .logo {max-width: 90%;margin-left: 12%;} */
.logo {max-width: 100%;margin-left: 30%;}
.logo-left {max-width:70%;}
.grey-bg {background:#fffafa;}
.black-bg {background:#3C3C3B;}
.lightgrey-bg {background:#e6e6e6; border-bottom:1px solid #e6e6e6;}
.height-100 {min-height: 100%;height:100%;position:absolute;width:100%;}
.visible-mobsm-only {display:none;}
.glyphicon {padding-right:4px;}
.badge {margin-left:4px;}
.tab-content {padding:15px;border-top-color:transparent; }
.tab-pane {width:100%;}
.badge-orange {background:#FF9001;color:#ffffff;border-color:#FF9001;}
.top-buffer { margin-top:40px; }
.top-buffer-2 { margin-top:80px; }
.bottom-buffer { margin-bottom:40px; }
.bottom-buffer-2 { margin-bottom:80px; }
.right-buffer { margin-right:15px; }
.navbar-sub { margin-bottom:0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
.glyph-md {font-size:70px;margin-top:20px;margin-bottom:20px;}
.glyph-sm {font-size:35px;margin-top:5px;margin-bottom:5px;}
.glyph-xs {font-size:25px;margin-top:5px;margin-bottom:5px;}
.glyph-xxs {font-size:20px;margin-top:0px;margin-bottom:5px;}
.btn-leftmargin {margin-left:5px;}
.form-control50 {width:50%; display:inline;}
.form-control80 {width:80%; display:inline;}
.form-control70 {width:70%; display:inline;}
.form-control-top10 {margin-top:10px;}
.form-control-top20 {margin-top:20px;}
.form-control-bot20 {margin-bottom:20px;}
.form-horizontal .col-sm-alt-1{   margin-right: 5px;   margin-left: 5px;}
.row-alt {margin-right:2%; margin-left:2%;float:left; width:96%;}
.form-horizontal .form-group-alt {margin-left:-10px; margin-right:-10px;}
.row-15-15 {margin-top:10px; margin-bottom:10px;}
.row-25-25 {margin-top:25px; margin-bottom:25px;}
.header {border-bottom:1px solid #cccccc; margin-bottom:15px;padding-bottom:5px;margin-left:-15px;}
[placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.5s 0.5s ease;  opacity: 0;}
.badge-sml {font-size:9px;}
.form-horizontal .text-right { text-align: right;}
.form-horizontal .text-left{ text-align: left;}
.form-horizontal .text-normal {font-weight:400;}
.divider { height: 1px; width:100%; display:block; margin: 0px 0px 12px 0px; overflow: hidden; background-color: #e5e5e5;}
.capmaximage {max-width:100%;}
.img-fixedsize {width:250px;}
.paddingtopbot-10 {padding-top:10px; padding-bottom:10px;}
.paddingtopbot-5 {padding-top:5px; padding-bottom:5px;}
.padding-round-3 {padding:3rem;}
.padding-round-2 {padding:2rem;}
.padding-topbot-1 {padding:1rem 0rem;}
.padding-topbot-2 {padding:2rem 0rem;}
.padding-topbot-3 {padding:3rem 0rem;}
.padding-topbot-5 {padding:5rem 0rem;}
.padding-topbot-7 {padding:7rem 0rem;}
.caption {width:90%; bottom: 1rem; position: absolute; color:#33cc00;text-align:right;}
.captiontop {width:90%; top: 1rem; position: absolute; color:#33cc00;text-align:right;}
.badge {white-space:pre-wrap;}
.btn-group-extra-sm>.btn, .btn-extra-sm {padding: 3px 6px; font-size: 11px; line-height: 1.5; border-radius: 3px; margin-top: 4px;}
.modelrow {border-bottom:1px solid #EEEEEE; padding-bottom:5px;padding-top: 0px;font-size: 14px;}
.mr_grey {background-color:#F9F7F9;}
.modelrow .col-sm-6 ul {list-style:none;}
.modelrow .col-sm-6 ul li{display:inline;margin-right: 5%;font-size:1.2rem;line-height:20px;}
.hidden-all {display:none;}
.width100 {width:100%;}
.border-right-grey {border-right:1px solid #e9e9e9;}
.float-left {float:left;}
.float-right {float:right;}
.checkbox-left{margin-left:22px;}
.flex-center{display:flex;align-items: center;}
.big {font-size:140%;font-weight:700;}
.paddingtop-0 {padding-top:0px;}
.border-bottom-grey {border-bottom:1px solid #e7e7e7;}
.tablealternate{background:#f7f6f6;}
.tablealternate:nth-child(even){background:#fff;}
#options .checkbox input[type=checkbox] {margin-left:0px;}
#options .checkbox {padding-top:0px;    min-height: unset;}
#options .optionrow {padding:3px 0px;margin-bottom: 2px;}
 @media screen and (min-width: 1400px) {.modal-lg {/* width: 1200px; */min-height:750px;} .form-comments-height-350 {height:350px!important;}}
 @media screen and (min-width: 1400px) {.container {width: 1300px;} .modal-body .container {width:100%;} }

/* Pricing module */
.rowpadding-10-10 {padding-top:10px; padding-bottom:10px;}
.text-white {color:#ffffff;}
.form-control50 {width:50%; display:inline;}
.form-control30 {width:32%; display:inline; margin-right:0.5%;margin-left:0.5%;}
.form-control25 {width:24%; display:inline; margin-right:0.5%;margin-left:0.5%;}
.buy_background {background: #ffb341;}
.sell_background {background: #54c0ff;}
.navbar-nav.nav-sub>li>a {line-height: 20px;}
.nav.nav-sub>li>a {padding: 5px 10px; font-size:11px;}
.navbar-nav.nav-sub > .active > a, .navbar-nav.nav-sub > .active > a:hover, .navbar-nav.nav-sub > .active > a:focus {  color: #fff;  background-color: #D0021b;}
.navbar-nav.nav-sub>li>a {color: #202020;padding-left:11px;padding-right:11px;}
.navbar-nav.nav-sub>li>a:hover, .navbar-sub .navbar-nav>li>a:focus { color: #ffffff;  background-color: #D0021b;}

/*ems configuration page */
.businesslease {float:left; width:50%;display:table;color:#ffffff;margin-bottom:15px;}
.personallease {float:right; width:50%;display:table;color:#ffffff;margin-bottom:15px;}
.pricing-row-left {font-size:1.7rem;font-weight:600;padding:10px;width:45%;display: table-cell; vertical-align: middle;}
.monthlylease .pricing-row-left {width:auto;}
.pricing-row-left span {display:block;font-size:1.2rem;}
.pricing-row-right {display:inline-block;font-size:1.2rem;padding:10px;}
.pricing-row-right .pricing-lg {font-size:3rem; font-weight:600;display:block;line-height: 3.5rem;}
.pricing-row-right .pricing-sm {font-size:1rem; font-weight:200;display:block;width:100%;}

.row .price {font-size: 2.2rem;line-height: 1.2;display: block;}
.row .save { font-size: 2.2rem;line-height: 1;color: #83888B;}
input[type="text"].inputclear {color:#202020;width:70%;border:0px;display:inline; font-size: 2.2rem; line-height: 1.2;height:auto; padding:0px; margin:0px;}
input[type="text"].inputsave {color:#83888B;}  
.hidecheckbox {display:none;}
.valign-top {vertical-align:top !important;}
.cms-tooltip {cursor:help;}      
.ovehicle {max-width:100%}/*similar to img-responsive */

/* the finance application styles - 17-10-2017 SDH */
.finance-application .nav-tabs { border-bottom: 0px;}
.finance-application .nav-tabs li {width: 50%; text-align: center;}
.tab-content .tab-pane ul { float: left; width: 100%;  list-style: none;  margin: 0%;  padding: 0%;}
.finance-application .tab-content { padding: 0;  padding-bottom: 20px;}
.finance-application .tab-content .tab-pane .nav li:not(:last-of-type) { margin-right: .5%;}
.finance-application .tab-content .tab-pane .nav li {width: 33%; padding: 1rem 0; border-bottom: 0px;}
.finance-application .tab-content .tab-pane .nav li.active:before { content: "\f00c";}
.finance-application .tab-content .tab-pane .nav li:before { content: "\f00d"; font-family: "FontAwesome"; display: inline-block; position: relative; left: -.55rem;}
.finance-application .tab-content .form-group {margin-bottom: 5px;}
.finance-application .tab-content h3 {float:left; width:100%; margin-bottom:20px;}

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

/* 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: 16px;width: 16px;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(16px); -ms-transform: translateX(16px);  transform: translateX(16px);}

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

/*carousel changes */
.carousel-control.left, .carousel-control.right {background:none;}
.carousel-control {width: 5%; color: #0a256a; opacity: 1;}
.carousel-inner {position: relative;width: 95%; padding-left:5%; overflow: hidden;}
.carousel-control:focus, .carousel-control:hover {color: #a50d18;}


/*changes for tablet portrait and mobile */
 @media screen and (max-width: 900px) {
  .hidden-tp {display:none;}/* hide on tablet portrait and all smaller devices */   
   
   }
 

      
@media screen and (max-width: 768px) {
  
/* generic settings adjusted for smaller screens */
	.logo {max-width: 40%;margin-left: 8%;}
  .glyphicon {padding-right:0px;}
  .badge {margin-left:0px;}

.nav-tabs>li>a {padding: 10px 12px;}
.navbar-sub .navbar-nav {margin:0px;}
/* header changes */
  
.header-settings .menu-bar {padding-left:2%;font-size:30px;float:left;}
.navbar-right { float: right!important;}
.header-settings .navbar-nav .open .dropdown-menu {position:absolute; z-index:1000;}
.header-settings .navbar-nav .open .dropdown-menu>li>a {padding: 5px 20px;font-size:15px;  color: #fff; margin:8px 0px 8px 0px;}
.header-settings .navbar-nav .open .dropdown-menu>li>a:hover, .dropdown-menu>li>a:active, .dropdown-menu>li>a:focus {background:#A59D86;color: #fff;}
.header-settings .menu-right {margin-top:10px;}
.header-settings .btn-brwn {padding: 6px 12px 6px 12px;}

}

  @media screen and (max-width: 400px) {
  .visible-mobsm-only {display:block;}/* show small mobile only */   
   .hidden-xxs {display:none;}/*do not show fields in small mobiles */
     .logo { max-width: 20%;  margin-left: 0%;}
   }
   
/* Trumbowyg classes */
.trumbowyg-editor .column { border:1px dotted #ff0000; }
.trumbowyg-editor .primary-colour{color: #5dbc00;}
.trumbowyg-editor .primary-colour-dark{color: #047A98;}
.trumbowyg-editor .primary-border {border: 1px solid #5dbc00;}
.trumbowyg-editor .primary-badge {background:#5dbc00;color:#ffffff;border-color:#5dbc00;}
.trumbowyg-editor .primary-button{background: #5dbc00;color:#ffffff;
/*background: -moz-linear-gradient(top,  #48cdd9 1%, #3bbbc7 100%);
background: -webkit-linear-gradient(top,  #48cdd9 1%,#3bbbc7 100%);
background: linear-gradient(to bottom,  #48cdd9 1%,#3bbbc7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48cdd9', endColorstr='#3bbbc7',GradientType=0 );*/
}

.trumbowyg-editor .primary-button:hover{background: #57a907;
/*background: -moz-linear-gradient(top,  #3bbbc7 1%, #48cdd9 100%);
background: -webkit-linear-gradient(top,  #3bbbc7 1%,#48cdd9 100%);
background: linear-gradient(to bottom,  #3bbbc7 1%,#48cdd9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bbbc7', endColorstr='#48cdd9',GradientType=0 );*/
}

.trumbowyg-editor .secondary-colour{color: #1a1516;}
.trumbowyg-editor .secondary-button{background: #1a1516;color:#ffffff;
/*background: -moz-linear-gradient(top,  #3A3A3A 1%, #595959 100%);
background: -webkit-linear-gradient(top,  #3A3A3A 1%,#595959 100%);
background: linear-gradient(to bottom,  #3A3A3A 1%,#595959 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3A3A3A', endColorstr='#595959',GradientType=0 );*/
}

.trumbowyg-editor .secondary-button:hover{background: #6c6c6b;color:#ffffff;
/*background: -moz-linear-gradient(top,  #595959 1%, #3A3A3A 100%);
background: -webkit-linear-gradient(top,  #595959 1%,#3A3A3A 100%);
background: linear-gradient(to bottom,  #595959 1%,#3A3A3A 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#3A3A3A',GradientType=0 );*/
}

.trumbowyg-editor .tertiary-button{color:#7b7a7b;}
.trumbowyg-editor .tertiary-button{color:#ffffff;
background: #7b7a7b;
/*background: -moz-linear-gradient(top, #7b7a7b 0%, #6c6c6b 100%);
background: -webkit-linear-gradient(top, #7b7a7b 0%,#6c6c6b 100%); 
background: linear-gradient(to bottom, #7b7a7b 0%,#6c6c6b 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7a7b', endColorstr='#6c6c6b',GradientType=0 );*/
}

.trumbowyg-editor .tertiary-button:hover{color:#ffffff;
background: #6c6c6b;
/*background: -moz-linear-gradient(top, #6c6c6b 0%, #7b7a7b 100%);
background: -webkit-linear-gradient(top, #6c6c6b 0%,#7b7a7b 100%); 
background: linear-gradient(to bottom, #6c6c6b 0%,#7b7a7b 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c6c6b', endColorstr='#7b7a7b',GradientType=0 );*/
}

/*New Finance forms have been added a few CSS changes are needed - SDH 10-06-2021 */
#financeform .form-group {margin-bottom:10px;}
#financeform .help-block {margin-top:0px; margin-bottom:0px}

/* only used in the print section - mainly just for EMS deal page*/
@media print {

.no-print {display: none !important;}
.print-show {display: block !important;opacity:1;}  
.column-2 {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
.column-5 {-webkit-column-count: 5;-moz-column-count: 5;column-count: 5;}
}

/*Order modal TR 11.10.2021*/
#ordermodal .modal-header {
    display: flex;
    align-items: center;
}
@media screen and (max-width:760px) { /* Mobile Large */
#ordermodal .modal-header {
    display: block;
}	
}


/* dashboard EMS row search SDH 04-11-2022 */
.home-banner {}
.home-banner .fa-chevron-right {float:right;}
.home-banner .rounded-top{border-top-left-radius: 10px !important;border-top-right-radius: 10px !important;}
.home-banner .rounded { border-radius: 10px !important;}
.home-banner .rounded-bottom {border-bottom-left-radius: 10px !important;border-bottom-right-radius: 10px !important;}
.home-banner .border-none{border: unset !important;}
.home-banner .nav-link h5 {font-size: 1.8rem;font-weight: 700; margin-bottom: 0px;text-align: center;}
.home-banner .nav-link p {margin-bottom:0px; text-align:center;}
.home-banner .nav-tabs>li.active>a {background:#fff;color:#000}
.home-banner .nav-tabs>li>a {background:#c5c5c5;}
.home-banner .nav-tabs>li>a.active{background:#fff;}
.homesearch {background:#fff; filter: drop-shadow(15px 20px 8px #00000080); min-height: 340px;display: flex; align-items: center;}
.home-banner .secondary-button-light {background: #ffffff; opacity: 100%; color: #333333;filter: drop-shadow(0px 3px 3px #686868cc);transition: all 1s;}
.home-banner .secondary-button-light:hover {background: #eeeeee;opacity: 100%;color: #333333;filter: drop-shadow(0px 3px 6px #00000039);box-shadow: 0px 3px 6px #000000cc;}
.home-banner #carrange img, .home-banner #vanrange img {width: 70px;height: 70px;margin-top: 0px; transition: all .5s;}
.home-banner .keyiconhover {width: 90%;    height: 100%;    margin-right: auto;    margin-left: auto;}
.home-banner .keyicon {width: 60px; height: 60px; filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4);}
.home-banner .quat-button {background: #8B8A8A;opacity: 90%;color: #FFFFFF; border: 2px solid transparent; position: relative;   transition: all 1s;}
.home-banner .shadow {filter: drop-shadow(0px 3px 3px #686868cc);filter: drop-shadow(2px 2px 10px #00000033);}
.home-banner .tab-pane {padding: 3rem 0rem; background: #ffffff}
.browsemakes ul {list-style:none;}
.browsemakes ul li {width:30%; padding:1.5%;display: inline-block;}
.home-banner .bg-white-opacity {background: #ffffff; opacity: 0.7;}


/* Login Page Styling */

.hero-banner-2{background-image: url('../images/rba-background.jpg');}

.hero-banner{
  width: 100vw;
  height: 92vh;  
  background-color: black;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /*filter: blur(50px);
  -webkit-filter: blur(50px);*/
}

.h-100{height: 100%;}

.login-card{
  background:white;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0px;
  text-align: center;
}

.login-image{
    height: 100%;  
    background-color: black;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;    
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding:20px;
}

/*.login-min{min-height: 550px;}*/

.login-header{  font-size: 5rem;}
.login-form{
  padding:20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ringfence-row.odd{
  background-color: #d4ebff   !important;
}

.ringfence-row.even{
  background-color: #cfe0ee  !important;
}

/*live chat - 10-10-2024 SDH */
#livechat-click {display: none;}
.livechat-button {position: fixed;left: 30px;bottom: 20px;height: 55px;width: 285px;background: -webkit-linear-gradient(left, #3d53a3, #0d3276);text-align: center;line-height: 55px;border-radius: 50px;font-size: 18px;color: #fff; cursor: pointer;z-index:99}
.livechat-wrapper {position: fixed;left: 30px;bottom: 0px;max-width: 400px;background: #fff;  border-radius: 15px;  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);  opacity: 0;  pointer-events: none;  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);z-index:99}
.livechat-wrapper-wide {position: fixed;left: 30px;bottom: 0px;width: 820px; background: #fff;  border-radius: 15px;  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);  opacity: 0;  pointer-events: none;  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);z-index:99}
#livechat-click:checked ~ .livechat-wrapper, #livechat-click:checked ~ .livechat-wrapper-wide {opacity: 1;  bottom: 85px;  pointer-events: auto;}
.livechat-wrapper .head-text {  line-height: 60px;  color: #fff;  border-radius: 15px 15px 0 0;  padding: 0 20px;  font-weight: 500;  font-size: 20px;  background: -webkit-linear-gradient(left, #3d53a3, #0d3276);}
.livechat-wrapper-wide .head-text {line-height: 60px;  color: #fff;  border-radius: 15px 15px 0 0;  padding: 0 20px;  font-weight: 500;  font-size: 20px;  background: -webkit-linear-gradient(left, #3d53a3, #0d3276);}
	

.livechat-wrapper .chat-box { padding: 20px;  width: 100%;}
.livechat-wrapper-wide .chat-area {display:flex;height:540px;}
.livechat-wrapper-wide .chat-list {padding: 0px;  width: 38%;float:left; background:#e7e7e7; border-right:1px solid #8b8b8b;}
.livechat-wrapper-wide .chat-box { padding: 5px 20px;  width: 62%;float:left}
.livechat-wrapper-wide .chat-list .chat-list-row {float:left; width:100%; border-bottom: 1px solid #8b8b8b; padding:15px;}
.livechat-wrapper-wide .chat-list .chat-list-row.active {background:#c3c3c3;}

[data-letters-1]:before {content:attr(data-letters-1); display:inline-block; font-size:1.5em; width:2.5em; height:2.5em;line-height:2.5em;text-align:center; border-radius:50%; background: rgb(45,126,253);background: linear-gradient(0deg, rgba(45,126,253,1) 0%, rgba(34,172,195,1) 100%);vertical-align:middle;margin-right:1em;color:white;}
[data-letters-2]:before {content:attr(data-letters-2); display:inline-block; font-size:1.5em; width:2.5em; height:2.5em;line-height:2.5em;text-align:center; border-radius:50%; background: rgb(192,253,45);background: linear-gradient(0deg, rgba(192,253,45,1) 0%, rgba(34,195,53,1) 100%);vertical-align:middle;margin-right:1em;color:white;}
[data-letters-3]:before {content:attr(data-letters-3); display:inline-block; font-size:1.5em; width:2.5em; height:2.5em;line-height:2.5em;text-align:center; border-radius:50%; background: rgb(230,45,253);background: linear-gradient(0deg, rgba(230,45,253,1) 0%, rgba(195,34,148,1) 100%);vertical-align:middle;margin-right:1em;color:white;}
[data-letters-4]:before {content:attr(data-letters-4); display:inline-block; font-size:1.5em; width:2.5em; height:2.5em;line-height:2.5em;text-align:center; border-radius:50%; background: rgb(253,86,45);background: linear-gradient(0deg, rgba(253,86,45,1) 0%, rgba(195,34,51,1) 100%);vertical-align:middle;margin-right:1em;color:white;}

.livechat-wrapper-wide .chat-list .chat-list-row .chat-list-img {display:inline-block;}
.livechat-wrapper-wide .chat-list .chat-list-row .chat-list-text {display:inline-block;}

.chat-box .desc-text { color: #515365; text-align: center; line-height: 25px; font-size: 17px; font-weight: 500;}
.chat-box form {float:left; width:100%; padding: 10px 15px; margin: 20px 0; border-radius: 25px; border: 1px solid lightgrey;}
.livechat-wrapper-wide .chat-box form {margin: 10px 0;}
.chat-box form .live-inputs {float:left; width:100%;}
.chat-box form .live-reload {float:left; width:100%;height:260px;overflow: auto}
.chat-box form .chat-user {width:80%; float:right;border: 1px solid #c7c2c2;background: #e7e7e7;padding: 10px 15px;border-radius: 20px; margin: 10px;}
.chat-box form .chat-admin {width:80%; float:left; border: 1px solid #8c89ab;background: #dfd7f7;padding: 10px 15px;border-radius: 20px; margin: 10px;}

.chat-box form .live-inputs .lc-error {width:100%; margin:10px 0px 10px 0px; text-align: center; font-weight:700;}
.chat-box form .live-inputs .field { height: 50px;  width: 100%;  margin-top: 20px;}
.chat-box form .live-inputs .live-inputs .field:last-child {margin-bottom: 15px;}
.chat-box form .live-inputs .field input,form .live-inputs .field button,form .live-inputs .textarea textarea {  width: 100%;  height: 100%;  padding-left: 20px;  border: 1px solid lightgrey;  outline: none;  border-radius: 25px;  font-size: 16px;  transition: all 0.3s ease;}
.chat-box form .live-inputs .field input:focus,form .live-inputs .textarea textarea:focus {  border-color: #1d760d;}
.chat-box form .live-inputs .field input::placeholder,form .live-inputs .textarea textarea::placeholder {  color: silver;  transition: all 0.3s ease;}
.chat-box form .live-inputs .field input:focus::placeholder,form .live-inputs .textarea textarea:focus::placeholder {  color: lightgrey;}
.chat-box form .live-inputs .textarea {  height: 80px;width: 100%;}
.chat-box form .live-inputs .textarea textarea { height: 100%; border-radius: 20px; resize: none; padding: 15px 20px; font-size: 16px;}
.chat-box form .live-inputs .field button {border: none; outline: none; cursor: pointer; color: #fff; font-size: 18px; font-weight: 500; background: -webkit-linear-gradient(left, #3d53a3, #0d3276); transition: all 0.3s ease;}
.chat-box form .live-inputs .field button:active {transform: scale(0.97);}

/* -------------------------------------primary colour --------------------------- */

.col-bg-primary-core {background:#3e1c13;}
.col-bg-primary-btn {background: #3e1c13;color:#ffffff;}
.col-bg-primary-btn:hover {background:#0c0503;border-color:#0c0503;color:#ffffff;}
.col-primary {color:#3e1c13;}
.col-primary-alt {color:#ffffff;}/* alt colour to show on the primary colour*/
.col-border-primary {border: 1px solid #0c0503;}
.col-bg-primary-core-alt {background:white;}
/* .col-bg-primary-core-alt {background:#0c0503;} */
.col-bg-primary-btn-alt {background:#0c0503;border-color:#0c0503;color:#ffffff;}
.col-bg-primary-btn-alt:hover {background:#3e1c13;border-color:#0c0503;color:#ffffff;}

/* colouring used in the main header navigation - normally matches primary colours but does not need to */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover 
{background:#3e1c13; color: #ffffff;border: 0px solid #0c0503;border-bottom-color:transparent;}/*primary colour changes the standard nav tab colouring*/
.nav-tabs>li>a {color:#555;background-color:#F3F3F3;border-bottom-color:#0c0503;}
.nav-tabs {border-bottom: 1px solid #0c0503;}
/*subnav used as headers on most boxes*/
.navbar-sub .navbar-nav > .active > a, .navbar-sub .navbar-nav > .active > a:hover, .navbar-sub .navbar-nav > .active > a:focus {  color: #fff;  background-color: #331d35;}
.navbar-sub .navbar-nav>li>a {color: #ffffff;padding-left:11px;padding-right:11px;}
.navbar-sub .navbar-nav>li>a:hover, .navbar-sub .navbar-nav>li>a:focus { color: #ffffff;  background-color: #331d35;}

.nav-pills>li>a {color:#555;background-color:#F3F3F3;border-left: 1px solid #ffffff;}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {color: #ffffff;  background-color: #331d35;border-left: 1px solid #ffffff;}

.panel-primary { border-color: #0c0503;}/*overwrites bootstrap primary panel colours*/
.panel-primary > .panel-heading {color: #ffffff; background-color: #3e1c13; border-color: #0c0503;}
.panel-primary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #0c0503;}
.panel-primary > .panel-heading .badge { color: #ffffff;  background-color: #3e1c13;}
.panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #0c0503;}

.table-primary .pagination > li > a, .table-primary .pagination > li > span { color: #3e1c13; background-color: #fff; border: 1px solid #0c0503;}
.table-primary .pagination > li > a:hover, .table-primary .pagination > li > span:hover, .table-primary .pagination > li > a:focus, .pagination > li > span:focus {color: #fff; background-color: #331d35; border-color: #0c0503;}
.table-primary .pagination > .active > a, .table-primary .pagination > .active > span, .table-primary .pagination > .active > a:hover, .table-primary .pagination > .active > span:hover, .table-primary .pagination > .active > a:focus, .table-primary .pagination > .active > span:focus {  color: #fff; background-color: #3e1c13;  border-color: #0c0503;}

/* -------------------------------- secondary colour ------------------------------------------ */
.col-bg-secondary-core {background:#ec6864;}
.col-bg-secondary-btn {background:#ec6864;border-color:#bc4744;color: #ffffff;}
.col-bg-secondary-btn:hover {background:#bc4744;border-color:#bc4744;color: #ffffff;}
.col-secondary {color:#bc4744;}
.col-secondary-alt {color:#ffffff;}
.col-border-secondary {border: 1px solid #bc4744;}
.navbar-sub .navbar-nav-sec > .active > a, .navbar-sub .navbar-nav-sec > .active > a:hover, .navbar-sub .navbar-nav-sec > .active > a:focus {  color: #fff;  background-color: #bc4744;}
.navbar-sub .navbar-nav-sec>li>a:hover, .navbar-sub .navbar-nav-sec>li>a:focus { color: #ffffff;  background-color: #bc4744;}

.navbar-nav-sec .nav-item .nav-link {color: #fff;background-color: #ec6864; margin:0 0.5rem}
.navbar-nav-sec .nav-item .nav-link.active{background:#bc4744;}
.navbar-nav-sec .nav-item .nav-link:hover, .navbar-nav-quat .nav-item .nav-link:focus {background:#bc4744;}


.nav-pills-sec-right>li>a {color:#555;background-color:#EAEAEA;border-right: 1px solid #ffffff;}
.nav-pills-sec-right>li.active>a, .nav-pills-sec-right>li.active>a:hover, .nav-pills-sec-right>li.active>a:focus {color: #ffffff;  background-color: #ec6864;border-right: 1px solid #ffffff;}

.panel-secondary { border-color: #bc4744;}/*overwrites bootstrap primary panel colours*/
.panel-secondary > .panel-heading {color: #ffffff; background-color: #ec6864; border-color: #bc4744;}
.panel-secondary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #bc4744;}
.panel-secondary > .panel-heading .badge { color: #ffffff;  background-color: #ec6864;}
.panel-secondary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #bc4744;}


.table-secondary .pagination > li > a, .table-secondary .pagination > li > span { color: #bc4744; background-color: #fff; border: 1px solid #bc4744;}
.table-secondary .pagination > li > a:hover, .table-secondary .pagination > li > span:hover, .table-secondary .pagination > li > a:focus, .pagination > li > span:focus {color: #fff; background-color: #bc4744; border-color: #bc4744;}
.table-secondary .pagination > .active > a, .table-secondary .pagination > .active > span, .table-secondary .pagination > .active > a:hover, .table-secondary .pagination > .active > span:hover, .table-secondary .pagination > .active > a:focus, .table-secondary .pagination > .active > span:focus {  color: #fff; background-color: #ec6864;  border-color: #bc4744;}

/* -------------------------------------------- tertiary colour - normally set to black---------------------------------------- */
.col-bg-tertiary-core {background:#8B8374;}
.col-bg-tertiary-btn {background:#8B8374;border-color:#231F2E;color: #ffffff;}
.col-bg-tertiary-btn:hover {background:#514d46;border-color:#231F2E;color: #ffffff;}
.col-tertiary {color:#8B8374;}
.col-tertiary-alt {color:#ffffff;}
.col-border-tertiary {border: 1px solid #231F2E;}
.navbar-sub .navbar-nav-ter > .active > a, .navbar-sub .navbar-nav-ter > .active > a:hover, .navbar-sub .navbar-nav-ter > .active > a:focus {  color: #fff;  background-color: #514d46;}
.navbar-sub .navbar-nav-ter>li>a:hover, .navbar-sub .navbar-nav-ter>li>a:focus { color: #ffffff;  background-color: #514d46;}

.panel-tertiary { border-color: #231F2E;}/*overwrites bootstrap primary panel colours*/
.panel-tertiary > .panel-heading {color: #ffffff; background-color: #8B8374; border-color: #231F2E;}
.panel-tertiary > .panel-heading + .panel-collapse > .panel-body { border-top-color: #231F2E;}
.panel-tertiary > .panel-heading .badge { color: #ffffff;  background-color: #8B8374;}
.panel-tertiary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #231F2E;}

.table-tertiary .pagination > li > a, .table-tertiary .pagination > li > span { color: #8B8374; background-color: #fff; border: 1px solid #231F2E;}
.table-tertiary .pagination > li > a:hover, .table-tertiary .pagination > li > span:hover, .table-tertiary .pagination > li > a:focus, .pagination > li > span:focus {color: #fff; background-color: #514d46; border-color: #231F2E;}
.table-tertiary .pagination > .active > a, .table-tertiary .pagination > .active > span, .table-tertiary .pagination > .active > a:hover, .table-tertiary .pagination > .active > span:hover, .table-tertiary .pagination > .active > a:focus, .table-tertiary .pagination > .active > span:focus {  color: #fff; background-color: #8B8374;  border-color: #231F2E;}

/* -------------------------------------------- quaternary colour - normally get to grey or brown ---------------------------------------- */
.col-bg-quat-core {background:#98996b;}
.col-bg-quat-btn {background:#98996b;border-color:#565638;color: #FFF;}
.col-bg-quat-btn:hover {background:#2d2d1d;border-color:#2d2d1d;color: #ffffff;}
.col-quat {color:#98996b;}
.col-quat-alt {color:#ffffff;}
.col-border-quat {border: 1px solid #C14B51;}

.navbar-nav-quat .nav-item .nav-link {color: #fff;background-color: #565638; margin:0 0.5rem}
.navbar-nav-quat .nav-item .nav-link.active{background:#2d2d1d;}
.navbar-nav-quat .nav-item .nav-link:hover, .navbar-nav-quat .nav-item .nav-link:focus {background:#2d2d1d;}

.navbar-nav-quat .nav-item .nav-link.active > a, .navbar-nav-quat .nav-item .nav-link.active > a:hover, .navbar-nav-quat .nav-item .nav-link.active > a:focus {color: #fff;background-color: #565638;}
.navbar-nav-quat .nav-item .nav-link a:hover,.navbar-nav-quat .nav-item .nav-link a:focus { color: #ffffff;  background-color: #565638;}

.panel-quat { border-color: #C14B51;}/*overwrites bootstrap primary panel colours*/
.panel-quat > .panel-heading {color: #ffffff; background-color: #98996b; border-color: #C14B51;}
.panel-quat > .panel-heading + .panel-collapse > .panel-body { border-top-color: #C14B51;}
.panel-quat > .panel-heading .badge { color: #ffffff;  background-color: #98996b;}
.panel-quat > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #C14B51;}

.table-quat .pagination > li > a, .table-quat .pagination > li > span { color: #98996b; background-color: #fff; border: 1px solid #C14B51;}
.table-quat .pagination > li > a:hover, .table-quat .pagination > li > span:hover, .table-quat .pagination > li > a:focus, .pagination > li > span:focus {color: #fff; background-color: #565638; border-color: #C14B51;}
.table-quat .pagination > .active > a, .table-quat .pagination > .active > span, .table-quat .pagination > .active > a:hover, .table-quat .pagination > .active > span:hover, .table-quat .pagination > .active > a:focus, .table-quat .pagination > .active > span:focus {  color: #fff; background-color: #98996b;  border-color: #C14B51;}
/* -------------------------------------------- quinary colour - normally set to a red or orange ---------------------------------------- */
.col-bg-quin-core {background:#8C2B59;}
.col-bg-quin-btn {background:#8C2B59;border-color:#42302C;color: #ffffff;}
.col-bg-quin-btn:hover {background:#5b1b39;border-color:#42302C;color: #ffffff;}
.col-quin {color:#8C2B59;}
.col-quin-alt {color:#ffffff;}
.col-border-quin {border: 1px solid #42302C;}
.navbar-sub .navbar-nav-quin > .active > a, .navbar-sub .navbar-nav-quin > .active > a:hover, .navbar-sub .navbar-nav-quin > .active > a:focus {  color: #fff;  background-color: #5b1b39;}
.navbar-sub .navbar-nav-quin>li>a:hover, .navbar-sub .navbar-nav-quin>li>a:focus { color: #ffffff;  background-color: #5b1b39;}

.panel-quin { border-color: #42302C;}/*overwrites bootstrap primary panel colours*/
.panel-quin > .panel-heading {color: #ffffff; background-color: #8C2B59; border-color: #42302C;}
.panel-quin > .panel-heading + .panel-collapse > .panel-body { border-top-color: #42302C;}
.panel-quin > .panel-heading .badge { color: #ffffff;  background-color: #8C2B59;}
.panel-quin > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #42302C;}

.table-quin .pagination > li > a, .table-quin .pagination > li > span { color: #8C2B59; background-color: #fff; border: 1px solid #42302C;}
.table-quin .pagination > li > a:hover, .table-quin .pagination > li > span:hover, .table-quin .pagination > li > a:focus, .pagination > li > span:focus {color: #fff; background-color: #5b1b39; border-color: #42302C;}
.table-quin .pagination > .active > a, .table-quin .pagination > .active > span, .table-quin .pagination > .active > a:hover, .table-quin .pagination > .active > span:hover, .table-quin .pagination > .active > a:focus, .table-quin .pagination > .active > span:focus {  color: #fff; background-color: #8C2B59;  border-color: #42302C;}
/* end colour control */

/*dashboard chart style - SDH 19-11-2025 */
.chart-container {width: 90%; height: 90%;   margin: auto; }

/*marquee for BS5 */
.marquee-container {width: 100%;background-color: #f8f9fa; padding: 15px 0;border-top:3px solid #265b81}
.marquee-content {display: flex;animation: marquee 50s linear infinite;}
.marquee-item {flex: 0 0 auto;padding: 0 20px;font-size: 1.2rem;color: #495057;}

 @keyframes marquee {
   0% {transform: translateX(100%);}

   100% {transform: translateX(-100%);}
 }
 .marquee-container:hover .marquee-content {animation-play-state: paused;} /* Optional: Pause animation on hover */
 
 /*drag and drop customise dashboard - 25-11-2025 SDH */
 .drag-item {cursor:grab;}