@charset "UTF-8";

/* Fix a wrapper so everything doesn't go crazy  960px */
/* load normalise to make every else compact */
@import url(normalise.css); 

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	color: 272727;
	background : #dedede;
    padding: 0;
}

.new-form-wrapper {
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

.content_pane {
	padding: 100px 20px;
}

.confirmation {
	background: #efe09a;
	max-width: 414px;
	padding: 20px;
	font-size: 14px;
	font-weight: bold;
	border-radius: 4px;
	line-height: 1.4;
}

.outer-container  {
	margin: 0 auto;
	max-width: 414px; // iPhone 6/7/8 plus
	width: 100%;
  	background: #efe09a;
    	padding: 10px;
    	border-radius: 4px;
} 

/* Admin header */

#admin-header {
	background: rgba(255,255,255,0.8) url(https://bathfringe.co.uk/images/fringe-logo-2023.png) no-repeat 0 0 / 90px auto;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	height: 80px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

#admin-header h1 {
	margin: 14px 0px 0 100px;
	font-weight: 100;
	color: orange;
	line-height: 1;
}

.hierarchy {
	font-size: 14px;
	padding: 3px 12px;
	position: absolute;
	bottom: 0;
	background: #ccc;
	width: 100%;
}

.hierarchy a, .hierarchy a:visited {
  color: #007d9e;
  text-decoration: none;
}

.hierarchy a:hover {
text-decoration: underline;
}

.hierarchy a::after {
  content: " \2192 ";
}


#admin-header .button2 {
	font-size: 12px;
	position: absolute;
	right: 4px;
	top: 20px;
	margin: 0;
	padding: 4px 10px;
}

.settings {
	display: block;
	width: 25px;
	height: 25px;
	position: absolute;
	right: 100px;
	top: 19px;
}

.settings img {
	width: 100%;
	height: auto;
}

/* Form meat */


.new-form-wrapper .block_error{border:none;}

.new-form-wrapper form {
	background: #efe09a;
	padding: 10px;
	border-radius: 4px;
}

.new-form-wrapper fieldset {
	clear:both;
  background: rgb(255,255,255);
  background: rgba(255, 255, 255, 0.3) ;
  border: 1px solid #8396c2;
  border-radius: 4px;
  margin-top: 40px;
  padding-top: 20px;
}

.new-form-wrapper legend {
  background: #8396c2 ;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  padding: 6px 12px;
}

.new-form-wrapper fieldset fieldset {
	margin-top: 10px;
}

.new-form-wrapper fieldset fieldset legend {
  background: #aab3c9 ;
}

.new-form-wrapper legend + fieldset {
  margin-top: 0; 
}

.new-form-wrapper label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin-top: 10px;
}

.new-form-wrapper label[required]::after, .new-form-wrapper .required2::after {
	color: #800;
	margin-left: 15px;
	content: "\2190 required";
	font-weight: normal;
	font-size: 14px;
}

.new-form-wrapper .block_error {
	background: #800;
	font-size: 12px;
	color: #fff;
	padding: 3px;
	width: 25%;
	margin-top: 6px;
	text-align:center;
}

.login .new-form-wrapper .block_error {
  width: unset;
}


.new-form-wrapper input, .new-form-wrapper select, .new-form-wrapper textarea {
	font-size: 16px;
	border:none;
	border-radius: 4px;
}

.new-form-wrapper input:focus {
	background: #f8f8fc;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* I've made it this colour so you can see when you start turning off the Javascript */

.new-form-wrapper input:disabled {
	background: #ccd;
	color: #555;
}

.new-form-wrapper input[type="text"],
.new-form-wrapper input[type="email"],
.new-form-wrapper input[type="tel"],
.new-form-wrapper input[type="url"],
.new-form-wrapper input[type="password"]
 {
	width: 50%;
	padding: 12px;
	margin: 5px 0;
}

.new-form-wrapper button, .new-form-wrapper input[type="submit"], .button2 {
	background: #db6830;
	color: #fff;
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	margin: 20px 10px;
	padding: 12px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
	border-radius: 4px;
}



.new-form-wrapper button:hover,
.new-form-wrapper input[type="submit"]:hover,
.button2:hover 
{
	background: #8396c2;
}

.new-form-wrapper button:active,
.new-form-wrapper input[type="submit"]:active,
.button2:active 
{
	opacity: 0.7;
}


.new-form-wrapper input[type=checkbox] {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  margin: 10px 6px 10px 0;
  border: none;
}

.extend-select {
  height: 400px;
}

.new-form-wrapper textarea {
	width: 50%;
	height: 200px;
	margin: 5px 0 10px;
	padding: 12px;
}

.new-form-wrapper .read-only:disabled {
	background: none;
}

.new-form-wrapper .perf_cancelled:disabled {
	color: red;
	font-weight: bold;
}

.new-form-wrapper .short {
	height: 100px;
}


.new-form-wrapper select {
	min-width: 250px;
	margin-top: 10px;
}

.new-form-wrapper option {
	padding: 2px 12px;
}

.new-form-wrapper .help {
	float: right;
	width: 40%;
	background: #fff;
	border-radius: 4px;
	padding: 10px;
	color: #919191;
	position: relative;
	margin-top: 15px;
	clear: right;
}

.new-form-wrapper .help:before {
border: 15px solid transparent;
	border-right-color: #fff;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	content: "";
	top: 50%;
	left:-30px;
	margin-top: -14px;

}


.new-form-wrapper #high-level-categories label, #booking-options label {
	display: inline-block;
	margin-right: 15px;
}

#low-level-categories label:first-of-type {
	font-size: 16px;
	margin: 20px 0 0;
}

.new-form-wrapper #high-level-categories label:first-of-type {
	display: block;
	font-size: 16px;
}

/*  ? */

table.matrix {
	width: 100%;
	background: #eee;
	border-radius: 4px;
	padding: 12px;
	text-align: left;
}

.matrix th {
  background: #8396c2 none repeat scroll 0 0 !important;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
 /* from existing */
padding: 5px;
}

.matrix th a {
  color: #fff;
  text-decoration: none;
}

.matrix th a::after {
  background: url("up-down.svg") no-repeat  0 center / contain ;
  content: "";
  display: inline-block;
  height: 15px;
  vertical-align: middle;
  width: 15px;
}

.matrix td {
	 vertical-align: top;
}

.matrix tr td:nth-of-type(5) {
  width: 76px;
}

table.matrix tr:nth-of-type(2n) td {
	background-color: rgb(100%,100%,98%);
}


.content_pane .login {
	max-width:300px;
	margin: 0 auto;
}


.login input {
  margin: 0 auto;
  width: 100% !important;
}

.login a {
  color: #999;
  display: block;
  text-align: center;
  text-decoration: none;
	font-size: 14px;
}

.login a:hover {
	text-decoration:underline;
}