.fill_accent {
	fill: var(--accent);
}

.fill_red {
	fill: var(--red);
	transition:var(--transition);
}

.fill_blue_to_green{
	fill: var(--secondary);
}

a:hover .fill_blue_to_green{
	fill: var(--primary);
}

.card {
	padding: var(--gap) 1.5rem;
	margin: 0 0 1rem 0;
	box-shadow: var(--shadow);
	border-radius: 1rem;
	background-color: white;
}

.content_card {
	padding: 1rem;
	margin: 0 auto 1rem auto;
	box-shadow: var(--shadow);
	border-radius: 1rem;
	background-color: white;
	width: 100%;
	max-width: 734px;
}


.csp_page {
	padding: 0 0.5rem 3rem 0.5rem;
	background-color: white;

}

.csp_page_header {
	height: 100px;
	display: flex;
	align-items: center;
}

.csp_page_header_sticky {
	position: sticky;
	top: 0;
	z-index: 9;
	width:116px;
}

.csp_page_header > h1{
	margin-bottom: 0;
}

@media(min-width: 768px ){

	.csp_page {
		padding: 0 2rem 2rem 2rem;
	}

}

.card.csp_back_butt{

	display: inline-flex;
	padding:0.5rem 1rem;
	padding-left: 48px;
	background: url('/site/assets/images/picons/arrow_left.svg') no-repeat 8px center;
	background-color: white;
	background-size: 22px auto;
	text-decoration: none;
	margin-bottom: 0;
	border-radius: 22px;
}

.csp_back_butt:hover{
	text-decoration: underline;
}


/* Display Name widget */
.display_name {

	display: inline-flex;
	background-color: white;
	color: var(--dark-blue);
	position: fixed;
	top: 36px;
	right: 1rem;
	z-index: 1225;
	padding: 0 1rem 0 1.5rem;
	border-radius: 1rem;
	box-shadow: var(--shadow);
	text-decoration: none;
	min-width: 100px;
}


/* display set by nobile class */
.display_name_text{
	position: relative;
	margin-right:40px;
	min-height:28px;
	align-items: center;
	z-index: 2;
}

.display_name_icon{
	position:absolute;
	right:0;
	top:-2px;
	height: 32px;
	width: 32px;
	border-radius: 50%;
	background-color: var(--primaryC);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}

.display_name:hover .fill_blue_to_green{
	fill:white;
}

.display_name:hover .display_name_icon{
	background-color:var(--secondary);
}

.dn_links{
	position: absolute;
	top:22px;
	left:0.5rem;
	background-color: white;
	z-index: 1;
	min-width: calc(100% - 1rem);
	box-shadow: var(--shadow);
	max-height: 0;
	overflow: hidden;
	transition:var(--transition);
}

.show_dnl .dn_links{
	max-height: 400px;
	transition:var(--transition);
}

@media(min-width: 768px ){
	.display_name:hover .dn_links{
		max-height: 400px;
		transition:var(--transition);
	}
}


.dn_links a{
	display: block;
	padding:0.5rem;
	color: var(--dark);
	font-size: 0.875rem;
	white-space: nowrap;
}

.fill_icon{
	fill:var(--white);
}


/* login forms uses ui-kit so override */

.ui-button,
.butt {

	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 6px 24px;
	gap: 8px;

	background-color: var(--primaryC);

	border:2px solid var(--primaryC);
	border-radius: 22px;

	font-size: 0.875rem;
	font-weight:var(--strong);
	font-family: var(--font-sans);
	color: var(--secondary);
	text-decoration: none;

	opacity: 1;
	cursor:pointer;
	transition:var(--transition);

	width: fit-content;

}

.butt_secondary{
	background-color: white;
	border-color: var(--primaryB);
}

.butt_disabled{
	background-color: white;
	color: var(--neutralB);
	border-color: var(--neutralB);
	cursor: not-allowed;
}

.butt_green{
	background-color: var(--primaryC);
	border-color: var(--primaryC);
}

.butt_compact{
	padding: 4px 12px;
}

.butt_big,
#profile_submit{
	font-size: 1.125rem;
}

.ui-button:hover,
.butt:hover,
.ui-button:focus,
.butt:focus {
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: var(--primaryC);
}

.ui-button:active,
.butt:active {
	background-color: var(--secondaryC);
	border-color: var(--secondaryC);
	color: var(--secondaryA);
}

.butt_disabled:hover{
	background-color: white;
	color: var(--neutralB);
	border-color: var(--neutralB);
}

.butt.htmx-request{
	opacity:0.4;
	transition:var(--transition);
}

.feedback_container {
	max-width: 620px;
}

/* Activity log table */

.al_header{
	display: none;
	color: var(--neutralA);
	font-size: 1.125rem;
	font-weight: bold;
	text-align: center;
}

@media(min-width: 992px ){
	.al_header{
	display: block;
	}
}

.al_row{
	text-align: center;
	padding:1rem 0;
	border-bottom: 1px solid var(--neutralB);
}


.al_row > div{
	padding:0.25rem;
}

.show_only_my_activities .not_my_activity{
	display: none;
}

.al_cell{
	display: flex;
	align-items: center;
	justify-content: center;
}


.al_name{
	text-align: left;
  }
  

.al_link {
	display: grid;
	grid-template-columns: 25px 1fr;
	gap:1rem;
	text-align: left;
	align-items: center;
}

/* .al_link::before{
	content:'';
	width:24px;
	height:24px;
	min-width:24px;
	background: url('/site/assets/images/picons/arrow_right_blue.svg') no-repeat center center;
	background-size: 16px auto;
	background-color: var(--primaryC);
	margin-right:1rem;
} */

.al_icon{
	background-color: var(--accent);
	color:var(--theme);
	display:flex;
	align-items: center;
	justify-content: center;
	width:24px;
	height:24px;
	min-width:24px;
	transition:var(--transition);
}
.al_link:hover .al_icon{
	background-color: var(--theme);
	color:white;
	transition:var(--transition);

}

 .al_icon_mine{
	background-color: var(--theme);
	color:white;
}

.al_link:hover .al_icon_mine{
	background-color: var(--accent);
	color:var(--theme);
	transition:var(--transition);
}



.al_date_icon{
	display: inline-flex;
	width:24px;
	height:24px;
	min-width:24px;
	background: url('/site/assets/images/picons/calendar_green.svg') no-repeat center center;
	margin:-3px 0.5rem 0 0;
}


@media(min-width: 992px ){

	.al_row{
		display: flex;
		gap:2rem;
		padding:1.5rem 0;
		align-items: center;
	}
	
	.al_row > div{
		flex:1;
	}
	
	.al_row > div.al_name{
		flex:2;
	}

	.al_date{
		text-align: left;
		justify-content: start;
	}

}


.site_table_link,
.table_link{
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--Secondary-secondary-A, #21427A);
	font-weight: 500;
}

.stl_underline,
.tl_underline{
	text-decoration: underline;
}

.site_table_link:hover .stl_underline,
.table_link:hover .tl_underline{
	text-decoration: none;
}

.st_header {
    color: var(--neutralA);
    font-size: 1.125rem;
    font-weight: bold;
}

.sr_hidden{
	display: none;
}

/* log time dialogtime */
/* were using https://a11y-dialog.netlify.app/ */

/**
 * 1. Make the dialog container, and its child overlay spread across
 *    the entire window.
 */
 .dialog-container,
 .dialog-overlay {
   position: fixed; /* 1 */
   top: 0; /* 1 */
   right: 0; /* 1 */
   bottom: 0; /* 1 */
   left: 0; /* 1 */
   z-index: 1300;
 }
 
 /**
  * 1. Make sure the dialog container and all its descendants sits on
  *    top of the rest of the page.
  * 2. Make the dialog container a flex container to easily center the
  *    dialog.
  */
 .dialog-container {
   z-index: 1302; /* 1 */
   display: flex; /* 2 */
 }
 
 /**
  * 1. Make sure the dialog container and all its descendants are not
  *    visible and not focusable when it is hidden.
  */
 .dialog-container[aria-hidden='true'] {
   display: none; /* 1 */
 }
 
 /**
  * 1. Make the overlay look like an overlay.
  */
 .dialog-overlay {
   background-color: rgb(43 46 56 / 0.9); /* 1 */
 }
 
 /**
  * 1. Vertically and horizontally center the dialog in the page.
  * 2. Make sure the dialog sits on top of the overlay.
  * 3. Make sure the dialog has an opaque background.
  */
 .dialog-content {
   margin: auto; /* 1 */
   z-index: 1302; /* 2 */
   position: relative; /* 2 */
   background-color: white; /* 3 */
   padding:1rem;
   border-radius: 1rem;
 }

 #log_activity_form > div{
	padding:0.4rem;
 }
	
#log_form{
	min-width:300px;
	color: var(--secondaryA);
}

@media(min-width: 768px ){
	#log_form{
		min-width:460px;
	}
}

.log_form_title{
	margin-top:1rem;
}

.log_form_title svg{
	width:18px;
}

.lf_activity_title{
	color:var(--primaryB)
}

.log_form_row{
    display: flex;
    gap: 1rem;
	padding-bottom: 1rem;
}

.log_form_row > span{
    flex:1;
}

.log_form_row > span:nth-child(2){
    display:flex;
    justify-content: end;
	align-items: center;
}

#log_form label{
	font-size: 1.125rem;
	font-weight: var(--heavy);
}

.duration_units {
	font-weight: 400;
	font-size: 1rem;
	display: flex;
	padding-right: 8px;
	align-items: center;
	height: 100%;
}

input,
select {
	font-weight: var(--heavy);
	background-color: white !important;
	border: 1px solid var(--grey-mid);
	border-radius: 0.5rem;
	padding: 0.24rem;
}

select {
	margin-left:1rem;
}

.button_row{
	margin-top:1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--neutralB);
	display: flex;
	justify-content: end;
	gap:2rem;
}


/* override login bits */


.ProfileForm .LoginRegisterPro .Inputfield:not(.InputfieldSubmit) {
	margin: 1rem 0;
	padding: 1rem 0;
    background-color: white !important;
    border-bottom:1px solid var(--grey-mid);
}


.LoginRegisterLinksForgot a,
.LoginRegisterLinksLogin a,
.pass-mask a{

	color: var(--secondary-secondary-a, #02294B);
	

}

/* Feedback form  and indeed general form bits now. */

label{
	display: block;
	padding:0.25rem 0;
}

select {
	appearance: none;
	background: url(/site/assets/images/picons/select.svg) no-repeat right 2px center;
	border: 1px solid var(--neutralB);
	padding: 0 1em 0 0;
	margin: 0;
	width: auto;
	max-width: 100%;
	cursor: pointer;
	line-height: 28px;
	z-index: 1;
	display: inline-flex;
	font-size: 1rem;
	line-height: 24px;
	padding: 0.25rem 30px 0.25rem 0.25rem;
	position: relative;
	border-radius: 0.5rem;
}

select:hover{
	border-color: var(--neutralA);
}


textarea{
    border:0;
	border:1px solid var(--neutralB);
    border-radius: 0.5rem;
    padding:0.5rem;
    width:100%;
}

.form_row{
	padding-top:1rem;
}

.checkbox_label{
	display: flex;
	align-items: center;
	padding:0.5rem 0;

}

.contact_form_submitted{
	padding:1rem;
	font-size: 1.125rem;
	font-weight: var(--heavy);
}

/* Feedback Callout */

.feedback_callout{
	background-color: var(--secondaryA);
	color: var(--primaryC);
	padding: 1.5rem;
	text-align: center;
	margin-top: 2rem;

}

.fc_content a{
	color:var(--primaryC);
	text-decoration: underline;
}

.csp_page_aside > .feedback_callout{
	margin-top:0;
}

.fc_title{
	color:white;
	justify-content: center;
	margin:1.5rem 0;
}

.fc_content{
	margin-bottom: 1.5rem;
}

.fc_butt:hover {
	background-color: var(--primaryC);
	border-color: white;
	color: var(--theme);
}

.toast{
	display: flex;
	justify-content: center;
	padding: 0.25rem 1rem;
	background-color: var(--Warning-warning-C, #F7E6A1);
	color:var(--dark);
}

.toast_success{
	background-color: var(--primaryC);
}

.toast_error{
	background-color: var(--accentC);
}


/* Dashboard bits */

.dash_number{
	font-size: 2rem;
	font-weight: var(--heavy);
	text-align: center;
	color:var(--secondaryB);
}

.hours_you .dash_number{
	color: var(--primaryB);
}

.hours_text{
	color:var(--neutralA);
	font-size: 1.125rem;
	text-align: center;
}

.pie{
	width:160px;
	margin:auto;
	padding:12px;
	position: relative;
}


/* https://dev.to/vaibhavkhulbe/let-s-make-and-wear-those-css-3-progress-rings-2ngf looks useful */ 
.pie_filling{
	display: flex;
	width:136px;
	height:136px;
	aspect-ratio: 1 / 1;
	background-color: var(--primaryC);
	border:8px solid white;
	border-radius:50%;
	font-size: 2.125rem;
	font-weight: var(--strong);
	color: var(--secondaryA);
	align-items: center;
	justify-content: center;
	position: relative;

}

.pie circle {
    position: absolute;
    fill: none;
    stroke-width: 10;
    transform: translate(10px, 10px); /*This is to position it in the center */ 
    stroke-dasharray: 440;
    stroke-linecap: round;
}

.pie_crust{
	position: absolute;
	top:0;right:0;bottom:0;left:0;
}

.pie_crust svg{
	width:160px;
	height:160px;
	}

.pie_crust svg circle{
	width:140px;
	height: 140px;
}



.pie_crust circle:nth-child(1) {
	stroke-dashoffset: 0;
	stroke: white;
  }

.pie_crust circle:nth-child(2) {
    stroke: var(--primaryA);
	animation: percent 2.6s linear;
	animation-delay: 0;
	rotate:270deg;
	transform-origin: 50% 50%;
}


/* Animation definition */
@keyframes percent {
    0% {
        stroke-dashoffset: 440;
       }
}



/* downloads */

.download_link{
	display: flex;
	margin: 0 1rem 1rem 1rem;
	align-items: center;
	gap: 0.5rem;

}

.download_link_text{
	flex:1;
}


/* tabs for mobile */

.tabs{
	display: none;
	padding:0;
  }

  .tab_butt{
	background-color: white;
	display: flex;
	border:0;
	font-weight: var(--heavy);
	font-size: 0.875rem;
	cursor: pointer;
	padding:0.5rem 1rem;
	align-items: center;
  }

  .tabs > .tab_butt:first-of-type{
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
  }

  .tabs > .tab_butt:nth-child(2){
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
  }

  .tab_icon{
	width:28px;
	height: 28px;
	min-width: 0;
  }

  .tab_icon > svg{
	width:20px;
	height: auto;
  }

  .tab_active{
	background-color: var(--primaryC);
  }

  
  @media(max-width: 992px) {
  
	.tabs{
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	}
    
	.tab_grid > div:nth-child(2),
	.tabbed .tab_grid > div:nth-child(1){
	  max-height: 0;
	  max-width: 0;
	  overflow: hidden;
	  transition:var(--transition);
	}
  
	.tabbed .tab_grid > div:nth-child(2){
	  max-height: 100vh;
	  max-width: 100vw;
	}

	.tab_grid h2{
		display: none;
	}
  
  }
  


  .comment_reply_date,
.date{
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--neutral);
    padding-top:0.5rem
}


.mu_edit_bar{
	background-color: var(--primaryA) !important;
}

.pswp__icn{
	fill: var(--primaryA) !important;
	stroke: var(--primaryA) !important;
}

/** kits */

.kit_types{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--gap);
}