.kall-notifications {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	min-width: 300px;
	--kerp-blue: #007EA7;
	--kerp-lightblue: #00A7E1;
	--kerp-lightblue: #00A7E1;
	--kerp-black: #4D4D4D;
	--kerp-white: #ffffff;
	--kerp-lightgrey: #EEF0F2;
}

.kall-notifications-container {
	width: 100%;
}

.kall-notifications-footer {
	opacity: 0.8;
	background-color: var(--kerp-white);
	margin-bottom: 3px;
	text-align: right;
	padding: 0 3px;
	width: 100%;
	height: 37px;
}

.kall-notifications-toggle,
.kall-notifications-help,
.kall-notifications-close {
	padding: 0px 5px 2px 5px;
	font-size: 1em;
	color: var(--kerp-black) !important;
}

.kall-notifications-help {
	font-size: 24px;
}

.kall-notifications-toggle::before {
	content: "\2581";
}

.kall-notifications-toggle:hover::before {
	content: "\2583";
}

.kall-notifications-toggle.toggled::before {
	content: "\2583";
}

.kall-notifications-toggle.toggled:hover::before {
	content: "\2581";
}

.kall-notifications-close::before {
	content: "\21F1";
	display: inline-block;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	font-size: 2em;
}

.kall-notifications-close.toggled::before {
	content: "\21F2";
}

.kall-notification {
	position: relative;
	border-bottom-right-radius: 10px;
	opacity: 0.8;
	background-color: var(--kerp-white);
	border: 1px solid var(--kerp-blue);
	margin-bottom: 3px;
	width: 100%;
}

.kall-notifications-callpark-container .kall-notification {
	background-color: var(--kerp-white) !important;
}

.kall-notifications-callpark-container .kall-notification .left-corner {
	background-color: var(--kerp-black) !important;
	color: var(--kerp-white) !important;
}

.kall-notifications-callpark-container .kall-notification .kall-links a:not(.caller,.user,.societe,.contact,.kall-duration),
.kall-notifications-callpark-container .kall-notification .kall-more-infos {
	display: none !important;
}

.kall-notification .kall-infos {
	display: grid;
	grid-template-columns: 50px minmax(200px, 1fr) 25px;
}

.kall-notification .kall-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 0 5px;
}

.kall-notification .kall-links > * {
	flex: 1 0 31%;
	padding: 3px 0;
}

.kall-notification .kall-time {
	font-size: 1em;
	line-height: 30px;
	margin-right: 5px;
}
.kall-notification .kall-time.full-date {
	font-size: 0.6em;
}
.kall-notification.setup .kall-time {
	color: var(--kerp-white);
}

.kall-notification .kall-duration {
	font-size: 1em;
}
.kall-notification .kall-duration:hover {
	text-decoration: none !important;
	cursor: initial !important;
}
.kall-notification .kall-duration span {
	margin-right: 3px;
}

.kall-notification .left-corner::after {
	content: "\21E1";
	padding-right: 5px;
	display: block;
	font-size: 1.5em;
	font-weight: initial;
	color: var(--kerp-white);
	margin-top: 8px;
}

.kall-notification.incoming .left-corner::after {
	content: "\21E3";
}

.kall-notification .private-note {
	display: block;
	opacity: 0.6;
	background-color: var(--kerp-white);
	border-radius: 20px;
	padding: 10px 20px;
	margin-top: 10px;
}

.kall-notification .kall-actions {
	display: block;
	text-align: center;
	padding: 10px 5px;
}

.kall-notification .kall-actions .kall-transfer-div {
	margin-top: 8px;
	margin-bottom: 3px;
}

.kall-notification .kall-actions .kall-transfer-div .kall-btn-icon,
.kall-notification .kall-actions .kall-merge-div .kall-btn-icon {
	margin-right: 5px;
}

.kall-notification .kall-actions .kall-transfer-div .kall-transfer-actions,
.kall-notification .kall-actions .kall-merge-div .kall-merge-actions {
	display: inline-block;
}

.kall-notification .kall-actions .kall-transfer-div button,
.kall-notification .kall-actions .kall-merge-div button {
	border-radius: initial;
	font-weight: bold;
	line-height: 20px;
}

.kall-notification .kall-actions .kall-merge-div {
	margin-bottom: 3px;
}

.kall-notification .kall-actions .kall-answer {
	background-color: var(--kerp-blue);
	color: var(--kerp-white);
}

.kall-notification .kall-actions .kall-pause {
	padding: 10px;
	border-radius: initial;
}

.kall-notification .kall-actions .kall-pause:hover {
	background-color: var(--kerp-white);
}

.kall-notification .kall-actions .kall-hang-up {
	background-color: var(--kerp-white);
}

.kall-notification .kall-actions .kall-reject {
	background-color: var(--kerp-white);
}

.kall-notification .kall-actions .kall-answer .kall-btn-icon {
	color: var(--kerp-white);
}

.kall-notification .kall-actions .kall-pause .kall-btn-icon {
	color: var(--kerp-lightgrey);
	margin-right: 0;
}

.kall-notification .kall-actions .kall-hang-up .kall-btn-icon {
	color: crimson;
}

.kall-notification .kall-actions .kall-reject .kall-btn-icon {
	color: crimson;
}

.kall-notification .contact {
	font-weight: bold;
}

.kall-notification .kall-links > * {
	margin-left: 5px;
}

.kall-notification .left-corner {
	padding: 10px 6px;
	text-align: center;
}

.kall-notification.setup .left-corner {
	background-color: var(--kerp-blue);
}

.kall-notification.connected .left-corner {
	background-color: var(--kerp-lightblue);
}

.kall-notification.released .left-corner {
	background-color: var(--kerp-white);
}

.kall-notification.missed .left-corner {
	background-color: var(--kerp-lightgrey);
}

.kall-notification .close {
	margin: 0;
	padding: 3px;
	background-color: white;
	text-align: center;
	color: var(--kerp-black) !important;
	font-size: 1.2em !important;
	box-sizing: border-box;
	border: 1px solid transparent;
}

.kall-notification .close:hover {
	text-decoration: underline;
	border: 1px solid var(--kerp-black);
}

.kall-notification .kall-links a,
.kall-notification .kall-actions a {
	color: black;
	text-decoration: none;
	line-height: 30px;
	margin-right: 5px;
}

.kall-notification .kall-links a:hover,
.kall-notification .kall-actions a:hover {
	text-decoration: underline;
}

.kall-notification .kall-icon {
	color: var(--kerp-white);
	font-size: 20px;
	opacity: 1;
}

.kall-notification .kall-infos .caller {
	white-space: nowrap;
	line-height: 30px;
	font-weight: bolder;
}

.kall-notification.released .kall-icon {
	color: crimson;
}

.kall-notification.missed .kall-icon {
	color: var(--kerp-black);
}

.kall-notification .kall-actions a {
	padding: 10px 20px;
	border-radius: 20px;
	font-weight: bold;
}

.kall-notification .kall-actions .kall-transfer-div,
.kall-notification .kall-actions .kall-merge-div {
	display: block;
	text-align: left;
	padding: 0 5px;
}

.kall-notification .kall-actions button {
	background-color: white;
	border-radius: 8px;
	border: 1px solid darkgray;
	margin-left: 5px;
	padding: 2px 6px;
}

.kall-notification .kall-actions select {
	border-radius: 5px;
	margin-left: 5px;
}

.kall-notification .kall-actions button:hover {
	cursor: pointer;
	text-decoration: underline;
}

.kall-notification .kall-actions a .kall-btn-icon {
	margin-right: 5px;
}

.kall-notification.released .kall-icon,
.kall-notification.missed .kall-icon,
.kall-actions .kall-hang-up,
.kall-actions .kall-reject
 {
	-webkit-transform: rotateZ(225deg);
	-moz-transform: rotate(225deg);
	transform: rotate(225deg);
}

.kall-notification.setup .kall-icon {
	-webkit-animation: ring 4s .7s ease-in-out infinite;
	-webkit-transform-origin: 50% 4px;
	-moz-animation: ring 4s .7s ease-in-out infinite;
	-moz-transform-origin: 50% 4px;
	animation: ring 4s .7s ease-in-out infinite;
	transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
	0% { -webkit-transform: rotateZ(0); }
	1% { -webkit-transform: rotateZ(30deg); }
	3% { -webkit-transform: rotateZ(-28deg); }
	5% { -webkit-transform: rotateZ(34deg); }
	7% { -webkit-transform: rotateZ(-32deg); }
	9% { -webkit-transform: rotateZ(30deg); }
	11% { -webkit-transform: rotateZ(-28deg); }
	13% { -webkit-transform: rotateZ(26deg); }
	15% { -webkit-transform: rotateZ(-24deg); }
	17% { -webkit-transform: rotateZ(22deg); }
	19% { -webkit-transform: rotateZ(-20deg); }
	21% { -webkit-transform: rotateZ(18deg); }
	23% { -webkit-transform: rotateZ(-16deg); }
	25% { -webkit-transform: rotateZ(14deg); }
	27% { -webkit-transform: rotateZ(-12deg); }
	29% { -webkit-transform: rotateZ(10deg); }
	31% { -webkit-transform: rotateZ(-8deg); }
	33% { -webkit-transform: rotateZ(6deg); }
	35% { -webkit-transform: rotateZ(-4deg); }
	37% { -webkit-transform: rotateZ(2deg); }
	39% { -webkit-transform: rotateZ(-1deg); }
	41% { -webkit-transform: rotateZ(1deg); }

	43% { -webkit-transform: rotateZ(0); }
	100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
	0% { -moz-transform: rotate(0); }
	1% { -moz-transform: rotate(30deg); }
	3% { -moz-transform: rotate(-28deg); }
	5% { -moz-transform: rotate(34deg); }
	7% { -moz-transform: rotate(-32deg); }
	9% { -moz-transform: rotate(30deg); }
	11% { -moz-transform: rotate(-28deg); }
	13% { -moz-transform: rotate(26deg); }
	15% { -moz-transform: rotate(-24deg); }
	17% { -moz-transform: rotate(22deg); }
	19% { -moz-transform: rotate(-20deg); }
	21% { -moz-transform: rotate(18deg); }
	23% { -moz-transform: rotate(-16deg); }
	25% { -moz-transform: rotate(14deg); }
	27% { -moz-transform: rotate(-12deg); }
	29% { -moz-transform: rotate(10deg); }
	31% { -moz-transform: rotate(-8deg); }
	33% { -moz-transform: rotate(6deg); }
	35% { -moz-transform: rotate(-4deg); }
	37% { -moz-transform: rotate(2deg); }
	39% { -moz-transform: rotate(-1deg); }
	41% { -moz-transform: rotate(1deg); }

	43% { -moz-transform: rotate(0); }
	100% { -moz-transform: rotate(0); }
}

@keyframes ring {
	0% { transform: rotate(0); }
	1% { transform: rotate(30deg); }
	3% { transform: rotate(-28deg); }
	5% { transform: rotate(34deg); }
	7% { transform: rotate(-32deg); }
	9% { transform: rotate(30deg); }
	11% { transform: rotate(-28deg); }
	13% { transform: rotate(26deg); }
	15% { transform: rotate(-24deg); }
	17% { transform: rotate(22deg); }
	19% { transform: rotate(-20deg); }
	21% { transform: rotate(18deg); }
	23% { transform: rotate(-16deg); }
	25% { transform: rotate(14deg); }
	27% { transform: rotate(-12deg); }
	29% { transform: rotate(10deg); }
	31% { transform: rotate(-8deg); }
	33% { transform: rotate(6deg); }
	35% { transform: rotate(-4deg); }
	37% { transform: rotate(2deg); }
	39% { transform: rotate(-1deg); }
	41% { transform: rotate(1deg); }

	43% { transform: rotate(0); }
	100% { transform: rotate(0); }
}

@media screen and (max-width: 799px) {
	.kall-notifications {
		width: 100%;
	}

	.kall-notification .kall-actions select,
	.kall-notification .kall-actions label {
		margin-bottom: 8px;
	}

	.kall-notification .kall-actions .kall-transfer-div,
	.kall-notification .kall-actions .kall-merge-div {
		margin-top: 8px;
	}

	.kall-notification .kall-actions .kall-transfer-div .kall-transfer-actions,
	.kall-notification .kall-actions .kall-merge-div .kall-merge-actions {
		display: block;
		text-align: center;
	}

	.kall-notification .kall-actions .kall-transfer-div .kall-transfer-actions button,
	.kall-notification .kall-actions .kall-merge-div .kall-merge-actions button {
		width: 100%;
		border-radius: 5px;
	}

	.kall-notification .kall-links > * {
		flex: 1 0 100%;
	}
}