.app-wrapp {
     height: 100%;
     width: 100%;
     padding: 0px;
     margin: 0px;

     display: flex;
     flex-direction: row;
     overflow: hidden;
     font-size: 14px;
     user-select: none;
 }

 .container-split {
     display: block;
     width: 5px;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAOCAYAAADnqNYmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVDNDcxQ0JDMkRGNTExRUJBMzhDQzI4OEJBNUM4Q0JGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVDNDcxQ0JEMkRGNTExRUJBMzhDQzI4OEJBNUM4Q0JGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUM0NzFDQkEyREY1MTFFQkEzOENDMjg4QkE1QzhDQkYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUM0NzFDQkIyREY1MTFFQkEzOENDMjg4QkE1QzhDQkYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4uQbmlAAAAJ0lEQVR42mL8//+/LwMEbAZiMJuJAQtgBKrEEMSqkgVmzrAxEyDAAHwoEUeABjEhAAAAAElFTkSuQmCC);
     cursor: col-resize;
     background-color: #1c222b;
     background-repeat: no-repeat;
     background-position: 50%;
     z-index: 1000;
     border-right: 1px solid #000;
 }

 .code-edit-header {
     position: relative;
     height: 40px;
     line-height: 40px;
     /* background: #252525; */
     background: #23272fb3;
     color: white;
     user-select: none;
     text-align: center;
 }

 .code-edit-type {
     display: flex;
     position: absolute;
     left: 0px;
     margin: 0px 10px;
     cursor: pointer;
 }

 .code-type-item {
     padding: 0px 10px;
 }

 .code-type-item:hover {
     background: #1E1E1E;
 }

 .code-type-item-active {
     background: #1E1E1E;
     color: #1890ff;
     border-radius: 2px;
 }

 .code-edit-title {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline-block;
     text-align: center;
     color: #5a6d73;
     font-size: 14px;
     margin: 0;
     width: 100%;
 }

 .code-edit-run {
     position: absolute;
     right: 0px;
     top: 0px;
     margin: 0px 10px;
     cursor: pointer;
     display: flex;
 }

 .run-item {
     line-height: 30px;
     display: flex;
     align-items: center;
 }

 .run-item:hover {
     color: #1890ff !important;
 }

 .code-edit-type span {
     display: inline-block;
     line-height: 26px;
     padding: 4px 10px;
     margin: 3px 0px;
     cursor: pointer;
     width: 60px;
 }

 .code-editor-container {
     height: calc(100% - 40px);
     width: 100%;
 }


 .svg-item {
     display: flex;
     position: relative;
     align-items: center;
     cursor: pointer;
     margin-left: 10px;
 }

 .svg-item:hover {
     color: #1890ff;
 }

 .svg-title {
     flex: 1;
     margin-left: 3px;
     font-weight: 500;
     font-size: 16px;
 }

 .svg-item i {
     display: flex;
     place-items: center;
     place-content: center;
     width: 21px;
     height: 21px;
 } 

 .view-container {
     position: relative; 
 }

 .iframe-container {
    height: 100%;
    width: 100%;
    background: black;
    position: relative;
} 

 .code-view-header {
     height: 40px;
     line-height: 40px;
     background: #23272fb3;
     color: white;
     user-select: none;
     text-align: center;
 }

 .switch-container {
     position: absolute;
     left: 0px;
     margin: 0px 5px;
     cursor: pointer;
 }

 .switch-container:hover {
     color: #1890ff;
 }

 .action-container {
     position: absolute;
     top: 0px;
     right: 20px;
     margin: 0px 10px;
     cursor: pointer;
     display: flex;
 }

 .action-container .action-item {
     margin-right: 20px;
 }

 .action-container .action-item:hover {
     color: #1890ff;
 }



 .code-view-title {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline-block;
     text-align: center;
     color: #717475;
     font-size: 14px;
     margin: 0;
     width: 100%;
 }

 iframe {
     height: calc(100% - 38px);
     width: 100%;
 }

 .contact {
     position: absolute;
     bottom: 88px;
     left: 8px;
     cursor: pointer;
 }

 .wx-link {
     position: absolute;
     left: 0px auto;
     left: 0px;
     top: -338px;
     background: white;
     padding: 20px 29px;
     border-radius: 8px;
     text-align: center;
     font-size: 15px;
 }

 iframe {
     height: calc(100% - 38px);
     width: 100%;
 }

 .none-events {
     pointer-events: none;
 }


 .current-title {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     text-align: center;
     pointer-events: none;
     line-height: 40px;
     color: #b3b3b3;
 }

 .large-image {
     position: fixed;
     bottom: 200px;
     background-color: transparent;
     pointer-events: none;
 }