/**********************************************************
*   colors that are not in main pcmatic.css file
***********************************************************/

:root {
	/* Colors */
	--mediumgreen: #2c856b;
	/* Washed Out Colors */
	--washed-red: #f1506038;
	--washed-mediumgreen: #2c856b38;
	--washed-orange: #fa9f4738;
	--washed-blue: #007cf038;
	/* Shadows */
	--boxshadow: 0 0 10px 0 rgb(35 35 35 / 10%);
}

.hideTemporary {
	display: none;
}

/* toastify styles */
.toastify {
	opacity: 0;
	border-radius:6px;
	width:440px;
	box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(35, 35, 35, 0.3);
	position: absolute;
	background: var(--white);
	color: var(--gray-dark);
}
  
.toastify .toast-close {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 16px;
	cursor: pointer;
	padding:  2px 5px 2px 10px;
}

.toast-row {
	display: flex;
}

.toast-icon {
	flex-basis: 45px;
	width:45px;
	height:45px;
	text-align:center;
	border-radius:50%;
	line-height:45px;
	padding:2px;
	margin-right: 10px;
}

.toast-icon i {
	font-size:20px;
}

.toast-icon.error {
	background-color: var(--washed-red);
}

.toast-icon.error  i {
	color: var(--red);
}

.toast-icon.warning {
	background-color: var(--washed-orange);
}

.toast-icon.warning  i {
	color: var(--orange);
}

.toast-icon.success {
	background-color: var(--washed-mediumgreen);
}

.toast-icon.success  i {
	color: var(--mediumgreen);
}

.toast-icon.default {
	background-color: var(--washed-blue);
}

.toast-icon.default  i {
	color: var(--blue);
}

.toast-message {
	display:flex;
	justify-content: center;
	align-items: center;
	margin: 0px 10px 0px 15px;
	flex-wrap:wrap;
	max-width: 80%;
}

@media (max-width: 768px) {
	.toastify {
		max-width: 93%;
	}

	.toast-message {
		max-width: 70%;
	}
}

/* phone verification styles */ 
.form-group.phone a.phoneVerify {
	position: relative;
	top: -28px;
	float: right;
	margin-right: 25px;
	cursor: pointer;
	font-size: .9rem;
	color: #1f69ff;
	display:none;
}

/* set correct color codes for stypes below */
.form-group.phone.verified .form-control {
	border-color: var(--mediumgreen);
}
.form-group.phone.notVerified .form-control {
	border-color: var(--red);
}
.form-group.phone.verified a.phoneVerify {
	color: var(--mediumgreen);
}
.form-group.phone.notVerified a.phoneVerify {
	color: var(--red);
}
.phoneVerifyContainer {
	word-break: normal;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.phoneVerifyContainer .blurb {
	margin-bottom: 35px;
}
.phoneVerifyContainer .btn-sm {
	padding: 8px 8px;
}