@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
 body, p {
     padding: 0;
     margin: 0;
}
 body {
     background: #272726;
}
/*label {
     text-align: left;
     font-family: Helvetica, sans-serif;
     font-size: 1.25em;
     color: #777776;
     display: block;
}
*/
 div#controls {
     padding: 3em;
     max-width: 1200px;
     margin: 0 auto;
}
/* div#controls div {
     float: left;
}
 */
 div#controls div#call-controls, div#controls div#info {
     width: 16em;
     margin: 0 1.5em;
     text-align: center;
}
 div#controls div#info div#output-selection {
     display: none;
}
 div#controls div#info a {
     font-size: 1.1em;
     color: khaki;
     text-decoration: underline;
     cursor: pointer;
}
 div#controls div#info select {
     width: 300px;
     height: 60px;
     margin-bottom: 2em;
}
 div#controls div#info label {
     width: 300px;
}
 div#controls div#call-controls div#volume-indicators {
     display: none;
     padding: 10px;
     margin-top: 20px;
     width: 500px;
     text-align: left;
}
 div#controls div#call-controls div#volume-indicators > div {
     display: block;
     height: 20px;
     width: 0;
}
 div#controls p.instructions {
     text-align: left;
     margin-bottom: 1em;
     font-family: Helvetica-LightOblique, Helvetica, sans-serif;
     font-style: oblique;
     font-size: 1.25em;
     color: #777776;
}
 div#controls div#info #client-name {
     text-align: left;
     margin-bottom: 1em;
     font-family: "Helvetica Light", Helvetica, sans-serif;
     font-size: 1.25em;
     color: #777776;
}
 .leave-btn button {
    /* width: 15em !important;
     */
    /* height: 3.2em;
     */
    /* margin-top: 1.75em;
     */
    /* border-radius: 1em !important;
     */
    /* font-family: "Helvetica Light", Helvetica, sans-serif;
     */
    /* font-size: .8em;
     */
    /* font-weight: lighter;
     */
    /* outline: 0;
     */
}
 div#controls button:active {
     position: relative;
     top: 1px;
}
 div#controls div#call-controls {
     display: none;
}
 div#controls div#call-controls input {
     font-family: Helvetica-LightOblique, Helvetica, sans-serif;
     font-style: oblique;
     font-size: 1em;
     width: 100%;
     height: 2.5em;
     padding: .5em;
     display: block;
}
 div#controls div#call-controls button {
     color: #fff;
     background: 0 0;
     border: 1px solid #686865;
}
 div#controls div#call-controls button#button-hangup {
     display: none;
}
 div#controls div#log {
     border: 1px solid #686865;
     width: 35%;
     height: 9.5em;
     margin-top: 2.75em;
     text-align: left;
     padding: 1.5em;
     float: right;
     overflow-y: scroll;
}
 div#controls div#log p {
     color: #686865;
     font-family: 'Share Tech Mono', 'Courier New', Courier, fixed-width;
     font-size: 1.25em;
     line-height: 1.25em;
     margin-left: 1em;
     text-indent: -1.25em;
     width: 90%;
}
 .quick-action-popup {
     width: 420px;
     min-height: 300px;
     margin: 0 auto;
     background: #000000;
     text-align: center;
     color: #fff;
     padding: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .quick-action-popup h3 {
     font-size: 20px;
     margin-bottom: 7px;
     color: #fff;
}
 .quick-action-popup h4 {
     font-size: 15px;
     margin-bottom: 10px;
     color: #fff;
}
 .quick-action-popup h6 {
     font-size: 14px;
     margin: 5px 0;
     font-weight: 500;
     color: #a7a7a7;
     letter-spacing: 1px;
}
 .quick-action-popup .leave-btn button {
     background: #C4314B;
     width: auto;
     border-radius: 30px;
     padding: 5px 15px;
     border: unset;
     display: flex;
     align-items: center;
     margin: 0 auto;
     color: #fff;
     font-size: 15px;
     font-weight: 600;
     letter-spacing: 1px;
     cursor: pointer;
    /*height: 40px;
    */
}
 .quick-action-popup .accept-btn button {
     background: green;
     width: auto;
     border-radius: 30px;
     padding: 5px 15px;
     border: unset;
    /*display: flex;
     align-items: center;
    */
     margin: 0 auto;
     color: #fff;
     font-size: 15px;
     font-weight: 600;
     letter-spacing: 1px;
     cursor: pointer;
     height: 40px;
}
 .quick-action-popup .leave-btn {
    /*margin-top: 20px;
    */
     margin-top: 0;
     margin-left: 10px;
}
 .quick-action-popup .leave-btn button img {
     margin-right: 10px;
     width: 30px;
     height: 30px;
}
 #un-mute{
    display : none;
}
 .speaker_icon img{
    width: 26px;
    height: auto;
    margin: 0 auto;
    filter: invert(1);
    position: relative;
    top: 6px;
}
 div#controls button{
     display: flex;
     align-content: center;
     justify-content: center;
}
 .page-template-twilio-call-from-browser #chat-widget-container {
     display: none;
}
 .speaker-btn{
     height: 40px;
     width: 40px;
     border: unset;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     margin: 0 auto;
     background: #3077c4;
     margin-top: 20px;
     margin-right: 10px;
     overflow: hidden;
}
 .btn-groups{
     display: flex;
     align-items: center;
     justify-content: center;
}
 .speaker-btn img {
     width: 26px;
     height: auto;
     margin: 0 auto;
     filter: invert(1);
}
 .active-toggle, .video-active-toggle {
     background: #fff;
}
 .active-toggle img, .video-active-toggle img {
     filter: unset;
}
 span.strike-line {
     width: 80%;
     height: 2.5px;
     background: red;
     transform: rotate(45deg);
     position: absolute;
     z-index: 9;
     overflow: hidden;
     opacity: 0;
}
 .active-toggle .strike-line, .video-active-toggle .strike-line{
     opacity: 1;
}
 .call-time {
     display: block;
     margin-top: 10px;
     font-size: 13px;
     font-weight: 600;
}
 .video-call-btn .video-on {
     width: 22px;
}
/* 20102022 */
 #un-mute{
    display : none;
}
 .quick-action-popup h3{
     margin-top: 0;
}
 .quick-action-popup{
     width: 450px;
}
 .csm-row{
     display: flex;
     align-items: center;
     margin-top: 15px;
     width: auto;
     justify-content: center;
}
 .csm-row span.leave-btn {
     margin-top: 0;
     margin-left: 10px;
}
 .quick-action-popup .inner-box {
     width: 100%;
}
 .cm-wrap {
     display: flex;
     justify-content: center;
     margin-top: 15px;
     width: auto;
     align-items: center;
}
 #button-accept img, #button-reject img {
     width: 30px;
     height: 30px;
     margin-right: 5px;
}
 .quick-action-popup .leave-btn button img{
     margin-right: 5px;
}
/* Feedback Msg */
.quick-action-popup{
     min-height: 260px;
}
 div#controls button,.quick-action-popup,.quick-action-popup .leave-btn button{
     font-family: 'Poppins',sans-serif;
}
 .quick-action-popup h4{
     margin-top: 0;
     font-size: 14px;
}
 .feedback-msg-wrap select {
     cursor: pointer;
     width: calc(100% - 16%);
     background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
     background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
     background-size: 5px 5px, 5px 5px, 1px 1.5em;
     background-repeat: no-repeat;
     background-color: white;
     border: unset;
     border-radius: 7px;
     font: inherit;
     line-height: 1.5em;
     padding: 0.5em 3.5em 0.5em 1em;
     margin: 10px auto 7px auto;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-appearance: none;
     -moz-appearance: none;
     display: block;
     height: 32px;
     font-size: 12px;
}
 .feedback-msg-wrap textarea {
     display: block;
     width: calc(100% - 20%);
     border-radius: 7px;
     border: unset;
     padding: 10px;
     height: 50px;
     margin: 0 auto;
     font-size: 13px;
}
.feedback-msg-wrap button {
     background: #C4314B;
     margin: 10px auto 5px;
     width: auto;
     border-radius: 30px;
     padding: 10px 40px;
     border: unset;
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 1px;
     cursor: pointer;
}
.feedback-msg-wrap button:hover{
     background: #fff;
     color: #C4314B;
     transition: 0.5s all;
}
.feedback-msg-wrap textarea:focus-visible, .feedback-msg-wrap select:focus-visible{
     outline: unset;
}
#errormsg1{
    color: red;
     margin-left: 10%;
     margin-top: 5px;
     text-align: left;
}
.incomingcallpopup,.outgoingcallpopup{
     top: 50%;
     left: 35%;
     width: 450px;
     height: 260px;
     overflow: visible!important;
     position: fixed;
     z-index: 999999;
     display: none;
}
/*21.11.2022*/
.ps-set{
     position: relative;
     top: -10px;
}
label.speaker_icon {
     position: relative;
     margin: 0 auto;
     background: #3077c4;
     height: 40px;
     width: 40px;
     border: unset;
     border-radius: 50%;
     text-align: center;
     cursor: pointer;
}
/*#show_outgoing_call .quick-action-popup{
     height: 315px;
}*/
.dialpad a {
     color: white;
     background: #6C5DD3;
     width: 30px;
     height: 30px;
     display: inline-block;
     border-radius: 50%;
     padding: 8px;
}
.dialpad a:hover {
     background: #fff;
     color: #C4314B;
     transition: 0.5s all;
}
.dialpad .dialpad_row {
     padding: 5px;
}

.incomingcallpopup, .outgoingcallpopup{
	left: 0;
	right: 0;
	margin: 0 auto;
	min-height: 260px;
}
.quick-action-popup{
	min-height: 260px;
}

@media screen and (max-width: 480px){
	.incomingcallpopup, .outgoingcallpopup, .quick-action-popup{
		width: 100%;
	}
}