/* Used for Dashboard specific ie back end only CSS */

input[type=text], input[type=number], input[type=email], .dropdown-toggle, .input-group>.form-control {height: 32px;line-height: 32px !important;}
.input-group>.bootstrap-select.form-control {border: 1px solid #ced4da;}
.input-group>.input-group-append>.btn { height: 100%; }
select {height: 40px !important;}
/* .dropdown { height: 33px !important;} */
.btn  {padding: 5px 10px;}
.js-calendar {width:360px;}
.filter-option {height: 30px !important;}
.double-scroll {width: 100%;}
.table-responsive {  overflow-x: unset !important;  }
/* Fix for tables with dropdown options that increase table div width when menu is expanded */
.table-innercontainer .table-responsive { /* overflow-x: unset !important; */ }
.table-innercontainer .table-responsive .dropdown-menu {/* overflow: visible !important; *//* will-change: initial !important; */transform: none !important;}

.grouplisttable [class*="mobilesummary"], .datelisttable [class*="mobilesummary"], #viewIncident [class*="mobilesummary"] { display: none; }

@media only screen and (min-width: 801px){
	.desktopHide { display: none !important; }
}

@media only screen and (max-width: 800px) {
	
	.mobileHide { display: none !important; }

    .grouplisttable .odd, .mobiledatatable .odd { background-color: #ffffff; }
	.grouplisttable .even, .mobiledatatable .even { /*background-color: #cfcfcf;*/ background-color: #F1F2F3; }
	.grouplisttable .even td {/* border-bottom: 1px solid #b7b1b1 !important; */}
	.grouplisttable td, .mobiledatatable {border-bottom: none;}
			
	/* Force table to not be like tables anymore */
	.grouplisttable, .datelisttable, .mobiledatatable,
	.grouplisttable thead, .datelisttable thead, .mobiledatatable thead,
	.grouplisttable tbody, .datelisttable tbody, .mobiledatatable tbody,
	.grouplisttable th, .datelisttable th, .mobiledatatable th,
	.grouplisttable td, .datelisttable td, .mobiledatatable td,
	.grouplisttable tr, .datelisttable tr, .mobiledatatable tr
	{ 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.mobiledatatable thead tr th thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.grouplisttable thead tr th, .datelisttable thead tr th, .mobiledatatable tr th, #viewIncidents tr th {
		display: none;
	}

    /* Modify table headers - display only Name and Contact/Actions (latter label depends on View selected) */
	.grouplisttable thead, .datelisttable thead, .mobiledatatable thead, #viewIncidents thead
	{ clear: both; overflow: auto; } 
	
    .grouplisttable thead tr th:nth-of-type(3), 
    .datelisttable thead tr th:nth-of-type(2),
    .onthenighttable.main thead tr th:nth-of-type(2),
    .expectedptable.main thead tr th:nth-of-type(2) {
    	display: block;
    	float: left;
    	width: 75% !important;
    	border-bottom: 2px solid var(--blue);
    }
	.grouplisttable thead tr th.contactHeader, 
	.datelisttable thead tr th:nth-of-type(8),
	.onthenighttable.main thead tr th:nth-of-type(7),
	.expectedptable.main thead tr th:last-of-type {
		display: block;
		float: left;
		text-align: right;
		width: 25% !important;
		border-bottom: 2px solid var(--blue);
	}
	#viewIncidents tr th:last-of-type {
		display: block;
		border-bottom: 2px solid var(--blue);
	}
	/* Ensure th border is at a consistent level */
    .expectedptable.main thead tr th {height: 44px;}
    .expectedptable.main thead tr th:nth-of-type(2) {
    	display: inline-block;
    	float: left;
    	width: 60% !important;
    	border-bottom: 2px solid var(--blue);
    }	
	.expectedptable.main thead tr th:last-of-type {
		display: inline-block;
		float: left;
		text-align: right;
		width: 40% !important;
		border-bottom: 2px solid var(--blue);
	}    
    /* End */

    .grouplisttable tr, .datelisttable tr, .mobiledatatable tr { /* border: 1px solid #ccc; */ border: none; }
    .grouplisttable tr[class^="mobilesummary"], .datelisttable tr[class^="mobilesummary"] { border: none; }
    .grouplisttable [class^="sectiontableentry"] td, .datelisttable [class^="sectiontableentry"]
    {margin-left: 30px;}

	/* New trial method for toggling sections */
    .grouplisttable [class^="sectiontableentry"] td { margin-left: 0; }
    .grouplisttable [class^="sectiontableentry"] td:not(.summary) { margin-left: 30px; }
    .grouplisttable [class^="sectiontableentry"].unitDivider td { margin-left: 0; padding-left: 10px !important; }

 
	.table.grouplisttable td, .table.datelisttable td,
	.table.mobiledatatable td  { 
		/* Behave  like a "row" */
		border: none;
		/* border-bottom: 1px solid #eee; */
		border-bottom: none;
		position: relative;
		/* padding-left: 50% !important; */
		white-space: normal;
		text-align:left !important;
		padding: 5px 5px 5px 0px !important;
	}

	.table.datelisttable td { 
		/* padding-left: 0 !important; */
		padding-left: 10px !important;
	 }
 
	.table.grouplisttable td:before, .table.datelisttable td:before,
	.table.mobiledatatable td:before { 
		/* Now like a table header */
		/* position: absolute; */
		/* Top/left values mimic padding */
		/* top: 6px; */
		/* left: 6px; */
		/* left: 0; */
		/* width: 45%; */
		padding-right: 5px;
		/* white-space: nowrap; */
		/* min-height: 42px; */
		text-align:left;
		font-weight: bold;
	}


	/*
	Label the data
	*/
	.grouplisttable td:before, .mobiledatatable td:before { content: attr(data-label)':'; }
	.datelisttable td:before { /* content: attr(data-label)':'; */ }
	.grouplisttable td.dataCheckbox, .datelisttable td.dataCheckbox { display: none; }

    .grouplisttable .parentDetails {float: left;width: 50%;}
    .grouplisttable .parentDetails td { margin-left: 6px !important; margin-right: 6px !important; }
    .grouplisttable .parentDetails td[data-label="Surname"] { display: block; }


    .grouplisttable td.parent1, .grouplisttable td.parent2 { color: #f0f1f3;border-bottom: 1px solid #C4C4C4;}
    .grouplisttable .even td.parent1, .grouplisttable .even td.parent2 { color: #cfcfcf; border-bottom: 1px solid #000000; }
    .grouplisttable td.parent1:before, .grouplisttable td.parent2:before { content: attr(data-label); color: var(--navy); }
    .grouplisttable td.parent2 {/* padding-top: 30px !important; */}

    .grouplisttable .parentDetails td[data-label="Contact"]:before { content: none; }

    .grouplisttable .mobileSpacer { display: block !important; clear: both; }
    .grouplisttable .mobileSpacer td:before { content: none; }

    /* Extra rules */
	.grouplisttable td.summary:before 
	{ content: none; display: none; }
	.grouplisttable td.summary 
	{padding-left: 6px !important;height: 85px;}
	.grouplisttable td.summary .checkbox 
	{width: 36px;padding-right: 20px;}
    .grouplisttable td.summary .name 
    {vertical-align: top;}
    .grouplisttable td.summary .contact
    {float: right;background: var(--darkblue);border-radius: 5px;display: flex;flex-direction: column;justify-content: center;line-height: 1;}
    .grouplisttable td.summary .contact .fa 
    {/* color:#ffffff; */color: var(--navy);font-size: 2rem;}
    .grouplisttable td.summary .contact a
    {width: 25px;height: 25px;display: block;/* line-height: 50px; *//* margin: 2px 10px 2px 10px; */float: none;}

    
    .grouplisttable td.summary .toggleCard,
	#viewIncidents tr td .toggleCard
    {clear: both;float: right;width: 28px;height: 28px;cursor: pointer;background-image: url(/components/com_jlgb/assets/programming/open-navy-transparentbg.png);background-size: cover;background-position: center center;background-repeat: no-repeat;}

	#viewIncidents tr td .toggleCard { float: none; }
	
	/* New trial method for toggling sections */
    .grouplisttable tr td { display: block; }

    .grouplisttable tr.closedfa td.summary .toggleCard,
	#viewIncidents tr.closedfa td .toggleCard
    {background-image: url(/components/com_jlgb/assets/programming/close-navy-transparentbg.png);}

    .grouplisttable tr.closedfa td:not(.summary) { display: none; }
    

    .grouplisttable td[data-label="First Name"],
    .grouplisttable td[data-label="Surname"] 
    { display: none; }

    /* Always show summary row in mobile view */
	.grouplisttable [class*="mobilesummary"], .datelisttable [class*="mobilesummary"] { display: block !important; }
   

    /* Never show below fields in mobile view */
    .grouplisttable tr td.dataCheckbox  { display: none !important; }

    .grouplisttable tr.closedfa td[data-label="First Name"],
    .grouplisttable tr.closedfa td[data-label="Surname"]  
    { display: none !important; }

    .grouplisttable tr.closedfa td.dataCheckbox  { display: none !important; }
    .grouplisttable tr.closedfa td[data-label="First Name"]
    .grouplisttable tr.closedfa td[data-label="Surname"] 
    { display: none !important; }

    /* Details container */
    .grouplisttable td.summary .details
    {position: absolute;top: 8px;left: 30px;width: calc(100% - 94px);}

    .grouplisttable td.summary .details span,
    .grouplisttable td.summary .details div 
    { margin-bottom: 5px; }

    /* Fix right buttons in correct place */
    .grouplisttable td.summary .contact
    { background: transparent; position: absolute; top: 8px; right: 6px; }

    .grouplisttable td.summary .toggleCard
    { position: absolute; bottom: 8px; right: 6px; }

    /* Prevent hover background incorrectly appearing */
    .grouplisttable .odd:hover, .mobiledatatable .odd:hover
    {background: initial;}

	.grouplisttable .even:hover, .mobiledatatable .even:hover {
		background-color: #cfcfcf;
	}


    /* VIEWS */
    /* All Views */
    .grouplisttable .summary .name {font-weight: bold;}

	/* Default views - will only be Promotions and OCN views when all code done */
    .grouplisttable.ocn .summary .primaryLocalGroup, .grouplisttable.promotion .summary .primaryLocalGroup 
    { display: block !important; }

    .grouplisttable.ocn td[data-label="Primary Local Group"], .grouplisttable.promotion td[data-label="Primary Local Group"] 
    {display: none;}

    /* Contact details view */
    /* UPDATE Dec 2021 */
    .grouplisttable.contactdetails td.summary {/*height: 118px !important;*/height: 64px;padding: 15px 6px 10px 6px !important;}
    .grouplisttable.contactdetails td.summary .details {width: calc(100% - 124px);top: 15px;}
    .grouplisttable.contactdetails td.summary .contact {top: 15px;right: 63px;width: 25px;height: 25px;background: transparent;}
    .grouplisttable.contactdetails td.summary .toggleCard {float: right;bottom: auto;top: 16px;}
    .grouplisttable.contactdetails [data-label="Primary Local Group"] { display: none; }
    /* END */    
    
    .grouplisttable.contactdetails .summary .primaryLocalGroup {display: block !important;}    
    .grouplisttable.contactdetails .summary .parentdetails {display: block !important;}
    .grouplisttable.contactdetails .summary .parentdetails .fathermobile {margin-bottom: 10px !important;}
    
    /* New */
    .grouplisttable.contactdetails td[data-label="Actions"] { display: flex; }
    .grouplisttable.contactdetails td[data-label="Actions"] select { }
    .grouplisttable.contactdetails td[data-label="Actions"]:before { line-height: 24px; }
    /* End */

    /* Birthdays view */   
    /* Set fields to display */
    .grouplisttable.birthdays .localGroup {display: none !important;}
    /* Info that is already shown in summary row */
    .grouplisttable.birthdays td[data-label="Age"] { display: none; }
    .grouplisttable.birthdays td[data-label="Days Until"] { display: none; }

	.grouplisttable.birthdays td.summary .age {display: none;}
    .grouplisttable.birthdays td.summary .DOB {display: block !important;}        
 
    /* Set row height */
    .grouplisttable td.summary.birthdayView {height: 100px;}


    /* Attendance Overview view */   
    /* Set fields to display */
    .grouplisttable.attendance .summary .lastAttended {display: block !important;}
    .grouplisttable.attendance .summary .primaryLocalGroup {display: block !important;}

    .grouplisttable.attendance .summary .contact { display: none !important; }
    .grouplisttable.attendance .summary .actions {display: block !important;width: 130px;position: absolute; top: 8px; right: 6px; }
    
    /* Local Group Management view */
    .grouplisttable.localgroupmanagement .summary .primaryLocalGroup {display: block !important;}
    .grouplisttable.localgroupmanagement .summary .role {display: block !important;}
    .grouplisttable.localgroupmanagement td[data-label="Notes"] a {display: inline-block;color: #ffffff;background-color: var(--navy);padding: 5px 5px;border-radius: 5px;min-width: 30px;text-align: center;}

    .grouplisttable.localgroupmanagement .summary .contact { display: none !important; }
    .grouplisttable.localgroupmanagement .summary .actions {display: block !important;width: 130px;position: absolute; top: 8px; right: 6px; }

    /* Statutory Requirements view */
    .grouplisttable.statutoryrequirements .summary .role {display: block !important;}
    .grouplisttable.statutoryrequirements .summary .statuoryRequirementsDetails {display: block !important;}
    .grouplisttable.statutoryrequirements .summary .statuoryRequirementsDetails div { display: inline-block;  }
    .grouplisttable.statutoryrequirements .summary .statuoryRequirementsDetails div i {font-size: 150%;padding-right: 10px;}

    .grouplisttable.statutoryrequirements .summary .contact { display: none !important; }
    .grouplisttable.statutoryrequirements .summary .actions {display: block !important;width: 130px;position: absolute; top: 8px; right: 6px; }
	
    /* Dates view */
    /* .datelisttable tbody td:before { padding-left: 10px; } */
    .table.datelisttable tbody tr {position: relative;}
    .table.datelisttable .date {font-weight: bold;padding-top: 16px !important;}
    .table.datelisttable .staff:after { content: 'Staff'; padding-left: 5px; }
    .table.datelisttable .sgts:after { content: 'Sgts'; padding-left: 5px; }
    .table.datelisttable .members:after { content: 'Members'; padding-left: 5px; }

    .table.datelisttable .actions {position: absolute;top: 0;padding-top: 16px !important;right: 9px;/* width: 130px; */padding-right: 0 !important;}
    .table.datelisttable .actions a {display: block;color: #ffffff;background-color: var(--navy);padding: 10px 10px;border-radius: 5px;min-width: 65px;text-align: center;}
    .table.datelisttable .actions a.hollowbutton { background-color: #ffffff; color: var(--navy); border: 2px solid var(--navy); }

	
    /* Mobile data tables */
    .table.mobiledatatable tbody tr td:first-of-type { }

    /* Smaller version of collapsible cards for subsections */
    .tablefilter .mobile .card {margin-bottom: 5px;}
    .tablefilter .mobile .card .card-header {border-radius: calc(.25rem - 1px) calc(.25rem - 1px) calc(.25rem - 1px) calc(.25rem - 1px);}
    .tablefilter .mobile .card.open .card-header { border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0; }
    .tablefilter .mobile .card.open { border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px); }
    .tablefilter .mobile .card .card-header .componentheading {font-size: 120%;color: #ffffff;padding: 10px 0px 10px 0px;height: 50px;}
    .tablefilter .mobile .card .card-header .componentheading .mobileTogglePanel {width: 30px;height: 30px;background-size: 30px 30px;}

    /* On the Night view */
    .paradedetails .container-fluid { padding: 0; }
    
    .paradedetails .summary { display: none; }
    .paradedetails .mobile { display: block;}
        
    .onthenighttable.main tbody tr { position: relative; }
    .onthenighttable.main tbody td {padding-left: 8px !important;}
    .onthenighttable.main .memberid { display: none; }
    .onthenighttable.main .firstname, .onthenighttable.main .surname { display: inline-block; font-weight: bold; }
    .onthenighttable.main .firstname {padding-right: 5px !important;}
    .onthenighttable.main .surname {padding-left: 0 !important;}
    .onthenighttable.main .firstname:before, .onthenighttable.main .surname:before, .onthenighttable.main .attended:before { display: none; }

    .onthenighttable.main .attended {position: absolute;top: 8px;right: 9px;/* width: 130px; */padding-right: 0 !important;}
    .onthenighttable.main .attended i { font-size: 180%; padding-left: 10px; }

    /* Expected Parade Att view */
    .paradedetails .container-fluid { padding: 0; }
    .expectedptable.main input[type=checkbox] { width: 1.5rem; height: 1.5rem; border: 1px solid var(--navy); }
    .expectedptable.main thead th { line-height: auto; }
    .expectedptable.main thead th span, .expectedptable.main thead input {line-height: 100%;vertical-align: bottom;}
    .expectedptable.main tbody tr { position: relative; }
    .expectedptable.main tbody td {padding-left: 8px !important;}
    .expectedptable.main tbody td label { display: inline-block; }
    .expectedptable.main .name { font-weight: bold; padding-bottom: 0 !important;}
    .expectedptable.main .rankid { /*display: none;*/ }
    .expectedptable.main .firstname, .expectedptable.main .surname { /*display: inline-block;*/ display: none; }
    .expectedptable.main .name:before, .expectedptable.main .rankid:before { display: none; }
    /*
    .expectedptable.main .firstname {padding-right: 5px !important;}
    .expectedptable.main .surname {padding-left: 0 !important;}
    */
    .expectedptable.main .firstname:before, .expectedptable.main .surname:before, .expectedptable.main .confirmed:before, .expectedptable.main .bubbledropdown:before { display: none; }
    /* 
    .expectedptable.main .firstname:before { display: inline-block; content: 'Name:'; font-weight: bold;}
    */
    .expectedptable.main .bubbledropdown select { width: 210px; }        

    .expectedptable.main .confirmed {position: absolute;top: 0;right: 9px;/* width: 130px; */padding-right: 0 !important;}


	/* Incident Reports page */
	#viewIncidents .summary .category { font-weight: bold; }
	#viewIncidents .summary .status span { display: inline-block; padding: 0px 10px 0px 10px; }
	#viewIncidents .summary .edit {position: absolute;right: 45px;}
	#viewIncidents .summary .edit a:nth-of-type(1) { display: none; }
	#viewIncidents .summary .edit a:nth-of-type(2) {font-size: 210%;}
	#viewIncidents .grouplisttable td.summary .toggleCard {bottom: auto;}
	#viewIncidents td[data-label="Type"] {/* display:none; */}
	#viewIncidents td[data-label="Category"] {display:none;}
	#viewIncidents td[data-label="Date"] {display:none;}
	#viewIncidents td[data-label="Status"] {display:none;}
	#viewIncidents td[data-label="Edit"] {display:none;}
	
    /* Popups */
    .grouplistpage #contactPopup #contactName {padding: 0px 0px 15px 0px;}

    .grouplistpage #contactPopup label, .grouplistpage #parentContactPopup label  {font-weight: bold;text-transform: none;display: inline-block;padding: 0px 3px 0px 0px;}
    .grouplistpage #contactPopup .contactNumbers span, .grouplistpage #parentContactPopup .contactNumbers span { vertical-align: middle; }
    .grouplistpage #contactPopup .contactNumbers div, .grouplistpage #parentContactPopup .contactNumbers div { display: flex; align-items: center; color: var(--navy); margin: 0px 0px 17px 0px; }
    .grouplistpage #contactPopup .contactNumbers div:last-of-type, .grouplistpage #parentContactPopup .contactNumbers div:last-of-type { margin: 0px 0px 0px 0px; }
    .grouplistpage #contactPopup .contactNumbers a, .grouplistpage #parentContactPopup .contactNumbers a { display: inline-block; width: 46px; }
    .grouplistpage #contactPopup .contactNumbers a i:before, .grouplistpage #parentContactPopup .contactNumbers a i:before {font-size: 235%;}
    .grouplistpage #contactPopup .contactNumbers a i.fa-phone, .grouplistpage #parentContactPopup .contactNumbers a i.fa-phone {font-size: 120%;}

}

@media only screen and (max-width: 600px) {
	.expectedptable.main thead tr th:nth-of-type(2) {width: 40% !important;}
	.expectedptable.main thead tr th:last-of-type {width: 60% !important;}
}

@media only screen and (max-width:425px) {
	.table-innercontainer .pagenumber,
	.table-innercontainer .tablecontrols-container,
	.table-innercontainer .tablecheckboxcontrols { padding: 0px 5px 0px 5px;}
	.table-innercontainer .tablecheckboxcontrols label {padding: 0px 0px 0px 0px;margin-left: 6px;}
}

@media only screen and (max-width: 375px) {
	 /* Attendance Overview view */
	 .grouplisttable.attendance td.summary {height: 115px;}
	 .grouplisttable.attendance .summary .actions {right: auto;left: 30px;top: auto;bottom: 15px;width: calc(100% - 80px);}
	 
	[data-view="reports"][data-layout="incidents"] #incidentModal .modal-footer { display: block; text-align: center; }
	[data-view="reports"][data-layout="incidents"] #incidentModal .modal-footer button { width: 100%;min-width: 191px;margin: 0px 0px 10px 0px !important; }	 
}


@media only screen and (max-width: 320px) {
    /* Dates view */
    .table.datelisttable .date {width: 50%;}
}



label .normaltext {font-weight: normal;}

.card-body label { font-weight: 700; }
.card-body label small { font-weight: 600; }

.center_block {
    font-size: 10pt;
}
.componentheading {
    font-weight: bold;
    font-size: 14pt;
}
#container .center_block h2 {
    margin-top: 10px;
    font-size: 12pt;
}
#container .center_block dl.tabs dt {
    float:left;
    margin-right: 10px;
    background-color: #4d5ea4;
    padding: 5px;
    margin: 0 2px 2px 0;
}
#container .center_block dl.tabs dt span a, dl.tabs dt span {
    white-space: nowrap;
    font-size: 13px;
    text-decoration: none;
    color: #ffffff;
    font-weight: normal;
}
#container .center_block div.current {
    clear: both;
}
#container .center_block dd.tabs, dl.tabs + div.current dd {
    margin: 0;
}
#container .center_block table {
    width: auto;
}
#container .center_block tbody th,
#container .center_block thead th {
    text-align: left;
    padding-right: 5px;
}
#container .center_block table,
#container .center_block tbody td,
#container .center_block tbody th,
#container .center_block thead th,
#container .center_block thead {
    border: none;
}
#container .center_block table.spaced,
#container .center_block .spaced tbody td,
#container .center_block .spaced tbody th,
#container .center_block .spaced thead th,
#container .center_block .spaced thead {
    padding: 5px;
}
#container .center_block tr.sectiontableheader {
    background-color: #4d5ea4;
    color: #ffffff;
}

#container .center_block tr.sectiontableheader a {
	color: #ffffff;
}

#container .center_block tr.sectiontableheader th {
    font-weight: normal;
    white-space: nowrap;
    padding: 5px 4px 5px 1px;
}
#container .center_block tr.sectiontableentry1 td {
    padding: 2px 4px 2px 1px;
    border-bottom: 1px dotted #4d5ea4;
}
#container .center_block tr.sectiontableentry2 td {
    padding: 2px 4px 2px 1px;
    border-bottom: 1px dotted #4d5ea4;
}
#container .center_block tr:nth-child(2n) {
    background-color: #eeeeee;
}
#container .center_block .nobanding tr:nth-child(2n) {
    background: none;
}
#container .center_block td.center {
    text-align: center;
}
#container .center_block .noteForm {
    padding: 3px;
    background-color: #eee;
}
#container .center_block .noteForm.noteFormState-closed {
    opacity: 0.3;
}
#container .center_block .noteForm.noteFormState-closed:hover {
    opacity: 1;
}
#container .center_block .noteForm.noteFormState-overdue {
    border: 1px solid red;
}

#container .center_block .button {
    font-size: 15px;
    color: #000000;
    padding: 2px 7px;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 3px #666666;
    -moz-box-shadow: 0px 1px 3px #666666;
    box-shadow: 0px 1px 3px #666666;
    text-shadow: 1px 1px 3px #666666;
    border: solid #87d05d 0px;
    background: #87d05d;
    margin-bottom: 2px; /*SLC*/
}

#container .center_block .button.small {
    font-size: 12px;
    padding: 1px 5px;
    -moz-border-radius: 3px; 
    border-radius: 3px;
}

#container .center_block .button:hover {
    background: #59a72b;
}
.invalid {
	/*
    background-color: #b23143;
    color: #ffffff;
    */
	border: solid 4px #f94e50 !important;
}
/* .invalid:focus { outline: solid 4px red; } */
.hide {
    display: none;
}
input.nohide {
    display: inline;
}
hr {
    border-color: #4d5ea4;
}

/* Example tokeninput style #1: Token vertical list*/
ul.token-input-list {
    overflow: hidden; 
    height: auto !important; 
    height: 1%;
    width: 180px;
    border: 1px solid #999;
    cursor: text;
    font-size: 12px;
    font-family: Verdana;
    z-index: 999;
    margin: 0;
    padding: 0;
    background-color: #fff;
    list-style-type: none;
    clear: left;
}

ul.token-input-list li {
    list-style-type: none;
}

ul.token-input-list li input {
    border: 0;
    width: 350px;
    padding: 3px 8px;
    background-color: white;
    -webkit-appearance: caret;
}

li.token-input-token {
    overflow: hidden; 
    height: auto !important; 
    height: 1%;
    margin: 3px;
    padding: 3px 5px;
    background-color: #d0efa0;
    color: #000;
    font-weight: bold;
    cursor: default;
    display: block;
}

li.token-input-token p {
    float: left;
    padding: 0;
    margin: 0;
}

li.token-input-token span {
    float: right;
    color: #777;
    cursor: pointer;
}

li.token-input-selected-token {
    background-color: #08844e;
    color: #fff;
}

li.token-input-selected-token span {
    color: #bbb;
}

div.token-input-dropdown {
    position: absolute;
    width: 180px;
    background-color: #fff;
    overflow: hidden;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    cursor: default;
    font-size: 12px;
    font-family: Verdana;
    z-index: 1;
}

div.token-input-dropdown p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown ul li {
    background-color: #fff;
    padding: 3px;
    list-style-type: none;
}

div.token-input-dropdown ul li.token-input-dropdown-item {
    background-color: #fafafa;
}

div.token-input-dropdown ul li.token-input-dropdown-item2 {
    background-color: #fff;
}

div.token-input-dropdown ul li em {
    font-weight: bold;
    font-style: normal;
}

div.token-input-dropdown ul li.token-input-selected-dropdown-item {
    background-color: #d0efa0;
}

.filters label {
	float: left;
	padding-right: 5px;
}

.filters .button {
	margin-top: 16px;
}
.ms-drop ul > li label span {
    margin-left: 5px;
}
#container a .fa {
    color: #4D5EA4;
}
/*uncommented .right css - used in Membership Plan History table*/
.right {
  text-align: right;
}

.faTraffic {
	text-align: center;
}

.faTraffic i {
	color: #dddddd !important;
}

.faTraffic i.green {
	color: #08844e !important;
}

.faTraffic i.amber {
	color: #FFC200 !important;
}

.faTraffic i.red {
	color: #FF0000 !important;
}

.unitDivider td {
	font-size: 14px;
	background-color: #8091D7;
	color: white;
}

.radiolist-nl .radiobtn:after {
    content: "";
    display: block;
}

/* Send Email page */
/* Match double height 'ID' 'label in right column for larger screen sizes where 2 columns are displayed */
@media(min-width:992px){
    .sendemail .blindcopyto {padding-bottom: 24px;}
}

/* Unit admin page - using formbuilder form  */
.unitadmin {/* width: 1020px; *//* margin: 0px auto; */}
.unitadmin .form-group { width: 33.3%; float: left; padding: 0px 10px;}
/* .unitadmin  #fb-Unit_Sub_Group_Id-div {clear: left;} */
.unitadmin #fb-JLGB_Div_Id-div { clear: left; }
.unitadmin #fb-Senior-div, .unitadmin #fb-Junior-div, .unitadmin #fb-KPI-Units-div  { width: 90px; float: left; }
.unitadmin .buttons {clear: left;padding: 0px 0px;}

.unitadmin input[type=text], .unitadmin select {border: 0;border-radius: 5px 5px 5px 5px !important;height: 32px !important;padding: 3px 8px;background-color: white;-webkit-appearance: caret;}
.unitadmin #fb-UnitId-div, .unitadmin #fb-JLGB_Div_Id-div, .unitadmin #fb-Mess_Month-div, .unitadmin #fb-Parade_Night-div, .unitadmin #fb-Active-div { padding-left: 0; }
.unitadmin #fb-Unit_Sub_Group_Id-div, .unitadmin #fb-Parade_Time_To-div { padding-right: 0; }

.unitadmin .hasDatepicker { width: 100%; }
.unitadmin .hasDatepicker:hover { cursor: pointer; }
.unitadmin #units_length select {padding: 5px 10px 5px 10px;background-position: right 0.3rem center;font-size: 90%;}

@media(max-width: 1100px){
    .unitadmin #fb-Senior-div, .unitadmin #fb-Junior-div, .unitadmin #fb-KPI-Units-div { width: auto; }
}

@media(max-width: 768px){ 
    .unitadmin .form-group, .unitadmin  #fb-Senior-div, .unitadmin #fb-Junior-div, .unitadmin #fb-KPI-Units-div, .unitadmin #fb-Active-div {
    	width: 50%; padding: 0px 10px 0px 10px !important;
    }
}
@media(max-width: 600px){ 
    .unitadmin .form-group { width: 100%; }
    .unitadmin div.dataTables_wrapper div.dataTables_paginate ul.pagination {white-space: normal;}
    .unitadmin .dataTables_paginate ul, .unitadmin .dataTables_paginate .paginate_button {display: inline-block !important;}
}

#fb-Parade_Night-div{clear:both}
[data-view="dofe"] input[type=radio] { width: 30px; height: 30px; opacity: 0; -moz-opacity: 0; position: absolute; cursor: pointer;  margin:4px 0px 0px 0px; appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; }
[data-view="dofe"] input[type=radio] + label:before {content: '';border: solid #7f7f7f 1px;background-color: #F1F2F3;display: inline-block;width: 14px;height: 14px;margin: 0px 10px 0px 0px;border-radius: 50%;}
[data-view="dofe"] input[type=radio]:checked + label:before { background:  var(--navy); box-shadow:inset 0px 0px 0px 2px #fff; }

/* Leadership Enrol Form */
@media(max-width:600px){
	.responsiveForm .card-body { padding: 0; }
	.responsiveForm .card-body button,
	.responsiveForm .footnote { margin-left: 0.75rem; margin-right: 0.75rem; margin-bottom: 0.75rem; }
}
@media(max-width:425px){
	/* Old method to make table responsive */
	
	/*
	[data-view="enrol"][data-layout="default"] .table-responsive th { display: none; }
	[data-view="enrol"][data-layout="default"] .table-responsive table td::before {

    content: attr(data-label);
    float: none;
    font-weight: bold;
    clear: both;
    display: block;
    text-align: left;
  	}
  	*/
}

.responsiveForm .row div[class*="col-"] { border-top: 1px solid #dee2e6; }

.responsiveForm .field .label-wrap {float: left;width: 35%;text-align: left;font-weight: bold;padding: 13px 15px 13px 0px;word-wrap: normal;}
.responsiveForm .field .label-wrap.fullwidth { width: 100% !important; }
.responsiveForm .field .label-wrap label {padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;}

.responsiveForm .field .input-wrap {float: left;width: 65%;text-align: left; padding: 13px 0px 13px 0px;}
.responsiveForm .field .input-wrap input { max-width: 100%; width: 100%;}
.responsiveForm .field .input-wrap span {display: block;}

.responsiveForm .field.fullwidth .label-wrap,
.responsiveForm .field.fullwidth .input-wrap  { width: 100% !important; }

@media(max-width:425px){
  .responsiveForm .card .card-header {padding: 10px 10px 10px 10px;}
  
  .responsiveForm .row div[class*="col-"] {padding-left: 10px; padding-right: 10px; }
  .responsiveForm .field .label-wrap { width: 100%; float: none; padding: 5px 0px 0px 0px; }
  .responsiveForm .field .input-wrap {width: 100%;float: none;padding: 0px 0px 5px 0px;}
}

@media(min-width:992px){
	/* Make one column rows match nicely with two column rows  */
    .responsiveForm .col-lg-12 .field .label-wrap { width: calc(17.5% - 5px); }
    .responsiveForm .col-lg-12 .field .input-wrap { width: calc(82.5% + 5px); }
}


.responsiveForm .note { padding-top: 20px; }

.responsiveForm .form-control {height: 40px;line-height: 32px !important;}
.responsiveForm textarea { width: 100%; border: 1px solid #ced4da; border-radius: 0.25rem; padding: .375rem .75rem;}
.responsiveForm textarea.form-control { height: auto; }

.responsiveForm .mainContainer { position: relative; }
.responsiveForm .leftcolumn { width: 50%; padding-right: 40px; }
.responsiveForm .rightcolumn {position: absolute;top: 0;width: 50%;padding-right: 18px;margin-left: calc(50% - 18px);}

@media(min-width: 1061px) and (max-width: 1200px){
  .responsiveForm .columnLayout .col-lg-12 .field .label-wrap {width: calc(40% - 5px);}
  .responsiveForm .col-lg-12 .field .input-wrap {width: calc(60% + 5px);}
}

@media(min-width: 1201px) and (max-width: 1500px){
  .responsiveForm .columnLayout .row div.col-lg-12 {padding: 0px 0px 0px 0px;}
  .responsiveForm .columnLayout .col-lg-12 .field .label-wrap {width: calc(30% - 5px);}
  .responsiveForm .col-lg-12 .field .input-wrap {width: calc(70% + 5px);}  
}

@media(min-width: 1501px) and (max-width: 1600px){
  .responsiveForm .columnLayout .row div.col-lg-12 {padding: 0px 0px 0px 0px;}
  .responsiveForm .columnLayout .col-lg-12 .field .label-wrap {width: calc(20% - 5px);}
  .responsiveForm .col-lg-12 .field .input-wrap {width: calc(80% + 5px);}
}


@media(max-width:1060px){
  .responsiveForm legend {padding: 14px 18px 14px 18px;}
  /* .responsiveForm .container {min-height: unset;overflow: auto;} */
  .responsiveForm .leftcolumn { width: 100%; padding-right: 0; }
  .responsiveForm .rightcolumn { position: static; width: 100%; padding-right: 0; margin-left: 0; }

  .responsiveForm .field.placeholder { display: none; }
}

.responsiveForm .columnHeading, .responsiveForm .sectionHeading {display: block;width: 100%;text-align: center;font-weight: bold;padding: 10px;border-top: 1px solid #dee2e6;border-bottom: 1px solid #dee2e6;margin-bottom: 10px;}
.responsiveForm .sectionHeading { /*text-align: left;*/ }
@media(max-width:1060px){
  .responsiveForm .rightcolumn .columnHeading { margin-top: 60px;}
}

 .responsiveForm .multichoiceContainer {padding-top: 20px !important;}
 .responsiveForm .multichoice {width: 20%;float: left;min-height:90px;padding: 0px 20px 0px 0px;}
 .responsiveForm .multichoice .label {width: 90%;/* float: none; */font-weight: normal; overflow-wrap: break-word;}
 .responsiveForm .multichoice .label label { font-weight: normal; }
 .responsiveForm .multichoice .input {/* float: none; */padding-top: 17px;width: 10%;}
 
@media(max-width:1060px){
 .responsiveForm .multichoice {width: 33.33%; }
}
@media(max-width:600px){
 .responsiveForm .multichoice {width: 50%; }
}
@media(max-width:425px){
 .responsiveForm .multichoice {width: 100%;float: none;padding: 0px 0px 0px 0px;}
 .responsiveForm .multichoice .label { width: 100%; } 
  
}

.responsiveForm h2 { font-size: 120%; }

.responsiveForm ul { padding: 10px 0px 0px 40px; }
.responsiveForm ul li {list-style: disc; line-height: 1.5; padding-bottom: 10px;}

.responsiveForm .field .input-wrap input[type=radio] {max-width: 30px;width: 30px;height: 30px;opacity: 0;-moz-opacity: 0;position: absolute;cursor: pointer;margin:4px 0px 0px 0px;appearance: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;}
.responsiveForm input[type=radio] + label { display: inline; }
.responsiveForm input[type=radio] + label:before {content: '';border: solid #7f7f7f 1px;background-color: #F1F2F3;display: inline-block;width: 14px;height: 14px;margin: 0px 10px 0px 0px;border-radius: 50%;}
.responsiveForm input[type=radio]:checked + label:before { background: #1b1464; box-shadow:inset 0px 0px 0px 2px #fff; }
.responsiveForm input[type=radio]:checked + label { font-weight: 700; }


/* Compact rows */
.grouplisttable tbody { line-height: 1em; }
@media only screen and (max-width: 800px) {
	.grouplisttable tbody { background: white; }
}
.grouplisttable label { padding: 0; }
.grouplisttable .dropdown.bootstrap-select {height: auto;border: 1px solid #CED4DA;margin-right: 27px;}
.grouplisttable .dropdown.bootstrap-select .dropdown-toggle { height: 20px;line-height: 28px !important;}
.grouplisttable .dropdown.bootstrap-select .dropdown-menu { font-size: 0.85rem; }


/* Anchor the top navigation */
/* Ensure the FUEL nav does not block page content */
.headerspacer {height: 134px !important;}

[data-layout="resetpassword"] .headerspacer { height: 55px !important; }
.typeahead__field input { border : none !important }
form#filters .bootstrap-tagsinput { max-width: 320px;  min-width: 320px;}
form#filters .bootstrap-tagsinput .tag{ display: inline-block; margin-bottom: 5px; }
.dofe-options .field-calendar {
    width : 100% !important;
}

#bubblediv input[type="text"]{
    width: 100% !important; 
}
.ParadesBookMemberDetail .background-green { background: var(--green) !important; color: #fff; font-size: 12px;}