body {
	background-color: #056f7a;
}

#yp-calendar {
	font-family: arial;
	display: grid;
	grid-template-columns: 6fr minmax(200px, 1fr);
	grid-template-rows: 1, 1;
	background-color: white;
}

#yp-container-year {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#yp-legend {
	border-left: 2px solid rgba( 7, 156, 173, 0.1);
	padding: 5px;
	overflow: hidden;
	width: 100%;
}

.legend-color {
	max-height: 20px;
	display: flex;
	align-items: center;
}

#yp-events-legend {
	margin-bottom: 20px;
}

.yp-legend-name {
	cursor: pointer;
}

#yp-legend-edit-controls {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px 0 20px 0;
}

#yp-legend-edit-panel-controls
 {
	margin-bottom: 5px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	border-radius: 3px;
}
#yp-controls {
	text-align: center;
}

@media screen and (max-width: 482px) {
	#yp-calendar {
		grid-template-columns: 1fr;
	}
	#yp-legend, #yp-controls {
		display: none;
	}
}

#select-event-panel,
#yp-edit-event {
	margin-bottom: 10px;
	text-align: left;
}

#yp-edit-event {
	margin-bottom: 10px;
	margin-top: 10px;
}

#yp-edit-event-text {
	padding-bottom: 10px;
}

#yp-editor,
#yp-add-event {
	padding: 0 0 20px 0;
}

#yp-editor-title,
.yp-events-title {
	text-align: center;
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: 5px;
	margin-top: 5px;
}

#yp-editor-title {
	margin-top: 5px;
}

.yp-editor-text {
	font-weight: 500 !important;
	padding: 2px 5px;
	float: left;
}

#select-colours-panel,
#edit-colours-panel {
	display: grid;
	grid-template-columns: 1fr 2fr;
	padding: 2px;
	text-align: left;
	margin: 10px 0;
}


#yp-legend-colour1,
#yp-legend-colour2,
#yp-legend-colour3,
#yp-legend-colour4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 2px;
	text-align: center;
}

#legend-colour1,
#legend-colour2,
#legend-colour3,
#legend-colour4 {
	display: inline;
	padding: 2px 20px;
	width: 60%;
	margin-left: 20px;
	height: auto;
}

#legend-colour1 { background-color: red;; }
#legend-colour2 { background-color: #079cad; }
#legend-colour3 { background-color: #23bf4b; }
#legend-colour4	{ background-color: mediumpurple; }


.yp-legend-event {
	display: grid;
	grid-template-columns: 1fr 20px;
	padding: 2px;
	text-align: left;
	border-bottom: 1px solid #efefef;
 }

 .legend-name {
	 display: inline;
	 padding: 2px 20px;
	 width: 60%;
	 margin-left: 20px;
	 height: auto;
 }

.legend-colour {
	display: inline;
	padding: 2px 20px;
	width: 60%;
	margin-left: 20px;
	height: auto;
}

#yp-legend-editor-panel {
	text-align: center;
	border-radius: 6px;
	width: 100%;
	padding: 5px;
	background-color: #d4e9ec;
}

#yp-event-details {
	display: flex;
	justify-content: center;
	height: auto;

}

.month {
	padding: 10px;
}

.month-title {
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	background-color: #d4e9ec;
	color: #079cad;
	margin-bottom: 0;
	margin-left: 5px;
	margin-right: 5px;
	padding: 6px;
	border-radius: 20px;
}

.days {
	display: grid;
	gap: 0 0;
	grid-template-columns: repeat( 7, 1fr );
	grid-template-rows: 1/2, 1, 1, 1, 1, 1;
}

.day-title {
	text-align: center;
	padding: 6px 6px;
	font-size: 0.8em;
	color: #079cad;
}

.blank-day {
}

.day {
	cursor: pointer;
	text-align: center;
	vertical-align: text-top;
	padding: 5px;
	margin: 2px;
	color: #079cad;
	width: 30px;
	height: 30px;
	line-height: 20px;
}

.ypSel {
	color: white;
	border-radius: 25px;
	font-weight: 700;
}

#yp-event-details-panel {
	text-align: center;
	margin-top: 30px;
	border-radius: 6px;
	padding: 5px;
	margin-top: 0;
}
#yp-add-event-panel-controls {
	margin-top: 20px;
}

#yp-new-event {
	margin-bottom: 0 !important;
}

.yp-button {
	padding: 6px 20px;
	border-style: 2px solid;
	border-top-color: #aaaaaa;
	border-left-color: #aaaaaa;
	border-bottom-color: #807977;
	border-right-color: #807977;
	border-radius: 20px;
	margin: 5px 5px;
	color: white;
	width: 140px;
}
.yp-button-small {
	padding: 4px 6px;
	font-size: 0.9em !important;
	border-top-color: #aaaaaa;
	border-left-color: #aaaaaa;
	border-bottom-color: #807977;
	border-right-color: #807977;
	border-radius: 20px;
	margin: 6px 4px;
	color: white;
	min-width: 50px;
}
.yp-button-tiny {
	padding: 2px 2px;
	min-width: 20px;
	width: 20px;
	border-radius: 2px;
}

.yp-button:hover,
.yp-button-small:hover,
.yp-button-tiny:hover {
	opacity: 0.7;
}

#yp-add-event-button { background-color: #079cad; }
#yp-edit-event-button { background-color: #fab423; }
#yp-delete-event-button { background-color: red; }

#yp-save-edit-button { background-color: #079cad; }
#yp-cancel-edit-button { background-color: grey; }

#yp-edit-panel-save-button { background-color: #079cad; }
#yp-edit-panel-cancel-button { background-color: grey; }
#yp-save-event-button { background-color: #079cad; }
#yp-cancel-event-button { background-color: grey; }

#yp-ok-button { background-color: #079cad; float: right; }

#date-range-button { background-color: #079cad; }
#recurrent-date-button { background-color: #079cad; }
#range-ok-button { background-color: #079cad; }
#recurrent-ok-button { background-color: #079cad; }
#range-cancel-button { background-color: grey; }
#recurrent-cancel-button { background-color: grey; }
.yp-close-button { background-color: #079cad; }

#yp-event-option {
	margin-bottom: 10px !important;
}

.yp-button-small:hover {
	opacity: 0.6;
}

#yp-save-all-button { background-color: #079cad; }
#yp-clear-dates-button { background-color: #fab423; }

#yp-save-all-button:hover,
#yp-clear-dates-button:hover {
	opacity: 0.7;
}

.yp-centre {
	text-align: center;
}
.yp-left { text-align: left; }
.yp-right { text-align: right; }
.yp-centre { text-align: center; }

#event-colour-div {
	display: inline;
	padding: 2px 10px;
	border-radius: 25px;
	margin-left: 10px;
}

#event-detail-text {
	margin-top: 10px !important;
}

#yp-help-panel {
	position: absolute;
	top: 50px;
	right: 200px;
	min-width: 200px;
	max-width: 500px;
	box-shadow: 0 10px 15px 0 rgba( 5, 111, 122, 0.6 ) !important;
	background-color: white;
	padding: 10px 20px;
	border-radius: 5px;
}

#yp-help-image {
	position: relative;
	top: 4px;
	width: 20px;
	float: left;
}

.yp-help-h1 {
	font-size: 1.0em;
	font-weight: 700;
	margin-top: 0px;
}

.yp-help-h2 {
	font-size: 0.95em;
	font-weight: 700;
	padding-top: 5px;
	margin-bottom: 0px;
	margin-top: 5px;
}

.yp-help-h3 {
	font-size: 0.9em;
	font-weight: 700;
	margin: 0;
	line-height: 1em;
}

.yp-help-h3-space {
	margin-top: 15px;
	margin-bottom: 0;
}

.yp-help-p {
	font-size: 0.9em;
	font-weight: 500;
	margin: 0;
	line-height: 1.3em;
}

.yp-hr {
	margin: 5px 0;
	border-color: lightgrey;
}

.yp-ul {
	margin-bottom: 5px;
}

.yp-li {
	padding: 0 !important;
}

.yp-warn {
	color: #ffa200;
}

#yp-date-range {
	display:grid;
	grid-template-columns: 1fr;
	padding-top: 10px;
}

.yp-range-label {
	display: inline;
	margin-left: 4px;
}
.yp-range-input {
	display: inline;
}

#yp-date-add {
	display: grid;
	margin: 10px 0;
	grid-template-columns: 1fr 4fr;
	gap: 0 0;
	margin-left: 5px;
	text-align: left;
	align-items: center;
}

#yp-range-controls,
#yp-recurrent-controls {
	padding-top: 10px;
}

#range-ok-button,
#recurrent-ok-button {
	min-width: 50px;
}

#yp-error-panel{
	padding: 10px 5px;
	border-radius: 6px;
	text-align: center;
	height: auto;
	border: 2px solid #fab423;
	margin-top: -10px;
	margin-bottom: 3px;
}
#yp-error-message{
	width: 95%;
	line-height: 25px;
	font-size: 0.9em;
	color: #056f7a;
}

.yp-recurrent-label {
	padding: 0 3px !important;
	font-weight: 400 !important;
}

.yp-rec-end-label {
	padding: 0 4px !important;
	font-weight: 400 !important;
}
.yp-year-label {
	padding-left: 5px;
}

#yp-recurrent-interval {
	text-align: center;
	padding: 0 !important;
	margin-bottom: 0 !important;
}

#yp-start-recurrent,
#yp-end-recurrent {
	margin-bottom: 0;
	color: #919191;
	border: 0;
	width: 100%;
	padding: 2px 0;
}

#yp-interval-period,
#yp-end-at {
	padding: 3px 6px !important;
	margin: 0 !important;
}

#yp-recurrent-date,
#yp-recurrent-interval,
{
	padding-top: 10px;
}

#yp-2-wide {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 0;
	border: 1px solid lightgrey;
	border-radius: 3px;
	text-align: left;
}

#yp-2-wide-2 {
		display: grid;
		grid-template-columns: 61px 1fr;
		gap: 0;
		border: 1px solid lightgrey;
		border-radius: 3px;
		text-align: left;
}

#yp-year-panel {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0;
	border: 1px solid lightgrey;
	border-radius: 3px;
	text-align: left;
	align-items: center;
	background-color: #d4e9ec;
	margin-bottom: 15px;
	margin-top: 15px;
}
#yp-year {
	margin: 0 !important;
}

#yp-3-wide {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	gap: 0;
	border: 1px solid lightgrey;
	border-radius: 3px;
}
#yp-3-wide-2 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 0;
		border: 1px solid lightgrey;
		border-radius: 3px;
}

.yp-whitespace-10,
.yp-white-space-20 {
	margin: 3px 0 3px 0 !important;
	color: transparent;
	border: transparent;
}
.yp-whitespace-20 {
	margin: 10px 0 10px 0 !important;
}

#yp-end-recurrent-aft {
	margin-bottom: 0 !important;
	padding: 0 !important;
	text-align: center;
}

#yp-edit-event-panel-controls,
#yp-add-event-panel-controls,
#yp-range-controls,
#yp-recurrent-controls {
	display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
}

.ui-tooltip {
	box-shadow: 0 5px 10px 0 rgba( 5, 111, 122, 0.6 ) !important;
}

.yp-hide {
	display: none;
}