:root {
    /* --- FONTS --- */
    --dn-font-family-primary: 'Cairo', 'Segoe UI', Arial, sans-serif;
    --dn-font-weight-normal: 400;
    --dn-font-weight-medium: 500;
    --dn-font-weight-semibold: 600;
    --dn-font-weight-bold: 700;

    --dn-font-size-xxs: 10px; /* For really small text like .dn-notification-time, .dn-item-status */
    --dn-font-size-xs: 11px;  /* For .dn-sub-title-sidebar, .dn-user-role, .dn-nav-badge */
    --dn-font-size-sm: 12px;  /* For .dn-stat-trend, .dn-item-description, .dn-item-meta, .dn-item-date */
    --dn-font-size-md: 13px;  /* For .dn-btn, .dn-stat-card-dropdown .item-title, .dn-notification-title, .dn-service-grid-item .dn-item-name */
    --dn-font-size-base: 14px;/* For .dn-search-input, .dn-nav-link, .dn-stat-label, .dn-breadcrumb, .dn-view-all-btn, .dn-item-name (lists) */
    --dn-font-size-lg: 16px;  /* For .dn-main-title-sidebar, .dn-user-name */
    --dn-font-size-xl: 18px;  /* For .dn-section-title */
    --dn-font-size-xxl: 28px; /* For .dn-page-title, .dn-stat-number */
}

html.dark-theme {
	--html-background-color: #232427;
  --primary-color:  #232427;
	--secondary-color: #F36E37;
  --nav-background:rgba(255, 255, 255, 0.031);
  --nav-trigger-background : #fff;
  --nav-main-list-background: #111;
  --nav-main-list-item-hover: #6695d3;
  --nav-main-list-item-title: #fff;   
  --titles-text-color:#9f9f9f;
  --input-text-background: #4e5152;
  --input-text-font-color: #2e3033;
  --input-text-label: #9f9f9f;
  --button-background-color: #F36E37;
  --public-card-background-2: rgba(255, 255, 255, 0.031);
  --service-description-label: #c9c071;
  --service-description-text : white;
  --public-card-background: #2a2b2f;
  --public-card-description-button : #1467aa;
  --public-card-service-button : #0b5339;
  --public-card-service-button-font : white;
  --public-card-index-color: rgba(255, 255, 255, 0.1);
  --public-card-title-color:white;
  --well-background-color:#2a2b2f;
  --well-border-color:#696868;
  --affix-background:#111;
  --datatable-row-font-color:  #F36E37;
  --breadcrumb-label-color:white;
  --service-description-plate-background:rgba(255, 255, 255, 0.031);
  --scrollbar-color: #696868;

  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --gradient-rtl: linear-gradient(to bottom left, var(--gray-12),var(--gray-11),  var(--gray-10),var(--gray-9), var(--gray-8), var(--gray-7), var(--gray-6),var(--gray-5));
  --gradient-ltr: linear-gradient(to bottom right, var(--gray-12),var(--gray-11),  var(--gray-10),var(--gray-9), var(--gray-8), var(--gray-7), var(--gray-6),var(--gray-5));  
}


  html.light-theme  {
  --html-background-color: #e9edf0;
  --primary-color:  #fff;
	--secondary-color: #F36E37;
  --nav-background: white;
  /*rgba(131, 131, 131, 0.35);*/
  --nav-trigger-background : #9f9f9f;
  --nav-main-list-background: #9f9f9f;
  --nav-main-list-item-hover: #6695d3;
  --nav-main-list-item-title:  #232427;   
  --titles-text-color:#9f9f9f;
  --input-text-background: #fff;
  --input-text-font-color: #2e3033;
  --input-text-label: #9f9f9f;
  --button-background-color: #F36E37;
  --service-description-label: #5c97c7;
  --service-description-text : #232427;
  --public-card-background: #d9dcdd;
  --public-card-background-2:white;
  --public-card-description-button : #5c97c7;
  --public-card-service-button : #599d84;
  --public-card-service-button-font : white;
  --public-card-index-color: rgba(255, 255, 255, .4);
  --public-card-title-color:#232427;
  --well-background-color:#f5f5f5;
  --well-border-color:#e3e3e3;
  --affix-background:#616161;
  --datatable-row-font-color:  #F36E37;
  --breadcrumb-label-color:#232427;
  --service-description-plate-background: white;
  --scrollbar-color: #9f9f9f;
  

  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --gradient-rtl: linear-gradient(to bottom left, var(--gray-12),var(--gray-11),  var(--gray-10),var(--gray-9), var(--gray-8), var(--gray-7), var(--gray-6),var(--gray-5));
  --gradient-ltr: linear-gradient(to bottom right, var(--gray-12),var(--gray-11),  var(--gray-10),var(--gray-9), var(--gray-8), var(--gray-7), var(--gray-6),var(--gray-5));  
}



body{
  width: 100vw;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  background: var(--html-background-color);
  margin: 0;
}

.dnSplash {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 30px;
}

.dnSplash img {
  opacity: 1.0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.dn-warning{
  color: var(--datatable-row-font-color)  !important;
}

.globalAppContent{
  height: 90%;
  margin-top: 85px;
  position: relative;
  
}

img .flip:dir(rtl){
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}


html, body, embed, main, span, ol, ul, pre, div {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
}

.descriptionCardDialog {
  top: 50px;
  width: 90vw;
  height: 90vh;
  text-align: center;
  display: block;
  position: relative;
}

.dnHidden{
  display: none;
}



body .dnPublicHeaderContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100vw;
  
}

body .dnPublicContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100vw;
  margin: 20px 0;
}



mark {
  background: none;
  color: var(--secondary-color);

}

.dnTag{
  background-color:var(--nav-background) !important;
  color: var(--nav-main-list-item-title) !important;
  font-size:16px;
  cursor:pointer;
  min-width: 70px;
}

.dnTag:hover{
  background-color:var(--nav-main-list-background) !important;
}

.dnActiveTag{
  background-color:var(--nav-main-list-background) !important;
  font-size:16px;
  cursor:pointer;
  min-width: 70px; 
  color: var(--nav-main-list-item-title) !important;
  
}



.breadcrumb {
  /*background-color : var(--html-background-color);*/
  z-index: 2;
}
ul.breadcrumb {
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  width: 98vw;
  list-style: none;
  margin: 10px;
  margin-top: 0px;;
  position: absolute;
}



[color=primary][dark-mode=off] ul.breadcrumb li.active a {
  color: var(--secondary-color);
}
[color=primary][dark-mode=on] ul.breadcrumb li.active a {
  color: var(--secondary-color);
}
ul.breadcrumb li {
  font-size: 20px;
  display: inline;
  color:var(--secondary-color);
  line-height: 26px;
}
ul.breadcrumb li + li:before {
  padding: 6px;
  font-size: 14px;
  font-weight: normal;
  line-height: 26px;
  content: "/ ";
}
[color=primary][dark-mode=off] ul.breadcrumb li + li:before {
  color: #9f9f9f;
}
[color=primary][dark-mode=on] ul.breadcrumb li + li:before {
  color: #9f9f9f;
}
ul.breadcrumb li a {
  font-size: 20px;
  font-weight: normal;
  line-height: 26px;
  text-decoration: none;
  color: var(--breadcrumb-label-color);
}
[color=primary][dark-mode=off] ul.breadcrumb li a {
  color: var(--nav-main-list-item-title);
}
[color=primary][dark-mode=on] ul.breadcrumb li a {
  color: var(--nav-main-list-item-title);
}
ul.breadcrumb li a:hover {
  text-decoration: underline;  
  color:var(--nav-main-list-item-hover);
}




.globalScrollUpBtn-rtl {
	left: 50%;
}

.globalScrollUpBtn-ltr {
	right: 50%;
}

.globalScrollUpBtnStyle {
	display: none;
	position: fixed;
	bottom: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #F36E37;
	color: white;
	cursor: pointer;
	border-radius: 4px;
	width: 50px;
}

.globalScrollUpBtnStyle:hover {
	background-color: #555;
}

.globalUpArrow {
	border: solid white;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

.autoShowHide {
	white-space: nowrap;
	width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.autoShowHide:hover {
	white-space: normal;
	overflow: visible;
	width: 100%;
}

.custom-chronoline-marker {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 50%;
  z-index: 1;
}