.white-panel-telephoneActions {
    box-shadow: 1px 1px 2px 2px #d7d7d7;
}

div#chatArea {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.attended .main-action,
.call-three .main-action,
div#callTransferSection .attended-action,
#exchange {
    display: none;
}

div#callTransferSection.attended .attended-action,
div#callTransferSection.call-three .attended-action {
    display: flex;
}

.call-three #exchange,
.attended #exchange {
    display: inline-block;
}

#callNumberSection>span {
    width: 50%;
    display: flex;
    align-items: center;
}


/******* Volumen timbre *********/

span.ui-slider-handle.ui-state-default.ui-corner-all {
    width: 12px;
    height: 12px;
}

div.volume-slider {
    width: 70%;
    height: 5px;
}

img#audioOutputIcon {
    padding: 2%;
}

div.volume-control,
div#audioInputDiv,
div#camInputDiv,
div#audioOutputDiv,
div#bondsPanel {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 5px 0;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

img.volume-minus,
img.volume-plus {
    width: 10%;
    height: 50%;
    cursor: pointer;
}

img.volume-minus {
    margin-right: 1%;
}

img.volume-plus {
    margin-left: 0.5%;
}

img#audioInputIcon,
img#audioOutputIcon,
img#camInputIcon {
    width: 100%;
    height: 100%;
}

img#worldIcon {
    width: auto;
    height: 70%;
}

img#contactIcon {
    width: auto;
    height: 50%;
}

.ui-autocomplete.ui-autocomplete-contacts {
    overflow: auto;
    --tw-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
    border-color: #d1d5dc;
    border-width: 2px;
    border-radius: 10.4px;
    margin-top: 4px;
}

.ui-autocomplete.ui-autocomplete-contacts .ui-state-active, 
.ui-autocomplete.ui-autocomplete-contacts .ui-widget-content .ui-state-active,
.ui-autocomplete.ui-autocomplete-contacts .ui-menu-item:hover {
    background-color: #fbf9fa;
    border: none;
}

.ui-autocomplete.ui-autocomplete-contacts .ui-menu-item {
    line-height: 30px;
    white-space: nowrap;
    padding: 0 10px;
    border-bottom: 1px solid #f6f3f4;
    height: 33px;
}

.contact-phone-number {
    max-width: 14vw;
    padding-left: 7px;
    white-space: nowrap;
    overflow: hidden;
}

div#audioControlsContainer {
    display: none;
}

select#audioOutput,
select#audioInput,
select#camInput {
    width: 85%;
    height: 100%;
    padding-right: 30px;
    margin: 0;
    border: 2px solid #10b981;
;
}


div#transferCallPrefixesListPanel>prefixes-list {
    width: 100%;
    height: 100%;
    display: flex;
}

#countryContainer span.twitter-typeahead,
#prefixesListPanel select#country-prefix {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0%;
    background-color: white;
    min-height: auto;
}

img#deleteArrow:active {
    background-color: #DBDBDB;
}

#prefixesListPanel select#country-prefix {
    padding-left: 5px;
    border-left: none;
    overflow: hidden;
}

div#confButton {
    position: relative;
    border: 2px solid #004F98;
    border-radius: 20px;
}

img#confIcon {
    cursor: pointer;
}

#camInputIcon {
    width: 55% !important;
}

#audioOutputDiv label,
#audioInputDiv label,
#camInputDiv label,
img.volume-icon,
img#bonds_Logo {
    margin: 0;
    width: 15%;
    height: 100%;
    padding: 1% 0;
    min-width: 15%;
}

#plusAudioOutputIcon, #camInputDiv.hide {
    display: none;
}

div.volume-control img.volume-icon {
    padding: 0 0 0 1.2%;
}

div#audioControlsContainer {
    position: absolute;
    background: white;
    z-index: 100;
    top: 95%;
    right: 0;
    margin: 0;
    width: 323px;
    padding: 15%;
    float: none;
    box-sizing: border-box;
    z-index: 101;
        /* overflow: hidden; */
    --tw-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
    border-radius: 10.4px;
    margin-top: 4px;
    border: 2px solid #d1d5dc;
}

.mute-button.disabled {
    pointer-events: none;
}

#confSection>div.phoneButtonContent {
    max-width: 25%;
}

#confSection>div {
    max-width: 75%;
    width: 75%;
}


div#confSection {
    justify-content: space-between;
}

#confSection>div:last-child {
    display: flex;
    justify-content: flex-end;
    align-self: center;
}

div#callTransferSection>div>img {
    border: 2px solid #004F98;
    padding: 0.5%;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 2px;
}

.ui-widget-header.transfer-call {
    background-color: transparent;
    border: none;
}

.wi-500 .keypad-resize-8 {
    height: 1.75rem;
    width: 1.75rem;
}

div#callTransferSection {
    margin-right: 7px;
}