/* Click to call widget style */
    body {
      font: 80%/1.5 system-ui, sans-serif;
      background: #76BABE;
      color: white;
      height: 10vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 1rem;
    }

    #main_div {
      max-width: 350px;
	  margin:0px auto;	
    }
    
    a {
      color: #56BBF9;
    }
    /* Line to connection speed and quality score */
    /* Optional. Can be hidden */
     #c2c_quality_info_div {
         display: none; 
         font-size: 18px;
		 text-align:center;
     }

    /* Widget. Contains two buttons with SVG icons and message line */
    #c2c_widget {
        padding: 10px;
        width: 400px;
		margin:0px auto;
		display: inline;
    }

    /* Widget. Look for open call */
    .c2c_widget_incall {
        /* background-color: SpringGreen; */
    }
    
    /* Widget. Look for disabled status */
    .c2c_widget_disabled {
        background-color: lightgray;
    }

    /* Call message line. HTML with possible styles set as argument of c2c_info() method  */
    #c2c_message {
        display: inline-block;
		text-align:center;
		font: 80%/1.5 system-ui, sans-serif;
    } 

    /* 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;
    }
    
    #c2c_call_svg {
        width: 22px;
        height: 22px;
    }

    /* Call button hangup look */
    .c2c_call_btn_hangup {
        background-color: lightpink;
        border-color: lightpink;
    }
    
    /* Call button ready look */
    .c2c_call_btn_ready {
        background-color: lightgreen;
        border-color: lightgreen;
    }

    
    /* 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);
        fill: DodgerBlue;
    }
    
    .c2c_call_svg_hangup {
        fill: DeepPink;
    }
    
    .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;
        }
    }
	
	#dialpanel > #items{
		padding-left:12px;
	}