/*
@media (min-width: 480px) {
    
}

@media (max-width: 500px) { 
    #number-pad {
        gap: 10px 10px;
    }
    #number-pad button {
       width: 55px;
       height: 55px;
    }
}

@media (max-width: 768px) {
    #number-pad {
       gap: 15px 15px;
    }
    #number-pad button {
       width: 65px;
       height: 65px;
    }
    
}

@media (max-width: 480px) {
    #number-pad {
        gap: 10px 10px;
    }
    #number-pad button {
       width: 55px;
       height: 55px;
    }
*/


@media (min-width: 225px) and (max-width: 360px) {

    .loading-horizontal-circle {
        width: 20px;
        height: 10px;
    }

    .container {
        padding: 10px;
    }

    #phoneInfo .icon i,
    #phoneInfo-user,
    #phoneInfo-status {
        font-size: 11px;

    }

    #phoneInfo .icon img {
        height: 9px !important;
    }

    #phoneInfo .icon i {
        font-size: 11px;
        margin-right: 0.3rem;
    }

    #txtPhoneNumber {
        height: 22px;
        line-height: 22px;
        font-size: 14px;
    }

    #number-pad button {
        font-size: 15px;
    }

    #number-pad button .char {
        font-size: 7px;
    }

    #number-pad {
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        gap: 6px;
    }



    .action-buttons {
        margin: 4px 0;
        gap: 25px;
    }

    .incoming-call-buttons,
    #profile-incoming.profile {
        margin-top: auto;
    }

    .footer {
        height: 25px;
    }

    .delete-button i {
        font-size: 16px;
    }

    #btnCall img {
        width: 25px;
    }


    /* menu */
    .sidebar-header span,
    .sidebar-header .close-icon {
        font-size: 14px;
    }

    .sidebar-header {
        margin-bottom: 5px;
    }

    #set-extension-config {
        font-size: 12px;
    }

    .sidebar-menu li i {
        font-size: 13px;
    }



    /* config extension */
    .roundButtons {
        width: 10px;
        height: 10px;
        line-height: 9px;
        font-size: 13px;
    }

    #account-settings-content {
        font-size: 13px;
    }

    .form-group label {
        margin-bottom: 3px;
    }

    .account-settings .input-text {
        padding: 3px;
    }

    .extension-save-btn,
    .extension-cancel-btn {
        min-width: 60px;
        min-height: 25px;
        padding: 0px;
        font-size: 13px;
    }


    /* ShowDialingPhone */
    #profile-connected img {
        width: 40px;
    }

    #profile-connected div {
        font-size: 12px;
    }

    #profile-connected p {
        font-size: 11px;
    }

    #call-buttons-connected button.call-button,
    .action-buttons button,
    .incoming-call-button button,
    #number-pad button {
        width: 40px;
        height: 40px;
    }

    #call-buttons-connected .call-button i {
        font-size: 15px;
    }

    #call-buttons-connected .call-button p {
        font-size: 9px;
    }

    #decline-button-connected.decline-button button i {
        font-size: 40px;
    }

    #decline-button-connected.decline-button p {
        font-size: 9px;
        margin-top: 3px;
        margin-bottom: 0px;
    }

    /* incoming */
    #profile-incoming.profile {
        padding: 0 20px;
    }

    .name {
        font-size: 15px;
    }

    .status {
        font-size: 13px;
        margin-top: 2px;
        margin-bottom: 0;
    }

    .profile-image {
        width: 40px;
    }

    .incoming-call-buttons {
        padding: 0 20px;
    }

    .incoming-call-button button i {
        font-size: 40px;
    }

    .incoming-call-button p {
        font-size: 12px;
    }

    #transfer-control p {
        font-size: 9px;
        text-align: center;
    }

    #btnTransferCall {
        margin: auto;
    }

    #call-buttons-connected {
        margin: 3px 0px;
    }

    .dropdown-item {
        padding: 0.15rem 0.6rem;
    }

    .status-icon {
        width: 10px;
        height: 10px;
    }

    .status-text {
        font-size: 11px;
    }

    .icon {
        margin-top: 3px;
    }

    #phoneInfo {
        align-items: start;
    }


}

@media (width: 320px) and (height: 600px) {

    #phoneInfo .icon i,
    #phoneInfo-user,
    #phoneInfo-status {
        font-size: 14px;
    }

    #phoneInfo .icon img {
        height: 12px !important;
    }

    #txtPhoneNumber {
        height: 35px;
        font-size: 18px;
    }

    #number-pad button {
        font-size: 18px;
    }

    #number-pad button .char {
        font-size: 10px;
    }

    #number-pad {
        margin: 10px 25px;
    }

    #profile-connected img {
        width: 60px;
    }

    .action-buttons {
        margin: 4px 0;
    }

    #profile-connected div {
        font-size: 20px;
    }

    .action-buttons button,
    .incoming-call-button button,
    #number-pad button {
        width: 55px;
        height: 55px;
    }

    #decline-button-connected.decline-button button i {
        font-size: 55px;
    }

    .incoming-call-buttons,
    #profile-incoming.profile {
        margin-top: auto;
    }

    .footer {
        height: 25px;
    }


}