.NotCheckedIn {
  background-color: #f1cb99;
}

.CheckedIn {
	background-color: #fb702a;
  }

.ReadyForCourt {
  background-color: #41cd41; 
}

.NoAppearance {
  background-color: #DC9999;
}

.InProgress {
  background-color: #f1f142;
}

.InCourt {
  background-color: #64afe5;
}

.StoodDown {
  background-color: #D3D3D3;
}

.Complete {
  background-color: #EE82EE;
}

.CollectingOrders {
	background-color: #c578f3;
} 

.Total {
	background-color: #88A0D1;
}

.StatusCountBox {	
	max-width: 120px;
	min-width: 70px;
	margin-right: 5px;
	padding: 5px;
	border-radius: 10px;
	box-shadow: 2px 2px 2px #888888;
	display: inline-block;
	text-align: center;
}

body, html, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, a  {
  font-family: 'Lato', sans-serif !important;
}

.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
  font-family: 'Lato', sans-serif !important;
}

.crmEntityFormView, .entitylist {
  border: none !important;
}

th { 
	background: white; 	
}

.table tr:nth-of-type(odd) { 
  background: #eee; 
}

.table td, th {
	text-align: left;
	padding: 8px; 
}

div .container-100 {
  width: 100%;
}

.has-search .form-control {
    padding-right: 12px;
    padding-left: 34px;
}

.has-search .form-control-feedback {
    right: initial;
    left: 12px;
    color: #ccc;
}

.row.equal {
	display: flex;
  	display: -webkit-flex;
  	flex-wrap: wrap;
}

.dfvllHomePanel {
    position: relative;
    background-color: #0b1923;
    height: 15rem;
    letter-spacing: 1.5px;
	background: #596a70; 
    background-image: linear-gradient(48deg, rgba(14,26,35,1) 18%, rgba(255,255,255,0.6) 75%); 
    background-size: cover; 
    background-repeat: no-repeat;  
    background-position: center center;
}

.dfvllHomePanelShadow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-box-shadow: inset 0px -30px 8px -20px #FFFFFF; 
    box-shadow: inset 0px -30px 8px -20px #FFFFFF;
}

.dfvllHomePanelInnerContainer {
	height: 100%;
	justify-content: center;
    display: flex;
    flex-direction: column;
}

.dfvllHomePanelHeading {
    max-width: 200px;
	color: #FFFFFF;
}

.btn.signInButton {
	width: 100%;
    max-width: 350px;
	background-color: #9AC02C;
	border: #9AC02C;
	color: #000;
}

.btn.signInButton.fullWidth {
    max-width: 100%;
}

.btn.signInButton:hover, .btn.signInButton:active {
	background-color: #add33f;
}

.courtListPanel {
	border: 1px solid #d3d3d3;
    border-radius: 10px;
	height: 100%;
	display: flex;
    flex-direction: column;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.courtListPanel-heading {
	background-color: #003254;
	color: #FFFFFF;
	padding: 10px;
	border-radius: 10px 10px 0 0;
}

.courtListPanel-headingImage {
	display: flex;
    justify-content: center;
}

.courtListPanel-headingImage img {
	max-width: 150px;
}

.courtListPanel-heading h3 {
	color: #FFF;
}

.courtListPanel-body {
    padding: 10px;
	display: flex;
    flex: 1 1 auto;
	color: #000;
}

.courtListPanel-footer {
	display: flex;
	justify-content: right;
}

.courtListButton {
	background-color: #003254;
	color: #FFFFFF;
	border-radius: 20px;
}

.text-decoration-none {
	text-decoration: none !important
}

.loginPanel .loginPanelRow {
    display: flex;
}

.loginBackground {
    background-color: #094D6B;
    border-radius: 0 20px 20px 0;
}

.loginBackgroundImageContainer {
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.loginBackgroundImage {
    max-height: 70px;
}

.loginTitle {
    font-weight: 500;
    line-height: 1.5rem;
    font-size: 1.1875em;
}

input.form-control.showdisabled, select.form-control.showdisabled {
    background-color: #eee !important;
}

/* ,
(min-device-width: 768px) and (max-device-width: 1024px) */
/* XS screen size */
@media 
only screen and (max-width: 767px)  {

	/* Force table to not be like tables anymore */
	.table table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.table tr {
		border-top: solid;
	}
	
	.table td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 110px !important; 

	}
	
	.table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 100px; 
		padding-right: 10px; 
		white-space: nowrap;
        content: attr(data-label);
	}

}

/* SM screen size & up */
@media 
only screen and (min-width: 768px) { 
	.dfvllHomePanelHeading {
        max-width: 800px;
    }
    .border-sm-right {
        border-right: 1px solid #dee2e6 !important;
    }
 }

/* MD screen size & up */
@media 
only screen and (min-width: 992px) { 
	.dfvllHomePanel {
        height: 15rem;
		background-size: auto 100%; 
        background-position: top right;
    }
    .dfvllHomePanelHeading {
        font-size: 4rem;
    }
    .loginPanel {
        border: 1px solid #dee2e6;
        box-shadow: 0 0.125rem 0.325rem rgba(0, 0, 0, 0.175);
        border-radius: 20px;
    }
    .loginBackgroundImage {
        max-height: 500px;
    }
    .p-md-5 { padding:3rem!important; }
 }

 
/* LG screen size & up */
@media 
only screen and (min-width: 1200px) { 
	.dfvllHomePanel {
        height: 30rem;
    }
    .dfvllHomePanelHeading {
        font-size: 6rem;
    }

 }

 @media print {
    a[href]:after {
      content: "" !important;
    }
    body, a, .a {
        font-size: 10px !important;
    }
  }

/* Bootstrap padding & margin classes - implemented in v4 */

.m-0 { margin:0!important; }
.m-1 { margin:.25rem!important; }
.m-2 { margin:.5rem!important; }
.m-3 { margin:1rem!important; }
.m-4 { margin:1.5rem!important; }
.m-5 { margin:3rem!important; }

.mt-0 { margin-top:0!important; }
.mr-0 { margin-right:0!important; }
.mb-0 { margin-bottom:0!important; }
.ml-0 { margin-left:0!important; }
.mx-0 { margin-left:0 !important;margin-right:0 !important; }
.my-0 { margin-top:0!important;margin-bottom:0!important; }

.mt-1 { margin-top:.25rem!important; }
.mr-1 { margin-right:.25rem!important; }
.mb-1 { margin-bottom:.25rem!important; }
.ml-1 { margin-left:.25rem!important; }
.mx-1 { margin-left:.25rem!important;margin-right:.25rem!important; }
.my-1 { margin-top:.25rem!important;margin-bottom:.25rem!important; }

.mt-2 { margin-top:.5rem!important; }
.mr-2 { margin-right:.5rem!important; }
.mb-2 { margin-bottom:.5rem!important; }
.ml-2 { margin-left:.5rem!important; }
.mx-2 { margin-right:.5rem!important;margin-left:.5rem!important; }
.my-2 { margin-top:.5rem!important;margin-bottom:.5rem!important; }

.mt-3 { margin-top:1rem!important; }
.mr-3 { margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 { margin-left:1rem!important; }
.mx-3 { margin-right:1rem!important;margin-left:1rem!important; }
.my-3 { margin-bottom:1rem!important;margin-top:1rem!important; }

.mt-4 { margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 { margin-left:1.5rem!important; }
.mx-4 { margin-right:1.5rem!important;margin-left:1.5rem!important; }
.my-4 { margin-top:1.5rem!important;margin-bottom:1.5rem!important; }

.mt-5 { margin-top:3rem!important; }
.mr-5 { margin-right:3rem!important; }
.mb-5 { margin-bottom:3rem!important; }
.ml-5 { margin-left:3rem!important; }
.mx-5 { margin-right:3rem!important;margin-left:3rem!important; }
.my-5 { margin-top:3rem!important;margin-bottom:3rem!important; }

.mt-auto { margin-top:auto!important; }
.mr-auto { margin-right:auto!important; }
.mb-auto { margin-bottom:auto!important; }
.ml-auto { margin-left:auto!important; }
.mx-auto { margin-right:auto!important;margin-left:auto!important; }
.my-auto { margin-bottom:auto!important;margin-top:auto!important; }

.p-0 { padding:0!important; }
.p-1 { padding:.25rem!important; }
.p-2 { padding:.5rem!important; }
.p-3 { padding:1rem!important; }
.p-4 { padding:1.5rem!important; }
.p-5 { padding:3rem!important; }

.pt-0 { padding-top:0!important; }
.pr-0 { padding-right:0!important; }
.pb-0 { padding-bottom:0!important; }
.pl-0 { padding-left:0!important; }                             
.px-0 { padding-left:0!important;padding-right:0!important; }
.py-0 { padding-top:0!important;padding-bottom:0!important; }

.pt-1 { padding-top:.25rem!important; }         
.pr-1 { padding-right:.25rem!important; }                       
.pb-1 { padding-bottom:.25rem!important; }      
.pl-1 { padding-left:.25rem!important; }                            
.px-1 { padding-left:.25rem!important;padding-right:.25rem!important; }
.py-1 { padding-top:.25rem!important;padding-bottom:.25rem!important; }

.pt-2 { padding-top:.5rem!important; }                                              
.pr-2 { padding-right:.5rem!important; }                                
.pb-2 { padding-bottom:.5rem!important; }               
.pl-2 { padding-left:.5rem!important; }                                             
.px-2 { padding-right:.5rem!important;padding-left:.5rem!important; }
.py-2 { padding-top:.5rem!important;padding-bottom:.5rem!important; }

.pt-3 { padding-top:1rem!important; }                               
.pr-3 { padding-right:1rem!important; }             
.pb-3 { padding-bottom:1rem!important; }                
.pl-3 { padding-left:1rem!important; }                              
.py-3 { padding-bottom:1rem!important;padding-top:1rem!important; }
.px-3 { padding-right:1rem!important;padding-left:1rem!important; }

.pt-4 { padding-top:1.5rem!important; }                             
.pr-4 { padding-right:1.5rem!important; }               
.pb-4 { padding-bottom:1.5rem!important; }              
.pl-4 { padding-left:1.5rem!important; }                                
.px-4 { padding-right:1.5rem!important;padding-left:1.5rem!important; }
.py-4 { padding-top:1.5rem!important;padding-bottom:1.5rem!important; }

.pt-5 { padding-top:3rem!important; }   
.pr-5 { padding-right:3rem!important; } 
.pb-5 { padding-bottom:3rem!important; }    
.pl-5 { padding-left:3rem!important; }  
.px-5 { padding-right:3rem!important;padding-left:3rem!important; }
.py-5 { padding-top:3rem!important;padding-bottom:3rem!important; }

/* Bootstrap classes for 5 columns - polyfill for bootstrap 3 as .col class isn't available */

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

/* Bootstrap accordion polyfill */

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e114"; 
    float: right; 
    color: grey; 
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080"; 
}
    
.accordion-toggle .panel-heading .panel-title:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e114"; 
    float: right; 
    color: grey; 
}
.accordion-toggle.collapsed .panel-heading .panel-title:after {
    /* symbol for "collapsed" panels */
    content: "\e080"; 
}