* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: 300; font-family: 'Open Sans', sans-serif; color: #444; }

*, *:before, *:after { box-sizing: inherit; }

::-webkit-scrollbar { -webkit-appearance: none; width: 6px; }

::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); }

.clearfix:after { content: " "; display: block; font-size: 1px; line-height: 1px; height: 0; clear: both; visibility: hidden; overflow: hidden; }

a { text-decoration: none; color: #006cb1; }
a:hover { text-decoration: underline; }

html { height:100%; box-sizing: border-box; }
body { width: 100%; padding: 0px; border: 0px; background: #F6F6F6; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; -webkit-text-size-adjust: 100%; min-height: 100%; position: relative; } 

input { outline: none; -webkit-appearance: none;  border-radius: 0; caret-color: #006cb1; }

textarea { width: 100%; border: 0; border-bottom: 1px solid #ccc; margin-bottom: 20px; -webkit-appearance: none; font-size: 16px; outline: none;; border-radius: 0; height: 200px; resize: none; padding: 0; }

textarea:focus { border: none; border: 1px solid #006cb1 !important; }

input:focus { border: 1px solid #006cb1 !important; -webkit-appearance: none; border-radius: 3px; }




.button, a.button, input.button { line-height: 31px; padding: 0 25px; border-top: solid 1px rgba(255,255,255,0.1); display: inline-block; color: #fff; text-decoration: none; font-size: 18px; font-weight: 100; text-align: center; border-radius: 5px; }
a.button:hover, input.button:hover { background: #444; }
a.button.noclick, input.button.noclick { background: #bbb; border: none; border-top: none; color: #fff; cursor: default;}


a.button.green:hover, input.button.green:hover { background: #0bba2c; border: solid 1px #09aa27; border-top: solid 1px rgba(255,255,255,0.3); color: #fff; cursor: pointer; }
a.button.link { background: none; border: 0; border-top: 0; color: #777; font-size: 12px; }
a.button.link:hover { color: #333; }
	
	
.button.green { background:#4fc966; font-size:15px; }
.button.green:hover { background:#2ea644; }	
.button.green.open { background: transparent; border:1px solid #4fc966; color:#4fc966; font-size:18px; }
.button.green.open:hover { background:#4fc966; color:white;}	
.button.green.open.selected { background:#4fc966; color:white;}	

/* .button.blue { background:linear-gradient(40deg,#006cb1,#285197 70%); font-size:15px; } */

.button.blue { background-color: #006cb1; font-size:15px; }
.button.blue:hover { background-color: #285197; }	
.button.blue.open { background: transparent; border:1px solid #006cb1; color: #006cb1; font-size:18px; }
.button.blue.open:hover { background: #006cb1; color:white;}	
.button.blue.open.selected { background: #006cb1; color:white;}	

.button.pink { background:#F52887; font-size:15px; }
.button.pink:hover { background:#F52887; }
.button.pink.open { background:transparent; border:1px solid #F52887; color:#F52887; font-size:18px; }
.button.pink.open:hover { background:#F52887; color:white;}	
.button.pink.open.selected { background:#F52887; color:white;}

.button.white { background:transparent; font-size:15px; }
.button.white:hover { background:transparent; }	
.button.white.open {border:1px solid white; color:white; font-size:26px; }
.button.white.open:hover { background:transparent; color:white;}	
.button.white.open.selected { background:white; color:white;}	

.button.dark { background:#6A6A6A; font-size:15px; }
.button.dark:hover { background:#444; }	
.button.dark.open { background:transparent; border:1px solid #444; color:#444; }
.button.dark.open:hover { background:#444; color:white; }

.button.grey { background:#444; font-size:15px; color: #fff; }
.button.grey:hover { background:#444; }	
.button.grey.open { background:transparent; border:1px solid #444; color:#444; }
.button.grey.open:hover { background:#444; color:white; }
.button.grey.open.selected { background:#444; color:white; }

.button.light-grey { background:#ccc; font-size:15px; }
.button.light-grey:hover { background:#ccc; }	
.button.light-grey.open { background:transparent; border:1px solid #ccc; color:#444; }
.button.light-grey.open.selected { border:2px solid #00abe3; }
	
.button.red { background:#ED2F2F; font-size:15px; }
.button.red:hover { background:#c00; }
.button.red.open { background:transparent; border:1px solid #ED2F2F; color:#ED2F2F; }
.button.red.open:hover { background:#c00; color:white; }

.button.small { font-size: 14px !important; line-height: 20px; padding: 6px 12px; font-weight: 100; }
.button.medium { font-size: 22px; line-height: 20px; padding:12px 25px; font-weight: 100; }
.button.large { font-size: 24px; line-height: 24px; padding:15px; width:100%; height: 58px; font-weight: 100; }

.button.no-hover { background:#999 !important; display: none; padding:13px; line-height: 25px; width:100%; }

.button.small.rounded { border-radius: 3px; }

a.grey { color: #444; }

@media (min-width: 700px) {
	.button.large { font-size:30px; line-height: 25px; padding:15px; } 
}

.hr { width: 100%; height: 0px; border-top: solid 1px #eee; border-bottom: solid 1px #fff; clear: both; }

/* ======================= HEADER =================================== */
.header { padding: 10px 16px 0px 10px; background: #FFF; width:100%; position: relative; z-index: 1500; text-align: center; border-bottom: 1px solid #ccc; }

.header .unit-name { color: #444; font-size: 18px; text-decoration: none; text-transform: capitalize;  }

.header .menu { float: right; display: none; }

.header .menu .link { font-size: 14px; margin-right:10px; color: #444; }
.header .menu .link.outline {  border: 1px solid #444; border-radius: 3px; padding: 6px 10px; text-decoration: none; }

.alert { background: rgb(69, 218, 190); padding: 10px 16px 10px 10px; width:100%; text-align:center;}
.alert a { color:#1E2B38; font-weight:500; text-decoration: none; }
.alert a:hover { color:#1E2B38; text-decoration: none; }

@media (min-width: 700px) {
	.header { text-align: left; }
	.header .unit-name { color: #444; font-size: 24px; }
	
	.header .menu { display: inline; }
	
	.section.breadcrumb { display: none; }
}


.section { position: relative; }

.section .delete { position: absolute; bottom: 10px; right: 10px; padding: 4px 7px; }

.section .delete:hover { border: 1px solid #D8000C; padding: 3px 6px; border-radius: 3px; }
.section .delete:hover i { color: #D8000C; }

.section .more-info { position: absolute; top: 15px; right: 15px; padding: 4px 7px; }

.section .more-info:hover { border: 1px solid #444; padding: 3px 6px; border-radius: 3px; }
.section .more-info:hover i { color: #444; }

.section .pair { position: absolute; bottom: 10px; right: 40px; padding: 4px 7px; }

.section .pair:hover { border: 1px solid #444; padding: 3px 6px; border-radius: 3px; }
.section .pair:hover i { color: #444; }

.section .print { position: absolute; bottom: 10px; right: 10px; padding: 4px 7px; }

.section .print:hover { border: 1px solid #444; padding: 3px 6px; border-radius: 3px; }
.section .print:hover i { color: #444; }

.section .join { position: absolute; bottom: 10px; right: 40px; padding: 4px 7px; }

.section .join:hover { border: 1px solid #444; padding: 3px 6px; border-radius: 3px; }
.section .join:hover i { color: #444; }

.remove-permission { padding: 4px 7px; }
.remove-permission:hover { border: 1px solid #D8000C; padding: 3px 6px; border-radius: 3px; }
.remove-permission:hover i { color: #D8000C; }

/* ======================= footer =================================== */
.footer { padding:15px; position: absolute; bottom: 0; left: 0;}
.footer .copyright { font-size:10px; }
.footer a { font-size: 10px; text-decoration: none; }

/* ===================== text-message v3 ============================== */

.text-message { background-color:#F6F6F6; }
.text-message .section { background-color:#fff; border:1px solid #ccc; padding: 10px; width:98%; margin:0 auto 10px auto; border-radius: 5px; }

.text-message .section.no-padding { padding: 0px; }
	
.text-message .section .padding { padding: 0px 10px; }

.text-message .section.blank { border:none; background:none; }

.text-message .section textarea { width:100%; border:0; border-bottom: 1px solid #ccc; margin-bottom:20px;}

.text-message a.box { display: inline-block; background-color:transparent; border:1px solid #ccc; padding:8px 20px; margin-right:5px; font-weight:100; margin-bottom:8px; font-size:14px; text-decoration: none; color:#444; line-height: 18px; border-radius: 3px; }

.text-message a.box:hover {  border:1px solid #00abe3; color:#00abe3;}

.text-message a.box.selected { background-color:#00abe3; border:1px solid #00abe3; color:#fff; }

.text-message a.box.selected span { color: #fff; }

.text-message a.box.selected:hover { color:#fff; }

.text-message .column { width: calc(94% / 3); display:inline-block; margin-right: 2%;}
.text-message .column:last-of-type {margin-right:0px;}
.text-message .column a {width: 100%; display: block; margin-top: 10%; }

.text-message .select-timing .column { width: calc(97% / 2); display:inline-block; }
.text-message .select-timing .column a { margin-top: 0px; }

.text-message .hidden {display:none;}

.text-message .results-list {display:none;}
.text-message .unsubscribed-list { display:none; }
.text-message .error-list { display:none; }
.text-message .received-list { display:none; }

.text-message .results-list .profile-card.small:nth-child(6n+1) { margin-left:0px; }
.text-message .error-list .profile-card.small:nth-child(6n+1) { margin-left:0px; }
.text-message .unsubscribed-list .profile-card.small:nth-child(6n+1) { margin-left:0px; }
.text-message .received-list .profile-card.small:nth-child(6n+1) { margin-left:0px; }

.text-message .profile-card.small { float:left; text-align:center; margin-top:1%; margin-left:1%; background:#fff; border:1px solid #ccc; width: calc(95% / 6); }
.text-message .profile-card.small:first-of-type { margin-left:0px; }

.text-message .title.error span { color:#D8000C !important; }

.text-message .actions { text-align: center; }
.text-message .alt-link { text-transform: uppercase; color: #444; font-size: 12px; font-weight: 100; }

.text-message .time-copy.red {color: #ff675c; font-size: 15px; margin-bottom: 10px; display:block;}

.text-message .title { display: block; width: 100%; }

.text-message #date-select .day { border:1px solid #ccc; width: calc(96% / 7); text-align: center; padding: 5px 0; float:left; margin-left:1%; text-decoration: none;}
.text-message #date-select .day:first-of-type { margin-left:0; }
.text-message #date-select .day .text {font-size: 12px; text-transform: uppercase;}
.text-message #date-select .day .number {font-size: 30px; text-transform: uppercase;}

.text-message #date-select .day.selected { color:#fff; background-color: #00abe3; border:1px solid #00abe3; }
.text-message #date-select .day.selected span { color:#fff; }

.text-message #date-select .day.next { cursor: pointer; border:none; text-align:left; padding-left:15px; }
.text-message #date-select .day.previous { cursor: pointer; border:none; text-align:right; padding-right:15px; }

.text-message .time { border:1px solid #ccc; width: calc(95% / 7); text-align: center; padding: 5px 0; float:left; margin-left:1%; text-decoration: none;}
.text-message .time .text {font-size: 12px; text-transform: uppercase; display:block; }
.text-message .time .number {font-size: 30px; text-transform: uppercase; }

.text-message .time.selected { color:#fff; background-color: #00abe3; border:1px solid #00abe3; }
.text-message .time.selected span { color:#fff; }

.text-message .time.next { cursor: pointer; border:none; margin-left: 0px; text-align:left; padding-left:15px; width: 15px; }
.text-message .time.next span {font-size:50px; }

.text-message .time.previous { cursor: pointer; border:none; margin-left: 0px; text-align:right; padding-right:15px; padding-top: 10px !important; padding-bottom: 15px !important; }
.text-message .time.previous span {font-size:50px; }

.text-message .minute .time { padding-top:10px; padding-bottom:11px; }
.text-message .minute .time.next { padding-bottom: 0px; padding-top: 0px; position: relative; width: 15px; margin-left: 2%; padding-left: 0px; }

.text-message .minute .time.next .number { position: absolute; top: -7px; } 

.text-message .minute .time.previous { padding-bottom: 0px; padding-top: 0px; position: relative; width: 15px; margin:0;  }
.text-message .minute .time.previous .number { position: absolute; top: -7px; margin-left: 1%; }

.text-message .minute .time, .text-message .hour .time { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.section .date .month { width: 31%; margin-right:2.5%; display: inline-block; }
.section .date .day { width: 31%; margin-right:2.5%; display: inline-block; }
.section .date .year { width: 31%; display: inline-block; }
.section .date input { text-align: center; }

.section .date .title { margin-bottom: 10px; }
.section .date .title span { font-weight: 300; text-transform: capitalize; font-size: 13px; }
.section .date .title.error span { font-weight: 700; text-transform: uppercase; font-size: 11px; }

@media (min-width: 700px) {
	.text-message .section { width:700px; padding: 15px; }
	
	.text-message .section .padding { padding: 0px 15px; }
	
	.text-message .section.large { width:80%; }
	
	.text-message a.box { font-size: 16px; }
	
	.text-message .day { padding: 10px 0; }
		
	.text-message .day .text {font-size:16px; text-transform: uppercase; }
	.text-message .day .number {font-size:40px; text-transform: uppercase; }
	
	.text-message .time { padding: 10px 0; }
		
	.text-message .time .text {font-size:16px; text-transform: uppercase; display:block; }
	.text-message .time .number {font-size:40px; text-transform: uppercase; }
	
	.text-message .minute .time { padding-top:20px; padding-bottom:21px; }
	
	.text-message .time.next { cursor: pointer; border:none; margin-left: 0px; text-align:left; padding-left:15px; }
	.text-message .minute .time.next { padding-top: 10px; padding-bottom: 10px; margin-left:1%; }
	
	.text-message .minute .time.next .number { position: absolute; top: 10px; } 
	.text-message .minute .time.previous .number { position: absolute; top: 10px; margin-left: 1%; }
}


.individual .section { background-color:#fff; border:1px solid #ccc; padding: 10px; width:98%; margin:0 auto 10px auto; border-radius: 5px; }
.individual .section.blank { border:none; background:none; }
.individual .section.no-padding { padding:0px; }


.individual .section a.box { display: inline-block; background-color:transparent; border:1px solid #ccc; padding:8px 20px; margin-right:5px; font-weight:100; margin-bottom:8px; font-size:14px; text-decoration: none; color:#444; line-height: 18px; border-radius:3px; }
.individual .section a.box:hover {  border:1px solid #285197; color:#285197 !important;}
.individual .section a.box.selected { background-color: #006cb1; border:1px solid #006cb1; color:#fff !important; }
.individual .section a.box.selected:hover { color:#fff; }

.individual .section div.box { display: inline-block; background-color:transparent; border:1px solid #ccc; padding:8px 20px; margin-right:5px; font-weight:100; margin-bottom:8px; font-size:14px; text-decoration: none; color:#444; line-height: 18px; }

.individual .section { background-color:#fff; border:1px solid #ccc; padding-top:15px; padding-bottom:15px; width:98%; margin:0 auto 10px auto; }
.individual .section .inside { padding-left: 15px; padding-right:15px; position: relative; }


.individual .section.date input { text-align: center; }

.individual .section.edit span.question { font-size: 18px; display: block; margin-bottom: 10px; margin-top:10px; }
.individual .section.edit span.content { font-size: 13px; display: block; margin-bottom: 15px; margin-top:10px; }

.individual .hr { margin-top:20px; margin-bottom:10px; }

.individual img { max-width: 350px; }



.individual .section .box.success { background-color: #0c0 !important; border: 1px #0c0 solid !important; color: #fff; -webkit-transition: background-color 2500ms linear; -moz-transition: background-color 2500ms linear; -o-transition: background-color 2500ms linear; -ms-transition: background-color 2500ms linear; transition: background-color 2500ms linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

.individual .section .box.idle { background-color: #00abe3 !important; border: 1px #00abe3 solid !important; color: #fff; -webkit-transition: background-color 2500ms linear; -moz-transition: background-color 2500ms linear; -o-transition: background-color 2500ms linear; -ms-transition: background-color 2500ms linear; transition: background-color 2500ms linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

.individual .section .box.success:hover { color: #fff !important; }
.individual .section .box.idle:hover { color: #fff !important; }



.individual .subscription { margin-bottom:20px; }
.individual .subscription.notifications { margin-bottom:20px; display:flex; }


.individual .subscription .status { text-align:center; width:450px;}

.individual .subscription .box { display: block; color: white; font-size: 14px; padding: 5px 10px; margin-top: 8px; }
.individual .subscription .box.orange { background-color: #ff675c;  }
.individual .subscription .box.green {background-color:#5fba7d; }

.individual .subscription .information { display: inline-block; }

.individual .subscription .checks { padding-right:15px; padding-left:10px; padding-top:5px; }

.individual .subscription .checks .fa-minus-square { font-size:20px; }
.individual .subscription .checks .fa-check-square { font-size:20px; }
.individual .subscription .checks .far:hover { color:#00abe3; }

.individual .subscription .title.error span { color:#f63 !important;}

.individual .subscription a { text-decoration: none; }

.section.first { margin-top: 15px; }

@media (min-width: 700px) {
	.individual .section { width:700px; padding:15px; }

	
	.individual span.content { display:block; font-size:20px; }
	.individual span.content.xlarge { font-size: 45px; }
	.individual span.content.large { font-size: 30px; }
	.individual span.content.medium { font-size: 25px; }
	.individual span.content.small { font-size: 14px; }
}



.section .title { margin-bottom:20px; margin-top:20px; }
.section .title span { font-weight: 700; text-transform: uppercase; font-size: 11px; }
.section .title a { font-weight: 100; font-size: 13px !important; text-decoration: none; float: right; margin-right: 2%; }

.section .title:first-of-type { margin-top: 0px; }

.section .title.top { margin-top: 40px; }

.section .form label { margin-bottom:20px; margin-top:20px; font-weight: 700; text-transform: uppercase; font-size: 11px; }

.section .form label:first-of-type { margin-top: 0px; }

.section .form label.top { margin-top: 40px; }

.section .form input { margin-top: 10px; }

span.content { display:block; font-size:20px; }
span.content.xlarge { font-size: 40px; }
span.content.large { font-size: 35px; }
span.content.medium { font-size: 25px; }
span.content.small { font-size: 12px; }
span.content.xsmall { font-size: 10px; }

.content.bottom { margin-bottom: 20px; }
.content.top { margin-top: 10px; }
.content.xtop { margin-top: 15px; }
.content.bold { font-weight: 500; }
.content.xbold { font-weight: 700; }
.content .bold { font-weight: 500; }

.content.uppercase { text-transform: uppercase; }

.content.red { color:#D8000C; }
.content.yellow { color: #9F6000; }


.section.no-padding { padding: 0px; }

.section .padding { padding: 0px 10px; }

.section .list .item { border-bottom: 1px #eee solid; padding: 15px 0px; width:100%; display:flex;  justify-content: space-between; }
.section .list .item:last-of-type { border-bottom: none; }
.section .list .item .column.right { text-align: right; }
.section .list .item .column.left { text-align: left; }

@media (min-width: 700px) {

	span.content { display:block; font-size:20px; }
	span.content.xlarge { font-size: 45px; }
	span.content.large { font-size: 38px; }
	span.content.medium { font-size: 30px; }
	span.content.small { font-size: 14px; }
	span.content.xsmall { font-size: 10px; }
}



.section .calendar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.section .calendar .each { border: 1px #ccc solid; text-align: center; padding: 10px 0px; text-decoration: none; cursor: pointer; flex: 1; margin-right: 5px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 3px; }
.section .calendar .each:hover { border: 1px #00abe3 solid; background: #00abe3; }
.section .calendar .each:hover span { color: #fff; }

.section .calendar .each.selected { border: 1px #00abe3 solid; background: #00abe3; }
.section .calendar .each.selected span { color: #fff; }

.section .calendar .each.disabled { border: 1px #fff solid; cursor: default; }
.section .calendar .each.disabled:hover {  background: #fff; }


.section .calendar .each .detail { text-transform: uppercase; font-size: 12px; display: block; }
.section .calendar .each .number { font-size: 30px; display: block; }

.section .calendar.minutes .each .number { font-size: 22px; display: block; }

.section .calendar .change { font-size: 30px; width: 20px; padding: 16px 0px; text-decoration: none; cursor: pointer; }
.section .calendar .change.right { text-align: center; }
.section .calendar .change.left { text-align: center; }
.section .calendar .change.hide span { color: #ddd; }

.section .calendar .block { display:flex; justify-content: space-between; }

.section .calendar .block.hours-2, .section .calendar .block.hours-3, .section .calendar .block.hours-4, .section .calendar .block.minutes-2, .section .calendar .block.minutes-3 { display: none; }

.section .calendar .block.days-2, .section .calendar .block.days-3, .section .calendar .block.days-4 { display: none; }

.section .calendar.minutes .change { padding: 4px 0px; }

@media (min-width: 700px) {
	.section .calendar .each .detail { text-transform: uppercase; font-size: 16px; display: block; }
	.section .calendar .each .number { font-size: 40px; display: block; }
	
	.section .calendar .change { font-size: 48px; width: 24px; padding: 13px 0px; }
	
	.section .calendar.minutes .change { padding: 0px; }
	
	.section .calendar .change.right { text-align: right; }
	.section .calendar .change.left { text-align: left; }
	
	.section .calendar.minutes .each .number { font-size: 40px; display: block; }
	
}




.auth .section { width: 100%; }

@media (min-width: 450px) {
	.auth .section { width: 450px; }
	
}

@media (min-width: 705px) {
	
	.section.center { width: 700px; }
}

@media (min-width: 1005px) {
	
	.section.page { width: 1000px; }
	.page.legal .section { width: 1000px; }
}

.section { background-color:#fff; border:1px solid #ccc; padding: 10px; width:98%; margin:0 auto 10px auto; border-radius: 5px; }
.section.blank { border:none; background:none; }
.section.no-padding { padding:0px; }
.section .padding.all { padding: 15px; }
.section .padding.no-bottom { padding-bottom: 0px; }






.section a.box { display: inline-block; background-color:transparent; border:1px solid #ccc; padding:8px 20px; margin-right:5px; font-weight:100; margin-bottom:8px; font-size:14px; text-decoration: none; color:#444; line-height: 18px; border-radius:3px; }
.section a.box:hover {  border:1px solid #006cb1; color:#006cb1 !important;}
.section a.box.selected { background-color:#006cb1; border:1px solid #006cb1; color:#fff !important; }
.section a.box.selected span { color:#fff !important; }
.section a.box.selected:hover { color:#fff; }

.section div.box { display: inline-block; background-color:transparent; border:1px solid #ccc; padding:8px 20px; margin-right:5px; font-weight:100; margin-bottom:8px; font-size:14px; text-decoration: none; color:#444; line-height: 18px; }

.section { background-color:#fff; border:1px solid #ccc; padding-top:15px; padding-bottom:15px; width:98%; margin:0 auto 10px auto; }
.section .inside { padding-left: 15px; padding-right:15px; position: relative; }




.section.date input { text-align: center; }

.section.edit span.question { font-size: 18px; display: block; margin-bottom: 10px; margin-top:10px; }
.section.edit span.content { font-size: 13px; display: block; margin-bottom: 15px; margin-top:10px; }

.hr { margin-top:20px; margin-bottom:10px; }

.section .box.success { background-color: #0c0 !important; border: 1px #0c0 solid !important; color: #fff; -webkit-transition: background-color 2500ms linear; -moz-transition: background-color 2500ms linear; -o-transition: background-color 2500ms linear; -ms-transition: background-color 2500ms linear; transition: background-color 2500ms linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

.section .box.idle { background-color: #00abe3 !important; border: 1px #00abe3 solid !important; color: #fff; -webkit-transition: background-color 2500ms linear; -moz-transition: background-color 2500ms linear; -o-transition: background-color 2500ms linear; -ms-transition: background-color 2500ms linear; transition: background-color 2500ms linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

.section .box.success:hover { color: #fff !important; }
.section .box.idle:hover { color: #fff !important; }

/* ======================= forms  =================================== */

.section .form { margin-bottom: 20px; }
.section .form:last-of-type { margin-bottom: 0px; }

.section .form .title { margin-bottom:10px; }
.section .form .title span { font-weight: 500; text-transform: none; font-size: 13px; margin-bottom:10px; }

.section .form label { margin-bottom:10px; font-weight: 500; text-transform: none; font-size: 13px; margin-bottom:10px; }

.section .form.error .title span { color: #D8000C !important; }

.section .form.error label { color: #D8000C !important; }

.section .form input { font-size:25px; border: 1px solid #ccc; width: 100%; border-radius: 5px; padding: 10px; }
.section .form textarea { font-size:25px; border: 1px solid #ccc; width: 100%; border-radius: 5px; padding: 10px; }

.section .form.error input { border:1px solid #D8000C !important; color: #D8000C; }
.section .form.error textarea { border:1px solid #D8000C !important; color: #D8000C; }

.section .form.success input { border-bottom: 1px #0c0 solid !important; -webkit-transition: background-color 2500ms linear; -moz-transition: background-color 2500ms linear; -o-transition: background-color 2500ms linear; -ms-transition: background-color 2500ms linear; transition: background-color 2500ms linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

.section .form.idle input { background-color: transparent !important; border-bottom: 1px #ccc solid !important; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

@media (min-width: 700px) {

	.section .form .title span { font-size: 16px; }
	.section .form label { font-size: 16px; }
	.section .form input { font-size: 30px; }
}

/* ======================= profile-card  =================================== */

.list .profile-card img.profile { display: inline-block; object-fit: cover; }

@media (min-width: 700px) {	
	.list .profile-card img.profile { display: inline-block; object-fit: cover; }
}
	
.profile-card  { text-decoration: none; background:#fff; border: 1px solid #ddd; width: calc(96% / 2); float: left; border-radius: 3px; overflow: hidden; margin: 2.5px 0px 2.5px 5px; display: flex; flex-wrap: wrap; }
.profile-card .image { text-align: center; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; }
.profile-card .image img { width: 100%; }
.profile-card .image span { font-size: 35px; display: block; }

a.profile-card { text-decoration: none; }

.profile-card .display { padding: 5px 8px; overflow: hidden; width: 100%; align-self: flex-end; text-align: center;  }
.profile-card .display span.code { text-transform: uppercase;}


.profile-line { display: flex; width:100%; }
.profile-line.break { border-bottom: 1px #ccc solid; padding: 10px 0; }
.profile-line.break:last-of-type { border: none; }

.profile-line .name { width: 65%; padding-left: 5px; }
.profile-line .action { width: 35%; text-align: right; padding-right: 10px; }

.unit .list { display: flex; flex-wrap: wrap; justify-content: flex-start; }



.unit .profile-card .display { padding: 0px 8px 12px 8px;  } 

.unit .profile-card .image span { font-size: 40px; }


.profile .profile-card:first-of-type { margin-left: 0px; }


@media (min-width: 700px) {	
	.unit .profile-card { width: calc(1/4 * 100% - (1 - 1/4) * 6px); margin: 2px 0px 2px 4px; }
}

@media (min-width: 800px) {

	.unit .profile-card .display { padding: 0px 8px 14px 8px;  } 
	
	.unit .profile-card { width: calc(1/6 * 100% - (1 - 1/6) * 6px); margin: 2px 0px 2px 4px; }
}

@media (min-width: 1600px) {
	.unit .profile-card { width: calc(1/10 * 100% - (1 - 1/12) * 5px); margin: 2px 0px 2px 4px; }
	
}





.unit .form.search #spinner { font-size: 20px; position: absolute; top: 11px; right: 38px; color:#ccc; display: none; }
.unit .form.search #clear { font-size: 20px; position: absolute; top: 11px; right: 40px; color: #444;  cursor:pointer; display: none; }

.unit .form.search input:focus { border:none !important; }

.unit .page-header { margin: 20px 5px 15px 15px; position: relative; }

.unit .form.search { margin: 5px; border:1px solid #ccc; position: relative; padding: 2px 10px 2px 10px; background-color: #fff; border-radius: 5px; height: 42px; }
.unit .form.search .fa-search { position: absolute; top: 10px; left: 10px; font-size: 18px; color: #ccc; z-index: 100;}
.unit .form.search input { text-indent: 25px; width: 95%; border: none; font-size: 18px; }

.unit .form.search .filter {position: absolute; top: 6px; right: 5px; padding: 3px 6px; }
.unit .form.search .filter:hover { background-color: #E8E8E8; padding: 3px 6px; border-radius: 3px; }

.unit .form.search .filter.selected { padding: 3px 6px; border-radius: 3px; background-color: #E8E8E8; }

.unit .form.search .filters { width: 200px; position: absolute; top: 38px; right: 0px; z-index: 1000; border-radius: 5px; padding: 10px; background-color: #FFF; display: none; box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px; }

.unit .form.search .filters a.box { display: inline-block; border:1px solid #ccc; padding:8px 20px; margin-right:5px; font-weight:100; margin-bottom:8px; font-size:14px; text-decoration: none; color:#444; line-height: 18px; border-radius: 3px; width: 100%; background-color: #fff; }

.unit .form.search .filters a.box:hover {  border:1px solid #006cb1; color: #006cb1;}

.unit .form.search .filters a.box.selected { background-color: #006cb1; border:1px solid #006cb1; color:#fff; }

.unit .form.search .filters a.box.selected:hover { color:#fff; }

@media (min-width: 450px) { 
	.unit .form.search { margin: 5px; border:1px solid #ccc; position: relative; padding: 6px 10px 6px 10px; background-color: #fff; border-radius:5px; }
	.unit .form.search .fa-search { position: absolute; top: 10px; left: 10px; font-size: 18px; color: #ccc; }
	.unit .form.search input { text-indent: 30px; width: 95%; border: none; font-size: 18px; }
}


@media (min-width: 1200px) { 
	.unit .form.search input { text-indent: 25px; width: 95%; border: none; font-size: 18px; position: absolute; top: 6px; }
	
	.inner .form.search { margin-left:.25%; margin-right:.25%; margin-top:15px; }
}

.plaque.print { border: 1px solid #ccc; }

@media print {
	 .no-print {display:none !important; }
	 .plaque.print { border: none; }
	 html, body { height:100%; margin: 0 !important;  padding: 0 !important; overflow: hidden; }
	 
	 .section { border: none; }
	 .header { border: none; }
	 .show-menu { display: none; }
}

.plaque.print { text-align:center; margin: 0 auto; }
.plaque.print.vertical { width: 600px; }
.plaque.print.landscape { width: 1000px; }
.plaque.print.label { width: 100%; }

.plaque.print .content { width: 75%; margin: 0 auto;}

.plaque.print img.plaque { display: block; margin: 0 auto; width: 80%; }

.plaque.print.landscape img.plaque { width: 300px; margin-top: 20px; }
.plaque.print.landscape .content { width: 80%; margin-top: 50px; }

.plaque.print.vertical .content { margin-top: 50px; width: 82.5%; }
.plaque.print.vertical img.plaque { width: 300px; margin-top: 50px; }
.plaque.print.vertical img.logo { margin-top: 50px; }

.show-menu { position: absolute; right: 10px; top: 10px; padding: 3px 6px; }
.show-menu:hover { background-color: #E8E8E8; padding: 3px 6px; border-radius: 3px; }
.show-menu.selected { background-color: #E8E8E8; }

.popup-menu { width: 95%;  max-width: 700px; background-color: #006cb1;  border-radius: 5px; z-index: 10000; position: absolute; right: 2.5%; top: 50px;  box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px; display: none; }

.popup-menu .inside { display: flex; justify-content: space-between; min-height: 125px; padding: 2%; }
.popup-menu .each { width: calc((96% / 3)); display: flex; align-items: center; text-align: center; justify-content: center; border-radius: 5px; margin: 1%; text-decoration: none; background-color:rgba(255, 255, 255, 0.1);  }
.popup-menu .each .display { text-align: center; }
.popup-menu .each:hover { background-color: #285197; }
.popup-menu .each i { font-size: 25px; color: #fff; display: block; }
.popup-menu .each span { color: #fff; margin-top: 10px; }

@media (min-width: 700px) { 
	.popup-menu { width: 100%; max-width: 500px; right: 10px; }
}


.billing .invoice { display: flex; width:100%; text-decoration: none; text-align: center; align-items: center; justify-content: center; padding: 15px 0px; }
.billing .invoice .column { width: calc(100% / 4); }
.billing .invoice .column.number { text-align: left; width: calc(100% / 4); }
.billing .invoice .column.description {  width: calc((100% / 4) + 10%); }
.billing .invoice .column.link { text-align: right; width: calc((100% / 4) - 10%); }
.billing .invoice .column.amount { text-align: right; }

.billing .invoice:last-of-type { border: none;  }

.close { width: 100%; text-align: center; text-transform: uppercase; text-decoration: none; margin-top: 10px; display: block; font-size: 13px;  color: #444; }

@media (min-width: 1200px) { 
	.billing .invoice .column.number { width: calc((100% / 4) - 7.5%); }
	.billing .invoice .column.description {  width: calc((100% / 4) + 7.5%); }
	.billing .invoice .column.link { width: calc(100% / 4); }
}

.contract { padding: 10px 0px; border-bottom: 1px solid #eee; }
.contract:first-of-type { padding-top: 0px; }
.contract:last-of-type { border: none;  }

.manage .title { margin-bottom: 10px; }




.memorials { margin: 0px 5px; justify-content: flex-start; display: flex; flex-wrap: wrap; }
.memorials .card { width: calc(99% / 2); padding: 20px; text-align: center; border-radius: 5px; border: 1px solid #ccc; background-color: #FFF; margin: 0px 1% 1% 0px; }

.memorials .card a { margin-top: 20px; border-radius: 2em; padding: 6px 24px; }

.memorials .card img { width: 75px; height: 75px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }

@media (max-width: 600px) {
	.memorials .card:nth-child(2n+2) { margin: 0px 0px 1% 0px; }
}
@media (min-width: 600px) and (max-width: 800px) {
	.memorials .card { width: calc(99% / 3); margin: 0px 0.5% 0.5% 0px;}
	.memorials .card:nth-child(3n+3) { margin: 0px 0px 0.5% 0px; }
}
@media (min-width: 800px) and (max-width: 1200px) {
	.memorials .card { width: calc(98.5% / 4); margin: 0px 0.5% 0.5% 0px;}
	.memorials .card:nth-child(4n+4) { margin: 0px 0px 0.5% 0px; }
}
@media (min-width: 1200px) and (max-width: 1400px) {
	.memorials .card { width: calc(97.5% / 6); margin: 0px 0.5% 0.5% 0px;}
	.memorials .card:nth-child(6n+6) { margin: 0px 0px 0.5% 0px; }
}
@media (min-width: 1400px) {
	.memorials .card { width: calc(96.5% / 8); margin: 0px 0.5% 0.5% 0px;}
	.memorials .card:nth-child(8n+8) { margin: 0px 0px 0.5% 0px; }
}

.assigned .memorials .card { width: calc(99% / 3); }

.plaque .memorials { width: 100%; }

@media (min-width: 705px) {
	
	.plaque .memorials { width: 700px; margin: 0 auto; }
	.plaque	.memorials .card { width: calc(98% / 3); margin: 0px 0.5% 1% 0px;}
	.plaque .memorials .card:nth-child(3n+3) { margin: 0px 0px 1% 0px; }
}

.storyline .memorials { width: 100%; }

.storyline .memorials .card a { color: #444; padding: 0px; font-size: 14px; clear: both; display: block; }

@media (min-width: 705px) {
	
	.storyline .memorials { width: 700px; margin: 0 auto; }
	.storyline	.memorials .card { width: calc(98% / 3); margin: 0px 0.5% 1% 0px;}
	.storyline .memorials .card:nth-child(3n+3) { margin: 0px 0px 1% 0px; }
}

.page-header { display: flex; align-items: center; justify-content: space-between;}
.page-header .content { display: inline-block; }
	
	
.page { padding-bottom: 50px; }
/* ===================== circle ============================== */

.circle-loader {
	border: 3px solid rgba(0, 0, 0, 0.2);
	border-left-color: #006cb1;
	animation: loader-spin 1.2s infinite linear;
	position: relative;
	display: inline-block;
	vertical-align: top;
	border-radius: 50%;
	width: 7em;
	height: 7em;
}

.load-complete {
	-webkit-animation: none;
	animation: none;
	border-color: #006cb1;
	transition: border 500ms ease-out;
}

.checkmark {
	display: none;
}

.checkmark.draw:after {
	animation-duration: 800ms;
	animation-timing-function: ease;
	animation-name: checkmark;
	transform: scaleX(-1) rotate(135deg);
}

.checkmark:after {
	opacity: 1;
	height: 3.5em;
	width: 1.75em;
	transform-origin: left top;
	border-right: 8px solid #006cb1;
	border-top: 8px solid #006cb1;
	content: '';
	left: 1.5em;
	top: 3.5em;
	position: absolute;
}

@keyframes loader-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes checkmark {
	0% {
		height: 0;
		width: 0;
		opacity: 1;
	}

	20% {
		height: 0;
		width: 1.75em;
		opacity: 1;
	}

	40% {
		height: 3.5em;
		width: 1.75em;
		opacity: 1;
	}

	100% {
		height: 3.5em;
		width: 1.75em;
		opacity: 1;
	}
}




/*.individual-profile .ward-list a { width: calc(95%/3) !important;  margin-right: 1%; margin-bottom: 2%; font-size: 20px; padding: 12px 12px !important;}

@media (min-width: 850px) {
	.individual-profile .section { width:80%; }
		
	.individual-profile .section .side-1 { float:left; width: 350px; margin-right: -350px; height:100%; }
	.individual-profile .section .side-2 { margin-left: 365px; margin-top:0px; }
	
	.individual-profile .profile { width:350px; }
	
}*/