.sidenav {
        background-color: #111;
        height: 100%;
        left: 0;
        overflow-x: hidden;
        padding-top: 60px;
        position: fixed;
        top: 0;
        transition: .5s;
        width: 0;
        z-index: 1;
        overflow-y:hidden;
    }

    .sidenavR {
        background-color: #fff;
        height: 100%;
        overflow-x: hidden;
        padding-top: 60px;
        position: fixed;
        right: 0;
        top: 0;
        transition: .5s;
        width: 0;
        z-index: 2;
        overflow-y:hidden;
    }



    .sidenav .closebtn,
    .sidenavR .closebtn {
        font-size: 20px;
        margin-left: 50px;
        position: absolute;
        right: 25px;
        top: 70px;
        color: #4090CB;
        background-color: #fff;
      
        
    }
    .dialer_title {
    position: absolute;
    margin: 10px 0;
    /* top: 19%; */
    /* color: white; */
    font-size: 20px;
    /* left: 10px; */
    background-color: white;
    padding: 0px 80px;
}

    @media screen and (max-height:450px) {
        .sidenav,
        .sidenavR {

        }
        .sidenav a,
        .sidenavR a {
            font-size: 18px;
        }
    }
    .call {
        padding: 10px;
        /*line-height: 60px;
        color: #dee2e6;
        max-height: 70px;*/
        font-size: 22px;
    }


    input:focus, button:focus {
        outline:none;
    }

    div {
        box-sizing:border-box;
    }

    .dailer {
        width:100%;
        margin-top: 55px;
        margin-bottom:10px;
        padding: 0 20px;

    }

    .header {
        width:100%;

    }

    .header::after {
        display:block;
        content:"";
        clear:both;
    }

    .header .input {
        width:100%;
        float:left;
        padding-left:10px;
        border-bottom: 2px solid #4090cb;
        

    }
    .header .input input {
        width:100%;
        box-sizing:border-box;
        padding:8px;
        border:none;
        font-size:20px;
        font-weight:lighter;
        font-family:'montserrat';
        text-align:right;
        color:#4090CB;
        background-color: transparent;
        font-weight: 500;
    }




    .dailer_body {
        /* background:#FEF9E7; */
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        padding-left:20px;
        padding-right:20px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    .dailer_body .number_row {
        width:100%;
        padding:10px 0;
        margin: 0;
    }

    .dailer_body .number_row::after {
        display:block;
        content:"";
        clear:both;
    } 


    .dailer_body .number_row .number {
        width:33.3333%;
        float:left;
        text-align: center;

    }
    .dailer_body .number_row .number button {
        width:48px;
        height:48px;
        border-radius:100%;
        border:none;
        font-family:'montserrat';
        color:#fff;
        background: #4090cb;
        /*box-shadow: 0px 0px 10px grey;*/
        font-weight: bold;
        font-size: 20px;
        transition: 0.5s;
    }

    .dailer_body .number_row .number button:hover{
        background-color: white;
        color: #000;
    }
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0; 
    }

    /*  */

    .dailer_body .number_row .col-2 {
        float:left;
        width:50%;
        padding-left:40px;
        padding-right:40px;
    }

    .dailer_body .number_row .col-2 button {
        width:48px;
        height:48px;
        border-radius:100%;
        border:none;
        color:#fff;
        font-size:25px;
        /*box-shadow:0 5px 10px 0 #eee;*/
    }

    .dailer_body .number_row .col-2 button#call {
        background:#2ECC71;
        width:48px;
        height:48px
    }

    .dailer_body .number_row .col-2 button#reset {
        background-color: red;

    }




            /*-------CALL SCREEN CSS----*/

.call_screen{
background-color: #d0021b;
height: 1000px;
overflow-y:hidden;

}

div{
box-sizing: border-box;
}

.call_screen h2{
padding-top: 50px;
text-align: center;
color: white;
}
.call_screen h4{
text-align: center;
color: white;
}
.call_screen h6{
text-align: center;
color: white;
}
.callscreen_row .callscreen_button{
width:33.3333%;
float:left;
text-align: center;

padding: 20px 0px;
}
.callscreen_row .callscreen_button p{
color: white;
margin: 0;
padding: 0;
}
.material-icons{
font-size: 35px;
}
.callscreen_row .callscreen_button button{
width:80px;
height:80px;
border:1px solid white;
border-radius:100%;
border:none;
color: white;
font-size: 35px;
background-color: transparent;
}
#endcall button{
width:80px;
height:80px;
background-color: red;
border:none;
}





.callrecive_screen{
background-color: #d0021b;
height: 550px;
}
.callrecive_screen{
background-color: #d0021b;
height: 550px;
}
.callrecive_screen h5{
color: #fff;
text-align: center;
padding: 60px 0;
font-size: 30px;
}
.call_button{
margin: 100px 20px;
}
#call_recive_button{
outline: none;
background-color: #52BE80;
width: 80px;
height: 80px;
font-size: 30px;
border-radius: 100%;
border:1px solid #52BE80;
color: #fff;
margin: 0 0px;
}
#call_end_button{
outline: none;
background-color: red;
width: 80px;
height: 80px;
font-size: 30px;
border-radius: 100%;
border:1px solid red;
color: #fff;
transform: rotate(135deg);
margin: 0 90px;
}


#call_recive_button{

position: relative;
width: 80px;
height: 80px;
border: none;
box-shadow: 0 0 0 0 #2ECC71;
border-radius: 50%;
border: none;
background-color: #2ECC71;
background-size:cover;
background-repeat: no-repeat;
cursor: pointer;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px #2ECC71;}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px #2ECC71;}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px #2ECC71;}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}




#call_end_button{

position: relative;
width: 80px;
height: 80px;
border: none;
box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
border-radius: 50%;
background-color: #e84c3d;

cursor: pointer;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

.dialer_title {
    background-color: #d0021b !important;
    float: left;
    display: block;
   
}
.callrecive_screen h6 {
    color: #fff;
    text-align: center;
    padding: 60px 0;
    font-size: 15px;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}