/* v1 PRODUCTION component styles for the operator screens, login, client call
 * and error pages — extracted from the rendered webapp/ bundle like
 * components.css (same [_nghost]/[_ngcontent] -> .ng-<tag> rewrite), minus
 * every rule components.css already carries.
 * GENERATED by scratchpad/vis/C-merge.py from collectC.js runs.
 * Component scopes: app-aside app-aside-search app-auth app-client-login app-client-main app-header-mobile app-layout app-login app-operator-agenda-list app-operator-agenda-main app-operator-dashboard-main app-operator-dashboard-porcent app-operator-dashboard-stats app-operator-videocall app-profile-operator app-scroll-top app-splash-screen app-topbar body
 */
@keyframes rotate { 
  100% { transform: rotate(1turn); }
}
@keyframes dash { 
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
@-webkit-keyframes rotate { 
  100% { transform: rotate(1turn); }
}
@-webkit-keyframes dash { 
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
@-webkit-keyframes load { 
  30% { width: 30%; }
  50% { width: 50%; }
  100% { width: 98%; }
}
@keyframes load { 
  30% { width: 30%; }
  50% { width: 50%; }
  100% { width: 98%; }
}
@-webkit-keyframes swal2-toast-show { 
  0% { transform: translateY(-0.625em) rotateZ(2deg); }
  33% { transform: translateY(0px) rotateZ(-2deg); }
  66% { transform: translateY(0.3125em) rotateZ(2deg); }
  100% { transform: translateY(0px) rotateZ(0deg); }
}
@keyframes swal2-toast-show { 
  0% { transform: translateY(-0.625em) rotateZ(2deg); }
  33% { transform: translateY(0px) rotateZ(-2deg); }
  66% { transform: translateY(0.3125em) rotateZ(2deg); }
  100% { transform: translateY(0px) rotateZ(0deg); }
}
@-webkit-keyframes swal2-toast-hide { 
  100% { transform: rotateZ(1deg); opacity: 0; }
}
@keyframes swal2-toast-hide { 
  100% { transform: rotateZ(1deg); opacity: 0; }
}
@-webkit-keyframes swal2-toast-animate-success-line-tip { 
  0% { top: 0.5625em; left: 0.0625em; width: 0px; }
  54% { top: 0.125em; left: 0.125em; width: 0px; }
  70% { top: 0.625em; left: -0.25em; width: 1.625em; }
  84% { top: 1.0625em; left: 0.75em; width: 0.5em; }
  100% { top: 1.125em; left: 0.1875em; width: 0.75em; }
}
@keyframes swal2-toast-animate-success-line-tip { 
  0% { top: 0.5625em; left: 0.0625em; width: 0px; }
  54% { top: 0.125em; left: 0.125em; width: 0px; }
  70% { top: 0.625em; left: -0.25em; width: 1.625em; }
  84% { top: 1.0625em; left: 0.75em; width: 0.5em; }
  100% { top: 1.125em; left: 0.1875em; width: 0.75em; }
}
@-webkit-keyframes swal2-toast-animate-success-line-long { 
  0% { top: 1.625em; right: 1.375em; width: 0px; }
  65% { top: 1.25em; right: 0.9375em; width: 0px; }
  84% { top: 0.9375em; right: 0px; width: 1.125em; }
  100% { top: 0.9375em; right: 0.1875em; width: 1.375em; }
}
@keyframes swal2-toast-animate-success-line-long { 
  0% { top: 1.625em; right: 1.375em; width: 0px; }
  65% { top: 1.25em; right: 0.9375em; width: 0px; }
  84% { top: 0.9375em; right: 0px; width: 1.125em; }
  100% { top: 0.9375em; right: 0.1875em; width: 1.375em; }
}
@-webkit-keyframes swal2-show { 
  0% { transform: scale(0.7); }
  45% { transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes swal2-show { 
  0% { transform: scale(0.7); }
  45% { transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@-webkit-keyframes swal2-hide { 
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.5); opacity: 0; }
}
@keyframes swal2-hide { 
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.5); opacity: 0; }
}
@-webkit-keyframes swal2-animate-success-line-tip { 
  0% { top: 1.1875em; left: 0.0625em; width: 0px; }
  54% { top: 1.0625em; left: 0.125em; width: 0px; }
  70% { top: 2.1875em; left: -0.375em; width: 3.125em; }
  84% { top: 3em; left: 1.3125em; width: 1.0625em; }
  100% { top: 2.8125em; left: 0.8125em; width: 1.5625em; }
}
@keyframes swal2-animate-success-line-tip { 
  0% { top: 1.1875em; left: 0.0625em; width: 0px; }
  54% { top: 1.0625em; left: 0.125em; width: 0px; }
  70% { top: 2.1875em; left: -0.375em; width: 3.125em; }
  84% { top: 3em; left: 1.3125em; width: 1.0625em; }
  100% { top: 2.8125em; left: 0.8125em; width: 1.5625em; }
}
@-webkit-keyframes swal2-animate-success-line-long { 
  0% { top: 3.375em; right: 2.875em; width: 0px; }
  65% { top: 3.375em; right: 2.875em; width: 0px; }
  84% { top: 2.1875em; right: 0px; width: 3.4375em; }
  100% { top: 2.375em; right: 0.5em; width: 2.9375em; }
}
@keyframes swal2-animate-success-line-long { 
  0% { top: 3.375em; right: 2.875em; width: 0px; }
  65% { top: 3.375em; right: 2.875em; width: 0px; }
  84% { top: 2.1875em; right: 0px; width: 3.4375em; }
  100% { top: 2.375em; right: 0.5em; width: 2.9375em; }
}
@-webkit-keyframes swal2-rotate-success-circular-line { 
  0% { transform: rotate(-45deg); }
  5% { transform: rotate(-45deg); }
  12% { transform: rotate(-405deg); }
  100% { transform: rotate(-405deg); }
}
@keyframes swal2-rotate-success-circular-line { 
  0% { transform: rotate(-45deg); }
  5% { transform: rotate(-45deg); }
  12% { transform: rotate(-405deg); }
  100% { transform: rotate(-405deg); }
}
@-webkit-keyframes swal2-animate-error-x-mark { 
  0% { margin-top: 1.625em; transform: scale(0.4); opacity: 0; }
  50% { margin-top: 1.625em; transform: scale(0.4); opacity: 0; }
  80% { margin-top: -0.375em; transform: scale(1.15); }
  100% { margin-top: 0px; transform: scale(1); opacity: 1; }
}
@keyframes swal2-animate-error-x-mark { 
  0% { margin-top: 1.625em; transform: scale(0.4); opacity: 0; }
  50% { margin-top: 1.625em; transform: scale(0.4); opacity: 0; }
  80% { margin-top: -0.375em; transform: scale(1.15); }
  100% { margin-top: 0px; transform: scale(1); opacity: 1; }
}
@-webkit-keyframes swal2-animate-error-icon { 
  0% { transform: rotateX(100deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes swal2-animate-error-icon { 
  0% { transform: rotateX(100deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@-webkit-keyframes swal2-rotate-loading { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes swal2-rotate-loading { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes swal2-animate-question-mark { 
  0% { transform: rotateY(-360deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes swal2-animate-question-mark { 
  0% { transform: rotateY(-360deg); }
  100% { transform: rotateY(0deg); }
}
@-webkit-keyframes swal2-animate-i-mark { 
  0% { transform: rotateZ(45deg); opacity: 0; }
  25% { transform: rotateZ(-25deg); opacity: 0.4; }
  50% { transform: rotateZ(15deg); opacity: 0.8; }
  75% { transform: rotateZ(-5deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@keyframes swal2-animate-i-mark { 
  0% { transform: rotateZ(45deg); opacity: 0; }
  25% { transform: rotateZ(-25deg); opacity: 0.4; }
  50% { transform: rotateZ(15deg); opacity: 0.8; }
  75% { transform: rotateZ(-5deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@-webkit-keyframes load8 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes load8 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes chartjs-render-animation { 
  0% { opacity: 0.99; }
  100% { opacity: 1; }
}
@-webkit-keyframes show { 
  0% { transform: translateX(100%); display: none; opacity: 0; }
  1% { transform: translateX(0px); display: block; }
  100% { transform: translateX(0px); display: block; opacity: 1; }
}
@keyframes show { 
  0% { transform: translateX(100%); display: none; opacity: 0; }
  1% { transform: translateX(0px); display: block; }
  100% { transform: translateX(0px); display: block; opacity: 1; }
}
@-webkit-keyframes hide { 
  0% { transform: translateX(0px); display: block; opacity: 1; }
  99% { transform: translateX(100%); display: block; }
  100% { transform: translateX(100%); display: none; opacity: 0; }
}
@keyframes hide { 
  0% { transform: translateX(0px); display: block; opacity: 1; }
  99% { transform: translateX(100%); display: block; }
  100% { transform: translateX(100%); display: none; opacity: 0; }
}
@keyframes p-skeleton-animation { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ng-app-profile-operator .profile-wrapper { background-color: transparent; font-family: Nunito; height: 60%; width: 100%; margin-right: 2px; border-radius: 7px; }
.ng-app-profile-operator .user-profile-desc { height: 60%; }
.ng-app-profile-operator .font { font-family: Nunito; }
.ng-app-profile-operator .img-thumbnail { max-width: 65% !important; }
.ng-app-profile-operator .text-truncate-name { font-size: 13px !important; }
.ng-app-profile-operator .text-truncate-status { font-size: 11px !important; }
.ng-app-operator-dashboard-main .center { text-align: center; }
.ng-app-operator-dashboard-main .br-iza { border-radius: 15px 0px 0px; border-width: 4px 1px medium 4px; border-style: solid solid none; border-color: rgb(0, 103, 176); border-image: none; }
.ng-app-operator-dashboard-main .br-dea, .ng-app-operator-dashboard-main .br-iza { background-color: rgb(255, 255, 255) !important; font-size: 25px; }
.ng-app-operator-dashboard-main .br-dea { border-radius: 0px 15px 0px 0px; border-image: none; border-width: 4px 4px medium 1px; border-style: solid solid none; border-color: rgb(0, 103, 176); }
.ng-app-operator-dashboard-main .br-izb { border-radius: 0px 0px 0px 15px; border-width: medium 1px 4px 4px; border-style: none solid solid; border-color: rgb(0, 103, 176); border-image: none; }
.ng-app-operator-dashboard-main .br-deb, .ng-app-operator-dashboard-main .br-izb { background-color: rgb(255, 255, 255) !important; font-size: 20px; }
.ng-app-operator-dashboard-main .br-deb { border-radius: 0px 0px 15px; border-image: none; border-width: medium 4px 4px 1px; border-style: none solid solid; border-color: rgb(0, 103, 176); }
.ng-app-operator-videocall a { text-decoration: none; }
.ng-app-operator-videocall :root { --focus-01: 0px 0px 0px 3px rgba(0,144,237,0.4); --field-focus-border: #0085f2; }
.ng-app-operator-videocall :root .subheader { display: none; }
.ng-app-operator-videocall .video-call-operator { position: absolute; width: 84%; z-index: 10; top: 11px; }
.ng-app-operator-videocall .app-container { position: relative; width: 100%; height: calc(100vh); display: flex; transition: 0.2s; --app-background: #eaebf5; --chat-background: #fff; --link-color: #c0c1c5; --navigation-bg: #fff; --navigation-box-shadow: 0 2px 6px 0 rgba(136,148,171,0.2),0 24px 20px -24px rgba(71,82,107,0.1); --navigation-box-shadow-tool: 0 2px 6px 0 hsla(0,0%,95.3%,0.2),0 24px 20px -24px rgba(71,82,107,0.1); --main-color: linear-gradient(90deg,#814293,#24448e 35%,#24448e); --message-bg: #f3f4f9; --message-bg-2: linear-gradient(90deg,#814293,#24448e 35%,#24448e); --message-text: #2c303a; --placeholder-text: #a2a4bc; --button-bg: #fff; }
.ng-app-operator-videocall .close_x { text-align: right; margin-right: 5%; padding-top: 4%; font-weight: 700; font-size: 15px; cursor: pointer; }
.ng-app-operator-videocall #butto_leng select { background-color: transparent; color: transparent; height: 100%; border: transparent; position: absolute; cursor: pointer; }
.ng-app-operator-videocall hr { margin-left: 20px; margin-right: 20px; background-color: rgb(0, 133, 242); }
.ng-app-operator-videocall .avatar-lg { height: 6rem; width: 6rem; box-shadow: rgb(238, 235, 235) 0px -3em 3em inset, rgba(0, 150, 131, 0.71) 0px 0px 0px 2px, rgba(0, 150, 131, 0.7) 0.3em 0.3em 1em; }
.ng-app-operator-videocall .text-success1 { color: rgb(40, 167, 69); }
.ng-app-operator-videocall .font_p { font-family: Nunito; font-weight: 600; }
.ng-app-operator-videocall .custom-tabs label { color: rgb(125, 126, 126); margin-left: 7%; font-weight: 500; }
.ng-app-operator-videocall .custom-tabs select { margin-top: 3px; }
.ng-app-operator-videocall .inf_client { text-align: left; font-family: Nunito; }
.ng-app-operator-videocall .video-header { width: 100%; padding: 16px; margin-top: 2%; border-bottom: 1px solid rgba(243, 238, 238, 0); }
.ng-app-operator-videocall .video-general { width: 100%; height: 80%; }
.ng-app-operator-videocall .font { font-size: 20px; }
.ng-app-operator-videocall .font, .ng-app-operator-videocall .font-xs { font-family: Nunito; }
.ng-app-operator-videocall .font-xs { font-size: 15px; }
.ng-app-operator-videocall .right-side { margin-left: auto; flex-basis: 400px; height: 100%; padding: 16px; position: relative; display: none; animation: 0.5s linear 0s 1 normal forwards running hide; }
.ng-app-operator-videocall .right-side.show { display: block; animation: 0.5s linear 0s 1 normal forwards running show; }
.ng-app-operator-videocall .img-profile { position: fixed; width: 100%; margin-top: auto; }
.ng-app-operator-videocall .online-dot { color: rgb(0, 255, 0); }
.ng-app-operator-videocall .offline-dot { color: red; }
.ng-app-operator-videocall .chat-hidden { display: none; }
.ng-app-operator-videocall .chat { display: block; width: 24%; height: 90%; position: relative; float: left; top: 4px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.682); margin-right: 0.5%; animation: 0.7s linear 0s 1 normal forwards running show; box-shadow: rgb(198, 198, 198) 3px 3px 3px; margin-top: 0px !important; }
.ng-app-operator-videocall .chat-container { border-radius: 10px; display: flex; flex-direction: column; height: 80%; background-color: rgb(255, 255, 255); }
.ng-app-operator-videocall .chat-area { flex: 1 1 0%; overflow-y: auto; padding: 16px; }
.ng-app-operator-videocall .profile-picture { border-radius: 8px; width: 32px; height: 32px; overflow: hidden; margin-right: 12px; flex-shrink: 0; }
.ng-app-operator-videocall .profile-picture img { width: 100%; height: 100%; object-fit: cover; }
.ng-app-operator-videocall .message-wrapper { display: flex; }
.ng-app-operator-videocall .name { margin: 0px; font-weight: 700; }
.ng-app-operator-videocall .message, .ng-app-operator-videocall .name { line-height: 16px; font-size: 12px; color: var(--message-text); }
.ng-app-operator-videocall .message { margin-top: 8px; background-color: var(--message-bg); padding: 8px 16px; border-radius: 0px 12px 12px; max-width: 100%; word-break: break-all; white-space: normal; }
.ng-app-operator-videocall .message-wrapper { padding: 16px 0px; }
.ng-app-operator-videocall .message-wrapper.reverse { flex-direction: row-reverse; }
.ng-app-operator-videocall .message-wrapper.reverse .message { background: rgb(0, 103, 176); color: rgb(255, 255, 255); margin-left: auto; border-radius: 16px 0px 16px 16px; word-break: break-all; white-space: normal; }
.ng-app-operator-videocall .message-wrapper.reverse .profile-picture { margin-right: 0px; margin-left: 12px; }
.ng-app-operator-videocall .message-wrapper.reverse .name { text-align: right; }
.ng-app-operator-videocall .alert { position: fixed; width: 250px; max-height: 70px; background-color: rgb(209, 209, 209); color: rgb(0, 0, 0); word-break: break-all; white-space: normal; top: 5%; right: 2%; margin: 0.5%; z-index: 2; animation: 0.5s linear 0s 1 normal forwards running show; }
.ng-app-operator-videocall .alert.disabled { animation: 0.5s linear 0s 1 normal forwards running hide; }
.ng-app-operator-videocall .hands { position: fixed; width: 280px; max-height: 100px; background-color: rgb(233, 233, 233); box-shadow: rgb(201, 201, 201) 6px 6px 6px; color: rgb(255, 255, 255); word-break: break-all; white-space: normal; top: 15%; right: 2%; margin: 0.5%; z-index: 2; border-radius: 10px; animation: 0.5s linear 0s 1 normal forwards running show; }
.ng-app-operator-videocall .hands.disabled { animation: 0.5s linear 0s 1 normal forwards running hide; }
.ng-app-operator-videocall .hands-btn { width: 20px; }
.ng-app-operator-videocall .badge-nt { background-color: rgba(0, 150, 130, 0.796); }
.ng-app-operator-videocall .btn-msg, .ng-app-operator-videocall .btn .badge { position: relative; }
.ng-app-operator-videocall .btn .badge { top: -31px; right: -6px; z-index: 99; }
.ng-app-operator-videocall #top_bar { background-color: rgb(0, 103, 176); height: 6%; z-index: 10; }
.ng-app-operator-videocall .none { display: none; }
.ng-app-operator-videocall .message-file { border: 1px solid var(--message-bg); width: 100%; margin-top: 16px; border-radius: 4px; padding: 8px; display: flex; cursor: pointer; }
.ng-app-operator-videocall .message-file .sketch { border-radius: 4px; padding: 2px; background-color: rgb(253, 238, 226); display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; }
.ng-app-operator-videocall .message-file .sketch svg { width: 20px; height: 20px; }
.ng-app-operator-videocall .file-info { flex: 1 1 0%; padding: 0px 40px 0px 8px; background-image: url("download.a07a6a7c7dcb0a40a0be.svg"); background-position: right 12px center; background-size: 20px auto; background-repeat: no-repeat; font-size: 12px; }
.ng-app-operator-videocall .file-name { color: var(--message-text); }
.ng-app-operator-videocall .file-size { color: rgb(184, 184, 184); }
.ng-app-operator-videocall .mention { color: rgb(124, 128, 253); }
.ng-app-operator-videocall .chat-typing-area-wrapper { padding: 16px; background-color: rgb(245, 245, 245); }
.ng-app-operator-videocall .chat-typing-area { display: flex; border-radius: 10px; padding: 8px; box-shadow: rgb(201, 201, 201) 6px 6px 6px; }
.ng-app-operator-videocall .dark .chat-typing-area { box-shadow: none; }
.ng-app-operator-videocall .chat-input { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 14px; line-height: 24px; outline: none; color: var(--message-text); flex: 1 1 0%; background-color: transparent; }
.ng-app-operator-videocall .chat-name { border-bottom: 2px solid rgb(198, 198, 198); padding: 10px; }
.ng-app-operator-videocall .send-button { color: rgb(255, 255, 255); background-color: var(--main-color); border-radius: 8px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; padding: 0px 5px; }
.ng-app-operator-videocall .btn-clip, .ng-app-operator-videocall .btn-send { background-color: rgb(0, 103, 176); margin: 3px; }
.ng-app-operator-videocall .app-main { flex: 1 1 0%; width: 100%; display: flex; flex-direction: column; align-items: center; }
.ng-app-operator-videocall .video-call-wrapper { width: 100%; display: flex; flex-wrap: wrap; }
.ng-app-operator-videocall .video-call-wrapper, .ng-app-operator-videocall .video-call-wrapper-config { height: 90%; border-radius: 16px; overflow: hidden; background-color: rgb(255, 255, 255); }
.ng-app-operator-videocall .video-call-wrapper-config { width: 75%; position: relative; float: right; }
.ng-app-operator-videocall .video-container { width: 100%; height: 90%; padding: 1%; transition: 0.4s linear; }
.ng-app-operator-videocall .video-opt { max-height: 500px; min-height: 500px; }
.ng-app-operator-videocall .video-participant { width: 49%; height: 100%; position: relative; float: left; top: 10px; background-color: rgba(0, 0, 0, 0.12); margin: 0.5%; animation: 0.5s linear 0s 1 normal forwards running show; }
.ng-app-operator-videocall .video-participant img { width: inherit !important; object-fit: cover; }
.ng-app-operator-videocall .video-participant img, .ng-app-operator-videocall .video-participant video { height: 100%; border-radius: 10px; animation: 0.5s linear 0s 1 normal forwards running show; }
.ng-app-operator-videocall .video-participant video { width: 100%; z-index: 1; }
.ng-app-operator-videocall .video-participant-me { width: 30%; height: 28%; right: 5%; bottom: 5%; position: absolute; float: right; background-color: rgba(0, 0, 0, 0.8); margin: 0.5%; animation: 0.5s linear 0s 1 normal forwards running show; }
.ng-app-operator-videocall .video-participant-me img { height: 100%; object-fit: cover; border-radius: 10px; width: inherit !important; }
.ng-app-operator-videocall .video-participant-me video { width: 100%; height: 100%; z-index: 1; border-radius: 10px; animation: 0.5s linear 0s 1 normal forwards running show; }
.ng-app-operator-videocall .participant-hidden { display: none; }
.ng-app-operator-videocall .name-tag { position: absolute; bottom: 12px; left: 12px; font-size: 12px; color: rgb(255, 255, 255); background-color: rgb(98, 98, 98); border-radius: 4px; padding: 4px 12px; z-index: 2; }
.ng-app-operator-videocall .participant-actions { position: absolute; display: flex; left: 12px; top: 12px; }
.ng-app-operator-videocall .video-call-actions { padding-top: 1%; width: 100%; text-align: center; margin-bottom: 2%; }
.ng-app-operator-videocall .text-gray { color: grey; }
.ng-app-operator-videocall .video-action-button { background-color: rgb(0, 103, 176); }
.ng-app-operator-videocall .video-action-button, .ng-app-operator-videocall .video-action-button-gray { height: 48px; margin: 0px 8px; box-shadow: var(--navigation-box-shadow); border-radius: 8px; width: 48px; cursor: pointer; outline: none; }
.ng-app-operator-videocall .video-action-button-gray { background-color: grey; }
.ng-app-operator-videocall .video-action-button-hangup { height: 48px; margin: 0px 8px; border-radius: 8px; width: 48px; background-color: rgb(225, 16, 80); }
.ng-app-operator-videocall .mode-switch, .ng-app-operator-videocall .video-action-button-hangup { box-shadow: var(--navigation-box-shadow); cursor: pointer; outline: none; }
.ng-app-operator-videocall .mode-switch { z-index: 1; position: absolute; top: 20px; left: 36px; background-color: var(--chat-background); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: rgb(221, 221, 221); border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; transform-origin: center center; }
.ng-app-operator-videocall .mode-switch svg { width: 0px; height: 24px; transition: 0.3s ease-in; transform-origin: center center; }
.ng-app-operator-videocall .mode-switch .moon { opacity: 0; }
.ng-app-operator-videocall .mode-switch .sun { width: 24px; }
.ng-app-operator-videocall .dark .moon { opacity: 1; width: 24px; }
.ng-app-operator-videocall .dark .sun { opacity: 0; width: 0px; }
.ng-app-operator-videocall .btn-close-right { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background-color: transparent; position: absolute; top: 24px; right: 24px; color: var(--light-font); outline: none; cursor: pointer; display: none; }
.ng-app-operator-videocall .btn-circle.btn-sm { width: 30px; height: 30px; padding: 6px 0px; border-radius: 15px; font-size: 8px; text-align: center; }
.ng-app-operator-videocall .btn-circle.btn-sm_ { border: 1px double rgb(255, 255, 255); background-color: rgba(0, 103, 176, 0.78); }
.ng-app-operator-videocall .btn-circle.btn-md { width: 50px; height: 50px; padding: 7px 10px; border-radius: 25px; font-size: 10px; text-align: center; }
.ng-app-operator-videocall .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; border-radius: 35px; font-size: 12px; text-align: center; }
.ng-app-operator-videocall .img-btn { width: 20px; height: 20px; }
.ng-app-operator-videocall .button-call { filter: invert(1); }
.ng-app-operator-videocall .btn-toolbar { height: 48px; margin: 0px 8px; box-shadow: none; border-radius: 8px; width: 48px; cursor: pointer; outline: none; background-color: rgb(0, 103, 176); }
.ng-app-operator-videocall .toolbar-icon { filter: invert(1); }
.ng-app-operator-videocall .toolbar-icon-drag { filter: invert(1); margin-top: auto; }
.ng-app-operator-videocall .toolbar-icon_:hover { border-radius: 5px; width: 25px; }
.ng-app-operator-videocall .toolbar-icon_act { filter: invert(31%) sepia(91%) saturate(1393%) hue-rotate(148deg) brightness(130%) contrast(101%); }
.ng-app-operator-videocall .toolbar-icon_:active { filter: invert(31%) sepia(91%) saturate(1393%) hue-rotate(148deg) brightness(99%) contrast(101%); }
.ng-app-operator-videocall .btn-participant { height: 48px; margin: 0px 8px; box-shadow: none; border-radius: 8px; width: 48px; cursor: pointer; outline: none; float: right; }
.ng-app-operator-videocall .nav-blue { position: absolute; width: 100%; }
.ng-app-operator-videocall .client-participant-icon { filter: invert(0); margin: auto; }
.ng-app-operator-videocall .client-participant-icon:hover { filter: invert(26%) sepia(29%) saturate(5182%) hue-rotate(186deg) brightness(94%) contrast(102%); }
.ng-app-operator-videocall .client-participant-icon:active { filter: invert(31%) sepia(91%) saturate(1393%) hue-rotate(148deg) brightness(99%) contrast(101%); }
.ng-app-operator-videocall .peer-participant-icon { filter: invert(26%) sepia(29%) saturate(5182%) hue-rotate(186deg) brightness(94%) contrast(102%); margin: auto; }
.ng-app-operator-videocall .peer-participant-icon:hover { filter: invert(12%) sepia(98%) saturate(6879%) hue-rotate(337deg) brightness(93%) contrast(88%); }
.ng-app-operator-videocall .peer-participant-icon:active { filter: invert(31%) sepia(91%) saturate(1393%) hue-rotate(148deg) brightness(99%) contrast(101%); }
.ng-app-operator-videocall .peer-participant-icon-active { filter: invert(12%) sepia(98%) saturate(6879%) hue-rotate(337deg) brightness(93%) contrast(88%); margin: auto; }
.ng-app-operator-videocall .peer-participant-icon-active:hover { filter: invert(26%) sepia(29%) saturate(5182%) hue-rotate(186deg) brightness(94%) contrast(102%); }
.ng-app-operator-videocall .peer-participant-icon-active:active { filter: invert(31%) sepia(91%) saturate(1393%) hue-rotate(148deg) brightness(99%) contrast(101%); }
.ng-app-operator-videocall .mat-tab-group { height: 100%; }
.ng-app-operator-videocall .btn-gradiant { background-image: radial-gradient(circle, rgb(62, 36, 142), rgb(20, 118, 183), rgb(62, 36, 142)); text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: rgb(255, 255, 255); box-shadow: rgb(238, 238, 238) 0px 0px 20px; border-radius: 25px; font-size: 10px; display: block; }
.ng-app-operator-videocall .text-dash { text-align: center; font-size: 18px; font-family: serif; color: grey; background-image: radial-gradient(circle, rgb(227, 229, 233), rgb(255, 255, 255), rgb(227, 229, 233)); border-radius: 0px 0px 10px 10px; }
.ng-app-operator-videocall .text-uppercase { font-size: 12px; }
.ng-app-operator-videocall .config-bar { width: 100%; text-align: center; }
.ng-app-operator-videocall .toolbar-box { padding: 10px; box-sizing: border-box; color: rgba(0, 0, 0, 0.87); display: inline-flex; justify-content: center; align-items: center; text-align: center; background: rgb(0, 103, 176); border-radius: 10px; position: relative; margin-top: 1%; transition: box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px; }
.ng-app-operator-videocall .toolbar-box:active { box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px; }
.ng-app-operator-videocall .drag-toolbar-handle { color: rgb(204, 204, 204); cursor: move; width: 30px; height: 100%; }
.ng-app-operator-videocall .client-card { margin: 2% 2% 5%; border-radius: 10px; box-shadow: rgba(128, 128, 128, 0.45) 3px 3px 3px; }
.ng-app-operator-videocall .custom-card-body { padding: 10px; }
.ng-app-operator-videocall .peer-card { margin: 2%; border-radius: 10px; box-shadow: rgba(128, 128, 128, 0.45) 3px 3px 3px; }
.ng-app-operator-videocall .card_name { display: flex; width: 50%; float: left; }
.ng-app-operator-videocall .device-selection { width: 80%; margin: 10px auto; border: 1px solid rgb(128, 189, 255); }
.ng-app-operator-videocall .form-control-solid:focus { border-color: rgb(0, 133, 242); background-color: rgba(128, 189, 255, 0.23); }
@media screen and (max-width: 900px) { .ng-app-operator-videocall .right-side { position: absolute; right: 0px; background-color: var(--chat-background); transform: translateX(100%); z-index: 2; width: 100%; } }
@media screen and (max-width: 900px) { .ng-app-operator-videocall .right-side.show { transform: translateX(0px); } }
@media screen and (max-width: 900px) { .ng-app-operator-videocall .btn-close-right { display: block; } }
@media screen and (max-width: 520px) { .ng-app-operator-videocall .app-main { padding: 72px 16px 16px; } }
@media screen and (max-width: 520px) { .ng-app-operator-videocall .mode-switch { left: 16px; } }
@media screen and (max-width: 520px) { .ng-app-operator-videocall .video-action-button { width: 32px; height: 32px; background-size: 14px auto; margin: 0px 4px; } }
@media screen and (max-width: 520px) { .ng-app-operator-videocall .video-action-button.endcall { background-size: 14px auto; font-size: 12px; padding-left: 36px; } }
@media screen and (max-width: 520px) and (max-height: 720px) { .ng-app-operator-videocall .video-participant { width: 48%; height: 33.3%; } }
@media screen and (max-width: 520px) and (max-height: 720px) { .ng-app-operator-videocall .video-participant-me { width: 30%; height: 28%; right: 5%; bottom: 5%; } }
@media screen and (max-width: 299px) { .ng-app-operator-videocall .toolbar-box { width: 100%; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .none { display: none !important; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant { width: 48%; height: 70%; position: relative; float: left; background-color: rgba(0, 0, 0, 0.12); margin: 0.5%; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant img { height: 60%; object-fit: cover; width: inherit !important; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant img, .ng-app-operator-videocall .video-participant video { border-radius: 10px; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant video { width: 100%; height: 100%; z-index: 1; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant-me { width: 30%; height: 28%; right: 9%; bottom: 13%; position: absolute; float: right; background-color: rgba(0, 0, 0, 0.8); margin: 0.5%; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant-me img { width: inherit !important; object-fit: cover; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant-me img, .ng-app-operator-videocall .video-participant-me video { height: 100%; border-radius: 10px; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-participant-me video { width: 100%; z-index: 1; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-call-actions { bottom: 17%; z-index: 99; left: 37%; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .chat { width: 93%; height: 59%; z-index: 2; top: 175px; position: absolute; background-color: rgb(255, 255, 255); } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-container-chat { width: 100%; display: none !important; } }
@media only screen and (max-width: 680px) { .ng-app-operator-videocall .video-call-wrapper, .ng-app-operator-videocall .video-call-wrapper-config { height: 85%; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .none { display: none !important; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant { width: 48%; height: 70%; position: relative; float: left; background-color: rgba(0, 0, 0, 0.12); margin: 0.5%; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant img { height: 60%; object-fit: cover; width: inherit !important; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant img, .ng-app-operator-videocall .video-participant video { border-radius: 10px; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant video { width: 100%; height: 100%; z-index: 1; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant-me { width: 30%; height: 28%; right: 9%; bottom: 13%; position: absolute; float: right; background-color: rgba(0, 0, 0, 0.8); margin: 0.5%; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant-me img { width: inherit !important; object-fit: cover; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant-me img, .ng-app-operator-videocall .video-participant-me video { height: 100%; border-radius: 10px; animation: 0.5s linear 0s 1 normal forwards running show; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-participant-me video { width: 100%; z-index: 1; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-call-actions { bottom: 27%; z-index: 99; left: 41%; } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .chat { width: 90%; height: 80%; z-index: 2; top: 140px; position: absolute; background-color: rgb(255, 255, 255); } }
@media only screen and (min-width: 681px) and (max-width: 820px) { .ng-app-operator-videocall .video-container-chat { width: 100%; display: none !important; } }
.ng-app-auth .login.login-1 .login-aside .aside-img { min-height: 450px; }
.ng-app-auth .login.login-1 .login-forgot, .ng-app-auth .login.login-1 .login-signin, .ng-app-auth .login.login-1 .login-signup, .ng-app-auth .login.login-1.login-signin-on .login-signup { display: none; }
.ng-app-auth .login.login-1.login-signin-on .login-signin { display: block; }
.ng-app-auth .login.login-1.login-signin-on .login-forgot { display: none; }
.ng-app-auth .login.login-1.login-signup-on .login-signup { display: block; }
.ng-app-auth .login.login-1.login-forgot-on .login-signin, .ng-app-auth .login.login-1.login-forgot-on .login-signup, .ng-app-auth .login.login-1.login-signup-on .login-forgot, .ng-app-auth .login.login-1.login-signup-on .login-signin { display: none; }
.ng-app-auth .login.login-1.login-forgot-on .login-forgot { display: block; }
@media (min-width: 992px) { .ng-app-auth .login.login-1 .login-aside { width: 100%; max-width: 700px; } }
@media (min-width: 992px) { .ng-app-auth .login.login-1 .login-content { width: 100%; max-width: 500px; } }
@media (min-width: 992px) { .ng-app-auth .login.login-1 .login-content .login-form { width: 100%; max-width: 450px; } }
@media (min-width: 992px) and (max-width: 1399.98px) { .ng-app-auth .login.login-1 .login-aside { width: 100%; max-width: 450px; } }
@media (max-width: 991.98px) { .ng-app-auth .login.login-1 .login-content .login-form { width: 100%; max-width: 400px; } }
@media (max-width: 575.98px) { .ng-app-auth .login.login-1 .aside-img { min-height: 300px !important; background-size: 400px auto; } }
@media (max-width: 575.98px) { .ng-app-auth .login.login-1 .login-content .login-form { width: 100%; max-width: 100%; } }
.ng-app-auth { background-image: url("background.77cd908408a4e016ff09.png"); height: 100%; width: 100%; background-position: 50% center; background-repeat: no-repeat; background-size: cover; }
.ng-app-auth .imagen { float: right; }
.ng-app-auth .content { height: 100%; }
.ng-app-login { width: 100%; }
@media (min-width: 992px) { .ng-app-login .login-form { width: 100%; max-width: 450px; } }
@media (min-width: 992px) { .ng-app-login .login-form .mat-form-field { width: 100%; } }
.ng-app-login #kt_login_signin_submit { background-image: linear-gradient(90deg, rgb(204, 0, 102) 5%, rgb(129, 66, 147) 35%, rgb(46, 115, 198)); cursor: pointer; border: transparent; border-radius: 30px; color: rgb(255, 255, 255); }
.ng-app-login .card-body-form { max-width: 420px; }
.ng-app-login .log-value { background-color: rgb(255, 255, 255); }
.ng-app-login .log-value:focus { background-color: rgb(210, 222, 245); }
.ng-app-login .lg { background-color: rgba(128, 128, 128, 0.43); border-radius: 10px; }
.ng-app-login .bg-blue { background-color: rgb(0, 103, 176); color: rgb(255, 255, 255); }
.ng-app-login .btn-gray { background-color: rgb(233, 231, 231); color: grey; }
.ng-app-client-main .login.login-1 .login-aside .aside-img { min-height: 450px; }
.ng-app-client-main .login.login-1 .login-forgot, .ng-app-client-main .login.login-1 .login-signin, .ng-app-client-main .login.login-1 .login-signup, .ng-app-client-main .login.login-1.login-signin-on .login-signup { display: none; }
.ng-app-client-main .login.login-1.login-signin-on .login-signin { display: block; }
.ng-app-client-main .login.login-1.login-signin-on .login-forgot { display: none; }
.ng-app-client-main .login.login-1.login-signup-on .login-signup { display: block; }
.ng-app-client-main .login.login-1.login-forgot-on .login-signin, .ng-app-client-main .login.login-1.login-forgot-on .login-signup, .ng-app-client-main .login.login-1.login-signup-on .login-forgot, .ng-app-client-main .login.login-1.login-signup-on .login-signin { display: none; }
.ng-app-client-main .login.login-1.login-forgot-on .login-forgot { display: block; }
@media (min-width: 992px) { .ng-app-client-main .login.login-1 .login-aside { width: 100%; max-width: 700px; } }
@media (min-width: 992px) { .ng-app-client-main .login.login-1 .login-content { width: 100%; max-width: 500px; } }
@media (min-width: 992px) { .ng-app-client-main .login.login-1 .login-content .login-form { width: 100%; max-width: 450px; } }
@media (min-width: 992px) and (max-width: 1399.98px) { .ng-app-client-main .login.login-1 .login-aside { width: 100%; max-width: 450px; } }
@media (max-width: 991.98px) { .ng-app-client-main .login.login-1 .login-content .login-form { width: 100%; max-width: 400px; } }
@media (max-width: 575.98px) { .ng-app-client-main .login.login-1 .aside-img { min-height: 300px !important; background-size: 400px auto; } }
@media (max-width: 575.98px) { .ng-app-client-main .login.login-1 .login-content .login-form { width: 100%; max-width: 100%; } }
.ng-app-client-main { background-image: url("background.77cd908408a4e016ff09.png"); height: calc(100vh); width: 100%; background-position: 50% center; background-repeat: no-repeat; background-size: cover; font-family: Nunito; }
.ng-app-client-main #kt_login_wrapper { overflow-x: hidden; }
.ng-app-client-login .card { border: 2px solid rgba(128, 128, 128, 0.25); border-radius: 30px; }
.ng-app-client-login .btn-gray { background-color: rgb(233, 231, 231); color: grey; }
.ng-app-client-login .btn-gray:hover { color: rgb(40, 41, 42); }
.ng-app-client-login .bg-blue { background-color: rgb(0, 103, 176); color: rgb(255, 255, 255); }

/* ── Hand-written bridges (not extracted): v2 DOM/global differences ───────── */
/* v1's layout hides app-subheader6 on /operador/videocall (`show` flag); the
 * screen draws its own "Tiempo Restante" header instead. */
body:has(.ng-app-operator-videocall) #kt_subheader { display: none; }
/* webapp has no global `.bg-blue` fill; v2's brand.scss does, and it leaks
 * behind the operator strip. */
.ng-app-operator-dashboard-main .bg-blue { background-color: transparent; }
/* webapp's PrimeNG lays non-scrollable tables out `auto` (measured: 105/285/444/396px). */
.ng-app-operator-agenda-list .p-datatable table { table-layout: auto; }