download_scene/download_code/controller/static/css/toolBoxPC.css

/* @font-face {
    font-family: "SourceHanSansCN";
    src: url("../fonts/SourceHanSansCN.woff2") format("woff2"),url("../fonts/SourceHanSansCN.woff") format("woff"),url("../fonts/SourceHanSansCN.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
  font-family: 'FontAwesome';
  src: url(font/fontawesome-webfont.eot);
  src: url(font/fontawesome-webfont.eot?#iefix&v=4.5.0) format("embedded-opentype"), url(font/fontawesome-webfont.woff2) format("woff2"), url(font/awesome-webfont.woff) format("woff"), url(font/fontawesome-webfont.ttf) format("truetype"), url(font/fontawesome-webfont.svg#fontawesomeregular) format("svg");
  font-weight: normal;
  font-style: normal;
 }  */ 
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/*#webgl.editWall{
	padding-right:0;
}
.editWall .webgl-inside{
	width: 72% !important;
	min-width: calc(100% - 700px);
	max-width: calc(100% - 300px);
}
 #wallPanel{
	width: 28%;
	position: absolute;
	right: 0;
	height: calc(100% - 20px);
	max-width: 700px;
	min-width: 300px;
	padding:0 10px; 
	user-select: none;
}
#wallPanel .group{
    width:100%;
    height: calc(50% - 5px);
    position: relative;
}
#wallPanel .group:first-child{
    margin-bottom:10px;
} */

#CADarea{
	position: relative;
	height:216px
}
 
.groupTitle{
	position:absolute;
	background:#05c8ae;
	padding: 7px 15px;
	font-size: 14px;
	letter-spacing: 0.5px;
	top: 0;
	z-index: 5;
}
  

/*#wallPanel .group .switch{
    height:36px;
    width:36px;
    position:absolute;
    background:#fff;
    border-radius:50%;
    right:8px;
    bottom:8px;
    cursor:pointer;
    z-index: 5;
}
#wallPanel .group .switch:before{
	font-family:"iconfont" !important;
	font-size: 30px;
    line-height: 36px;
	content: "\e64f";
	color:#05c8ae;
}*/

.wallDesignOption i[data-type="door"]:before{
	content:"\e653";
}
.wallDesignOption i[data-type="window"]:before{
	content:"\e654";
}
.wallDesignOption i[data-type="column"]:before{
	content:"\e655";
}
.wallDesignOption i[data-type="point"]:before{
	content:"\e656";
} 
.wallDesignOption i[data-type="delete"]:before{
	content:"\e60e";
} 

.scrollBox {
    width: 282px;
    height: 100%;
}

.scrollBox:nth-child(n+3) {
    display: none;
}

.bgNone {
    background: none !important;
}

.divNone {
    display: none !important;
}

.toolBox,.informationBox, .hotPointBox,.styleZBox {
    margin-top: 48px;
    overflow-y: auto;
    height: calc(100% - 48px);
    width: calc(100% + 12px);
    overflow-x: hidden;
}

.toolContent,.hotPoint_content,.information_content,.styleZ_content {
    position: relative;
    width: 282px;
}


.function {
    width: 282px;
    height: 48px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #ddd;
    margin-top: 20px;
}

.function ul {
    display: flex;
    display: -webkit-flex;
}

.function li {
    width: 94px;
    height: 48px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

.function li img {
    vertical-align: baseline;
}

.function li>a {
    color: #333;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

.function li:hover {
    opacity: 0.7;
}

.function li:nth-child(1) span,.function li:nth-child(2) span {
    padding-left: 5px;
}

#export {
    display: inline-block;
    width: 60px;
    height: 28px;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    color: white;
    background: #09e1c0;
    text-align: center;
    line-height: 28px;
}

#export:hover {
    background: #22f0d0;
}

#draw_Tools a {
    position: relative;
}

#draw_Tools a:before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    width: 60px;
    height: 60px;
    transition: border 0.2s ease-in-out;
}

.draw_Tools-a:before {
    border: 1px solid #09e1c0;
}

.Basic_drawing ul {
    padding-top: 20px;
    display: flex;
    display: -webkit-flex;
}

.Basic_drawing ul li {
    width: 33%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
}

.doors_windows {
    border-bottom: 1px solid #ddd;
    padding-bottom: 18px;
}

.doors_windows ul {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.doors_windows ul li {
    width: 33%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
}

.Basic_drawing span,.doors_windows span {
    letter-spacing: 2px;
    margin-top: 8px;
    color: #333;
}

.controlBox {
    padding-top: 28px;
    width: 282px;
    height: 80px;
    border-bottom: 1px solid #cccccc;
    transition: all 1s linear;
    display: none;
    opacity: 0;
}

#controlName {
    padding-left: 20px;
    font-size: 16px;
}

.controlBox a {
    position: absolute;
    right: 20px;
    color: #cccccc;
}

.controlBox a:hover {
    color: #999999;
}

#pjtName {
    width: 100%;
}

#edit2Box .w-e-toolbar,#edit1Box .w-e-toolbar {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 0px;
    width: 20px;
    height: 20px;
}

#edit2Box .w-e-menu,#edit1Box .w-e-menu {
    padding: 0px;
}

#edit2Box .w-e-text,#edit1Box .w-e-text { 
    width:100%;
    word-break: break-all;
    text-align: left;
    overflow-y: auto !important;
   /* padding: 0px 30px 0px 10px;*/ 
    -webkit-user-select: auto;
    

}
#edit2Box .w-e-text a,#edit1Box .w-e-text a{
   margin:0 2px;
   color:#02c8ae !important;
    
}
#edit2Box .w-e-text *,#edit1Box .w-e-text * {
    -webkit-user-select: text;
}

#edit2Box .w-e-icon-link,#edit1Box .w-e-icon-link {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
}

#edit2Box .w-e-text a,#edit1Box .w-e-text a {
    color: #079eec;
    text-decoration: underline;
}

#edit2Box .w-e-text-container,#edit1Box .w-e-text-container {
    position: static; height:100%;
}

#edit2Box .w-e-icon-link:before,#edit1Box .w-e-icon-link:before {
    background: url("../images/linkBtn.png") no-repeat center;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
}

#edit2Box .w-e-text-container .w-e-panel-container,#edit1Box .w-e-text-container .w-e-panel-container {
    box-shadow: 1px 1px 2px #ccc;
    z-index: 99;
    top: 92px;
}

#edit2Box .addLink-content-row,#edit1Box .addLink-content-row {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    font-size: 14px;
    height: 25px;
}

#edit2Box .addLink-content-row span,#edit1Box .addLink-content-row span {
    color: #999;
}

#edit2Box .addLink-content input,#edit1Box .addLink-content input {
    height: 28px;
    border: 1px solid #09e1c0;
    margin: 0px 0px 6px
}

#edit2Box h5,#edit1Box h5 {
    font-size: 12px;
    font-weight: normal;
    color: #999;
    margin-bottom: 20px;
}

#edit2Box .addLink-cancel,#edit1Box .addLink-cancel {
    width: 75px;
    height: 28px;
    background: #ccc;
    border-radius: 0px;
    color: white;
    margin-left: 10px
}

#edit2Box .addLink-cancel:hover,#edit1Box .addLink-cancel:hover {
    background: #d1d1d1;
}

#edit2Box .w-e-button-container,#edit1Box .w-e-button-container {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
}

#edit1Box .w-e-panel-tab-content:after,#edit2Box .w-e-panel-tab-content:after {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #777;
    top: -46px;
    right: 15px;
    content: "";
}

/* 画墙一栏*/
.information-subDiv,#visibleSet li {
    padding: 20px 0px;
    margin: 0px 20px;
    border-bottom: 1px solid #ddd;
}

.information-subDiv li,#visibleSet li {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}

#visibleSet {
    border-top: 1px solid #ddd;
    width: 282px;
}

.information-subDiv {
    padding: 20px 0px;
    margin: 0px 20px;
    border-bottom: 1px solid #ddd;
}

.editPanel .information-subDiv ul li {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}

.information-subDiv:first-child li {
    flex-direction: column;
    margin-bottom: 20px;
}

.information-subDiv:first-child span {
    margin-bottom: 6px;
}

.information-subDiv:last-child {
    border-bottom: none;
}

.information-subDiv:last-child li:first-child {
    margin-bottom: 4px;
}

.information_input {
    width: 282px;
}

.information_input input[type="file"] {
    position: relative;
    display: none;
}

.information_input input {
    width: 160px;
    height: 28px;
    font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid white;
    color: #999999;
}

.information_input input::placeholder {
    font-size: 14px;
    color: #cccccc;
}

.information_input input:-ms-input-placeholder {
    font-size: 14px;
    color: #cccccc;
}

.information_input input::-ms-input-placeholder {
    font-size: 14px;
    color: #cccccc;
}

.information_input input[type="button"] {
    width: 60px;
    height: 28px;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    color: white;
    background: #09e1c0;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    margin-top: 10px;
}

.information_input input[type="button"]:hover {
    background: #22f0d0;
}

.information_show ul {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    padding: 20px 0px;
    margin: 0 20px;
}

.information_show ul li {
    height: 28px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

.information_input .right {
    position: relative;
    width: 160px;
    font-size: 14px;
    line-height: 28px;
}

.information_input input, .information_input label {
    outline: none;
    background-color: #fff;
    padding: 0 10px;
    color: #999999;
}

.close_linkDiv {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 75px;
    height: 28px;
    cursor: pointer;
    z-index: 99999;
}

#setEntry .ImgPreview {
    height: 80px;
}

.information_input label {
    cursor: pointer;
}

.show_title {
    padding-left: 0 !important;
}

.show_data {
    color: #999999;
    display: flex;
    display: -webkit-flex;
    flex-direction: row-reverse;
}

.show_count {
    color: #999
}

.show_data span {
    padding-right: 5px;
}

/* 信息一栏*/
#ok {
    width: 100%;
    height: 48px;
    display: none;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    background: #09e1c0;
    color: #fff;
}

#ok:hover {
    background: #14ebca
}

.hotPoint_content .point>* {
    height: 40px;
    display: flex;
    display: -webkit-flex;
    width: 282px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #ddd solid;
    padding-left: 20px;
    color: #999;
    /* opacity: 0.6;*/
    cursor: pointer;
    display: none;
    background: #fafafa;
}

.hotPoint_content #listPoint {
    display: flex;
    -webkit-box-flex: 1;
}

.hotPoint_content #listPoint>* {
    display: flex;
}

.hotPoint_content #listPoint>div:first-child {
    border-right: 1px solid #eeeeee;
}

.hotPoint_content #listPoint>div:hover {
    background: #fff;
}

.hotPoint_content .point>* div {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.hotPoint_content .point>* span {
    padding-left: 5px;
}

.hotPoint_content .point>* a {
    padding-right: 20px;
}

/* .hotPoint_content .point>*:hover{opacity: 1;}*/
#snap {
    padding: 20px 0px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-direction: column;
}

#hotPoint_button {
    background: #09e1c0;
    height: 48px;
    display: flex;
    display: -webkit-flex;
    width: 242px;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

#hotPoint_button.unable {
    pointer-events: none;
    /* opacity:0.5;*/
    cursor: default;
    background: #ddd;
}

#hotPoint_button span {
    padding-left: 5px;
}

#hotPoint_button:hover {
    background: #14ebca;
}

#hotPoint_input {
    display: none;
    width: 282px;
    border-bottom: 1px #ddd solid;
    max-height: 800px;
    transition: max-height .3s;
    overflow: hidden;
}

#hotPoint_input #change {
    display: flex;
    -webkit-box-flex: 1;
    text-align: center;
    border-bottom: 1px solid #ddd;
    height: 40px;
    width: 100%;
}

#hotPoint_input #change>div {
    cursor: pointer;
    width: 100%;
    height: 100%;
    line-height: 40px;
}

#hotPoint_input #change>div:first-child {
    border-right: 1px solid #eeeeee;
}

#hotPoint_input #change>div:hover {
    background: #fff;
}

#hotPoint_input>ul {
    padding: 8px 20px 15px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    background: #eee;
}

.hotPoint-title {
    position: relative;
}

.hotPoint-title:after {
    position: absolute;
    top: 0px;
    right: -10px;
    content: "*";
    color: #f56c6c;
}

#hotPoint_input>ul>li {
    position: relative;
    padding: 5px 0;
    line-height: 30px;
    display: flex;
    display: -webkit-flex;
    flex-basis: 100%;
    align-items: center;
    justify-content: space-between;
    align-items: flex-start;
}

#hotPoint_input>ul>li.warn input {
    border: 1px solid #f56c6c;
}

#hotPoint_input>ul>li.warn input::placeholder {
    color: #f56c6c !important;
}

.redPoint {
    position: relative;
}

.hotPoint_content .redPoint:after {
    position: absolute;
    top: 0px;
    left: 32px;
    content: "*";
    color: #f56c6c;
}

.information_input .redPoint:after {
    position: absolute;
    top: 0px;
    left: 62.5px;
    content: "*";
    color: #f56c6c;
}

#type .redPoint:after {
    left: 32px
}

#hotPoint_input .unComplete {
    display: none;
    color: #f56c6c;
    font-size: 0.9em;
    position: absolute;
    bottom: 12px;
    right: 10px;
}

.information_input .unComplete {
    display: none;
    color: #f56c6c;
    font-size: 0.9em;
    position: absolute;
    bottom: 16px;
    right: 28px;
}

#project-name1:before,#project-intro1:before {
    position: absolute;
    right: 0px;
    top: 2px;
    content: ""attr(data-size)"";
    color: #999;
}

#hotPoint_input>ul>li:nth-child(1) span {
    margin-top: 5px;
}

#hotPoint_input input[type="file"] {
    position: relative;
    display: none;
}

* {
    outline: none
}

#hotPoint_input input.white,textarea.white {
    font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid white;
    color: #999999;
    resize: vertical;
}

#hotPoint_input .ImgPreview,.information_input .ImgPreview {
    width: 160px;
    height: 114px;
    background-repeat: no-repeat;
    background-position: center center;
    margin-top: 10px;
    background-size: contain;
    /* border: 1px solid white;*/
}

#hotPoint_input .preview {
    width: 160px;
}

#hotPoint_input .preview>* {
    width: 100%;
}

#showInformation {
    height: 80px;
    position: relative;
}

.showInformation-error:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/pic_error.png") no-repeat center;
}

/* #hotPoint_input>ul>li:nth-child(n+6){padding:0px} */
#select {
    display: inline-block;
    position: relative;
    background: #eee;
}

#select .showStyle {
    background: #eee;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    width: 160px;
    height: 30px;
}

#select .showStyle>div:first-child {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

#select .showStyle>div:first-child img {
    margin-top: -1px
}

/* #hotPoint_input>ul>li:nth-child(5){margin-top:-11px;}
#hotPoint_input>ul>li:nth-child(6){margin-top:-8px;} */
#select .showStyle p {
    margin-left: 5px;
    cursor: default;
}

#styleBtn {
    opacity: 0.7;
    width: 16px;
    height: 16px;
    background: url("../images/styleBtn.png") no-repeat;
    cursor: pointer;
}

#styleBtn:hover {
    opacity: 1;
}

#select ul {
    display: none;
    padding: 10px 30px 15px 10px;
    font-size: 12px;
    width: 160px;
    z-index: 15;
    position: absolute;
    background: white;
    box-shadow: 0px 1px 6px 1px rgba(51,51,51,0.3);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(51,51,51,0.3);
    -moz-box-shadow: 0px 1px 6px 1px rgba(51,51,51,0.3);
    left: 0px;
    top: 30px;
    flex-wrap: wrap;
}

#select ul li:nth-child(3),#select ul li:nth-child(4) {
    margin-top: 20px
}

#select ul li:nth-child(3):after {
    position: absolute;
    content: "";
    top: -10px;
    left: 0px;
    width: 140px;
    height: 1px;
    background: #ddd;
}

#select ul li span {
    margin-top: 2px;
}

#select.open #styleBtn {
    opacity: 0.7;
}

#select.open ul {
    display: flex;
    display: -webkit-flex;
}

#select ul li {
    margin-right: 2px;
    cursor: pointer;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    padding-top: 4px;
    align-items: center;
    width: 46px;
    height: 61px;
    position: relative;
    /* float: left; */
}

#select ul li:before {
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    width: 46px;
    height: 64px;
}

#select ul li:hover:before {
    border: 1px solid #ddd;
}

#select span {
    line-height: 15px;
}

.information_input>ul>li:nth-child(4):before {
    position: absolute;
    content: "标志大小";
    bottom: 17px;
    left: 20px;
}

#hotPoint_input>ul>li:nth-child(1) {
    line-height: 20px
}

.hotPoint_content .point>div.chosen {
    color: #333;
    background: #fff;
}

.hotPoint_content .point .coordinate {
    background-image: url(../images/coordinate2.png);
    height: 16px;
    width: 16px;
}

.hotPoint_content .point>div.chosen .coordinate {
    background-image: url(../images/coordinate.png);
}

.hotPoint_content .point .delete {
    /* height:46px;width:46px;background-repeat: no-repeat;background-position: center center;background-image:url(../images/coordinateClose.png);background-size: initial;*/
    border-radius: 7px;
    height: 14px;
    width: 14px;
    margin-right: 14px;
    padding: 2px;
    font-size: 12px;
    background: transparent;
    transition: background 0.3s;
}

.hotPoint_content .point>div .delete::before {
    font-family: "FontAwesome";
    content: "\f00d";
    color: #bababa;
    transition: color 0.3s;
}

.hotPoint_content .point>div .delete:hover {
    background: #ccc;
}

.hotPoint_content .point>div.chosen .delete::before {
    color: #808080;
}

.hotPoint_content .point>div .delete:hover::before {
    color: #fff;
}

#snapPoint>div:first-child {
    border-top: 1px #ddd solid;
    margin-top: 20px;
}

#snapPoint>div:hover {
    background: #fff;
}

.selectButton {
    background: url("../images/styleButton2.png") white no-repeat;
    background-position: 92% 50%;
}

#hotPoint_input textarea,#hotPoint_input li input,#hotPoint_input #select, #hotPoint_input label,#hotPoint_input li .right,.information_input label {
    width: 160px;
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    max-height: 500px;
    /* overflow:auto;*/
    /* overflow:hidden;*/
    border: none;
}

#hotPoint_input textarea {
    width: 160px;
    height: 56px;
    line-height: 22px;
    padding: 0 8px;
    background-color: #fafafa;
    max-height: 500px;
    /* overflow:auto;*/
    /* overflow:hidden;*/
    border: none;
}

#hotPoint_input textarea.focus,#hotPoint_input li input.white:focus {
    background: #fff;
    color: #333;
    border: 1px solid #09e1c0;
}

label.btn {
    cursor: pointer;
    display: inline-block;
    background: #09e1c0;
    color: #fff;
    text-align: center;
    transition: background 0.2s;
    letter-spacing: 0.05em;
}

label.btn:hover {
    background: #14ebca;
    color: #fff;
}

#hotPoint_input label:hover,.information_input label:hover {
    background: #09cbae;
}

#hotPoint_input input::placeholder {
    font-size: 14px;
    color: #cccccc;
}

#hotPoint_input input:-ms-input-placeholder {
    font-size: 14px;
    color: #cccccc;
}

#hotPoint_input input::-ms-input-placeholder {
    font-size: 14px;
    color: #cccccc;
}

#hotPoint_input #hotPoint_sumbit {
    width: 60px;
    height: 28px;
    border: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    color: white;
    background: #09e1c0;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

#hotPoint_input input[type="button"]:hover {
    background: #22f0d0;
}

.hotPoint_list {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 88px);
}

.hotPoint_list #list {
    width: 100%;
    flex-direction: column-reverse;
    border-top: 1px solid #ddd;
}

.hotPoint_list #list>li {
    padding-left: 16px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
    width: 282px;
    height: 48px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    background: #fafafa;
    transition: background 0.1s;
    position: relative;
}

.hotPoint_list #list>li:before {
    position: absolute;
    content: "";
    width: 0px;
    height: 48px;
    background: #09e1c0;
    left: 0px;
    top: -1px;
    transition: width 0.2s;
}

.hotPoint_list #list>li.open:before {
    width: 8px !important;
}

.hotPoint_list #list>li {
    background: #fff;
}

.hotPoint_list #list>li.open {
}

.hotPoint_list #list>li:hover {
    background: #eee;
}

.hotPoint_list #list div {
    /* display: flex;display: -webkit-flex;*/
    align-items: center;
}

.hotPoint_list #list>li span {
    padding-left: 7px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotPoint_list #list>li .delete {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 48px;
    width: 48px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/del.png);
    background-size: auto;
}

.hotPoint_list #list>li .delete:hover {
    background-color: rgba(175, 175, 175, 0.1);
}

.hotPoint_list #list>li .DelConfirm {
    font-size: 12px;
    position: absolute;
    width: 60px;
    z-index: 100;
    background: #fff;
    height: 56px;
    border-radius: 2px;
    box-shadow: 0 1px 6px 0px rgba(153, 153, 153, 1);
    text-align: center;
    line-height: 28px;
    right: 40px;
    opacity: 0;
    transform: translateX(15px) scale(0,0);
    transform-origin: right;
    transition: transform 0.1s,opacity 0.1s;
}

.hotPoint_list #list>li .DelConfirm.open {
    opacity: 1;
    transform: translateX(0px) scale(1, 1);
}

/*#list>li .DelConfirm:after{content: '';width: 0;height: 0;border-top: 5px solid transparent;border-left: 8px solid #ffffff;border-bottom: 5px solid transparent;position: absolute;right: -8px;top: 25px;color: #999;}*/
.hotPoint_list #list>li .DelConfirm>div {
    height: 50%;
}

.hotPoint_list #list>li .DelConfirm>div:hover {
    background: #eee;
}

.hotPoint_list #list>li .DelConfirm .DelYes {
    color: rgba(224, 82, 71, 1);
}

.hotPoint_list #list>li div.left {
    flex: auto;
    max-width: 80%;
    display: flex;
    display: -webkit-flex;
}

#information_file {
    display: none;
    position: relative;
}

.information_show_div {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding: 10px 0px 20px;
}

.information_show_div span {
    padding-left: 20px;
    line-height: 24px;
}

.information_show_div label {
    width: 160px;
    height: 28px;
    line-height: 30px;
    cursor: pointer;
    display: inline-block;
    background: #09e1c0;
    color: #fff;
    text-align: center;
    transition: background 0.2s;
    letter-spacing: 0.05em;
}





.myAccount-cutAvatar { 
     background: rgba(0,0,0,0.3); 
     color: #fff;
}

.myAccount-cutAvatar>div{ 
    background: rgba(38, 39, 41, 1);
    width:640px; 
}

.myAccount-cutAvatar .header{
     
    border-bottom: 1px solid #5d5d5d;
    font-size: 14px; 
     
}

.myAccount-cutAvatar .header a:hover {
    opacity: 1
}
.myAccount-cutAvatar .myAccount-cutAvatar-main {
    width: 100%;
}
.myAccount-cutAvatar .myAccount-cutAvatar-main {
    display: flex;
    display: -webkit-flex;
    /* padding:10px; */
}
.myAccount-cutAvatar .myAccount-cutAvatar-main>div:first-child {
    width: 500px;
    height: 300px;
    background: #eeeeee;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto 5px auto;
}
.myAccount-cutAvatar .myAccount-cutAvatar-main>div:first-child img {
    max-width: 500px;
    height: auto;
    max-height: 300px;
}

/* 修复截取框过小而出现原图问题 */
.myAccount-cutAvatar .myAccount-cutAvatar-img-preview{
    display: none;
}
.myAccount-cutAvatar .buttons{
    
}
.myAccount-cutAvatar .buttons button{
      
} 
.myAccount-cutAvatar .cropper-bg {
   background-repeat:repeat;
   background-size:auto;  
}
.myAccount-cutAvatar .cropper-view-box{
    border: 1px solid rgba(2, 200, 174, 0.54);
    outline-color: rgba(2, 200, 174, .75);
    outline: 1px solid rgb(2, 200, 174);
}
.myAccount-cutAvatar .cropper-point.point-se:before {
    background:rgb(2, 200, 174);
}
.myAccount-cutAvatar .cropper-point{
    background:rgb(2, 200, 174);
}






#discrib .preholder {
    text-align: center;
}

#hotPoint_input .project-name,#hotPoint_input .project-intro {
    flex-direction: column;
    line-height: normal;
}

#hotPoint_input .project-name input,#hotPoint_input .project-intro>div, .project-intro {
    width: 100%;
}

#hotPoint_input .project-name>span,#hotPoint_input .project-intro>span {
    margin-bottom: 8px;
}

#hotPoint_input .project-intro {
    margin: 8px 0px 10px
}

.information_input .project-name,.information_input .project-intro {
    flex-direction: column;
    padding: 6px 0px 10px;
    line-height: normal;
}

.information_input .project-name input,.information_input .project-intro>div {
    width: calc( 100% - 40px );
    margin-left: 20px;
    margin-top: 5px;
}

.information_input .project-intro {
    margin: 0px;
}

#type {
    flex-direction: column;
    width: 100%;
    position: relative;
    margin: 0px;
}

#type a {
    width: 100%;
}

.noteBox {
    z-index: 999;
    display: none;
    width: 282px;
    height: 126px;
    background: white;
    padding: 20px 0px 0px 20px;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
}

.noteBox-row {
    display: flex;
    display: -webkit-flex;
    font-size: 14px;
    margin-bottom: 10px;
}

.noteBox-row h3 {
    font-size: 14px;
    color: #333;
}

#noteInput_text {
    width: 242px;
    height: 28px;
    border: 1px solid #ccc;
    color: #333;
    padding-left: 10px;
}

.noteBox-row:last-child {
    justify-content: flex-end;
    margin-right: 20px;
}

.noteBox-ok {
    border-radius: 2px;
    cursor: pointer;
    width: 32px;
    height: 20px;
    color: white;
    background: #09e1c0;
    font-size: 12px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

.noteBox-cancel {
    border-radius: 2px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: #f56c6c;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
}

.noteBox.show {
    display: block;
}

.noteBox.active {
    opacity: 1;
}

.sizeWaring:before {
    color: #f56c6c !important;
}

.empty_warn {
    border: 1px solid #f56c6c !important;
    color: #f56c6c !important;
}

.empty_warn::placeholder {
    color: #f56c6c !important;
}

.hide {
    display: none;
}



 

img {
    pointer-events: none;
}
 
 

 
.warning-border {
    border: 1px solid #f56c6c !important;
}

@keyframes flash {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
@keyframes flash2 {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0.9;
    }

    40% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}

 #webgl .snapshotFlash{
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background: #ffffff;
    pointer-events: none;
    }
 #webgl .snapshotFlash.active{ 
    -webkit-animation-name:flash2;
    animation-name:flash2;
    -webkit-animation-duration:0.8s;
    animation-duration:0.8s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
}
 
#webgl .overlayGui{
    position:absolute; 
    z-index: 100; 
    pointer-events: none;
    opacity:0;
    transition: opacity 0.3s,
                border 0.3s; 
} 
#webgl .overlayGui.snapshotGui{
    width: calc(84% - 36px);
    height: calc(100% - 140px);
    border: 1px dotted rgba(255, 255, 255, 0.8);
    left: calc(8% + 18px);
    top: 86px;
}
#webgl .snapshotGui.highLight {
    border: 1px dotted #fff;
}
#webgl .snapshotGui .corner{
    width:40px;
    height:40px;
    position:absolute;  
    transition: opacity 0.3s;
    opacity: 0.8;
} 
#webgl .snapshotGui .corner.leftTop{
    border-top:4px solid #fff;
    border-left:4px solid #fff;
    left:-2px;
    top:-2px;
}
#webgl .snapshotGui .corner.rightTop{
    border-top:4px solid #fff;
    border-right:4px solid #fff;
    right:-2px;
    top:-2px;
}
#webgl .snapshotGui .corner.leftBott{
    border-left:4px solid #fff;
    border-bottom:4px solid #fff;
    left:-2px;
    bottom:-2px;
}
#webgl .snapshotGui .corner.rightBott{
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    right: -2px;
    bottom: -2px;
}
#webgl .snapshotGui.highLight .corner {
    opacity: 1;
}
#midBtns{
    position: absolute;
    transform: translateX(-50%);
    width: 220px;
    left: 50%;
    flex-direction: column;
}
#midBtns>*{
    /* color: #fff; */
    border-radius: 21px;
    /* margin: 0 auto; */
    margin:10px 0 0 0 !important;
    letter-spacing: 0.05em;
    height: 42px;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    pointer-events: all;
    cursor:pointer;
    transition:background 0.2s;
    width: 220px;
}

.confirmSnap{ 
}
 

.confirmSnap:hover{
    background:rgb(0, 206, 180)  
}
 
/*#webgl #gui-parent>.confirmSnap{
    bottom:110px;
}*/



@-webkit-keyframes bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0.0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }

    40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* =========  */
.dragList {
    position: relative;
}

.dragList ul {
    height: 100%;
    position: absolute;
    /* overflow-y: auto; 
    overflow-x: hidden; */
}

.dragList li {
    list-style: none;
    justify-content: space-between;
}

#testdrag.dragging * {
    pointer-events: none;
}

#testdrag.dragging {
    cursor: move;
}

li span {
    user-select: none;
}

li .handle {
    width: 22px;
    background: rgb(211, 211, 211);
    cursor: move;
    display: inline-block;
    justify-content: space-between;
    position: absolute;
    top: 2px;
    height: 22px;
    right: 2px;
    border-bottom-left-radius: 25px;
}

li.drag {
    position: absolute;
    opacity: 0.8;
    z-index: 10;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.9),0px -2px 3px rgba(0, 0, 0, 0.9);
}

li.slide {
    position: absolute;
    z-index: 5;
}

li.thumbImg .delBtn {
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: rgb(223, 223, 223);
    bottom: 22px;
    right: 2px;
    border-top-left-radius: 3px;
    background-image: url(../images/del.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center center;
}

li.thumbImg .delBtn:hover {
    background-color: #fd4747;
}

li.thumbImg input {
    outline: none;
    border: none;
}

.hotPoint_list .previewRight {
    width: 160px;
}

.hotPoint_list .previewRight>* {
    width: 100% !important;
}

.hotPoint_list .previewRight .name {
    background: #fff;
    position: relative;
}

.hotPoint_list .previewRight .name .text {
    padding: 7px;
    letter-spacing: 0.3px;
    text-align: center;
    color: #7b778f;
    line-height: 20px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}

.hotPoint_list .previewRight .name .delBtn {
    position: absolute;
    width: 34px;
    height: 34px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/del.png);
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9);
}

.hotPoint_list .previewRight .name .delBtn:hover {
    background-color: rgba(247, 247, 247, 1);
}

/* ========= media manager */
#mediaManager {
    background: rgba(83, 114, 139, 0.8);
}

#mediaManager.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 800;
    display: flex;
    background: rgba(51, 51, 51, 0.23);
    padding: 0 10px;
}

#mediaManager .manage-body {
    color: #333;
    margin: auto;
    width: 1200px;
    /* height:750px; */
    background: #191538;
    border-radius: 3px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    box-shadow: 0 5px 10px #131923;
    max-width: 100%;
    height: 700px;
}

#mediaManager .manage-head {
    background: #EEE;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

#mediaManager .manage-head .headTitle {
    padding: 15px 30px;
    float: left;
}

#mediaManager .manage-inner {
    padding: 17px 30px;
    color: #fff;
}

#mediaManager .button {
    display: inline-block;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 800;
    cursor: pointer;
    margin: 0 auto;
    transition: background 0.3s, color 0.3s;
    width: 100px;
    text-align: center;
}

#mediaManager .manage-import.button {
    background: #d9e5f1;
    color: #0f3a61;
}

#mediaManager .manage-import.button:hover {
    background: #eff7ff;
    color: #0e2f4c;
}

#mediaManager .manage-upload.button {
    background: #13c7a8;
    color: #e3f6f3;
    /* margin:0 10px; */
}

#mediaManager .manage-upload.button:hover {
    background: #02e0ba;
    color: #fff
}

#mediaManager .manage-cancel.button {
    background: #13c7a8;
    color: #e3f6f3;
    margin: 0 10px;
}

#mediaManager .manage-cancel.button:hover {
    background: #02e0ba;
    color: #fff
}

#mediaManager .importFile .upload {
    margin: 0 auto;
    width: 250px;
    display: flex;
}

#mediaManager .action-close {
    display: flex;
    padding: 17px 20px;
    cursor: pointer;
    /* position: static; */
    /* right: 0; */
    /* top: 0; */
    font-size: 18px;
    float: right;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

#mediaManager .action-close:before {
    content: "\F00D";
}

#mediaManager .manage-list .tab ul {
    height: 32px;
    position: relative;
}

#mediaManager .manage-list .tab ul>li {
    position: absolute;
    height: 100%;
    width: 48px;
    background: #7b90a3;
    line-height: 32px;
    padding-left: 9px;
    border-top-right-radius: 15px;
    color: #dce1f1;
    cursor: pointer;
}

#mediaManager .manage-list .tab ul>li.active {
    background: #d3e6f7;
    color: #191439;
    font-weight: 700;
    cursor: default;
}

#mediaManager .import {
    padding: 10px 0;
}

#mediaManager .import .uploadList {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 0 10px 0;
}

#mediaManager .import .uploadList ul {
    padding: 5px 0;
    background: #eaeef2;
    overflow-y: hidden;
    margin: 0 auto;
}

#mediaManager .import .uploadList ul li {
    width: 100px;
    margin: 0 5px;
    background: #e1e6eb;
    float: left;
}

#mediaManager .import .uploadList ul .mediaBlock {
    position: relative;
    height: 100px;
}

#mediaManager .import .uploadList ul .mediaBlock .mediaContent {
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
}

#mediaManager .import .uploadList ul .mediaBlock .overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
}

#mediaManager .import .uploadList ul .mediaBlock .overlay > div {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    overflow: hidden;
    font-size: 0.95em;
}

#mediaManager .import .uploadList ul .warn {
    font-size: 0.8em;
    color: #f52020;
    text-align: center;
    padding: 7px;
    letter-spacing: 0.5px;
    word-wrap: break-word;
    max-height: 90px;
    text-overflow: ellipsis;
}

#mediaManager .manage-list .content {
    overflow-x: hidden;
    overflow-y: auto;
    height: 330px;
    background: #d3e6f7;
}

#mediaManager .manage-list .content ul {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
}

#mediaManager .manage-list .content ul li {
    width: 120px;
    margin: 5px;
    cursor: pointer;
}

#mediaManager .manage-list .mediaBlock {
    width: 100%;
    background: #f5fbff;
    position: relative;
}

#mediaManager .manage-list .mediaContent {
    height: 100px;
    width: 100%;
}

#mediaManager .manage-list .overlay>div {
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    padding: 0 7px;
    color: #191439;
    background: #fff;
}

#mediaManager .delBtn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25px;
    height: 25px;
    background-image: url(../images/del.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

#mediaManager .uploadList .delBtn {
    top: 0;
    background-image: url(../images/note_closeHover.png);
    background-color: rgba(41, 108, 169, 0.43);
    border: 1px solid #103e6852;
}

#mediaManager .manage-list .overlay .name {
    height: 28px;
    line-height: 30px;
    color: #000;
    text-overflow: ellipsis;
}

#mediaManager .manage-list .overlay .size {
    font-size: 0.8em;
    height: 24px;
    line-height: 24px;
    color: #898791;
}

#mediaManager .import .importFile {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
}

#mediaManager .progress {
}

#mediaManager .progress .progressBar {
    background-color: rgb(236, 228, 228);
    width: 60%;
    height: 2px;
    border-radius: 1px;
    margin: 0 auto;
}

#mediaManager .progress .progressBar>div {
    border-radius: 1px;
    background-color: rgb(45, 207, 179);
    transition: width 0.1s;
    height: 100%;
    width: 50%;
}

#mediaManager .progress> .percentage {
    display: block;
    text-align: center;
    margin-top: 10px;
    letter-spacing: 1px;
}

body.edit.pc {
    display: flex;
    flex-direction: column; 
}

.hasPad {
    padding: 15px;
}

.toolTop {
    display: flex;
    height: 50px;
    justify-content: space-between;
    border-bottom: 1px solid rgb(0, 0, 0);
    vertical-align: middle;
    line-height: 50px;
    padding: 0;
}

.toolTop .model-title2 {
    font-size:16px; 
}

.toolTop .btns {
    display: flex;
}

.toolTop .btns.publish {
    align-items: center;
}

.toolTop .btns>div {
    margin: 0 10px;
    display: flex;
    cursor: pointer;
    background: #02c8ae;
    height: 32px;
    border-radius: 16px;
    padding: 0 10px;
    line-height: 32px;
    font-size: 12px;
}

.toolTop .btns>div label {
    cursor: pointer;
}

.toolTop .btns span {
    /* width: 20px; */
    /* height: 100%; */
    display: block;
    margin-right: 0px;
    /* margin-top: 0px; */
    font-size: 22px;
}

 
.toolTop .btns #exit {
    margin-left: -5px
}

.toolBottom {
    height: calc(100% - 50px);
    border-top: 1px solid rgb(93, 93, 93);
    display: flex;
    font-size: 12px;
    text-align: center;
    flex-flow:row;
}

.toolBottom .toolLeft {
    width: 64px;
    min-width: 64px;
    border-right: 1px solid black;
    padding: 10px 0;
    overflow-y: auto;
}

.toolBottom .toolMid {
    border-left: 1px solid rgb(93, 93, 93);
    border-right: 1px solid rgb(0,0,0);
    flex: 1;
    overflow: hidden;
    /*width: calc(100% - 300px);*/
    /* position: relative; */
	height:100%;
}

.toolBottom .toolRight {
    width: 236px;
    border-left: 1px solid rgb(93, 93, 93);
}
.widthScroll .toolBottom .toolRight {
	width: 246px;
}
.toolBottom .midBottom {
    width:100%;
    height: 93px;
    position: relative;
    padding-top: 4px;
}

#snapTour-edit{
    display: none;
}
/* #snapTour-edit .snapTour-edit-toolbar{
    height: 102px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#snapTour-edit .snapTour-edit-toolbar >div{
    margin-left: -30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#snapTour-edit .snapTour-edit-toolbar a{
    display: inline-block;
    border: solid 1px #3e4243;
    color: #fff;
}

#snapTour-edit .snapTour-edit-toolbar a.btn-play,
#snapTour-edit .snapTour-edit-toolbar a.btn-clear{
    width: 100px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    border-radius: 36px;
}

#snapTour-edit .snapTour-edit-toolbar a.btn-play i,
#snapTour-edit .snapTour-edit-toolbar a.btn-clear i{
    color: #02c8ae;
    padding-right: 10px;
    vertical-align: -2px;
    font-size: 18px;
}

#snapTour-edit .snapTour-edit-toolbar a.btn-play i::after{
    content: "\e662";
    font-size: 14px;
    vertical-align: top;
}

#snapTour-edit .snapTour-edit-toolbar a.btn-play.pause i::after{
    content: "\e65b";
}

#snapTour-edit .snapTour-edit-toolbar a.btn-record{
    position: relative;
    width: 82px;
    height: 82px;
    line-height: 82px;
    text-align: center;
    border-radius: 50%;
    margin: 0 24px;
    background: #cc2b00;
}
#snapTour-edit .snapTour-edit-toolbar a.btn-record::after{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%,-50%);
    border: solid 1px #262729;
    border-radius: 50%;
}

#snapTour-edit .snapTour-edit-toolbar a.btn-record i::after{
    font-size: 24px;
    content: "\e662";
}

#snapTour-edit .snapTour-edit-toolbar a.btn-record.pause i::after{
    content: "\e62e";
}

#snapTour-edit .snapTour-edit-toolbar a.unable{
    opacity: 0.3 !important;
}

#snapTour-edit .snapTour-edit-toolbar a.unable i{
    color: #fff;
}

#snapTour-edit .snapTour-edit-toolbar a.btn-record.unable{
    background: #fff;
}
#snapTour-edit .snapTour-edit-toolbar a.btn-record.unable i{
    color: #262729;
} */

.snapTour-edit-clip{
    height: 258px;
    display: flex;
}
.snapTour-edit-clip a{
    text-decoration: none;
}
.snapTour-edit-clip .clip-left,
.snapTour-edit-clip .clip-right,
.snapTour-edit-clip .clip-center{
    display: flex;
    flex-direction: column;
}


.snapTour-edit-clip .clip-left{
    width: 50px;
    border-right: 1px solid #5d5d5d;
    font-size: 12px;
}

.snapTour-edit-clip .clip-right{
    width: 100px;
    border-left: 1px solid #5d5d5d;
    font-size: 12px;
}

.snapTour-edit-clip .clip-center{
    flex: 1;
    display: flex;
    overflow: hidden;
}

.snapTour-edit-clip .clip-up{
    display:flex;
    height: 38px;
    border-top: 1px solid #5d5d5d;
    align-items: center;
    justify-content: center;
}
.snapTour-edit-clip .clip-down{
    flex: 1;
    border-top: 1px solid #5d5d5d;
}

.snapTour-edit-clip .clip-left .clip-down >div,
.snapTour-edit-clip .clip-right .clip-down >div{
    margin-top: 26px;
}
.snapTour-edit-clip .clip-right .clip-up i,
.snapTour-edit-clip .clip-right .clip-down i{
    font-size: 28px;
    vertical-align: -6px;
}

.snapTour-edit-clip .clip-right .clip-down .btn-clip-transform.active{
    color: #00C8AE;
}

#snapTour-edit .snapTour-edit-timeline{
    height: 10px;
    min-width: 100%;
    padding-left: 5px;
}

#snapTour-edit .snapTour-edit-timeline >div{
    background: #161A1B;
    border-top: 1px solid #5d5d5d;
    border-left: 1px solid #5d5d5d;
    border-bottom: 1px solid #5d5d5d;
    width: 100%;
    height: 100%;
    display: flex;
}

#snapTour-edit .snapTour-edit-timeline .timeline-progress{
    position: relative;
    height: 100%;
    flex-shrink:0;
    /*transition: width 0.5s ease-in-out;*/
}

#snapTour-edit .snapTour-edit-timeline .timeline-progress.active .timeline-cursor{
    display: block;
    pointer-events: none;
}

#snapTour-edit .snapTour-edit-timeline .timeline-scale{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    background-color: #0C4D73;
}

#snapTour-edit .snapTour-edit-timeline .timeline-current{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    z-index: 1;
    background-color: #079eec;
}
#snapTour-edit .snapTour-edit-timeline [data-index] .timeline-scale,
#snapTour-edit .snapTour-edit-timeline [data-index] .timeline-current{
    cursor: pointer;
}

#snapTour-edit .snapTour-edit-timeline .timeline-cursor{
    display: none;
    position: absolute;
    top: -20px;
    left: 0;
    height: 250px;
    z-index: 3;
    border-right: solid 1px red;
}

#snapTour-edit .snapTour-edit-frames{
    padding:5px;
    padding-bottom: 0;
}

#snapTour-edit .mCSB_horizontal.mCSB_inside>.mCSB_container{
    margin-bottom: 12px;
}
#snapTour-edit .snapTour-edit-frames ul{
    font-size: 0;
    white-space: nowrap;
    height: 125px;
    text-align: left;
}
#snapTour-edit .snapTour-edit-frames li{
    display: inline-block;
    width: 160px;
    height: 100%;
    border: solid 2px #2d2f2e;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 40px;
    position: relative;
    background: #2d2f2e;
}
#snapTour-edit .snapTour-edit-frames li:last-child{
    margin-right: 0px;
}
/* #snapTour-edit .snapTour-edit-frames li.mode-doll{
    border: solid 5px #666666;
}*/
#snapTour-edit .snapTour-edit-frames li.active{
    border: solid 2px #00c8ae;
} 

#snapTour-edit .snapTour-edit-frames li.active span[data-flag]:hover,
#snapTour-edit .snapTour-edit-frames li.active span[data-flag].active{
    border: solid 1px #00c8ae;
    cursor: pointer;
}
#snapTour-edit .snapTour-edit-frames li *{
    pointer-events: none;
}
#snapTour-edit .snapTour-edit-frames li.active [data-name],
#snapTour-edit .snapTour-edit-frames li.active [data-flag],
#snapTour-edit .snapTour-edit-frames li.active [data-index],
#snapTour-edit .snapTour-edit-frames li.active .point-img-pick,
#snapTour-edit .snapTour-edit-frames li.active .point-header-more,
#snapTour-edit .snapTour-edit-frames li.active .point-header-more *
{
    pointer-events: all;
}

#snapTour-edit .snapTour-edit-frames.unable [data-name],
#snapTour-edit .snapTour-edit-frames.unable [data-flag],
#snapTour-edit .snapTour-edit-frames.unable [data-index],
#snapTour-edit .snapTour-edit-frames.unable .point-img-pick,
#snapTour-edit .snapTour-edit-frames.unable .point-header-more,
#snapTour-edit .snapTour-edit-frames.unable .point-header-more *
{
    pointer-events: none !important;
}

#snapTour-edit .snapTour-edit-frames li .point-transition,
#snapTour-edit .snapTour-edit-frames li .point-transition *{
    pointer-events: all;
}
#snapTour-edit .snapTour-edit-frames li .point-transition .unable{
    cursor: default;
    opacity: 0.2 !important;
}

#snapTour-edit .snapTour-edit-frames li:last-child .point-header-more >div{
    left: auto;
    right: 29px;
    z-index: 100;
}
#snapTour-edit .snapTour-edit-frames li:first-child .point-header-more >div{
    left: 33px;
    right: auto;
}

#snapTour-edit .snapTour-edit-frames li:last-child .point-transition{
    display: none;
}

#snapTour-edit .snapTour-edit-frames .point-header{
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#snapTour-edit .snapTour-edit-frames .point-header span{
    display: inline-block;
    height: 100%;
    width: 30px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
}
#snapTour-edit .snapTour-edit-frames .point-header span[data-name]{
    cursor: pointer;
}
#snapTour-edit .snapTour-edit-frames .point-header span[data-name]:hover{
    color: #00c8ae;
}
#snapTour-edit .snapTour-edit-frames .point-header .point-header-more{
    position: relative;
    background-image: url(../images/video-icons/btn-more-hotspot.png);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    display: inline-block;
    height: 100%;
    width: 30px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
#snapTour-edit .snapTour-edit-frames .point-header .point-header-more >div{
    display: none;
    position: absolute;
    top: 0;
    left: 33px;
    background-color: #2D2F2E;
    padding: 8px 10px;
    z-index: 10;
    box-shadow: 0 0 5px #232020;
    border-radius: 4px;
}
#snapTour-edit .snapTour-edit-frames .point-header .point-header-more.active >div{
    display: block;
}
#snapTour-edit .snapTour-edit-frames .point-header .point-header-more >div span{
    display: block;
    width: 100%;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    text-align: left;
}
#snapTour-edit .snapTour-edit-frames .point-header .point-header-more >div span:hover{
    color:#00c8ae;
}
#snapTour-edit .snapTour-edit-frames .point-header .point-header-more >div i{
    font-size: 26px;
    vertical-align: -5px;
}
#snapTour-edit .snapTour-edit-frames .point-header-tag{
    background: #161A1B;
    border-top-left-radius: 4px;
}
#snapTour-edit .snapTour-edit-frames li.active .point-header-tag{
    background: #00c8ae;
}
#snapTour-edit .snapTour-edit-frames .point-header-tag i{
    font-size: 20px;
}

#snapTour-edit .snapTour-edit-frames .point-content{
    padding: 8px;
    padding-top: 30px;
    width: 100%;
    height: 100%;
}

#snapTour-edit .snapTour-edit-frames .point-preview{
    height: 65%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#snapTour-edit .snapTour-edit-frames .point-preview span{
    position: relative;
    display: inline-block;
    height: 100%;
    width: 47%
}

#snapTour-edit .snapTour-edit-frames .point-preview span.active a.point-img-pick{
    display: block;
}

#snapTour-edit .snapTour-edit-frames .point-preview span.active.lock a.point-img-pick{
    display: none;
}

#snapTour-edit .snapTour-edit-frames .point-preview a{
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: solid 1px #00C8AE;
    padding: 3px 10px;
    color: #00C8AE;
    border-radius: 14px;
    z-index: 10;
}

#snapTour-edit .snapTour-edit-frames .point-preview img{
    height: 100%;
    width: 100%;
}

#snapTour-edit .snapTour-edit-frames .point-preview span.active::after{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display:block;
    content: " ";
    background-color: rgba(0, 0, 0, 0.5)
}

#snapTour-edit .snapTour-edit-frames .point-hotspot{
    position: relative;
    margin-top: 30px;
    margin-left: 3px;
    margin-right: 3px;
    border-bottom: solid 2px #E5E0DD;
    height: 7px;
    display: flex;
    justify-content: space-between;
}

#snapTour-edit .snapTour-edit-frames .point-hotspot .column{
    position: relative;
    width: 2px;
    height: 100%;
    background-color: #E5E0DD;
}
#snapTour-edit .snapTour-edit-frames .point-hotspot-item i{
    cursor: pointer;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 50%;
    transform: translateX(-50%);
    top: -18px;
    border: solid 1px #E5E0DD;
    border-radius: 50%;
}
#snapTour-edit .snapTour-edit-frames .point-hotspot-item i::after{
    content: " ";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background-color: #fff;
}

#snapTour-edit .snapTour-edit-frames li.active .point-hotspot-item i:hover,
#snapTour-edit .snapTour-edit-frames li.active .point-hotspot-item i.active{
    border: solid 1px #00C8AE;
}

#snapTour-edit .snapTour-edit-frames li.active .point-hotspot-item i:hover::after,
#snapTour-edit .snapTour-edit-frames li.active .point-hotspot-item i.active::after{
    background-color: #00C8AE;
}



#snapTour-edit .snapTour-edit-frames .point-hotspot-angle i{
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    transform: translateX(-50%);
    top: -18px;
    font-size: 14px;
}

#snapTour-edit .snapTour-edit-frames .point-hotspot-more{
    cursor: pointer;
    position: absolute;
    width: 19px;
    height: 19px;
    left: 50%;
    transform: translateX(-50%);
    top: -19px;
    background-image: url(../images/video-icons/btn-more-hotspot.png);
    background-position: center center;
}

#snapTour-edit .snapTour-edit-frames .point-hotspot-more >span{
    cursor: default;
    display: none;
    position: absolute;
    left: 50%;
    bottom: 5px;
    padding: 6px 0;
    border: solid 2px #238B70;
    background-color: #262729;
    z-index: 10;
    border-radius: 6px;
    width: 160px;
    margin-left: -80px;
    font-size: 0;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
#snapTour-edit .snapTour-edit-frames .point-hotspot-more.active >span{
    display: flex;
}

#snapTour-edit .snapTour-edit-frames .point-hotspot-more i{
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 16px;
    height: 16px;
    border: solid 1px #E5E0DD;
    border-radius: 50%;
    margin: 6px;
    top: auto;
    left: auto;
    transform: none;
}
#snapTour-edit .snapTour-edit-frames .point-hotspot-more i::after{
    content: " ";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background-color: #fff;
}
#snapTour-edit .snapTour-edit-frames .point-hotspot-more i:hover,
#snapTour-edit .snapTour-edit-frames .point-hotspot-more i.active{
    border: solid 1px #00C8AE;
}
#snapTour-edit .snapTour-edit-frames .point-hotspot-more i:hover::after,
#snapTour-edit .snapTour-edit-frames .point-hotspot-more i.active::after{
    background-color: #00C8AE;
}

#snapTour-edit .snapTour-edit-frames .point-speed{
    text-align: center;
    margin-top: 10px;
}

#snapTour-edit .snapTour-edit-frames .point-speed i{
    cursor: pointer;
    font-size: 12px;
    float: left;
    margin-top: 0px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    background: #47484b;
}
#snapTour-edit .snapTour-edit-frames .point-speed i:hover{
    color: #00C8AE;
}
#snapTour-edit .snapTour-edit-frames .point-speed i:last-child{
    float: right;
}

#snapTour-edit .snapTour-edit-frames .point-speed span{
    font-size: 14px;
}

#snapTour-edit .snapTour-edit-frames .point-handle{
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 0px;
    height: 8px;
    width: 19px;
    background-image: url(../images/video-icons/btn-more-handle.png);
    background-position: center right;
    background-size: 80%;
}
#snapTour-edit .snapTour-edit-frames .point-handle >div{
    display: none;
    position: absolute;
    left: 19px;
    padding: 4px;
    border: solid 2px #238B70;
    background-color: #262729;
    z-index: 10;
    border-radius: 6px;
}
#snapTour-edit .snapTour-edit-frames .point-handle i{
    font-size: 26px;
}
#snapTour-edit .snapTour-edit-frames .point-handle i:hover{
    color: #00C8AE;
}
#snapTour-edit .snapTour-edit-frames .point-handle.active >div{
    display: block;
}

#snapTour-edit .snapTour-edit-frames .point-transition{
    position: absolute;
    right: -35px;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#snapTour-edit .snapTour-edit-frames .point-transition span{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    background: #2d2f2e;
}

#snapTour-edit .snapTour-edit-frames .point-transition span.active{
    background: #00C8AE;
}

#snapTour-edit .snapTour-edit-frames .point-transition i{
    font-size: 18px;
    color:#fff;
}

#webgl {
    width: 100%;
    height: calc(100% - 93px);
    /* padding: 15px; */
    /* padding-bottom:105px; */
    position: relative;
}

#webgl .webgl-inside {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    overflow: hidden;
}

#snapTour-selector{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    /* background:linear-gradient(150deg, #333333 30%, #000000); */
    background-color: rgba(38, 39, 41, 1);
    z-index: 10000;
}

#snapTour-selector >div{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}
#snapTour-selector >div >div{
    margin-top: 55px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#snapTour-selector h4{
    font-size: 34px;
    font-weight: normal;
    white-space: nowrap;
}
#snapTour-selector a{
    position: relative;
    display: block;
    cursor: pointer;
    width: 242px;
    height: 246px;
    border: solid 1px #505455;
    border-radius: 4px;
    background: url(../images/video-icons/btn-normal.png) no-repeat center 35%;
}

#snapTour-selector a:last-child{
    margin-left: 66px;
    background: url(../images/video-icons/btn-professional.png) no-repeat center 35%
}


#snapTour-selector a:hover{
    border: solid 2px rgba(0, 200, 174, 1);
}

#snapTour-selector a span{
    position: absolute;
    bottom: 36px;
    left: 0;
    width: 100%;
    font-size: 16px;
    color: #fff;
    text-align: center;
}

#snapTour-cad{
   
   
}
#snapTour-cad canvas{
    width: 100%;
    height: 100%;
}

.toolBottom .toolLeft ul {
    overflow-y: auto;
}

.toolBottom .toolLeft li {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
    opacity: 0.8;
    cursor: pointer;
    transition: background 0.1s, opacity 0.1s;
}

.toolBottom .toolLeft li label {
    cursor: pointer;
}

.toolBottom .toolLeft li.active {
    background: rgba(0, 200, 174, 1);
    opacity: 1;
}

.toolBottom .toolLeft li span {
    display: inline-block;
    width: 100%;
    height: 20px;
    background-size: 55%;
    margin-bottom: 0px;
}
.toolBottom .toolLeft li span i{
    font-size:28px;
    line-height:22px;
}
/*
.toolBottom .toolLeft li span.hotpoint {
    background-image: url(../images/hotpoint.png);
}

.toolBottom .toolLeft li span.screen {
    background-image: url(../images/screen.png);
}

.toolBottom .toolLeft li span.information {
    background-image: url(../images/information.png);
}

.toolBottom .toolLeft li span.hotVisible {
    background-image: url(../images/visible.png);
}

.toolBottom .toolLeft li span.panoVisible {
    background-image: url(../images/visible2.png);
}

.toolBottom .toolLeft li span.lock {
    background-image: url(../images/lock.png);
}

.toolBottom .toolLeft li span.music {
    background-image: url(../images/music.png);
}

.toolBottom .toolLeft li span.sign {
    background-image: url(../images/sign.png);
}

.toolBottom .toolLeft li span.snapTour {
    background-image: url(../images/autoTour.png);
}

.toolBottom .toolLeft li span.wallDesign {
    background-image: url(../images/wallDesign.png);
}

.toolBottom .toolLeft li span.texStyle {
    background-image: url(../images/texStyle.png);
}
*/
 
 
.toolRight {
}

.toolRight div.content {
    height: 100%;
    overflow-y: auto;
	user-select: none;
    overflow-x: hidden;
}

.toolRight div.content>ul>li {
    border-top: 1px solid #5d5d5d;
    border-bottom: 1px solid #000000;
    padding: 10px;
}

.toolRight div.content>ul>li:last-child, .toolRight .noBorderbott{
    border-bottom: none !important;
}

.toolRight div.content>ul>li:first-child {
    border-top: none;
}

.toolRight div.content>ul>li>*, .toolRight div.content .itemBlock  {
    margin: 6px 0 10px 0;
    line-height: 34px;
}

.toolRight div.content>ul>li>*:first-child {
    margin: 3px 0 10px 0;
}


.toolRight div.content>ul>li.snapTour-record h4{
    margin: 0 6px;
    display: flex;
    font-size: 14px;
    font-weight: normal;
    justify-content: space-between;
}

.toolRight div.content>ul>li.snapTour-record .snapTour-record-checkbox{
    font-weight: normal;
    cursor: pointer;
    font-size: 14px;
}
.toolRight div.content>ul>li.snapTour-record .snapTour-record-checkbox.selected{
    color: #02c8ae;
}

.toolRight div.content>ul>li.snapTour-record .snapTour-record-checkbox i{
    font-size: 14px;
    margin-right: 5px;
}
.toolRight div.content>ul>li.snapTour-record .snapTour-record-checkbox i::before{
    content: "\e667";
}
.toolRight div.content>ul>li.snapTour-record .snapTour-record-checkbox.selected i::before{
    content: "\e671";
}

.toolRight div.content>ul>li.snapTour-record .playBox{
    position: relative;
    height: 70px;
    background-color: #161A1B;
    background-size: 75%;
    background-position-y: 4px;
}
.toolRight div.content>ul>li.snapTour-record .playBox .time{
    display: none;
    color: #fff;
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    line-height: 1;
    padding: 3px;
}

.toolRight div.content>ul>li.snapTour-record .buttons{
    margin-bottom: 0px;
    line-height: 1;
    background: #1D2122;
    border-radius: 18px;
}
.toolRight div.content>ul>li.snapTour-record .buttons a{
    text-decoration: none;
}
.toolRight div.content>ul>li.snapTour-record .buttons i{
    font-size: 36px;
}

.toolRight div.content>ul>li.snapTour-record .playBox.active{
    background-image: url(../images/video-icons/record.gif);
}
.toolRight div.content>ul>li.snapTour-record .playBox.stop{
    background-image: url(../images/video-icons/record-stop.png);
}
.toolRight div.content>ul>li.snapTour-record .playBox.stop .time,
.toolRight div.content>ul>li.snapTour-record .playBox.active .time{
    display: block;
}

.toolRight div.content>ul>li.snapTour-record .scrollBarTxt{
    display: inline-block;
    outline: none;
    border: 1px solid #737373;
    background-color: #000;
    border-radius: 2px;
    height: 24px;
    line-height: 24px;
    padding: 0;
}
.toolRight div.content>ul>li.snapTour-record-toolbar .btn-record{
    height: 42px;
    border-radius: 42px;
}
.toolRight div.content>ul>li.snapTour-record-toolbar .btn-record i{
    font-size: 22px;
    vertical-align: -4px;
}
.toolRight div.content>ul>li.snapTour-record-toolbar .btn-play i{
    font-size: 14px;
    vertical-align: -1px;
}
.toolRight div.content>ul>li.snapTour-record-toolbar .btn-play.pause i::before{
    content: "\e662";
}
.toolRight div.content>ul>li.snapTour-record-toolbar .btn-record.pause i::before{
    content: "\e662";
}
.toolRight div.content>ul>li.snapTour-record-toolbar .btn-clear i {
    font-size: 24px;
    vertical-align: -5px;
}

.snapTour-record-radio{
    cursor: pointer;
    display: inline-block;
}
.snapTour-record-radio i{
    margin-right: 10px;
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

.snapTour-record-radio i:before{
    content:'';
    display:block;
    width: 14px;
    height: 14px;
    border:3px solid #fff;
    border-radius:50%;
    background:#333;
    position:relative;
    top: -2px;
    left: 0px;
}
.snapTour-record-radio.selected i:before{
    background:#02c8ae;
}

.itemTitle {
    font-size:14px;
    display: flex;
    line-height: 14px;
    position: relative;
}
.toolRight li[data-name=info] .itemTitle{
    margin: 0px 0 !important;
}
.toolRight .itemTitle::before {
    position: absolute;
    right: 0px;
    /* top: 2px; */
    content: ""attr(data-size)"";
    color: #858585;
}

.toolRight .link input:first-child{
    margin-bottom:10px;
}

ul.MenuOptions {
    width: 100%;
    overflow: hidden;
    background: rgb(67, 67, 67);
    padding: 0px;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

ul.MenuOptions li {
    text-align: center;
    display: inline-block;
	height: 100%;
    transition: color 0.1s;
    width: 100%;
    transition: background-color 0.3s;
}

ul.MenuOptions li.chosen {
    background-color: #02c8ae;
}

.toolRight div.content {
    border-color: #737373;
    width: calc(100% + 0px);
}

.hotpoint {}

.toolRight div.content>ul {
    width: 236px;
}
 
.toolRight input, .toolRight div.editText {
    width: 100%;
    outline: none;
    border: 1px solid #737373;
    background-color: #000;
    padding: 0 10px;
    color: #fff;
    letter-spacing: .5px;
    border-radius: 2px;
    height: 32px;
}

.toolRight div.editText {
    height: 100px !important;
    padding:0;
}


@keyframes warnFlash {
    0% {
        background-color:rgba(2, 200, 174, 0);
    }

    100% {
        background-color:rgba(2, 200, 174, 1);
    }
}

.warning{
     -webkit-animation: warnFlash 0.6s linear;
    -moz-animation: warnFlash 0.6s linear;
    -ms-animation: warnFlash 0.6s linear;
    -o-animation: warnFlash 0.6s linear;
    animation: warnFlash 0.6s linear 
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
    animation-iteration-count: infinite;
    border-color:#a7a7a7 !important;
}

.warnLabel{
    position: absolute;
    pointer-events:none;
    /* opacity:0; */
    transform: scale(0,1);
    right: 241px;
    width: 300px;
    padding: 0 10px;
    /* padding: 10px; */
    background:#fff;
    z-index: 10000;
    margin-top:-33px;
    color: #02c8ae;
    font-size: 14px;
    box-shadow: -1px 2px 8px 0px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s, transform 0.2s;
    transform-origin: right;
}
.warnLabel.show{
    transform: scale(1,1); 
    opacity:1;
}
.warnLabel:after{
    content:'';
    display:block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 6px 10px;
    border-color: transparent transparent transparent #ffffff;
    position:absolute;
    right:-10px;
    top:9px;
}


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #ababab !important;
    font-weight: normal !important;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    color: #888888 !important;
    font-weight: normal !important;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #888888 !important;
    font-weight: normal !important;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #888888 !important;
    font-weight: normal !important;
}

.remark {
    display: block;
    text-align: left;
    color: #ababab;
    line-height: 1.5 !important;
    letter-spacing: 0.1px;
    text-align: justify;
}

 



.selection {
    position: relative;
    text-align: left;
    height: 32px;
    overflow: visible;
    background: #000;
}

.selection a {
    display: block;
    position: relative;
    overflow: hidden;
    color: #fff;
    padding-right: 40px;
    padding-left: 10px;
    height: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    line-height: 32px;
    transition-duration: 0.1s;
    border: 1px solid #737373;
}

.selection a:after {
    content: "\e640";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    font-family: "iconfont" !important;
    text-align: center;
    line-height: 30px;
}

.selection a.focus {
    color: #fff;
}

.selection ul {
    position: absolute;
    border: 1px solid #737373;
    z-index: 15400;
    width: 100%;
    overflow: hidden;
    background: #000;
    box-shadow: 0 5px 5px rgba(0,0,0,.3);
    padding: 0;
    margin-top: -1px;
    cursor: pointer;
    /* width: 100%; */
}

.selection ul>li {
    height: 30px;
    list-style-type: none;
    padding: 0 10px;
    line-height: 32px;
    /*    overflow: hidden; */
    width: 100%;
    white-space: nowrap;
    margin: 0px;
}

.selection ul>li.hover {
    background: #272729;
    color: #02c8ae;
}

.information  .selection   i{
	font-size: 22px;
	line-height: 20px;
	/* margin-top: 31px; */
	position: relative;
	top: 4px;
	margin-right: -1px;
	left: -5px;
}
.information  .selection   i.icon_logo{
	font-size: 17.3px;
	line-height: 20px;
	/* margin-top: 31px; */
	position: relative;
	top: 2px;
	margin-right: 3px;
	left: -2.8px;
}




.toolRight .sign ul.chose {
}

.toolRight .sign ul.chose li {
    width: 46.5%;
    /* padding-top: 46.5%; */
    display: inline-flex;
    height: 97.6px;
    /* float: left; */
    position: relative;
    /* margin-bottom: 1.5%; */
    border-radius: 2px;
    border: 1px solid #5d5d5d;
    /* margin-top: 0; */
}

.toolRight .sign ul.chose li.active {
    border: 1.5px solid #02c8ae;
}

.toolRight .sign ul.chose li:nth-child(2n+1) {
    margin-right: 3.5%;
}

.toolRight .sign ul.chose li>div,  .toolRight .hotpointDetail .upload>div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: #414141;
    background-size:cover;
    cursor: pointer;
}
/* 有.upload代表没上传图 */

.toolRight .sign ul.chose li.upload>div, .toolRight .hotpointDetail .upload>div { 
      
}

.upload .iconfont.icon_plus{
	display:block;
	margin: 24% 0 -7% 0; 
	font-size: 28px;
	color:#05c8ae;
}
.toolRight .uploaded i,  .toolRight .uploaded span {
    display:none !important;
}
.toolRight .sign ul.chose li.upload span, .hotpointDetail .upload  span {
    color: #02c8ae;
    /* margin-top: -18%; */
    display: inline-block;
    letter-spacing: 0.5px;
}
.toolRight .sign ul.chose li .buttons, .toolRight .hotpointDetail .uploaded .buttons{
    opacity:0;
    transition: opacity 0.2s;
    pointer-events:none;
    left:0;
    top: 0;
    position: absolute;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.5);
}
.toolRight .sign ul.chose li .buttons button,  .toolRight .hotpointDetail .upload button{ 
   pointer-events:auto;
   margin-top:-17px;
   width:68%;
   left:16%;
   top: 50%;
   position: absolute;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.21); 
}
.toolRight  .upload:not(.uploaded) .buttons{
    display:none;
}
 
.toolRight .uploaded:hover .buttons{
    opacity:1 !important;  
} 
 
.slider .Main {
    height: 20px;
    align-items: center;
    /* display: flex; */
    /* justify-content: space-between; */
    position: relative;
}


.slider .Main .scrollBar {
    position: relative;
    width: 100%;
    height: 4px;
    /* background-color: #c7c7c7; */
    cursor: pointer;
    border: 1px solid #5d5d5d;
    /* border-radius: 1px; */
    border-left: none;
}

.slider .scrollBar .scroll_Track {
    width: 0px;
    height: 4px;
    background-color: #02c8ae;
    border: 1px solid #02c8ae;
    margin: -1px 0 0 0;
}

.slider .scrollBar .scroll_Thumb {
    height: 15px;
    width: 15px;
    background-color: #ffffff;
    /*-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 4px;
     -webkit-box-shadow: 0px 0px 5px #74b5f5;
    -moz-box-shadow: 0px 0px 5px #74b5f5;
    box-shadow: 0px 0px 4px #74b5f5; */
    position: absolute;
    border-radius: 10px;
    margin-top: -9px;
    cursor: pointer;
    -webkit-user-select: none;
}

.slider .BarTxt {
    position: absolute;
    top: -38px;
    right: 0px;
    /* width: 45px; */
    display: flex;
}

.slider .BarTxt .scrollBarTxt {
    width: 40px;
    text-align: center;
    height: 24px;
    padding: 4px 0;
    text-align: center;
    color: #fff;
    letter-spacing: 0;
}
.slider .BarTxt  span{
	line-height: 24px;
	margin-left:4px;
}
#floorLogoSize {
    font-size: 12px;
    width: 100%;
}

#floorLogoSize .slider {
    float: left;
    width: 100%;
}


.toolRight .screen .shotImg{
    height: 108px;
    border-radius: 5px;
    cursor:pointer;
    line-height:105px;
}
.toolRight .screen .shotImg.blank{
    background-image:url("https://4dkk.4dage.com/loading/pc.jpg"); 
	background-size: cover;
	opacity:0.8; cursor:default;
} 
 

#tourSnap{/* 添加导览 */
    background: rgba(33, 33, 33, 0.86);
    width: 60px;
    height: 25px;
    position: absolute;
    border-radius: 10px;
    z-index: 999;
    right: 10px;
    top: 10px;
    line-height: 25px;
    cursor: pointer;
}
.toolRight .addSpot .buttons,.toolRight .addTour .buttons{
     margin:0 !important; 
}  
.toolRight .addSpot button,.toolRight .addTour button{
    height:40px;
    line-height:40px;
    border-radius: 20px;
    font-size:14px; 
}
.toolRight .hotpoint .itemTitle, .toolRight .hotpointDetail .itemTitle{
    font-size:14px;
}
.toolRight .hotpoint .spotList>ul>li,.toolRight .hotpointDetail .setPos>ul>li{
   height: 40px;
   margin:0 0 8px -10px;
   background:#373938;
   cursor:pointer;
   width:calc(100% + 20px);
   line-height:40px;
   font-size:14px;
   letter-spacing:0.5px;
   text-align:left;
   display:flex;
   transition: background 0.1s;
   /* justify-content: space-between; */
   position: relative;
   overflow:hidden;
} 
.toolRight .hotpoint .spotList>ul>li:hover, .toolRight .hotpoint .spotList>ul>li.active{
    background: #454545;
} 
.toolRight .hotpoint .spotList>ul>li:hover:after, .toolRight .hotpoint .spotList>ul>li.active:after{
	width: 4px;
	height:100%;
	background:#05c8ae;
	content:'';
	position:absolute;
	right:0;
}

.toolRight .hotpoint .spotList>ul>li>*{
    height:100%;
    /* width: 100%; */
}
.toolRight .hotpoint .spotList li .icon,.toolRight .hotpointDetail .setPos li .icon{
    width: 30px;
    margin-left: 10px;
    background-size: 70%;
    background-position-x: 0;
}
.toolRight .hotpointDetail .setPos li .state{
    width: 100px;
    text-align:right;
    padding-right:20px; 
}
.toolRight .hotpointDetail .setPos li.finish .state{
    color:#37c8b4;
}
.toolRight .hotpoint .spotList li .del{
    width: 40px; 
    background-size: 72%;
    opacity:0.8;
}
.toolRight .hotpoint .spotList li .del:before{
	content:"\e60e";
	font-family:"iconfont" !important;
	font-size: 25px;
    line-height: 40px; 
}

.toolRight .hotpoint .spotList li .DelConfirm{
    width: 82px;
    background:#02c8ae;
    border-radius:1px;
    box-shadow: -5px 0px 20px rgba(0, 0, 0, 0.5);
    position: absolute;
    right: -82px;
    z-index: 999;
    text-align: center;
    opacity:0.5;
    transition: right 0.3s, opacity 0.1s;
}

.toolRight .hotpoint .spotList li .DelConfirm.open{
    right: 3px;
    opacity:1;
}





.toolRight .hotpoint .spotList li .title,.toolRight .hotpointDetail .setPos li .title{
    width: calc(100% - 70px);
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.toolRight .secondary{
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(100% - 235px);
    background: rgba(38, 39, 41, 1);
    width: 236px; 
    transition:left 0.2s;
}
.widthScroll .toolRight .secondary {
	width: 246px;
	left: calc(100% - 246px);
}
.toolRight .secondary:not(.atRight){
	box-shadow: 0px 0px 20px #090909;
}
.toolRight .secondary.atRight{
    left:100%;
}
.toolRight .hotpointDetail .style ul{
    /* height: 88px; */
    display: table;
}
.toolRight .hotpointDetail .style li{
    width: 38px;
    height: 38px;
    margin: 2px 6px 5px 0;
    float:left;
    cursor:pointer;
    background-size: 85%;
    border: 2px solid transparent;
}
.toolRight .hotpointDetail .style li:nth-child(5n){
    margin-right:0 
} 
.toolRight .hotpointDetail .style li.active{
    border: 2px solid #02c8ae;
}
.toolRight .hotpointDetail .setPos li>*{
    font-size:12px !important;

}
.toolRight .hotpointDetail .setPos li{
    opacity:0.55;
}
.toolRight .hotpointDetail .setPos li.active,.toolRight .hotpointDetail .setPos li.finish{
    opacity:1;
}
.toolRight .hotpointDetail .setPos li:nth-child(2){
    cursor:default;
}
.toolRight .hotpointDetail .setPos li .icon{ 
    margin-right: 10px;
     
}
.toolRight .hotpointDetail .setPos li .icon:before{
	content:"\e641";
	font-family:"iconfont" !important;
	font-size:34px;
}


.toolRight .hotpointDetail .setPos li.active:before {
    content: "";
    width: 0px;
    background: #02c8ae;
    left: 0px;
    top: -1px;
    width:8px;
    position: absolute;
    height: 100%;
}

.toolRight .hotpointDetail .dontShow{
	display:none;
}

.slideCtrl{
    width: 80%;
    max-width: 400px;
    left:50%;
    height: calc(20px + 6%);
    position: absolute;
    bottom: 0;
    transform: translate(-50%,0);
    pointer-events: none;
}
.slideCtrl .path{
    width: 100%;
    height: 2px;
    left: 0;
    background: #fff;
    border-radius: 1px;
    position: relative;
    top: 0;
}
.slideCtrl .path .knot{
    width: 90px;
    height: 32px;
    top: -15px;
    left: calc(50% - 45px);
    position: absolute;
    background-image:url(../images/btn-slider.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition:transform 0.3s;
    pointer-events: auto;
    cursor: pointer;
}

.slideCtrl .path .knot.drag{
    transition:unset; 
}




.toolRight .secondary .itemTitle.head{
    height: 50px;
    padding:0 10px;
    line-height: 50px;
    border-bottom: 1px solid #000000;
} 
.toolRight .secondary li.head .itemTitle{
    margin:0;
    line-height: 40px;
}
.toolRight .secondary .content>ul>li:first-child{
    border-top: 1px solid #5d5d5d !important;
}
.toolRight .secondary .itemTitle.head a.close{
    width:40px; height:100%;
    position:absolute;  right:0px;
    font-size: 10px; 
    cursor:pointer;
}

.toolRight .secondary .itemTitle.head a.close::before{
	content:"\e622";
	font-family:"iconfont" !important; 
	color:white;
}

.toolRight  .buttons.tail{
    height: 60px;
    width:100%;
    padding: 12px 10px;
    border-top: 1px solid #5d5d5d !important;
}
/* .toolRight .hotpointDetail.secondary .content{
	 height:calc(100% - 104px);
}  */
 
.toolRight .hotpointDetail .content{
	height: calc(100% - 107px);
	border-bottom: 1px solid #000000;
}
.toolRight div.content.hotpoint{
	height:calc(100% - 60px);
}
.toolRight #roomProp .content{
	height: 100%;
}
.toolRight #lineProp .content{
	height: 100%;
}
.toolRight .mediaUp{
	display:flex;
}
.toolRight .mediaUp label{
	margin-left: 10px;
	margin: -3px 0 0 10px;
	display: block;
	width: 106px; 
} 
.toolRight .hotpointDetail .upload{
    width:97px;
    height:97px;
    border-radius: 2px;
    border: 1px solid #5d5d5d;
    position: relative;
}
.toolRight .hotpointDetail .upload>div{
   background-color:transparent;  
}
.toolRight .hotpointDetail .uploaded>div{
    background-size:cover;
}
.toolRight .hotpointDetail .upload .del{
    width:20px;
    background-color: #c77a7a;
    height: 20px;
    transform:translate(60%,-40%);
    display: block;
    right:0;
    top: 0;
    border-radius: 50%;
    position: absolute;
    display:none;
} 
.toolRight .hotpointDetail .upload .del:before{ 
	content:"\e622";
	font-size:12px;
	font-family:"iconfont" !important; 
	color:white;
	position:relative;
	top:-5px;
	
}
 
.toolRight .hotpointDetail .upload .name{
	padding: 6px 8px;
	color: #05c8ae;
	line-height: 19px;
	height: 100%;
	text-align: left;
	overflow: hidden;
	/* white-space: nowrap; */
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.toolRight .hotpointDetail .upload.uploaded:hover .del{
    display:block; 
}
.toolRight .snapTour .tourList{
    padding-bottom: 209px;
}
body.tour-record-select .tourList, body.tour-record-select .sound,
body.tour-record-pro .tourList,body.tour-record-pro  .sound
{
	display:none;
}
.toolRight .snapTour .tourList li{
    height:75px;
    display:flex;
    margin: 16px 0;
}
.toolRight .snapTour .tourList li:first-child{
    margin-top:0;   
}
 
.toolRight .snapTour .tourList li>div:nth-child(2){
    /* background: #3e1313; */
    width: calc(100% - 107px);
    height: 100%;
    position: relative;
}
.toolRight .snapTour .tourList li>div:nth-child(2) span{
    text-align:left;
    margin: 0 10px 0 0;
    font-size: 14px;
    text-overflow: ellipsis;
    height: 66px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow:hidden;
    -webkit-line-clamp: 2;
    color: #02c8ae;
    word-wrap: break-word;
    line-height: 22px;
    cursor: text;
}
.toolRight .snapTour .tourList li>div:first-child span {
   border-radius: 11px;
   background: #383a39;
   width: 22px;
   display: block;
   text-align: center;
   height: 22px;
   line-height: 22px;
   font-size: 12px;
   margin-right: 10px;
}
.toolRight .snapTour .tourList li:last-child >div:first-child span{
    background:#02c8ae;
}

.toolRight .snapTour .tourList li>div:first-child{
    position:relative;
}
.toolRight .snapTour .tourList li>div:first-child div.line {
    border-left:2px solid #383a39;
    height: 70px;
    position: absolute;
    left: 10px;
    top: 21px;
    z-index: 0;
}
.toolRight .snapTour .tourList li:last-child div.line{
    display:none;
}
.toolRight .snapTour .tourList li .preview{
    width: 75px;
    cursor:pointer;
}
.toolRight .snapTour .tourList li .preview div{ 
    width:100%;
    height:100%;
    border-radius: 3px;
	background-size:cover;
    background-position-y: bottom;
}

.toolRight .snapTour .tourList li input{
    position:absolute;
    top: -5px;
    left: 0;
    width: 185px;
}


.toolRight .snapTour .sound{
    position: absolute;
    bottom: 0;
    z-index: 999;
    background: #272729;
    /* width: 100%; */
}    
.toolRight .mediaUpload .itemTitle{
    height: 32px;
}
.toolRight .mediaUpload .itemTitle .buttons, .toolRight .remark .buttons{
   position:absolute; right:0;
    
}
.toolRight .mediaUpload .itemTitle span{
    position:absolute; left:0; /*for Ie*/
    
}
.toolRight .mediaUpload .itemTitle button, .toolRight .remark  button{  
    padding:0 20px;
} 
.toolRight .playBox{
    border:1px solid #5d5d5d;
    display:flex;
    padding: 6px;
    width: 215px;
}
.toolRight .playBox>div:first-child{
    width: 56px;
    height: 56px; 
    background-size: 175%;
    cursor: pointer;
    margin-left: 2px;
	overflow:hidden;
}
.toolRight .video .playBox>div:first-child{
    background-size: cover;
}
.toolRight .playBox>div canvas{
   position:absolute;left:0;top:0;
   width: 100%; 
   height: 100%; 
   z-index:100;
}
.toolRight .playBox .playBtn{
    display:none;
    z-index:90;
    width: 30px;
    height: 30px;
    background-color: #00000014;
}
.toolRight .playBox .playBtn span{
   left: 10px;
   top: 7px;
}

.toolRight .playBox>div:first-child.hasVideo{
	background-color:#9ce3b9;
	position:relative; 
}
.toolRight .playBox>div:first-child .playBtn{
	display:block;
}

.toolRight .playBox[data-type='music']>div:first-child{
    background-image:url("../images/soundPlay.png");
}
.toolRight .playBox[data-type='music']>div:first-child.playing{
    background-image:url("../images/soundPause.png");
}

.toolRight .playBox>div:nth-child(2){
    width: calc(100% - 60px);
    margin: 8px 0 4px 11px;
    text-align: left;
    font-size:14px;
}
.toolRight .playBox>div:nth-child(2) span{
    color: #acacac;
    line-height: 1.1;
    display:block;
}
.toolRight .playBox>div:nth-child(2) .title{ 
    text-overflow: ellipsis;
    overflow:hidden; 
    white-space: nowrap;
}

.toolRight .playBox>div:nth-child(2) .delete{
    color:#02c8ae;
    cursor:pointer;
    width:2.3em;
    margin-top: 9px;
}




.reciprocal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}
.reciprocal span{
    position: absolute;
    left:50%;
    top: 50%;
    color: #fff;
    font-size: 240px;
    text-align: center;
    transform: translate(-50%,-60%);
    font-weight: bold;
    display: block;
    height: 240px;
    line-height: 240px;
}
#time{
    position:absolute;
    right:15px;
    top:15px;
    font-size:22px;
    font-weight:100;
    text-shadow: 1px 1px 2px #333333;
    letter-spacing: 0.7px;
}
#time .times::before{
   content:"";
   display: inline-block;
   width:10px;
   height: 10px;
   background-color: #f01000;
   border-radius: 50%;
   vertical-align: 2px;
   margin-right:8px;
}
#time .micro{
    background-image: url('../images/microp.gif');
    height: 30px;
    width: 30px;
    float: left;
    margin-right: 13px;
    background-size: 74%;
    margin-top: 1px;
} 




 
.toolRight .texStyle ul.styleList{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
     
}

.toolRight .texStyle ul.styleList li {
    cursor: pointer;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border: 1px solid #5d5d5d;
    border-radius: 3px;
    padding: 7px;
}

.toolRight .texStyle ul.styleList li span {
    position: relative;
    width: 50%;
    display: flex;
    font-size: 14px;
    display: -webkit-flex;
    justify-content: center;
    letter-spacing: 1px;
}

.toolRight .texStyle ul.styleList li span:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: 11px;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    border: 1px solid #fff;
    background: #fff;
}

.toolRight .texStyle ul.styleList li:hover {
    background: #242425;
}

.toolRight .texStyle ul.styleList li.active { 
    border-color: #02c8ae;
    border:2px solid #02c8ae;
}

.toolRight .texStyle ul.styleList li.active span:before {
    background: #ffffff;
    border-color: #ffffff;
}

.toolRight .texStyle ul.styleList li.active span:after{
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -4.5px;
    left: 13.5px;
    width: 8px;
    height: 8px;
    border-radius: 7px;
    background: #02c8ae;
}
 
#back{
    position:fixed;
    background-color:rgba(0, 0, 0, 0.3);
    top: 0.5rem;
    left:10px;
    background-image:url('../images/back.png');
    background-size: 100%;
    z-index: 9999;
}

.switchSelect{
    cursor:pointer;
    margin: 2px -10px -10px 0 !important;
    height: 30px !important;
    line-height: 3px !important;
}

.switchSelect:before{
    content:'';
    display:block;
    width: 14px;
    height: 14px;
    border:3px solid #fff;
    border-radius:50%;
    background:#333;
    position:relative;
    top: 8px;
    left: 31px;
}
.switchSelect.selected:before{
    background:#02c8ae;
}




.toolRight .wallDesign{
    height:100%;
    display:flex;
   flex-direction: column;  
}
 
.toolRight #architecture li{
    /* display: inline-block; */
    position: relative;
    border-radius: 2px;
    /* width: 33%; */
    margin-bottom: 10px;
    float: left;
    margin-right:6px;
}
.toolRight #architecture li:nth-child(4n){
     margin: 0;
}

.toolRight #architecture li>div{
    cursor:pointer;
    height: 49px;
    border: 1px solid #5d5d5d;
    width: 49px;
    line-height: 47px;
    text-align: center;
}

.toolRight #architecture li>div i {
    font-size: 38px;
}

.toolRight #architecture li.active div {
    border-color: #00c8ae;
}

.toolRight .wallDesign .tail{ 
    width:100%;
    padding:15px 10px;
    
}
.toolRight .wallDesign .tail .operation{
    display:flex;
    justify-content: space-around;
    margin:5px 0;
}
.toolRight .wallDesign .tail i{
    font-size:36px;
    color:#00c8ae;
	cursor:pointer;
}
.toolRight .wallDesign input{
    width:50px;
    height:24px;
    margin-right: 5px;
}
.toolRight .wallDesign .content>ul>li{
    position:relative;
}
.wallDesign [data-type='ModelSize'] .input{
    display: flex;
    justify-content: space-between;
} 
.wallDesign [data-type='ModelSize'] .input .group span{
    margin-left: 4px;
}
.wallDesign [data-type='ModelSize'] .desc{
    position:relative;
    height: 5px;
    top: -12px;
}
.wallDesign [data-type='ModelSize'] .desc :first-child{
    position:absolute;
    left: 20px; 
}
.wallDesign [data-type='ModelSize'] .desc :last-child{
    position:absolute;
    right: 42px;
}
.toolRight .wallDesign .right{
    position:absolute;
    left: 155px;
    top: 8px;
    height: 24px;
}

.toolRight .wallDesign .moveRing{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid #bababa;
    margin: 20px auto 0 auto;
    position: relative;
}
.toolRight .wallDesign .moveRing .line{
    height: 50%;
    width: 2px;
    background: #05c8ae;
    position: absolute;
    left: calc(50% - 1px); 
}
.toolRight .wallDesign .moveRing .ball{
    position: absolute;
    width: 20%;
    height: 20%;
    background: #fff;
    border-radius: 50%;
    left: 40%;
    top: -10%;
    cursor: grab; 
}




.toolRight .wallDesign .content{
    height:calc(100% - 104px);
}

.toolRight .modelDownload  .buttons a{
    height: 34px;
    line-height: 34px !important;
    text-decoration: none;;
}						 
 
							 
				
					   
 

.toolBottom .midBottom.room-preview{
    height: 124px;
    padding-top: 34px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
}

.toolBottom .room-preview-rooms{
    /* position: absolute; */
    /* left: 15px; */
    top: 0;
    font-size: 0;
    text-align: left;
    width: 100%;
    /* overflow: hidden;   */  /* hidden will made slidebar bump to first item (bug?)   */
    white-space: nowrap;
}
.toolBottom .room-preview-rooms a{
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
    border:solid 1px #3E4241;
    border-left:solid 1px transparent;
    color: #fff;
    height: 30px;
    line-height: 28px;
    width: 100px;
    padding: 0 5px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
}
.toolBottom .room-preview-rooms a:first-child{
    border-left:solid 1px #3E4241;
}
.toolBottom .room-preview-rooms a.active{
    background-color: #02c8ae;
}
.toolBottom .room-preview-image{
    padding-top: 4px;
    height: 140px;
    /* padding-bottom: 10px; */
    margin: 0 -3px;
}
.toolBottom .room-preview-image a{
    position: relative;
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    border: solid 3px transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 130px;
    height: 130px;
    overflow: hidden;
}
.toolBottom .room-preview-image a img{
    width: 170%;
    height: 100%;
    border-radius:2px;
}
.toolBottom .room-preview-image a span{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding:1px 0;
    text-align: center;
    color: #fff;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.3);
    overflow:hidden;
}

.toolBottom .room-preview-image a.active{ 
    border: solid 3px #12BFAB;
    border-radius: 6px;
}
 

.toolBottom .room-preview-image .swiper-scrollbar-drag{
    background: #797979;
} 

.toolBottom .room-preview-image .swiper-scrollbar{
    bottom: 0;
}


body.tour-record-select #snapTour-selector,
body.tour-record-select .selectorTour
{
    display: block !important;
}

/* body.tour-record-pro #webgl{
    height: calc(100% - 360px);
    padding: 20px;
    padding-bottom: 0;
}

body.tour-record-pro #webgl .webgl-inside{
	width: 72% !important;
	min-width: calc(100% - 700px);
	max-width: calc(100% - 300px);
} */

/* body.tour-record-pro #BottNav{
    bottom: 0;
} */


/* body.tour-record-pro #BottNav #autoTour,
body.tour-record-pro #BottNav #tourGuide,
body.tour-record-pro #BottNav .bottRight{
    display: none;
} */

body.tour-record-pro #BottNav #autoTour{
    width: auto;
}
body.tour-record-pro #BottNav .play,
body.tour-record-pro #BottNav .split,
body.tour-record-pro #BottNav .pullUp{
    display: none;
}
body.tour-record-pro #BottNav .preview{
    display: block;
}
body.tour-record-pro #BottNav #tourGuide{
    visibility: hidden;
}

body.tour-record-pro #snapTour-cad{
    display: block;
}

body.tour-record-pro #snapTour-edit{
    display: block;
}

body.tour-record-nml .snapTour .addTour,
body.tour-record-nml .snapTour .describ {
    display: list-item !important;
}

body.tour-record-pro .snapTour-record{
    position: relative;
    display: list-item !important;
}


#webgl.room-preview{
    height: calc(100% - 180px);
}

/*-------------------------------------------------*/
.toolRight .oneLine{
	position:relative;
}
.midBottom .switch,
.toolRight .switch{
    width: 54px;
    height:26px;
    background-color: rgb(0, 0, 0);
    border:2px solid #737373;
    border-radius: 13px;
    position:absolute;
    right:0;
    top:0;
    transition: background-color 0.2s;
    transition-timing-function: linear;
    cursor:pointer;
}
.midBottom .switch{
    position: relative;
    right:auto;
    top:a;
}
.midBottom .switch div,
.toolRight  .switch div{
	top:1px;
    width: 20px;
    height:20px;
    background-color:#737373;
    border-radius:11px;
    position:absolute;
    transition:right 0.2s,color 0.2s;
    right: 29px;
    transition-timing-function: ease-in-out;
}
.midBottom .switch.on div,
.toolRight  .switch.on div{
    background-color: rgb(5, 200, 174);
}
.midBottom .switch.on div,
.toolRight  .switch.on div{
    right:1px;
}

#recording-status{
    position: absolute;
    top: 10px;
    right: 10px;
}

#recording-status i{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #f01000;
    border-radius: 50%;
    animation: recording 1s;
    -moz-animation: recording 1s;	/* Firefox */
    -webkit-animation: recording 1s;	/* Safari 和 Chrome */
    -o-animation: recording 1s;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
#recording-status span{
    display: inline-block;
    vertical-align: 1px;
    margin-left: 5px;
    font-size: 20px
}

#recording-status.sound-recording::before{
    content: "";
    position: absolute;
    top: 6px;
    left: -34px;
    width: 30px;
    height: 35px;
    background-image: url(../images/video-icons/luyin.gif);
    background-repeat: no-repeat;
    background-size: 70%;
    
}

@keyframes recording{
    from {background: #f01000;}
    to {background:transparent}
}

 


.markspot{
	/* transform: translate(-50%,-50%); */
	position:absolute; 
	cursor: -webkit-grab;
	pointer-events: auto; 
}	 
 
 
	
#hotspot .innerArea{  
	border: 1px solid black;
	border-radius:4px; 
	position: relative;
	pointer-events:auto;
}
#hotspot .innerArea .cursor{
	width: 6px;
	height: 6px;
	border: 1px solid red;
	border-radius: 3px;
	left:0;
	right:0;
	position:absolute;
	z-index:999;
	background: #ff000052;
	transform: translate(-50%,-50%);

}	








#IMGparent{
	display:none;
	position:absolute;
	bottom:0;
	width:100%;
	margin:1%;
	opacity:0.7;
	pointer-events:none;
	z-index:10000;
	max-width: 2000px;
	right:0;
}


#IMGparent>div{
	border:1px solid #ffa;
	width:49%; 
	float:left;
	display:block;
	position:relative;				
}
#IMGparent img{
	height:auto;
	width:100%				
}

#IMGparent .cursor{
	display: none; 
	width: 8px;
	height: 8px; 
	position: absolute;
	transform:translate(-50%,-50%);
	left: 0;
	top: 0;
	border: 2px solid #ff0000c9;
	border-radius: 5px;
	opacity: 0.7;
	pointer-events:none;
	z-index:33;
}
#IMGparent .cursor2{
	border: 2px solid rgba(98, 255, 0, 0.7);	
	width: 6px;
	height: 6px; 
	display:block;
	z-index:3;
}	
#webgl.editSpot .webgl-inside{
	width: calc(50% - 5px) !important;
}

#addSpot{
	display:none;
	width: calc(50% - 20px);
	position: absolute;
	right: 15px;
	height: calc(100% - 30px);
	/* padding:0 10px; */
	user-select: none;
	cursor:crosshair;
}
#webgl.editSpot #addSpot{
	display:block;
 
							
				  
}
				  
				 
						
 
					
					   
				 
				 
								  
			   
 
					   
					   
 
				 
					
				  
					  
				   
 
						
					  
 


						
							 
 


.itemTitle label{
	position: absolute;
    right: 0;
    color: #05c8ae;
    cursor: pointer; 
}
#copyLink a{
	
	overflow: hidden;   
	width: 100%;   
	white-space: nowrap;
}
#QRcode{
	width:100%;
	height:100%;
}



/*-------overlay test ---------------------------------------------------*/

#overlayUpload .preview{
    border: 1px solid #67696c;
    border-radius: 2px;
    background: #414141;
    height: 100px;
    /* line-height: 100px; */
    position: relative;
    color: #c9c9c9;
    cursor: pointer;
    width: 200px;
    background-repeat:no-repeat;
    background-size:100% 100%;
    margin-bottom: 26px;
}
#overlayUpload .preview .plus{
    display: block;
    position:absolute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%);
}
#overlayUpload .preview [attr-type='height']{
    position: absolute;
    left: calc(8px + 100%);
    line-height:100%;
    display: block;
    top: 50%;
}
#overlayUpload .preview [attr-type='width']{
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
    display: block;
    top: 100%;
    line-height: 23px;
}

				 
			   
	 
 

					
				 
   

 
					   
			  
 
							 
						   
 
						  
					   
					
				  
 

						   
				 
					
				
				  
				   
						
						

   
 
									   
							  
						
 
/* ---------------------------------------------------------------------------- */




/* change Color for zhifangbao  -------------------------------------------------*/

 





/* ---------------------------------------------------------------------------- */