* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    /* box-sizing: border-box; */
}

html {
    background-color: #fff;
    overflow-y: auto;
    height: 100%;
}

body {
    font-family: "Poppins Regular";
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/* #container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
} */

/* #lokalvideo {
    width: 220px;
    height: 125px;
    position: fixed;
    transform: translate(-15px, 135%);
    bottom: 37%;
    right: 0;
    touch-action: none;
    user-select: none;
    z-index:15;
}

#lokalvideo:hover {
    cursor: move;
} */

.preloaderBg {
    background-image: url("../../img/conference/webrtc_bg_video.jpg?1.0.15.7");
    width: 0;
    height: 0;
    display: inline;
}

.meeting-name .being-transcribe {
    background-image: url("../../img/conference/icon.png?1.0.15.7");
    background-position: -106px -492px;
    background-repeat: no-repeat;
    height: 20px;
    vertical-align: middle;
    width: 20px;
}

.meetingWrap,
.instructionsWrap {
    bottom: 0;
    left: 0;
    min-height: 650px;
    /*min-width: 1000px;*/
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}

#meetingWrap {
    min-width: 1260px;
}

.meetingWrap {
    z-index: 1;
}

.header-in .logo {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-position: -352px -10px;
    background-repeat: no-repeat;
    border: 0 none;
    height: 28px;
    left: 20px;
    margin: 0;
    padding-right: 0;
    position: absolute;
    top: 10px;
    width: 43px;
}

.meeting-detail .container {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    height: 275px;
    z-index: 2;
    box-shadow: 4px 0 6px rgba(4, 0, 0, 0.3);
}

.meeting-detail .content {
    height: 210px;
    overflow-y: auto;
    position: relative;
    width: 100%;
    z-index: 1;
    overflow-x: hidden;
}

.undis {
    display: none;
}

.colorblue {
    color: #1f644c;
}

.colorff {
    color: #fff;
}

.colore479 {
    color: #e4e7e9;
}

.color00 {
    color: #000;
}

.color33 {
    color: #000;
}

.color66 {
    color: #666;
}

.color99 {
    color: #999;
}

.colorf0 {
    color: #f00;
}

.color2f {
    color: #1f644c;
}

.colorf3 {
    color: #23ad77;
}

.color8f {
    color: #8f8f8f;
}

.color8b2 {
    color: #8b9296;
}

.color8b1 {
    color: #8b9195;
}

.colordb {
    color: #db1010;
}

.fz12 {
    font-size: 12px;
}

.fz16 {
    font-size: 16px;
}

.fz18 {
    font-size: 18px;
}

.fz22 {
    font-size: 22px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt60 {
    margin-top: 60px;
}

.mt85 {
    margin-top: 85px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml13 {
    margin-left: 13px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml22 {
    margin-left: 22px;
}

.ml30 {
    margin-left: 30px;
}

.ml40 {
    margin-left: 40px;
}

.mr4 {
    margin-right: 4px;
}

.mr8 {
    margin-right: 8px;
}

.mr12 {
    margin-right: 12px;
}

.mb1 {
    margin-bottom: 1px;
}

.mb40 {
    margin-bottom: 40px;
}

.mh35 {
    max-height: 35px;
}

.w460 {
    width: 460px;
}

.h12 {
    height: 12px;
}

.hidden {
    visibility: hidden;
}

.pointer {
    cursor: pointer;
}

.relative {
    position: relative;
}

.ftbold {
    font-weight: bold;
}

.tcenter {
    text-align: center;
}

.inlineB {
    display: inline-block;
}

.underline {
    text-decoration: underline;
}

::-ms-clear,
 ::-ms-reveal {
    display: none;
}

.verAlignTop {
    vertical-align: top;
}

.textEllipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.divCenter {
    display: table;
    margin: 0 auto;
}

.wordWrap {
    word-wrap: break-word;
    color: #000;
}

.agendaInfo {
    width: 430px;
    overflow-wrap: break-word;
}

.meetingInfoTable {
    max-width: 630px;
    max-height: 385px;
    overflow-y: auto;
    overflow-x: hidden;
}

.addErrorTip {
    position: absolute;
    background: rgba(40, 42, 45, 0.9);
    border-radius: 1px;
    top: -28px;
    left: 0;
}

.add-error-tip {
    color: #e4e7e9;
    line-height: 14px;
    font-size: 14px;
    margin: 11px 30px 11px 12px;
    position: relative;
}

.settingTip,
.layoutTip {
    /* min-width: 148px; */
    min-width: 248px;
    padding: 6px 0;
    position: absolute;
    background: rgba(40, 42, 45, 0.90);
    color: #1f644c;
    border-radius: 2px;
    right: 16px;
}

.settingTip .option:after,
.settingTip .langBox .langOption:after {
    content: "";
    height: 1px;
    width: 90%;
    margin: 0 5%;
    background: rgba(255, 255, 255, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
}

.settingTip .option:last-child:after,
.layoutTip .option:last-child:after,
.settingTip .langOption:last-child:after {
    height: 0;
}

.settingTip .option:hover,
.layoutTip .option:hover,
.settingTip .langOption:hover {
    background-color: #1f644c;
    color: #fff;
}

.settingTip .option:hover:after,
.layoutTip .option:hover:after,
.settingTip .langOption:hover:after {
    background-color: #1f644c;
    color: #fff;
    /*width: 100%;*/
}

.settingTip .option:hover:before,
.layoutTip .option:hover:before,
.settingTip .langOption:hover:before {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #1f644c;
    color: #fff;
    top: -1px;
    left: 0;
    position: absolute;
}

.settingTip .option:active,
.layoutTip .option:active,
.settingTip .langOption:active {
    background-color: #1f644c;
    color: #fff;
}

.settingTip .option:active:after,
.layoutTip .option:active:after,
.settingTip .langOption:active:after {
    background-color: #1f644c;
    color: #fff;
}

.settingTip .option:active:before,
.layoutTip .option:active:before {
    content: "";
    height: 1px;
    width: 148px;
    background-color: #1f644c;
    color: #fff;
    top: -1px;
    left: 0;
    position: absolute;
}

.layoutTip .option:active:before {
    width: 100%;
}

.settingTip .angle {
    right: 12px;
}

.groupChatTip {
    min-width: 265px;
    max-width: 545px;
    position: absolute;
    right: 115px;
    background: rgba(40, 42, 45, 0.90);
    border-radius: 2px;
    padding: 6px 0;
    z-index: 999;
}

.groupChatTip .option:after,
.layoutTip .option:after {
    content: "";
    height: 1px;
    width: 95%;
    margin: 0 2.5%;
    background: rgba(140, 172, 202, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
}

.groupChatTip .option:last-child:after {
    height: 0;
}

.groupChatTip .option:hover {
    background-color: #1f644c;
}

.groupChatTip .option:hover:after {
    background-color: #1f644c;
}

.groupChatTip .option:hover:before {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #1f644c;
    top: -1px;
    left: 0;
    position: absolute;
}

.groupChatTip .option:active {
    background-color: #0c993a;
}

.groupChatTip .option:active:after {
    background-color: #0c993a;
}

.groupChatTip .option:active:before {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #0c993a;
    top: -1px;
    left: 0;
    position: absolute;
}

.groupChatTip .optionLine:after,
.layoutTip .optionLine:after {
    width: 100%;
    height: 2px;
    background: rgba(0, 146, 63, 0.26);
    margin: 0;
}

.groupChatTip .angle {
    right: 20px;
}

.toastTipName {
    display: inline-block;
    max-width: 500px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    height: 15px;
    margin-top: -1px;
}

.opt-stop,
.opt-mute,
.opt-unmute,
.opt-handdown,
.opt-record,
.opt-layout,
.opt-muteAttendee,
.opt-allowAttendee,
.opt-ban,
.opt-addPar,
.opt-liveStream,
.opt-tiled,
.opt-polling,
.opt-base-layout,
.opt-self-layout-one,
.opt-self-layout-two,
.opt-allowAllLayout,
.opt-subtitle,
.opt-voiceSubtitle,
.opt-lockMeeting,
.opt-QA,
.opt-shareAttendee,
.opt-allowAttendeeNum,
.opt-reqmic,
.opt-reqShare {
    /*color: #e4e7e9;*/
    /*color: #8b9296;*/
    color: #fff;
    line-height: 14px;
    font-size: 14px;
    padding: 8px 10px 9px 38px;
    position: relative;
}

.opt-allowAllLayout .layout-txt {
    display: inline-block;
    float: none;
    color: #fff;
}

.opt-allowAllLayout .layout-txt:hover {
    color: #fff;
}


/*.opt-layout{*/


/*padding: 8px 38px 9px;*/


/*}*/

.bg-optList {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    margin-top: -2px;
}

.opt-addPar .bg-optList {
    background-position: -1420px -197px;
}


/*.opt-layout .bg-optList{*/


/*background-position: -1554px -277px;*/


/*}*/


/*.opt-layout .bg-layout{*/


/*position: absolute;*/


/*right: 12px;*/


/*width: 22px;*/


/*height: 18px;*/


/*margin-top: -2px;*/


/*}*/


/*.opt-layout .bg-layout-tiled{*/


/*background-position: -1422px -344px;*/


/*}*/


/*.opt-layout .bg-layout-polling{*/


/*background-position: -1422px -387px;*/


/*}*/

.opt-record .bg-optList {
    background-position: -1488px -237px;
}

.opt-record .bg-recording {
    background-position: -1555px -237px;
}

.opt-liveStream .bg-optList {
    background-position: -1464px -197px;
}

.opt-mute .bg-optList {
    background-position: -1506px -197px;
}

.opt-unmute .bg-optList {
    background-position: -1553px -197px;
}

.opt-handdown .bg-optList {
    background-position: -1420px -237px;
}

.opt-subtitle .bg-optList {
    background-position: -1555px -276px;
}

.muteTxt-mic {
    color: #fc812f;
}

.waiting-pic {
    background: url("../../img/conference/waiting.gif?1.0.15.7") no-repeat;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
}

.bg-pic {
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
}

.bg-up {
    background-position: -963px -257px;
    width: 6px;
    height: 6px;
    display: inline-block;
}

.bg-down {
    background-position: -1019px -257px;
    width: 6px;
    height: 6px;
    display: inline-block;
}

.bg-iconDown {
    background-position: -626px -624px;
    width: 26px;
    height: 30px;
}

.bg-selectList {
    width: 10px;
    height: 6px;
    display: inline-block;
    margin: 12px 6px 0 0;
}

.bg-selDown {
    background-position: -249px -361px;
}

.bg-selUp {
    background-position: -204px -361px;
}

.bg-mute {
    background-position: -146px -561px;
}

.opt-mute-l:hover .bg-mute {
    background-position: -202px -561px;
}

.bg-unmute {
    background-position: -37px -561px;
}

.opt-unmute-l:hover .bg-unmute {
    background-position: -91px -561px;
}

.bg-handdown {
    background-position: -37px -802px;
}

.opt-handdown-l:hover .bg-handdown {
    background-position: -91px -802px;
}

.bg-allowview {
    background-position: -37px -649px;
}

.opt-allpro-l:hover .bg-allowview {
    background-position: -91px -649px;
}

.opt-allpronum-l:hover .bg-allowview {
    background-position: -91px -649px;
}

.bg-prohibit {
    background-position: -145px -649px;
}

.opt-allpro-l:hover .bg-prohibit {
    background-position: -201px -649px;
}

.opt-allpronum-l:hover .bg-prohibit {
    background-position: -201px -649px;
}

.bg-addpar {
    background-position: -143px -514px;
}

.opt-addpar-l:hover .bg-addpar {
    background-position: -199px -514px;
}

.bg-ban {
    background-position: -146px -463px;
}

.bg-allow {
    background-position: -38px -463px;
}

.bg-logo {
    background-position: -932px -137px;
    width: 130px;
    height: 95px;
    padding-bottom: 5px;
}

.popup-box img {
    max-width: 150px;
    display: block;
    margin: 0 auto;
    padding-bottom: 5px;
}

.bg-banuncheck,
.bg-banchecked {
    width: 18px;
    height: 18px;
}

.bg-banuncheck {
    background-position: -202px -692px;
}

.bg-banchecked {
    background-position: -202px -729px;
}

.bg-blue {
    background-position: -38px -125px;
    width: 24px;
    height: 28px;
}

.bg-blue:hover {
    background-position: -92px -125px;
}

.bg-unckeck {
    background-position: -1114px -499px;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 2px;
}

.bg-checked {
    background-position: -1114px -450px;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 2px;
}

.bg-link {
    background-position: -877px -657px;
    width: 346px;
    height: 35px;
    display: inline-block;
    margin: 20px 0 0 35px;
}

.bg-beat {
    background-position: -1156px -20px;
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    top: -85px;
}

.bg-icon-hand {
    background-position: -202px -789px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-bottom: 15px;
    margin-left: -10px;
    cursor: pointer;
    display: none;
}


/**/

.shareType-box .alert-title-white p {
    font-size: 16px;
    font-weight: normal;
}

.bg-sendfailed {
    background-position: -293px -356px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    display: block;
}

.bg-promptIcon {
    background-position: -1056px -855px;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.bg-closeIcon {
    background-position: -90px -407px;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
}

.network-style .bg-closeIconFF {
    background-position: -571px -494px;
    width: 40px;
    height: 60px
}

.network-style .bg-closeIconFF:hover {
    background-position: -627px -494px;
}

.network-style .bg-closeIconFF:active {
    background-position: -683px -494px;
}

.bg-closePlugIcon,
.bg-closeMutedIcon {
    background-position: -814px -772px;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
}

.bg-closeIcon:hover {
    background-position: -143px -407px;
}

.bg-closePlugIcon:hover,
.bg-closeMutedIcon:hover {
    background-position: -867px -772px;
}

.bg-closeIcon:active {
    background-position: -192px -407px;
}

.bg-closePlugIcon:active,
.bg-closeMutedIcon:active {
    background-position: -916px -772px;
}

.bg-upSpeed {
    background-position: -148px -605px;
    width: 6px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
}

.bg-downSpeed {
    background-position: -204px -605px;
    width: 6px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
}

.bg-errMsg {
    background-position: -263px -20px;
    width: 24px;
    height: 24px;
    margin-left: 24px;
}

.bg-hostIcon {
    background-position: -495px -92px;
    width: 17px;
    height: 17px;
    position: absolute;
    left: 23px;
    top: 18px;
}

.bg-support {
    background-position: -38px -607px;
    width: 20px;
    height: 15px;
    display: block;
    margin: auto;
}

.bg-unsupport {
    background-position: -92px -607px;
    width: 15px;
    height: 15px;
    display: block;
    margin: auto;
}

.bg-noPreview,
.bg-failPreview {
    width: 44px;
    height: 50px;
    display: block;
    position: absolute;
    top: 72px;
    left: 160px;
}

.bg-noPreview {
    background-position: -32px -685px;
}

.bg-failPreview {
    background-position: -828px -1340px;
}

.bg-refuseAll {
    background-position: -781px -77px;
    width: 352px;
    height: 39px;
    display: block;
    margin: 60px auto 30px;
}

.bg-refuseOne {
    background-position: -781px -20px;
    width: 346px;
    height: 36px;
    display: block;
    margin: 20px auto 0;
}

.bg-cameraBeat {
    background-position: -1156px -20px;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
}

.bg-cameraAlpha {
    background-position: -1328px -627px;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
}

.bg-record {
    background-position: -764px -789px;
    width: 14px;
    height: 15px;
}

.video-close {
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    background-position: -237px -407px;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.video-close:hover {
    background-position: -293px -407px;
}

.video-close:active {
    background-position: -715px -718px;
}

.recordState {
    margin: 21px 8px 0 0;
}

.detail-box {
    min-width: 160px;
    padding: 7px 12px;
    border-radius: 1px;
    color: #fff;
    line-height: 24px;
    position: absolute;
    word-wrap: break-word;
    z-index: 999;
    background: rgba(40, 42, 45, 0.9);
}

.plugin-box,
.network-box,
.muted-tip-box {
    line-height: 22px;
    word-wrap: break-word;
    z-index: -2;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(4, 0, 0, 0.3);
    position: absolute;
    top: -34px;
    left: 20px;
}

.network-box i,
.detail-box i {
    /*background-color:#fff;*/
    border-radius: 2px;
    bottom: 0;
    left: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.network-box b,
.detail-box b,
.desktop-setting .muted-tip-style b {
    border-top: 6px solid rgba(40, 42, 45, 0.90);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    bottom: -6px;
    width: 0;
    height: 0;
    position: absolute;
}

.video-net-profile b {
    background-position: -112px -304px;
}


/*.desktop-setting .muted-tip-style b{*/


/*background-position: -785px -748px;*/


/*width: 10px;*/


/*height: 10px;*/


/*position: absolute;*/


/*bottom: -10px;*/


/*}*/

.plugin-box div,
.network-box div,
.detail-box div,
.muted-tip-box div {
    font-weight: normal;
    position: relative;
    z-index: 2;
    line-height: 24px;
}

.detail-box>div {
    margin-right: 36px;
}

.box-plug,
.tip-plug {
    text-decoration: underline;
    cursor: pointer;
    color: #dfe4e8;
    font-size: 12px;
    margin-top: 10px;
}

.tip-plug {
    margin-top: 0;
    text-align: center;
}

.detail-box .box-plug-icon,
.network-box .tip-plug-icon {
    width: 18px;
    height: 16px;
    bottom: 0;
    position: relative;
    background-position: -38px -1023px;
    border: none;
}

.detail-box .net-lost-show {
    width: 40px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 0;
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
}

.net-lost-show:hover {
    background: rgba(73, 117, 163, 0.3);
}

.net-lost-show:active {
    background: rgba(0, 0, 0, 0.4);
}

.detail-box .net-lost-show b {
    border: none;
    position: absolute;
    top: 28px;
    left: 8px;
    width: 24px;
    height: 12px;
    background-position: -38px -1068px;
}


/*.stream-server{*/


/*padding-right: 20px;*/


/*}*/


/*.detail-box .net-lost-show{*/


/*position: absolute;*/


/*width: 24px;*/


/*height: 24px;*/


/*right: -5px;*/


/*top:0;*/


/*background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");*/


/*background-position: -199px -947px;*/


/*cursor: pointer;*/


/*}*/

.plugin-style,
.network-style,
.muted-tip-style {
    padding: 3px 32px 3px 12px;
    background-color: rgba(40, 42, 45, 0.9);
    color: #fff;
    border-radius: 2px;
    font-size: 14px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.12);
}

.network-style {
    background-color: rgba(212, 88, 88, 0.95);
}

.plugin-style {
    background-color: rgba(0, 0, 0, 0.65);
    color: #e4e7e9;
}

.pluginInfo,
.networkInfo,
.otherLink {
    cursor: pointer;
    text-decoration: underline;
}

.otherLink {
    color: #fff;
    margin-left: 40px;
}

.net-other-link {
    cursor: pointer;
    z-index: 3;
    float: right;
    /*margin-left: 60px;*/
}

.detail-box b {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0);
}

.commPopup,
.greyCommPopup,
.wbCommPopup {
    position: fixed;
    top: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0) !important;
    background-color: #000;
    filter: alpha(opacity=0);
}

.wbCommPopup {
    z-index: 850;
}

.greyCommPopup {
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.2) !important;
    background-color: #000;
    filter: alpha(opacity=20);
}

.resolution-box,
.popup-box,
.hostMeeting-box,
.addParticipant-box,
.reachedMaximum-box,
.addRecord-box,
.addFailed-box,
.cameraPreview-box,
.refuseCameraAll-box,
.refuseCameraOne-box,
.deviceInfo-box,
.record-box,
.paneList-box,
.requestCamera-box,
.kick-box,
.deny-box,
.exit-box,
.meetingDetail-box,
.fail-tip-box,
.forbid-device-box,
.mic-loud-box,
.readyStart-box,
.main-polling-box,
.other-living-box,
.upload-view-box,
.subtitle-btn-box,
.subtitle-set-box,
.ipvt-living-box,
.ipvt-living-waiting-box {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 998;
    background: rgba(0, 0, 0, .95);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(9, 2, 4, .45);
    min-width: 360px;
    max-width: 660px;
}


/*break-word*/

.kick-box .alert-content-top0 {
    word-break: break-all;
    word-break: break-word;
}

.paneList-box {
    width: 500px;
}

.paneList-box .alert-title-white p {
    margin: 0 40px;
}

.paneList-box .alert-title-white span {
    max-width: 180px;
    height: 24px;
    line-height: 20px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.exit-box .alert-bottom span {
    margin: 0 auto;
    display: block;
}

.exit-box .alert-bottom span:last-child {
    display: inline-block;
}

.btn-clearSpace,
.btn-updatePlan {
    min-width: 86px;
    padding: 0 15px;
    margin: 0 10px;
}

.cameraTipText {
    position: absolute;
    bottom: 0;
    width: 220px;
    background-color: rgba(40, 42, 45, .9);
}

.host {
    height: 36px;
    min-width: 182px;
    padding: 0 10px;
    background-color: #1f644c;
    border: 1px solid #1f644c;
    border-radius: 10px;
    color: #fefefe;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.host:hover {
    background-color: #12c24c;
    border: 1px solid #12c24c;
}

.host:active {
    background-color: #12584d;
    border: 1px solid #12584d;
}

.host-disabled {
    /* color: #555;
    background-color: #ccc;
    border: 1px solid #ccc;
    cursor: default; */
    color: #5ab883;
    background-color: transparent;
    border: 1px solid #5ab883 !important;
    border-radius: 10px;
    cursor: default;
    padding: 10px;
    font-weight: bold;
}

.host.host-disabled:hover {
    background-color: transparent !important;
}

/* .host-disabled:hover {
    background-color: #ccc;
    border: 1px solid #ccc;
    color: #333;
} */

.pwdInput {
    width: 336px;
    height: 22px;
    padding: 6px 10px;
    border-radius: 2px;
    border: 1px solid #c0bdbe;
    margin: 2px 26px 0;
}

.pwdError {
    border: 1px solid #f00;
}

.errorMsg {
    height: 20px;
    padding: 5px 0 0 24px;
    color: red;
}

.opt-icon {
    float: right;
}

.optTab {
    /*width:180px;*/
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    padding: 1px;
    position: absolute;
    top: 33px;
    right: 15px;
    z-index: 9;
    border-radius: 2px;
}

.optList {
    border: 1px solid #fff;
    color: #333;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
}

.speakerOption.disabled,
.focusOption.disabled {
    pointer-events: none;
    color: #ccc;
}

.parList,
.parListmove {
    position: relative;
    border: 1px solid transparent;
}

.optList:hover,
.parList:hover {
    background-color: #f7f9f9;
    border: 1px solid #f7f9f9;
}

.mCustomScrollBox,
.mCSB_container {
    overflow: visible !important;
}

.participant-container .mCustomScrollBox {
    overflow: hidden !important;
}

.btn-blue {
    background-color: #1f644c;
    /*border:1px solid #1f644c;*/
    color: #ffffff;
    line-height: 32px;
    font-size: 16px;
    border-radius: 8px;
}

.btn-blue:hover {
    background-color: #12584d;
    cursor: pointer;
}

.btn-blue:active {
    background-color: #12584d;
    cursor: pointer;
}

.btn-blue-disabled,
.btn-blue-disabled:hover,
.btn-blue-disabled:active {
    background-color: #aeaeae;
    cursor: default;
    color: #fff;
}

.msgList {
    padding: 0 8px;
    max-width: 202px;
    position: relative;
}

.msg-self-group,
.msg-self-private {
    background-color: #90EE90;
    margin: 0 10px 0 0;
    float: right;
    border: 1px solid #90EE90;
    border-radius: 2px;
}

.msg-others-group,
.msg-others-private {
    background-color: #fff;
    float: left;
    border: 1px solid #dcdedf;
    border-radius: 2px;
}

.msg-others-workgroup {
    background-color: #d1dbe5;
    float: left;
    border: 1px solid #c5cfd8;
    border-radius: 2px;
}

.msg-num,
.sr-msg-num {
    position: absolute;
    top: -79px;
    right: 15px;
    color: #fff;
    background-color: #12584d;
    border: 1px solid #12584d;
    padding: 3px 3px;
    border-radius: 14px;
    width: 24px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(8, 1, 3, .2);
}

.msg-arrow,
.sr-msg-arrow {
    width: 0;
    height: 0;
    border-top: 5px solid #12584d;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: -51px;
    right: 26px;
}

.sr-msg-num {
    top: auto;
    bottom: 9px;
}

.sr-msg-arrow {
    top: auto;
    bottom: 0px;
}

.toSend:hover,
.toPanelist:hover {
    color: #12584d;
    cursor: pointer;
    text-decoration: underline;
}

.select-list {
    width: 295px;
    height: 28px;
    padding-left: 5px;
    line-height: 28px;
    background-color: rgb(255, 255, 255);
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    position: absolute;
    top: -41px;
    right: 27px;
    z-index: 17;
}

.toSend-list .colorff {
    color: #fff;
}

.chat-separate {
    height: 1px;
    background: #ddd;
    margin: 1px 5px;
    pointer-events: none;
}

.par-selected {
    border: 1px solid #12584d;
    background-color: rgba(35, 173, 119, 0.17);
}

.toSend-list {
    width: 325px;
    line-height: 28px;
    position: absolute;
    right: 2px;
    z-index: 18;
    padding: 1px;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    max-height: 171px;
    overflow: auto;
}

.toSend-list-arrow {
    width: 0;
    height: 0;
    border-top: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: -41px;
    right: 135px;
    z-index: 20;
}

.toSend-list li {
    padding-left: 5px;
}

.toSend-list li:hover {
    color: #fff;
    background-color: #12584d;
}

.toSend-list li:active {
    color: #fff;
    background-color: #1f644c;
}

.par-current {
    max-width: 135px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 3px 0 2px;
}

.nameText {
    /*max-width:220px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.groupchatpar,
.srHisUser {
    /*max-width:135px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top;
}

.privateName {
    max-width: 69px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top;
}

.toText {
    display: inline-block;
}

.help:hover,
.opt-unmute:hover {
    border-radius: 0;
}

.help,
.about,
.support,
.uploadBtn,
.videoSettingBtn,
.audioSettingBtn,
.resolutionBtn,
.meetDetail,
.micLoudBtn,
.cameraSetBtn,
.langChange,
.langOption {
    color: #fff;
    line-height: 14px;
    height: 14px;
    font-size: 14px;
    padding: 8px 10px 9px;
    position: relative;
}

.uploadBtn span {
    float: right;
    font-size: 12px;
    color: #8b9296;
    margin-right: 2px
}

.reportQueLog {
    color: #1f644c;
    cursor: pointer;
    display: table;
    margin: 0 auto;
    /*padding-left: 8px;*/
    padding-right: 14px;
}

.reportQueLog:hover {
    text-decoration: underline;
}

.resolutionBtn span,
.lay-switch-txt {
    float: right;
    font-size: 12px;
    color: #8b9296;
    margin-right: 2px;
    padding-left: 8px
}

.opt-base-layout .lay-switch-txt {
    color: #fff;
}

.opt-layout .lay-switch-txt.enable {
    color: #1f644c;
    display: block;
}

.opt-layout .lay-switch-txt.disable {
    color: #8b9296;
    display: none;
}

.opt-layout.disable .lay-switch-txt.enable,
.opt-layout.forbid .lay-switch-txt.enable {
    display: none;
}

.opt-layout.disable .lay-switch-txt.disable,
.opt-layout.forbid .lay-switch-txt.disable {
    display: block;
}

.resolutionBtn div,
.layout-txt {
    float: left;
}

.topRadius {
    border-radius: 4px 4px 0 0;
}

.about,
.about:hover,
.bottomRadius {
    border-bottom: none;
}

.option,
.langOption {
    /*background-color:#eaf6ff;*/
    cursor: pointer;
}

.langBox {
    display: none;
}

.opt-addPar-disable {
    color: #8b9296;
}

.opt-addPar-disable:hover {
    color: #8b9296;
    cursor: default;
}

.add-error-icon {
    background-position: -1169px -416px;
    width: 14px;
    height: 14px;
    display: none;
    vertical-align: top;
    /*position: absolute;
    top: 0;
    right: -18px;*/
}

.server-style {
    border-radius: 4px;
}

.tip-text {
    padding: 7px 12px;
    background-color: #fff;
    color: #fff;
    border-radius: 2px;
}

.showInfo {
    display: block;
    width: 6px;
    height: 30px;
    position: absolute;
    top: 1px;
    left: 172px;
}

.audioUpVal,
.videoUpVal,
.presentVideoUpVal,
.videoReUpVal,
.presentReUpVal {
    display: inline-block;
    min-width: 55px;
}

::-webkit-input-placeholder {
    color: #999;
}

::-moz-placeholder {
    color: #999;
}

:-ms-input-placeholder {
    color: #999;
}

input[type="text"],
input[type="password"] {
    appearance: none;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari、Chrome */
}

.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rotateTime {
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.addParticipant-box {
    width: 720px;
}

.participant-tip {
    width: 618px;
    margin: 0 21px;
}

.alertForm .joiner-box {
    float: none;
    width: 610px;
    height: 100px;
    padding: 2px 2px 2px 5px;
    margin: 15px auto 8px;
    border: 1px solid #c0bdbe;
    border-radius: 5px;
    background: transparent;
    cursor: text;
    position: relative;
    overflow: hidden;
}

.alertForm .joiner-box .mCSB_container {
    overflow: hidden !important;
}

.alertForm .joiner-box .overview {
    width: 100%;
    height: 100px;
    overflow-y: auto;
}

.alertForm .joiner-box .joiner-input-box {
    float: left;
    height: 22px;
    line-height: 22px;
    padding: 2px;
    max-width: 350px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.alertForm .joiner-box .placeholder-box {
    vertical-align: top;
}

.alertForm .joiner-box .placeholder-box .placeholder-txt {
    line-height: 22px;
    text-indent: 0;
}

.alertForm .joiner-item {
    float: left;
    max-width: 350px;
    height: 20px;
    line-height: 22px;
    margin: 2px;
    padding: 0 22px 2px 10px;
    border-radius: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    position: relative;
    background-color: #f2f9fe;
    border: 1px solid #1f644c;
}

.alertForm .joiner-item span {
    white-space: nowrap;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .alertForm .joiner-item {
        white-space: normal;
    }
}

.alertForm .joiner-item span.del {
    position: absolute;
    top: 5px;
    right: 4px;
    cursor: pointer;
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    display: none;
}

.alertForm .joiner-error span.del {
    background-position: -38px -850px;
    display: block;
}

.alertForm .joiner-item:hover span.del {
    background-position: -93px -850px;
    display: block;
}

.alertForm .joiner-item .view-main {
    color: #666;
}

.alertForm .joiner-error {
    background: #ffebeb;
    border-color: #edb9b9;
}

.alertForm .joiner-error .view-main {
    color: #d63200;
}

.alertForm input.input-style-one {
    width: 350px;
    height: 18px;
    line-height: 18px;
    padding: 2px 0;
    border: 1px solid transparent;
    background: transparent;
    position: relative;
    color: #fff;
}

.alertForm .editable-txt {
    visibility: hidden;
}

.alertForm input.input-style-one:focus {
    border: 1px solid transparent;
}

.alertForm input.input-style-one.error,
input.input-style-one.error:focus {
    color: #C93538;
    border: 1px solid #fff;
}

.alertForm .joiner-item:hover {
    background-color: #1f644c;
    border: 1px solid #1f644c;
}

.alertForm .joiner-item:hover span {
    color: #fff;
}

.alertForm .joiner-error:hover {
    background-color: #d63200;
    border: 1px solid #d63200;
}

.parBox {
    position: absolute;
    right: 12px;
    top: -32px;
    background-color: #fff;
}

.addressBookEntry {
    position: absolute;
    left: 20px;
    cursor: pointer;
    color: #23ad77;
    display: none;
}

.addressBookEntry .address-arrow {
    width: 16px;
    height: 16px;
    background-position: -201px -357px;
}

.addressBookEntry.hide-address .address-arrow {
    background-position: -245px -357px;
}

.select-inviteeListBox {
    position: relative;
    margin: 10px 20px 5px;
    background-color: transparent;
    border-radius: 5px;
    /* padding: 10px 3px; */
    /* padding-bottom: 10px; */
    color: #fff;
    display: none;
}

.select-invitee-tab {
    overflow: hidden;
    border-bottom: 1px solid rgba(254, 246, 250, 0.3);
    background-color: transparent;
    margin-bottom: 5px;
}

.select-invitee-tab .contacts-tab {
    float: left;
    padding: 0 4px;
    height: 34px;
    line-height: 34px;
    margin: 0 10px;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-weight: bold;
}


/*.select-invitee-tab .contacts-tab.active {*/


/*!* border-bottom: 3px solid #2da2d7; *!*/


/*color: #2da2d7;*/


/*}*/

.contacts-tab-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 1px;
    background-color: #12584d;
    display: none;
}

.contacts-tab.active .contacts-tab-line {
    display: block;
}

.font666 {
    color: #999999;
}

.fontfff {
    color: #fff;
}

.contactsContent.inviteenum {
    height: 186px;
    overflow: hidden;
    padding-right: 2px;
}

.contactsContent {
    overflow: hidden;
    display: none;
}

.contactsContent.active {
    display: block;
}

.contactTree {
    height: 181px;
    width: 36%;
    overflow: hidden;
    float: left;
    border-right: 1px solid rgba(184, 196, 200, 0.3);
}

.ztree li {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 30px;
    text-align: left;
    white-space: nowrap;
    outline: 0;
    position: relative;
}

.contactListBox {
    overflow: hidden;
}

.contactsContent .control-box {
    /*float: left;*/
    display: inline-block;
    width: 100%;
    height: 34px;
    line-height: 0;
    padding: 0 10px;
    background-color: #f9f9f9;
}

.contactList {
    height: 152px;
    float: left;
    width: 100%;
    /*overflow-y: auto;*/
    overflow: hidden;
}

.select-inviteeListBox .inviteenum li {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #333;
    border-radius: 2px;
    /*cursor: pointer;*/
}

.select-inviteeListBox .inviteenum li:hover {
    background-color: #12584d;
}

.select-inviteeListBox .inviteenum li .checkbox {
    float: left;
    height: 18px;
    margin-top: 6px;
    margin-right: 5px;
    line-height: 18px;
}

.select-inviteeListBox span.autocomplete-email {
    display: inline-block;
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
}

#inviteContactsTree .mCSB_scrollTools {
    z-index: 100;
}

.deviceInfo-box tr,
.deviceInfo-box td {
    border: 1px solid #c0bdbe;
    height: 46px;
}

.deviceInfo-box tr:first-child {
    background-color: #d8ebff;
}

.separateTab {
    border-top: 46px #d8ebff solid;
    border-left: 166px #fff solid;
    position: relative;
}

.deviceTab {
    position: absolute;
    top: -44px;
    left: -88px;
    width: 80px;
}

.functionTab {
    position: absolute;
    left: -157px;
    top: -23px;
}

.cdefault {
    cursor: default;
}

.alertSharing {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 380px;
    padding: 11px 24px;
    z-index: 999;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(9, 2, 4, .45);
    word-wrap: break-word;
}

.messageTitle {
    margin: 10px 15px 0 10px;
}

.sendTime {
    margin: 2px 0 0 10px;
}

.meetingDetailTitle {
    max-width: 550px;
    display: inline-block;
}

.meetingTime {
    color: #f9fafc;
    padding: 0 10px;
    border-radius: 20px;
    background: rgba(100,100,100,0.5);
    margin-right: 12px;
}

.posisi-slide-partisipan{
    font-size:11pt;
    color: #f9fafc;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(100,100,100,0.5);
    margin-right: 12px;
}

.meetingLock {
    width: 16px;
    height: 16px;
    background-position: -1574px -1214px;
    margin-top: 20px;
    margin-right: 16px;
    display: none;
}

.recordList,
.failedList {
    padding: 0 10px;
    max-height: 425px;
    overflow: auto;
}

.failedList {
    margin-top: 10px;
}

.recordItem,
.failedItem {
    padding: 15px 10px;
    border-bottom: 1px solid #444;
}

.accountName {
    max-width: 250px;
}

.addRecord {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #23ad77;
    /*max-width: 105px;*/
    text-decoration: underline;
    vertical-align: bottom;
}

.maxRecord {
    display: none;
    position: relative;
    text-align: center;
    height: 20px;
    width: 100%;
    margin: -15px auto 30px;
}

.maxAddRecord {
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
}

span.bg-maxRecordError {
    background-position: -1169px -416px;
    width: 15px;
    height: 15px;
    margin: 0;
    position: relative;
    display: inline-block;
}

.parChatTitle,
.participantNum {
    color: #1f644c;
    font-size: 16px;
    font-weight: bold;
}

.parTilEllip {
    float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/**/


/*.unreadMsgNum {*/


/*min-width: 12px;*/


/*height: 12px;*/


/*line-height: 12px;*/


/*padding: 3px;*/


/*color: #fff;*/


/*background-color: #ff3b30;*/


/*position: absolute;*/


/*top: 56px;*/


/*right: 4px;*/


/*font-size: 12px;*/


/*border-radius: 10px;*/


/*cursor: pointer;*/


/*}*/

.unreadMsgNum {
    position: absolute;
    width: 38px;
    height: 16px;
    left: 2px;
    top: 36px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    color: #fff;
}

.tabIcon {
    width: 40px;
    height: 144px;
    margin-top: -44px;
    text-align: center;
    position: relative;
    /*background: url(../../img/conference/webrtc_icon.png) no-repeat -1731px -1216px;*/
    /*-webkit-backdrop-filter: blur(10px);*/
    /*backdrop-filter: blur(10px);*/
    /*opacity: 0.65;*/
}

.tabIcon:before {
    content: " ";
    width: 40px;
    height: 144px;
    display: block;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat -1731px -1216px;
    opacity: 0.65;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.tabIcon.chatWarn:before {
    background-position: -1658px -1216px;
    opacity: 1
}

.tabMenu .tabIcon:nth-child(1) {
    z-index: 9;
}

.tabMenu .tabIcon:nth-child(2) {
    z-index: 8;
}

.tabMenu .tabIcon:nth-child(3) {
    z-index: 7;
}

.tabMenu .tabIcon.active {
    z-index: 10;
    /*background: url(../../img/conference/webrtc_icon.png) no-repeat -1807px -1216px;*/
    /*opacity: 0.9;*/
}

.tabMenu .tabIcon.active .unreadMsgNum {
    display: none;
}

#dialog.expand .tabMenu .tabIcon.active:before {
    content: " ";
    width: 40px;
    height: 144px;
    display: block;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat -1807px -1216px;
    opacity: 0.95;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}


/**/

.participantList.undis {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: block;
}

.tabMenu {
    position: absolute;
    top: 50%;
    transform: translate(-38px, -50%);
    /*background: rgba(235, 239, 241, 0.95);*/
}

.dialogMenu {
    position: absolute;
    /*width: 44px;*/
    top: 0;
    bottom: 0;
    left: 0;
    /*border-right: 1px solid #c0c1c1;*/
    background: #fff;
    box-shadow: -4px 0 4px 0 rgba(0, 0, 0, 0.1);
}

.workGroupTab,
.normalUserTab {
    padding: 4px 4px 4px 10px;
    line-height: 16px;
    height: 16px;
    font-weight: bold;
    color: #4f5967;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.workGroupTab {
    /*border-top: 1px solid rgba(205, 211, 216, 0.3);*/
}

.bg-newpic {
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
}

.bg-participant {
    background-position: -34px 10px;
    width: 36px;
    height: 86px;
    display: inline-block;
    position: absolute;
    top: 30px;
    left: 2px;
}


/*.bg-participant-active {*/


/*background-position: -88px 12px;*/


/*}*/

.bg-handIcon {
    background-position: -146px -802px;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 55px;
    left: 18px;
    cursor: pointer;
}

.tabUserCount {
    position: absolute;
    width: 38px;
    height: 16px;
    left: 0;
    top: 37px;
    font-weight: bold;
    text-align: center;
    color: #dfe4e8;
}

#dialog.expand .tabMenu .tabIcon.active .tabUserCount {
    color: #1f644c;
}

.bg-groupChat {
    background-position: -141px 12px;
    width: 36px;
    height: 86px;
    display: inline-block;
    position: absolute;
    top: 29px;
    left: 2px;
}

.tabIcon.chatWarn .bg-groupChat {
    background-position: -300px 12px;
}


/*.bg-groupChat-active {*/


/*background-position: -197px 12px;*/


/*}*/

#dialog.expand .bg-participant-active,
#dialog.expand .bg-groupChat-active,
#dialog.expand .bg-speechReco-active {
    background-position: -1904px -1180px;
}

#dialog.expand .tabIcon.active .tabUserCount {
    display: none;
}

.bg-addFailed {
    background-position: -263px -20px;
    width: 22px;
    height: 22px;
    display: inline-block;
    position: relative;
    top: 4px;
    margin-right: 10px;
}

.logoAnimation {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -110px;
    margin-left: -91px;
}

.bg-enter {
    width: 32px;
    height: 33px;
    display: block;
    position: absolute;
    top: 1px;
    right: 0;
    cursor: pointer;
}

.bg-enter-gray {
    background-position: -360px -777px;
}

.bg-enter-blue {
    background-position: -413px -777px;
}

.logo-text {
    color: #fff;
    font-size: 42px;
    margin-left: -20px;
}

.start-meeting-text {
    color: transparent;
    font-size: 42px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.logo-item {
    margin-left: -12px;
}

.joinMeeting {
    background: url("../../img/conference/webrtc_video_loading0000.gif?1.0.15.7") no-repeat;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 6px;
    margin-left: -30px;
    z-index: 999;
    /* animation: loading 1.5s linear infinite; */
}


/*svg{
    width:220px;
    height:80px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:20px;
    margin-left:-110px;
}
@keyframes gradient{
    0%{fill:url(#text-gradient1);}
    20%{fill:url(#text-gradient2);}
    40%{fill:url(#text-gradient3);}
    60%{fill:url(#text-gradient4);}
    80%{fill:url(#text-gradient5);}
    100%{fill:url(#text-gradient6);}
}*/

.join-logo {
    background: url("../../img/conference/join_logo.png?1.0.15.7") no-repeat;
    width: 184px;
    height: 120px;
}

.oem-start-logo {
    width: 184px;
    height: 120px;
    text-align: center;
}

.start-meeting-logo {
    width: 184px;
    height: 120px;
}

.oem-start-logo .start-meeting-logo {
    max-width: 184px;
    width: auto;
}

.join-logo-0 {
    background-position: -33px -25px;
}

.join-logo-1 {
    background-position: -281px -25px;
}

.join-logo-2 {
    background-position: -529px -25px;
}

.join-logo-3 {
    background-position: -776px -25px;
}

.join-logo-4 {
    background-position: -1023px -25px;
}

.join-logo-5 {
    background-position: -1270px -25px;
}

.join-logo-6 {
    background-position: -1517px -25px;
}

.join-logo-7 {
    background-position: -1764px -25px;
}

.join-logo-8 {
    background-position: -2011px -25px;
}

.join-logo-9 {
    background-position: -33px -209px;
}

.join-logo-10 {
    background-position: -281px -209px;
}

.join-logo-11 {
    background-position: -529px -209px;
}

.join-logo-12 {
    background-position: -776px -209px;
}

.join-logo-13 {
    background-position: -1023px -209px;
}

.join-logo-14 {
    background-position: -1270px -209px;
}

.join-logo-15 {
    background-position: -1517px -209px;
}

.join-logo-16 {
    background-position: -1764px -209px;
}

.chrome-autoplay-box {
    position: absolute;
    top: 50%;
    margin-top: 120px;
    width: 100%;
}

.chrome-autoplay-tip {
    max-width: 865px;
    margin: 0 auto;
    font-size: 24px;
    color: #000;
}

.chrome-autoplay-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-position: -1247px -1214px;
    margin-right: 6px;
}

.autoplay-mask,
.chrome-autoplay-mask {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    display: none;
}


/*.chrome-autoplay-mask{*/


/*display: block;*/


/*}*/

.autoplay-mask {
    background-color: rgba(0, 0, 0, 0.6);
}

.autoplay-title {
    position: relative;
    margin-top: 16vh;
    text-align: center;
    font-size: 24px;
}

.autoplay-body {
    font-size: 18px;
    width: 1100px;
    height: 266px;
    margin: 48px auto;
    position: relative;
    text-align: left;
}

.auto-polling-show {
    width: 1030px;
    height: 266px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.autoplay-polling {
    width: 2080px;
    position: absolute;
    left: 0;
    transition: left 0.6s ease-in-out;
}

.autoplay-one,
.autoplay-two {
    width: 1040px;
    float: left;
    height: 266px;
    position: relative;
}

.auto-one-text,
.auto-two-text {
    width: 275px;
    margin: 0 48px;
    float: left;
    font-size: 18px;
    line-height: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.auto-one-title,
.auto-two-title {
    color: #1f644c;
    font-size: 24px;
    margin-bottom: 14px;
}

.autoplay-left,
.autoplay-right {
    position: absolute;
    width: 30px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.autoplay-left {
    left: 0;
    background-position: -1301px -447px;
}

.autoplay-right {
    right: 0;
    background-position: -1480px -447px;
}

.autoplay-left:active {
    background-position: -1358px -447px;
}

.autoplay-right:active {
    background-position: -1547px -447px;
}

.auto-one-img {
    background: url("../../img/conference/starting_meeting_safari_tips_step_01.png?1.0.15.7");
}

.auto-one-img,
.auto-two-img {
    position: absolute;
    top: 0;
    left: 372px;
    width: 626px;
    height: 266px;
}

.auto-two-img {
    background: url("../../img/conference/starting_meeting_safari_tips_step_02.png?1.0.15.7");
}

.autoplay-url {
    color: #ffffff;
    position: absolute;
    top: 18px;
    left: 102px;
}

.autoplay-reload {
    height: 32px;
    min-width: 180px;
    padding: 0 10px;
    background-color: #1f644c;
    border: 1px solid #1f644c;
    border-radius: 2px;
    color: #fefefe;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    text-align: center;
}

.autoplay-reload:hover {
    background-color: #23ad77;
    cursor: pointer;
}

.autoplay-left-disable {
    background-position: -1239px -447px;
    pointer-events: none;
}

.autoplay-right-disable {
    background-position: -1414px -447px;
    pointer-events: none;
}

.waiting-logo {
    background: url("../../img/conference/waiting_logo.png?1.0.15.7") no-repeat;
    width: 120px;
    height: 80px;
    margin: 0 auto 20px;
}

.waiting-logo-0 {
    background-position: -30px -23px;
}

.waiting-logo-1 {
    background-position: -204px -23px;
}

.waiting-logo-2 {
    background-position: -378px -23px;
}

.waiting-logo-3 {
    background-position: -552px -23px;
}

.waiting-logo-4 {
    background-position: -30px -138px;
}

.waiting-logo-5 {
    background-position: -204px -138px;
}

.waiting-logo-6 {
    background-position: -378px -138px;
}

.waiting-logo-7 {
    background-position: -552px -138px;
}

.waiting-logo-8 {
    background-position: -30px -252px;
}

.waiting-logo-9 {
    background-position: -204px -252px;
}

.waiting-logo-10 {
    background-position: -378px -252px;
}

.waiting-logo-11 {
    background-position: -552px -252px;
}

.participant-arrow,
.groupChat-arrow,
.speechReco-arrow {
    background-position: -1169px -379px;
    width: 15px;
    height: 7px;
    position: absolute;
    bottom: -1px;
}

.participant-arrow {
    left: 62px;
}

.groupChat-arrow {
    left: 223px;
}


/*.record-btn{*/


/*display: none;*/


/*}*/

span.bg-recordError {
    background-position: -146px -1500px;
    width: 20px;
    height: 16px;
    margin: 0;
    padding: 0;
    /*position: absolute;*/
    /*top: 23px;*/
    /*left: 23px;*/
    /* display: inline-block; */
    display: none;
    vertical-align: middle;
}

span.bg-recordError.errFlag {
    background-position: -200px -1500px;
}

.desktop-setting b {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    height: 62px;
    width: 62px;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}


/**/


/*.setting-center .mic-sound-icon{*/


/*background-image: url("../../img/conference/mic_sound_mic.png?1.0.15.7");*/


/*position: absolute;*/


/*width: 34px;*/


/*height: 34px;*/


/*top: 12px;*/


/*left: 14px;*/


/*}*/


/*.setting-center .mic-sound-num{*/


/*position: absolute;*/


/*width: 46px;*/


/*height: 46px;*/


/*border-radius: 30px;*/


/*top: 8px;*/


/*left: 8px;*/


/*overflow: hidden;*/


/*}*/


/*.setting-center .mic-sound-num table{*/


/*position: absolute;*/


/*width: 52px;*/


/*height: 52px;*/


/*left: -3px;*/


/*bottom: -3px;*/


/*border-collapse: unset;*/


/*}*/


/*.setting-center .mic-sound-num tr{*/


/*visibility: hidden;*/


/*}*/


/*.setting-center .mic-sound-num td{*/


/*background: #50c74e;*/


/*height: 3px;*/


/*border: 2px solid #1f644c;*/


/*}*/


/*.setting-center .mic-sound-num td:nth-child(odd),.setting-center .mic-sound-num td:nth-child(0){*/


/*width: 18px;*/


/*}*/


/*.setting-center .mic-sound-num td:nth-child(even){*/


/*width: 12px;*/


/*}*/


/*!*.setting-center .mic-sound-0 table tr:nth-child(n+10) {*!*/


/*!*visibility: visible;*!*/


/*!*}*!*/


/*.setting-center .mic-sound-1 table tr:nth-child(n+10) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-2 table tr:nth-child(n+9) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-3 table tr:nth-child(n+8) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-4 table tr:nth-child(n+7) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-5 table tr:nth-child(n+6) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-6 table tr:nth-child(n+5) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-7 table tr:nth-child(n+4) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-8 table tr:nth-child(n+3) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-9 table tr:nth-child(n+2) {*/


/*visibility: visible;*/


/*}*/


/*.setting-center .mic-sound-10 table tr {*/


/*visibility: visible;*/


/*}*/

.setting-center span.mic-sound {
    /*background-image: url("../../img/conference/mic_sound_bg.png?1.0.15.7");*/
    /*background-position: -10px -10px;*/
    background-image: url("../../img/conference/mic_sound.png?1.0.15.7");
    vertical-align: middle;
    position: absolute;
    cursor: pointer;
    display: none;
}

.mic-sound-0 {
    background-position: -10px -10px;
}

.mic-sound-1 {
    background-position: -90px -10px;
}

.mic-sound-2 {
    background-position: -170px -10px;
}

.mic-sound-3 {
    background-position: -250px -10px;
}

.mic-sound-4 {
    background-position: -330px -10px;
}

.mic-sound-5 {
    background-position: -410px -10px;
}

.mic-sound-6 {
    background-position: -490px -10px;
}

.mic-sound-7 {
    background-position: -570px -10px;
}

.mic-sound-8 {
    background-position: -650px -10px;
}

.mic-sound-9 {
    background-position: -730px -10px;
}

.mic-sound-10 {
    background-position: -810px -10px;
}


/**/

b.mic-forbidden {
    background-position: -344px -171px;
}

b.mic-forbidden:hover {
    background-position: -412px -171px;
}

b.mic-forbidden-mute {
    background-position: -344px -326px;
}

b.mic-forbidden-mute:hover {
    background-position: -412px -326px;
}

b.mic-normal {
    background-position: -344px -15px;
}

b.mic-normal:hover {
    background-position: -412px -15px;
}

b.mic-normal-mute {
    background-position: -344px -250px;
}

b.mic-normal-mute:hover {
    background-position: -412px -250px;
}

b.mic-apply {
    background-position: -344px -92px;
    cursor: default;
}

b.mic-unauthorized {
    background-position: -952px -1209px;
}

b.mic-unauthorized:hover {
    background-position: -1020px -1209px;
}


/**/

.participant .mic {
    float: right;
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    cursor: pointer;
    height: 18px;
    width: 18px;
    margin-top: 6px;
    margin-right: 2px;
}

.participant .mic-normal,
.participant .mic-normal.mic-disabled:hover {
    background-position: -362px -589px;
}

.participant .mic-normal:hover {
    background-position: -362px -637px;
}

.participant .mic-forbidden,
.participant .mic-forbidden.mic-disabled:hover {
    background-position: -416px -589px;
}

.participant .mic-forbidden:hover {
    background-position: -416px -637px;
}

.participant .mic-normal-mute,
.participant .mic-normal-mute.mic-disabled:hover {
    background-position: -520px -589px;
}

.participant .mic-normal-mute:hover {
    background-position: -520px -637px;
}

.participant .mic-forbidden-mute,
.participant .mic-forbidden-mute.mic-disabled:hover {
    background-position: -469px -588px;
}

.participant .mic-forbidden-mute:hover {
    background-position: -468px -637px;
}

.participant .mic-speaking {
    background-position: -634px -589px;
}

.participant .mic-apply {
    background-position: -574px -589px;
    cursor: default;
}

.participant .mic-unauthorized {
    background-position: -416px -684px;
}

.participant .mic-unauthorized:hover {
    background-position: -416px -734px;
}

.participant .mic-normal.mic-normal-speaking,
.participant .mic-normal.mic-normal-speaking:hover {
    background-position: -634px -589px;
}

b.mic-disabled,
.participant .mic-disabled {
    cursor: default;
}


/**/

b.camera-disabled {
    background-position: -562px -92px;
    cursor: default;
}

b.camera-closed {
    background-position: -562px -171px;
}

b.camera-closed:hover {
    background-position: -630px -171px;
}

b.camera-opened {
    background-position: -562px -15px;
}

b.camera-opened:hover {
    background-position: -630px -15px;
}


/**/

b.camera-opened-uncaro {
    background-position: -1767px -271px;
}

b.camera-opened-uncaro:hover {
    background-position: -1843px -271px;
}

b.camera-opened-uncaro:active {
    background-position: -1918px -271px;
}


/**/

b.camera-unused,
b.camera-unused:hover {
    background-position: -698px -92px;
    cursor: default;
}


/*b.camera-unauthorized{*/


/*background-position: -30px -1303px;*/


/*}*/


/*b.camera-unauthorized:hover{*/


/*background-position: -30px -1303px;*/


/*}*/


/**/

.bg-camera {
    width: 19px;
    height: 18px;
    margin: 7px 7px 0 0;
    cursor: pointer;
}

.bg-camera.disabled {
    cursor: default;
}

.bg-camera-closed,
.bg-camera-closed.disabled:hover {
    background-position: -469px -682px;
}

.bg-camera-closed:hover {
    background-position: -469px -732px;
}

.bg-camera-opened,
.bg-camera-opened.disabled:hover {
    background-position: -364px -682px;
}

.bg-camera-opened:hover {
    background-position: -364px -732px;
}

.bg-camera-openeddd,
.bg-camera-openeddd.disabled:hover {
    background-position: -364px -682px;
}

.bg-camera-openeddd:hover {
    background-position: -364px -732px;
}

.bg-camera-buka,
.bg-camera-buka.disabled:hover {
    background-position: -364px -682px;
}

.bg-camera-buka:hover {
    background-position: -364px -732px;
}

.bg-camera-carousel {
    background-position: -1562px -714px;
}

.bg-camera-carousel:hover,
.bg-camera-carousel.disabled:hover {
    background-position: -1562px -755px;
}

.bg-camera-disabled {
    background-position: -522px -682px;
    cursor: default;
}


/**/

b.handDown {
    background-position: -959px -845px;
}

b.handDown:hover {
    background-position: -1027px -845px;
}

b.handUp {
    background-position: -959px -769px;
}

b.handUp:hover {
    background-position: -1027px -769px;
}

.bg-handUp {
    width: 20px;
    height: 30px;
    margin: 3px 9px 0 0;
    cursor: pointer;
    background-position: -630px -680px;
    /* width: 18px;
    height: 18px;
    margin: 6px 9px 0 0;
    cursor: pointer;
    background-position: -632px -684px; */
}

.bg-handUp:hover {
    background-position: -630px -680px;
}

.bg-handUp-disabled {
    cursor: default;
}

.bg-handUp-disabled:hover {
    background-position: -630px -680px;
}

.dialog ul.participant li span.bg-layout {
    width: 15px;
    height: 20px;
    margin: 6px 0 0 4px;
    cursor: pointer;
    background-position: -92px -1499px;
    display: none;
}

.dialog ul.participant li span.bg-layout.lay-speaker {
    width: 20px;
    background-position: -35px -1499px;
}


/*.bg-layout:hover {*/


/*background-position: -1434px -1268px;*/


/*}*/

.dialog ul.participant li span.bg-layout.active {
    display: inline-block;
}


/*.bg-layout.active:hover{*/


/*background-position: -1526px -386px;*/


/*}*/


/**/

.share-disabled,
.share-stopped-disable {
    background-position: -562px -326px;
    cursor: default;
}

.share-enabled {
    background-position: -562px -326px;
}

.share-enabled:hover {
    background-position: -630px -326px;
}

.share-stopped {
    background-position: -562px -411px;
}

.share-stopped:hover {
    background-position: -630px -411px;
}

.share-paused {
    background-position: -562px -250px;
}

.share-paused:hover {
    background-position: -630px -250px;
}


/**/

.share-unused,
.share-unused:hover {
    background-position: -630px -92px;
    cursor: default;
}


/**/

b.full-to-full {
    background-position: -344px -491px;
}

b.full-to-full:hover {
    background-position: -412px -491px;
}

b.full-to-back {
    background-position: -344px -411px;
}

b.full-to-back:hover {
    background-position: -412px -411px;
}

.full-screen b.forbid-full {
    background-position: -735px -510px;
}

.full-screen b.forbid-full:hover {
    background-position: -735px -510px;
}

.full-screen .forbid-full-back {
    background-position: -628px -496px;
}


/**/

.bg-noquestion {
    background-position: -620px -840px;
    width: 38px;
    height: 38px;
    margin: auto;
}


/*.bg-qa{
    height:30px;
    width:26px;
    position:absolute;
    top:4px;
    right:50px;
    z-index:10;
}
.bg-qa-gray{
    background-position:-431px -885px;
}
.bg-qa-blue{
    background-position:-490px -885px;
}*/

.bg-hostOpt {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 8px;
    z-index: 10;
}

.bg-hostQA {
    right: 50px;
    background-position: -302px -981px;
}

.bg-hostQA:hover {
    background-position: -339px -981px;
}

.bg-hostQA:active {
    background-position: -379px -981px;
}


/*.bg-allowQA {*/


/*right: 55px;*/


/*background-position: -675px -981px;*/


/*}*/


/*.bg-allowQA:hover {*/


/*background-position: -715px -981px;*/


/*}*/


/*.bg-allowQA:active {*/


/*background-position: -755px -981px;*/


/*}*/


/*.bg-prohibiteQA {*/


/*right: 55px;*/


/*background-position: -434px -981px;*/


/*}*/


/*.bg-prohibiteQA:hover {*/


/*background-position: -474px -981px;*/


/*}*/


/*.bg-prohibiteQA:active {*/


/*background-position: -514px -981px;*/


/*}*/

.bg-replyedIcon {
    background-position: -365px -947px;
    width: 12px;
    height: 10px;
    margin: 5px 0 0 -15px;
}

.bg-voiced {
    background-position: -769px -902px;
    width: 19px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 3px;
}

.bg-privateIcon {
    width: 18px;
    height: 18px;
    margin: 19px 0 0 28px;
    cursor: pointer;
}

.bg-privateuncheck {
    background-position: -305px -893px;
}

.bg-privatechecked {
    background-position: -305px -850px;
}

.askReply-common-box {
    width: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 990;
    background: rgba(255, 255, 255, .95);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(9, 2, 4, .45);
}

.userAsk,
.hostReply {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.title-border {
    border-bottom: 1px solid #d2d8df;
}

.qa-menu {
    padding: 1px;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 34px;
    right: 45px;
    z-index: 3;
    font-size: 14px;
}

.qa-item-text {
    padding: 0 5px;
}

.queAnList {
    height: 280px;
    overflow: hidden;
}

.hostReply .queAnList {
    height: 372px;
}

.noQuestions {
    padding-top: 82px;
}

.hostReply .noQuestions {
    padding-top: 113px;
}

@media screen and (min-height:768px) {
    .queAnList {
        height: 465px;
    }
    .hostReply .queAnList {
        height: 557px;
    }
    .noQuestions {
        padding-top: 175px;
    }
    .hostReply .noQuestions {
        padding-top: 206px;
    }
}

.queAnList .mCSB_scrollTools {
    margin-right: 2px;
}

.searchLoading {
    padding-top: 82px;
}

.queItem {
    padding: 12px 25px;
    border-top: 1px solid #d2d8df;
    position: relative;
}

.queItem:first-child {
    border: none;
}

.ansItem {
    margin: 10px 0 0 15px;
    padding-left: 5px;
    border-left: 2px solid #12584d;
}

.queTime {
    color: #fff;
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 2px;
    background-color: #1f644c;
}

.queComment {
    padding: 10px 25px 10px;
    background: rgba(235, 239, 241, .6);
    box-shadow: 0 -3px 6px rgba(0, 0, 0, .12);
    position: relative;
}

.queNew,
.noPublicTip,
.forbidAskTip {
    width: 100%;
    color: #fff;
    padding: 3px 0;
    font-size: 12px;
    background-color: rgba(0, 146, 63, 0.86);
    position: absolute;
    z-index: 10;
}

.forbidAskTip {
    background-color: rgba(246, 130, 51, 0.86);
    z-index: 9;
}

.slideAllowAsk {
    position: absolute;
    left: 12px;
    width: auto;
    height: 30px;
    line-height: 30px;
    top: 8px;
    z-index: 10;
}

.allowAskText {
    float: left;
    margin-right: 4px;
    color: #000;
    max-width: 180px;
    margin-top: 6px;
    line-height: 16px;
}


/*.askSlideBox{*/


/*position: relative;*/


/*width: 46px;*/


/*height: 20px;*/


/*border-radius: 20px;*/


/*overflow: hidden;*/


/*margin-top: 5px;*/


/*cursor: pointer;*/


/*float: left;*/


/*}*/

.slideAllowAsk .switch-icon.allowPro,
.switch-icon.speechRecoAllow {
    margin-top: 5px;
    width: 42px;
    height: 20px;
    border: 1px solid rgb(218, 218, 218);
    background: rgb(218, 218, 218);
}

.slideAllowAsk .switch-icon.allowPro:after,
.switch-icon.speechRecoAllow:after {
    width: 16px;
    height: 16px;
}

.slideAllowAsk .switch-icon.bg-prohibiteQA:after,
.switch-icon.speechRecoAllow:after {
    left: 100%;
    margin-left: -17px;
}

.switch-icon.speechRecoNotAllow:after {
    left: 1px;
    margin-left: 0;
}

.slideAllowAsk .switch-icon.bg-prohibiteQA,
.switch-icon.speechRecoAllow {
    border-color: #1f644c;
    background-color: #1f644c;
}

.switch-icon.speechRecoNotAllow {
    border: 1px solid rgb(188, 200, 208);
    background: rgb(188, 200, 208);
}

.switch-icon.speechRecoAllow {
    margin-right: 3px;
}


/*.askSlideBg{*/


/*height: 20px;*/


/*width: 92px;*/


/*position: absolute;*/


/*left: -46px;*/


/*transition: left 0.15s linear;*/


/*}*/


/*.askSlideBgOp ,.askSlideBgEd{*/


/*height: 20px;*/


/*float: left;*/


/*}*/


/*.askSlideBgOp {*/


/*width: 46px;*/


/*background: rgb(47, 135, 219);*/


/*}*/


/*.askSlideBgEd{*/


/*width: 46px;*/


/*background: rgb(218, 218, 218);*/


/*}*/

.askSlideBar {
    width: 16px;
    height: 16px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 2px solid #dadada;
    z-index: 10;
    transition: left 0.15s linear;
}

.queNew {
    top: -24px;
}

.queComment .queNew {
    margin-left: -25px;
}

.alertTop {
    background-color: rgba(235, 239, 241, .6);
}

.switchTab {
    padding-bottom: 10px;
    background-color: rgba(235, 239, 241, .6);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .12);
}

.replyOrNotTab {
    width: 148px;
    padding: 5px 0;
    color: #1f644c;
    cursor: pointer;
    border: 1px solid #1f644c;
    display: inline-block;
}

.noReplyTab {
    border-radius: 60px 0 0 60px;
}

.replyedTab {
    border-radius: 0 60px 60px 0;
    margin-left: -4px;
}

.tabActived {
    color: #fff;
    background-color: #12584d;
    /*background-clip:padding-box;*/
}

.borderB {
    border-bottom: 3px solid #1f644c;
}

.showName {
    width: 90%;
}

.notPublic {
    padding: 2px;
    background-color: #333;
    border-radius: 2px;
    display: inline-block;
}

.remindRedPoint {
    width: 16px;
    height: 16px;
    background-position: -956px -1350px;
    display: none;
    cursor: pointer;
    position: relative;
    top: -28px;
    left: 20px;
}

.remindRedNumPoint {
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    background-color: #ff3b30;
    border-radius: 20px;
    display: none;
    cursor: pointer;
    position: absolute;
    top: 8px;
    left: 30px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding: 4px;
}

.noReplyRedPoint,
.replyRedPoint {
    width: 8px;
    height: 8px;
    background-color: #ff3b30;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    top: -6px;
}

.questionContent {
    padding: 0 25px 24px;
}

.questionArea {
    color: #666;
    width: 750px;
    height: 76px;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    position: relative;
    box-sizing: border-box;
}

.questionContent .questionArea {
    height: 134px;
}

.commentMax {
    color: #999;
    position: absolute;
    top: 55px;
    right: 5px;
}

.questionContent .commentMax {
    top: inherit;
    bottom: 0;
}

.queText {
    color: #666;
    width: 728px;
    height: 56px;
    padding: 0 10px;
    border: none;
}

.questionContent .queText {
    height: 114px;
}

.voiceOption {
    height: 48px;
    background-color: rgba(232, 238, 240, .4);
}

.speakingVoice {
    display: inline-block;
    width: 19px;
    height: 16px;
    position: relative;
    top: 2px;
}

.voiceIcon {
    background: url("../../img/conference/voice_reply.gif?1.0.15.7") no-repeat;
}

.replyVioce {
    background: url("../../img/conference/voice_reply_02.gif?1.0.15.7") no-repeat;
    top: 3px;
}

.queSubmit,
.replySubmit,
.replyCancel,
.hostCancel,
.disabledSubmit,
.voiceSubmit {
    height: 32px;
    min-width: 182px;
    text-align: center;
    margin: 12px 0 6px 0;
    padding: 0 10px;
}

.hostReply .queSubmit,
.hostReply .replySubmit {
    margin-right: 20px;
}

.replyCancel,
.hostCancel {
    height: 30px;
    min-width: 180px;
}

.voiceSubmit {
    padding: 0 20px;
    margin: 9px 25px 0 0;
}

.replyText,
.replyLive {
    width: 250px;
    height: 26px;
    color: #1f644c;
    cursor: pointer;
    line-height: 26px;
    text-align: center;
    border: 1px solid #1f644c;
    border-radius: 2px;
}

.replyText:hover,
.replyLive:hover {
    background-color: #12584d;
    color: #fff;
}

.replyText:active,
.replyLive:active {
    color: #fff;
    background-color: #1f644c;
}

.replyText {
    margin: 8px 0 0 20px;
}

.replyLive {
    margin: 8px 0 0 0;
}

.privateText {
    margin: 19px 0 0 4px;
    color: #333;
}

.toPublic {
    color: #1f644c;
    font-size: 12px;
    margin-left: 30px;
    cursor: pointer;
    text-decoration: underline;
}

.reply-disable {
    color: #eaeaea;
    border: 1px solid #eaeaea;
    pointer-events: none;
}

.queForm .submit-disable {
    background: #eaeaea;
    pointer-events: none;
}

.liveTip,
.iconTip {
    padding: 5px 10px;
    color: #1f644c;
    background-color: #dbdbdb;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: 0 2px 2px #f0f0f0;
    display: inline-table;
    position: absolute;
    visibility: hidden;
    z-index: 99;
    white-space: nowrap;
}

.iconTip {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

.liveTipArrow,
.iconTipArrow {
    background-position: -696px -789px;
    width: 10px;
    height: 8px;
    position: absolute;
    visibility: hidden;
    z-index: 100;
}

.iconTipArrow {
    background-position: -731px -789px;
}

.promptBox {
    min-width: 140px;
    padding: 3px 20px;
    text-align: center;
    position: absolute;
    top: 42px;
    left: 50%;
    background-color: #fff;
    border: 1px solid #d1d6d9;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    z-index: 11;
}

.bg404 {
    background: url("../../img/conference/icon2.png?1.0.15.7") 0 -802px;
    margin: 15vh auto 0;
    width: 225px;
    height: 143px;
    display: block;
    cursor: pointer;
}

.tempPosition {
    /**/
    width: 100%;
    position: absolute;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


/**/

.forbidAskMask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    color: #868686;
    font-size: 18px;
    background: rgba(229, 229, 229, 0.96);
    border: 1px solid #d6dae0;
    line-height: 24px;
    padding: 55px 10px 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}


/**/

.bg-defaultHead {
    background-position: -682px -902px;
    width: 66px;
    height: 66px;
}

.cardBox {
    width: 358px;
    position: absolute;
    z-index: 99;
}

.cardContent {
    width: 338px;
    padding: 10px 0 5px;
    background: rgba(255, 255, 255, .95);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(9, 2, 4, .45);
}

.nameAndRole {
    font-size: 18px;
}

.bg-deivceIcon {
    width: 17px;
    height: 15px;
    display: inline-block;
}

.bg-Web {
    background-position: -1175px -610px;
}

.bg-Gvc {
    background-position: -1175px -650px;
}

.bg-Gxv {
    background-position: -1175px -843px;
}

.bg-IOS {
    background-position: -1175px -689px;
}

.bg-Android {
    background-position: -1175px -729px;
}

.bg-Phone {
    background-position: -1175px -769px;
}

.bg-Unknown {
    background-position: -1175px -810px;
}

.deviceText {
    color: #878787;
    display: inline-block;
    position: relative;
    top: -2px;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font: 12px/1.5 "Poppins Regular";
}

.wordWrap pre {
    font: 14px/1.5 "Poppins Regular";
    color: #000;
}

.cardIntroduce {
    margin: 6px 18px 3px;
    padding-top: 4px;
    border-top: 1px solid #e6eaed;
    word-break: break-all;
}

.showLess {
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.newHeadBox {
    width: 62px;
    height: 62px;
    background: #dee3e6;
    border-radius: 62px;
    overflow: hidden;
}

.ellipsisText {
    position: absolute;
    top: 102px;
    right: 25px;
    z-index: 9;
}


/**/

.meeting-nav {
    height: 50px;
    background-color: #12584d;
}

.td-left {
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
}

.td-left-omit {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}

.td-right {
    color: #fff;
}

.meeting-detail .content .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.dialog .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.24);
    filter: "alpha(opacity=24)";
    -ms-filter: "alpha(opacity=24)";
}

.meeting-detail .content .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.dialog .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.24);
    filter: "alpha(opacity=24)";
    -ms-filter: "alpha(opacity=24)";
}

.meeting-detail .content .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.dialog .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.dialog .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.meeting-detail .content .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.24);
    filter: "alpha(opacity=24)";
    -ms-filter: "alpha(opacity=24)";
}

.meeting-detail .container table {
    line-height: 30px;
    margin: 27px 190px 0;
    position: relative;
    /**/
    float: left;
    clear: both;
    width: 80%;
}

@media screen and (max-width:965px) {
    .meeting-detail .container table {
        width: 85%;
        margin: 25px 190px 0 100px;
    }
}

.meeting-detail .container table td {
    word-wrap: break-word;
}

.meeting-detail .container table td:first-child {
    width: 140px;
    vertical-align: top;
}

.meeting-detail .meeting-name {
    margin: 14px 150px 12px 72px;
    position: relative;
    color: #fff;
    font-weight: bold;
    /*text-align: center;*/
    line-height: 24px;
    font-size: 16px;
    clear: both;
    float: left;
}

.meeting-name .meeting-video-name-content{
    color: #f9fafc !important;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(100,100,100,0.5);
}

.meeting-detail .moreDetail {
    width: 650px;
}

@media screen and (max-width:1100px) {
    .meeting-detail .meeting-name {
        width: 693px
    }
    .meeting-detail .moreDetail {
        width: 650px;
    }
}

@media screen and (min-width: 1100px) and (max-width:1200px) {
    .meeting-detail .meeting-name {
        width: 793px
    }
    .meeting-detail .moreDetail {
        width: 750px;
    }
}

@media screen and (min-width: 1200px) and (max-width:1300px) {
    .meeting-detail .meeting-name {
        width: 893px
    }
    .meeting-detail .moreDetail {
        width: 850px;
    }
}

@media screen and (min-width: 1300px) and (max-width:1400px) {
    .meeting-detail .meeting-name {
        width: 993px
    }
    .meeting-detail .moreDetail {
        width: 900px;
    }
}

@media screen and (min-width: 1400px) and (max-width:1500px) {
    .meeting-detail .meeting-name {
        width: 1093px
    }
    .meeting-detail .moreDetail {
        width: 1000px;
    }
}

@media screen and (min-width: 1500px) and (max-width:1600px) {
    .meeting-detail .meeting-name {
        width: 1193px
    }
    .meeting-detail .moreDetail {
        width: 1050px;
    }
}

@media screen and (min-width: 1600px) and (max-width:1700px) {
    .meeting-detail .meeting-name {
        width: 1293px
    }
    .meeting-detail .moreDetail {
        width: 1100px;
    }
}

@media screen and (min-width: 1700px) and (max-width:1800px) {
    .meeting-detail .meeting-name {
        width: 1393px
    }
    .meeting-detail .moreDetail {
        width: 1200px;
    }
}

@media screen and (min-width: 1800px) and (max-width:1900px) {
    .meeting-detail .meeting-name {
        width: 1493px
    }
    .meeting-detail .moreDetail {
        width: 1300px;
    }
}

@media screen and (min-width: 1900px) {
    .meeting-detail .meeting-name {
        width: 1593px
    }
    .meeting-detail .moreDetail {
        width: 1400px;
    }
}

.meeting-detail .container .copyBtn-container {
    bottom: 20px;
    height: 36px;
    left: 50%;
    margin-left: -195px;
    position: absolute;
    width: 390px;
    display: inline-block;
    z-index: 2;
    text-align: center;
}

.meeting-detail .container .copy {
    height: 36px;
    width: 182px;
    background-color: #1f644c;
    border: 1px solid #1f644c;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.meeting-detail .container .copy.green {
    background-color: #68bf3f;
    border: 1px solid #62b33a;
}

.meeting-detail .container .hover,
.meeting-detail .container .copy:hover {
    cursor: pointer;
    background: none repeat scroll 0 0 #23ad77;
    border: 1px solid #23ad77;
}

.meeting-detail .container .more3 {
    color: #1f644c;
    cursor: pointer;
    position: absolute;
    top: 245px;
    right: 70px;
    z-index: 2;
}

.meeting-detail .container .check {
    color: #1f644c;
    cursor: pointer;
}

.meeting-detail .container .check:hover {
    color: #12584d;
    text-decoration: underline;
    text-decoration-color: #12584d;
}

.meeting-detail .agenda-content {
    line-height: 30px;
    /*padding-top: 4px;*/
}

.meeting-detail .meeting-detail-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /*background: #000;
    filter: alpha(opacity=40);
    opacity: 0.4;
    -moz-opacity: 0.4;*/
    z-index: 1;
}

.meeting-detail .container .agenda {
    position: relative;
    line-height: 30px;
}

.meeting-detail .container .agenda-name {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    /*margin-top: 2px;*/
}

@media screen and (max-width:660px) {
    .meeting-detail .container table {
        margin: 8px 110px 0 190px;
    }
    .meeting-detail .meeting-name {
        margin: 12px 110px 12px 190px;
    }
    .meeting-detail .container {
        height: 490px;
        background-image: url("../../img/conference/meeting-detail-bg.png?1.0.15.7");
        background-repeat: repeat-x;
    }
    .meeting-detail .meeting-detail-bottom {
        top: 490px;
    }
    .meeting-detail .content {
        height: 405px;
    }
}

.dialog {
    background-color: rgba(235, 239, 241, 0.95);
    /*border-left: 1px solid #ebeff1;*/
    border-right: 3px solid #ebeff1;
    position: absolute;
    right: -335px;
    top: 0;
    width: 330px;
    z-index: 18;
    bottom: 0;
    transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
    /*-webkit-backdrop-filter: blur(10px);*/
    /*backdrop-filter: blur(10px);*/
    /*transform: translateZ(0) scaleZ(1);*/
}

.shadowup {
    position: absolute;
    top: 0;
    left: -4px;
    width: 3px;
    height: 100px;
    background: linear-gradient(-90deg, rgba(8, 1, 3, .14), rgba(8, 1, 3, 0));
}

.shadowdown {
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 3px;
    height: 100px;
    background: linear-gradient(-90deg, rgba(8, 1, 3, .14), rgba(8, 1, 3, 0));
}


/**/

.dialog-send {
    /*background-color: #fff;*/
    width: 330px;
    /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.07);*/
    height: 59px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 18;
}


/*.dialog .chat-title{
    position: absolute;
    cursor:n-resize;
}*/


/***********/

.dialog .title {
    float: left;
    width: 315px;
    height: 30px;
    font-size: 1em;
    text-align: left;
    padding: 5px 10px;
    line-height: 30px;
    clear: both;
    background-color: rgb(222, 227, 230);
    position: relative;
}

.dialog .chat-container,
.dialog .participant-container {
    float: left;
    list-style: none;
    width: 330px;
    overflow: hidden;
    z-index: 1;
    position: absolute;
    top: 40px;
    bottom: 0;
    background-color: #ebeff1;
}

.hasBottomShadow {
    box-shadow: inset 0 -24px 24px -24px rgba(0, 0, 0, 0.4);
}

.dialog .chat-container {
    bottom: 100px;
    padding-bottom: 10px;
}

.chat-container ul,
.participant-container ul {
    width: 100%;
    height: 100%;
}

.otherUserList {
    display: none;
    padding: 4px 4px 4px 13px;
    line-height: 28px;
    height: 28px;
    position: relative;
}

.participant b.other-user-icon {
    margin-right: 8px;
    background-position: -85px -1549px;
}

.other-user-span,
.other-user-null {
    display: inline-block;
    vertical-align: middle;
    color: #999999;
}

.other-user-null {
    display: none;
}

.showMoreUserList {
    display: none;
    line-height: 33px;
    height: 38px;
    position: relative;
    text-align: center;
    color: #12584d;
    cursor: pointer;
    overflow: hidden;
}

.showMoreArrow {
    width: 18px;
    height: 24px;
    background-position: -142px -1553px;
}

.dialog ul li {
    /*padding-right: 10px;*/
}

.dialog ul.participant,
.dialog ul.chat,
.dialog ul.status {
    padding-bottom: 2px;
    /* padding-left: 10px; */
    /*padding-top: 2px;*/
}

.dialog ul.participant li {
    padding: 4px 4px 4px 10px;
    line-height: 28px;
    height: 28px;
    margin: 1px 0 1px 1px;
    position: relative;
    display: inherit;
}

.dialog ul.participant li img,
.dialog ul.participant li span {
    vertical-align: middle;
}

.dialog ul.participant li span {
    display: inline-block;
    /* height: 28px; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
}

span.name-without-desc {
    max-width: 145px;
}

span.name-with-desc {
    max-width: 106px;
}

span.role-desc {
    /*max-width: 119px;*/
    color: #000;
}

span.role-without-desc {
    width: 0;
}


/**/

.participant .header {
    float: left;
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    height: 28px;
    width: 28px;
    vertical-align: middle;
    margin-right: 10px;
}

.device-gvc-self {
    background-position: -248px -509px;
}

.device-webrtc-self {
    background-position: -248px -469px;
}

.device-android-self {
    background-position: -248px -589px;
}

.device-ios-self {
    background-position: -248px -549px;
}

.device-phone-self {
    background-position: -248px -629px;
}

.device-unknown-self {
    background-position: -248px -669px;
}

.device-gvc-others {
    background-position: -292px -509px;
}

.device-webrtc-others {
    background-position: -292px -469px;
}

.device-android-others {
    background-position: -292px -589px;
}

.device-ios-others {
    background-position: -292px -549px;
}

.device-phone-others {
    background-position: -292px -629px;
}

.device-unknown-others {
    background-position: -292px -669px;
}

.dialog .participant .name-host {
    color: #333;
}

.dialog .chat li.odd ul,
.dialog .chat li.even ul {
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 5px;
    padding-bottom: 5px;
    width: 279px;
}

.dialog .chat .name,
.dialog .chat .speak {
    line-height: 24px;
}

.dialog .chat .name {
    display: inline-block;
    height: 24px;
    color: #b0b0b0;
    overflow: hidden;
    max-width: 76%;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.dialog .chat .speak {
    color: #666;
    word-wrap: break-word;
    overflow: hidden;
}

.dialog .chat .speak .content {
    word-wrap: break-word;
    overflow: hidden;
}

.dialog .chat .time {
    color: #999;
}

.dialog .chat ul li {
    line-height: 24px;
    position: relative;
}

.dialog .chat .odd .time,
.dialog .chat .even .time {
    display: inline-block;
    float: right;
    font-size: 12px;
}

.dialog .title .chat-menu-icon-box {
    width: 30px;
    float: right;
    cursor: pointer;
    /*text-align: center;*/
    margin-right: -5px;
}

.dialog .title .chat-menu-icon {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    height: 28px;
    width: 24px;
    background-position: -38px -125px;
    float: right;
    margin-right: 5px;
}

.dialog .title .chat-menu-icon-box:hover .chat-menu-icon {
    background-position: -92px -125px;
}

.tab-menu-arrow,
.qa-arrow,
.sort-menu-arrow {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    position: absolute;
    top: 23px;
    right: 15px;
    z-index: 5;
}

.sort-menu-arrow {
    top: 18px;
    right: 7px;
}

.qa-arrow {
    top: 24px;
    right: 57px;
}

.dialog .title .chat-menu,
.dialog .title .sort-list {
    position: absolute;
    top: 33px;
    right: 15px;
    min-width: 300px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow-y: hidden;
    display: none;
    z-index: 3;
    padding: 1px;
}

.dialog .title .chat-menu span,
.dialog .title .sort-list span {
    /*top: 0px;*/
    display: inline-block;
    margin-left: 35px;
    position: relative;
    height: 32px;
    padding-right: 5px;
    /*bottom: 0px;*/
    /*right: 0px;*/
    text-align: left;
}

.dialog .title .chat-menu .icon,
.dialog .title .sort-list .icon {
    /*background-color: #e0f1fb;*/
    height: 32px;
    left: -1px;
    position: absolute;
    text-align: center;
    top: -1px;
    width: 31px;
}

.dialog .title .chat-menu b,
.dialog .title .sort-list b {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    height: 18px;
    width: 20px;
    vertical-align: middle;
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
}

.dialog .title .chat-menu .chat-menu-file b {
    background-position: -232px -84px;
}

.dialog .title .chat-menu .chat-menu-clear b {
    background-position: -38px -514px;
}

.dialog .title .chat-menu .chat-menu-clear b.gray {
    background-position: -38px -753px;
}

.dialog .title .chat-menu span,
.dialog .chat .time {
    /* cursor: pointer; */
    font-weight: normal;
    margin-left: 35px;
}

.dialog .title .chat-menu li,
.qa-item,
.dialog .title .sort-list li {
    border: 1px solid rgba(0, 0, 0, 0);
    color: #333;
    position: relative;
    height: 30px;
    line-height: 30px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dialog .title .chat-menu li:hover,
.qa-item:hover,
.dialog .title .sort-list li:hover {
    background-color: #1f644c;
    color: #ffffff;
    border-radius: 8px;
}

.dialog .title .chat-menu li:active,
.qa-item:active,
.dialog .title .sort-list li:active {
    background-color: #12584d;
    color: #ffffff;
    border-radius: 8px;
}

.dialog .title .chat-menu li:hover .icon {
    height: 32px;
    border-bottom: none;
}

.dialog .title .chat-menu li:hover .icon .bg-ban {
    background-position: -202px -463px;
}

.dialog .title .chat-menu li:hover .icon .bg-allow {
    background-position: -92px -463px;
}

.dialog .title .chat-menu-clear:hover .icon b {
    background-position: -92px -514px;
}

.dialog .title .chat-menu-clear:hover .icon b.gray {
    background-position: -38px -753px;
}

.dialog .chat .odd .name {
    color: #f0a564;
}

.dialog .chat .speak .warn {
    background-image: url("../../img/conference/icon.png?1.0.15.7");
    background-repeat: no-repeat;
    height: 20px;
    width: 16px;
    vertical-align: middle;
    background-position: -107px -448px;
    display: inline-block;
    margin-right: 3px;
}

.dialog .chat .speak .repeat {
    color: #1f644c;
    cursor: pointer;
}

.dialog .chat .speak .repeat:hover {
    color: #12584d;
}

.dialog .chat .chat-top-line ul {
    border-top: 1px solid #e2e2e2;
    padding-top: 5px;
}

.file-remind em {
    background: url("../../img/base/ico.png?1.0.15.7") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 18px;
    position: absolute;
    top: 3px;
    vertical-align: middle;
    width: 18px;
}

.dialog .chat .file-remind span {
    line-height: 24px;
    display: inline-block;
}

.dialog .chat .file-remind .file-name {
    color: #1f644c;
    cursor: pointer;
    margin-left: 24px;
    text-decoration: underline #1f644c;
    width: 190px;
    word-wrap: break-word;
}

.dialog .chat .file-remind .file-name:hover {
    color: #12584d;
    text-decoration-color: #12584d;
}

.dialog .chat .file-remind .file-size {
    bottom: 0;
    color: #666;
    display: inline-block;
    font-size: 12px;
    height: 24px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: right;
    width: 60px;
}

.dialog .status ul li {
    line-height: 15px;
    padding: 3px 20px;
    text-align: center;
}

.dialog .status ul {
    margin-bottom: 8px;
    width: 330px;
}

.dialog .status ul .time span {
    font-size: 12px;
}

.dialog .status ul li span,
.add-time {
    display: inline-block;
    background-color: #1f644c;
    border-radius: 5px;
    padding: 4px 10px;
    color: #fff;
    font-size: 12px;
    word-wrap: break-word;
    max-width: 245px;
}

.add-time {
    margin-top: 10px;
    margin-left: 2%;
}

.dialog .send textarea {
    width: 315px;
    height: 68px;
    padding: 0 6px;
    color: #333;
    position: absolute;
    z-index: 1;
    top: -12px;
    border: 1px solid transparent;
    border-top: 1px solid #b9c0c9;
    overflow: auto;
    background-color: rgb(255, 255, 255);
    margin-left: 1px;
}

.dialog .send textarea:focus {
    box-shadow: 0 0 3px #23ad77;
    border: 1px solid #23ad77;
    z-index: 19;
    background: #fff;
}

.dialog-send .forbid-textarea {
    color: #fff;
}

.dialog .send textarea::-webkit-input-placeholder {
    color: #999;
}

.dialog .send textarea::-moz-placeholder {
    color: #999;
}

.dialog .send .phcolor {
    color: #999;
}

.dialog-send .forbid-textarea::-webkit-input-placeholder {
    color: #fff;
}

.dialog-send .forbid-textarea::-moz-placeholder {
    color: #fff;
}

.dialog-send .forbid-textarea:-ms-input-placeholder {
    color: #fff;
}

.dialog-send .forbid {
    background: rgba(235, 239, 241, 0.85);
    /*background: rgba(201, 222, 241, 0.85);*/
    /*background: rgba(213, 225, 235, 0.85);*/
    color: #868686;
    font-size: 16px;
    height: 98px;
    left: 0;
    line-height: 98px;
    position: absolute;
    text-align: center;
    top: -41px;
    width: 300px;
    z-index: 99;
    font-weight: bold;
    cursor: default;
    /*border: 1px solid #d6dae0;*/
}


/**/

.desktop .video-control,
.desktop .reinvite {
    position: absolute;
    top: 10px;
    height: 30px;
    z-index: 18;
    transition: right 0.2s linear;
    -webkit-transition: right 0.2s linear;
    -o-transition: right 0.2s linear;
    -moz-transition: right 0.2s linear;
}

.desktop .reinvite {
    right: 15px;
}


/*.desktop .video-control{*/


/*width: 254px;*/


/*right: 65px;*/


/*-webkit-user-select: none;*/


/*transition: right 0.2s linear;*/


/*-webkit-transition: right 0.2s linear;*/


/*-o-transition: right 0.2s linear;*/


/*-moz-transition: right 0.2s linear;*/


/*}*/

.desktop .video-control .full-screen,
.desktop .reinvite {
    width: 30px;
    height: 30px;
    position: relative;
    float: right;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
}

.desktop .video-control .full-screen:hover,
.desktop .reinvite:hover {
    background-color: rgba(0, 0, 0, 0.45);
}

.desktop .video-control .full-screen:active,
.desktop .reinvite:active {
    background-color: rgba(0, 0, 0, 0.25);
}

.desktop .video-control .full-screen {
    /*margin-right: 20px;*/
}

.desktop .video-control .full-screen b,
.desktop .reinvite b {
    background-image: url("../../img/conference/icon.png?1.0.15.7");
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-top: 5px;
}

.desktop .reinvite b {
    background-position: -508px -337px;
    margin-top: 7px;
}


/*.desktop .video-control .progress{*/


/*position: relative;*/


/*float: right;*/


/*margin-right: 20px;*/


/*height: 100%;*/


/*width: 200px;*/


/*background-color: rgba(0,0,0,0.3);*/


/*border-radius: 15px;*/


/*}*/


/*.video-control .progress .percent{*/


/*float: right;*/


/*width: 43px;*/


/*line-height: 30px;*/


/*color: #fff;*/


/*}*/


/*.video-control .progress .plus , .video-control .progress .minus{*/


/*float: right;*/


/*line-height: 30px;*/


/*cursor: pointer;*/


/*width: 15px;*/


/*margin-right: 3px;*/


/*}*/


/*.video-control .progress .plus{*/


/*margin-right: 8px;*/


/*margin-left: 2px;*/


/*}*/


/*.video-control .progress .minus:hover b{*/


/*background-position: -290px -310px;*/


/*}*/


/*.video-control .progress .plus:hover b{*/


/*background-position: -290px -372px;*/


/*}*/


/*.video-control .progress .plus b, .video-control .progress .minus b{*/


/*background-image: url("../../img/conference/icon.png?1.0.15.7");*/


/*background-repeat: no-repeat;*/


/*vertical-align: middle;*/


/*display: inline-block;*/


/*text-align: center;*/


/*width: 15px;*/


/*height: 15px;*/


/*}*/


/*.video-control .progress .plus b{*/


/*background-position: -230px -372px;*/


/*}*/


/*.video-control .progress .minus b{*/


/*background-position: -230px -310px;*/


/*}*/

.video-control .progress .dragdealer {
    /*float: right;*/
    width: 100px;
    /*margin-right: 5px;*/
    /*position: relative;*/
    height: 2px;
    /*background: #EEE;*/
    /*margin-top: 15px;*/
    /*pointer-events: none;*/
}


/*progress*/


/*.dragdealer .dragdealer-orange{*/


/*position: absolute;*/


/*height: 2px;*/


/*top: 0;*/


/*left: 0px;*/


/*width: 0;*/


/*background-color: #ed7307;*/


/*z-index: 1;*/


/*}*/

.dragdealer .handle,
.dragdealer .handle-desktop,
.dragdealer .share-handle-desktop {
    position: absolute;
    top: -6px;
    left: 0;
    cursor: pointer;
    z-index: 2;
}

.dragdealer .progess-bar {
    /*background-image: url("../../img/conference/icon.png?1.0.15.7");*/
    /*background-repeat: no-repeat;*/
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    width: 6px;
    height: 15px;
    /*background-position: -184px -491px;*/
    /*pointer-events: auto;*/
}


/*.dragdealer .disabled {*/


/*background: #898989;*/


/*}*/


/**/


/*.desktop .arrow {*/


/*position: absolute;*/


/*top: 50%;*/


/*right: -2px; !**!*/


/*width: 1px;*/


/*z-index: 15;*/


/*height: 1px;*/


/*transition: right 0.3s linear;*/


/*-webkit-transition: right 0.3s linear;*/


/*-o-transition: right 0.3s linear;*/


/*-moz-transition: right 0.3s linear;*/


/*}*/

b.dialog-arrow-btn {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    vertical-align: middle;
    /*display: inline-block;*/
    cursor: pointer;
    height: 100px;
    width: 15px;
    position: absolute;
    left: 10px;
    top: 0;
    display: none;
}

.arrow-right {
    background-position: -200px -72px;
}

.arrow-right:hover {
    background-position: -247px -72px;
}

.arrow-right:active {
    background-position: -293px -72px;
}

.arrow-left {
    background-position: -200px -198px;
}

.arrow-left:hover {
    background-position: -247px -198px;
}

.arrow-left:active {
    background-position: -293px -198px;
}

.dialog-icon {
    /*width: 32px;
    height: 32px;
    background-color: rgba(0,0,0,0.3);*/
    border-radius: 50%;
    position: absolute;
    left: -45px;
    display: none;
}

.dialog-icon-inner {
    background-position: -38px -407px;
    width: 30px;
    height: 30px;
    margin-left: -10px;
    margin-top: -15px;
    position: relative;
    cursor: pointer;
}

.dialog-icon-num {
    min-width: 12px;
    height: 12px;
    line-height: 12px;
    background-color: #ff3b30;
    border-radius: 20px;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    position: relative;
    margin-left: 12px;
    margin-top: -33px;
    font-size: 12px;
    cursor: pointer;
    float: right;
    right: 18px;
    padding: 2px;
}

.dialog-file-icon {
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
    left: -47px;
    display: none;
}

.dialog-icon:hover,
.dialog-file-icon:hover {
    /*background-color: rgba(0,0,0,0.45);*/
}

.dialog-icon:active,
.dialog-file-icon:active {
    /*background-color: rgba(0,0,0,0.25);*/
}

.dialog-icon-bottom {
    top: -32px;
}

.dialog-icon-top {
    top: -72px;
}

.dialog-icon-center {
    /*top: -52px;*/
}

.dialog-file-icon-inner {
    background-position: -53px -389px;
    width: 20px;
    height: 20px;
    margin-left: 9px;
    margin-top: 7px;
}

.desktop {
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 17;
    overflow: hidden;
}

.desktopBg {
    background: url("../../img/conference/webrtc_bg_audio.jpg?1.0.15.7") no-repeat center 0/cover;
}

.desktopChangeBg {
    background: url("../../img/conference/webrtc_bg_video.jpg?1.0.15.7") no-repeat center 0/cover;
}

.desktop .bg-cloudBg {
    width: 180px;
    height: 140px;
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-position: -85px -1023px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin-left: -90px;
    /*margin-left: -244px\0;*/
    margin-top: -85px;
}

.oem-cloud-logo {
    width: 180px;
    height: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin-left: -90px;
    margin-top: -85px;
    opacity: 0.2;
    text-align: center;
}

.oem-cloud-logo img {
    height: 140px;
    width: auto;
}

.desktop .bg-audioBg {
    width: 180px;
    height: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin-left: -90px;
    /*margin-left: -244px\0;*/
    margin-top: -85px;
}

.none-dialog {
    right: 0;
    transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
}

.has-dialog {
    right: 0;
    min-width: 500px;
    transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
    /*transition: right 0s linear\0;*/
}

.desktop .desktop-main {
    bottom: 0;
    left: 0;
    position: absolute;
    text-align: center;
    /*top: 0;*/
    top: 0;
    z-index: 0;
    /*overflow: auto;*/
    overflow: hidden;
    right: 0;
}

.right-liner-trans {
    transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
}

.desktop-setting {
    background-color: rgba(250, 249, 250, 0.80);
    backdrop-filter: blur(5px);
    /* border-bottom: 1px solid #e2e2e2; */
    /* bottom: 10px; */
    bottom: 0px;
    height: 72px;
    left: 0;
    position: absolute;
    z-index: 16;
    right: 0;
    transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
}

.no-trans,
.desktop .no-trans,
.desktop-setting.no-trans,
.desktop .speech-reco-box.no-trans {
    transition: none;
}

.shareType-box,
.liveType-box {
    width: 560px;
    height: 360px;
}

.shareType-box {
    width: 626px;
    border-radius: 10px;
}

.shareType,
.liveType {
    text-align: center;
}

.liveType {
    height: 180px;
}

.liveTypeTip {
    margin: 0 50px;
    color: #fc812f;
    position: relative;
}

.liveTypeTip b {
    position: absolute;
    top: 3px;
    left: 0;
}

.liveTypeTip div {
    margin-left: 24px;
}

.shareType dl,
.liveType dl {
    float: left;
}

.shareType b {
    width: 148px;
    height: 164px;
    margin-bottom: 20px;
    cursor: pointer;
}

.liveType b {
    width: 128px;
    height: 128px;
    margin-bottom: 22px;
    cursor: pointer;
}

.share-app-icon {
    background-position: -781px -379px;
}

.share-app-icon:hover {
    background-position: -781px -571px;
}

.share-desktop-icon {
    background-position: -963px -379px;
    /*margin-left: 8px;*/
}

.share-desktop-icon:hover {
    background-position: -963px -571px;
    /*margin-left: 8px;*/
}

.share-whiteboard-icon {
    background-position: -1679px -1023px;
    /*margin-left: 8px;*/
}

.share-whiteboard-icon:hover {
    background-position: -1846px -1023px;
    /*margin-left: 8px;*/
}

.live-facebook-icon {
    background-position: -270px -1023px;
}

.live-facebook-icon:hover {
    background-position: -1247px -689px;
}

.live-youtube-icon {
    background-position: -437px -1023px;
    /*margin-left: 8px;*/
}

.live-youtube-icon:hover {
    background-position: -1401px -689px;
    /*margin-left: 8px;*/
}

.live-ipvt-icon {
    background-position: -1247px -1468px;
}

.live-ipvt-icon:hover {
    background-position: -1395px -1468px;
}

.live-other-icon {
    background-position: -603px -1023px;
}

.live-other-icon:hover {
    background-position: -770px -1023px;
}

.share-desktop {
    margin-left: 30px
}

.share-whiteboard,
.share-doc {
    margin-left: 10px;
    position: relative;
}

.share-doc-box {
    width: 148px;
    height: 164px;
    margin: 0 20px 20px;
    cursor: pointer;
}

.share-doc-icon {
    background-position: -781px -379px;
}

.share-doc-box:hover .share-doc-icon {
    background-position: -781px -571px;
}


/*.meeting-container .content.shareType{*/


/*margin-left: -200px;*/


/*margin-top: -178px;*/


/*position: relative;*/


/*text-align: center;*/


/*width: 400px;*/


/*}*/


/*.meeting-container .content.sharing-text{*/


/*margin-top: -25px;*/


/*}*/

.shareType-middle,
.liveType-middle {
    /*margin-top: 60px;*/
}

.shareType dd,
.liveType dd {
    min-width: 182px;
    /*cursor: pointer;*/
    font-size: 14px;
    line-height: 14px;
}

.liveType dd {
    min-width: 170px;
}

.share-app {
    margin-left: 30px
}

.live-facebook {
    margin-left: 25px
}

.live-ipvt {
    margin-left: 75px
}

.live-other.ml65 {
    margin-left: 65px
}

.shareType .title-big,
.liveType .title-big {
    font-size: 24px
}


/*container*/

.container-min {
    min-width: 1000px;
}

.meeting-container {
    /*background-color: #F6F6F6;*/
    /*gai*/
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 50px;
}

.meeting-container .center {
    left: 50%;
    position: absolute;
    top: 50%;
}

.centerCopyDiv {
    position: absolute;
    z-index: 1;
}


/****/

.meeting-container .centerCopyDiv {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    /*background-color: #F6F6F6;*/
    bottom: 0;
}

.exit-meeting-container .center {
    top: 52px;
}

.meeting-container .content {
    margin-left: -300px;
    margin-top: -135px;
    position: relative;
    text-align: center;
    width: 600px;
}

.meeting-container .centerCopyDiv .content {
    margin: 200px auto;
}

.wait-meeting-container .content {
    margin-left: -270px;
    margin-top: -178px;
    position: relative;
    text-align: center;
}

.meeting-container .content .title-big {
    font-size: 24px;
    color: #333 !important;
}

.exit-meeting-container .content {
    /*position: absolute;
    text-align: center;
    width: 600px;
    top: 50%;
    left: 50%;
    margin-top: -124px;
    margin-left: -300px;*/
}

.exit-meeting-container .content .exit-title-big {
    /*font-size: 18px;
    color: #333;
    margin-bottom: 15px;*/
}

.exit-meeting-container .title-small {
    /*color: #666;*/
}

.exit-meeting-container,
.wait-meeting-container {
    /*right: 0;*/
}

.meeting-container .content h1 {
    position: relative;
    margin: 0 auto;
}

.meeting-container .content p {
    line-height: 40px;
}

.meeting-container .content p a {
    color: #1f644c;
    cursor: pointer;
    text-decoration: none;
}

.meeting-container .content p a:hover {
    color: #12584d;
}

.meeting-container .content p span {
    color: #f46c09;
}

.exit-big-icon {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
    background-position: -678px -590px;
    height: 100px;
    width: 100px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 20px;
}

.meeting-container .copy {
    position: relative;
    margin: 20px 0 auto;
    /*padding-left: 45px;*/
}

.linkCopy {
    border: 1px solid #e1e1e1;
    border-radius: 4px 0 0 4px;
    color: #666;
    font-size: 16px;
    padding: 5px 10px;
    width: 400px;
    background-color: #fff;
    text-align: left;
    margin: 0 auto;
}

.meeting-container .copy input {
    padding: 5px 10px;
    width: 315px;
    color: #666;
    border: 1px solid #e1e1e1;
    font-size: 16px;
    border-radius: 4px 0 0 4px;
}

.meeting-container .copy .hover {
    border: 1px solid #23ad77;
    background-color: #23ad77;
}

.meeting-container .copy button:hover {
    border: 1px solid #23ad77;
    background-color: #23ad77;
}

.meeting-container .copy .copy-input {
    float: left;
}

.meeting-container .copy .copyBtn-container {
    float: left;
    width: 110px;
    height: 36px;
    position: relative;
}

.meeting-container .copy button {
    background-color: #1f644c;
    padding: 5px 10px;
    width: 110px;
    color: #fff;
    border: 1px solid #1f644c;
    border-radius: 0 4px 4px 0;
    float: left;
    font-weight: bold;
    font-size: 16px;
    height: 36px;
    cursor: pointer;
    transition: background-color 0.5s, border 0.5s;
    -moz-transition: background-color 0.5s, border 0.5s;
    -webkit-transition: background-color 0.5s, border 0.5s;
    -o-transition: background-color 0.5s, border 0.5s;
    position: relative;
}

@media screen and (max-width: 450px) {
    .meeting-container .copy .copy-input {
        width: 100%;
    }
    .meeting-container .copy button {
        margin-top: 12px;
        width: 150px;
        float: none;
        border-radius: 4px;
    }
    .meeting-container div.zclip,
    .meeting-container div.zclip embed {
        width: 150px;
    }
}

.meeting-container .copy button.green {
    background-color: #68bf3f;
    border: 1px solid #62b33a;
}

.dialog-send .last-input-tip,
.sendMsgFailed {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: -42px;
    width: 300px;
    display: none;
    z-index: 20;
}

.dialog-send .last-input-tip .last-input-num {
    color: #ff7e00;
    font-weight: bold;
}


/*full screen*/

.full-screen-top {
    top: 0;
}

.desktop .desktop-main.full-screen-bottom {
    top: 0;
    bottom: 0;
}

.full-screen-right {
    right: 0;
}

.desktop.full-screen-right {
    right: 0;
}

.desktop .video-control.full-screen-right,
.desktop .reinvite.full-screen-right {
    right: 315px;
    transition: right 0.2s linear;
    -webkit-transition: right 0.2s linear;
    -o-transition: right 0.2s linear;
    -moz-transition: right 0.2s linear;
}

.desktop .video-control.full-screen-right {
    right: 365px;
}

.desktop .reinvite.full-screen-right {
    right: 315px;
}

.desktop .arrow.full-screen-right {
    right: 303px;
    transition: right 0.4s linear;
    -webkit-transition: right 0.4s linear;
    -o-transition: right 0.4s linear;
    -moz-transition: right 0.4s linear;
}

.desktop .desktop-setting.full-screen-right {
    right: 300px;
    transition: right 0.4s linear;
    -webkit-transition: right 0.4s linear;
    -o-transition: right 0.4s linear;
    -moz-transition: right 0.4s linear;
}

.desktop .left-time-header.full-screen-right {
    right: 300px;
    transition: right 0.4s linear;
    -webkit-transition: right 0.4s linear;
    -o-transition: right 0.4s linear;
    -moz-transition: right 0.4s linear;
}

.participantTips,
.iceFailedTips,
.meetWillEndTips {
    position: absolute;
    padding: 0 8px;
    top: 60px;
    right: 20px;
    text-align: center;
    line-height: 28px;
    display: none;
    color: #1f644c;
    z-index: 17;
    border-radius: 8px;
    box-shadow: 0 0 2px rgb(0 0 0 / 12%);
    background: rgb(161 219 161 / 20%);
    backdrop-filter: blur(2px);
    font-size: 9pt;
}

.iceFailedTips {
    background-color: #d45858;
    z-index: 18;
}

.meetWillEndTips {
    background-color: #d45858;
}

.participantTips {
    z-index: 18;
    white-space: nowrap;
}

.participantName {
    color: #1f644c;
    font-weight: 700;
    height: 30px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.install-big-title {
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 10px;
}

.install-tip-box {
    width: 460px
}

.waitingHostIcon {
    width: 86px;
    height: 107px;
    background: url("../../img/conference/waiting_host_loading.gif?1.0.15.7") no-repeat;
    margin: 0 auto 28px;
}

.shareDesktopIcon {
    width: 200px;
    height: 200px;
    background: url("../../img/conference/shared_desktop_data.gif?1.0.15.7") no-repeat;
    margin: 24px auto 0;
    webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.pauseShareDesktopIcon {
    width: 221px;
    height: 108px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") -957px -932px no-repeat;
    margin: 24px auto 0;
}

.meeting-container .content.load-video-wait {
    margin-top: -95px;
}

.videoParamTip {
    display: none;
    top: -25px;
    right: 6px;
    font-size: 14px;
    letter-spacing: 0;
}

.addErrorTip .angle,
.groupChatTip .angle,
.settingTip .angle,
.layoutTip .angle,
.micParamTip .angle,
.layParamTip .angle {
    border-top: 6px solid rgba(40, 42, 45, 0.90);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    bottom: -6px;
    width: 0;
    height: 0;
    position: absolute;
}

.videoParamTip .angle-hover {
    background-position: -108px -290px;
}

.notRemind {
    font-size: 12px;
    color: #999;
    padding-left: 10px;
    cursor: pointer;
}

.shareWindow {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.shareWindow .title-big {
    text-align: center;
    font-size: 24px;
}

.share-window {
    width: 200px;
    float: left;
}

.share-window dt {
    text-align: center;
}

.share-window dd {
    text-align: center
}

#video_remote {
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    position: relative;
    box-shadow: 0 0 25px rgba(8, 18, 34, 0.40);
}

#videoRemote {
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    position: relative;
    box-shadow: 0 0 25px rgba(8, 18, 34, 0.40);
}

/* #cameraVideo {
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
    position: relative;
    box-shadow: 0 0 25px rgba(8, 18, 34, 0.40);
} */


/*gai*/


/**/

.left-header,
.left-time-header,
.left-video-header,
.left-share-header {
    color: #000;
    font-size: 18px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /*width: 100%;*/
    height: 56px;
    /*background: linear-gradient(180deg, rgba(42, 48, 58, 0.59) 0%,*/
    /*rgba(42, 48, 58, 0.30) 50%, rgba(42, 48, 58, 0) 100%);*/
    z-index: 30;
    z-index: 1300\0;
    /*transition: right 0.3s linear;*/
    /*-webkit-transition: right 0.3s linear;*/
    /*-o-transition: right 0.3s linear;*/
    /*-moz-transition: right 0.3s linear;*/
}

.left-time-header {
    left: auto;
    padding-right: 8px;
    transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
}

.left-video-header,
.left-share-header {
    background: linear-gradient(180deg, rgba(42, 48, 58, 0.59) 0%, rgba(42, 48, 58, 0.30) 50%, rgba(42, 48, 58, 0) 100%);
    transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
}

.s-could-logo {
    position: absolute;
    height: 26px;
    width: 36px;
    top: 12px;
    left: 24px;
    background-position: -146px -945px;
    display: none;
}

.s-preview-logo {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-position: -1487px -1210px;
    display: block;
}

.s-preview-logo img {
    display: none;
}

/* .left-header img {
    position: absolute;
    height: 26px;
    width: 36px;
    top: 12px;
    left: 24px;
} */

.left-header p,
.left-video-header p,
.left-share-header p {
    padding: 18px 0 0 72px;
    line-height: 18px;
    height: 32px;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    left: 0;
    right: 150px;
    text-align: left;
}

.left-share-header p {
    padding: 18px 0 0 22px;
}

#meetingWait .left-header p {
    right: 0;
}

.startMeeting-info {
    margin: 65px 24px 0;
    font-size: 16px;
    color: #000;
    text-align: left;
    line-height: 25px;
    min-width: 450px;
}

.startMeeting-info span {
    /* margin-left: 5px; */
    padding: 5px;
    background: rgba(200, 200, 200, 0.3);
    border-radius: 10px;
}

.setting-left {
    position: absolute;
    left: 10px;
    top: 0;
    z-index: 1;
}

.setting-center {
    /* left: 0; */
    left: 65px;
    margin-top: 6px;
    position: absolute;
    right: 0;
    text-align: center;
    min-width: 350px;
    z-index: 0;
    letter-spacing: -4px;
}

.setting-right {
    float: right;
    margin-right: 18px;
    margin-top: 9px;
}

.setting-left .exit-container {
    width: 60px;
    margin-top: 9px;
    /* margin: auto; */
    height: 55px;
    display: block;
    background-color: rgba(128, 0, 0, 0.85);
    float: left;
    margin-left: 5px;
    border-radius: 10px;
}

.setting-left .exit-container:hover {
    background-color: rgba(220, 220, 220, 0.85);
}

.setting-left .exit-container:active {
    background-color: rgba(100, 0, 0, 0.85);
}

/* .setting-left .record-container {
    width: 60px;
    height: 55px;
    text-align: center;
    display: block;
    background-color: rgba(0,144,159, 0.3);
    box-shadow: 3px 3px 30px rgba(3,101,105, 0.6);
    color: #fff;
    float: left;
    margin-left: 15px;
    margin-top: 9px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
} */

.desktop .setting-left .exit {
    /* background-position: -38px -77px;
    display: inline-block;
    height: 26px;
    width: 22px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 18px;
    margin-top: 23px; */
    background-position: -36px -77px;
    display: inline-block;
    height: 26px;
    width: 32px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 15px;
    margin-top: 15px;
}

.setting-left .exit-container:hover .exit {
    background-position: -90px -77px;
}

.setting-left .exit-container:active .exit {
    background-position: -144px -77px;
}

.package-detail {
    margin-left: 14px;
    margin-top: 20px;
    padding-top: 10px;
    line-height: 16px;
    float: left;
}

.package-detail .signal {
    width: 24px;
    height: 16px;
    background-position: -144px -355px;
    cursor: default;
}


/*.package-detail .signal{*/


/*display: inline-block;*/


/*background: darkgrey;*/


/*margin-left: -1px;*/


/*}*/


/*.package-detail .signal-s{*/


/*width: 3px;*/


/*height: 8px;*/


/*background: #dd5519;*/


/*}*/


/*.package-detail .signal-m{*/


/*width: 3px;*/


/*height: 12px;*/


/*}*/


/*.package-detail .signal-l{*/


/*width: 3px;*/


/*height: 16px;*/


/*}*/

.setting-center span {
    display: inline-block;
    width: 62px;
    height: 62px;
    margin-left: 15px;
    position: relative;
    -moz-user-select: none;
    /**/
    -webkit-user-select: none;
    /*webkit*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /**/
    user-select: none;
}

.setting-center .layout-tip.undis {
    display: none;
}

.full-screen {
    pointer-events: none;
}

.forbid-pointer {
    pointer-events: none;
}

.setting-center span:first-child {
    margin-left: 0;
}


/*.desktop .setting-center b{
    width: 52px;
    height: 52px;
    background: #7f7f7f;
    border-radius: 60px;
}*/

.desktop .setting-right b {
    width: 35px;
    height: 30px;
    display: inline-block;
}

.setting b {
    background-position: -36px -180px;
}

.setting b:hover {
    background-position: -90px -180px;
}

.header-in b {
    background-position: -36px -240px;
}

.header-in b:hover {
    background-position: -90px -240px;
}

.groupChat b {
    background-position: -38px -293px;
}

.groupChat b:hover {
    background-position: -92px -293px;
}

.askReply b {
    background-position: -431px -850px;
}

.askReply b:hover {
    background-position: -487px -850px;
}

.video-tiled b {
    background-position: -1247px -983px;
}

.video-tiled b:hover {
    background-position: -1247px -1022px;
}


/*.video-tiled b:active{*/


/*background-position: -1366px -344px;*/


/*}*/

.video-polling-three b {
    background-position: -1302px -983px;
}

.video-polling-three b:hover {
    background-position: -1302px -1022px;
}

.video-polling-five b {
    background-position: -1357px -983px;
}

.video-polling-five b:hover {
    background-position: -1357px -1022px;
}

.video-polling-seven b {
    background-position: -1412px -984px;
}

.video-polling-seven b:hover {
    background-position: -1412px -1023px;
}


/*.video-polling b:active{*/


/*background-position: -1366px -387px;*/


/*}*/

.video-focus b {
    background-position: -1490px -982px
}

.video-focus b:hover {
    background-position: -1490px -1021px
}

.req_mic,
.req_share, 
.setting,
.header-in,
.groupChat,
.askReply,
.videoLayout,
.absensi {
    float: right;
    padding: 14px 0 0 9px;
    margin-left: 10px;
    position: relative;
}

.bg-tiled {
    width: 26px;
    background-position: -1422px -347px;
}

.opt-tiled.checked .bg-tiled {
    background-position: -1422px -390px;
}

.bg-polling-three {
    width: 26px;
    background-position: -1247px -347px;
}

.bg-polling-five {
    width: 26px;
    background-position: -1309px -347px;
}

.bg-polling-seven {
    width: 26px;
    background-position: -1366px -347px;
}

.opt-polling.checked .bg-polling-three {
    background-position: -1247px -390px;
}

.opt-polling.checked .bg-polling-five {
    background-position: -1309px -390px;
}

.opt-polling.checked .bg-polling-seven {
    background-position: -1366px -390px;
}

.opt-tiled,
.opt-polling {
    padding: 8px 10px 9px 46px;
}

.opt-tiled.checked,
.opt-polling.checked {
    color: #1f644c;
}

.opt-tiled.checked {
    cursor: default;
}


/*!*audio setting  start*!*/


/*.audio-setting-box .alert-title-white p{*/


/*line-height: 20px;*/


/*font-weight: normal;*/


/*font-size: 15px;*/


/*}*/


/*.setting-choose .audio-check{*/


/*display: inline-block;*/


/*width:248px;*/


/*}*/


/*.setting-choose .audio-check span{*/


/*margin-right: 10px;*/


/*width: 16px;*/


/*height: 18px;*/


/*vertical-align: middle;*/


/*display: inline-block;*/


/*}*/


/*.setting-choose{*/


/*margin-bottom: 20px;*/


/*}*/


/*.text-grey-tip{*/


/*font-size: 12px;*/


/*color: #a9aaad;*/


/*margin-left:50px;*/


/*margin-right: 20px;*/


/*}*/


/*.mic-setting p,.speak-setting p{*/


/*color: #000;*/


/*margin-bottom: 5px;*/


/*}*/


/*.mic-setting .mic-l-img,.speak-setting .speak-l-img{*/


/*width: 30px;*/


/*height: 30px;*/


/*background: #7f7f7f;*/


/*margin-right: 10px;*/


/*display: inline-block;*/


/*vertical-align: middle;*/


/*}*/


/*.mic-control,.mic-test-div,.loud-test-div{*/


/*margin: 8px 0 20px 50px;*/


/*}*/

.mic-vomule,
.mic-test-box,
.loud-test-box {
    width: 234px;
    float: left;
    margin-top: 3px;
    height: 16px;
}

.mic-vomule li,
.mic-test-box li,
.loud-test-box li {
    height: 14px;
    width: 4px;
    border-radius: 10px;
    border: 1px solid #c6cacf;
    float: left;
    margin-right: 4px;
    background-color: #ffffff;
}

.mic-loud-box .mic-vomule-green {
    background: #1f644c;
    border: 1px solid #1f644c;
}


/*.micro-tip{*/


/*font-size: 12px;*/


/*color: #a9aaad;*/


/*line-height: 20px;*/


/*}*/


/*.speak-control{*/


/*margin: 8px 0 0 50px;*/


/*}*/


/*.speak-control b{*/


/*width: 20px;*/


/*height: 20px;*/


/*float: left;*/


/*}*/


/*.speak-vomule{*/


/*width: 280px;*/


/*float: left;*/


/*height: 20px;*/


/*margin-right: 30px;*/


/*}*/


/*.speak-vomule .speak-dragdealer{*/


/*width: 280px;*/


/*height: 2px;*/


/*position: relative;*/


/*background: #aeaeae;*/


/*margin-top: 9px;*/


/*}*/


/*.speak-vomule .speak-handle-desktop{*/


/*width: 8px;*/


/*height: 8px;*/


/*border-radius: 60px;*/


/*box-shadow: 0 0 2px #2f86da;*/


/*background: #318ce4;*/


/*position: absolute;*/


/*top: -3px;*/


/*left: 0;*/


/*cursor: pointer;*/


/*z-index: 2;*/


/*}*/


/*.speak-vomule .dragdealer-blue{*/


/*background: #2f86da;*/


/*position: absolute;*/


/*height: 2px;*/


/*top: 0;*/


/*left: 0;*/


/*width: 0;*/


/*z-index: 1;*/


/*}*/


/*.speak-tip{*/


/*font-size: 12px;*/


/*color: #5ca3e4;*/


/*line-height: 20px;*/


/*}*/


/**/

.mic-loud-box {
    width: 596px;
}

.mic-loud-box .alert-title-white p {
    font-weight: bold;
}

.mic-hear-tip {
    text-align: center;
    font-size: 14px;
    color: #fff;
}

.mic-detial {
    margin-top: 6px;
}

.mic-loud-error {
    position: absolute;
    width: 556px;
    min-height: 26px;
    line-height: 26px;
    text-align: center;
    bottom: 396px;
    background: rgba(212, 88, 88, 0.95);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
    padding: 0 20px;
    color: #ffffff;
}

.mic-select,
.loud-select,
.camera-select,
.bit-rate-select,
.reso-select,
.bandwidth-select {
    height: 30px;
    width: 385px;
    position: relative;
    border: 1px solid #D6DAE0;
    border-radius: 4px;
    padding: 0 30px 0 8px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
}

.mic-select .choose,
.loud-select .choose,
.camera-select .choose,
.bit-rate-select .choose,
.reso-select .choose,
.bandwidth-select .choose {
    max-width: 430px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.camera-select .choose {
    max-width: 360px;
}

.camera-select {
    margin: 6px auto 0;
}

.cam-state-img {
    width: 358px;
    height: 202px;
    position: absolute;
    background: #000;
    top: 53px;
    left: 30px;
    border: 1px solid rgb(214, 218, 224);
    /* z-index: 99; */
}

.cam-state-img-fail {
    border: 1px solid #d18a8a;
    background: #f9e9e9;
}

.nocamera-color {
    color: #999999;
}

.camera-tip-error {
    position: absolute;
    width: 380px;
    padding: 3px 20px;
    min-height: 18px;
    line-height: 18px;
    text-align: center;
    bottom: 466px;
    background: rgba(212, 88, 88, 0.95);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12);
    color: #ffffff;
}

.mic-select,
.loud-select {
    margin-left: 20px;
}

.mic-select b,
.loud-select b,
.camera-select b,
.bit-rate-select b,
.reso-select b,
.bandwidth-select b {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    background-position: -628px -630px;
}

.mic-select span,
.loud-select span,
.camera-select span,
.bit-rate-select span,
.reso-select span,
.bandwidth-select span {
    height: 30px;
    line-height: 30px;
}

.mic-select-box,
.loud-select-box,
.camera-select-box,
.reso-select-box,
.bitrate-select-box,
.bandwidth-select-box {
    position: absolute;
    max-height: 128px;
    width: 233px;
    padding: 1px;
    overflow: auto;
    border: 1px solid #c1c1c1;
    border-radius: 2px;
    background: #000;
    color: #fff;
    box-shadow: 0 0 5px rgba(9, 2, 4, .3);
    top: 32px;
    left: -1px;
    z-index: 5;
}


/* .mic-select-box,
.loud-select-box,
.camera-select-box,
.reso-select-box,
.bitrate-select-box,
.bandwidth-select-box {
    position: absolute;
    max-height: 128px;
    width: 378px;
    padding: 1px;
    overflow: auto;
    border: 1px solid #c1c1c1;
    border-radius: 2px;
    background: #000;
    color: #fff;
    box-shadow: 0 0 5px rgba(9, 2, 4, .3);
    top: 32px;
    left: -1px;
    z-index: 5;
} */

.mic-select-box,
.loud-select-box {
    width: 421px;
}

.mic-select-box span,
.loud-select-box span,
.camera-select-box span,
.reso-select-box span,
.bitrate-select-box span,
.bandwidth-select-box span {
    display: block;
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid transparent;
    text-overflow: ellipsis;
}

.mic-select-box span:hover,
.loud-select-box span:hover,
.camera-select-box span:hover,
.reso-select-box span:hover,
.bitrate-select-box span:hover,
.bandwidth-select-box span:hover {
    background: #1f644c;
    cursor: default;
    border: 1px solid #1f644c;
}

.mic-tip-img,
.loud-tip-img {
    margin-right: 12px;
    min-width: 45px;
    padding: 2px 5px 0;
    height: 20px;
    line-height: 18px;
    float: left;
    color: #1f644c;
    cursor: pointer;
    text-align: center;
    border: 1px solid #1f644c;
    border-radius: 8px;
}

.mic-tip-img:hover,
.loud-tip-img:hover {
    background-color: #fefefe;
}

.mic-tip-img:active,
.loud-tip-img:active {
    color: #fff;
    background-color: #12584d;
}

.mic-loud-disable {
    color: #aeaeae;
    border: 1px solid #aeaeae;
    pointer-events: none;
}

.mic-name,
.loud-name {
    min-width: 75px;
    margin-bottom: 14px;
    font-weight: bold;
}

.mic-icon,
.loud-icon {
    display: inline-block;
    width: 25px;
    height: 30px;
}

.mic-icon {
    background-position: -719px -1348px;
}

.loud-icon {
    background-position: -775px -1347px;
}

.mic-test,
.loud-test {
    height: 25px;
    margin: 7px 0 0 50px;
    position: relative;
}

.tortuous-tip {
    position: absolute;
    font-size: 14px;
    color: #999;
    top: 22px;
    line-height: 16px;
}

.loud-detial {
    margin-top: 35px;
}

.mute-to-self {
    margin-left: 50px;
    margin-top: 35px;
}

.mute-to-self b {
    width: 18px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
    background-position: -305px -893px;
}

.mute-to-self b.selected {
    background-position: -305px -850px;
}

.mute-to-self span {
    vertical-align: middle;
}


/*.no-mic-box {*/


/*margin-top: -12px;*/


/*text-align: left;*/


/*position: relative;*/


/*padding: 0 24px;*/


/*line-height: 22px;*/


/*}*/

.alert-bottom .hasKnowBtn {
    min-width: 152px;
    border: none;
}

.no-mic-icon {
    width: 24px;
    height: 20px;
    background-position: -573px -589px;
}

.camera-select {
    width: 320px;
}

.camera-select-box {
    width: 355px;
}

.forbid-device-box {
    text-align: center;
    width: 484px;
}

.forbid-device-title {
    word-break: break-all;
    padding: 0 45px;
}

.forbid-device-text {
    margin: 30px 0 35px;
}

.forbid-device-img {
    display: block;
    width: 351px;
    height: 38px;
    margin: 0 auto;
    position: relative;
}

.forbid-device-url {
    font-size: 12px;
    position: absolute;
    top: 1px;
    left: 93px;
}

.forbid-device-chrome,
.forbid-device-llq {
    background-position: -876px -1310px;
}

.forbid-device-ff {
    background-position: -781px -77px;
}

.forbid-device-safari {
    height: 90px;
    background-position: -1247px -530px;
}

.forbid-device-text {
    text-align: left;
}

.device-io-box {
    min-width: 140px;
    height: 88px;
    position: absolute;
    top: -67px;
    right: 4px;
    overflow: hidden;
    display: none;
    /*background: #ffffff;*/
}

.inout-device-tip {
    min-width: 114px;
    height: 62px;
    margin: 12px;
    position: relative;
    float: right;
    background: rgba(25, 35, 47, 0.9);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(25, 35, 47, 0.9);
}

.in-out-text {
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    word-break: keep-all;
    white-space: nowrap;
    margin: 14px 12px 6px;
    color: #ffffff;
}

.in-out-click {
    height: 14px;
    line-height: 14px;
    word-break: keep-all;
    margin: 0 12px;
    font-size: 12px;
    color: #8b9296;
}

.blue-border {
    border: 1px solid #1f644c;
}

#meetingWait {
    background: url("../../img/conference/webrtc_bg_audio.jpg?1.0.15.7") no-repeat center/cover;
}

#meetingWait .setting-left .exit {
    background-position: -38px -77px;
    display: inline-block;
    height: 26px;
    width: 24px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 18px;
    margin-top: 23px;
}

#meetingWait .setting-left .exit:hover {
    background-position: -92px -77px;
}

#meetingWait .setting-right b {
    width: 30px;
    height: 26px;
    display: inline-block;
}

#meetingWait .content {
    margin-left: -300px;
    margin-top: -178px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
}

span.netstatus {
    color: #5bbf7e;
}

.audio-select-area {
    border: 1px solid #b1bac2;
    border-radius: 3px;
    height: 20px;
    line-height: 20px;
    padding: 5px 8px;
    width: 430px;
    vertical-align: middle;
    background: #ffffff;
    color: #000000;
    display: inline-block;
    text-align: left;
    font-size: 14px;
    position: relative;
}

.audio-setting-box .audio-select-area span {
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 10px;
    margin-top: 3px;
    margin-right: 0
}

.audio-select {
    padding-right: 20px;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap
}

.audio-select-choose {
    position: absolute;
    width: 444px;
    top: 33px;
    left: -1px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #c1c1c1;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(9, 2, 4, 0.3);
    max-height: 160px;
    max-width: 445px;
    overflow: auto;
    padding: 1px;
    z-index: 5;
    display: none
}

.audio-select-choose .A-list {
    display: block;
    border: 1px solid #fff;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    padding: 0 5px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    cursor: pointer
}

.audio-select-choose .A-list:hover {
    background: #79bd9a;
    border: 1px solid #23ad77
}

.audio-setting-box .alertForm span {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-repeat: no-repeat;
}

.audio-check span {
    background-position: -577px -735px;
}

.audio-check span.audio-check-checked {
    background-position: -577px -685px;
}


/*audio setting  end*/


/*camera-loading animation*/

.camere-loading,
.mic-loading {
    height: 52px;
    width: 52px;
    border-radius: 45px;
    background: rgba(0, 100, 0, 0.85);
    position: absolute;
    left: 5px;
    top: 5px;
}

.camereload,
.micload {
    float: left;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 35px;
    background: rgba(0, 100, 0, 0.30);
    margin-top: 22px;
    animation: camload 0.6s ease-in infinite alternate-reverse;
}

.camLoading1,
.camLoading2,
.camLoading3,
.micLoading1,
.micLoading2,
.micLoading3 {
    margin-left: 7px;
}

.camLoading2,
.micLoading2 {
    animation-delay: 0.3s;
}

.camLoading3,
.micLoading3 {
    animation-delay: 0.6s;
}

@keyframes camload {
    from {
        background: rgba(190, 212, 235, 0.30);
        ;
    }
    to {
        background: rgba(212, 235, 190, 0.9);
        ;
    }
}

@keyframes micload {
    from {
        background: rgba(190, 212, 235, 0.30);
        ;
    }
    to {
        background: rgba(212, 235, 190, 0.9);
        ;
    }
}


/*voice-control*/

.voice-control,
.wait-music-control {
    margin-left: 21px;
    margin-top: 18px;
    float: left;
    position: relative;
}

.voice-control .voice-btn,
.wait-music-control .wait-music-btn {
    width: 30px;
    height: 36px;
    cursor: pointer;
}

.wait-music-control .wait-music-arrow {
    background-position: -255px -783px;
}

.wait-music-control .wait-music-forbid {
    background-position: -305px -783px;
}

.voice-control .voice-arrow {
    background-position: -38px -884px;
}

.voice-control .voice-forbid {
    background-position: -92px -884px;
}

.voice-control-bg {
    background: rgba(40, 42, 45, 0.9);
    width: 28px;
    border-radius: 30px;
    height: 173px;
    position: absolute;
    top: -175px;
}

.voice-mun {
    position: absolute;
    width: 28px;
    text-align: center;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 14px;
    line-height: 14px;
    margin-top: 18px;
    -moz-user-select: none;
    /**/
    -webkit-user-select: none;
    /*webkit*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /**/
    user-select: none;
}

.voice-dragdealer {
    width: 28px;
    height: 110px;
    display: block;
    background: transparent;
    position: relative;
    margin: 42px 0 18px;
}

.voice-click-bg {
    width: 28px;
    height: 110px;
    display: block;
    background: transparent;
    position: absolute;
}

.voice-bar {
    width: 2px;
    height: 110px;
    display: block;
    background: #b3b9c1;
    position: absolute;
    left: 13px;
}

.voice-handle {
    width: 12px;
    height: 12px;
    border-radius: 30px;
    display: block;
    background: #12584d;
    position: absolute;
    left: 8px;
    top: 0;
    cursor: pointer;
}

.voice-handle:hover {
    background: #ffffff;
}

.voice-color {
    background: #1f644c;
    display: block;
    position: absolute;
    bottom: 0;
    left: 13px;
    width: 2px;
    height: 100px;
}


/*resolution-adjust*/

.resoStateNow {
    margin-top: -5px;
    color: #999999;
    font-size: 16px;
}

.resoBtn {
    height: 30px;
    line-height: 30px;
    width: 180px;
    background: #ffffff;
    font-size: 16px;
    border: 1px solid #12584d;
    color: #12584d;
    margin: 16px auto 0;
    text-align: center;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    display: none;
}

.resolution-box .resolutionAuto {
    display: block;
}

.resoActive {
    background: #12584d;
    color: #ffffff;
}


/*.resoActive b{*/


/*display: block;*/


/*position: absolute;*/


/*width: 14px;*/


/*height: 14px;*/


/*right: 10px;*/


/*top: 9px;*/


/*background-position: -37px -932px;*/


/*}*/

.exitBoxText {
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
    word-wrap: break-word;
}


/**/

.share-state-tip,
.lay-state-area {
    position: absolute;
    height: 68px;
    min-width: 68px;
    background: rgba(40, 42, 45, 0.90);
    color: #e4e7e9;
    border-radius: 2px;
    z-index: 1000;
}

.lay-state-area {
    height: 74px;
}

.share-state-tip .first:hover,
.lay-state-area .first:hover {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}

.share-state-tip .last:hover,
.lay-state-area .last:hover {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
}

.share-switch,
.share-pause,
.share-stop,
.lay-state {
    position: relative;
    text-align: center;
    float: left;
    min-width: 68px;
    height: 68px;
    cursor: pointer;
}

.share-state-wb .share-pause {
    display: none;
}

.lay-state {
    min-width: 120px;
    height: 74px;
}

.share-stopped {
    cursor: default;
}

.share-switch:hover,
.share-pause:hover,
.share-stop:hover,
.lay-state:hover {
    background: #415c34;
}

.share-switch:active,
.share-pause:active,
.share-stop:active,
.lay-state:active {
    background: #415c34;
}

.share-switch-icon,
.share-paused-icon,
.share-pause-icon,
.share-stop-icon {
    width: 26px;
    height: 26px;
    margin: 12px auto 0;
}

.share-switch-icon {
    background-position: -436px -932px;
}

.share-pause-icon {
    background-position: -495px -932px;
}

.share-paused-icon {
    background-position: -553px -932px;
}

.share-stop-icon {
    background-position: -621px -932px;
}

.lay-state.lay-state-now {
    color: #1f644c;
}

.lay-state b {
    width: 40px;
    height: 34px;
    margin: 12px auto 0;
}

.share-switch-tip,
.share-pause-tip,
.share-stop-tip,
.lay-orig-tip,
.lay-one-tip,
.lay-two-tip {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0;
    margin-top: 5px;
    padding: 0 12px;
}

.lay-orig-tip,
.lay-one-tip,
.lay-two-tip {
    margin-top: 6px;
}


/**/

.video-stream-norm {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(255, 1, 0, 0.27);*/
    overflow: hidden;
}

/* #video-stream-norm{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    border-radius: 7px;
    touch-action: none;
} */

.video-stream-share {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    /*background: rgba(0, 124, 203, 0.28);*/
    overflow: hidden;
}

.show-share-area {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

.move-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: rgba(175, 193, 203, 0.36);
}


/*.video-split-drag {*/


/*position: absolute;*/


/*top: 0;*/


/*left: 0;*/


/*bottom: 0;*/


/*width: 12px;*/


/*background: rgba(11, 26, 39, 0.36);*/


/*cursor: ew-resize;*/


/*z-index: 1200;*/


/*display: none;*/


/*}*/


/*.video-split-drag-copy {*/


/*position: absolute;*/


/*top: 0;*/


/*left: 0;*/


/*bottom: 0;*/


/*width: 12px;*/


/*background: rgba(89, 159, 219, 0.8);*/


/*cursor: w-resize;*/


/*z-index: 1200;*/


/*}*/


/*.video-split-drag:hover {*/


/*background: rgba(89, 159, 219, 0.8);*/


/*}*/

.video-stream-share .dragActive {
    background: rgba(141, 219, 89, 0.8);
}


/*.video-split-drag:active{*/


/*background: rgba(2, 17, 30, 0.6);*/


/*}*/

.video-drag-icon {
    width: 12px;
    height: 18px;
    position: absolute;
    background-position: -619px -892px;
    top: 50%;
    left: 0;
    display: inherit;
}

.video-drag-icon:hover {
    background-position: -639px -892px;
}


/*.video-drag-icon:active{*/


/*background-position: -659px -892px;*/


/*}*/

.video-stream-share .dragIconActive {
    background-position: -639px -892px;
}


/*.full-alone {*/


/*position: absolute;*/


/*right: 16px;*/


/*bottom: 14px;*/


/*width: 40px;*/


/*height: 40px;*/


/*background-position: -696px -842px;*/


/*display: none;*/


/*cursor: pointer;*/


/*z-index: 1;*/


/*}*/

.share-control {
    position: absolute;
    right: 16px;
    bottom: 86px;
    width: auto;
    height: 40px;
    display: none;
    transition: right 0.3s linear, bottom 0.3s linear;
}

.share-control b {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.split-alone {
    background-position: -1475px -117px;
}

.close-other {
    background-position: -23px -1547px;
    margin-right: 8px;
}


/**/

.share-control .close-other {
    width: 0;
    overflow: hidden;
}

.video_major,
.video_share {
    -moz-user-select: none;
    /**/
    -webkit-user-select: none;
    /*webkit*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /**/
    user-select: none;
    transform: translateZ(0);
    /*GPU*/
}


/**/

#livemargins-videoplayer-controller {
    width: 0;
    height: 0;
    pointer-events: none;
}


/**/

.full-small-video {
    position: absolute;
    width: 281px;
    height: 159px;
    min-width: 167px;
    min-height: 94px;
    bottom: 85px;
    left: 0;
    cursor: move;
    border: 3px solid rgba(8, 18, 34, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.50);
}


/**/

@media screen and (max-width: 1340px) {
    /*.full-small-video {*/
    /*width: 167px;*/
    /*height: 94px;*/
    /*}*/
}

@media screen and (max-width: 1420px) and (min-width: 1341px) {
    /*.full-small-video {*/
    /*width: 185px;*/
    /*height: 105px;*/
    /*}*/
}

@media screen and (max-width: 1900px) and (min-width: 1421px) {
    /*.full-small-video {*/
    /*width: 222px;*/
    /*height: 126px;*/
    /*}*/
    .full-small-video .miniShareTip .content {
        transform: translate(-50%, -50%) scale(0.5);
    }
}

@media screen and (min-width: 1901px) {
    /*.full-small-video {*/
    /*width: 281px;*/
    /*height: 159px;*/
    /*}*/
    .full-small-video .miniShareTip .content {
        transform: translate(-50%, -50%) scale(0.5);
    }
}

.full-small-video:hover {
    transform: translate(-3px, 3px);
    border: 6px solid rgba(8, 18, 34, 0);
}

.smallMove {
    position: absolute;
    width: 22px;
    height: 22px;
    right: 0;
    top: 0;
    background-position: -720px -1310px;
    cursor: default;
}

.smallMove:hover {
    background-position: -780px -1310px;
}

.smallMove:active {
    background-position: -842px -1310px;
}

.video_remote_small,
.miniShareTip,
.miniWb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wbIframeMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.miniShareTip .content {
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    text-align: center;
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
}


/*smallPlater-loading animation*/

.small-loading {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.smallLoad {
    float: left;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 35px;
    background: rgba(190, 212, 235, 0.30);
    margin-top: 22px;
    animation: smaLoad 0.6s ease-in infinite alternate-reverse;
}

.smaLoading1,
.smaLoading2,
.smaLoading3 {
    margin-left: 7px;
}

.smaLoading2 {
    animation-delay: 0.3s;
}

.smaLoading3 {
    animation-delay: 0.6s;
}

@keyframes smaLoad {
    from {
        background: rgba(190, 212, 235, 0.30);
    }
    to {
        background: rgba(210, 235, 190, 0.9);
    }
}

.micLoudTipBtn {
    color: red;
    text-decoration: underline;
}

.ffDeviceWarn {
    margin: 0 32px 30px;
}


/**/

.readyStart-box {
    max-width: 650px;
}

.RdStBody {
    min-width: 400px;
    padding: 0 45px;
}

.RdStTitle {
    font-size: 16px;
    margin-bottom: 25px;
}

.RdStText {
    color: #999;
}

.btn-rdst-start {
    background: #0cb443;
}

.btn-rdst-start:hover {
    background: #12c24c;
}

.btn-rdst-start:active {
    background: #0c993a;
}


/**/

.broadStart-position {
    position: absolute;
    top: 44px;
    width: 100%;
    z-index: 2;
}

.broadStart-box {
    background: rgba(215, 255, 191, 0.9);
    text-align: center;
    z-index: 1000;
    display: table;
    margin: 0 auto;
    border-radius: 2px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #333;
    box-shadow: 0 0 12px rgba(9, 2, 4, 0.45);
}

.btn-broad-start {
    margin-left: 20px;
    min-width: 58px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    color: #fff;
    padding: 0 20px;
    background: #12584d;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.btn-broad-start:hover {
    background: #1f644c;
}

.btn-broad-start:active {
    background: #12584d;
    color: #f0f0f0;
}

.desktop .box-hide {
    display: none;
}


/*input/*/

.input-box-disable {
    color: #bebebe;
    /* border: 1px solid #d0d0d0; */
    pointer-events: none;
    background: #e9e9e9;
}


/**/

.list-disable {
    color: #8e8e8e;
    /*pointer-events: none;*/
    cursor: default;
}

.groupChatTip .list-disable:active {
    background-color: #4c6b42;
}

.groupChatTip .list-disable:active:after,
.groupChatTip .list-disable:active:before {
    background-color: #4c6b42;
}


/**/

.bg-sort-icon {
    background-position: -1223px -14px;
    width: 24px;
    height: 28px;
    position: relative;
    /*margin-right: 4px;*/
}

.bg-sort-icon:hover {
    background-position: -1274px -14px;
}

.bg-sort-icon:active {
    background-position: -1324px -14px;
}

.dialog .sort-list b.check {
    margin-left: 7px;
    width: 14px;
    height: 14px;
}

.dialog .sort-list b.bg-pic {
    margin-left: 0;
}

.dialog .sort-list span {
    margin-left: 25px;
}

.sort-list .checked {
    background-position: -365px -946px;
}

.sort-list li:hover .checked {
    background-position: -1422px -77px;
}

.sort-text {
    position: relative;
    display: inline-block;
}

.bg-sort-auto {
    background-position: -1309px -76px;
}

.sort-list li:hover .bg-sort-auto {
    background-position: -1366px -76px;
}

.bg-sort-hand {
    background-position: -1308px -155px;
}

.sort-list li:hover .bg-sort-hand {
    background-position: -1365px -155px;
}

.bg-sort-camera {
    background-position: -1307px -196px;
}

.sort-list li:hover .bg-sort-camera {
    background-position: -1366px -194px;
}

.bg-sort-mic {
    background-position: -1306px -236px;
}

.sort-list li:hover .bg-sort-mic {
    background-position: -1363px -236px;
}


/**/

#meetingWrap .BefmeetHide {
    display: none;
}


/**/

.workGroupTab .arrow-icon,
.normalUserTab .arrow-icon {
    width: 10px;
    height: 10px;
    margin: 0 2px;
    background-position: -1532px -23px;
}

.workGroupTab .arrow-icon-up,
.normalUserTab .arrow-icon-up {
    background-position: -1562px -23px;
}


/**/

.bg-sift-icon {
    width: 24px;
    height: 28px;
    position: relative;
    text-align: center;
    margin-left: 2px;
}

b.sift-icon {
    width: 16px;
    height: 20px;
    background-position: -1384px -20px;
    cursor: pointer;
}

b.sift-icon:hover {
    background-position: -1436px -20px;
}

b.sift-icon:active {
    background-position: -1485px -20px;
}

.normalUserTab b.sift-icon {
    width: 30px;
    height: 22px;
    margin-top: -3px;
    background-position: -1377px -17px;
}

.normalUserTab b.sift-icon:hover {
    background-position: -1429px -17px;
}

.normalUserTab b.sift-icon:active {
    background-position: -1478px -17px;
}

.sift-box {
    position: relative;
    padding: 2px 0 5px;
}

b.sift-clear {
    width: 18px;
    height: 18px;
    background-position: -1475px -75px;
    position: absolute;
    right: 12px;
    top: 8px;
    cursor: pointer;
}

b.sift-clear:hover {
    background-position: -1521px -75px;
}

b.sift-clear:active {
    background-position: -1567px -75px;
}

.sift-input {
    display: block;
    width: 280px;
    height: 20px;
    padding: 5px 30px 5px 10px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #e0e6e9;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.extrude-text {
    color: #fc812f;
    vertical-align: bottom;
    font-style: normal
}


/*.sift-hide{*/


/*display: none;*/


/*}*/

.bg-sift {
    background-position: -1309px -116px;
}

.mute-icon-list li:hover .bg-sift {
    background-position: -1366px -116px;
}

.wait-room-style .user-name {
    color: #666;
}

.wait-room-style .device-gvc-others {
    background-position: -1247px -116px;
}

.wait-room-style .device-webrtc-others {
    background-position: -1247px -76px;
}

.wait-room-style .device-android-others {
    background-position: -1247px -196px;
}

.wait-room-style .device-ios-others {
    background-position: -1247px -156px;
}

.wait-room-style .device-phone-others {
    background-position: -1247px -236px;
}

.wait-room-style .device-unknown-others {
    background-position: -1247px -276px;
}


/**/

.camera-tip-length {
    position: absolute;
    width: auto;
    height: 0;
    overflow: hidden;
}


/**/

.zInd1000 {
    z-index: 1000;
}

.zInd996 {
    z-index: 996;
}


/**/

.micParamTip {
    min-width: 220px;
    background-color: rgba(40, 42, 45, .9);
    position: absolute;
    top: -40px;
    border-radius: 1px;
    letter-spacing: 0;
    color: #fff;
}

.micParamTip .micTip {
    min-height: 30px;
    line-height: 30px;
    padding: 0 15px;
}

.micParamTip .miCancelMutetip span {
    width: auto;
    height: 30px;
    line-height: 30px;
    margin-left: 15px;
    float: left;
}

.micParamTip .micNoPackageTip span {
    width: auto;
    height: 30px;
    line-height: 30px;
    margin-left: 6px;
    float: left;
}

.micParamTip .micNoPackageTip .micNoPackageOne {
    margin-left: 15px;
}

.micParamTip .miCancelMutetip .micParamtwo,
.micParamTip .micNoPackageTip .micNoPackageTwo {
    color: #1f644c;
    text-decoration: underline;
    cursor: pointer;
}

.micParamTip .micNoPackageTip .micNoPackageThree {
    margin-right: 15px;
}

.micParamTip .miCancelMutetip b {
    float: left;
    width: 30px;
    height: 30px;
    background-position: -814px -772px;
}

.micParamTip .miCancelMutetip b:hover {
    background-position: -867px -772px;
}

.micParamTip .miCancelMutetip b:active {
    background-position: -916px -772px;
}


/*.micCanceltip{*/


/*overflow: hidden;*/


/*text-overflow: ellipsis;*/


/*white-space: nowrap;*/


/*}*/

.speak-bar {
    height: 36px;
    line-height: 36px;
    width: 0;
    background-color: rgba(0, 100, 0, 0.8);
    position: absolute;
    bottom: 140px;
    color: #ebebeb;
    cursor: move;
    z-index: 10;
    /*overflow: hidden;*/
}

.speak-bar-anima {
    transition: right 0.3s linear;
}

.speak-body {
    display: inline-block;
    overflow: hidden;
    width: 100%;
}

.speak-icon {
    display: inline-block;
    float: left;
    margin: 10px 8px 0 8px;
    background-position: -1422px -277px;
    width: 20px;
    height: 16px;
}


/*.speak-bar-title{*/


/*display: inline-block;*/


/*margin-left: 16px;*/


/*overflow: hidden;*/


/*float: left;*/


/*}*/

.speak-bar-name {
    display: inline-block;
    /*max-width: 160px;*/
    float: left;
}

.speak-bar .speak-bar-name:last-child {
    margin-right: 12px;
}


/*@media screen and (min-width: 1400px ) and (max-width:1720px){*/


/*.speak-bar-name{*/


/*max-width: 335px;*/


/*}*/


/*}*/


/*@media screen and (max-width:1400px){*/


/*.speak-bar-name{*/


/*max-width: 204px;*/


/*}*/


/*}*/

.speak-bar-mark {
    display: inline-block;
    float: left;
    margin-right: 6px;
    margin-left: 2px;
}

.speak-drag {
    background-position: -1309px -277px;
    width: 12px;
    height: 36px;
    position: absolute;
    left: -12px;
}

.speak-bar-press {
    background-color: rgba(45, 60, 81, 0.6);
}

.speak-bar-press .speak-bar-name {
    color: rgba(235, 235, 235, 0.6);
}

.speak-bar-press .speak-icon {
    background-position: -1488px -277px;
}

.speak-bar-press .speak-drag {
    background-position: -1366px -277px;
}

.speak-bar-press .voiceSubBtn {
    opacity: 0.6;
}


/**/

.paneList-box .alert-title-white p {
    padding-top: 18px;
}

.paneList-box .alert-content-top0 {
    padding: 5px 36px 0 28px;
}


/**/

.main-polling-box {
    min-width: 704px;
    /*height: 540px;*/
}

.main-polling-title {
    height: 35px;
    line-height: 35px;
}

.main-polling-title .bg-polling {
    height: 16px;
    float: left;
    margin-top: 10px;
}

.main-polling-body {
    margin: 13px 2px 0;
    overflow: hidden;
    min-height: 300px;
}

.poll-model-area,
.tiled-model-area {
    margin: 0 32px 20px;
    border-bottom: 1px solid #dedede;
}

.poll-box-title {
    display: block;
    font-size: 16px;
    margin: 8px 0;
    color: #333;
    font-weight: bold;
}

.tiles-style {
    background: #f1f2f7;
    width: 540px;
    position: absolute;
    z-index: 99;
    border: 1px solid #dbdbdb;
    padding-left: 20px;
    padding-top: 20px;
    border-radius: 4px;
    top: 8px;
    box-shadow: 0px 2px 8px rgba(9, 2, 4, .2);
}

.main-style {
    background: #f1f2f7;
    width: 540px;
    position: absolute;
    border: 1px solid #dbdbdb;
    z-index: 99;
    padding-left: 20px;
    padding-top: 20px;
    border-radius: 4px;
    top: 8px;
    box-shadow: 0px 2px 8px rgba(9, 2, 4, .2);
}

.model-box {
    width: 110px;
    height: 86px;
    float: left;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline-block;
}

.poll-model-area {
    width: 86px;
}

.model-poll-txt {
    margin-top: 7px;
    font-size: 14px;
    line-height: 16px;
    color: #333333;
    padding: 0 8px
}

.poll-icon {
    width: 60px;
    height: 44px;
    margin-top: 10px;
}

.poll-one:hover,
.poll-three:hover,
.poll-five:hover,
.poll-seven:hover,
.tiled-one:hover,
.tiled-two:hover,
.tiled-three:hover,
.tiled-four:hover,
.tiled-five:hover,
.tiled-six:hover,
.tiled-seven:hover,
.tiled-zero:hover {
    background: #edfde2;
    border-color: #edfde2;
}

.poll-one-icon {
    background-position: -1620px -346px;
}

.poll-three-icon {
    background-position: -1847px -84px;
}

.poll-five-icon {
    background-position: -1922px -84px;
}

.poll-seven-icon {
    background-position: -1620px -148px;
}

.tiles-auto-icon {
    width: 60px;
    height: 44px;
    background-position: -1620px -20px;
    margin-top: 10px;
}

.tiles-2-icon {
    width: 60px;
    height: 44px;
    background-position: -1696px -20px;
    margin-top: 10px;
}

.tiles-4-icon {
    width: 60px;
    height: 44px;
    background-position: -1771px -20px;
    margin-top: 10px;
}

.tiles-9-icon {
    width: 60px;
    height: 44px;
    background-position: -1847px -20px;
    margin-top: 10px;
}

.tiles-16-icon {
    width: 60px;
    height: 44px;
    background-position: -1922px -20px;
    margin-top: 10px;
}

.tiles-25-icon {
    width: 60px;
    height: 44px;
    background-position: -1620px -84px;
    margin-top: 10px;
}

.tiles-36-icon {
    width: 60px;
    height: 44px;
    background-position: -1696px -84px;
    margin-top: 10px;
}

.tiles-49-icon {
    width: 60px;
    height: 44px;
    background-position: -1771px -84px;
    margin-top: 10px;
}

.poll-choosed {
    border-color: #79bd9a;
    background: #79bd9a;
    cursor: default;
}

.poll-choosed:hover {
    border-color: #79bd9a;
    background: #79bd9a;
}

.poll-choosed .tiles-auto-icon {
    width: 60px;
    height: 44px;
    background-position: -1696px -148px;
}

.poll-choosed .tiles-2-icon {
    width: 60px;
    height: 44px;
    background-position: -1771px -148px;
}

.poll-choosed .tiles-4-icon {
    width: 60px;
    height: 44px;
    background-position: -1847px -148px;
}

.poll-choosed .tiles-9-icon {
    width: 60px;
    height: 44px;
    background-position: -1922px -148px;
}

.poll-choosed .tiles-16-icon {
    width: 60px;
    height: 44px;
    background-position: -1620px -212px;
}

.poll-choosed .tiles-25-icon {
    width: 60px;
    height: 44px;
    background-position: -1696px -212px;
}

.poll-choosed .tiles-36-icon {
    width: 60px;
    height: 44px;
    background-position: -1771px -212px;
}

.poll-choosed .tiles-49-icon {
    width: 60px;
    height: 44px;
    background-position: -1847px -212px;
}

.poll-choosed .poll-one-icon {
    width: 60px;
    height: 44px;
    background-position: -1696px -346px;
}

.poll-choosed .poll-three-icon {
    width: 60px;
    height: 44px;
    background-position: -1922px -212px;
}

.poll-choosed .poll-five-icon {
    width: 60px;
    height: 44px;
    background-position: -1620px -276px;
}

.poll-choosed .poll-seven-icon {
    width: 60px;
    height: 44px;
    background-position: -1696px -276px;
}

.set-main-title {
    margin: 8px 32px;
}

.poll-video-list {
    height: 40px;
    line-height: 40px;
    margin: 0 32px;
    cursor: pointer;
    border-bottom: 1px solid #ebebeb;
}


/*.poll-video-list:hover{*/


/*background: #1f644c;*/


/*color: #fff;*/


/*}*/

.poll-video-list span:first-child {
    padding: 0 6px;
    max-width: 340px;
    display: block;
    float: left;
}

.poll-video-list b {
    margin: 11px 6px;
    height: 18px;
    width: 18px;
    float: right;
    background-position: -365px -893px;
}

.poll-video-list b.poll-checked {
    background-position: -365px -850px;
}

.opt-polling {
    display: inline-block;
    height: 14px;
}

.opt-main-name {
    color: #8b9296;
    max-width: 108px;
    margin-left: 10px;
    cursor: pointer;
    display: block;
    float: right;
    font-size: 12px;
    height: 16px;
    line-height: 14px;
}

.opt-main-name:hover {
    text-decoration: underline;
    color: #1f644c;
}

.tipMainChoose {
    text-decoration: underline;
    color: #1f644c;
    cursor: pointer;
}


/* .main-polling-box .alert-bottom{
    padding: 20px 30px 30px;
} */


/**/

.exload-mask {
    display: none;
    position: absolute;
    width: 100%;
    height: 245px;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

.exLoading {
    background-image: url("../../img/conference/webrtc_video_loading0000.gif?1.0.15.7");
    background-size: cover;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    /* animation: loading 1.5s linear infinite; */
}

.exchange-area,
.watch-exchange-area {
    position: relative;
    display: flex;
    width: 100%;
}

.exchange-area_left {
    float: left;
    width: 60%;
    border-right: 1px solid #ededed;
}

.exchange-area_right {
    float: right;
    width: 40%;
}

.ex-selected-area {
    position: relative;
    /*overflow: hidden;*/
    border: none;
    /*border-top: 1px solid #dedede;*/
    /*border-right:1px solid #dedede;*/
}

.ex-choose-area {
    overflow: hidden;
    /*height: 325px;*/
    border: none;
    /*border-top: 1px solid #dedede;*/
}

.watch-selected-area {
    position: relative;
    /*overflow: hidden;*/
    border: none;
    /*border-right:1px solid #dedede;*/
}

.watch-choose-area {
    overflow: hidden;
    border: none;
}

.ex-sift-box {
    position: relative;
    padding: 2px 0 5px;
    cursor: text;
    zoom: 1;
    height: 30px;
    vertical-align: middle;
}

.ex-sift-input,
.watch-sift-input {
    display: block;
    width: 93%;
    height: 30px;
    margin-left: 2%;
    padding-left: 2%;
    font-size: 14px;
    line-height: 1.42857143;
    color: #999999;
    background-color: #fff;
    border: 1px solid #dedede;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

b.ex-sift-clear {
    width: 18px;
    height: 18px;
    background-position: -1475px -75px;
    position: absolute;
    right: 8px;
    top: 9px;
    cursor: pointer;
}

b.ex-sift-search {
    width: 18px;
    height: 18px;
    background-position: -1247px -352px;
    position: absolute;
    right: 12px;
    top: 10px;
}

.ex-choose-list,
.watch-all-list {
    overflow: hidden;
    margin-top: 4px;
}

.watch-all-list {
    height: 293px;
}

.ex-choose-list li {
    padding-left: 11px;
    margin: 0 6px 2px 4px;
    height: 38px;
    display: inherit;
}

.watch-all-list li {
    margin: 0 6px 2px 4px;
    height: 38px;
    line-height: 36px;
    display: inherit;
}

.b-selected-icon {
    width: 10px;
    height: 38px;
    background-position: -1247px -384px;
    display: none;
}

.ex-selected-list li,
.ex-sel-fixed-list li,
.ex-fixed-list li,
.watch-selected-list li {
    margin: 0 4px 2px;
    height: 38px;
    padding-left: 20px;
    position: relative;
    user-select: none;
}

.watch-selected-list li {
    line-height: 36px;
    padding-left: 10px;
}

.ex-choose-list li:hover,
.ex-fixed-list li:hover,
.watch-all-list li:hover {
    background: #12584d;
}

.ex-selected-list li:hover,
.ex-sel-fixed-list li:hover,
.watch-selected-list li:hover {
    background: #12584d;
    /*cursor: move;*/
}

.ex-selected-list li.noMoveCursor:hover,
.ex-sel-fixed-list li.noMoveCursor:hover {
    cursor: default;
}

.ex-camera {
    width: 30px;
    height: 30px;
    display: inline-block;
    background-position: -1500px -345px;
    margin: 5px 0;
}

.ex-select-camera {
    background-position: -1372px -1208px;
}

.ex-has-cam {
    background-position: -1395px -346px;
}

.ex-select-has-cam {
    background-position: -1247px -1208px;
}

.ex-user,
.ex-user-mark {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    height: 27px;
    line-height: 27px;
}

.ex-user-mark {
    padding-left: 12px;
}

.ex-user {
    margin-left: 12px;
}

.ex-user-mark {
    padding-left: 5px;
}

.no-main-icon-tips {
    padding: 0 26px;
    height: 38px;
}

.ex-tip {
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    padding-left: 12px;
    padding-top: 8px;
    color: #db1010;
    vertical-align: middle;
}

.focus-custom-tip {
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    padding-left: 12px;
    padding-top: 8px;
    color: #999999;
    vertical-align: middle;
}

.ex-icon {
    height: 38px;
    width: 10px;
    background-position: -1247px -384px;
    display: none;
    position: absolute;
    left: 0
}

.ex-sel-fixed-list {
    position: relative;
}

.ex-sel-fixed-list li .ex-user {
    max-width: 42%;
}

.watch-selected-list li .ex-user {
    max-width: 54%;
}


/**/


/*.ex-selected-list li:hover .ex-icon,.ex-sel-fixed-list li:hover .ex-icon{*/


/*display: inline-block;*/


/*}*/

.ex-icon-move {
    background-position: -1301px -384px;
}

.ex-choose-list .choose-to-main,
.ex-choose-list .remove-selected,
.watch-all-list .remove-selected {
    display: none;
}

.ex-choose-list .ex-user {
    max-width: 210px;
}

.ex-selected-list .ex-user {
    max-width: 160px;
}

.ex-selected-list,
.ex-fixed-box,
.watch-selected-list {
    overflow: hidden;
    margin-top: 4px;
    width: 100%;
}

.watch-selected-list {
    height: 330px;
}

.ex-selected-list .remove-selected {
    display: inline-block;
}

.ex-user-show-li .ex-user {
    max-width: 250px;
}

.choose-to-main {
    height: 24px;
    width: 20px;
    background-position: -1247px -1266px;
    float: right;
    cursor: pointer;
    margin-top: 6px;
    margin-right: 21px;
    display: none;
}

.ex-camera-li:hover .choose-to-main {
    display: block;
}

.ex-user-li .remove-selected,
.ex-user-li .choose-to-main,
.ex-user-li .choose-to-main {
    display: none
}

.soloLay .ex-user-li .choose-to-main,
.soloLay .ex-user-li .choose-to-main {
    display: inline-block
}

.soloLay .ex-user-li .set-fixed-btn,
.soloLay .ex-user-li .set-fixed-btn {
    display: none
}

.remove-selected {
    width: 17px;
    height: 22px;
    background-position: -1475px -72px;
    float: right;
    cursor: pointer;
    margin-top: 6px;
    margin-right: 9px;
}

.remove-selected:hover {
    background-position: -1521px -72px;
}

.set-fixed-btn {
    height: 17px;
    width: auto;
    float: right;
    cursor: pointer;
    margin-right: 10px;
    padding: 12px 28px 9px 10px;
    line-height: 14px;
    position: relative;
    font-weight: normal;
    text-align: right;
    display: none;
}

.set-fixed-btn b {
    position: absolute;
    right: 10px;
    top: 6px;
    height: 22px;
    width: 14px;
    background-position: -1586px -414px;
}

.set-fixed-btn span {
    color: #a2afbf;
}

.set-fixed-btn:hover {
    background-color: #79bd9a;
}

.set-fixed-btn:hover b {
    background-position: -1586px -382px;
}

.set-fixed-btn:hover span {
    color: #1f644c;
}

.ex-fixed-box .set-fixed-btn,
.ex-cam-fixed-box .set-fixed-btn {
    display: inline-block;
}

.ex-fixed-box .choose-to-main {
    display: none;
}

.watch-choose-area .set-fixed-btn {
    display: none;
}

.fixedBox {
    position: absolute;
    width: 194px;
    z-index: 5;
    padding: 0 27px;
    background: #f1f2f7;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: 0px 2px 8px rgba(9, 2, 4, .2)
}

.fixed-title {
    height: 32px;
    line-height: 32px;
    color: #333;
}

.fixed-list {
    height: 158px;
}

.fix-main-icon {
    width: 26px;
    height: 25px;
    display: block;
    margin: 0 auto;
    background-position: -1556px -984px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.fix-main-icon span {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 14px;
    font-weight: normal;
}

.unselect-btn {
    height: 24px;
    line-height: 24px;
    margin: 10px 0;
    border: 1px solid #D6DAE0;
    border-radius: 2px;
    text-align: center;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.unselect-btn:hover {
    background: #efefef;
}

.forbid-select,
.forbid-select:hover {
    color: #999;
    cursor: not-allowed;
    background: #fff;
}

.fixedChoose {
    display: inline-block;
    background: #5ab883;
    color: #fff;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.fixed-arrow {
    position: absolute;
}

.ex-fixed-box .fixChoosing {
    background: #d3f6d6;
}

.ex-cam-fixed-box .fixChoosing {
    background: #dcffdc;
}

.fixChoosing .set-fixed-btn {
    background-position: -1561px -376px;
    color: #1f644c;
}

.fixedOther {
    background: #629658;
}

.fixChoosed {
    background: #1f644c;
}

.fl {
    float: left;
}

.is-choose-main {
    height: 24px;
    width: 20px;
    background-position: -1309px -1266px;
    display: block;
}

.focus-fixed {
    background: #333;
}

.ex-camera-list .focus-fixed:hover {
    background: #333;
}

.carousel-time .selectbox,
.subtitle-show-time .selectbox {
    height: 30px;
    width: 120px;
    line-height: 30px;
    padding: 0 5px;
    border: 1px solid #d6dae0;
    margin-left: 16px;
}


/* .carousel-time .selectbox:hover{
	background: #e2f1fd;
} */

.ex-hide-box,
.subt-hide-box {
    background: #fff;
    border: 1px solid #d6dae0;
    position: absolute;
    width: 128px;
    left: -1px;
    bottom: 32px;
    border-radius: 2px;
    padding: 1px;
    font-size: 14px;
    color: #333333;
    box-shadow: 0 0 5px rgba(9, 2, 4, .3);
    height: 190px;
    overflow: auto;
}

.ex-hide-box div,
.subt-hide-box div {
    display: block;
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    border: 1px solid #fff;
}

.ex-hide-box div:hover,
.subt-hide-box div:hover {
    background: #e2f1fd;
    cursor: pointer;
}

.carousel-control {
    position: absolute;
    bottom: 86px;
    right: 16px;
    overflow: hidden;
    transition: right 0.3s linear
}

.car-btn {
    display: inline-block;
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-left: 6px;
}

.car-set-main {
    background-position: -1473px -627px
}

.car-join {
    background-position: -1399px -627px
}

.car-end {
    background-position: -1547px -627px
}

.ex-choose-head,
.watch-choose-head {
    height: 34px;
    border-top: 1px solid #ededed;
    margin-right: 12px;
}

.ex-choose-head:after,
.watch-choose-head:after {
    content: '';
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.ex-choose-title {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    padding-left: 14px;
    padding-top: 2px;
    line-height: 16px;
    vertical-align: middle;
}

.ex-selected-head,
.watch-selected-head {
    height: 34px;
    border-top: 1px solid #ededed;
    margin-left: 12px;
}

.watch-selected-head,
.watch-choose-head {
    border: none;
}


/*.watch-selected-head{*/


/*cursor: pointer;*/


/*}*/

.ex-selected-head:after,
.watch-selected-head:after {
    content: '';
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.ex-selected-title {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    padding-left: 14px;
    padding-top: 2px;
    line-height: 16px;
    vertical-align: middle;
}

.camera-area .ex-selected-title {
    height: 34px;
    line-height: 34px;
    padding-top: 0;
    padding-left: 14px;
    border-top: 1px solid #ededed;
    margin: 0 12px;
}

.camera-area .select-focus-title {
    border-top: none
}

.camera-area .select-focus-tip {
    font-weight: normal;
    color: #999999;
}

.speaker-state-icon {
    background-position: -1169px -416px;
    width: 14px;
    height: 16px;
    vertical-align: middle;
    margin-left: 15px;
}

.speaker-state-text {
    font-weight: normal;
    color: #db0101;
    font-size: 12px;
}

.speaker-state-name {
    max-width: 360px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.main-polling-box .alert-bottom {
    padding-top: 12px;
}


/*.watch-selected-head .ex-selected-title{*/


/*padding-left: 36px;*/


/*}*/


/**/

.posiNull .set-fixed-btn {
    display: none;
}

.posiNull .btn-select {
    display: none;
}


/*.posiNull .free-to-carousel{*/


/*pointer-events: none;*/


/*}*/

.posiNull .free-to-carousel .text-style {
    color: #cccccc;
    cursor: default;
}

.btn-select {
    display: inline-block;
    height: 19px;
    cursor: pointer;
    float: right;
    padding-right: 0;
    font-size: 12px;
    color: #1f644c;
    padding-top: 10px;
}

.btn-select:hover {
    text-decoration: underline;
}

.exchange-area_left .btn-select {
    padding-right: 14px;
}

.watch-cancel-all {
    padding-top: 0;
    margin-top: 10px;
    /*line-height: 10px;*/
}

.btn-exchange-more {
    background-position: -429px -880px;
    width: 24px;
}

.btn-exchange-more:hover {
    background-position: -488px -880px;
}

.btn-exchange-more:active {
    background-position: -546px -880px;
}

.ex-more-hide-box {
    position: absolute;
    min-width: 100px;
    right: 12px;
    top: 30px;
    border-radius: 2px;
    padding: 1px;
    font-size: 14px;
    color: #333333;
    box-shadow: 0 0 5px rgba(9, 2, 4, .3);
    background-color: #fff;
    z-index: 10;
}

.ex-selected-title .ex-more-hide-box {
    right: 0;
}

.ex-more-hide-box div {
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    border: 1px solid #fff;
    font-weight: normal;
}

.ex-more-hide-box div:hover {
    background: #e2f1fd;
    cursor: pointer;
}

.camera-area {
    overflow: hidden;
    border: none;
    /*border-top: 1px solid #dedede;*/
    display: none;
    position: relative;
}

.all-area-title {
    display: none;
    position: relative;
}

.ex-camera-list {
    overflow: hidden;
    margin-top: 4px;
}

.ex-cam-fixed-box {
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 50px;
}

.ex-camera-list li,
.ex-cam-fixed-box li {
    padding-left: 20px;
    padding-right: 20px;
    height: 38px;
    margin: 0 4px 2px;
}

.ex-camera-list li:hover,
.ex-cam-fixed-box li:hover {
    background: #12584d;
}

.ex-camera-list .ex-user,
.ex-cam-fixed-box .ex-user {
    max-width: 450px;
}

.ex-camera-list .remove-selected {
    display: inline-block;
}

.bg-optRadio,
.radio-main-style,
.radio-tiles-style,
.radio-layout,
.smart-layout {
    width: 19px;
    height: 19px;
    display: inline-block;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    vertical-align: middle;
}

.bg-unradio {
    background-position: -365px -893px;
}

.bg-seradio {
    background-position: -365px -850px;
}

.main-polling-body .bg-optRadio,
.main-polling-body .radio-layout {
    cursor: pointer;
}

.main-polling-body .posiNull .free-to-carousel .bg-optRadio {
    cursor: default;
}


/**/

@media screen and (max-height: 720px) {
    .ex-camera-list {
        height: 210px;
    }
    .ex-selected-list,
    .ex-fixed-box,
    .ex-cam-fixed-box {
        height: 160px;
    }
    .isSolo .ex-selected-list,
    .isSolo .ex-fixed-box {
        height: 210px;
    }
    .isSolo .ex-cam-fixed-box {
        margin-bottom: 0;
        height: 210px;
    }
    .watch-selected-list {
        height: 254px;
    }
    .ex-choose-list {
        height: 173px;
    }
    .watch-all-list {
        height: 216px;
    }
    .watch-choose-area,
    .watch-selected-area {
        height: 292px;
    }
    .ex-choose-area,
    .ex-selected-area {
        height: 249px;
    }
    .main-polling-body .selected-empty,
    .main-polling-body .no-choose-attendee {
        margin-top: 70px;
    }
    .main-polling-body .lay-watch-body .selected-empty,
    .main-polling-body .no-watch-attendee {
        margin-top: 90px;
    }
}


/*@media screen and (min-height: 680px ) and (max-height: 720px){*/


/*.ex-camera-list{*/


/*height: 232px;*/


/*}*/


/*.ex-selected-list,.ex-fixed-box,.ex-cam-fixed-box{*/


/*height: 182px;*/


/*}*/


/*.watch-selected-list{*/


/*height: 276px;*/


/*}*/


/*.ex-choose-list{*/


/*height: 195px;*/


/*}*/


/*.watch-all-list{*/


/*height: 260px;*/


/*}*/


/*.watch-choose-area,.watch-selected-area{*/


/*height: 314px;*/


/*}*/


/*.ex-choose-area,.ex-selected-area{*/


/*height:271px;*/


/*}*/


/*}*/

@media screen and (min-height: 720px) and (max-height: 800px) {
    .ex-camera-list {
        height: 252px;
    }
    .ex-selected-list,
    .ex-fixed-box,
    .ex-cam-fixed-box {
        height: 202px;
    }
    .isSolo .ex-selected-list,
    .isSolo .ex-fixed-box {
        height: 252px;
    }
    .isSolo .ex-cam-fixed-box {
        margin-bottom: 0;
        height: 252px;
    }
    .watch-selected-list {
        height: 296px;
    }
    .ex-choose-list {
        height: 215px;
    }
    .watch-all-list {
        height: 258px;
    }
    .watch-choose-area,
    .watch-selected-area {
        height: 334px;
    }
    .ex-choose-area,
    .ex-selected-area {
        height: 291px;
    }
    .main-polling-body .selected-empty,
    .main-polling-body .no-choose-attendee {
        margin-top: 85px;
    }
    .main-polling-body .lay-watch-body .selected-empty,
    .main-polling-body .no-watch-attendee {
        margin-top: 105px;
    }
}

@media screen and (min-height: 800px) and (max-height: 900px) {
    .ex-camera-list {
        height: 332px;
    }
    .ex-selected-list,
    .ex-fixed-box,
    .ex-cam-fixed-box {
        height: 282px;
    }
    .isSolo .ex-selected-list,
    .isSolo .ex-fixed-box {
        height: 332px;
    }
    .isSolo .ex-cam-fixed-box {
        margin-bottom: 0;
        height: 332px;
    }
    .watch-selected-list {
        height: 376px;
    }
    .ex-choose-list {
        height: 295px;
    }
    .watch-all-list {
        height: 338px;
    }
    .watch-choose-area,
    .watch-selected-area {
        height: 414px;
    }
    .ex-choose-area,
    .ex-selected-area {
        height: 371px;
    }
}

@media screen and (min-height: 900px) {
    .ex-camera-list {
        height: 370px;
    }
    .ex-selected-list,
    .ex-fixed-box,
    .ex-cam-fixed-box {
        height: 320px;
    }
    .isSolo .ex-selected-list,
    .isSolo .ex-fixed-box {
        height: 370px;
    }
    .isSolo .ex-cam-fixed-box {
        margin-bottom: 0;
        height: 370px;
    }
    .watch-selected-list {
        height: 414px;
    }
    .ex-choose-list {
        height: 333px;
    }
    .watch-all-list {
        height: 376px;
    }
    .watch-choose-area,
    .watch-selected-area {
        height: 452px;
    }
    .ex-choose-area,
    .ex-selected-area {
        height: 409px;
    }
}

.tiled-layout-icon {
    height: 34px;
    width: 40px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    /*background-position: -1434px -859px;*/
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}

.focus-layout-icon {
    height: 34px;
    width: 40px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    background-position: -1545px -917px;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}

.focus-layout-tip-icon {
    background-position: -1607px -978px;
}

.tiled-layout-tip-icon {
    background-position: -1607px -1023px;
}

.main-layout-icon {
    height: 34px;
    width: 40px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    /*background-position: -1490px -917px;*/
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}

.init-icon-0 {
    background-position: -1247px -859px;
}

.init-icon-a {
    background-position: -1309px -859px;
}

.init-icon-b {
    background-position: -1372px -859px;
}

.init-icon-c {
    background-position: -1434px -859px;
}

.init-icon-d {
    background-position: -1247px -917px;
}

.init-icon-e {
    background-position: -1309px -917px;
}

.init-icon-f {
    background-position: -1372px -917px;
}

.init-icon-g {
    background-position: -1434px -917px;
}

.init-icon-1 {
    background-position: -1490px -859px;
}

.init-icon-2 {
    background-position: -1545px -859px;
}

.init-icon-3 {
    background-position: -1490px -917px;
}

.init-icon-4 {
    background-position: -1607px -859px;
}

.init-icon-not {
    background-position: -1680px -1408px;
}


/*.init-icon-not{*/


/*background-position: -1680px -917px;*/


/*}*/


/*.forbid .init-icon-not{*/


/*background-position: -1680px -1408px;*/


/*}*/

.line {
    height: 1px;
    border: none;
    border-top: 1px solid #555555;
}

.no-main-icon {
    width: 27px;
    height: 21px;
    background-position: -1404px -384px;
    display: inline-block;
    margin-top: 8px;
}

.has-main-iocn {
    width: 27px;
    height: 21px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    background-position: -1339px -384px;
    display: inline-block;
    margin-left: 26px;
    margin-top: 11px;
}

.focus-auto-icon {
    width: 27px;
    height: 21px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    background-position: -1339px -384px;
    display: inline-block;
    margin-top: 11px;
}

.focus-main-iocn {
    width: 27px;
    height: 21px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    background-position: -1339px -384px;
    display: inline-block;
    margin-left: 24px;
    margin-top: 11px;
}

.focus-main-icon-tips {
    margin-bottom: 5px;
    display: none;
}

.focus-icon {
    width: 27px;
    height: 38px;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") no-repeat;
    background-position: -1339px -376px;
}

.tiled-choose-box,
.main-select-box {
    position: absolute;
}

.select-tiles-style,
.select-main-style,
.select-focus-style {
    height: 44px;
    min-width: 148px;
    border: 1px solid #D6DAE0;
    text-align: left;
    /* background-color: #ffffff; */
    background-color: transparent;
    position: relative;
    display: inline-block;
    margin-left: 4px;
}

.style-selected {
    border: 1px solid #1f644c;
}

.main-layout-type,
.tiles-layout-type {
    vertical-align: middle;
}

.down {
    z-index: 3;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") -634px -632px no-repeat;
    height: 15px;
    width: 15px;
    position: absolute;
    right: 0;
    top: 14px;
}

.up {
    z-index: 3;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") -577px -632px no-repeat;
    height: 15px;
    width: 15px;
    position: absolute;
    right: 0;
    top: 14px;
}

.icon-arr {
    z-index: 3;
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") -634px -632px no-repeat;
    height: 15px;
    width: 15px;
    position: absolute;
    right: 0;
    top: 7px;
    cursor: pointer;
}

.icon-tip {
    padding: 5px 10px;
    color: #666;
    background-color: #f1f2f7;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    display: inline-block;
    position: absolute;
    z-index: 99;
    /*white-space: nowrap;*/
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    /*text-overflow: ellipsis;*/
    /*overflow: hidden;*/
}

.tip-arrow {
    background: url("../../img/conference/webrtc_icon.png?1.0.15.7") -696px -788px no-repeat;
    width: 10px;
    height: 8px;
    position: absolute;
    z-index: 100;
}

.tiles-input-box,
.main-input-box,
.focus-input-box {
    height: 44px;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    background: #000;
    margin-right: 20px;
    cursor: pointer;
}

.lay-choose-arr {
    cursor: pointer;
}


/* .tiles-input-box:hover,.main-input-box:hover ,.focus-input-box:hover{
	background: #e2f1fd;
} */

.text-bold-style {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

.car-num-area {
    display: inline-block;
    color: #fff;
    margin-left: 6px;
    font-size: 14px;
    /*font-weight: bold;*/
    vertical-align: middle;
}

.input-text-style,
.text-style {
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    cursor: pointer;
}

.text-input-tiles-style,
.text-input-layout,
.text-input-main-style {
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    display: inline-block;
}

.layout-name {
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    display: inline-block;
    padding-left: 6px;
}


/*.focus-style-icon{*/


/*height: 34px;*/


/*width: 40px;*/


/*background-position: -1545px -1145px;*/


/*display: inline-block;*/


/*vertical-align: middle;*/


/*margin: 5px;*/


/*}*/

.selected-empty {
    width: 266px;
    color: #999999;
    font-size: 14px;
    margin: 15vh auto 0;
    text-align: center;
}

.lay-watch-body .selected-empty {
    margin: 18vh auto 0;
}

.no-choose-attendee,
.no-search-result,
.no-watch-attendee,
.sift-not-found {
    color: #999999;
    font-size: 14px;
    margin-left: 12px;
    margin-right: 12px;
    word-wrap: break-word;
}

.sift-not-found {
    margin-top: 6px;
    margin-left: 14px;
    margin-right: 6px;
    height: 28px;
}

.no-choose-attendee,
.no-watch-attendee {
    text-align: center;
    margin-top: 15vh;
}

.no-watch-attendee {
    margin-top: 18vh;
}

.model-tiled-txt {
    word-wrap: break-word;
    line-height: 14px;
    margin-top: 3px;
}

.tiles-style-arrow,
.main-style-arrow {
    background-position: -731px -789px;
    width: 15px;
    height: 7px;
    position: absolute;
    left: 20px;
    top: 2px;
    z-index: 100;
}

.tiles-style-icon,
.main-style-icon {
    height: 34px;
    width: 40px;
    display: inline-block;
    margin: 5px;
}

.style-selected .init-icon-0,
.lay-state-now .init-icon-0,
.layoutTip .init-icon-0 {
    background-position: -1247px -1087px;
}

.style-selected .init-icon-a,
.lay-state-now .init-icon-a,
.layoutTip .init-icon-a {
    background-position: -1309px -1087px;
}

.style-selected .init-icon-b,
.lay-state-now .init-icon-b,
.layoutTip .init-icon-b {
    background-position: -1372px -1087px;
}

.style-selected .init-icon-c,
.lay-state-now .init-icon-c,
.layoutTip .init-icon-c {
    background-position: -1434px -1087px;
}

.style-selected .init-icon-d,
.lay-state-now .init-icon-d,
.layoutTip .init-icon-d {
    background-position: -1247px -1145px;
}

.style-selected .init-icon-e,
.lay-state-now .init-icon-e,
.layoutTip .init-icon-e {
    background-position: -1309px -1145px;
}

.style-selected .init-icon-f,
.lay-state-now .init-icon-f,
.layoutTip .init-icon-f {
    background-position: -1372px -1145px;
}

.style-selected .init-icon-g,
.lay-state-now .init-icon-g,
.layoutTip .init-icon-g {
    background-position: -1434px -1145px;
}

.style-selected .init-icon-1,
.lay-state-now .init-icon-1,
.layoutTip .init-icon-1 {
    background-position: -1490px -1087px;
}

.style-selected .init-icon-2,
.lay-state-now .init-icon-2,
.layoutTip .init-icon-2 {
    background-position: -1545px -1087px;
}

.style-selected .init-icon-3,
.lay-state-now .init-icon-3,
.layoutTip .init-icon-3 {
    background-position: -1490px -1145px;
}

.style-selected .init-icon-4,
.lay-state-now .init-icon-4,
.layoutTip .init-icon-4 {
    background-position: -1607px -1087px;
}

.style-selected .focus-layout-icon,
.lay-state-now .focus-layout-icon,
.layoutTip .focus-layout-icon {
    background-position: -1545px -1145px;
}


/**/

.opt-layout.disable .init-icon-0,
.opt-layout.forbid .init-icon-0 {
    background-position: -1247px -1350px;
}

.opt-layout.disable .init-icon-a,
.opt-layout.forbid .init-icon-a {
    background-position: -1309px -1350px;
}

.opt-layout.disable .init-icon-b,
.opt-layout.forbid .init-icon-b {
    background-position: -1372px -1350px;
}

.opt-layout.disable .init-icon-c,
.opt-layout.forbid .init-icon-c {
    background-position: -1434px -1350px;
}

.opt-layout.disable .init-icon-d,
.opt-layout.forbid .init-icon-d {
    background-position: -1247px -1408px;
}

.opt-layout.disable .init-icon-e,
.opt-layout.forbid .init-icon-e {
    background-position: -1309px -1408px;
}

.opt-layout.disable .init-icon-f,
.opt-layout.forbid .init-icon-f {
    background-position: -1372px -1408px;
}

.opt-layout.disable .init-icon-g,
.opt-layout.forbid .init-icon-g {
    background-position: -1434px -1408px;
}

.opt-layout.disable .init-icon-1,
.opt-layout.forbid .init-icon-1 {
    background-position: -1490px -1350px;
}

.opt-layout.disable .init-icon-2,
.opt-layout.forbid .init-icon-2 {
    background-position: -1545px -1350px;
}

.opt-layout.disable .init-icon-3,
.opt-layout.forbid .init-icon-3 {
    background-position: -1490px -1408px;
}

.opt-layout.disable .init-icon-4,
.opt-layout.forbid .init-icon-4 {
    background-position: -1607px -1350px;
}

.opt-layout.forbid {
    color: #8b9296;
    cursor: default;
}

.tiles-text,
.focus-text,
.main-text {
    min-width: 150px;
    display: inline-block;
}


/**/

.layoutLeaveLi .ex-user,
.layoutLeaveLi .ex-user-mark {
    color: #999;
}

.layoutLeaveLi .ex-camera {
    background-position: -1434px -1214px;
}

.alertbox-icon {
    height: 15px;
    width: 15px;
    background-position: -1169px -416px;
}

.alertbox-text {
    font-size: 14px;
    vertical-align: middle;
    color: #db1010;
}

.alertbox-tips {
    padding: 2px 20px;
    min-height: 25px;
    max-width: 600px;
    background-color: #ffffff;
    border: 1px solid #d1d6d9;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .2);
    z-index: 9999;
    position: absolute;
}


/**/

.ipvt-living-waiting-box {
    width: 360px;
}

.ipvt-living-waiting-info {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ipvt-living-waiting-close {
    background-image: url("../../img/conference/webrtc_icon.png?1.0.15.7");
    background-position: -237px -407px;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.ipvt-living-waiting-text {
    margin-left: 2px;
    line-height: 44px;
    text-align: center;
}

.ipvt-living-box {
    width: 550px;
}

.ipvt-living-title {
    line-height: 35px;
}

.ipvt-living-body {
    margin: 0 45px;
}

#ipvt-live-url {
    border: 1px solid #999;
    height: 32px;
    line-height: 32px;
    width: 75%;
    float: left;
    padding: 0 2%;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-right: none;
}

.ipvt-live-copy {
    border: 1px solid #1f644c;
    width: 20%;
    float: left;
    text-align: center;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ipvt-url-box {
    height: 32px;
}

.ipvt-live-title {
    margin: 10px 0;
    color: #666;
}

.qr-code-title {
    margin-top: 10px;
    color: #666;
}

#live-qr-code {
    text-align: center;
    margin-top: 12px;
    margin-bottom: 30px;
}

.re-ipvt-btn {
    padding-top: 10px;
    border-top: 1px solid #dadada;
}

.replace-ipvtlive-box {
    width: auto;
    min-width: 410px;
    max-width: 530px;
}


/**/

.other-living-box {
    width: 550px;
}

.other-living-title {
    line-height: 35px;
}

.other-living-body {
    margin: 0 45px;
}

.other-living-tip {
    text-align: center;
    color: #999;
    margin-bottom: 18px;
}

.other-living-body input {
    width: 438px;
    height: 22px;
    padding: 6px 10px;
    border-radius: 2px;
    border: 1px solid #c0bdbe;
    margin: 2px 0 12px 0;
}

.other-living-body textarea {
    width: 280px;
    height: 60px;
    padding: 6px 10px;
    border: 1px solid #c0bdbe;
}

.livingLabel {
    line-height: 30px;
    color: #666;
}

.liveStar {
    color: red;
    margin-left: -8px;
}

.replace-live-box {
    width: auto;
    min-width: 410px;
    max-width: 530px;
}


/**/

.hasBeenReply {
    margin-top: 10px;
    height: 24px;
    line-height: 24px;
    background-color: rgba(246, 130, 51, 0.8);
    color: #fff;
    text-align: center;
}


/*.tiledChoose,.mainChoose{*/


/*display: inline-block;*/


/*}*/

.select-none {
    color: #999999;
    pointer-events: none;
}

.select-member,
.layout-choose {
    margin-bottom: 15px;
    padding: 0 26px;
}

.carousel-time {
    padding: 10px 26px;
    /*border-top: 1px solid #dedede;*/
}

.main-polling-box .carousel-time {
    padding: 10px 26px;
    position: absolute;
    bottom: 0;
}

.main-polling-box .isSolo .carousel-time {
    display: none;
}

.all-to-carousel {
    margin-left: 16px;
    display: inline-block;
}

.free-to-carousel {
    margin-left: 34px;
    display: inline-block;
}

.tiled-choose,
.focus-choose,
.main-choose {
    margin-left: 16px;
    display: inline-block;
}

.lay-hide {
    display: none;
}


/**/


/*.dragList{*/


/*position: absolute;*/


/*}*/

.dragList .ex-camera {
    background-position: -1555px -340px;
}

.dragList .ex-has-cam {
    background-position: -1448px -340px;
}

.dragList .ex-select-camera {
    background-position: -1434px -1208px;
}

.dragList .ex-select-has-cam {
    background-position: -1309px -1208px;
}

.dragList .ex-user,
.dragList .ex-user-mark {
    color: rgba(51, 51, 51, 0.4);
    user-select: none;
}

.dragList .choose-to-main {
    background-position: -1523px -388px;
}

.dragList .ex-icon {
    background-position: -1301px -384px;
}

.ex-selected-list .dragList:hover {
    background: rgba(211, 230, 246, 0.4);
}

.videoLayout b {
    background-position: -38px -1395px;
}

.videoLayout b:hover {
    background-position: -92px -1395px;
}

.absensi b {
    background-image: url("../../img/sudah-absen-icon.png") !important;
    background-position: center;
    background-size: cover;
}

.switch-icon {
    margin: 0;
    /*display: inline-block;*/
    position: relative;
    width: 32px;
    height: 16px;
    border: 1px solid #dcdfe6;
    outline: none;
    border-radius: 10px;
    box-sizing: border-box;
    background: #dcdfe6;
    cursor: pointer;
    transition: border-color .3s, background-color .3s;
    /*vertical-align: middle;*/
    float: right;
}

.switch-icon:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 12px;
    height: 12px;
    background-color: #fff;
}

.switch-icon.is-checked {
    border-color: #1f644c;
    background-color: #1f644c;
}

.switch-icon.is-checked:after {
    left: 100%;
    margin-left: -13px;
}

.lay-switch-area {
    position: absolute;
    left: 26px;
    line-height: 32px;
}

.lay-switch-title {
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
}

.lay-switch-icon {
    margin-top: 9px;
    /*position: absolute;*/
    /*right: 18px;*/
    /*top: 63px;*/
}

.lay-head-speaker {
    display: none;
}

.lay-display-head .lay-head-rec,
.lay-display.is-checked .lay-display-head .lay-head-put,
.lay-display.is-checked .lay-display-body,
.lay-watch.is-checked .lay-watch-body,
.lay-watch .lay-watch-head {
    display: block;
}

.lay-display.is-checked .lay-display-head .lay-head-rec,
.lay-display-head .lay-head-put,
.lay-display .lay-display-body,
.lay-watch .lay-watch-body,
.lay-watch.is-checked .lay-watch-head {
    display: none;
}

.lay-display.is-speaker-model .lay-display-head .lay-head-put {
    display: none;
}

.lay-display.is-speaker-model .lay-display-head .lay-head-speaker {
    display: block;
}

.lay-display.is-speaker-model .carousel-time {
    display: none;
}

.lay-display-body,
.lay-watch-body {
    transition: all 0.3s;
}

.lay-display {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.lay-watch {
    border-bottom: 1px solid #dedede;
}

.lay-display-head,
.lay-watch-head {
    position: relative;
    /*min-height: 42px;*/
    line-height: 42px;
    padding-left: 26px;
    cursor: pointer;
}

.is-checked .lay-display-head {
    cursor: default;
}

.lay-display-head .lay-display-num-area,
.lay-watch-num-area {
    margin-left: 5px;
    margin-right: 14px;
}

.lay-head-title {
    font-weight: bold;
}

.lay-tip {
    color: #a2afbf;
    font-size: 12px;
}

.choosed-lay-type,
.watch-lay-type {
    color: #999999;
    float: right;
    margin-right: 12px;
    font-size: 12px;
}

.lay-list-arr {
    position: absolute;
    top: 12px;
    left: 11px;
    width: 16px;
    height: 16px;
    background-position: -1339px -1212px;
}

.is-checked .lay-list-arr {
    display: none;
}

.layParamTip {
    right: 10px;
    min-width: 210px;
    background-color: rgba(40, 42, 45, .9);
    position: absolute;
    top: -40px;
    border-radius: 1px;
    letter-spacing: 0;
    color: #fff;
}

.layParamTip .layFirstTip {
    min-height: 30px;
    line-height: 30px;
    padding: 0 15px;
    float: left;
}

.layParamTip b {
    float: left;
    width: 30px;
    height: 30px;
    background-position: -814px -772px;
}

.layParamTip b:hover {
    background-position: -867px -772px;
}

.layParamTip b:active {
    background-position: -916px -772px;
}

.lay-head-speaker-icon {
    background-position: -1490px -1270px;
    width: 14px;
    height: 14px;
    top: 5px;
    position: absolute;
}

.speaker-tip-icon {
    height: 22px;
    width: 28px;
    margin-right: 5px;
    margin-left: 10px;
    vertical-align: middle;
}

.speaker-tip-text {
    max-width: 41%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
}

.lay-head-speaker-tip {
    line-height: 13px;
    font-size: 12px;
    color: #999;
    margin: 13px 0 9px 18px;
}

.lay-head-speaker-tip span {
    font-weight: bold;
}

.opt-layout {
    line-height: 30px;
    height: 30px;
    padding-left: 58px;
}

.opt-layout .bg-optList {
    height: 34px;
    width: 40px;
    top: 6px;
    margin: 0;
    /*background: #fff;*/
}

.layoutTip .opt-layout:after {
    content: none;
}

.lay-show-0 {
    background-position: -1767px -633px;
}

.lay-show-a {
    background-position: -1767px -936px;
}

.lay-show-b {
    background-position: -1767px -859px;
}

.lay-show-c,
.lay-show-d,
.lay-show-e,
.lay-show-f,
.lay-show-g {
    background-position: -1767px -341px;
}

.lay-show-focus {
    background-position: -1767px -708px;
}

.lay-show-1 {
    background-position: -1767px -490px;
}

.lay-show-2 {
    background-position: -1767px -415px;
}

.lay-show-3 {
    background-position: -1767px -564px;
}

.lay-show-4 {
    background-position: -1767px -784px;
}

.lay-show-0:hover {
    background-position: -1843px -633px;
}

.lay-show-a:hover {
    background-position: -1843px -936px;
}

.lay-show-b:hover {
    background-position: -1843px -859px;
}

.lay-show-c:hover,
.lay-show-d:hover,
.lay-show-e:hover,
.lay-show-f:hover,
.lay-show-g:hover {
    background-position: -1843px -341px;
}

.lay-show-focus:hover {
    background-position: -1843px -708px;
}

.lay-show-1:hover {
    background-position: -1843px -490px;
}

.lay-show-2:hover {
    background-position: -1843px -415px;
}

.lay-show-3:hover {
    background-position: -1843px -564px;
}

.lay-show-4:hover {
    background-position: -1843px -784px;
}


/**/

.bg-upload {
    width: 28px;
    height: 29px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    right: -2px;
    top: -41px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    border-left: 1px solid #b9c0c9;
    z-index: 17;
    background-position: -342px -1385px;
}

.bg-upload:hover {
    background-position: -410px -1385px;
}

.bg-upload:active {
    background-position: -486px -1385px;
}

.bg-upload input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 30px;
}

.upload-view-box {
    width: 448px;
}

.upload-view-box .alert-bottom {
    padding-top: 20px;
}

.upload-view-title {
    padding: 0 30px;
    margin-top: 8px;
    display: inline-block;
    line-height: 22px;
}

.upload-view-title .tosb {
    max-width: 250px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    margin-left: 5px;
}

.preview-area {
    height: 200px;
    width: 300px;
    border: 1px solid #dad6e0;
    border-radius: 1px;
    position: relative;
    margin: 10px 73px 0;
    background-color: #fff;
}

.file-preview {
    height: 92px;
}

.file-pre-box {
    /*margin: 20px auto 10px;*/
    /*position: relative;*/
    /*border: 1px solid #ddd;*/
    /*border-radius: 5px;*/
    padding: 12px 10px;
    /*display: table;*/
}

.file-pre-icon {
    /*display: table-cell;*/
    /*vertical-align: middle;*/
}

.file-pre-icon b {
    width: 44px;
    height: 56px;
    /* background: #eee; */
    position: absolute;
    right: 26px;
    top: 19px;
    background-position: -1696px -420px;
}

.file-pre-cont {
    margin-right: 26px;
    overflow: hidden;
    white-space: normal;
    /*word-wrap: break-word;*/
    display: inline-block;
    /* max-width: 215px; */
    /* min-width: 110px; */
    width: 194px;
    word-break: break-all;
}

.file-pre-name {
    max-height: 50px;
    overflow: hidden;
    line-height: 16px;
    color: #333;
    position: relative;
}

.file-pre-size {
    color: #ababab;
}

.preview-area img {
    max-width: 300px;
    max-height: 200px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}


/*.picUploading{*/


/*width: 202px;*/


/*height: 160px;*/


/*}*/


/*.pic-upload-gif{*/


/*background: url(../../img/conference/webrtc_video_loading0000.png)*/


/*no-repeat;*/


/*width: 60px;*/


/*height: 60px;*/


/*position: absolute;*/


/*top: 50%;*/


/*left: 50%;*/


/*margin-top: -30px;*/


/*margin-left: -30px;*/


/*animation: loading 1.5s linear infinite;*/


/*}*/

.file-irreg-tip {
    background: #fdfdf8;
    position: absolute;
    bottom: 112px;
    left: 6px;
    width: 230px;
    padding: 4px 30px;
    /*border: 1px solid #d1d6d9;*/
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}

.file-irreg-icon,
.file-irreg-close {
    position: absolute;
    top: 0;
    height: 30px;
    width: 28px;
}

.file-irreg-icon {
    left: 0;
    background-position: -1160px -409px;
}

.file-irreg-close {
    right: 0;
    background-position: -221px -1387px;
    cursor: pointer;
}

.file-irreg-close:hover {
    background-position: -282px -1387px;
}

.file-irreg-body {
    line-height: 20px;
}

.fileUploading {
    /*display: table;*/
    padding: 10px 0;
    position: relative;
    height: 50px;
}

.fileUploading .file-pre-icon b {
    width: 34px;
    height: 42px;
    background-position: -1620px -420px;
    right: 7px;
    top: 15px;
}

.fileUploading .file-pre-size {
    bottom: 2px;
}

.fileUploading .file-pre-cont {
    max-width: 150px;
    margin-right: 16px;
}

.fileUploading .file-pre-name {
    max-height: 34px;
    min-height: 17px;
}

.file-pre-name-more:after {
    content: " ";
    position: absolute;
    width: 30px;
    height: 16px;
    bottom: 2px;
    right: 0;
    padding-left: 20px;
    padding-right: 4px;
    background: -webkit-linear-gradient(left, transparent, #fff 95%);
    background: -o-linear-gradient(right, transparent, #fff 95%);
    background: -moz-linear-gradient(right, transparent, #fff 95%);
    background: linear-gradient(to right, transparent, #fff 95%);
}


/*.chat-file-downLoad{*/


/*cursor: pointer;*/


/*}*/

.fileUploading:hover .chat-file-downLoad {
    text-decoration: underline;
    color: #1f644c;
}

.msgListImg {
    padding: 0;
    border: 1px solid #dcdedf;
    background-color: #ebeff1;
    max-width: 224px;
    max-height: 150px;
}

.msgListImg img {
    padding: 0;
    margin: 0;
    min-width: 24px;
    min-height: 24px;
    max-width: 224px;
    max-height: 150px;
    display: block;
}

.msgListImg ul li.reply {
    margin-right: 7px;
}

.msgListReplyImg {
    margin-bottom: 20px;
}

.msgListReplyImg ul {
    position: absolute;
    white-space: nowrap;
}

.msgListReplyImg .fl {
    float: left;
}

.msgListFile {
    background: #fff;
    border-color: #dcdedf;
    height: 70px;
    width: 222px;
}

.msgListReplyFile {
    height: 95px;
}

.msgListReplyFile ul {
    border-top: 1px solid #ededed;
}

.damagedImg,
.damagedImgLoad {
    background-position: -1621px -495px;
    width: 110px;
    height: 60px;
}

.damagedImgLoad {
    background-position: -1621px -639px;
    cursor: pointer;
}


/**/

.subtitle-btn-box {
    width: 448px;
}

.subtitle-btn-text {
    text-align: center;
    padding: 0 20px;
}

.subtitle-btn-close,
.subtitle-btn-edit {
    margin: 0 auto 10px;
    width: 210px;
    padding: 0 8px;
}

.subtitle-preview {
    width: 652px;
    height: 200px;
    background: url("../../img/conference/pop_subtitles_bg.png?1.0.15.7") no-repeat;
    margin: 0 26px;
    position: relative;
}

.subtitle-set-box {
    max-width: 704px;
}

.subtitle-set-box .alert-title-white {
    height: 48px;
    line-height: 42px;
}

.subtitle-textarea {
    padding: 10px 14px 0;
    border-top: 1px solid #ededed;
}

.subt-text-label {
    font-weight: bold;
}

.subtitle-setting {
    padding: 0 12px;
    margin-top: 16px;
}

.subtitle-setting .commentArea {
    color: #666;
    width: 652px;
    height: 108px;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    position: relative;
    background: #fff;
    margin-top: 2px;
}

.subtitle-setting .subt-text-area {
    color: #666;
    width: 632px;
    height: 82px;
    padding: 4px 10px;
    border: none;
}

.subtitle-setting .commentMax {
    color: #999;
    position: absolute;
    top: 88px;
    right: 8px;
}

.subt-prev-show {
    width: 529px;
    display: inline-block;
    overflow: hidden;
    word-break: break-all;
}

.subt-hide-box {
    height: 160px;
}

.subtitle-show-time {
    padding: 12px 14px 0;
}

.subt-prev-text {
    position: absolute;
    top: 31px;
    left: 24px;
    right: 23px;
    padding: 0 38px;
    background: rgba(0, 0, 0, 0.52);
    text-align: center;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    color: #fff;
}

.subt-prev-demo {
    color: #fff;
}


/**/

.uploadDragArea {
    top: 50px;
    bottom: 0;
    position: absolute;
    background: rgba(235, 239, 241, 0.9);
    width: 100%;
    right: 0;
    height: 100%;
    left: 0;
    z-index: 135;
    text-align: center;
    color: #666;
}

.uploadDragArea .uploadDragTip {
    width: 212px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: -54px;
}

.eid-head-logo {
    display: inline-block;
    width: 234px;
    height: 32px;
    margin-top: 6px;
}

.eid-body-logo {
    width: 166px;
    height: 136px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -82px;
    /*margin-left: -244px\0;*/
    margin-top: -85px;
    opacity: 0.4;
}

.eid-start-body-logo {
    width: 228px;
    height: 180px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    transform: translateX(-23px);
}

.eid-head-cloud-logo {
    position: absolute;
    height: 24px;
    width: 36px;
    top: 15px;
    left: 24px;
    overflow: hidden;
}

.eid-body-wait-logo {
    margin: 0 auto 20px;
    width: 128px;
    height: 100px;
}

.eid-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.left-header img.eid-img {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
}


/**/

.fecc-control-box {
    position: absolute;
    top: 92px;
    right: 12px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(9, 2, 4, 0.45);
    width: 68px;
    padding: 6px;
    transition: right 0.3s linear;
}

.fecc-direction {
    height: 68px;
    position: relative;
    border-radius: 50px;
    background: #fff;
    /*border: 1px solid #e2e2e2;*/
}

.fecc-position {
    position: relative;
    margin-top: 12px;
}

.fecc-direction b {
    width: 24px;
    height: 24px;
    position: absolute;
    cursor: pointer;
    user-select: none;
}

.fecc-position b {
    width: 33px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: #333;
    float: left;
    font-weight: normal;
    user-select: none;
}

.fecc-position b:hover {
    color: #1f644c;
}

.fecc-btn-up {
    left: 50%;
    transform: translateX(-50%);
    background-position: -33px -1442px;
}

.fecc-btn-up:hover {
    background-position: -87px -1442px;
}

.fecc-btn-down {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background-position: -141px -1440px;
}

.fecc-btn-down:hover {
    background-position: -195px -1440px;
}

.fecc-btn-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-position: -248px -1443px;
}

.fecc-btn-left:hover {
    background-position: -308px -1443px;
}

.fecc-btn-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-position: -374px -1443px;
}

.fecc-btn-right:hover {
    background-position: -434px -1443px;
}

.fecc-focus-up {
    border-right: 1px solid #d2d1d2;
    border-bottom: 1px solid #d2d1d2;
}

.fecc-focus-down {
    border-bottom: 1px solid #d2d1d2;
}

.fecc-zoom-up {
    background-position: -488px -1443px;
}

.fecc-zoom-up:hover {
    background-position: -550px -1443px;
}

.fecc-zoom-down {
    border-left: 1px solid #d2d1d2;
    background-position: -612px -1443px;
}

.fecc-zoom-down:hover {
    background-position: -674px -1443px;
}


/*2019-04-28*/

.rightMore b {
    background-color: #8b9296;
}

.rightMore b:hover {
    background-color: #2b2b2b;
}


/*!*2019-04-28*!*/


/*.voiceTranslate b{*/


/*background-color: #ffffff;*/


/*}*/


/*.voiceTranslate b:hover{*/


/*background-color: #f0f0f0;*/


/*}*/


/*.voice-subtitle-box{*/


/*position: absolute;*/


/*bottom: 140px;*/


/*width: 336px;*/


/*right: 16px;*/


/*cursor: all-scroll;*/


/*z-index: 15;*/


/*display: none;*/


/*transition: right 0.3s linear;*/


/*}*/


/*.voice-subtitle-box.voice-subtitle-press{*/


/*opacity: 0.6;*/


/*}*/


/*.voice-subtitle-head{*/


/*height: 16px;*/


/*}*/


/*.voice-subtitle-top{*/


/*height: 16px;*/


/*width: 48px;*/


/*margin: 0 auto;*/


/*border-top-right-radius: 2px;*/


/*border-top-left-radius: 2px;*/


/*cursor: pointer;*/


/*display: block;*/


/*background-color: rgba(0, 0, 0, 0.65);*/


/*background-position: -735px -1443px;*/


/*}*/


/*.voice-subtitle-top:hover{*/


/*background-color: rgba(19, 19, 19, 0.65);*/


/*background-position: -795px -1443px;*/


/*}*/


/*.voice-subtitle-top:active{*/


/*background-color: rgba(0, 0, 0, 0.65);*/


/*background-position: -857px -1443px;*/


/*}*/


/*.voice-subtitle-body{*/


/*background: rgba(0, 0, 0, 0.65);*/


/*height: 0;*/


/*position: relative;*/


/*color: #ffffff;*/


/*overflow: hidden;*/


/*transition: height 500ms;*/


/*border-top-right-radius: 2px;*/


/*border-top-left-radius: 2px;*/


/*}*/


/*.voice-subtitle-title{*/


/*line-height: 26px;*/


/*height: 26px;*/


/*text-align: center;*/


/*margin: 0 10px;*/


/*border-bottom: 1px solid rgba(140, 172, 202, 0.1);*/


/*cursor: pointer;*/


/*color: #1f644c;*/


/*}*/


/*.voice-subtitle-title b{*/


/*height: 12px;*/


/*width: 16px;*/


/*margin-left: 8px;*/


/*display: inline-block;*/


/*background-position: -752px -1412px;*/


/*}*/


/*.voice-subtitle-title:hover{*/


/*text-decoration: underline;*/


/*}*/


/*.voice-subtitle-title:active{*/


/*text-decoration: none;*/


/*}*/


/*.voice-subtitle-title:hover b{*/


/*background-position: -812px -1412px;*/


/*}*/


/*.voice-subtitle-title:active b{*/


/*background-position: -874px -1412px;*/


/*}*/


/*.voice-subtitle-list{*/


/*height: 236px;*/


/*overflow: hidden;*/


/*padding: 4px 2px 0;*/


/*border-bottom: 2px solid rgba(140, 172, 202, 0.1);*/


/*}*/


/*.voice-subtitle-now{*/


/*background: rgba(0, 0, 0, 0.65);*/


/*border-radius: 2px;*/


/*padding: 7px 0;*/


/*line-height: 18px;*/


/*}*/


/*.voice-subtitle-now.vsBodyShow{*/


/*border-top-right-radius: 0;*/


/*border-top-left-radius: 0;*/


/*}*/


/*.voice-subtitle-now-show{*/


/*max-height: 54px;*/


/*min-height: 20px;*/


/*overflow: hidden;*/


/*position: relative;*/


/*}*/


/*.vsNowNone{*/


/*height: 20px;*/


/*line-height: 20px;*/


/*text-align: center;*/


/*color: #fff;*/


/*display: block;*/


/*}*/


/*.voice-subtitle-now-list{*/


/*!*margin: 3px 0;*!*/


/*transition: margin-top 5s;*/


/*padding: 0 10px;*/


/*}*/


/*.vsNowLi{*/


/*color: #dfe4e8;*/


/*word-wrap: break-word;*/


/*!*padding: 1px 0;*!*/


/*}*/


/*.vsNowLiUser{*/


/*font-size: 12px;*/


/*color: #78a1c9;*/


/*margin-right: 5px;*/


/*}*/


/*.vsHisLi{*/


/*padding: 2px 8px 6px;*/


/*color: #dfe4e8;*/


/*}*/


/*.vsHisTitle{*/


/*display: inline-block;*/


/*width: 100%;*/


/*line-height: 12px;*/


/*}*/


/*.vsHisTxt{*/


/*line-height: 18px;*/


/*}*/


/*.vsHisUser{*/


/*float: left;*/


/*max-width: 250px;*/


/*overflow: hidden;*/


/*text-overflow: ellipsis;*/


/*font-size: 12px;*/


/*height: 14px;*/


/*color: #78a1c9;*/


/*}*/


/*.vsHisTime{*/


/*float: right;*/


/*font-size: 11px;*/


/*color: #8b9296;*/


/*}*/


/*.vsNoList{*/


/*color: #ffffff;*/


/*position: absolute;*/


/*left: 50%;*/


/*transform: translateX(-50%);*/


/*top: 100px;*/


/*}*/

.voiceSubBtn {
    float: right;
    width: 38px;
    height: 36px;
    cursor: pointer;
}

.voiceSubBtn b {
    width: 38px;
    height: 20px;
    margin: 8px 0 8px -1px;
    border-left: 1px solid rgba(103, 124, 153, 0.4);
    background-position: -1084px -1408px;
}


/*.voiceSubBtn.isHis b{*/


/*background-position: -1014px -1413px;*/


/*}*/

.voiceSubBtn:hover {
    background-color: rgba(198, 214, 237, 0.4);
}

.voiceSubBtn:hover b {
    border-left-color: transparent;
}

.voiceSubBtn:active {
    background-color: rgba(17, 22, 30, 0.4);
}


/*.hideVoiceSub{*/


/*width: 20px;*/


/*height: 20px;*/


/*background-position: -556px -1389px;*/


/*text-align: center;*/


/*position: absolute;*/


/*right: -10px;*/


/*top: 8px;*/


/*cursor: pointer;*/


/*}*/


/*.hideVoiceSub:hover{*/


/*background-position: -618px -1389px;*/


/*}*/


/*.hideVoiceSub:active{*/


/*background-position: -680px -1389px;*/


/*}*/


/*!**!*/


/*.vsOnlyShowHis .voice-subtitle-top{*/


/*height: 0;*/


/*}*/


/*.vsOnlyShowHis .voice-subtitle-now, .vsOnlyShowHis .voice-subtitle-title b{*/


/*display: none;*/


/*}*/


/*.vsOnlyShowHis .voice-subtitle-body{*/


/*height: 269px;*/


/*}*/


/*.vsOnlyShowHis .voice-subtitle-title:hover{*/


/*text-decoration: none;*/


/*}*/


/*!**!*/


/*.voice-subtitle-list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{*/


/*background-color: #a9b1c0;*/


/*width: 2px;*/


/*}*/


/*.voice-subtitle-list .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{*/


/*background-color: #bfc9d4;*/


/*}*/


/*.voice-subtitle-list .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,*/


/*.voice-subtitle-list .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{*/


/*background-color: #7d8799;*/


/*}*/


/*2019-05-30*/

.speech-reco-box {
    position: absolute;
    bottom: 112px;
    width: 920px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 6px;
    overflow: hidden;
    display: none;
    cursor: all-scroll;
    z-index: 15;
}

.speech-reco-box.rightRely {
    transition: right 0.3s linear;
}


/*.speech-reco-box:active{*/


/*opacity: 0.6;*/


/*}*/

.srInitPosi {
    left: 50%;
    transform: translateX(-50%);
}

.speech-reco-box-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-position: -1023px -1484px;
    display: none;
}

.speech-reco-box:hover .speech-reco-box-close {
    display: block;
}

.speech-reco-box-close:hover {
    background-position: -1094px -1484px;
}

.speech-reco-txt {
    font-size: 24px;
    line-height: 32px;
    color: #dfe4e8;
    margin: 8px 54px 8px 20px;
    height: 64px;
    overflow: hidden;
}

.speech-reco-txt .srNowColon {
    margin-right: 10px;
}

.speech-reco-list {
    transition: margin-top 1s;
}

.srNowUser {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

@media screen and (max-width:1366px) {
    .speech-reco-box {
        width: 704px;
    }
    .speech-reco-txt {
        font-size: 18px;
        line-height: 24px;
        margin: 10px 54px 10px 20px;
        height: 48px;
    }
    .speech-reco-txt .srNowColon {
        margin-right: 8px;
    }
    .srNowUser {
        max-width: 270px;
    }
}

.bg-speechReco {
    background-position: -1024px -1332px;
    width: 36px;
    height: 82px;
    position: absolute;
    top: 31px;
    left: 2px;
    display: none;
}

.isSpeechOpen .bg-speechReco {
    display: block;
}


/*.bg-speechReco-active{*/


/*background-position: -1112px -1332px;*/


/*}*/

.speechReco-arrow {
    left: 223px;
}


/*.isSpeechOpen .bg-groupChat{*/


/*left: 135px*/


/*}*/


/*.isSpeechOpen .groupChat-arrow{*/


/*left: 141px*/


/*}*/


/*.isSpeechOpen .unreadMsgNum{*/


/*left: 158px*/


/*}*/

.speech-record-list {
    position: absolute;
    top: 44px;
    bottom: 2px;
    left: 0;
    right: 0;
    overflow: hidden;
}

.speech-record-list .mCSB_container {
    padding-bottom: 30px;
}

.srEndTip {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: none;
    line-height: 28px;
}

.srEndTxt {
    display: inline-block;
    margin: 0 3px;
    background: #c1c1c1;
    vertical-align: middle;
    width: 3px;
    border-radius: 4px;
    height: 3px;
}

.srTipLine {
    display: inline-block;
    width: 105px;
    height: 1px;
    vertical-align: middle;
}

.srTipLine.left {
    background: linear-gradient(to right, transparent, #ccc);
}

.srTipLine.right {
    background: linear-gradient(to right, #ccc, transparent);
}

.speech-reco-drag {
    opacity: 0.6;
}

.srHisTitle {
    padding: 10px 15px 0 10px;
}

.srHisTime {
    font-size: 12px;
    color: #8f8f8f;
    float: right;
    line-height: 21px;
}

.srHisTxt {
    background-color: #fff;
    border: 1px solid #dcdedf;
    border-radius: 2px;
    padding: 3px 8px 4px;
    max-width: 260px;
    position: relative;
    display: inline-block;
}

.srHisTxt span {
    margin-left: 28px;
    line-height: 20px;
    display: inline-block;
    color: #333;
    word-wrap: break-word;
}

.srHisTxt b {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-position: -768px -901px;
    width: 20px;
    height: 16px;
    left: 10px;
}

.srHisUser {
    max-width: 205px;
    color: #666;
}

.srHide {
    display: none;
}

.isSpeechOpen .srHide {
    display: block;
}


/**/


/*.whiteboard-box{*/


/*!*width: 1044px;*!*/


/*!*height: 631px;*!*/


/*!*position: fixed;*!*/


/*!*top: 50%;*!*/


/*!*left: 50%;*!*/


/*!*transform: translate(-50%,-50%);*!*/


/*!*z-index: 890;*!*/


/*!*background: rgba(255, 255, 255, .95);*!*/


/*!*border-radius: 2px;*!*/


/*!*box-shadow: 0 0 12px rgba(9, 2, 4, .45);*!*/


/*!*overflow: hidden;*!*/


/*!*position: absolute;*!*/


/*!*left: 0;*!*/


/*!*top: 0;*!*/


/*!*bottom: 0;*!*/


/*!*right: 0;*!*/


/*}*/

.posiAbAll {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.zInd20 {
    z-index: 20;
}

#whiteboard-iframe,
#whiteboard-iframe-upload {
    width: 100%;
    height: 93%;
    user-select: none;
    /*margin: 0 9px 9px;*/
    /*border: 1px solid #e9edf1;*/
}

#whiteboard-iframe-mini {
    display: none;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.wbNavTop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: transparent;
}

.wbNavBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: transparent;
}

.wbMoveMask,
.wbDialogMask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
}

#fileUpload {
    position: absolute;
    left: 15px;
    top: 0;
    opacity: 0;
    width: 148px;
    height: 148px;
    overflow: hidden;
    cursor: pointer;
}


/*!*@media screen and (min-width: 1300px ) and (max-width:1500px){*!*/


/*!*.whiteboard-box{*!*/


/*!*width: 1044px;*!*/


/*!*height: 631px;*!*/


/*!*}*!*/


/*!*.whiteboard-box #whiteboard-iframe{*!*/


/*!*width: 1024px;*!*/


/*!*height: 576px;*!*/


/*!*}*!*/


/*!*}*!*/


/*!*@media screen and (min-width: 1500px ) and (max-width:1800px){*!*/


/*!*.whiteboard-box{*!*/


/*!*width: 1300px;*!*/


/*!*height: 775px;*!*/


/*!*}*!*/


/*!*.whiteboard-box #whiteboard-iframe{*!*/


/*!*width: 1280px;*!*/


/*!*height: 720px;*!*/


/*!*}*!*/


/*!*}*!*/


/*!*@media screen and (min-width: 1800px ){*!*/


/*!*.whiteboard-box{*!*/


/*!*width: 1460px;*!*/


/*!*height: 865px;*!*/


/*!*}*!*/


/*!*.whiteboard-box #whiteboard-iframe{*!*/


/*!*width: 1440px;*!*/


/*!*height: 810px;*!*/


/*!*}*!*/


/*!*}*!*/


/*.whiteboard-box .alertTop{*/


/*height: 44px;*/


/*background-color: transparent;*/


/*}*/


/*.whiteboard-box .boxTitle{*/


/*line-height: 40px;*/


/*}*/


/*.wbMiniBtn,.wbClose{*/


/*width: 36px;*/


/*height: 36px;*/


/*position: absolute;*/


/*right: 0;*/


/*top: 0;*/


/*cursor: pointer;*/


/*line-height: 32px;*/


/*}*/


/*.wbMiniBtn:after{*/


/*content: "";*/


/*display: inline-block;*/


/*vertical-align: middle;*/


/*width:14px;*/


/*height:1px;*/


/*background-color: #afafaf;*/


/*}*/


/*.wbMiniBtn:hover{*/


/*background-color: #e9eff1;*/


/*}*/


/*.wbMiniBtn:active{*/


/*background-color: #dee6ea;*/


/*}*/


/*.wbClose{*/


/*background-position: -237px -407px;*/


/*}*/


/*.wbClose:hover{*/


/*background-position: -293px -407px;*/


/*}*/


/*.wbTitleName {*/


/*display: inline-block;*/


/*max-width: 75%;*/


/*white-space: nowrap;*/


/*text-overflow: ellipsis;*/


/*overflow: hidden;*/


/*vertical-align: bottom;*/


/*}*/


/*.miniWhiteboardBtn{*/


/*position: absolute;*/


/*width: 46px;*/


/*height: 46px;*/


/*top: 56px;*/


/*right: 56px;*/


/*cursor: pointer;*/


/*background-position: -1621px -569px;*/


/*transition: right 0.3s linear;*/


/*-webkit-transition: right 0.3s linear;*/


/*-o-transition: right 0.3s linear;*/


/*-moz-transition: right 0.3s linear;*/


/*}*/


/*.miniWhiteboardBtn:hover{*/


/*background-position: -1697px -569px;*/


/*}*/


/*!**!*/


/*.whiteboard-box .boxTitle{*/


/*cursor: move;*/


/*}*/


/*.whiteboard-box .wb-stretch{*/


/*position: absolute;*/


/*}*/


/*.wb-stretch-up{*/


/*height: 6px;*/


/*top: 0;*/


/*left: 6px;*/


/*right: 72px;*/


/*cursor: ns-resize;*/


/*}*/


/*.wb-stretch-down{*/


/*height: 6px;*/


/*bottom: 0;*/


/*left: 6px;*/


/*right: 6px;*/


/*cursor: ns-resize;*/


/*}*/


/*.wb-stretch-left{*/


/*width: 6px;*/


/*top: 6px;*/


/*bottom: 6px;*/


/*left: 0;*/


/*cursor: ew-resize;*/


/*}*/


/*.wb-stretch-right{*/


/*width: 6px;*/


/*top: 36px;*/


/*bottom: 6px;*/


/*right: 0;*/


/*cursor: ew-resize;*/


/*}*/


/*.wb-stretch-left-up{*/


/*width: 6px;*/


/*height: 6px;*/


/*top: 0;*/


/*left: 0;*/


/*cursor: nwse-resize;*/


/*}*/


/*.wb-stretch-left-down{*/


/*width: 6px;*/


/*height: 6px;*/


/*bottom: 0;*/


/*left: 0;*/


/*cursor: nesw-resize;*/


/*}*/


/*.wb-stretch-right-down{*/


/*width: 6px;*/


/*height: 6px;*/


/*bottom: 0;*/


/*right: 0;*/


/*cursor: nwse-resize;*/


/*}*/


/*.wb-move-mask{*/


/*position: absolute;*/


/*top: 40px;*/


/*left: 9px;*/


/*right: 9px;*/


/*bottom: 9px;*/


/*display: none;*/


/*}*/


/*.wbIframeBox{*/


/*position: absolute;*/


/*top: 44px;*/


/*left: 9px;*/


/*right: 9px;*/


/*bottom: 9px;*/


/*}*/

.mini-stretch {
    position: absolute;
}

.mini-stretch-up {
    height: 6px;
    top: -6px;
    left: 6px;
    right: 6px;
    cursor: ns-resize;
}

.mini-stretch-down {
    height: 6px;
    bottom: -9px;
    left: 6px;
    right: 6px;
    cursor: ns-resize;
}

.mini-stretch-left {
    width: 6px;
    top: 6px;
    bottom: 6px;
    left: -6px;
    cursor: ew-resize;
}

.mini-stretch-right {
    width: 6px;
    top: 6px;
    bottom: 6px;
    right: -9px;
    cursor: ew-resize;
}

.mini-stretch-left-up {
    width: 8px;
    height: 8px;
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.mini-stretch-left-down {
    width: 8px;
    height: 8px;
    bottom: -6px;
    left: -6px;
    cursor: nesw-resize;
}

.mini-stretch-right-up {
    width: 8px;
    height: 8px;
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.mini-stretch-right-down {
    width: 8px;
    height: 8px;
    bottom: -6px;
    right: -6px;
    cursor: nwse-resize;
}


/**/

.maxVideoReso,
.maxVideoBitRate,
.maxBandwidth {
    width: 360px;
    margin: 16px auto 0;
    display: inline-block;
}

.useVirtualBg {
    width: 361px;
    margin: 12px auto;
    display: block;
    /* margin-top: 20px; */
}

.useVirtualBg>.btn-virtual-background, .btn-green-screen {
    width: 361px;
    /* margin-bottom: 5px; */
}

.maxVideoReso .maxLabel,
.maxVideoBitRate .maxLabel,
.maxBandwidth .maxLabel {
    float: left;
    width: 34%;
    text-align: left;
    line-height: 30px;
}

.chooseImageBg {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    /* margin: 16px auto 0px; */
}

.chooseImageBg .maxLabel {
    /* float: left;
    width: 25%; */
    margin: 10px 30px 0;
    /* margin-left: 25px; */
}

#multi-file-upload-virtual, #multi_file_upload_green_screen {
    width: 93%;
    background: rgba(250,250,250,0.1);
    border: 1px dashed #1f644c;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
}

#multi-file-upload-virtual:hover, #multi_file_upload_green_screen:hover {
    background: #34495E;
    color: #39D2B4 !important;
    padding: 10px;
    cursor: pointer;
}

.bit-rate-select,
.reso-select,
.bandwidth-select {
    float: left;
    width: 66%;
    box-sizing: border-box;
}

.val-virtual-bg {
    margin: 0 30px 0;
}

.maxVideoReso .maxLabel,
.maxVideoBitRate .maxLabel,
.maxBandwidth .maxLabel {
    float: left;
    width: 34%;
    text-align: left;
    line-height: 30px;
}


/*
.reso-select-box,
.bitrate-select-box,
.bandwidth-select-box {
    width: 100%;
} */

.dialog-send.no-chat-upload .bg-upload {
    display: none;
}

.dialog-send.no-chat-upload .select-list {
    right: 0;
    width: auto;
    left: 0;
}

.maxBandwidthTip {
    text-align: left;
    width: 360px;
    margin: 0 auto;
    color: #999;
}

.mt15 {
    margin-top: 15px;
}

/* #backgroundRef, #background-ref-green-screen {
    width: 358px;
    height: 202px;
    background-color: #f5f5f5;
    border: 1px solid #d6dae0;
} */

#drop-area {
    width: 358px;
    height: 202px;
    background-color: white;
    border: 3px dashed grey;
    margin: 16px auto 0px;
}

.drop-text {
    margin-top: 70px;
    color: grey;
    font-size: 25px;
    font-weight: bold;
}

#drop-area img {
    max-width: 200px;
}

.btn-virtual {
    width: 150px;
}

#preview-image {
    margin: 0 auto;
}

img#background-ref-virtual {
    display: block;
    width:358px;
    height:202px;
    /*border: 2px solid #1f644c;*/
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    content: '';
}

img#background-ref-green-screen{
    display: block;
    width: 358px;
    height: 202px;
    /* border: 2px solid #1f644c; */
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    content: '';
}

img#backgroundRef::before {
    background-color: blue;
}

/* img#backgroundRef::after {
    content: 'Preview Image';
    width: 364px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 5vw;
    color: #fff;
    transform: translate(-50%, -50%);
    text-align: center;
} */

img#backgroundRef[src=""] {
    display: none;
}

.loader {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #1f644c;
    /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: 45px 140px;
}
.loaderGreenScreen {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #1f644c;
    /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: 45px 140px;
}

.loader-canvas{
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #1f644c;
    /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: 65px 140px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.progress {
    display: flex;
    height: 20px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem;
    margin: 10px 25px;
}

.progress-bar {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #28a745;
    transition: width .6s ease;
    font-size: 16px;
    text-align: center;
}

#chk-error-virtual, #chk-error-green {
    margin: auto 25px;
    color: red;
    text-align: center;
}

.info-choose-color {
    margin: 10px 25px;
    color: yellow;
    text-align: center;
    background: #111111;
    padding: 5px;
}

.preview-image {
    text-align: center;
    box-sizing: border-box;
    position: relative;
    /* border: 2px dashed #23ad77; */
    /* margin: 25px 25px auto;
    height: 100%; */
}

/* .preview-canvas {
    width: 358px;
    height: 203px;
    border: 1px solid #fff;
    margin: 0 30px auto;
} */

.ui-dialog {
    z-index: 1000 !important;
}

#panahkiri{
    position: absolute;
    transform: translate(-10px, -95%);
    top: 50%;
    left: 50px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 100px;
    box-shadow: 0 0 6px rgb(9 2 4 / 45%);
    width: 50px;
    height: 47px;
    transition: right 0.3s linear;
    cursor: pointer;
}

#panahkanan{
    position: absolute;
    transform: translate(-10px, -95%);
    top: 50%;
    right: 50px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 100px;
    box-shadow: 0 0 6px rgb(9 2 4 / 45%);
    width: 50px;
    height: 47px;
    transition: right 0.3s linear;
    cursor: pointer;
}

#panahkiri:hover{
    background-color: rgba(0,0,0,0.7);
}

#panahkanan:hover{
    background-color: rgba(0,0,0,0.7);
}

.loading_img{
    height: 40px;
    width: 40px;
    display: block; 
    position: absolute; 
    top: 5px;
    left: 12px; 
    cursor: pointer;
}

.previous_arrow_img{
    width: 25px;
    height: 25px;
    margin-top: 10px;
    position: relative;
    border-radius: 50px;
    background: transparent;
}

.next_arrow_img{
    width: 25px;
    height: 25px;
    margin-top: 10px;
    position: relative;
    border-radius: 50px;
    background: transparent;
}

.video-active-kanan {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.video-active-kiri {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes slide-out {
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}


.show_hide_vid {
    background: rgba(250,250,250,0.9);
    border: 2px solid #fff;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 5px 0px;
    bottom: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    position: absolute;
    box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
    z-index: 100;
}

.show_hide_vid:hover, .show_hide_vid.active {
    background: white;
    outline: none;
}

.show_hide_vid:focus {
    outline: none;
}


#lokalvideo {
    width: auto;
    height: auto;
    min-height: 6.5em;
    margin: 1rem 0 0 1rem;
    color: white;
    border-radius: 0.75em;
    touch-action: none;
    user-select: none;
    transform: translate(0px ,0px);
    opacity: 0.8;
}
/* #lokalvideo {
    width: 202px;
    height: auto;
    min-height: 6.5em;
    margin: 1rem 0 0 1rem;
    color: white;
    border-radius: 0.75em;
    touch-action: none;
    user-select: none;
    transform: translate(0px, 0px);
    opacity: 0.8;
} */

.icon_localcam{
    width: 40px;
    height: 40px;
    margin: auto;
}

.icon_localcam_hide{
    background-image: url('../../img/localcam-off-black.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.icon_localcam_hide:hover{
    background-image: url('../../img/localcam-on.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.icon_localcam_show{
    background-image: url('../../img/localcam-on.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.icon_localcam_show:hover{
    background-image: url('../../img/localcam-off.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#counter{
    font-size:11pt;
    color: #f9fafc;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(100,100,100,0.5);
    margin-right: 12px;
}

.disabled-arrow{
    pointer-events: none;
}

.desktop-setting-hostleave {
    background-color: rgba(20, 29, 20, 0.80);
    backdrop-filter: blur(5px);
    /* border-bottom: 1px solid #e2e2e2; */
    bottom: 10px;
    height: 72px;
    left: 0;
    position: absolute;
    z-index: 17;
    right: 0;
    transition: right 0.3s linear;
    -webkit-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
}


.videoRemote {
    position: absolute;
    width: 281px;
    height: 159px;
    min-width: 167px;
    min-height: 94px;
    bottom: 85px;
    left: 0;
    cursor: move;
    border: 3px solid rgba(8, 18, 34, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.50);
}

#container_share_screen{
    width: 281px;
    height: 159px;
    min-width: 167px;
    min-height: 94px;
    margin: 1rem 0 0 1rem;
    color: white;
    border-radius: 0.75em;
    touch-action: none;
    user-select: none;
    transform: translate(0px, 0px);
}

#uploadStatus{
    text-align: center;
    margin: 25px 25px auto;
}

/* icon request microphone meetingbesar */
.desktop .setting-right .req_mic, .desktop .setting-right .req_share {
    width: 35px;
    height: 35px;
    cursor: pointer;
}

.reqMicTip {
    min-width: 500px;
    padding: 6px 0;
    position: absolute;
    background: rgba(40, 42, 45, 0.90);
    color: #fff;
    border-radius: 2px;
    right: 16px;
}

.reqShareTip {
    min-width: 500px;
    padding: 6px 0;
    position: absolute;
    background: rgba(40, 42, 45, 0.90);
    color: #fff;
    border-radius: 2px;
    right: 16px;
}

.reqMicTip .angle {
    border-top: 6px solid rgba(40, 42, 45, 0.90);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    bottom: -6px;
    width: 0;
    height: 0;
    position: absolute;
}

.reqShareTip .angle {
    border-top: 6px solid rgba(40, 42, 45, 0.90);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    bottom: -6px;
    width: 0;
    height: 0;
    position: absolute;
}

.req_mic {
    background-image: url("../../img/conference/request-to-speak.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

.req_share {
    background-image: url("../../img/conference/request-to-share.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

.reqMicTip .dropdown-title{
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #Fff !important;
    padding: 10px 20px;
    line-height: 20px;
}

.reqShareTip .dropdown-title{
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #Fff !important;
    padding: 10px 20px;
    line-height: 20px;
}

.btn {
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    padding: .3rem .8rem;
    letter-spacing: .5px;
}

.btn.btn-sm {
    padding: .10rem .4rem;
    font-size: 12px;
}

.btn-outline-success {
    color: #10d43e;
    background-color: transparent;
    background-image: none;
    border-color: #28a745;
}

.btn-outline-danger {
    color: #ee061e;
    background-color: transparent;
    background-image: none;
    border-color: #dc3545;
}

.list-peserta, .list-peserta-sharing{
    height: 20em;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: scroll;
    overflow-x: hidden;
}

.list-peserta li, .list-peserta-sharing li{
    margin: 5px 0 !important;
}

.nama-peserta-req{
    margin: 20px 0;
    padding:0 16px;
    float:left;
    width:45%;
    text-align:left;
}

.aksi-peserta-req{
    margin: 18px 0;
    padding:0 16px;
    float:right;
    width:35%;
    text-align:right;
}

.req-badge{
    position: absolute; 
    bottom: 60%; 
    right: 15%; 
    transform: translateX(8px); 
    background-color: #ff5533; 
    font-size: 10px; 
    line-height: 0; 
    font-weight: 500; 
    color: #fff; 
    padding: 0.9em 0.5em; 
    border-radius: 100vh;
    animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }
    
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.icon_stopShare {
    width: 100%;
    height: 30px;
    margin: auto;
    background-image: url('../../img/stop-share-screen.svg');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.show_hide_stopShare {
    background: rgba(250,250,250,0.9);
    border: 2px solid #fff;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 5px 0px;
    bottom: 10px;
    right: 10px;
    width: 48px;
    height: 40px;
    position: absolute;
    box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
    z-index: 100;
}

.flex-container {
    display: flex;
    align-items: stretch;
    padding: 10px 15px 30px;
}
  
.flex-container > .flex-bottom {
    margin: auto;
    line-height: 21px;
    font-size: 14px;
}


/*
 tab virtual bg n green screen
*/
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
  }
  
  .tabset .tab-panel {
    display: none;
  }
  
  .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
  .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
  .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
  .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
  .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
  .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
    margin-top: 10px;
  }
  
  .tabset > label {
    position: relative;
    display: inline-block;
    padding: 15px 0px;
    margin-right:20px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    color: #9B9999;
  }
  
  .tabset > label::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 4px;
  }
  
  .tabset > label:hover,
  .tabset > input:focus + label {
    color: #fff;
  }
  
  .tabset > label:hover::after,
  .tabset > input:focus + label::after,
  .tabset > input:checked + label::after {
    background: #1f644c;
  }
  
  .tabset > input:checked + label {
    margin-bottom: -1px;
    color: #fff;
    font-weight:700;
  }
  
  .tabset {
    margin: 10px 30px;
  }

  #btn-choose-file {
    padding: 5px;
    color: #000;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    font-weight:700;
  }
  
  #btn-choose-file:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #e9e9e9 100%);
  }
  
  #choose-file-text {
    margin-left: 5px;
    font-family: sans-serif;
    color: #aaa;
  }

  .rectangleViewImage, .rectangleViewImage-greenscreen{
    display:flex;
    flex-direction: column;
    align-items:center;
    background-color: transparent;
    border: 2px dashed #f3f3f3;
    width:300px;
    height:180px;
    margin: 10px auto 0;
  }
  .rectangleViewInfo, .rectangleViewInfo-greenscreen{
    text-align:center;
    padding:10px 30px 10px;
    color:#9B9999;
  }
  .container-pilihgambar, .container-pilihgambar-greenscreen{
    display:flex;
    flex-direction: column;
    align-items:center;
    margin: 10px auto 0;
  }

  #btn-canvas.spinning-load{
    padding-right: 40px;
  }
#btn-canvas.spinning-load:after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 0;
    height: 0;
    box-shadow: 0px 0px 0 1px #fff;
    position: absolute;
    border-radius: 50%;
    animation: rotate360 .5s infinite linear, exist .1s forwards ease;
}

#btn-canvas.spinning-load:before {
    content: "";
    width: 0px;
    height: 0px;
    border-radius: 50%;
    right: 6px;
    top: 50%;
    position: absolute;
    border: 2px solid #fff;
    border-right: 3px solid #27ae60;
    animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
    
}

@keyframes rotate360 { 
    100% {
        transform: rotate(360deg);
    }
}
@keyframes exist { 
    100% {
        width: 15px;
        height: 15px;
        margin: -8px 5px 0 0;
    }
}

.btn-ouline-grey{
    background: #333;
    color: #fff;
    border: 2px solid #999;
    box-shadow: 0px 0px 4px #fff;
    padding: 5px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

.hsl-control-form {
    display: flex;
    background-color: transparent;
    justify-content:center;
    margin-top: 15px;
}
  
.hsl-control-form .hsl-control-form-range {
    margin: 0 10px;
}

.hsl-control-form-range input{
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background-color: #1f644c;
    outline: none;
    border-radius: 5px;
}

.hsl-control-form-range input::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background-color: #eee;
    border: 2px solid #1f644c;
    border-radius:50%;
    outline: none;
}
.hsl-control-form-range input::-webkit-slider-thumb:hover{
    background-color: #1f644c;
}

.swatch{
    width: 100px;
    height: 30px;
    margin: 5px auto 0px;
    border: 5px solid #333;
    border-radius: 10px;
}