body{
	margin:0;
	background-color:var(--brand-background); 
	padding-bottom: 0px !important;
	font-family: var(--bs-font-sans-serif);
}

.divShow{
    display:block;
}
.divHide{
    display:none;
}

.rowShow{
    display:table-row;
}
.rowHide{
    display:none;
}

.desktop-show{
    display:none;
}
.desktop-hide{
    display:block;
}

@media(min-width:1251px){
.desktop-show{
    display:block;
}
.desktop-hide{
    display:none;
}
}


.brand-h1, .brand-h2, .brand-h3, .brand-h4{
	font-family: var(--brand-font);	
}

.brand-p{
	font-size: 1.25rem;
    font-weight: 500;
	color:var(--brand-colour-1);
	font-family: var(--bs-font-sans-serif);
}

.reverse{
	color:white;
}

.brand-p-reverse{
    font-size: 1rem;
    font-weight: 300;
	color:white;
	font-family: var(--bs-font-sans-serif);  
}

.divide{
 height: 0.25em !important;
}

.pageLink{
	cursor:pointer;
}

.pull-left{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}
.pull-center{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
}
.pull-right{
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
}

.brand-button{
    color:VAR(--brand-text-2);
    background-color: VAR(--brand-colour-3);
    font-weight: 500;
    min-width: 160px;
    max-width: 250px;
    width: 100%;
}

.brand-header-bar{
    position: fixed;
    top:0;
    left:0;
    right:0;	
    z-index: 10;
    background-color:VAR(--brand-background); 
    margin-right: auto;
    margin-left: auto;
    padding: 0.5em;
    color: var(--brand-bar-text);
    border-bottom: solid 1px #000000;
}

.brand-navbar{
    height:3em;
}

.brand-header-nav-links{
    display: none;
}

@media(min-width:1251px){
.brand-header-nav-links{
    height:2em;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    width:100%;
}
}

.brand-header-nav-links a{
    color: var(--brand-bar-text);
    text-decoration: none;
}

.brand-header-nav-links a:hover{
    color: var(--brand-bar-text);
    text-decoration: none;
}
.brand-header-nav-links a:hover{
    color: var(--brand-bar-text);
    text-decoration: none;
}

.brand-header-nav-icons{
    box-shadow:none;
}

.brand-header-nav-icons:focus{
    box-shadow:none;
}

.mainBannerDesktop{
    display: none;
}
.mainBannerMobile{
    display: none;
}

@media(max-width:700px){
    .mainBannerDesktop{
        display: none;
    }
    .mainBannerMobile{
        display: unset;
        margin-top: 30px;
    }
}
@media(min-width:700px){
    .mainBannerDesktop{
        display: unset;
    }
    .mainBannerMobile{
        display: none;
    }
}


.brandNavCollapse{
    z-index: 20;
    /* position: absolute; */
    width: 100%;
    background-color: VAR(--brand-background);
    color: var(--brand-bar-text);
    padding: 0.5em;
    border-bottom: solid 2px var(--brand-colour-4);
    margin-bottom: 2em;
}

.brandNavCollapseItem{
    text-align: left;
}
.brandNavCollapseLink{
    display: block;
    padding: 0.5rem 1rem;
    color: var(--brand-bar-text);
    text-decoration: none;
    transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out;
    font-size:1.5em;
}

.brandNavCollapseLink a{
    color: var(--brand-bar-text);
    text-decoration: underline;
}
.brandNavCollapseLink a:hover{
    color:var(--brand-colour-4);
    text-decoration: underline;
}
.brandNavCollapseLink a:active{
    color:var(--brand-colour-4);
    text-decoration: underline;
}

.brandNavQuicklinks{
    height: 100%;
    display: none;
    align-items: center;
    color: #fff;
}
@media(min-width:1250px){
    .brandNavQuicklinks{
        display: flex;
    }
}

.quickLink a{
    padding: 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--brand-bar-text);
    cursor: auto;
}


.brand-section-main-text{
    color: var(--brand-text);
}

.brand-section{
    margin-bottom:2em;
}


.brand-section-strip{
    background-color: var(--brand-background-2);
    padding-top: 3em;
    padding-bottom: 2em;
}

.brand-dashboard-strip{
    background-color: var(--brand-background-2);
    padding-top: 3em;
    padding-bottom: 2em;
}

/* stage style */
.statusDefault{
	background-color:grey !important; 
	color:white !important; 
}
.statusPrimary{
	background-color:yellow !important;  
	color:black !important; 
}
.statusSecondary{
	background-color:orange !important;  
	color:black !important; 
}
.statusAwaiting{
	background-color:lightgreen !important;  
	color:black !important; 
}
.statusSuccess{
	background-color:green !important; 
	color:white !important; 
}
.statusDanger{
	background-color:red !important;  
	color:white !important; 
}


/* panels */
.dashpanel {
    height: 100%; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 999; /* Stay on top */
    top: 0;
    left: 0;
    background-color: var(--brand-bar); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    /*padding-top: 20px;  Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in*/
    border-right: var(--brand-panel-text) solid 1px;
  }

  .dashpanel h4 {
    margin-right: 20px; /* Place content 60px from the right */	
  }
  .dashpanel p {
    margin-right: 20px; /* Place content 60px from the right */	
  }
  
  .dashpanelbody{
      padding:10px;
  }
  

.dashNavContainer{
    z-index: 20;
    /* position: absolute; */
    width: 100%;
    background-color: var(--brand-bar);
    color: var(--brand-bar-text);
    padding: 0.5em;
    border-bottom: solid 2px var(--brand-colour-4);
    margin-bottom: 2em;
}
.dashNavBody{
	display:flex;
	flex-direction: column;
	padding-left: 0;
	list-style: none;
	margin-bottom:1em;
}

.dashNavBodyItem{
    text-align: left;
}
.dashNavBodyHeader{
    display: block;
    padding: 0.2rem 0rem;
    color: var(--brand-bar-text);
    text-decoration: none;
    transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out;
    font-size:1em;
	font-weight:bold;
	margin:0px;
}
.dashNavBodyLink{
    display: block;
    padding: 0.2rem 1rem;
    color: var(--brand-bar-text);
    text-decoration: none;
    transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out;
    font-size:1em;
}

.dashNavBodyLink a{
    color: var(--brand-bar-text);
    text-decoration: underline;
}
.dashNavBodyLink a:hover{
    color:var(--brand-colour-4);
    text-decoration: underline;
}
.dashNavBodyLink a:active{
    color:var(--brand-colour-4);
    text-decoration: underline;
}



  
  /* Position and style the close button (top right corner) */
  .dashpanel .closebtn {
      position: absolute;
      top: 0;
      right: 0px;
      font-size: 20px;
      font-weight:bold;
      margin-right: 0px;
      color: var(--brand-bar-text);
      padding-right: 26px;
	  text-decoration: none;
  }
  
  .dashpanelfooter {
    /*  position: absolute;
      bottom: 0;
      right: 0;*/
      width: 100%;
      background-color: var(--brand-panel-footer-background);
      color: var(--brand-panel-footer-text);	
      
  }






.sidepanel {
    height: 100%; /* Specify a height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 999; /* Stay on top */
    top: 0;
    right: 0;
    background-color: var(--brand-panel-background); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    /*padding-top: 20px;  Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in*/
    border-left: var(--brand-panel-text) solid 1px;
  }
  .sidepanel h4 {
    margin-right: 20px; /* Place content 60px from the right */	
  }
  .sidepanel p {
    margin-right: 20px; /* Place content 60px from the right */	
  }
  
  .sidepanelbody{
      padding:10px;
  }
  
  /* The cartpanel links */
  .sidepanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: var(--brand-panel-text);
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidepanel a:hover {
    color: #f1f1f1;
  }
  
  /* Position and style the close button (top right corner) */
  .sidepanel .closebtn {
      position: absolute;
      top: 0;
      right: 0px;
      font-size: 20px;
      font-weight:bold;
      margin-right: 0px;
      color: var(--brand-panel-icon);
      padding-right: 26px;
  }
  
  .sidepanelfooter {
    /*  position: absolute;
      bottom: 0;
      right: 0;*/
      width: 100%;
      background-color: var(--brand-panel-footer-background);
      color: var(--brand-panel-footer-text);	
      
  }

.progressMarker{
	border-radius: 50%;
	height:20px;
	width:20px;
	margin-right: 5px;
}

/* social buttons */
/* Style all font awesome icons */
.fa {
    padding: 0.5em;
    font-size: 1.25em;
    width: 2em;
    border-radius: 50%;
    text-decoration: none;
    text-align: center;
    margin: 0.25em;
}
    
/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}
    
/* Set a specific color for each brand */
    
/* Facebook */
.fa-facebook {
    background-color: var(--brand-colour-2);
    color: var(--brand-colour-4);
}
    
/* Twitter */
.fa-instagram {
    background-color: var(--brand-colour-2);
    color: var(--brand-colour-4);
}
       
/*footer*/
.footer-container{ 
    margin-top:20px;
    background-color:var(--brand-footer-background); 
    color: var(--brand-colour-1);
    z-index: 15; 
    max-width: var(--page-width);
    margin: 0 auto;
}

.footer-strip-1{
    background-color:var(--brand-colour-3);
}

.footer-strip-2{
    background-color:var(--brand-colour-4);
}
.footer-strip-3{
    background-color:var(--brand-background);
}

.footer-banner
{
    padding-top: 1em;
    padding-bottom: 0.5em;
}
  
.footer-brand-header{
    font-size: 1em;
    color:var(--brand-footer-text);
    font-family: var(--brand-font);	
    text-decoration: none;
}
.footer-brand-p{
    font-size: 1em;
    color:var(--brand-footer-text);
    font-weight: bold;
}
@media(min-width:800px){
.footer-brand-header{
    font-size: 1.5em;
}
.footer-brand-p{
    font-size: 1.25em;
    font-weight:unset;
}
}  



.footer-nav-bar a
{
    color:var(--brand-colour-4);
    text-decoration: none;
    margin-right:1em;
}

.footer-nav-bar a:hover{
    color:var(--brand-colour-3) !important;
}
.footer-nav-bar a:active{
    color:var(--brand-colour-3) !important;
}