@charset "UTF-8";
/* @include transition(all,2s,ease-out); */
/*範例：*/
/* button{*/
/* 	@include opacity(0.8);*/
/* }*/
/*https://medium.com/@vilcins/usefull-sass-mixins-7a68c5491bda*/
.chat_body {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}
.chat_body.color_blue {
  background: #047cc3;
}
.chat_body.color_blue .chat_inside {
  background: #047cc3;
}
.chat_body.color_blue .chat_inside .chat_welcome {
  background: rgb(150.1507537688, 214.6733668342, 252.8492462312);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(150.1507537688, 214.6733668342, 252.8492462312)), to(#fff));
  background: linear-gradient(to bottom, rgb(150.1507537688, 214.6733668342, 252.8492462312), #fff);
}
.chat_body.color_blue .chat_inside .chat_content {
  background: rgb(3.4874371859, 108.1105527638, 170.0125628141);
}
.chat_body.color_blue .chat_inside .chat_list .chat_search {
  background: #047cc3;
}
.chat_body.color_blue .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_blue .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #047cc3;
}
.chat_body.color_red {
  background: #bc2769;
}
.chat_body.color_red .chat_inside {
  background: #bc2769;
}
.chat_body.color_red .chat_inside .chat_welcome {
  background: rgb(241.4273127753, 189.5726872247, 212.5418502203);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(241.4273127753, 189.5726872247, 212.5418502203)), to(#fff));
  background: linear-gradient(to bottom, rgb(241.4273127753, 189.5726872247, 212.5418502203), #fff);
}
.chat_body.color_red .chat_inside .chat_content {
  background: rgb(166.8810572687, 34.6189427313, 93.204845815);
}
.chat_body.color_red .chat_inside .chat_list .chat_search {
  background: #bc2769;
}
.chat_body.color_red .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_red .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #bc2769;
}
.chat_body.color_brown {
  background: #853512;
}
.chat_body.color_brown .chat_inside {
  background: #853512;
}
.chat_body.color_brown .chat_inside .chat_welcome {
  background: rgb(236.5231788079, 154.4039735099, 118.4768211921);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(236.5231788079, 154.4039735099, 118.4768211921)), to(#fff));
  background: linear-gradient(to bottom, rgb(236.5231788079, 154.4039735099, 118.4768211921), #fff);
}
.chat_body.color_brown .chat_inside .chat_content {
  background: rgb(110.5397350993, 44.0496688742, 14.9602649007);
}
.chat_body.color_brown .chat_inside .chat_list .chat_search {
  background: #853512;
}
.chat_body.color_brown .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_brown .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #853512;
}
.chat_body.color_yellow {
  background: #f8920f;
}
.chat_body.color_yellow .chat_inside {
  background: #f8920f;
}
.chat_body.color_yellow .chat_inside .chat_welcome {
  background: rgb(253.7813765182, 236.024291498, 213.2186234818);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(253.7813765182, 236.024291498, 213.2186234818)), to(#fff));
  background: linear-gradient(to bottom, rgb(253.7813765182, 236.024291498, 213.2186234818), #fff);
}
.chat_body.color_yellow .chat_inside .chat_content {
  background: rgb(230.7692307692, 132.6923076923, 6.7307692308);
}
.chat_body.color_yellow .chat_inside .chat_list .chat_search {
  background: #f8920f;
}
.chat_body.color_yellow .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_yellow .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #f8920f;
}
.chat_body.color_green {
  background: #36810e;
}
.chat_body.color_green .chat_inside {
  background: #36810e;
}
.chat_body.color_green .chat_inside .chat_welcome {
  background: rgb(153.5524475524, 239.041958042, 107.958041958);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(153.5524475524, 239.041958042, 107.958041958)), to(#fff));
  background: linear-gradient(to bottom, rgb(153.5524475524, 239.041958042, 107.958041958), #fff);
}
.chat_body.color_green .chat_inside .chat_content {
  background: rgb(44.3706293706, 105.9965034965, 11.5034965035);
}
.chat_body.color_green .chat_inside .chat_list .chat_search {
  background: #36810e;
}
.chat_body.color_green .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_green .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #36810e;
}
.chat_body.color_cyanblue {
  background: #008699;
}
.chat_body.color_cyanblue .chat_inside {
  background: #008699;
}
.chat_body.color_cyanblue .chat_inside .chat_welcome {
  background: #66ecff;
  background: -webkit-gradient(linear, left top, left bottom, from(#66ecff), to(#fff));
  background: linear-gradient(to bottom, #66ecff, #fff);
}
.chat_body.color_cyanblue .chat_inside .chat_content {
  background: rgb(0, 111.6666666667, 127.5);
}
.chat_body.color_cyanblue .chat_inside .chat_list .chat_search {
  background: #008699;
}
.chat_body.color_cyanblue .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_cyanblue .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #008699;
}
.chat_body.color_purple {
  background: #7f50b4;
}
.chat_body.color_purple .chat_inside {
  background: #7f50b4;
}
.chat_body.color_purple .chat_inside .chat_welcome {
  background: rgb(231.448, 222.8, 241.2);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(231.448, 222.8, 241.2)), to(#fff));
  background: linear-gradient(to bottom, rgb(231.448, 222.8, 241.2), #fff);
}
.chat_body.color_purple .chat_inside .chat_content {
  background: rgb(114.436, 70.35, 164.15);
}
.chat_body.color_purple .chat_inside .chat_list .chat_search {
  background: #7f50b4;
}
.chat_body.color_purple .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_purple .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #7f50b4;
}
.chat_body.color_gray {
  background: #444;
}
.chat_body.color_gray .chat_inside {
  background: #444;
}
.chat_body.color_gray .chat_inside .chat_welcome {
  background: #aaaaaa;
  background: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#fff));
  background: linear-gradient(to bottom, #aaaaaa, #fff);
}
.chat_body.color_gray .chat_inside .chat_content {
  background: rgb(55.25, 55.25, 55.25);
}
.chat_body.color_gray .chat_inside .chat_list .chat_search {
  background: #444;
}
.chat_body.color_gray .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_gray .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #444;
}
.chat_body.color_redyellow {
  background: #99001d;
}
.chat_body.color_redyellow .chat_inside {
  background: #99001d;
}
.chat_body.color_redyellow .chat_inside .chat_welcome {
  background: #ff6683;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff6683), to(#fff));
  background: linear-gradient(to bottom, #ff6683, #fff);
}
.chat_body.color_redyellow .chat_inside .chat_content {
  background: rgb(127.5, 0, 24.1666666667);
}
.chat_body.color_redyellow .chat_inside .chat_list .chat_search {
  background: #99001d;
}
.chat_body.color_redyellow .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_redyellow .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #99001d;
}
.chat_body.color_pink {
  background: #d74261;
}
.chat_body.color_pink .chat_inside {
  background: #d74261;
}
.chat_body.color_pink .chat_inside .chat_welcome {
  background: rgb(250.6331877729, 234.3668122271, 237.7510917031);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(250.6331877729, 234.3668122271, 237.7510917031)), to(#fff));
  background: linear-gradient(to bottom, rgb(250.6331877729, 234.3668122271, 237.7510917031), #fff);
}
.chat_body.color_pink .chat_inside .chat_content {
  background: rgb(210.5458515284, 44.9541484716, 79.4061135371);
}
.chat_body.color_pink .chat_inside .chat_list .chat_search {
  background: #d74261;
}
.chat_body.color_pink .chat_inside .chat_list .list ul li .window ul li a:hover, .chat_body.color_pink .chat_inside .chat_list .list ul li .window ul li a:focus {
  color: #d74261;
}

.chat_window.color_blue {
  background: #047cc3;
}
.chat_window.color_blue .chat_function {
  background: rgb(2.9748743719, 92.2211055276, 145.0251256281);
}
.chat_window.color_red {
  background: #bc2769;
}
.chat_window.color_red .chat_function {
  background: rgb(145.7621145374, 30.2378854626, 81.40969163);
}
.chat_window.color_brown {
  background: #853512;
}
.chat_window.color_brown .chat_function {
  background: rgb(88.0794701987, 35.0993377483, 11.9205298013);
}
.chat_window.color_yellow {
  background: #f8920f;
}
.chat_window.color_yellow .chat_function {
  background: rgb(205.991902834, 118.4453441296, 6.008097166);
}
.chat_window.color_green {
  background: #36810e;
}
.chat_window.color_green .chat_function {
  background: rgb(34.7412587413, 82.993006993, 9.006993007);
}
.chat_window.color_cyanblue {
  background: #008699;
}
.chat_window.color_cyanblue .chat_function {
  background: rgb(0, 89.3333333333, 102);
}
.chat_window.color_purple {
  background: #7f50b4;
}
.chat_window.color_purple .chat_function {
  background: rgb(101.992, 62.7, 146.3);
}
.chat_window.color_gray {
  background: #444;
}
.chat_window.color_gray .chat_function {
  background: rgb(42.5, 42.5, 42.5);
}
.chat_window.color_redyellow {
  background: #99001d;
}
.chat_window.color_redyellow .chat_function {
  background: rgb(102, 0, 19.3333333333);
}
.chat_window.color_pink {
  background: #d74261;
}
.chat_window.color_pink .chat_function {
  background: rgb(189.8253275109, 40.1746724891, 71.3100436681);
}

.open_chat {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../images/icon/icon_chat_white.svg) no-repeat center center #5cb85c;
  background-size: 50%;
  text-align: center;
  color: #fff;
  line-height: 60px;
  text-decoration: none;
  position: fixed;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  bottom: 70px;
  right: 10px;
  z-index: 100001;
}
@media screen and (max-width: 767px) {
  .open_chat {
    bottom: 130px;
  }
}
.open_chat span {
  border-radius: 0.25em;
  background: #ff3e4d;
  display: block;
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  height: 1.5em;
  line-height: 1.5em;
  padding: 0 0.5em;
}
@media screen and (max-width: 767px) {
  .open_chat.has_bottom {
    bottom: 4em;
  }
}
.open_chat:hover, .open_chat:focus {
  background: url(../images/icon/icon_chat_white.svg) no-repeat center center #5cb85c;
  background-size: 50%;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.chat_window {
  position: fixed;
  width: 720px;
  height: 70%;
  min-height: 480px;
  right: 0;
  bottom: 0;
  z-index: 999999;
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: -5px -5px 30px -5px rgba(0, 0, 0, 0.25);
          box-shadow: -5px -5px 30px -5px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.chat_window.half {
  width: 360px;
}
.chat_window.half .chat_welcome {
  display: none;
}
.chat_window.half .chat_content {
  width: 100%;
  left: 0;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  display: none;
}
.chat_window.half .chat_content.show {
  display: block;
  z-index: 9999;
}
@media screen and (max-width: 565px) {
  .chat_window.half {
    width: 100%;
  }
}
.chat_window.half .chat_list {
  left: 0;
  width: 100%;
}
.chat_window iframe {
  width: 100%;
  height: 100%;
  left: 0;
}
@media screen and (max-width: 565px) {
  .chat_window {
    width: 100%;
    height: calc(100% - 60px);
  }
}

.chat_function {
  position: relative;
  height: 2rem;
  width: 100%;
  z-index: 99;
}
.chat_function .messenger {
  color: #fff;
  padding: 0.3em 0.25em 0.2em;
}
.chat_function .messenger span {
  display: inline-block;
  font-size: 0.875rem;
  margin-left: 0.5em;
}
.chat_function a.close {
  width: 1em;
  height: 1.5em;
  display: block;
  float: left;
  position: relative;
  margin: 0.25em 0 0 0.5em;
  margin-right: 0.5em;
}
.chat_function a.close:hover:before {
  background: rgb(255, 255, 255);
}
.chat_function a.close:before {
  position: absolute;
  top: 0.65em;
  left: 0em;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
  content: "";
}
.chat_function a.minimize {
  width: 1em;
  height: 1.5em;
  display: block;
  position: absolute;
  right: 0.5em;
  top: 0.35em;
}
@media screen and (max-width: 565px) {
  .chat_function a.minimize {
    display: none;
  }
}
.chat_function a.minimize:hover:before {
  border: 2px solid rgb(255, 255, 255);
  border-left: none;
  border-bottom: none;
}
.chat_function a.minimize:before {
  position: absolute;
  top: 0.35em;
  left: 0.25em;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-left: none;
  border-bottom: none;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  content: "";
}
.chat_function a.minimize.inverse:before {
  left: 0.5em;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-right: none;
  border-top: none;
}
.chat_function a.minimize.inverse:hover:before, .chat_function a.minimize.inverse:focus:before {
  border: 2px solid rgb(255, 255, 255);
  border-right: none;
  border-top: none;
}

.chat_inside {
  max-width: 720px;
  min-height: 480px;
  height: 100%;
  background: #047cc3;
  margin: 0;
  padding: 0;
  position: relative;
}
@media screen and (max-width: 565px) {
  .chat_inside {
    width: 100%;
    height: 100%;
  }
}

.chat_body {
  background: #047cc3;
}

.chat_list {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 360px;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
  z-index: 15;
}
@media screen and (max-width: 545px) {
  .chat_list {
    width: 100%;
    height: 100%;
    z-index: 13;
    left: 0;
  }
}
.chat_list .chat_search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.5em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #047cc3;
}
.chat_list .chat_search .form_grp {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  margin-right: 1em;
  position: relative;
}
.chat_list .chat_search .form_grp:before {
  position: absolute;
  width: 1em;
  height: 1em;
  content: "";
  background: url(../images/basic/icon_search_white.png) no-repeat center center;
  background-size: 16px;
  z-index: 2;
  top: 0.5em;
  left: 0.5em;
  opacity: 0.5;
}
.chat_list .chat_search .form_grp input {
  width: 100%;
  height: 2.5em;
  padding-left: 2.5em;
  font-size: 0.813rem;
}
.chat_list .chat_search .form_grp input[type=text] {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  border: 1px solid transparent;
}
.chat_list .chat_search .form_grp input[type=text]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ddd;
}
.chat_list .chat_search .form_grp input[type=text]::-moz-placeholder {
  /* Firefox 19+ */
  color: #ddd;
}
.chat_list .chat_search .form_grp input[type=text]:-ms-input-placeholder {
  /* IE 10+ */
  color: #ddd;
}
.chat_list .chat_search .form_grp input[type=text]:-moz-placeholder {
  /* Firefox 18- */
  color: #ddd;
}
.chat_list .chat_search .form_grp input[type=text]:focus {
  border: 1px solid transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: rgba(0, 0, 0, 0.5);
}
.chat_list .chat_search select {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 25%;
          flex: 0 1 25%;
  width: 25%;
  height: 2.5em;
  font-size: 0.813rem;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.25) url(../images/basic/icon_select_arrow_white.svg) no-repeat right center;
  background-size: 16px;
  color: #fff;
}
.chat_list .chat_search select:focus {
  border: 1px solid transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: rgba(0, 0, 0, 0.5) url(../images/basic/icon_select_arrow_white.svg) no-repeat right center;
  background-size: 16px;
}
.chat_list .list {
  position: absolute;
  width: 100%;
  height: calc(100% - 3.1em);
  bottom: 0;
  background: #fff;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
}
.chat_list .list .annoucement {
  background: rgb(253.2697095436, 219.8174273859, 117.7302904564);
  padding: 1em 1.5em 1em 1em;
}
.chat_list .list .annoucement span {
  font-size: 0.813rem;
  display: block;
  line-height: 1.25em;
  color: #666;
}
.chat_list .list .annoucement a.close_no_script {
  position: absolute;
  top: 0.25em;
  right: 0.45em;
  width: 0.75em;
  height: 0.75em;
  opacity: 0.25;
}
.chat_list .list .annoucement a.close_no_script i {
  -webkit-transform: scale(5%);
          transform: scale(5%);
}
.chat_list .list .annoucement a.close_no_script:hover {
  opacity: 0.5;
}
.chat_list .list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 4em;
}
.chat_list .list ul li {
  border-bottom: 1px solid #cecece;
  position: relative;
  padding-bottom: 20px;
  background: #f1f1f1;
  position: relative;
}
.chat_list .list ul li:hover, .chat_list .list ul li:focus {
  background: transparent;
}
.chat_list .list ul li:last-child .more_function .window {
  top: -80px;
  bottom: auto;
}
.chat_list .list ul li .more_function {
  position: absolute;
  right: 0;
  top: auto;
  bottom: 5px;
  width: 50%;
  height: 10px;
}
.chat_list .list ul li .more_function a.dot {
  width: 80px;
  padding: 0;
  display: block;
  height: 15px;
  margin: 0 0 0 auto;
  background: url(../images/icon/icon_dotree.svg) no-repeat center center;
  background-size: 40px;
}
.chat_list .list ul li .more_function .window {
  position: absolute;
  top: 5px;
  right: 1em;
  background: #fff;
  border-radius: 0.35em;
  -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.85);
          box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.85);
  padding: 0.75em;
  min-width: 6em;
  display: none;
}
.chat_list .list ul li .more_function .window.open {
  display: block;
  z-index: 999999;
}
.chat_list .list ul li .more_function .window ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  padding-bottom: 0em;
}
.chat_list .list ul li .more_function .window ul li {
  display: block;
  border-bottom: 1px dashed #dedede;
  padding: 0.25em;
  font-size: 0.813rem;
  margin-bottom: 0.25em;
  background: #fff;
}
.chat_list .list ul li .more_function .window ul li:hover {
  background: none;
}
.chat_list .list ul li .more_function .window ul li a {
  padding: 0;
  color: #555;
  background: #fff;
}
.chat_list .list ul li .more_function .window ul li a i {
  opacity: 0.5;
  margin-right: 0.5em;
}
.chat_list .list ul li .more_function .window ul li a:hover, .chat_list .list ul li .more_function .window ul li a:focus {
  color: rgb(5.0251256281, 155.7788944724, 244.9748743719);
  background: #fff;
}
.chat_list .list ul li .more_function .window ul li a:hover i, .chat_list .list ul li .more_function .window ul li a:focus i {
  opacity: 0.75;
}
.chat_list .list ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.75em 1em 0.5em 0.5em;
}
.chat_list .list ul li a.bookmark:after {
  position: absolute;
  background: url(../images/icon/icon_bookmark_red.svg) no-repeat center center;
  background-size: contain;
  width: 20px;
  height: 30px;
  content: "";
  right: 3em;
  top: 0.5em;
}
.chat_list .list ul li a:hover .summary .name, .chat_list .list ul li a:focus .summary .name {
  color: #333;
}
.chat_list .list ul li a:hover .pic .status, .chat_list .list ul li a:focus .pic .status {
  border: 2px solid #fff;
}
.chat_list .list ul li a.online .pic .status {
  background: #5aff00;
}
.chat_list .list ul li a.offline .pic .status {
  background: #aaa;
}
.chat_list .list ul li a .pic {
  -ms-flex-preferred-size: 50px;
      flex-basis: 50px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50px;
          flex: 0 0 50px;
  width: 50px;
  height: 50px;
  margin: 0 1em 0 0;
  border-radius: 0.25rem;
  position: relative;
}
.chat_list .list ul li a .pic img {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.chat_list .list ul li a .pic .status {
  position: absolute;
  top: -0.45em;
  right: -0.45em;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  background: #aaa;
  border: 2px solid #f1f1f1;
}
.chat_list .list ul li a .chat_summary {
  -ms-flex-preferred-size: 50px;
      flex-basis: 50px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50px;
          flex: 1 1 50px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  overflow: hidden;
}
.chat_list .list ul li a .chat_summary .name {
  color: #555;
  width: 80%;
  -ms-flex-preferred-size: 80%;
      flex-basis: 80%;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 80%;
          flex: 0 1 80%;
  margin: 0;
  font-weight: bold;
  margin-bottom: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat_list .list ul li a .chat_summary .new_message {
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  position: absolute;
  top: 0;
  right: 0.25em;
  text-align: center;
  line-height: 2em;
  width: 2em;
  font-weight: bold;
  font-size: 0.813rem;
}
.chat_list .list ul li a .chat_summary .new_message.add_message {
  background: #ff3e4d;
}
.chat_list .list ul li a .chat_summary .summary {
  font-size: 0.813rem;
  color: #666;
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70%;
          flex: 0 0 70%;
  width: 70%;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat_list .list ul li a .chat_summary time {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 25%;
          flex: 1 0 25%;
  color: #717171;
  font-size: 0.75rem;
  text-align: right;
  white-space: nowrap;
}

.chat_welcome {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0px;
  top: 0;
  background: #d0dada;
  z-index: 9999;
  background: rgb(150.1507537688, 214.6733668342, 252.8492462312);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(150.1507537688, 214.6733668342, 252.8492462312)), to(#fff));
  background: linear-gradient(to bottom, rgb(150.1507537688, 214.6733668342, 252.8492462312), #fff);
  pointer-events: none;
}
.chat_welcome.show {
  opacity: 1;
}
.chat_welcome.hide {
  opacity: 0;
  display: block;
  pointer-events: none;
}
@media screen and (max-width: 565px) {
  .chat_welcome {
    display: none;
  }
}
.chat_welcome .message {
  content: "";
  width: 150px;
  height: 300px;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  top: 10%;
  background: url(../images/welcome.svg) no-repeat center top;
  background-size: 100px;
  text-align: center;
  padding-top: 200px;
}

.chat_content {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0px;
  top: 0;
  background: rgb(3.4874371859, 108.1105527638, 170.0125628141);
  z-index: 9;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  -webkit-box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 565px) {
  .chat_content {
    z-index: 12;
    width: 100%;
    height: 100%;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.chat_content.show {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  opacity: 1;
}
@media screen and (max-width: 565px) {
  .chat_content.show {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    z-index: 20;
  }
}
.chat_content.hide {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  opacity: 0;
}
.chat_content a.information {
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  left: 0.75em;
  top: 0.9em;
  opacity: 0.65;
}
.chat_content a.information:hover, .chat_content a.information:focus {
  opacity: 1;
}
.chat_content a.video {
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 2.5em;
  top: 0.9em;
  width: 4rem;
  padding: 0.25em;
  height: 1.75rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.25em;
  opacity: 0.65;
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
}
.chat_content a.video i {
  margin-right: 0.25em;
}
.chat_content a.video:hover, .chat_content a.video:focus {
  opacity: 1;
}
.chat_content a.back {
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: 0.25em;
  top: 0.5em;
}
.chat_content a.back:before {
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
  border-left: none;
  border-top: none;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0.25em;
  opacity: 0.5;
}
.chat_content a.back:hover:before {
  opacity: 1;
}
.chat_content .title {
  padding: 1em 0.75em 0.25em 2em;
  height: 3.1rem;
  white-space: nowrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 65%;
  font-size: 0.875rem;
  color: #fff;
  font-weight: bold;
}
.chat_content .type_area {
  position: absolute;
  bottom: 2.8em;
  left: 0;
  height: 4.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.5em;
  width: 100%;
  z-index: 99;
}
.chat_content .type_area .form_grp {
  -webkit-box-flex: 2;
      -ms-flex: 2 1 70%;
          flex: 2 1 70%;
  -ms-flex-preferred-size: 75%;
      flex-basis: 75%;
  margin-right: 0.25em;
}
.chat_content .type_area .form_grp input[type=text],
.chat_content .type_area .form_grp textarea {
  height: 4.25rem;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  color: #444;
  line-height: 1.2em;
  font-size: 0.813rem;
  white-space: nowrap;
  max-width: 100%;
  white-space: pre-wrap;
}
.chat_content .type_area .form_grp input[type=text]:focus,
.chat_content .type_area .form_grp textarea:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid transparent;
  color: #222;
  background: rgb(255, 255, 255);
}
.chat_content .type_area .btn_grp {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 20%;
          flex: 1 1 20%;
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}
.chat_content .type_area .btn_grp button {
  height: 2rem;
  padding: 0.15rem;
  margin: 0 0.25em 0.3em;
  font-size: 0.813rem !important;
  border: 1px solid transparent;
}
.chat_content .type_area .btn_grp button:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.chat_content .txt_content {
  position: absolute;
  height: calc(100% - 3.1em);
  bottom: 0;
  width: 100%;
  left: 0;
}
.chat_content .txt_content .txt_area {
  position: absolute;
  width: 100%;
  height: calc(100% - 7.5em);
  background: #ebebeb;
  padding: 0em 1em 1em 0.5em;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
}
.chat_content .txt_content .txt_area .divider {
  font-size: 0.75rem;
  color: #999;
}
.chat_content .txt_content .txt_area .txt {
  position: relative;
  width: 90%;
  margin-bottom: 1em;
  padding: 0em 0.5em;
  clear: both;
  overflow: hidden;
}
.chat_content .txt_content .txt_area .txt.left {
  padding-left: 2.5em;
}
.chat_content .txt_content .txt_area .txt.left .bubble {
  text-shadow: none;
  background: #ffffff;
  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
  color: #666;
}
.chat_content .txt_content .txt_area .txt.left .bubble a {
  color: #21baff;
}
.chat_content .txt_content .txt_area .txt.left .bubble a:hover, .chat_content .txt_content .txt_area .txt.left .bubble a:focus {
  color: rgb(0, 163.3378378378, 237);
}
.chat_content .txt_content .txt_area .txt.left .bubble:after {
  position: absolute;
  left: -6px;
  top: 10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 8px 4px 0;
  border-color: transparent #ffffff transparent transparent;
}
.chat_content .txt_content .txt_area .txt.right {
  padding-right: 2.5em;
  margin: 0 0 1em auto;
}
.chat_content .txt_content .txt_area .txt.right .pic {
  right: 0;
  left: auto;
}
.chat_content .txt_content .txt_area .txt.right .bubble {
  float: right;
}
.chat_content .txt_content .txt_area .txt.right time {
  text-align: right;
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.chat_content .txt_content .txt_area .txt .pic {
  position: absolute;
  width: 2em;
  height: 2em;
  top: 0;
  left: 0;
  border-radius: 0.5em;
}
.chat_content .txt_content .txt_area .txt .pic img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.25em;
  -o-object-fit: cover;
     object-fit: cover;
}
.chat_content .txt_content .txt_area .txt .bubble {
  background: #0fba52;
  padding: 0.25em 0.75em;
  color: #fff;
  font-size: 0.875rem;
  border-radius: 0.75em;
  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
  float: left;
  width: auto;
  position: relative;
}
.chat_content .txt_content .txt_area .txt .bubble a {
  word-break: break-all;
  color: #fff;
  display: block;
  text-decoration: underline;
}
.chat_content .txt_content .txt_area .txt .bubble a:hover, .chat_content .txt_content .txt_area .txt .bubble a:focus {
  color: rgb(253.2697095436, 219.8174273859, 117.7302904564);
}
.chat_content .txt_content .txt_area .txt .bubble .chat_link_info img {
  width: 50px;
  height: 50px;
  border-radius: 0.25em;
  margin-bottom: 0.5em;
  display: block;
}
.chat_content .txt_content .txt_area .txt .bubble:after {
  position: absolute;
  right: -6px;
  top: 10px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 8px;
  border-color: transparent transparent transparent #0fba52;
}
.chat_content .txt_content .txt_area .txt time {
  font-size: 0.75rem;
  color: #7d7d7d;
  white-space: nowrap;
  display: block;
  clear: both;
  opacity: 0.75;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.chat_content .video_content {
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  opacity: 0;
}
.chat_content .video_content.shrink {
  position: absolute;
  top: 60px;
  right: 10px;
  left: auto;
  width: 100px;
  height: 160px;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  border-radius: 0.25em;
}
.chat_content .video_content.shrink .camera_area {
  height: 100%;
  border-radius: 0.25rem;
}
.chat_content .video_content.shrink .camera_area a.enlarge {
  display: block;
}
.chat_content .video_content.shrink .camera_area:hover a.enlarge {
  display: block;
}
.chat_content .video_content.shrink .camera_area img,
.chat_content .video_content.shrink .camera_area video {
  border-radius: 0.25rem;
}
.chat_content .video_content.shrink .camera_area .my_camera {
  display: none;
}
.chat_content .video_content.shrink .camera_function {
  display: none;
}
.chat_content .video_content.show {
  display: block;
  opacity: 1;
}
.chat_content .video_content .start_video {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #555;
  top: 0;
  left: 0;
  z-index: 9;
  position: relative;
  padding-top: 30%;
}
.chat_content .video_content .start_video span {
  text-align: center;
  display: block;
  width: 90%;
  margin: 0 auto 1em;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
}
.chat_content .video_content .start_video a {
  width: 200px;
  padding: 0.5em;
  border-radius: 0.25em;
  border: 1px solid #ccc;
  text-align: center;
  color: #fff;
  font-size: 0.938rem;
  display: block;
  margin: 0 auto 1em;
}
.chat_content .video_content .start_video a:hover, .chat_content .video_content .start_video a:focus {
  background: #333;
}
.chat_content .video_content .start_video.hide {
  display: none;
}
.chat_content .video_content .camera_area {
  position: absolute;
  width: 100%;
  height: 70%;
  left: 0;
  top: 0;
}
.chat_content .video_content .camera_area a.enlarge {
  position: absolute;
  right: 5%;
  top: auto;
  bottom: 0.25rem;
  width: 90%;
  height: 1.25em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/icon_enlarge.svg) no-repeat center center rgba(0, 0, 0, 0.45);
  background-size: contain;
  border-radius: 0.25em;
  z-index: 9;
  display: none;
}
.chat_content .video_content .camera_area a.enlarge:hover {
  background: url(../images/icon_enlarge.svg) no-repeat center center rgba(0, 0, 0, 0.8);
  background-size: contain;
}
.chat_content .video_content .camera_area .my_camera {
  position: absolute;
  width: 80px;
  height: 120px;
  top: 0.5em;
  right: 0.5em;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 0.5em;
  -webkit-box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.75);
          box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.75);
  display: block;
}
.chat_content .video_content .camera_area .my_camera img,
.chat_content .video_content .camera_area .my_camera video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.chat_content .video_content .camera_area img,
.chat_content .video_content .camera_area video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.chat_content .video_content .camera_function {
  position: absolute;
  width: 100%;
  height: 30%;
  left: 0;
  top: auto;
  bottom: 0;
  display: block;
}
.chat_content .video_content .camera_function a.end_talk {
  position: absolute;
  top: 3em;
  left: 50%;
  margin-left: -2em;
  width: 4em;
  height: 4em;
  background: url(../images/end.svg) no-repeat center center;
}
.chat_content .video_content .camera_function a.end_video {
  position: absolute;
  left: 3em;
  top: 3.5em;
  width: 3em;
  height: 3em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/end_vidoe.svg) no-repeat center center;
  background-size: 50%;
  border-radius: 50%;
}
.chat_content .video_content .camera_function a.end_video:hover {
  background: url(../images/end_vidoe.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.chat_content .video_content .camera_function a.end_video.open_video {
  background: url(../images/start_vidoe.svg) no-repeat center center;
  background-size: 50%;
}
.chat_content .video_content .camera_function a.end_video.open_video:hover {
  background: url(../images/start_vidoe.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.chat_content .video_content .camera_function a.end_audio {
  position: absolute;
  right: 3em;
  top: 3.5em;
  width: 3em;
  height: 3em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/end_audio.svg) no-repeat center center;
  background-size: 50%;
  border-radius: 50%;
}
.chat_content .video_content .camera_function a.end_audio:hover {
  background: url(../images/end_audio.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.chat_content .video_content .camera_function a.end_audio.open_audio {
  background: url(../images/start_audio.svg) no-repeat center center;
  background-size: 50%;
}
.chat_content .video_content .camera_function a.end_audio.open_audio:hover {
  background: url(../images/start_audio.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.chat_content .video_content .camera_function a.reverse {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 3em;
  height: 1.25em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/icon_reverse.svg) no-repeat center center rgba(0, 0, 0, 0.25);
  background-size: contain;
  border-radius: 0.25em;
  z-index: 2;
}
.chat_content .video_content .camera_function a.reverse:hover {
  background: url(../images/icon_reverse.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: contain;
}
.chat_content .video_content .camera_function a.shrink {
  position: absolute;
  right: 4em;
  top: 0.5em;
  width: 3em;
  height: 1.25em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/icon_shrink.svg) no-repeat center center rgba(0, 0, 0, 0.25);
  background-size: contain;
  border-radius: 0.25em;
  z-index: 2;
}
.chat_content .video_content .camera_function a.shrink:hover {
  background: url(../images/icon_shrink.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: contain;
}

.video_content {
  position: fixed;
  top: 60px;
  width: 550px;
  height: 550px;
  right: 60px;
  z-index: 99999999;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .video_content {
    width: 100%;
    height: calc(100% - 60px);
    top: 60px;
    right: 0;
  }
}
.video_content.shrink {
  position: absolute;
  top: 60px;
  right: 60px;
  left: auto;
  width: 550px;
  height: 550px;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  border-radius: 0.25em;
}
@media screen and (max-width: 767px) {
  .video_content.shrink {
    width: 100%;
    height: calc(100% - 60px);
    right: 0;
  }
}
.video_content.shrink .camera_area {
  height: 80%;
  border-radius: 0;
}
.video_content.shrink .camera_area a.enlarge {
  display: none;
}
.video_content.shrink .camera_area:hover a.enlarge {
  display: none;
}
.video_content.shrink .camera_area img,
.video_content.shrink .camera_area video {
  border-radius: 0.25rem;
}
.video_content.shrink .camera_area .my_camera {
  display: block;
}
.video_content.shrink .camera_function {
  display: block;
}
.video_content.show {
  display: block;
  opacity: 1;
}
.video_content .start_video {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #555;
  top: 0;
  left: 0;
  z-index: 9;
  position: relative;
  padding-top: 30%;
}
.video_content .start_video span {
  text-align: center;
  display: block;
  width: 90%;
  margin: 0 auto 1em;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
}
.video_content .start_video a {
  width: 200px;
  padding: 0.5em;
  border-radius: 0.25em;
  border: 1px solid #ccc;
  text-align: center;
  color: #fff;
  font-size: 0.938rem;
  display: block;
  margin: 0 auto 1em;
}
.video_content .start_video a:hover, .video_content .start_video a:focus {
  background: #333;
}
.video_content .start_video.hide {
  display: none;
}
.video_content .camera_area {
  position: absolute;
  width: 100%;
  height: 80%;
  left: 0;
  top: 0;
}
.video_content .camera_area a.enlarge {
  position: absolute;
  right: 5%;
  top: auto;
  bottom: 0.25rem;
  width: 90%;
  height: 1.25em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/icon_enlarge.svg) no-repeat center center rgba(0, 0, 0, 0.45);
  background-size: contain;
  border-radius: 0.25em;
  z-index: 9;
  display: none;
}
.video_content .camera_area a.enlarge:hover {
  background: url(../images/icon_enlarge.svg) no-repeat center center rgba(0, 0, 0, 0.8);
  background-size: contain;
}
.video_content .camera_area .my_camera {
  position: absolute;
  width: 80px;
  height: 120px;
  top: 0.5em;
  right: 0.5em;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 0.5em;
  -webkit-box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.75);
          box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.75);
  display: block;
}
.video_content .camera_area .my_camera img,
.video_content .camera_area .my_camera video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.video_content .camera_area img,
.video_content .camera_area video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.video_content .camera_function {
  position: absolute;
  width: 100%;
  height: 25%;
  left: 0;
  top: auto;
  bottom: 0;
  display: block;
  background: #111;
  border-radius: 0 0 0.25em 0.25em;
}
.video_content .camera_function a.end_talk {
  position: absolute;
  top: 3em;
  left: 50%;
  margin-left: -2em;
  width: 4em;
  height: 4em;
  background: url(../images/end.svg) no-repeat center center;
}
.video_content .camera_function a.end_video {
  position: absolute;
  left: 3em;
  top: 3.5em;
  width: 3em;
  height: 3em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/end_vidoe.svg) no-repeat center center;
  background-size: 50%;
  border-radius: 50%;
}
.video_content .camera_function a.end_video:hover {
  background: url(../images/end_vidoe.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.video_content .camera_function a.end_video.open_video {
  background: url(../images/start_vidoe.svg) no-repeat center center;
  background-size: 50%;
}
.video_content .camera_function a.end_video.open_video:hover {
  background: url(../images/start_vidoe.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.video_content .camera_function a.end_audio {
  position: absolute;
  right: 3em;
  top: 3.5em;
  width: 3em;
  height: 3em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/end_audio.svg) no-repeat center center;
  background-size: 50%;
  border-radius: 50%;
}
.video_content .camera_function a.end_audio:hover {
  background: url(../images/end_audio.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.video_content .camera_function a.end_audio.open_audio {
  background: url(../images/start_audio.svg) no-repeat center center;
  background-size: 50%;
}
.video_content .camera_function a.end_audio.open_audio:hover {
  background: url(../images/start_audio.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: 50%;
}
.video_content .camera_function a.reverse {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 3em;
  height: 1.25em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/icon_reverse.svg) no-repeat center center rgba(0, 0, 0, 0.25);
  background-size: contain;
  border-radius: 0.25em;
  z-index: 2;
}
.video_content .camera_function a.reverse:hover {
  background: url(../images/icon_reverse.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: contain;
}
.video_content .camera_function a.shrink {
  position: absolute;
  right: 4em;
  top: 0.5em;
  width: 3em;
  height: 1.25em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: url(../images/icon_shrink.svg) no-repeat center center rgba(0, 0, 0, 0.25);
  background-size: contain;
  border-radius: 0.25em;
  z-index: 2;
}
.video_content .camera_function a.shrink:hover {
  background: url(../images/icon_shrink.svg) no-repeat center center rgba(0, 0, 0, 0.7);
  background-size: contain;
}

.trans {
  position: fixed;
  width: 360px;
  height: 535px;
  -webkit-box-shadow: 0px 0px 5em rgba(0, 0, 0, 0.75);
          box-shadow: 0px 0px 5em rgba(0, 0, 0, 0.75);
  top: 60px;
  left: 60px;
  z-index: 999999999;
  background: #fff;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .trans {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: relative;
  }
}
.trans .messenger {
  padding: 0.25em;
}
.trans .trans_function {
  width: 100%;
  height: 32px;
  background: #555;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.trans .trans_function a {
  margin: 0.25em 0.25em 0 0.5em;
  color: #aaa;
}
.trans .trans_function a:hover, .trans .trans_function a:focus {
  color: #fff;
}
.trans .trans_inside {
  padding: 0.5em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}
.trans .trans_tool {
  clear: both;
  overflow: hidden;
  margin-bottom: 0.5em;
}
.trans .trans_tool a {
  display: block;
  float: left;
  background: #eee;
  border-radius: 0.25em;
  padding: 0.25em 1em;
  font-size: 0.75rem;
  line-height: 1.25em;
  color: #777;
  min-width: 6em;
  text-align: center;
}
.trans .trans_tool a:hover, .trans .trans_tool a:focus {
  background: #bbb;
  color: #fff;
}
.trans .trans_tool a:nth-child(2) {
  float: right;
}
.trans .trans_lang {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.5em;
  clear: both;
}
.trans .trans_lang select {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  margin: 0;
}
.trans .trans_lang button {
  margin: 0;
  -ms-flex-preferred-size: 40px;
      flex-basis: 40px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  padding: 0.15em;
  margin: 0 0.25em 0em;
  min-width: 2em;
  border: 1px solid #ddd;
  background: transparent;
}
.trans .trans_lang button i {
  color: #888;
  font-size: 0.5em;
  font-weight: bold;
  text-shadow: none;
}
.trans .src-text,
.trans .trans-text {
  clear: both;
  border-radius: 0.25em;
  border: 2px solid #ddd;
  padding: 0.5em;
  font-size: 0.813rem;
  line-height: 1.35em;
  margin-bottom: 0.5em;
  height: 185px;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
  white-space: pre-wrap;
}/*# sourceMappingURL=chat.css.map */