/* CSS Document */

.invitees-list-item {
	font-family: romana-tw, serif;
	font-weight: 400;
	font-style: normal;
	font-size:1em;
	letter-spacing:normal;
	margin:0;
}

/* Modals */

div.modal {
	width:100vw;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
}

div.modal h1 {
	font-size:1.25em;
}

div.modal h2 {
	font-size:1em;
}

div.modal .screen {
	background:#ffffff;
	width:100%;
	/*border-radius:12px;
	box-shadow:0 0 12px 0 rgba(0,0,0,0.3);
	margin:16px;*/
	/*padding:40px;*/
}

/*div.modal .screen {
	display:block;
}*/

div.modal div.header {
	padding:32px 32px 8px;
}

div.modal div.footer {
	padding:16px 32px 32px;
}

div.modal div.header h1 {
	margin-bottom:16px;
}

div.modal .button {
	min-width:0;
	flex:1;
}

div.modal .button:not(:last-child) {
	margin-right:4px;
}

div.modal .button:last-child {
	margin-left:4px;
}

div.modal .button.disabled {
	pointer-events:none;
	color:#A0A0A0;
}

/* Forms */

.profile-icon-group {
	display:flex;
	flex-direcstion:row;
	justify-content:center;
}

.profile-icon {
	display:inline-block;
	font-family: romana-tw, serif;
	font-weight: 400;
	font-style: normal;
	font-size:1.5em;
	text-align:center;
	line-height:50px;
	background:#1793C0;
	color:#ffffff;
	width:50px;
	height:50px;
	border-radius:50%;
}

.profile-icon-group .profile-icon {
	width:45px;
	transform:scaleX(1.1);
	
}

.profile-icon.style-1 {
	background:#1793C0;
}

.invitees-list-item.style-1 .profile-icon {
	background:#1793C0;
}

.profile-icon.style-2 {
	background:#DC9912;
}

.invitees-list-item.style-2 .profile-icon {
	background:#DC9912;
}

.profile-icon.style-3 {
	background:#9CC125;
}

.invitees-list-item.style-3 .profile-icon {
	background:#9CC125;
}

.profile-icon.style-4 {
	background:#EC4215;
}

.invitees-list-item.style-4 .profile-icon {
	background:#EC4215;
}

.profile-icon.style-5 {
	background:#6164AB;
}

.invitees-list-item.style-5 .profile-icon {
	background:#6164AB;
}

.profile-icon.style-6 {
	background:#E44972;
}

.invitees-list-item.style-6 .profile-icon {
	background:#E44972;
}

div.modal div.header .profile-icon-group {
	margin-bottom:16px;
}

.profile-icon-group .profile-icon {
	border:solid 2px #ffffff;
}

.invitees-list-item {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:8px 32px;
	align-items:center;
	background:#f2f2f2;
	border-bottom:solid 1px #DDDDDD;
}

input[type=text], textarea, input[type=number], input[type=email], input[type=tel], select {
	font-size:1em;
	font-weight:300;
	box-sizing:border-box;
	width:100%;
	padding:12px;
	margin:4px 0;
	border:solid 2px #B5B5B5;
	border-radius:10px;
	transition:border-color 0.15s ease-out;
	outline:none;
}

::placeholder {
	color:#B5B5B5;
	opacity:1;
}

input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus {
	border-color:#3CB4E0;
}

input:not(:placeholder-shown):invalid {
    border-color:#DD2910;
}

form .error, p.error {
	text-align:center;
	font-size:1em;
	color:#DD2910;
	margin:0 0 4px;
}

form .error:not(.persist) {
	display:none;
}

input:not(:placeholder-shown):invalid~.error {
  display:block;
}

input[type="checkbox"] {
	display:none;
}

input[type="checkbox"]+span.checkbox {
	width:12px;
	height:12px;
	border-radius:4px;
	border:solid 2px #000000;
}

input[type="checkbox"]+span.checkbox svg {
	display:none;
}


input[type="checkbox"]+span.checkbox svg path {
	fill:#ffffff;
}

input[type="checkbox"]:checked+span.checkbox {
	width:12px;
	height:12px;
	border-radius:4px;
	color:#ffffff;
	background:#000000;
	border:solid 2px #000000;
}

input[type="checkbox"]:checked+span.checkbox svg {
	display:block;
}

label .profile-icon {
	font-size:0.75em;
	line-height:32px;
	width:32px;
	height:32px;
	margin-right:8px;
}

.button-container {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.items-container.selectable {
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	padding:8px 32px 0;
}

.items-container.selectable input[type=checkbox], .items-container.selectable input[type=radio] {
	display:none;
}

.items-container.selectable label {
	display:inline-block;
	border-radius:4px;
	padding:8px 16px;
	margin:0 8px 8px 0;
	background:none;
	color:#000000;
	border:solid #000000 2px;
	transition:background 0.2s, color 0.2s;
	cursor:pointer;
}

.items-container.selectable input[type=radio].button + label {
	display:block;
	text-align:center;
	font-size:1.75em;
	text-transform:none;
	letter-spacing:normal;
	border-radius:4px;
	padding:8px 16px;
	margin:0 8px 8px 0;
	background:none;
	color:#000000;
	border:solid #000000 2px;
	transition:background 0.2s, color 0.2s;
	cursor:pointer;
}

/*.items-container.selectable span {
	padding:8px 32px;
	margin:0 8px 8px 0;
	background:none;
	color:#000000;
	border:solid #000000 2px;
	transition:background 0.2s, color 0.2s;
	cursor:pointer;
}*/

.items-container.selectable input[type=checkbox]:checked + label, .items-container.selectable input[type=radio]:checked + label, .items-container.selectable input[type=radio].button:checked + label {
	background:#000000;
	color:#ffffff;
}

.email-container {
	margin:8px 32px;
}

span.email {
	display:block;
	background:#f2f2f2;
	color:#000000;
	padding:8px 16px;
	border-radius:4px;
}

.confirmation-container .invitees-list-item {
	align-items:flex-start;
}

.confirmation-container .invitees-list-item-group {
	margin:0 0 16px;
}

.confirmation-container .not-attending .invitees-list-item {
	align-items:center;
}

.confirmation-container .invitee-details-container {
	flex:1;
	text-align:left;
}

.confirmation-container .invitee-details-container span.label {
	display:inline-block;
	background:#000000;
	color:#ffffff;
	font-size:0.75em;
	padding:4px 8px;
	margin:4px 8px 4px 0;
	border-radius:4px;
}

.indicator-icon {
	width:30px;
	height:30px;
	border-radius:50%;
	color:#ffffff;
	margin:8px 8px 8px 0;
}

.indicator-icon.checked {
	background:#9CC125;
}

.indicator-icon.unchecked {
	background:#EC4215;
}

@media only screen and (min-width: 450px) {
	div.modal {
		background-color:#BFD6C8;
		background-image:url("imgs/modal-bg.jpg");
		background-size:cover;
		background-position:center;
	}
	
	div.modal .screen {
		max-width:450px;
		border-radius:12px;
		box-shadow:0 0 12px 0 rgba(0,0,0,0.3);
		margin:16px;
	}
}