Your IP : 172.70.127.67
.ui-tutor-btn-wrap {
cursor: pointer;
height: 0;
text-align: center;
position: relative;
box-sizing: border-box;
}
.ui-tutor-btn-wrap-show {
height: 60px;
}
.ui-tutor-btn-wrap-animate {
-webkit-animation: animate-height .2s linear forwards;
animation: animate-height .2s linear forwards;
}
@keyframes animate-height {
0% {
height: 0;
}
100% {
height: 60px;
}
}
@-webkit-keyframes animate-height {
0% {
height: 0;
}
100% {
height: 60px;
}
}
.ui-tutor-btn-wrap:hover {
background-color: rgba(0, 0, 0, .05);
}
.bitrix24-light-theme .ui-tutor-btn-wrap:hover {
background-color: rgba(255, 255, 255, .15);
}
.bx-im-btn-wrap + .ui-tutor-btn-wrap {
border-top: 1px solid #dae4e8;
}
.bitrix24-light-theme .bx-im-btn-wrap + .ui-tutor-btn-wrap {
border-color: rgba(255, 255, 255, .1);
}
.bitrix24-dark-theme .bx-im-btn-wrap + .ui-tutor-btn-wrap {
border-color: rgba(82, 92, 105, .1);
}
.ui-tutor-btn {
width: 34px;
height: 34px;
display: inline-block;
vertical-align: top;
margin-top: 12px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2234%22%20height%3D%2234%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%2217%22%20fill%3D%22%232FC6F6%22/%3E%3Cg%20transform%3D%22translate%286.5%209.325%29%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M4.578%203.551h11.844v8.374H4.578zM18.48%2010.916c.682%200%201.235.036%201.235-1.063%200-1.1-.553-1.991-1.236-1.991-.682%200-1.236.891-1.236%201.99%200%201.1.554%201.064%201.236%201.064z%22/%3E%3Cellipse%20cx%3D%2210.5%22%20cy%3D%2212.053%22%20fill%3D%22%23FFF%22%20rx%3D%225.922%22%20ry%3D%222.723%22/%3E%3Cpath%20fill%3D%22%232FC6F6%22%20d%3D%22M0%205.496l10.5-4%2010.5%204-10.5%204z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M.49%203.813L10.43.027a.2.2%200%200%201%20.142%200l9.938%203.786a.2.2%200%200%201%200%20.374l-9.938%203.786a.2.2%200%200%201-.142%200L.49%204.187a.2.2%200%200%201%200-.374z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M17.979%204h1v5h-1z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E) no-repeat center;
}
.ui-tutor-popup {
cursor: pointer;
position: fixed;
bottom: 30px;
right: 66px;
border-radius: 5px;
background: #fff;
width: 304px;
z-index: 3001;
font-size: 13px;
line-height: 18px;
padding-bottom: 16px;
box-shadow: 0 6px 21px 0 rgba(83, 92, 105, .15);
box-sizing: border-box;
display: none;
pointer-events: auto;
transform-origin: 115% 110%;
border: 2px solid #2fc6f6;
}
.ui-tutor-popup-welcome-show {
-webkit-animation: show-welcome-popup .3s linear forwards;
animation: show-welcome-popup .3s linear forwards;
}
.ui-tutor-popup-welcome-show .ui-tutor-popup-content,
.ui-tutor-popup-welcome-show .ui-tutor-popup-header {
-webkit-animation: show-content .5s ease-in forwards;
animation: show-content .5s ease-in forwards;
}
.ui-tutor-popup-welcome-hide {
-webkit-animation: hide-welcome-popup .3s linear forwards;
animation: hide-welcome-popup .3s linear forwards;
}
@keyframes show-welcome-popup {
0% {
transform: scale(0, 0);
opacity: 0;
width: 0;
}
80% {
transform: scale(1, 1);
width: 280px;
}
100% {
width: 304px;
opacity: 1;
transform: scale(1, 1);
}
}
@-webkit-keyframes show-welcome-popup {
0% {
transform: scale(0, 0);
opacity: 0;
width: 0;
}
80% {
transform: scale(1, 1);
width: 280px;
}
100% {
width: 304px;
opacity: 1;
transform: scale(1, 1);
}
}
@keyframes hide-welcome-popup {
0% {
width: 304px;
opacity: 1;
transform: scale(1, 1);
}
20% {
transform: scale(1, 1);
width: 280px;
}
100% {
transform: scale(0, 0);
opacity: 0;
width: 0;
}
}
@-webkit-keyframes hide-welcome-popup {
0% {
width: 304px;
opacity: 1;
transform: scale(1, 1);
}
20% {
transform: scale(1, 1);
width: 280px;
}
100% {
transform: scale(0, 0);
opacity: 0;
width: 0;
}
}
.ui-tutor-popup-header {
padding: 14px 32px 8px 17px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.ui-tutor-popup-header-title:after {
content: '24';
color: #14b4e6;
}
.ui-tutor-popup-header-title {
color: #40454c;
font: 13px/19px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-semi-bold, 600);
}
.ui-tutor-popup-step .ui-tutor-popup-header-title {
display: flex;
flex-direction: column;
}
.ui-tutor-popup-step .ui-tutor-popup-header-title:after {
content: none;
}
.ui-tutor-popup-header-icon {
margin-right: 7px;
width: 21px;
height: 15px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2221%22%20height%3D%2216%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%280%20.325%29%22%3E%3Cpath%20fill%3D%22%232BBBE9%22%20d%3D%22M4.578%203.551h11.844v8.374H4.578zM18.48%2010.916c.682%200%201.235.036%201.235-1.063%200-1.1-.553-1.991-1.236-1.991-.682%200-1.236.891-1.236%201.99%200%201.1.554%201.064%201.236%201.064z%22/%3E%3Cellipse%20cx%3D%2210.5%22%20cy%3D%2212.053%22%20fill%3D%22%232BBBE9%22%20rx%3D%225.922%22%20ry%3D%222.723%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M0%205.496l10.5-4%2010.5%204-10.5%204z%22/%3E%3Cpath%20fill%3D%22%232BBBE9%22%20d%3D%22M.49%203.813L10.43.027a.2.2%200%200%201%20.142%200l9.938%203.786a.2.2%200%200%201%200%20.374l-9.938%203.786a.2.2%200%200%201-.142%200L.49%204.187a.2.2%200%200%201%200-.374z%22/%3E%3Cpath%20fill%3D%22%232BBBE9%22%20d%3D%22M17.979%204h1v5h-1z%22/%3E%3C/g%3E%3C/svg%3E) no-repeat center;
}
.ui-tutor-popup-content {
padding: 0 25px 0 17px;
max-height: 540px;
overflow: hidden;
}
.ui-tutor-popup-content-block {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.ui-tutor-popup-content-block-animate {
-webkit-animation: animate-content 1.7s linear forwards;
animation: animate-content 1.7s linear forwards;
}
.ui-tutor-popup-content-inner {
overflow: auto;
}
@keyframes animate-content {
0% {
opacity: 1;
transform: translateX(0);
}
10% {
transform: translateX(0);
}
16.3% {
opacity: 0;
transform: translateX(-50px);
}
22.5% {
opacity: 0;
transform: translateX(100px);
}
27% {
opacity: 1;
transform: translateX(0);
}
75% {
opacity: 1;
transform: translateX(0);
}
85% {
opacity: 0;
transform: translateX(-50px);
}
90% {
opacity: 0;
transform: translateX(100px);
}
95% {
opacity: 0;
transform: translateX(30px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes animate-content {
0% {
opacity: 1;
transform: translateX(0);
}
10% {
transform: translateX(0);
}
16.3% {
opacity: 0;
transform: translateX(-50px);
}
22.5% {
opacity: 0;
transform: translateX(100px);
}
27% {
opacity: 1;
transform: translateX(0);
}
75% {
opacity: 1;
transform: translateX(0);
}
85% {
opacity: 0;
transform: translateX(-50px);
}
90% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.ui-tutor-popup-text {
color: #525c69;
}
.ui-tutor-popup-icon-angle {
position: absolute;
bottom: 0;
right: -17px;
border: 13px solid transparent;
border-left-color: #fff;
border-bottom-color: #fff;
}
.ui-tutor-popup-icon-close {
width: 30px;
height: 30px;
position: absolute;
top: -15px;
left: -15px;
cursor: pointer;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}
.ui-tutor-popup-icon-close:before {
content: '';
display: block;
position: absolute;
width: 13px;
height: 13px;
opacity: .3;
transition: opacity .2s linear;
top: 9px;
left: 9px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%232066B0%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.581%204.607L9.968.22a.69.69%200%200%201%20.974.974L6.556%205.582l4.386%204.386a.69.69%200%200%201-.974.974L5.58%206.556l-4.386%204.386a.69.69%200%201%201-.974-.974l4.386-4.386L.22%201.195a.69.69%200%200%201%20.974-.974l4.386%204.386z%22%20opacity%3D%221%22/%3E%3C/svg%3E) no-repeat center;
}
.ui-tutor-popup-icon-close:hover:before {
opacity: .8;
}
.ui-tutor-popup-btn {
margin: 0 auto;
display: flex;
justify-content: center;
}
.ui-tutor-popup-footer {
border-top: 1px solid #edeef0;
margin: 20px 0 0;
text-align: center;
padding: 17px 0 0;
position: relative;
}
.ui-tutor-popup-title {
color: #0b66c3;
margin-bottom: 15px;
font: 15px/21px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
}
.ui-tutor-popup-header-counter {
color: #40454c;
font: 15px/21px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
}
.ui-tutor-popup-header-subtitle {
font: 9px/15px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-semi-bold, 600);
color: #7e858f;
text-transform: uppercase;
}
.ui-tutor-popup-step-subject {
font: 11px/17px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-semi-bold, 600);
color: #a8adb4;
text-transform: uppercase;
margin-right: 6px;
}
.ui-tutor-popup-step-subject:after {
content: ':';
}
.ui-tutor-popup-step-title {
font: 19px/19px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-semi-bold, 600);
color: #333;
margin-bottom: 10px;
}
.ui-tutor-popup-step-decs {
font: 14px/18px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #525c69;
}
.ui-tutor-popup-help {
color: #525c69;
font: 13px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
margin: 22px 0 20px;
height: 338px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ui-tutor-popup-help-title {
opacity: .5;
text-transform: uppercase;
font-size: 10px;
line-height: 16px;
margin-bottom: 12px;
}
.ui-tutor-popup-help-section {
border-bottom: 2px solid transparent;
cursor: pointer;
padding-bottom: 9px;
}
.ui-tutor-popup-help-section + .ui-tutor-popup-help-section {
margin-left: 5px;
}
.ui-tutor-popup-help-section-active {
border-color: #0063c6;
color: #0063c6;
}
.ui-tutor-popup-help-section-wrap {
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid rgba(168, 173, 180, .27);
}
.ui-tutor-popup-help-article {
display: flex;
flex-direction: column;
padding-left: 40px;
position: relative;
}
.ui-tutor-popup-help-article + .ui-tutor-popup-help-article {
margin-top: 18px;
}
.ui-tutor-popup-help-article:before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 27px;
height: 37px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2227%22%20height%3D%2237%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%28-1%20-1%29%22%3E%3Crect%20width%3D%2227%22%20height%3D%2237%22%20x%3D%221%22%20y%3D%221%22%20fill%3D%22%232FC6F6%22%20fill-opacity%3D%22.276%22%20opacity%3D%22.548%22%20rx%3D%222%22/%3E%3Cpath%20fill%3D%22%232FC7F7%22%20opacity%3D%22.377%22%20d%3D%22M6%2018h17v2H6zM6%2023h17v2H6zM6%2028h11v2H6zM6%207v8h17V7z%22/%3E%3C/g%3E%3C/svg%3E);
}
.ui-tutor-popup-help-article-title {
font-size: 14px;
line-height: 18px;
color: #0B66c3;
text-decoration: none;
}
.ui-tutor-popup-help-article-text {
font: 13px/18px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: #525c69;
}
.ui-tutor-popup-help-article-date {
font: 12px/16px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
color: rgba(51, 51, 51, .3);
}
.ui-tutor-popup-start {
width: 360px;
cursor: default;
min-height: 255px;
flex-direction: column;
}
.ui-tutor-popup-start .ui-tutor-popup-header,
.ui-tutor-popup-step .ui-tutor-popup-header {
background: rgba(47, 198, 246, .11);
margin-bottom: 19px;
padding: 8px 19px 6px;
height: 50px;
}
.ui-tutor-popup-start .ui-tutor-popup-header-title,
.ui-tutor-popup-step .ui-tutor-popup-header-title {
font-size: 15px;
line-height: 21px;
}
.ui-tutor-popup-start .ui-tutor-popup-header-icon,
.ui-tutor-popup-step .ui-tutor-popup-header-icon {
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2230%22%20height%3D%2230%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20fill%3D%22%232FC6F6%22/%3E%3Cg%20transform%3D%22translate%284.5%207.325%29%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M4.578%203.551h11.844v8.374H4.578zM18.48%2010.916c.682%200%201.235.036%201.235-1.063%200-1.1-.553-1.991-1.236-1.991-.682%200-1.236.891-1.236%201.99%200%201.1.554%201.064%201.236%201.064z%22/%3E%3Cellipse%20cx%3D%2210.5%22%20cy%3D%2212.053%22%20fill%3D%22%23FFF%22%20rx%3D%225.922%22%20ry%3D%222.723%22/%3E%3Cpath%20fill%3D%22%232FC6F6%22%20d%3D%22M0%205.496l10.5-4%2010.5%204-10.5%204z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M.49%203.813L10.43.027a.2.2%200%200%201%20.142%200l9.938%203.786a.2.2%200%200%201%200%20.374l-9.938%203.786a.2.2%200%200%201-.142%200L.49%204.187a.2.2%200%200%201%200-.374z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M17.979%204h1v5h-1z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E);
}
.ui-tutor-popup-start .ui-tutor-popup-close {
top: 12px;
right: 10px;
}
.ui-tutor-popup-start .ui-tutor-popup-content {
padding: 0 19px;
}
.ui-tutor-popup-start .ui-tutor-popup-text {
margin-bottom: 20px;
}
.ui-tutor-popup-start .ui-tutor-popup-text img {
margin-top: 10px;
}
.ui-tutor-popup-start .ui-tutor-popup-footer {
margin: auto 19px 0;
}
.ui-tutor-popup-step {
width: 530px;
padding-bottom: 0;
cursor: default;
border-width: 3px;
}
.ui-tutor-popup-step .ui-tutor-popup-content {
height: 540px;
padding: 0 19px;
}
.ui-tutor-popup-show {
-webkit-animation: show-popup-easy .3s cubic-bezier(.39,.58,.57,1) backwards;
animation: show-popup-easy .3s cubic-bezier(.39,.58,.57,1) backwards;
}
.ui-tutor-popup-hide {
-webkit-animation: hide-popup-easy .3s cubic-bezier(.39,.58,.57,1) forwards;
animation: hide-popup-easy .3s cubic-bezier(.39,.58,.57,1) forwards;
}
.ui-tutor-popup-show-complex {
-webkit-animation: show-popup-complex .3s cubic-bezier(.39,.58,.57,1) backwards;
animation: show-popup-complex .3s cubic-bezier(.39,.58,.57,1) backwards;
}
.ui-tutor-popup-hide-complex {
-webkit-animation: hide-popup-complex .3s cubic-bezier(.39,.58,.57,1) forwards;
animation: hide-popup-complex .3s cubic-bezier(.39,.58,.57,1) forwards;
overflow: hidden;
}
.ui-tutor-popup-hide-complex .ui-tutor-popup-header,
.ui-tutor-popup-hide-complex .ui-tutor-popup-content,
.ui-tutor-popup-hide-complex .ui-tutor-popup-step-wrap,
.ui-tutor-popup-hide-complex .ui-tutor-popup-icon-close {
-webkit-animation: hide-content .2s ease-in forwards;
animation: hide-content .2s ease-in forwards;
}
.ui-tutor-popup-show-complex .ui-tutor-popup-header,
.ui-tutor-popup-show-complex .ui-tutor-popup-content,
.ui-tutor-popup-show-complex .ui-tutor-popup-step-wrap {
-webkit-animation: show-content .5s ease-in forwards;
animation: show-content .5s ease-in forwards;
}
@keyframes hide-content {
0% {
opacity: 1;
}
60%, 100% {
opacity: 0;
}
}
@-webkit-keyframes hide-content {
0% {
opacity: 1;
}
60%, 100% {
opacity: 0;
}
}
@keyframes show-popup-complex {
0% {
bottom: 7px;
right: 8px;
opacity: 0;
height: 47px;
border-radius: 50px;
width: 45%;
overflow: hidden;
}
90% {
opacity: 1;
}
99.99% {
overflow: hidden;
}
100% {
bottom: 30px;
right: 66px;
opacity: 1;
border-radius: 5px;
width: 530px;
height: 674px;
overflow: auto;
}
}
@-webkit-keyframes show-popup-complex {
0% {
bottom: 7px;
right: 8px;
opacity: 0;
height: 47px;
border-radius: 50px;
width: 45%;
overflow: hidden;
}
90% {
opacity: 1;
}
99.99% {
overflow: hidden;
}
100% {
bottom: 30px;
right: 66px;
opacity: 1;
border-radius: 5px;
width: 530px;
height: 674px;
overflow: auto;
}
}
@keyframes hide-popup-complex {
0% {
bottom: 30px;
right: 66px;
border-radius: 5px;
width: 530px;
height: 674px;
}
100% {
bottom: 7px;
right: 8px;
height: 47px;
border-radius: 50px;
width: 45%;
}
}
@-webkit-keyframes hide-popup-complex {
0% {
bottom: 30px;
right: 66px;
border-radius: 5px;
width: 530px;
height: 674px;
}
100% {
bottom: 7px;
right: 8px;
height: 47px;
border-radius: 50px;
width: 45%;
}
}
@keyframes show-popup-easy {
0% {
bottom: -30px;
opacity: 0;
}
100% {
bottom: 30px;
opacity: 1;
}
}
@-webkit-keyframes show-popup-easy {
0% {
bottom: -30px;
opacity: 0;
}
100% {
bottom: 30px;
opacity: 1;
}
}
@keyframes hide-popup-easy {
0% {
bottom: 30px;
opacity: 1;
}
100% {
bottom: -30px;
opacity: 0;
}
}
@-webkit-keyframes hide-popup-easy {
0% {
bottom: 30px;
opacity: 1;
}
100% {
bottom: -30px;
opacity: 0;
}
}
.ui-tutor-popup-step .ui-tutor-popup-header {
margin-bottom: 22px;
}
.ui-tutor-popup-step .ui-tutor-popup-footer {
margin: auto 0 0;
padding-bottom: 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ui-tutor-popup .ui-tutor-popup-icon-angle {
border: none;
width: 18px;
height: 14px;
bottom: -2px;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2214%22%20viewBox%3D%220%200%2018%2014%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23FFFFFF%22%20points%3D%222%200%2015%2013%200%2013%200%200%22/%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%232FC6F6%22%20fill-rule%3D%22nonzero%22%20points%3D%223.309%200%2018%2014%200%2014%200%2012%2012.9%2012.2%201%20.75%200.7%200%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A);
}
.ui-tutor-popup-step .ui-tutor-popup-icon-angle {
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2214%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23f7f8f9%22%20d%3D%22M2%200l13%2013H0V0z%22/%3E%3Cpath%20fill%3D%22%232FC6F6%22%20fill-rule%3D%22nonzero%22%20d%3D%22M4.009%200L18%2014H0v-3h10.763L.72.95V0z%22/%3E%3C/g%3E%3C/svg%3E);
bottom: -3px;
right: -18px;
}
.ui-tutor-popup-step:before {
content: "";
width: 3px;
height: 11px;
position: absolute;
background: #f7f8f9;
bottom: 0;
right: -3px;
}
.ui-tutor-popup-show-complex .ui-tutor-popup-icon-angle {
-webkit-animation: show-content .55s ease-in forwards;
animation: show-content .55s ease-in forwards;
}
.ui-tutor-popup-hide-complex .ui-tutor-popup-icon-angle {
opacity: 0;
}
.ui-tutor-popup-step-wrap {
background: #f7f8f9;
padding: 14px 36px 8px;
overflow: hidden;
}
.ui-tutor-popup-step-item {
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
cursor: pointer;
border: 1px solid #dde0e2;
flex-shrink: 0;
margin: 0 5px;
position: relative;
}
.ui-tutor-popup-step-item-number {
position: absolute;
color: #bfc3c8;
top: 20px;
font: 8px/12px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
left: 50%;
transform: translate(-50%, 0);
}
.ui-tutor-popup-step-inner {
width: 280px;
margin: 0 auto;
position: relative;
padding: 0 30px;
}
.ui-tutor-popup-step-list-wrap {
overflow: hidden;
padding-bottom: 10px;
}
.ui-tutor-popup-step-list {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px;
box-sizing: border-box;
width: 100%;
}
.ui-tutor-popup-step-list-wide {
justify-content: flex-start;
width: auto;
}
.ui-tutor-popup-step-item-completed {
border-color: transparent;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20fill%3D%22%237bd500%22%20fill-rule%3D%22evenodd%22%20d%3D%22M7.08%208.962L5.292%207.174%204.027%208.438l2.984%202.984.001-.002.069.07%205.55-5.55-1.265-1.264L7.08%208.962zm.904%207.006A7.984%207.984%200%201%201%207.984%200a7.984%207.984%200%200%201%200%2015.968z%22/%3E%3C/svg%3E) no-repeat center;
}
.ui-tutor-popup-step-item-current {
box-shadow: 0 0 0 1px #f7f8f9, 0 0 0 2px #2fc6f6;
}
.ui-tutor-popup-arrow {
position: absolute;
top: 0;
bottom: 0;
box-shadow: 0 0 7px 6px #f7f8f9;
z-index: 98;
width: 29px;
background: #f7f8f9;
cursor: default;
transition: all .3s linear;
}
.ui-tutor-popup-arrow-prev {
left: 0;
}
.ui-tutor-popup-arrow-next, .ui-tutor-popup-arrow-prev:before {
right: 0;
}
.ui-tutor-popup-arrow:before {
position: absolute;
content: '';
top: 2px;
width: 10px;
height: 18px;
opacity: 0.3;
transition: opacity .3s ease;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%227%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22%20opacity%3D%221%22%20d%3D%22M6.895%2010.242L3.5%206.847l-.851-.848.851-.847%203.395-3.395L5.697.559.256%206l5.441%205.44z%22/%3E%3C/svg%3E) no-repeat center;
}
.ui-tutor-popup-arrow-next:before {
transform: rotate(180deg);
left: 8px;
}
.ui-tutor-popup-arrow-prev:before {
left: 15px;
}
.ui-tutor-popup-arrow-show {
cursor: pointer;
}
.ui-tutor-popup-arrow-show:before {
opacity: .7;
}
.ui-tutor-popup-arrow-show:before:hover {
opacity: 1;
}
.ui-tutor-popup-step-progress {
height: 3px;
background: rgba(47, 198, 246, .22);
}
.ui-tutor-popup-step-progress-value {
transition: width .2s linear;
width: 0;
background: #2fc6f6;
height: 3px;
border-radius: 2px;
max-width: 100%;
}
.ui-tutor-popup-collapse {
width: 45%;
min-width: 350px;
right: 0;
bottom: 9px;
margin: 0 8px;
align-items: center;
justify-content: space-between;
min-height: 44px;
border-radius: 50px;
padding: 6px 45px 7px 20px;
position: fixed;
border: 2px solid #2fc6f6;
transition: border-color .2s linear;
background: rgba(255, 255, 255, .96) url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2234%22%20height%3D%2234%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%2217%22%20fill%3D%22%232FC6F6%22/%3E%3Cg%20transform%3D%22translate%286.5%209.325%29%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M4.578%203.551h11.844v8.374H4.578zM18.48%2010.916c.682%200%201.235.036%201.235-1.063%200-1.1-.553-1.991-1.236-1.991-.682%200-1.236.891-1.236%201.99%200%201.1.554%201.064%201.236%201.064z%22/%3E%3Cellipse%20cx%3D%2210.5%22%20cy%3D%2212.053%22%20fill%3D%22%23FFF%22%20rx%3D%225.922%22%20ry%3D%222.723%22/%3E%3Cpath%20fill%3D%22%232FC6F6%22%20d%3D%22M0%205.496l10.5-4%2010.5%204-10.5%204z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M.49%203.813L10.43.027a.2.2%200%200%201%20.142%200l9.938%203.786a.2.2%200%200%201%200%20.374l-9.938%203.786a.2.2%200%200%201-.142%200L.49%204.187a.2.2%200%200%201%200-.374z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M17.979%204h1v5h-1z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E) no-repeat right 5px center;
}
.ui-tutor-popup-collapse:hover {
border-color: #56dbfc;
}
.ui-tutor-popup-collapse .ui-tutor-popup-content,
.ui-tutor-popup-collapse .ui-tutor-popup-header,
.ui-tutor-popup-collapse .ui-tutor-popup-icon-close {
-webkit-animation: show-content .2s ease-in forwards;
animation: show-content .2s ease-in forwards;
}
@keyframes show-content {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes show-content {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.ui-tutor-popup-collapse .ui-tutor-popup-content {
display: flex;
align-items: center;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.ui-tutor-popup-collapse .ui-tutor-popup-header {
padding: 0;
font-size: 14px;
}
.ui-tutor-popup-collapse .ui-tutor-popup-step-title {
margin-bottom: 0;
margin-right: 10px;
font: 13px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ui-tutor-popup-collapse .ui-tutor-popup-icon-close {
width: 30px;
top: 50%;
left: 8px;
opacity: .6;
color: #333;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.722%204.607L10.108.221a.69.69%200%200%201%20.975.975L6.696%205.582l4.387%204.386a.69.69%200%200%201-.975.975L5.722%206.557l-4.386%204.386a.69.69%200%200%201-.975-.975l4.386-4.386L.361%201.196A.69.69%200%200%201%201.336.22l4.386%204.386z%22%20opacity%3D%22102%22/%3E%3C/svg%3E) no-repeat center;
font: 13px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
box-sizing: border-box;
transform: translate(0, -50%);
}
.ui-tutor-popup-collapse .ui-tutor-popup-icon-close:hover {
opacity: .8;
}
.ui-tutor-popup-completed {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.ui-tutor-popup-completed-icon {
width: 108px;
height: 108px;
border-radius: 50%;
border: 3px solid #2fc6f6;
background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2255%22%20height%3D%2240%22%3E%3Cpath%20fill%3D%22%232FC6F6%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2.836%2019.451l15.2%2015.2L52.012.676l2.338%202.337-36.313%2036.313L.499%2021.79l2.337-2.338z%22/%3E%3C/svg%3E) no-repeat center;
margin-bottom: 33px;
position: relative;
}
.ui-tutor-popup-completed-icon:after {
content: '';
position: absolute;
top: 24px;
right: 26px;
width: 55px;
height: 55px;
background: #fff;
background-size: 55px;
transition: all 200ms linear;
}
.ui-tutor-popup-completed-animate .ui-tutor-popup-completed-icon:after {
width: 0;
}
.ui-tutor-popup-completed-text {
color: #525c69;
font: 27px/32px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-light, 300);
}
.ui-tutor-popup-completed-text:after {
content: '!';
}
.ui-tutor-popup-help-article-list, .ui-tutor-popup-help-switcher {
display: none;
}
.ui-tutor-popup-help-article-list-wrap {
min-height: 192px;
position: relative;
margin-top: 20px;
}
#article-radio-1:checked ~ .ui-tutor-popup-help-article-list-wrap .ui-tutor-popup-help-article-list[data-section="settings"],
#article-radio-2:checked ~ .ui-tutor-popup-help-article-list-wrap .ui-tutor-popup-help-article-list[data-section="scenario"],
#article-radio-3:checked ~ .ui-tutor-popup-help-article-list-wrap .ui-tutor-popup-help-article-list[data-section="work"] {
display: block;
}
#article-radio-1:checked ~ .ui-tutor-popup-help-section-wrap label[for="article-radio-1"],
#article-radio-2:checked ~ .ui-tutor-popup-help-section-wrap label[for="article-radio-2"],
#article-radio-3:checked ~ .ui-tutor-popup-help-section-wrap label[for="article-radio-3"] {
border-color: #0063c6;
color: #0063c6;
}
.ui-tutor-popup-footer-disabled {
pointer-events: none;
opacity: .4;
}
.ui-tutor-informer {
color: #fff;
font: 10px/13px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-bold, 700);
position: absolute;
top: 10px;
right: 8px;
z-index: 2;
opacity: .9;
border-radius: 10px;
background-color: #f84932;
padding: 0 3px;
min-width: 10px;
height: 13px;
text-align: center;
}
.ui-tutor-popup-collapse .ui-tutor-informer {
top: 2px;
right: -3px;
}
.ui-tutor-popup-help-empty {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.ui-tutor-popup-help-empty-icon {
height: 71px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2272%22%3E%3Cpath%20fill%3D%22%232FC6F6%22%20d%3D%22M2.151.5C1.264.5.5%201.406.5%202.151V69.85c0%20.864.787%201.651%201.651%201.651h49.535c.864%200%201.651-.787%201.651-1.651V17.012c0-.439-.177-.877-.49-1.187L37.987.965A1.67%201.67%200%200%200%2036.826.5H2.15zm1.651%203.302h31.372v13.21c0%20.864.787%201.651%201.652%201.651h13.209v49.535H3.802V3.802zm34.675%202.322l9.236%209.237h-9.236V6.124zm-27.244%208.411a1.65%201.65%200%201%200%200%203.303h13.209a1.65%201.65%200%201%200%200-3.303h-13.21zm0%2012.384a1.65%201.65%200%201%200%200%203.303h28.07a1.65%201.65%200%201%200%200-3.303h-28.07zm0%2012.384a1.65%201.65%200%201%200%200%203.302h28.07a1.65%201.65%200%201%200%200-3.302h-28.07zm0%2012.384a1.65%201.65%200%201%200%200%203.302h28.07a1.65%201.65%200%201%200%200-3.302h-28.07z%22%20opacity%3D%22.38%22/%3E%3C/svg%3E)
no-repeat center;
margin-bottom: 20px;
}
.ui-tutor-popup-help-empty-text {
font: 24px/30px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-light, 300);
}
.ui-tutor-popup-finished-notice {
font: 18px/38px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
color: #525c69;
}
.ui-tutor-popup-finished {
font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-light, 300);
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 50px 0 70px;
}
.ui-tutor-popup-finished-title {
color: #333;
font-size: 24px;
line-height: 30px;
margin-bottom: 45px;
}
.ui-tutor-popup-finished-text {
color: #525c69;
font-size: 27px;
line-height: 36px;
text-align: center;
}
.ui-tutor-popup-finished-icon {
width: 108px;
height: 108px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22108%22%20height%3D%22108%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2254%22%20cy%3D%2254%22%20r%3D%2254%22%20fill%3D%22%23B0E202%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M29.836%2054.451l15.2%2015.2%2033.976-33.975%202.337%202.337-36.312%2036.313-17.538-17.538%202.337-2.337z%22/%3E%3C/g%3E%3C/svg%3E) no-repeat center;
margin-bottom: 45px;
}
.ui-tutor-popup-finished-new {
margin-bottom: 55px;
}
.ui-tutor-popup-finished-new .ui-tutor-popup-finished-title,
.ui-tutor-popup-load .ui-tutor-popup-footer {
display: none;
}
.ui-tutor-popup-new-text {
font: 15px/21px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
font-weight: var(--ui-font-weight-regular, 400);
color: #333;
padding-left: 53px;
position: relative;
max-width: 285px;
box-sizing: border-box;
margin-top: 45px;
}
.ui-tutor-popup-new-text:after {
content: '?';
}
.ui-tutor-popup-new-text:before {
content: '';
width: 36px;
height: 36px;
position: absolute;
left: 0;
top: 3px;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2237%22%3E%3Cpath%20fill%3D%22%232FC6F6%22%20fill-rule%3D%22evenodd%22%20d%3D%22M18.311%2011.34a1.668%201.668%200%201%200%200-3.336%201.668%201.668%200%200%200%200%203.336zm1.305%203.633h-4.198v1.53h1.903v9.846h-1.845v1.53h5.903v-1.53h-1.763V14.973zM18%2034.613c-8.899%200-16.113-7.215-16.113-16.113C1.887%209.6%209.101%202.387%2018%202.387c8.9%200%2016.113%207.213%2016.113%2016.113%200%208.898-7.213%2016.112-16.113%2016.112zM18%20.5C8.059.5%200%208.559%200%2018.5c0%209.94%208.059%2018%2018%2018s18-8.06%2018-18c0-9.941-8.059-18-18-18z%22/%3E%3C/svg%3E) no-repeat center;
}
.ui-tutor-popup-load .main-ui-loader {
top: 56%;
}
.ui-tutor-popup-help-link {
margin-top: auto;
}
.ui-tutor-popup-help-link-text, .ui-tutor-popup-defer-link {
color: #2066b0;
cursor: pointer;
transition: all .2s linear;
border-bottom: 1px dashed rgba(32, 102, 176, .4);
}
.ui-tutor-popup-defer-link {
opacity: .8;
margin-left: auto;
}
.ui-tutor-popup-help-link-text:hover, .ui-tutor-popup-defer-link:hover {
border-color: rgba(32, 102, 176, .8);
}
.ui-tutor-popup-video {
height: 300px;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
max-width: 486px;
display: none;
}
.ui-tutor-popup-video-show {
display: block;
}
/*.ui-tutor-popup-video-hide {*/
/*display: none;*/
/*}*/
.ui-tutor-popup-support-link {
font-size: 13px;
line-height: 18px;
color: #9b9b9b;
cursor: pointer;
transition: border .2s linear;
border-bottom: 1px dashed rgba(155, 155, 155, .4);
}
.ui-tutor-popup-support-link:hover {
color: #9b9b9b;
border-color: rgba(155, 155, 155, 1);
}
.popup-window-ui-tutor.popup-window-with-titlebar {
padding: 0 20px 10px;
color: #535c69;
}
.popup-window-ui-tutor .popup-window-titlebar-text {
padding-left: 0;
color: #535c69;
}
.popup-window-ui-tutor .popup-window-content {
background: #fff;
padding: 0 0 30px;
}
.popup-window-ui-tutor .popup-window-buttons {
border-top: 1px solid #edeef0;
}
.ui-tutor-popup-collapse-btn {
display: flex;
flex: 0;
margin-left: auto;
margin-right: 10px;
}
.ui-tutor-popup-nav {
display: flex;
align-items: center;
}
.ui-tutor-popup-nav-item {
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 50%;
border: 1px solid #edeef0;
position: relative;
transition: all .2s linear;
}
.ui-tutor-popup-nav-item + .ui-tutor-popup-nav-item {
margin-left: 8px;
}
.ui-tutor-popup-nav-item:after {
content: '';
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: .5;
transition: opacity .2s linear;
background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%229%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23525C69%22%20fill-rule%3D%22evenodd%22%20d%3D%22M.8%201.286l3.773%203.773L5.55%206l-.977.942L.8%2010.714l1.332%201.331L8.177%206%202.132-.045z%22/%3E%3C/svg%3E) no-repeat center;
}
.ui-tutor-popup-nav-item:hover {
border-color: #dcdee1;
}
.ui-tutor-popup-nav-item:hover:after {
opacity: 1;
}
.ui-tutor-popup-nav-item-prev:after {
transform: translate(-50%, -50%) rotate(-180deg);
}
.ui-tutor-popup-nav-item-disabled {
opacity: .4;
pointer-events: none;
}
.ui-tutor-popup-defer-menu {
z-index: 3003 !important;
}
.ui-tutor-popup-collapse:before {
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
position: absolute;
border-radius: 50px;
opacity: 0;
z-index: 0;
transition: opacity .2s linear;
}
.ui-tutor-popup-collapse-load:before {
opacity: .25;
z-index: 1;
}
.ui-tutor-popup-collapse-load {
pointer-events: none;
}
@media (max-height: 715px) {
.ui-tutor-popup-content {
max-height: 470px;
}
.ui-tutor-popup-video {
height: 280px;
}
.ui-tutor-popup-help {
height: 310px;
}
}
@media (max-height: 645px) {
.ui-tutor-popup-content {
max-height: 420px;
}
.ui-tutor-popup-video {
height: 260px;
}
.ui-tutor-popup-help {
height: 290px;
}
}
.ui-tutor-popup-content-inner::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
}
.ui-tutor-popup-content-inner::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}