html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    /*-webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;*/
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 180px;
    height: 24px;
    background: url(../images/Logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.loading-image {
    width: 60px;
    height: 100px;
}

.xaf-lookup-search .xaf-clear-button {
    display: none;
}

table.dxbl-grid-table colgroup col:not(:first-of-type):not(:last-of-type) {
    min-width: 140px;
}



.phone-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 25px;
    margin-top: 25px;
    background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.display {
    text-align: center;
    margin-bottom: 20px;
}

    .display input {
        width: 100%;
        padding: 15px;
        font-size: 24px;
        border: none;
        border-radius: 10px;
        background: #fff;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

.buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    .buttons button, .wrap-diapad button {
        width: 100%;
        padding: 15px;
        font-size: 24px;
        border: none;
        border-radius: 50%;
        background: #f0f0f0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: background 0.2s, transform 0.2s;
    }

        .buttons button:hover, .wrap-diapad button:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
        }

    .buttons .clear, .buttons .backspace {
        font-size: 18px;
    }

.actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

    .actions button {
        flex: 1;
        margin: 0 5px;
        padding: 15px;
        font-size: 18px;
        border: none;
        border-radius: 20px;
        color: #fff;
        background: #4CAF50; /* Default color for Call button */
        transition: background 0.2s, transform 0.2s;
    }

        .actions button:hover {
            transform: translateY(-2px);
        }

    .actions .answer {
        background: #008CBA; /* Blue for Answer */
    }

    .actions .reject {
        background: #f44336; /* Red for Reject */
    }


#dropdown-option-call, #btnCloseIframe {
    display: none !important;
}