.zlyteNavBar{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    background: var(--zlyte-nav-bg);
}

.zlyteNavBar.zlyteNavHorizontal{
    height: 48px;
    width: 100%;
}

.zlyteNavBar.zlyteNavVertical{
    flex-direction: column;
    height: 100%;
    width: 64px;
}
.zlyteNavYield{
    display: contents;
}

zlyte-nav-separator{
    width: 1px;
    height: 18px;
    margin: 0 16px;
    background: grey;
}

.zlyteNavBar.zlyteNavHorizontal.zlyteLightTheme{
    box-shadow: 0px 3px 3px #f5f5f5;
}
.zlyteNavBar.zlyteNavVertical.zlyteLightTheme{
    box-shadow: 3px 0px 3px #f5f5f5;
}


/* Variables */


.zlyteNavHorizontal {
    --writing-mode: vertical-lr;
}

.zlyteNavVertical{
    --writing-mode: horizontal-tb;
}

/* Common classes */

.zlyteNavRightAlign{
    margin-inline-start: auto;
}
/* Default theme imported */
/*	Icon Colors */
/* Loading theme in configuration */
/* Themes of components */
/* Loading custom themes */
/* import theme overrides */
/* import custom css */
/* Default theme imported */
/* Loading theme in configuration */
/* rtl files loading */
/* Loading final tweaks to your variables */
zlyte-badge {
	--zlyte-badge-circle-radius: 6px;
	--zlyte-badge-width: var(--zlyte-badge-circle-radius);
	--zlyte-badge-height: var(--zlyte-badge-circle-radius);
}
.zlyteBadge {
	font-family: var(--zlyte-primary-font);
	position: absolute;
	display: flex;
	text-align: center;
	justify-content: center;
	padding: 2px;
	border-radius: 12px;
	background: var(--zlyte-badge-bg);
	border: 1px solid var(--zlyte-badge-border-color);
}
.zlyteBadgeContent {
	color: var(--zlyte-badge-content-color);
	font-size: 8px;
	margin: auto;
}
.zlyteBadgeWidHeiD {
	min-width: 10px;
	height: 10px;
	line-height: 10px;
}
.zlyteBadgeWidHeiWD {
	min-width: 6px;
	min-height: 6px;
}
.zlyteBadgeWithSize .zlyteBadgeWidHeiWD {
	width: var(--zlyte-badge-width);
	height: var(--zlyte-badge-height);
	border-radius: 50%;
}
.zlyteBadgeTopRight {
	right: 0;
	top: 0;
	transform: translate(50%, -50%);
}
.zlyteBadgeTopLeft {
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
}
.zlyteBadgeBottomRight {
	right: 0px;
	bottom: 0px;
	transform: translate(50%, 50%);
}
.zlyteBadgeBottomLeft {
	left: 0px;
	bottom: 0px;
	transform: translate(-50%, 50%);
}
/* Default theme imported */
/*	Icon Colors */
/* Loading theme in configuration */
/* Themes of components */
/* Loading custom themes */
/* import theme overrides */
/* import custom css */
/* Default theme imported */
/* Loading theme in configuration */
/* rtl files loading */
/* Loading final tweaks to your variables */
/* LYTE-COLORPICKER BEGINS */
.zlyteColorPicker {
	display: inline-block;
	border: 1px solid var(--zlyte-colorpicker-border-color);
	box-shadow: 0 0 5px 1px var(--zlyte-colorpicker-boxshadow-color);
}
.zlyteColorPicker.popColorPicker {
	display: none;
}
.zlyteColorPicker__showhidecontainer {
	overflow: hidden;
	padding: 0;
	position: relative;
	text-align: left;
	font-size: 13px;
	font-family: var(--zlyte-primary-font);
}
/*  Colorpicker basic section related code begins    */
.zlyteColorPicker__default {
	width: 220px;
	display: flex;
	flex-direction: column;
}
.zlyteColorPicker__nocolorbutton {
	padding: 8px 15px;
	border-bottom: 1px solid var(--zlyte-colorpicker-border-color);
	cursor: pointer;
}
.zlyteColorPicker__noFill {
	background-image: var(--zlyte-sprite-image);
	background-position: -43px -79px;
	width: 11px;
	height: 11px;
	opacity: 0.6;
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;
}
.zlyteColorPicker__nocolorbutton svg {
	display: none;
}
.zlyteColorPicker__nocolorbutton:hover {
	background: var(--zlyte-colorpicker-morelink-hover-bg);
}
.zlyteColorPicker__palettecontainer {
	border-bottom: 1px solid var(--zlyte-colorpicker-border-color);
	order: 0;
	padding: 8px 15px 15px;
}
.zlyteColorPicker__palette {
	font-size: 0;
}
.zlyteColorPickerUsedColors {
	margin: 0;
	padding: 0;
}
.zlyteColorPicker__paletteheading {
	cursor: default;
	color: var(--zlyte-colorpicker-common-text-color);
	margin-bottom: 10px;
}
.zlyteColorPicker__palettecontainer.usedColor__container {
	order: 1;
}
.zlyteColorPicker__navigatable {
	order: 2;
	padding: 10px 15px;
	border-radius: 0 0 2px 2px;
	cursor: pointer;
}
.zlyteColorPicker__navigatable:hover {
	background: var(--zlyte-colorpicker-morelink-hover-bg);
}
.zlyteColorPicker__colorfieldcontainer {
	display: none;
	order: 3;
}
.zlyteColorPicker__palette .standard__colors,
.zlyteColorPicker__shades {
	margin: 0;
	padding: 0;
	line-height: 1;
}
.zlyteColorPicker__colorpan {
	width: 15px;
	height: 15px;
	margin: 0 2px;
	padding: 0;
	border: 1px solid var(--zlyte-colorpicker-colorpan-border-color);
	border-radius: 0;
	display: inline-block;
	cursor: pointer;
	box-sizing: border-box;
	position: relative;
}
.default__colors .zlyteColorPicker__colorpan {
	border: 1px solid transparent;
}
.default__colors:first-child .zlyteColorPicker__colorpan {
	margin-bottom: 5px;
	border: 1px solid var(--zlyte-colorpicker-colorpan-border-color);
}
.default__colors:nth-child(2),
.default__colors:nth-child(3) {
	display: none;
}
.zlyteColorPicker__colorpan:hover {
	border-color: var(--zlyte-colorpicker-colorpan-hover-border-color);
}
.default__colors:first-child .zlyteColorPicker__colorpan:hover {
	border-color: rgba(17, 17, 17, 0.3);
}
.zlyteColorPicker__colorpan.zlyteCPSelectedColor::before {
	content: '';
	position: absolute;
	border-left: 1px solid var(--zlyte-colorpicker-selectedtick-color);
	border-bottom: 1px solid var(--zlyte-colorpicker-selectedtick-color);
	width: 8px;
	height: 4px;
	top: 2px;
	left: 2px;
	transform: rotate(-45deg);
}
.zlyteColorPicker__colorpan.zlyteCPSelectedColor[lt-prop-title="#FFFFFF"]::before {
	border-left: 1px solid var(--zlyte-colorpicker-whitebg-selectedtick-color);
	border-bottom: 1px solid var(--zlyte-colorpicker-whitebg-selectedtick-color);
}
.zlyteColorPicker__text {
	display: inline-block;
	vertical-align: middle;
	color: var(--zlyte-colorpicker-advanced-link-text-color);
}
.LCP_rightArrow {
	background-image: var(--zlyte-sprite-image);
	background-position: -97px -26px;
	width: 4px;
	height: 7px;
	display: inline-block;
	vertical-align: middle;
	margin-top: 3px;
}
.zlyteColorPicker__icon {
	background-image: var(--zlyte-sprite-image);
	background-position: -110px -58px;
	width: 14px;
	height: 11px;
	opacity: 0.6;
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;
}
/*  Colorpicker basic section related code ends    */
/*  Colorpicker advanced section related code begins    */
.zlyteColorPicker--advanced {
	padding: 10px;
	width: 260px;
}
.colorDiv {
	overflow: hidden;
	position: relative;
	cursor: default;
	touch-action: none;
	border: 1px solid var(--zlyte-colorpicker-input-border-color);
	border-radius: 2px;
}
#zlyteCPImgDiv {
	height: 160px;
	background-image: var(--zlyte-colorpicker-pallete-bg-img);
	background-repeat: round;
}
.colorSlider_palette_circle {
	border: 2px solid var(--zlyte-colorpicker-color-slider-handle-border-color);
	border-radius: 50%;
	height: 8px;
	width: 8px;
	cursor: pointer;
	position: absolute;
	z-index: 10;
}
.zlyteColorPicker__previewDiv {
	padding: 3px 0px;
	position: relative;
}
.zlyteColorPicker__opacityslider,
.colorSlider_hue {
	position: relative;
	vertical-align: middle;
	touch-action: none;
}
.zlyteColorPicker__sliderDiv {
	display: flex;
	margin: 15px 0;
}
.colorSlider_hue {
	margin-bottom: 15px;
}
.opacityslider__circlethumb,
.colorSlider_sliderHandle {
	width: 5px;
	height: 10px;
	border-radius: 2px;
	border: 1px solid var(--zlyte-colorpicker-sliderhandle-border-color);
	position: absolute;
	z-index: 14;
	top: 0;
	background: var(--zlyte-colorpicker-sliderhandle-bg);
}
.zlyteColorPicker__transparentbg,
.colorSlider_hueBar_border {
	width: 210px;
	border-radius: 6px;
}
.opacityslider__track,
.colorSlider_hueBar {
	background-image: linear-gradient(to right, red, #ff00dd, blue, aqua, #00ff00, yellow, red);
	height: 10px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.3);
}
.opacityslider__track {
	background-image: none;
}
.opacityPreviewDiv__transparentbg,
.previewDiv {
	width: 32px;
	height: 32px;
	cursor: pointer;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.3);
}
.zlyteColorPicker__commandbar {
	margin: 10px 0 5px;
	display: flex;
}
.LCP_backbtn {
	margin-right: auto;
}
.selectFormat {
	width: 70px;
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
}
.selectFormat zlyte-dropdown {
	display: block;
	width: 70px;
}
.selectFormat zlyte-dropdown zlyte-drop-button {
	font-size: 12px;
}
.zlyteCPDropbox {
	width: 70px;
}
.zlyteCPDropbox .zlyteArrow {
	width: 70px;
}
.zlyteCPDropbox zlyte-drop-item {
	padding: 5px;
	font-size: 12px;
	color: var(--zlyte-colorpicker-formatdropdown-text-color);
}
.zlyteCPDropbox zlyte-drop-item[selected="true"] {
	color: var(--zlyte-colorpicker-formatdropdown-active-text-color);
}
.zlyteCPDropbox zlyte-drop-item[selected="true"]::before {
	content: none;
}
.selectFormat .colorPickerDD {
	padding: 5px 20px 5px 5px;
}
.selectFormat zlyte-dropdown zlyte-icon.dropdown {
	background-position: -14px -2px;
	width: 9px;
	height: 5px;
}
.showValue {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 85px);
}
.cpValFormatIp {
	border-spacing: 0;
}
.cpValFormatIp lyte-tr:nth-child(2) lyte-td {
	font-size: 12px;
	color: var(--zlyte-colorpicker-formatlabel-text-color);
	text-align: center;
}
.cpValFormatIp lyte-td {
	vertical-align: top;
	padding: 0;
	border-bottom: 0;
	min-width: auto;
}
.cpValFormatIp lyte-tr:first-child lyte-td {
	padding-left: 5px;
}
.cpValFormatIp lyte-tr:first-child lyte-td:first-child {
	padding-left: 0;
}
.showValue .zlyteField {
	border: 1px solid var(--zlyte-colorpicker-input-border-color);
}
.showValue .zlyteInputBox input {
	padding: 5px 4px;
	font-size: 12px;
	min-width: auto;
	text-align: center;
}
.showValue .zlyteInputBox .zlyteField:hover {
	border: 1px solid var(--zlyte-colorpicker-input-hover-border-color);
}
.showValue .zlyteInputBox.zlyteInputFocus .zlyteField {
	outline: none;
	border: 1px solid var(--zlyte-colorpicker-input-hover-border-color);
}
.showValue .zlyteInputBox.vertical {
	width: 40px;
}
#zlyteCPShowValue {
	width: 128px;
}
#zlyteCPShowValue.zlyteInputBox input {
	text-align: left;
}
.zlyteColorPicker__transparentbg {
	border-radius: 6px;
	background: url(../../../images/zlyteCP_op_slider_bg.png);
}
.zlyteCP__transparentbg {
	background: url(../../../images/zlyteCP_op_slider_bg.png);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	margin-left: auto;
}
.zlyteCPHexText lyte-td:first-child {
	visibility: hidden;
}
#zlyteCPHiddenInput {
	position: absolute;
	left: -9999px;
}
/*  Colorpicker advanced section related code ends    */
.zlyteColorPicker__pe {
	pointer-events: none;
	cursor: default;
}
/* Temp Input error feature added by Sam */
.zlyteCp__Invalid input {
	background-color: #ffdddd;
}
.zlyteCp__Invalid div.zlyteField {
	border: 1px solid red !important;
}
/* import theme overrides - styles */
/* import custom css - final tweaks by the user */
/* LYTE-COLORPICKER ENDS */

/* Default theme imported */
/*	Icon Colors */
/* Loading theme in configuration */
/* Themes of components */
/* Loading custom themes */
/* import theme overrides */
/* import custom css */
/* Default theme imported */
/* Loading theme in configuration */
/* rtl files loading */
/* Loading final tweaks to your variables */
/* Make changes to override predefined styles */
/*  Dropdown related style BEGINS   */
zlyte-dropdown,
zlyte-drop-box {
	font-family: var(--zlyte-primary-font);
	font-size: 15px;
	color: var(--zlyte-dropdown-text-color);
	display: inline-block;
	max-width: 430px;
}
zlyte-dropdown {
	max-width: 330px;
}
zlyte-drop-button {
	border: 1px solid var(--zlyte-dropdown-btn-border-color);
	border-radius: var(--zlyte-dropbox-border-radius);
	cursor: pointer;
	text-align: left;
	position: relative;
	display: inline-block;
	padding: 7px 25px 7px 10px;
	width: 100%;
	box-sizing: border-box;
	color: var(--zlyte-dropdown-text-color);
	background: var(--zlyte-dropdown-bg);
}
zlyte-dropdown zlyte-drop-button:hover {
	border: 1px solid var(--zlyte-dropdown-btn-hover-border-color);
}
zlyte-drop-button.zlyteDropButtonUp {
	border-radius: 0 0 var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius);
	box-shadow: 0px 0px 6px 0px var(--zlyte-dropbox-box-shadow-color);
}
zlyte-drop-button.zlyteDropButtonDown {
	border-radius: var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius) 0 0;
	box-shadow: 0px 0px 6px 0px var(--zlyte-dropbox-box-shadow-color);
}
.zlyteMultiSearchDropButtonFocused:hover,
.zlyteMultiSearchDropButtonFocused,
zlyte-dropdown .zlyteDummyEventContainer:focus zlyte-drop-button,
zlyte-dropdown .zlyteDummyEventContainer:focus zlyte-drop-button:hover {
	border: 1px solid var(--zlyte-dropdown-btn-border-color);
	box-shadow: 0px 0px 6px 0px var(--zlyte-dropbox-box-shadow-color);
}
zlyte-drop-button.zlyteDropButtonUp:hover,
zlyte-drop-button.zlyteDropButtonDown:hover {
	border: 1px solid var(--zlyte-dropdown-btn-border-color);
}
zlyte-dropdown.calloutDrop zlyte-drop-button {
	box-shadow: none;
	border-radius: var(--zlyte-dropbox-border-radius);
}
.zlyteDropPlaceholderNormal,
.zlyteDropdownLabel {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
.zlyteDummyEventContainer {
	outline: none;
}
zlyte-drop-item {
	position: relative;
	cursor: pointer;
	display: block;
	text-align: left;
	color: var(--zlyte-dropdown-text-color);
	padding: 7px 15px 7px 25px;
	font-size: 15px;
	max-width: 100%;
	-ms-word-wrap: break-word;
	overflow-wrap: break-word;
}
zlyte-drop-item.zlyteDropdownActive,
zlyte-drop-item.zlyteSearchHidden {
	display: none;
}
.zlyteDropdownSelection {
	background: var(--zlyte-dropbox-item-hover-bg);
}
zlyte-drop-item[selected="true"]::before {
	content: '';
	background-image: var(--zlyte-sprite-image);
	background-position: -33px -15px;
	width: 9px;
	height: 7px;
	position: absolute;
	left: 10px;
	top: 15px;
}
zlyte-dropdown zlyte-icon.dropdown {
	background-image: var(--zlyte-sprite-image);
	background-position: -1px -2px;
	width: 8px;
	height: 4px;
	top: calc(50% - 2px);
	display: inline-block;
	opacity: 0.5;
	position: absolute;
	right: 10px;
}
/*  Multi select releated CSS--BEGINS   */
zlyte-dropdown[lt-prop-type="multisearch"] zlyte-drop-button,
zlyte-dropdown[lt-prop-type="multiple"] zlyte-drop-button {
	padding-right: 17px;
	min-height: 25px;
	white-space: normal;
}
zlyte-dropdown[lt-prop-type="multisearch"] zlyte-drop-button::after,
zlyte-dropdown[lt-prop-type="multiple"] zlyte-drop-button::after {
	content: '';
	background-image: var(--zlyte-sprite-image);
	background-position: -1px -2px;
	width: 8px;
	height: 4px;
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 15px;
	opacity: 0.5;
}
zlyte-dropdown zlyte-drop-button.ltDropdownIconNodePresent::after {
	content: none;
}
.zlyteMultipleSelect li {
	background: var(--zlyte-dropdown-multiselect-li-bg);
	color: var(--zlyte-dropdown-text-color);
	border: 1px solid var(--zlyte-dropdown-multiselect-li-border-color);
	margin: 3px 1px;
	border-radius: var(--zlyte-dropbox-border-radius);
	font-size: 15px;
	padding: 1px 25px 3px 7px;
	display: inline-block;
	position: relative;
	cursor: default;
	max-width: 100%;
	box-sizing: border-box;
}
.zlyteMultipleSelect .zlyteDropdownVisible {
	display: block;
	max-width: 100%;
	-ms-word-wrap: break-word;
	overflow-wrap: break-word;
}
zlyte-dropdown[lt-prop-remove-multiple="true"] .zlyteMultipleSelect li {
	cursor: pointer;
}
zlyte-dropdown[lt-prop-type="multisearch"] .zlyteMultipleSelect li.zlyteMultiselectInput {
	background: var(--zlyte-dropdown-bg);
	border: 0;
	padding: 0;
	margin: 0;
	width: 150px;
}
zlyte-dropdown[lt-prop-type="multisearch"] .zlyteMultipleSelect .zlyteMultiselectInput:only-of-type {
	width: 100%;
}
.zlyteDropPlaceholderMultiple {
	padding-left: 0;
	font-size: 14px;
	color: var(--zlyte-dropdown-multiselect-placeholder-text-color);
	vertical-align: top;
}
.zlyteMultipleSelect .zlyteCloseIcon {
	position: absolute;
	cursor: pointer;
	top: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	width: 18px;
	border-radius: 0 var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius) 0;
}
.zlyteMultipleSelect li:hover .zlyteCloseIcon {
	background: var(--zlyte-dropdown-multiselect-remove-hover-bg);
}
.zlyteMultipleSelect .zlyteCloseIcon::before {
	content: '';
	background-image: var(--zlyte-sprite-image);
	background-position: -54px -2px;
	width: 8px;
	height: 8px;
	top: calc(50% - 4px);
	right: 5px;
	opacity: 0.7;
	display: inline-block;
	position: absolute;
	cursor: pointer;
}
.zlyteMultipleSelect .zlyteCloseIcon:hover::before {
	opacity: 1;
}
.zlyteDropdownNoResult {
	padding: 5px 15px 15px;
	text-align: center;
	font-size: 14px;
	color: var(--zlyte-dropdown-no-result-text-color);
}
zlyte-drop-button input {
	width: 100%;
	border: none;
	background: transparent;
	font-size: 14px;
	color: var(--zlyte-dropdown-text-color);
	padding: 0;
	box-sizing: border-box;
}
zlyte-drop-button input:focus {
	outline: none;
}
.zlyte-dropdown-filtered {
	display: none !important;
}
.zlyteMultiSelectDropdown zlyte-drop-item {
	padding: 7px 10px;
}
/*  Multi select releated CSS--ENDS   */
/*zlyte-list-box dropbox related css--BEGINS     */
zlyte-drop-box {
	background: var(--zlyte-dropdown-bg);
	box-sizing: border-box;
	border: 1px solid var(--zlyte-dropbox-border-color);
	box-shadow: 0px 2px 6px 0px var(--zlyte-dropbox-box-shadow-color);
	z-index: var(--zlyte-dropbox-zindex);
	position: absolute;
	border-radius: 0 0 var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius);
	display: block;
	width: auto;
	transform: translate(-1000px, -1000px);
}
zlyte-drop-box[zlyte-hidden] {
	visibility: hidden;
}
zlyte-drop-box.zlyteDropdownCurve {
	border-radius: 0 var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius);
}
zlyte-drop-box.zlyteDropdownDown {
	transform: translateY(-1px);
}
zlyte-drop-box.zlyteDropdownUp {
	border-radius: var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius) 0 0;
	box-shadow: 0px -2px 6px 0px var(--zlyte-dropbox-box-shadow-color);
	transform: translateY(1px);
}
zlyte-drop-box.zlyteDropdownRight,
zlyte-drop-box.zlyteDropdownLeft {
	transform: none;
}
zlyte-drop-box.zlyteDropBodyCallout {
	border-radius: var(--zlyte-dropbox-border-radius);
	box-shadow: 0 0 3px 0 var(--zlyte-dropbox-box-shadow-color);
}
zlyte-drop-box:not(.zlyteDropBodyCallout) .zlyteArrow {
	background: var(--zlyte-dropbox-button-overlap-bg);
	width: 328px;
	height: 1px;
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
}
.zlyteDropdownUp:not(.zlyteDropBodyCallout) .zlyteArrow {
	top: unset;
	bottom: -1px;
}
.zlyteDropdownUp.zlyteDropdownCurve {
	border-radius: var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius) 0;
}
zlyte-drop-box zlyte-input.zlyteInput .zlyteSearch {
	padding-left: 35px;
}
zlyte-drop-box.zlyteDropdownUp zlyte-input.zlyteInput .zlyteSearch {
	border-radius: var(--zlyte-dropbox-border-radius) var(--zlyte-dropbox-border-radius) 0 0;
}
zlyte-drop-box.zlyteDropdownHidden {
	display: none;
	transform: translate(-1000px, -1000px);
}
zlyte-drop-footer,
zlyte-drop-header {
	display: block;
}
zlyte-drop-footer {
	border-top: 1px solid var(--zlyte-dropbox-footer-border-color);
	text-align: center;
}
zlyte-drop-body {
	padding: 5px 0;
	display: block;
	max-height: 210px;
	overflow-y: auto;
	position: relative;
}
zlyte-drop-header zlyte-search .searchIcon {
	top: 10px;
	left: 10px;
}
zlyte-drop-box .zlyteDropdownFooter {
	border-top: 1px solid var(--zlyte-dropbox-footer-border-color);
}
zlyte-drop-box .zlyteDropdownFooter .zlyteDropdownAction {
	padding: 7px 10px;
	font-size: 14px;
}
zlyte-drop-label {
	display: block;
	height: auto;
	padding: 10px 10px 3px;
	text-align: left;
	font-size: 15px;
	font-family: var(--zlyte-secondary-font);
	overflow-wrap: break-word;
}
zlyte-drop-label:first-child {
	padding-top: 5px;
}
/*zlyte-list-box dropbox related css--ENDS     */
.zlyteDropdownFiltered {
	display: none!important;
}
#zlytedropdownfreezelayer {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--zlyte-dropdown-freeze-layer-bg);
	opacity: 0.1;
	position: fixed;
	overflow: hidden;
	display: none;
}
.zlyteDropdownZIndex {
	z-index: calc(var(--zlyte-dropbox-zindex) - 5);
}
/*Dropdown element disabled option -- BEGINS*/
.zlyteDropdown-disabled zlyte-drop-button {
	background: var(--zlyte-dropdown-button-disabled-bg);
	color: var(--zlyte-dropdown-button-disabled-text-color);
	cursor: not-allowed;
}
.zlyteDropdownDisabled zlyte-drop-button:hover {
	border: 1px solid var(--zlyte-dropdown-btn-border-color);
}
.zlyteDropdownDisabled .zlyteDummyEventContainer:focus zlyte-drop-button:hover,
.zlyteDropdownDisabled .zlyteDummyEventContainer:focus zlyte-drop-button {
	box-shadow: none;
	border: 1px solid var(--zlyte-dropdown-btn-border-color);
}
.zlyteDropdownDisabled .zlyteMultipleSelect li {
	background: var(--zlyte-dropdown-multiple-disabled-li-bg);
	border: 1px solid var(--zlyte-dropdown-multiple-disabled-li-border-color);
	cursor: not-allowed;
}
.zlyteDropdownDisabled .zlyteCloseIcon {
	pointer-events: none;
}
.zlyteDropdownDisabled .zlyteMultipleSelect li:hover .zlyteCloseIcon {
	background: transparent;
}
zlyte-dropdown .zlyteDropdown-disabled zlyte-icon.dropdown {
	opacity: 0.3;
}
/*Dropdown element disabled option -- ENDS*/
/*  Dropdown item disabled CSS -- BEGINS    */
zlyte-drop-item.zlyteDropdown-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
/*  Dropdown item disabled CSS -- ENDS    */
.zlyteDropPlaceholderNormal {
	margin-right: 20px;
	color: var(--zlyte-dropdown-placeholder-text-color);
}
.zlyteMultipleSelect li.zlyteDropMark {
	background: var(--zlyte-dropdown-multiselect-li-selected-bg);
	border: 1px solid var(--zlyte-dropdown-multiselect-li-selected-border-color);
}
.zlyteMultipleSelect li.zlyteDropMark:hover .zlyteCloseIcon {
	background: var(--zlyte-dropdown-multiselect-li-selected-hover-bg);
}
/*  Callout hook related CSS -- BEGINS    */
/*Dropdown with arrow */
zlyte-drop-box .zlyteArrowIcon {
	width: 0;
	height: 0;
	border-bottom: 8px solid var(--zlyte-dropdown-bg);
	position: absolute;
}
zlyte-drop-box .zlyteArrowTop::after,
zlyte-drop-box .zlyteArrowTop::before,
zlyte-drop-box .zlyteArrowBottom::after,
zlyte-drop-box .zlyteArrowBottom::before,
zlyte-drop-box .zlyteArrowRight::after,
zlyte-drop-box .zlyteArrowRight::before,
zlyte-drop-box .zlyteArrowLeft::after,
zlyte-drop-box .zlyteArrowLeft::before {
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border: 8px solid transparent;
}
/*Arrow Top*/
zlyte-drop-box .zlyteArrowTop {
	top: 0;
}
zlyte-drop-box .zlyteArrowTop::after,
zlyte-drop-box .zlyteArrowTop::before {
	bottom: 0;
	left: 0;
}
zlyte-drop-box .zlyteArrowTop::after {
	border-bottom-color: var(--zlyte-dropdown-bg);
	margin-left: -8px;
}
zlyte-drop-box .zlyteArrowTop::before {
	border-bottom-color: var(--zlyte-dropbox-arrow-border-color);
	border-width: 10px;
	margin-left: -10px;
}
/*Arrow bottom*/
zlyte-drop-box .zlyteArrowBottom {
	bottom: -8px;
	top: unset;
}
zlyte-drop-box .zlyteArrowBottom::after,
zlyte-drop-box .zlyteArrowBottom::before {
	top: 0;
	left: 0;
}
zlyte-drop-box .zlyteArrowBottom::after {
	border-top-color: var(--zlyte-dropdown-bg);
	margin-left: -8px;
}
zlyte-drop-box .zlyteArrowBottom::before {
	border-top-color: var(--zlyte-dropbox-arrow-border-color);
	border-width: 10px;
	margin-left: -10px;
}
/*Arrow Right*/
zlyte-drop-box .zlyteArrowRight {
	right: 0;
}
zlyte-drop-box .zlyteArrowRight::after,
zlyte-drop-box .zlyteArrowRight::before {
	left: 0;
	top: 0;
}
zlyte-drop-box .zlyteArrowRight::after {
	border-left-color: var(--zlyte-dropdown-bg);
	margin-top: -8px;
}
zlyte-drop-box .zlyteArrowRight::before {
	border-left-color: var(--zlyte-dropbox-arrow-border-color);
	border-width: 10px;
	margin-top: -10px;
}
/*Arrow Left*/
zlyte-drop-box .zlyteArrowLeft {
	left: 0;
}
zlyte-drop-box .zlyteArrowLeft::after,
zlyte-drop-box .zlyteArrowLeft::before {
	right: 0;
	top: 0;
}
zlyte-drop-box .zlyteArrowLeft::after {
	border-right-color: var(--zlyte-dropdown-bg);
	margin-top: -8px;
}
zlyte-drop-box .zlyteArrowLeft::before {
	border-right-color: var(--zlyte-dropbox-arrow-border-color);
	border-width: 10px;
	margin-top: -10px;
}
/*  Callout hook related CSS -- ENDS    */
zlyte-drop-box.zlyteAnimate {
	transition: top 0.4s ease;
}
zlyte-drop-box.zlyteDropBoxAnimate {
	transition-property: top, height;
	overflow: hidden;
}
zlyte-drop-box.zlyteAnimate zlyte-drop-body {
	transition: height 0.4s ease;
	overflow: hidden;
}
.zlyteBodyWrapper {
	overflow: hidden;
}
.zlyteDropdownFFScroll {
	overflow-y: scroll;
}
.zlyteDropdownFFZeroScroll {
	overflow-y: hidden;
}
.zlyteDropdownHideGroup {
	display: none;
}
.zlyteDropdownWithDeselectIcon zlyte-drop-button {
	padding-right: 70px;
}
.zlyteDropdownDeselectIcon {
	width: 18px;
	height: 18px;
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.zlyteDropdownDeselectIcon:hover {
	background: var(--zlyte-dropdown-deselect-icon-hover-bg);
}
.zlyteDropdownDeselectIcon::after {
	content: '';
	background-image: var(--zlyte-sprite-image);
	background-position: -54px -2px;
	width: 8px;
	height: 8px;
	display: inline-block;
}
@media only screen and (max-device-width: 650px) {
	zlyte-drop-body {
		max-height: 70px;
	}
}
/* import theme overrides - styles */
/* import custom css */
/* Make preferred css changes over here.
 * This will be added to the end of the styles/dropdown.less file
 */
/*  Dropdown related style ENDS   */

/* Default theme imported */
/*	Icon Colors */
/* Loading theme in configuration */
/* Themes of components */
/* Loading custom themes */
/* import theme overrides */
/* import custom css */
/* Default theme imported */
/* Loading theme in configuration */
/* rtl files loading */
/* Loading custom themes */
/* Make changes to override predefined styles */
/*  Popover related CSS BEGINS  */
.bodyWrapper {
  overflow: hidden;
}
.popoverWrapper {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--zlyte-popover-zindex);
  position: fixed;
}
.popoverWrapper.noFreeze {
  pointer-events: none;
}
.zlytePopover {
  background: var(--zlyte-popover-bg);
  border: 1px solid var(--zlyte-popover-border-color);
  box-shadow: var(--zlyte-popover-boxshadow-color);
  position: absolute;
  z-index: calc(var(--zlyte-popover-zindex) + 10);
  opacity: 0;
  border-radius: 3px;
  transition: opacity ease 0.4s;
  box-sizing: border-box;
  font-family: var(--zlyte-primary-font);
}
.popoverWrapper.noFreeze .zlytePopover {
  pointer-events: auto;
}
.zlytePopover.zlyteZoom {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: scale(0);
}
.popoverWrapper.scrollable {
  overflow: hidden;
}
.popoverWrapper.scrollable .zlytePopoverContent {
  overflow: auto;
}
.popoverWrapper.scrollable .zlytePopover {
  max-height: 100%;
}
zlyte-popover-header {
  padding: 15px 30px;
  font-family: var(--zlyte-secondary-font);
  font-size: 16px;
  color: var(--zlyte-popover-text-color);
}
zlyte-popover-header,
zlyte-popover-content,
zlyte-popover-footer {
  display: block;
  box-sizing: border-box;
}
zlyte-popover-content {
  padding: 15px 30px;
}
zlyte-popover-footer {
  padding: 15px 30px;
}
zlyte-popover-freeze {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: auto;
  background: var(--zlyte-popover-freeze-bg);
  display: block;
  opacity: var(--zlyte-popover-freeze-opacity);
  transition: opacity ease 0.15s;
  transform: translate3d(0, 0, 0);
}
.zlytePopoverClose {
  background-image: var(--zlyte-sprite-image);
  background-position: -52px 0px;
  width: 13px;
  height: 13px;
  opacity: 0.5;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 14px;
  display: block;
  transform: scale(1.3);
  z-index: 5;
}
.zlytePopoverClose:hover {
  opacity: 1;
}
zlyte-popover-footer.left {
  text-align: left;
}
zlyte-popover-footer.center {
  text-align: center;
}
zlyte-popover-footer.right {
  text-align: right;
}
zlyte-popover-footer zlyte-button {
  margin-left: 7px;
}
zlyte-popover-footer zlyte-button:first-child {
  margin-left: 0;
}
.zlytePopoverArrowIcon {
  width: 11px;
  height: 11px;
  position: absolute;
  background: var(--zlyte-popover-bg);
  transform: rotate(45deg);
  display: block;
}
.zlytePopoverArrowIcon.zlytePopoverArrowTop {
  box-shadow: -1px -1px 0 0 var(--zlyte-popover-border-color);
  top: -5px;
}
.zlytePopoverArrowIcon.zlytePopoverArrowBottom {
  box-shadow: 1px 1px 0 0 var(--zlyte-popover-border-color);
  bottom: -5px;
}
.zlytePopoverArrowIcon.zlytePopoverArrowRight {
  box-shadow: 1px -1px 0 0 var(--zlyte-popover-border-color);
  right: -5px;
}
.zlytePopoverArrowIcon.zlytePopoverArrowLeft {
  box-shadow: -1px 1px 0 0 var(--zlyte-popover-border-color);
  left: -5px;
}
.zlytePopoverHeaderDraggable {
  cursor: move;
  touch-action: none;
}
.zlyteStopBodyScrolling {
  overflow: hidden;
}
.zlytePopoverVisible {
  opacity: 1;
}
.zlytePopoverDispNone {
  display: none;
}
/* import theme overrides - styles */
/* import custom css - final tweaks by the user */
/*  Popover related CSS ENDS  */

/* Default theme imported */
/*	Icon Colors */
/* Loading theme in configuration */
/* Themes of components */
/* Loading custom themes */
/* import theme overrides */
/* import custom css */
/* Default theme imported */
/* Loading theme in configuration */
/* rtl files loading */
/* Loading custom themes */
/* Make changes to override predefined styles */
/* Radiobutton CSS BEGINS */
zlyte-radiobutton {
	color: var(--zlyte-radio-text-color);
	font-family: var(--zlyte-primary-font);
	font-size: 14px;
	display: inline-block;
	position: relative;
}
zlyte-radiobutton label {
	cursor: pointer;
}
zlyte-radiobutton.zlyteRadioDisabled label {
	cursor: not-allowed;
}
zlyte-radiobutton input[type="radio"] {
	position: absolute;
	opacity: 0;
}
.zlyteRadioLayer {
	width: 15px;
	height: 15px;
	border: 1px solid var(--zlyte-radio-border-color);
	border-radius: 50%;
	display: inline-block;
	margin-right: 7px;
	vertical-align: middle;
	background: var(--zlyte-radio-bg);
	position: relative;
}
.zlyteRadioLayer .zlyteRadioCheck {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 4.5px);
	left: calc(50% - 4.5px);
	background: var(--zlyte-radio-default-bg-on-mode);
	transform: scale(0);
	transition: transform 0.2s ease;
}
.zlyteRadioDisabled input[type="radio"]:checked + .zlyteRadioLayer,
zlyte-radiobutton label:hover .zlyteRadioLayer,
zlyte-radiobutton input[type="radio"]:focus + .zlyteRadioLayer,
zlyte-radiobutton input[type="radio"]:active + .zlyteRadioLayer,
zlyte-radiobutton input[type="radio"]:checked + .zlyteRadioLayer {
	border: 1px solid var(--zlyte-radio-default-bg-on-mode);
}
zlyte-radiobutton input[type="radio"]:focus + .zlyteRadioLayer {
	box-shadow: 0 0 4px 0 var(--zlyte-radio-default-bg-on-mode);
}
zlyte-radiobutton input[type="radio"]:checked + .zlyteRadioLayer .zlyteRadioCheck {
	transform: scale(1);
}
.zlyteRadioLabel {
	display: inline-block;
	vertical-align: middle;
}
zlyte-radiobutton input[type="radio"]:focus ~ .zlyteRadioLabel,
zlyte-radiobutton label:hover .zlyteRadioLabel {
	color: var(--zlyte-radio-text-hover-color);
}
zlyte-radiobutton .zlytePrimary .zlyteRadioLayer .zlyteRadioCheck {
	background: var(--zlyte-radio-primary-bg-on-mode);
}
zlyte-radiobutton label.zlytePrimary:hover .zlyteRadioLayer,
zlyte-radiobutton .zlytePrimary input[type="radio"]:focus + .zlyteRadioLayer,
zlyte-radiobutton .zlytePrimary input[type="radio"]:active + .zlyteRadioLayer,
zlyte-radiobutton .zlytePrimary input[type="radio"]:checked + .zlyteRadioLayer {
	border: 1px solid var(--zlyte-radio-primary-bg-on-mode);
}
zlyte-radiobutton .zlytePrimary input[type="radio"]:focus + .zlyteRadioLayer {
	box-shadow: 0 0 4px 0 var(--zlyte-radio-primary-bg-on-mode);
}
zlyte-radiobutton .zlyteSecondary .zlyteRadioLayer .zlyteRadioCheck {
	background: var(--zlyte-radio-secondary-bg-on-mode);
}
zlyte-radiobutton label.zlyteSecondary:hover .zlyteRadioLayer,
zlyte-radiobutton .zlyteSecondary input[type="radio"]:focus + .zlyteRadioLayer,
zlyte-radiobutton .zlyteSecondary input[type="radio"]:active + .zlyteRadioLayer,
zlyte-radiobutton .zlyteSecondary input[type="radio"]:checked + .zlyteRadioLayer {
	border: 1px solid var(--zlyte-radio-secondary-bg-on-mode);
}
zlyte-radiobutton .zlyteSecondary input[type="radio"]:focus + .zlyteRadioLayer {
	box-shadow: 0 0 4px 0 var(--zlyte-radio-secondary-bg-on-mode);
}
.zlyteRadioSwitch {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 28px;
	height: 16px;
	border-radius: 20px;
	background: var(--zlyte-radio-switch-bg);
}
.zlyteRadioSwitch .on-btn {
	display: inline-block;
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--zlyte-radio-switch-circle-bg);
	border-radius: 50%;
	left: 2px;
	top: calc(50% - 6px);
	right: auto;
	transition: left 200ms ease;
}
zlyte-radiobutton .on-off-sw:focus + .zlyteRadioSwitch {
	box-shadow: 0 0 3px 1px #d3d3d3;
}
.on-off-sw:checked + .zlyteRadioSwitch {
	background: var(--zlyte-radio-primary-bg-on-mode);
}
zlyte-radiobutton .on-off-sw:checked:focus + .zlyteRadioSwitch {
	box-shadow: 0 0 3px 1px var(--zlyte-radio-primary-bg-on-mode);
}
zlyte-radiobutton .on-off-sw:checked + .zlyteRadioSwitch .on-btn {
	left: 14px;
}
.zlyteRadioSliderLabel {
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
}
.zlyteRadioSlider {
	position: relative;
	display: inline-block;
	height: 1.4rem;
}
.zlyteRadioSlider::before {
	content: '';
	position: absolute;
	display: inline-block;
	z-index: 1;
	width: 1.4rem;
	height: 1.4rem;
	background: var(--zlyte-radio-slider-circle-bg);
	box-shadow: var(--zlyte-radio-slider-boxshadow-color);
	border-radius: 50%;
	left: 0;
	transition: left 200ms ease;
}
input[type="radio"]:checked + .zlyteRadioSlider::before {
	left: 2.25rem;
}
.zlyteRadioSlider::after {
	content: '';
	position: absolute;
	display: inline-block;
	z-index: 0;
	width: 3.5rem;
	height: 0.2rem;
	top: 0.6rem;
	left: 0;
	background: var(--zlyte-radio-slider-bar-bg);
}
input[type="radio"]:checked + .zlyteRadioSlider::after {
	background: var(--zlyte-radio-slider-bar-checked-bg);
}
.zlyteRadioSliderText {
	padding-left: 4.25rem;
	vertical-align: middle;
}
.zlyteRadioDisabled .zlyteRadioSlider::after,
.zlyteRadioDisabled .zlyteRadioSwitch,
.zlyteRadioDisabled .zlyteRadioLayer {
	opacity: 0.5;
}
.zlyteRadioDisabled .zlyteRadioSlider::before {
	opacity: 0.8;
	background: #f5f5f5;
}
.zlyteRadioDisabled input[type="radio"]:active + .zlyteRadioLayer,
.zlyteRadioDisabled .zlytePrimary input[type="radio"]:active + .zlyteRadioLayer,
.zlyteRadioDisabled .zlyteSecondary input[type="radio"]:active + .zlyteRadioLayer,
.zlyteRadioDisabled label.zlyteSecondary:hover .zlyteRadioLayer,
.zlyteRadioDisabled label.zlytePrimary:hover .zlyteRadioLayer,
.zlyteRadioDisabled label:hover .zlyteRadioLayer {
	border: 1px solid var(--zlyte-radio-border-color);
}
.zlyteRadioDisabled label:hover .zlyteRadioLabel {
	color: var(--zlyte-radio-text-color);
}
/*	CSS for handling bigger labels in Radio button BEGINS	*/
zlyte-radiobutton.zlyteRadioLabelBiggerCase {
	max-width: 100%;
}
zlyte-radiobutton.zlyteRadioLabelBiggerCase label {
	display: flex;
}
zlyte-radiobutton.zlyteRadioLabelBiggerCase .zlyteRadioLayer {
	flex-shrink: 0;
}
zlyte-radiobutton.zlyteRadioLabelBiggerCase .zlyteRadioLabel {
	overflow: auto;
	overflow-wrap: break-word;
	white-space: normal;
}
.zlyteRadioCheckbox {
	display: inline-block;
	border: 1px solid;
	width: 20px;
	height: 20px;
	border-radius: 5px;
}
zlyte-radiobutton input[type="radio"]:checked + .lyteRadioCheckbox::after {
	mask-image: url(assets/check.png);
	mask-size: 100%;
	display: block;
	content: "";
	background-color: blue;
	width: 20px;
	height: 20px;
}
/*	CSS for handling bigger labels in Radio button ENDS	*/
/* import theme overrides - styles s*/
/* import custom css */
/* Make preferred css changes over here.
 * This will be added to the end of the styles/radiobutton.less file
 */
/* Radiobutton CSS ENDS */
.zlyteAccentColorsRow{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.zlyteAccentColor {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    margin-inline-end: 16px; 
    background-color: var(--accentColor);
    writing-mode: horizontal-tb;
}
.zlyteAccentColor:last-of-type{
    margin-inline-end: 0; 
}
.accentSeparator{
    width: 1px;
    height: 18px;
    background: grey;
}
.zlyteMoreAccentButton{
    cursor: pointer;
    color: #5890dd;
    display: flex;
    align-items: center;
}

lyte-radiobutton label{
    width: 100%;
    height: 100%;
}
lyte-radiobutton input{
    cursor: pointer;
}

.lyteRadioCheckbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 100%;
    height: 100%;
}

lyte-radiobutton input[type="radio"]:checked + .lyteRadioCheckbox::after {
    mask-image: url(../../images/sprite_zlyte.svg);
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../../images/sprite_zlyte.svg);
    -webkit-mask-repeat: no-repeat;
    background-color: #fff;
    flex-shrink: 0;
    height: 12px;
    width: 15px;
}

zlyte-appearance-thumbnail{
    padding-inline-end: 24px;
}
.zlyteAppearanceThumbnail{
    display: flex;
}
.zlyteAppearanceThumbnailWrapper{
    width: 92px;
    height: 98px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    cursor: pointer;
    margin-inline-end: 16px;
    border: solid 1px transparent;
}
.zlyteAppearanceThumbnailWrapper.zlyteAppearanceThumbnailWrapperActive{
    background-color: rgb(153,192,231,.1);   
    border: solid 1px rgb(153,192,231);
}
.zlyteAppearanceThumbnailImg{
    border:solid 1px #ccc;
    box-sizing: border-box;
    height: 58px;
    width: 84px;
    margin: 4px;
    display: flex;
    margin-bottom:0px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.zlyteSystemAppearanceImg{
    display: flex;
    width: 50%;
}
.zlyteSystemAppearanceImg .zlyteThumbnailBody{
    width: 14px;
}
.zlyteAppearanceThumbnailText{
    font-size: 12px;
    margin:12px ;
    text-align: left;
}
.zlyteThumbnailLeftPanel{
    width: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--panel-bg);
}
.zlyteThumbnailLeftPanel > span{
    height: 2px;
    width: 18px;
    background-color: #777;
    margin-inline-start: 5px;
    margin-block-start: 4px;
}
.zlyteThumbnailLeftPanel > span:first-child{
    height: 3px;
    width: 14px;
    margin-block-start: 8px;
}
.zlyteThumbnailBody{
    width: 56px;
    height: 100%;
    background-color: var(--body-bg);
    display: flex;
    justify-content: center;
}

.zlyteNavVertical zlyte-nav-icons{
    margin-block-start: auto;
}
                    /* ====== Outer most wrapper div ======*/

.zlyteNavIcons{
    display: flex;
    justify-content: center;
}

/* When Orientation is horizontal */

.zlyteIconHorizontal.zlyteNavIcons{
    height: 48px;
    width: auto;
}

/* When Orientation is vertical */

.zlyteIconVertical.zlyteNavIcons{
    flex-direction: column;
    height: auto;
    width: 64px;
}

                    /* ====== Profile Picture part ======*/

.zlyteNavProfilePic{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* When Orientation is horizontal */

.zlyteIconHorizontal .zlyteNavProfilePic{
    padding: 8px;
    margin-inline: 16px 0px;
    writing-mode: horizontal-tb;
}

/* When Orientation is vertical */

.zlyteIconVertical .zlyteNavProfilePic{
    width: 64px;
    height: 64px;
    padding-block-end: 8px
}

.zlyteNavProfilePicImgWrap{
    height: 32px;
    position: relative;
}

.zlyteNavProfilePicImg{
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid grey;
    border-radius: 50%;
}

.zlyteNavUserStatus{
    position: absolute;
	bottom: 0;
	right: 0;
	width: 8px;
	height: 8px;
	background-color: green;
	border-radius: 50%;
}

                    /* ====== Nav icons part ======*/

.zlyteNavIconsWrap{
    display: flex;
}                    


/* When Orientation is horizontal */

.zlyteIconHorizontal .zlyteNavIconsWrap{
    column-gap: 24px;
    align-items: center;
}

/* When Orientation is vertical */

.zlyteIconVertical .zlyteNavIconsWrap{
    width: 64px;
    height: auto;
    flex-direction: column;
    row-gap: 24px;
    padding-block-end : 8px;
    align-items: center;
}


.zlyteNavIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
	z-index: 2;
    cursor: pointer;
}
.zlyteNavIcon svg{
    display: block;
    height: 16px;
}
.zlyteSvgIcon{
    fill: var(--zlyte-nav-icon-fill);
}
.zlyteNavIcon .lyteBadge{
	padding: 0;
}
.zlyteNavIcon .lyteBadgeContent{
    font-size: 6px;
}
.zlyteNavIcon .lyteBadgeWidHeiD{
    width: 16px;
    height: 8px;
    line-height: 8px;
    font-size: 11px;
}
.zlyteNavCreateIcon svg{
    fill: var(--zlyte-accent-color);
    width: 32px;
    height: 32px;
}


zlyte-nav-icon:not(.zlyteNavCreateIcon)::after {
    content: "";
    width: 32px;
    height: 32px;
    /* background: var(--zohonaviconBackgroundColor); */
    background: var(--zlyte-icon-hover);
    display: inline-block;
    position: absolute;
    z-index: -1;
    transform: scale(0.5);
    opacity: 0;
    border-radius: 4px;
    transition: 0.3s linear;
}
zlyte-nav-icon:hover::after{
	opacity: .1;
	transform:scale(1);
}

.zlyteIconHorizontal zlyte-nav-icon:not(.zlyteNavCreateIcon)::after {
    top: -8px;
    left: -8px;
}
.zlyteIconVertical zlyte-nav-icon:not(.zlyteNavCreateIcon)::after {
    top: unset;
    left: unset;
}



.zlyteNavCreateButton{
    height: 32px;
    background: var(--zlyte-accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}
.zlyteNavCreateButton svg{
    fill: var(--zlyte-accent-color);
    height: 100%;
}
.zlyteNavCreateButton span{
    color: #fff;
    margin-inline-end: 8px;
}



.zlyteNavCreateDropdown{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color:var(--zlyte-accent-color);
    border-radius: 3px;
}
.zlyteNavCreateDropdown lyte-icon.dropdown{
    background-position: -14px -2px;
    width: 9px;
    height: 5px;
}
.zlyteNavCreateDropdown svg{
    fill: var(--zlyte-accent-color);
    height: 32px;
    width: 32px;
}
.zlyteNavCreateDropdown .lyteDropPlaceholderNormal{
    margin: 0;
    padding: 0;
}
.zlyteNavCreateDropdown .lyteDummyEventContainer:focus lyte-drop-button:hover,
.zlyteNavCreateDropdown .lyteDummyEventContainer:focus lyte-drop-button,
.zlyteNavCreateDropdown lyte-drop-button:hover,
.zlyteNavCreateDropdown lyte-drop-button {
    border: 0;
    background: transparent;
    padding: 0;
    padding-inline-end: 8px;
    box-shadow: none;
    display: flex;
    align-items: center
}
.zlyteNavCreateDropdown lyte-drop-button{
    border: 0;
    background: inherit;
}
.zlyteNavCreateDropdown lyte-icon.dropdown{
    position: unset;	
}

                    /* ====== Bento icon part ======*/

.zlyteNavBento{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* When Orientation is horizontal */

.zlyteIconHorizontal .zlyteNavBento{
    width: 48px;
    height: 48px;
}

/* When Orientation is vertical */

.zlyteIconVertical .zlyteNavBento{
    width: 64px;
    /* height: 64px; */
    margin-inline-end: 24px;
    writing-mode: vertical-lr;
}

/* Bento style and animations starts here */

:root {
    --zicon-zindex-active: 999999;
}

.zlyteNavBentoIcon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

button.zlyteNavBentoIcon {
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
}

.zlyteNav_candybox {
    position: relative;
    width: 16px;
    height: 16px;
}

.zlyteNav_candybox_dots {
    width: 100%;
    height: 100%;
    position: absolute;
}

.zlyteNav_candybox_dots > span {
    width: 4px;
    height: 4px;
    background-color: var(--zlyte-nav-icon-fill, #555);
    display: block;
    position: absolute;
    border-radius: 50%;
    transform-origin: center center;
    transform: scale(1);
    transition: 350ms 0.25s cubic-bezier(0.8, 0.5, 0.2, 1.4);
    opacity: 1;
}

.zlyteNav_candybox_dots > span:nth-child(1) {
    left: 0;
    top: 0;
}

.zlyteNav_candybox_dots > span:nth-child(2) {
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
}

.zlyteNav_candybox_dots > span:nth-child(3) {
    right: 0;
    top: 0;
}

.zlyteNav_candybox_dots > span:nth-child(4) {
    left: 0;
    top: 6px;
}

.zlyteNav_candybox_dots > span:nth-child(5) {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.zlyteNav_candybox_dots > span:nth-child(6) {
    right: 0;
    top: 6px;
}

.zlyteNav_candybox_dots > span:nth-child(7) {
    left: 0;
    bottom: 0px;
}

.zlyteNav_candybox_dots > span:nth-child(8) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.zlyteNav_candybox_dots > span:nth-child(9) {
    right: 0;
    bottom: 0px;
}

.zlyteNav_candybox__z-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.zlyteNav_candybox_z-icon_path1, .zlyteNav_candybox_z-icon_path2 {
    fill: none;
    stroke: var(--zlyte-nav-icon-fill, #555);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    animation: zline0-r .5s .15s linear forwards;
    transition: opacity .5s .15s ease-in-out;
    opacity: 0;
}

.zlyteNav_candybox_z-icon_path1 {
    stroke-dasharray: 600;
}

.zlyteNav_candybox_z-icon_path2 {
    stroke-dasharray: 300;
}

.zlyteNavBentoIcon:hover .zlyteNav_candybox_dots > span, .zlyteNavBentoIcon--active .zlyteNav_candybox_dots > span {
    transform: scale(0);
    opacity: 0;
}

.zlyteNavBentoIcon:hover .zlyteNav_candybox_z-icon_path1, .zlyteNavBentoIcon--active .zlyteNav_candybox_z-icon_path1 {
    animation: zline0 .5s .15s linear forwards;
    transition: opacity .5s .15s ease-in-out;
    opacity: 1;
}

.zlyteNavBentoIcon:hover .zlyteNav_candybox_z-icon_path2, .zlyteNavBentoIcon--active .zlyteNav_candybox_z-icon_path2 {
    animation: zline1 .5s .15s linear forwards;
    transition: opacity .5s .15s ease-in-out;
    opacity: 1;
}

.zlyteNavBentoIcon--active {
    z-index: var(--zicon-zindex-active, 999999);
    position: relative;
}

.zlyteNavBentoIcon--active .zlyteNav_candybox_z-icon_path1, .zlyteNavBentoIcon--active .zlyteNav_candybox_z-icon_path2 {
    stroke: var(--zicon-stroke-active-color, #fff);
}

@keyframes zline0 {
    from {
        stroke-dashoffset: -300;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes zline0-r {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -300;
    }
}

@keyframes zline1 {
    from {
        stroke-dashoffset: 300;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes zline1-r {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 300;
    }
}

/* Bento style and animations ends here */
.zlyteLogoHorizontal.zlyteNavLogoWrapper{
    height: 100%;
    display: flex;
    align-items: center;
}
.zlyteLogoVertical.zlyteNavLogoWrapper{
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zlyteNavLogo{
    height: 24px;
    width: 24px;
    display: flex;
}
.zlyteNavCustomLogo{
    height: 24px;
    max-width: 168px;
    display: flex;
}
.zlyteNavCustomLogo .zlyteNavLogoImg{
    height: 100%;
    width: auto;
}
.zlyteLogoHorizontal .zlyteNavLogo,
.zlyteLogoHorizontal .zlyteNavCustomLogo{
    margin-block-start: 16px;
    writing-mode: var(--writing-mode);
}
.zlyteLandscapeImage{
    width: 100%;
    height: auto;
}
.zlytePortraitImage{
    height: 100%;
    width: auto;
}

.zlyteNavLogoName{
    height: 24px;
    margin-inline-start: 8px;
    margin-inline-end: 16px;
}
.zlyteLogoProductName{
    font-size: 18px;
    font-family: "PuviRegular", sans-serif;
}
.zlyteLogoProductName a{
    color:var(--color);
    text-decoration: none;
}





.zlyteNavLogoWrapper lyte-icon.dropdown{
    background-position: -14px -2px;
    width: 9px;
    height: 5px;
}

.zlyteDarkTheme .lyteDropdownLabel{
    color: #fff;
}

.zlyteNavLogoWrapper .lyteDummyEventContainer:focus lyte-drop-button:hover,
.zlyteNavLogoWrapper .lyteDummyEventContainer:focus lyte-drop-button,
.zlyteNavLogoWrapper lyte-drop-button:hover,
.zlyteNavLogoWrapper lyte-drop-button {
    border: 0;
    background: transparent;
    padding: 0 8px;
    box-shadow: none;
    display: flex;
    align-items: center
}

.zlyteNavLogoWrapper lyte-icon.dropdown {
	margin-inline-start: 8px;
    writing-mode: horizontal-tb;
}
.zlyteNavLogoWrapper lyte-icon.dropdown{
    position: unset;	
}
.zlyteNavMenus{
    display: flex;
}
zlyte-nav[lt-prop-orientation="vertical"] {
	display: inline-flex;
}
zlyte-nav[lt-prop-orientation="horizontal"] .zlyteNavRightAlign {
	display: flex;
	align-self: stretch;
}
.zlyteMenuHorizontal.zlyteNavMenus{
    padding-bottom: 1px;
}
.zlyteMenuVertical.zlyteNavMenus {
    width: 64px;
    align-items: center;
    flex-direction: column;
}
.zlyteNavMenuWithoutIcon.zlyteNavMenu{
    font-size: 14px;
    padding: 0px 8px;
    margin-block: 1px;
    margin-inline:8px;
    display: flex;
    align-items: center;
    border-bottom : solid 3px transparent;
    box-sizing: border-box;
    cursor: pointer;
    transition-duration: .3s;
}
.zlyteMenuVertical .zlyteNavMenuWithoutIcon.zlyteNavMenu {
	flex-direction: column;
}
.zlyteNavMenuWithoutIcon.zlyteNavMenu a{
	text-decoration: none;
	transition-duration: .3s;
	color:var(--zlyte-nav-font-color);
}
.zlyteMenuHorizontal .zlyteNavMenuWithoutIcon.zlyteNavMenu:hover{
    border-bottom : solid 3px;
	border-color:var(--zlyte-nav-border-color);
}
.zlyteMenuHorizontal .zlyteNavMenuWithoutIcon.zlyteNavMenu:hover a{
	color:var(--zlyte-accent-color);
}

.zlyteNavMoreIcon{
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 16px;
    margin-inline: 8px;
	padding: 16px 0px;
}
.zlyteNavMoreIcon span{
	width: 2px;
	height: 2px;
	border-radius: 50%;
	border:solid 1px #000;
}



.zlyteNavMenuWithIcon.zlyteNavMenu{
	height: 64px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	cursor: pointer;
	transition: background 0.3s linear;
}
.zlyteNavMenuWithIcon.zlyteNavMenuActive{
	background: var(--zlyte-accent-color);
}
.zlyteNavMenuIcon {
	height: 16px;
	width: 16px;
	margin-bottom: 8px;
}
.zlyteNavMenuImgWrapper img.zlyteNavMenuImg{
	height: 16px;
	width: 16px;
	margin-bottom: 8px;
}
.zlyteNavMenuWithIcon .zlyteNavMenuTitle{
	padding: 0 4px;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.zlyteNavMenuWithIcon .zlyteNavMenuTitle a{
	font-size: 12px;
	text-decoration: none;
	color:var(--zlyte-nav-font-color);
}
.zlyteMenuVertical .zlyteNavMenu:hover{
	background: var(--zlyte-accent-color);
}
.zlyteMenuVertical .zlyteNavMenu:hover a{
	color: #fff;
}
/* .zlyteNavHorizontal zlyte-portal-dropdown{
    margin-inline-start: auto;
} */

.zlyteNavPortalDropdown lyte-icon.dropdown{
    background-position: -14px -2px;
    width: 9px;
    height: 5px;
}

.zlyteDarkTheme .lyteDropdownLabel{
    color:var(--zlyte-nav-font-color);
}

.zlyteNavPortalDropdown .lyteDummyEventContainer:focus lyte-drop-button:hover,
.zlyteNavPortalDropdown .lyteDummyEventContainer:focus lyte-drop-button,
.zlyteNavPortalDropdown lyte-drop-button:hover,
.zlyteNavPortalDropdown lyte-drop-button {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center
}

.zlyteNavPortalDropdown lyte-icon.dropdown {
	margin-inline-start: 8px;
    writing-mode: horizontal-tb;
}
.zlyteNavPortalDropdown lyte-icon.dropdown{
    position: unset;	
}