element.clickable {
	transition: color 0.3s ease, text-shadow 0.3s ease;
	-webkit-transition: color 0.3s ease, text-shadow 0.3s ease;
	-moz-transition: color 0.3s ease, text-shadow 0.3s ease;
	font-weight:600;
	color:#4f9ee2;
	cursor:pointer !important;
}

element.clickable:hover {
	color: #2d8bdd;
	text-shadow: 0px 0px 1px #a3ccf1;
}

.clickableNoColor {
	font-weight:600;
	color:#404040;
	cursor:pointer !important;
}

.clickableNoColor:hover {
	color: #2d2d2d;
	text-shadow: 0px 0px 1px #797979;
}

.draggableDictionary {
	border-width: 1px !important;
	border-color: #b1ceed !important;
	border-radius: 5px;
	padding-right: 4px;
	padding-left: 4px;
	margin-right: 2px;
	margin-top: 2px;
	display: inline-block;
	border-style: solid solid solid solid !important;
}

.draggableDictionary:hover {
	background-color: #b1ceed;
	color: white;
	cursor: default;
}

.draggableDictionaryWizard {
	border-width: 1px !important;
	border-color: #b1ceed !important;
	border-radius: 5px;
	padding-right: 4px;
	padding-left: 4px;
	margin-right: 2px;
	margin-top: 2px;
	display: inline-block;
	border-style: solid solid solid solid !important;
	background-color: #b1ceed;
	color: white;
	animation-name: draggableDictionaryAnimation;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes draggableDictionaryAnimation {
    0%   {transform: translate(0,0%);	}
    25%   {transform: translate(0,0%);	}
    75%   {transform: translate(-220px,0%);	}
    100% {transform: translate(-220px,0%);	}
}

.draggableDictionaryWizard-header {
	text-align: center;
	font-size: 18px;
	color: white;
	background: #5fa2dd;
}

.draggableDictionaryWizard-grid {
	background-image: url("../images/emptyGrid.png");
	animation-name: draggableDictionaryWizard-gridAnimation;
	animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes draggableDictionaryWizard-gridAnimation {
    0%   {background-image: url("../images/emptyGrid.png")}
    38%   {background-image: url("../images/emptyGrid.png")}
    39%   {background-image: url("../images/emptyGridSearch.png")}
    100% {background-image: url("../images/emptyGridSearch.png")}
}

.draggableDictionaryWizard-component {
	text-align: right
}

element.separator {
	color:#4f9ee2;
	font-weight:600
}

.label-font {
	font-size:13px;
	font-style:italic;
	color:#4396e0;
}

.label-font-intense {
	font-size:13px;
	font-style:italic;
	color:#4396e0;
	font-weight:600;
}


.general-text-font {
	font-size:13px;
	min-height:0px; 
	margin-top:0px;
	margin-bottom:0px;
}

span.text-font {
	font-size:13px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

span.text-font-header-row {
	font-size:16px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	color: #000000de;
	margin-bottom: 4px;
	/*animation: fadeEffect 1s;*/ /* Fading effect takes 1 second */
}

span.text-font-row {
	font-size:14px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	color: #00000099;
	margin-bottom: 4px;
	/*animation: fadeEffect 1s;*/ /* Fading effect takes 1 second */
}

span.text-font-wrap {
	white-space:pre-wrap;
}

span.meta-tag {
	cursor: pointer;
}

div.document-title {
	text-align:left;
	font-weight:600;
	font-size:18px;
	margin-top:12px;
	margin-bottom:12px;
	word-wrap: break-word;
}

div.document-icon {
	margin-top:12px;
	margin-bottom:12px;
}

div.versions-info-tab {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
  	background-color: #FFFBE6;
  	border-width: 0px 0px 1px 0px;
  	border-color: #29302E12;
  	border-style: solid;
}

.versions-info-tab button {
  	background-color: inherit;
  	max-width: 100px;
  	min-width: 100px;
  	outline: none;
  	cursor: pointer;
  	padding: 6px 8px;
  	transition: 0.3s;
  	border-width: 0px 0px 2px 0px;
  	border-style: solid;
  	border-color: transparent;
  	color: #29302E82;
  	font-size: 14px;
  	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
 }

.versions-info-tab button:hover {
  	background-color: #35685920;
}

.versions-info-tab button.active {
  	border-color: #356859;
  	color: #356859;
}

div.versions-info-tabcontent {
  	display: none;
  	padding: 6px 12px;
  	background-color: #FFFBE6;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

div.versions-info-tabcontent.active {
  display: block;
}

div.versions-info-tabdata-text {
  	display:flex;
  	flex-direction:column;
  	flex:1;
  	width:calc(100% - 24px);
}

div.versions-info-tabdata-icon {
  	width:24px;
  	align-self: center;
  	/*animation: fadeEffect 1s;*/ /* Fading effect takes 1 second */
}

div.version-title {
	text-align:center;
	font-weight:400;
	font-style:italic;
	font-size:12px;
	margin-bottom:2px;
}

div.category-header {
	font-weight:500;
	font-size:14px;
	margin-bottom:4px;
	margin-top:2px;
	padding-left:4px;
	padding-top:4px;
	padding-bottom:4px;
	/*border:0px; 
	border-color:#5FA2DD;
	border-style:none none solid none;*/
	color: white;
	background: #71ace1;
	/*background: linear-gradient(to right, #71ace1, white);*/
}

span.favorite-icon {
	cursor:pointer;
	font-size:16px;
}

div.category-wrap{
	margin-left: 10px;
	margin-right:10px;
	margin-bottom:3px
}

div.data-row{
	margin-bottom:2px;
}

p.doc-description{
	text-align:center;
	font-weight:600;
	font-size:14px;
}

.info-panel-header .x-panel-header-docked-right{
	background-color: transparent;
}

.info-panel-header .x-tab {
	background-color: white;
	color: #9d9d9d;
}
 
.info-panel-header .x-tab-focus.x-tab-active.x-tab-default {
	background-color:  #5fa2dd; !important;
}


.info-panel-header .x-tab.x-tab-right {
	border-radius: 0px 8px 8px 0px;
}

.info-panel-header .x-tab.x-tab-left {
	border-radius: 8px 0px 0px 8px;
}

.info-panel-header .x-tab.x-tab-bottom {
	border-radius: 0px 0px 8px 8px;
}

.info-panel-header .x-tab.x-tab-active {
	font-weight: 500;
	background-color: #5fa2dd;
	color: white;
}

.info-panel-header .x-tab.x-tab-disabled {
	opacity: 0.6;
	background-color: white;
}

.info-panel-header .x-tab-icon-el {
	color: inherit !important;
}

.info-panel-header .x-tab-close-btn {
	color: inherit !important;
}

.tabpanel {
	background-color: #ECECEC;
}

/*Message Panel*/

span.message-subject{
	font-weight:700;
	font-size:16px;
}

span.message-sender{
	font-weight:400;
	font-size:15px;
}

span.message-basic-text-font{
	font-size:13px;
	font-weight:400;
}

div.message-body-separator {
	border:1px; 
	margin-top:2px;
	border-style:none none dashed none;
}

div.message-body {
	padding-top:10px;
}

.infoPanel-mask .x-mask-msg-text {
    background: transparent !important;
    padding: 5px !important;
}

.infoPanel-mask {
    background: transparent !important;
}

.info-panel-header .x-panel-header-default-horizontal.x-header-noborder {
	padding: 12px 16px 12px 16px !important;
}