#remotes{
  /* float: left; */
  background-color: black;
  /* width: 480px; */
  width: 680px;
  height: 515px;
  /* border-color: gray; */
  /* border: 2px; */
   /* z-index: 1; */
   z-index: 5;
}

.remote_video_mini{position: absolute; top: 10px; right: 10px; z-index: 5;}

#localScreen{width: 680px; height: 515px; position: absolute; top: 0px; left: 0px;}



#hintText{
position: absolute;
text-align: center;
font-size: 25px;
color: gray;
top: 150px;
left: 170px;
z-index: 4;
}

#canvasRemote {
  position: absolute;
   top : 0px;
   /* left: 0px; */
   left: 50%;
   margin-left: -193px;
   /* width: 680px; */
   /* height: 515px; */
   background: transparent;
   cursor:pointer;
   z-index: 6;
}

.btn_control.clear_img{display:none; z-index: 6; position: absolute;top: 5px;right: 5px;background: #000;opacity: 0.5;} /*background: #00bcd4;*/

#localVideo {
  position: absolute;
   /* top : 0px; */
   /* left: 0px; */
   bottom: 10px;
   left: 10px;
   width: 160px;
   height: 120px;
   background: black;
   z-index: 7;
}


/*temp*/
#voip_call_num{
    display: none;
    position: absolute;
    width: 200px;
    bottom: 50px;
    left: 50%;
    margin-left: -100px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    z-index: 7;
}





#open_file_upload{
    font-size: 0px;
    position: absolute;
    cursor:pointer;
    width: 45px;
    height:35px;
    opacity: 0;
    /* left: 2px; */
    left: 60px;
}

#chatDisplay{
    /* height: calc(100% - 42px - 63px - 5px); */
    /* height: 635px; */
    /* background: url(../img/talk_bg.png); */
    /*height: 100%;*/
    overflow: auto;
    /* padding: 5px 5px 0px 5px; */
    /*padding: 5px;*/
    /*padding-bottom: 40px;*/
}

#chatInputText{
    width:100%; height:100%; box-sizing:border-box; padding:10px; border:0; outline:0;
    /* font-size: 16px;
    margin: 3px;
    height: 85px;
    width: 280px;
    border-radius: 8px; */
    /*float:left;*/
}

/* .chatCustomer{
    width: 100%;
    text-align: right;
    background-color: #F0F3F4;
    display: inline-block;
} */

/* .chatBank{
    text-align: left;
    background-color: grey;
    display: inline-block;
} */

.action_talk{
    float: left;
	width: 100%;
}

.action_talk .profile_image{
	float: left;
	width: 40px;
	height: 40px;
	border-radius: 14px;
}

.action_talk .talk_area{
	float: left;
	width: calc(100% - 48px);
}

.action_talk .talk_area .profile_name{
    margin-left: 5px;
	font-size: 12px;
    color: #5a778e;
}

.action_talk .talk_area .tail{
	float: left;
	position: relative;
	width: 8px;
	height: 22px;
	background: url(../img/chat_balloon_grey.left.png) no-repeat;
	z-index: 1;
}

.action_talk .talk_area .box{
	float: left;
	position: relative;
	/* min-height: 24px; */
	/* max-width: calc(100% - 100px); */
	left: -2px;
	/*background-color: #ffffff;*/
    background-color: #00BCD4;
    color: #FFFFFF;
	border-radius: 3px;
	z-index: 2;
	/*padding: 0px 4px 0px 4px;*/
    /* padding: 4px 4px 4px 4px; */
	word-break: break-all;
    box-shadow: 2px 2px 4px #9e9e9e;
    max-width: calc(100% - 40px);
    font-size: 12px;
    padding: 8px;
    min-height: 18px;
}

.action_talk .talk_area .box.yellow{
    background-color: #e4b200;
}

.action_talk .talk_area .box.red{
    background-color: #e92020;
}


.action_talk .talk_area .time{
    bottom: 1px;
    /* font-size: 0.7em; */
	float: left;
    /* margin-left: 2px; */
    font-size: 10px;
    color: #8a9298;
    width: 90%;
    margin-left: 8px;
    margin-top: 6px;
}

.float_clean{
    height: 12px;
	clear: both;
}

.my_chat{
	float: right;
	width: 100%;
}

.my_chat .time
{
    /* font-size: 0.7em; */
	float: right;
	bottom: 0;
    /* margin-right: 2px; */
    font-size: 10px;
    color: #8a9298;
    width: 90%;
    text-align: right;
    margin-right: 8px;
    margin-top: 6px;
}

.my_chat .box
{
	float: right;
	position: relative;
	/* min-height: 24px; */
	/* max-width: calc(100% - 64px); */
    max-width: calc(100% - 104px);
	left: 2px;
	background-color: #F0F3F4;
    color: #1C2B36;
	border-radius: 3px;
	z-index: 2;
	/*padding: 0px 4px 0px 4px;*/
    /* padding: 4px 4px 4px 4px; */
	word-break: break-all;
    box-shadow: 2px 2px 4px #9e9e9e;
    max-width: calc(100% - 80px);
    padding: 8px;
    font-size: 12px;
    padding: 8px;
    min-height: 18px;
}


.my_chat .tail
{
	float: right;
	position: relative;
	width: 8px;
	height: 22px;
	background: url(../img/chat_balloon_yellow.right.png) no-repeat;
	/* z-index: 1; */
    z-index: 3;
}

/* #sessionInput{display:inline-block; width:149px; height:31px; font-size:16px;} */
/* #roomGen{float:right;display:inline-block; width:50px; height:35px; line-height:35px; background:#1c2b36; font-size:16px; color:#fff; text-align:center;} */
#sessionInput{display:inline-block; width:140px; height:31px; font-size:16px;}
#roomGen{float:right;display:inline-block; width:62px; height:35px; line-height:35px; background:#1c2b36; font-size:16px; color:#fff; text-align:center;}
#telInput{display: inline-block; width: 157px; height: 30px; line-height: 30px; font-size: 16px; padding-left: 5px; border: 0px;}

#guestTelInput{margin-left: 10px; margin-bottom: 5px; margin-right: 10px; width: calc(100% - 20px);}

/* 팝업 */
.popup_control{position:fixed; display:none; z-index:100;}
.popup_control::before{content:''; position:fixed; top:0; bottom:0; left:0; right:0; display:block; background:rgba(0,0,0,.8); z-index:-1;}

.capture_img{top:50%; left:50%; width:680px; height:622px; margin-left:-340px; margin-top:-311px; /*text-align:center;*/}
.capture_img h2{height:30px; line-height:30px; font-weight:normal; font-size:15px; color:#ffffff; background:#00bcd4; border-top-left-radius:10px; border-top-right-radius:10px; text-align: center;}
.capture_img .btn_capture_list{position:absolute; right:9px; top:9px; width:35px; height:13px; line-height:13px;background-image: url('../office_img/capture_list.png');}
.capture_img .btn_left_arrow{position:absolute; left:10px; bottom:48px; width:44px; height:17px; line-height:17px;background-image: url('../office_img/left_arrow.png');}
.capture_img .btn_right_arrow{position:absolute; right:10px; bottom:48px; width:44px; height:17px; line-height:17px;background-image: url('../office_img/right_arrow.png');}
.capture_img .btn_cancel{position:absolute; right:10px; bottom:10px; width:43px; height:28px; line-height:28px; font-size:12px; color:#fff; background:#ff675a; border-radius: 3px;}
.capture_img .btn_save{position:absolute; right:63px; bottom:10px; width:43px; height:28px; line-height:28px; font-size:12px; color:#fff; background:#008bd5; border-radius: 3px;}
.capture_img .btn_save_as{position:absolute; right:116px; bottom:10px; width:113px; height:28px; line-height:28px; font-size:12px; color:#fff; background:#008bd5; border-radius: 3px;}
.capture_img .btn_share{position:absolute; right:239px; bottom:10px; width:43px; height:28px; line-height:28px; font-size:12px; color:#fff; background:#00d19c; border-radius: 3px;}
.capture_img .btn_delete{position:absolute; left:10px; bottom:10px; width:43px; height:28px; line-height:28px; font-size:12px; color:#fff; background:#9faab4; border-radius: 3px;}
.capture_img #captuteDisplay{width:100%; height:592px;background-color: #ffffff; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}

#captuteDisplayContainer{width:680px;height:515px; background-color: #000}

.video_canvas{z-index: 1;position: absolute;}
.video_canvas.default{top: 50px;left: 20px;width: 113px;height: 151px;padding-left: 43px;padding-right: 44px;background-color: rgb(0, 0, 0);border-radius: 10px;}
.video_canvas.defaultLandVideo{top: 50px;left: 20px;width: 200px;height: 151px;background-color: rgb(0, 0, 0);border-radius: 10px;}
.canvas_canvas{position: absolute; left:0px; z-index: 2;}
.canvas_canvas.default{border-radius:10px;}
.canvas_canvas.defaultOnVideo{padding-left:43px; padding-right:44px;}


/* 지도 더하기 test */
.title {font-weight:bold;display:block;color: #d44200;}
.bAddr {padding:5px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}


/* login page */
.agent_login_wrap{position: absolute; top:50%; left:50%; height: 445px; width: 890px;margin-top:-222px; margin-left:-445px;}
.agent_log_wrap{position: absolute; top: 0px; left: 0px; height: 445px; width: 445px; /* background-color: #00bcd4; border-bottom-left-radius: 20px; border-top-left-radius: 20px; */}
/* .agent_logo{width: 80px;height: 80px;position: absolute;top: 120px;left: 160px;}
.agent_logo_title{position: absolute;
    text-align: center;
    width: 300px;
    height: 50px;
    top: 225px;
    left: 50px;
    color: #fff;
    line-height: 50px;
    font-size: 30px;} */

.agent_input_wrap{position: absolute;
    top: 0px;
    right: 0px;
    height: 445px;
    width: 445px;
    /*background-color: #cffbff;
    border-bottom-right-radius: 20px;
border-top-right-radius: 20px;*/}

/* .logout{position: absolute; top: 1px; right: 1px; width: 21px; height: 20px; color: #fff; font-size: 5px;background-image: url('../office_img/btn-logout.png');} */
.logout_form{display:inline-block; padding-left:15px;}
.logout{display:inline-block; width:20px; height:21px; vertical-align:middle;background-image: url('../office_img/btn-logout.png');}


.toast_control{position:fixed; top:260px; left:50%; display:none; width:480px; margin-left:-240px; line-height:1.2; padding:25px 0; text-align:center; font-size:25px; color:#fff; background:rgba(25, 28, 30, .9); border-radius:10px; z-index:100;}
.toast_close{display: none;position: absolute;top: 5px;right: 10px;color: #fff;font-size: 20px;}
.toast_control::before{content:''; position:fixed; top:0; bottom:0; left:0; right:0; display:block; background:rgba(0,0,0,.6); z-index:-1;}


/* .agent_login_title{position: absolute;left:20px; top:10px;color: #fff;font-size: 50px;} */
.logine_input{position: absolute; left:34px; top:112px;width: 353px; height:50px;background-image: url('../office_img/login_input.png'); border: none; padding-left: 22px;}
.login_id{top:142px;}
.login_pw{top:207px;}
.login_remeber{position: absolute; left:36px;top:325px}
.login_remember_label{position: absolute; left:61px;top:325px; font-size: 13px;}
.login_forgot{position: absolute; /*left:242px;*/top:245px; right: 36px; font-size: 13px;}
.login_forgot > a:hover{text-decoration: underline;}
.login_join{position: absolute; width: 200px; left: 50%; margin-left: -100px; top: 367px; color: #00bcd4; text-align: center; font-size: 15px;}
.login_btn{position: absolute;left:34px;top:353px;width: 375px; height:50px;background-image: url('../office_img/login_btn.png');/*background-color: #1c2b36;color: #fff*/}



input[type=radio]:before { content:""; position: relative;top: -2px;left: -2px;display:inline-block; width:16px; height:16px; background: #f0f3f4; border-radius: 8px; }
input[type=radio]:checked:before { background: #1c2b36; border-radius: 8px; }


input[type=checkbox]:before { content:""; position: relative;top: -2px;left: -2px;display:inline-block; width:20px; height:20px; background-image: url('../office_img/login_remember_check_off.png'); }
input[type=checkbox]:checked:before { background-image: url('../office_img/login_remember_check_on.png'); }

.regi_btn{position: absolute;left:34px;top:320px;width: 375px; height:50px;background-color: #1c2b36;color: #fff; font-size: 20px;border-radius: 5px;}


.chrome_download{ position: absolute;top: 50%;left: 50%;width: 200px;margin-top: 240px;margin-left: -100px;color: #fff;text-decoration: underline;text-align: center;}

.select_text{display:inline-block; width:160px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

.account_wrap > img{vertical-align: middle;}
#sms_popup .select-styled{padding-left: 5px;}
#sms_popup{height: 135px;}

#agent .picture > img{width:43px; height:43px;}
#agent .picture {margin-top: 42px;}
#agent .name {margin-top: 54px; text-align: left;}
#agent .privacy {margin-top: 0px;}
#agent .privacy .privacy_txt{margin-top: 5px;}

#customer.tabcontent .name{display:none; margin: 1px 0px; text-align: left;}
#customer.tabcontent .number{display:none; font-size: 20px; text-align: left;}
#customer.tabcontent .memo{display:none; font-size: 12px; margin-top: 10px; text-align: left;}
#customer.tabcontent .add_memo{/*display:none;*/ text-align: right;}
#customer.tabcontent .modify{/*display:none;*/ margin-top: 5px;} /* modify from /office_css/style.css*/
#customer > hr{border-top-width: 0px; border-bottom-width: 1px; margin-top: 5px;}

.customer_history_wrap{text-align: left;height: 100px; width: calc(100% - 10px); position: absolute;top: 168px;}
.customer_history_wrap > li{margin-bottom: 6px;}
.customer_history_wrap .date_wrap{background-color: #6483a2;padding: 1px 0px; font-size: 12px;}
.customer_history_wrap .date_wrap .date{font-size: 12px;}
.customer_history_wrap .date_wrap .time{font-size: 12px;}
.customer_history_wrap .type{font-size: 12px; color: #99f78f; margin-top: 5px;}
.customer_history_wrap .during{font-size: 12px; float: right;}
.customer_history_wrap .custome_history_memo{font-size: 12px; margin-top: 12px; margin-bottom: 5px}

/* #customer .join_customer {height: 64px; font-size: 20px; color: #fff; margin-top: 27px;}
#customer .join_customer > span{margin-left: 21px; font-size: 40px; color: #00bcd4}
#customer .privacy {margin-top: 63px;}
#customer .privacy .privacy_txt{margin-top: 22px; font-size: 15px;} */


/* phonebook */
/* .btn_phonebook{height: 29px; line-height: 28px; margin-left: 3px; width: 67px; border-radius: 3px; text-align: center; background: #fff; vertical-align: top;} */
.btn_phonebook{height: 30px; width: 40px; background: #1c2b36;}
.btn_phonebook > img{vertical-align: middle;}
.popup_control.phonebook{top: 50%; left: 50%; width: 610px; height: 622px; margin-left: -275px; margin-top: -311px; }
.phonebook h2{height: 30px; line-height: 30px; font-weight: normal; font-size: 15px; color: #ffffff; background: #00bcd4; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center;}
.phonebook_contents_wrap{width: 100%; height: 592px; background-color: #ffffff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px}
.phonebook_contents_wrap .btn_phonebook_top{position: relative; right: 10px; top: 9px; width: 43px; height: 28px; margin-left: 6px; line-height: 28px; font-size: 12px; color: #fff; border-radius: 3px; float: right;}
.phonebook_contents_wrap .btn_phonebook_top.add{background: #1d89cf;}
.phonebook_contents_wrap .btn_phonebook_top.del{background: #ed7161;}
.phonebook_contents_wrap .btn_phonebook_top.cancel{background: #fff; color: #2e3e4a; border: 1px solid #2e3e4a;}
.phonebook_contents_wrap .btn_close{position: absolute; right: 10px; bottom: 10px; width: 43px; height: 28px; line-height: 28px; font-size: 12px; color: #fff; background: #ff675a; border-radius: 3px;}
#phonebookListContainer{position: absolute;top: 76px; width: 100%; height: calc(100% - 124px);}
#phonebookListContainer table.row{border-collapse: collapse; border-spacing:0; width:100%;}
/* table.row tr{cursor: pointer;} */
table.row tr:hover td{background: #f4ffcc;}
table.row th{height:30px; font-weight:normal; font-size:15px; color:#8a9298; background:#f0f3f4;}
table.row td{height:34px; padding:0 1%; background:#fff;font-size:13px; text-align:center; border-bottom:2px solid rgba(155, 155, 155, 0.1);}
table.row td input[type=text]{width: 100%; border: none; text-align: center;font-size: 13px;}
#phonebookAddRowTr td{background: #f4ffcc;}
.phonebookListChk{display: none;}
.btn_table{height:26px; line-height:26px; padding:0 5px; font-size:13px; color:#2e3e4a; border-radius:5px; border:1px solid #2e3e4a; text-align:center;}
.btn_table:hover{background:#2e3e4a; color:#fff;}
.btn_table.del{display: none; border:1px solid #e24242; color: #e24242;}
.btn_table:hover.del{background:#e24242; color:#fff;}






/* t sign */
#canvasSign{
    display: none;
    position: absolute;
    top: zpx;
    left: 498px;
    border: solid 2px #4c4c4c;
    background: #ecd1004f;
    z-index: 10;
    /* border: solid 2px #fff; */
    /* background: #f1efe04f; */
}

#canvasSignWrap{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 680px;
    height: 515px;
}

.btn_control.save_sign{
    display: none;
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: transparent;
    z-index: 6;
}

#remote_sign_btn_wrap{display: none;}
/* t sign */


.select_wrap.preset{display: none;}
.select_wrap.sms{width: 40px;}
.test_btn{display: none;}


/* memo window style */
.memo_win_logo_bar{background: #00bcd4;
color: #fff;
padding: 4px;
text-align: center;}

.memo_win_title{padding-left: 15px;
margin-top: 14px;}

.memo_win_subject{}

.memo_win_title_input{
margin-left: 10px;
min-width: 220px;
width: calc(100% - 55px);
height: 40px;
line-height: 40px;
background: rgba(155, 155, 155,0.1);
border: none;
box-sizing: border-box;
padding: 0 5px;}

.memo_win_body{margin-top: 14px;
padding-left: 15px;}

.memo_win_body_textarea{
margin-left: 10px;
min-width: 220px;
width: calc(100% - 55px);
/* border: none; */
height: 250px;
/* line-height: 40px; */
background: rgba(155, 155, 155,0.1);
border: none;
box-sizing: border-box;
padding: 0 5px;
}

.memo_win_button_area{margin-top: 15px;
text-align: right;}

.memo_win_button_save{width: 43px;
height: 28px;
line-height: 28px;
font-size: 12px;
color: #fff;
background: #00bcd4;
border-radius: 3px;
margin: 0px 3px;}

.memo_win_button_cancel{width: 43px;
height: 28px;
line-height: 28px;
font-size: 12px;
color: #fff;
background: #ff675a;
border-radius: 3px;
margin: 0px 3px;
margin-right: 13px;}

.memo_win_button_save[disabled]{
background: #00add466;
cursor: unset;
}


/* add more css for /office_css/style.css */
/* .state_wrap{width: 230px;} */
.account_wrap{padding-left: 27px; width: 151px;}

.time_wrap{margin-left: 10px; margin-right: 25px}
.call{padding-right: 9px; padding-left: 15px;}
.connect_wrap .btn_direct{cursor: pointer; display: none;}
.connect_wrap .btn_sms{cursor: pointer; text-align: unset;}
.connect_wrap .btn_sms > span{margin-left: 12px;}
.connect_wrap .btn_sms > img{margin-left: 21px; margin-bottom: 3px;}
.connect_wrap .btn_sms.on > img{transform: rotate(180deg);}
.connect_wrap .txt{margin-right: 8px;}

.btn_call.disabled{background:#c1c1c1;}
.btn_control3.disabled .icon {background:#A4A4A4;}
.btn_control3.disabled .txt {color:#6ad8e6;}



.state_wrap{padding-left: 25px;}
.online .bullet{background:#ff0000;}
.online.on .bullet{background:#00bcd4;}
.subMenu{width: 20px; height: 21px; padding-left: 24px;}
.info{padding-left: 24px;}
.logout_form{padding-left: 24px;}


.video_wrap {height:515px;}
.chat_wrap {width:335px;}

.control_window .btn_desc.current{color: #ffe200;}

.btn_send_invite.disabled {background-color: #a1aab3;}
.btn_chat_send.disabled {background-color: #a1aab3;}
.btn_control.disabled {background-color: #a1aab3;}

.btn_control.disabled .off{display:none;}
.btn_control.disabled .on{display:inline-block; opacity: 0.7; width: 43px}

.btn_remote:hover {background:#2c9ce5;}
.btn_remote.stop:hover{background:#f98778;}

.btn_remote.disabled {background-color: #a1aab3;}
.btn_remote.stop.disabled:hover{background: #a1aab3;}



.call_history_list .date {color: #8a9298;}
.call_history_list .chat_transcript {color: #ffffff; font-size: 16px;}
.call_history_list .get_file {color: #8a9298; float: right;}
.call_history_list .get_file_button{background: #00bcd4; color: #fff; padding: 5px 11px; border-radius: 5px; font-size: 12px;}
.call_history_list .get_file_button.disabled{background: #c1c1c1;}