/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
html{ background-color: #444444; }
body {
    padding-top: 31px;
    background-color: #444444;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none; 
    overflow:hidden;
}
#canvasContainter{ overflow:auto; position: relative; }

#sd-loader {
  height: 4px;
  width: 100%;
  position: fixed;
  overflow: hidden;
  background-color: #ddd;
  top: 0px;
  z-index: 10001;
}
#sd-loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #ff7808;
  animation: loading 2s linear infinite;
} 
@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}
        
/*
 * Global add-ons
 */
#top_notification {
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height:0px;
}
#top_notification #top_notification_message {
    width: 300px; 
    margin: 0 auto;
    padding: 0px;
}

#top_notification #top_notification_message .alert {
    padding: 5px 10px;
    margin: 0px;
}

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
} 
/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}
.navbar, .navbar-brand { height:30px; /*padding: 0px 15px;*/ margin: 0px;min-height: 30px;}
.navbar-brand, .navbar-nav > li > a { padding-top: 5px; padding-bottom: 5px; line-height: 20px; }
.nav > li > a { padding:5px 12px; }
 
li.dropdown-submenu .dropdown-menu{ display: none!important; }
li.dropdown-submenu:hover .dropdown-menu{ display: block!important; }



.navbar-toggle { 
 padding:8px 10px;
 margin-top:0px; 
 margin-bottom:0px; 
}
@media (max-width:767px) {
.navbar-inverse .navbar-collapse{ background-color: #f5f5f5; }
.navbar-fixed-top .navbar-collapse {  max-width: 250px; }
}
.navbar-inverse {
    background-color: #d5d5d5;
    border-color: #999898;
} 
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover { 
    color: #444444;
    background-color: #999898;
  /*  color: #ffffff;
    background-color: #ff7808; */
    
}

.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a { 
    color: #333333; 
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    color: #333;
    background-color: #bfbfbf;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover, .nav > li > a:focus, .nav > li > a:hover { 
    color: #FFF; 
    background-color: #666;;
}
.dropdown-menu .divider { margin:3px 0px; background-color: #c2c2c2; }
.dropdown-menu .menubtn { padding:0px 5px;  }
.dropdown-menu > li > a { padding: 3px 20px 1px 10px; font-size: 1em; }
.dropdown-menu label {
  /*  width: 30px; 
    margin: 3px; 
    text-align: center; 
    padding: 5px; 
    background: #CCC; 
    border: solid 1px #999; 
    border-radius: 5px;*/
    cursor:pointer;
    display: block;
padding: 1px 14px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
margin-bottom:0!important;
}
.dropdown-menu label.active, .dropdown-menu label:hover{ background: #999898; color:#FFF; }


.dropdown-menu.profile{ width:260px;margin: 2px!important; border-radius: 5px;padding: 8px; }
.dropdown-menu.profile p { margin:10px 0px 0px; }
.dropdown-menu.profile a{ color:#444444; text-decoration:underline dotted; }
.dropdown-menu.profile a:hover{ color:#ff7808; text-decoration:none;}

.dropdown-menu.dpselect { height:150px; overflow-y:auto; }
.paltte_row{ width:100%; height: 25px; border: solid 1px #fff;}
.paltte_row  td{  border: solid 1px #fff !important; }
.paltte_row:hover , .paltte_row:hover td{ border: solid 1px #999 !important; cursor:pointer;}
.clrRepeatID {  position: relative;  color: rgba(255,255,255,0.8);  padding: 2px 5px; text-align: right; margin-top: -25px;}
.clrRepeatList:hover .clrRepeatID {  color: rgba(0,0,0,0.8);}
.hide-sp-dd .sp-dd{ display:none; }

.channel-sm { width: 23px;background: #ff7808;height: 23px;font-size: 11px;text-align: center;color: #FFF;border-radius: 15px;float: left; line-height: 23px;}

.uprofile-sm { width: 23px;background: #444444;height: 23px;font-size: 11px;text-align: center;color: #ff7808;border-radius: 15px;float: left; line-height: 23px;}
.uprofile-lg { width: 60px; background: #444444;height: 60px;font-size: 39px;text-align: center;color: #ff7808;border-radius: 30px;margin: 10px auto;}
.btn-submit-filled,
.btn-submit-filled:active,
.btn-submit-filled:focus {
    color: #fff;
    background: #857b7b;
    border: 2px solid #857b7b
}

.btn-submit-filled:hover {
    color: #fff;
    background: #ff7808;
    border: 2px solid #ff7808
}

.btn-default-filled,
.btn-default-filled:active,
.btn-default-filled:focus {
    color: #fff;
    background: #ff7808;
    border: 2px solid #ff7808
}
/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  width: 50px;
}
 
  .sidebar {
    position: fixed;
    top: 31px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block; 
    width: 50px;
    background-color: #d5d5d5;
    border-right: 1px solid #eee;
    padding: 0px;
  }
/* Sidebar navigation */
.nav-sidebar {

    margin: 2px 0px 2px;
    background: #F4F4F4;
    padding: 5px 0px;

}

.nav-sidebar > li{
  padding-left: 0px;
  text-align: center; 
}
li.cbg{ padding: 3px 0px; }
.quick-bar{  height:28px; padding: 0px;margin: 0px 0px 3px;min-height: 25px; background-color: #5d5d5d; width: 100%; border-bottom: solid 1px #868686;}
.animation-bar{  
    width: 100%; 
    background: #D5D5D5;
} 
.status-bar{
    width: 100%;
    position: fixed;
    height: 25px;
    top:auto!important;
    left: 0px!important;
    right: 0px!important;
    bottom: 0px!important;
    background: #b0b0b0;
    z-index: 1041;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.75);
}

.status-bar table td{ padding: 0px 6px; min-width:75px; height: 25px; }
.status-bar .animation-bar table td{ min-width:35px; height: 15px; }
 .quick-bar table td{ padding: 0px 3px;  height: 25px; }
.status-bar  .info-bar {position:absolute; bottom:0px;}
 



#layer_accordion{ 
    position: absolute; 
    top: 0px;  
    right:5px;
    width: 250px!important;  
    padding: 0px;  
    color: #333333; 
    font-weight: normal;
    height: auto!important;
    min-height: 35px;
    z-index: 100;
    font-size: 11px;
}
#object_accordion{ 
    position: absolute; 
    top: 0px;  
    right:260px;
    width: 250px!important;  
    padding: 0px;  
    color: #333333; 
    font-weight: normal;
    height: auto!important;
    min-height: 30px;
    z-index: 100;
    font-size: 11px;
}
.acc-body{ position:relative; width:100%; height:auto; float:left; padding-bottom: 5px;}
.dhandle{ cursor: move; }
.acc-dhandle{ width: 104%;height: 100%;text-align: center; position: absolute; left: -2%;cursor: move;right: -2%;  }
.layer-group{ 
    position: absolute; 
    top: 0px;  
    right:5px;
    width:260px; 
    margin: 5px 0px 0px; 
    padding:0px;  
    background: rgb(203, 203, 203);
    min-height: 35px;
    z-index:999;
}
.layer-group .tab-content {
    padding-bottom: 3px;
}
.layer-container .nav{ background: #F0F0F0; }
.layer-container .tab-content { padding: 5px 0px;}
/*#prop_area_div{  top: 0px; right:270px; }
#prop_layer_div{  top: 340px; right:270px; }
#prop_pattern_div { top: 0px; right:5px; }
#prop_image_div { top: 340px; right:5px; }
#prop_image_div1 { top: 410px; right:5px; }
#prop_info_div { top: 450px; right:5px; }


#prop_image_div.lmtop { top: 0px; right:5px; }
#prop_image_div1.lmtop { top: 70px; right:5px; }
#prop_info_div.lmtop { top: 110px; right:5px; } */


#prop_area_div{position:fixed;  top: 60px; right:270px; z-index:1020;}
#prop_layer_div{position:fixed;  top: 400px; right:270px; z-index:1020;}
#prop_pattern_div {position:fixed; top: 60px; right:5px; z-index:1020;}
#prop_image_div {position:fixed; top: 400px; right:5px; z-index:1020;}
#prop_image_div1 {position:fixed; top: 470px; right:5px; z-index:1020;}
#prop_info_div {position:fixed; top: 510px; right:5px; z-index:1020;}
#prop_chat_panel {position: fixed;top: 60px;right: 10px;z-index: 1021;width: 550px;height: 400px; padding:10px; border: solid 1px #999;}


#prop_image_div.lmtop {position:fixed; top: 60px; right:5px; z-index:1020;}
#prop_image_div1.lmtop {position:fixed; top: 130px; right:5px; z-index:1020;}
#prop_info_div.lmtop {position:fixed; top: 170px; right:5px; z-index:1020;}



.layer-group .tab-pane{ max-height:300px; overflow-y:auto; }

#object_properties .tab-content, #object_properties_1 .tab-content{ padding:5px 8px; }

fieldset.file-preset{ 
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
    box-shadow:  0px 0px 0px 0px #000;
} 

 legend.file-legend {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:60%;
        padding:0 10px;
        border-bottom:none;
        white-space: nowrap;
} 

.canvas-container{ z-index: 1; }
#center-point{ position: absolute; top:0px; left:0px;  z-index:0; }
.sp-replacer{ background: #9a9a9a!important; }
.btn-object {
  width: 35px;
  margin-bottom: 5px;
  padding:3px 0px;
  background: #9a9a9a;
  color:#333333;
  font-size:12px;
}  
.btn-object input, .btn-subobject input{
   display:none;
} 

.btn-object::before  { content:" "; position: absolute;  left: 0px; top:0px; width:100%; height:100%;   }
.btn-subobject, .btn-subobject, .btn-tsubobj, .btn-imgobj, .btn-gobj, .btn-repeatobj, .btn-spangle {
  padding: 2px 3px!important;
  width: 34px;
  margin-bottom: 5px;
  background-color:#ababab; 
  color:#333;
  font-size: 12px;
  line-height: 20px; 
  border: solid 1px #dad3d3;
}  
.btn-object.active, .btn-object:hover, .btn-object:active,
.btn-subobject.active, .btn-subobject:hover, .btn-subobject:active,
.btn-tsubobj.active, .btn-tsubobj:hover, .btn-tsubobj:active, 
.btn-imgobj.active, .btn-imgobj:hover, .btn-imgobj:active,
.open-gallery.active, .open-gallery:hover, .open-gallery:active,
.gallery_img.active, .gallery_img:hover, .gallery_img:active,
.btn-spangle.active, .btn-spangle:hover, .btn-spangle:active
{ background:#ef6e03!important; color: #FFF;}
.btn-tag { border: solid 1px #999;font-size: 10px;background: #ccc; margin:1px; float:left; }
.btn-tag .input-xs{ height:20px; margin-left:2px; width:35px; }
.btn-tag.canopt_gen{ background: #a6a6a6; }
.btn-tag.canopt_anm{ background: #727afb; }
.btn-tag.canopt_snd{ background: #e2ffa1; }
.btn-tag.canopt_evt{ background: #30d060; }
.btn-tag.canopt_mevt{ background: #ff71c8; }
.btn-tag.canopt_gto{ background: #ffac63; }
.btn-tag.canopt_sto{ background: #ff7c7c; }
.btn-tag.canopt_pto{ background: #35a0ff; }
table#can-anm-frame  td {padding: 3px 6px;}
 
.btnObj{
  color:#999;
  font-size:12px;
  position:relative;
  font-weight: normal;
  cursor: pointer;
  margin-bottom: 0px;
}
.btnObj span{
  position:relative; 
}
.btnObj input[type="radio"], .btnObj input[type="checkbox"], .btnObj input[type="button"], .btnObj input[type="file"] {
   cursor: pointer; 
  position:absolute; 
  z-index: 1;
  opacity: 0; 
  width: 0px;
  height: 0px;
}
.btnObj input[type="button"] { width:100%; height:100%;}

.btnObj input[type="radio"] + span, .btnObj input[type="checkbox"] + span, .btnObj input[type="button"] + span, .btnObj input[type="file"] + span{ 
  padding:2px;
  background:#ababab; 
  border: solid 1px #dad3d3;
  color:#333; 
  margin: 2px; 
  display: block;
  border-radius: 3px;
  min-width: 24px;
  text-align: center;
} 
.btnObj.img_lib{ display:block; float:left;}

.btnObj input[type="radio"] + div { 
  padding:2px;
  background:#FFF; 
  border: solid 1px #dad3d3;
  color:#333; 
  margin: 2px; 
  display: block;
  border-radius: 3px;
  width: 55px;
  height: 60px;
  text-align: center;
  overflow:hidden;
  text-overflow: ellipsis;
}
.btnObj input[type="radio"]:checked + div,   .btnObj:hover input[type="radio"] + div{
  background-color:#ef6e03; 
  color:#FFF; 
   cursor:default;
   box-shadow: none;
   cursor:pointer;
   
}
.btnObj.btnObjCir input[type="radio"] + span, .btnObj.btnObjCir input[type="checkbox"] + span, .btnObj.btnObjCir input[type="button"] + span{ 
 padding: 1px 4px;
border-radius: 5px; 
min-width: 10px;
font-size: 10px;
margin: 0px 2px 0px 0px;
}
.btnObj.sm input[type="radio"] + span, .btnObj.sm input[type="checkbox"] + span, .btnObj.sm input[type="button"] + span{
    padding: 0px; 
    min-width: 20px; 
    margin-top: 3px;
}
.btn-object.active, .btn-default.active, .btnObj input[type="radio"]:checked + span, .btnObj input[type="checkbox"]:checked + span, .btnObj input[type="button"]:checked + span, .btnObj.active input[type="button"] + span{
  background-color:#ef6e03; 
  color:#FFF; 
   cursor:default;
   box-shadow: none;
}
.btn-object:hover, .btn-default:hover, .btnObj input[type="radio"]:hover + span, .btnObj input[type="checkbox"]:hover + span, .btnObj input[type="button"]:hover + span, .btnObj input[type="file"]:hover + span {
    background-color:#ef6e03; 
  color:#fff;
  cursor:pointer;
  box-shadow: none;
}

.btnObj.btntoggle > input:checked + span > span, 
.btnObj.btntoggle > input + span > span + span { display:none; }
.btnObj.btntoggle > input + span > span, 
.btnObj.btntoggle > input:checked + span > span + span { display:block; }

/* For Firefox */
input[type='number'] {
    -moz-appearance:textfield;
}

/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*
 * Main content
 */ 
  .main { 
    padding-left: 23px;
    padding-top: 0px;
    width:auto;
    margin-left:2%;
    margin-right:2%;
    margin-bottom:25px;
    margin-top:33px;/* newly added 19.09.2025*/
  }
.menu-sc{ font-size:12px; color:#010780; position: absolute; right:10px;}
 


.btn-imgpad{ padding:6px 0px;}
.btn-gobj.wauto, .btn-repeatobj.wauto, .btn-spangle.wauto, .btn-shapeobj.wauto, .btn-tsobj.wauto{ min-width:37px; width:auto; }

.btn-shapeobj.btn-sm{ min-width: 10px; margin: 0px; font-size: 10px; padding: 0px !important; width: 26px; }


.btn-subobject img{ widows: 25px; height: 25px; }
.btn-danger {
    color: #fff;
    background-color: #ff0700;
    border-color: #e60c04;
}

.table-prop, .table-prop1{ margin: 0px 0px; border:none!important;}
.table-prop td{ padding: 2px!important; border:none!important;}
.table-prop1 td{ padding: 0px!important; border:none!important;}
.nav-prop > li > a,.nav-prop1 > li > a{ padding: 8px 3px; font-size: 11px; color: #454545; margin-right: 1px; }
.nav-prop > li.nav-sprop{ display:none; }
.anm-nav > li > a { line-height:0.5; font-size: 12px; padding: 5px 10px; }
.gallery_img, .gallery_stroke , .gallery_fill { 
    float:left; 
    border:solid 1px #CCCCCC; 
    cursor:pointer; 
    text-align:center;
    width: 60px;
    height: 65px;
    margin: 5px;
    padding: 5px;
    background: #FFF;
    text-overflow: ellipsis;
    overflow: hidden;
}
.gallery_img img, .gallery_stroke img, .gallery_fill img { width:35px; height:35px; }


.gallery_img.brush{ width:35px; height:35px;}
.gallery_img.brush img{ width:25px; height:25px;}


.open-gallery{ border: solid 1px #CCC; height: 100px; width:96%; margin:2%; text-align:center; overflow: hidden; font-size:11px; padding:15px 0px 0px;  }
.input-sm,.input-xs, select.input-sm{ padding:1px 0px 1px 5px; margin:0px; min-width:35px; height:25px; border:solid 1px #999;; border-radius:0px; }
.input-xs{ min-width: 25px; font-size:11px;}
.input-sm.in-num{ max-width: 70px;  }
.btn.accordian{ background: none; color:#333; position: absolute; right:0px; border:none; top:4px;}
.label-sm{ font-size:11px; } 
.btn.accordian .cname{ width:100%}
.btn.accordian .cname span{ float:left; }
.btn.accordian.collapsed i{ float:right; }

.btn.accordian .cname, .btn.accordian.collapsed .cicon { display:none;}
.btn.accordian.collapsed .cname, .btn.accordian .cicon { display:inline-block; float:left; line-height: 1; padding:5px; }




.calendar{ background:#FFFFFF url(../icon/calendar.png) no-repeat center right 10px ; width: 130px; cursor:pointer;}
.calendar.dt{width: 160px;}
#gradpick{ margin:0px 0px 20px;}
#gradPreview{height: 30px;margin: 5px 10px; border:solid 1px #ccc; background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==") }
.grp-handler .sp-dd{ display:none;}
.rptcls{ width:20px; min-width:20px; }
.tbl-bordered > tbody > tr > td, .tbl-bordered > tbody > tr > th, .tbl-bordered > tfoot > tr > td, .tbl-bordered > tfoot > tr > th, .tbl-bordered > thead > tr > td, .tbl-bordered > thead > tr > th {
    border: 1px solid #4b4b4b!important;
}
.css-gradient-editor-swatches {
    max-height: 150px;
    overflow: auto; 
    border: solid 1px #ccc;
    padding: 0px 5px;
}
.css-gradient-editor-swatches ul {
    width: auto;
    padding: 0;
    list-style-type: none;
}
.css-gradient-editor-swatches li {
    float: left;
    margin: 7px 9px 0 0;
}
.gradient-preset, .gradient-preset1 {
    width: 31px;
    height: 31px;
    display: inline-block;
    cursor: pointer;
    border-color: #ccc;
    position: relative;
    overflow: hidden;
    outline: none;
    padding:5px;
}
/*badge*/

.badge.bg-default {
    background: rgba(255,255,255,0);
}
.badge.bg-primary {
    background: #848282;
}

.badge.bg-success {
    background: #a9d86e;
}

.badge.bg-warning {
    background: #FCB322;
}

.badge.bg-important {
    background: #ff6c60;
}

.badge.bg-info {
    background: #41cac0;
}

.badge.bg-inverse {
    background: #2A3542;
}


.prop-list .bg-default{ color:#333; background: transparent; float:left;  }
.list-group-item.active > .badge{ background: transparent;  }
.list-group-item.prop-list{ padding:3px; text-align: right; height:30px; overflow:hidden;}
.list-group-item.gbobject{ background:#FF0000; }
.list-group-item label a, .list-group-item label span, .list-group-item label a:hover{ color: #000; border-bottom: dashed 1px #000; text-decoration:none; }
.list-group-item.active label a, .list-group-item.active label span, .list-group-item.active label a:hover{ color: #fff; border-bottom: dashed 1px #aee4ff; text-decoration:none; }
.list-group-item.gbobject{ background:#FFABAB; }
.list-group-item.ptobject{ background: #FFFBD8;}
.list-group-item.imobject{ background: #F0F0F0;}
.list-group-item.txobject{ background: #E7FBEA;}
.list-group-item.gbobject.active,
.list-group-item.ptobject.active,
.list-group-item.imobject.active,
.list-group-item.txobject.active{ background: #337ab7; }
.groupColor{ color:#FFABAB; }
.groupColor1{ color:#17CC5A; }
.groupColor2{ color:#FFEA24;  }

.prop-layer-name{ float: left; font-size: 12px; font-weight: normal; padding:   0px; text-align: left; line-height: 11px; overflow: hidden;white-space: nowrap;width: 60%;text-overflow: ellipsis;}
.layer-opt-group{ width: 40%; float:left; text-align: right; }
.layer-opt-group .layer-opt{  width: 20px; overflow: hidden; height: 18px; padding: 5px; cursor:pointer }
.layer-opt-group .layer-opt.flag{ width:auto; padding: 5px 0px 0px; font-size: 8px; }
.layer-opt-group .layer-opt.flag i {font-size:9px!important;}
.layer-opt-group .layer-opt i { line-height: 15px; font-size:12px;}
.layer-opt-group .layer-opt input{ display:none; }
.layer-opt-group .layer-opt > input:checked + i, 
.layer-opt-group .layer-opt > input + i + i { display:none; }
.layer-opt-group .layer-opt > input + i, 
.layer-opt-group .layer-opt > input:checked + i + i { display:block; }

.prop-layer-name small{ font-size:8px;  color:#999; }
.clip-obj{ display:none; }
#anm-frame tr td{ border: solid 1px #9f9f9f; }
#can-anm-frame th {  position: sticky; top: 0px; z-index: 100; padding: 0px 6px; }
.anm-title{ height:10px; font-size: 12px; background:#aaa; font-weight:normal; }
/*********Align Direction ******/
#aOrginCon{  margin: 0;  width:26px;  height:26px;  border: solid 1px #666; position:relative; float:left;}
.aOrType { position:absolute; }
.aOrType input{ display: none; }
.aOrType input + div { border:solid 1px #000; margin:0px; padding:2px; cursor:pointer;   }
.aOrType input:checked + div { background: #999898;  border-color: #999898;}
.aOrType.lt { left: -3px; top: -3px; }
.aOrType.ct { left:  9px; top: -3px; }
.aOrType.rt { right: -3px; top: -3px; }
.aOrType.lc { left: -3px; top: 9px; }
.aOrType.cc { left:  9px; top: 9px; }
.aOrType.rc { right: -3px; top: 9px; }
.aOrType.lb { left: -3px; top: 21px; }
.aOrType.cb { left:  9px; top: 21px; }
.aOrType.rb { right: -3px; top: 21px; }
.alert-success.success { background: #39a44a; color:#fff;}
.alert-success.success a{  color:#fff; text-decoration:underline}
/*********** Toggle **********/
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px; display:none;}
.toggle.btn{min-width:15px;min-height:10px; boder:0px;}
.toggle-on.btn{padding-right:24px}
.toggle-off.btn{padding-left:24px}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:20px;min-height:30px; border: 0px;}
.toggle-on.btn-xs{padding: 1px 2px !important;}
.toggle-off.btn-xs{padding: 1px 2px !important;}
.toggle-group, .btn.toggle-off, .btn.toggle-on, .btn.toggle-off:hover, .btn.toggle-on:hover, .toggle-group:hover, .btn.toggle-off.active, .btn.toggle-on.active, .toggle.btn, .toggle.btn:hover, toggle.btn.active{ border: 0px; background:transparent; box-shadow: none;}
.mrgtb3{ margin:3px 0px; }
.input-group-sm.p3 > .form-control, .input-group-sm.p3 > .input-group-addon{
    padding:2px 5px;
    height:25px;
}
.imgIReplacer{ float:left; width:100px; height:130px; overflow:hidden; margin:5px; padding:5px; border:solid 1px #CCC; cursor:move; font-size:11px; color:#666; text-align:center; }
.imageIRDrag{ width:120px; height:120px; overflow:hidden; margin:5px; padding:8px; border:dotted 3px #666; text-align: center;line-height: 35px;color: #ccc;}
 .grid-list-gallery .gal_img {

    float: left;
    width: 23%;
    margin: 1% 2% 0 0;
    height: 200px;
    overflow: hidden;
    border: solid 1px rgba(46,45,42,1);

}
.grid-list-gallery .gal_img img {
    width: 100%;
    height: 100%;
}
.grid-list-gallery .gal_img .gal_title {
    width: 100%;
    padding: 10px;
    color: #FFF;
    background-color: rgba(46,45,42,1);
    height: 70px;
    position: relative;
    margin-top: -50px;
    font-size: 25px;
}
.lg-image, .lg-outer .lg-thumb-item img{ background:#FFF;}
.lg-sub-html p {
    font-size: 35px!important;
}
.lg-backdrop { background: rgba(9, 2, 27, 0.9)!important; }
#cmdShowTimer{
    position: absolute;
    font-size: 80px;
    font-weight: bold;
    background: rgba(69, 68, 67, 0.7);
    padding: 0px 10px;
    color: #ffffff;
    line-height: 80px;
    top: 50px;
    right: 0px;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>a:after{
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#333;
  margin-top:5px;margin-right:-10px;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { 
    background-color: #d7d7d7;
} 
.dropdown-menu { background:#f3f3f3; min-width: 180px; }
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    background:#f3f3f3;
}
.opendivider{ border-top: solid 1px #CCC; padding:5px; font-weight:bold; clear:both; width:100%; }
.searchtext{ background:#f0f0f0; font-size:18px; padding:3px; border-radius: 0px; text-decoration: underline #cecece;}
#layerNameCon{ display:none; position:absolute;  z-index:10; left:0px; right:0px; bottom:0px; background:rgba(200,200,200,0.5); width:100%; height:100%;}
#layerNameEditable{ position:absolute;  z-index:10; background: rgba(221, 221, 221, 0.6);  width:100%; }
#templateContainer{ height: 500px; overflow:hidden; }
#templateContainer #tleftContainer{ width: 20%; float:left; height:100%; overflow-y:auto; }
#templateContainer #trightContainer{ width: 80%; float:left; height:100%; overflow-y:auto; }
#templateContainer .ttypeContainer{ padding:5px 15px; border-bottom: solid 1px #f4f4f4}
#templateContainer #tleftContainer .list-group-item{ padding: 0px; } 
#templateContainer #tleftContainer .list-group-item input,
#templateContainer .ttypeContainer label input{ display:none;}
#templateContainer #tleftContainer .list-group-item label{ 
  padding:0px;  
  margin: 0px; 
  display: block;  
} 
 #templateContainer #tleftContainer .list-group-item input[type="radio"]  + span,
#templateContainer .ttypeContainer label input[type="radio"]  + span { 
  padding:6px 5px;  
  margin: 0px; 
  display: block; 
  font-weight: normal;
  cursor:pointer;
} 
#templateContainer #tleftContainer .list-group-item input[type="radio"]:checked + span,
#templateContainer #tleftContainer .list-group-item label input[type="radio"] + span:hover,
#templateContainer .ttypeContainer label input[type="radio"]:checked + span,
#templateContainer .ttypeContainer label input[type="radio"] + span:hover
{ background :#CCC; }

#templateContainer .ttypeContainer label{ 
  padding:0px;  
  margin: 3px;  
  border:solid 1px #ccc;
} 
#commentContainer{ width:100%; height:300px; overflow-y:auto; }
#commentContainer .list-group-item { width:100%;  float:left; }
#commentContainer .list-group-item small { color: #999; }
#commentContainer .list-group-item-text{ font-size:13px; }
#qunit_text { color:#cccccc; text-transform: lowercase;font-size: 12px;line-height: 25px;}
.qtext { color:#bbbbbb; }
.cpointer{ cursor: pointer; } 
.pgGInput{ display:none; }

.template-gallery{ width: 270px; border:solid 1px #CCC; float:left; margin:10px; height: 180px; background-repeat:no-repeat !important; background-position: center center!important;  position: relative; background-size: 60% auto !important; }
.template-gallery.sm { width: 150px; height:135px; overflow:hidden; white-space:nowrap; margin: 6px;} 
.template-gallery.sm1 { width: 180px; height:135px; overflow:hidden; white-space:nowrap; margin: 6px;} 
.template-gallery.sm p, .template-gallery.sm1 p { line-height: 1em;margin: 0px;  }
.template-gallery.sm p.gtitle, .template-gallery.sm1 p.gtitle { font-size: 12px !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.template-gallery .template-group{  background-size:cover !important; background-position: center center!important;  position: absolute; }  

.template-gallery .template-label , .template-bottom-list .template-label , .pgGInput  + .template-label  input, .pgGInput  + .template-label .iactive, .pgGInput  + .template-label  i.close ,.pgGInput + .template-label label.in1 { display:none; } 
.pgGInput:checked  + .template-label  input { display:inline;  }
.pgGInput:checked  + .template-label .iactive , .pgGInput:checked + .template-label label.in1 { display: block;  }

 


.template-label .input-group .input-group-addon{ width:25px; font-size: 12px; padding: 5px 3px; }
.template-label .pgno{ width:55px; color:#000;}
.template-label .pggp{ width:55px; color:#000;}
.pgno::placeholder, .pggp::placeholder {
  color: #999;
  font-size: 0.9em; 
}

.template-title{ position: absolute; bottom:0px; height:30px; padding: 5px 10px; color:#FFF; background:rgba(0,0,0,0.6); width:100%; overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.template-gallery:hover .template-label   { display:block; padding-left:10%; padding-top:15%; position: absolute; background: rgba(0,0,0,0.5); width:100%; height:100%; cursor: pointer; }

.pgGInput:checked + .template-label  { display:block; padding-left:10%; padding-top:15%; position: absolute; background: rgba(0,0,0,0.7); width:100%; height:100%; cursor: pointer;   }

.template-gallery.sdGal:hover .template-label, .template-gallery.sdGal .pgGInput:checked + .template-label, .template-gallery.sdGal .template-title, .nav .sdGal{ background: rgba(255, 78, 22, 0.6);}

.template-gallery.caGal:hover .template-label, .template-gallery.caGal .pgGInput:checked + .template-label, .template-gallery.caGal .template-title, .nav .caGal{ background: rgba(238, 52, 209, 0.6);}

.template-gallery.liGal:hover .template-label, .template-gallery.liGal .pgGInput:checked + .template-label, .template-gallery.liGal .template-title, .nav .liGal{ background: rgba(2, 156, 164, 0.6);}


.template-gallery.imGal:hover .template-label, .template-gallery.imGal .pgGInput:checked + .template-label, .template-gallery.imGal .template-title, .nav .imGal{ background: rgba(7, 92, 11, 0.6);}

.template-gallery.vdGal:hover .template-label, .template-gallery.vdGal .pgGInput:checked + .template-label, .template-gallery.vdGal .template-title, .nav .vdGal{ background: rgba(101, 6, 6, 0.6);}

.template-gallery.emGal:hover .template-label, .template-gallery.emGal .pgGInput:checked + .template-label, .template-gallery.emGal .template-title, .nav .emGal{ background: rgba(4, 22, 125, 0.6);}

.template-gallery label { font-weight:400; }


.nav .sdGal a{ background: rgba(255, 78, 22, 1)!important; }
.nav .caGal a{ background: rgba(238, 52, 209, 1)!important; }
.nav .liGal a{ background: rgba(2, 156, 164, 1)!important; }
.nav .imGal a{ background: rgba(7, 92, 11, 1)!important; }
.nav .vdGal a{ background: rgba(101, 6, 6, 1)!important; }
.nav .emGal a{ background: rgba(4, 22, 125, 1)!important; } 
.nav .sdGal a, .nav .caGal a, .nav .liGal a, .nav .imGal a, .nav .vdGal a, .nav .emGal a{ color:#FFF; margin-right:0px; border-radius:0px;}


.nav .sdGal.active a, .nav .sdGal a:hover{ background: rgba(255, 78, 22, 0.4)!important; }
.nav .caGal.active a, .nav .caGal a:hover{ background: rgba(238, 52, 209, 0.4)!important; }
.nav .liGal.active a, .nav .liGal a:hover{ background: rgba(2, 156, 164, 0.4)!important; }
.nav .imGal.active a, .nav .imGal a:hover{ background: rgba(7, 92, 11, 0.4)!important; }
.nav .vdGal.active a, .nav .vdGal a:hover{ background: rgba(101, 6, 6, 0.4)!important; }
.nav .emGal.active a, .nav .emGal a:hover{ background: rgba(4, 22, 125,0.4)!important; }

.nav .sdGal.active a:after , .nav .caGal.active a:after , .nav .liGal.active a:after , .nav .imGal.active a:after , .nav .vdGal.active a:after , .nav .emGal.active a:after 
{ content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 10px solid transparent;  border-bottom: 0; margin-left: -10px; margin-bottom: -10px; }

.nav .sdGal.active a:after  {border-top-color: rgba(255, 78, 22, 0.8);} 
.nav .caGal.active a:after  {border-top-color: rgba(238, 52, 209, 0.8);} 
.nav .liGal.active a:after  {border-top-color: rgba(2, 156, 164, 0.8);} 
.nav .imGal.active a:after  {border-top-color: rgba(7, 92, 11, 0.8);} 
.nav .vdGal.active a:after  {border-top-color: rgba(101, 6, 6, 0.8);} 
.nav .emGal.active a:after  {border-top-color: rgba(4, 22, 125,0.8);}

.channel_con{ width:200px; height:200px; overflow:hidden; float:left; margin:5px; padding:8px; padding-left:15px; border-radius:8px; background:#F8F8F8;  border:solid 1px #CCC; box-shadow:  0px 0px 1px 1px rgba(203, 192, 192, 0.7); }
.channel_con:hover{background:#F0F0F0;}
.channel_head{height:140px; font-size:16px; overflow:hidden; width:100%; cursor:pointer; }
.channel_no{ font-size:30px; font-weight:bold; color:#999; padding:0px; margin:0px; }
.template-gallery  .template-label p { color:#FFF; font-size: 14px; margin: 0px; }/* padding: 5px 0px;*/
.template-gallery:hover .template-title, .pgGInput:checked + .template-label + .template-title { display:none; }
.pgGInput:checked  + .template-label  i.close {display:block; color:#FFF; position: absolute; right:5px; top:5px; opacity: 1;font-size: 15px;padding: 3px 0px; }
.template-label input{
    width: 50%;
    margin: 0 auto;
}
.template-label input.in1{ width:auto; } 
.template-page-list{ width:100%; height:50px; float:left; border-bottom: solid 1px #a7a3a3; border-left: solid 1px #a7a3a3;border-right: solid 1px #a7a3a3; padding:5px;  }
.template-page-list .page-img{ width:25%; float:left; height:100%; background-size:cover !important; background-position: center center!important; background-color: #FFF !important;}
.template-page-list .page-content{ width:75%; float:left; height:100%; padding: 0px 10px; color:#000; overflow: hidden; }
.template-page-list:hover, .template-page-list.active,
.template-page-list:hover .page-content,
.template-page-list.active .page-content{ background:#999898; color:#FFFFFF; }



.template-panel{ width: 22%; border:solid 1px #CCC; float:left; margin:10px; height: 180px;  position: relative; }
.template-panel .t_img{ width: 100%; height:75%;  background-repeat:no-repeat !important; background-position: center center!important;  }
.template-panel .t_body{ width: 100%; height:25%;  padding:0px 10px; background:#F0F0F0;    white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; font-size: 14px; } 
.template-panel .template-label   { display:none; }   
.template-panel:hover .template-label   {top:0px; left:0px; display:block; text-align: center; position: absolute; background: rgba(0,0,0,0.2); width:100%; height:100%; cursor: pointer; padding-top:40%; }



.force-select {  
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */   
}

.m-drag.modal {
    position: absolute;
    left: 15%;
    top: 5%;
    max-width:800px;
    width: 100%;
    height: 500px;
    z-index: 999;
    padding: 0px;
    margin: 0px; 
}
.m-drag.modal.in{ display:block; }
.modal.right{ left:auto; right:auto; }
.modal.left .modal-dialog,
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 40%;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
	padding: 15px 15px 30px;
}

/*Left*/
.modal.left.fade .modal-dialog{
	left: -320px;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
	        transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
	left: 0;
}
    
/*Right*/
.modal.right.fade .modal-dialog {
	right: -320px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
	        transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
	right: 0;
}
.text-left{ text-align:left!important;}
.text-right{ text-align:right!important;}
	
.btn-default.active.focus,.btn-default.active:hover {color: #fff;background-color: #ff7808;border-color: #8c8c8c; cursor: default;}
.nav-tabs{
    border-bottom: 1px solid #a68c8c!important;
background: #d5d5d5!important;
}
.spliter{border-bottom:thin solid #999;}

.gvremove{ font-size:12px; margin-left:-5px; color: #F66D48; float: left;cursor:pointer; }
.ghremove{ font-size:12px; margin-top:-5px; color: #F66D48; float: left;cursor:pointer; }
.btn-info.head{
    color: #fff;

background-color: #fa240a!important;
border-color: #fa240a!important;
font-size: 1em;
font-weight: bold;
padding: 5px;
margin-top: -10px;

}
.btn-info.head:hover{
   background-color: #dd220c!important;
border-color: #dd220c!important; 
    
}
.text-loading{
    font-size: 20px;
    padding-left: 15px;
    color: #F4903D;
}
.text-loading i{
    font-size: 40px; 
}
.noMargin{ margin:0px!important; } .noPadding{ padding:0px!important; }

/********** Footer Page List ************/
.page-list-footer{
    width: 100%;
    position: fixed;
    bottom: 20px;
    left: 0px;
    padding-top: 15px;  
    z-index:9999;
}
.page-list-container{
    width: 100%;
    overflow-x: auto;
    background: #666;
    height:0px;
    text-align: center;
}
.page-list-container ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    white-space: nowrap;
}
.page-list-container ul li {
    display: inline-block;
    margin: 5px;
    border: solid 1px #ccc;
    background: #FFF;
}
.page-list-footer #page-list-toggle {
    z-index: 100;
    background: #ef6e03;
    border: solid 1px #ef6e03;
    width: 40px;
    position: absolute;
    left: 49%;
    top: 0px;
    text-align: center;
    line-height: 13px;
    cursor: pointer;
    border-radius: 20px 20px 0 0;
}
.template-bottom-list {
    width: 80px; 
    height: 70px; 
    position:relative;
}
.template-bottom-list.active, .template-bottom-list:hover{ background: #ef6e03; }
.template-bottom-list .page-img {
    width: 100%; 
    height: 50px; 
    background-size: 100% 100%!important;
}
.template-bottom-list .page-content {
    text-align: center; 
    font-size: 11px;
    color: #666;
}
.template-bottom-list.active .page-content, .template-bottom-list:hover .page-content { color:#FFF;}
.template-bottom-list a, .template-bottom-list a:hover { text-decoration:none; }

.template-bottom-list:hover .template-label, .template-bottom-list.active .template-label   { display:block; overflow:hidden; padding-left:3%; padding-top:5%; position: absolute; background: rgba(0,0,0,0.5); width:100%; height:100%; cursor: pointer; }
.template-bottom-list .template-label p { padding:0px; margin:0px; color:#FFF; font-size:10px; text-align:left; white-space:nowrap; }


.btn-filter.collapsed .filter, .btn-filter .closed{ display:block; }
.btn-filter .filter, .btn-filter.collapsed .closed{ display:none; }
.border_left{
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000;
}
.border_top{
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000;
}
.border_right{
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000;
}
.border_bottom{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}
/***********Circle Slider **************/
#can-anm-frame input, #can-anm-frame select { background:rgba(222,222,222,0.8); }
#can-anm-frame input:focus, #can-anm-frame input:active, #can-anm-frame input:hover, 
#can-anm-frame select:focus , #can-anm-frame select:active , #can-anm-frame select:hover { background:rgba(255,2255,255,1); }
.circlecontainer {
    background:  #f4f4f4;
    border-color: #666666;
    border-style: solid;
    border-width: 2px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    cursor: default
}

#dotted {
    border-width: 2px;
    height: 50px;
    width: 50px;
    border-radius: 50%
}

#dial {
    height: 2px;
    margin: 24px 0 0 5px;
    display: block;
    width: 40px
}

#dial_0 {
    font-size: 9px;
    left: 44px;
    position: inherit;
    top: 21px
}

#dial_90 {
    font-size: 9px;
    left: 21px;
    position: inherit;
    top: 1px
}

#dial_180 {
    font-size: 9px;
    left: 1px;
    position: inherit;
    top: 21px
}

#dial_270 {
    font-size: 9px;
    left: 18px;
    position: inherit;
    top: 40px
}

#dial_l {
    background-color: red;
    width: 50%;
    height: 2px
}

#r_pt {
    height: 1px;
    margin-left: 25px;
    margin-top: 25px;
    width: 1px;
    position: absolute
}

#r_center {
    height: 1px;
    margin: 50px 0 0 50px;
    position: absolute;
    width: 1px
}