.hotline {
    z-index: 99;
    bottom: 20px;
    right: 20px;
    position: fixed;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
}

input.symbol--phone-call, .symbol--phone-call {
    background-image: url(../../../icon/phone-call.svg);
}

.hotline__call-button, .hotline__call-button__close, .hotline__number {
    background-position: center;
    background-size: 50%;
    background-color: var(--c-white);
    cursor: pointer;
}

.hotline__call-button {
    width: 50px;
    height: 50px;
    border-radius: 45% 45% 10% 45%;
    border: 2px solid #575757;
    box-shadow: 2px 2px 10px rgba(41, 41, 41, 0.25);
}

.hotline__call-button:hover, .hotline__call-button__close:hover {
    background-color: var(--c-greyLighter);
}

.hotline__call-button, .hotline__call-button__close {
    background-color: var(--c-white);
}

.hotline__icon-container__details {
    z-index: 1;
    position: fixed;
    display: flex;
    align-items: center;
    border-radius: 23px 23px 5px 23px;
    border: 2px solid #575757;
    width: max-content;
    height: 50px;
    box-shadow: 2px 2px 10px rgba(41, 41, 41, 0.25);
}

.hotline__call-button__close {
    width: 50px;
    height: 100%;
    border-radius: 45% 0 0 45%;
    margin-right: -1px;
}

.hotline__number.expand {
    width: 330px;
}

.hotline__number.colapse {
    width: 0;
}

.hotline__number.invisible {
    color: var(--c-white); /* opacity is not possible */
}

.hotline__number__phone-number.invisible {
    color: var(--c-white); /* opacity is not possible */
}

.hotline__icon-container__details.expand {
    opacity: 1;
}

.hotline__icon-container__details.colapse {
    opacity: 0;
    width: 0;
    height: 0;
    top: 0;
}

.hotline__number {
    text-decoration: none;
    color: var(--c-greyDark);
    display: inline-flex;
    transition: width 0.3s ease-in-out;
    border-radius: 0 20px 5px 0;
    padding: 11px 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;   
    text-overflow: ellipsis; 
    height: 100%;
    cursor: unset;
}

.hotline__number .hotline__number__phone-number {   
    margin-left: 5px;
    cursor: pointer;
}

.hotline__number__phone-number:hover {
    text-decoration: underline;
}

.hotline__number__phone-number {
    text-decoration: none;
}

.hotline__copy {
    margin-top: 10px;
    z-index: 1;
    top: -8px;
    margin-right: 36px;
    position: relative;
}