body       {
  font-family: Segoe UI, Arial;
	font-weight: normal;
	font-size: 1em;
	background-color: #fff;
	width: auto;
  padding: 0px;
  margin: 0px;
}

.cnBoxDark {
  background-color: #111;
  color: #f5f5f5;
  border-color: #111;
  transition: background-color 500ms ease-out;
}

.cnBoxRed {
  background-color: #660000;
  color: #f5f5f5;
  border-color: #111;
  transition: background-color 500ms ease-out;
}

.cnBoxLight {
  background-color: #f5f5f5;
  color: #111;
  border-color: #111;
  transition: background-color 500ms ease-out;
}

.cnBoxWarning {
  background-color: rgb(204,204,255);
  color: #111;
  border-color: #f5f5f5;
  padding: 0px; 
}

.cnBorder {
  border-style: solid;  
	border-width: 1px;
  border-radius: 0px;
}

.cnHoverRed:hover {
  background-color: #660000;
  color: #f5f5f5;
  transition: background-color 500ms ease-out;
}

.cnHoverLight:hover {
  background-color: #f5f5f5;
  color: #111;
}

.cnHoverDark:hover {
  background-color: #111;
  color: #f5f5f5;
}

.cnMenuItem {
  border-style: solid;  
	border-width: 1px;
  border-radius: 0px;
  padding: 2px 4px 2px 4px;
}
.cnMenuItem:hover {
  padding: 2px 4px 2px 4px;
}

.cnMenuItemBig {
  border-style: solid;  
	border-width: 1px;
  border-radius: 0px;
  padding: 5px 4px 5px 4px;
}
.cnMenuItemBig:hover {
  padding: 5px 4px 5px 4px;
}

.cnToolButton {
  border-style: solid;  
	border-width: 1px;
  border-radius: 0px;
  margin: 2px;
  padding: 2px 2px 2px 2px;
  border-color: #f5f5f5;
  display: inline-block;
}
.cnToolButton:hover {
  padding: 1px 1px 1px 1px;
	border-width: 2px;
}

.cnPointer {
  cursor: initial;
}
.cnHand {
  cursor: pointer; cursor: hand;
}
.cnToolButtonClose {
  background-color: #f5f5f5;
  color: #111;
}


.cnLink {
  border-style: none;  
  cursor: pointer; cursor: hand;
}

.cnHead {
  font-size: 2em;
  font-style: normal;
}

.cnText {
  font-size: 1em;
  font-style: normal;
}

.cnComment {
  font-size: 0.8em;
  font-style: italic;
}

.cnGroupH {
  padding-left: 1px;
}

.cnGroupH li {
  display: inline-block;
  margin-left: -1px;
  position: relative;
  text-decoration: none;
}
.cnGroupH li:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.cnGroupH li:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.cnGroupV {
  margin-bottom: 10px;
}

.cnGroupV li {
  display: block;
  margin-top: -1px;
  position: relative;
  text-decoration: none;
}
.cnGroupV li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.cnGroupV li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 3px;
}

.cnShortMemo {
  overflow: auto;
  display: inline-block;
  border-color: #ddd;
  border-width: thin;
  border-style: solid;
  border-radius: 4px;
}

.cnShortMemo div {
	padding: 0px;
	margin: 0px;
	border-radius: 0px;
}

.cnMenuOpen {
  display: table;
  width: 146px;
  float:left;
  padding: 0px;
  margin-top: 0px;
  margin-right: 5px;
	border-style: solid;
  border-width: 0px;
	background-color: #fff;
}

.cnMenuClose {
  display: none;
  width: 0px;
}

.cnForm {
}

.cnInput, .cnMemo, .cnAdvMemo, .cnShortMemo, .cnOption {
  font-family: Segoe UI, Arial;
	font-size: 1em;
	border-color: #ddd;
	border-width: thin;
	border-style: solid;
  border-radius: 4px;
  height:30px;
  color: #646464;
  padding: 2px 4px 2px 4px;
  margin: 2px 4px 2px 4px;
}

.cnSelect {
  font-family: Segoe UI, Arial;
	font-size: 1em;
	border-color: #ddd;
	border-width: thin;
	border-style: solid;
  border-radius: 4px;
  height: 36px;
  color: #646464;
  padding: 2px 4px 2px 4px;
  margin: 2px 4px 2px 4px;
}
.cnFrmRow {
  padding: 2px 10px;
}


.cnFrmRow .cnInput {
  width: 65%;
}

.cnFrmRow .cnSelect {
  width: 66%;
}

.cnFrmRow .cnMemo {
  width: 96%;
  height: 150px;
}

.cnFrmRow .cnAdvMemo {
  width: 96%;
}

.cnAdvMemo {
  width:100%;
  height: 180px;
  overflow: auto;
  border-color: #ddd;
  border-width: thin;
  border-style: solid;
  border-radius: 4px;
}

.cnAdvMemo div {
	padding: 0px;
	margin: 0px;
	border-radius: 0px;
}


.cnFrmRow .cnShortMemo {
  width: 65%;
  height: 150px;
}

.cnFrmRow .cnOption {
  width: 25px;
}

.cnFrmRow .cnLabel {
  width: 30%;
  display: inline-block;
}

.cnDropBox {
  width: auto;
  border-style: solid;  
	border-width: 1px;
  border-radius: 0px;
  padding: 2px 4px 2px 4px;
  text-align: center;
  vertical-align: middle;
  margin-top: -1px;
}

.cnDropBoxPadding {
  width: auto;
 	border-radius: 5px;
  padding: 8px;
  margin-bottom: 40px;
  border-style: Dotted;
	border-width: 3px;
	border-color: #ddd;
  text-align: center;
  vertical-align: middle;
}

.cnImageThumb {
  display: inline-block; 
  width: 150px;
 	border-radius: 2px;
  padding: 2px 8px 2px 8px;
  margin: 2px 4px 2px 4px;
  border-style: solid;
	border-width: 1px;
	background-color: #eee;
	border-color: #ddd;
}

.cnImageFull {
  display: block; 
  width: 600px;
 	border-radius: 2px;
  padding: 2px;
  margin: 2px 4px 2px 4px;
  border-style: solid;
	border-width: 1px;
	background-color: #eee;
	border-color: #ddd;
  object-fit: cover;
}
   
.cnHide {
  opacity: 0;
  visibility: hidden;
}

.cnShow {
  opacity: 1;
  visibility: visible;
}

.progress {
	position: fixed;
	top: 0;
	left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-style: none;
	z-index: 10000;
  overflow: visible;
  width: auto;

  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
  transition: opacity 3s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

.progress div {
	position: absolute;
	padding: 3px 50px 3px 30px;
	margin: 5px;
  right: 0px;
  bottom: 0px;
  font-size: 10pt;
	z-index: 10001;
  font-size: 1.3em;
}

//

.cnMainDesktop {
  display: block;
  margin-top: 25px;
  overflow: hidden;
}

.cnWorkingDesktop {
  display: block;
  margin: 5px;
  overflow: hidden;
}

.cnAppBox {
  display: inline-block; 
  vertical-align: top;
	background: #f5f5f5;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px; 
 	border-radius: 4px;
  margin: 4px;
  padding: 4px;
  width: 400px;
}

.cnInfoBox {
  display: inline-block; 
  vertical-align: top;
	border-color: #aa0000;
 	border-radius: 5px;
  background: linear-gradient(to bottom , #660000 , #aa0000); 
	color: #101010;
  border-style: solid;
	border-width: 2px; 
  margin: 4px;
  padding: 2px;
  width: 152px;
  min-height: 80px;
}

.cnInfoHead {
	color: #f5f5f5;
  margin: 0px;
  padding: 0px;
  width: auto;
	font-size : 1.2em;
	font-style : normal;
	font-weight : normal;
}

.cnInfoSpan {
	color: #f5f5f5;
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  width: auto;
	font-size : 1.2em;
	font-style : normal;
	font-weight : normal;
}

.cnInfoText {
  background: #f5f5f5; 
	color: #101010;
  margin: 0px;
  padding: 0px 2px 1px 2px;
  width: auto;
  height: auto;
	font-size : 0.6em;
	font-style : normal;
	font-weight : normal;
// 	border-radius: 0px;
}

.cnInfoLink {
	color: #f5f5f5;
  height: 20px;
  margin: 0px;
  padding: 4px;
  width: auto;
  text-align: right;
	font-size : 0.6em;
	font-style : normal;
	font-weight : normal;
  cursor: pointer; cursor: hand;
}

.cnPageControl {
}

.cnPageItem {
  display: inline-block;
  width: auto;
  cursor: hand;
  height: 24px;
 	border-radius: 2px;
  padding: 2px 8px 2px 8px;
  margin: 2px 4px 2px 4px;
  border-style: solid;
	border-width: 1px;
 	border-radius: 4px;
	border-color: #ddd;
  background: #fff;
}


.cnButton {
  display: inline-block;
  border-radius: 3px;
  margin: 2px;
  padding: 5px 15px 5px 15px;
}

.cnButton:hover, .cnButton:active{
  background-color: #660000;
}

.cnCloseButton {
  display: inline-block;
  border-radius: 3px;
  margin-left: 4px;
  padding: 0px;
  float: right;
}

.cnTaskIconClose {
  font-size: 23px;
  color: #ddd;
  border-style: none;
  transition: all 0.5s ease-out;
}
.cnTaskIconClose:Hover {
  color: #660000;
}

.cnTaskIconOpen {
  font-size: 23px;
  color: #660000;
  transition: all 0.5s ease-out;
}
.cnTaskIconOpen:Hover {
  color: #ddd;
}

.cnAction {
  padding: 0px 4px 0px 6px;
  border-radius: 5px;
  margin: 2px 5px 0px 10px;
  height: 19px;
  color: #660000;
  border-color: #660000;
  border-style: solid;
  border-width: thin;
  transition: all 0.5s ease-out;
  float: left;
}

.cnAction:hover {
  transform: rotate(90deg);
  color: #f5f5f5;
  background: #660000;
}

.cnTagsBox{
  margin: 3px 1px 3px 1px;
  padding: 0px;
  display: inline-block;
  border-style: none;
  border-width: 1px;
  border-color: #660000
}

.cnTagsItem {
  border-style: solid;
  border-width: 1px;
  border-color: #ddd;;
  color: #660000;
  padding: 5px 10px;
  margin-right: 3px;
  display: inline-block;
  border-radius: 2px 2px 10px 2px
}

Dialog {
	position: fixed;
	top: 0;
	left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  padding: 50px 50px  50px 50px ;
  border-style: none;
	z-index: 10000;
  overflow: auto;
 	background-color: rgba(111,111,111, .8);
    -webkit-transition: background-color 1500ms ease-out 1s;
    -moz-transition: background-color 1500ms ease-out 1s;
    -o-transition: background-color 1500ms ease-out 1s;
  transition: background-color 1500ms ease-out;
  width: auto;
//	opacity:0.3;
}

Dialog div {
	position: relative;
	padding: 10px;
	margin: 0px;
	border-radius: 10px;
  border-style: none;
  border-color: #000;
  border-width: 2px;
	z-index: 10001;
	opacity: 1;
  background: white;
}

.cnWhisper {
  padding:5px; 
  display:inline-block;
}
.cnWhisperResult {
  position: absolute;
  display: block;
  overflow: hidden;  
	border-color: #ddd;
	border-style: solid;
	border-width: 1px; 
 	border-radius: 2px;
  max-height: 300px;
  margin-left: 4px;
  margin-top: -3px;  
	background-color: #fff;
}
.cnWhisperItem {
  display: block;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px; 
  padding-bottom: 2px;
  margin-top: -1px;
}