/* Click to call widget style */

a {
  color: #0059c6;
}

/* Connection quality. Optional. */
  #c2c_connection_speed_div {
      display: none; 
      font-size: 18px;		 
  }

/* Test call quality. Optional. */
#c2c_test_call_quality_div {
    display: none; 
    font-size: 18px;		 
}

/* Phone status line.
    HTML with possible styles set as argument of c2c_info() method
*/
#c2c_status_line {
    display: inline-block;
} 

/* Select devices button. Optional. Can be hidden */
#c2c_select_devices_btn {
    font-size: 18px;
    padding-top: 2px;
    margin-right: 8px;
    display: none; /* hide select devices */
}

#c2c_select_devices_svg {
    width: 22px;
    height: 22px;      
}

/* Keypad button. Optional. Can be hidden */
#c2c_keypad_btn {
    font-size: 18px;
    /* padding-top: 2px; */
    display: none;
}

#c2c_keypad_svg {
    width:  26px;
    height: 26px;
    fill: white;
    stroke: black;
}

/* Test call button and SVG icon. Optional. Can be hidden */
#c2c_test_btn {
    font-size: 18px;
    padding-top: 2px;
    display: none; /* hide test quality gui */
}

#c2c_test_svg {
    width: 22px;
    height: 22px;
}  

/* Main call button and SVG icon */
#c2c_call_btn {
    font-size: 18px;
    /* padding-top: 2px; */
    padding-left: 10px;
    padding-right: 30px;
    display: none;
}

#c2c_call_svg {
    width: 22px;
    height: 22px;
}

/* Call button hangup look */
.c2c_call_btn_hangup {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Call button ready look */
.c2c_call_btn_ready {
    background-color: #dc3545;
    border-color: #dc3545;
}


/* Call button SVG icon can be in one of the states: */
.c2c_call_svg_disabled {
    transform: rotate(-90deg);
    fill: gray;
}

.c2c_call_svg_ready {
    transform: rotate(-90deg);
}

.c2c_call_svg_hangup {
    fill: #fff;
    margin-left: 5px;
}

.c2c_call_svg_calling {
    animation: colorChange 4s infinite linear;
}

/* Call button SVG icon color animation during calling */
@keyframes colorChange {
    100% {
        fill: #99e6ff;
    }
    90% {
        fill: #66d9ff;
    }
    80% {
        fill: #33ccff;
    }
    70% {
        fill: #00bfff;
    }
    60% {
        fill: #0099cc;
    }
    50% {
        fill: #007399;
    }
    40% {
        fill: #004d66;
    }
    30% {
        fill: #007399;
    }
    20% {
        fill: #0099cc;
    }
    10% {
        fill: #00bfff;
    }
    0% {
        fill: #33ccff;
    }
}

#c2c_video_chk_span {
    color: #150cef;
    display: none;
}

#c2c_camera_btn {
    padding: 0px 5px 3px 5px;
    border: 0px none  #99e6ff;
    background-color: #99e6ff;
    display: none;    
}

#c2c_camera_svg {
    width:  26px;
    height: 26px;
    fill: white;
    stroke: black;
}

#c2c_camera_line_svg.c2c_camera_on {
    stroke: none;
}

#c2c_camera_line_svg.c2c_camera_off {
    stroke: black;
}

#c2c_self_video_chk_span {
    display: none;
}

#c2c_select_devices_div {
    display: none;
}

#c2c_keypad_div {
    display: none;
}

#c2c_keypad_table {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 10px auto;
}

#c2c_keypad_table tr td {
    vertical-align: middle;
    text-align: center;
    border: none;
    font-size: 18px;
    font-weight: bold;
    width: 40px;
    height: 30px;
    cursor: pointer;
    background-color: #fff;
    color: #0059C6;
}

#c2c_keypad_table tr td:hover {
    background-color: #E3E3E3;
    color: #fff;
}

#c2c_video_div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Added HTML */
.ulf-wipo .table, .ulf-wipo table {
  border: 1px solid #CCCCCC !important;
}

.ulf-wipo .table tr, .ulf-wipo table tr {
  border-top: none !important;
}
.ulf-wipo .table tr, .ulf-wipo table tr {
  border-top: none !important;
}

.ulf-wipo table tr:nth-child(1),
.ulf-wipo table tr:nth-child(2),
.ulf-wipo table tr:nth-child(3) {
    border: 1px solid #E3E3E3;
}

#c2c_keypad_table tr td {
    width: 4rem;
}

#c2c_keypad_table tr td:nth-child(1),
#c2c_keypad_table tr td:nth-child(2) {
    border-right: 1px solid #E3E3E3;
}

.actionBtn {
  width: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
  margin-block-start: 1.5rem;
  display: flex;
}

.actionBtn #c2c_call_btn, .actionBtn #c2c_keypad_btn {
    margin-inline-start: auto;
    margin-inline-end: auto;
}

#ongoing_call i {
    font-size: 10rem;
}