/*region task-new-loader*/
.side-panel-loader.task-new-loader {
	right: 15px;
	background: url(images/task_edit_bg.min.svg) no-repeat top left;
	background-size: auto;
}

.side-panel-loader.task-new-loader:after {
	position: absolute;
	top: 75px;
	right: 0;
	z-index: 150;
	width: 30px;
	height: 575px;
	background: #fff;
	content: "";
}

.side-panel-loader.task-new-loader .side-panel-loader-mask.left {
	right: -1px;
	z-index: 200;
	width: calc(100% - 365px);
	-webkit-mask: url(images/task_new_mask_left.min.svg) top left / auto;
	-moz-mask: url(images/task_new_mask_left.min.svg) top left / auto;
	-ms-mask: url(images/task_new_mask_left.min.svg) top left / auto;
	-o-mask: url(images/task_new_mask_left.min.svg) top left / auto;
	mask: url(images/task_new_mask_left.min.svg) top left / auto;
}

.side-panel-loader.task-new-loader .side-panel-loader-mask.right {
	right: 2px;
	left: auto;
	z-index: 300;
	width: 364px;
	-webkit-mask: url(images/task_new_mask_right.min.svg) top right / auto;
	-moz-mask: url(images/task_new_mask_right.min.svg) top right / auto;
	-ms-mask: url(images/task_new_mask_right.min.svg) top right / auto;
	-o-mask: url(images/task_new_mask_right.min.svg) top right / auto;
	mask: url(images/task_new_mask_right.min.svg) top right / auto;
}

.bx-firefox .side-panel-loader.task-new-loader .side-panel-loader-mask.left {
	background: url(images/task_new_mask_left.min.svg) top left no-repeat;
	background-size: auto;
}

.bx-firefox .side-panel-loader.task-new-loader .side-panel-loader-mask.right {
	background: url(images/task_new_mask_right.min.svg) top right no-repeat;
	background-size: auto;
}

/*endregion*/

/*region task-edit-loader*/
.side-panel-loader.task-edit-loader {
	right: 15px;
	background: url(images/task_edit_bg.min.svg) no-repeat top left;
	background-size: auto;
}

.side-panel-loader.task-edit-loader:after {
	position: absolute;
	top: 75px;
	right: 0;
	z-index: 150;
	width: 30px;
	height: 575px;
	background: #fff;
	content: "";
}

.side-panel-loader.task-edit-loader .side-panel-loader-mask.left {
	right: auto;
	z-index: 200;
	width: calc(100% - 365px);
	-webkit-mask: url(images/task_edit_mask_left.min.svg) top left / auto;
	-moz-mask: url(images/task_edit_mask_left.min.svg) top left / auto;
	-ms-mask: url(images/task_edit_mask_left.min.svg) top left / auto;
	-o-mask: url(images/task_edit_mask_left.min.svg) top left / auto;
	mask: url(images/task_edit_mask_left.min.svg) top left / auto;
}

.side-panel-loader.task-edit-loader .side-panel-loader-mask.right {
	left: auto;
	z-index: 300;
	width: 364px;
	-webkit-mask: url(images/task_edit_mask_right.min.svg) top right / auto;
	-moz-mask: url(images/task_edit_mask_right.min.svg) top right / auto;
	-ms-mask: url(images/task_edit_mask_right.min.svg) top right / auto;
	-o-mask: url(images/task_edit_mask_right.min.svg) top right / auto;
	mask: url(images/task_edit_mask_right.min.svg) top right / auto;
}

.bx-firefox .side-panel-loader.task-edit-loader .side-panel-loader-mask.left {
	background: url(images/task_edit_mask_left.min.svg) top left no-repeat;
	background-size: auto;
}

.bx-firefox .side-panel-loader.task-edit-loader .side-panel-loader-mask.right {
	background: url(images/task_edit_mask_right.min.svg) top right no-repeat;
	background-size: auto;
}

/*endregion*/

/*region task-view-loader*/
.side-panel-loader.task-view-loader {
	left: 21px;
	background: url(images/task_view_bg.min.svg) no-repeat top right;
	background-size: auto;
}

.side-panel-loader.task-view-loader .side-panel-loader-mask.left {
	right: auto;
	z-index: 200;
	width: calc(100% - 364px);
	-webkit-mask: url(images/task_view_mask_left.min.svg) top left / auto;
	-moz-mask: url(images/task_view_mask_left.min.svg) top left / auto;
	-ms-mask: url(images/task_view_mask_left.min.svg) top left / auto;
	-o-mask: url(images/task_view_mask_left.min.svg) top left / auto;
	mask: url(images/task_view_mask_left.min.svg) top left / auto;
}

.side-panel-loader.task-view-loader .side-panel-loader-mask.right {
	left: auto;
	z-index: 300;
	width: 364px;
	-webkit-mask: url(images/task_view_mask_right.min.svg) top right / auto;
	-moz-mask: url(images/task_view_mask_right.min.svg) top right / auto;
	-ms-mask: url(images/task_view_mask_right.min.svg) top right / auto;
	-o-mask: url(images/task_view_mask_right.min.svg) top right / auto;
	mask: url(images/task_view_mask_right.min.svg) top right / auto;
}

.bx-firefox .side-panel-loader.task-view-loader .side-panel-loader-mask.left {
	background: url(images/task_view_mask_left.min.svg) top left no-repeat;
	background-size: auto;
}

.bx-firefox .side-panel-loader.task-view-loader .side-panel-loader-mask.right {
	background: url(images/task_view_mask_right.min.svg) top right no-repeat;
	background-size: auto;
}

/*endregion*/

/*region crm-entity-details-loader*/
.side-panel-loader.crm-entity-details-loader {
	left: 0;
	padding: 20px;
	background: #eef2f4;
}

.side-panel-loader.crm-entity-details-loader:before {
	position: absolute;
	top: 432px;
	left: 20px;
	z-index: 400;
	width: 15px;
	height: 190px;
	background: #f5f8f9;
	content: '';
}

.side-panel-loader.crm-entity-details-loader .side-panel-loader-bg.left {
	position: absolute;
	top: 186px;
	bottom: 0;
	left: 20px;
	z-index: 100;
	width: calc(42% - 20px);
	background: url(images/crm_bg_left.min.svg) top right / auto;
}

.side-panel-loader.crm-entity-details-loader .side-panel-loader-bg.right {
	position: absolute;
	top: 186px;
	right: 20px;
	bottom: 0;
	left: auto;
	z-index: 100;
	width: calc(58% - 20px);
	background: url(images/crm_bg_right.min.svg) top left / auto;
}

.side-panel-loader.crm-entity-details-loader .side-panel-loader-mask.top {
	top: 20px;
	right: 0;
	left: 20px;
	z-index: 200;
	width: calc(100% - 40px);
	height: 137px;
	-webkit-mask: url(images/crm_mask_top.min.svg) top right / auto;
	-moz-mask: url(images/crm_mask_top.min.svg) top right / auto;
	-ms-mask: url(images/crm_mask_top.min.svg) top right / auto;
	-o-mask: url(images/crm_mask_top.min.svg) top right / auto;
	mask: url(images/crm_mask_top.min.svg) top right / auto;
}

.side-panel-loader.crm-entity-details-loader .side-panel-loader-mask.left {
	right: 0;
	left: 0;
	z-index: 200;
	max-width: calc(100% - 15px);
	-webkit-mask: url(images/crm_mask_left.min.svg) top left / auto;
	-moz-mask: url(images/crm_mask_left.min.svg) top left / auto;
	-ms-mask: url(images/crm_mask_left.min.svg) top left / auto;
	-o-mask: url(images/crm_mask_left.min.svg) top left / auto;
	mask: url(images/crm_mask_left.min.svg) top left / auto;
}

.side-panel-loader.crm-entity-details-loader .side-panel-loader-mask.right {
	left: 0;
	z-index: 300;
	-webkit-mask: url(images/crm_mask_right.min.svg) top left / auto;
	-moz-mask: url(images/crm_mask_right.min.svg) top left / auto;
	-ms-mask: url(images/crm_mask_right.min.svg) top left / auto;
	-o-mask: url(images/crm_mask_right.min.svg) top left / auto;
	mask: url(images/crm_mask_right.min.svg) top left / auto;
}

.bx-firefox .side-panel-loader.crm-entity-details-loader .side-panel-loader-mask.left {
	left: 0;
	width: calc(100% - 15px);
	background: url(images/crm_mask_left.min.svg) top left no-repeat;
	background-size: auto;
	-ms-mask: none;
	-moz-mask: none;
	mask: none;
}

.bx-firefox .side-panel-loader.crm-entity-details-loader .side-panel-loader-mask.right {
	background: url(images/crm_mask_right.min.svg) 0 0 no-repeat;
	background-size: auto;
	-ms-mask: none;
	-moz-mask: none;
	mask: none;
}

.bx-firefox .side-panel-loader.crm-entity-details-loader .side-panel-loader-mask.top {
	width: calc(100% - 10px);
	background: url(images/crm_mask_top.min.svg) top right no-repeat;
	background-size: auto;
	-ms-mask: none;
	-moz-mask: none;
	mask: none;
}

/*endregion*/

/*region crm-button-view-loader*/
.side-panel-loader.crm-button-view-loader {
	top: 0;
	right: -10px;
	background: url(images/crm_webform_bg.min.svg) no-repeat top right;
	background-size: auto;
}

.side-panel-loader.crm-button-view-loader:before {
	position: absolute;
	top: 154px;
	bottom: 0;
	left: 15px;
	z-index: 150;
	width: 14px;
	background: #fff;
	content: "";
}

.side-panel-loader.crm-button-view-loader:after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 150;
	width: 15px;
	background: #eef2f4;
	content: "";
}

.side-panel-loader.crm-button-view-loader .side-panel-loader-mask.left {
	right: auto;
	z-index: 200;
	width: calc(100% - 320px);
	-webkit-mask: url(images/crm_webform_mask_left.min.svg) top left / auto;
	-moz-mask: url(images/crm_webform_mask_left.min.svg) top left / auto;
	-ms-mask: url(images/crm_webform_mask_left.min.svg) top left / auto;
	-o-mask: url(images/crm_webform_mask_left.min.svg) top left / auto;
	mask: url(images/crm_webform_mask_left.min.svg) top left / auto;
}

.side-panel-loader.crm-button-view-loader .side-panel-loader-mask.right {
	right: 24px;
	left: auto;
	z-index: 300;
	width: 280px;
	-webkit-mask: url(images/crm_webform_mask_right.min.svg) top right / auto;
	-moz-mask: url(images/crm_webform_mask_right.min.svg) top right / auto;
	-ms-mask: url(images/crm_webform_mask_right.min.svg) top right / auto;
	-o-mask: url(images/crm_webform_mask_right.min.svg) top right / auto;
	mask: url(images/crm_webform_mask_right.min.svg) top right / auto;
}

.bx-firefox .side-panel-loader.crm-button-view-loader .side-panel-loader-mask.left {
	background: url(images/crm_webform_mask_left.min.svg) top left no-repeat;
	background-size: auto;
}

.bx-firefox .side-panel-loader.crm-button-view-loader .side-panel-loader-mask.right {
	background: url(images/crm_webform_mask_right.min.svg) top right no-repeat;
	background-size: auto;
}

/*endregion*/

/*region crm-webform-view-loader*/
.side-panel-loader.crm-webform-view-loader {
	top: 0;
	right: 0;
	border-width: 225px 314px 43px 45px;
	border-style: solid;
	border-image: url(images/crm_webform2_bg.min.svg) 225 314 43 45 fill stretch;
}

.side-panel-loader.crm-webform-view-loader .side-panel-loader-mask.left {
	top: -195px;
	right: auto;
	left: -16px;
	z-index: 200;
	width: 100%;
	height: 735px;
	-webkit-mask: url(images/crm_webform2_mask_left.min.svg) top left / auto;
	-moz-mask: url(images/crm_webform2_mask_left.min.svg) top left / auto;
	-ms-mask: url(images/crm_webform2_mask_left.min.svg) top left / auto;
	-o-mask: url(images/crm_webform2_mask_left.min.svg) top left / auto;
	mask: url(images/crm_webform2_mask_left.min.svg) top left / auto;
}

.side-panel-loader.crm-webform-view-loader .side-panel-loader-mask.right {
	top: -196px;
	right: -284px;
	left: auto;
	width: 244px;
	height: 428px;
	-webkit-mask: url(images/crm_webform2_mask_right.min.svg) top right / auto;
	-moz-mask: url(images/crm_webform2_mask_right.min.svg) top right / auto;
	-ms-mask: url(images/crm_webform2_mask_right.min.svg) top right / auto;
	-o-mask: url(images/crm_webform2_mask_right.min.svg) top right / auto;
	mask: url(images/crm_webform2_mask_right.min.svg) top right / auto;
}

.bx-firefox .side-panel-loader.crm-webform-view-loader .side-panel-loader-mask.left {
	background: url(images/crm_webform2_mask_left.min.svg) top left no-repeat;
	background-size: auto;
}

.bx-firefox .side-panel-loader.crm-webform-view-loader .side-panel-loader-mask.right {
	background: url(images/crm_webform2_mask_right.min.svg) top right no-repeat;
	background-size: auto;
}

/*endregion*/

/*region create-mail-loader*/
.side-panel-loader.create-mail-loader {
	right: 34px;
	left: 17px;
	background: #ebf1f4 url(images/create_mail_bg.min.svg) no-repeat 4px 78px;
	background-size: auto;
}

.side-panel-loader.create-mail-loader .side-panel-loader-mask.left {
	right: -1px;
	z-index: 200;
	width: calc(100% - 274px);
	-webkit-mask: url(images/create_mail_left_mask.min.svg) 6px 34px / auto no-repeat;
	-moz-mask: url(images/create_mail_left_mask.min.svg) 6px 34px / auto no-repeat;
	-ms-mask: url(images/create_mail_left_mask.min.svg) 6px 34px / auto no-repeat;
	-o-mask: url(images/create_mail_left_mask.min.svg) 6px 34px / auto no-repeat;
	mask: url(images/create_mail_left_mask.min.svg) 6px 34px / auto no-repeat;
}

.side-panel-loader.create-mail-loader .side-panel-loader-mask.right {
	right: -6px;
	left: auto;
	z-index: 300;
	width: 280px;
	-webkit-mask: url(images/create_mail_right_mask.min.svg) -20px 7px / auto no-repeat;
	-moz-mask: url(images/create_mail_right_mask.min.svg) -20px 7px / auto no-repeat;
	-ms-mask: url(images/create_mail_right_mask.min.svg) -20px 7px / auto no-repeat;
	-o-mask: url(images/create_mail_right_mask.min.svg) -20px 7px / auto no-repeat;
	mask: url(images/create_mail_right_mask.min.svg) -20px 7px / auto no-repeat;
}

.bx-firefox .side-panel-loader.create-mail-loader .side-panel-loader-mask.left {
	background: url(images/create_mail_left_mask.min.svg) 6px 34px no-repeat;
	background-size: auto;
}

.bx-firefox .side-panel-loader.create-mail-loader .side-panel-loader-mask.right {
	background: url(images/create_mail_right_mask.min.svg) -20px 7px no-repeat;
	background-size: auto;
}

/*endregion*/

/*region view-mail-loader*/
.side-panel-loader.view-mail-loader {
	right: 21px;
	background: #ebf1f4 url(images/view_mail_bg.min.svg) no-repeat 16px 78px;
	background-size: auto;
}

.side-panel-loader.view-mail-loader .side-panel-loader-mask.left {
	right: -1px;
	z-index: 200;
	width: calc(100% - 310px);
	-webkit-mask: url(images/view_mail_left_mask.min.svg) 28px 28px / auto no-repeat;
	-moz-mask: url(images/view_mail_left_mask.min.svg) 28px 28px / auto no-repeat;
	-ms-mask: url(images/view_mail_left_mask.min.svg) 28px 28px / auto no-repeat;
	-o-mask: url(images/view_mail_left_mask.min.svg) 28px 28px / auto no-repeat;
	mask: url(images/view_mail_left_mask.min.svg) 28px 28px / auto no-repeat;
}

.side-panel-loader.view-mail-loader .side-panel-loader-mask.right {
	right: 2px;
	left: auto;
	z-index: 300;
	width: 308px;
	-webkit-mask: url(images/view_mail_right_mask.min.svg) top right / auto no-repeat;
	-moz-mask: url(images/view_mail_right_mask.min.svg) top right / auto no-repeat;
	-ms-mask: url(images/view_mail_right_mask.min.svg) top right / auto no-repeat;
	-o-mask: url(images/view_mail_right_mask.min.svg) top right / auto no-repeat;
	mask: url(images/view_mail_right_mask.min.svg) top right / auto no-repeat;
}

.bx-firefox .side-panel-loader.view-mail-loader .side-panel-loader-mask.left {
	background: url(images/view_mail_left_mask.min.svg) 28px 28px no-repeat;
	background-size: auto;
}

.bx-firefox .side-panel-loader.view-mail-loader .side-panel-loader-mask.right {
	background: url(images/view_mail_right_mask.min.svg) top right no-repeat;
	background-size: auto;
}

/*endregion*/

/**/

.bx-firefox .side-panel-loader-mask {
	background: transparent;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
}

.mail-loader-modifier {
	background-color: #fff;
	background-image: url("/bitrix/images/mail/mail-loader.svg");
	background-position: 50% 40%;
	background-repeat: no-repeat;
}
