#hide_background{ top: 0px; left: 0px; }
#hide_background,
.webrtc-container,
.hide_activated {
    margin: 0px;
    padding: 0px;
}
.webrtc-container {
    position: fixed;
    top: 200px;
    left: -1024px;
    width: 228px;
    z-index: 11000;
    visibility: visible;
}

.container-hidden {
    display: none;
}

.hide_activated {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 10999;
    background-color: #FFFFFF;
    opacity: 0.5;
}

.keyboard-close {
    display: table;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}


.keypad-panel,
.webrtccall-box,
.webrtccall_button,
.sip-box-phone,
.button-box {
    position: relative;
    box-sizing: content-box;
}
.webrtccall_button,
.sip-box-phone {
    margin: 0em auto;
}
.webrtccall_button {
    padding: 0.3em 10px;
}
.webrtccall_button button.not_supported {
    color: #AA1111;
}




.keyboard-close {
    position: absolute;
}

.button-box {
    background-color: transparent;
    display: table;
    height: 52px;
    width: 100%;
}
.button-box .keyboard-close,
.button-box .keyboard-close:hover{
    height: 40px;
    width: 40px;
    top: 46px;
    right: -11px;
    background-size: 100%;
    z-index: 11000;
}
/*
.button-box .keyboard-close {
    background-size: 100%;
    top: 40px;
    right: -15px;
    height: 52px;
    width: 52px;
    z-index: 11000;
} */

.keypad-panel {
    display: table;
    min-height: 20em;
    vertical-align: middle;
    padding: 5%;
    width: 90%;
}
.keypad-panel button.btn {
    color: #444444;
}

.sip-box-phone {
    position: relative;
    margin: 1em 0em 0em;
    border: none;
}

.keypad-panel .dtmf_btn {
    margin: 3%;
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    color: #666666;
    width: 25%;
    text-align: center;
    height: auto;
    background-color: #FFFFFF;
    border: 2px solid #E0E0E0;
    border-radius: 3px;
    line-height: 16px;
}
.webrtccall-box.activate .dtmf_btn {
    border: 2px solid #D2E8A7;
}
.webrtccall-box {
    display: table;
    border: 1px solid #CDCDCD;
    background-color: #FFFFFF;
    border-radius: 0.3rem;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2);
    padding: 5%;
    width: 90%;
}

.webrtccall-box .call {
    border-color: #AAAA44;
}

.webrtccall-box .activate {
    border-color: #11AA11;
}


.default {
    color: #444444;
}

.request {
    color: #AAAA44;
}

.error {
    color: #AA1111;
}

.information {
    color: #444444;
}

.sip-box-phone.active {
    border: none;
}

.locked {
    left: 0em;
}

.unlocked {
    left: -100em;
}


.keyboard-close:hover {
    background-image: url(data:image/png;base64,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);
}

.keyboard-close {
    background-image: url(data:image/png;base64,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);
}

#webrtc_activation {
    pointer-events: auto;
}
#webrtc_activation.called {
    pointer-events: none;
}

#iwrtc-button {
    display: block;
    margin: 0 auto;
    font-size: 13px;
    font-weight: bold;
    height: auto;
    width: 100%;
    padding: 6% 5%;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    line-height: 13px;
}
#iwrtc-button.calling {
    color: #FFFFFF;
    background-color: #EB1C24;
}


#webrtc_status {
    font-size:      1.2rem;
    font-weight:    bold;
    margin:         0.5em 0em;
    padding:        0.5em;
    text-align:     center;
    height:         1.2em;
}

#webrtc_dialpad {
    display: none;
    border: none;
}

#novawebcall-box {
    text-align: center;
    padding: 0px;
}


/**
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/**
 *  < 1264px (79em)
 * 
 */

@media all and (max-width: 1264px) {

    #iwrtc-button {
        font-size:      13px;
        line-height:    13px;
    }

    .keypad-panel .dtmf_btn {
        font-size:      16px;
        line-height:    16px;
    }
}

/**
 *  < 1072px (67em)
 * 
 */

@media all and (max-width: 1072px) {

    #iwrtc-button {
        font-size:      13px;
        line-height:    13px;
    }

    .keypad-panel .dtmf_btn {
        font-size:      16px;
        line-height:    16px;
    }
}

/**
 *  < 768px (48em)
 * 
 */

@media all and (max-width: 768px) {

/*    .keyboard-close,
    .keyboard-close:hover {
        background-size:    65%;
    }
    .button-box .keyboard-close {
        height:         104px;
        width:          104px;
        top:            26px;
        right:          -30px;
    } */

    #iwrtc-button {
        font-size:      20px;
        line-height:    20px;
    }

    .keypad-panel .dtmf_btn {
        font-size:      42px;
        line-height:    42px;
    }
    
    #webrtc_status {
        font-size:      20px;
    }
}

/**
 *  < 414px (25.875em)
 * 
 */

@media all and (max-width: 414px) {

/*    .keyboard-close,
    .keyboard-close:hover {
        background-size:    55%;
    }
    .button-box .keyboard-close {
        height:             104px;
        width:              104px;
        top:                18px;
        right:              -38px;
    } */

    #iwrtc-button {
        font-size:          14px;
        line-height:        14px;
    }

    .keypad-panel .dtmf_btn {
        font-size:          36px;
        line-height:        36px;
    }
    
    #webrtc_status {
        font-size:          14px;
    }
}