@import "components/accordion.css";
@import "components/form.css";


:root{
	
	--white:#ffffff;
	--black: 0 0 0;
	--background:#f9fbff;
	--font:#273a53;
	--font_medium: #576475;
	--font_light:#7a7e92;
	--font_verylight:#9ea3b1;

	--line_hover:#f7f9fe;
	--grey_border:#e9eaef;
	--grey_border_light: #f0f3fa;
	--grey_border_dark:#ccc;
	--grey_head:#f2f4f8;
	
	--blue:#2081E2;
	--blue_shadow:#2081E266;
	--blue_hover:#1a71c8;
	--blue_active:#1662ad;
	--blue_light:#e4f0ff;
	--blue_light_hover:#cddef9;
	--blue_light_active:#bed3f8;
	--green:#60c6d4;
	--green_light:#60c6d433;
	--red:#f2587a;
	--red_hover:#ed2351;
	--red_active:#c71039;
	--red_light:#f2587a33;
	--red_bg:#faeaee;
	--orange:#f5b747;
	--orange_light:#f5b74733;
	--orange_active:#c08413;
	--orange_bg:#fff3de;
	--luminous_green:#3be187;
	--luminous_green_hover:#3be18766;
	--luminous_green_active:#1f804bd8;
	--luminous_green_bg:#73f9b0;
	--toaster_green:#3EC961;
	
	--black_shadow: rgba(0, 0, 0, 0.15);
}

@font-face {
	font-family: "National2";
	src: url("/fonts/national-2-regular.woff2") format("woff2");
	font-weight:400;
	font-style:normal;
}
@font-face {
	font-family: "National2";
	src: url("/fonts/national-2-medium.woff2") format("woff2");
	font-weight:600;
	font-style:normal;
}
@font-face {
	font-family: "National2";
	src: url("/fonts/national-2-bold.woff2") format("woff2");
	font-weight:700;
	font-style:normal;
}




/*=================================
	GENERAL
=================================*/

html{scroll-behavior:smooth;accent-color: var(--blue);}
*{margin:0;padding:0;font-family:'Open Sans',sans-serif;color:var(--font);}
body{font-size:13px;font-weight:400;background:var(--background);overflow-x:hidden;text-align:center;padding-left:70px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;min-height:100dvh;min-height:calc(var(--visible-height) + 10px)}

.clear{clear:both;}
.hidden{display: none!important;}
.wait{pointer-events: none;}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.custom_scrollbar::-webkit-scrollbar{width:5px;}
.custom_scrollbar::-webkit-scrollbar-track{background:var(--blue_light);}
.custom_scrollbar::-webkit-scrollbar-thumb{background:var(--blue);}

input:not([type="checkbox"],[type="radio"]),select,textarea{padding:0 15px;width:200px;background:var(--white);height:38px;line-height:38px;border:1px solid var(--grey_border);border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,0.05);outline:none;transition:all ease 0.3s;background-position:center center;}
input:not([type="checkbox"]):hover,select:hover,textarea:hover{border-color:var(--grey_border_dark);}
input:not([type="checkbox"]):focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0px 3px var(--blue_shadow);position:relative;z-index:1;}
input.search{background:url(/img/search.svg) no-repeat 15px center var(--white);background-size:20px;padding-left:45px;}
input.wait,select.wait,textarea.wait{background:url(/img/loader.svg) no-repeat center center var(--white);background-size:35px;color:transparent;border-color:transparent;box-shadow:none;}
ul.wait{height: 30px}

input.good,select.good,textarea.good{box-shadow:0 0 10px var(--luminous_green);}
input.bad,select.bad,textarea.bad{box-shadow:0 0 10px var(--red);}
input.input_phone{padding-left:105px;width:150px;}
img, img-picture {max-width:100%;height:auto;}
textarea{font-size: inherit;line-height: inherit;}
input[type=file]::file-selector-button {
	text-align: center;
	border-radius: 6px;
	background-color: var(--blue_light);
	border: 1px solid transparent;
	color: var(--blue);
	transition: 0.2s;
}
input[type=file]::file-selector-button:hover {
	border-color: var(--blue);
	cursor: pointer;
}
input[type=file]::file-selector-button:active {
	transform: scale(0.99);
}

[data-tooltip] {
	position: relative!important;
}

[data-tooltip]:not(:hover):after {
	opacity: 0;
}

[data-tooltip]:after {
	content: attr(data-tooltip);
	pointer-events: none;
	display: block;
	opacity: 1;
	background-color: rgb(var(--black));
	color: var(--white);
	padding: 4px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1;
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	transition: all 0.2s;
}

.select{display:block;position:relative;padding:0 15px;width:250px;background:var(--white);height:38px;line-height:38px;cursor:default;border:1px solid var(--grey_border);border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,0.05);transition:all ease 0.3s;}
.select:hover{border-color:var(--grey_border_dark)}
.select:before{content:"";position:absolute;display:block;width:38px;height:38px;background:url(/img/expand.svg) no-repeat center;background-size:16px;right:0;top:0;pointer-events:none;transition:all ease 0.25s;}
.select span.value{display:block;padding:1px 20px 0 0;overflow:hidden;width:calc(100% - 10px);height:100%;position:relative;text-overflow:ellipsis;white-space:nowrap;}
.trigger_select{user-select:none;cursor:pointer;}
.select div.underselect{display:none;min-width:100%;max-width:100%;padding:10px 0;position:absolute;top:42px;left:0;background:var(--white);border:1px solid var(--grey_border);border-radius:10px;box-shadow:0 10px 15px 0 var(--rgba_blue-7);margin-left:-1px;z-index: 100;}
.select div.underselect:before{content:"";position:absolute;width:15px;height:15px;background:var(--white);transform:rotate(45deg);top:-9px;left:25px;border-top:1px solid var(--grey_border);border-left:1px solid var(--grey_border);z-index:-1}
.select:hover div.underselect{border-color:var(--grey_border_dark);}
.select:hover div.underselect:before{border-color:var(--grey_border_dark);}
.select ul{list-style-type:none;max-height:300px;overflow:auto;max-width:100%;}
.select ul::-webkit-scrollbar{width:5px;}
.select ul::-webkit-scrollbar-track{background:var(--blue_light);}
.select ul::-webkit-scrollbar-thumb{background:var(--blue);}
.select ul li{height:38px;padding:0 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.select ul li.disabled{pointer-events:none;opacity:0.5;}
.select ul li.disabled:before{content:"-----";padding-right:10px;}
.select ul li.hide{display:none;}
.select ul li.select_item.active{background-color: var(--blue_light_hover);color: var(--blue);}
.select ul li a{display:block;height:38px;padding:0 15px;margin-left:-15px;width:100%;text-decoration:none;line-height:38px;}
.select p.search{height:38px;border-bottom:1px solid var(--grey_border);margin-top:-5px;}
.select p.search input{box-shadow:none;border:0;background:transparent;background:url(/img/search.svg) no-repeat 15px center;background-size:20px;padding-left:45px;width:calc(100% - 60px)}
.select.good{box-shadow:0 0 10px var(--luminous_green) !important;}
.select.bad{box-shadow:0 0 10px var(--red) !important;}
.select.wait span.value:after{content:"";display:block;position:absolute;width:100%;height:38px;top:0;left:0;background:url(/img/loader.svg) no-repeat center center var(--white);background-size:35px;}

.select.on div.underselect{display:block;border-color:var(--grey_border_dark);}
.select.on .trigger_select{pointer-events:none;}
.select.on:before{transform:scaleY(-1);}
.select.on{border-color:var(--blue);box-shadow:0 0 0px 3px var(--blue_shadow);z-index:1;}

.select ul li[data-value=INOK]{background:url(/img/call_answered.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=VOICEMAIL]{background:url(/img/call_voicemail.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=INKO]{background:url(/img/call_missed.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=OUT]{background:url(/img/call_out.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=COMMENT]{background:url(/img/comment.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=STAR]{background:url(/img/star_STAR1.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=STAR1]{background:url(/img/star_STAR1.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=STAR2]{background:url(/img/star_STAR2.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select ul li[data-value=STAR3]{background:url(/img/star_STAR3.svg) no-repeat 20px center;background-size:16px;padding-left:45px;}
.select[data-value=INOK] .value{background:url(/img/call_answered.svg) no-repeat 0 center;background-size:16px;padding-left:25px;}
.select[data-value=VOICEMAIL] .value{background:url(/img/call_voicemail.svg) no-repeat 0 center;background-size:16px;padding-left:25px;}
.select[data-value=INKO] .value{background:url(/img/call_missed.svg) no-repeat 0 center;background-size:16px;padding-left:25px;}
.select[data-value=OUT] .value{background:url(/img/call_out.svg) no-repeat 0 center;background-size:16px;padding-left:25px;}
.select[data-value=COMMENT] .value{background:url(/img/comment.svg) no-repeat 0 center;background-size:16px;padding-left:25px;}
.select[data-value=STAR] .value{background:url(/img/star_STAR1.svg) no-repeat 0 center;background-size:16px;padding-left:25px;}
.select > .underselect > ul > li > em,.select > .trigger_select > em{display: inline-block;border-radius: 5px;padding: 0 5px 0 5px;line-height: 24px;height: 24px;border: 0;color:var(--blue);font-size: 13px;vertical-align: top;font-style: normal;margin-top: 8px;float: right;max-width: 90px;overflow: hidden;text-overflow: ellipsis;background: var(--blue_light);}
.select > .trigger_select > em{margin:6px 10px 0 0;}
.select ul li:hover,.select ul li.hover{background-color:var(--blue_light);}
.select ul li:hover em,.select ul li.hover em{background-color:var(--blue_light_hover);}
.select img:not(.avatar){width:24px;height:16px;border-radius:5px;margin:11px 10px 0 0;float:left;}
.select_actions {margin-inline:20px;text-align:right;}
.select.callstype ul{max-height:none}

.select.phone_country{position:absolute;z-index:2;border-color:transparent;border-radius:0;width:70px;background:transparent;border-right:1px solid var(--grey_border);padding:0 10px;box-shadow:none;}
.select.phone_country:before{width:28px;}
.select.phone_country .value{line-height:36px;color:var(--font_light)}
.select.phone_country .value img{margin:10px 5px 0 0;}
.select.phone_country .underselect{width:320px;max-width:none;}

.btn{all:unset;display:inline-block;height:40px;line-height:40px;background-color:var(--blue);color:var(--white);padding:0 12px;border-radius:8px;cursor:pointer;text-align:center;font-weight:600;}
.btn:hover{background-color:var(--blue_hover);box-shadow:0 0 3px var(--blue_shadow)}
.btn:active{background-color:var(--blue_active);box-shadow:none;}
.btn.add{background:url(/img/plus.svg) no-repeat 10px center var(--blue_light);background-size:20px;padding-left:40px;color:var(--blue)}
.btn.add.red{background:url(/img/trash.svg) no-repeat 10px center var(--red_light);background-size:20px;color:var(--red)}
.btn.add:hover{background-color:var(--blue_light_hover);box-shadow:none}
.btn.add:active{background-color:var(--blue_light_active);}
.btn.add.upload{background-image:url(/img/upload_blue.svg)}
.btn.add.blacklist{background-image:url(/img/block_blue.svg)}
.btn.light{background:var(--line_hover);color:var(--font)}
.btn.light:hover{background-color:var(--blue_light);box-shadow:none}
.btn.light:active{background-color:var(--blue_light_hover);}
.btn.red{background-color:var(--red);}
.btn.red:hover{background-color:var(--red_hover);}
.btn.red:active{background-color:var(--red_active);}
.btn.wait{position:relative;pointer-events:none;}
.btn.wait:before{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background:url(/img/loader.svg) no-repeat center center var(--white);background-size:35px;}
.btn.white{background-color:var(--white);border:1px solid var(--grey_border);color:var(--font_light);}
.btn.white:hover{border-color:var(--grey_border_dark);color:var(--font);box-shadow:none;}
.btn.white:active{background-color:var(--background);}
.btn.big{height:60px;line-height:60px;padding:0 30px;font-size:16px;}
.btn.big.wait:before{background-color:var(--background)}
.btn.hide{opacity:0;pointer-events:none;background-position:center;background-size:50px;}
.btn.success{position:relative;pointer-events:none;}
.btn.success:before{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;background:url(/img/success.svg) no-repeat center center var(--white);background-size:35px;}
.btn:disabled,
.btn.disabled {
	background-color: var(--grey_border_dark);
	pointer-events: none;
}

.btn.big.success:before{background-color:var(--background);background-position:center;background-size:40px;}
.btn.ghost:not(.muted){background-color:transparent;color:var(--font_light);height:16px;line-height:1;}
.btn.ghost:hover{box-shadow:none;text-decoration: underline;}
.btn.ghost.muted{background-color:transparent;}
.btn.ghost.muted:hover {background-color: var(--blue_light);}
.btn.ghost.muted.danger:hover {background-color: var(--red_light);}
.line .ghost { width: 32px; height: 32px; line-height: 32px; border-radius: 50%; padding: 0;}
.line .ghost .icon:first-child { margin-right: 0;}
.btn.back{
	display: inline-block;
	height: 40px;
	line-height: 40px;
	margin-top: 30px;
	cursor: pointer;
	padding-inline: 0px;
	color: var(--font);
	background-color: transparent;
}
.btn.back:before {
	content: "";
	display: inline-block;
	height: 40px;
	width: 30px;
	background: url(/img/arrow.svg) no-repeat center center;
	background-size: 13px;
	vertical-align: bottom;
	transform: rotate(180deg);
	transition: all ease 0.1s;
}
.btn.back:hover {
	text-decoration: underline;
	box-shadow: none;
}
.btn.back:hover:before {
	background-position: right center;
}

hr.vertical {
	border: none;
	border-left: 1px solid var(--grey_border);
	height: 100%;
	width: 1px;
	margin-inline: 16px;
}
.switch{display:block;width:44px;height:24px;border-radius:12px;background:var(--grey_border_dark);position:relative;cursor:pointer;transition:all ease 0.15s;flex-shrink:0}
.switch:hover{box-shadow:0 0 0 3px #ccc6;}
.switch span{position:absolute;display:block;width:16px;height:16px;background:url(/img/cross.svg) no-repeat center center var(--white);background-size:12px;border-radius:50%;top:4px;left:4px;transition:all ease 0.15s;}
.switch.on{background:var(--luminous_green);}
.switch.on:hover{box-shadow:0 0 0 3px var(--luminous_green_hover);}
.switch.on span{left:24px;background-image:url(/img/check_green.svg);}
.switch.disabled{cursor:not-allowed;}
.switch.wait{pointer-events:none;cursor:default;}
.switch.good{box-shadow:0 0 10px var(--luminous_green);}
.switch.bad{box-shadow:0 0 10px var(--red);}
.form_row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.popover {
	opacity: 0;
	pointer-events: none;
	background: var(--white);
	border: 1px solid var(--grey_border);
	padding: 4px;
	border-radius: 10px;
	box-shadow: 0 0 20px var(--black_shadow);
	scroll-margin-top: 10px;
	position: absolute;
	z-index: 49;
	transition: all 0.15s ease;
}
.popover.on {
	opacity: 1;
	pointer-events: initial;
}
.popover.disabled .popover_list_item {
	opacity: 0.6;
	pointer-events: none;
}
.popover.arrow {
	border: 1px solid var(--grey_border);
	padding: 16px;
}
.popover.arrow:before {
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	background: var(--white);
	transform: rotate(45deg);
	top: -9px;
	left: 25px;
	border-top: 1px solid var(--grey_border);
	border-left: 1px solid var(--grey_border);
	z-index: -1;
}
.popover.arrow.top:before {
	top: auto;
	bottom: -9px;
	left: 25px;
	border: 0;
	border-bottom: 1px solid var(--grey_border);
	border-right: 1px solid var(--grey_border);
}
.popover_title {
	font-size: 14px;
	margin-bottom: 10px;
}
.popover_list_item {
	display: block;
  padding: 6px 14px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
	border-radius: 6px;
	color: var(--font_medium);
}
.popover_body {
	padding-bottom: 10px;
	line-height: 1.5;
	font-size: 14px;
}
.popover_footer {
	padding-top: 10px;
}
.popover_actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.popover_actions .btn {
	width: max-content;
	min-width: 0;
}
.popover_list_item.wait::after {
	content: '';
	display: inline-block;
	background-image: url(../img/loader.svg);
	background-size: 100%;
	background-position: center;
	width: 1.5em;
	height: 0.5em;
	vertical-align: middle;
	margin-left: 0.75em;
}

.popover_list_item:hover {
	background-color: var(--blue_light);
}

.popover_list_item.danger:hover {
	background-color: var(--red_light);
}

.popover_list_item .icon {
	margin-right: 0.5em;
}

.popover_list_separator {
	display: block;
	border-top: 1px solid var(--grey_border_light);
	margin-block: 4px;
}

pre {
	font-family: monospace;
	white-space: pre-line;
	line-height: 1.25;
}
.icon {
	--icon-size: 1.25em;
	display: inline-block;
	vertical-align: middle;
	width: var(--icon-size);
	height: var(--icon-size);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.icon.big {
	--icon-size: 1.75em;
}
.icon.copy {
	background-image: url(/img/copy.svg);
}
.icon.trash {
	background-image: url(/img/trash.svg);
}
.icon.record {
	background-image: url(/img/time_voicemail.svg);
}
.icon.cross {
	background-image: url(/img/cross.svg);
}
.icon.download {
	background-image: url(/img/download.svg);
}
.icon.pending {
	background-image: url(/img/pendingcalls.svg);
}
.icon.handled {
	background-image: url(/img/check.svg);
}

.btn .icon:first-child {
	margin-right: 0.5em;
}

.copy_to_clipboard {
	position: relative;
	padding-right: 50px;
	cursor: pointer;
}

.copy_to_clipboard .icon.copy {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}


.error_message {
	margin-top: 16px;
	background: url(/img/warning.svg) no-repeat left center;
	padding-left: 24px;
	background-size: 20px;
	max-width: 400px;
}

.error_message:empty,
.error_message.hide {
	display: none;
}

.text_error {
	color: var(--red)!important;
}

.tab-group {
	display: inline-flex;
	gap: 4px;
	border-radius: 12px;
	padding: 4px;
	background-color: var(--blue_light);
}

.tab-group button {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: transparent;
	border-radius: 8px;
	border: 0;
	height: 40px;
	padding-inline: 16px;
	font-weight: 600;
}

.tab-group button.active {
	background-color: var(--white);
	color: var(--blue);
	pointer-events: none;
}

.tab-group button:not(.active) {
	color: var(--font_medium);
}

.tab-group button:not(.active):hover {
	color: var(--font);
	cursor: pointer;
}

#toast{position:fixed;z-index:1000;padding:15px 40px;font-size:16px;color:var(--white);line-height:20px;border-radius:12px;top:-50px;left:50%;transform:translateX(-50%);transition:all ease 0.20s;width: max-content;max-width: 70%;}
#toast.good{background:var(--toaster_green);}
#toast.bad{background:var(--red);transition: all cubic-bezier(0.7, -0.2, 0.51, 1.65) 0.30s;transform:translateX(-50%) scale(0.5);}
#toast.on{top:10px;transform:translateX(-50%) scale(1);}

#alerts{
	max-width: min(43ch, calc(100svw - 20px));
}

#alerts:empty {
	display: none;
}

#alerts > * + * {
	margin-top: 0.325rem;
}

#alerts .alert {
	padding: 16px 20px;
	text-align: left;
	text-wrap: balance;
}

#alerts .alert:not(.info,.warning) {
	border-color: var(--red_active);
}

.alert_body {
	color: inherit;
}

.alert_title {
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
	color: inherit;
}

.alert_text {
	font-size: 0.875rem;
}

.alert_cta {
	margin-top: 0.75rem;
}

.floating_area {
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 12px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
}

.floating_area :where(#alerts,#queue,#phone-container.on,#minimize-phone,#phone-container[data-call="on"] #phone-content) {
	pointer-events: all;
}

html.popup_on{overflow:hidden;scrollbar-gutter:stable;}
#bg_popup{display:none;position:fixed;z-index:50;top:0;left:0;right:0;bottom:0;background:rgb(var(--black) / 0.4);backdrop-filter:blur(5px);}
#bg_popup.on{display:block;}
#popup{display:none;position:fixed;overflow:auto;inset:0;z-index:50;}
#popup_body{width:500px;margin-block:20px;background:var(--white);border-radius:12px;text-align:left;position:relative}
#close_popup{display:block;position:absolute;z-index:3;width:40px;height:40px;background:url(/img/cross.svg) no-repeat center center;background-size:16px;border-radius:50%;top:15px;right:15px;cursor:pointer;}
#close_popup:hover{background-color:var(--blue_light);}
#close_popup:active{background-color:var(--blue_light_hover);}
#popup.on{display:grid;place-items:center;}
#popup.big #popup_body{width:1160px;}
#popup.medium #popup_body{width:806px;}
#popup_content{padding:44px 32px 32px 32px;}
#popup_content h2{font-size:20px;font-weight:700;}
#popup_content h3{font-size:16px;font-weight:700;margin-top:16px;margin-bottom:12px;color:var(--font_light)}
#popup_content h2.slack{background:url(/img/store/slack.svg) no-repeat left center;background-size:20px;padding-left:30px;}
#popup_content h2 + p {margin-top:16px;}
#popup_content label:not([class]){display:block;font-size:14px;font-weight:600;line-height:30px;margin-top:20px;}
#popup_content label.warning{background:url(/img/warning.svg) no-repeat left center;background-size:20px;color:var(--red);padding-left:25px;}
#popup_content input:not([type="radio"]){width:calc(100% - 32px)}
#popup_content span.select{width:calc(100% - 32px)}
#popup_content span.select.phone_country{width:70px}
#popup_content input.half{width:calc(47% - 32px);margin-right:5%;}
#popup_content input.half.last{margin-right:0;}
#popup_content input.number{width:calc(100% - 122px);padding-left:105px;}
#popup_content .btn:not(.add,.ghost){margin:20px 10px 0 0;}
#popup_content .line .btn{margin:auto;}
#popup.wait #popup_body:before{content:"";position:absolute;z-index:5;width:100%;height:100%;top:0;left:0;background:url(/img/loader.svg) no-repeat center center var(--white);border-radius:12px;}
#popup.success #popup_body:before{content:"";position:absolute;z-index:5;width:100%;height:100%;top:0;left:0;background:url(/img/success.svg) no-repeat center center var(--white);background-size:100px;border-radius:10px;}
#popup.error #popup_body:before{content:"";position:absolute;z-index:5;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:url(/img/error.svg) no-repeat center center var(--red);background-size:100px;border-radius:10px;}
#popup.wait #close_popup,#popup.success #close_popup,#popup.error #close_popup{display:none;}
#popup textarea.comment{width:calc(100% - 32px);height:80px;line-height:24px;margin-top:20px;padding:15px;}
#popup label + textarea.comment{margin-top:0;}
#popup.tip h2{margin-bottom:24px;color:var(--blue);background:url(/img/i.svg) no-repeat left center;background-size:20px;padding-left:30px;margin-top: -10px;}
#popup.tip #popup_content{line-height:24px;font-size:14px;}
.popup_actions {text-align: right;}
#popup #transcription_voicemail_content{padding: 20px 0px;font-size: 14px;}
#panel{position:fixed;z-index:6;width:100%;max-width:min(calc(100% - 100px), 700px);background:var(--white);top:0;height: var(--visible-height, 100dvh);right:min(calc((100% - 100px) * -1), -800px);transition:all ease 0.15s;text-align:left;padding:30px 50px 50px 50px;overflow:auto;}
#panel.open{right:0;box-shadow: 0px 0px 50px var(--black_shadow);}
#panel.wait::before{content:"";position:absolute;z-index:12;width:100%;height:100%;top:0;left:0;background:url(/img/loader.svg) no-repeat center center var(--white);border-radius:12px;}
#close_panel{display:block;position:absolute;z-index:10;width:40px;height:40px;background:url(/img/cross.svg) no-repeat center center;background-size:16px;border-radius:50%;top:15px;right:15px;cursor:pointer;}
#close_panel:hover{background-color:var(--blue_light);}
#close_panel:active{background-color:var(--blue_light_hover);}
#panel::-webkit-scrollbar{width:5px;margin:10px 0}
#panel::-webkit-scrollbar-track{background:var(--blue_light);margin:10px 0}
#panel::-webkit-scrollbar-thumb{background:var(--blue);}
.popup_wait_message {
	position: absolute;
  top: calc(50% + 30px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 80ch;
  z-index: 5;
  font-size: 18px;
  text-align: center;
  text-wrap: balance;
}

#logo{position:fixed;z-index:2;top:0;left:0;width:70px;height:100px;background:url(/img/logo_white.svg) no-repeat center;background-size:30px;}
#leftmenu ul li .badge--notif:not(.on) { display: none; }
#leftmenu ul li .badge--notif{
	box-shadow: 0 0 5px rgb(0 0 0 / 5%);
	position: absolute;
	top: -4px;
	right: -20px;
	z-index: 1;
}
@media (min-width:1090px){
	#leftmenu{position:fixed;z-index:1;top:0;bottom:0;left:0;width:70px;background:var(--blue);}
	#leftmenu ul{list-style-type:none;margin-top:135px;}
	#leftmenu ul li{width:40px;height:40px;margin-bottom:15px;position:relative;}
	#leftmenu ul li a{display:block;position:relative;opacity:0.7;width:40px;height:40px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:24px;margin:0 0 0 15px;}
	#leftmenu ul li a#menu_calls{background-image:url(/img/menu_logs.svg);}
	#leftmenu ul li a#menu_mails{background-image:url(/img/menu_mails.svg);}
	#leftmenu ul li a#menu_contacts{background-image:url(/img/menu_contacts.svg);}
	#leftmenu ul li a#menu_users{background-image:url(/img/menu_users.svg);}
	#leftmenu ul li a#menu_ivrsettings{background-image:url(/img/menu_settings.svg);}
	#leftmenu ul li a#menu_store{background-image:url(/img/menu_store.svg);}
	#leftmenu ul li a#menu_billing{background-image:url(/img/menu_billing.svg);}
	#leftmenu ul li a#menu_numbers{background-image:url(/img/Number_sign.svg);}
	#leftmenu ul li a#menu_blacklist{background-image:url(/img/block.svg);}
	#leftmenu ul li a#menu_sms{background-image:url(/img/menu_sms.svg);}


	#leftmenu ul li a.justforresponsive{display:none;}
	#leftmenu ul li a > span.label{position:absolute;background:var(--white);height:32px;line-height:32px;white-space:nowrap;border:1px solid var(--grey_border);left:45px;top:4px;border-radius:6px;padding:0 10px;box-shadow:0 2px 5px rgba(51,51,79,0.1);opacity:0;pointer-events:none;transition:all ease 0.15s;}
	#leftmenu ul li a > span.label:before{content:"";width:10px;height:10px;display:block;transform:rotate(45deg);position:absolute;background:var(--white);top:11px;left:-6px;}
	#leftmenu ul li a:hover{opacity:1;background-color:#fff3;}
	#leftmenu ul li a:hover > span.label{opacity:1;left:50px;}
	#leftmenu ul li a.on{background-color:#fff3;opacity:1;}
}
#leftmenu ul li a#menu_numbers{display:none;}


h1{display:none;height:100px;line-height:100px;position:absolute;z-index:1;top:0;left:70px;right:0;padding-left:65px;text-align:left;border-bottom:1px solid var(--grey_border);background:var(--white);font-size:34px;font-weight:700;font-family:"National2",sans-serif}
h1.on{display:block;}


#topmenu{position:absolute;z-index:2;top:0;right:0;height:100px;}

#topmenu #users_presence{float:right;list-style-type:none;margin:28px 20px 0 0;}
#topmenu #users_presence li{float:right;width:44px;height:44px;position:relative;margin-left:-10px;cursor:default;border:3px solid var(--white);border-radius:50%;}
#topmenu #users_presence li[data-avatar]:before{content:"";position:absolute;width:15px;height:15px;background:var(--luminous_green);border:2px solid var(--white);top:30px;left:30px;border-radius:50%;}
#topmenu #users_presence li.off:before{background:var(--red);}
#topmenu #users_presence li span.name{position:absolute;background:var(--white);white-space:nowrap;padding:5px 10px;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,0.05);right:0;top:-13px;opacity:0;transition:all ease 0.15s;pointer-events:none;z-index:1;}
#topmenu #users_presence li span.name:before{content:"";position:absolute;width:10px;height:10px;background:var(--white);transform:rotate(45deg);bottom:-5px;right:15px;}
#topmenu #users_presence li[data-avatar]:hover span.name{top:-18px;opacity:1;}
#topmenu #users_presence li[data-avatar=without] img{display:none;}
#topmenu #users_presence li[data-avatar=without] strong{display:block;width:44px;text-align:center;line-height:44px;height:44px;border-radius:50%;background:var(--blue_light);color:var(--blue);font-size:12px;overflow: hidden;text-overflow:ellipsis;padding-inline: 12%;box-sizing: border-box;}
#topmenu #users_presence li[data-avatar=with] img{width:44px;height:44px;border-radius:50%;}
#topmenu #users_presence li[data-avatar=with] strong{display:none;position:absolute;margin-top:46px;width:46px;text-transform:uppercase;color:var(--font_light);font-size:12px;font-weight:400;}
#topmenu .plus {
	display: flex;

}
#topmenu .plus strong {
	height: 44px;
	width: 44px;
	line-height: 44px;
	flex-shrink: 0;
	display: inline-block;
	font-size: 16px;
	color: var(--blue);
	background: var(--blue_light);
	border-radius: 50%;
}
#topmenu .plus ul {
	opacity: 0;
	pointer-events: none;
}
#topmenu .plus:hover {
	width: auto!important;
	border-radius: 0!important;
	border: 0!important;
	transition: width 0.3s;
}
#topmenu .plus:hover strong {
	display: none;
}
#topmenu .plus:hover ul {
	opacity: 1;
	pointer-events: auto;
	list-style: none;
	transition: 0.2s;
}
#topmenu .plus li {
	display: inline-block;
}
#topmenu .plus li .name {
	all:reset;
}
#topmenu #me{float:right;position:relative;height:60px;padding:0;margin:19px 65px 0 0;border-radius:10px;text-align:left;cursor:pointer;line-height:normal;width:300px;}
#topmenu #me .trigger_select{display:block;padding:10px 60px 10px 64px;height:40px;}
#topmenu #me:before{content:"";width:30px;height:30px;position:absolute;top:17px;right:17px;border-radius:50%;pointer-events:none;}
#topmenu #me.on:before{transform:scaleY(1)}
#topmenu #me img{width:44px;height:44px;border-radius:50%;position:absolute;top:8px;left:10px;margin:0;}
#topmenu #me #me_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	display: block;
}
#topmenu #me #me_company{color:var(--blue);font-weight:700;line-height:22px;display:block;height:22px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#topmenu #me:hover:before{background-color:var(--blue_light);}
#topmenu #me.on{border-color:var(--grey_border_dark);box-shadow:none;}
#topmenu #me .underselect{top:64px;}
#topmenu #me #menu_settings{background:url(/img/user_settings.svg) no-repeat 15px center;background-size:20px;padding-left:50px;}
#topmenu #me #menu_portability{background:url(/img/hashtag.svg) no-repeat 15px center;background-size:20px;padding-left:50px;}
#topmenu #me #menu_referral{background:url(/img/gift.svg) no-repeat 15px center;background-size:20px;padding-left:50px;}
#topmenu #me #menu_logout{background:url(/img/logout.svg) no-repeat 15px center;background-size:20px;padding-left:50px;}
#topmenu #me #menu_support{background:url(/img/support.svg) no-repeat 15px center;background-size:20px;padding-left:50px;}
#topmenu #me #menu_billing{background:url(/img/menu_billing_plain.svg) no-repeat 15px center;background-size:20px;padding-left:50px;}
#topmenu #me #menu_store{background:url(/img/menu_store_plain.svg) no-repeat 15px center;background-size:20px;padding-left:50px;}
#topmenu #credit{float:right;position:relative;height:60px;margin:19px 65px 0 0;border-radius:0 10px 10px 0;cursor:pointer;line-height:normal;border:1px solid var(--grey_border);box-shadow: 0 0 5px rgb(0 0 0 / 5%);padding:0 15px;}
#topmenu #credit:hover{z-index:2;border-color:var(--grey_border_dark);}
#topmenu #credit label{display:block;line-height:30px;}
#topmenu #credit strong{display:block;font-size:18px;line-height:30px;margin-top:-5px;}

.page{display:none;width:1280px;margin:0 auto;position:relative;text-align:left;padding:100px 0 100px 0;}
.page.on{display:block;}

.container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 10px;
}

.container.--small {
	max-width: 600px;
}

#gototop{display:none;position:fixed;width:50px;height:50px;background:url(/img/gototop.svg) no-repeat center center rgb(var(--black) / 0.067);cursor:pointer;border-radius:20px;left:90px;bottom:20px;transition:all cubic-bezier(0.42, 0, 0.01, 2.61) 0.2s;}
#gototop.on{display:block;}
#gototop:hover{background-color:rgb(var(--black) / 0.133);box-shadow:0 0 0 5px rgb(var(--black) / 0.133);border-radius:17px;}


.bloc{border:1px solid var(--grey_border);border-radius:15px;background:var(--white);margin-bottom:30px;}
.bloc h2{height:70px;line-height:70px;border-bottom:1px solid var(--grey_border);padding-left:25px;font-size:20px;font-weight:700;font-family:"National2",sans-serif;background-size:20px;position:relative;background-position:25px center;background-repeat:no-repeat;border-radius:15px 15px 0 0;}
.bloc.--small {
	max-width: 600px;
	margin-inline: auto;
}
.bloc h2.me{background-image:url(/img/user.svg);padding-left:70px;}
.bloc h2.display{background-image:url(/img/display.svg);padding-left:70px;}
.bloc h2.pass{background-image:url(/img/pass.svg);padding-left:70px;}
.bloc h2.creditcard{background-image:url(/img/creditcard.svg);padding-left:70px;}
.bloc h2.dollar{background-image:url(/img/dollar.svg);padding-left:70px;}
.bloc h2.invoice{background-image:url(/img/invoice.svg);padding-left:70px;}
.bloc h2.billinginfo{background-image:url(/img/billinginfo.svg);padding-left:70px;}
.bloc h2.save{background-image:url(/img/save.svg);padding-left:70px;}
.bloc h2.calendar{background-image:url(/img/calendar_blue.svg);padding-left:70px;}
.bloc h2.phone{background-image:url(/img/phone.svg);padding-left:70px;}
.bloc h2.music{background-image:url(/img/music.svg);padding-left:70px;}
.bloc h2.world{background-image:url(/img/world.svg);padding-left:70px;}
.bloc h2.location{background-image:url(/img/location.svg);padding-left:70px;}
.bloc h2.settings{background-image:url(/img/user_settings.svg);padding-left:70px;}
.bloc h2.slack{background-image:url(/img/store/slack.svg);padding-left:70px;}
.bloc h2.email{background-image:url(/img/email_blue.svg);padding-left:70px;}
.bloc h2.mobile{background-image:url(/img/mobile.svg);padding-left:70px;}
.bloc .cellbloc{padding:30px 25px 25px 25px;position:relative;}
.bloc .cellbloc.withtable{padding:0;}
.bloc .cellbloc.withtable .table {border:0;margin:0;}
.bloc label{display:block;font-size:14px;font-weight:600;line-height:30px;}


.tooltip{position:absolute;width:36px;height:36px;background:url(/img/i.svg) no-repeat center;background-size:66%;top:50%;margin:-15px 0 0 10px;cursor:pointer}
.tooltip:hover{background-color:var(--blue_light);border-radius:8px;}
.avatar {aspect-ratio:1;width:36px;border-radius:50%;}
.avatar.sm {width:20px;}

.badge {
	display: inline-block;
	background-color: var(--grey_border_light);
	color: var(--font_light);
	border-radius: 1rem;
	padding-inline: 10px;
	height: 24px;
	line-height: 24px;
	font-weight: 600;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.badge--notif {
	min-width: 8px;
	height: 20px;
	line-height: 20px;
	padding-inline: 6px;
	text-align: center;
	background-color: var(--red);
	color: white;
	font-weight: 700;
}
.badge.size-sm {
	height: 20px;
	line-height: 20px;
	font-size: 10px;
	padding-inline: 8px;
}

.badge.variant-muted {
	color: var(--blue);
	background-color: var(--blue_light);
}

.badge.variant-white {
	color: var(--font);
	background-color: var(--white);
	border: 1px solid var(--grey_border_light)
}
.badge[data-status='INFO']{
  background-color: var(--blue);
	color: white;
}
.badge[data-status='REGISTERED'],
.badge[data-status='SUCCESS'] {
  background-color: var(--green);
	color: white;
}
.badge[data-status='REJECTED'],
.badge[data-status='ERROR'] {
  background-color: var(--red);
	color: white;
}
.badge[data-status*='PENDING'] {
  background-color: var(--orange);
	color: white;
}
.badge:empty {
	display: none;
}


dl {
	border: 1px solid var(--grey_border);
	padding: 8px 12px;
	border-radius: 10px;
}

dl div {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

dl div:not(:last-child) {
	margin-bottom: 4px;
}

dl dt {
	flex-grow: 1;
}

dl dd {
	min-width: 12ch;
	flex-shrink: 0;
	font-weight: 600;
}

ul.list-style-checked {
	list-style: none;
}

ul.list-style-checked li {
	padding-left: 20px;
	position: relative;
}

ul.list-style-checked li:not(:last-child) {
	margin-bottom: 4px;
}

ul.list-style-checked li::before {
	content: '';
	display: block;
	background-image: url(/img/check_green.svg);
	background-position: center;
	background-size: 100%;
	width: 16px;
	aspect-ratio: 1;
	position: absolute;
	top: 2px;
	left: 0;
}

.mb-2 {
	margin-top: 8px;
}

.mt-4 {
	margin-top: 16px;
}

.infinite_scroll_wait{height:60px;background:url(/img/loader.svg) no-repeat center;}


/*============================
	TOOLS
============================*/
.tools{margin:25px 0;height:50px;}
.tools.empty{margin:0;height:30px;}
.tools span.filters_search { display: block; }
.tools span#switchcalls{background:var(--blue_light);display:block;height:40px;}
.tools span.callstype{float:left;width:auto;border:0;height:40px;line-height:40px;background:transparent;box-shadow:none;opacity:0.7;}
.tools span.callstype .underselect{max-width:200px;}
.tools span.callstype:before{height:40px;}
.tools span.callstype:hover{background:var(--white);}
.tools span.callstype.on{opacity:1}
.tools span.callspending{float:left;line-height:40px;padding:0 15px;cursor:pointer;border-radius:10px;opacity:0.7;transition:all ease 0.3s;}
.tools span.callspending:hover{background:var(--white);}

.tools span#switchcalls.all span.callstype{opacity:1;box-shadow: 0 0 5px rgba(0,0,0,0.05);background:var(--white);}
.tools span#switchcalls.pending span.callstype:before{display:none;}
.tools span#switchcalls.pending span.callspending{opacity:1;box-shadow: 0 0 5px rgba(0,0,0,0.05);background:var(--white);}

.tools span#filter_ivrs {

	display: block;
}
.tools span#filter_ivrs:not(.on) {
	display: none;
}
.tools span#filter_ivrs:not(.on) + * {
	margin-left: 0;
}
.tools span#filter_ivrs .select {
	width: calc(100% - 33px);
}
.tools span.ivrs {
	height: 40px;
	line-height: 40px;
	border: 0;
}
.tools span.ivrs:before{height:40px;}

.tools span.searchdate{display:block;}
.tools span.date{border:0;width:auto;height:40px;line-height:40px;min-width:150px;}
.tools span.date:before{height:40px;}
.tools span.date span.value{background:url(/img/calendar.svg) no-repeat 0 center;background-size:20px;padding-left:30px;width:calc(100% - 33px)}
.tools span.date .underselect ul{max-height:none;}
.tools span.date .underselect:before{left:auto;right:45px}
.tools span.date div.col{display:none;width:224px;float:left;position:relative;margin:0 20px;height:calc(316px + 38px);margin-bottom:20px;}
.tools span.date div.col .trigger_date{color:transparent;height:0;overflow:hidden;}
.tools span.date .moreaccurate{background:url(/img/search.svg) no-repeat 15px 13px;background-size:16px;padding-left:35px;color:var(--font_light);cursor:pointer;}
.tools span.date .moreaccurate:hover{text-decoration:underline;}
.tools span.date .btn.select_search{display:none;}
.tools span.date .btn.back_shortcut_date{display:none;}

.tools span.date.withdate .underselect{width:548px;max-width:548px;left:auto;right:-1px;}
.tools span.date.withdate .underselect .col{display:block;}
.tools span.date.withdate .underselect ul{display:none;}
.tools span.date.withdate .btn.select_search{display:block;float:right;margin-right:20px;}
.tools span.date.withdate .btn.back_shortcut_date{display:block;float:left;margin-left:20px;}

.tools input.search{height:40px;border:0;box-shadow:0 0 5px rgba(0,0,0,0.05),0 0 0 5px var(--blue_light);transition-property: none;}

.tools .btn.add{float:right;margin:0 0 0 10px;}

.tools .select { border-radius: 10px; }

#tools_calls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	height: auto;
}

#tools_calls #switchcalls {
	margin-right: auto;
}

#tools_calls > *:not(.clear, .btn) {
	padding: 5px;
	background: var(--blue_light);
	border-radius: 15px;
}

#tools_calls span.searchdate {
	margin-left: 0;
}


/*============================
	CALLS
============================*/
.open_popup[data-popup="calls_export_list_popup"] {
	display: flex;
	align-items: center;
	width: 32px; 
	height: 32px;
	overflow: hidden;
	white-space: nowrap;
}

.open_popup[data-popup="calls_export_list_popup"].add {
	background-image: none;
	padding: 5px;
	margin-top: 0!important;
}

.open_popup[data-popup="calls_export_list_popup"] .icon:first-child {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-inline: 4px 9px;
}

#calls_export_generate .cell.generate {
	margin-left: auto;
}

#calls_export_generate .line--flex {
	gap: 8px;
	padding-inline: 16px 10px;
}

#calls_export_table .line--flex {
	gap: 8px;
	padding-inline: 16px;
}

#calls_export_table .cell.export_date {
	flex-grow: 1;
}

#calls_export_table .cell.export_status {
	flex-basis: 15ch;
}

#calls_export_table .cell.length {
	flex-basis: 20ch;
	text-transform: lowercase;
}
#calls_export_table .cell.export_download,
#calls_export_table .cell.export_delete {
	flex-basis: 32px;
	min-height: 32px;
}

#calls_export_table .cell.export_download {
	margin-left: auto;
}
#calls_export_table .line:not([data-status="DONE"]) .cell .btn.download_calls_export {
	filter: grayscale(1);
	opacity: 0.6;
	pointer-events: none;
}

#stats{margin-bottom:20px;}
#stats .card{position:relative;height:60px;padding-top:90px;background:var(--white);border:1px solid var(--grey_border);border-radius:15px;width:calc(25% - 17px);margin-right:20px;float:left;text-align:center;}
#stats .card:before{content:"";position:absolute;width:54px;height:54px;background:url(/img/call_out.svg) no-repeat center center var(--blue_light);border-radius:50%;top:25px;left:50%;transform:translateX(-50%);}
#stats .card:last-child{margin-right:0;}
#stats .card label{display:block;color:var(--font_verylight);font-weight:700;font-size:12px;text-transform:uppercase;}
#stats .card strong{font-size:18px;color:var(--blue);}
#stats .card.answered:before{background-image:url(/img/call_answered.svg);background-color:var(--green_light);}
#stats .card.answered strong{color:var(--green);}
#stats .card.missed:before{background-image:url(/img/call_missed.svg);background-color:var(--red_light);}
#stats .card.missed strong{color:var(--red);}
#stats .card.pending:before{background-image:url(/img/pendingcalls.svg);background-color:var(--red_light);}
#stats .card.pending strong{color:var(--red);}

#cont_calls.wait{height:100px;background:url(/img/loader.svg) no-repeat center center var(--white);border-radius:15px;}
#cont_calls.empty{height:100px;background:url(/img/nocalls.svg) no-repeat center center var(--white);background-size: 24px;border-radius:15px;}

#cont_calls .line.selected {
	background-color: var(--blue_light);
	border-bottom-color: var(--background);
}
#cont_calls .line:where(:hover, .selected) .call_select { display: block; }
#app.is_admin #cont_calls .line:where(:hover, .selected) .number:before { 
	opacity: 0;
	transition: opacity 0.2s;
}

.call_select.on::after,
#cont_calls .line.selected .call_select::after {
	--check-size: calc(var(--select-size) + 6px);
	content: "";
	display: block;
	width: var(--check-size);
	height: var(--check-size);
	background: url(/img/check_green.svg) no-repeat center center;
	background-size: 100%;
	position: absolute;
	top: calc(var(--check-size) * -0.2);
	right: calc(var(--check-size) * -0.25);
}
#call_select_popover {
	display: flex;
	flex-direction: column;
	margin-left: 60px;
	margin-top: -14px;
	top: 100%;
}
#call_select_popover.on {
	margin-left: 70px;
}
#call_select_popover .btn.ghost {
	margin-top: 16px;
}
#handle_call_popover {
	width: min-content;
	max-width: calc(100vw - var(--offset-left));
}

.table{border:1px solid var(--grey_border);border-radius:15px;background:var(--white);margin-top:20px;}
.table.noborder{border:0;border-radius:0 0 15px 15px;margin-top:0px;}
.table.wait .body {
	height: 100px;
	background: url(/img/loader.svg) no-repeat center center var(--white);
	border-radius: 15px;
}
.table.wait .body > * {
	display: none;
}
.table .head{display: flex;position:relative;background:var(--line_hover);height:40px;line-height:40px;text-transform:uppercase;font-weight:700;padding-left:20px;font-size:11px;border-bottom:1px solid var(--grey_border);border-radius:15px 15px 0 0;}
.table .cell{display:inline-block;float:left;color:var(--font_light);flex-shrink: 0;min-width: 0;}
.table .head .number{width: 280px;}
.table:not([data-ivrs="multiple"]) .head .line .number { width: 400px; }
.table .head .flow{flex-grow: 1;}
.table .head .user{width:95px;text-align:center;}
.table .head .time{width:290px;}
.table .head .listen{width:100px;text-align:center;}
.table .head .transcript{width:100px;text-align:center;}
.table .head .comment{width:100px;}
.table .head .call{width:72px;}
.table .line{height:60px;border-bottom:1px solid var(--grey_border);padding-left:20px;position:relative;}
.table .line:hover{background-color:var(--line_hover);}
.table .line--flex {display:flex;align-items: center;}
.table .line--flex .cell {min-width:0;float:none;}
.table.no-head .line:first-child{border-radius:15px 15px 0 0;}
.table .line:last-child{border-bottom:0;border-radius:0 0 15px 15px;}
.table .line.cursor{cursor:pointer;}
.table--no-header .line:first-child { border-radius: 15px 15px 0 0; }
.table--no-header .line:last-child { border-bottom-left-radius: 15px;  border-bottom-right-radius: 15px; }
.table .call_select { 
	--select-size: 15px;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: var(--select-size);
	height: var(--select-size);
	background: var(--white);
	border: 1px solid var(--grey_border);
	border-radius: 5px;
	cursor: pointer;
	user-select: none;
}
.head .call_select {
	margin-inline: 8px 28px;
}

.line .call_select {
	display: none;
	position: absolute;
	top: 50%;
	left: calc((32px - var(--select-size) - 1px) / 2);
	transform: translateY(-50%);
}
.line.selected.remove {
	overflow: hidden;
	height: 0;
	background-color: var(--red_light);
	border-bottom-color: var(--background);
	transition: all 0.4s;
}
.table .line .cell{position:relative;display:block;}
.table .line[data-call_id]{display:flex;}
.table .line .number{display:flex;width:200px ;padding:0 30px 0 50px;align-items:center;min-width: 0;}
.table:not([data-ivrs="multiple"]) .line .number { width: 300px; }
.table .line .number:before{content:"";position:absolute;top:14px;left:0;display:block;width:32px;height:32px;background:url(/img/call_answered.svg) no-repeat center center var(--green_light);background-size:20px;border-radius:50%;}
.table .line .number > div { min-width: 0; line-height: 0; }
.table .line .number > div > div { display: flex; align-items: center; min-width: 0; line-height: 0; margin-bottom: -3px;}
.table .line .number .n{font-size:14px;display:inline-flex;align-items:center;gap:0.5ch;font-weight:600;min-width: 0;}
.table .line .number .n > span {
	overflow: hidden;white-space:nowrap;text-overflow:ellipsis;
	min-width: 0;
}
.table .line .number > div > * { max-width: 100%; }
.table .line .number .n img{width:20px;height:13px;border-radius:5px;margin-right:0px;}
.table .line .number .n img.contact_int_logo{width:13px;height:13px;border-radius:5px;border: 1px solid var(--grey_border);padding: 3px;}
.table .line .number .n em{display:none;vertical-align:middle;width:32px;height:32px;background:url(/img/plus.svg) no-repeat center center;background-size:16px;cursor:pointer;transform:scale(0.7);filter:grayscale(1);transition:all ease 0.1s;border-radius:50%;}
.table .line:hover .number .n em{display:inline-block;}
.table .line .number .n em:hover{transform:scale(1);filter:grayscale(0);background-color:var(--blue_light)}
.table .line .number .contact{font-size:12px;color:var(--font_light);height:24px;line-height:24px;overflow:hidden;display:none;text-overflow:ellipsis;white-space:nowrap;}
.table .line .number .contact img{width:20px;height:13px;border-radius: 5px;}
.table .line.withcontact .number > div > div { margin-bottom: -3px; }
.table .line.withoutcontact .number .n{line-height: 32px;display: flex;align-items: center;gap:4px}
.table .line.withcontact .number .n{line-height:28px;margin:0px 0 -3px 0;}
.table .line.withcontact .number a:not(:hover){text-decoration: none;}
.table .line.withcontact .number .contact{display:inline-flex;gap:0.8ch;align-items: center;}
.table .line .contact_int_logo { border: 1px solid; }
.table .line .btn.handle_call_trigger {
	--pr: 3px;
	text-align: left;
	padding-inline: 5px var(--pr);
	width: auto;
	height: 28px;
	line-height: 28px;
	background-color: var(--red_light);
	border-radius: 6px 0 0 6px;
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translateY( -50%);
	z-index: 0;
	transition: 0.2s all;
}
.table .line .btn.handle_call_trigger.handled {
	background-color: var(--white);
	border: 1px solid var(--grey_border);
	pointer-events: none;
}
.table .line .btn.handle_call_trigger.handled{ opacity:0.6; }
.table .line .btn.handle_call_trigger:hover{ --pr: 5px }
.table .line .btn.handle_call_trigger.handled:hover{ background-color: var(--white); --pr: 3px }
.table .line:not(.pending,.handled) .btn.handle_call_trigger{ display: none; }
.table .line.missed .number:before{background-image:url(/img/call_missed.svg);background-color:var(--red_light);}
.table .line.voicemail .number:before{background-image:url(/img/call_voicemail.svg);background-color:var(--orange_light);}
.table .line.out .number:before{background-image:url(/img/call_out.svg);background-color:var(--blue_light);}
.table .line .ivr_label{display: none;}
.table .line.displayivr .ivr_label{display:inline-flex;}
.table .line:not(.displayivr) .scenario_label{margin-left: 0;}
.table .line:not(.displayivr) .scenario_label::before{content: none;}
.table .line .flow {flex: 1;display: flex;align-items: center;}
.table .line .flow .ivr {min-width: 0;}
.table .line .user{width:95px;height:60px;display: flex; align-items: center;justify-content: center;}
.table .line .user img{width:32px;height:32px;border-radius:50%;}
.table .line .user .user_action {display:none;}
.table .line .user .user_initials { display: none; color: var(--blue); width: 36px; height: 36px; line-height: 36px; background-color: var(--blue_light);font-weight: 600;white-space: nowrap; overflow: hidden;text-overflow: ellipsis; text-align: center;border-radius: 50%;font-size: 12px;box-sizing: border-box; cursor: default;padding-inline:6%;}
.table .line .user .user_tooltip { position: relative; }
.table .line .user .user_tooltip.has_initials .user_initials { display: block; }
.table .line .user .user_tooltip.has_initials:not(.deleted) img { display: none; }
.table .line.missed .user img{display:none;}
.table .line.voicemail .user img{display:none;}
.table .line .time{width:290px;line-height:60px;height:60px;}
.table .line .time .durations{font-size:11px;margin-left:15px;}
.table .line .time .durations .wait{background:url(/img/time_wait.svg) no-repeat left center;background-size:13px;padding-left:16px;line-height:14px;margin-right:10px;color:var(--font_verylight);}
.table .line .time .durations .incall{background:url(/img/time_answered.svg) no-repeat left center;background-size:14px;padding-left:16px;line-height:14px;color:var(--green)}
.table .line.missed .time .durations .incall{display:none;}
.table .line.out .time .durations .incall{background-image:url(/img/time_out.svg);color:var(--blue);}
.table .line.voicemail .time .durations .incall{background-image:url(/img/time_voicemail.svg);color:var(--orange);}
.table .line .listen{display:flex;width:100px;text-align: center;gap: 10px;justify-content: center;}
.table .line .play.hide{visibility:hidden;pointer-events:none;}
.table .line .play{display:inline-block;background:url(/img/play.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin-top:14px;filter:grayscale(100%);opacity:0.5;}
.table .line .play:hover{background-color:var(--blue_light);filter:grayscale(0);opacity:1;}
.table .line .play.on{background-color:var(--blue_light);filter:grayscale(0);opacity:1;background-image:url(/img/stop.svg);}
.table .line.missed .play{visibility:hidden;}
.table .line .transcript{display:inline-block;background:url(/img/transcription_icon_done.svg) no-repeat center;background-size:20px;width: 32px;height:32px;border-radius:50%;cursor:pointer;margin-top:14px;filter:grayscale(100%);opacity:0.5;}
.table .line .transcript.hide{visibility: hidden;pointer-events: none;}
.table .line .transcript:hover{background-color:var(--blue_light);opacity:1;filter:grayscale(0);}
.table .line .transcript span{position:absolute;width:220px;padding:15px;border-radius:15px;background:var(--white);bottom:32px;left:-80px;box-shadow:0 0 15px rgba(0,0,0,0.05);pointer-events:none;opacity:0;transition:all ease 0.15s;}
.table .line .transcript span:before{content:"";position:absolute;width:15px;height:15px;background:var(--white);transform:rotate(45deg);bottom:-7px;left:88px;}
.table .line .transcript:hover span{opacity:1;bottom:37px;}
.table .line .call_comment{background:url(/img/comment.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:14px 12px 0 0;filter:grayscale(100%);opacity:0.5;}
.table .line .call_comment.on{filter:grayscale(0);opacity:1;}
.table .line .call_comment span{position:absolute;width:220px;padding:15px;border-radius:15px;background:var(--white);bottom:32px;left:-80px;box-shadow:0 0 15px rgba(0,0,0,0.05);pointer-events:none;opacity:0;transition:all ease 0.15s;}
.table .line .call_comment span:before{content:"";position:absolute;width:15px;height:15px;background:var(--white);transform:rotate(45deg);bottom:-7px;left:88px;}
.table .line .call_comment:hover{background-color:var(--blue_light);filter:grayscale(0);opacity:1;}
.table .line .call_comment:active{background-color:var(--blue_light_hover);}
.table .line .call_comment.on:hover span{opacity:1;bottom:37px;}
.table .line .call_star{background:url(/img/star.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:14px 24px 0 0;opacity:0.5;filter:grayscale(100%);}
.table .line .call_star.STAR1{background-image:url(/img/star_STAR1.svg);opacity:1;filter:grayscale(0);}
.table .line .call_star.STAR2{background-image:url(/img/star_STAR2.svg);opacity:1;filter:grayscale(0);}
.table .line .call_star.STAR3{background-image:url(/img/star_STAR3.svg);opacity:1;filter:grayscale(0);}
.table .line .call_star.CHECK{background-image:url(/img/star_CHECK.svg);opacity:1;filter:grayscale(0);}
.table .line .call_star.WARNING{background-image:url(/img/star_WARNING.svg);opacity:1;filter:grayscale(0);}
.table .line .call_star:hover{background-color:var(--blue_light);opacity:1;}
.table .line .call_launch{background:url(/img/phonefilled.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:14px 40px 0 0;filter:grayscale(100%);opacity:0.5;}
.table .line .call_launch:hover{background-color:var(--blue_light);filter:grayscale(0);opacity:1;}
.table .line .call_launch:active{background-color:var(--blue_light_hover);}
.table .line .call_launch[data-dialto=unknown]{visibility:hidden;}
.table .line .call_detail{position:absolute;width:30px;height:60px;top:0;right:-31px;cursor:pointer;overflow:hidden;filter:grayscale(100%);opacity:0.5;}
.table .line .call_detail:before{content:"";position:absolute;width:30px;height:18px;background:url(/img/more.svg) no-repeat center var(--white);border:1px solid var(--grey_border);top:19px;left:-31px;border-radius:0 5px 5px 0;transition:all ease 0.5s;}
.table .line:hover .call_detail:before{left:-10px;transition:all ease 0.1s;}
.table .line:hover .call_detail:hover{opacity:1;filter:grayscale(0);}
.table .line:hover .call_detail:hover:before{left:-3px;transition:all ease 0.1s;}
#call_wait{height:60px;background:url(/img/loader.svg) no-repeat center;border-top:1px solid var(--grey_border);}
.ivr { display: flex; z-index: 0; }
.ivr .ivr_label { position: relative; z-index: 1; flex-shrink: 0;}
.ivr .ivr_label > * { color: inherit; cursor: default; }
.ivr .scenario_label { z-index: 1; flex-shrink: 0; background-color: var(--font_light); color: var(--grey_border_light); }
.ivr .scenario_label:empty { display: none; }
.ivr .scenario_label.open { background-color: var(--luminous_green); color: var(--white); }
.ivr .scenario_label.oncall { background-color: var(--font_verylight); color: var(--white); }
.ivr .scenario_label.closed { background-color: var(--grey_border_dark); color: var(--white); }
.ivr .menu_label { padding-left: 16px; margin-left: -11px; z-index: 0; border-top-left-radius: 0;border-bottom-left-radius: 0; }
.ivr_label[style*='--bg-color'] {
	background-color: var(--bg-color);
	color: white;
}
.ivr .ivr_label + .scenario_label { margin-left: 24px; position: relative; overflow: visible; }
.ivr .ivr_label + .scenario_label::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background: url(/img/arrow.svg) no-repeat center  / 16px;
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.4; 
}
.ivr .ivr_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: absolute;
	inset: 0 10px;
}
.ivr .ivr_number { display: inline-block; width: 16ch; opacity: 0; pointer-events: none; }
.ivr .ivr_name:empty { display: none; }
.ivr .ivr_name:empty + .ivr_number,
.ivr .ivr_label:hover .ivr_number {
	opacity: 1;
	pointer-events: all;
}
.ivr .ivr_number,
.ivr .ivr_label:hover .ivr_name {
	opacity: 0;
	pointer-events: none;
}
.ivr .ivr_name:empty + .ivr_number {
	display: inline;
}

/* special table billing */
.table .line .invoicedate{line-height:20px;width:200px;margin-top:10px;}
.table .line .type{line-height:60px;width:200px;color:var(--black);}
.table .line .amount{line-height:60px;width:200px;color:var(--green);font-size:20px;}
.table .line .status{line-height:28px;padding:0 10px;border:1px solid var(--green);color:var(--green);border-radius:5px;margin-top:15px;}

.table .line .pay{line-height:60px;margin-left:20px;}
.table .line .cell.download{background:url(/img/download.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:14px 40px 0 0;filter:grayscale(100%);opacity:0.5;float:right;margin-right:30px;}
.table .line .cell.download:hover{background-color:var(--blue_light);filter:grayscale(0);opacity:1;}
.table .line.PENDING .status{border:1px solid var(--orange);color:var(--orange);}
.table .line.PENDING .amount{color:var(--orange);}
.table .line.ABORT .status,.table .line.ISSUE .status{border:1px solid var(--grey_border_dark);color:var(--font_light);}
.table .line.ABORT .amount,.table .line.ISSUE .amount{color:var(--font_light);}
.table .line.LOST .status{border:1px solid var(--red);color:var(--red);}
.table .line .linktopay{float:right;line-height:60px;margin-right:20px;display:none;}
.table .line .linktopay a{color:var(--blue);font-weight:700;display:inline-block;line-height:20px;background:url(/img/creditcard.svg) no-repeat;padding-left:25px;background-size:20px;text-decoration:none;}
.table .line .linktopay a:hover{text-decoration:underline;}
.table .line.PENDING .linktopay{display:block;}
.table .line.PENDING .cell.download{display:none;}








/* popup call detail */
.call_detail_h2{position:relative;padding-left:55px;line-height:40px;margin-bottom: 24px;}
.call_detail_h2:before{content:"";position:absolute;width:40px;height:40px;border-radius:50%;top:0;left:0;background-repeat:no-repeat;background-position:center;background-size:24px;}
.call_detail_h2.missed:before{background-image:url(/img/call_missed.svg);background-color:var(--red_light);}
.call_detail_h2.answered:before{background-image:url(/img/call_answered.svg);background-color:var(--green_light)}
.call_detail_h2.voicemail:before{background-image:url(/img/call_voicemail.svg);background-color:var(--orange_light);}
.call_detail_h2.out:before{background-image:url(/img/call_out.svg);background-color:var(--blue_light);}
.call_detail_h2 span.number{display:block;font-size:12px;color:var(--font_light);line-height:14px;}
.call_detail_h2 img{width:24px;height:16px;border-radius:5px;margin-right:5px;vertical-align:middle}
.call_detail_group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30ch,1fr));
	gap: 8px
}

.call_detail_group .call_detail_row {
	background-color: var(--grey_border_light);
	padding: 12px;
	border-radius: 15px;
}

.call_detail_row {display: flex; gap: 3px 8px;}
.call_detail > * + * {margin-top: 20px;}
.call_detail_label {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 150px;
	color: var(--font_light);
	position: relative;
	padding-left: 24px;
}
.call_detail_label::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	background:  url(/img/call_detail_date.svg) no-repeat center / 90%;
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
	opacity: 0.4;
}
.date .call_detail_label::before {
	background-image: url(/img/call_detail_date.svg);
}
.wait_duration .call_detail_label::before {
	background-image: url(/img/call_detail_wait.svg);
}
.incall_duration .call_detail_label::before {
	background-image: url(/img/call_detail_duration.svg);
}
.callid .call_detail_label::before {
	background-image: url(/img/link.svg);
}
.incall_ivr .call_detail_label::before {
	background-image: url(/img/ivr_menu.svg);
}
.menu_digit .call_detail_label::before {
	background-image: url(/img/dialpad.svg);
}
.call_hangup_cause .call_detail_label::before {
	background-image: url(/img/call_hangup.svg);
	filter: grayscale(1);
	opacity: 0.7;
}
.agents .call_detail_label::before {
	background-image: url(/img/ivr_agent.svg);
}
.transcript .call_detail_label::before {
	background-image: url(/img/transcription_icon_done.svg);
	filter: grayscale(1);
	opacity: 0.7;
}
.record .call_detail_label::before {
	background-image: url(/img/play.svg);
	filter: grayscale(1);
	opacity: 0.7;
}



.call_detail_value {display: flex;align-items: center;font-size: 105%;font-weight: 600;}
.call_detail_row.column {flex-direction: column;}
.call_detail_row.column .call_detail_value {padding-left: 24px;}
#call_detail_flow > .call_detail_row + .call_detail_row {margin-top: 20px;}
#call_detail_agents .call_detail_label { align-self: baseline; }
.callid span.copy{display:inline-block;vertical-align:bottom;width:24px;height:24px;background:url(/img/copy.svg) no-repeat center center;background-size:12px;cursor:pointer;opacity:0.5;border-radius:50%;margin-left:10px;}
.callid span.copy:hover{background-color:var(--blue_light_hover);}
.call_detail_row.record{display: none}
.call_detail_comment{display:none;width:calc(100% - 55px);border-radius:15px;height:100px;margin-top:20px;background:url(/img/comment_black.svg) no-repeat 15px 15px var(--grey_head);background-size:16px;padding:8px 15px 0px 40px;box-shadow:none;border:0;resize:none;line-height:24px}
#popup .save_comment {display:none;}
.call_detail_star{display:none;list-style-type:none;margin-top:34px;}
.call_detail_star li{display:block;float:left;width:15%;height:40px;border-radius:15px;background-color:var(--white);opacity:0.5;margin-left:2%;background-repeat:no-repeat;background-position:center;background-size:24px;cursor:pointer;}
.call_detail_star li:hover{background-color:var(--grey_head);opacity:0.8;}
.call_detail_star li:first-child{margin-left:0;}
.call_detail_star li.none{background-image:url(/img/star.svg);filter:grayscale(100%);opacity:0.3;}
.call_detail_star li.STAR1{background-image:url(/img/star_STAR1.svg);}
.call_detail_star li.STAR2{background-image:url(/img/star_STAR2.svg);}
.call_detail_star li.STAR3{background-image:url(/img/star_STAR3.svg);}
.call_detail_star li.CHECK{background-image:url(/img/star_CHECK.svg);}
.call_detail_star li.WARNING{background-image:url(/img/star_WARNING.svg);}
.call_detail_star li.on{background-color:var(--grey_head);opacity:1;}
.call_detail_add_to_blacklist::before { 
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: middle;
	background-image: url(/img/block.svg);
	background-size: 100%;
	background-position: center;
	filter:invert(1);
	opacity: 0.3;
}

.call_detail_h3 {
	margin-top: 20px;
	margin-bottom: 8px;
}

#call_detail_flow {clear: both; margin-top: 20px;}
#call_detail_metro {
	width:100%;
}
#call_detail_metro > * {
	padding-block: 3px;
}
.metro_line {
	display: grid;
	grid-template-columns: 170px minmax(10ch, 1fr) minmax(15ch, 1.5fr);
	align-items: center;
	gap: 4px 8px;
	font-weight: 700;
	border-radius: 50px;
}
.metro_user {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	font-size: 80%;
}
.metro_user > *,
.metro_line > * {
	min-width: 0;
}
.metro_user_avatar,.metro_index{flex-shrink: 0;}
.metro_user_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.metro_line .metro_location {
	font-size: 80%;
	text-align: left;
	text-transform: lowercase;
	padding-inline: 30px 10px;
	position: relative;
}
.metro_line .metro_location::before {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	filter: grayscale(1);
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}
.webapp::before {
	background: url(/img/laptop.svg) no-repeat center center;
	background-size: 14px;
}
.mobile::before {
	background: url(/img/mobile.svg) no-repeat center center;
	background-size: 12px;
}
.metro_location * { color: inherit; }
.metro_location {
	display: flex;
	color: var(--font_verylight);
}
.metro_location .cause {
	flex-grow: 1;
	min-width: 0;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metro_location .cause.hidden { display: none; }
.metro_location.answered .cause {color:var(--green);}
.metro_location:where(.no_answer, .call_rejected, .preanswer_rejected_by_agent) .cause {color:var(--red);}
.metro_line .number { padding-right: 5px; }


#popup_content .btn.save_comment{margin-top:5px;margin-right:0;}

.content_call_actions{display:flex;align-items:center;margin-top:20px;margin-left:20px;gap:6px;flex-wrap: wrap;}
.call_detail_archive,.call_detail_download{display:none;}
.call_now{height:60px;line-height:60px;border-radius:30px;padding:0 25px 0 55px;display:inline-block;background:url(/img/dialer.svg) no-repeat 20px center var(--blue);background-size:20px;color:var(--white);cursor:pointer;}
.call_now:hover{background-color:var(--blue_hover);}
.call_now:active{background-color:var(--blue_active);}




/*============================
	PLAYER
============================*/
#player{position:fixed;z-index:60;bottom:-100px;left:70px;right:0;background:var(--white);height:100px;transition:all ease 0.15s;}
#player.on{bottom:0;box-shadow:0 0 30px rgba(0,0,0,0.1);}
#player .content{display:flex;align-items: center;justify-content: center;gap:25px;width:980px;margin:0 auto;height:100%;}
#player .content > * {flex-shrink: 0;}
#player .btn_stop{display:block;width:50px;height:50px;background:url(/img/stop.svg) no-repeat center;background-size:40px;cursor:pointer;border-radius:50%;}
#player .btn_stop:hover{background-color:var(--blue_light)}
#player .btn_pause{display:block;width:50px;height:50px;background:url(/img/play.svg) no-repeat center;background-size:40px;cursor:pointer;border-radius:50%;}
#player .btn_pause:hover{background-color:var(--blue_light)}
#player.onair .btn_pause{background-image:url(/img/pause.svg);}
#player.pause .btn_pause{background-image:url(/img/play.svg);}
#player .progressbar{position:relative;height:10px;border-radius:5px;width:calc(100% - 260px);background-color:var(--blue_light);cursor:pointer;margin-inline:10px;}
#player .progressbar div.bar{background:var(--blue);width:0;border-radius:5px;height:100%;transition:0.5s;pointer-events:none;position:relative;}
#player .progressbar div.hover{background:var(--blue);opacity:0.2;width:0;border-radius:5px;height:100%;pointer-events:none;position:absolute;top:0;}
#player .btn_speed{position:relative;font-size:16px;width:45px;padding-left:5px;height:50px;line-height:50px;text-align:center;border-radius:25px;cursor:pointer;transition:height ease 0.15s;}
#player .btn_speed strong{position:absolute;bottom:0;left:0;color:var(--blue);width:50px;height:50px;z-index:1;}
#player .btn_speed strong:before{content:"x";font-size:12px;left:8px;bottom:0}
#player .btn_speed ul{list-style-type:none;position:absolute;bottom:-5px;left:-5px;width:50px;border-radius:60px;height:0;padding-top: 5px;padding-inline: 5px;overflow:hidden;transition:all ease 0.15s;opacity:0;}
#player .btn_speed ul li{width:50px;height:50px;border-radius:50%;font-size:12px;font-weight:700;}
#player .btn_speed ul li:hover{background:var(--blue_light_hover);background:var(--white);color:var(--blue);}
#player .btn_speed:hover{background-color:var(--blue_light);}
#player .btn_speed.on{background-color:var(--blue_light);box-shadow:0 0 0 5px var(--blue_light);}
#player .btn_speed.on ul{height: 350px;opacity: 1;background: var(--blue_light);}
#player .btn_speed.on.display ul{height:350px;}
#player .btn_download{display:block;width:50px;height:50px;background:url(/img/download.svg) no-repeat center;background-size:30px;cursor:pointer;border-radius:50%;}
#player .btn_download:not([href]) {display:none;}
#player .btn_download:hover{background-color:var(--blue_light);}
#player .duration{position:absolute;right:-50px;width:100px;text-align:center;padding-top:12px;opacity:0.7;font-size:11px;top:10px;}
#player .duration:before{content:"";position:absolute;width:16px;height:16px;background:url(/img/expand.svg) no-repeat;background-size:16px;top:0;left:42px;transform:rotate(180deg);}
#player .time{position:absolute;left:0;width:100px;text-align:center;padding-top:12px;opacity:0.7;font-size:11px;top:-40px;transform:translateX(-50%);transition:0.5s;}
#player .time:before{content:"";position:absolute;width:16px;height:16px;background:url(/img/expand.svg) no-repeat;background-size:16px;top:25px;left:42px;}
#player .nocontent{display:none;}
#player.empty .content{display:none;}
#player.empty .nocontent{display:block;position:absolute;z-index:2;width:100%;height:100%;background:var(--red_light);font-size:20px;line-height:100px;}
#player.jump .progressbar div.bar{transition:0.1s;}
#player.jump .time{transition:0.1s;}



/*============================
	IVR SETTINGS
============================*/

#setting_number{float:left;margin:5px 0 0 0;font-size:26px;font-weight:900;position:relative;}
#setting_number span{position:relative;}
#setting_number span:before{content:"";position:absolute;width:104%;height:10px;background:var(--blue);opacity:0.3;left:-2%;bottom:0;transform:rotate(-1deg);}

#setting_number_choice{font-size:26px;border:0;box-shadow:none;background:transparent;padding:0;width:auto;float:left;padding-right:0px;min-width:0;}
#setting_number_choice .value{font-weight:900;padding-left:0;padding-right:34px;font-size:inherit;width:auto}
#setting_number_choice .value img {display: none;}

.edit_ivr {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(/img/setting_blue.svg) no-repeat center center;
	background-size: 20px;
	vertical-align: middle;
	margin-inline: 4px 12px;
	cursor: pointer;
	filter: grayscale(1);
	opacity: 0.7;
	border-radius: 2px;
	flex-shrink: 0;
	min-width: 0;
}

.edit_ivr:hover {
	background-color: var(--blue_light);
	box-shadow: 0 0 0 2px var(--blue_light);
	filter: none;
	opacity: 1;
}

#select_color .color_point{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:text-bottom;margin-right:8px;}

.ivrs.select {
	min-width: 260px;
	padding-left: 8px;
	padding-right: 25px;
}

.ivrs.select img {
	margin: 0 0 0 10px;
	width: auto;
	height: 12px;
	border-radius: 2px;
	float: none;
}

.ivrs.select .value {
	padding-top: 0;
}
.ivrs.select ul li.disabled::before {
	content: none;
}
.ivrs.select ul li[data-value] {
	user-select: none;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding-left: 8px;
}

.ivrs.select:not([data-value=""])[data-value] .value,
.ivrs.select ul li[data-value] {
	display: flex;
	align-items: center;
	font-size: 14px;
}

.ivrs.select:where([data-value=""], :not([data-value])) .value {
	padding-left: 7px;
}

.ivrs.select .underselect {
	min-width: 100%;
	max-width: 100vw;
	width: max-content;
}

.ivrs.select .ivr_name {
	min-width: 0;
	width: 16ch;
	background-color: var(--bg-color);
	color: white;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: static;
}

.ivrs.select .ivr_number {
	margin-left: 1ch;
	opacity: 1;
}


.add_number{display:inline-block;margin-top:25px;color:var(--blue);font-weight:600;cursor:pointer;background:url(/img/plus.svg) no-repeat 0 7px;background-size:16px;padding-left:20px;line-height:30px;margin-left:5px;}
.add_number:hover{text-decoration:underline;}

#tools_ivrsettings {display: flex; align-items: center;}
#tools_ivrsettings .add {margin-left: auto;white-space:nowrap;}
#page_ivrsettings .bloc.first .cellbloc { min-height: 400px; }

.planning_actions {
	margin-left: 100px;
	max-width: 680px;
	margin-bottom: min(5svh, 20px);
	display: flex;
	justify-content: space-around;
	gap: 20px;
} 
.planning_actions p { 
	/* flex: 1; */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--font_light);
	max-width: 30ch;
	text-wrap: balance;
}
.planning_actions img {
	width: 70px;
	height: 36px;
	object-fit: contain;
	object-position: center;
	max-width: 100%;
	height: auto;
}
#planning{width:680px;margin-left:100px;}
#planning .day{height:60px;position:relative;}
#planning .name{line-height:60px;width:100px;position:absolute;left:-100px;top:0;text-transform: capitalize;}
.planning{position:absolute;width:100%;height:20px;border-radius:10px;background-color:var(--blue_light);background-color:#f4f6fa;top:20px;left:0;}
.planning .plage{position:absolute;height:20px;}
.planning .plage.isnew > :where(span, .plage_launch) {opacity: 0.5;pointer-events: none;}
.planning .plage > span{display:block;position:absolute;top:0;height:20px;width:20px;transition:left ease 0.15s,right ease 0.15s;border-radius:50%;margin:-4px 0 0 -4px;border:4px solid var(--white);cursor:-webkit-grab;cursor:grab;background:var(--color);box-shadow:0 0 5px rgba(0,0,0,0.2);}
.planning .plage span.cursor_start{left:0px;}
.planning .plage span.cursor_end{right:0px;margin:-4px -4px 0 0;}
.planning .plage>span strong {
	position: absolute;
	line-height: normal;
	font-weight: 400;
	font-size: 12px;
	bottom: calc(100% + 8px);
	left: 50%;
  transform: translateX(-50%);
	width: max-content;
	text-align: center;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: all ease 0.2s;
}
.planning .plage span.cursor_end strong{	top: calc(100% + 8px); bottom:auto; }
.planning .plage:hover > span{box-shadow:0 0 10px rgba(0,0,0,0.2);}
.planning .plage div.plage_launch{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border-radius:10px;background:var(--color);}
.planning .plage.active > span{cursor:-webkit-grabbing;cursor:grabbing;box-shadow:0 0 2px rgba(0,0,0,0.3);}
.planning .plage.isnew .popover.on {
	margin-top: 6px;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.plage .popover ul {
	margin-bottom: 10px;
}
.plage .popover li {
	width: 100%;
	margin-inline: 0;
	padding-inline-start: 35px;
	min-width: max-content;
}
.plage .popover .picto_scenario {
	display: inline-block;
	margin: 0;
	margin-right: 8px;
	vertical-align: middle;
	float: none;
}
#apply_all_days{position:absolute;width:30px;height:30px;border-radius:50%;background:url(/img/down.svg) no-repeat center;filter:grayscale(1);opacity:0.5;cursor:pointer;right:-55px;top:15px;}
#apply_all_days:hover{filter:grayscale(0);opacity:1;background-color:var(--blue_light);}
#apply_all_days span{position:absolute;white-space:nowrap;padding:15px;border-radius:15px;background:var(--white);bottom:27px;right:-40px;box-shadow:0 0 15px rgb(0 0 0 / 5%);pointer-events:none;opacity:0;transition:all ease 0.15s;}
#apply_all_days span:before{content:"";position:absolute;width:15px;height:15px;background:var(--white);transform:rotate(45deg);bottom:-7px;right:47px;}
#apply_all_days:hover span{opacity:1;bottom:32px;}
#howtouse{position:absolute;width:300px;padding:25px;background-color:#f4f6fa;height:calc(100% - 50px);border-left:1px solid var(--grey_border);right:0;top:0;border-bottom-right-radius:15px;}
#captions{list-style-type:none;border-bottom:1px solid var(--grey_border);padding-bottom:20px;margin-bottom:20px;}
#captions li{height:30px;line-height:30px;border-radius:10px;}
#captions li span:not([class]){display:block;float:left;height:14px;width:14px;border:3px solid var(--white);box-shadow:0 0 5px rgba(0,0,0,0.2);border-radius:50%;margin:5px 10px;}
#captions li em{font-style:normal;float:right;color:var(--blue);font-weight:600;margin-right:15px;}
#captions li:nth-child(1) span:not([class]){background:#f4f6fa;}
#captions li:nth-child(2) span:not([class]){background:var(--luminous_green);}
#captions li:nth-child(3) span:not([class]){background:var(--font_verylight);}
#captions li.add_scenario{display:flex; align-items: center; padding-left: 40px;background:url(/img/plus.svg) no-repeat 10px center;background-size:20px; color:var(--blue);font-weight:600;cursor:pointer;line-height: 1;height: auto;}
#captions li.add_scenario:hover{text-decoration:underline;}
#captions li.add_scenario .tooltip {display: inline-block; position: static;margin: 0 0 0 4px; vertical-align: middle;flex-shrink: 0;}
.go_to_scenario_setting { display:inline-block;width:16px;height:16px;background: url(/img/setting_blue.svg) no-repeat center center; background-size: 16px; vertical-align: middle;margin-left: 4px;cursor: pointer; filter: grayscale(1); opacity: 0.7; border-radius: 2px;}
.go_to_scenario_setting:hover {background-color:var(--blue_light);box-shadow: 0 0 0 2px var(--blue_light);filter: none;opacity: 1;}
[data-popup="remove_scenario"] { display:inline-block;width:16px;height:16px;background: url(/img/trash.svg) no-repeat center center; background-size: 16px; vertical-align: middle;margin-left: 4px;cursor: pointer; filter: grayscale(1); opacity: 0.7; border-radius: 2px; }
[data-popup="remove_scenario"]:hover {background-color:var(--red_light);box-shadow: 0 0 0 2px var(--red_light);filter: none;opacity: 1;}
#planning_instructions{list-style-type:none;margin-top:10px;border-bottom:1px solid var(--grey_border);margin-bottom:20px;}
#planning_instructions li{background-repeat:no-repeat;background-size:20px;padding-left:40px;background-position:10px 0;line-height:20px;margin-bottom:20px;}
#planning_instructions li:nth-child(1){background-image:url(/img/click.svg);}
#planning_instructions li:nth-child(2){background-image:url(/img/mouse.svg);}
#input_ivr_timezone{font-size:11px;}

.cellbloc .sep{display:block;height:1px;width:calc(100% + 50px);background:var(--grey_border);margin:0 0 30px -25px;}
.cellbloc[data-scenario_id] { scroll-margin-block-start: 150px ; }
ul.checkbox{list-style-type:none;margin-bottom:30px;}
ul.checkbox li{display:inline-block;position:relative;height:40px;line-height:40px;cursor:pointer;padding:0 30px 0 65px;background-color:var(--line_hover);background-repeat:no-repeat;background-position:33px center;background-size:24px;border-radius:8px;margin-right:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;}
ul.checkbox li:before{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--white);top:12px;left:8px;border:1px solid var(--grey_border_dark);}
ul.checkbox li:hover{background-color:var(--blue_light);}
ul.checkbox li.ivr_dispatch[data-action=ringall]{background-image:url(/img/forward_simultaneous.svg);}
ul.checkbox li.ivr_dispatch[data-action=topdown_ordered]{background-image:url(/img/forward_cascade_order.svg);background-size:33px;padding-left:74px;}
ul.checkbox li.ivr_dispatch[data-action=topdown_random]{background-image:url(/img/forward_cascade_random.svg);background-size:31px;padding-left:70px;}
ul.checkbox li.ivr_action[data-action=queue]{background-image:url(/img/ivr_agent.svg);}
ul.checkbox li.ivr_action[data-action=menu]{background-image:url(/img/ivr_menu.svg);}
ul.checkbox li.ivr_action[data-action=announce]{background-image:url(/img/ivr_announce.svg);}
ul.checkbox li.on{background-color:var(--blue_light);cursor:default;}
ul.checkbox li.on:before{border-color:var(--blue);}
ul.checkbox li.on:after{content:"";position:absolute;display:block;width:6px;height:6px;background:var(--blue);top:17px;left:13px;border-radius:50%;}
ul.checkbox li:active{background-color:var(--blue_light_hover);}
ul.checkbox li.hide{display:none;}

ul.ivr_users{list-style-type:none;}
ul.ivr_users li{display:block;position:relative;height:40px;line-height:40px;padding-left:35px;width:335px;border-radius:8px;background-color:var(--line_hover);cursor:pointer;margin-bottom:5px;box-sizing:border-box;}
ul.ivr_users li:last-child{margin-bottom:0;}
ul.ivr_users li span.drag{display:none;width:30px;height:40px;padding-left:25px;background:url(/img/drag.svg) no-repeat 10px center;background-size:24px;text-align:center;position:absolute;top:0;right:0;cursor:grab;filter:grayscale(100%);}
ul.ivr_users li span.drag:hover{filter:grayscale(0);}
ul.ivr_users li span.drag:active{cursor:grabbing}
ul.ivr_users li span.name{display:inline-block;width:255px;height:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
ul.ivr_users li img{display:block;width:30px;height:30px;border-radius:50%;float:left;margin:5px 15px 5px 0;}
ul.ivr_users li:before{content:"";position:absolute;width:16px;height:16px;border-radius:5px;background:var(--white);top:11px;left:8px;border:1px solid var(--blue_light);}
ul.ivr_users li:after{content:"";position:absolute;display:block;width:22px;height:22px;background:url(/img/check_green.svg) no-repeat center center;background-size:22px;top:8px;left:5px;opacity:0;transition:all ease 0.1s;}
ul.ivr_users li:hover{background-color:var(--blue_light);}
ul.ivr_users li.on{background-color:var(--blue_light);}
ul.ivr_users li.on:after{left:9px;opacity:1;}
ul.ivr_users li:active{background-color:var(--blue_light_hover);}
ul.ivr_users.ordered li{width:390px;}
ul.ivr_users.ordered li span.drag{display:block;}
ul.ivr_users li span.drop{display:none;position:absolute;z-index:9;height:50%;top:0;left:0;width:100%;pointer-events:none;}
ul.ivr_users li span.drop.after{top:50%;}

ul.ivr_users.is_droppable li{background:var(--line_hover)}
ul.ivr_users.is_droppable li span.drop{pointer-events:auto;display:block;}
ul.ivr_users.is_droppable li img{display:none;}
ul.ivr_users.is_droppable li span.alter_img{display:block;background:var(--blue_light_hover);width:30px;height:30px;border-radius:50%;float:left;margin:5px 15px 5px 0;}
ul.ivr_users.is_droppable li.drag{background:var(--blue_light_active);}
ul.ivr_users.is_droppable li.drag span.name{opacity:0;opacity:1;color:var(--blue);}
ul.ivr_users.is_droppable li.drag span.alter_img{background:var(--blue);}
ul.ivr_users.is_droppable li.drag:before{opacity:0;}
ul.ivr_users.is_droppable li.drag:after{opacity:0;}
ul.ivr_users.is_droppable li.drag span.drop{display:none;}

.ivr_player{display:inline-block;height:32px;padding:9px 0;background:url(/img/soundwave.svg) no-repeat 50px center;background-size:auto 30px;width:170px;float:left;filter:grayscale(100%);opacity:0.5;margin-bottom:30px;}
.ivr_player span.play{display:block;background:url(/img/play.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;}
.ivr_player span.play.on{background-image:url(/img/stop.svg);}
.ivr_player:hover{filter:grayscale(0);opacity:1;}
.ivr_player span.play:hover{background-color:var(--blue_light);}
.ivr_player.is_alone1{margin-bottom:0;}
[data-file=empty]:where(.ivr_player,.play){display:none;}
.add.play{background-image:url(/img/play.svg);}
.add.play.on{background-image:url(/img/stop.svg);}
.add.sound_edit{background-image:url(/img/edit.svg);}
.add.sound_create{background-image:url(/img/music.svg);display: none;}
.add.delete_announce{
	background-image:url(/img/trash.svg);
	color: var(--red);
}
.sound_edit[data-file=empty]{display:none;}
.sound_create[data-file=empty]{display:block;}

.announce_sound {
	display: grid;
	gap: 16px;
	border-radius: 20px;
	border: 1px solid var(--grey_border);
	background-color: var(--line_hover);
	padding: 20px;
	margin-bottom: 30px;
	max-width: 100ch;
}

.announce_sound_head {
  display: flex;
	align-items: center;
  justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.announce_sound_voice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 16px;
}

.announce_sound_voice .avatar {
	width: 48px;
	box-shadow: 3px 3px 7px 0 rgb(0 0 0 / 12%);
}

.announce_sound_voice .avatar[src*="svg"] {
	padding: 12px;
	box-sizing: border-box;
	background-color: var(--white);
}

.announce_sound_voice:not(.hidden) .announce_sound_meta {
	margin-left: auto;
}

.announce_sound_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.announce_sound_meta .badge {
	font-size: 13px;
	line-height: 36px;
	height: 36px;
	padding-inline: 16px;
	border-radius: 2rem;
}

.announce_sound_body {
	font-family: inherit;
	max-width: 80ch;
	font-size: 16px;
	line-height: 1.5;
	text-wrap: balance;
}

.announce_sound_body:empty {
	display: none;
}

.announce_sound_actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.announce_sound_actions > * {
	margin: 0;
	font-size: 14px;
}

.badge.announce_sound_voice_name,
.badge.announce_sound_bg_sound_name {
	background-image:url(/img/music.svg);
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 16px;
	padding-left: 40px;
}

.badge.announce_sound_voice_name {
	background-image:url(/img/speaker.svg);
}

.ivr_announce.is_alone > label {
	display: none;
}

.checkbox + .ivr_announce.is_alone > label {
	display: block;
}

.checkbox + .ivr_announce.is_alone {
	margin-bottom: 20px;
}

.ivr_announce.is_alone .announce_sound {
	margin-bottom: 0;
}

.allow_message {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 100ch;
	justify-content: flex-end;
	padding-inline: 20px;
	margin-top: 12px;
}

.allow_message.display0{display:none;}
#action_menu{margin-bottom:30px;}

.bloc_action{display:none;}
.bloc_action.on{display:block;}
.cont_btn_big{margin-top:60px;}
.bloc .bloc_digit{position:relative;background:var(--line_hover);border-radius:12px;padding:0px;height:60px;margin-bottom:10px;transition:all ease 0.25s;border:1px solid transparent}
.bloc .bloc_digit strong{display:block;width:auto;line-height:40px;height:40px;border-radius:10px;background:var(--blue_light);color:var(--blue);font-size:16px;text-align:center;float:left;margin:10px;padding:0 10px;}
.bloc .bloc_digit strong:before{content:attr(data-label);float:left;line-height:40px;font-size:11px;color:var(--blue_hover);font-weight:400;padding-right:10px;text-transform:uppercase;}
.bloc .bloc_digit strong span.edit{display:none;float:right;width:30px;height:30px;background:url(/img/edit.svg) no-repeat center center;background-size:16px;margin:5px -5px 0 10px;cursor:pointer;border-radius:50%;}
.bloc .bloc_digit strong span.edit:hover{background-color:var(--blue_light_hover);}
.bloc .bloc_digit strong input{width:300px;height:30px;line-height:30px;float:left;margin-top:5px;font-weight:600;}
.bloc .bloc_digit strong span.arrow{display:block;float:left;width:30px;height:40px;background:url(/img/arrow.svg) no-repeat center;background-size:13px;}
.bloc .bloc_digit strong span.select{width:50px;height:30px;line-height:30px;float:left;margin-top:5px;padding:0 15px 0 0;}
.bloc .bloc_digit strong span.select span.value{color:var(--blue)}
.bloc .bloc_digit strong span.select:before{height:32px;}
.bloc .bloc_digit strong span.select li{height:30px;}
.bloc .bloc_digit strong span.label{font-size:13px;font-weight:600;background:url(/img/arrow.svg) no-repeat 0 center;background-size:13px;padding:0 10px 0 25px;margin-left:10px;}
.bloc .bloc_digit span.up{display:none;float:right;background:url(/img/up.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:14px;filter:grayscale(100%);}
.bloc .bloc_digit span.up:hover{filter:grayscale(0);background-color:var(--blue_light);}
.bloc .bloc_digit span.btn_digit{float:right;margin:10px 20px 0 0 ;line-height:40px;font-weight:600;color:var(--blue);cursor:pointer;}
.bloc .bloc_digit span.btn_digit.ivr_digit_remove{color:var(--red);}
.bloc .bloc_digit span.btn_digit:hover{text-decoration:underline;}
.bloc .bloc_digit span.action{display:inline-block;line-height:40px;margin:10px 0 0 15px;}
.bloc .bloc_digit span.action .menu_user{position:relative;}
.bloc .bloc_digit span.action .menu_user img{width:30px;height:30px;border-radius:50%;margin:5px 0 0 10px;vertical-align:top;}
.bloc .bloc_digit span.action .menu_user .name{position:absolute;background:var(--white);white-space:nowrap;padding:0 10px;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,0.05);right:0;top:-42px;opacity:0;transition:all ease 0.15s;pointer-events:none;z-index:1;}
.bloc .bloc_digit span.action .menu_user .name:before{content:"";position:absolute;width:10px;height:10px;background:var(--white);transform:rotate(45deg);bottom:-5px;right:15px;}
.bloc .bloc_digit span.action .menu_user:hover .name{top:-47px;opacity:1;}
.bloc .bloc_digit span.action .ivr_player{display:inline-block;float:none;padding:4px 0;vertical-align:top;margin:0 0 0 15px;}
.bloc .bloc_digit ul.digit_users{list-style-type:none;display:inline-block;}
.bloc .bloc_digit ul.digit_users li{height:40px;line-height:40px;display:inline-block;}
.bloc .bloc_digit ul.digit_users li img{width:30px;height:30px;border-radius:50%;}
.bloc .bloc_digit .confirm_delete{position:absolute;display:none;border-radius:12px;top:0;left:0;right:0;height:60px;line-height:60px;padding-left:130px;font-size:16px;color:var(--red);background:var(--red_light);}
.bloc .bloc_digit .confirm_delete .btn_delete_digit{float:right;margin:10px 15px 0 0;line-height:40px;border-radius:8px;padding:0 15px;cursor:pointer;}
.bloc .bloc_digit .confirm_delete .btn_delete_digit:hover{background:#fff6;}
.bloc .bloc_digit.expand{overflow:hidden;background:#fbfbfb;border:1px solid var(--grey_border_dark);box-shadow:0 0 5px rgba(0,0,0,0.05);}
.bloc .bloc_digit.expand strong{background:transparent;}
.bloc .bloc_digit.expand span.action{visibility:hidden;}
.bloc .bloc_digit.expand span.btn_digit{display:none;}
.bloc .bloc_digit.expand span.up{display:block;}
.bloc .bloc_digit.expand .content{border-top:1px solid var(--grey_border_dark);margin-top:10px;padding:20px;}
.bloc .bloc_digit.expand .content .ivr_users{margin-bottom:30px;}
.bloc .bloc_digit.expand .content .ivr_users li{background-color:#f0f0f0;}
.bloc .bloc_digit.expand .content .ivr_users li:hover{background-color:var(--blue_light);}
.bloc .bloc_digit.expand .content .ivr_users li.on{background-color:var(--blue_light);}
.bloc .bloc_digit.expand .content .ivr_users.is_droppable li{background:#f0f0f0;}
.bloc .bloc_digit.expand .content .ivr_users.is_droppable li.drag{background:var(--blue_light_active);}
.bloc .bloc_digit.delete .confirm_delete{display:block;}
.bloc .bloc_digit.delete .action{display:none;}
.bloc .bloc_digit.delete .label{display:none;}
.bloc .bloc_digit.delete .btn_digit{display:none;}
.bloc .bloc_digit.removing{height:0;overflow:hidden;margin-bottom:0;}

.bloc .bloc_digit.expand .content .checkbox li{background-color:#f0f0f0;}
.bloc .bloc_digit.expand .content .checkbox li:hover{background-color:var(--blue_light);}
.bloc .bloc_digit.expand .content .checkbox li.on{background-color:var(--blue_light);}
.ivr_add_digit{display:inline-block;font-weight:600;color:var(--blue);cursor:pointer;background:url(/img/plus.svg) no-repeat 0 7px;background-size:16px;padding-left:20px;line-height:30px;margin-left:5px;}
.ivr_add_digit:hover{text-decoration:underline;}
.ivr_close_digit{display:inline-block;font-weight:600;color:var(--blue);cursor:pointer;background:url(/img/cross.svg) no-repeat 0 7px;background-size:16px;padding-left:20px;line-height:30px;margin-left:5px;}
.ivr_close_digit:hover{text-decoration:underline;}

.last_updated{float:right;margin-right:15px;font-size:12px;opacity:0.7;line-height:60px;}

.picto_scenario{display:block;float:left;height:14px;width:14px;border:3px solid var(--white);box-shadow:0 0 5px rgba(0,0,0,0.2);border-radius:50%;margin:25px 15px 0 0;background:var(--luminous_green);}
.picto_scenario.open{background:var(--luminous_green);}
.picto_scenario.oncall{background:var(--font_verylight);}
.picto_scenario.nobody{background:var(--orange);}
.picto_scenario.close{background:#ccc;}

.bloc .ivr_activate_record{float:left;margin:18px 10px 0 0;}
.bloc .label_activate_record{line-height:60px;}

.ivr_users {
	transition-duration: 0.3s;
	transition-property: box-shadow, background-color;
	border-radius: 8px;
	max-width: 335px;
}

.error_no_routing .ivr_users  {
	box-shadow: 0 0 0 5px var(--red_light);
	background-color: var(--red_light);
}

.error_no_routing .ivr_users li {
	box-shadow: 0 0 0 1px var(--red);
}

.cont_fixed_bottom {
	padding-block: 16px;
	position: fixed;
	top: 100%;
	inset-inline: 70px 0;
	background-color: var(--white);
}

#btn_save_ivr{
	width: 100%;
	max-width: max-content;
	padding: 0 30px;
	opacity: 0;
	box-shadow: 5px 5px 15px var(--black_shadow);
	pointer-events: none;
	transform: scale(0.8);
	transition: all ease 0.1s;
}
#btn_save_ivr.on {opacity: 1;pointer-events: all;transform:none;}
#btn_save_ivr.wait {color: var(--blue_active);background-color:currentColor;}
#btn_save_ivr.wait:before {background-color: transparent;}
#btn_save_ivr.success {color:var(--toaster_green);background-color:currentColor;}
#btn_save_ivr.success:before {background-color: transparent;filter:brightness(100)}
#btn_reset_ivr{cursor:pointer;margin-left:30px;font-size:14px;color:var(--font_verylight);padding-left:36px;background:url(/img/reset.svg) no-repeat 8px center;background-size: 18px;}
#btn_reset_ivr:hover{text-decoration:underline;filter: brightness(0.3);}


#popup.on ~ .page.on.has_changes .cont_fixed_bottom { z-index: auto; }

#popup.on ~ #player.on { bottom: 0; left: 0; }

.page.on.has_changes ~ #phone-container {
	bottom: 100px;
}

.page.on.has_changes ~ #player.on {
	bottom: 92px;
}

.page.on.has_changes ~ #player.on ~ #phone-container {
	bottom: 200px;
}

.has_changes .cont_btn_big { padding-bottom: 100px; }

.has_changes .cont_fixed_bottom {
	z-index: 70;
	bottom: 0;
	top: auto;
	box-shadow: 0 0 10px var(--black_shadow);
}



/*============================
	STUDIO
============================*/
.col_voice{flex-basis:440px;flex: 1;}
.col_music{flex-basis:440px;flex: 1;}
ul.music_choice{list-style-type:none;border:2px solid var(--blue);box-shadow:0 0 5px rgba(0,0,0,0.05);border-radius:10px;height:300px;overflow:auto;padding:0;background-color: var(--white);}
ul.music_choice::-webkit-scrollbar{width:5px;margin:10px 0}
ul.music_choice::-webkit-scrollbar-track{background:var(--blue_light);margin:10px 0}
ul.music_choice::-webkit-scrollbar-thumb{background:var(--blue);}
ul.music_choice li{height:40px;line-height:40px;padding-left:40px;position:relative;cursor:pointer;}
ul.music_choice li:hover{background:var(--blue_light);}
ul.music_choice li:before{content:"";position:absolute;background:var(--white);width:14px;height:14px;border-radius:50%;border:1px solid var(--grey_border_dark);top:12px;left:12px;}
ul.music_choice li span.play{display:block;position:absolute;right:20px;top:0;width:40px;height:40px;background:url(/img/play.svg) no-repeat center;background-size:20px;cursor:pointer;opacity:0.5;filter:grayscale(100%);}
ul.music_choice li span.play.on{background-image:url(/img/stop.svg);}
ul.music_choice li:hover span.play{opacity:0.8;filter:grayscale(0);}
ul.music_choice li:hover span.play:hover{opacity:1;background-color:var(--blue_light_hover);}
ul.music_choice li.on:after{content:"";position:absolute;background:var(--blue);width:6px;height:6px;border-radius:50%;top:17px;left:17px;}
ul.music_choice li.on:before{border-color:var(--blue)}
ul.music_choice li.on{
	background-color: var(--blue_light_hover);
}

.studio_logo {
	margin-top: -16px;
	height: 51px;
}

#popup_content .studio_cols h3 {
	color: var(--font);
	margin: 0 0 16px;
	font-size: 18px;
}

.studio_cols {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 50px;
	padding: 24px;
	background-color: var(--background);
	border-radius: 12px;
	border: 2px solid var(--grey_border_light);
	margin-top: 20px;
}

.col_voice ul.checkbox,.col_music ul.checkbox{margin-bottom:10px;display: flex;flex-wrap: wrap;gap: 10px;}
.col_voice ul.checkbox li,.col_music ul.checkbox li{padding:0 20px 0 30px;margin-right: 0;}
.col_voice ul.checkbox li:not(.on),.col_music ul.checkbox li:not(.on){background-color: var(--grey_border_light);}

[data-announce_type="mp3"] :where(.col_voice, .col_music h3, .col_music .checkbox) {
	display: none;
}

[data-announce_type="mp3"] .col_music {
	width: 100%;
	margin-top: 16px;
}

#col_message_tts,#col_message_record{border:2px solid var(--blue);display:none;border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,0.05);transition:all ease 0.3s;}
#col_message_tts.on,#col_message_record.on{display:block;box-sizing:border-box;}
#col_message_tts.error,#col_message_record.error{box-shadow:0 0 10px var(--red);}
#col_message_tts textarea{width:calc(100% - 30px);border-radius:0 0 10px 10px;height:209px;padding:15px;resize:none;line-height:25px;border:0;border-top:2px solid var(--blue);box-shadow:none;display:block;}
#col_message_tts span.create_tts{display:inline-block;position:relative;float:right;margin:-30px 10px 0 0;height:16px;line-height:16px;background:url(/img/play.svg) no-repeat;background-size:16px;padding-left:25px;cursor:pointer;filter:grayscale(100%);color:var(--blue);opacity:0.7;padding-bottom: 14px;}
#col_message_tts span.create_tts.wait{filter:grayscale(0);opacity:1;}
#col_message_tts span.create_tts.wait:before{content:"";position:absolute;background:url(/img/loader.svg) no-repeat center center var(--white);top:0;left:0;bottom:0;right:0;background-size:32px;}
#col_message_tts span.create_tts:hover{filter:grayscale(0);opacity:1;}

.select#select_voice_tts {
	width: calc(100% - 30px);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	border: 0;
	height: 56px;
	line-height: 56px;
}

.select#select_voice_tts::before {
	height: 56px;
}

.select#select_voice_tts .underselect:before {
	display: none;
}

.select#select_voice_tts .underselect {
	border: 0;
	margin-left: 0;
	top: 60px;
}

.select#select_voice_tts .underselect>ul {
	height: 217px;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 10px;
}

.select#select_voice_tts ul li.disabled {
	opacity: 1;
	font-weight: 700;
	text-transform: uppercase;
	margin-inline: -20px;
	flex-grow: 1;
	width: 100%
}

.select#select_voice_tts ul li.disabled:before {
	display: none;
}

#select_voice_tts .value .voice_item_desc {
	display: none;
}

#select_voice_tts .voicetts_langs {
	overflow: auto;
	height: auto;

	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}

.voicetts_langs::-webkit-scrollbar {
	display: none;
}

.voicetts_langs ul {
	display: flex;
	overflow: visible;
	width: max-content;
	max-width: none;
	gap: 6px;
}

#select_voice_tts .voicetts_langs ul li {
	padding: 0;
	height: auto;
	line-height: 1;
}

.voicetts_lang:hover {
	cursor: pointer;
	background-color: var(--blue_light_hover);
	color: var(--blue_light);
}

.voicetts_lang.active {
	pointer-events: none;
}

.voicetts_lang.active .badge {
	background-color: var(--blue_light);
	color: var(--blue);
} 

.voicetts_voices {
	grid-column: 1;
	grid-row: 2;
}

.voice_item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.voice_item_text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.voice_item_name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 110%;
}

.voice_item_desc {
	color: var(--font_light);
	font-size: 90%;
}


#select_voice_tts .voicetts_voices {
	height: 100%;
	padding: 0;
}

#select_voice_tts .voicetts_voices li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 56px;
	line-height: 1.5;
}

#select_voice_tts .voicetts_voices ul {
	max-height: 100%;
}

#select_voice_tts .voicetts_voices:not(.active) {
	display: none;
}


#select_voice_tts .voicetts_langs:hover,
#select_voice_tts .voicetts_langs li:hover,
#select_voice_tts .voicetts_voices:hover {
	background: transparent;
}


#col_music_selection{display:none;transition:all ease 0.3s;}
#col_music_file{position:relative;border:2px solid var(--blue);display:none;border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,0.05);background:url(/img/upload.svg) no-repeat center 90px var(--white);background-size:50px;padding:140px 0 0 0;height:300px;box-sizing:border-box;text-align:center;}
#col_music_selection.on,#col_music_file.on{display:block;box-sizing: border-box;}
#col_music_selection.error{box-shadow:0 0 10px var(--red);}

#btn_advanced_settings{float:right;cursor:pointer;margin-top:30px;height:20px;line-height:20px;background:url(/img/settings.svg) no-repeat left center;background-size:16px;padding-left:20px;opacity:0.5;}
#btn_advanced_settings:hover{opacity:1;}
#announce_settings{display:none;background:var(--white);padding:0 5px 5px 5px;margin-left:-5px;}
#announce_settings.on{display:block;}
.elem_advanced{position:relative;padding:15px 0 20px 0;border-bottom:1px dotted var(--grey_border);}
.elem_advanced.disabled{display: none;}
.elem_advanced:first-of-type{border-top:1px dotted var(--grey_border);margin-top:30px;}
.elem_advanced h3{font-weight:400;font-size:16px;height:40px;line-height:40px;background: url(/img/music.svg) no-repeat 5px center;color:var(--blue);background-size:20px;padding-left:35px;}
.elem_advanced h3.repeat{background-image:url(/img/repeat.svg);}
.elem_advanced h3.wait{background-image:url(/img/wait.svg);}
.elem_advanced p{height:20px;line-height:20px;color:var(--font_light);padding-left:35px;}
.elem_advanced .switch{position: absolute;top:30px;right:15px;}
#popup_content .elem_advanced input[type=range]{position:absolute;width:150px;box-shadow:none;top:30px;right:100px;padding:0;}
#popup_content .elem_advanced .rangevalue{position:absolute;width:80px;height:38px;border-radius:10px;line-height:38px;text-align:center;color:var(--blue);font-weight:700;font-size:16px;top:30px;right:0;}

#announce_confirm{display:none;padding-bottom:80px;}
#announce_confirm.on{display:block;}
#announce_confirm div{text-align:center;}
#announce_confirm .btn{margin-bottom:30px;}
#announce_confirm p{display:inline-block;line-height:24px;background:url(/img/warning.svg) no-repeat;padding-left:35px;background-size:24px;font-size:16px;}

#announce_studio.hide{display:none;}

/* upload */
#col_music_file.success{background-image:url(/img/success.svg);}
#col_music_file input{display:none;}
#col_music_file .btn{display:none;margin-top:50px;margin-right:0;}
#col_music_file .btn.on{display:inline-block;}
#upload_progressbar{display:none;position:absolute;width:80%;margin:60px 10% 0 10%;background:var(--blue_light);height:8px;border-radius:10px;left:0;box-shadow:0 0 0 6px var(--blue_light);}
#upload_progressbar span{position:absolute;width:0%;height:8px;background:var(--blue);border-radius:4px;top:0;left:0;transition:width ease 0.2s;}
#upload_progressbar.on{display:block;}

/* record */
#col_message_record{background:url(/img/mic.svg) no-repeat center 90px var(--white);background-size:50px;padding:140px 0 0 0;height:300px;box-sizing:border-box;text-align:center;position:relative;}
#record_timer{display:none;position:absolute;width:100%;text-align:center;top:160px;left:0;}
#record_timer.on{display:block;}
#col_message_record.wait{background-image:url(/img/loader.svg);}
#col_message_record.success{background-image:url(/img/success.svg);}
#col_message_record .btn{display:none;margin-top:50px;margin-right:0;}
#col_message_record .btn.on{display:inline-block;}
#record_animation{opacity:0;position:absolute;width:60px;height:60px;border:1px solid var(--blue_shadow);border-radius:50%;top:80px;left:50%;transform:translateX(-50%);animation:1.5s ease-in-out 0s infinite record_anim;pointer-events:none;background:#f2f3f866;transition:opacity ease 0.2s;}
#record_animation:before{content:"";position:absolute;width:60%;height:60%;border:1px solid var(--blue_shadow);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:1s ease-in-out 0s infinite record_anim_inside;}
#record_animation:after{content:"";position:absolute;width:120%;height:120%;border:1px solid var(--blue_shadow);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:2s ease-in-out 0s infinite record_anim_inside;}
#record_animation.on{opacity:1;}
@keyframes record_anim {
	from {transform:translateX(-50%) scale(1);}
	to {transform:translateX(-50%) scale(2);opacity:0;}
}
@keyframes record_anim_inside {
	from {transform:translate(-50%,-50%) scale(1);opacity:0.5}
	to {transform:translate(-50%,-50%) scale(2);opacity:0;}
}

/*============================
	DATE PICKER
============================*/
.calendarContainer{background-color:#f4f8ff;position:absolute;width:224px;display:block;margin:0 0 0 0;z-index:1;font-style:normal;padding:10px;border-radius:10px;}
.calendarContainer table{border-collapse:collapse;width:100%;}
#datepicker_mois{height:50px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom:1px solid #b9cfff;}
#datepicker_mois td{text-align:center;color:var(--blue);font-weight:700;cursor:default;}
#datepicker_mois td.td_prevnext{text-align:left;width:50px;vertical-align:top;}
#datepicker_mois td.td_prevnext span{cursor:pointer;display:inline-block;border:2px solid #b9cfff;width:20px;height:20px;border-radius:30px;text-align:center;line-height:18px;margin:13px 0 0 13px;position:relative;padding:0;}
#datepicker_mois td.td_prevnext span:before{content:"";position:absolute;width:9px;height:2px;background:#b9cfff;transform:rotate(40deg);top:6px;left:7px;}
#datepicker_mois td.td_prevnext span:after{content:"";position:absolute;width:9px;height:2px;background:#b9cfff;transform:rotate(-40deg);top:12px;left:7px;}
#datepicker_mois td.td_prevnext.prev span:before{top:12px;left:5px;}
#datepicker_mois td.td_prevnext.prev span:after{top:6px;left:5px;}
#datepicker_mois td.td_prevnext span:hover{border-color:var(--blue);}
#datepicker_mois td.td_prevnext span:hover:before{background:var(--blue);}
#datepicker_mois td.td_prevnext span:hover:after{background:var(--blue);}
#calendar_content{border-collapse:collapse;width:100%;}
#calendar_content td{width:14.3%;height:35px;line-height:35px;text-align:center;border-radius:10px;cursor:default;font-size:12px;font-weight:600;}
#calendar_content td.empty{color:#e4e4e3;}
#calendar_content td.selected{color:var(--white);background:var(--blue);}
#calendar_content td.choosable:hover{background:var(--blue_light);}
#calendar_content td.choosable.selected:hover{background-color:var(--blue);}
#calendar_content th{width:14.3%;font-size:13px;font-weight:400;color:var(--blue);text-align:center;height:30px;}



/*============================
	BILLING
============================*/
#credit_list{margin:30px 10px 10px 0;float:left;}
#buy_credit{margin-top:30px;}
ul.checkbox li.select_credit{padding-left:45px;font-size:20px;}
#creditcard_number{display:block;width:300px;position:relative;font-family:monospace;height:170px;border:1px solid var(--grey_border);border-radius:12px;font-size:16px;box-sizing:border-box;padding:120px 0 0 80px;box-shadow:0 0 5px rgba(0,0,0,0.05);margin-right:30px;margin-bottom:30px;transition:all ease 0.15s;}
#creditcard_number:before{content:"";position:absolute;top:25px;left:0;width:100%;height:30px;background:var(--grey_border);transition:all ease 0.15s;}
#creditcard_number:after{content:"";position:absolute;top:110px;left:25px;width:40px;height:40px;background:var(--grey_border);border-radius:50%;transition:all ease 0.15s;}
#creditcard_number:hover{border-color:var(--orange);}
#creditcard_number:hover:before{background-color:var(--orange);}
#creditcard_number:hover:after{background-color:var(--orange);transform:scale(1.1);}
#creditcard_number.hide{display:none;}
#add_card.hide{display:none;}
#update_card.hide{display:none;}
.col.address > input,.col.address > .select{margin:30px 15px 0 0;}
.col.address input.half_firstname{border-radius:10px 0 0 10px;border-right:1px dashed var(--grey_border);margin-right:0;}
.col.address input.half_lastname{border-radius:0 10px 10px 0;border-left:0;}
.col.address input.half_strnumber{border-radius:10px 0 0 10px;border-right:1px dashed var(--grey_border);width:90px;margin-right:-3px;}
.col.address input.half_strname{border-radius:0 10px 10px 0;border-left:0;width:200px;}
.col.address .select.half_strtype{border-radius:0;border-left:0;border-right: 1px dashed var(--grey_border);width:260px;display:inline-block;vertical-align: bottom;margin-right:-3px;}
.col.address input.half_zip{border-radius:10px 0 0 10px;border-right:1px dashed var(--grey_border);width:90px;margin-right:-3px;}
.col.address input.half_city{border-radius:0 10px 10px 0;border-left:0;width:210px;}
.col.address input.input_address_phone{padding-left:105px;width:150px;}
.input_label{text-transform:uppercase;background:var(--white);color:var(--font_verylight);font-size:10px;position:absolute;z-index:1;margin:23px 0 0 10px;padding:0 7px;border-radius:10px;}



/*============================
	STORE
============================*/
.store{display:none;position:relative;width:250px;height:150px;border-radius:12px;background:var(--white);border:1px solid var(--grey_border);box-shadow:0 0 5px rgba(0,0,0,0.05);margin:40px 40px 0 0;float:left;overflow:hidden;}
.store:before{content:"";display:block;position:absolute;width:100%;top:0;left:0;height:50px;opacity:0.7;transition:all ease 0.15s;}
.store .logo{display:block;position:absolute;width:60px;height:60px;top:20px;left:20px;border-radius:50%;background-color:var(--white);background-repeat:no-repeat;background-size:40px;background-position:center;box-shadow:0 7px 14px rgba(59,59,95,0.12);transition:all ease 0.15s;}
.store .name{display:block;position:absolute;top:95px;left:20px;font-size:16px;line-height:32px;}
.store .btn{position:absolute;top:95px;right:20px;height:32px;line-height:32px;text-decoration:none;}
.store.shopify .logo{background-image:url(/img/store/shopify.svg);background-size:32px;}
.store.shopify:before{background:#f4f8ec;}
.store.magento .logo{background-image:url(/img/store/magento.svg);}
.store.magento:before{background:#fdede9;}
.store.wix .logo{background-image:url(/img/store/wix.svg);}
.store.wix:before{background:#fdf2e3;}
.store.slack .logo{background-image:url(/img/store/slack.svg);}
.store.slack:before{background:#def4fc;}

.store:hover:before{opacity:1;}
.store:hover .logo{transform:scale(1.1);}

#popup_content .input_slack_channel:before{content:"#";position:absolute;z-index:1;line-height:40px;margin-left:15px;font-size:16px;}
#popup_content .input_slack_channel input{width:calc(100% - 52px);padding-left:35px;}

.integration_soon{font-size:30px;background:url(/img/integration_soon.svg) no-repeat center top;background-size:500px;height:30px;padding-top:430px;margin-top:50px;text-align:center;}

/*============================
	SUPPORT
============================*/
.title{height:70px;border-bottom:1px solid var(--grey_border);padding-left:25px;cursor:pointer;}
.title:hover{background:var(--blue_light);}
.title a{display:block;font-size:16px;font-weight:400;color:var(--blue);padding-top:17px;text-decoration:none;}
.title p{color:#666;}
.title span.last_update{float:right;opacity:0.5;margin:0 15px 0 0;line-height:70px;}


/*============================
	USERS
============================*/

#tools_users {display: flex;justify-content: flex-end;align-items: center;}
#tools_users .btn-add {float: none;}
.bloc.user{position:relative;}
.bloc.user img.photo{width:50px;height:50px;border-radius:50%;margin:10px 20px;float:left;}
#user_error_message{display:flex;align-items:center;height:40px;margin-top:5px;background:url(/img/warning.svg) no-repeat left center;padding-left:24px;background-size:20px;}

.bloc.user .user_menu{float:right;margin:20px 20px 0 0;width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0;box-shadow:none;border:0;position:relative;z-index:1;}
.bloc.user .user_menu:before{display:none;}
.bloc.user .user_menu span.value{padding:0;background:url(/img/more.svg) no-repeat center center;filter:grayscale(1);opacity:0.5;border-radius:50%;padding-top:30px;height:0;width:30px;}
.bloc.user .user_menu div.underselect{width:auto;max-width:300px;left:auto;right:-25px;top:32px;}
.bloc.user .user_menu div.underselect:before{left:auto;right:30px;}
.bloc.user .user_menu:hover span.value,.bloc.user .user_menu.on span.value{filter:grayscale(0);opacity:1;background-color:var(--blue_light)}
.bloc.user .user_menu li[data-popup=remove_user]{background-image:url(/img/trash.svg);background-repeat:no-repeat;background-size:20px;background-position:10px center;padding-left:40px;}
.bloc.user .user_menu li[data-popup=relaunch_invite]{background-image:url(/img/email.svg);background-repeat:no-repeat;background-size:20px;background-position:10px center;padding-left:40px;display:none;}
.bloc.user.awaiting .user_menu li[data-popup=relaunch_invite]{display:block;}

.bloc.user .tag{display:none;background:url(/img/star_orange.svg) no-repeat 10px center var(--orange_light);background-size:14px;height:24px;line-height:24px;padding:0 15px 0 30px;border-radius:12px;color:var(--orange);font-weight:600;font-size:11px;float:right;margin:23px 25px 0 0;}
.bloc.user .tag.awaiting{background:url(/img/time_wait.svg) no-repeat 10px center var(--grey_border);background-size:14px;color:var(--font_verylight);}
.bloc.user.admin .tag.admin{display:block;}
.bloc.user.awaiting .tag.awaiting{display:block;}
.bloc.user.awaiting h2{color:var(--font_verylight);}
.bloc.user input{display:none;}
.bloc.user .users_data{font-size:16px;color:var(--blue);line-height:40px;display:inline-block;}
.bloc.user .users_data.nonumber{filter:grayscale(1);}
.bloc.user .users_data.nonumber img{display:none;}
.bloc.user .open_out_plan_redirection_popup {margin-block:5px;vertical-align:bottom;}
.bloc.user .users_edit{background:url(/img/edit.svg) no-repeat center center;background-size:16px;cursor:pointer;display:inline-block;width:30px;height:30px;vertical-align:bottom;margin:5px;border-radius:50%;opacity:0;filter:grayscale(100%);}
.bloc.user:hover .users_edit{opacity:0.5;}
.bloc.user .users_edit:hover{background-color:var(--blue_light);opacity:1;filter:grayscale(0);}
.bloc.user .users_edit:active{background-color:var(--blue_light_hover);}
.bloc.user img.flag{width:24px;height:16px;border-radius:5px;margin:11px 8px 0 0;float:left}
.bloc.user .input_users_phonenumber{padding-left:105px;width:120px;}
.bloc.user .phone_country{display:none;}

.bloc .col{width:auto;float:left;margin-bottom:10px;margin-right:50px;}
.bloc .col.alias{width:65px;}
.bloc .col.number{width:260px;}
.bloc .col.email{width:auto;}
.bloc .col.alias .select{width:50px;border:0;box-shadow:none;padding-left:0;}
.bloc .col.alias .select span.value{font-size:22px;color:var(--blue);line-height:36px;}
.bloc .col.alias .select span.value:before{content:"#";color:var(--font_verylight);opacity:0.5;padding-right:5px;}
.bloc .col.alias .select div.underselect{text-align:center;font-weight:700;}
.bloc.user .switch{margin-top:8px;}
.bloc.user .col_admin{display:none;}
.bloc.user.activate_admin .col_admin{display:block;float:right;}




/*=============================
	ADD NUMBER
=============================*/
.number_instruction{background:url(/img/warning.svg) no-repeat 20px center var(--red_light);background-size:20px;line-height:20px;margin-bottom:20px;padding:10px 25px 10px 50px;border-radius:10px;display:inline-block;}
.checkbox.address_list{width:400px;}
.checkbox.address_list li{height:auto;line-height:24px;padding-top:15px;padding-bottom:15px;width:400px;margin-bottom:10px;}
.checkbox.address_list li:before{left:20px;top:50%;transform:translateY(-8px);}
.checkbox.address_list li img{display:inline-block;width:24px;height:16px;border-radius:3px;vertical-align:text-top;margin-right:5px;}
.checkbox.numbers li{padding-left:35px;}
.checkbox.numbers li img{float:left;width:24px;height:16px;border-radius:3px;margin:12px 5px 0 0;}
.empty_select{background:url(/img/warning.svg) no-repeat 0px center;background-size:20px;line-height:30px;padding:0 0 0 30px;margin:30px 0;}
ul.checkbox.address_list li.on:after{content:"";position:absolute;display:block;width:6px;height:6px;background:var(--blue);top:48px;left:25px;border-radius:50%;}

#page_numbers .back_to {
	margin-top:30px;
}
.back_to{display:inline-block;height:40px;line-height:40px;cursor:pointer;}
.back_to:before{content:"";display:inline-block;height:40px;width:30px;background:url(/img/arrow.svg) no-repeat center center;background-size:13px;vertical-align:bottom;transform:rotate(180deg);transition:all ease 0.1s;}
.back_to:hover{text-decoration:underline;}
.back_to:hover:before{background-position:right center;}

#number_box{margin-top:30px;}
#number_box.wait{background:url(/img/loader.svg) no-repeat 10px center;background-size:35px;}

#activate_number_addresses {
	margin-top: 20px;
	display: none;
}

#activate_number_documents {
	margin-top: 20px;
}

#activate_number_documents > * + * {
	margin-top: 1.5em;
}

.existing_documents_list:empty {
	display: none;
}

.document_needed > * + * {
	margin-top: 1em;
}

.document_needed details .form_stack {
	padding: 12px;
	border-radius: 15px;
	border: 1px solid var(--grey_border_light);
	background-color: var(--background);
}

.document_needed details[open] .form_stack {
	margin-top: 12px;
}



/*=============================
	SETTINGS
=============================*/
#select_timezone{width:350px;}
#select_timezone .underselect{width:400px;max-width:400px;}
.pass_instruction{background:url(/img/security.svg) no-repeat 20px center var(--luminous_green_hover);background-size:20px;line-height:20px;margin-bottom:20px;padding:10px 25px 10px 50px;border-radius:10px;display:inline-block;}
#img_setting{width:44px;height:44px;border-radius:50%;vertical-align:bottom;}
#btn_modify_avatar{cursor:pointer;padding-left:10px;}
#btn_modify_avatar:hover{text-decoration:underline;}
#input_setting_avatar{display:none;}
.bloc.settings .col{float:none;line-height: 40px}
.bloc.settings label{width:250px;display:inline-block;float:none;line-height:40px;}
.bloc.settings input,.bloc.settings .select,.bloc.settings .switch{display:inline-block;float:none;vertical-align:top;}
.bloc.settings .switch{margin-top:8px;}
.bloc .icon-warning { display: none; vertical-align: middle; margin-left: 8px; cursor:pointer;}
.out_plan_redirection .icon-warning { display: inline-block; width: 30px; height: 30px; background:url(/img/warning.svg) no-repeat center;background-size:20px;border-radius: 8px;}
.out_plan_redirection .icon-warning:hover {background-color: var(--red_light);}
#modal-profilpicture { display: flex; flex-direction: column; align-items: center; text-align: center; }
#modal-profilpicture > div:first-child { text-align: center; font-size: 24px; }
#modal-profilpicture > div:last-child { text-align: center; }
#modal-profilpicture > div:last-child > div { cursor: pointer; display: inline-block; transition: .2s; text-align: center; margin: 0 20px; color: #fff; line-height: 40px; padding: 0 12px; border-radius: 5px; }
#modal-profilpicture > div:last-child > div:active { transform: scale(0.96); }
#modal-profilpicture > div:last-child > div:first-child { background-color: #c9302c; }
#modal-profilpicture > div:last-child > div:last-child { background-color: var(--blue); }
#modal-profilpicture .resize-container { margin: 40px 0; box-sizing: border-box; display: flex; user-select: none; position: relative; max-width: 90%; max-height: 60%; }
#modal-profilpicture #modal-img-profilpicture { max-width: 100%; max-height: 100%; }
#modal-profilpicture #modal-profilpicture-resize-handle { cursor: move; position: absolute; border: 2px dashed #394759; }
#modal-profilpicture .resize-handle-ne, #modal-profilpicture .resize-handle-nw, #modal-profilpicture .resize-handle-se, #modal-profilpicture .resize-handle-sw { position: absolute; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background-color: var(--blue); z-index: 2; } 
#modal-profilpicture .resize-handle-ne { top: -10px; right: -10px; cursor: ne-resize; }
#modal-profilpicture .resize-handle-nw { top: -10px; left: -10px; cursor: nw-resize; }
#modal-profilpicture .resize-handle-se { bottom: -10px; right: -10px; cursor: se-resize; }
#modal-profilpicture .resize-handle-sw { bottom: -10px; left: -10px; cursor: sw-resize; }
#select_cc .flag_group {
	float: left;
	position: relative;
}
#select_cc .flag_group img {
	float: none;
}
#select_cc .flag_group img:first-child {
	clip-path: polygon(0% 0%, 47.5% 0, 32.5% 100%, 0% 100%);
}
#select_cc .flag_group img:last-child {
	position: absolute;
	clip-path: polygon(57.5% 0%, 100% 0, 100% 100%, 42.5% 100%);
	inset: 0;
}

.force_pass{position:absolute;height:20px;line-height:20px;right:10px;font-size:10px;text-transform:uppercase;margin-top:10px;}
.force_pass strong{display:none;padding:0 10px;border-radius:5px;color:#fff;}
.force_pass.bad strong.bad{display:inline-block;background: url(/img/bad.svg) no-repeat center center var(--red);padding:0;background-size:12px;width:30px;height:20px;}
.force_pass.good strong.good{display:inline-block;background: url(/img/good.svg) no-repeat center center var(--green);padding:0;background-size:12px;width:30px;height:20px;}
.force_pass.veryweak strong.veryweak{display:inline-block;background: url(/img/bad.svg) no-repeat 10px center var(--red);padding-left:30px;background-size:12px;}
.force_pass.weak strong.weak{display:inline-block;background:var(--red);}
.force_pass.average strong.average{display:inline-block;background:var(--orange);}
.force_pass.strong strong.strong{display:inline-block;background:var(--green);}
.force_pass.verystrong strong.verystrong{display:inline-block;background:var(--green);}
.force_pass.excellent strong.excellent{display:inline-block;background: url(/img/good.svg) no-repeat 10px center var(--green);padding-left:30px;background-size:12px;}






/*=============================
	CONTACTS
=============================*/
#cont_contacts.empty{height:100px;background:url(/img/nouser.svg) no-repeat center center var(--white);background-size: 24px;border-radius:15px;border: 1px solid var(--grey_border)}
#cont_contacts.wait{position: relative;min-height: 100px;}
#cont_contacts.wait:before{content:"";position:absolute;z-index:5;width:100%;height:100%;top:0;left:0;background:url(/img/loader.svg) no-repeat center center var(--white);border-radius:12px;border: 1px solid var(--grey_border)}
#tools_contact + #cont_contacts { margin-top: 20px; }
#cont_contacts > * + * {
	margin-top: 28px;
}
.contact_list_nav {
	display: flex;
	justify-content: space-between;
	background-color: var(--background);
	border-bottom: 1px solid var(--grey_border);
	width: 100%;
	padding-block: 20px;
	margin-bottom: 20px;
	overflow: auto;
	position: sticky;
	top: 0;
	z-index: 2;
}
.contact_list_nav > * + * {
	margin-inline-start: 10px;
}
.contact_list_nav a {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 5px;
	text-align: center;
	font-weight: 700;
	color: var(--font_light);
	text-decoration: none;
}
.contact_list_nav a:hover {
	color: var(--blue_hover);
}
.contact_list_nav a.active {
	background-color: var(--blue_active);
	color: var(--white);
}
.contact_list_nav a.disabled {
	opacity: 0.3;
	pointer-events: none;
}
.contact_list_section h2 {
	color: var(--font_light);
	padding-left: 20px;
	background-color: var(--background);
	scroll-margin-top: 92px;
}
.contact_list_section .table {
	margin-top: 12px;
}

/* special table contact */
.table .head .contact_name{width:300px;}
.table .head .contact_company{width:280px;}
.table .head .contact_email{width:248px;}
.table .head .contact_phone{width:300px;}

.table .line .contact_detail{display:none;}
.table .line .contact_name{width:260px;padding:0 10px 0 30px;line-height:60px;height:60px;background:url(/img/contact.svg) no-repeat left center;background-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.table .line .contact_name[data-is_name=no]{background-image:none;}
.table .line .contact_name strong{text-transform:uppercase;}
.table .line .contact_name span.company_responsive{display:none;}
.table .line .contact_company{display:flex;align-items:center;width:250px;padding-left:30px;height:60px;background:url(/img/company.svg) no-repeat left center;background-size:20px;}
.table .line .contact_company[data-is_company=no]{background-image:none;}
.table .line .contact_email{width:248px;line-height:60px;height:60px;}
.table .line .contact_email .contact_mail_to{display:inline-block;border-radius:20px;height:34px;line-height:34px;cursor:pointer;margin-top:13px;position:relative;padding:0 40px 0 10px;transform:translateX(-10px);}
.table .line .contact_email .contact_mail_to:hover{background:var(--blue_light);}
.table .line .contact_email .contact_mail_to:hover:after{content:"";position:absolute;width:34px;height:34px;background:url(/img/email_blue.svg) no-repeat center center;background-size:16px;right:7px;}
.table .line .contact_email .contact_mail_to:active{background:var(--blue_light_hover);}
.table .line .contact_phone{width:300px;line-height:60px;height:60px;white-space:nowrap;}
.table .line .contact_phone .contact_phone_to{display:inline-block;border-radius:20px;height:34px;line-height:34px;cursor:pointer;margin-top:13px;position:relative;padding:0 40px 0 10px;transform:translateX(-10px);}
.table .line .contact_phone .contact_phone_to:hover{background:var(--blue_light);}
.table .line .contact_phone .contact_phone_to:hover:after{content:"";position:absolute;width:34px;height:34px;background:url(/img/phonefilled.svg) no-repeat center center;background-size:16px;right:7px;}
.table .line .contact_phone .contact_phone_to:active{background:var(--blue_light_hover);}
.table .line .contact_phone .contact_phone_to img{width:24px;height:16px;border-radius:5px;margin:9px 8px 0 0;float:left;}
.table .line .contact_errors {flex-shrink: 1;}
.table .line .cell_edit{float:right;background:url(/img/edit.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:14px 20px 0 0;filter:grayscale(100%);opacity:0.5;}
.table .line .cell_edit:hover{background-color:var(--blue_light);filter:grayscale(0);opacity:1;}
.table .line .cell_edit:active{background-color:var(--blue_light_hover);}
.table .line .cell_trash{float:right;background:url(/img/trash.svg) no-repeat center;background-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer;margin:14px 20px 0 0;filter:grayscale(100%);opacity:0.5;}
.table .line .cell_trash:hover{background-color:var(--red_light);filter:grayscale(0);opacity:1;}

.import_contact_table {
	width: 950px;
}
.import_contact_table .body {
	max-height: min(30vh, 256px);
	overflow: auto;
}
.import_contact_table .line .contact_phone .contact_phone_to:hover {
	background-color: transparent;
	cursor: auto;
}
.import_contact_table .line .contact_phone .contact_phone_to:hover:after {
	content: none;
}
.import_contact_table.empty .body {
	height: 100px;
	background: url(/img/nocalls.svg) no-repeat center center var(--white);
	background-size: 24px;
	border-radius: 15px;
}

#popup .removecontactpopupbtn{display:none;}



/*=============================
	BLACKLIST
=============================*/

.cell.blacklist_number {
	flex: 0 0 200px;
	min-width: 0;
}

.cell.blacklist_comment {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cell.blacklist_number img {
	vertical-align: middle;
	width: 24px;
	height: 16px;
	border-radius: 5px;
	margin-inline-end: 6px;
}

.line .cell.blacklist_number {
	font-size: 14px;
	color: var(--font);
}

#page_blacklist .head {
	display: flex;
	align-items: center;
}

#page_blacklist .cell.actions {
	text-align: center;
	margin-left: auto;
	flex-shrink: 0;
	flex-basis: 120px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

#page_blacklist .cell_edit {
	margin: 0;
	background-size: 16px;
	width: 32px;
	height: 32px;
}

#tools_blacklist {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
#tools_blacklist .back_to {
	margin-right: auto;
}
#tools_blacklist hr.vertical {
	height: 90%;
}
#tools_blacklist .btn.add {
	margin-left: 0;
	margin-top: 0;
}

/* #tools_blacklist */

#cont_blacklist.wait {
	height: 100px;
	background: url(/img/loader.svg) no-repeat center center var(--white);
	border-radius: 15px;
}

#cont_blacklist.empty {
	height: 100px;
	background: url(/img/block_light_blue.svg) no-repeat center center var(--white);
	background-size: 24px;
	border-radius: 15px;
}

#cont_blacklist .line {
	display: flex;
	align-items: center;
}

#cont_blacklist .actions .cell_trash {
	margin: 0;
	float: none;
	display: block;
}


/*=============================
	MAILS
=============================*/

/* special table mails */
.table .head .mail_date{width:120px;}
.table .head .mail_subject{width:430px;}
.table .head .mail_sender{width:250px;}
.table .head .mail_lastaction{width:300px;}
.table .head .mail_status{width:200px;}

.table .line .mail_date{width:120px;line-height:60px;height:60px;}
.table .line .mail_subject{width:380px;padding-left:50px;line-height:60px;height:60px;color:var(--font);font-size:14px;}
.table .line .mail_subject strong{display:inline-block;font-weight:600;width:350px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.table .line .mail_subject:before{content:"";position:absolute;top:14px;left:0;display:block;width:32px;height:32px;background:url(/img/mail_unread.svg) no-repeat center center var(--red_light);background-size:20px;border-radius:50%;}
.table .line.UNREAD .mail_subject:before{background-image:url(/img/mail_unread.svg);background-color:var(--red_light);}
.table .line.UNREAD .mail_subject strong{font-weight:700;}
.table .line.PENDING .mail_subject:before{background-image:url(/img/mail_pending.svg);background-color:var(--orange_light);}
.table .line.COMPLETE .mail_subject:before{background-image:url(/img/mail_complete.svg);background-color:var(--green_light);}
.table .line .mail_sender{width:250px;line-height:60px;height:60px;}
.table .line .mail_lastaction{width:300px;line-height:60px;height:60px;}
.table .line .mail_lastaction img{width:32px;height:32px;border-radius:50%;vertical-align:middle;margin:0 5px 0 10px;}

/* panel mail */
.panel_big_subject{font-size:30px;font-weight:600;line-height:40px;}
.panel_mail_status{float:right;border:0;border-radius:5px;width:100px;background:var(--red);text-transform:uppercase;}
.panel_mail_status[data-value=UNREAD]{background:var(--red);}
.panel_mail_status[data-value=PENDING]{background:var(--orange);}
.panel_mail_status[data-value=COMPLETE]{background:var(--green);}
.panel_mail_status:before{background-image:url(/img/expand_real_white.svg);}
.panel_mail_status .value{color:var(--white);}
.panel_mail_status ul li:before{content:"";float:left;width:10px;height:10px;border-radius:50%;margin:14px 10px 0 0;}
.panel_mail_status ul li[data-value=UNREAD]:before{background:var(--red);}
.panel_mail_status ul li[data-value=PENDING]:before{background:var(--orange);}
.panel_mail_status ul li[data-value=COMPLETE]:before{background:var(--green);}
.mail_content{background:var(--white);border:1px solid var(--grey_border);border-radius:15px;margin:30px 70px 0 0;box-shadow:0 0 5px rgb(var(--black) / 0.067);}
.mail_content[data-owner=quicktalk]{border-left:5px solid var(--blue);margin:30px 0 0 70px;}
.mail_content .header{padding:15px;border-bottom:1px solid var(--grey_border);line-height:30px;}
.mail_content .header span.sender{display:block;}
.mail_content .header span.sender img{width:30px;height:30px;border-radius:50%;vertical-align:middle;margin:0 5px 0 5px;}
.mail_content .header span.date{float:right;background:var(--blue_light);font-size:11px;padding:0 10px;border-radius:5px;color:var(--font_light);}
.mail_content .body{padding:15px;}
.mail_action{margin-top:30px;}
.mail_action .btn.reply{background-image:url(/img/reply.svg);background-repeat:no-repeat;background-position:15px center;background-size:20px;padding-left:45px;}
.mail_action .btn.replyall{background-image:url(/img/replyall.svg);background-repeat:no-repeat;background-position:15px center;background-size:20px;padding-left:45px;}

.mail_write{background:var(--white);border:1px solid var(--grey_border);border-radius:15px;margin:30px 0 0 70px;box-shadow:0 0 5px rgb(var(--black) / 0.067);border-left:5px solid var(--orange);}
.mail_write .header{padding:15px;border-bottom:1px solid var(--grey_border);line-height:30px;}
.mail_write .header span.select{display:inline-block;vertical-align:middle;border:0;background:var(--blue_light);box-shadow:none;}
.mail_write .body{height:400px;border:0;padding:15px;outline:none;}
.mail_write .bodystyle{height:30px;padding:15px;border-top:1px solid var(--grey_border);}
.mail_write .bodystyle ul{list-style-type:none;border-left:1px solid var(--grey_border);height:30px;float:left;margin-right:10px;padding-left:10px;}
.mail_write .bodystyle ul:first-child{border:0;padding-left:0;}
.mail_write .bodystyle ul li{width:30px;height:0;padding-top:30px;overflow:hidden;background-repeat:no-repeat;background-position:center center;background-size:16px;float:left;cursor:pointer;border-radius:5px;}
.mail_write .bodystyle ul li:hover{background-color:var(--blue_light);}
.mail_write .bodystyle ul li:active{background-color:var(--blue_light_hover);}
.mail_write .bodystyle ul li.format_bold{background-image:url(/img/format_bold.svg);}
.mail_write .bodystyle ul li.format_italic{background-image:url(/img/format_italic.svg);}
.mail_write .bodystyle ul li.format_underline{background-image:url(/img/format_underline.svg);}
.mail_write .bodystyle ul li.format_fontsize{background-image:url(/img/format_fontsize.svg);}
.mail_write .bodystyle ul li.format_color{background-image:url(/img/format_color.svg);}
.mail_write .bodystyle ul li.format_alignleft{background-image:url(/img/format_alignleft.svg);}
.mail_write .bodystyle ul li.format_alignright{background-image:url(/img/format_alignright.svg);}
.mail_write .bodystyle ul li.format_aligncenter{background-image:url(/img/format_aligncenter.svg);}
.mail_write .bodystyle ul li.format_alignjustify{background-image:url(/img/format_alignjustify.svg);}
.mail_write .bodystyle .btn{float:right;margin-top:-5px;background-image:url(/img/send.svg);background-repeat:no-repeat;background-position:15px center;background-size:20px;padding-left:45px;}


/* autre façon */
.col_mail_subject{width:calc(30% - 1px);height:calc(100vh - 200px);float:left;border-right:1px solid var(--grey_border);border-radius:15px 0 0 15px;}
.col_mail_subject ul{list-style-type:none;}
.col_mail_subject ul li{position:relative;cursor:pointer;box-sizing:border-box;padding:10px 15px;border-bottom:1px solid var(--grey_border);}
.col_mail_subject ul li:hover{background:var(--line_hover);}
.col_mail_subject ul li span.status{position:absolute;top:10px;right:10px;font-size:9px;font-weight:600;background:var(--background);padding:0 5px;line-height:18px;border-radius:10px;border:1px solid rgb(var(--black));}
.col_mail_subject ul li span.status.PENDING{background:var(--orange_light);color:var(--orange);border-color:var(--orange);}
.col_mail_subject ul li span.status.COMPLETE{background:var(--green_light);color:var(--green);border-color:var(--green);}
.col_mail_subject ul li span.date{font-size:12px;background:var(--grey_head);color:var(--font_light);padding-right:10px;margin:0 10px 0 -15px;padding-left:15px;border-radius:0 10px 10px 0;}
.col_mail_subject ul li span.sender{font-size:12px;color:var(--font_light);}
.col_mail_subject ul li span.subject{position:relative;display:block;font-size:14px;line-height:30px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.col_mail_subject ul li span.user_action{display:block;font-size:12px;color:var(--font_verylight);line-height:20px;}
.col_mail_subject ul li span.user_action strong{font-weight:400;color:var(--font_light);vertical-align:bottom;}
.col_mail_subject ul li span.user_action img{width:20px;height:20px;border-radius:50%;vertical-align:bottom;}
.col_mail_subject ul li[data-read=unread] span.subject{padding-left:15px;font-weight:700;}
.col_mail_subject ul li[data-read=unread] span.subject:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blue);left:0;top:11px;}

.col_mail_content{width:70%;float:left;height:calc(100vh - 200px);border-radius:0 15px 15px 0;overflow:auto;}
.col_mail_content::-webkit-scrollbar{width:5px;}
.col_mail_content::-webkit-scrollbar-track{background:var(--blue_light);}
.col_mail_content::-webkit-scrollbar-thumb{background:var(--blue);}
.col_mail_content .subject{line-height:100px;font-weight:700;font-size:20px;padding-left:30px;}
.col_mail_content .mail_content{background:var(--white);border:1px solid var(--grey_border);border-radius:15px;box-shadow:0 0 5px rgb(var(--black) / 0.067);margin:0 30px 30px 30px;padding-top:10px;}
.col_mail_content .mail_content .header{height:60px;line-height:60px;background:var(--grey_border);border-radius:15px;margin:0 10px;padding:0 20px;}
.col_mail_content .mail_content .header span.from{line-height:20px;height:20px;margin-top:20px;}
.col_mail_content .mail_content .header span.from img{width:32px;height:32px;border-radius:50%;vertical-align:middle;}
.col_mail_content .mail_content .header span.date{float:right;}
.col_mail_content .mail_content[data-owner=quicktalk] .header{background:var(--blue_light);}
.col_mail_content .mail_content .body{font-size:14px;padding:30px;}


/*=============================
	QUEUE
=============================*/
#queue .expand_queue{position:relative;background:url(/img/comment_black.svg) no-repeat center center #fff;width:34px;height:34px;border-radius:50%;box-shadow: 0px 2px 5px rgb(0 0 0 / 10%);cursor:pointer;margin-left:100%;transform:translateX(-100%);margin-bottom:10px;}
#queue .expand_queue:hover{box-shadow: 0px 2px 10px rgb(0 0 0 / 15%);}
#queue .expand_queue:before{content:attr(data-nb);position:absolute;width:16px;height:16px;line-height:16px;text-align:center;color:var(--white);background:var(--red);border-radius:50%;font-size:11px;margin:-5px -5px 0 0;transition:all ease 0.2s;}
#queue .expand_queue[data-nb=none]{transform:scale(0);}

#queue .call{display:block;position:relative;width:0px;height:0px;background:var(--white);border-radius:10px;box-shadow: 0px 2px 5px rgb(0 0 0 / 10%);margin-top:0;overflow:hidden;transition:all cubic-bezier(0.42, 0, 0.03, 1.48) 0.5s;transition-property:height,margin-top,width;}
#queue .call:hover{box-shadow: 0px 2px 10px rgb(0 0 0 / 15%);transform:scale(1.02);}
#queue .call > .user_action {display: flex; align-items: center; height:22px;position:absolute;top:38px;left:10px;color:var(--font_light);font-size:12px;width: calc(100% - 52px);text-align: left;}
#queue .call > .user_action > .action{display:none;flex-shrink: 0;min-width: 0;}
#queue .call > .user_action img{width:26px;height:26px;border-radius:50%;margin:0 5px;vertical-align: bottom;}
#queue .call > .number{font-weight:600;height:30px;line-height:30px;position:absolute;top:10px;left:15px;background:url(/img/call_out.svg) no-repeat left center;background-size:20px;padding-left:30px;font-size:14px;}
#queue .call > .number img{width:24px;height:16px;float:left;margin:7px 5px 0 0;border-radius:5px;}
#queue .call > .time{position:absolute;top:10px;right:15px;line-height:22px;background:url(/img/time_wait.svg) no-repeat left center;padding-left:20px;background-size:16px;}
#queue .users { display: inline-flex; justify-content: center; align-items: center; min-width: 0; }
#queue .user { display: flex; align-items: center; min-width: 0; position: relative;}
#queue .user img { border: 2px solid var(--white); box-sizing: border-box; }
#queue .user + .user { margin-left: -6px; }
#queue .user .user_name {min-width: 0; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
#queue .user .user_initials { display: none; }
#queue .user.hide_user_name { flex-shrink: 0; }
#queue .user.hide_user_name:first-child {margin-left:5px;}
#queue .user.hide_user_name img { margin: 0;}
#queue .user.hide_user_name .user_name { position: absolute;background: var(--white);white-space: nowrap;padding: 5px 10px;border-radius: 10px;box-shadow: 0 0 15px rgba(0,0,0,0.05);left: 0;bottom: calc(100% - 5px);opacity: 0;transition: all ease 0.15s;pointer-events: none;z-index: 1;overflow: visible;}
#queue .user.hide_user_name.has_initials .user_initials { display: block; color: var(--blue); width: 26px; height: 26px; line-height: 24px; background-color: var(--blue_light);font-weight: 600;white-space: nowrap; overflow: hidden;text-overflow: ellipsis; text-align: center;border-radius: 50%;font-size: 11px;border: 2px solid var(--white);box-sizing: border-box;}
#queue .user.hide_user_name.has_initials img {display:none}
#queue .user.hide_user_name .user_name:before {content:"";position:absolute;width:10px;height:10px;background:var(--white);transform:rotate(45deg);bottom: -3px;left: 13px; }
#queue .user.user.hide_user_name:hover .user_name {bottom:calc(100% + 5px);opacity:1;}
#queue .call.out > .number{background-image:url(/img/call_out.svg);color:var(--blue);}
#queue .call.out > .user_action > .action.called_by{display:inline-block;}
#queue .call.ringing > .number{background-image:url(/img/ringing.svg);}
#queue .call.ringing > .user_action > .action.ringing{display:inline-block;}
#queue .call.init > .number{background-image:url(/img/arrow.svg);}
#queue .call.init > .user_action > .action.incomming_call{display:inline-block;}
#queue .call.init > .user_action > .user{display:none;}
#queue .call.answered > .number{background-image:url(/img/call_answered.svg);color:var(--green);}
#queue .call.answered > .user_action > .action.answered_by{display:inline-block;}
#queue .call.voicemail > .number{background-image:url(/img/call_voicemail.svg);color:var(--orange);}
#queue .call.voicemail > .user_action > .action.voicemail{display:inline-block;}
#queue .call.voicemail > .user_action > .user{display:none;}
#queue .call.hangup > .number{background-image:url(/img/call_hangup.svg);color:var(--red);}
#queue .call.hangup > .user_action > .action.hangup{display:inline-block;}
#queue .call.hangup > .user_action > .user{display:none;}
#queue .call.remove{width:300px;height:70px;margin-bottom:10px;transition-property:height,margin-top;transition-duration:0.3s}
#queue .hangup_call {display: inline-block; width: 24px; height: 24px;background:url(/img/call_hangup.svg) no-repeat center;background-size: 60%; position: absolute; bottom: 10px; right: 15px; border-radius: 4px;}
#queue .hangup_call:hover {cursor: pointer; background-color: var(--red_light);}

#queue.expand .expand_queue{background-image:url(/img/expand.svg);}
#queue.expand .expand_queue:before{transform:scale(0);}
#queue.expand .call{width:280px;height:70px;margin-bottom:10px;transition-property:height,margin-top;}
#queue.expand .call:nth-child(2){transition-duration:0.2s}
#queue.expand .call:nth-child(3){transition-duration:0.25s}
#queue.expand .call:nth-child(4){transition-duration:0.3s}
#queue.expand .call:nth-child(5){transition-duration:0.35s}
#queue.expand .call:nth-child(6){transition-duration:0.4s}


/* Portability */
#cont_portability.wait {
  height: 60px;
  background: url(/img/loader.svg) no-repeat center center var(--white);
  border-radius: 15px;
}

#cont_portability.empty {
	position: relative;
	height: 60px;
}

#cont_portability.empty::before {
	content: var(--empty-text);
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	opacity: 0.6;
}

#cont_portability .line {
	gap: 12px;
	padding-right: 16px;
}

#cont_portability .line .cell:first-child {
	max-width: 20ch;
}

#cont_portability .line .cell:last-child {
	margin-left: auto;
}

/* Permissions */
#app:not(.is_admin) .hide_not_admin,
#app:not(.is_US) .hide_not_US,
#app:not(.is_FR) .hide_not_FR {
	display: none;
}

@media (max-width:1660px) {
	#topmenu #users_presence li{margin-left:-10px;}
}
@media (max-width:1460px) {

	.page{width:980px;}
	
	.container {max-width: 980px;}

	.table .head .time{width:160px;}
	.table .head .comment{width:102px;}
	.table .head .call{width:67px;text-align:center;}
	.table .line .listen{width:95px;}
	.table .line .call_comment{margin-right:19px;}
	.table .line .call_star{margin-right:35px;}
	.table .line .call{margin-right:19px;}
	.table .line .time{width:160px;line-height:normal;}
	.table .line .time .date{display:block;line-height:30px;margin:10px 0 -3px 0;}
	.table .line .time .durations{display:block;margin-left:0;}
	.table .line .call_launch{margin-right:0;}
	
	.table .head .contact_name{width:260px;}
	.table .head .contact_company{width:165px;}
	.table .head .contact_email{width:180px;}
	.table .head .contact_phone{width:180px;}
	
	.table .line .contact_name{width:220px;}
	.table .line .contact_company{width:135px;}
	.table .line .contact_email{width:180px;}
	.table .line .contact_phone{width:180px;}
	
	#howtouse{width:200px;}
	#planning,.planning_actions{width:560px;}
	#page_calls { width:100%; max-width:min(calc(100% - 70px), 1140px); }
	#apply_all_days{right:-35px;}
	#input_ivr_timezone{width:calc(100% - 32px); max-width:250px;}
	.import_contact_table .contact_company {width:250px}
	#cont_calls .line {
		padding-right: 20px;
	}
}
@media (max-width:1290px) {
	.table:not([data-ivrs="multiple"]) .line .number { width: 200px; }
	.table .line .ivr {
    display: grid;
    grid-template-columns: 17ch minmax(6ch, 1fr);
    gap: 4px 0;
	}
	.table .line .ivr .scenario_label {
		grid-column: 1;
	}
}
@media (max-width:1089.98px) {
	
	/* elements */
	body{padding:0 10px;}
	h1{left:0;position:fixed;height:50px;line-height:50px;padding-left:60px;font-size:22px;}
	h1 span.btn{position:absolute;top:70px;left:0;}
	#gototop.on{display:none;}

	#page_calls { width:100%; max-width: calc(100% - 10px); }
	
	.select div.underselect{position:fixed;overflow:auto;top:0!important;left:0;bottom:0;right:0;min-width:auto !important;max-width:none !important;width:100% !important;border-radius:0;border:0;padding-top:50px;}
	.select div.underselect:before{display:none;}
	.select div.underselect .close_select{display:block;position:absolute;z-index:3;width:40px;height:40px;background:url(/img/cross.svg) no-repeat center center var(--blue_light);background-size:16px;border-radius:50%;top:15px;right:15px;cursor:pointer;}
	.select ul{max-height:none;height:auto!important}
	.select ul li{height:50px;line-height:50px;padding:0 30px;font-size:15px;}
	.select ul li[data-value=INOK]{background-position:30px center;padding-left:60px;}
	.select ul li[data-value=INKO]{background-position:30px center;padding-left:60px;}
	.select ul li[data-value=VOICEMAIL]{background-position:30px center;padding-left:60px;}
	.select ul li[data-value=OUT]{background-position:30px center;padding-left:60px;}
	.select ul > li > img{margin-top:17px;}
	
	/* general */
	#topmenu{display:none;}
	#logo{position:fixed;top:0;left:0;width:50px;height:50px;background-image:url(/img/logo.svg);background-size:26px;transition:all ease 0.25s;z-index:2;pointer-events:none;}
	
	#leftmenu{position:fixed;z-index:4;left:0;top:0;right:0;height:0;background:var(--white);overflow:hidden;}
	#leftmenu ul{position:absolute;list-style-type:none;top:35%;transform:translateY(-50%);width:100%;transition:all ease 0.2s;opacity:0;}
	#leftmenu ul li{ position: relative;}
	#leftmenu ul li a{text-decoration:none;display:block;height:40px;line-height:40px;font-size:20px;}
	#leftmenu ul li a:before{content:"";display:inline-block;width:38px;height:60px;background-repeat:no-repeat;background-position:0 center;background-size:28px;vertical-align:bottom;}
	#leftmenu ul li .badge--notif{
		top: 4px;
    right: 50%;
	}
	#leftmenu ul li a#menu_calls{transition:all ease 0.2s;}
	#leftmenu ul li a#menu_calls:before{background-image:url(/img/menu_logs_plain.svg);}
	#leftmenu ul li a#menu_contacts{transition:all ease 0.25s;}
	#leftmenu ul li a#menu_contacts:before{background-image:url(/img/menu_contacts_plain.svg);}
	#leftmenu ul li a#menu_blacklist{transition:all ease 0.30s;}
	#leftmenu ul li a#menu_blacklist:before{background-image:url(/img/block_blue.svg);}
	#leftmenu ul li a#menu_users{transition:all ease 0.35s;}
	#leftmenu ul li a#menu_users:before{background-image:url(/img/menu_users_plain.svg);}
	#leftmenu ul li a#menu_ivrsettings{transition:all ease 0.40s;}
	#leftmenu ul li a#menu_ivrsettings:before{background-image:url(/img/menu_settings_plain.svg);}
	#leftmenu ul li a#menu_store{transition:all ease 0.45s;}
	#leftmenu ul li a#menu_store:before{background-image:url(/img/menu_store_plain.svg);}
	#leftmenu ul li a#menu_billing{transition:all ease 0.50s;}
	#leftmenu ul li a#menu_billing:before{background-image:url(/img/menu_billing_plain.svg);}
	#leftmenu ul li a#menu_numbers{display:none;}
	#leftmenu ul li a#menu_sms:before{background-image:url(/img/menu_sms_plain.svg);}
	#leftmenu ul li a.justforresponsive{display:block;font-size:15px;height:40px;line-height:40px;margin:0 25%;}
	#leftmenu ul li a[data-page=settings]{border-top:1px solid var(--grey_border);margin-top:10px;padding-top:10px;}
	#leftmenu ul li a.justforresponsive:before{display:none;}
	#leftmenu.open{height:100%;}
	#leftmenu.open ul{top:50%;opacity:1;}
	#leftmenu.open ul li a{height:60px;line-height:60px;}
	#leftmenu ul li a[data-page="store"],
	#leftmenu ul li a[data-page="billing"]{height:60px;line-height:60px;font-size:20px;}
	#leftmenu ul li a[data-page="store"]:before,
	#leftmenu ul li a[data-page="billing"]:before {display: inline-block;}
	#leftmenu ul li a[data-page="portability"]{transition:all ease 0.55s;height:60px;line-height:60px;font-size:20px;}
	#leftmenu ul li a[data-page="portability"]:before{display:inline-block;background-image:url(/img/hashtag.svg);}
	
	#burgermenu{position:fixed;z-index:5;height:50px;width:50px;right:0;top:0;transition:all ease 0.5s;cursor:pointer;user-select: none;}
	#burgermenu:active{background:transparent;-webkit-tap-highlight-color:var(--white);}
	#burgermenu span{display:block;position:absolute;width:22px;height:2px;background:var(--blue);left:14px;top:24px;transition:all ease 0.25s;}
	#burgermenu span:nth-child(1){top:18px;}
	#burgermenu span:nth-child(3){top:30px;}
	#burgermenu.open{transform:rotate(90deg);}
	#burgermenu.open span:nth-child(1){transform:rotate(45deg);top:24px;}
	#burgermenu.open span:nth-child(2){transform:rotate(135deg);top:24px;}
	#burgermenu.open span:nth-child(3){transform:rotate(225deg);opacity:0;}
	#burgermenu.hide{opacity:0;pointer-events:none;}

	/* popup */
	#popup.on{display: block;}
	#popup #popup_body{width:100%;min-height:100%;transform:none;border-radius:0;margin:0;}
	#popup:is(.wait,.success,.error) #popup_body:before { position:fixed; }
	#popup.big #popup_body{width:100%;}
	#popup.medium #popup_body{width:100%;}
	#popup_content input:not([type="radio"]){margin-bottom:10px;}
	#popup_content input.half{width:calc(100% - 32px);margin-right:0;}
	#close_popup{display:block;position:absolute;z-index:3;width:40px;height:40px;background:url(/img/cross.svg) no-repeat center center var(--blue_light);background-size:16px;border-radius:50%;top:15px;right:15px;cursor:pointer;}

	.page{padding-top:50px;width:100%;}
	.container{max-width:100%;}
	.store{width:calc(100% - 2px);}
	.bloc{margin-top:10px;}
	.bloc .cellbloc{padding: 20px 15px 15px 15px;}
	
	/* logs */
	#stats{background:var(--white);border:1px solid var(--grey_border);height:100px;border-radius:0 0 15px 15px;overflow:hidden;margin-bottom:10px;}
	#stats .card{height:50px;padding-top:50px;width:calc(25% - 2px);margin-right:0px;border:0;border-radius:0;}
	#stats .card:before{height:30px;width:30px;top:15px;background-size:16px;}
	#stats .card label{font-size:9px;}

	#cont_calls .line:where(:hover, .selected) .call_select { display: none; }
	#app.is_admin #cont_calls .line:where(:hover, .selected) .number:before { 
		opacity: 1;
		transition: opacity 0.2s;
	}
	.open_popup[data-popup="calls_export_list_popup"].add {
		order: 1;
    width: auto;
    margin: 0 !important;
    justify-content: center;
	}
		
	.tools{margin:10px 0;}
	.tools .select.date{width:calc(100% - 30px);border-top:0;border-bottom:0;}
	.tools span.date .underselect{width:auto;height:auto;max-width:auto;right:0;}
	.tools span.date div.col{height:auto;float:none;width:auto;}
	.tools span.date div.col .trigger_date{display:none;}
	.tools span.date div.col#col_shortcut_date{width:calc(100% - 40px);}
	.tools span.date div.col .shortcut_date{float:left;box-sizing:border-box;width:calc(50% - 10px);}
	.tools span.date div.col .shortcut_date:nth-child(even){margin-right:20px;}
	.tools span.date label{display:block;}
	.tools span.date div.col#col_date_start{display:none;}
	.tools span.date div.col#col_date_end{display:none;}
	.tools span.date div.col .specificdates{display:inline-block;text-decoration:underline;cursor:pointer;margin-top:50px;}
	.tools span.date div.col .specificdates:before{content:attr(data-or) "...";position:absolute;margin-top:-30px;}
	.tools span.date div.col .specificdates.hide{display:none;}
	.tools span.date div.col .search_calls{margin-bottom:50px;}
	.calendarContainer{width:100%;padding:0;position:static;}
	#tools_calls { height:auto;margin-bottom:0;flex-direction: column; align-items: stretch; gap: 0 }
	#tools_calls > :not(:first-child) {border-radius:0;}
	#tools_calls > * + *:not(.clear) { padding-top: 0; }
	#tools_calls > :first-child {border-radius:15px 15px 0 0;}
	#tools_calls #switchcalls { margin-right: 0; }
	#tools_calls input.search { width: calc(100% - 60px); }



	.tools span#filter_ivrs:not(.on) + * {
		padding-top: 5px;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
	}
	
	.tools span#switchcalls .select.callstype .underselect{max-width:100%;}
	.tools span#switchcalls .select.callstype{width:calc(50% - 30px);}
	.tools span#switchcalls .callspending{width:calc(50% - 30px);text-align:center;}
	
	.table{margin-top:0;}
	.table .head{display:none;}
	.table .line{padding-left:10px;height:auto;position:relative;}
	.table .line[data-call_id]{flex-direction:column;}
	.table .line .number:before{background-color:transparent;background-size:30px;top:16px;}
	.table .line.missed .number:before{background-color:transparent;}
	.table .line.voicemail .number:before{background-color:transparent;}
	.table .line.out .number:before{background-color:transparent;}
	.table .line .number .contact{display:none;}
	.table .line .number > div > div { margin-top: 5px; }
	.table .line.withcontact .number > div > div { margin-bottom: -3px; }
	.table .line.withcontact .number .n{margin:0;line-height:normal;}
	.table .line.withoutcontact .number .n{margin:0;line-height:normal;}
	.table .line .number .n{font-weight:600;height: 32px;}
	.table .line:hover .number .n em {display:none;}
	.table .line .flow { padding-left: 50px;margin-block:4px; }
	.table .line.out:not(.displayivr) .flow { margin-block: -6px 0; }
	.table .line .ivr .badge { height:22px;line-height:22px;font-size:11px; }
	.table .line .ivr {
    display: grid;
    grid-template-columns: 17ch minmax(7ch, 1fr);
    gap: 4px 0;
	}
	.table .line .ivr .scenario_label {
		grid-column: auto;
	}
	.table .line .ivr .menu_label {
		margin-left: 0;
		border-radius: 50px;
		grid-column: 1/-1;
	}
	.table .line .user {width:auto;height:auto;font-size:11px;padding-left:50px;margin-bottom:16px;color:var(--font);justify-content:flex-start;order:1}
	.table .line .user img{display:none;}
	.table .line .user .user_tooltip.has_initials .user_initials {display:none;}
	.table .line .user .user_action{display:inline-block;color:var(--font)}
	.table .line.missed .user{display:none;}
	.table .line.voicemail .user{display:none;}
	.table .line .call{display:none;}
	.table .line .play{display:none;}
	.table .line .listen{position:absolute;top:0;right:0px;margin:0px 14px;pointer-events:none;}
	.table .line .transcript{margin-top:10px;}
	.table .line .call_comment{position:absolute;top:0;right:32px;margin:10px 10px 0 0;opacity:0;pointer-events:none;}
	.table .line .call_star{position:absolute;top:0;right:0;margin:10px 10px 0 0;opacity:0.15;pointer-events:none;}
	.table .line .time{padding-left:50px;font-size:11px;width:auto;height:auto;}
	.table .line .time .date{display:inline-block;width:auto;margin-right:12px;color:var(--font_verylight);margin-top:0;line-height:auto;}
	.table .line .time .durations .wait{display:none;}
	.table .line .time .durations{display:inline-block;filter:grayscale(1);}
	.table .line:where(.missed,.voicemail) .time {margin-bottom:16px;}
	.table .line .call_launch{display:none;}
	.table .line .call_detail{display:block;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;cursor:pointer;background:transparent;right:auto;}
	.table .line .call_detail:before{display:none;}
	.table .line.withcontact .number .contact{display:none;}

	#calls_export_generate,
	#calls_export_table {
		margin-top: 1rem;
	}

	#calls_export_generate .line,
	#calls_export_table .line {
		min-height: 40px;
		padding-block: 10px;
	}

	#calls_export_table .line {
		gap: 4px 12px;
		flex-wrap: wrap;
	}

	#calls_export_table .line .cell:not(.export_download,.delete) {
		flex-basis: auto;
		width: 100%;
	}

	#calls_export_table .line .cell.export_download {
		margin-left: -8px;
	}
	
	.table .line > .date{line-height:35px;position:absolute;}
	.table .line .invoicedate{margin-top:15px;width:130px;}
	.table .line .type{color: rgb(var(--black));margin-top:58px;position:absolute;line-height:normal;}
	.table .line .amount{line-height:90px;width:90px;}
	.table .line .status{margin:30px 0 0 0;}
	.table .line .cell.download{margin-top:29px;margin-right:15px;}
	#cont_portability .line { min-height: 40px; }

	/* calls */
	.call_detail_star { display: flex; }
	.call_detail_comment { display: block; }
	.call_detail_row.record {display: flex}
	#popup .save_comment { display: inline-block; }
	.call_detail_archive, .call_detail_download { display: inline-block; }
	.content_call_actions { margin-left: 0; }
	#call_detail_metro > * + * {
		margin-top: 12px;
	}
	.metro_line { 
		max-width: 500px;
		grid-template-columns: 1fr 1.5fr;
	}
	.metro_user {
		grid-column: 1/-1;
	}
	
	/* users */
	.bloc.user .tag{background-position:center;width:0;padding:0 0 0 30px;overflow:hidden;margin-right:10px;}
	.bloc.user .tag.awaiting{background-position:center;}
	.bloc.user img{margin:10px;}
	.bloc h2{font-size:20px;white-space:nowrap;}
	.tooltip {
		margin-top: -17px;
	}
	.bloc h2.calendar{padding-left:58px;}
	.bloc .col{margin-bottom:10px;width:100%;margin-right:0;}
	.bloc .col.alias{float:left;width:100px;margin-right:0;}
	.bloc .col.number{float:left;margin-right:0;}
	.bloc.user .open_out_plan_redirection_popup {margin-block:5px;vertical-align:baseline;}
	.bloc.user .users_edit{opacity:1;vertical-align:baseline;}
	.bloc.user .user_menu{position:relative;z-index:3;}
	.bloc.user .user_menu div.underselect{width:auto;max-width:none;left:0;right:0;top:0;}
	.bloc.user .users_data{max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
	
	/* billing */
	.input_label{position:static;display:block;margin-left:0;}
	.col.address > input, .col.address > .select{margin-top:5px;}
	.col.address input.half_firstname{border-radius:10px;border-right:1px solid var(--grey_border);}
	.col.address input.half_lastname{border-radius:10px;border-left:1px solid var(--grey_border);}
	.col.address input.half_strnumber{border-radius:10px;border-right:1px solid var(--grey_border);}
	.col.address input.half_strname{border-radius:10px;border-left:1px solid var(--grey_border);}
	.col.address input.half_zip{border-radius:10px;border-right:1px solid var(--grey_border);}
	.col.address input.half_city{border-radius:10px;border-left:1px solid var(--grey_border);}
	
	.title{height:auto;padding:10px 25px;}
	.title span.last_update{float:none;line-height:30px;}
	.title a{padding-top:0;}
	
	/* contacts */
	#cont_contacts .line{height:70px;}
	.contact_list_nav{top:51px;}
	.contact_list_section h2 {scroll-margin-top:143px;}
	.table .line .contact_detail{display:block;position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;cursor:pointer;}
	.table .line .cell_trash{display:none;}
	.table .line .cell_edit{display:none;}
	.table .line .contact_name{background:none;padding:13px 0 10px 10px;height:auto;line-height:normal;width:calc(100% - 20px)}
	.table .line .contact_name span.company_responsive{display:inline;}
	.table .line .contact_name span.company_responsive[data-is_company=no]{display:none;}
	.table .line .contact_company{display:none;}
	.table .line .contact_email{display:none;}
	.table .line .contact_phone{padding-left:10px;height:auto;line-height:normal;}
	.table .line .contact_phone .contact_phone_to{margin-top:0;height:auto;line-height:normal;}
	.table .line .contact_phone .contact_phone_to img{width:20px;height:13px;margin:2px 5px 0 0;}
	#popup .removecontactpopupbtn{display:block;float:right;color:var(--red);margin-top:20px;line-height:40px;height:40px;padding-left:25px;background:url(/img/trash.svg) no-repeat left center;background-size:20px;cursor:pointer;}
	.import_contact_table {width: 100%;}
	.import_contact_table .body {max-height: min(40vh, 500px);}
	.import_contact_table .line {height: 70px;}
	
	/* IVR */
	#setting_number_choice{font-size:20px;}
	#setting_number_choice .value:before{bottom:4px;}
	#setting_number_choice ul li em{margin-top:21px;}
	#howtouse {
		position: static;
    width: calc(100% - 20px);
    height: auto;
    border-left: 0;
    margin: 0px 0 15px -15px;
    border-radius: 0;
    border-bottom: 1px solid var(--grey_border);
	}
	.planning_actions{order: -1;width: auto;margin-left:0;max-width:none}
	.solo #howtouse label {
		display: none;
	}
	.solo #captions {
		display: none;
	}
	#captions{margin-bottom:0;padding-bottom:0;border-bottom:0;}
	#planning{width:100%;margin-left:0;}
	#planning .day{height:90px;}
	#planning .name{position:static;display:inline-block;font-size:14px;color:var(--blue);font-weight:600;background:var(--line_hover);line-height:26px;margin:15px 0 0 -15px;width:auto;padding:0 10px;border-radius:0 13px 13px 0;}
	.planning{top:60px;}
	.planning .plage span strong{font-size:10px;top:calc()}
	.planning .plage.active > span {
		transform: scale(1.7);
	}
	.planning .plage.active > span strong {
		background: var(--white);
		border-radius: 2px;
		outline: 2px solid var(--white);
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
		font-weight: 600;
	}
	.planning .plage.active span.cursor_end strong{top:auto;bottom:calc(100% + 8px)}
	#apply_all_days{display: none;}
	#apply_all_days span{position:static;opacity:1;box-shadow:none;}
	#apply_all_days span:before{display:none;}
	.calendar + .cellbloc {
		display: flex;
		flex-direction: column;
	}
	
	ul.checkbox li{width:100%;}
	ul.ivr_users li{width:100%;}
	ul.ivr_users.ordered li{width:100%;}
	ul.ivr_users li span.name{width:calc(100% - 50px);}
	.bloc .bloc_digit strong{background:none;position:absolute;}
	.bloc .bloc_digit.expand strong{position:static;}
	.bloc .bloc_digit.expand span.expand{display:none;}
	.bloc .bloc_digit span.action{display:none;}
	.bloc .bloc_digit span.digit_detail{display:block;position:absolute;width:100%;height:100%;cursor:pointer;z-index:1;}
	.bloc .bloc_digit.expand span.digit_detail{display:none;}
	.bloc .bloc_digit span.btn_digit {display:none;}
	.bloc .bloc_digit strong input{width:calc(100% - 32px);}
	.bloc .bloc_digit .content{margin-top:105px;}
	.bloc .bloc_digit.expand .content{margin-top:105px;}
	.ivr_player{background:none;width:45px;filter:grayscale(0);opacity:1;}
	.ivr_player span.play{background-color: var(--blue_light);}
	.bloc .bloc_digit{position:relative;}
	.bloc .bloc_digit span.up{display:block;position:absolute;top:15px;right:15px;background-image:url(/img/expand.svg);margin:0;background-color:var(--blue_light);filter: grayscale(0);}
	.bloc .bloc_digit.expand span.up{background-image:url(/img/up.svg);}
	.cont_btn_big{margin-top: 40px;padding-left:20px;}
	.has_changes .cont_btn_big {
		padding-bottom: 40px;
    padding-left: 20px;
	}
	.cont_btn_big .container {
		padding-inline: 30px;
	}
	#btn_reset_ivr {margin-left: 0;}
	.cont_fixed_bottom {
		inset-inline: 0;
	}
	
	
	
	/* studio */
	.col_voice{width:100%;}
	.col_music{width:100%;}
	.select#select_voice_tts ul{max-height:none;}
	.elem_advanced p{height:auto;padding-bottom:50px;}
	#popup_content .elem_advanced .rangevalue{top:auto;bottom:22px;}
	#popup_content .elem_advanced input[type=range]{top:auto;bottom:0;left: 35px;width: calc(100% - 120px);margin-bottom:20px;}
	#popup_content .elem_advanced .switch{top:auto;right:auto;bottom:35px;left: 35px;}
	
	
	/* settings */
	.bloc .select.settings{max-width:calc(100% - 40px);}
	#select_timezone{max-width:calc(100% - 40px);}
	.bloc.user.activate_admin .col_admin{float:left;}
	.bloc.settings .cellbloc{padding:10px 25px 25px 25px;}
	.bloc.settings input{width:calc(100% - 32px)}
	.bloc.settings .select:not(.phone_country){width:calc(100% - 32px)}
	.bloc.settings label{display:block;}
	.bloc.settings input.input_phone { width: calc(100% - 122px)}
	.bloc.settings .out_plan_redirection .input_phone {width: calc(100% - 158px)}
	#img_setting{vertical-align:middle;}
	#select_cc .underselect .flag_group img:last-child { margin:15px 10px 0 0; }
	
	/* player */

	#player{inset-inline:0;}
	#player .content{width:100%;gap: 10px; align-content: flex-end;flex-wrap: wrap;box-sizing:border-box; padding-bottom: 12px;}
	#player .progressbar{width:calc(100% - 40px);}
	#player .btn_pause{background-color: var(--blue_light);width:40px;height:40px;background-size:25px;order: 1}
	#player .btn_stop{background-color: var(--blue_light);width:40px;height:40px;background-size:25px;order: 1}
	#player .btn_speed{background-color: var(--blue_light);width:40px;height:40px;line-height:40px;order:1;padding-left:0;}
	#player .btn_download{background-color: var(--blue_light);width:40px;height:40px;background-size:25px;order: 1;}

	#player .btn_speed strong{width:40px;height:40px;font-size:13px;}
	#player .btn_speed ul{width:40px;}
	#player .btn_speed.on ul{height:280px;}
	#player .btn_speed ul li{width:40px;height:40px;}
	#player .time{top:-35px;}
	#player .time:before{top:22px;}

	/* BLACKLIST */
	#page_blacklist .table .head{display:none;}
	#page_blacklist .table .line{padding-left:20px;height:60px;}
	#page_blacklist .table .line .cell_edit {display: inline-block;}

}

@media (max-width: 767px) {
	.announce_sound_voice {
		font-size: 16px;
	}

	.announce_sound_voice .avatar {
		width: 48px;
	}

	.announce_sound_voice .avatar[src*="svg"] {
		padding: 12px;
	}
}

@media (max-width: 600px) {
	/* CALLS */
	.metro_line { 
		max-width: 310px;
		grid-template-columns: 1fr;
	}

	/* CONTACT */
	#tools_contact .search {
		width: calc(90% - 200px);
	}

	#tools_contact .btn.add {
		display: block;
		width: 40px;
		padding-right: 0;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
	}

	/* BLACKLIST */
	.line .cell.blacklist_comment {
		grid-column: 1;
	}

	#add_number {
		width: 0px;
		padding-right: 0;
		overflow: hidden;
	}

	#page_blacklist .table .line{
		display: grid;
		grid-template-columns: 1fr 100px;
		align-content: center;
		height: 90px;
		gap: 8px 6px;
	}

	#page_blacklist .line .cell.actions {
		grid-row: 1/3;
		grid-column: 2;
		margin-inline: auto;
		align-items: center;
	}

	#tools_blacklist .btn.add {
    padding-right: 0;
    width: 0;
    overflow: hidden;
	}
}

@media (min-width:1091px) {
	.table .line .user .user_name { position: absolute;background: var(--white);white-space: nowrap;padding: 5px 10px;border-radius: 10px;box-shadow: 0 0 15px rgba(0,0,0,0.05);left: 50%;bottom: calc(100% - 5px);transform: translateX(-50%); opacity: 0;transition: all ease 0.15s;pointer-events: none;z-index: 1;overflow: visible;}
	.table .line .user .user_name:before {content:"";position:absolute;width:10px;height:10px;background:var(--white);transform:translateX(-50%) rotate(45deg);bottom: -3px;left: 50%; }
	.table .line .user .user_tooltip:hover .user_name {bottom:calc(100% + 12px);opacity:1;}
}


/* darkmode */
.night{
	--white: #242627;
	--background:#242627;
	--line_hover:#333536;
	--btn_hover:#47494A;
	--blue_light_hover:#47494A;
	--grey_border: #696A6D;
	--font: #d4d6db;
	--blue_light:#2081E233;
	--font_medium: #c0c8da;
	--black: #edeef1;
}
.night #popup #popup_body{box-shadow:0 0 0 1px var(--grey_border);}
.night #leftmenu{background:var(--white);border-right:1px solid var(--grey_border);}
.night #logo{border-right:1px solid var(--grey_border);background-image:url(/img/logo.svg);}
.night .btn.add{background-color:var(--line_hover);}
.night .btn.add:hover{background-color:var(--btn_hover);}
.night .select ul li:hover,.night .select ul li.hover{background-color:var(--line_hover);}
.night #close_popup:hover{background-color:var(--line_hover);}
.night #leftmenu ul li a > span.label:before{border-left:1px solid var(--grey_border);border-bottom:1px solid var(--grey_border);}

.night ul.checkbox li{background-color:var(--line_hover);}
.night ul.checkbox li:hover{background-color:var(--grey_border);}
.night ul.checkbox li.on{background-color:var(--blue);}
.night ul.checkbox li:before{border-color:transparent;}
.night .select:before{background-image:url(/img/expand_white.svg);}


.night #player{border-top:1px solid var(--grey_border);}
.night #player .btn_pause:hover{background-color:var(--line_hover);}
.night #player .btn_stop:hover{background-color:var(--line_hover);}
.night #player .btn_speed:hover{background-color:var(--line_hover);}
.night #player .btn_speed.on{background-color:var(--line_hover);box-shadow:0 0 0 5px var(--line_hover);}
.night #player .time:before{background-image:url(/img/expand_white.svg);}
.night #player .duration:before{background-image:url(/img/expand_white.svg);}

.night .tools > span:not(.clear, .btn),
.night :is(#tools_calls,#tools_sms) > span:not(.clear, .btn) {background-color:var(--line_hover);}
.night .tools span.date div.col .shortcut_date{background-color:var(--line_hover);}
.night .tools span.date div.col .shortcut_date:hover{background-color:var(--btn_hover);}
.night .tools span.date div.col .shortcut_date:before{background-image:url(/img/check_white.svg);}
.night .calendarContainer{background-color:var(--line_hover);}
.night #datepicker_mois{border-color:var(--grey_border);}
.night #calendar_content td.choosable:hover{background-color:var(--btn_hover);}

.night .table .line .play:hover{background-color:var(--white);}
.night .table .line .call_comment:hover{background-color:var(--white);}
.night .table .line .call_star:hover{background-color:var(--white);}
.night .call_detail_info{background-color:transparent;box-shadow:0 0 0 1px var(--grey_border);}
.night .call_detail_star li.on{background-color:transparent;box-shadow:0 0 0 1px var(--grey_border);}
.night .call_detail_comment{background-color:transparent;box-shadow:0 0 0 1px var(--grey_border);}

.night .bloc.user .user_menu:hover span.value,.night .bloc.user .user_menu.on span.value{background-color:var(--line_hover);}
.night .bloc.user .users_edit:hover{background-color:var(--line_hover);}
.night .bloc.user .tag.awaiting{background-color:var(--line_hover);}

.night ul.music_choice li:hover{background-color:var(--line_hover);}
.night .planning{background-color:var(--grey_border);}
.night #howtouse{background-color:transparent;border-left:1px solid var(--grey_border);}
.night ul.ivr_users li{background-color:var(--line_hover);}
.night ul.ivr_users li:hover{background-color:var(--grey_border);}
.night ul.ivr_users li.on{background-color:var(--blue);}
.night ul.ivr_users li:before{border-color:transparent;}

.night .store:before{background-color:var(--line_hover);box-shadow:0 0 0 1px var(--grey_border);}
.night .store .logo{box-shadow:0 0 0 1px var(--grey_border);}

.night .bloc .bloc_digit{background:var(--line_hover)}
.night .bloc .bloc_digit strong{background:var(--background)}

.night .table .line .contact_name{background-image:url(/img/contact_white.svg);}
.night .table .line .contact_company{background-image:url(/img/company_white.svg);}