@import url(//fonts.googleapis.com/earlyaccess/opensanshebrew.css);
@import url(//fonts.googleapis.com/earlyaccess/opensanshebrewcondensed.css);
@import url('//fonts.googleapis.com/css2?family=Secular+One&display=swap');

body {
	background-color: var(--bodyBackground);
	color: var(--primary);
}
body, [ctrl=sbpg], .sbpg, input, textarea {
	font-family: "Open Sans Hebrew";
	font-size: 14px;
}
[ctrl=sbpg], .sbpg {
	overflow-x: hidden;
}
[ctrl=sheet].inverted, .sbpg.inverted {
	background: var(--primary);
}
.standard_page {
	max-width: 980px;
	margin: 0 auto;
}

a { color: var(--primary); }
a:hover {
	text-decoration: underline;
	cursor: pointer;
}


/**************************************************************
	SVG
**************************************************************/

svg {
	stroke: var(--svg);
	fill: var(--svg);
}
svg:hover {
	stroke: var(--svgHover);
	fill: var(--svgHover);
}

.svg_wrapper {
	display: inline-block;
	width: 26px;
	height: 26px;
}

.prev_next_arrow .svg_wrapper {
	vertical-align: middle;
	width: 23px;
	height: 39px;
}
.prev_next_arrow.small .svg_wrapper {
	width: 11.5px;
	height: 19.5px;
}

.selected .svg_wrapper svg {
	fill: #00bde0;
}

.svg_wrapper.x_close {
	width: 16px;
	height: 16px;
}

/* .rtl .table_row .btn_row_big_icon { */
	/* margin-right: 50px; */
/* } */
.btn_row_big_icon .svg_wrapper {
	height: 39px;
	width: 45px;
}


/**************************************************************
	Animations
**************************************************************/

.loading_animation {
	display: inline-block;
	width: 33px;
	height: 33px;
}
.loading_animation.small {
	width: 26px;
	height: 26px;
}
.loading_animation:after {
	content: " ";
	display: block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 3px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: loading_animation 1.2s linear infinite;
}
.loading_animation.small:after {
	width: 19px;
	height: 19px;
	border-width: 2px;
}
@keyframes loading_animation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/**************************************************************
	UI Controls
**************************************************************/

/* General controls */

.ui_title {
	padding: 0 20px;
	font-weight: normal;
}
.ui_title.left { float: left }
.ui_title.right { float: right }

[ctrl] .error_message {
	color: var(--error);
	margin-top: 5px;
	font-size: 12px;
	height: 14px;
	text-align: right;
}
.rtl [ctrl] .error_message {
	text-align: left;
}

/* Buttons */

[ctrl=link] { text-decoration: underline; }

[ctrl=button][data-svg]:not(.disabled):hover .svg_wrapper {
	opacity: 0.7;
}

.btn_full {
	margin: 0 auto;
	box-sizing: border-box;
	height: 50px;
	max-width: 500px;
	border: solid 1px var(--primary);
	border-radius: 24px;
	background-color: var(--primary);
	font-weight: bold;
	line-height: 48px;
	color: #000;
	text-align: center;
	cursor: pointer;
	transition: all 0.1s ease;
}
.inverted .btn_full {
	border: solid 1px var(--popupBackground);
	color: #fff;
	background: var(--popupBackground);
}
.btn_full:hover, [ctrl=upload]:hover .btn_full {
	background-color: var(--secondary);
}
.inverted .btn_full:hover:not(:active) {
	background-color: var(--popupBackground);
	opacity: 0.8;
}
.btn_full.active, .btn_full:active {
	background-color: #00bde0;
	color: var(--primary);
}
.btn_full.disabled {
	background-color: var(--disabled);
	color: var(--primary);
}
.btn_full+.btn_full, .popup_body div+.btn_full {
	margin-top: 25px;
}

.btn_link {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
}
.btn_link {
	color: #00bde0;
}
.btn_link:hover { text-decoration: underline; }
.btn_link.btn_red {
	color: #f00;
}

.btn_icon {
	width: 26px;
	height: 26px;
}
.btn_icon svg {
	stroke: none;
	fill: #fff;
}
.btn_icon:hover svg {
	filter: drop-shadow(0 0 3px #fff);
}
.btn_icon .icon_delete svg {
	fill: red;
}
.btn_icon:hover .icon_delete svg { fill: #b20000; }
.btn_icon:active .svg_wrapper svg {
	filter: none;
	fill: #00bde0;
}
.btn_icon.disabled svg { fill: #606890; }


.btn_svg {
	display: inline-block;
}


.btn_round {
	display: inline-block;
}


.btn_std_inline {
	box-sizing: border-box;
	display: inline-block;
	border: 1px solid #fff;
	border-radius: 13px;
	background: var(--darkPrimary);
	width: 138px;
	height: 26px;
	font-size: 12px;
	line-height: 22px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
@media screen and (max-width: 1300px) {
	.btn_std_inline { width: 110px; }
}
.btn_std_inline.error {
	background: #b20000;
}
.btn_std_inline .svg_wrapper {
	float: left;
	position: relative;
	left: -1px;
	top: -1px;
	background: #fff;
	width: 26px;
	height: 26px;
	border-radius: 50%;
}
.btn_std_inline svg, .table_row .btn_std_inline svg {
	fill: var(--darkPrimary);
}
.btn_std_inline:hover {
	background: #fff;
	color: var(--darkPrimary);
}
.btn_std_inline:active, .btn_std_inline:active .svg_wrapper {
	border-color: #00bde0;
	background: #00bde0;
	color: #fff;
}
.btn_std_inline:active svg {
	fill: #fff;
}
.btn_std_inline.disabled {
	background: #606890;
	border-color: #606890;
	color: var(--darkPrimary);
}
.btn_std_inline.disabled svg {
	fill: var(--darkPrimary);
}


.btn_color_circle {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: #fff;
	line-height: 22px;
}
.btn_color_circle.red			{ background-color: #ff0000; }
.btn_color_circle.yellow		{ background-color: #ffff00; }
.btn_color_circle.green			{ background-color: #06f92c; }
.btn_color_circle.blue			{ background-color: #0057f6; }
.btn_color_circle.dark_blue		{ background-color: #102ca0; }
.btn_color_circle.purple		{ background-color: #b11ff5; }
.btn_color_circle.dark_purple	{ background-color: #630098; }
.btn_color_circle.orange		{ background-color: #FF9300; }
.btn_color_circle.gray			{ background-color: #666666; }


.circled {
	width: 18px;
	height: 18px;
	border: 1px solid #182150;
	padding: 3px;
	border-radius: 50%;
	background: #fff;
	font-size: 10px;
	line-height: 16px;
}

.circled > div {
	width: 18px;
	height: 18px;
	border-radius: 50%;
}
.circled.green > div {
	background: #198121; /* green */
}
.circled.red > div {
	background: #f00; /* red */
}

.btn_transparent_popup, .progress_transparent_popup {
	margin: 0 auto;
	border: solid 1px #fff;
	border-radius: 32px;
	width: 450px;
	height: 65px;
	font-size: 30px;
	font-weight: 300;
	line-height: 60px;
}
.btn_transparent_popup {
	box-sizing: border-box;
	transition: all 0.1s ease;
}

.btn_primary {
	background-color: #00bde0;
	color: #000;
}

.btn_secondary {
	background-color: rgba(0, 189, 224, 0.31);
	color: #fff;
}


.rect_buttons_panel {
	visibility: hidden;
	position: absolute;
	z-index: 1000;
	height: 82px;
	background: #000;
	opacity: 0;
}


/* Button panels */

.btn_rect_bottom_svg {
	position: relative;
	display: inline-block;
	margin: 14px 10px;
	height: 54px;
	min-width: 79px;
	font-size: 12px;
	text-align: center;
}
.btn_rect_bottom_svg:hover {
	opacity: 0.7;
}
.btn_rect_bottom_svg.active, .btn_rect_bottom_svg:active {
	opacity: 1;
	color: #00bde0;
	cursor: default;
}
.btn_rect_bottom_svg.active svg, .btn_rect_bottom_svg:active svg {
	fill: #00bde0;
}
.btn_rect_bottom_svg.disabled {
	opacity: 1;
	color: #c8ceec;
	cursor: default;
}
.btn_rect_bottom_svg.disabled svg {
	fill: #c8ceec;
}
.btn_rect_bottom_svg.selected {
	opacity: 1;
	color: #00bde0;
	cursor: default;
}
.btn_rect_bottom_svg.hidden { display: none !important; }

.btn_rect_bottom_svg .svg_wrapper {
	width: 46px;
	height: 39px;
}

.btn_rect_bottom_svg .icon_cancel, .btn_rect_bottom_svg .icon_recover,
.btn_rect_bottom_svg .icon_ok, .btn_rect_bottom_svg .icon_circled_delete { width: 23px; }
.btn_rect_bottom_svg .icon_change_photo { width: 38px; }
.btn_rect_bottom_svg .icon_swap_photos { width: 32px; }
.btn_rect_bottom_svg .icon_download { width: 26px; }
.btn_rect_bottom_svg .icon_set_theme, .btn_rect_bottom_svg .icon_set_background,
.btn_rect_bottom_svg .icon_unset_background { width: 33px; }
.icon_orientation_landscape { width: 28px; height: 28px; }
.icon_orientation_portrait { width: 20px; height: 28px; }
.btn_rect_bottom_svg .icon_client_download { width: 49px; }
.btn_rect_bottom_svg .icon_share_photo { width: 32px; }
.selected:hover .svg_wrapper { opacity: 1; }

.btn_rect_bottom_svg .svg_wrapper.opener_right_arrow {
	position: absolute;
	top: 0;
	left: 16.5px;
	width: 26.083px;
	height: 26.083px;
	transition: transform 0.2s ease;
}
.btn_rect_bottom_svg:not(.disabled):hover .svg_wrapper.opener_right_arrow {
	transform: rotate(45deg);
}
.btn_rect_bottom_svg:not(.disabled):active .svg_wrapper.opener_right_arrow,
.btn_rect_bottom_svg.selected .svg_wrapper.opener_right_arrow { transform: rotate(90deg); }
.rtl .btn_rect_bottom_svg .svg_wrapper.opener_right_arrow { transform: rotate(180deg); }
.rtl .btn_rect_bottom_svg:not(.disabled):hover .svg_wrapper.opener_right_arrow { transform: rotate(135deg); }
.rtl .btn_rect_bottom_svg.selected .svg_wrapper.opener_right_arrow { transform: rotate(90deg); }


/* Radio Buttons / Checkboxes */

.cb_radio_ctrl {
	margin: 20px 0;
	font-weight: 300;
}

.cb_radio_ctrl .svg_wrapper {
	width: 30px;
	height: 30px;
}

[ctrl=radio_buttons] .cb_radio_ctrl { margin-top: 10px; }
[ctrl=radio_buttons].grid_layout .grid_column {
	display: inline-block;
	cursor: pointer;
}
[ctrl=radio_buttons].grid_layout .grid_column_3 { width: 33%; }
[ctrl=radio_buttons].grid_layout .grid_column img { max-width: 100%; }

.cb_radio_ctrl > div {
	border: solid 2px var(--primary);
	background-color: var(--primary);
}
.popup.inverted .cb_radio_ctrl > div {
	border-color: var(--popupBackground);
	background-color: var(--popupBackground);
}
.cb_radio_ctrl.error, .cb_radio_ctrl.error a {
	color: var(--error);
	font-weight: bold;
}
.cb_radio_ctrl:hover > div, .grid_column:hover .cb_radio_ctrl > div { border-color: #3346a9; }
.cb_radio_ctrl.error > div { border-color: var(--error); }
.cb_radio_ctrl.disabled > div {
	border-color: var(--primary);
	background-color: var(--disabled);
}
.cb_radio_ctrl svg {
	stroke: none;
	fill: var(--darkPrimary);
}
.popup.inverted .cb_radio_ctrl svg {
	fill: var(--primary);
}
.cb_radio_ctrl:not(.checked) svg, .popup.inverted .cb_radio_ctrl:not(.checked) svg { fill: none; }
[ctrl=radio_buttons] .svg_wrapper { border-radius: 50%; }
[ctrl=radio_buttons] .cb_radio_ctrl.checked .svg_wrapper { background: var(--selected); }
[ctrl=checkbox] .svg_wrapper { border-radius: 8px; }

.cb_radio_ctrl > span {
	margin-left: 20px;
}
.rtl .cb_radio_ctrl > span {
	margin-left: 0;
	margin-right: 10px;
}


.cb_round {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 23.55px;
	height: 23.55px;
	border-radius: 50%;
	background: #000;
}
.cb_round .svg_wrapper {
	position: relative;
	width: 24.28334px;
	height: 23.51666px;
}
.cb_round.checked .round_check, .cb_round:hover .round_check,
.cb_round:not(.checked):not(:hover) .round_check_v { display: none; }

.cb_round.checked .svg_wrapper svg { fill: #198121; }
.cb_round.checked:hover .svg_wrapper { opacity: 0.7; }


/* Progress Bar */

[ctrl=progress] {
	box-sizing: border-box;
	overflow: hidden;
}

.progress_full {
	border: 1px solid #ccc;
	border-radius: 25px;
	background: #fff;
	width: 100%;
	height: 50px;
	color: #182150;
	line-height: 48px;
	font-weight: bold;
}
.progress_full .progress_text {
	line-height: 52px;
}

.progress_inline {
	width: 138px;
	height: 26px;
	border: 1px solid #fff;
	border-radius: 13px;
	background: #182150;
	font-size: 12px;
	line-height: 22px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.progress_narrow_inline {
	display: inline-block;
	border: 1px solid #ccc;
	width: 250px;
	height: 13px;
	background: #fff;
}
.progress_narrow_inline:hover {
	background: #ccc;
}
.progress_narrow_inline .progress_bar {
	transition: width 0.5s linear;
	background: #6eeb6e;
}
.progress_narrow_inline:hover .progress_bar {
	background: #54bd54;
}
.progress_narrow_inline .progress_text {
	font-size: 12px;
	line-height: 100%;
	color: #000;
}

/* Textboxes */

[ctrl=textbox] .input_container {
	margin-top: 10px;
	box-sizing: border-box;
	height: 50px;
	padding: 10px 20px;
}

[ctrl=textbox][data-type=multiline] .input_container {
	height: 132px;
}
.input_container {
	border: solid 1px var(--primary);
	border-radius: 25px;
	background-color: var(--primary);
	color: var(--darkPrimary);
}
.popup.inverted .input_container {
	border: solid 1px var(--popupBackground);
	/* background-color: var(--popupBackground); */
}
input, textarea {
	background-color: var(--primary);
	color: var(--darkPrimary);
}
/*.popup.inverted input, textarea {
	background-color: var(--popupBackground);
	color: var(--primary);
}*/
input::placeholder, textarea::placeholder { color: var(--uiActive); }
input::selection {
	background-color: var(--darkPrimary);
	color: var(--primary);
}
input::-moz-selection {
	background-color: var(--darkPrimary);
	color: var(--primary);
}
/* .input_container:hover, .input_container:hover input, .input_container:hover textarea, */

/*
[ctrl=text].focused .input_container, [ctrl=text] :focus {
	background-color: var(--secondary);
}
[ctrl=text].disabled .input_container {
	background-color: var(--disabled);
	color: var(--primary);
}
[ctrl=text].error .input_container { border-color: var(--error); }
[ctrl=text].error .error_message {
	font-size: 14px;
	font-style: italic;
	color: var(--primary);
}*/

/* Dropdown */

[ctrl=dropdown] .input_container {
	margin-top: 10px;
	/* height: 50px; */
	padding: 10px 20px 0;
	border-radius: 25px;
	line-height: 30px;
}
[ctrl=dropdown].active .input_container {
	background-color: var(--secondary);
}

[ctrl=dropdown] .svg_wrapper {
	float: right;
	margin-top: 12px;
	width: 10px;
	height: 20px;
}
.rtl [ctrl=dropdown] .svg_wrapper {
	float: left;
}

[ctrl=dropdown] .svg_wrapper svg {
	stroke: var(--darkPrimary);
	fill: var(--darkPrimary);
}

.dropdown_values {
	display: none;
	margin-top: 10px;
	overflow: hidden;
	/* border-top: 1px solid var(--primary); */
	/* transition: height 0.4s linear; */
}

.dropdown_values .option {
	border-top: 1px solid var(--primary);
	padding: 6px 0;
	color: var(--darkPrimary);
	font-weight: 300;
	cursor: pointer;
}
.dropdown_values .option:hover {
	color: #000;
}
[ctrl=dropdown] .selected {
	color: var(--darkPrimary) !important;
	font-weight: bold;
	cursor: default;
}
.dropdown_chosen {
	margin-bottom: 10px;
}
[ctrl=dropdown] .dropdown_chosen.selected {
	cursor: pointer;
}
.dropdown_values .option.disabled {
	color: #3346a9;
	cursor: default;
}


/**************************************************************
	Scroller
**************************************************************/

.track {
	display: none;
	right: 15px;
	background-color: #3346a9;
	border-radius: calc(var(--scrollerWidth) / 2);
	width: var(--scrollerWidth);
	overflow: hidden;
}
.rtl .track {
	left: 15px;
}
.carriage {
	background-color: var(--secondary);
	border-radius: calc(var(--scrollerWidth) / 2);
}
.mobile_device .track { visibility: hidden; } 


/**************************************************************
	Kinetic (horizontal) scroller
**************************************************************/

[ctrl=kinetic] { white-space: nowrap; }


/**************************************************************
	Tooltip
**************************************************************/

#tooltip {
	border-radius: 10px 0 10px 10px;
	z-index: 100000;
	background: #d9dadf;
	padding: 11px 9px;
	max-width: 800px;
	word-break: break-all;
	color: var(--bodyBackground);
	box-shadow: 0px 0px 5px 0px #444;
}
#tooltip.to_right {
	border-radius: 0 10px 10px 10px;
}
#tooltip.to_top {
	border-radius: 10px 10px 0 10px;
}
#tooltip.to_right.to_top {
	border-radius: 10px 10px 10px 0;
}
#tooltip .thumb { height: 120px; }


/**************************************************************
	Dialogs
**************************************************************/

.popup_background.darken {
	opacity: 0.7;
	background-color: var(--bodyBackground);
}

#dialog_body {
	margin-bottom: 50px;
	/* word-break: break-all; */
}
.inverted #dialog_body { margin-bottom: 0; }
.overall #dialog_body { height: 100%; }
#dialog_body iframe {
	width: calc(100% - 4px);
	height: 100%;
}


/**************************************************************
	Menu
**************************************************************/

.menu_background, .menu {
	display: none;
	z-index: 100000;
}
.menu {
	display: none;
	position: fixed;
	border-radius: 8px;
	/* box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.56); */
	box-shadow: 0px -1px 9px 1px #444;
	overflow: hidden;
}

.menu [ctrl=scrollable], .menu [ctrl=scrollable]>.scroll_container {
	background: #c8ceec;
	max-height: calc(100vh - 90px);
}
.menu_body { background: #c8ceec; }
.menu [ctrl=scrollable]>.track { background-color: #aeb5d3; }
.menu [ctrl=scrollable] .carriage { background-color: #8e95b9; }
[ctrl=menu] [ctrl=scrollable]>.track { background-color: #aeb5d3; }
[ctrl=menu] [ctrl=scrollable] .carriage { background-color: #8e95b9; }

.menu_line {
	height: 30px;
	padding: 3px 12px 3px 9px;
	font-size: 20px;
	font-weight: 300;
	color: #000;
	cursor: pointer;
}
.menu_line.selected {
	font-weight: bold;
}
.menu_line:hover {
	background: #b1b7d2;
}
.menu_line.delete {
	margin: 0 50px;
	border-radius: 8px;
	background: red;
	color: white;
}
.menu_button { text-align: center; }

.menu_line .plus_icon svg, .menu_line .icon_v svg {
	stroke: #000;
	fill: none;
}

.menu_line b {
	background: #9ea6d3;
	font-weight: inherit;
}


/**************************************************************
	Page Structures
**************************************************************/

/* Header */

.header {
	position: relative;
	box-sizing: border-box;
	padding: 16px 10px;
	border-bottom: 2px solid #fff;
	height: 70px;
	font-size: 14px;
	font-weight: 300;
}
.header.client_header {
	text-align: center;
	font-size: 20px;
	font-weight: 300;
	padding: 0;
	line-height: 70px;
}
.mobile_device .header.client_header {
	height: 50px;
	line-height: 50px;
}

.header #back_button {
	position: absolute;
	top: 27px;
	left: 20px;
	line-height: 16px;
}
.rtl .header #back_button {
	left: auto;
	right: 20px;
	rotate: 180deg;
}
.popup_mode .header:not(.no_blur), .popup_mode [ctrl=sheet]:not(.no_blur) {
	filter: blur(3px);
}
.popup_mode .header.above_popup { z-index: 1000000; }

.svg_wrapper.icon_back {
	width: 16px;
	height: 16px;
}
.disabled .svg_wrapper.icon_back svg {
	stroke: #c8ceec;
	fill: #c8ceec;
}

.header_buttons {
	position: absolute;
	left: 10%;
	right: 10%;
	text-align: center;
	top: 0;
	height: 100%;
}

.header .btn_rect_bottom_svg {
	margin-top: 4px;
}

.header .btn_rect_bottom_svg .svg_wrapper {
	height: 34px;
}
.header .btn_rect_bottom_svg .svg_wrapper.icon_approve_print {
	height: 39px;
	position: relative;
	top: 6px;
}

#user_title {
	position: absolute;
	top: 8px;
	left: 46px;
	font-size: 20px;
	font-weight: bold;
}
#path {
	position: absolute;
	top: 40px;
	left: 46px;
	/* display: inline-block; */
}
.rtl #user_title, .rtl #path {
	left: auto;
	right: 46px;
}

#path div { display: inline-block; }
#path div::before {
	display: inline-block;
	margin: 0 10px;
	content: " | ";
}
#path div:first-child::before {
	margin: 0;
	content: "";
}
/*#path div:last-child a:hover {
	text-decoration: none;
	cursor: default;
}*/

#header_right {
	position: absolute;
	top: 16px;
	right: 20px;
	line-height: normal;
}
.rtl #header_right {
	right: auto;
	left: 20px;
}

.header #profile {
	margin: 0 15px;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
.header .profile_icon svg {
	stroke: #fff;
	fill: #fff;
}

.header .albumaid_logo {
	width: 105px;
	height: 34px;
	vertical-align: middle;
}

@media screen and (max-height: 600px) {
	.header { height: 40px; }
	.header.client_header { line-height: 40px; }

	#user_title {
		top: 4px;
		left: 26px;
	}
	.rtl #user_title {
		right: 26px;
	}
	#path {
		top: 9px;
		left: 190px;
	}
	.rtl #path {
		right: 250px;
	}
	.header .albumaid_logo {
		transform: scale(80%);
		top: -14px;
	}
	.header #profile {
		position: relative;
		top: -14px;
	}

	[ctrl=sheet] { height: calc(100% - 40px); }
}

/*
 * Anonymous pages header
 */

.anon_header {
	height: 70px;
	color: var(--bodyBackground);
	background: #fff;
	text-align: center;
	direction: rtl;
}
.anon_header h2 {
	font-size: 40px;
	font-weight: bold;
	line-height: 43px;
}
.anon_header h3 {
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
	color: #325e57;
}

@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
	.anon_header h2 {
		font-size: 20px;
	}
}

/* high title */

.big_title_wrapper {
	position: relative;
	height: 112px;
	background-color: var(--tableHeader);
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	line-height: 112px;
}

.big_title_wrapper .buttons {
	position: absolute;
	top: 0;
	left: 58px;
}
.big_title_wrapper .buttons svg {
	fill: #fff;
}
.big_title_wrapper .buttons .svg_wrapper:hover svg {
	fill: var(--secondary);
}


/* Body */

.vertical_mobile {
	display: none;
	text-align: center;
}
.vertical_mobile svg {
	margin-top: 30px;
	height: 150px;
}
/* .mobile_device */
/* @media screen and (max-width: 480px), screen and (max-device-width: 480px) {} */
.no_vertical_mobile { }

@media screen and (orientation:portrait) and (max-width: 700px) {
	.vertical_mobile { display: block; }
	.no_vertical_mobile { display: none; }
}

.white_background { background: #fff; }
.white_background .loading_animation:after {
	border-color: var(--darkPrimary) transparent var(--darkPrimary) transparent;
}

.red_background { background: #b20000; }

.sheet_full { max-height: 100%; }
.sheet_full_minus_footer { max-height: calc(100% - 100px); }

.message_sheet {
	color: #fff;
	text-align: center;
}
.rtl .message_sheet {
	direction: rtl;
}
.rtl .ltr { direction: ltr; }
.rtl .ltr_right { direction: ltr; text-align: right; }

.big_title {
	margin-top: 100px;
	padding: 30px;
	font-size: 30px;
	font-weight: bold;
	line-height: 200%;
}
.small_title {
	padding: 20px;
	line-height: 200%;
	font-size: 20px;
	font-weight: 300;
}

.important_message {
	position: absolute;
	top: 10px;
	left: calc(50% - 190px);
	width: 380px;
	/* height: 20px; */
	border-radius: 3px;
	color: var(--bodyBackground);
	background-color: yellow;
	text-align: center;
}
.important_message a {
	color: red;
}
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
.important_message {
	left: calc(50% - 140px);
	width: 280px;
	z-index: 1000000;
}
.important_message a {
	display: block;
	width: 80px;
	margin: 5px auto;
	padding: 5px;
	text-decoration: none;
	border-radius: 3px;
	background: red;
	color: white;
}
}

.important_message.delay_animate {
	animation: 1.5s bounce;
	animation-delay: 15s;
	animation-fill-mode: forwards;
	visibility: hidden;
	top: 72px;
	z-index: 100000;
}
@keyframes bounce {
	0%{transform:translateY(-72px) scale(0.5);animation-timing-function:ease-in;opacity:0;visibility: visible}
	38%{transform:translateY(0);animation-timing-function:ease-out;opacity:1;visibility: visible}
	55%{transform:translateY(-9.36px);animation-timing-function:ease-in}
	72%,90%,to{transform:translateY(0);animation-timing-function:ease-out;opacity:1;visibility: visible}
	81%{transform:translateY(-4px);animation-timing-function:ease-in}
	95%{transform:translateY(-1.15px);animation-timing-function:ease-in}
}


/*
 * Dashboard tables
 */

/* Table elements */

/* Show/hide triangle */
.svg_wrapper.show_hide_triangle {
	width: 19px;
	height: 19px;
	margin-right: 10px;
	fill: #aaa;
}
.svg_wrapper.show_hide_triangle svg {
	fill: var(--secondary);
	transition: all 0.3s;
}
.rtl .svg_wrapper.show_hide_triangle svg { transform: rotate(180deg) translate(8px, 0); }
.extended .svg_wrapper.show_hide_triangle svg { transform: rotate(90deg) translate(4px,4px); }

/* Sorting triangle element */
.svg_wrapper.sort_triangle {
	visibility: hidden;
	width: 13px;
	height: 6px;
	margin-left: 5px;
	position: relative; top: -1px;
}
.rtl .svg_wrapper.sort_triangle {
	margin-left: 0;
	margin-right: 5px;
}

/* Add item element */
.svg_wrapper.big_plus {
	width: 39px;
	height: 39px;
	border-radius: 50%;
	background: #fff;
	stroke: #333;
}
.svg_wrapper.big_plus svg {
	stroke: var(--darkPrimary);
	fill: var(--darkPrimary);
}

/* Table structure */

.left_bar {
	float: left;
	width: 70px;
	height: 100%;
	padding: 0 10px;
	/* background: #0a2421; */
	background: var(--tableHeader);
	text-align: center;
	font-size: 12px;
}
.rtl .left_bar { float: right; }

.left_bar_header {
	font-weight: bold;
	line-height: 25px;
	border-bottom: 1px solid #f0f2f7;
}

.left_bar .bar_status_box {
	padding: 9px 0 6px;
	font-weight: 300;
	color: #ffffff;
}
.left_bar .bar_status_box:not(:last-child) {
	border-bottom: 1px solid #506262;
}
.left_bar .bar_status_box:last-child div { margin-bottom: 12px; }

.left_bar .btn_color_circle {
	display: inline-block;
}

.right_of_left_bar { margin-left: 90px; }
.rtl .right_of_left_bar { margin-left: 0; margin-right: 90px; }


.table_header, .table_row {
	font-size: 14px;
	font-weight: bold;
}
.table_header {
	height: 24px;
	background-color: var(--tableHeader);
	border-bottom: 1px solid var(--tableEven);
	line-height: 22px;
}
.table_header > *, .table_row > * {
	display: inline-block;
	margin-left: 20px;
	vertical-align: middle;
}
.rtl .table_header > *, .rtl .table_row > * {
	margin-right: 20px;
	margin-left: 0;
}

.table_w_header { max-height: calc(100% - 25px); }
.table_w_header_add { max-height: calc(100% - 25px - 91px); }
.table_w_header_add_big_title { max-height: calc(100% - 112px - 88px - 25px - 91px); }
.table_w_anon_header { max-height: calc(100% - 82px); }

.sortby { cursor: pointer; }

/* Columns */

.row_opener { width: 35px; }
.column_normal { width: 150px; }
.album_index { width: 30px; }
.album_round_image { width: 100px; }
.album_ts { width: 80px; }
.album_id { width: 105px; }
.album_invoice { width: 55px; }
.album_user { width: 120px; }
.album_name { width: 150px; }
.album_client { width: 150px; }
.album_class { width: 120px; }
.album_order { width: 100px; }
.album_size { width: 80px; }
.album_cover { width: 80px; }
.album_copies { width: 80px; }
.album_stat_age { width: 80px; }
.album_stat_label { width: 160px; }
.table_cell.clickable {
	cursor: pointer;
	text-decoration: underline;
}

.round_status_column { width: 60px; }
.checkbox_column { width: 40px; }
@media screen and (max-width: 1530px) {
.table_header > *, .table_row > * { margin-left: 10px; }
.rtl .table_header > *, .rtl .table_row > * { margin-right: 10px; }
.album_ts { width: 75px; }
.album_name { width: 100px; }
.album_class { width: 70px; }
.album_order { width: 90px; }
.album_stat_label { width: 70px; }
}
@media screen and (max-width: 800px) {
.column_normal { width: 90px; }
.column_4_squeeze { width: calc(100% - 325px);}
}
@media screen and (max-width: 375px) {
.column_normal { width: 75px; }
.column_4_squeeze { width: calc(100% - 280px); }
}

.table_cell_wrapper {
	text-align: center;
}

.table_cell .btn_color_circle {
	display: inline-block;
	vertical-align: middle;
}

.table_row .autohide {
	transition: all 0.3s;
	overflow: hidden;
}
.table_row:not(:hover) .autohide {
	visibility: hidden;
	opacity: 0;
	height: 0;
}

.table_cell_txt {
	visibility: hidden;
	height: 0;
	font-size: 12px;
	opacity: 0;
	transition: all 0.3s;
	overflow: hidden;
}
.table_row:hover .table_cell_txt {
	visibility: inherit;
	margin-top: 5px;
	height: 17px;
	opacity: 1;
}

.table_row {
	height: 88px;
}
.table_row:before {
	/* Helps aligning all cells in row */
	display: inline-block;
	vertical-align: middle;
	width: 0px;
	line-height: 88px;
	visibility: hidden;
	content: "|";
}
.table_row:nth-child(even) { background: var(--tableEven); }
.table_row:nth-child(odd), .table_row.table_row_odd { background: var(--tableOdd); }

/* .table_cell:first-child { */
	/* line-height: 88px; */
/* } */
.table_row .svg_wrapper svg {
	vertical-align: middle;
	/* fill: #fff; */
}
.table_row .svg_wrapper:hover svg {
	/* fill: var(--secondary); */
}
.table_row .btn_round .svg_wrapper {
	background: #fff;
	border-radius: 50%;
}
.table_row .btn_round .svg_wrapper:hover {
	background: var(--secondary);
}
.table_row:nth-child(even) .btn_round svg { stroke: var(--tableEven); fill: var(--tableEven); }
.table_row:nth-child(odd) .btn_round svg, .table_row.table_row_odd .btn_round svg { stroke: var(--tableOdd); fill: var(--tableOdd); }

.table_row.extended { height: auto; }
.table_row > .status_details {
	display: none;
}
.table_row.extended .status_details {
	display: block;
	margin-top: -15px;
	padding-bottom: 20px;
}
.stage {
	line-height: 1.36;
	font-weight: 300;
}
.stage > div {
	vertical-align: bottom;
}
.stage_name {
	display: inline-block;
	margin-left: 90px;
	width: 200px;
}

/* Under table bar */

.under_table {
	padding: 24px 29px;
}
.under_table svg {
	stroke: var(--bodyBackground);
}

/* Bottom Floating Button */

.button_space_filler {
	width: 100%;
	height: 100px;
}

.floating_button {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	height: 80px;
	padding: 15px 42px;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.floating_background {
	background-color: #0d1229;
	opacity: 0.8;
}

.floating_button [ctrl=button] {
	/* margin: 0; */
	position: relative;
	z-index: 1;
}

/* Footer */

.sticky_footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100px;
	background: #000;
	z-index: 100;
}

/* Popup */

.popup {
	position: relative;
	background: var(--popupBackground);
	width: 400px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	text-align: left;
}
.popup.wide {
	width: 600px;
	max-width: calc(100% - 20px);
}
.popup.overall {
	width: 1200px;
	max-width: calc(100% - 20px);
	height: calc(100% - 10px);
}
.rtl .popup { text-align: right; }
.popup.inverted {
	background: white;
	color: var(--popupBackground);
}

.popup.inverted a { color: var(--darkPrimary); }

.popup.inverted .svg_wrapper.x_close svg {
	fill: var(--popupBackground);
}
.popup.error .btn_full:hover {
	background-color: #ed8686;
}
.popup.error .btn_full.active, .popup.error .btn_full:active {
	background-color: #600909;
}

.popup.inverted svg {
	fill: var(--popupBackground);
}

@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
.popup {
	width: 240px;
}
}
.popup.error { background: #b20000; }
.popup_header {
	box-sizing: border-box;
	height: 56px;
	border-bottom: 2px solid #fff;
	padding: 19px 19px 0 23px;
	font-size: 14px;
	font-weight: bold;
}
.inverted .popup_header {
	border-bottom-color: var(--popupBackground);
}
.popup_close {
	float: right;
}
.rtl .popup_close { float: left; }
.popup_close svg {
	fill: #fff;
}
.popup_close .svg_wrapper:hover svg {
	fill: var(--secondary);
}

.popup_body_scrollable, .popup_body_scrollable .scroll_container {
	max-height: calc(100vh - 200px);
}

.popup:not(.overall) .popup_body {
	padding: 25px 42px;
}
.popup.overall .popup_body { height: calc(100% - 56px); }
.popup_submit {
	margin-top: 140px;
}
.popup .btn_full, /*.popup .cb_radio_ctrl*/ { margin: 20px 0; }

.popup_above_body {
	display: none;
	position: absolute;
	top: 72px; bottom: 0;
	left: 20px; right: 20px;
}
.uploading_now .popup_body {
	opacity: 0.5;
	filter: blur(3px);
}
.uploading_now .popup_above_body {
	display: block;
}
.uploading_now .popup_close, .uploading_now .not_when_uploading { display: none; }

.popup_above_body .progress_full {
	position: absolute;
	top: calc(50% - 25px);
	left: 0;
}

.progress_bar {
	background: #00bde0;
}
.secondary .progress_bar {
	background: #00bde04f; /*rgba(0, 189, 224, 0.31);*/
}


/* Raised layout */

.raised_layout {
	position: absolute;
	border: 3px solid #fff;
	border-radius: 3px;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8);
}

.raised_layout_item {
	position: relative;
	margin: 3px;
	text-align: left;
	transition: 0.4s;
}
.rtl .raised_layout_item {
	text-align: right;
}
.raised_layout_item.dragged {
	z-index: 50;
	transition: none;
}

.raised_layout_item > div {
	display: inline-block;
	vertical-align: middle;
}
.raised_layout_item > .raised_layout_container {
	border: solid 3px #707070;
}

.raised_layout .btn_round {
	display: block;
	visibility: hidden;
	margin: 6px 10px;
	width: 20px;
	height: 20px;
	/* background: #fff; */
	/* border-radius: 50%; */
	font-size: 0;
	cursor: pointer;
}
.edit_mode .raised_layout:hover .btn_round { visibility: inherit; }
.raised_layout .btn_round:not(:active):hover { opacity: 0.7; }

.raised_layout .svg_wrapper.icon_trash {
	width: 12.45px;
	height: 14.15px;
}
.raised_layout .svg_wrapper.icon_plus {
	width: 15px;
	height: 15px;
}
.raised_layout .svg_wrapper.icon_drag {
	width: 14.259px;
	height: 11.7675px;
}

.raised_layout .btn_round svg { fill: #fff; }
.raised_layout .btn_round:active svg { fill: #00bde0; }
.raised_layout .icon_trash svg { fill: red; }
.raised_layout .icon_trash:active svg { fill: #f00; opacity: 0.5; }

#approve_printing_popup { width: 700px; max-width: calc(100% - 30px); }

.pages_picker { margin-bottom: 20px; }
.pages_picker .raised_layout_container {
	direction: ltr;
	position: relative;
	width: calc(100% - 43px);
	border-color: var(--popupBackground);
}
.pages_picker .prev_next_arrow:not(.rotate_180) { margin-left: 7px; }
.pages_picker .prev_next_arrow.rotate_180 { margin-right: 7px; }
.pages_picker .cb_round {
	top: 10px;
	right: 25px;
	z-index: 1000;
	width: 33.55px;
	height: 33.55px;
	cursor: pointer;
}
.pages_picker .cb_round svg {
	width: 34.283px;
	height: 33.517px;
	fill: var(--primary);
}


/* Profile balloon */

#profile_balloon {
	position: absolute;
	top: 50px;
	right: 130px;
	border-radius: 5px;
	padding: 7px 12px;
	background: #ffffff;
	box-shadow: 0 0 3px 0 #ffffff;
	font-size: 12px;
	color: #000;
}
.rtl #profile_balloon {
	right: auto;
	left: 130px;
}
#profile_balloon a {
	color: #000;
	line-height: 170%;
}
#profile_balloon .btn_link { color: #000; }
#profile_balloon .btn_link:hover { color: #00bde0; }

#profile_name {
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}


/**************************************************************
	Specific pages: Album-view page
**************************************************************/

/* General + spread view */

#album_view_page .sbpg {
	/* Necessary for replace-row animation w/o showing scroll bar */
	overflow: hidden;
}

#turn_mobile_popup {
	transform: rotate(90deg);
	left: calc(50% - 110px);
	width: 220px;
	top: 180px;
	background: var(--error);
	height: 70px;
	font-size: 20px;
	line-height: 70px;
}

#album_centerer {
	position: absolute;
	top: 70px;
	height: calc(100% - 100px);
	left: 70px;
	right: 70px;
}
#album_centerer.animated {
	transition: 0.4s;
}
.image_replace #album_centerer {
	height: calc(100% - 340px);
}

:root {
	--spreadRatio: 2;
}

#album_spread_wrapper {
	position: relative;
	direction: ltr;
	/* vh is 1% of the height of the viewport */
	width: calc(100vw - 200px);
	max-width: calc(100vh * var(--spreadRatio) - 220px * var(--spreadRatio));
	height: calc(100vh - 220px);
	max-height: calc(100vw / var(--spreadRatio) - 200px / var(--spreadRatio));
}
.image_replace #album_spread_wrapper {
	/* (no change) width: calc(100vw - 140px); */
	max-width: calc(100vh * var(--spreadRatio) - 440px * var(--spreadRatio));
	height: calc(100vh - 440px);
	/* (no change) max-height: calc(50vh - 70px); */
}
.animated #album_spread_wrapper {
	transition: 0.4s;
}

.spread_canvas {
	background: #fff;
	overflow: hidden;
}
.spread_canvas.black {
	background: #000;
}

.spread_canvas .container {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	background: #eee;
	z-index: 30;
	transform-origin: 0 0;
}
.spread_canvas .container.background { z-index: 20; }
.spread_canvas .container.background.edited_container {
	z-index: 40;
	mask-image: none !important;
	-webkit-mask-image: none !important;
}
.spread_canvas .container.background_blurred {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
}
.container.shadow,
#album_spread.classic .container:not(.background):not(.background_blurred):not(.no_divider) {
	border: 1px solid #fff;
	box-shadow: 0 0 3px #000;
}
/* kindergartents */
.spread_canvas .container.fixed_src { background: transparent; }

.spread_canvas .container.background_blurred:not(.lamblur) img {
	filter: blur(150px);
}
.spread_canvas .container img {
	display: none;
}
/* kindergartents */
.spread_canvas .container.fixed_src img {
	display: block;
	max-width: 100%;
	max-height: 100%;
}
.container.txt svg {
	position: absolute;
	left: 0; top: 0;
	stroke: none;
	fill: #000;
}
.spread_canvas.black .container.txt svg {
	fill: #fff;
}
.spread_canvas .container.decoration { pointer-events: none; }
.spread_canvas .container.decoration svg {
	stroke: none;
}
.container .half_size {
	position: absolute;
	left: 25%;
	top: 25%;
	height: 50%;
	width: 50%;
	overflow: hidden;
	outline: 1px solid #0f0;
}

.edit_mode:not(.edit_single):not(.swap_photos):not(.add_photos):not(.select_delete):not(.client_theme) #album_spread .container:not(.non_editable):hover,
.edit_mode.swap_photos #album_spread .container:not(.non_editable):not(.edited_container):not(.background_blurred):hover {
	cursor: pointer;
	outline: 2px dashed #182150;
}
.edit_mode.swap_photos #album_spread.teamdesigner .container.background:not(.non_editable):not(.edited_container):hover {
	cursor: default;
}
.edit_mode.edit_single .container, .edit_mode.swap_photos .container.edited_container {
	background: black;
	cursor: default;
}
.edit_mode.edit_single .container img, .edit_mode.swap_photos .container.edited_container img { opacity: 0.3; }
.edit_mode.edit_single:not(.swap_edit) .container.edited_container,
.edit_mode.edit_single.swap_edit .container.swapped_container,
.edit_mode.edit_single.swap_edit_2nd .container.edited_container {
	outline: 2px solid #182150;
}
.edit_mode.edit_single:not(.swap_edit) .container.edited_container img,
.edit_mode.edit_single.swap_edit .container.swapped_container img,
.edit_mode.edit_single.swap_edit_2nd .container.edited_container img {
	opacity: 1;
}
.select_delete .container { cursor: pointer; }
.design_mode:not(.design_single) .container:not(.background_blurred):hover {
	cursor: pointer;
	filter: brightness(0.5);
}
.design_single .edited_container {
	cursor: move;
	outline: 1px solid #182150;
}
.download_blurred_mode .container.background_blurred {
	z-index: 70;
}

.container.excluded img { opacity: 0.3; }

.container .circled {
	position: absolute;
	top: /*calc(50% - 15px);*/ 5px;
	right: /*calc(50% - 15px);*/ 5px;
}
.kindergarten .refuse_photo {
	display: none;
	cursor: pointer;
}
@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
.kindergarten .container:hover .refuse_photo { display: block; }
}
.kindergarten .container.active .refuse_photo { display: block; }

.container .circled .svg_wrapper {
	background: #000;
	text-align: center;
	line-height: 20px;
}
.container .circled:not(.checked):not(:hover) .svg_wrapper {
	opacity: 0.7;
}
.container .circled:hover .icon_trash {
	background: #890707;
}
.container .circled:active .icon_trash, .container .circled.checked .icon_trash {
	background: #f00;
}

.container .circled .icon_trash svg {
	width: 9.51666px;
	height: 10.8333px;
}
.container .circled:hover .icon_trash svg, .container .circled:not(:hover):not(.checked) .icon_trash svg {
	opacity: 0.7;
}

.spread_space {
	position: absolute;
	z-index: 100;
	/* background: #1ef65f; */
	opacity: 40%;
	min-width: 5px;
}
/*.spread_space:hover {
	opacity: 70%;
}*/
.spread_space.vertical { cursor: col-resize; }
.spread_space.horizontal { cursor: row-resize; }

.debug_face {
	position: absolute;
	box-sizing: border-box;
	/* background: yellow; */
	border: 2px solid #43ff00;
	border-radius: 50%;
	/* opacity: 0.5; */
	z-index: 30000;
}
.debug_face.choose_reps_face { cursor: pointer; }
.debug_face.selected { border-color: #ff3e3e; }

.dont_crop_photo {
	position: absolute;
	bottom: 10px;
	height: 30px;
	left: 10px; right: 10px;
	background: #ffffff40;
	text-align: center;
	line-height: 30px;
	font-weight: bold;
	color: #000;
	cursor: pointer;
}
.dont_crop_photo:hover { background: #ffffff80; }
.dont_crop_photo:active { background: #00bde0; }
.dont_crop_photo.selected { background: #00bde0; }

/* Paging buttons */

.prev_next_page_button {
	position: absolute;
	bottom: calc(50% - 40px);
}
.prev_next_arrow.rotate_180 { left: 30px; }
.prev_next_arrow:not(.rotate_180) { right: 30px; }
.edit_single .prev_next_page_button, .design_single .prev_next_page_button, .client_theme .prev_next_page_button {
	visibility: hidden;
}

.prev_next_page_button .svg_wrapper {
	display: block;
}

/* Kindergartens albums paging buttons */

.prev_next_album {
	position: absolute;
	top: 10px;
	font-size: 0;
}
#next_album { right: 100px; }
#prev_album { right: 150px; }

/* Buttons at top and bottom */

.album_view_top_buttons {
	position: absolute;
	top: 25px;
}
.album_view_single_button {
	left: calc(50% - 70px);
	width: 140px;
}
.album_view_double_buttons {
	margin-top: 20px;
	left: calc(100% - 700px);
	width: 600px;
	text-align: center;
}

#album_view_top_message {
	display: none;
	top: 70px;
	/* left: calc(50% - 250px); */
	/* width: 500px; */
}

#open_rules, #show_faces {
	position: absolute;
	top: 10px;
	text-decoration: underline;
}
#download_PDF_cover { float: left; }
#download_PDF_pages { float: right; }

#open_rules {
	left: 100px;
}

#show_faces { left: 260px; }

#page_number {
	position: absolute;
	bottom: 10px;
	left: calc(50% - 30px);
	width: 60px;
	text-align: center;
	transition: 0.4s;
}
.image_replace #page_number {
	bottom: 250px;
}

#album_filename {
	position: absolute;
	top: 10px;
	right: 200px;
}

/* Upload child photos popup */

#full_size_upload_popup.uploading_now [data-action=select_button],
#full_size_upload_popup.post_uploading [data-action=select_button] {
	display: none;
}
#full_size_upload_popup:not(.uploading_now) [data-action=upload_progress] {
	display: none;
}
#full_size_upload_popup:not(.post_uploading) [data-action=post_upload_progress] {
	display: none;
}

.popup_body .container.circular {
	position: relative;
	float: left;
	margin: 0 20px 30px 0;
	width: 70px;
	height: 70px;
	overflow: hidden;
	border: 1px solid #fff;
	direction: ltr;
}

.popup_body .faces_container {
	display: inline-block;
	text-align: center;
	padding: 5px;
	width: 90px;
}

.popup_body .faces_container .container {
	float: none;
	margin: 0 auto;
	cursor: pointer;
}

/* To be re-ordered */


/* Divider is a half-transparent white frame around block of photos */
.divider_rectangle {
	position: absolute;
	background: #ffffff40;
	z-index: 25;
}
.divider_inverted .divider_rectangle {
	background: #00000040;
}
.divider_empty .divider_rectangle {
	background: none;
}
.divider_border .divider_rectangle {
	box-sizing: border-box;
	border: 1px solid #fff;
}
.divider_inverted.divider_border .divider_rectangle {
	border-color: #000;
}

#half_marker {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 100%;
	border: 1px dashed #0eb500;
	border-width: 0 1px 0 1px;
	z-index: 100;
}

/* Editing album */

.resize_rectangle {
	visibility: hidden;
	position: absolute;
	box-sizing: border-box;
	z-index: 500;
	border: 1px dashed #ccc;
	cursor: move;
}
.resize_circle {
	visibility: hidden;
	position: absolute;
	z-index: 600;
	width: 18px;
	height: 18px;
}
svg.resize_circle, svg.resize_circle:hover {
	stroke: #fff;
	fill: #606890;
}
.edit_single:not(.image_replace) .resize_circle, .edit_single:not(.image_replace) .resize_rectangle,
.swap_edit .resize_circle, .swap_edit .resize_rectangle {
	visibility: visible;
	transition: visibility 0s 0.4s;
}

/* Popup to show photos pending to be added */

#pending_popup {
	right: -70px;
	top: -22px;
	padding: 16px 0;
	z-index: 100;
	width: 165px;
	background: #182150;
}

#pending_add_scroller, #pending_add_scroller > .scroll_container {
	max-height: calc(100vh - 220px);
}
.image_replace #pending_add_scroller, .image_replace #pending_add_scroller > .scroll_container {
	max-height: calc(100vh - 440px);
}

#pending_popup .raised_layout_container {
	width: 80px;
}


/* Summary of how many photos are pending to be added/deleted */

#pending_summary {
	position: absolute;
	z-index: 200;
	right: 0;
	height: 26px;
	top: -31px;
}

.pending_summary_element {
	margin-left: 51px;
	position: relative;
	float: right;
	width: 35px;
	height: 100%;
}

.pending_summary_element .circled {
	float: right;
}

.pending_summary_element .svg_wrapper {
	position: absolute;
	top: -10px;
	left: 2px;
}
.pending_summary_element .icon_trash {
	width: 9.51666px;
	height: 10.8333px;
}
.pending_summary_element .icon_plus {
	width: 10.8px;
	height: 10.8px;
}

/* Horizontal-scroller gallery */

.replace_row {
	visibility: hidden;
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	height: 0;
	padding: 0 40px;
	background: var(--tableEven);
}
.image_replace .replace_row {
	visibility: visible;
	direction: ltr;
	height: 215px;
	transition: 0.4s;
}

.replace_row > div > div {
	vertical-align: middle;
}

#replace_options {
	margin: 16px 22px;
	display: inline-block;
	height: 126px;
	width: calc(100% - 90px);
}

.replace_thumb {
	position: absolute;
	top: 0;
	height: 124px;
	border: 1px solid #8a8a8a; /*#707070;*/
}
.replace_thumb.used_image { opacity: 0.3; }
.replace_thumb.current { border-color: #fff; }

.replace_thumb .like_heart {
	position: absolute;
	left: 5px;
	bottom: 5px;
}

#replace_filters {
	border-top: 1px solid #d9ebfe;
	padding: 3px 20px;
	height: 28px;
}
#replace_filters * {
	vertical-align: middle;
}
#replace_filters span {
	color: #d9ebfe;
	font-size: 14px;
	font-weight: 300;
}

.filter_options_line {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}
#key_moments_filter { max-width: calc(100% - 142px); }
#heroes_filter { max-width: 100%; }

.filter_options_line div {
	display: inline-block;
}
.filter_options_line div:not(.filter_only_flag):before {
	display: inline-block;
	margin: 0 10px;
	color: #fff;
	content: " | ";
}

.filter_options_line [ctrl=button]:hover { color: #d3d3d3; }
.filter_options_line [ctrl=button].selected { color: #00bde0; }
.filter_options_line [ctrl=button].original { text-decoration: underline; }
.filter_options_line [ctrl=button].filter_only_flag {
	filter: drop-shadow(0 0 2px #000);
	font-weight: bold;
}
.filter_options_line [ctrl=button].filter_only_flag.selected { color: #abff85; }

/* Button Panels */

.sbpg:not(.edit_mode) .edit_mode_only {
	display: none;
}

#undo_redo {
	float: right;
	display: none;
}
.sbpg.edit_mode #undo_redo, .sbpg.kindergarten #undo_redo {
	display: block;
}
.rtl #undo_redo {
	float: left;
	direction: ltr;
}

#undo_redo .btn_rect_bottom_svg {
	margin-right: 12px;
	min-width: 46px;
}
.btn_rect_bottom_svg[data-action=finished_client_edit] { display: none; }

.edit_single:not(.image_replace) #edit_panel,
.image_replace #replace_panel,
.swap_photos #swap_panel,
.download_blurred_mode #download_blurred_panel,
.select_delete #delete_photos_panel,
.client_theme:not(.image_replace):not(.swap_photos) #client_theme_panel,
.design_single #design_panel,
.container_design_mode #container_design_panel {
	visibility: visible;
	transition: opacity 0.4s;
	opacity: 0.8;
}

#replace_panel {
	bottom: 220px;
	left: 100px;
}

.swap_edit .btn_rect_bottom_svg:not(.on_swap_edit) { display: none; }

/* Horizontal-scroller gallery enlarged image */

#replace_large_image {
	visibility: hidden;
	position: absolute;
	bottom: 195px;
	z-index: 500;
	border: 1px solid #fff;
	background: #ccc;
	width: 2px;
	height: 400px;
	max-height: calc(100% - 260px);
	opacity: 0;
	transition: 0.2s;
}
#replace_large_image.shown {
	visibility: visible;
	opacity: 1;
	transition: left 0.4s, width 0s linear 0.4s;
}
.multi_replace #replace_large_image { cursor: pointer; overflow: hidden; }

#replace_confirm {
	position: absolute;
	bottom: 10px;
	left: 40px;
	right: 40px;
	opacity: 0.4;
}
#replace_large_image:hover #replace_confirm {
	opacity: 0.9;
	background: #fff;
}

#replace_large_image .cb_round, .multi_replace #replace_large_image #replace_confirm { display: none; }
.multi_replace #replace_large_image .cb_round { display: block; }

#replace_large_image .cb_round {
	width: 47.1px;
	height: 47.1px;
}
#replace_large_image .cb_round .svg_wrapper {
	width: 48.56668px;
	height: 47.03332px;
}

@media screen and (max-height: 600px) {
	.anon_header { height: 40px; }
	.anon_header h2, .anon_header h3 {
		display: inline;
		font-size: 20px;
		vertical-align: middle;
		margin: 0 50px;
	}

	#album_centerer {
		top: 0;
		height: 100%;
	}
	#album_spread_wrapper {
		width: calc(100vw - 140px);
		max-width: calc(100svh * var(--spreadRatio) - 60px * var(--spreadRatio));
		height: calc(100svh - 60px);
		max-height: calc(100vw / var(--spreadRatio) - 140px / var(--spreadRatio));
	}

	.prev_next_arrow.rotate_180 { left: 20px; }
	.prev_next_arrow:not(.rotate_180) { right: 20px; }
	.prev_next_page_button { bottom: 100px; }
	#page_number { left: auto; right: 10px; }
	.btn_rect_bottom_svg[data-action=open_pages_popup] { right: 13px; }
	.rtl .btn_rect_bottom_svg[data-action=open_pages_popup] { left: 13px; right: auto; }
	.image_replace #album_centerer { height: calc(100% - 235px) }
	.image_replace #album_spread_wrapper {
		max-width: calc(100svh * var(--spreadRatio) - 300px * var(--spreadRatio));
		height: calc(100svh - 300px);
	}
	.image_replace .replace_row {
		bottom: 5px;
		height: 195px;
	}
	#replace_large_image {
		bottom: 80px;
		max-height: calc(100% - 90px);
	}

	.replace_thumb .like_heart {
		bottom: auto;
		top: 5px;
	}

	.choose_to_replace {
		position: absolute;
		bottom: 4px;
		height: 35px;
		left: 4px; right: 4px;
		opacity: 0.6;
		background: #000;
		border-radius: 4px;
		line-height: 30px;
	}

	#replace_confirm {
	  opacity: 0.9;
	  background: #fff;
	}

	.rect_buttons_panel, #undo_redo { height: auto; }
	.edit_single:not(.image_replace) #edit_panel, .swap_photos #swap_panel/*, .select_delete #delete_photos_panel*/, .client_theme:not(.image_replace):not(.swap_photos) #client_theme_panel/*, .design_single #design_panel, .container_design_mode #container_design_panel*/ {
		left: 0 !important;
		top: 0 !important;
	}
	.image_replace #replace_panel { left: 0 !important; }

	.btn_rect_bottom_svg[data-action=finished_client_edit] {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.rect_buttons_panel .btn_rect_bottom_svg, #undo_redo .btn_rect_bottom_svg, .btn_rect_bottom_svg[data-action=finished_client_edit] {
		display: block;
		max-width: 50px;
		min-width: 45px;
		height: auto;
		font-size: 10px;
		line-height: 100%;
	}
	.btn_rect_bottom_svg .svg_wrapper { height: 28px; }
	#undo_redo .svg_wrapper { height: 18px; }
	.btn_rect_bottom_svg .svg_wrapper.opener_right_arrow { height: 19px; width: 32px; }

	#finished_client_edit_popup {
		position: absolute;
		bottom: 70px;
		left: 10px;
		background: var(--popupBackground);
		border: 1px solid #fff;
		border-radius: 10px;
		padding: 5px;
	}
	#finished_client_edit_popup .btn_std_inline {
		display: block;
		margin: 20px;
	}

	.popup_header {
		height: 36px;
		padding-top: 8px;
	}
	.popup_body_scrollable, .popup_body_scrollable .scroll_container { max-height: calc(100vh - 100px); }

	#approve_printing_popup_icon { height: 60px; }

	.btn_std_inline { font-size: 10px; }

	#album_view_top_message {
		top: 0;
		z-index: 100;
		font-size: 12px;
	}

	#album_filename {
		top: 60px;
		right: 20px;
	}

	.album_view_top_buttons, .image_replace #page_number, .edit_single #undo_redo, .swap_photos #undo_redo { display: none !important; }
}

/* Pages interface popup */

#pages_popup {
	left: 106px;
	top: 76px;
	padding: 5px 0;
	z-index: 1000;
	width: 270px;
	background: rgba(0, 0, 0, 0.9);
}
.rtl #pages_popup {
	left: auto;
	right: 106px;
}
#pages_gallery_scroller, #pages_gallery_scroller > .scroll_container {
	max-height: calc(100vh - 130px);
}

#pages_popup .raised_layout_item {
	margin: 20px 3px;
}

#pages_popup .raised_layout_container {
	position: relative;
	width: 180px;
	height: 90px;
	/* background: #fff; */
	overflow: hidden;
	cursor: pointer;
}
#pages_popup .raised_layout_container.selected {
	border-color: #00bde0;
	cursor: default;
}

/* Pages interface popup */

#page_style_menu, #fonts_menu {
	width: 300px;
}


/**************************************************************
	Photographer Clients List Page
**************************************************************/

#ph_clients_list .client_name { width: 200px; }
#ph_clients_list .client_phone { width: 100px; }
#ph_clients_list .client_email { width: 100px; }
#ph_clients_list .client_status { width: 150px; }

#ph_clients_list .client_phone .svg_wrapper { margin-right: 10px; }
.rtl #ph_clients_list .client_phone .svg_wrapper { margin-right: 0; margin-left: 10px; }

/**************************************************************
	Photographer Client Card (albums list) Page
**************************************************************/

#ph_client_card .album_name { width: 250px; }
#ph_client_card .album_size { width: 80px; }
#ph_client_card .album_cover { width: 80px; }
#ph_client_card .album_copies { width: 80px; }

#client_albums .table_row, #client_details {
	font-weight: normal;
}

/* Upload popup */

#upload_summary, #select_summary {
	height: 20px;
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	text-align: center;
}

#upload_errors {
	margin-top: 5px;
	height: 150px;
	font-size: 14px;
	font-weight: bold;
	color: #f00;
	line-height: 130%;
	overflow: auto;
}

#background_upload_progress {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: var(--popupBackground);
	border: 1px solid rgba(255, 255, 255, 0.24);
}
.rtl #background_upload_progress {
	right: auto;
	left: 10px;
}

.background_progress_row {
	padding: 10px;
}
.background_progress_row > div {
	display: inline-block;
	vertical-align: middle;
}

.background_progress_id {
	margin-right: 15px;
	width: 200px;
	text-align: left;
}
.rtl .background_progress_id {
	margin-right: 0;
	margin-left: 15px;
}

.background_progress_row [ctrl] {
	/* display: inline-block; */
}


/**************************************************************
	Specific pages: Key Moments
**************************************************************/

/* Key moments header */

#keymom_header {
	/* Even above text... */
	cursor: default;
}

#keymom_header .keymom_date {
	margin: 0 10px;
	font-size: 11px;
	position: absolute;
}
.date_from { left: 0; }
.date_until { right: 0; }

.keymom_time {
	position: absolute;
	top: -5px;
	margin: 0;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #c8ceec;
	white-space: nowrap;
}
.keymom_time span {
	display: inline-block;
	width: 15px;
	/* text-align: center; */
}
.keymom_time span.colon {
	width: 5px;
}
.keymom_time_marker {
	position: absolute;
	top: 19px;
	left: 27px;
	background: #c8ceec;
	width: 1px;
	height: 6px;
}
.no_seconds .only_seconds { display: none; }
.no_seconds .keymom_time_marker { left: 17px; }

/* Key moments body */

#key_moments_cameras_scroller {
	height: calc(100% - 25px);
}

.camera_row {
	height: 168px;
}
.table_row.camera_row:before {
	/* Cancel aligning cells in row */
	display: none;
}
.camera_row.blurred {
	filter: blur(3px);
}

.camera_row.table_row > * {
	display: block;
}
	
.camera_name {
	margin: 0 15px;
	padding: 11px 20px;
	border-bottom: 1px solid #fff;
	color: #fff;
}

.camera_timeline {
	position: relative;
	margin: 10px 30px 0;
	height: 62px;
	background: $darkPrimary;
	overflow: hidden;
}

.camera_image {
	display: none;
	position: absolute;
	top: 0;
	height: 62px;
	background: #fff;
	text-align: center;
	color: $darkPrimary;
}
.camera_image.with_image {
	padding: 0;
}

.camera_image img {
	width: 100%;
	height: 100%;
}

.camera_key_colors {
	position: relative;
	margin: 0 30px;
	height: 16px;
	overflow: hidden;
}

.camera_key_band {
	position: absolute;
	top: 0;
	height: 100%;
}

.camera_key_colors, .keymom0 { background: #8a8a8a; }
.keymom1,.keymom17 { background: #c73333; }
.keymom2,.keymom18 { background: #db88d1; }
.keymom3 { background: #9b48c7; }
.keymom4 { background: #3f55b0; }
.keymom5 { background: #4198ce; }
.keymom6 { background: #34a097; }
.keymom7 { background: #1c9617; }
.keymom8 { background: #a59f0a; }
.keymom9 { background: #9f5c2c; }
.keymom10 { background: #911212; }
.keymom11 { background: #a0168f; }
.keymom12 { background: #7a00ba; }
.keymom13 { background: #102ca0; }
.keymom14 { background: #63300f; }
.keymom15 { background: #578699; }
.keymom16 { background: #ccba33; }
.keymom_marking { background: #fff; }

/* Key moments popup (large images) */

#key_moments_popup {
	display: none;
	position: absolute;
	height: 136px;
	z-index: 10000;
}

.key_moments_big_container {
	float: left;
	width: 182px;
	height: 120px;
	text-align: center;
	padding: 8px 0;
}
.key_moments_big_container.empty {
	background: #8a8a8a;
}
.key_moments_big_container.empty > div {
	visibility: hidden;
}
.key_moments_big_container:first-child { padding-left: 8px; }
.key_moments_big_container:last-child { padding-right: 8px; }

[data-action=key_moments_big_image] {
	display: inline-block;
	height: 120px;
	width: 100%;
	background: #000;
	color: blue;
}
[data-action=key_moments_big_image] img {
	height: 100%;
}

#key_moments_cut {
	float: left;
	width: 1px;
	height: 100%;
	background: #fff;
}

/* White triangular marker */

#key_moment_marker {
	display: none;
	position: fixed;
	z-index: 200000;
}

#key_moment_marker .svg_wrapper {
	width: 12px;
	height: 6px;
}

#key_moment_marker svg {
	vertical-align: top;
	stroke: #fff;
	fill: #fff;
}

/* White triangular marker */

#key_moments_menu {
	width: 370px;
}

#key_moments_menu .menu_body {
	padding: 7px 0 11px 0;
}

.key_moment_color {
	float: left;
	margin-right: 7px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.key_moment_number {
	float: right;
}

#key_moments_menu .menu_line .plus_icon {
	margin-right: 4px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	float: left;
}
#key_moments_menu .menu_line.key_moment_menu_location .plus_icon {
	margin: 0 34px 0 37px;
}
#key_moments_menu .menu_line .plus_icon:hover {
	background: #bec6e9;
}


/**************************************************************
	Heroes Marking Page
**************************************************************/

.clustering_page [data-action=cancel_finished_heroes] {
	position: fixed;
	top: 90px;
	right: 50px;
	z-index: 1000;
}
.rtl .clustering_page [data-action=cancel_finished_heroes] {
	left: 50px;
	right: auto;
}

#mark_heroes #heroes_scroller {
	max-height: calc(100% - 0px);
}

.clustering_page .row {
	overflow: hidden;
	border-bottom: 1px solid #ddd;
	white-space: nowrap;
}
.kindergarten_cluster {
	border-bottom: 1px solid #ddd;
}

.clustering_page .row_data {
	float: left;
	padding-top: 20px;
	min-height: 10px;
	width: 120px;
	direction: rtl;
	text-align: center;
}

.clustering_page [ctrl=kinetic] {
	width: calc(100% - 120px);
}

.round_image, .exclude_face {
	display: inline-block;
	position: relative;
	margin: 14px 15px;
	height: 175px;
	vertical-align: middle;
	cursor: pointer;
}
.round_image {
	width: 175px;
	overflow: hidden;
	border: 1px solid #eee;
	border-radius: 50%;
}
.table_row .round_image {
	margin: 0 37px 0 17px;
	width: 64px;
	height: 64px;
}
.round_image_wrapper { margin: 0 41px 0 0; }
.round_image_wrapper .round_image { margin: 0; }
.round_image_wrapper .table_cell_txt, .table_row:hover .round_image_wrapper .table_cell_txt { margin: 0; }

.round_image img, .exclude_face img, .correct_reps img {
	display: none;
	max-width: 100%;
	max-height: 100%;
}

.exclude_face.excluded {
	opacity: 0.3;
}
.exclude_face.warned {
	border: 1px solid yellow;
}
.exclude_by_double.warned { border-width: 2px }
.exclude_face.emphasized {
	border: 2px solid red;
}

.correct_reps {
	position: relative;
	margin: 20px;
	display: inline-block;
	height: 400px;
}
.correct_reps.selected { opacity: 0.5; }

.heroes_button_row {
	padding: 50px;
	text-align: center;
}

.clustering_page .opaque {
	display: none;
	background: #000;
	opacity: 0.7;
}


/**************************************************************
	Introduction (Heroes) Page
**************************************************************/

.hero_title {
	padding: 0 0 15px;
}

#heroes_dropdown {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}
.rtl #heroes_dropdown {
	direction: rtl;
}

#heroes_dropdown_mask {
	background: #182150;
	opacity: 0.8;
}

#heroes_dropdown_title {
	margin-left: 30px;
	height: 74px;
	/* text-align: center; */
	font-size: 30px;
	line-height: 74px;
	font-weight: bold;
}
.rtl #heroes_dropdown_title {
	margin-right: 30px;
}

#heroes_dropdown_thumb {
	float: right;
	margin: 10px 30px;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background: #ccc;
	overflow: hidden;
}
.rtl #heroes_dropdown_thumb {
	float: left;
}

#heroes_dropdown_thumb img {
	vertical-align: top;
}

#heroes_dropdown_body {
	height: calc(100% - 155px);
}

@media screen and (max-width: 700px), screen and (max-device-width: 700px) {
#heroes_dropdown_body .track {
	visibility: hidden;
}
}

.hero_column {
	display: inline-block;
	margin-right: 20px;
	width: calc(50% - 20px);
}
.hero_column:last-child {
	margin-right: 0;
}
.hero_column:first-child:last-child {
	width: calc(100% - 40px);
	margin-right: 20px;
}

.hero_column > div {
	display: table;
	width: calc(100% - 6px);
	margin: 7px 3px;
	text-align: center;
}

.hero_menu_item {
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
	height: 72px;
	border: 1px solid #fff;
	border-radius: 36px;
	background: #c8ceec;
	color: #000;
	font-size: 20px;
	font-weight: 300;
	cursor: pointer;
}
.hero_menu_item.main_hero {
	font-size: 25px;
	font-weight: bold;
}
.hero_column:last-child .hero_menu_item {
	background: #2a398b;
	color: #fff;
}
.hero_menu_item:hover { background: #98a1cc; }
.hero_column:last-child .hero_menu_item:hover { background: #4658bb; }
.selected .hero_menu_item {
	border: solid 7px #00bde0;
	line-height: 58px;
}

.btn_full.cancel_hero {
	background: #606890;
	color: #fff;
}

@media screen and (min-width: 700px) {
.heroes_header, #cl_mark_heroes, #heroes_dropdown {
	width: 700px;
	margin: 0 auto;
}
#heroes_dropdown {
	left: calc(50% - 350px);
	right: calc(50% - 350px);
}
}


/* ****************************** */


#Remini_list_header .album_name, #Remini_list_header .album_order, #Remini_list_header .round_status_column {
	cursor: pointer;
}
/* Photographer clients list page */
#t_albums_list .album_user { width: 100px; }
#t_albums_list .client_phone .svg_wrapper {
	margin-right: 10px;
}
#t_albums_list #t_albums_scroller {
	max-height: calc(100% - 25px);
}


/**************************************************************
	Table of user changes (popup)
**************************************************************/
#user_changes_CSV table {
	text-align: center;
}
#user_changes_CSV table td {
	padding: 10px;
}



#status_menu {
	width: 200px
}
#status_menu .menu_line {
	margin: 0 20px;
	border-radius: 8px;
	text-align: center;
}


/**************************************************************
	Gallery page
**************************************************************/

/* Header with share icon (mobile only) */

#header_share {
	position: absolute;
	top: 1px;
	left: 9px;
}
#header_share .icon_share_photo {
	width: 32px;
	height: 39px;
}

/* Gallery body */

.mobile_device #gallery_sheet {
	height: calc(100% - 50px);
}

.gallery_line {
	margin: 4px 0;
}

.gallery_container {
	position: relative;
	float: left;
	/* box-sizing: border-box; */
	/* border: 2px solid #000; */
	margin-left: 4px;
	cursor: pointer;
}
.rtl .gallery_container {
	float: right;
	margin-left: 0;
	margin-right: 4px;
}
/*#gallery_sheet .gallery_container {
	border: 1px solid #707070;
}*/
.gallery_line .gallery_container.selected { border-color: #fff }

.gallery_container_bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 26px;
	text-align: center;
	cursor: default;
}
.gallery_mobile_enlarged_photo_wrapper .gallery_container_bottom {
	height: 60px;
}

.gallery_container_bottom > .full_size {
	background: var(--bodyBackground);
	opacity: 0.6;
}

.gallery_container img {
	display: none;
	width: 100%;
}

.like_heart {
	width: 21px;
	height: 21px;
	margin-top: 3px;
	cursor: pointer;
	color: transparent;
}
.like_heart.selected {
	color: #ba1414;
}

/* Popup to enlarge a photo */

.full_size_popup {
	top: 70px;
}

.full_size_popup > div, .single_image_popup > div {
	position: absolute;
}

.full_size_popup > .full_size {
	background: var(--bodyBackground);
	opacity: 0.5;
}

#gallery_enlarged_photo_wrapper {
	top: 48px;
	left: 90px;
	right: 90px;
	bottom: 100px;
	text-align: center;
}

#gallery_enlarged_photo {
	position: absolute;
	width: 100%;
	height: 100%;
}

#gallery_enlarged_photo img {
	box-sizing: border-box;
	border: 2px solid #fff;
}

.full_size_popup_close {
	position: absolute;
	top: 20px;
	right: 20px;
}

#gallery_enlarged_photo_popup .next_prev_button {
	bottom: calc(50% - 20px);
}
#gallery_enlarged_photo_popup #prev_enlarged { left: 20px; }
#gallery_enlarged_photo_popup #next_enlarged { right: 20px; }
.rtl #gallery_enlarged_photo_popup #prev_enlarged { left: auto; right: 20px; }
.rtl #gallery_enlarged_photo_popup #next_enlarged { right: auto; left: 20px; }

#gallery_enlarged_photo_popup [data-action=download_single] {
	bottom: 10px;
	left: calc(50% - 140px - 50px);
}

#gallery_enlarged_photo_popup [data-action=share] {
	bottom: 10px;
	left: calc(50% + 140px - 50px);
}

/* Mobile popup to enlarge a photo */

#gallery_mobile_enlarged_photo_popup {
	background: var(--bodyBackground);
}

.gallery_mobile_enlarged_photo_wrapper [data-action=gallery_mobile_enlarged_photo] {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.gallery_mobile_enlarged_photo_wrapper .gallery_container_bottom .like_heart {
	margin-top: 11px;
	width: 40px;
	height: 38px;
}

.gallery_mobile_enlarged_photo_wrapper .gallery_container_bottom .loading_animation.small {
	width: 38px;
	height: 38px;
}
.gallery_mobile_enlarged_photo_wrapper .gallery_container_bottom .loading_animation.small:after {
	margin-top: 11px;
	width: 33px;
	height: 33px;
	border-width: 3px;
}


/* Popup on mobile with share options for a single photo */

.gallery_footer {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 62px;
	padding: 18px 0;
	text-align: center;
}
.gallery_footer > .full_size {
	background: #182150;
	opacity: 0.6;
}

[ctrl=popup].show_actions .gallery_mobile_actions {
	display: inline-block;
}

#gallery_mobile_enlarged_photo_popup:not(.show_actions) .full_size_popup_close,
#gallery_mobile_enlarged_photo_popup:not(.show_actions) .gallery_footer,
#gallery_mobile_enlarged_photo_popup.show_actions .gallery_container_bottom,
body.native_share_enabled .gallery_mobile_actions [data-val]:not([data-val=general]),
body:not(.native_share_enabled) .gallery_mobile_actions [data-val=general] {
	display: none;
}

.gallery_mobile_actions .svg_wrapper {
	margin: 0 3px;
	width: 62px;
	height: 62px;
	background: #182150;
	border-radius: 50%;
	vertical-align: top;
}
.gallery_mobile_actions .svg_wrapper.icon_share_photo {
	background: #fff;
}
.gallery_mobile_actions .svg_wrapper.icon_client_download {
	box-sizing: border-box;
	padding: 3px 4px 0px;
	background: #fff;
	/* overflow: hidden; */
}

.gallery_mobile_actions .svg_wrapper.icon_client_download svg {
	fill: #182150;
}
.gallery_mobile_actions .svg_wrapper.icon_share_photo svg {
	margin-top: 4px;
	fill: #182150;
	width: 46px;
	height: 46px;
}


/* Full-size Upload popup */


/* Gallery download popup */

#gallery_download_popup > div {
	text-align: center;
}

.full_size_popup_title {
	top: 120px;
	width: 100%;
	font-size: 40px;
	font-weight: bold;
}

.full_size_popup_subtitle {
	top: 190px;
	width: 100%;
	font-size: 30px;
	font-weight: 300;
}

.full_size_popup_big_icon {
	top: 320px;
	width: 100%;
}

.full_size_popup_big_icon svg {
	width: 177px;
	height: 141px;
}

.full_size_popup_buttons {
	top: 500px;
	width: 100%;
	text-align: center;
}

#gallery_download_popup .full_size_popup_big_icon {
	top: calc(50% - 150px);
}
#gallery_download_popup .full_size_popup_buttons {
	top: calc(50% + 20px);
}

#gallery_download_popup .next_prev_button, #download_all {
	margin: 0 37px;
	vertical-align: middle;
	display: inline-block;
}

#goto_split_download, #gallery_split_progress { margin-top: 25px; }

.full_size_popup_buttons .btn_link, #download_all_problem { margin-top: 15px; }
#download_all_problem .btn_link { margin-top: 0 }

#gallery_download_popup.downloading .not_when_downloading,
#gallery_download_popup.downloading .next_prev_button, #gallery_download_popup:not(.splitting) .next_prev_button,
#gallery_download_popup:not(.downloading) #gallery_download_progress,
#gallery_download_popup:not(.downloading) #gallery_split_progress, #gallery_download_popup:not(.splitting) #gallery_split_progress,
#gallery_download_popup.downloading #goto_split_download, #gallery_download_popup.splitting #goto_split_download,
#gallery_download_popup:not(.downloading) #stop_download,
#gallery_download_popup.downloading #goto_download_all, #gallery_download_popup:not(.splitting) #goto_download_all,
#gallery_download_popup:not(.downloading) #download_all_problem, #gallery_download_popup.splitting #download_all_problem { display: none; }

/* Some gallery download popup corrections if screen is not tall enough */

@media screen and (max-height: 700px), screen and (max-device-height: 700px) {
.full_size_popup_close { top: 20px; }
.full_size_popup_title { top: 50px; }
.full_size_popup_subtitle { top: 110px;}
.full_size_popup_big_icon { top: 240px;}
.full_size_popup_buttons { top: 400px; }
}

/* Share popups (desktop) for a single photos or for the whole gallery */

#share_popup {
	position: absolute;
	box-sizing: border-box;
	left: 50%;
	width: 260px;
	height: 83px;
	padding: 10px 10px;
	font-size: 0;
}

#share_popup .svg_wrapper {
	margin: 0 3px;
	width: 42px;
	height: 42px;
}

/* Share popups (mobile) for the whole gallery */

#mobile_share_popup {
	width: 280px;
	height: 280px;
}

#mobile_share_popup .svg_wrapper:not(.x_circle_close) {
	float: left;
	padding: 22px;
	width: 92px;
	height: 92px;
}
#mobile_share_popup .svg_wrapper.x_circle_close {
	width: 33px;
	height: 33px;
}


/* New client page */

/*.questionnaire_sheet #photographer_logo {
	float: left;
}*/
.standard_page #photographer_logo {
	margin: 20px;
	height: 100px;
	text-align: center;
}
.standard_page #photographer_logo img {
	max-width: 100%;
	max-height: 100%;
}

.questionnaire {
	/* width: 400px; */
	width: 600px;
	margin: 20px auto;
	padding: 20px;
	background: var(--bodyBackground);
}
/*.questionnaire_sheet .questionnaire {
	float: right;
}*/

.style_title {
	margin: 20px 0 5px;
	color: var(--bodyBackground);
	font-size: 24px;
}

/*#styles_wrapper {display: none;}
	float: left;
	width: calc(100% - 480px);
}
.myalbum #styles_wrapper {
	max-width: 400px;
}*/

@media screen and (max-width: 980px), screen and (max-device-width: 980px) {
	/* .questionnaire_sheet #photographer_logo { float: none; } */
	.standard_page #photographer_logo { height: 50px; }

	.questionnaire {
		max-width: 300px;
	}
	.questionnaire_sheet .questionnaire {
		/* float: none; */
		clear: both;
	}
	/*#styles_wrapper {
		float: none;
		width: auto;
		margin: 20px;
	}*/
}

.questionnaire_sheet [ctrl=photos_slider] {
	position: relative;
    width: 100%;
    padding-top: 50%;
    height: 0;
}
.questionnaire_sheet .s30x80 [ctrl=photos_slider] { padding-top: 37.7%; }
.cb_radio_ctrl.checked + div > [ctrl=photos_slider],
.cb_radio_ctrl.checked + div > img
 {
	border: 5px solid #00bde0;
	margin: -5px;
}
.questionnaire_sheet [ctrl=radio_buttons] [ctrl=photos_slider] { top: -11px; }
.questionnaire_sheet.myalbum [ctrl=photos_slider] {
	padding-top: 70.73%;
}

.questionnaire_sheet .photos_slider_container {
	border: 1px solid #fff;
	box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
	overflow: hidden;
}

.questionnaire_text {
	margin: 15px 0;
}



[ctrl=photos_slider] .icon_arrow_right {
	position: absolute;
	top: calc(50% - 10px);
	right: 0;
	z-index: 100;
	height: 20px;
	opacity: 0.8;
	cursor: pointer;
}
[ctrl=photos_slider] .icon_arrow_right:hover {
	opacity: 1;
}
[ctrl=photos_slider] .icon_arrow_right.rotate_180 {
	right: auto;
	left: 0;
}
[ctrl=photos_slider] .icon_arrow_right svg {
	fill: var(--bodyBackground);
	stroke: #fff;
}
.photos_slider_element {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	text-align: center;
}
.photos_slider_element img {
	max-width: 100%;
	max-height: 100%;
}


/**************************************************************
	Quill editor
**************************************************************/

.quill_wrapper {
	position: absolute;
	top: 50px;
	left: 50px;
	right: 50px;
	bottom: 50px;
	background: #fff;
	color: #000;
}

.quill_wrapper #quill_container {
	height: calc(100% - 50px);
}

.ql-toolbar {
	height: 50px;
}

.ql-toolbar.ql-snow .ql-formats {
	border: 1px solid #ccc;
	padding: 2px;
}

.quill_wrapper svg {
	stroke: none;
}

.ql-dbg::before {
	content: 'dbg';
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
	content: attr(data-value);
}