body{
  font-family: arial;
  font-size: 12px;
  padding:0;
  margin: 0;
  background:#262626;
  min-height: 2000px;
}
a{
  text-decoration:none;
  color: #5d98b5;
}
.hidden{
  display:none;
}

#cboxContent {
  background: #535353 !important;
  color: #ffffff;
}
#LoginBox {
    border: 3px solid #CCCCCC;
    margin: 100px auto auto;
    padding: 20px;
    width: 366px;
    background:#EFEFEF  url(../images/headerLogo.png) no-repeat left center;
    padding-top: 13px;
}
#LoginForm{
  
  padding-top: 10px;
}
.loginBox-wrapper{
  margin-left: 106px;
}
.login-header{
  font-weight: bold;
  font-size: 30px;
  margin-top: 10px;
}
#LoginForm .FormWrap label{
  width: 67px;
  text-align: left;
}
body.page-login {
    background: #FFFFFF;
}
#BtnLogin {
    margin-left: 120px;
    margin-top: 10px;
}
.FormWrap {
    margin-top: 5px;
}
.FormWrap label {
    display: block;
    float: left;
    font-size: 11px;
    padding-right: 10px;
    padding-top: 2px;
    text-align: right;
    width: 108px;
}
body.page-login input[type="text"], body.page-login input[type="password"] {
    border: 1px solid #CCCCCC;
    padding: 4px 6px;
    width: 178px;
}
.SepLine {
    border-top: 1px dotted #cccccc;
    margin-top: 9px;
    padding-top: 7px;
}
.Error {
    color: #BA2C2F;
    border: 1px solid #BA2C2F;
    padding: 8px;
    padding-left: 12px;
    margin-bottom: 6px;
    margin-top: 10px;
}
.InnerMessage{
	color: #AAAAAA;
    font-size: 24px;
    margin: 100px auto auto;
    text-align: center;
    width: 800px;
    font-family: georgia;
}
.InnerMessage.error{
	background: url("../images/error.png") no-repeat scroll left 10px transparent;
    border: medium none;
    color: #BA2C2F;
    padding-left: 36px;
    text-align: left;
}
.sceneCanvas {
    /*border: 1px solid #282828;*/
    background: #FFFFFF;
    margin-left: -1px;
    z-index:-1;
    /*background: #585858;*/
}
 
.clearfix{
  clear: both;
}
.clearfix:before,
.clearfix:after{
  content:'';
  display:table;
  clear: both;
}
#MainLoading {
  display: none;
  margin: auto;
  padding-top: 200px;
  position: fixed;
  width: 100%;
  z-index: 99999;
}
#InnerLoading {
  background: url("../images/loadingBig.gif") no-repeat scroll 20px 11px #EEEEEE;
  border: 1px solid #AAAAAA;
  box-shadow: 5px 14px 51px 20px #AAAAAA;
  height: 58px;
  margin: auto;
  width: 200px;
}
#logo {
  float: left;
  height: 18px;
  margin-left: 5px;
  margin-right: 2px;
  margin-top: 3px;
}
#logo img{
  height: 100%;
}


.box-scene-status{
  width:12px;
  height: 12px;
  background:#FF0000;
}

.status-move-item{
  cursor:all-scroll ;
}
.status-draw-path-item.status-move-item{
  cursor:all-scroll !important;
}
.status-rotate-item{
  cursor:url(../images/cursor/rotate_icon.png),url(../images/cursor/rotate_icon.png), auto;
}
.status-on-moving{
  cursor:all-scroll !important;
}
.status-hover-center-point {
  cursor:all-scroll !important;
}
.status-scale-item-0,
.status-scale-item-2{
  cursor:sw-resize !important;
}
.status-scale-item-1,
.status-scale-item-3{
  cursor:se-resize !important; 
}
 
.status-scale-item-border-0, 
.status-scale-item-border-2{
  cursor:col-resize !important;
}
.status-scale-item-border-1, 
.status-scale-item-border-3{
  cursor:row-resize !important;
}
.status-draw-path-item{
  cursor:crosshair;
}
.status-point-picker{
  cursor:crosshair !important;
}
.status-near-left-ruler{
  cursor:e-resize;
}
.status-near-top-ruler{
  cursor:n-resize;
}
.status-zoom{
  cursor:zoom-in;
}
.status-rectangle-zoom{
  cursor:zoom-in;
}
.status-pan{
   
}
.status-info{
  /*cursor:help;*/
}
.status-fillcolor{
  cursor:url(../images/toolbar/fillcolor_icon.png),url(../images/toolbar/fillcolor_icon.png), auto;
}
.status-fillgradient{
  cursor:crosshair;
}
.status-text-edit{
  cursor: text;
}
.box-item-lock{
  width: 12px;
  height: 12px;
  cursor:pointer;
}
.box-item-lock-unlock{
  background: url(../images/icons/nolock.png) no-repeat center center;
}
.box-item-lock-locked{
  background: url(../images/icons/lock.png) no-repeat center center;
}
.head-lock-unlock{
  background: url(../images/icons/nolock.png) no-repeat center center;
  width: 12px;
  height: 12px;
  cursor:pointer;
}
.head-lock-unlock.head-lock-unlock-locked{
  background: url(../images/icons/lock.png) no-repeat center center;
}
.box-item-status{
  width: 12px;
  height: 12px;
  cursor:pointer;
}
.box-item-status-visible{
  background: url(../images/icons/visible.png) no-repeat center center;
  
}
.head-status-visible{
  width: 12px;
  height: 12px;
  cursor:pointer;
  background: url(../images/icons/visible.png) no-repeat center center;
}
.box-item-status-invisible{
  background: url(../images/icons/invisible.png) no-repeat center center;
}
.head-status-visible.head-status-invisible{
  background: url(../images/icons/invisible.png) no-repeat center center;
}
#btnUpdateProperties{
  margin-left: 132px;
}
.tdBox {
  border-right: 1px solid #333333;
  height: 16px;
  padding-left: 5px;
  width: 16px;
}
.tbBoxItemName{
  padding-left: 5px;
}
#sceneCanvasWrapper {
    margin-left: 99px;
    margin-top: 63px;
    padding-left: 0px;
    position:relative;
 
    width:100%;
    display: flex;
    flex-direction: row;
     
}
#scene-tabs {
    background: #393939 none repeat scroll 0 0;
    width: initial;
    border-bottom: 1px solid #282828;
    float: left;
    clear: right;
    width: 100%;
    box-sizing: content-box;   
    margin-top: 17px;
    display: none;
}
#scene-tabs ul{
  margin:0;
  padding:0;
}
#scene-tabs ul li {
  background: #535353 none repeat scroll 0 0;
  color: #e1e1ca;
  float: left;
  font-family: arial;
  list-style: outside none none;
  padding: 5px 9px;
  border-top: 1px solid #6a6a6a;
  padding-left: 13px;
  padding-right: 13px;
  border-right: 1px solid #282828;
}
.one-half{
  width: 49%;
  margin-right:1%;
  float:left;
}
.column-last{
  margin-right:0;
}
#controlbar{
  display:none;
}
.rightCanvas{
  flex: 1 1 auto;
  inset: 29px auto auto 29px;
  padding-right: 600px;
  /*62px auto auto 91px;*/
 /* left: 29px;
  top: 19px;*/
  
}
/*******override for ColorPicker Spectrum********/
.color-picker .sp-dd{
  display:none;
}
.color-picker .sp-preview{
  margin-right:0;
  width: 100%;
  height: 100%;
}
.color-picker .sp-replacer{
  padding:0;
  width: 100%;
  height: 100%;
  border:none;
}
.color-picker .sp-replacer:hover,.color-picker .sp-replacer.sp-active{
  border:none;
}
#SceneSubtitles textarea{
  width: 100%;
  min-height: 400px;
}

.context-menu-canvas-drawing-temp-item .icon-initialproperties{
  display:none;
}

.context-menu-canvas-drawing-temp-item .icon-animations{
  display:none;
}
.context-menu-canvas-drawing-temp-item .sep-for-timeline-item{
  display:none;
}
.icon-showanimations{
  display:none;
}
.icon-moveToSelectedFrame{
  display:none;
}
.context-menu-timeline-item .icon-showanimations{
  display:block;
}
.context-menu-timeline-item .sep-for-drawing-item{
  display:none;
}
.context-menu-frame-single.cell-has-items .icon-showanimations{
  display:block;
}
.context-menu-canvas-drawing-temp-item .icon-moveToSelectedFrame{
  display:block;
}
.icon-compoundSelected{
  padding-right:10px;
}
.cell-has-no-items .icon-exploreFrameItem{
  display:none;
}
.context-menu-list li.disabled{
  display:none;
}
.sep-menu {
    padding-bottom: 0;
    border-bottom: 1px solid #DDD;
}
#colorbox, #cboxOverlay, #cboxWrapper {
  z-index: 9999999999999 !important;
}
.alertify-logs{
  top: 20px;
  z-index:999999999999999;
  pointer-events: none;
}
.context-menu-single-mode .icon-groupSelectedItems,
.context-menu-single-mode .icon-mergeSelectedItems,
.context-menu-single-mode .icon-subtractSelectedItems,
.context-menu-single-mode .sep-for-select-multiple
{
  display:none;
}
.context-menu-not-group .icon-exploregroup,
.context-menu-not-group .icon-unGroup,
.context-menu-not-group .sep-for-select-group{
  display:none;
}
.context-menu-is-group .icon-exploregroup,
.context-menu-is-group .icon-unGroup,
.context-menu-is-group .sep-for-select-group{
  display:block;
}

.context-menu-multiple-mode.has-single-item-selected .icon-exploreGroup{
  display:none;
}
.context-menu-multiple-mode  .icon-showitemsetting{
  display:none; 
}
.context-menu-multiple-mode.has-single-item-selected .icon-showitemsetting{
  display:block;
}
.popup-videos-all-wrap{
  width: 600px;
}
.popup-videos-all-wrap a{
  color:#FFFFFF;
}
.popup-videos-all-wrap table{
  width: 100%;
}
.popup-videos-all-wrap table tr{
  
}
.popup-videos-all-wrap table tr td{
  border-bottom: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  padding-bottom: 3px;
}
.video-all th{
    background: #333333!important;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 6px;
}
.g-opacity input[type="text"] {
  width: 39px;
}
.g-text select{
  width: 68px;
}
#toolbar-select-action #toolbar-select-path-action{
    padding-left: 0;
    margin-left: 0;
}
#toolbar-select-action .toolbox-free-action-box label{
  padding-right: 0;
}
.sp-container {
    z-index: 9999999999999999999 !important;
}
.is-active-scene{
  background-color:#796c6c;
}
.frame-items-info{
  color: #FFFFFF;
  padding-left: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ACACAC;
  font-size: 10px;
  padding-right: 5px;
  padding-top: 3px;
}
#frame-items-layer{
      font-weight: bold;
    color: #e0c661;
}
#frame-items-slot{
      font-weight: bold;
    color: #e0c661;
}
#dialog-drawing-items.dialog-active,
#timeline.dialog-active,
#item-children.dialog-active{
      border-color: #FF0000 !important;
}

#video-current-name{
  float: left;
  margin-right: 20px;
}
#drawing-info{
  float: left;
}
#right-control-header{
  height: 15px;
    width: 100%;
}
#right-control-dialog{
  position: fixed;
  right: 0;
  width: 35px;
  min-height: 100px;
  height: 100%;
  top: 58px;
  background: #535353 none repeat scroll 0 0;
  border:2px solid#353535;
  border-radius: 2px;
  
}
.control-icon{
  width: 20px;
  border: 1px solid #000000;
  height: 20px;
  margin: auto;
  margin-bottom: 6px;
  cursor: pointer;
}
#control-dialog-scene{
  background: url(../images/toolbar/control_icon_scene.png) no-repeat center center;
}
#control-dialog-drawing{
  background: url(../images/toolbar/control_icon_drawing.png) no-repeat center center;
}
.right-control-inner{
  padding: 4px 2px 10px;
}
.image-item {
	min-height: 100px;
	min-width: 100px;
	width: 197px;
	float: left;
	margin-right: 12px;
	margin-left: 3px;
}
.image-item-wrap.pinned {
    border-color:#ff0000;
}
#quick-upload-image,#quick-unpin-image-preview, #quick-preview-image,
#quick-upload-svg{
  color: #FFFFFF;
    float: left;
    margin-left: 6px;
    margin-top: 4px;
    cursor:pointer;
}
#quick-unpin-image-preview{
    display: none;
}
.message-save-confirm-actions input[type="button"] {
  width: 100px;
}

.btn-primary{
  background:#5ed947;
}
.alertify {
    top: calc((100vh - 100px) / 2) !important;
}
.noselect,.no-select,.alertify-confirm, .child-classname{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}
.selectable{
    -webkit-touch-callout: reset; /* iOS Safari */
    -webkit-user-select: reset; /* Safari */
    -khtml-user-select: reset; /* Konqueror HTML */
    -moz-user-select: reset; /* Old versions of Firefox */
    -ms-user-select: reset; /* Internet Explorer/Edge */
    user-select: reset; /* Non-prefixed version, currently */
}
.image-wrapper{
    margin-top: 17px;
}
.animate-hide-cursor{
    cursor: none;
}

body.animate-fix-scroll{
    overflow: hidden;
}
.animate-hide-cursor.un-set-animate-hide-cursor{
    cursor: auto;
}
.pure-color-txt {
    display: inline-block;
    float: left;
    margin-left: 5px;
    margin-top: 2px;
    border: 1px solid #000000;
    padding: 0;
    font-size: 12px !important;
    line-height: 9px !important;
    height: 24px !important;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 6px;
    padding: 0;
    /* border: 0; */
    margin-right: 3px;
}
.set-picker-color{
    font-size: 10px;
    margin-top: 6px;
}
label.label-keep{
    float: none;
}
ul.pager li{
    display: inline-block;
    background: #cccccc;
    padding: 5px;
    border-radius: 2px;
}
.element-invisible{
    display: none;
}
.item-list {
    clear: both;
    text-align: center;
}
.item-list:before,
.item-list:after{
    content: '';
    display: table;
    clear:both;
}
.image-wrapper-top {
    border-bottom: 1px solid #cccccc;
    margin-bottom: 22px;
}
.alertify-logs {
    width: 187px !important;
}
.ui-resizable-w {
    width: 13px !important;
}


.image-design-diagram #imagedesign-captured,
.image-design-diagram #topRuler,
.image-design-diagram .button-animate {
    display: none;
}
.image-design-diagram #leftRuler{
    background: transparent;
}
body.status-pan .sceneCanvas {
    cursor:move;
}
 
#bottom-view-zoom {
    float: right;
    margin-right: 20px;
    transform: translateY(-5px);
    width: 312px;
}
.input-range-zoom-range-footer {
    width: calc(100% - 90px);
}
#bottom-view-zoom i{
    transform: translateY(-3px);
    outline: none;
}

#current-zooom-ratio {
    width: 33px;
    transform: translateY(-2px);
    margin-right: 3px;
}
#btn-zoom-origin-footer {
    float: right;
    margin-right: 10px;
    transform: translateY(-3px);
    height: 19px;
    width: 25px;
    text-align: center;
    font-size: 11px;
    padding: 1px;
    background: #cccccc;
}
#btn-zoom-origin-footer:after {
    content: '100';
    position: absolute;
    bottom: -5px;
    right: -5px;
    color: #ffffff;
    font-size: 7px;
    background: #ff0000;
    padding-left: 1px;
    padding-right: 2px;
}
#btn-zoom-origin-fit-footer {
    float: right;
    margin-right: 10px;
    transform: translateY(-3px);
    height: 19px;
    width: 25px;
    text-align: center;
    font-size: 11px;
    padding: 1px;
    background: #cccccc;
}
.image-design-magic #toolbar:after,
.image-design-arthub #toolbar:after{
    display: none;
}
#CrateNewImageDesign{
    width: 494px;
}

.zoom-navigation-footer{
    float: right;
    margin-right: 10px;
    transform: translateY(-3px);
    height: 19px;
    width: 25px;
    text-align: center;
    font-size: 11px;
    padding: 1px;
    background: #cccccc;
}
#floating-pen {
    position: fixed;
    left: 827px;
    right: 155px;
    z-index: 99999999999999;
    width: 120px;
    display: none;
}
.body-animate-hide-cursor #floating-pen{
    cursor: none;
}
#image-type {
    width: 111px;
    border: 1px solid #cccccc;
    padding: 3px;
}
body.bg-green{
    background:#00ff00;
}

body.status-pan .footer-quick-pan{
    background: #ff0000;
    color: #ffffff;
    border: 1px solid #ffffff;
}

body.body-quick-zoom .footer-quick-zoom{
    background: #ff0000;
    color: #ffffff;
    border: 1px solid #ffffff;
}


.body-iframe .section-button-nav,
.body-iframe .menu-records{
    display: none;
}
.body-iframe .command-line-wrapper .fa-terminal,
.body-iframe .command-line-wrapper #command-text{
    display: none;
}
#full-size-force-download{
    display: none;
}
.body-iframe #full-size-force-download {
    display: inline-block;
    width: 12px;
    color: #ffffff;
    margin-left: 10px;
    transform: translateY(-1px);
    border-left: 1px solid #ffffff;
    padding-left: 10px;
}
.body-iframe #full-size-force-download:hover{
    color:#ffd600;
}
.body-iframe .toolbar-handlepolyline-action .g-opacity-label{
    display: none;
}
.body-iframe .toolbar-handlepolyline-action label {
    font-size: 7px;
}

.test_load_video {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999999999999999999999999999;
    background: #ffffff;
    width: 100px;
    height: 100px;
}

#items-drawing-list,#item-children-list{
    overflow: auto;
   overscroll-behavior: contain; /* hoặc 'none' */
}
.btn-quickFontSzie18 {
    font-size: 11px;
    transform: translateY(0px);
    padding: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.btn-quick-color-black{
    font-size: 11px;
    transform: translateY(0px);
    padding: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    background:#000000;
    border: 1px solid #ffffff;
}



.btn-quick-color-red{
    font-size: 11px;
    transform: translateY(0px);
    padding: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    background:#ff0000;
    border: 1px solid #ffffff;
    color: #ff0000;
}
.btn-quick-strike {
    font-size: 11px;
    transform: translateY(0px);
    padding: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    border: 1px solid #ffffff;
    color: #ff0000;
}
.item-locked .timeline-lock-icon i {
    color: #f88484;
    text-shadow: 1px 1px 4px #dbe244;
}
.timeline-unlock-expand  .timeline-unlock-icon i {
    color: #f88484;
    text-shadow: 1px 1px 4px #dbe244;
}
.timeline-unlock-expand.item-locked .timeline-unlock-icon i {
    color: #ffff00;
    text-shadow: none;
}
.btn-copy-positon {
    display: inline-block;
    cursor: pointer;
    transform: translateY(1px);
}
.btn-copy-positon:hover{
    color: #ffff00;
}
.btn-paste-positon {
    display: inline-block;
    cursor: pointer;
    transform: translateY(1px);
}
.btn-paste-positon:hover{
    color: #ffff00;
}
 


.no-spinners::-webkit-outer-spin-button,
  .no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .no-spinners {
    -moz-appearance: textfield;
  }