﻿@charset "utf-8";
/* CSS Document */

/* ============================================

ZIPPORAH CEREMONY PLANNER CSS FILE | IMPORTANT NOTICE

This CSS document controls the Zipporah ceremony planner, and should not be edited without first consulting the lead designer.
Please use the dedicated 'custom' CSS file for any configurations to the style of this project.

=============================================== */

/* -- Ceremony Planner Dashboard (Registered user) -- */

ul.ceremony-planner-dashboard {
	list-style: none;
	margin: 32px 0;
	padding: 32px 0;
	border-top: dotted 1px rgba(0, 0, 0, 0.2);
	margin-left: -30px;
	flex-flow:row wrap;
}

ul.ceremony-planner-dashboard>li {
	flex: 1;
	margin-bottom: 30px;
	flex-basis: 33.333333%;
	min-width: 250px;
	flex-shrink: 0;
	padding-left: 30px;
	align-self: stretch;
}

@media(min-width:1000px) {
	ul.ceremony-planner-dashboard>li {
		flex-grow: 0;
	}
}

ul.ceremony-planner-dashboard>li>a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 30px;
	padding-right: 54px;
	background: rgba(0, 0, 0, 0.1);
	position: relative;
	text-decoration: none;
	transition: 0.4s ease;
}

ul.ceremony-planner-dashboard>li>a:hover {
	background: rgba(0, 0, 0, 0.15);
	transform: translateY(-3px);
}

ul.ceremony-planner-dashboard>li>a:hover>* {
	transition: 0.2s ease;
}

ul.ceremony-planner-dashboard>li>a>.fa {
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 18px;
}

ul.ceremony-planner-dashboard>li>a>p {
	font-weight: 600;
	font-size: 18px;
}

ul.ceremony-planner-dashboard>li>a>p.description {
	color: #333333;
	font-size: 13px;
	font-weight: 400;
}

/* -- Ceremony Arrangements -- */

ul.ceremony-arrangements {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.ceremony-arrangements>li {
	margin-bottom: 16px;
}

ul.ceremony-arrangements>li>div {
	background: rgba(0, 0, 0, 0.1);
	padding: 24px;
	margin-top: 16px;
}

/* -- Ceremony Arrangements via Manage Booking Ceremony Tab -- */

ul.zip-ceremony-arrangements {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

ul.zip-ceremony-arrangements>li {
	margin-bottom: 4px;
}

ul.zip-ceremony-arrangements>li>p.description {
	display: block;
	padding: 12px;
	border: solid 1px rgba(0, 0, 0, 0.1);
	border-top: none;
}

ul.zip-ceremony-arrangements>li>a {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	background: rgba(0, 0, 0, 0.05);
	padding: 12px;
	text-decoration: none;
}

ul.zip-ceremony-arrangements>li>a:hover {
	background: rgba(0, 0, 0, 0.1);
}

ul.zip-ceremony-arrangements>li>a>img {
	margin-right: 12px;
	width: 16px;
}

ul.zip-ceremony-arrangements>li>a>p {
	flex: 1;
	margin: 0;
	line-height: 1;
}

ul.zip-ceremony-arrangements>li>a>i.fa-caret-right {}

ul.zip-ceremony-arrangements>li:last-child(1) .zip-ceremony-options {
	padding-bottom: 0;
}

.zip-ceremony-options {
	position: relative;
	padding: 24px 0;
}

.zip-ceremony-options .preview,
.zip-ceremony-options-preview {
	padding: 16px 0;
}

.zip-ceremony-options input[type="submit"] {
	margin-bottom: 24px;
}

.zip-ceremony-options a.close {
	position: absolute;
	right: 0;
	top: 48px;
	display: inline-flex;
	text-decoration: none;
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
	border: solid 1px rgba(0, 0, 0, 0.1);
	border-radius: 100px;
	opacity:1.0;
}

.zip-ceremony-options a.close:hover {
	opacity:0.8;
}

/* == Username Display == */

ul.zip-ceremony-user-display {
	list-style:none;
	margin:-1em 0 2em -1em;
	padding:0 0 2em;
	font-size:1.2em;
	border-bottom:dotted 1px rgba(0,0,0,0.2);
}

ul.zip-ceremony-user-display>li {
	display:inline-block;
	margin:1em 0 0 1em;
	padding:0;
}

ul.zip-ceremony-user-display>li:not(.username) a {
	text-decoration:underline;
}

ul.zip-ceremony-user-display>li a:hover {
	opacity:1.0;
}