@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
/* 
html{
  background-color: ;
}
 */

:root{
  /*COLORES GENERALES */
  --Dark-Violet: #330066;
  --Violet:#330099;
  --Violet-UI:#6334C0;
  --Soft-Violet: #9966CC;
  --Soft-Violet-ui: #8157D6;
  --Light-Soft-Violet-ui: #D6ADFF;
  --violet-ui:#9966CC;
  --Soft-Violet-UI:#9966CC;
  --Light-Violet-UI:#C184FF;
  --Black:#101010;
  --Soft-Black:#323338;
  --Light-Black:#676879;
  --gray :#969798;
  --medium-Gray:#A1ACB3;
  --Light-Gray: #DCDEE7;
  --soft-Gray:#EDEEF2;
  --Light:#F2F5F9;
  --Shadows-gray:#F9F9F9;
  --White:#fff;
  --Dark-yellow:#FF9900;
  --yellow:#FFCC00;
  --Light-Yellow:#FFCC66;
  --blue:#0066FF;
  --Light-blue:#2EA6E8;
  --Dark-Green:#3a9e76;
  --Green:#28F28B;
  --Light-Green:#87E8C2;
  --Dark-Red:#be221d;
  --Red:#fa4943;
  --Light-red:#FF6F69;

  /* SET COLORES USE */
  --primary-color: var(--Dark-Violet);
  --scond-Color: var(--Dark-Green);
  --titles-color: var(--White);

  /*fonst*/
  --primary-font:'Roboto', sans-serif;

  /* scrollOnHover */
  --distance: 0px;
  --time: 0s;
}

/* APP THEMES */

/* LIGHT MODE */
:root {
  --background: var(--White);
  --background-accent: #EDEEF2; /* for lobby numericKeyboard */
  --ui-primary: #3F199D;
  --ui-secondary: var(--Soft-Violet-ui); /* numeric keyboard */
  --ui-accent: #28F28B;
  --text-primary: var(--Soft-Black);
  --scrollbar-color: rgba(0, 0, 0, 0.1);
  /* custom components */
  --ui-components-border: var(--Violet-UI);
  --ui-toolbar-main: #F1F2F2;
  --ui-toolbar-secondary: white;
  --ui-zonenumbercall-hover: #fff;
  --ui-calling-widget-color: 99, 52, 192; /* -> Violet UI */
  --ui-receivingcall-icon: #28F28B;
  --ui-receivingcall-shadow: 99, 52, 192; /* -> Violet UI */
  --ui-input-border-normal: var(--medium-Gray);
  --ui-input-border-hover: var(--gray);
  --ui-input-border-focus: var(--Violet-UI);
  --line-color: rgba(255, 255, 255, 0.1);
}
/* DARK MODE (DEFAULT) */
[data-theme='dark'] {
  --background: var(--Dark-Violet);
  --background-accent: var(--Violet-UI); /* for lobby numericKeyboard */
  --ui-primary: var(--Soft-Violet-ui);
  --ui-secondary: var(--Light-Violet-UI); /* numeric keyboard */
  --ui-accent: #28F28B;
  --text-primary: var(--White);
  /* custom components */
  --ui-components-border: var(--medium-Gray);
  --ui-toolbar-main: var(--Soft-Violet-ui);
  --ui-toolbar-secondary: var(--Soft-Violet-ui);
  --ui-zonenumbercall-hover: var(--Soft-Violet-ui);
  --ui-calling-widget-color: 255, 255, 255;
  --ui-receivingcall-icon: var(--Light-Violet-UI);
  --ui-receivingcall-shadow: 255, 255, 255;
  --ui-input-border-normal: rgba(255, 255, 255, 0.55);
  --ui-input-border-hover: white;
  --ui-input-border-focus: var(--Light-Violet-UI);
  --scrollbar-color: rgba(255, 255, 255, 0.3);
  --line-color: rgba(255, 255, 255, 0.4);
}

* {
  font-family: var(--primary-font);
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
  Clases generales para el uso exclusivo en un texto
  Solamente contienen el estilo para el texto, no existe estilo de contenedor ni de color
*/
.general-card-container-global{
  margin: auto;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background);
}

.general-card-container-global.margincontent{
  /* width: calc(100% - 70px); */
  max-width: 400px;
}


/*Clase contenedora*/
.general-container-screen{
  /* position: fixed; */
  right: 0px;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--background);
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
}

.responsive-container-screen{
  margin: 20px;
  width: calc(100% - 40px);
  max-width: 400px;
  height: 100%;
  max-height: 650px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-radius: 15px;
  border: solid 1px #00000033;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.158);
  position: relative;
  background-color: var(--background);
  z-index: 1000;
}

.responsive-container-screen.embebed{
  border: solid 0px #00000033;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.158);
}



/* para heights menores aaa */
@media (max-height: 800px) and (max-width: 500px) {
  .responsive-container-screen{
    margin: 0px;
    width: calc(100% - 0px);
    max-height: 100%;
    max-width: 100%;
  }
}


.responsive-container-screen::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0px;
  width: 6px;
  margin: 20px;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); */
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.3);
}

.caontainer-full-screen{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--background);
  /* min-height: var(--minim-height-webphone); */
}


.bywekall-label-global {
  display: inline-block !important;
  text-align: center;
  width: 100%;
  color: var(--text-primary);
  height: 15px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 11px;
  font-weight: 300;
  padding-top: 20px;
  padding-bottom: 15px;
}


.container-animated-datacall{
  z-index: 100;
  margin-left: -437px;
  opacity: 0;
  height: 100%;
  max-height: 582px;
  width: 350px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 15px;
  background: var(--background);
  border-radius: 10px;
  border: 1px solid #0000004d;
  padding: 34px;
}

.container-animated-datacall.embebed{
  border: 0px solid #0000004d;
}

@media screen and (max-width: 500px) {
  .container-animated-datacall{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0 !important;
    padding: 0 !important;
    min-width: unset;
    max-width: unset;
    min-height: unset;
    max-height: unset;
  }

  .header-call-details {
    padding: 15px;
  }

  .section-general-container-callitem {
    padding: 0 15px;
  }
}

  
  /*Clase contenedora*/
  .general-container-toolbar{
    min-height: 30px;
    width: calc(100% - 34px);
    margin: 7px auto 0 auto;
    /* background-color: #8157D6; */
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .lefth-zone-toolbar{
    display: flex;
    align-items: center;
    margin-left: 15px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 500;
  }

  .witness-toolbar-container {
    background-color: #3DDC84;
    padding: 2px 16px;
    border-radius: 10px;
  }

  @media (max-width: 280px){
    .lefth-zone-toolbar{
      max-width: 50%;
    }
    .lefth-zone-toolbar div{
      max-width: 100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      background-color: #8157D6;
    }
  }

  .clock-toolbar {
    font-weight: 500;
    font-size: 12px;
    color: white;
    margin-left: 7px;
  }

  .check-connect-toolbar{
    width: 14px;
    height: 14px;
    margin-right: 3px;
  }

  .rigth-zone-toolbar{
    display: flex;
    align-items: center;
    /* margin-right: 10px; */
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 500;
  }
  .circle-active-toolbar{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--Green);
    margin-right: 7px;
  }
  .product-active-toolbar {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .configure-icon-toolbar{
    width: 14px;
    height: 14px;
    margin-left: 6px;
    cursor: pointer;
    border-radius: 50%;
    padding: 4px;
  }

  .configure-icon-toolbar:hover{
    background-color: rgba(0, 0, 0, 0.174);
  }

  .configure-icon-toolbar:active{
    opacity: 0.7;
  }

  .container-select-product-toolbar{
    position: relative;
    /* width: 130px; */
    /* height: 22px; */
    width: auto;
    height: auto;
    display: flex;
    justify-content: end;
  }

  .static-select-product-toolbar{
    display: flex;
    height: 100%;
    width: max-content;
    align-items: center;
    justify-content: end;
    cursor: pointer;
    border-radius: 5px;
    height: 23px;
    padding: 0 8px;
    border: solid 0px;
    background: transparent;
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 400;
    outline: none;
  }
  .static-select-product-toolbar:hover{
    background-color: rgba(0, 0, 0, 0.144);
  }


  .float-select-product-toolbar{
    position: absolute;
    margin-top: 30px;
    width: max-content;
    border-radius: 5px;
   /*  height: 67px; */
    height: 0px;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.288);
    backdrop-filter: blur(5px);
    z-index: 10;
    overflow: hidden;
    z-index: 99999999;
  }
  .row-float-select-product-toolbar{
    display: flex;
    justify-content: left;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    height: 26px;
    align-items: center;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0;
  }
  .row-float-select-product-toolbar:hover{
    background-color: rgba(0, 0, 0, 0.26);
  }
  .row-float-select-product-toolbar.light:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

.container-gen-buttonbk{
  color: rgb(255, 255, 255);
  border: 0px solid rgb(66, 66, 66);
  padding: 0px;
  border-radius: 10px;
  cursor: pointer;
  display: inline;
  min-width: 50px;
}

.container-gen-buttonbk-disabled {
  color: rgb(255, 255, 255);
  border: 0px solid rgb(66, 66, 66);
  padding: 0px;
  border-radius: 10px;
  cursor: pointer;
  display: inline;
  min-width: 50px;
  background-color: rgba(0, 0, 0, 0.3) !important; /* override javascript styling due Theming feature (since 04/10/2022) */
}

.container-gen-buttonbk-disabled:hover {
  cursor: not-allowed;
}

.containerAnimate-buttonbk{
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 13px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.animate-buttonbk{
  background-color: rgba(255, 255, 255, 0.6);
  width: 0px;
  height: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.container-gen-buttonbk-disabled .container-text-buttonbk {
  color: var(--gray) !important;
}

.container-text-buttonbk{
  width: max-content;
  height: 100%;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}

.containerAnimateHover-buttonbk{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.animateHover-buttonbk{
  background-color: rgb(30, 108, 253);
  height: 5px;
  width: 0px;
  border-radius: 2px;
}

.icon-buttonbk{
  width: auto;
  margin-right: 6px;
} 

.loader-simpleloader {
  position: relative;
  margin: 0px auto;
  width: 30px; /* SET SIZE OF SPINNER HERE */
}

.loader-simpleloader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular-simpleloader {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path-simpleloader {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;

}

.path-black-simpleloader {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;

}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124px;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124px;
  }
}

@-webkit-keyframes color {
  100%, 0% {
    stroke: #ffffff;
  }
  40% {
    stroke: #ffffff;
  }
  66% {
    stroke: #ffffff;
  }
  80%, 90% {
    stroke: #ffffff;
  }
}

@-webkit-keyframes colorBlack {
  100%, 0% {
    stroke: #353535;
  }
  40% {
    stroke: #353535;
  }
  66% {
    stroke: #353535;
  }
  80%, 90% {
    stroke: #353535;
  }
}

/*Clase contenedora*/
.general-container-textareawk{

}

.label-textareawk {
  height: 13px;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 600;
}

textarea.textarea-container-textareawk {
  border-style: none;
  resize: none;
}

textarea.textarea-container-textareawk:focus-visible {
  outline: 0;
}

.container-input-textareawk {
  height: calc(100% - 50px);
  border-radius: 10px;
  border:solid 2px var(--ui-input-border-normal);
  overflow: hidden;
  font-size: 16px;
}

.container-input-textareawk textarea {
  height: 100%;
  width: 100%;
  padding: 10px;
  background-color: transparent;
  color: var(--text-primary);
  font-weight: 400;
}

.container-input-textareawk:hover {
  border: solid 2px var(--ui-input-border-hover);
}

.container-input-textareawk textarea::placeholder {
  /* color: #726292; */
  color: var(--text-primary);
  font-weight: 400;
}

.container-input-textareawk textarea:focus {
  height: 100%;
  width: 100%;
  padding: 10px;
}

.container-input-textareawk::placeholder {
  font-size: 16px;
  /* color: var(--medium-Gray); */
  color: var(--text-primary);
}

.container-input-textareawk.selected {
  border:solid 2px var(--ui-input-border-focus);
}
.general-container-inputwk{
  /* background-color:rgba(84, 164, 240, 0.39); */
  width: 100%;
  height: max-content;
  /* margin-right: 10px; */
}

.zone-label-inputwk{
  height: 13px;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 600;
}

.zone-error-inputwk{
  margin-top: 2px;
  height: 20px;
  margin-left: 5px;
  width: calc(100% - 10px);
  color:#F6352D;
  font-weight: 100;
  font-size: 13px;
  min-height: max-content;
}

.container-input-inputwk{
  width: calc(100% - 4px);
  border-radius: 10px;
  border:solid 2px var(--ui-input-border-normal);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.container-input-inputwk:hover{
  border-color: var(--ui-input-border-hover);
}

.container-input-inputwk-selected{
  width: calc(100% - 4px);
  border-radius: 10px;
  border:solid 2px var(--ui-input-border-focus);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.container-input-inputwk-disable{
  width: calc(100% - 4px);
  border-radius: 10px;
  /* border:solid 2px #dddee6;
  background-color: #dddee6; */
  border:rgba(0, 0, 0, .1);
  background-color: rgba(0, 0, 0, .1);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.container-input-inputwk-disable.dark{
  border: 2px solid rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, .25);
}
.container-input-inputwk-disable.dark input {
  color: var(--Light-Gray);
}

.container-input-inputwk-disable.light{
  border: 2px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, .1);
}
.container-input-inputwk-disable.light input {
  color: var(--gray);
}

.general-container-inputwk input{
  width: 100%;
  height: 100%;
  outline: none;
  padding-left: 8px;
  color: var(--text-primary);
  border: none;
  background-color: rgba(255, 255, 255, 0);
}

.general-container-inputwk input::-webkit-outer-spin-button,
.general-container-inputwk input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.general-container-inputwk input[type=number] {
  -moz-appearance: textfield;
}

.general-container-inputwk input::placeholder {
  /* color: var(--medium-Gray); */
  color: var(--text-primary);
  opacity: 0.6;
  /* opacity: 0.6; */
}

.icon-checkerror-inputwk{
  width: 13px;
  height: 13px;
  margin-right: 10px;
  margin-left: 7px;
  cursor: pointer;
}

.icon-checkerror-inputwk-error{
  width: 13px;
  height: 13px;
  margin-right: 10px;
  margin-left: 7px;
  cursor: pointer;
}
.icon-checkerror-inputwk-error:hover{
  opacity: 0.7;
}
.icon-checkerror-inputwk-error:active{
  opacity: 1;
}


.general-general-container-dropdownwk{
  height: max-content;
  width: 100%;
  max-width: 350px;
}

.general-container-dropdownwk{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y:unset;
}

.label-dropdownwk{
  height: 13px;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 10px;
}

.static-zone-dropdownwk{
  width: calc(100% - 0px);
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
  border-radius: 8px;
  background-color: transparent;
  border: solid 2px var(--ui-input-border-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
}

.static-zone-dropdownwk:hover {
  border: solid 2px var(--ui-input-border-hover);
}

.seletc-static-zone-dropdownwk{
  width: calc(100% - 0px);
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
  border-radius: 8px;
  background-color: transparent;
  border: solid 2px var(--ui-input-border-focus);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
}

.disabled-static-zone-dropdownwk{
  width: calc(100% - 0px);
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
  border-radius: 8px;
  border: solid 2px var(--soft-Grayy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--soft-Gray);
  color: var(--gray);
}

.disabled-static-zone-dropdownwk-dark{
  width: calc(100% - 0px);
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
  border-radius: 8px;
  border: solid 2px var(--soft-Grayy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #0000007c;
  color: var(--gray);
}

.disabled-static-zone-dropdownwk.dark {
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--Light-Gray);
}

.disabled-static-zone-dropdownwk.light {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--gray);
}

.disabled-static-zone-dropdownwk:hover {
  cursor: default;
}

.holder-dropdownwk{
  margin-left: 5px;
  font-style: normal;
  font-size: 16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.icon-updown-dropdownwk{
  width: 10px;
  height: 10px;
  margin-right: 10px;
  user-select: none;
}


.window-float-dropdownwk{

  position: static;
  height: max-content;
  min-height: max-content;
  width: 400px;
  margin-top: 75px;
  /* display: none; */
  flex-direction: column;
  position: relative;
  z-index: 100;
  border-radius: 13px;
  align-items: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.226);
  border: solid 0px #000;
  background-color: var(--White);
}

.search-zone-dropdownwk{
  border: solid 2px var(--medium-Gray);
  height: 30px;
  margin-top: 10px;
  border-radius: 10px;
  width: calc(100% - 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-zone-dropdownwk input{
  outline: none;
  height: 100%;
  width: calc(100% - 40px);
  border: solid 0px #000;
  background-color: rgba(0, 0, 0, 0);
  margin-left: 10px;
  font-size: 14px;
  color: var(--Soft-Black);
}

.search-zone-dropdownwk img{
  width: 15px;
  height: 15px;
  margin-right: 10px;
  cursor: pointer;
}

.search-zone-dropdownwk img:hover{
  opacity: 0.7;
}

.search-zone-dropdownwk img:active{
  opacity: 1;
}

.items-zone-dropdownwk{
  width: calc(100% - 24px);
  height: max-content;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  text-align: left;
}

/* .items-zone-dropdownwk div{
  width: calc(100% - 20px);
  height: 25px;
  border-radius: 8px;
  padding-left: 10px;
  font-size: 14px;
  color: var(--Soft-Black);
  cursor: pointer;
}
 */
.aling-text-dropdownwk{
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
  color: var(--Light-Black);
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  height: max-content;
  padding-top: 10px;
  padding-bottom: 10px;
  width: calc(100% - 30px);
  display: inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  user-select: none;
}

.select-aling-text-dropdownwk{
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
  color: var(--White);
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  height: max-content;
  padding-top: 10px;
  padding-bottom: 10px;
  width: calc(100% - 30px);
  display: flex;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  user-select: none;
  background-color: var(--Soft-Violet-ui);
}

@keyframes scrollText {
  0% {
    /* transform: translateX(0); */
    margin-left: 0px;
    margin-right: auto;
  }
  90% {
    margin-left: var(--distance);
    margin-right: auto;
  }
  100% {
    /* transform: translateX(0); */
    margin-left: 0px;
    margin-right: auto;
  }
}

.select-aling-text-dropdownwk.with-scroll:hover > div {
  text-overflow: unset;
  animation: scrollText var(--time) linear infinite;
  width: max-content;
  margin-left: 0px;
}

.select-aling-text-dropdownwk.with-scroll div {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aling-text-dropdownwk:hover{
  background-color: var(--soft-Gray);
}

.aling-text-dropdownwk.with-scroll:hover > div{
  animation: scrollText var(--time) linear infinite;
}

.aling-text-dropdownwk:active{
  background-color: var(--Light-Black);
  color: var(--White);
}


.items-zone-dropdownwk::-webkit-scrollbar {
  background-color: var(--soft-Gray);
  border-radius: 12px;
  width: 8px;
}

/* background of the scrollbar except button or resizer */
.items-zone-dropdownwk::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0);
}

/* scrollbar itself */
.items-zone-dropdownwk::-webkit-scrollbar-thumb {
  background-color: var(--Light-Gray);
  border-radius: 16px;
  border: 3px solid var(--soft-Gray);
}

/* scrollbar itself */
.items-zone-dropdownwk::-webkit-scrollbar-thumb:hover {
  background-color: var(--medium-Gray);
  border-radius: 16px;
  border: 3px solid var(--soft-Gray);
}

/* set button(top and bottom of the scrollbar) */
.items-zone-dropdownwk::-webkit-scrollbar-button {
  display:none;
}

.zone-error-dropdownwk{
  margin-top: 2px;
  height: 20px;
  margin-left: 5px;
  width: calc(100% - 10px);
  color:#F6352D;
  font-weight: 100;
/*   background-color: antiquewhite; */
  min-height: max-content;
}



/*Clase contenedora*/
.general-container-poppermessagewk {
  z-index: 9999999;
}

.message.general-container-poppermessagewk{
  /* padding: 5px 30px; */
  /* border-radius: 7px; */
  /* color: white; */
  /* background-color: var(--violet-ui); */
  /* box-shadow: 0px 15px 50px 0px #e9ebf1cc; */
}

/* .popper-addarrow-poppermessagewk.bottom-end {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--violet-ui);
  top: -5px;
  right: 15px;
  transform: rotate(45deg);
}
.popper-addarrow-poppermessagewk.bottom-start {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--violet-ui);
  top: -5px;
  left: 15px;
  transform: rotate(45deg);
}
.popper-addarrow-poppermessagewk.top-end {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--violet-ui);
  bottom: -5px;
  right: 15px;
  transform: rotate(45deg);
}
.popper-addarrow-poppermessagewk.top-start {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--violet-ui);
  bottom: -5px;
  left: 15px;
  transform: rotate(45deg);
} */
.super-container-toastwk{
  height: max-content;
  width: max-content;
  max-width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1000000000;
  /**
   * margin: auto in position: absolute elements
   * @see https://stackoverflow.com/questions/9998260/css-absolute-position-wont-work-with-margin-leftauto-margin-right-auto
   */
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 0 auto;
}

.container-alert-toastcontroller {
  position: fixed;
  top: 0;
  right: 0;
}

.general-container-toastwk{
  background-color: var(--Violet-UI);
  display: flex;
  align-items: center;
  width: 0px;
  height: 0px;
  flex-direction: row;
  max-width: 100%;
  border-radius: 10px;
  display: none;
  max-width: calc(100% - 30px);
  padding: 10px 15px;
  /* text-shadow: 0 0 6px #000000bd; */
}

.icon-toastwk{
  width: 25px;
  height: 25px;
  /* margin-left: 15px; */
  margin-right: 10px;
  opacity: 0;
}

.text-toastwk{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  min-width: 0px;
  width: max-content;
  opacity: 0;
  /* margin-top: 13px; */
  /* margin-bottom: 13px; */
}

.child-toastwk{
  width: max-content;
  height: max-content;
  display: flex;
  margin: 5px;
  min-width: 0px;
  opacity: 0;
}

.icon-close-toastwk{
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
  opacity: 0;
}

.icon-close-toastwk:hover{
  opacity: 0.8;
}

.icon-close-toastwk:active{
 opacity: 0.5;
}

.container-onetoast-toastwk{
  width: max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blurbackground-alertcard-supercontainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 30px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 0;
  opacity: 0;
}

  
  /*Clase contenedora*/

  .container-ilu-busysession{
    width: calc(100% - 20px);
    height: 200px;
    margin-top: 20px;
  }

  .email-title-busysession{
    color: var(--Green);
    font-size: 14px;
    font-weight: 500;
  }

  .text-description-busysession{
    color: var(--text-primary);
    margin-top: 20px;
    font-weight: 400;
    font-size: 14px;
  }

  .container-center-zone-busysession{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: max-content;
    margin-top: auto;
    margin-bottom: auto;
  }

  
  /*Clase contenedora*/
  .general-container-logowekall{
    width: 100%;
    max-width: 200;
    height: auto;
  }

  .general-container-logowekall svg{
    height: auto !important;
  }


.title-user-initialize-screenbase-loader{
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
}

  
  /*Clase contenedora*/
  .general-container-loaderwekall{
    width: 100%;
    max-width: 230px;
    height: 60px;
    margin-top: auto;
    margin-bottom: 10px;
  }

  .general-container-loaderwekall svg {
    height: auto !important;
  }

.error-zone-screenbase-login{
  color: var(--Red);
  font-size: 14px;
  font-weight: 400;
  margin-top: 10px;
  height: 20px;
  text-align: center;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.help-button-screenbase-login{
  color: var(--ui-primary);
  font-size: 16px;
  font-weight: 500;
  max-width: 350px;
  text-decoration: underline;
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
  text-align: end;
  width: 100%;
  margin: 0 auto;
}
.help-button-screenbase-login:hover{
  opacity: 1;
}
.help-button-screenbase-login:active{
  opacity: 0.5;
}

.mfaconfirm-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.mfa-install-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container-icon-states-screnbase-error{
  height:0px;
  width:0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.label-button-screnbase-configwebphone {
  width: 100%;
  max-width: 350px;
  height: 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.me-email-screnbase-configwebphone{
  color: #15d990;
  font-weight: 600;
  font-size: 14px;
  width: 100%;
  max-width: 350px;
}


.container-href-configwebphone{
    margin-top: 20px;
}
.href-configwebphone{
  margin-right: 5px;
  margin-left: auto;
  color: var(--Soft-Violet);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.8;
  user-select: none;
  text-align: end;
  width: max-content;
}

.href-configwebphone:hover{
  opacity: 1;
}

.href-configwebphone:active{
  opacity: 0.7;
}


.container-save-toast-configwebphone{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin: 20px; */
}

.text-save-toast-configwebphone{
  color: #fff;
  font-size: 13px;
  width: 100%;
  width: 100%;
}

.section-card-configwebphone {
  width: calc(100% - 80px);
  max-width: 350px;
  margin-top: 35px;
}
.category-sectioncard-configwebphone {
  display: flex;
  flex-direction: row;
}
.category-title-sectioncard-configwebphone {
  font-size: 16px;
  font-weight: 500;
  margin-left: 10px;
  user-select: none;
}

.buttons-save-toast-configwebphone{
  display: flex;
  margin-top: 20px;
  width: 100%;
}

.title-card-configwebphone {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% - 80px);
  max-width: 350px;
  align-self: center;
  margin-top: 42px;
}
.title-configwebphone {
  font-size: 26px;
  font-weight: 600;
  color: white;
}

.description-key-sectioncard-configwebphone {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-container-zoom-card-configwebphone{
  margin-top: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}
.container-zoom-card-configwebphone{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 33px;
  margin-top: 5px;
}
.container-zoom-card-configwebphone div{
  height: calc(100% - 4px);
  width:  100px;
  border-radius: 8px;
  border: solid 2px var(--medium-Gray);
  color:var(--text-primary);
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
 }

 .container-zoom-card-configwebphone div:hover{
  background-color: rgba(124, 124, 124, 0.192);
 }
 .container-zoom-card-configwebphone div:active{
  opacity: 0.8;
 }

  
/*Clase contenedora*/
.general-container-icondropdownwk{
  height: max-content;
  width: 100%;
  max-width: 350px;
}

.general-container-icondropdownwk{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y:unset;
}

.label-icondropdownwk{
  height: 13px;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 8px;
}

.static-zone-icondropdownwk{
  width: calc(100% - 0px);
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
  border-radius: 8px;
  background-color: transparent;
  border: solid 2px var(--ui-input-border-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
}

.static-zone-icondropdownwk:hover {
  border: solid 2px var(--ui-input-border-hover);
}

.seletc-static-zone-icondropdownwk{
  width: calc(100% - 0px);
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
  border-radius: 8px;
  background-color: transparent;
  border: solid 2px var(--ui-input-border-focus);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
}

.disabled-static-zone-icondropdownwk{
  width: calc(100% - 0px);
  height: calc(100% - 24px);
  min-height: calc(100% - 24px);
  border-radius: 8px;
  border: solid 2px var(--soft-Grayy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--soft-Gray);
  color: var(--gray);
}

.placeholder-container-icondropdownwk {
  display: flex;
  flex-direction: row;
  height: calc(100% - 12px);
  margin: auto 0;
}

.placeholder-container-icondropdownwk .holder-icon-icondropdownwk {
  width: auto;
  height: 100%;
}

.holder-icondropdownwk{
  margin-left: 12px;
  font-style: normal;
  font-size: 16px;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.icon-updown-icondropdownwk{
  width: 10px;
  height: 10px;
  margin-right: 10px;
  user-select: none;
}


.window-float-icondropdownwk{

  position: static;
  height: max-content;
  min-height: max-content;
  width: 400px;
  margin-top: 75px;
  /* display: none; */
  flex-direction: column;
  position: relative;
  z-index: 100;
  border-radius: 13px;
  align-items: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.226);
  border: solid 0px #000;
  background-color: var(--White);
}

.search-zone-icondropdownwk{
  border: solid 2px var(--medium-Gray);
  height: 30px;
  margin-top: 10px;
  border-radius: 10px;
  width: calc(100% - 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-zone-icondropdownwk input{
  outline: none;
  height: 100%;
  width: calc(100% - 40px);
  border: solid 0px #000;
  background-color: rgba(0, 0, 0, 0);
  margin-left: 10px;
  font-size: 14px;
  color: var(--Soft-Black);
}

.search-zone-icondropdownwk img{
  width: 15px;
  height: 15px;
  margin-right: 10px;
  cursor: pointer;
}

.search-zone-icondropdownwk img:hover{
  opacity: 0.7;
}

.search-zone-icondropdownwk img:active{
  opacity: 1;
}

.items-zone-icondropdownwk{
  width: calc(100% - 24px);
  height: max-content;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  text-align: left;
}

/* .items-zone-icondropdownwk div{
  width: calc(100% - 20px);
  height: 25px;
  border-radius: 8px;
  padding-left: 10px;
  font-size: 14px;
  color: var(--Soft-Black);
  cursor: pointer;
}
 */
.aling-text-icondropdownwk{
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
  color: var(--Light-Black);
  cursor: pointer;
  height: 30px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: calc(100% - 30px);
  display: flex;
  flex-direction: row;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  user-select: none;
}

.select-aling-text-icondropdownwk{
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
  color: var(--White);
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: calc(100% - 30px);
  display: flex;
  flex-direction: row;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  user-select: none;
  background-color: var(--Soft-Violet-ui);
}

.aling-text-icondropdownwk:hover{
  background-color: var(--soft-Gray);
}

.aling-text-icondropdownwk:active{
  background-color: var(--Light-Black);
  color: var(--White);
}


.items-zone-icondropdownwk::-webkit-scrollbar {
  background-color: var(--soft-Gray);
  border-radius: 12px;
  width: 8px;
}

/* background of the scrollbar except button or resizer */
.items-zone-icondropdownwk::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0);
}

/* scrollbar itself */
.items-zone-icondropdownwk::-webkit-scrollbar-thumb {
  background-color: var(--Light-Gray);
  border-radius: 16px;
  border: 3px solid var(--soft-Gray);
}

/* scrollbar itself */
.items-zone-icondropdownwk::-webkit-scrollbar-thumb:hover {
  background-color: var(--medium-Gray);
  border-radius: 16px;
  border: 3px solid var(--soft-Gray);
}

/* set button(top and bottom of the scrollbar) */
.items-zone-icondropdownwk::-webkit-scrollbar-button {
  display:none;
}

.zone-error-icondropdownwk{
  margin-top: 2px;
  height: 20px;
  margin-left: 5px;
  width: calc(100% - 10px);
  color:#F6352D;
  font-weight: 100;
/*   background-color: antiquewhite; */
  min-height: max-content;
}
.general-container-toggle{
  width: 40px;
  height: 20px;
  background-color: var(--Light-Gray);
  border-radius: 15px;
  align-self: flex-end;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  justify-content: flex-start;
  padding: 5px;
  border: solid 0px #000;
  outline: none;
}

.dot-switch-toggle{
  width: 50%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
  margin-left: 0%;
  display: flex;
}

  /* WELCOME CLASS -------------------------------------- */

  .contaimner-center-screensbase-welcome{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: auto;
    height: 100%;
  }
  .text-welcome-screensbase-welcome{
    color: var(--text-primary);
    font-size: 16px;
    margin-top: auto;
    margin-bottom: 0px;
    text-align: center;
  }
  .user-text-screensbase-welcome{
    color: var(--Green);
    font-weight: 600;
    font-size: 20px;
    margin-top: 2px;
    margin-bottom: auto;
  }



  /* LOBBY */
  .controllers-menu-incall-screensbase-calls{
    display: flex;
    flex-direction: row;
    scale:0.1;
    opacity:0;
    height: 0px;
  }

  .zone-numbercall-screensbase-calls{ /* NUMERO A LLAMAR */
    font-size: 22px;
    background-color: transparent;
    border: solid 0px #000;
    outline: none;
    border-radius: 50px;
    text-align: center;
    /* margin-left: 3px; */
    width: calc(100% - 20px);
    max-width: 300px;
    color: var(--text-primary);
    height: max-content;
    margin-top: 10px;
    margin-bottom: 0px;
    transition: .25s;
    height: 35px;
  }
  .zone-numbercall-screensbase-calls:hover{
    background-color: var(--ui-zonenumbercall-hover);
    transition: .25s;
  }
  .zone-numbercall-screensbase-calls::-webkit-outer-spin-button,
  .zone-numbercall-screensbase-calls::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .zone-numbercall-screensbase-calls[type=number] {
    -moz-appearance: textfield;
  }

  .key-deleteinputcall-calls {
    /* border: solid 2px var(--ui-secondary); */
    background-color: var(--ui-zonenumbercall-hover);
    height: 35px;
    width: 0;
    border-radius: 50%;
    color: var(--text-primary);
    opacity: 0;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: 0px;
    cursor: pointer;
    user-select: none;
    transition: .25s;
    overflow: hidden;
  }
  .key-deleteinputcall-calls img {
    width: 22px;
    height: auto;
  }

  .zone-error-screensbase-calls{
    color: var(--Red);
    font-size: 13px;
    width: 100%;
    text-align: center;
    height: 14px;
    max-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: auto 0 5px 0;
    font-weight: 600;
    /* margin-top: 10px; */
  }

  /* ICONOS LOBBY */
  .icon-call-screensbase-calls{
    height: 23px;
    width: 23px;
    margin: auto;
  }

  /* RECEIVING LOBbY ---------------------------------------------------- */

  .button-callcontainer-screensbase-calls {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }

  .button-call-start-screensbase-calls {
    background-color: var(--Green);
    border: solid 2px var(--Green);
    border-radius: 50%;
    height: 42px;
    width: 42px;
    display: flex;
  }

  .button-call-start-screensbase-calls:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.473);
    cursor: pointer;
  }

  .button-call-end-screensbase-calls {
    background-color: var(--Red);
    border: solid 2px var(--Red);
    border-radius: 50%;
    height: 42px;
    width: 42px;
    display: flex;
  }

  .button-call-end-screensbase-calls:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.473);
    cursor: pointer;
  }

  .button-call-end-screensbase-calls .icon-call-screensbase-calls {
    padding: 0px 0px 3px 3px;
    transform: rotate(135deg);
    transform-origin: center;
  }

  @keyframes play {
    0% {
      transform: scale(1);
      background-color: rgba(var(--ui-receivingcall-shadow), 0.2);
    }
    15% {
      box-shadow: 0 0 0 5px rgba(var(--ui-receivingcall-shadow), 0.1);
    }
    25% {
      box-shadow: 0 0 0 10px rgba(var(--ui-receivingcall-shadow), 0.1), 0 0 0 20px rgba(var(--ui-receivingcall-shadow), 0.1);
    }
    25% {
      background-color: rgba(var(--ui-receivingcall-shadow), 0.35);
      box-shadow: 0 0 0 15px rgba(var(--ui-receivingcall-shadow), 0.15), 0 0 0 30px rgba(var(--ui-receivingcall-shadow), 0.15);
    }
  }

  @keyframes play_icon {
    0% { transform: translateX(0px); }
    2% { transform: translateX(1px); }
    4% { transform: translateX(-1px); }
    6% { transform: translateX(1px); }
    8% { transform: translateX(-1px); }
    10% { transform: translateX(1px); }
    12% { transform: translateX(-1px); }
    14% { transform: translateX(1px); }
    16% { transform: translateX(-1px); }
    18% { transform: translateX(1px); }
    20% { transform: translateX(-1px); }
    22% { transform: translateX(1px); }
    24% { transform: translateX(-1px); }
    26% { transform: translateX(1px); }
    28% { transform: translateX(-1px); }
    30% { transform: translateX(1px); }
    32% { transform: translateX(-1px); }
    34% { transform: translateX(1px); }
    36% { transform: translateX(-1px); }
    38% { transform: translateX(1px); }
    40% { transform: translateX(-1px); }
    42% { transform: translateX(1px); }
    44% { transform: translateX(-1px); }
    46% { transform: translateX(0px); }
  }

  .phone-receivingcontainer-screensbase-calls {
    display: flex;
    width: 100px;
    height: auto;
    margin-top: auto;
    margin-bottom: 0px;
    border-radius: 100%;
    aspect-ratio: 1/1;
    background-color: rgba(255, 255, 255, 0.2);
    animation: play 1.5s ease infinite;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .phone-receiving-screensbase-calls {
    width: 50px;
    height: auto;
    margin: auto;
    animation: play_icon 1.5s ease infinite;
    /* margin-top: auto; */
    /* margin-bottom: 0px; */
  }

  .label-phone-screensbase-calls {
    margin-top: 50px;
    color: var(--text-primary);
    font-size: 25px;
    font-weight: 700;
  }

  .label-description-screensbase-calls {
    color: var(--text-primary);
    font-size: 12px;
    margin-bottom: auto;
    margin-top: 5px;
  }


  /* CALLING LOBBY------------------------------------------------------ */
  .circles_container-screensbase-calls {
    position: absolute;
    aspect-ratio: 1 / 1;
    height: calc(100% - 340px);
    max-height: 360px;
    top: 52%; right: 50%;
    transform: translate(50%,-40%);
    /* height: 300px; ignore height due to aspect ratio preserve */
  }
  .title-container-screensbase-calls {
    width: 100%;
    height: 100%;
    max-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title-calling-screensbase-calls {
    font-size: 25px;
    font-weight: 600;
  }
  .description-calling-screenbase-calls {
    font-size: 12px;
    font-weight: 400;
    margin-top: 5px;
  }
  .circles_subcontainer-screensbase-calls {
    position: relative;
    width: 100%;
    height: 100%;
  }
  @keyframes circled_grow_up {
    from {
      top: calc(50% - 12.5%);
      left: calc(50% - 12.5%);
      width: 25%;
      height: 25%;
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
    to {
      top: calc(0%);
      left: calc(0%);
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
  @keyframes fade {
    from {
      opacity: 1;
    }
    25% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    to {
      opacity: 1;
    }
  }
  /**
   animation-direction  can have the following values -
  (1) normal : forward direction, this is the default value.
  (2) reverse : the animation sets in the reverse direction ( backward ).
  (3) alternate : the animation plays normal first and then reverse.
  (4) alternate-reverse: the animation plays reverse first and then normal.
  */
  .circles_container-screensbase-calls .circle_1-screensbase-calls {
    animation: circled_grow_up 1.5s ease-out infinite;
    position: absolute;
    top: calc(50% - 10%);
    left: calc(50% - 10%);
    border-radius: 50%;
    /* background-color: rgba(255, 255, 255, 0.2); */
    background-color: rgba(var(--ui-calling-widget-color), 0.2);
  }
  .circles_container-screensbase-calls .circle_2-screensbase-calls {
    position: absolute;
    animation: circled_grow_up 1.5s ease-out infinite;
    animation-delay: 0.4995s;
    top: calc(50% - 30%);
    left: calc(50% - 30%);
    border-radius: 50%;
    /* background-color: rgba(255, 255, 255, 0.2); */
    background-color: rgba(var(--ui-calling-widget-color), 0.2);
  }
  .circles_container-screensbase-calls .circle_3-screensbase-calls {
    position: absolute;
    animation: circled_grow_up 1.5s ease-out infinite;
    animation-delay: 0.9999s;
    top: calc(50% - 50%);
    left: calc(50% - 50%);
    border-radius: 50%;
    /* background-color: rgba(255, 255, 255, 0.2); */
    background-color: rgba(var(--ui-calling-widget-color), 0.2);
  }
  .state-calling-screensbase-calls{
    animation: fade 3s linear infinite;
    position: absolute;
    top: 50%; right: 50%;
    transform: translate(50%,-50%);
    color: rgb(var(--ui-calling-widget-color));
    font-size: 16px;
    margin-top: auto;
    font-weight: auto;
    font-weight: 500;
  }
  .button-call-kill-screensbase-calls{
    background-color: var(--Red);
    border: solid 3px var(--Red);
    min-height: 40px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    color: var(--titles-color);
    font-size: 20px;
    font-weight: 500;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 9px;
    cursor: pointer;
    user-select: none;
  }
  .button-call-kill-screensbase-calls:hover{
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.473);
  }
  .button-call-kill-screensbase-calls:active{
    opacity: 0.8;
  }

  /* INCALL  LOBBY------------------------------------------------------ */
  
  .calls-incall-screensbase-calls{
    width: calc(100% - 80px);
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    height: max-content;
  }
  .zone-incall-screensbase-calls{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 65px;
    margin-top: 0px;
    margin-bottom: auto;
    width: calc(100% - 80px);
    min-width: 200px;
    border-top: solid 2px rgba(255, 255, 255, 0.329) ;
  }
  .time-incall-screensbase-calls{
    font-size: 25px;
    color: var(--text-primary);
    margin-bottom: 10px;
    margin-top: 25px;
    font-weight: 600;
  }
  .circle-button-screensbase-calls-nohover{
    height: 35px;
    width: 35px;
    border-radius: 50%;
    color: var(--titles-color);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 6px;
    cursor: pointer;
    user-select: none;
    transition: .25s;
    background-color: transparent;
  }
  .dark-circle-button-screensbase-calls{
    border: solid 2px var(--Light-Violet-UI);
    height: 45px;
    width: 45px;
    border-radius: 50%;
    color: var(--titles-color);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 6px;
    cursor: pointer;
    user-select: none;
    transition: .25s;
    background-color: transparent;
    border: solid 2.5px rgba(255, 255, 255, 0.37) !important;
  }
  .circle-button-screensbase-calls{
    border: solid 2px var(--Light-Violet-UI);
    height: 45px;
    width: 45px;
    border-radius: 50%;
    color: var(--titles-color);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 6px;
    cursor: pointer;
    user-select: none;
    transition: .25s;
    background-color: transparent;
    border: solid 2.5px rgba(0, 0, 0, 0.37) !important;
  }
  .circle-button-screensbase-calls.filled:hover{
    background-color: rgba(0, 0, 0, 0.212) !important;
  }
  .onecall-incall-screensbase-calls{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 25px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  .onecall-incall-screensbase-calls:hover{
    background-color: rgba(0, 0, 0, 0.062);
  }
  .conatiner-listcall-incall-call{
    background-color: #fff;
    height: max-content;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 10px;
    padding:10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.075);
  }
  .conatiner-listcall-incall-call::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0px;
    width: 8px;
    cursor: pointer;
  }
  /* background of the scrollbar except button or resizer */
  .conatiner-listcall-incall-call::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0);
  }
  /* scrollbar itself */
  .conatiner-listcall-incall-call::-webkit-scrollbar-thumb {
    background-color: var(--Soft-Violet-ui);
    border-radius: 0;
    border: 0 solid var(--primary-color);
  }
  /* scrollbar itself */
  .conatiner-listcall-incall-call::-webkit-scrollbar-thumb:hover {
    /* background-color: var(--Soft-Violet); */
    border-radius: 0;
    border: 0 solid var(--primary-color);
  }
  /* set button(top and bottom of the scrollbar) */
  .conatiner-listcall-incall-call::-webkit-scrollbar-button {
    display:none;
  }
  .container-card-transfer-incall-call{
    margin-top: 10px;
    width: calc(100% - 100px);
    background-color: #fff;
    height: 35px;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 8%);
    display: flex;
    justify-content: space-between;
  }
  .container-card-transfer-incall-call div{
    height: 100%;
    width: calc(50% - 10px);
    border-radius: 30px;
    color: #fff;
    background-color: var(--Violet-UI);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
  }
  .container-card-transfer-incall-call div:active{
    opacity: 0.8;
  }
  .container-card-load-transfer-incall-call{
    margin-top: 10px;
    width: calc(100% - 100px);
    background-color: #fff;
    height: 42px;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 8%);
    display: flex;
  }
  .buttons-transfer-in-previouscall-incall{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100px;
  }
  .buttons-transfer-in-previouscall-incall div{
    height: 19px;
    width: 100%;
    background-color: var(--Green);
    color: #000;
    font-weight: 600;
    font-size: 11px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .buttons-transfer-in-previouscall-incall div:active{
    opacity: 0.8;
  }
  

  /* finalizar llamada LOBBY-------------------------------------------------*/
  .text-finishcall-screensbase-calls{
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 300;
  }

  
  /* HEADER --------------------------------------------- */
  .header-lobbycall-screensbase-calls {
    margin-top: -48px;
    padding: 50px 0 10px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  .container-transfer-component-calls{
    height: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    width: calc(100% - 20px);
    max-width: 250px;
    color: var(--ui-input-border-hover);
    scale: 0.1;
    opacity: 0;
  }

  .container-transfer-component-calls img {
    width: 60px;
    height: 60px;
  }

  .container-transfer-component-calls input {
    background-color: transparent;
    border: solid 3px var(--Soft-Violet-ui);
    border-radius: 10px;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    outline: none;
    color: var(--ui-input-border-hover);
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }

  /* TAB */
  .widget-container-screensbase {
    position: relative;
    width: 100%;
    max-width: 310px;
    height: 400px;
    overflow: hidden;
    margin: auto;
  }
  .tab-selector-container-screensbase {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .tab-selector-container-screensbase.embebed{
    display: none;
  }
  .tab-item-screensbase {
    flex: 1;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    text-align: center;
    transition: .15s;
    user-select: none;
    padding: 12px 0 12px 0;
    font-size: 15px;
    /* border-top-left-radius: 12px; */
    /* border-top-right-radius: 12px; */
  }
  .widget-container-screensbase.light
  .tab-item-screensbase {
    color: rgba(0, 0, 0, 0.5);
  }
  .tab-item-screensbase:hover {
    background-color: rgba(255, 255, 255, 0.08);
    cursor: pointer;
  }
  .widget-container-screensbase.light
  .tab-item-screensbase:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
  .tab-item-screensbase.selected {
    color: #38DB99 !important;
    transition: .15s;
  }
  .tab-guide-default-screensbase {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4);
  }
  .widget-container-screensbase.light
  .tab-guide-default-screensbase {
    background-color: rgba(0, 0, 0, 0.125);
  }
  .tab-guide-selected-screensbase {
    position: absolute;
    height: 2px;
    bottom: 0;
    background-color: #38DB99;
  }
  .tab-slide-default-screensbase {
    position: absolute;
    min-width: 100%;
    height: 100%;
    overflow-y: auto;
    height: calc(100% - 63px);
    margin-top: 13px;
    display: flex;
  }

  .tab-slide-default-screensbase.embebed{
    display: none;
  }


  /* llamada transferida por */
  .refered-incoming-call-user-container{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .refered-incoming-call-user-title{
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
  }

  .refered-incoming-call-user-name{
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    margin-top: 5px;
  }
/*Clase contenedora*/
.general-container-numerickeyboard{
  width: max-content;
  height: max-content;
  margin-top: 10px;
  margin-bottom: auto;
  /* margin-top: auto; */
}
.line-keyboard-numerickeyboard{
  width: max-content;
  height: max-content;
  display: flex;
}
.key-number-numerickeyboard{
  height: 53px;
  width: 53px;
  margin: 4px 10px;
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 400;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: .1s;
  background-color: rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.key-number-numerickeyboard:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transition: .1s;
}
.tone-title-numerickeyboard {
  font-size: 20px;
}
.tone-description-numerickeyboard {
  font-size: 9px;
  font-weight: 300;
  height: 10px;
}
.key-number-numerickeyboard.filled{
  background-color: var(--Light-Violet-UI);
}
.key-number-numerickeyboard.filled:hover{
  background-color: var(--Soft-Violet-ui) !important;
  border: solid 3px var(--Soft-Violet-ui) !important;
}
.key-number-numerickeyboard:active{
  opacity: 0.7;
}
.key-number-numerickeyboard img {
  width: 18px;
  height: auto;
}
.button-call-start-numerickeyboard{
  background-color: var(--Green);
  border: solid 2px var(--Green);
  height: 35px;
  width: 35px;
  border-radius: 50%;
  color: var(--titles-color);
  font-size: 16px;
  font-weight: 500;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 6px;
  cursor: pointer;
  user-select: none;
}
.button-call-start-numerickeyboard:hover{
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.473);
}
.button-call-start-numerickeyboard:active{
  opacity: 0.8;
}
.space-button-numerickeyboard{
  border: solid 2px transparent;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 6px;
}
.icon-call-numerickeyboard{
  height: 18px;
  width: 18px;
}
.delete-button-numerickeyboard{
  width: 25px;
  height: auto;
  opacity: 0.8;
  cursor: pointer;
}
.delete-button-numerickeyboard:hover{
  opacity: 1;
}
.delete-button-numerickeyboard:active{
  opacity: 0.7;
}
@media (min-width: 280px) and (min-height: 400px) {
  .key-number-numerickeyboard{
    height: 53px;
    width: 53px;
    margin: 6px 10px;
  }
  .button-call-start-numerickeyboard{
    height: 46px;
    width: 46px;
    margin: 5px 13px;
  }
  .space-button-numerickeyboard{
    height: 51px;
    width: 51px;
    margin: 5px 10px;
  }
  .icon-call-numerickeyboard{
    height: 23px;
    width: 23px;
  }
  .delete-button-numerickeyboard{
    width: 30px;
  }
  .zone-numbercall-numerickeyboard{
    font-size: 24px;
    width: calc(100% - 20px);
    margin-top: 20px;
    margin-bottom: 10px;
    height: 45px;
  }
}
/**
 * theme='light'
 */
.general-container-numerickeyboard.light
.key-number-numerickeyboard {
  background-color: var(--soft-Gray);
}
.general-container-numerickeyboard.light
.key-number-numerickeyboard:hover {
  background-color: var(--Light-Gray);
}
/**
 * default case (+ theme='dark' as default)
 */
.inputcall-super-container {
  background-color: rgba(226, 226, 226, .15);
  padding: 6px 8px;
  border-radius: 20px;
  color: #F9F9F9;
  transition: .15s;
}
.inputcall-super-container:hover {
  transition: .15s;
  background-color: rgba(226, 226, 226, .22);
}
.inputcall-subcontainer-items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.inputcall-subcontainer-items > img:first-of-type {
  margin-left: 5px;
  width: 17px;
}
.inputcall-subcontainer-items input {
  /* padding: 0 12px 0 10px; */
  min-width: calc(100% - 70px);
  background-color: transparent;
  border-style: none;
  color: #F9F9F9;
  font-size: 18px;
  font-weight: 500;
  /* flex: 1; */
}
.inputcall-subcontainer-items input::placeholder {
  font-weight: 400;
  color: #DADADA;
  font-size: 14px;
}
.inputcall-subcontainer-items input:focus {
  border-style: none;
  outline: none;
}
.buttonright-inputcall{
  border-radius: 50%;
  min-width: 30px;
  height: 30px;
  min-height:30px;
  max-height:30px;
  max-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: none;
}
.buttonright-inputcall.green {
  background-color: var(--Green);
}
.buttonright-inputcall.primary {
  background-color: transparent;
}
.buttonright-inputcall:hover {
  cursor: pointer;
}
/**
 * theme='light' case
 */
.inputcall-super-container.light {
  /* background-color: rgb(228, 228, 228); */
  background-color: var(--soft-Gray);
}
.inputcall-super-container.light
.inputcall-subcontainer-items
input::placeholder {
  color: var(--Soft-Black);
}
.inputcall-super-container.light
.inputcall-subcontainer-items
input {
  color: var(--Soft-Black);
}
/**
 * type='white' case
 */
.inputcall-super-container.white {
  background-color: white;
}
.inputcall-super-container.white
.inputcall-subcontainer-items
input {
  color: #64748B;
}
.inputcall-super-container.white
.inputcall-subcontainer-items
input::placeholder {
  color: #64748B;
}
.general-conatiner-calllist{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-family: var(--primary-font);
}

.one-call-register-calllist{
  
  border-bottom: solid 1px rgba(86, 0, 156, 0.753);
  display:flex;
  flex-direction: column;
}

/* .one-call-register-calllist:hover{
  background-color: rgba(255, 255, 255, 0.04);
  transition: .1s;
} */

.subcontainer-one-call-calllist{
  padding: 5px;
  padding-bottom: 10px;
  padding-top: 10px;
  transition: .1s;
  display:flex;
  /* background-color: var(--background); */
  z-index: 10;
}

.subcontainer-one-call-calllist:hover{
  background-color: rgba(255, 255, 255, 0.04);
  transition: .1s;
}


.general-conatiner-calllist.light
.one-call-register-calllist {
  border-bottom: solid 1px rgba(124, 15, 214, 0.233);
}

.general-conatiner-calllist.light
.one-call-register-calllist:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.icon-container-call-register-calllist{
  cursor: pointer;
  height: 34px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content:center ;
  border-radius: 50%;
  margin-left: 5px;
  border: solid 1px rgba(0, 0, 0, 0.03);
  position: relative;
}
.icon-container-call-register-calllist img{
  height: 16px;
  width: 16px;
}

.one-call-register-item-description {
  /* position: absolute; */
  min-width: max-content;
  height: fit-content;
  top: auto;
  left: calc(100% + 15px);
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 6px;
  margin-top: 3px;
  border-radius: 4px;
}

.info-call-register-calllist{
  font-weight: 600;
  font-size: 14px;
  margin-left: 18px;
  margin-top: 3px;
  cursor: pointer;
}

.duration-call-register-calllist{
  background-color: var(--Green);
  border-radius: 20px;
  font-size: 11px;
  width: 45px;
  text-align: center;
  margin-top: 2px;
  color: var(--Black);
  padding-top: 1px;
  padding-bottom: 1px
}

.date-call-register-calllist{
  margin-right: 5px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 600;
  font-size: 12px;
  margin-top: 5px;
}

.time-date-call-register-calllist{
  font-weight: 600;
  font-size: 11px;
  opacity: 0.7;
}

.container-dots-infocall-calllist{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  border-radius: 5px;
  height: 100%;
  margin-left: 5px;
  overflow: hidden;
}
.dots-infocall-calllist{
  height: 100%;
  width: 28px;
  opacity: 0.4;
}
.dots-infocall-calllist:hover{
  opacity: 1;
  cursor: pointer;
}

.window-menu-calllist{
  margin-top: -46px;
  opacity: 0;
  border-radius: 3px;
  background-color: #00000015;
  /* z-index: -100; */
}

.general-conatiner-calllist.light
.one-call-register-calllist 
.window-menu-calllist
{
  background-color: #00000015;
  color: #000000d8;
  font-weight: 500;
}

.general-conatiner-calllist.dark
.one-call-register-calllist 
.window-menu-calllist
{
  background-color: #00000038;
  color: #fff;
}


.item-window-float-menu-calllist{
  display: flex;
  align-items: center;
  font-size: 12px;
  height: 18px;
  margin: 10px;
  padding: 4px;
  cursor: pointer;
  border-radius: 3px;
}
.item-window-float-menu-calllist:hover{
  background-color: rgba(0, 0, 0, 0.144);
}

.item-window-float-menu-calllist img{
  height: 17px;
  width: 17px;
  margin-left: 20px;
  margin-right: 5px;
}


  
  /*Clase contenedora*/
  .general-container-listcallprogress{
    width: 100%;
    height: 100%;
    font-family: var(--primary-font);
  }

  .one-call-listcallprogress{
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: 10px;
    height: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
    opacity: 0;
    scale: 0.1;
    cursor: pointer;
  }

  .icon-one-call-listcallprogress{
    height: 35px;
    width: 35px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
  } 
  .icon-one-call-listcallprogress img {
    height: 18px;
    width: 18px;
  }

  .number-zone-one-call-listcallprogress{
    font-size: 16px;
    font-weight: 600;
    color: var(--Soft-Black);
    margin-left: 17px;
  }

  .number-zone-one-call-listcallprogress div{
    font-size: 11px;
    font-weight: 400;
    margin-top: 3px;
  }

  .time-one-call-listcallprogress{
    background-color: var(--Green);
    margin-left: auto;
    margin-right: 10px;
    border-radius: 15px;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    font-weight: 500;
  }

/*   .loader-calling-call-listcallprogress{
    background-color: var(--Green);
    margin-left: auto;
    margin-right: 10px;
    border-radius: 15px;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    font-weight: 500;
  } */
/**
 * default (+ theme='dark')
 */
.supercontainer-tonekeyboard {
  max-width: 300px; /* temporal */
  width: 100%;
  min-width: 300px;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.button-visible-tonekeyboard {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  border-style: none;
  padding: 6px 14px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 18px;
  color: white;
  font-weight: 500;
  width: max-content;
  align-self: center;
  z-index: 1;
  /* margin-top: 15px; */
  /* position: absolute; */
  /* bottom: 0; */
}
.button-visible-tonekeyboard:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.15);
}
.button-visible-tonekeyboard > div {
  margin-right: 10px;
}
.keyboard-tonekeyboard {
  display: flex;
  flex-direction: row;
  justify-content: normal;
  flex-wrap: wrap;
  position: absolute;
  top: 50px;
  left: 0;
  width: fit-content;
  height: fit-content;
}
.tone-tonekeyboard {
  background-color: rgba(226, 226, 226, .15);
  padding: 4px 14px 4px 18px;
  margin: 3px 5px;
  color: white;
  border-radius: 18px;
  flex: 0 0 calc(33% - 42px);
  width: calc(33% - 37px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: .15s;
}
.tone-tonekeyboard:hover {
  background-color: rgba(226, 226, 226, .22);
  transition: .15s;
  cursor: pointer;
}
.tone-description-tonekeyboard {
  font-size: 21px;
  font-weight: 400;
}
.tone-char-tonekeyboard {
  font-size: 10px;
  font-weight: 300;
}
/**
 * theme='light'
 */
.keyboard-container-tonekeyboard.light
.keyboard-tonekeyboard
.tone-tonekeyboard {
  background-color: var(--soft-Gray);
  color: var(--Soft-Black);
  transition: .15s;
}
.keyboard-container-tonekeyboard.light
.keyboard-tonekeyboard
.tone-tonekeyboard:hover {
  background-color: var(--medium-Gray);
  color: var(--Soft-Black);
  transition: .15s;
}
.button-visible-tonekeyboard.light {
  border-color: #CBCEDC;
  color: var(--Soft-Black);
}
.banner-flotante {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  animation: slideDown 0.3s ease-out;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.banner-flotante.light {
  background: linear-gradient(135deg, #8157D6 0%, #6334C0 100%);
  color: white;
}

.banner-flotante.dark {
  background: linear-gradient(135deg, #6334C0 0%, #8157D6 100%);
  color: #ecf0f1;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

.banner-icon svg {
  color: currentColor;
}

.banner-text {
  flex: 1;
  min-width: 0;
}

.banner-text h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.banner-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

.banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.banner-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-later {
  background: rgba(255, 255, 255, 0.2);
  color: currentColor;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-later:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-accept {
  background: #27ae60;
  color: white;
  border: 1px solid #27ae60;
}

.btn-accept:hover {
  background: #2ecc71;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.btn-video {
  background: #27ae60;
  color: white;
  border: 1px solid #27ae60;
}

.btn-video:hover {
  background: #27ae60;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-close {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.btn-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.btn-close img {
  width: 16px;
  height: 16px;
  display: block;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .banner-flotante {
    padding: 10px 12px;
  }
  
  .banner-content {
    gap: 8px;
  }
  
  .banner-icon {
    width: 32px;
    height: 32px;
  }
  
  .banner-text h4 {
    font-size: 14px;
  }
  
  .banner-text p {
    font-size: 13px;
  }
  
  .banner-actions {
    gap: 6px;
  }
  
  .banner-actions button {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .btn-close {
    width: 28px;
    height: 28px;
    padding: 6px;
    margin-left: 12px;
  }
}

@media (max-width: 480px) {
  .banner-text p {
    display: none;
  }
  
  .banner-actions button {
    padding: 6px 8px;
    font-size: 12px;
  }
  
  .btn-close {
    width: 24px;
    height: 24px;
    padding: 4px;
    margin-left: 8px;
  }
  
  .btn-later {
    display: none;
  }
}

/* Video Modal Styles */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease-out;
  padding: 20px;
  box-sizing: border-box;
}

.video-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  width: 800px;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #6334C0;
}

.video-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.video-modal-close {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.video-modal-content {
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

.video-player {
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
}

/* Dark theme for video modal */
.banner-flotante.dark .video-modal {
  background: #2c3e50;
  color: #ecf0f1;
}

.banner-flotante.dark .video-modal-header {
  background: #6334C0;
  border-bottom-color: #4a5f7a;
}

.banner-flotante.dark .video-modal-header h3 {
  color: white;
}

.banner-flotante.dark .video-modal-close {
  color: white;
}

.banner-flotante.dark .video-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive video modal */
@media (max-width: 768px) {
  .video-modal-overlay {
    padding: 10px;
  }
  
  .video-modal {
    width: 95vw;
    margin: 0;
  }
  
  .video-modal-header {
    padding: 12px 16px;
  }
  
  .video-modal-header h3 {
    font-size: 16px;
  }
  
  .video-player {
    max-height: 60vh;
  }
}

@media (max-width: 480px) {
  .video-modal-overlay {
    padding: 0;
  }
  
  .video-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    max-height: 100vh;
    margin: 0;
  }
  
  .video-player {
    max-height: 80vh;
  }
}

.user-textcontainer-screensbase-admin {
  display: flex;
  flex-direction: row;
  padding: 0 40px;
}

.user-textcontainer-screensbase-admin:nth-child(3) {
  margin-top: 10px;
}

.user-textcontainer-screensbase-admin .user-title-screensbase-admin {
  color: var(--text-primary);
  width: 40%;
}

.user-textcontainer-screensbase-admin .user-value-screensbase-admin {
  color: var(--ui-accent);
  width: 60%;
}

.user-textcontainer-screensbase-admin .user-title-screensbase-admin,
.user-textcontainer-screensbase-admin .user-value-screensbase-admin {
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* for parent */
.integration-box-screensbase-admin {
  width: 100%;
  border-radius: 15px;
  display: flex;
  margin-top: 20px;
  min-height: 90px;
  transition: .25s;
  position: relative;
}

.integration-box-screensbase-admin:hover {
  transition: .25s;
  transform: scale(1.05);
  cursor: pointer;
}

.integration-box-screensbase-admin
div {
  height: fit-content;
  margin: auto;
}

.integration-box-screensbase-admin:not(.active-integration)
> .active-integration-snack {
  display: none;
}

.integration-box-screensbase-admin.active-integration
> .active-integration-snack {
  display: flex !important;
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: var(--Green);
  color: var(--Soft-Black);
  font-weight: 500;
  font-size: 12px;
  border-radius: 26px;
  padding: 3px;
}

.integration-box-screensbase-admin.active-integration
> .active-integration-snack 
  img {
  width: 18px;
  height: auto;
}

.integration-box-screensbase-admin.active-integration
> .active-integration-snack
  div {
  width: 0;
  height: 0;
  opacity: 0;
  padding-left: 0;
  overflow: hidden;
  transition: .25s;
}

.subcategory-screensbase-admin {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
  font-size: 12px;
  color: white;
  margin-top: 15px;
}

/* APARECER texto 'Integracion activa' cuando hace hover sobre card de integracion */
.integration-box-screensbase-admin.active-integration:hover
> .active-integration-snack
  div {
  opacity: 1;
  white-space: nowrap;
  width: 100px;
  height: auto;
  transition: .25s;
  padding-left: 5px;
}

/* for FloatRender */
.close-floatbox-screensbase-admin {
  align-self: flex-end;
}
.close-floatbox-screensbase-admin:hover {
  cursor: pointer;
}

.integration-floatbox-screensbase-admin {
  width: 100%;
  border-radius: 15px;
  display: flex;
  height: 140px;
  transition: .25s;
  margin: 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integration-floatbox-screensbase-admin
div {
  height: fit-content;
  margin: auto;
}

.config-container-screensbase-admin {
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  height: max-content;
  background-color: var(--background);
}

.user-labelcontainer-screensbase-admin {
  display: flex;
  flex-direction: row;
  margin-top: 40px;
}

.configure-icon-admin {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  padding: 4px;
}

.user-labeltitle-screensbase-admin {
  font-size: 16px;
  font-weight: 500;
  height: fit-content;
  align-self: center;
  color: var(--text-primary);
}

.subcategory-togglecontainer-screensbase-admin {
  display: flex;
  flex-direction: row;
  color: var(--text-primary);
  font-size: 14px;
  margin-top: 12px;
}

.subcategory-togglecontainer-screensbase-admin .subcategory-label-screensbase-admin {
  margin-left: 20px;
}

/*Clase contenedora*/
.general-container-datacall{
  width: 100%;
  max-width: 360px;
  text-shadow: 0 0 10px #00000077;

  background-color: antiquewhite;
}

.header-call-details {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 8px;
  align-items: end;
  border-bottom: 1px solid rgb(168 130 225 / 24%);
  font-weight: 500;
  color: var(--text-primary);
}
 
.header-call-details div.header-call-close-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 300;
  align-items: end;
}
 
.header-call-details img {
  width: 23px;
  margin-left: 20px;
  cursor: pointer;
  z-index: 100;
  margin-bottom: -3px;
}

/*Clase contenedora*/
.general-container-infosection{
  color: var(--text-primary);
  margin-top: 35px;
}

.general-title-infosection {
  display: flex;
  flex-direction: row;
  font-size: 15px;
  font-weight: 500;
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(168 130 225 / 24%);
  margin-bottom: 30px;
  align-items: center;
}

.general-title-infosection img {
  margin-right: 5px;
  height: 20px;
  width: 20px;
}

.sequence-container-infosection {
 display: flex;
 flex-direction: column;
 margin-bottom: 25px;
}

.left-sequence-container-infosection {
  flex: 25;
  font-weight: 500;
}

.right-sequence-container-infosection {
  flex: 75;
  font-size: 13px;
  font-weight: 400;
  margin-top: 10px;
}

.right-sequence-actor-infosection {
  margin-bottom: 10px;
}
/* Clase contenedora */
.general-container-callitem {
  margin-top: 15px;
}

.section-general-container-callitem{
  display: flex;
  color: var(--text-primary);
  margin-top: 5px;
}

.section-title-general-container-callitem{
  font-size: 14px;
  font-weight: 600;
}

.section-description-general-container-callitem{
  font-size: 13px;
  font-weight: 500;
  opacity: 0.8;
  margin-left: 7px;
}