/* ==========================================================================
    Styles for all popups in WA.

    0. Global styles used in PHQ modal.
    1. Popup with 1000px width (used in billing page).
    2. Popup with 650px width (used by integration popups).
    3. Popup with 450px width (used by integration popups - login popup).
    4. Popup with 690px width (used in new contact/user/group popup).
   ========================================================================== */

/*
 * 0. Global styles used in PHQ modal.
 */

.phq-modal {
	background-color: #fff;
	border: 1px solid #9ea3a4;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	padding: 25px;
	position: absolute;
	z-index: 1002;
}
.phq-modal .bttn {
	margin-right: 10px;
}
.phq-modal .phq-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
}
.phq-modal h1 {
	color: #495456;
	font-size: 24px;
	font-weight: normal;
	padding: 0;
	margin: 0 0 30px 0;
}
.phq-modal__buttons {
	border-top: solid 1px #eceded;
	clear: both;
	padding-top: 15px;
	margin-top: 25px;
}
.phq-modal__buttons.phq-modal__buttons--mt15 {
	margin-top: 15px;
}
.phq-modal__buttons.process .bttn {
	display: none;
}
.phq-modal__buttons.process .processing_icon {
	display: block;
}
/**
 * Temporary styles, cose we use it only in new billing modal process.
 */
.phq-modal .new_page_section {
	width: 100%;
}
.phq-modal .new_page_section .section_header {
	background-color: #f0f0f0;
	border-radius: 0;
	height: auto;
	padding: 10px 0;
}
.phq-modal .new_page_section .section_header div {
	padding: 0;
	padding-left: 30px;
}
.phq-modal .new_page_section .section_header .section-icon {
	left: 9px;
	top: 8px;
}
.phq-modal .new_page_section .section_content {
	padding: 15px 30px 0;
}

.phq-modal .info-box {
	margin-top: 15px;
}
.phq-modal .validation_notice {
	display: none;
	width: auto;
}
.phq-modal .new_page_section .share_section_content {
	padding: 15px 0;
}
.phq-modal .submit_buttons .bttn-cancel {
	margin-left: 0;
}
.phq-modal #validate_subscriptions-button {
	width: 234px !important;
}
/* --- */

/*
 * 1. Popup with 1000px width.
 */

.phq-modal--1000 {
	width: 948px; /* - paddings and borders from .phq-modal */
}

/*
 * 2. Popup with 650px width.
 */
.phq-modal--650 {
	width: 648px; /* - paddings and borders from .phq-modal */
}

/*
 * 3. Popup with 450px width.
 */
.phq-modal--450 {
	width: 448px; /* - paddings and borders from .phq-modal */
}

/*
 * 4. Popup with 690px width.
 */
.phq-modal--700 {
	width: 698px; /* - paddings and borders from .phq-modal */
}