.calendar-sync-wrap {
	padding: 0 20px;
}

.calendar-sync-mobile {
	margin-bottom: 25px;
}

.calendar-sync-title {
	font: 16px/22px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #525c69;
	margin: 0 0 11px 3px;
	border-bottom: 1px solid #dde2e6;
	padding-bottom: 12px;
}

.calendar-sync-header-text {
	font: 24px/26px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
	color: #333;
	display: inline-block;
	height: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

.calendar-sync-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 74px;
	box-sizing: border-box;
}

.calendar-sync-status-block, .calendar-sync-popup-item-detail {
	display: flex;
	align-items: center;
}

.calendar-sync-status-subtitle {
	margin-right: 9px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.calendar-sync-status-text {
	font: 12px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #8f959e;
}

.calendar-active-status-node-carousel {
	overflow: hidden;
	white-space: nowrap;
}

.calendar-active-status-node-phrase {
	display: inline-block;
	transition: 300ms transform ease;
	text-transform:	uppercase;
}

.calendar-sync-status-info {
	padding: 5px 13px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 10px;
	line-height: 16px;
	margin-bottom: 0;
	cursor: default;
}

.calendar-sync-status-info.ui-alert-primary {
	color: #0cb1e5;
	background: #c0eefc;
}

.calendar-sync-popup-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	font: 13px/19px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
}

.calendar-sync-popup-list {
	padding: 0 10px;
}

.calendar-sync-popup-item + .calendar-sync-popup-item {
	border-top: 1px solid rgba(82, 92, 105, .2);
}

.calendar-sync-popup-item-text {
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	padding-left: 26px;
	position: relative;
	max-width: 210px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10px;
}

.calendar-sync-popup-item-text:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 17px;
	width: 14px;
	background-repeat: no-repeat;
	background-position: center;
}

.calendar-sync-popup-item-text-mac:before {
	width: 12px;
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2213%22%20height%3D%2215%22%20viewBox%3D%220%200%2013%2015%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M11.1169617%2C8.10078457%20C11.1104941%2C6.90755662%2011.6473088%2C6.00694586%2012.7338735%2C5.34368017%20C12.1259147%2C4.46907986%2011.2075088%2C3.98788711%209.99482496%2C3.89359935%20C8.84681759%2C3.80256287%207.59209408%2C4.56661892%207.13289115%2C4.56661892%20C6.64781763%2C4.56661892%205.53538232%2C3.92611235%204.66224995%2C3.92611235%20C2.85777642%2C3.95537407%200.940119078%2C5.37294192%200.940119078%2C8.25684709%20C0.940119078%2C9.10868831%201.09534262%2C9.98979124%201.40578968%2C10.8969046%20C1.81971908%2C12.0901325%203.31374556%2C15.0163046%204.87244849%2C14.9675351%20C5.68737204%2C14.9480273%206.26299262%2C14.385552%207.32368672%2C14.385552%20C8.3520426%2C14.385552%208.88562349%2C14.9675351%209.79432789%2C14.9675351%20C11.3659662%2C14.944776%2012.7177044%2C12.2852107%2013.1122309%2C11.0887314%20C11.0037779%2C10.0905816%2011.1169617%2C8.16255933%2011.1169617%2C8.10078457%20Z%20M9.31363215%2C2.77318175%20C10.2083721%2C1.7279313%2010.1264362%2C0.776237219%2010.1002167%2C0.434272578%20C9.31035472%2C0.479437723%208.39595021%2C0.963349974%207.87483797%2C1.56017507%20C7.30128675%2C2.19893924%206.96371086%2C2.98932923%207.03581446%2C3.87972775%20C7.89122513%2C3.94424939%208.67125479%2C3.51195445%209.31363215%2C2.77318175%20Z%22%20transform%3D%22translate%28-.282%20-.17%29%22/%3E%0A%3C/svg%3E%0A);
}

.calendar-sync-popup-item-text-google:before {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7.717.83A6.726%206.726%200%200112.4%202.653l-1.997%201.998-.171-.153A3.8%203.8%200%20007.717%203.6c-1.825%200-3.375%201.231-3.93%202.89a4.194%204.194%200%20000%202.679c.555%201.658%202.105%202.89%203.93%202.89.946%200%201.755-.244%202.383-.67a3.245%203.245%200%20001.398-2.128h-3.78V6.566h6.6c.081.47.122.947.121%201.424%200%202.13-.761%203.931-2.082%205.15l-.002-.001c-1.09%201.008-2.563%201.616-4.307%201.685l-.33.006a7%207%200%2001-6.255-3.857l-.124-.26a7%207%200%2001.124-6.026l.128-.241A7%207%200%20017.717.83z%22/%3E%3C/svg%3E);
}

.calendar-sync-popup-item-text-iphone:before {
	width: 15px;
	background-image: 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%2218%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M9.09.545c.334%200%20.656.13.893.36.203.197.33.454.361.729l.008.138v.942H9.65V2.65H1.225v11.234H9.65v-.056h.702v2.34c0%20.635-.497%201.157-1.134%201.22l-.13.007H1.786c-.335%200-.656-.13-.893-.36a1.212%201.212%200%2001-.361-.729l-.008-.138V1.772c0-.325.132-.637.369-.867.203-.198.468-.32.75-.352l.143-.008H9.09zM5.436%2015.289a.702.702%200%20100%201.404.702.702%200%20000-1.404zM12.72%204.774l.187.005c.852.066%201.497.404%201.923%201.018-.762.466-1.14%201.098-1.135%201.936%200%20.043-.08%201.397%201.401%202.098-.277.84-1.226%202.707-2.33%202.723-.637%200-1.012-.409-1.734-.409-.745%200-1.149.395-1.721.409-1.095.034-2.144-2.02-2.434-2.858a5.714%205.714%200%2001-.327-1.854c0-2.025%201.346-3.02%202.613-3.04.613%200%201.394.45%201.735.45.322%200%201.203-.537%202.01-.473zm.261-2.424c.019.24.076.908-.552%201.642-.451.519-.999.822-1.6.777-.05-.625.187-1.18.59-1.629.366-.419%201.008-.758%201.562-.79zm-6.93-1.153H4.824c-.052.002-.091.025-.087.05-.003.02.018.037.05.046l.037.004h1.229c.052-.001.09-.024.087-.05.004-.025-.035-.048-.087-.05z%22/%3E%3C/svg%3E);
}

.calendar-sync-popup-item-text-android:before {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2217%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.8%205.183a12438.022%2012438.022%200%2000-8.743%200c-.08%200-.068-.012-.068.068a32280.534%2032280.534%200%20000%206.794%201.127%201.127%200%20001.088%201.097c.192.004.385.003.578%200%20.05%200%20.063.014.062.064-.001.787.003%201.574-.002%202.362a.667.667%200%2000.341.614c.354.213.723.22%201.086.026a.683.683%200%2000.385-.653c-.006-.782-.002-1.564-.003-2.346%200-.05.009-.067.064-.067.556.002%201.112.001%201.667.002.066%200%20.066%200%20.066.068%200%20.786.003%201.571-.002%202.357a.671.671%200%2000.343.614c.322.196.664.215%201.007.064.307-.136.469-.366.464-.719-.01-.776-.003-1.553-.004-2.33%200-.043.01-.056.055-.056.177.003.354.001.53.002a1.13%201.13%200%20001.15-1.153c.002-2.247.002-4.494.001-6.741%200-.077.01-.067-.066-.067zm2.576.824a.653.653%200%2000-.281-.563c-.336-.24-.702-.268-1.076-.104-.303.133-.463.363-.458.711.01.706.003%201.411.003%202.116%200%20.725.001%201.45-.001%202.174a.635.635%200%2000.278.548c.364.258.753.276%201.144.073.263-.137.393-.358.392-.665-.004-1.43-.005-2.86%200-4.29zm-12.07.002a.668.668%200%2000-.316-.591%201.037%201.037%200%2000-.942-.118c-.287.095-.495.276-.55.593a.046.046%200%2000-.001.033.09.09%200%2001.007.016%2014971.952%2014971.952%200%2000.001%204.383l-.001.063a.2.2%200%2001-.007.027.047.047%200%20000%20.034.652.652%200%2000.282.446c.373.256.766.27%201.159.055a.674.674%200%2000.368-.635c-.004-1.435-.005-2.87%200-4.306zm9.509-1.911a3.773%203.773%200%2000-.74-1.686%203.521%203.521%200%2000-1.406-1.064c-.04-.017-.043-.03-.02-.064.149-.219.295-.439.442-.658.084-.125.169-.25.251-.377a.147.147%200%2000-.099-.231c-.073-.012-.12.026-.16.084L9.365%201.18a.051.051%200%2001-.071.024%204.377%204.377%200%2000-.3-.087%206.642%206.642%200%2000-2.036-.17c-.482.024-.96.111-1.42.259a.046.046%200%2001-.063-.022C5.384%201.047%205.291.91%205.2.773L4.742.089a.146.146%200%2000-.18-.064.15.15%200%2000-.094.162c.007.031.02.06.04.084.225.337.449.674.675%201.009.027.04.023.05-.021.07-1.05.467-1.72%201.262-2.037%202.363a4.255%204.255%200%2000-.137.758c-.009.091-.012.091.076.091h4.36c1.462%200%202.924%200%204.386.002.054%200%20.059-.02.055-.063a4.703%204.703%200%2000-.05-.403zm-6.301-.794a.496.496%200%20110-.992.496.496%200%20010%20.992zm3.797%200a.496.496%200%2011.005-.992.496.496%200%2001-.005.992z%22/%3E%3C/svg%3E);
}

.calendar-sync-popup-item-text-outlook:before {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2217%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M8.966%2014.42c.025-.154.03-11.269.008-11.511l-5.668%201.35v7.835l-2.917%201.14-.017-.01c-.004-.003-.01-.007-.01-.012-.003-.029-.007-.058-.007-.088v-9.49c.043-.054.1-.06.148-.078C3.278%202.516%206.055%201.478%208.83.439a.427.427%200%2001.29-.023c1.523.442%203.048.88%204.572%201.318l.075.024v13.344c-.437.122-.87.244-1.305.363-1.105.305-2.211.607-3.315.914a.473.473%200%2001-.31-.01c-2.73-1.01-5.46-2.015-8.191-3.022a.37.37%200%2001-.152-.09l8.472%201.163z%22/%3E%3C/svg%3E);
}
.calendar-sync-popup-item-text-exchange:before,
.calendar-sync-popup-item-text-ms:before {
	width: 17px;
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217%22%20height%3D%2217%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.809%201.844c-1.098.196-2.193.407-3.296.58-.411.064-.411.067-.411.469v11.533c0%20.074.005.148%200%20.221-.012.154.062.215.21.24%201.185.197%202.372.386%203.553.604.82.152%201.64.295%202.46.44.833.146%201.662.314%202.5.437.431.064.43.069.43-.344V.9c-.605.097-1.165.172-1.719.28-1.239.24-2.485.442-3.727.664zm2.53%204.064c.007.161-.051.212-.211.21-.532-.007-1.064-.004-1.596-.002-.38%200-.348-.045-.349.362%200%20.294-.003.589.001.884.003.232.035.274.274.284.321.014.643.007.965.009.545.003.545.003.545.538%200%20.197-.01.394.002.59.01.167-.061.21-.215.202-.406-.023-.815.016-1.219-.063a1.547%201.547%200%2000-.222-.004c-.096-.005-.13.044-.13.132v1.216a.137.137%200%2000.03.101.14.14%200%2000.094.05.72.72%200%2000.18.033c.496-.025.98.103%201.476.095.288-.005.295.014.298.29.004.307-.006.614.003.92.005.15-.052.196-.195.18-.33-.033-.663-.055-.993-.092-.561-.063-1.122-.134-1.683-.2-.049-.006-.099-.003-.148-.008-.47-.049-.47-.05-.47-.517v-2.8-2.946c0-.275.003-.27.26-.303.661-.086%201.326-.108%201.99-.15.369-.023.735-.071%201.106-.072.165%200%20.214.056.208.214-.01.282-.01.565%200%20.847zm10.113-.95a2.573%202.573%200%2000-.006-.295.691.691%200%2000-.443-.585c-.13-.056-.268-.04-.403-.04h-5.2c-.061%200-.123.002-.185%200-.113-.003-.147.057-.146.16.003.271.003.541%200%20.812-.001.137.058.204.199.203.134-.001.262-.014.377.102.207.21.433.402.654.598.112.1.136.196.026.313-.038.05-.072.1-.103.153-.164.226-.168.225-.39.05-.16-.127-.296-.277-.546-.254-.186.017-.224.078-.22.244.01.381.037.766-.005%201.142-.054.488.095.85.492%201.14.177.129.32.306.478.462.066.064.119.135.049.223-.056.07-.132.048-.201.014a3.319%203.319%200%2001-.164-.084l-.645-.355v.925c0%20.406-.003.811.002%201.217.001.145.081.205.206.16a.458.458%200%2000.151-.1c.135-.126.266-.257.397-.388l1.333-1.334c.06-.06.124-.145.22-.085.113.07.057.166.011.256-.117.243-.25.477-.398.702-.407.6-.819%201.196-1.323%201.722-.083.088-.158.187-.3.2-.093.006-.22-.05-.272.051-.04.08-.025.19-.026.286-.003.221.004.443-.002.664-.004.13.053.176.176.169.074-.005.15%200%20.223%200%201.671%200%203.343-.014%205.014.007.584.007.986-.224.979-.972-.024-2.495-.01-4.99-.01-7.484zm-1.182%206.908c-.002.34-.027.366-.35.367-.594.003-1.188-.003-1.782.004a.457.457%200%2001-.36-.146%209.284%209.284%200%2000-.62-.583c-.117-.099-.101-.176-.023-.279.095-.126.184-.256.287-.4a.37.37%200%2001.068.041c.272.363.64.458%201.076.405.197-.014.395-.015.593-.004a.12.12%200%2000.103-.032.117.117%200%2000.035-.1c0-.308%200-.615-.002-.922%200-.142-.113-.214-.197-.298-.5-.495-1.002-.987-1.503-1.48l-.16-.154c-.066-.063-.124-.135-.053-.221.066-.081.16-.056.237-.013.257.145.518.284.764.445.581.372%201.133.787%201.651%201.24a.648.648%200%2001.243.545c-.016.528-.003%201.057-.007%201.585zm-.043-4.335c-.147.295-.444.517-.674.773-.088.097-.18.123-.286.028a.21.21%200%2000-.03-.023c-.41-.256-.412-.262-.094-.603.086-.092.16-.176.157-.316a28.84%2028.84%200%20010-1.03c0-.121-.035-.18-.168-.178-.284.007-.57.009-.853%200-.146-.006-.225.081-.312.168L11.53%207.787c-.06.061-.119.125-.182.184-.078.07-.153.198-.276.108-.128-.093-.015-.204.03-.293.328-.662.775-1.246%201.224-1.83.156-.204.325-.4.505-.585.1-.11.244-.169.393-.162.581.007%201.163%200%201.744.005.259.002.295.04.302.304.007.307.001.614.001.92%200%20.037.002.074%200%20.11-.013.331.098.696-.044.983z%22/%3E%3C/svg%3E);
}

.calendar-sync-popup-item-text-icloud:before {
	width: 15px;
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2213%22%20height%3D%2215%22%20viewBox%3D%220%200%2013%2015%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M11.1169617%2C8.10078457%20C11.1104941%2C6.90755662%2011.6473088%2C6.00694586%2012.7338735%2C5.34368017%20C12.1259147%2C4.46907986%2011.2075088%2C3.98788711%209.99482496%2C3.89359935%20C8.84681759%2C3.80256287%207.59209408%2C4.56661892%207.13289115%2C4.56661892%20C6.64781763%2C4.56661892%205.53538232%2C3.92611235%204.66224995%2C3.92611235%20C2.85777642%2C3.95537407%200.940119078%2C5.37294192%200.940119078%2C8.25684709%20C0.940119078%2C9.10868831%201.09534262%2C9.98979124%201.40578968%2C10.8969046%20C1.81971908%2C12.0901325%203.31374556%2C15.0163046%204.87244849%2C14.9675351%20C5.68737204%2C14.9480273%206.26299262%2C14.385552%207.32368672%2C14.385552%20C8.3520426%2C14.385552%208.88562349%2C14.9675351%209.79432789%2C14.9675351%20C11.3659662%2C14.944776%2012.7177044%2C12.2852107%2013.1122309%2C11.0887314%20C11.0037779%2C10.0905816%2011.1169617%2C8.16255933%2011.1169617%2C8.10078457%20Z%20M9.31363215%2C2.77318175%20C10.2083721%2C1.7279313%2010.1264362%2C0.776237219%2010.1002167%2C0.434272578%20C9.31035472%2C0.479437723%208.39595021%2C0.963349974%207.87483797%2C1.56017507%20C7.30128675%2C2.19893924%206.96371086%2C2.98932923%207.03581446%2C3.87972775%20C7.89122513%2C3.94424939%208.67125479%2C3.51195445%209.31363215%2C2.77318175%20Z%22%20transform%3D%22translate%28-.282%20-.17%29%22/%3E%0A%3C/svg%3E%0A);
}

.calendar-sync-popup-item-text-office365:before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3938_290637)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.268 2.31L4.037 3.577v.118l.001 7.14c0 .064-.016.098-.078.122-.679.266-1.356.535-2.034.803l-.555.22.002.015 7.895 1.102V2.31zm4.429 5.23l.001 6.151c0 .079-.018.112-.098.134-1.41.395-2.82.795-4.23 1.19a.252.252 0 01-.147-.007c-2.404-.903-4.807-1.808-7.21-2.713-.19-.071-.377-.144-.567-.213-.056-.02-.072-.05-.072-.109 0-2.96 0-5.92-.003-8.88 0-.064.021-.09.078-.112C4.037 1.992 6.623 1.001 9.21.014c.051-.019.118-.02.171-.005 1.41.411 2.817.826 4.226 1.237.07.02.09.052.09.126-.002 2.056-.001 4.112-.001 6.168z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3938_290637'%3E%3Cpath fill='%23fff' d='M0 0h16v15H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.calendar-sync-popup-item-text-caldav:before {
	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%2218%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.239%205.507a6.02%206.02%200%20110%2012.04%206.02%206.02%200%20010-12.04zm-3.632%204.68l-.063.051-1.23%201.23a.4.4%200%2000.203.674l.08.008.43.001a4.248%204.248%200%20006.697%202.867l.186-.143-1.138-1.181a2.618%202.618%200%2001-4.023-1.297L8.7%2012.23l-.017-.079h.374a.4.4%200%2000.334-.62l-.052-.064-1.23-1.229a.4.4%200%2000-.502-.051zM2.814%202.378v.485c0%20.803.624%201.455%201.396%201.455.725%200%201.32-.577%201.388-1.315l.007-.14v-.485h3.72v.485c0%20.256.064.497.176.707a8.11%208.11%200%2000-3.56%201.772l-4.057.001v7.705h1.353c.128.68.341%201.33.627%201.94H.954c-.477%200-.87-.375-.924-.857l-.006-.113v-9.7c-.004-.05-.006-.1-.006-.15.002-.941.699-1.711%201.584-1.784l.14-.006h1.072zm8.41%204.934c-.93%200-1.79.298-2.49.805l-.186.144%201.138%201.18a2.618%202.618%200%20014.023%201.297l.05.168.016.079h-.373a.4.4%200%2000-.334.62l.05.063%201.23%201.23a.4.4%200%2000.503.05l.063-.05%201.23-1.23a.4.4%200%2000-.203-.675l-.08-.008h-.43a4.248%204.248%200%2000-4.207-3.673zm1.964-4.934c.93.059%201.66.833%201.716%201.788l.002.088a8.091%208.091%200%2000-2.896-.835c.051-.128.085-.266.1-.41l.006-.146v-.485h1.072zM4.214.886c.346.003.63.273.673.621l.006.097v1.067c0%20.394-.306.713-.683.713a.694.694%200%2001-.678-.616l-.006-.097V1.594a.699.699%200%2001.688-.708zm6.507.071c.324%200%20.592.249.638.574l.007.1v1.01c0%20.339-.239.619-.55.667l-.095.007a.656.656%200%2001-.639-.575l-.007-.1V1.63a.66.66%200%2001.646-.673z%22/%3E%3C/svg%3E);
	background-size: contain;
}

.calendar-sync-popup-item-text-yandex:before {
	width: 16px;
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217%22%20height%3D%2213%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.313%201.978v.918a1.264%201.264%200%20002.521.13l.007-.13v-.918h5.48l.001.918c0%20.654.497%201.192%201.135%201.257l.129.007c.654%200%201.192-.498%201.257-1.135l.006-.129v-.918h2.157v11.013H.99V1.978h2.323zm6.848%201.755H8.904c-1.236%200-2.275.844-2.275%202.533%200%201.13.404%201.773%201.022%202.146l.127.071-1.466%203.299h.973L8.62%208.697h.7v3.085h.841V3.733zm-.842.732v3.512h-.448c-.733%200-1.334-.417-1.334-1.711%200-1.273.592-1.753%201.233-1.798l.101-.003h.448zM4.577.644a.75.75%200%2001.75.75V2.73a.75.75%200%2011-1.5%200V1.395a.75.75%200%2001.75-.751zm8.009%200a.75.75%200%2001.75.75V2.73a.75.75%200%2011-1.501%200V1.395a.75.75%200%2001.75-.751z%22/%3E%3C/svg%3E);
}

.calendar-sync-popup-item-time {
	color: rgba(255, 255, 255, .53);
	padding-right: 11px;
	max-width: 125px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.calendar-sync-popup-item-status {
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	flex-shrink: 0;
}

.calendar-sync-popup-status-refused {
	padding: 0 20px 10px 13px;
}

.calendar-sync-popup-status-refused-title {
	font-size: 22px;
	font-weight: 300;
	margin-bottom: 15px;
	line-height: 28px;
}

.calendar-sync-popup-status-refused-text {
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
}

.calendar-sync-popup-item-status-refused {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.013 14.72c.402.28.955.18 1.235-.223l8.927-12.842a.887.887 0 00-.223-1.236l-.374-.26a.888.888 0 00-1.236.222L3.416 13.224a.887.887 0 00.222 1.235l.375.26zM4.549 9.196l-1.2 1.725a6.58 6.58 0 01-1.117-3.68H0L3.303 3.93l2.89 2.9-.285.412H4.127c0 .698.15 1.36.422 1.955zM13.595 7.24l-1.855.001-.315.453 2.865 2.903 3.367-3.355h-2.168a6.616 6.616 0 00-1.151-3.738L13.144 5.22c.29.614.45 1.299.45 2.02zM7.273 13.667l1.196-1.72a4.713 4.713 0 003.354-1.025l1.345 1.346a6.603 6.603 0 01-4.307 1.59 6.665 6.665 0 01-1.588-.19zM9.199 2.507L10.398.78A6.623 6.623 0 008.86.601a6.606 6.606 0 00-4.411 1.68l1.343 1.342A4.714 4.714 0 019.2 2.507z' fill='%23fff'/%3E%3C/svg%3E");
}

.calendar-sync-popup-item-status-success {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217%22%20height%3D%2217%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.9%22%3E%3Cpath%20fill%3D%22%239DCF00%22%20d%3D%22M8.5%200a8.5%208.5%200%20110%2017%208.5%208.5%200%20010-17z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7.369%209.879l4.778-4.808%201.322%201.33-6.08%206.117-.02-.021-.021.021L3.54%208.689%204.863%207.36z%22/%3E%3C/g%3E%3C/svg%3E);
}

.calendar-sync-popup-item-status-fail {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217%22%20height%3D%2217%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.9%22%3E%3Cpath%20fill%3D%22%23FF5752%22%20d%3D%22M8.5%200a8.5%208.5%200%20110%2017%208.5%208.5%200%20010-17z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7.1%203.134h2.68l-.289%206.374H7.327z%22/%3E%3Ccircle%20cx%3D%228.463%22%20cy%3D%2212.836%22%20r%3D%221.429%22%20fill%3D%22%23FFF%22/%3E%3C/g%3E%3C/svg%3E);
}

.calendar-sync-status-popup {
	padding: 0 16px 3px;
}

/* tilegrid*/
.calendar-sync-item {
	background-color: #fff;
	border-radius: var(--ui-border-radius-sm, 2px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .14);
	transition: all .2s linear;
	cursor: pointer;
}

.calendar-sync-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .14);
}

.calendar-sync-item-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 10px 0;
	box-sizing: border-box;
	height: 45px;
	text-align: center;
	color: #525c69;
	font: 13px/14px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.calendar-sync-item-image {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 27px;
}

.calendar-sync-item-image-item {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	border: 1px solid rgba(255, 255, 255, .4);
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%,-50%);
}

.calendar-sync-item-status {
	position: absolute;
	right: 0;
	top: 0;
	display: none;
}

.calendar-sync-item-selected .calendar-sync-item-status,
.calendar-sync-item-failed .calendar-sync-item-status {
	display: block;
}

.calendar-sync-item-status:before {
	position: absolute;
	bottom: 14px;
	top: -4px;
	right: -5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #97c70f url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%229%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.627%205.81L10.402%200%2012%201.607%204.652%209l-.025-.025L4.602%209%200%204.373l1.598-1.607z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E)
	no-repeat center;
	content: '';
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.calendar-sync-item-selected .calendar-sync-item-title,
.calendar-sync-item-failed .calendar-sync-item-title {
	color: #fff;
}

.calendar-sync-item-failed .calendar-sync-item-status:before {
	background-color: #ff5752;
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217%22%20height%3D%2217%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.9%22%3E%3Cpath%20fill%3D%22%23FF5752%22%20d%3D%22M8.5%200a8.5%208.5%200%20110%2017%208.5%208.5%200%20010-17z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M7.1%203.134h2.68l-.289%206.374H7.327z%22/%3E%3Ccircle%20cx%3D%228.463%22%20cy%3D%2212.836%22%20r%3D%221.429%22%20fill%3D%22%23FFF%22/%3E%3C/g%3E%3C/svg%3E);
}

#calendar_sync .ui-grid-tile-item {
	max-width: 200px;
	max-height: 110px;
}

.calendar-sync-item-add {
	background-color: rgba(255,255,255, .6);
	box-shadow: none;
	border: 1px dashed #d7d8d8;
}

.calendar-sync-item-add .calendar-sync-item-image {
	background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2242%22%20height%3D%2242%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20fill%3D%22%23D1D1D1%22%20d%3D%22M23%2012v7h7v4h-7v7h-4v-7.001L12%2023v-4l7-.001V12h4z%22%20opacity%3D%22.8%22/%3E%3C/g%3E%3C/svg%3E);
}

.calendar-sync-item-add .calendar-sync-item-title {
	color: rgba(82, 92, 105, .7);
	font: 13px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
}

.calendar-sync-item-add:hover {
	border-color: rgba(82, 92, 105, .5);
	box-shadow: none;
	transform: none;
}

.calendar-sync-item-add-text {
	color: rgba(82, 92, 105, .7);
	display: block;
	font: 13px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	text-align: center;
	margin-top: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 180px;
	overflow: hidden;
}

.calendar-sync-item-add-inner {
	display: block;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
	position: absolute;
}

.calendar-sync-item-add-icon {
	background-color: #fff;
	display: block;
	border-radius: 50%;
	height: 42px;
	margin: 0 auto;
	position: relative;
	width: 42px;
	transition: background-color 0.15s;
}

.calendar-sync-item-add-icon:before,
.calendar-sync-item-add-icon:after {
	background-color: #dadada;
	content: '';
	height: 18px;
	position: absolute;
	left: 19px;
	top: 12px;
	width: 4px;
	transition: background-color 0.2s;
}

.calendar-sync-item-add-icon:after {
	transform: rotate(90deg);
}

.calendar-sync-item-add:hover .calendar-sync-item-add:before,
.calendar-sync-item-add:hover .calendar-sync-item-add:after {
	background-color: rgba(209, 209, 209, 1);
}

.calendar-sync-item-add:hover {
	border-color: rgba(82, 92, 105, .5);
	box-shadow: none;
	transform: none;
}

.calendar-sync-popup-footer-wrap {
	border-top: 1px solid rgba(82, 92, 105, .2);
	padding: 9px 0 5px;
	text-align: right;
	display: flex;
	align-items: center;
}

.calendar-sync-popup-footer-btn {
	font: 11px/19px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold, 700);
	color: #fff;
	text-transform: uppercase;
	position: relative;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0 4px 0 20px;
	transition: all .2s linear;
	border-radius: 2px;
	opacity: .7;
	margin-left: auto;
}

.calendar-sync-popup-footer-btn-disabled {
	opacity: 0.4;
	pointer-events: none;
}

.calendar-sync-popup-footer-btn:before {
	content: '';
	width: 13px;
	height: 11px;
	position: absolute;
	left: 2px;
	top: 5px;
	opacity: .7;
	background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2211%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.384%203.347L5.417%205.38a.24.24%200%2001-.17.41H3.98l.016.08a3.361%203.361%200%20005.275%201.937l1.182%201.225A5.054%205.054%200%20012.262%205.79h-1.08a.24.24%200%2001-.17-.41l2.033-2.033a.24.24%200%2001.34%200zM7.256.032a5.054%205.054%200%20015.008%204.37l1.08.001a.24.24%200%2001.17.41L11.48%206.845a.24.24%200%2001-.34%200L9.108%204.813a.24.24%200%2001.17-.41h1.267l-.016-.08a3.361%203.361%200%2000-5.275-1.937L4.072%201.16A5.032%205.032%200%20017.256.03z%22%20opacity%3D%221%22/%3E%3C/svg%3E) no-repeat center;
}

.calendar-sync-popup-footer-btn:hover, .calendar-sync-popup-footer-btn:hover:before {
	opacity: .9;
}

.calendar-sync-popup-footer-btn-load:before {
	width: 14px;
	height: 14px;
	top: 3px;
	background-image: url(/bitrix/js/ui/buttons/src/css/images/ui-loader-wait-white.min.svg?v=1.2);
	background-size: 14px 14px;
}

.calendar-sync-popup-footer-status {
	font: 13px/18px var(--ui-font-family-primary, var(--ui-font-family-helvetica));
	opacity: .53;
	margin-right: auto;
}

/* mobile slider */

.calendar-sync-slider-section,
.calendar-sync-slider-section-warning {
	background: #fff;
	display: flex;
	padding: 30px 20px 30px 25px;
	border-radius: var(--ui-border-radius-md);
}

.calendar-sync-slider-section-warning {
	padding: 15px 20px;
	margin-top: 12px;
	margin-bottom: 20px;
}

.calendar-sync-button {
	margin-top: 12px;
}

.calendar-sync-button-warning {
	margin: 10px auto auto auto;
}

.calendar-sync-slider-section-banner {
	padding: 30px 20px 20px 20px;
}

.calendar-sync-slider-section-qr,
.popup-window-content .calendar-sync-slider-section-qr {
	padding: 20px;
}

.calendar-sync-slider-section-col {
	flex-direction: column;
}

.calendar-sync-slider-section + .calendar-sync-slider-section {
	margin-top: 10px;
}

.calendar-sync-qr-popup-content .calendar-sync-slider-section:last-child {
	margin-bottom: 0;
}

.calendar-sync-slider-title {
	font: 22px/28px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
	color: #333;
	margin-bottom: 7px;
}

.calendar-sync-slider-section .calendar-sync-qr-popup-title {
	display: none;
}

.calendar-sync-slider-section-flex-wrap {
	flex-wrap: wrap;
}

.calendar-sync-slider-desc {
	font-size: 13px;
	line-height: 18px;
	color: #858c96;
	margin-bottom: 7px;
}

.calendar-sync-slider-link {
	font-size: 14px;
	line-height: 22px;
	color: #9b9b9b;
	border-bottom: 1px dashed rgba(155, 155, 155, .4);
	transition: all .2s linear;
	cursor: pointer;
}

.calendar-sync-slider-link:hover {
	border-color: rgba(155, 155, 155, .8);
	color: #9b9b9b;
}

.calendar-sync-slider-info {
	color: #525c69;
	font-size: 14px;
	line-height: 20px;
}

span.calendar-sync-slider-info-text {
	margin-right: 0.5ch;
}

.calendar-sync-slider-info + .calendar-sync-slider-info {
	margin-top: 23px;
}

.calendar-sync-slider-info-time {
	color: #333;
}

.calendar-sync-slider-info-list {
	list-style-type: none;
	counter-reset: num;
	margin: 20px 0 40px 5px;
	padding: 0;
}

.calendar-sync-slider-info-item {
	position: relative;
	padding-left: 33px;
}

.calendar-sync-slider-info-item + .calendar-sync-slider-info-item {
	margin-top: 20px;
}

.calendar-sync-slider-info-item:before {
	counter-increment: num;
	content: counter(num);
	color: #fff;
	position: absolute;
	left: 0;
	top: 3px;
	background: #2fc6f6;
	border-radius: 10px;
	width: 21px;
	height: 16px;
	font: 11px/15px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold, 700);
	text-align: center;
	box-sizing: border-box;
}

.calendar-sync-slider-header {
	max-width: 370px;
}

.calendar-sync-slider-header-divide .calendar-sync-slider-subtitle {
	margin-bottom: 33px;
}

.calendar-sync-slider-info-item-link {
	background: #cef2fd;
	border-radius: 12px;
	padding: 2px 5px;
	transition: background .2s linear;
}

.calendar-sync-slider-info-item-link:hover {
	background: #d5f4fd;
}

.calendar-sync-slider-header-icon {
	width: 97px;
	height: 97px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	margin-right: 19px;
	flex-shrink: 0;
}

.calendar-sync-slider-header-icon-iphone {
	background-image: url(/bitrix/images/calendar/sync/iphone.svg);
}

.calendar-sync-slider-header-icon-android {
	background-image: url(/bitrix/images/calendar/sync/android.svg);
}

.calendar-sync-slider-header-icon-google {
	background-image: url(/bitrix/images/calendar/sync/google.svg);
}

.calendar-sync-slider-header-icon-icloud {
	background-image: url(/bitrix/images/calendar/sync/icloud.svg);
}

.calendar-sync-slider-header-icon-office365 {
	background-image: url(/bitrix/images/calendar/sync/office365.svg);
}

.calendar-sync-slider-header-icon-mac {
	background-image: url(/bitrix/images/calendar/sync/mac.svg);
}

.calendar-sync-slider-header-icon-ms {
	background-image: url(/bitrix/images/calendar/sync/outlook.svg);
}

.calendar-sync-slider-header-icon-office {
	background-image: url(/bitrix/images/calendar/sync/exchange.svg);
}

.calendar-sync-slider-header-icon-caldav {
	background-image: url(../image/calendar_sync__icon-header-logo.svg);
	background-size: 80%;
}

.calendar-sync-slider-header-icon-yandex {
	background-image: url(/bitrix/images/calendar/sync/yandex.svg);
}

.calendar-sync-slider-content {
	background: rgba(215, 245, 255, .5);
	display: flex;
	align-items: center;
	padding: 6px 0 0 0;
	width: 100%;
	box-sizing: border-box;
	border-radius: 10px;
	position: relative;
}

.calendar-sync-slider-section-qr.calendar-sync-slider-section  {
	padding: 0;
}

.calendar-sync-qr-popup-content .calendar-sync-slider-section:last-child.calendar-sync-slider-section-qr {
	padding-top: 0;
}

.popup-window-content .calendar-sync-slider-content {
	margin-top: 20px;
}

.calendar-sync-slider-section .calendar-sync-qr-popup-content {
	margin-top: 20px;
	width: 100%;
}

.calendar-sync-slider-qr {
	width: 204px;
	position: absolute;
	overflow: hidden;
	left: 15%;
	top: 0;
	bottom: 0;
}

.calendar-sync-slider-qr:after {
	position: absolute;
	bottom: -9px;
	z-index: 9;
	border-radius: 80%;
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
	content: '';
	height: 10px;
	width: 220px;
	left: 50%;
	transform: translateX(-50%);
}

.popup-window-content .calendar-sync-slider-section .calendar-sync-slider-qr {
	left: 15%;
}

.calendar-sync-slider-section .calendar-sync-slider-qr {
	left: 12.7%;
}

.calendar-sync-slider-section .calendar-sync-slider-instruction-notice:after {
	left: -15px;
}

.calendar-sync-slider-instruction {
	text-align: center;
	width: 150px;
	position: relative;
}

.calendar-sync-slider-instruction-title {
	font: 14px/20px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	color: #333;
	width: 115px;
	margin: 0 auto 10px;
}

.calendar-sync-slider-instruction-subtitle {
	font: 15px/21px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold, 700);
	color: #2fc6f6;
	margin-bottom: 5px;
}

.calendar-sync-slider-instruction-notice {
	font-size: 12px;
	line-height: 16px;
	color: #adadad;
	margin-bottom: 60px;
	position: relative;
}

.calendar-sync-slider-section.calendar-sync-slider-section-col {
	padding-left: 0;
}

.calendar-sync-slider-instruction-notice:after {
	position: absolute;
	top: -40px;
	left: 0;
	width: 180px;
	content: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22183%22%20height%3D%22126%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%232FC6F6%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20opacity%3D%22.537%22%3E%3Cpath%20stroke-linejoin%3D%22round%22%20d%3D%22M4.867%20113.541L1.42%20100.256l13.228-1.186%22/%3E%3Cpath%20d%3D%22M157.737%201.796c15.805%209.807%2023.797%2025.07%2023.975%2045.788.334%2038.733-36.888%2071.803-83.218%2076.193-33.812%203.205-69.783-4.949-95.002-21.922%22/%3E%3C/g%3E%3C/svg%3E);
}

.calendar-sync-slider-qr-container {
	width: 204px;
	height: 204px;
	background: #fff;
	border-radius: 6px;
	padding: 9px;
	position: absolute;
	top: 77px;
	left: 50%;
	box-sizing: border-box;
	transform: translateX(-50%);
	box-shadow: 0 9px 14px 0 rgba(0, 0, 0, .12);
}

.calendar-sync-slider-qr-container .calendar-loader {
	position: static;
}

.calendar-sync-slider-logo {
	width: 62px;
	height: 12px;
	background: url(/bitrix/images/calendar/sync/logo_en.svg) no-repeat center;
	display: block;
	position: absolute;
	bottom: 17px;
	left: 50%;
	transform: translateX(-50%);
}

.calendar-sync-qr-popup-title {
	font: 26px/32px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #333;
	text-align: center;
	margin: 8px 0 6px;
}

.calendar-sync-qr-popup .calendar-sync-slider-qr {
	left: 12%;
}

.calendar-sync-qr-popup .calendar-sync-slider-content {
	height: 320px;
}

.calendar-sync-qr-popup .popup-window-close-icon {
	width: 40px;
	height: 40px;
}

.calendar-sync-qr-popup .popup-window-close-icon:after {
	width: 14px;
	height: 14px;
	opacity: .5;
}

.calendar-sync-qr-popup .calendar-sync-slider-phone-img {
	transform: translateY(-12px);
}

.calendar-sync-qr-popup .calendar-sync-slider-instruction {
	transform: translateX(-21px);
}

.calendar-sync-qr-popup .calendar-sync-slider-qr-container {
	top: 56px;
}

.calendar-sync-wrap-detail .calendar-sync-header {
	border: none;
	margin-bottom: 0;
}

.calendar-sync-slider-btn {
	margin-top: 21px;
}

.calendar-sync-wrap-detail .calendar-sync-slider-header-icon {
	margin-top: 8px;
}

.calendar-sync-wrap-detail .calendar-sync-slider-section {
	padding-top: 18px;
}

.calendar-sync-slider-account {
	border: 1px solid #c6cdd3;
	font-size: 14px;
	line-height: 20px;
	font-weight: var(--ui-font-weight-bold);
	color: #4a4a4a;
	display: flex;
	align-items: center;
	border-radius: 25px;
	padding: 7px 10px 7px 9px;
	margin: 19px 0 16px;
	max-width: 300px;
	box-sizing: border-box;
}

.calendar-sync-slider-account-email {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.calendar-sync-slider-account-avatar {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 10px;
	flex-shrink: 0;
	background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%23828B95%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M23.68%2020.056c0-.747-.994-1.6-2.954-2.098a6.717%206.717%200%2001-1.87-.836c-.126-.07-.107-.723-.107-.723l-.631-.094c0-.053-.054-.835-.054-.835.755-.25.677-1.719.677-1.719.48.261.792-.901.792-.901.567-1.616-.283-1.518-.283-1.518a9.976%209.976%200%20000-2.974c-.377-3.271-6.064-2.383-5.39-1.315-1.662-.3-1.283%203.412-1.283%203.412l.36.96c-.707.452-.215.997-.19%201.624.034.926.612.734.612.734.035%201.53.803%201.728.803%201.728.145.96.055.797.055.797l-.684.081a2.62%202.62%200%2001-.054.651c-.803.352-.976.558-1.775.902-1.543.664-3.22%201.527-3.518%202.69-.299%201.161-.576%203.693-.576%203.693h16.907l-.836-4.26z%22/%3E%3C/g%3E%3C/svg%3E) no-repeat center;
}

.calendar-sync-slider-info-link {
	border-bottom: 1px dashed rgba(39, 107, 179, .4);
	cursor: pointer;
}

.calendar-sync-slider-info-link:hover {
	border-color: rgba(39, 107, 179, .8);
}

.calendar-sync-slider-subtitle {
	font: 18px/24px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #333;
	margin-bottom: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid #edeef0;
}

.calendar-sync-slider-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.calendar-sync-slider-field + .calendar-sync-slider-field {
	margin-top: 14px;
}

.calendar-sync-slider-form-btn {
	margin-top: 31px;
}

.calendar-sync-slider-form {
	margin: 5px 0 34px;
}

.calendar-sync-slider-form-disabled {
	opacity: .65;
	pointer-events: none;
}

.calendar-sync-slider-section-form {
	flex-direction: column;
	padding-left: 20px;
}

.calendar-sync-outlook-popup-item {
	padding-left: 19px;
	position: relative;
}

.calendar-sync-outlook-popup-item:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: #b9b7b7;
	border-radius: 50%;
	top: 14px;
	left: 15px;
}

.calendar-alert-popup-connection .popup-window-titlebar-text {
	white-space: pre-wrap;
	line-height: 18px;
	padding: 15px 20px 0;
	color: #535c69;
}

.calendar-alert-popup-connection .popup-window-buttons {
	padding-bottom: 15px;
}

.calendar-alert-popup-connection .popup-window-content {
	padding: 15px 20px 0;
}

.calendar-notice-mobile-banner {
	display: inline-block;
	width: 13px;
	height: 13px;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2013%2013%22%3E%3Cg%20fill%3D%22none%22%20opacity%3D%22.7%22%3E%3Cpath%20fill%3D%22%23525C69%22%20d%3D%22M12.48%206.49C12.48%203.183%209.8.5%206.49.5%203.183.5.5%203.182.5%206.49c0%203.31%202.682%205.99%205.99%205.99%203.31%200%205.99-2.68%205.99-5.99z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M4.06%204.842c0-.308.098-.62.296-.936.197-.316.486-.578.865-.785.38-.207.823-.31%201.33-.31.47%200%20.884.086%201.244.26.36.173.638.41.834.707.196.298.294.623.294.973%200%20.275-.056.517-.168.724-.11.208-.244.387-.398.538-.154.15-.43.404-.83.76-.11.1-.198.19-.265.266-.065.076-.114.146-.147.21-.032.062-.057.125-.075.19-.018.062-.045.173-.08.332-.062.337-.255.505-.58.505-.168%200-.31-.055-.425-.165-.115-.11-.172-.274-.172-.49%200-.273.043-.51.127-.71.084-.198.196-.373.336-.524.14-.15.327-.33.564-.537.207-.183.357-.32.45-.412.092-.093.17-.195.233-.31.063-.112.095-.236.095-.37%200-.258-.097-.477-.29-.655-.192-.178-.44-.268-.746-.268-.358%200-.62.09-.79.27-.167.18-.31.445-.427.795-.11.367-.32.55-.627.55-.182%200-.335-.064-.46-.192s-.187-.267-.187-.416zm2.372%205.33c-.197%200-.37-.064-.518-.192-.147-.128-.22-.307-.22-.537%200-.205.07-.376.213-.516s.318-.21.525-.21c.205%200%20.376.07.516.21.14.14.21.31.21.516%200%20.227-.074.405-.22.535-.146.13-.314.194-.506.194z%22/%3E%3C/g%3E%3C/svg%3E');
	background-repeat: no-repeat;
	position: relative;
	top: 2px;
	z-index: 1;
}



.calendar-sync__scope {
	--font_helvetica:	var(--ui-font-family-primary, var(--ui-font-family-helvetica));

	--white: rgba(255,255,255,1);
	--white_alpha_10: rgba(255,255,255,.1);
	--white_alpha_15: rgba(255,255,255,.15);
	--white_alpha_20: rgba(255,255,255,.2);
	--white_alpha_25: rgba(255,255,255,.25);
	--white_alpha_30: rgba(255,255,255,.3);
	--white_alpha_35: rgba(255,255,255,.35);
	--white_alpha_40: rgba(255,255,255,.4);
	--white_alpha_50: rgba(255,255,255,.5);
	--white_alpha_70: rgba(255,255,255,.7);
	--white_alpha_75: rgba(255,255,255,.75);
	--white_alpha_80: rgba(255,255,255,.8);
	--white_alpha_90: rgba(255,255,255,.9);

	--graphite: rgba(82,92,105,1);
	--graphite_alpha_04: rgba(82,92,105,.04);
	--graphite_alpha_06: rgba(82,92,105,.06);
	--graphite_alpha_07: rgba(82,92,105,.07);
	--graphite_alpha_08: rgba(82,92,105,.08);
	--graphite_alpha_10: rgba(82,92,105,.1);
	--graphite_alpha_15: rgba(82,92,105,.15);
	--graphite_alpha_30: rgba(82,92,105,.3);
	--graphite_alpha_40: rgba(82,92,105,.4);
	--graphite_alpha_50: rgba(82,92,105,.5);
	--graphite_alpha_60: rgba(82,92,105,.6);
	--graphite_alpha_70: rgba(82,92,105,.7);
	--graphite_alpha_80: rgba(82,92,105,.8);

	--gray: rgba(51,51,51,1);
	--gray_alpha_80: rgba(51,51,51,.8);
	--gray_7: rgba(130, 139, 149, 1);

	--light-gray: rgba(168,173,180,1);

	--green: rgba(157,207,0,1);
	--green_alpha_30: rgba(157,207,0,.3);
	--green_alpha_60: rgba(157,207,0,.6);

	--blue: rgba(22,181,232,1);
	--blue_alpha_50: rgba(22,181,232,.5);

	--border-radius-10 : 10px;
}

.calendar-sync__wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 20px;
	box-sizing: border-box;
	min-height: 100%;
}

.calendar-sync__header {
	display: flex;
	overflow: hidden;
	align-items: center;
	padding: 25px 0;
	min-height: 117px;
	box-sizing: border-box;
	background: var(--white_alpha_80);
	box-shadow: 0 4px 13px 0 var(--graphite_alpha_04);
	border-radius: 10px 10px 0 0;
}

.calendar-sync__header-logo {
	display: block;
	width: 120px;
	min-width: 120px;
	height: 120px;
	margin: 0 23px 0 21px;
	background: rgba(173, 243, 218, .45) url(../image/calendar_sync__icon-header-logo.svg) 23px 26px no-repeat;
	background-size: 67%;
	border-radius: 100%;
}

.calendar-sync__header-container {
	flex: 1;
	padding-right: 30px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
}

.calendar-sync__header-title {
	margin-bottom: 10px;
	font-size: 31px;
	line-height: 28px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
	color: #202020;
}

.calendar-sync__header-sub-title {
	font-size: 21px;
	line-height: 24px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
	color: var(--graphite);
}

.calendar-sync__content {
	/*flex: 1;*/
	display: block;
	overflow: hidden;
	padding: 25px 15px;
	background: var(--white_alpha_80);
	box-shadow: 0 4px 13px 0 var(--graphite_alpha_04);
	border-radius: 0 0 10px 10px;
	box-sizing: border-box;
}

.calendar-sync__content.--border-radius {
	border-radius: var(--border-radius-10);
}

.calendar-sync__account-btn {
	--ui-icon-set__icon-color: var(--ui-color-on-primary);
	align-self: center;
}

.calendar-sync__account-counter {
	position: absolute;
	top: -3px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 16px;
	border-radius: var(--ui-border-radius-sm);
	color: var(--ui-color-on-primary);
	font-size: var(--ui-font-size-3xs);
	font-weight: var(--ui-font-weight-bold);
	background: #ff5752;
}

.calendar-sync__content-block {
	display: block;
}

.calendar-sync__content-block.--align-center {
	text-align: center;
}

.calendar-sync__content-block.--space-bottom {
	margin-bottom: 20px;
}

.calendar-sync__content-block.--space-bottom-xl {
	margin-bottom: 40px;
}

.calendar-sync__content-block.--space-left {
	padding-left: 30px;
}

.calendar-sync__content-block.--space-left--double {
	padding-left: 60px;
}

.calendar-sync__content-block:last-child {
	margin-bottom: 0;
}

.calendar-sync__content-text {
	display: flex;
	font: 15px/21px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite_alpha_80);
}

.calendar-sync__content-text.--disabled {
	color: var(--graphite_alpha_40);
}

.calendar-sync__content-link {
	display: inline-block;
	font: 14px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite_alpha_80);
	border-bottom: 1px dashed var(--graphite_alpha_60);
	text-decoration: none;
	cursor: pointer;
}

.calendar-sync__content-link:hover {
	color: inherit;
	border-bottom: 1px dashed var(--graphite_alpha_80);
}

.calendar-sync__content-text.--icon-check:before {
	content: '';
	display: block;
	min-width: 20px;
	height: 20px;
	margin: 1px 10px 0 0;
	background: url(../image/calendar-sync__icon-check.svg) center no-repeat;
}

.calendar-sync__content-text.--icon-check.--disabled:before {
	background-image: url(../image/calendar-sync__icon-check--disabled.svg);
}

.calendar-sync__content-text .calendar-date-year{
	margin-left: 5px;
}

.calendar-sync__calendar-list {
	display: block;
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 18px;
	background: linear-gradient(0deg, rgba(47, 198, 246, 0.1), rgba(47, 198, 246, 0.1)), #FFFFFF;
}

.calendar-sync__calendar-item {
	display: flex;
	position: relative;
	min-height: 100px;
	margin-bottom: 10px;
	border-radius: 10px;
	background: var(--white);
	box-sizing: border-box;
	-webkit-user-select: none;
	        user-select: none;
	overflow: hidden;
	box-shadow: 0px 2px 6px 0px rgba(74, 81, 89, 0.08);
}

.calendar-sync__calendar-item:last-child {
	margin-bottom: 0;
}

/*
.calendar-sync__calendar-item:hover {
	background: linear-gradient(
		0deg, rgba(47, 198, 246, 0.04), rgba(47, 198, 246, 0.04)), #FFFFFF;
}
*/

.calendar-sync__calendar-item:before {
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	width: 3px;
	height: 94px;
	background-color: rgba(213, 215, 219, 1);
}

.calendar-sync__calendar-item:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	/*border: 1px solid rgba(168,173,180,.31);*/
	border: 1px solid transparent;
	box-shadow: 0 1px 4px var(--graphite_alpha_07);
	border-radius: 10px;
	transition: .1s;
}

/*
.calendar-sync__calendar-item:hover:after {
	border: 1px solid var(--blue_alpha_50);
	box-shadow: 0 4px 13px var(--graphite_alpha_04);
}*/

.calendar-sync__calendar-item.--active {
	background: linear-gradient(0deg, rgba(47, 198, 246, 0.06), rgba(47, 198, 246, 0.06)), #fff !important;
}

.calendar-sync__calendar-item.--active:after {
	border: 2px solid var(--blue) !important;
	box-shadow: 0 4px 13px var(--graphite_alpha_04);
}

.calendar-sync__calendar-item.--pending {
	pointer-events: none;
}

.calendar-sync__calendar-item.--refused {
	border: 2px solid #FFC34D;
}

.calendar-sync__calendar-item.--refused .calendar-sync__calendar-item--logo-image {
	background-color: #fff6e4;
	border-color: #FFC34D;
}

.calendar-sync__calendar-item.--refused [data-role=sync_info_text] {
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	margin-right: 20px;
}

.calendar-sync__calendar-item.--off [data-role=sync_info_text] {
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
}

.calendar-sync__calendar-item.--complete {
	border: 2px solid #9DCF00 !important;
	box-shadow: 0 4px 13px var(--graphite_alpha_04);
}

.calendar-sync__calendar-item.--complete .calendar-sync__calendar-item--logo-image,
.calendar-sync__account.--complete .calendar-sync__account-logo--image {
	position: relative;
	border: 2px solid #9dcf00;
	background-color: rgba(157, 207, 0, .15);
}

.calendar-sync__calendar-item.--complete .calendar-sync__calendar-item--logo-image:after,
.calendar-sync__account.--complete .calendar-sync__account-logo--image:after {
	content: '';
	position: absolute;
	top: -3px;
	right: 0;
	display: block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8.182' fill='%239DCF00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.876 10.482l4.725-4.755 1.308 1.315-6.012 6.049-.02-.02-.021.02L4.09 9.305 5.399 7.99l2.477 2.492z' fill='%23fff'/%3E%3C/svg%3E");
}

.calendar-sync__account.--complete .calendar-sync__account-logo,
.calendar-sync__account.--complete .calendar-sync__account-logo--image,
.calendar-sync__account.--error .calendar-sync__account-logo,
.calendar-sync__account.--error .calendar-sync__account-logo--image,
.calendar-sync__account.--error-reconnect .calendar-sync__account-logo,
.calendar-sync__account.--error-reconnect .calendar-sync__account-logo--image {
	max-width: 66px;
	width: 66px;
	height: 66px;
	/*background-position: 13px 15px;*/
	box-sizing: border-box;
}

.calendar-sync__calendar-item.--error {
	/*border: 2px solid #FF5752 !important;*/
	box-shadow: 0 4px 13px var(--graphite_alpha_04);
}

.calendar-sync__calendar-item.--error .calendar-sync__calendar-item--logo-image,
.calendar-sync__account.--error .calendar-sync__account-logo--image,
.calendar-sync__account.--error-reconnect .calendar-sync__account-logo--image {
	/*border: 2px solid #ff5752;*/
	background-color: unset;
	border: 2px solid #edeef0;
}

.calendar-sync__calendar-item.--refused:before,
.calendar-sync__calendar-item.--complete:before,
/*.calendar-sync__calendar-item.--error:before,*/
.calendar-sync__calendar-item.--active:before {
	display: none;
}

.calendar-sync__calendar-item--logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95px;
	max-width: 95px;
	background: center no-repeat;
}

.calendar-sync__calendar-item--logo-image {
	display: block;
	width: 64px;
	height: 64px;
	border: 2px solid #edeef0;
	border-radius: 100%;
	background: var(--graphite_alpha_04) center no-repeat;
}

.calendar-sync__calendar-item--logo-image.--office365 {
	background-image: url(../image/calendar-sync__icon-office365.svg);
}

.calendar-sync__calendar-item--logo-image.--google {
	background-image: url(../image/calendar-sync__icon-google.svg);
}
.calendar-sync__auth-popup--logo-image.--icloud,
.calendar-sync__calendar-item--logo-image.--icloud {
	background-image: url(../image/calendar-sync__icon-icloud.svg);
}

.calendar-sync__calendar-item--logo-image.--iphone {
	background-image: url(../image/calendar-sync__icon-icloud.svg);
}

.calendar-sync__calendar-item--logo-image.--mac {
	background-image: url(../image/calendar-sync__icon-icloud.svg);
}

.calendar-sync__calendar-item--logo-image.--yandex {
	background-image: url(../image/calendar-sync__icon-yandex.svg);
	background-size: 21px;
	background-position: 20px 16px;
}

.calendar-sync__calendar-item--logo-image.--exchange {
	background-image: url(../image/calendar-sync__icon-ms-exchange.svg);
	background-size: 36px;
}

.calendar-sync__calendar-item--logo-image.--android {
	background-image: url(../image/calendar-sync__icon-android.svg);
	background-size: 31px;
}

.calendar-sync__calendar-item--logo-image.--outlook {
	background-image: url(../image/calendar-sync__icon-outlook.svg);
	background-size: 36px;
}

.calendar-sync__calendar-item--logo-image.--caldav {
	background-image: url(../image/calendar_sync__icon-header-logo.svg);
	background-position: 16px center;
	background-size: 36px;
}

.calendar-sync__calendar-item--container {
	display: flex;
	flex: 1;
	align-items: center;
	overflow: hidden;
	padding: 10px 20px 10px 0;
}

.calendar-sync__calendar-item--title {
	flex: 1;
	overflow: hidden;
	font-size: 15px;
	line-height: 22px;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	color: var(--graphite);
}

.calendar-sync__calendar-item--title .calendar-sync__account-info .calendar-sync__account-info--icon {
	display: none;
}

.calendar-sync__calendar-item--title .calendar-sync__account-info.--error .calendar-sync__account-info--icon,
.calendar-sync__account.--error .calendar-sync__account-info .calendar-sync__account-info--icon {
	display: block;
	width: 14px;
	height: 11px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.012 9.434L7.852.841a1.007 1.007 0 00-1.733 0L.959 9.434a1.01 1.01 0 00.871 1.53h10.32a1.01 1.01 0 00.862-1.53zm-6.767-5.6c0-.38.305-.684.686-.684h.093c.38 0 .685.304.685.685v2.563c0 .38-.305.685-.685.685H6.93a.682.682 0 01-.686-.685V3.835zm1.599 4.974a.866.866 0 01-.863.863.866.866 0 01-.862-.863c0-.474.389-.863.862-.863.474 0 .863.39.863.863z' fill='%23FF5752'/%3E%3C/svg%3E");
}

.calendar-sync__calendar-item--title .calendar-sync__account-info.--error-reconnect .calendar-sync__account-info--icon,
.calendar-sync__account.--error-reconnect .calendar-sync__account-info .calendar-sync__account-info--icon {
	animation: none;
	display: block;
	width: 29px;
	margin-right: 6px;
	height: 20px;
	background-image: url(../image/calendar-sync__icon-type-error-reconnect.svg);
	align-self: flex-start;
}

.calendar-sync__calendar-item--title .calendar-sync__account-info.--error .calendar-sync__account-info--icon.--animate,
.calendar-sync__account.--error .calendar-sync__account-info .calendar-sync__account-info--icon.--animate {
	animation: none;
}

.calendar-sync__calendar-item--title .calendar-sync__account-info.--sync .calendar-sync__account-info--icon {
	display: block;
}

.calendar-sync__calendar-item--buttons {
	display: flex;
	align-items: center;
	padding: 3px 0;
	overflow: hidden;
}

.calendar-sync__calendar-item_buttons-counter {
	position: absolute;
	top: -3px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 16px;
	border-radius: var(--ui-border-radius-sm);
	color: var(--ui-color-on-primary);
	font-size: var(--ui-font-size-3xs);
	font-weight: var(--ui-font-weight-bold);
	background: #ff5752;
}

.calendar-sync__calendar-item_buttons-error {
	margin-right: 7px;
	margin-left: -7px;
}

.calendar-sync__calendar-item--more {
	display: none;
	overflow: hidden;
	width: 39px;
	height: 39px;
	background: url(/bitrix/js/ui/buttons/icons/images/ui-setting-black.svg?v=1.1) center no-repeat;
	opacity: .5;
	transition: .3s;
}

.calendar-sync__calendar-item.--refused .calendar-sync__calendar-item--more,
.calendar-sync__calendar-item.--error .calendar-sync__calendar-item--more,
.calendar-sync__calendar-item.--error-reconnect .calendar-sync__calendar-item--more,
.calendar-sync__calendar-item.--complete .calendar-sync__calendar-item--more {
	display: block;
	width: 34px;
	height: 26px;
	margin-left: 35px;
}

.calendar-sync__calendar-item--more.--active,
.calendar-sync__calendar-item--more:hover {
	opacity: 1;
	transition: none;
}

[data-role="status-failed"],
[data-role="status-success"] {
	cursor: auto;
	pointer-events: none;
}

.calendar-sync__calendar-item.--error-reconnect [data-role=sync_info_text] {
	line-height: 13px;
	font-size: 11px;
}

.calendar-sync__steps {
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 15px;
}

.calendar-sync__steps--item {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: .4;
	transition: .2s;
}

.calendar-sync__steps--item.--active {
	opacity: 1;
}

.calendar-sync__steps--value {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-bottom: 10px;
	border-radius: 100%;
	background: var(--graphite_alpha_70);
	font: 10px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-semi-bold, 600);
	color: var(--white);
	transition: .2s;
}

.calendar-sync__steps--item.--active .calendar-sync__steps--value {
	background: var(--green);
}

.calendar-sync__steps--title {
	font: 12px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite_alpha_80);
}

.calendar-sync__account {
	display: flex;
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--graphite_alpha_10);
}

.calendar-sync__account-logo {
	display: flex;
	width: 64px;
	max-width: 64px;
	margin-right: 15px;
}

.calendar-sync__account-logo--image {
	display: block;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 64px;
	border-radius: 100%;
	border: 2px solid #3bc8f5;
	background: var(--green_alpha_30) url(../image/calendar_sync__icon-header-logo.svg) 14px 16px no-repeat;
	background-size: 40px;
	box-sizing: border-box;
}

.calendar-sync__account-logo--image.--google {
	background-image: url(../image/calendar-sync__icon-google.svg);
	background-size: 56px;
	background-position: center;
}
.calendar-sync__account-logo--image.--office365 {
	background-image: url(../image/calendar-sync__icon-office365.svg);
	background-size: 54px;
	background-position: center;
}
.calendar-sync__account-logo--image.--icloud {
	background-image: url(../image/calendar-sync__icon-icloud.svg);
	background-size: 56px;
	background-position: center;
}
.calendar-sync__account-logo--image.--yandex {
	background-image: url(../image/calendar-sync__icon-yandex.svg);
	background-size: 21px;
	background-position: 19px 16px;
}
.calendar-sync__account-logo--image.--exchange {
	background-image: url(../image/calendar-sync__icon-ms-exchange.svg);
	background-size: 48px;
	background-position: center;
}

.calendar-sync__account-logo--image.--google,
.calendar-sync__account-logo--image.--office365,
.calendar-sync__account-logo--image.--icloud,
.calendar-sync__account-logo--image.--yandex {
	background-color: var(--graphite_alpha_04);
}

.calendar-sync__content .calendar-sync__content-block {
	padding: 0 15px;
}

.calendar-sync-stages-wrap {
	margin-bottom: 40px;
}

.calendar-sync__account-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	color: #525C69;
	overflow: hidden;
}

.calendar-sync__account-title {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 21px/26px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite);
}

.calendar-sync__account-info {
	display: flex;
	align-items: center;
	font: 10px/23px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-bold, 700);
	color: var(--light-gray);
}

.calendar-sync__account-info-template-reconnection {
	padding-top: 11px;
	line-height: 13px;
}

.calendar-sync__account-desc {
	display: block;
	margin-bottom: 30px;
	font: 15px/20px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite);
}

.calendar-sync__account-info--icon {
	display: block;
	width: 18px;
	height: 18px;
	margin-right: 2px;
	background: url(../image/calendar-sync__icon-refresh.svg) center no-repeat;
}

.calendar-sync__account-info--icon.--animate {
	animation: calendar-sync__account-info--icon-animate 1s linear forwards;
	animation-iteration-count: infinite;
}

@keyframes calendar-sync__account-info--icon-animate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.calendar-sync__account.--complete .calendar-sync__account-info--icon {
	width: 16px;
	height: 12px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.11 5.891l2.19-.001a3.971 3.971 0 00-3.963-3.973c-.98 0-1.876.356-2.568.945L4.645 1.74A5.53 5.53 0 018.337.333c3.064 0 5.548 2.494 5.548 5.558H15.7L12.88 8.7l-2.77-2.809zm-7.321 0H.919l2.766-2.773L6.447 5.89H4.374a3.955 3.955 0 003.963 3.953c.939 0 1.8-.326 2.48-.871l1.125 1.126a5.527 5.527 0 01-3.605 1.331 5.54 5.54 0 01-5.548-5.538z' fill='%23A8ADB4'/%3E%3C/svg%3E");
	animation: none;
}

.calendar-sync__account-check-list.--error,
.calendar-sync__account-check-list.--disabled {
	opacity: .4;
	pointer-events: none;
}

.calendar-sync__account-check-list-label {
	display: flex;
	align-self: center;
	margin-bottom: 24px;
}

.calendar-sync__account-check-list-input {
	margin: 3px 7px 0 0;
}

.calendar-sync__account-check-list-text {
	display: inline-block;
	font: 14px/18px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite);
}

.calendar-sync__account-check-list-label.--disabled {
	pointer-events: none;
}

.calendar-sync__account-check-list-label.--disabled .calendar-sync__account-check-list-text {
	color: var(--light-gray);
}

.calendar-sync__notification {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	background: linear-gradient(0deg, rgba(47, 198, 246, 0.08), rgba(47, 198, 246, 0.08)), #FFFFFF;
	border-radius: 10px;
}

.calendar-sync__error {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	background: linear-gradient(0deg, rgba(243, 37, 55, 0.08), rgba(250, 1, 197, 0.08)), #FFFFFF;
	border-radius: 10px;
}

.calendar-sync__notification-title {
	font: 33px/48px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
	color: var(--gray);
}

.calendar-sync__notification-message {
	text-align: center;
	font: 21px/29px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
	color: var(--graphite_alpha_80);
}
.calendar-sync__notification-message-inner {
	margin-bottom: 10px;
}

.calendar-sync__balloon {
	position: relative;
	margin-bottom: 20px;
	padding: 24px 65px 26px 26px;
	border-radius: 12px;
	box-sizing: border-box;
}

.calendar-sync__balloon.--progress {
	margin-bottom: 30px;
	border: 2px solid #3bc8f5;
	background: #ecfafe;
}

.calendar-sync__balloon.--progress:before,
.calendar-sync__balloon.--done:before {
	content: '';
	position: absolute;
	left: 76px;
	bottom: -13px;
	width: 20px;
	height: 20px;
	border-bottom: 2px solid #3bc8f5;
	border-left: 2px solid #3bc8f5;
	background: #ecfafe;
	transform: rotate(-45deg);
}

.calendar-sync__content-text.calendar-sync__content-title {
	display: block;
	margin-bottom: 5px;
	font: 18px/26px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--gray);
}

.calendar-sync__balloon.--progress .calendar-sync__content-text.--show-for-done,
.calendar-sync__balloon.--done .calendar-sync__content-text.--show-for-progress {
	display: none !important;
}

.calendar-sync__content-text.calendar-sync__content-subtitle {
	display: block;
	font: 16px/24px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite);
}

.calendar-sync__balloon.--progress .calendar-sync__balloon--icon,
.calendar-sync__balloon.--done .calendar-sync__balloon--icon {
	position: absolute;
	top: 18px;
	right: 16px;
	display: block;
	width: 42px;
	height: 42px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='21' cy='21' r='21' fill='%232FC6F6' fill-opacity='.7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.5 10.548h-11c-1.346 0-2.375.953-2.375 2.202v17.646c0 1.174 1.029 2.202 2.375 2.202h11c1.346 0 2.375-1.028 2.375-2.202V12.75c0-1.247-1.029-2.202-2.375-2.202zM21 31.092c-.828 0-1.504-.66-1.504-1.468 0-.808.677-1.468 1.504-1.468s1.504.66 1.504 1.468c0 .808-.677 1.468-1.504 1.468zm5.27-4.002H15.73V13.545h10.541V27.09z' fill='%23fff'/%3E%3C/svg%3E");
}

.calendar-sync__balloon.--done {
	margin-bottom: 30px;
	background: #f9fafc;
	border: 2px solid #c4c4c4;
}

.calendar-sync__balloon.--done .calendar-sync__balloon--icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='21' cy='21' r='21' fill='%239DCF00' fill-opacity='.68'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.512 30.648L9.01 22.363l2.975-2.9 5.526 5.386 12.502-12.185 2.975 2.9-15.477 15.084z' fill='%23fff'/%3E%3C/svg%3E");
}

.calendar-sync__balloon.--done:before {
	border-bottom: 2px solid #c4c4c4;
	border-left: 2px solid #c4c4c4;
	background: #f9fafc;
}

.calendar-sync__balloon.--skeleton {
	padding: 19px 39px 19px 19px;
	border: 2px dashed rgba(82, 92, 105, .1);
	background: rgba(82, 92, 105, .03);
}

.calendar-sync__balloon__skeleton-box {
	margin-bottom: 27px;
}

.calendar-sync__balloon__skeleton-inline-box {
	display: flex;
	align-items: center;
	margin-bottom: 13px;
}

.calendar-sync__balloon__skeleton-circle {
	position: relative;
	display: block;
	margin-right: 13px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--graphite_alpha_06);
	overflow: hidden;
}

.calendar-sync__balloon__skeleton-line {
	position: relative;
	width: 100%;
	max-width: 144px;
	height: 14px;
	border-radius: 12px;
	background-color: var(--graphite_alpha_06);
	overflow: hidden;
}

.calendar-sync__balloon__skeleton-circle:before,
.calendar-sync__balloon__skeleton-line:before {
	content: '';
	display: block;
	position: absolute;
	left: -100%;
	top: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, transparent 0%, #ededed 50%, transparent 100%);
	animation: calendar-sync-skeleton-load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

@keyframes calendar-sync-skeleton-load {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

.calendar-sync__balloon__skeleton-inline-box .calendar-sync__balloon__skeleton-line {
	max-width: 235px;
	height: 18px;
}

.calendar-sync__balloon.--skeleton .calendar-sync__content-text {
	justify-content: center;
	padding: 18px 29px;
	border-radius: 12px;
	background-color: var(--graphite_alpha_06);
	font: 14px/23px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--gray_7);
}

.calendar-sync__balloon.--calendar {
	padding: 20px;
	border: 2px solid #9dcf00;
	background: #fff;
}

.calendar-sync__balloon.--calendar.--fullday-event .calendar-sync__time {
	display: none;
}

.calendar-sync__balloon.--calendar.--fullday-event .calendar-sync__time-notification-box {
	margin-left: 0;
}

.calendar-sync__balloon.--calendar > .calendar-sync__content-text {
	font: 18px/24px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: #333;
}

.calendar-sync__balloon.--calendar > .calendar-sync__content-text span {
	color: var(--gray_7);
}

.calendar-sync__balloon.--calendar > .calendar-sync__content-text:nth-child(2) {
	margin-bottom: 13px;
	font: 16px/24px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--gray_7);
}

.calendar-sync__time {
	display: flex;
	align-items: center;
}

.calendar-sync__time-date {
	display: block;
	margin-right: 3px;
	font: 11px/15px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--light-gray);
}

.calendar-sync__time-line {
	width: 100%;
	height: 1px;
	background-color: #e8e9eb;
	box-sizing: border-box;
}

.calendar-sync__time-notification-box {
	margin-left: 37px;
	padding: 10px;
	min-height: 57px;
	border-radius: 3px;
	background-color: #ecf4d0;
	box-sizing: border-box;
}

.calendar-sync__time-notification-box .calendar-sync__content-text {
	display: block;
	font: 12px/16px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite);
}

.calendar-sync__time-notification-box .calendar-sync__content-text:last-child {
	display: block;
	font: 11px/15px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--light-gray);
}

.calendar-sync__auth-popup--info {
	display: flex;
	align-items: center;
	border-radius: 10px;
	background: rgba(47,198,246,0.1);
	padding: 23px;
	box-sizing: border-box;
}

.calendar-sync__auth-popup--row {
	display: block;
	margin-top: 19px;
}

.calendar-sync__auth-popup--label-text {
	font-size: 13px;
	line-height: 15px;
	color: var(--light-gray);
	margin: 0 0 7px;
}

.calendar-sync__auth-popup--label-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.calendar-sync__auth-error {
	margin-top: 15px;
	margin-bottom: 0;
}

.calendar-sync__auth-popup .popup-window-content {
	padding: 0 10px;
}

.calendar-sync__auth-popup .popup-window-buttons {
	margin: 20px 10px 0;
	padding-top: 15px;
	border-top: 1px solid var(--graphite_alpha_08);
}

.calendar-sync__auth-popup--logo-image {
	display: block;
	width: 58px;
	height: 58px;
	border: 2px solid #edeef0;
	border-radius: 50%;
	background-color: var(--white);
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 2px #2fc6f0;
	flex-shrink: 0;
	margin-right: 20px;
}

.calendar-sync__auth-popup--logo-text {
	font: 17px/24px var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
	color: var(--graphite);
}

.calendar-sync__auth-popup--learn-more {
	font-size: 14px;
	line-height: 15px;
	color: rgba(189,193,198,1);
	border-bottom: 1px dashed rgba(189,193,198,.8);
	cursor: pointer;
	margin-bottom: 4px;
}

.calendar-sync__auth-popup--learn-more:hover {
	color: rgba(189,193,198,1);
	border-bottom: 1px dashed rgba(189,193,198,1);
}

.calendar-sync__auth-popup--label-text.--error{
	transition: opacity 1s ease-out, max-height 1s;
	overflow: hidden;
	opacity: 0;
	max-height: 0;
	margin-top: 5px;
	color: #d0021b;
	margin-bottom: 1px;
	line-height: 17px;

}

.calendar-sync__auth-popup--label-text.--error a {
	color: #d0021b;
	border-bottom: 1px dashed #d0021b;
}

.calendar-sync__auth-popup--label-text.--error.show {
	opacity: 1;
	max-height: 17px;
}

.calendar-sync__alert-popup--text {
	color: var(--graphite);
}

.calendar-sync__alert-popup--text > i {
	display: inline-block;
	margin-top: 7px;
}

.calendar-sync__auth-popup--icon-adjust-password {
	opacity: .78;
	transition: 250ms linear opacity;
	animation: ui-ctl-show-icon 500ms 1;
	cursor: pointer;
	background: url(../image/calendar-sync__icon-password-show.svg) no-repeat center;
}

.ui-ctl-after-icon:hover .calendar-sync__auth-popup--icon-adjust-password {
	opacity: 1;
}

.calendar-sync__auth-popup--icon-adjust-password.--hide {
	background-image: url(../image/calendar-sync__icon-password-hide.svg);
}

.calendar-sync-btn-icon-refused {
	padding-left: 26px;
}

.calendar-sync-btn-icon-refused:after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.356 15.194c.402.28.955.18 1.235-.222L14.518 2.13a.888.888 0 00-.222-1.235l-.375-.26a.887.887 0 00-1.235.222L3.759 13.699a.888.888 0 00.222 1.235l.375.26zM4.892 9.67l-1.2 1.726a6.58 6.58 0 01-1.116-3.68H.343l3.303-3.312 2.891 2.9-.286.411H4.47c0 .698.151 1.36.422 1.956zM13.938 7.715l-1.855.001-.314.452 2.864 2.904L18 7.717h-2.168a6.615 6.615 0 00-1.151-3.738l-1.193 1.716a4.73 4.73 0 01.45 2.02zM7.617 14.142l1.195-1.72a4.713 4.713 0 003.354-1.025l1.345 1.346a6.603 6.603 0 01-4.307 1.59 6.665 6.665 0 01-1.587-.191zM9.542 2.981l1.2-1.725a6.622 6.622 0 00-1.538-.18 6.606 6.606 0 00-4.41 1.68l1.342 1.342a4.714 4.714 0 013.406-1.117z' fill='%23FFE1A6'/%3E%3C/svg%3E");
}

.calendar-sync__disconnect-button-container {
	display: flex;
	justify-content: center;
	padding-top: 20px;
}

.calendar-sync__account-btn .ui-icon-set.--hidden {
	opacity: 0;
}

.calendar-ical-popup-wrapper {
	padding: 0 7px;
	border-bottom: 1px solid #EDEEF0;
}

.calendar-ical-popup-wrapper h3 {
	margin: 7px 0 12px;
}

.calendar-ical-popup-label-text {
	font: 13px/17pxvar(--ui-font-family-primary, var(--ui-font-family-helvetica));
	color: #828B95;
	margin-bottom: 12px;
}

.calendar-ical-popup-link-block {
	word-wrap: break-word;
	margin-bottom: 28px;
	font: 14px/17pxvar(--ui-font-family-primary, var(--ui-font-family-helvetica));
	word-break: break-all;
}