:root{	
	--footerheight: 40px;
	--navbarheight: 50px;	/* also set in javascript for datatables fixedHeader: {header: true, footer: true, headerOffset: 50},*/
	--navbarheightsmallerwidthfrontend: 66px;
	--navbarheightstickyoffset: 50px;

	--navbarbackgroundcolor: #212529;
	--navbartextcolor: #FFFFFF;
	--menulinkactivecolor: #D60BC2;
	
	--footerfontcolor: lightgrey;	

	--primarybuttoncolor:#D60BC2;
	--primarybuttonborder:#620A70;
	--primarybuttoncolor_hover:#610558;
	--primarybuttoncolor_active:#490442;	
	--primarybuttoncolor_disabled:#fbb6f4;	
	
	--alertcolor_colorvar:#da39f2;


	--card_header_background_color: #f0e4ef;	
	--card_header_text_color: black;
	--card_roundedcorner_radius: .80rem;		/*	default bootstrap size is .25rem */
}

html {
  height: 100%;
  min-height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 14px;
}

.indent {text-indent:50px}

.disabledcolor {
	color: var(--primarybuttoncolor_disabled);
}

.unpaidroutines_studiocompetition_color {
	color: #9900cc;
}
	
.alertcolor {
	color: var(--alertcolor_colorvar);
	/*color: #da39f2;*/
}

.songtitlecolor {
	color: #8b9caa;
}

.green {
	color: #236c37;
}

.red {
	color: #FF0000;
}

.light_gray {
	color: #D3D3D3;
}

.medium_gray {
	color: #6e6e6e;
}

.dark_gray {
	color: #212529;	
}

.disabledfontcolor {
	color: rgba(227, 205, 231, 0.96);
	text-decoration: line-through;
}

.loginnamecolor {
	color: #910884;
}

.events-tabs-header {
	font-weight: bold;
}

.row-height{
	height: calc(100vh - var(--navbarheight) - var(--footerheight));
}

.larger_textarea { 
	font-size: 18px; 
}

.achchoroffset_admin {
    display: block;
    position: relative;
    top: calc(-2 * var(--navbarheight));
    visibility: hidden;
}


@media all {
	.page-break	{ display: none; }
}

/* Right side of screen scrolls on display */
@media screen {
	.rightsidebar {
	  height: 100%;
	  overflow-y: scroll;
	}
}
/* Right side of screen overflows down on print and is 100% width when printing (left side bar doesn't show on print*/
@media print {
	.rightsidebar {
	  height: 100%;
 	  overflow: visible ;
	}
	.page-break	{ display: block; page-break-before: always; }
	.no-print, .no-print *
    {
        display: none !important;
    }

}

/*font styles*/

.font-120,
.bigger-font,
.events-tabs-header {
	font-size: 120%;
}

.font-150 {
	font-size: 150%;
}

.bold,
.fontbold {
	font-weight: bold;
}

.half-size-font {
	font-size: 50%;
}

.three-quarter-font {
	font-size: 75%;
}

.eighty-percent-font,
sup {
    font-size: 80%;
}

.superscript {
	vertical-align: super;
}

.strike-through,
.line-through {
	text-decoration: line-through;
}

.italics {
	font-style: italic;
}


.underline {
	text-decoration: underline;
}

.link-as-text {
 color: black;
 text-decoration: none;
}

.navbarbackgroundcolor {
	background-color:var(--navbarbackgroundcolor);
}


.footermain {
	background-color: var(--navbarbackgroundcolor);
/*	position: absolute;*/
	height: var(--footerheight);
}

footer.footerfontcolor {
	  color: var(--footerfontcolor) !important;
}


#main_navigation > ul > li {display:inline-block;}
#main_navigation ul { margin: 0; padding: 0; white-space:nowrap;}

.leftpadding {
	padding-left: 3px;
}

.frontend_routine_anchor_offset {padding-top: var(--navbarheight); margin-top: -(var(--navbarheight));}

.studiolist_anchor_offset {padding-top: 190px; margin-top: -190px;}

.textcenter {
	text-align: center;
}

.textleft {
	text-align: left;
}

.textright {
	text-align: right;
}


tablediv {overflow:scroll;}


table.tableauto {
  table-layout: auto;
}

table.fixed {
  table-layout: fixed; 
}


.tdright {
  text-align: right;
}

.tdpaddingoverride {
    padding: 4px 4px 4px 4px!important;
}

	/* color used for cells that are inactive in tables */
.tddisabledcellcolor {
  background: #737373;
}

.td_finalized_competition_cell_color {
  background: #bdbcbc;
}

.td_special_row {
  background:#f0e4ef;
}

	/* ------- Used to remove space after UL list of routine dancer info on studio table  -------- */ 
#competition_routine_dancer_info {
  margin-top: 0px;
  margin-bottom: 0px;
}


/* ------- Popover width card -------- */   	
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}


/* ------- customize routine page -------  this may not be used anymore -------- */   	
.events-tabs-header  {
	background:var(--card_header_background_color);
}


/* ------- customize modal boxes-------- */   	

.modal-header  {
	background:var(--card_header_background_color);
}
.modal-title  {
	font-size: 200%;
	font-weight: bold;	
}

.modal-body {
	color: var(--alertcolor_colorvar);
	font-size: 120%;
	font-weight: bold;	
}

/* ------- customize card -------- */   	
.card-header  {
	background:var(--card_header_background_color);
    border-radius:var(--card_roundedcorner_radius)!important;
	padding: 10px 10px 4px 10px;
}

.rounded {
    border-radius:var(--card_roundedcorner_radius)!important;
}

.rounded-top-only {
    border-radius: var(--card_roundedcorner_radius) var(--card_roundedcorner_radius) 0px 0px;
}

a.cardclass-overrideheader {color:var(--card_header_text_color);}
a.cardclass-overrideheader:link  {text-decoration: none; color: var(--card_header_text_color);}
a.cardclass-overrideheader:visited {text-decoration: none; color: var(--card_header_text_color);}
a.cardclass-overrideheader:hover {text-decoration: underline; color: var(--card_header_text_color);}
a.cardclass-overrideheader:active {text-decoration: none; color: var(--card_header_text_color);}


/* ------- Nav-item-topmenu tabs -------- */   
.nav-link-topmenu  {border-color: white white  #000000 white;
					background:var(--card_header_background_color);
					padding-right: .80rem;
					padding-left: .80rem;
					}
					
.nav-link-topmenu.active {color:#fff;background-color:var(--primarybuttoncolor);border-color:var(--primarybuttonborder)}
.nav-link-topmenu:hover {color: #fff;background-color: var(--primarybuttoncolor_hover);border-color: var(--primarybuttonborder) }

.nav-tabs >li {margin-right: .20rem;}



/* ------- customize file input buttons -------- */   
.custom-file-label {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}
	/* ------- removed gray browse button on bootstrap 4 custom-file-uploader -------- */   	
.custom-file-label::after {
    visibility: hidden;
}


/* ------- Nav-item tabs -------- */   
.nav-link-topmenu.active {color:#fff;background-color:var(--primarybuttoncolor);border-color:var(--primarybuttonborder)}
.nav-link-topmenu:hover {color: #fff;background-color: var(--primarybuttoncolor_hover);border-color: var(--primarybuttonborder) }
.nav-link-topmenu:hover {color: #fff;background-color: var(--primarybuttoncolor_hover);border-color: var(--primarybuttonborder) }


/* ------- customize primary buttons -------- */   

.btn-primary{color:#fff;background-color:var(--primarybuttoncolor);border-color:var(--primarybuttonborder)}
.btn-primary:hover {color: #fff;background-color: var(--primarybuttoncolor_hover);border-color: var(--primarybuttonborder) }

.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,
.btn-primary:disabled{color:#fff;background-color:var(--primarybuttoncolor_disabled);border-color: var(--primarybuttonborder) }
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle{color:#fff;background-color:var(--primarybuttoncolor_active);border-color: var(--primarybuttonborder)}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

.btn-outline-primary{color:var(--primarybuttoncolor);background-color:transparent;background-image:none;border-color:var(--primarybuttoncolor)}
.btn-outline-primary:hover{color:#222;background-color:var(--primarybuttoncolor_hover);border-color:var(--primarybuttoncolor)}
.btn-outline-primary:focus,
.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled{color:var(--primarybuttoncolor);background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:var(--primarybuttoncolor_active);border-color:var(--primarybuttoncolor)}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}

/* ------- add space to bottom of buttons so when they wrap in a column there is spacing -------- */   	
.btn-primary {
    margin-bottom:3px;
}

/* ------- customized list button -------- */   	




/* ------- other button sizes -------- */
/* ------- used on editing buttons -------- */
.button-smaller{  
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;	
	text-align: center;
    font-size: 88%;
	}

/* ------- used with bootstrap class "btn-link" on editing buttons to look like a regular link  -------- */
.button-as-href{  
    font-size: 100%;
    background: none!important;
	border: none;
	padding: 0!important;
	}

.filter-btn-selected {
    font-size: 100%;
    color: red;	
	}  

/*Navbar color settings*/
.navbar-custom {
    background-color: var(--navbarbackgroundcolor);
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: var(--navbartextcolor);
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: var(--navbartextcolor);
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link {
    color: var(--menulinkactivecolor);
}

.navbar-custom .nav-item:hover .nav-link {	
    color: var(--navbartextcolor);
    background-color: var(--menulinkactivecolor);
}

/* for dropdown only - change the color of dropdown */
.navbar-custom .dropdown-menu {
    background-color: var(--navbarbackgroundcolor);
}


.navbar-custom .dropdown-item {
    color: var(--navbartextcolor);
}

/*color of active page in dropdown menu*/
.navbar-custom .dropdown-item.active {
    color: var(--menulinkactivecolor);
    background-color: var(--navbarbackgroundcolor); 
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {	
    color: var(--navbartextcolor);
    background-color: var(--menulinkactivecolor);
}

/* datatables  for previous and next paging customization*/
.previous, .next {
	padding: 5px;
	text-align: center;
    font-size: 100%;
	color:#fff;
	background-color:var(--primarybuttoncolor);
	border-color:var(--primarybuttonborder);
    
}
/* datatables  for previous and next paging customization*/
.page-link {
	padding: 1px;
	color:#fff;	
	background-color:var(--primarybuttoncolor);
	border: 0px;
	border-color:var(--primarybuttonborder);
}


/* revert bootstrap 4 sorting icons in datatables back to triangles*/
.sorting, .sorting_asc, .sorting_desc {
    background : none;
}