/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
body {
	font-family: Arial, Helvetica, sans-serif;
	padding: 1rem;
}

h1.unavailable {
	background-color: gray;
	color: white;
	
}
li {
	margin: 5px 0;
}

li.separated {
	padding-top: 10px;
}

a.craft:link {
	color: cornflowerblue;
}

a.craft:visited {
	color: darkslateblue;
}

a.chapter:link {
	color: crimson;
}

a.chapter:visited {
	color: brown;
}

a.unavailable:link {
	color: gray;
}

a.unavailable:visited {
	color: darkgray;
}

nav {
	justify-content: flex-end;
	display: flex;
	font-size: 0.875em;
	gap: 0.5rem;
	max-width: 1024px;
	margin: 0 auto;
	padding: 1rem;
	border-bottom: solid gray 1px;
}

nav a {
	display: inline-block;
}

main {
	display: flex;
	flex-direction: column;
	max-width: 980px;
	margin: 0 auto;
}

.notice {
	color: green;
}

div.alert {
	/* style for errors appearing on pages */
	color:red;
}

div.full {
	float: none;
	width: 100%;
}

div.footer {
	border-top: solid gray 1px;
	padding-top: 10px;
	margin-top: 20px;
}

div.full-left {
	float: left;
	width: 100%;
}

div.separate {
	margin-top: 20px;
}

div.note_date {
	float: left;
	width: 16%;
}

div.note_attribution {
	float: left;
	width: 7%;	
}

div.note_text {
	float: left;
	width: 70%;	
}

div.note_delete {
	float: left;
	width: 7%;	
}

div.left20 {
		float: left;
		width: 20%;
}

div.middle20 {
		float: left;
		width: 20%;
		margin-left: 20px;
}

div.right75 {
	float: left;
	width: 74%;
	margin-left: 10px;	
}

div.leftc {
	float: left;
	width: 49.5%;
}

div.rightc {
	float: left;
	width: 49%;
	margin-left: 10px;
}

div.flagsc {
	float: none;
	width: 300px;
}

div.flagscontent {
	float: left;
	width: 100%;
	
}

span.none {
}

span.cancelled {
	text-decoration: line-through;
}

span.notfulfilled {
	font-style: italic;
}

span.didnotattend {
	font-weight: 600;
}

fieldset {
	margin-top: 15px;
}

label {
		font-weight: semi-bold;
}

legend {
		font-weight: bold;
		padding-left: 3px;
		padding-right: 3px;
}

input {
	width: 100%;
	padding: 8px;
	margin: 5px 0;
	box-sizing: border-box;
//	border: none;
	border: 1px solid black;	
	border-bottom: 1px solid black;
//	border-radius: 4px;
}

select {
	width: 100%;
	padding: 8px;
	margin: 5px 0;
	box-sizing: border-box;
//	border: none;
	border: 1px solid black;	
	border-bottom: 1px solid black;
//	border-radius: 4px;
}

input[type="date"] {
	font-family: Arial, Helvetica, sans-serif;
}

input[type="time"] {
	font-family: Arial, Helvetica, sans-serif;
}

textarea {
	font-family: Arial, Helvetica, sans-serif;
}

input[type="checkbox"] {
	vertical-align:middle;
}

input[disabled] {
	pointer-events:none
}

input[type=text].link {
	border: 2px solid darkblue;
}

input[type=text].link_chapter {
	border: 2px solid red;
}

div.list {
	margin-top: 4px;
	margin-bottom: 4	px;
}

/* SWITCH STUFF */
.switch {
	position: relative;
	display: inline-block;
	width: 60px; /* 60px */
	height: 34px; /* 34px */
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.switch {
	position: relative;
	display: inline-block;
	width: 45px;
	height: 24px;
}

.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(21px);
	-ms-transform: translateX(21px);
	transform: translateX(21px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 23px;
}

.slider.round:before {
	border-radius: 50%;
}