.active{
    font-weight: bold;
    color:#AA4B25;
} 
.MainMenu ul{
	margin: 0;
    padding-left: 21px;
    padding-top: 0;
}
.MainMenu ul li{
	 border-right: 1px solid #F09D61;
    float: left;
    height: 28px;
    list-style: none outside none;
    padding-left: 17px;
    padding-right: 17px;
    padding-top: 12px;
}
.MainMenu ul li.active{
	 background-color: #984A13;
    background-image: -moz-linear-gradient(center top , #984A13, #DD7A35);
    box-shadow: 1px 1px 0 #985813 inset, -1px -1px 0 #985813 inset;
}
.MainMenu ul li a{
	 color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 -1px #985813;
}
#HomeMenu{
	background: url(../images/icons/home_icon.png) no-repeat left top;
	display: block;
	width: 30px;
	height: 30px;
}
div.messages{
	background-position: 8px 8px;
    background-repeat: no-repeat;
    border: 1px solid;
    margin: 6px 0;
    padding: 10px 10px 10px 50px;
}
div.messages ul {
    margin: 0 0 0 1em;
    padding: 0;
}
div.error {
     background-color: #FEF5F1;
    background-image: url("../images/icons/message-24-error.png");
    border: 1px solid #ED541D !important;
    color: #8C2E0B;
}
.CGreen{
    background-color: #9DF99D !important;
    color:#FFFFFF;
}
.CBlue{
    background-color: #A0A0F7 !important;
    color:#FFFFFF;
}
.CRed{
    background-color: #EF9494 !important;
    color:#FFFFFF;
}
.CYellow{
    background-color: #FFFF00 !important;
}
ul.TaskItem{
	padding-left: 2px;
	padding-right: 2px;
	clear: both;
    margin-top: 21px;
    padding-left: 2px;
    padding-right: 2px;
}
ul.TaskItem li{
	
	/*-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;*/
	
	border-bottom: 1px dotted #CCCCCC;
    list-style: none outside none;
    padding-bottom: 4px;
    padding-left: 5px;
    padding-top: 2px;
    background: #DBD0D0;
    margin-bottom: 4px;
	box-shadow: 1px 1px 1px #CCCCCC;
	padding-right: 19px;
}
ul.TaskItem li.Prio1{
   background-image: url(../images/icons/number_1.png) ;
    background-repeat: no-repeat;
    background-position: right 2px;
    padding-right: 19px;
	font-weight: bold;
}

#TaskFullView .TaskDetail.Prio1{
   background-image: url(../images/icons/number_1.png) ;
    background-repeat: no-repeat;
    background-position: 19px 14px;
    padding-right: 19px;
	font-weight: bold;
}
ul.TaskItem li.Prio2{
	 background-image: url(../images/icons/number_2.png) ;
	 background-repeat: no-repeat;
	 background-position: right 2px;
	 padding-right: 19px;
	 font-weight: bold;
}
#TaskFullView .TaskDetail.Prio2{
   background-image: url(../images/icons/number_2.png) ;
    background-repeat: no-repeat;
    background-position: 19px 14px;
    padding-right: 19px;
	font-weight: bold;
}
ul.TaskItem li.Prio3{
	 background-image: url(../images/icons/number_3.png) ;
	 background-repeat: no-repeat;
	 background-position: right 2px;
	 padding-right: 19px;
	 font-weight: bold;
	 
}
#TaskFullView .TaskDetail.Prio3{
   background-image: url(../images/icons/number_3.png) ;
    background-repeat: no-repeat;
    background-position: 19px 14px;
    padding-right: 19px;
	font-weight: bold;
}
ul.TaskItem li.Prio4{
	 background-image: url(../images/icons/number_4.png) ;
	 background-repeat: no-repeat;
	 background-position: right 2px;
	 padding-right: 19px;
	 font-weight: bold;
}
#TaskFullView .TaskDetail.Prio4{
   background-image: url(../images/icons/number_4.png) ;
    background-repeat: no-repeat;
    background-position: 19px 14px;
    padding-right: 19px;
	font-weight: bold;
}
ul.TaskItem li.Prio5{
	 background-image: url(../images/icons/number_5.png) ;
	 background-repeat: no-repeat;
	 background-position: right 2px;
	 padding-right: 19px;
	 font-weight: bold;
}
#TaskFullView .TaskDetail.Prio5{
   background-image: url(../images/icons/number_5.png) ;
    background-repeat: no-repeat;
    background-position: 19px 14px;
    padding-right: 19px;
	font-weight: bold;
}
ul.TaskItem li:FIRST-CHILD{
	border-top: 1px dotted #CCCCCC;
}
ul.TaskItem li a{
	display: block;
    text-decoration: none;
    width: 100%;
}
ul.TaskItem li.CYellow a:hover{
	color: #5E5E40 !important;
}
ul.TaskItem li a:hover{
    color: #5E5E40 !important;
}
ul.TaskItem li   span{
	color:#333333;
}

.CRed a, .CGreen a, .CBlue a, .CYellow a{
	color: #333333;
}
.TaskDetail{
	width: 500px;
	font-size: 12px;
	border: 5px solid #CCCCCC;
    font-size: 12px;
    width: 500px;
    padding: 20px;
}
#TaskFullView tr td{
	vertical-align: top;
}

#TaskFullView .TaskDetail{
	border: 1px solid #CCCCCC;
    border-left: 9px solid #CCCCCC;
    margin-bottom: 6px;
    padding-top: 8px;
    /*background-color:  #E4FFE4;*/
    background: url(../images/gradient.jpg) no-repeat left -135px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.TaskLabel,.TaskValue{
	font-size:12px;
    
}
.TaskLabel{
	font-weight: bold;
}
.TaskDetail table{
	width: 100%;
}
#TaskFullView  table{
	border-collapse: collapse;
}
.TaskDetail td{
	border-bottom: 1px dotted #CCCCCC;
	padding: 4px;
}
.BarFAction{
	text-align: center;
	padding-top: 14px;
}
span.TaskTime{
	/*background: none repeat scroll 0 0 #EDEDB1;*/
    padding: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.Hidden,.NotShow{
	display: none;
}

ul.TaskItem li a.Hidden{
	display: none;
}
.Red{
	color:#FF0000;
}
.Bold{
	font-weight: bold;
}
.ActionFull img{
	margin-left: 4px;
}
#TaskFullView{
	  
    border-collapse: collapse;
    margin-left: 7px;
    margin-right: 7px;
    width: 99%;
}
#TaskFullView tr{
}

#TaskFullView .TaskDetail tr td.TaskLabel{
	width: 90px;
	vertical-align: top; 
}
 
td.TaskDateTime{
	width: 200px;
    vertical-align: top;
    width: 130px;
	padding-top: 3px;
}
.DetailAction{
	text-align: right;
	margin-bottom: 10px;
}
.DetailAction.ActionFooter{
    margin-bottom: 0;
    margin-top: 4px;
}
.DetailAction img{
	margin-left: 5px;
}
.TaskCurrent{
	
}
.PopupDeleteTaskConfirm{
 
    border: 3px solid #CCCCCC;
    width: 400px;
}
.ConfirmMessage{
	font-style: italic;
    padding: 10px;
    text-align: center;
}
#UserMenu{
    float: right;
    margin-right: 8px;
    margin-top: 23px;
}
#UserMenu ul{
	display: inline-block;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 8px;
    padding-right: 8px;
}
#UserMenu ul li{
	float: left;
    list-style: none outside none;
    margin-left: 0;
    padding: 3px 7px;
    border-right: 1px dotted #CCCCCC; 
    font-weight: bold;
    text-shadow: 0 1px 1px #CCCCCC;
}
#UserMenu ul li:last-child{
	border-right: none;
}
#SubHello{
	font-style: italic;
	background: url(../images/icons/avatar.png) no-repeat left 3px;
	padding-left: 17px !important;
}
#SubLogout{
	background: url("../images/icons/logout.png") no-repeat scroll left 4px transparent;
    margin-left: 5px !important;
    padding-left: 17px !important;
}
#subMenuManagement {
    background: url("../images/icons/menu.png") no-repeat scroll left 4px rgba(0, 0, 0, 0);
    margin-left: 5px !important;
    padding-left: 19px !important;
}
.CalendarSubTask{
	 border-top: 1px solid #EFEFEF;
    margin-bottom: 2px;
    margin-top: 1px;
    padding-left: 6px;
    padding-top: 2px;
}
.CGreen .CalendarSubTask{
	color:#8E8E70;
}
.TaskDateTime span{
    padding-bottom: 2px;
    padding-left: 45px;
    padding-top: 2px;
}
.TaskDateTime .Timer{
    background: url("../images/icons/clock.png") no-repeat scroll 7px 5px #EDEDED;
    padding-bottom: 7px;
    padding-top: 4px;
   
}
.CommentITem{
	background: url("../images/icons/note_icon.png") no-repeat scroll 9px 14px #EFEFEF;
    border-bottom: 1px dotted #CCCCCC;
    border-left: 4px solid #CCCCCC;
    margin-bottom: 10px;
    margin-left: 11px;
    padding: 14px 13px 4px 31px;
    width: 490px;
}
.CommentITem p{
	margin-bottom: 1px;
    margin-top: 0;
}
.CommentSmallAction{
	text-align: right;
}
table#SmallCalendar{
	width: 250px;
}

div.day-number.ActiveDate{
    background: #FFFF00;
}
div.day-number.CurrentDate{
	background: #FF0000;
}

#SmallCalendar .day-number.ActiveDate a{
    color:#333333;
}
#SmallCalendar.day-number.CurrentDate a{
	color:#FFFFFF;
    font-weight: bold;
}


.TaskTitleDetail{
	font-size: 14px;
	color: #333333;
}
.TaskType{
	float: left;
    width: 12px;
    height: 12px;
    background: url(../images/icons/task.png) no-repeat left top;
}
.TaskTypeMeeting{
	background: url(../images/icons/meeting.png) no-repeat left top;
}
.TaskTypeFixBug{
    background: url(../images/icons/bug.png) no-repeat left top;
}
.TaskTypeLogwork{
    background: url(../images/icons/logwork.png) no-repeat left top;
}
.TaskTypeTask{
    background: url(../images/icons/task.png) no-repeat left top;
}
.MonthTitle{
    margin: auto;
    padding-top: 0;
}
.PreviousPage a,
.NextPage a{
	color:#999999;
	text-decoration: none;
    text-shadow: 0 1px 1px #AAAAAA;
}
.PreviousPage a:hover,
.NextPage a:hover{
	color:#F25415;
}
.PreviousPage img,
.NextPage img{
	vertical-align: middle;
}
#LeftPanel{
	border-right: 1px solid #CCCCCC;
    padding-right: 2px;
}
#CenterPanel{
	background: url(../images/caro.png) repeat-y left top;
	border-right: 1px solid #CCCCCC;
    margin-left: 0;
    min-width: 738px;
    padding-left: 0;
    padding-top: 0;
    vertical-align: top;
}
#RightPanel{
	

}
#BannerLeft img{
	width: 263px;
}
#BannerRight{
	text-align: center;
	padding-top: 2px;
}
#BannerRight img{}
.DateAction{
    background: none repeat scroll 0 0 #E0A276;
    height: 26px;
    margin-bottom: 8px;
    padding-top: 10px;
    text-align: right;
}
#SubChangeCate{
	background: url("../images/icons/refresh.png") no-repeat scroll left 4px transparent;
    margin-left: 9px !important;
    padding-left: 16px !important;
}
.CalendarStatus{
	
    font-size: 10px;
    font-style: italic;
    margin-right: -16px;
    text-align: right;
    margin-top: 3px;
}
.CalendarStatus span{
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
    background: #EFEFEF;
	padding-left: 6px;
    padding-right: 6px;
    color: #DEDEDE;
}
.StatusT{
	color: #FF0000;
    font-weight: bold;
    text-align: right;
}
.StatusT span{
	background: none repeat scroll 0 0 #FF0000;
    color: #FFFFFF;
    padding: 2px 3px;
    -webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	
}

.TimerLine{
	
}
.TimeSlot{
	font-style: italic;
    font-size: 11px;
}

#TableDateMain{
	width: 100%;
}
#DateNotes ul{
	padding-left: 7px;
}
#DateNotes ul li{
	border-bottom: 1px dotted #CCCCCC;
    list-style: none;
}

ul.TaskItem li.MiddleTime{
	background: url("../images/icons/sunbuilding.png") no-repeat scroll center -3px #FFFFFF;
   border: 1px solid #CCCCCC;
   border-top: none;
    padding: 1px;
    height: 22px;
}

ul.TaskItem li.AfternoonTime{
    background: url("../images/icons/gohome.png") no-repeat scroll center -3px #FFFFFF;
    padding: 1px;
     
	border: 1px solid #CCCCCC;
	border-top: none;
	height: 22px;
}

/*******************************NEW CSS HERE*****************/
.no-result{
	text-align: center;
	font-style: italic;
	color:#333333;
	margin-top: 32px;
}
#SubMenu{
	padding-right: 20px;
	min-height: 30px;
	clear: both;
}
#TopSubMenu{
	clear: both;
    min-height: 30px;
    padding-right: 5px;
}
#SubMenu ul,#TopSubMenu ul{
	float: right;
}
#SubMenu ul li,
#TopSubMenu ul li{
	list-style: none;
	float: left;
}
.Button{
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("../images/buttons.png") repeat-x scroll 0 0 #FFFFFF;
    border-color: #E4E4E4 #D2D2D2 #B4B4B4;
    border-image: none;
    border-radius: 15px 15px 15px 15px;
    border-style: solid;
    border-width: 1px;
    color: #3A3A3A;
    cursor: pointer;
    font-size: 0.929em;
    font-weight: normal;
    margin-bottom: 1em;
    margin-right: 0.6em;
    padding: 4px 17px;
    text-align: center;
	
}
.aButton{
	text-decoration: underline;
}
#TopicList li.TopicItem{
	border: 1px solid #CCCCCC;
    box-shadow: 1px 1px 1px #CCCCCC;
    float: left;
    list-style: none outside none;
    margin-right: 20px;
    padding: 10px;
    width: 200px;
	margin-bottom: 18px;
	min-height: 74px;
}
#TopicList h3{
	border-bottom: 1px dotted #CCCCCC;
    margin-bottom: 5px;
    margin-top: 0;
    padding-bottom: 4px;
}
.TopicDesc{
    font-style: italic;
    margin-bottom: 4px;
    margin-top: 2px;
}
.InlineMenu li{
	list-style: none;
	float: left;
	margin-left: 3px;
}
.HasInineMenu{
	position: relative;
}
.InlineMenu{
	position: absolute;
	top: 3px;
	right: 3px;
}
.hidden{
	display: none;
}
.not-found{
	
	 background: url("../images/icons/exclaimation.png") no-repeat scroll left top transparent;
    color: #AAAAAA;
    font-size: 17px;
    font-style: italic;
    margin: 100px auto auto;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-top: 6px;
    text-align: center;
    width: 432px;
}
.TopicTitle{
    font-size: 24px;
}
.Heading1{
	
    color: #555555;
    font-size: 16px;
    list-style: none outside none;
    margin-bottom: 6px;
    padding-left: 0px;
    padding-top: 0;
    position:relative;
}
.TopicIndex{
	margin-left: 1px;
    padding-left: 7px;
    margin-bottom: 100px;
}
.TopicSubIndex{
	margin-top: 7px;
    padding-left: 0;
}
.Heading2{
    font-size: 12px;
    list-style: none outside none;
    margin-left: 0;
    padding-left: 6px;
	/*background: url("../images/icons/Heading2.png") no-repeat left 5px;*/
}
.Heading1Title{
	padding: 4px 11px 4px 18px;
	display: block;
	background-image: url("../images/icons/bookmark.gif");
  background-position: 5px 9px;
  background-repeat: no-repeat;
  background-color: #EFEFEF;
  color: #333333;
}
.Heading2Title{
	color: #333333;
    padding: 4px 11px 4px 0;
    display: block;
}
.Heading3Title{
	padding:1px 4px 1px 0;
	display: block;
	margin-right: 4px;
}
.Heading4Title {
    display: block;
    margin-right: 4px;
    padding: 1px 4px 1px 0;
}
.Heading1Title:hover,
.Heading2Title:hover,
.Heading3Title:hover,
.Heading4Title:hover{
	background-color: #EFEFEF;
}
#topicMainFrame{
	width: 98%;
	 min-height: 550px;
	 border:none;
}
#pageBody{
	width: 70%;
}
.PageIndex{
	margin-bottom: 9px;
    margin-left: 16px;
    margin-top: 1px;
    padding-left: 8px;
}
.PageIndex.PageIndexP{
	 margin-left: 0;
    padding-left: 24px;
}
.PageIndex.PageIndexP li{
	list-style: decimal-leading-zero;
    padding-left: 0;
    font-size: 14px;
}
.PageIndex.PageIndexP li ul{
    padding-left: 27px;
}
.PageIndex.PageIndexP li ul li {
  list-style: disc outside none;
}
.PageIndex li{
	font-size: 14px;
    list-style: decimal outside none;
    padding-bottom: 2px;
}
.PageTitle{
	border-bottom: 1px dotted #CCCCCC;
    font-size: 24px;
    margin-bottom: 1px;
}
.PageContent{
	color: #494949;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 20px;
	/*min-height: 300px;*/
    padding-bottom: 20px;
    padding-top: 10px;
}
.Submitted {
    color: #999999;
    font-size: 9px;
    font-style: italic;
    margin-bottom: 11px;
    margin-top: 3px;
    margin-bottom: 26px;
}
.DetailTopAction {
    float: right;
    /* margin-top: -63px; */
    padding-right: 10px;
    box-sizing: border-box;
    height: 29px;
    margin-top: 8px;
}
.DetailBottomAction {
  border-top: 1px dotted #CCCCCC;
  clear: both;
  margin-right: 20px;
  margin-top: 15px;
  padding-top: 11px;
  text-align: right;
  margin-bottom: 20px;
}
.RightCancelButton{
	float: right;
    margin-left: 20px;
    margin-right: 6px;
    padding-top: 6px;
}
.FirstTopicPage{
	
	margin: auto;
	text-align: center;
	padding-top: 10px;
}
.FirstTopicName{
	font-size: 30px;
}
.FirstTopicDesc{
	font-size: 15px;
	font-style: italic;
}
.HasSubFolder{
	background-image: url(../images/icons/minus.png) ;
	background-position: 4px 6px;
    background-repeat: no-repeat;
    margin-right: 4px;
    padding-left: 20px;
    font-weight: bold;
}
.NoSubFolder{
	background-image: url(../images/icons/info12.png) ;
	background-position: 4px 6px;
    background-repeat: no-repeat;
    margin-right: 4px;
    padding-left: 20px;
    font-weight: bold;
}
.HasSubFolder.Collapsed{
	background-image: url(../images/icons/plus.png) ;
}
.NoHeading{
	text-align: center;
	font-style: italic;
	margin-top: 20px;;
}
.GroupTopic{
	margin-top: 20px;
}
.GroupName{
	background: none repeat scroll 0 0 #EFEFEF;
    border: 1px solid #CCCCCC;
    font-size: 18px;
    font-weight: bold;
    margin-left: 22px;
    margin-right: 22px;
    padding: 11px
}
#MainLoading{
  height: 400px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999999;
  padding-top: 250px;
  opacity: 0.8;
  display:none;
  
}
#InnerLoading{
  background: url("../images/loading.gif") no-repeat scroll center center transparent;
  height: 60px;
  width: 60px;
  margin: auto;
}
.HeadingMarkOld{
  text-decoration: line-through;
  color: #333333 !important;
}
.TableGreen {
    border: 3px solid #69BEE5;
    border-collapse: collapse;
    margin: auto;
    width: 98%;
}
.TableGreen tr td {
    border-bottom: 1px solid #69BEE5;
    border-right: 1px solid #CCCCCC;
    padding: 4px;
}
.TableGreen thead td {
    background: none repeat scroll 0 0 #69BEE5;
    color: #FFFFFF;
    font-weight: bold;
    padding: 8px;
}
.SubHeader {
    margin: auto;
    padding: 20px;
    text-align: right;
    width: 98%;
}
.LeftSubMenu {
  font-size: 10px;
  height: 18px;
  padding-right: 8px;
  padding-top: 5px;
  position: absolute;
  right: 0;
  text-align: right;
  top: 2px;
}
.LeftSubMenu a{
  -webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
  background:#CCCCCC;
  padding: 2px 3px;
}
#SearchBox {
  float: right;
  margin-left: 22px;
  margin-right: 22px;
  margin-top: 10px;
  padding: 11px;
  width: 434px;
}
#keywork {
  margin-right: 3px;
  padding: 5px;
  width: 190px;
}
#SearchBox label {
  padding-top: 2px;
}
#ContentLock {
  background: url("../images/icons/LockIcon.png") no-repeat scroll left top rgba(0, 0, 0, 0);
  display: block;
  float: right;
  height: 17px;
  margin-right: 8px;
  margin-top: 0px;
  width: 17px;
}
#ContentLock.Unlock {
  background: url("../images/icons/UnlockIncon.png") no-repeat scroll left top rgba(0, 0, 0, 0);
}
.cke_editable_inline{
    border: 1px solid #CCCCCC;
}
.BarViewFAction {
  background: none repeat scroll 0 0 #EFEFEF;
  border-bottom: 5px solid #CCCCCC;
  border-top: 5px solid #CCCCCC;
  bottom: 0;
  box-shadow: 1px 1px 1px #CCCCCC;
  padding-bottom: 13px;
  padding-top: 13px;
  text-align: center;
  width: 98%;
  margin-bottom: 20px;
}
.PageEmbeded{
    width: 99%;
}
.FormItemEmbeded label{
    text-align: left;
}
#GroupId-drupal {
  background: rgba(0, 0, 0, 0) url("../images/icons/topic/drupal.png") no-repeat scroll 7px 7px;
  padding-left: 47px;
}
#GroupId-laravel{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/laravel.png") no-repeat scroll 7px 7px;
  padding-left: 47px;
}
#GroupId-wordpress{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/wordpress.png") no-repeat scroll 7px 7px;
  padding-left: 47px;
}
#GroupId-research{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/window.png") no-repeat scroll 7px 7px;
    padding-left: 47px;
}
#GroupId-tips{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/book.png") no-repeat scroll 7px 7px;
    padding-left: 47px;
}
#GroupId-testing{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/testing.png") no-repeat scroll 7px 7px;
    padding-left: 47px;
}
#GroupId-api{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/suitcase.png") no-repeat scroll 7px 7px;
    padding-left: 47px;
}
#GroupId-code{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/code.png") no-repeat scroll 7px 7px;
    padding-left: 47px;
}
#GroupId-animation{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/animation.png") no-repeat scroll 7px 7px;
    padding-left: 47px;
}
#GroupId-guru{
    background: rgba(0, 0, 0, 0) url("../images/icons/topic/guru.png") no-repeat scroll 7px 7px;
    padding-left: 47px;
}
.topic-icon{
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: 0 1px;
    /*background-image:  url("../images/icons/topic/common.png") ;*/
}
.TopicTitleIcon {
  background-position: 4px 7px;
  background-repeat: no-repeat;
  padding-left: 9px;
  font-weight: bold;
}
#Topic-15 {
    background-image:  url("../images/icons/topic/angularjs.png") ;
    
}
#Topic-47{
    background-image:  url("../images/icons/topic/moodle.png") ;
}
#Topic-13{
    background-image:  url("../images/icons/topic/mysql.png") ;
}
#Topic-35{
    background-image:  url("../images/icons/topic/git.png") ;
}
#Topic-11{
    background-image:  url("../images/icons/topic/jquery.png") ;
}
#Topic-10{
    background-image:  url("../images/icons/topic/symfony.gif") ;
}
#Topic-37,#Topic-36,#Topic-21,#Topic-39,#Topic-36,#Topic-42,#Topic-18{
    background-image:  url("../images/icons/topic/drupallogo.png") ;
}
#Topic-31{
    background-image:  url("../images/icons/topic/bower.png") ;
}
#Topic-26{
    background-image:  url("../images/icons/topic/pattern.png") ;
}
#Topic-28{
    background-image:  url("../images/icons/topic/vagrant.png") ;
}
#Topic-43{
    background-image:  url("../images/icons/topic/octobercms.png") ;
}
#Topic-33{
    background-image:  url("../images/icons/topic/zend.png") ;
}
#Topic-17{
    background-image:  url("../images/icons/topic/boostrapjs.png") ;
}
#Topic-25{
    background-image:  url("../images/icons/topic/codeception.png") ;
}
#Topic-46{
    background-image:  url("../images/icons/topic/greensock.png") ;
}
#Topic-29{
    background-image:  url("../images/icons/topic/composer.png") ;
}
#Topic-14{
    background-image:  url("../images/icons/topic/css.png") ;
}
#Topic-22{
    background-image:  url("../images/icons/topic/responsive.png") ;
}
#Topic-16{
    background-image:  url("../images/icons/topic/youtube.png") ;
}
#Topic-20{
    background-image:  url("../images/icons/topic/codelogo.png") ;
}
#Topic-30{
    background-image:  url("../images/icons/topic/install.png") ;
}
#Topic-40{
    background-image:  url("../images/icons/topic/phpunit.png") ;
}
#Topic-44,#Topic-45{
    background-image:  url("../images/icons/topic/wordpresslogo.png") ;
}
#Topic-9,#Topic-34,#Topic-38,#Topic-19{
    background-image:  url("../images/icons/topic/laravel16.png") ;
}
#Topic-48{
    background-image:  url("../images/icons/topic/drush.png") ;
}
#Topic-24,#Topic-27,#Topic-23,#Topic-41{
    background-image:  url("../images/icons/topic/php16.png") ;
}
#Topic-12{
    background-image:  url("../images/icons/topic/linux16.png") ;
}
.FileNameStyle{
    background: rgba(0, 0, 0, 0) url("../images/icons/FileInline.png") no-repeat scroll left 1px;
    padding-left: 13px;
}
.ShortFormatCode{
    background-color: #eeeeee;
    font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
    margin-bottom: 10px;
    margin-right: 0;
    max-height: 600px;
    overflow: auto;
    padding: 5px 5px 5px 5px;
    width: auto;
}
.CodeFormatWith2Column{
    width:100%;
}
.CodeFormat2Column{
    width: 70%;
    background: #eeeeee;
}
.CodeCommentColumn{
    width: 30%;
    background: #EFEFEF;
}
.FormatCopyRight{
    background-color: #CAF0F9;
    font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
    margin-bottom: 10px;
    margin-right: 0;
    max-height: 600px;
    overflow: auto;
    padding: 5px 5px 5px 5px;
    width: auto;
}
#search-pages-bar{
   border-bottom: 1px dotted #cccccc;
    margin-bottom: 15px;
    padding-bottom: 6px;
}
.PageContent img{
    max-width: 99%;
    height: auto;
}
.ContentInnerItem-PageDetail173 img {
    max-width: 60% !important;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ck-editor__editable{
    min-height: 400px;
}
#Logo img {
    width: 100px;
    margin-top: 10px;
    height: 52px;
    width: auto;
}
#LoginForm img{
    width: 190px;
}
.off .sort-is-on{
    display: none;
}
#on-off-page-sort .sort-is-off{
    display: none;
}
#on-off-page-sort.off .sort-is-off{
    display: inline;
}
.clearfix{
    clear: both;
}
.clearfix:before,.clearfix:after{
    content:'';
    display: table;
    clear: both;
}
.PageStatusok{
    
}
code {
    background: #cccccc;
    padding: 3px;
    margin-top: 10px;
    padding-right: 10px !important;
    padding-top: 3px;
    padding-bottom: 5px;
    box-sizing: border-box;
    padding-left: 3px;
    margin-left: 0px;
    position: relative;
}
pre code {
    background: #cccccc;
    /* padding: 3px; */
    margin-top: 10px;
    padding-right: 10px !important;
    padding-top: 2px;
    padding-bottom: 2px;
    box-sizing: border-box;
    padding-left: 0px;
    margin-left: 0px;
    position: relative;
}
pre code:before {
    /*content: '';*/
    display: block;
    position: absolute;
    background: #cccccc;
    width: 10px;
    height: 100%;
    left: -10px;
    top: 0px;
}
figure.image {
    margin-left: 0;
}

.imageline-item{
    border-bottom: 1px solid #cccccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.imageline-item img {
    /*box-shadow: 3px 4px 11px #ef9494;*/
}
#image-preview-dialog {
    position: fixed !important;
    z-index: 9999999;
    top: 100px;
    width: 800px;
    height: 400px;
    left: calc((100% - 800px) / 2);
    border: 4px solid #488cbe;
    box-shadow: 3px 3px 4px #cb6a6a;
    display: none;
    background: #ffffff;
    min-height: 100px;
    min-width: 100px;
    border-radius: 5px;
}
.image-preview-dialog-body img {
    max-width: 100%;
    max-height: calc(100% - 30px);
    width: auto;
    height: auto;
}
.image-preview-dialog-head {
    background: #518bb5;
    text-align: right;
    height: 20px;
    box-shadow: 0px 2px 2px #cccccc;
}
.close-image-preview {
    width: 12px;
    height: 12px;
    float: right;
    margin-right: 6px;
    border: 1px solid #ffffff;
    text-align: center;
    line-height: 9px;
    margin-top: 2px;
    color: #ffffff;
    cursor: pointer;
}
.image-preview-dialog-inner{
    height: 100%;
    width: 100%;
}
.image-preview-action {
    text-align: center;
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    border-top: 1px dotted #cccccc;
    padding-top: 3px;
    width: 90px;
    left: calc(50% - 45px);
}
.image-preview-btn {
    display: inline-block;
    width: 20px;
    height: 26px;
    font-size: 19px;
    text-align: center;
    cursor: pointer;
}
.image-preview-dialog-body{
    width: 100%;
    height: calc(100% - 53px);
    text-align: center;
    padding-top: 6px;
}

.quizz-checkbox.green:after{
    border: 4px solid #00ff00;
    content: '';
    width: 40px;
    display: block;
    position: absolute;
   bottom: -6px;
}
.quizz-checkbox.red:after{
    border: 4px solid #ff0000;
    content: '';
    width: 40px;
    display: block;
    position: absolute;
    bottom: -6px;
}
.quizz-checkbox.correct-option:after{
    border: 4px solid #ffff00;
    content: '';
    width: 40px;
    display: block;
    position: absolute;
    bottom: -6px;
}
.quick-content-form {
    border-top: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.quick-buttons {
    margin-bottom: 5px;
}
.quick-button {
    
}

.quick-form {
    margin-bottom: 10px;
    margin-top: 11px;
}
#quic-data-p, #quic-data-code{
    width: 100%;
    min-height: 65px;
}
#quic-data-p {
    padding-top: 7px;
    padding-left: 11px;
    max-width: 95%;
}
.quic-form-text{
    width: 100%;
    padding: 10px !important;
}
.quick-button.activebtn {
    background: #e64c4c;
    color: #ffffff;
    box-shadow: none;
}

.PageContent-393 code {
    background: none !important;
}

.PageContent-393 pre code:before {
    width: 5px;
}
.current-edit {
    background:#e5e25e8f;
}

#quic-data-h2 {
    font-size: 20px;
}
#quic-data-h3 {
    font-size: 18px;
}

#quic-data-h4 {
    font-size: 16px;
}

code[class*="language-"], pre[class*="language-"] {
    font-size: 14px !important;
}

.PageContent .context-menu-active {
    background: #dbfff1;
}
 

.save-html-action {
    text-align: right;
    margin-bottom: 15px;
    width: 100px;
    float: right;
    margin-right: 42px;
    margin-top: 7px;
}

.special-chars {
    display: inline-block;
    margin-left: 20px;
}
.page-item-anchor {
    background: #dbfff1;
}
.quick-condition {
    border-bottom: 1px dotted #cccccc;
    margin-bottom: 12px;
}

.line-break img{
    width: 100%;
    height: 7px;
}

.inject-p a {
    text-decoration: underline;
    color: #138ff9;
}
#drop-file-content-area.active {
    background: #ffffd3;
}


.toolbar label {
    width: unset;
}
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
    .hint { color: #666; font-size: 13px; }

    /* Bạn có thể bỏ grid demo này; nó chỉ để minh hoạ nhiều kích thước khác nhau */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
    }

    /* Dùng class khác để tránh đụng với CSS có sẵn của site */
    .draw-stage {
      position: relative;
      display: inline-block;  /* để ôm theo img */
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      background: #f7f7f7;
    }

    /* KHÔNG ép object-fit hay aspect-ratio – để site tự quyết định width */
    .draw-stage > img.page-content-image {
      display: block;
      width: 100%;
      height: auto;
      user-select: none;
      -webkit-user-drag: none;
    }

    .draw-stage > canvas.draw-overlay {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;  /* bật khi Enable */
    }