body {
    background: rgb(242, 243, 248);
    font: 8pt Poppins, Roboto, Verdana, Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 60px;
    display: flex;
    justify-content : center;
}

.header {
    width: 100%;
    height: 60px;
    top: 0;
    background: rgb(33, 37, 41);
    line-height: 60px;
    padding-left: 20px;
    color: #fff;
    font-size: 16pt;
    position: fixed;
    z-index: 99999;
    overflow: hidden;
}

#logo {
    width: 90px;
    height: 60px;
    background: url(../images/logo.png) center left no-repeat;
    background-size: 120px;
}


.navigation {
    list-style-type: none;
    margin: 0;
    margin-left: 50px;
    padding: 0;
    float: left;
}

.navigation li {
    margin: 0;
    margin-right: 25px;
    padding: 0;
    font-size: 11pt;
    float: left;
}

.navigation li a:link, .navigation li a:visited {
    color: #ddd;
    text-decoration: none;
}

.navigation li a:hover, .navigation li.active a {
    color: #5faef0;
    text-decoration: none;
}

#callwrapper {
    width: 70%;
    height: 100%;
    display: block;
    padding: 20px;
    float: left;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#naviwrapper {
    width: 25%;
    display: block;
    padding: 20px;
    padding-left: 0;
    float: right;
}

#myRemoteVideo {
    background: #fff;
    width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 99;
    margin-top: 0;
    padding-top: 0;
    display: block;
}

#myRemoteVideo video {
    max-width: 100% !important;
    min-width: 640px;
    display: block;
    margin: 0 auto;
}

#myRemoteVideoWrapper {
    min-height: 500px;
    position: relative;
    z-index: 1;
}

#localvideowrapper {
    width: 120px;
    height: 120px;
    background: #eee;
    position: absolute;
    z-index: 999;
    display: block;
    bottom: 20px;
    right: 20px;
    display: none;
}

#callbuttons {
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    margin-left: -80px;
    display: none;
    opacity: 1;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


#acceptcall {
    float: left;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    text-align: center;
    background: rgb(22, 187, 69) url(/images/startcall.png) center center no-repeat;
    background-size: 50px;
    color: #fff;
    font-size: 12pt;
    cursor: pointer;
    line-height: 80px;
    padding: 0;
    display: block;
    position: relative;
    z-index: 10;

}


#refusecall {
    float: left;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    text-align: center;
    background: rgb(179, 0, 0) url(/images/phone2.png) center center no-repeat;
    background-size: 50px;
    color: #fff;
    font-size: 12pt;
    cursor: pointer;
    line-height: 80px;
    padding: 0;
    margin-left: 40px;
    display: block;
}

#hangup {
    float: left;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    text-align: center;
    background: rgb(179, 0, 0) url(/images/phone2.png) center center no-repeat;
    background-size: 50px;
    color: #fff;
    font-size: 12pt;
    cursor: pointer;
    line-height: 80px;
    padding: 0;
    margin-left: 40px;
    display: none;
}


.callactive #acceptcall, .callactive #refusecall, .callactive #hangup {
    border-radius: 30px;
    width: 60px;
    height: 60px;
    background-size: 30px;
    line-height: 60px;
}


#checkresult {
    width: 420px;
    min-height: 200px;
    background: #fcfcfc;
    box-shadow: rgba(69, 65, 78, 0.2) 0px 1px 15px 1px;
    position: absolute;
    z-index: 9999;
    top: 20%;
    left: 50%;
    margin-left: -230px;
    padding: 20px;
    overflow: hidden;
    display: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

#checkresult h4 {
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    font: normal 12pt Poppins, Roboto, Verdana, Arial, sans-serif;
    color: #404040;
    text-align: center;
}

#checkbuttons {
    margin-top: 20px;
    position: relative;
    z-index: 9999;
    margin-left: 100px;
}

#checkok {
    float: left;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    text-align: center;
    background: rgb(22, 187, 69);
    background-size: 50px;
    color: #fff;
    font-size: 36pt;
    cursor: pointer;
    line-height: 80px;
    padding: 0;
    margin-left: 0;
    display: block;
    position: relative;
    z-index: 10;
}


#checkko {
    float: left;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    text-align: center;
    background: rgb(179, 0, 0);
    background-size: 50px;
    color: #fff;
    font-size: 46pt;
    cursor: pointer;
    line-height: 84px;
    padding: 0;
    margin-left: 40px;
    display: block;
}

#checkcomment {
    width: 350px;
    height: 100px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: none;
    margin: 0 auto;
    display: block;
    padding: 10px;
    font: inherit;
    color: #777;
}

#q_amount, #agent_amount {
    color: rgb(22, 187, 69);
    color: #fff;
    font-weight: normal;
}

.ringing #callbuttons {
    display: block;
}

.ringing #checkresult {
    display: none;
}

.callactive #checkresult {
    display: none;
}

.callactive #callbuttons {
    width: 60px;
    display: block;
    top: auto;
    bottom: 10px;
    margin-left: -15px;
}

.callactive #callbuttons #acceptcall, .callactive #callbuttons #refusecall {
    display: none;
}


.callactive #callbuttons #hangup {
    margin: 0 auto;
    display: block;
}

.callactive #localvideowrapper {
    display: block;
}

.postcall #callbuttons {
    display: none;
}

.postcall #checkresult {
    display: block;
}

.box {
    background: #fff;
    box-shadow: rgba(69, 65, 78, 0.08) 0px 1px 15px 1px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 11pt;
    color: #777;
}

.ringing .box h3 {
    animation-name: pulse;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


.box.small {
    max-height: 400px;
    overflow: auto;
}

.box h3 {
    height: 40px;
    border-bottom: 1px solid rgb(235, 237, 242);
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: -20px;
    margin-bottom: 20px;
    font: normal 12pt Poppins, Roboto, Verdana, Arial, sans-serif;
    line-height: 40px;
    color: #333;
}

#agent_available {
    min-width: 160px;
    float: right;
    margin-right: 40px;
    font-size: 10pt;
    cursor: pointer;
    text-align: right;
}

#agent_text_off {
    color: #ff5733;
}

#agent_text_on {
    color: #75ff33;
}

#agent_available.on #agent_text_on {
    display: block;
}

#agent_available.on #agent_text_off {
    display: none;
}

#agent_available.off #agent_text_on {
    display: none;
}

#agent_available.off #agent_text_off {
    display: block;
}

#callinfo_caller {
    display: none;
}

.ringing #callinfo_waiting, .postcall #callinfo_waiting, .callactive #callinfo_waiting {
    display: none;
}

.ringing #callinfo_caller, .postcall #callinfo_caller, .callactive #callinfo_caller {
    display: block;
}


#system_info {
    float: right;
    margin-right: 30px;
    font-size: 10pt;
    color: #aaa;
}

.spacer {
    padding-right: 25px;
}




@keyframes pulse {
  from {background-color: #fff;}
  to {background-color: rgba(22, 187, 69, 0.8);}
}

@keyframes fading {
    from {opacity: 0.5;}
    to {opacity: 1;}
}