/** 
  Amexio Colors v2.0. Copyright (c) 2018-19 MetaMagic Global Inc, NJ, USA 

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.

  This program and the accompanying materials are licensed under
  the terms of the Apache 2 License version 2.0 as published by the Apache
  Software Foundation.
*/
/** Initialze Theme variables ------------ */
/** 
  Amexio Colors v2.0. Copyright (c) 2018-19 MetaMagic Global Inc, NJ, USA 
*/
/**
  Theme Details -------------------------------------------------------- 
  Theme Name    : Firebrick Crimson
  Theme Version : 4.1
  Design Type   : Material Design
  Release Date  : Feb 28, 2018
  Algo Name     : Classic Dual Color
  Algo ID       : 0
  Author        : This theme is fully autogenerated by Amexio Colors.
*/
:root {
  --appTransparency: rgba(0,0,0,0.87);
  /** Theme Color in CSS Variables ------------------------------- */
  --themePrimaryColor: #b22222;
  --themeSecondaryColor: #dc143c;
  --theme3rdColor: #b4b422;
  --theme4thColor: #6bb422;
  --theme5thColor: #22b422;
  --theme6thColor: #22b46b;
  --themePrimaryDarker: #741616;
  --themePrimaryColorHSLA: hsla(0,68%,42%,0.0);
  --themeSecondaryColorHSLA: hsla(348,83%,47%,0.0);
  --theme3rdColorHSLA: hsla(60,68%,42%,0.0);
  --theme4thColorHSLA: hsla(90,68%,42%,0.0);
  --theme5thColorHSLA: hsla(120,68%,42%,0.0);
  --theme6thColorHSLA: hsla(150,68%,42%,0.0);
  --themePrimaryDarkerHSLA: hsla(0,68%,27%,0.0);
  /** Primary Color shades -------------------------- */
  --themePrimaryColorShade0: #050000;
  --themePrimaryColorShade1: #380000;
  --themePrimaryColorShade2: #9e0000;
  --themePrimaryColorShade3: #ff0505;
  --themePrimaryColorShade4: #ff6b6b;
  --themePrimaryColorShade5: #ffd1d1;
  --themePrimaryColorShade6: #fff5f5;
  /** Theme Color Gradients -------------------------- */
  --themePrimaryColorGradient: linear-gradient(to right, #380000, #e00000, #ff5c5c);
  --themeSecondaryColorGradient: linear-gradient(to right, #38000b, #e0002d, #ff5c7c);
  --theme3rdColorGradient: linear-gradient(to right, #383800, #e0e000, #ffff5c);
  --theme4thColorGradient: linear-gradient(to right, #1c3800, #70e000, #adff5c);
  --theme5thColorGradient: linear-gradient(to right, #003800, #00e000, #5cff5c);
  --theme6thColorGradient: linear-gradient(to right, #00381c, #00e070, #5cffad);
  --themePrimaryDarkerGradient: linear-gradient(to right, #380000, #e00000, #ff5c5c);
  /** Theme Font Family -------------------------- */
  --themeFontColor: #1f0000;
  --themeFontFamily: Roboto,Trebuchet MS,Arial,Helvetica,sans-serif;
  --themePrimaryFontColor: #fceeee;
  --themeSecondaryFontColor: #fffafb;
  --theme3rdFontColor: #fcfcee;
  --theme4thFontColor: #f5fcee;
  --theme5thFontColor: #eefcee;
  --theme6thFontColor: #eefcf5;
  --themePrimaryDarkerFontColor: #fceeee;
  /** Theme Additional Std CSS Colors : Light and Dark shades --- */
  --amexioColorRedLight: #ff7f50;
  --amexioColorRedDark: #dc143c;
  --amexioColorGreenLight: #00ff00;
  --amexioColorGreenDark: #2e8b57;
  --amexioColorPurpleLight: #ff00ff;
  --amexioColorPurpleDark: #8b008b;
  --amexioColorBlueLight: #00bfff;
  --amexioColorBlueDark: #00008b;
  --amexioColorBrownLight: #f4a460;
  --amexioColorBrownDark: #800000;
  --amexioColorYellowLight: #ffd700;
  --amexioColorYellowDark: #ff9900;
  /** App Color CSS Variables ------------------------ */
  --appBackground:#f5f5f5;
  --appBackgroundImage: none;
  --appForegroundColor:#121212;
  --appHeaderBGColor:#b22222;
  --appHeaderFontColor:#fceeee;
  --appHeaderMenuBGColor:#b22222;
  --appHeaderMenuFontColor:#fceeee;
  --appHeaderHoverBGColor:#f4c7c7;
  --appHeaderHoverFontColor:#1e0606;
  /** Component Color CSS Variables ------------------------ */
  --componentBGColor:#ffffff;
  --componentFontColor:#121212;
  --componentHeaderBGColor:#dc143c;
  --componentHeaderFontColor:#fffafb;
  --componentFooterBGColor:#fcdae0;
  --componentFooterFontColor:#090103;
  --componentDataBGColor:#1f0006;
  --componentDataFontColor:#ff9eb1;
  --componentHoverBGColor:#ffb8c6;
  --componentHoverFontColor:#520010;
  --componentActiveBGColor:#ff6b89;
  --componentActiveFontColor:#1f0006;
  --componentDisabledBGColor:#dbc2c7;
  --componentDisabledFontColor:#a3626f;
  --componentBoxShadow:0 0px 1px 0 white, 0 2px 10px 0 rgba(0, 0, 0, 0.12) ; }

/** Theme Color Variables ------------------------------- */
/** Primary Color shades -------------------------- */
/** Theme Color Gradients -------------------------- */
/** Theme Font Family -------------------------- */
/** Theme Additional Std Colors : Light and Dark shades --- */
/** App Color Variables ------------------------ */
/** Component Color Variables ------------------------ */
/** 
  Amexio Colors v2.0 Updated on April 10, 2019.
  Amexio Support ---------------------------------- 
  Contact  : amexiosupport@metamagic.in 
  Home     : http://www.amexio.tech/
  API Docs : http://api.amexio.tech/
  Demos    : http://demo.amexio.tech/
  Source   : https://github.com/meta-magic/amexio.github.io
*/
/** Initialze HTML variables ------------ */
/* Misc Variables */
/****************************************************************************
                    Common CSS Helper Classes
*****************************************************************************/
body {
  background: var(--appBackground);
  min-height: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-weight: 400;
  font-size: 1em;
  margin: 0px;
  padding: 0px; }

html {
  height: 100%;
  width: 100%; }

body {
  font-family: Roboto,Verdana,sans-serif, Helvetica,Arial,Trebuchet MS;
  background-image: var(--appBackgroundImage); }

.helperHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.inline-block {
  display: inline-block; }

.float-right {
  float: right; }

.float-left {
  float: left; }

.flex-inline {
  display: flex;
  flex-direction: row; }

.flex-col {
  display: flex;
  flex-direction: column; }

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

.flex-start {
  justify-content: flex-start; }

.flex-end {
  justify-content: flex-end; }

.flex-spacebetween {
  justify-content: space-between; }

.border-bottom {
  border-bottom: 1px solid #cccccc; }

.border-top {
  border-top: 1px solid #cccccc; }

.border-left {
  border-left: 1px solid #cccccc; }

.border-right {
  border-right: 1px solid #cccccc; }

.header {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor);
  padding: 10px;
  overflow: hidden; }

.header .title {
  float: left;
  font-size: 20px; }

.table {
  display: table;
  padding: 5px; }

.table .tablerow {
  display: table-row; }

.table .tablerow .tablecol {
  display: table-cell;
  padding-right: 5px;
  padding-left: 5px;
  vertical-align: middle; }

.table {
  display: table;
  padding: 5px; }

.table .tablerow {
  display: table-row; }

.table .tablerow .tablecol {
  display: table-cell;
  padding-right: 5px;
  padding-left: 5px;
  vertical-align: middle; }

.vertical-table {
  display: table;
  padding: 5px; }

.vertical-table .vertical-tablerow {
  display: table-row; }

.vertical-table .vertical-tablerow .vertical-tablecol {
  display: table-cell; }

.listbox .header .table .tablerow .tablecol {
  padding-right: 0px !important; }

.disable-component {
  opacity: 0.50;
  pointer-events: none;
  cursor: not-allowed; }

.defaultcolor {
  color: var(--themeFontColor); }

.verticalalign-tableft {
  border-right: 1px solid #ced4da !important; }

.verticalalign-tabright {
  display: inline-table;
  border-left: 1px solid #ced4da !important; }

.verticalalign-tabcontent {
  vertical-align: top !important; }

/*
We set the element we are applying our loading mask to relative
*/
.loading-mask {
  position: relative; }

/*
Because we set .loading-mask relative, we can span our ::before
element over the whole parent element
*/
.loading-mask::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

input:disabled {
  opacity: 0.55;
  cursor: not-allowed; }

/*
Spin animation for .loading-mask::after
*/
@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
label {
  display: inline-block;
  max-width: 100%;
  font-size: 14px;
  font-weight: 500; }

a {
  color: var(--appTransparency); }

textarea {
  font-family: inherit; }

textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed; }

/*
The loading throbber is a single spinning element with three
visible borders and a border-radius of 50%.
Instead of a border we could also use a font-icon or any
image using the content attribute.
*/
.loading-mask::after {
  content: "";
  position: absolute;
  border-width: 3px;
  border-style: solid;
  border-color: transparent var(--themeSecondaryColor) var(--themeSecondaryColor);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  animation: 2s linear 0s normal none infinite running spin;
  filter: drop-shadow(0 0 2 rgba(0, 0, 0, 0.33)); }

/** **/
@keyframes spinner {
  to {
    transform: rotate(360deg); } }
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--themeSecondaryColor);
  border-bottom-color: var(--themeSecondaryColor);
  animation: spinner .8s ease infinite; }

.row-disabled {
  opacity: 0.55; }

/** Theme Additional Std Colors : Light and Dark shades --- */
/** Theme Additional Std Font Colors : Light and Dark shades --- */
/** CSS Class definitions for the Amexio Colors --- */
/** Amexio Colors --- 
   Coral: #ff7f50 rgb(255,127,80,0.0);
   240a00: #240a00 rgb(36,10,0,0.0);
*/
.amexio-red-light {
  background-color: #ff7f50;
  color: #240a00; }

/** Amexio Colors --- 
   Crimson: #dc143c rgb(220,20,60,0.0);
   fffafb: #fffafb rgb(255,250,251,0.0);
*/
.amexio-red {
  background-color: #dc143c;
  color: #fffafb; }

/** Amexio Colors --- 
   Lime: #00ff00 rgb(0,255,0,0.0);
   002400: #002400 rgb(0,36,0,0.0);
*/
.amexio-green-light {
  background-color: #00ff00;
  color: #002400; }

/** Amexio Colors --- 
   SeaGreen: #2e8b57 rgb(46,139,87,0.0);
   f0faf4: #f0faf4 rgb(240,250,244,0.0);
*/
.amexio-green {
  background-color: #2e8b57;
  color: #f0faf4; }

/** Amexio Colors --- 
   Magenta: #ff00ff rgb(255,0,255,0.0);
   fffaff: #fffaff rgb(255,250,255,0.0);
*/
.amexio-purple-light {
  background-color: #ff00ff;
  color: #050005; }

/** Amexio Colors --- 
   DarkMagenta: #8b008b rgb(139,0,139,0.0);
   fffaff: #fffaff rgb(255,250,255,0.0);
*/
.amexio-purple {
  background-color: #8b008b;
  color: #050005; }

/** Amexio Colors --- 
   DeepSkyBlue: #00bfff rgb(0,191,255,0.0);
   f0fbff: #f0fbff rgb(240,251,255,0.0);
*/
.amexio-blue-light {
  background-color: #00bfff;
  color: #000507; }

/** Amexio Colors --- 
   DarkBlue: #00008b rgb(0,0,139,0.0);
   f5f5ff: #f5f5ff rgb(245,245,255,0.0);
*/
.amexio-blue {
  background-color: #00008b;
  color: #f5f5ff; }

/** Amexio Colors --- 
   SandyBrown: #f4a460 rgb(244,164,96,0.0);
   211102: #211102 rgb(33,17,2,0.0);
*/
.amexio-brown-light {
  background-color: #f4a460;
  color: #211102; }

/** Amexio Colors --- 
   Maroon: #800000 rgb(128,0,0,0.0);
   ffebeb: #ffebeb rgb(255,235,235,0.0);
*/
.amexio-brown {
  background-color: #800000;
  color: #ffebeb; }

/** Amexio Colors --- 
   Gold: #ffd700 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-yellow-light {
  background-color: #ffd700;
  color: #241e00; }

/** Amexio Colors --- 
   ff9900: #ff9900 rgb(255,153,0,0.0);
   241500: #241500 rgb(36,21,0,0.0);
*/
.amexio-yellow {
  background-color: #ff9900;
  color: #241500; }

/** Amexio Colors --- 
   Black: #000000 rgb(0,0,0,0.0);
   White: #ffffff rgb(255,255,255,0.0);
*/
.amexio-black {
  background-color: #000000;
  color: #ffffff; }

/** Amexio Colors --- 
   White: #ffffff rgb(255,255,255,0.0);
   Black: #000000 rgb(0,0,0,0.0);
*/
.amexio-white {
  background-color: #ffffff;
  color: #000000; }

/* You can add global styles to this file, and also import other style files */
.amexio-primary-darker-color {
  background-color: var(--themePrimaryDarker) !important;
  color: var(--themePrimaryDarkerFontColor) !important; }

.amexio-theme-color1 {
  background-color: var(--themePrimaryColor) !important;
  color: var(--themePrimaryFontColor) !important; }

.amexio-theme-color2 {
  background-color: var(--themeSecondaryColor) !important;
  color: var(--themeSecondaryFontColor) !important; }

.amexio-theme-color3 {
  background-color: var(--theme3rdColor) !important;
  color: var(--theme3rdFontColor) !important; }

.amexio-theme-color4 {
  background-color: var(--theme4thColor) !important;
  color: var(--theme4thFontColor) !important; }

.amexio-theme-color5 {
  background-color: var(--theme5thColor) !important;
  color: var(--theme5thFontColor) !important; }

.amexio-theme-color6 {
  background-color: var(--theme6thColor) !important;
  color: var(--theme6thFontColor) !important; }

.amexio-primary-darker-color-Gradient {
  background-image: var(--themePrimaryDarkerGradient) !important;
  color: white !important; }

.amexio-theme-color1-Gradient {
  background-image: var(--themePrimaryColorGradient) !important;
  color: white !important; }

.amexio-theme-color2-Gradient {
  background-image: var(--themeSecondaryColorGradient) !important;
  color: white !important; }

.amexio-theme-color3-Gradient {
  background-image: var(--theme3rdColorGradient) !important;
  color: white !important; }

.amexio-theme-color4-Gradient {
  background-image: var(--theme4thColorGradient) !important;
  color: white !important; }

.amexio-theme-color5-Gradient {
  background-image: var(--theme5thColorGradient) !important;
  color: white !important; }

.amexio-theme-color6-Gradient {
  background-image: var(--theme6thColorGradient) !important;
  color: white !important; }

.tabwapper .tab .tablistitems .tablink .table {
  padding: 0px !important; }

/** Initialze Component variables ------------ */
/****************************************************************************
    Component Name : Button
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** button - Visual CSS **/
.button-secondary {
  background-color: var(--componentBGColor);
  border-color: #ced4da;
  color: var(--componentFontColor); }

.button-secondary:hover:enabled {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.btn-badge {
  background-color: var(--componentActiveBGColor);
  color: var(--componentHeaderBGColor); }

.btn-primary-badge {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

.btn-secondary-badge {
  background-color: var(--componentFontColor);
  color: var(--componentBGColor); }

.btn-success-badge {
  background-color: var(--componentBGColor);
  color: #5cb85c; }

.btn-danger-badge {
  background-color: var(--componentBGColor);
  color: #d9534f; }

.btn-warning-badge {
  background-color: var(--componentBGColor);
  color: #f0ad4e; }

.btn-transparent-badge {
  background-color: var(--componentFontColor);
  color: var(--componentBGColor); }

.button-primary {
  background-color: var(--themeSecondaryColor);
  border-color: var(--themeSecondaryColor);
  color: var(--componentHeaderFontColor); }

.disabled {
  background-color: var(--componentDisabledBGColor);
  color: var(--componentDisabledFontColor);
  cursor: not-allowed; }

.button-primary:hover:enabled {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.button-success {
  background-color: #5cb85c;
  border-color: #5cb85c;
  color: var(--componentBGColor); }

.button-success:hover:enabled {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #2e8b57; }

.button-danger {
  background-color: #d9534f;
  border-color: #d9534f;
  color: var(--componentBGColor); }

.button-danger:hover:enabled {
  background-color: #dc143c;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.button-warning {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
  color: var(--componentBGColor); }

.button-warning:hover:enabled {
  background-color: #ff9900;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.button-transparent {
  background: var(--componentBGColor);
  color: var(--componentFontColor); }

.button-default:hover:enabled {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; }

.button-transparent::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #ced4da;
  opacity: 0;
  border-radius: 100%;
  -webkit-transform: scale(1, 1) translate(-50%);
  transform: scale(1, 1) translate(-50%);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%; }

.font-with-label {
  padding-left: 5px;
  font-family: Roboto, Trebuchet MS, Arial, Helvetica, sans-serif; }

.button-primary-disabled {
  background-color: var(--componentDisabledBGColor);
  border-color: var(--componentDisabledBGColor);
  color: var(--componentDisabledFontColor);
  cursor: not-allowed; }

.button-success-disabled {
  background-color: #9f9;
  border-color: #9f9;
  cursor: not-allowed;
  color: var(--componentDisabledFontColor); }

.button-danger-disabled {
  background-color: #ffcab6;
  border-color: #ffcab6;
  pointer-events: none;
  color: var(--componentDisabledFontColor); }

.button-warning-disabled {
  background-color: #ffe766;
  border-color: #ffe766;
  color: var(--componentDisabledFontColor);
  cursor: not-allowed; }

.disabled {
  background-color: lightgray;
  border-color: lightgray;
  color: var(--componentDisabledFontColor);
  cursor: not-allowed; }

/** button - Structure CSS **/
button {
  display: inline-block;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
  user-select: none;
  border: 1px solid #ced4da;
  padding: .5rem 1rem;
  border-radius: 2px;
  transition: all .2s ease-in-out;
  margin-right: 5px !important; }

.btn-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-primary-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-secondary-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-success-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-danger-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-warning-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-transparent-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.button-text {
  display: inline-block; }

.disabled {
  pointer-events: none; }

.button-small {
  padding: .25rem .5rem; }

.button-default {
  padding: .5rem 1rem;
  font-size: 1rem; }

.button-large {
  padding: .75rem 1.5rem;
  font-size: 1.25rem; }

.button-block {
  display: block;
  width: 100%; }

.button-transparent {
  border: none !important;
  box-shadow: none !important; }

.button-round {
  border-radius: 50%;
  vertical-align: middle; }

/****************************************************************************
    Component Name : Buttongroup
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** buttongroup - Visual CSS **/
.button-secondary {
  background-color: var(--componentBGColor);
  border-color: #ced4da;
  color: var(--componentFontColor); }

.btn-group-primary-badge {
  background-color: var(--componentBGColor);
  color: var(--themeSecondaryColor); }

.btn-group-secondary-badge {
  background-color: var(--componentFontColor);
  color: var(--componentBGColor); }

.btn-group-success-badge {
  background-color: var(--componentBGColor);
  color: #5cb85c; }

.btn-group-danger-badge {
  background-color: var(--componentBGColor);
  color: #d9534f; }

.btn-group-warning-badge {
  background-color: var(--componentBGColor);
  color: #f0ad4e; }

.btn-group-transparent-badge {
  background-color: var(--componentFontColor);
  color: var(--componentBGColor); }

.disabled {
  background-color: var(--componentDisabledBGColor);
  color: var(--componentDisabledFontColor); }

.button-success {
  background-color: #5cb85c;
  border-color: #5cb85c;
  color: var(--componentBGColor); }

.button-success:hover:enabled {
  background-color: #2e8b57; }

.button-danger {
  background-color: #d9534f;
  border-color: #d9534f;
  color: var(--componentBGColor); }

.button-danger:hover:enabled {
  background-color: #dc143c; }

.button-warning {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
  color: var(--componentBGColor); }

.button-warning:hover:enabled {
  background-color: #ff9900; }

.button-transparent {
  background: var(--componentBGColor);
  color: var(--componentFontColor); }

/** buttongroup - Structure CSS **/
.btn-group span {
    /* border: $btnGrpBorderSize solid $btnGrpBorderColor;

    cursor: pointer; /* Pointer/hand icon */ }

.btn-group button {
  margin-right: 0px !important;
  cursor: pointer; }

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table; }

.btn-group span:not(:last-child) {
  border-right: none;
  /* Prevent double borders */ }

.button-group {
  position: relative; }

.btn-group-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-group-primary-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-group-secondary-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-group-success-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-group-danger-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-group-warning-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.btn-group-transparent-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.button-text {
  display: inline-block; }

.disabled {
  pointer-events: none; }

.button-small {
  padding: .25rem .5rem; }

.button-default {
  padding: .5rem 1rem;
  font-size: 1rem; }

.button-large {
  padding: .75rem 1.5rem;
  font-size: 1.25rem; }

.button-block {
  display: block;
  width: 100%; }

.button-transparent {
  border: none !important;
  box-shadow: none !important; }

.button-round {
  border-radius: 50%;
  vertical-align: middle; }

/****************************************************************************
    Component Name : Buttondropdown
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** buttondropdown - Visual CSS **/
.btn-dropdown-badge {
  background-color: black;
  color: white; }

.button-dropdown {
  color: var(--componentFontColor);
  background-color: var(--componentBGColor); }

.button-dropdown > div:hover {
  background-color: var(--componentHoverBGColor); }

.disabled {
  background-color: var(--componentDisabledBGColor);
  color: var(--componentDisabledFontColor); }

.button-group-list-items {
  background-color: var(--componentHoverBGColor); }

/** buttondropdown - Structure CSS **/
.btn-dropdown-badge {
  padding: .25em .4em;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  margin-left: 3px; }

.button-dropdown-main {
  cursor: pointer; }

.button-dropdown {
  position: absolute;
  padding: .5rem 1rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  z-index: 3; }

.button-dropdown-up {
  bottom: 100%; }

/****************************************************************************
    Component Name : Datetime
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** datetime - Visual CSS **/
.datedropdown {
  background: var(--componentBGColor); }
  .datedropdown .dropdownlist {
    color: var(--componentDisabledFontColor); }
  .datedropdown li:hover {
    color: var(--appHeaderHoverFontColor);
    background: var(--appHeaderHoverBGColor);
    width: 30px; }
  .datedropdown .active {
    background: var(--componentActiveBGColor);
    color: var(--themePrimaryColor); }
  .datedropdown li {
    color: var(--componentDisabledFontColor); }

.datetimepicker {
  background: var(--componentBGColor); }
  .datetimepicker .datetimepickertopbar {
    background: var(--componentActiveBGColor); }
    .datetimepicker .datetimepickertopbar ul li {
      color: var(--componentHeaderFontColor); }
  .datetimepicker .days {
    background: var(--componentBGColor); }
    .datetimepicker .days li {
      color: var(--componentDisabledFontColor); }
    .datetimepicker .days li:hover {
      color: var(--componentActiveBGColor); }
    .datetimepicker .days li:focus {
      outline: none;
      background: var(--componentHoverBGColor) !important;
      color: var(--componentHoverFontColor) !important; }
    .datetimepicker .days .active {
      background: var(--componentActiveBGColor);
      color: var(--themePrimaryColor); }
    .datetimepicker .days .currentMonth {
      font-weight: bold; }

.datetimepicker1 {
  background: var(--componentBGColor); }
  .datetimepicker1 .datetimepickertopbar {
    background: var(--componentActiveBGColor); }
    .datetimepicker1 .datetimepickertopbar ul li {
      color: var(--componentHeaderFontColor); }
  .datetimepicker1 .days {
    background: var(--componentBGColor); }
    .datetimepicker1 .days li {
      color: var(--componentDisabledFontColor); }
    .datetimepicker1 .days li:hover {
      color: var(--componentActiveBGColor); }
    .datetimepicker1 .days li:focus {
      outline: none;
      background: var(--componentHoverBGColor) !important;
      color: var(--componentHoverFontColor) !important; }
    .datetimepicker1 .days .active {
      background: var(--componentActiveBGColor);
      color: var(--themePrimaryColor); }
    .datetimepicker1 .days .currentMonth {
      font-weight: bold; }

.datetimepicker-up {
  bottom: 100%; }

.datetimepicker:disabled {
  background-color: var(--componentDisabledBGColor);
  color: var(--componentDisabledFontColor); }

@media screen and (max-width: 600px) {
  .datetimepicker .days .date-today {
    padding-top: 1%;
    padding-left: 36%; } }
.dropspan2 {
  border-color: var(--componentDisabledFontColor); }

.datedropbtn {
  background-color: var(--themeSecondaryColor);
  color: var(--componentBGColor); }

.change4 {
  background-color: var(--componentActiveBGColor); }

.day:focus {
  outline: none;
  border-radius: 135px;
  padding: 5px;
  background: var(--componentHoverBGColor) !important;
  color: var(--componentHoverFontColor) !important; }

/** datetime - Structure CSS **/
.datetimepicker {
  display: block;
  position: absolute;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  z-index: 300;
  width: 290px; }
  .datetimepicker .datetimepickertopbar {
    padding: 10px 25px;
    text-align: center; }
    .datetimepicker .datetimepickertopbar .title {
      font-size: 18px;
      cursor: pointer; }
    .datetimepicker .datetimepickertopbar ul {
      margin: 0;
      padding: 0;
      list-style: none; }
    .datetimepicker .datetimepickertopbar ul li {
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 3px; }
    .datetimepicker .datetimepickertopbar .prev {
      float: left;
      padding-top: 10px;
      cursor: pointer; }
    .datetimepicker .datetimepickertopbar .next {
      float: right;
      padding-top: 10px;
      cursor: pointer; }
  .datetimepicker .weekdays {
    margin: 0;
    padding: 10px 0;
    list-style: none; }
    .datetimepicker .weekdays li {
      display: inline-block;
      width: 13.6%;
      text-align: center; }
  .datetimepicker .days {
    padding: 10px 0;
    margin: 0;
    cursor: pointer;
    list-style: none; }
    .datetimepicker .days li {
      list-style-type: none;
      display: inline-block;
      width: 13.6%;
      height: 20px;
      text-align: center;
      margin-bottom: 5px;
      font-size: 12px;
      cursor: pointer; }
    .datetimepicker .days .active {
      border-radius: 135px;
      padding: 5px; }
    .datetimepicker .days .date-today {
      padding-top: 1%;
      padding-left: 42%; }

.datetimepicker1 {
  display: block;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  z-index: 3;
  width: 290px; }
  .datetimepicker1 .datetimepickertopbar {
    padding: 10px 25px;
    text-align: center; }
    .datetimepicker1 .datetimepickertopbar .title {
      font-size: 18px;
      cursor: pointer; }
    .datetimepicker1 .datetimepickertopbar ul {
      margin: 0;
      padding: 0;
      list-style: none; }
    .datetimepicker1 .datetimepickertopbar ul li {
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 3px; }
    .datetimepicker1 .datetimepickertopbar .prev {
      float: left;
      padding-top: 10px;
      cursor: pointer; }
    .datetimepicker1 .datetimepickertopbar .next {
      float: right;
      padding-top: 10px;
      cursor: pointer; }
  .datetimepicker1 .weekdays {
    margin: 0;
    padding: 10px 0;
    list-style: none; }
    .datetimepicker1 .weekdays li {
      display: inline-block;
      width: 13.6%;
      text-align: center; }
  .datetimepicker1 .days {
    padding: 10px 0;
    margin: 0;
    cursor: pointer;
    list-style: none; }
    .datetimepicker1 .days li {
      list-style-type: none;
      display: inline-block;
      width: 13.6%;
      height: 20px;
      text-align: center;
      margin-bottom: 5px;
      font-size: 12px;
      cursor: pointer; }
    .datetimepicker1 .days .active {
      border-radius: 135px;
      padding: 5px; }
    .datetimepicker1 .days .date-today {
      padding-top: 1%;
      padding-left: 42%; }

.datetimepicker-up {
  bottom: 100%; }

.datetimepicker:disabled {
  cursor: not-allowed; }

.invaliddays {
  opacity: .40;
  cursor: not-allowed; }

.disabled {
  opacity: .40;
  cursor: not-allowed; }

.datedropdown {
  display: block;
  border: 1px solid #ced4da;
  box-shadow: 0 1px 3px 0 #ced4da;
  z-index: 3; }
  .datedropdown li {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    cursor: pointer; }

.dropdiv1 {
  width: 100%; }

.dropspan1 {
  float: left;
  width: 25%; }

.dropul1 {
  list-style-type: none;
  -webkit-padding-start: 5px; }

.dropspan2 {
  width: 25%;
  float: left;
  border-right: 1px solid var(--componentDisabledFontColor); }

.dropspan4 {
  width: 25%;
  display: table-row-group; }

.dropul2 {
  list-style-type: none;
  -webkit-padding-start: 15px; }

.dropiconpadding {
  cursor: pointer;
  -webkit-padding-start: 20px; }

.btndiv1 {
  position: relative;
  bottom: 0; }

.datedropbtn {
  border: none;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; }

.dropbtnspan {
  display: inline-flex;
  padding-left: 105px; }

.change4 {
  padding-left: 3px;
  padding-right: 4px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 5px;
  cursor: pointer;
  width: 30px; }

.disablearrow {
  opacity: .40;
  cursor: not-allowed;
  pointer-events: none; }

.notclickable {
  pointer-events: none; }

.customrangepanel {
  cursor: pointer;
  /* border-bottom: 1px solid black; */
  /* border-top: 1px solid black; */
  padding: 15px;
  background-color: white; }

.custom {
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 3px solid var(--themePrimaryColor); }

.tooltip {
  position: relative;
  display: inline-block; }

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: -5px;
  left: 110%; }

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  border-color: #ced4da; }

.tooltip:hover .tooltiptext {
  visibility: visible; }

/****************************************************************************
    Component Name : Dropdown
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** dropdown - Visual CSS **/
.dropdown {
  background-color: var(--componentBGColor); }

.dropdown-list .list-items:hover {
  color: var(--componentHoverFontColor);
  background-color: var(--componentHoverBGColor); }

.dropdown-list .list-items-active {
  color: var(--componentActiveFontColor);
  background-color: var(--componentActiveBGColor); }

.drodown-caret-down {
  color: var(--componentFontColor); }

.list-items-selected {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.dropdown-list::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.dropdown-list::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.dropdown-list::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

/** dropdown - Structure CSS **/
.dropdown {
  display: block;
  z-index: 1;
  opacity: 1;
  overflow: auto;
  position: absolute;
  width: 100%;
  opacity: 1.01;
  box-shadow: 0 1px 3px 0 #ced4da; }

.dropdown-up {
  bottom: 100%; }

.dropdown-list {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  max-height: 200px;
  overflow: auto;
  text-decoration: none;
  font-size: 100%;
  list-style: none; }

.dropdown-list .list-items {
  list-style: none;
  border: 0 none;
  cursor: pointer;
  font-weight: 400;
  margin: 1px 0;
  padding: .186em .313em;
  text-align: left;
  margin-left: 8px; }

.drodown-caret-down {
  position: absolute;
  right: 0;
  bottom: 2px;
  display: block;
  width: 38px;
  line-height: 38px;
  text-align: center; }

.dropdown-right {
  right: 0;
  margin-right: 10px; }

/****************************************************************************
    Component Name : Input
    Version : Amexio v4.0 onwards
*****************************************************************************/
/*----------------------------------------------------------------------*/
/*        INPUT CONTROL COMPONENT -Visual      */
/*----------------------------------------------------------------------*/
/** input - Visual CSS **/
.input-control {
  font-size: 14px;
  background-color: var(--componentBGColor);
  color: var(--componentFontColor);
  border-bottom: 1px solid rgba(0, 0, 0, 0.42); }

::placeholder {
  color: #ced4da; }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ced4da; }

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #ced4da; }

.input-control:focus {
  border-bottom: 1px solid #5cb3fd; }

.input-control-success {
  border-color: #5cb85c; }

.input-control-error {
  border-color: #d9534f !important; }

.input-control-feedback .success {
  color: #5cb85c; }

.input-control-feedback .error {
  color: #d9534f; }

.inputgroup .tooltiptext {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.input-control-disabled {
  background-color: var(--componentDisabledBGColor); }

/** input - Structure CSS **/
.inputgroup {
  position: relative; }

.inputgroup ::placeholder {
  padding-left: 5px !important; }

.inputgroup > label {
  display: inline-block;
  margin-bottom: .5rem; }

.input-control-disabled {
  opacity: 0.55;
  cursor: not-allowed; }

.input-control {
  width: 100%;
  padding: .375rem 0;
  line-height: 2;
  border-radius: 0px;
  border: none;
  border-bottom: 1px solid var(--componentFontColor);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }

.input-control:focus {
  outline: none; }

.input-control-feedback {
  position: absolute;
  bottom: 10px;
  right: 0;
  display: block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  pointer-events: none; }

.input-control-eye {
  position: absolute;
  bottom: 10px;
  right: 0;
  display: block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center; }

.inputgroup .tooltiptext {
  border: 1px solid #ced4da;
  position: absolute;
  z-index: 1;
  padding-left: 5px; }

/****************************************************************************
    Component Name : Fileupload
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** fileupload - Visual CSS **/
.upload-drop-zone {
  color: var(--appHeaderMenuBGColor);
  border-color: var(--appHeaderMenuBGColor); }

.upload-drop-zone.drop {
  color: var(--appHeaderMenuBGColor);
  border-color: var(--appHeaderMenuBGColor); }

/** fileupload - Structure CSS **/
.upload-drop-zone {
  border-style: dashed;
  line-height: 200px;
  text-align: center; }

/**SPECIAL SETTING REQUIRED FOR FIREFOX***/
input:required {
  box-shadow: none; }

textarea:required {
  box-shadow: none; }

.image-title {
  display: none; }

.file-upload-box {
  list-style-type: none;
  float: left;
  z-index: 1;
  width: 100%; }

.file-upload-name {
  padding: 20;
  margin: 5px; }

.file-upload-size {
  padding-left: 70px;
  float: right;
  margin: 5px; }

.file-close {
  padding: 5px; }

.file-upload-box li {
  display: inherit; }

.file-upload-info {
  border: 1px solid lightgray;
  margin-top: 3px; }

.uploaded-file-name {
  padding-left: 2%;
  font-size: small; }

.close-icon {
  float: right;
  padding-right: 2%;
  font-size: 12px !important;
  cursor: pointer; }

/****************************************************************************
    Component Name : Collapsible Search
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** collapsible-search - Visual CSS **/
.search:focus {
  background-color: var(--componentBGColor); }

/** collapsible-search - Structure CSS **/
.search {
  background: #ededed url("search-icon.png") no-repeat 9px center;
  border: solid 1px #ced4da;
  padding: 9px 10px 9px 32px;
  outline: none;
  transition: all .5s;
  width: 55px; }

.search:focus {
  width: 150px; }

/****************************************************************************
    Component Name : Radiobox
    Version : Amexio v4.0 onwards
*****************************************************************************/
/****************************************************/
/***                  RADIO -Visual                     ***/
/****************************************************/
/** radiobox - Visual CSS **/
/* When the checkbox is checked, add a blue background */
.input-box-container input:checked ~ .input-box-radiobox-label {
  background-color: var(--componentActiveBGColor); }

/* Style the input-box-container-label/indicator */
.input-box-container .input-box-radiobox-label:after {
  background-color: var(--appHeaderBGColor); }

/** radiobox - Structure CSS **/
/* Create a custom checkbox */
.input-box-radiobox-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid #ced4da;
  border-radius: 50%; }

/* Create the input-box-container-label/indicator (hidden when not checked) */
.input-box-radiobox-label:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the input-box-container-label when checked */
.input-box-container input:checked ~ .input-box-radiobox-label:after {
  display: block; }

/* Style the input-box-container-label/indicator */
.input-box-container .input-box-radiobox-label:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%; }

/****************************************************************************
    Component Name : Checkbox
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** checkbox - Visual CSS **/
.input-box .default {
  background: var(--appBackground); }

.input-box .active {
  background: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

/* When the checkbox is checked, add a blue background */
.input-box-container input:checked ~ .input-box-checkbox-label {
  background-color: var(--componentHeaderBGColor); }

.checkbox-disable {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none; }

.focusOnCheckbox {
  border: solid #ced4da !important; }

/** checkbox - Structure CSS **/
.input-box {
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin-right: .25em; }

.input-box .checkbox {
  width: 1.125em;
  height: 1.125em;
  line-height: 1em;
  text-align: center;
  border-radius: 2px; }

.input-box .radiobox {
  width: 1.125em;
  height: 1.125em;
  line-height: 1.125em;
  text-align: center;
  border-radius: 100%; }

.input-box .default {
  border: 1px solid #ced4da; }

.input-box .active {
  border: 1px solid #ced4da; }

.input-box-container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  padding-right: 15px;
  cursor: pointer; }

/* Hide the browser's default checkbox */
.input-box-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

/* Create a custom checkbox */
.input-box-checkbox-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid #ced4da; }

/* When the checkbox is checked, add a blue background */
/* Create the input-box-container-label/indicator (hidden when not checked) */
.input-box-checkbox-label:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the input-box-container-label when checked */
.input-box-container input:checked ~ .input-box-checkbox-label:after {
  display: block; }

/* Style the input-box-container-label/indicator */
.input-box-container .input-box-checkbox-label:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ced4da;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg); }

/****************************************************************************
    Component Name : Tag
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** taginput - Visual CSS **/
.tag-input .tag {
  font-size: 11px;
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }
  .tag-input .tag .closebtn {
    font-size: 20px;
    color: var(--componentHoverBGColor); }
  .tag-input .tag .closebtn:hover {
    color: var(--componentActiveBGColor); }

/** taginput - Structure CSS **/
.tag-input {
  top: 30px;
  left: 1px;
  z-index: 2;
  display: block;
  text-align: left; }
  .tag-input .tag {
    display: inline-block;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ced4da; }
    .tag-input .tag .closebtn {
      padding-left: 10px;
      font-weight: bold;
      float: right;
      cursor: pointer; }

/****************************************************************************
    Component Name : Notification
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** notification - Visual CSS **/
.notification {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

/** notification - Structure CSS **/
.notification-content {
  position: fixed;
  z-index: 9900; }

.notification-vertical-top {
  top: 0%; }

.notification-vertical-center {
  left: 40%;
  top: 50%; }

.notification-vertical-bottom {
  bottom: 10px; }

.notification-horizontal-left {
  left: 10px; }

.notification-horizontal-center {
  left: 40%; }

.notification-horizontal-right {
  right: 0px; }

.notification {
  margin: 10px;
  padding: 12px;
  bottom: 10px;
  min-width: 250px;
  text-align: start;
  border-radius: 2px;
  font-size: 17px;
  z-index: 1;
  display: block; }
  .notification i {
    cursor: pointer; }

/****************************************************************************
    Component Name : Progress
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** progress - Visual CSS **/
.progress {
  position: relative;
  background: var(--appBackground); }
  .progress .success {
    background-color: #5cb85c; }
  .progress .warning {
    background-color: #f0ad4e; }
  .progress .danger {
    background-color: #d9534f; }
  .progress .red {
    background-color: #f0a3a3; }
  .progress .stripped {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }

.progress .success:focus {
  border: 2px solid var(--componentHoverBGColor);
  outline: none; }

.progress .warning:focus {
  border: 2px solid var(--componentHoverBGColor);
  outline: none; }

.progress .danger:focus {
  border: 2px solid var(--componentHoverBGColor);
  outline: none; }

.progress .red:focus {
  border: 2px solid var(--componentHoverBGColor);
  outline: none; }

.progress .stripped:focus {
  border: 2px solid var(--componentHoverBGColor);
  outline: none; }

/** progress - Structure CSS **/
.progress {
  height: 20px;
  /* Can be anything */
  position: relative;
  /*background: #555;*/ }

.progress > span {
  text-align: center;
  display: block;
  height: 100%;
  position: relative;
  overflow: hidden; }

.progress > span:after, .animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  overflow: hidden; }

.animate > span:after {
  display: none; }

@-webkit-keyframes move {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 50px 50px; } }
.nostripes > span > span, .nostripes > span:after {
  -webkit-animation: none; }

/****************************************************************************
    Component Name : Rating
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** rating - Visual CSS **/
.rating i {
  font-style: normal; }

.star-icon {
  color: #ced4da;
  font-size: 2em; }

.star-icon:before {
  color: var(--componentHeaderBGColor); }

.rating.disabled .star-icon:before {
  color: var(--componentDisabledBGColor); }

@-moz-document url-prefix() {
  /* Firefox Hack */
  .star-icon {
    font-size: 50px; } }
/** rating - Structure CSS **/
.rating {
  cursor: pointer;
  outline: none;
  padding: .375rem .375rem; }

.rating.readonly {
  cursor: default; }

.rating.disabled {
  cursor: not-allowed; }

.rating i {
  font-style: normal; }

.star-icon {
  color: #ced4da;
  position: relative;
  border-color: 1px solid #ced4da; }

.star-icon:before {
  content: attr(data-icon) " ";
  position: absolute;
  left: 0;
  overflow: hidden;
  width: 0; }

.rating.disabled .star-icon:before {
  text-shadow: none; }

.star-icon.half10:before {
  width: 10%; }

.star-icon.half20:before {
  width: 20%; }

.star-icon.half30:before {
  width: 30%; }

.star-icon.half40:before {
  width: 40%; }

.star-icon.half50:before {
  width: 50%; }

.star-icon.half60:before {
  width: 60%; }

.star-icon.half70:before {
  width: 70%; }

.star-icon.half80:before {
  width: 80%; }

.star-icon.half90:before {
  width: 90%; }

.star-icon.half100:before {
  width: 100%; }

@-moz-document url-prefix() {
  /* Firefox Hack */
  .star-icon {
    line-height: 34px; } }
/****************************************************************************
    Component Name : Toggle
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** toggle - Visual CSS **/
/* Rounded sliders */
.round {
  border: 1px solid #ced4da; }

/*  small size */
.smallToggleSlider {
  border: 1px solid #ced4da;
  background-color: var(--componentBGColor); }

.smallToggleSlider:before {
  background-color: var(--componentActiveBGColor); }

input:checked + .smallToggleSlider {
  background-color: var(--componentHoverBGColor); }

input:focus + .smallToggleSlider {
  box-shadow: 0 0 1px #ced4da; }

/* medium size  */
.mediumToggleSlider {
  border: 1px solid #ced4da;
  background-color: var(--componentBGColor); }

.mediumToggleSlider:before {
  background-color: var(--componentActiveBGColor); }

input:checked + .mediumToggleSlider {
  background-color: var(--componentHoverBGColor); }

input:focus + .mediumToggleSlider {
  box-shadow: 0 0 1px #ced4da; }

/* large size */
.largeToggleSlider {
  border: 1px solid #ced4da;
  background-color: var(--componentBGColor); }

.largeToggleSlider:before {
  background-color: var(--componentActiveBGColor); }

input:checked + .largeToggleSlider {
  background-color: var(--componentHoverBGColor); }

input:focus + .largeToggleSlider {
  box-shadow: 0 0 1px #ced4da; }

.smallType2ToggleSlider {
  border: 1px solid #ced4da;
  background-color: var(--componentBGColor); }

.mediumType2ToggleSlider {
  border: 1px solid #ced4da;
  background-color: var(--componentBGColor); }

.largeType2ToggleSlider {
  border: 1px solid #ced4da;
  background-color: var(--componentBGColor); }

.largeType2ToggleSlider:before {
  background-color: var(--componentActiveBGColor); }

.mediumType2ToggleSlider:before {
  background-color: var(--componentActiveBGColor); }

.smallType2ToggleSlider:before {
  background-color: var(--componentActiveBGColor); }

input:checked + .smallType2ToggleSlider {
  background-color: var(--componentHoverBGColor); }

input:checked + .mediumType2ToggleSlider {
  background-color: var(--componentHoverBGColor); }

input:checked + .largeType2ToggleSlider {
  background-color: var(--componentHoverBGColor); }

.smallToggleSlider:focus {
  outline: 1px solid var(--componentActiveBGColor); }

.mediumToggleSlider:focus {
  outline: 1px solid var(--componentActiveBGColor); }

.largeToggleSlider:focus {
  outline: 1px solid var(--componentActiveBGColor); }

.largeType2ToggleSlider:focus {
  outline: 1px solid var(--componentActiveBGColor); }

.mediumType2ToggleSlider:focus {
  outline: 1px solid var(--componentActiveBGColor); }

.smallType2ToggleSlider:focus {
  outline: 1px solid var(--componentActiveBGColor); }

/** toggle - Structure CSS **/
/* Rounded sliders */
.round {
  border-radius: 34px; }

.round:before {
  border-radius: 50%; }

/*  small size */
.smallToggle {
  position: relative;
  display: inline-block;
  width: 57px;
  height: 28px;
  vertical-align: middle; }

.smallToggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s; }

.smallToggleSlider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  top: 3px;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .smallToggleSlider:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px); }

/* medium size  */
.mediumToggle {
  position: relative;
  display: inline-block;
  width: 77px;
  height: 38px;
  vertical-align: middle; }

.mediumToggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s; }

.mediumToggleSlider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 4px;
  top: 3px;
  bottom: 4px;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .mediumToggleSlider:before {
  -webkit-transform: translateX(37px);
  -ms-transform: translateX(37px);
  transform: translateX(37px); }

/* large size */
.largeToggle {
  position: relative;
  display: inline-block;
  width: 97px;
  height: 48px;
  vertical-align: middle; }

.largeToggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s; }

.largeToggleSlider:before {
  position: absolute;
  content: "";
  height: 40px;
  width: 40px;
  left: 4px;
  top: 3px;
  bottom: 4px;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .largeToggleSlider:before {
  -webkit-transform: translateX(47px);
  -ms-transform: translateX(47px);
  transform: translateX(47px); }

.smallType2ToggleSlider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: -1px;
  bottom: -9px;
  -webkit-transition: .4s;
  transition: .4s; }

.smallType2Toggle {
  position: relative;
  display: inline-block;
  width: 57px;
  height: 14px;
  vertical-align: middle; }

.smallType2ToggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .smallType2ToggleSlider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px); }

.mediumType2ToggleSlider:before {
  position: absolute;
  content: "";
  height: 35px;
  width: 35px;
  left: -1px;
  bottom: -13px;
  -webkit-transition: .4s;
  transition: .4s; }

.mediumType2Toggle {
  position: relative;
  display: inline-block;
  width: 75px;
  height: 14px;
  vertical-align: middle; }

.mediumType2ToggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .mediumType2ToggleSlider:before {
  -webkit-transform: translateX(39px);
  -ms-transform: translateX(39px);
  transform: translateX(39px); }

/* type 2 large */
.largeType2ToggleSlider:before {
  position: absolute;
  content: "";
  height: 45px;
  width: 45px;
  left: -1px;
  bottom: -15px;
  -webkit-transition: .4s;
  transition: .4s; }

.largeType2Toggle {
  position: relative;
  display: inline-block;
  width: 97px;
  height: 17px;
  vertical-align: middle; }

.largeType2ToggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .largeType2ToggleSlider:before {
  -webkit-transform: translateX(50px);
  -ms-transform: translateX(50px);
  transform: translateX(50px); }

/****************************************************************************
    Component Name : Range
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** range - Visual CSS **/
.ui-slider .ui-slider-range {
  font-size: 0.7em; }

.ui-slider {
  background: var(--componentDisabledBGColor); }

.ui-widget-content {
  background: var(--componentBGColor);
  color: var(--themeFontColor); }

.ui-widget {
  font-size: 1em; }

.ui-slider .ui-slider-range {
  font-size: 0.7em; }

.ui-slider .ui-slider-range {
  font-size: 0.7em;
  background: var(--componentHoverBGColor);
  /** use card header here **/ }

.ui-slider .ui-slider-handle {
  background: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.ui-widget-header {
  background: var(--componentBGColor) 0 0 repeat-x;
  background: -moz-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--componentBGColor)), color-stop(100%, var(--componentBGColor)));
  background: -webkit-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: -o-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: -ms-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: linear-gradient(to bottom, var(--componentBGColor) 0%, var(--componentBGColor) 100%); }

.ui-widget-header {
  background: var(--componentBGColor);
  color: var(--componentHeaderFontColor);
  font-weight: normal; }

.focusOnSlider:focus {
  outline: none;
  border: 2px solid var(--componentHoverBGColor); }

/** range - Structure CSS **/
.ui-slider {
  position: relative;
  text-align: left; }

.ui-slider .ui-slider-handle.ui-slider-handle-active {
  z-index: 2; }

.ui-slider .ui-slider-range {
  position: absolute;
  display: block;
  border: 0;
  background-position: 0 0; }

.ui-slider-horizontal {
  height: .8em; }

.ui-slider-horizontal .ui-slider-handle {
  top: -.55em;
  margin-left: -.6em; }

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%; }

.ui-slider-horizontal .ui-slider-range-min {
  left: 0; }

.ui-slider-horizontal .ui-slider-range-max {
  right: 0; }

.ui-slider-vertical {
  width: .8em;
  height: 100px; }

.ui-slider-vertical .ui-slider-handle {
  left: -.45em;
  margin-left: 0;
  margin-bottom: -.6em; }

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%; }

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0; }

.ui-slider-vertical .ui-slider-range-max {
  top: 0; }

.ui-slider-animate .ui-slider-handle {
  transition: left .3s; }

.ui-slider-horizontal {
  height: .8em; }

.ui-slider {
  position: relative;
  text-align: left; }

.ui-widget, .ui-widget * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.ui-slider-horizontal {
  height: 6px; }

.ui-slider {
  position: relative;
  text-align: left;
  border: none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset; }

.ui-corner-all {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3em; }

.ui-widget-content {
  border: 1px solid #D5D5D5; }

.ui-widget {
  font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; }

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%; }

.ui-slider .ui-slider-range {
  position: absolute;
  display: block;
  border: 0;
  background-position: 0 0; }

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%; }

.ui-slider .ui-slider-range {
  position: absolute;
  display: block;
  border: 0;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }

.ui-corner-all {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; }

.ui-widget-header {
  border: 1px solid #d9d9d9; }

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 0;
  width: 21px !important;
  height: 21px !important;
  cursor: default;
  outline: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 3em !important;
  border: none; }

.ui-slider-horizontal2 {
  height: 15px;
  top: 10px; }

.ui-slider-horizontal2 {
  height: 15px;
  top: 10px; }

.ui-slider-handle2 {
  position: absolute;
  z-index: 0;
  width: 29px !important;
  height: 29px !important;
  cursor: default;
  outline: none;
  border-radius: 3em !important;
  border: none;
  background: var(--componentHeaderBGColor);
  bottom: -8px;
  margin-left: -.9em;
  cursor: pointer; }

.ui-slider-vertical2 {
  width: 1em;
  height: 100px; }

.ui-slider-handle3 {
  margin-left: -17px;
  position: absolute;
  z-index: 0;
  width: 42px !important;
  height: 42px !important;
  cursor: default;
  outline: none;
  border-radius: 3em;
  border: none;
  background: var(--componentHeaderBGColor);
  margin-bottom: -2em;
  margin-top: -2em; }

.ui-slider-handle1 {
  margin-left: -6px;
  position: absolute;
  z-index: 0;
  width: 21px !important;
  height: 21px !important;
  cursor: default;
  outline: none;
  border-radius: 3em;
  border: none;
  background: var(--componentHeaderBGColor); }

.ui-slider-range2 {
  background: #b8dfff; }

.ui-slider-range3 {
  background: #b8dfff; }

.slider-round {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--componentBGColor);
  color: var(--themeFontColor);
  border: 1px solid #D5D5D5;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  opacity: 1; }

.slider-round::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer; }

.slider-round::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer; }

.slidecontainer {
  width: 100%;
  padding-top: 17px; }

.slider-square {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: var(--componentBGColor);
  color: var(--themeFontColor);
  border: 1px solid #D5D5D5;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s; }

.slider-square::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  cursor: pointer; }

.slider-square::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer; }

/****************************************************************************
    Component Name : Label
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** label - Visual CSS **/
.label-badge {
  color: var(--componentHeaderFontColor);
  background-color: var(--componentHeaderBGColor); }

.clickableLabel {
  cursor: pointer; }

.labelFontClass {
  color: var(--componentFontColor); }

/** label - Structure CSS **/
.label-badge {
  margin-left: 10px;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 10px; }

.large {
  font-size: 36px;
  line-height: 34px; }

.medium {
  font-size: 20px; }

.small {
  font-size: 18px; }

.large-bold {
  font-size: 36px;
  font-weight: bold;
  line-height: 40px; }

.medium-bold {
  font-size: 20px;
  font-weight: bold; }

.small-bold {
  font-size: 18px;
  font-weight: bold; }

.large-24 {
  font-size: 24px;
  line-height: 40px; }

.large-24-bold {
  font-size: 24px;
  font-weight: bold;
  line-height: 40px; }

.large-44 {
  font-size: 44px;
  line-height: 45px; }

.large-44-bold {
  font-size: 44px;
  font-weight: bold; }

.large-50 {
  font-size: 50px;
  line-height: 55px; }

.large-50-bold {
  font-size: 50px;
  font-weight: bold;
  line-height: 55px; }

.large-54 {
  font-size: 54px;
  line-height: 60px; }

.large-54-bold {
  font-size: 54px;
  font-weight: bold;
  line-height: 58px; }

.large-56 {
  font-size: 56px;
  line-height: 60px; }

.large-56-bold {
  font-size: 56px;
  font-weight: bold;
  line-height: 60px; }

.large-60 {
  font-size: 60px;
  line-height: 56px; }

.large-60-bold {
  font-size: 60px;
  font-weight: bold;
  line-height: 56px; }

.large-64 {
  font-size: 64px;
  line-height: 58px; }

.large-64-bold {
  font-size: 64px;
  font-weight: bold;
  line-height: 58px; }

.large-68 {
  font-size: 68px;
  line-height: 60px; }

.large-68-bold {
  font-size: 68px;
  font-weight: bold;
  line-height: 60px; }

.large-78 {
  font-size: 78px;
  line-height: 70px; }

.large-78-bold {
  font-size: 78px;
  font-weight: bold;
  line-height: 70px; }

.large-9vw {
  font-size: 9vw;
  line-height: 1; }

.large-9vw-bold {
  font-size: 9vw;
  font-weight: bold;
  line-height: 1.5; }

.large-4vw {
  font-size: 4.2vw;
  line-height: 1; }

.large-4vw-bold {
  font-size: 4.2vw;
  font-weight: bold;
  line-height: 1; }

.eclipse {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/****************************************************************************
    Component Name : Box
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** box - Visual CSS **/
.bg-highlight {
  color: var(--themeFontColor);
  background-color: #ffeb3b; }

.bg-red {
  color: var(--themeFontColor);
  background-color: #ffcab6; }

.bg-green {
  color: var(--themeFontColor);
  background-color: #99ff99; }

.bg-yellow {
  color: var(--themeFontColor);
  background-color: #ffe766; }

.bg-blue {
  color: var(--themeFontColor);
  background-color: #ccf2ff; }

.bg-purple {
  color: var(--themeFontColor);
  background-color: #ffccff; }

.bg-brown {
  color: var(--themeFontColor);
  background-color: #fbdbbf; }

.box-default {
  background-color: var(--componentBGColor); }

.bg-theme-color {
  color: var(--componentHoverFontColor);
  background-color: var(--componentHoverBGColor); }

.box-transparent {
  background-color: transparent; }

/** box - Structure CSS **/
.border-topbar {
  border-top: 6px solid !important; }

.border-bottombar {
  border-bottom: 6px solid !important; }

.border-leftbar {
  border-left: 6px solid !important; }

.border-rightbar {
  border-right: 6px solid !important; }

.border-all {
  border: 6px solid !important; }

.border-top-bottom {
  border-top: 6px solid !important;
  border-bottom: 6px solid !important; }

.border-right-left {
  border-right: 6px solid !important;
  border-left: 6px solid !important; }

.box-default {
  border-color: #ced4da; }

.padding {
  padding: 8px 8px 8px 8px; }

.border-red {
  border-color: #dc143c !important; }

.border-blue {
  border-color: #00008b !important; }

.border-green {
  border-color: #2e8b57 !important; }

.border-brown {
  border-color: #800000 !important; }

.border-purple {
  border-color: #8b008b !important; }

.border-yellow {
  border-color: #ff9900 !important; }

.box-close {
  float: right;
  padding-right: 4px;
  height: 5px; }

.border-dotted {
  border-width: 1px;
  border-style: dotted; }

.border-theme-color {
  border-color: var(--componentHeaderBGColor); }

.box-transparent {
  border-color: transparent; }

/****************************************************************************
    Component Name : Image
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** image - Visual CSS **/
.profile-image a {
  color: var(--componentFontColor); }

/** image - Structure CSS **/
.profile-image img {
  width: 50px;
  height: 50px;
  vertical-align: middle; }

.profile-image a {
  text-transform: capitalize; }

.image-small {
  width: 50px;
  height: 50px; }

.image-round {
  border-radius: 50%;
  vertical-align: middle; }

.profile-image-round img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle; }

.image-responsive {
  max-width: 100%;
  width: 100%;
  border-top: 1px solid #ced4da;
  border-bottom: 1px solid #ced4da;
  margin-top: 10px;
  margin-bottom: 10px; }

.image-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px; }

/* Create two equal columns that sits next to each other */
.image-column {
  flex: 50%;
  padding: 0 4px; }

.image-column img {
  margin-top: 8px;
  vertical-align: middle; }

.image-grayscale {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%); }

.image-invert {
  filter: invert(100%);
  -webkit-filter: invert(100%); }

.image-sepia {
  filter: sepia(50);
  -webkit-filter: sepia(50); }

.image-saturate {
  filter: saturate(5);
  -webkit-filter: saturate(5); }

.image-blur {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px); }

.image-brightness {
  -webkit-filter: brightness(250%);
  filter: brightness(250%); }

.image-contrast {
  -webkit-filter: contrast(180%);
  filter: contrast(180%); }

.image-hue {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg); }

.image-opacity {
  -webkit-filter: opacity(50%);
  filter: opacity(50%); }

.image-shadow {
  -webkit-filter: drop-shadow(8px 8px 10px var(--componentHeaderBGColor));
  filter: drop-shadow(8px 8px 10px var(--componentHeaderBGColor)); }

.img-fluid {
  max-width: 100%;
  height: auto; }

.img-container:hover .overlay-fade {
  opacity: 1; }

.img-container {
  position: relative;
  width: fit-content;
  height: auto; }

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center; }

.overlay-text {
  color: #f1f1f1;
  font-size: 20px; }

.overlay-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease; }

.overlay-fade-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

.overlay-box {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

.img-container:hover .image-fluid {
  opacity: 0.3; }

.img-container:hover .overlay-box {
  opacity: 1; }

.overlay-box-text {
  background-color: rgba(0, 0, 0, 0.5);
  position: initial !important;
  padding: 16px 32px; }

.overlay-title-text {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  text-align: center; }

.overlay-text p {
  text-align: center;
  font-size: 16px; }

.img-container:hover .overlay-title-text {
  opacity: 1; }

.overlay-slide-top {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease; }

.img-container:hover .overlay-slide-top {
  bottom: 0;
  height: 100%; }

.overlay-slide-top-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

.overlay-slide-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease; }

.img-container:hover .overlay-slide-bottom {
  height: 100%; }

.overlay-slide-bottom-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

.overlay-slide-right {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease; }

.img-container:hover .overlay-slide-right {
  width: 100%;
  left: 0; }

.overlay-slide-right-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }

.overlay-slide-left {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease; }

.img-container:hover .overlay-slide-left {
  width: 100%; }

.overlay-slide-left-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }

.image-title {
  display: block;
  color: #f1f1f1;
  position: absolute;
  font-size: 24px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.5); }

/* Bottom left text */
.image-bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px; }

/* Top left text */
.image-top-left {
  position: absolute;
  top: 8px;
  left: 16px; }

/* Top right text */
.image-top-right {
  position: absolute;
  top: 8px;
  right: 16px; }

/* Bottom right text */
.image-bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px; }

/* Centered text */
.image-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.img-relative {
  position: relative; }

.img-absolute {
  position: absolute; }

/****************************************************************************
    Component Name : Float Button
    Version : Amexio v4.1 onwards
*****************************************************************************/
/** float-button - Visual CSS **/
.button-float {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

/** float-button - Structure CSS **/
.button-float {
  border: none;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 8px 20px 0 rgba(0, 0, 0, 0.25); }

/****************************************************************************
    Component Name : Floating button
    Version : Amexio v4.1 onwards
*****************************************************************************/
/** floatingbutton - Visual CSS **/
.floatingbutton-default {
  background-color: #ffffff; }

.floatingbutton-theme-color {
  background-color: var(--themeSecondaryColor);
  color: var(--componentBGColor); }

.floatingbutton-green {
  background-color: #5cb85c;
  color: var(--componentBGColor); }

.floatingbutton-red {
  background-color: #d9534f;
  color: var(--componentBGColor); }

.floatingbutton-yellow {
  background-color: #f0ad4e;
  color: var(--componentBGColor); }

.floatingbutton-default-disabled {
  background-color: var(--componentDisabledFontColor) !important;
  color: var(--componentDisabledFontColor); }

.floatingbutton-theme-color-disabled {
  background-color: var(--componentDisabledBGColor);
  color: var(--componentDisabledFontColor); }

.floatingbutton-green-disabled {
  background-color: #9f9;
  color: var(--componentBGColor); }

.floatingbutton-red-disabled {
  background-color: #ffcab6;
  color: var(--componentBGColor); }

.floatingbutton-yellow-disabled {
  background-color: #ffe766;
  color: var(--componentBGColor); }

.floatingbutton-circle:focus {
  outline: none; }

/** floatingbutton - Structure CSS **/
.floatingbutton {
  z-index: 501;
  text-align: center;
  border-color: #ced4da;
  cursor: pointer;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2) !important; }

.floatingbutton-relative {
  position: relative; }

.floatingbutton-absolute {
  position: absolute; }

.floatingbutton-fixed {
  position: fixed; }

.floatingbutton-left {
  left: 5%; }

.floatingbutton-right {
  right: 5%; }

.floatingbutton-top {
  top: 10%; }

.floatingbutton-bottom {
  bottom: 10%; }

.floatingbutton-center {
  top: 50%;
  left: 50%; }

.floatingbutton-circle {
  border-radius: 50%;
  padding: 20px;
  text-decoration: none;
  font-size: 30px;
  margin: 5px 2px;
  text-align: center;
  width: 30px;
  height: 30px; }

.floatingbutton:hover {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) !important;
  filter: grayscale(20%);
  transform: perspective(1px) translateZ(0);
  transition-duration: 0.5s;
  transition-property: box-shadow; }

.floatingbutton-circle-large {
  border-radius: 50px;
  width: 100px;
  height: 100px;
  font-size: 40px;
  line-height: 100px; }

.floatingbutton-circle-small {
  border-radius: 50px;
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 30px; }

.floatingbutton-square {
  border-radius: 0px !important;
  padding: 20px;
  text-decoration: none;
  font-size: 30px;
  margin: 5px 2px;
  text-align: center;
  width: 30px;
  height: 30px; }

.floatingbtntooltip {
  position: relative;
  display: inline-block; }

.floatingbtntooltip .floatingbtntooltiptext {
  visibility: hidden;
  line-height: 20px;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 209%;
  margin-left: -60px; }

.floatingbtntooltip:hover .floatingbtntooltiptext {
  visibility: visible; }

/****************************************************************************
    Component Name : Floating button group
    Version : Amexio v4.1 onwards
*****************************************************************************/
/** floatingbuttongroup - Visual CSS **/
.floatinggroupitems:focus {
  border: 3px solid var(--componentHoverBGColor) !important;
  outline: none; }

.floatingbutton-circle:focus {
  border: 3px solid var(--componentHoverBGColor) !important;
  outline: none; }

/** floatingbuttongroup - Structure CSS **/
.floatinggroup {
  position: fixed;
  z-index: 3;
  outline: none; }

.floatinggroup .floatinggroupitems {
  list-style: none;
  margin-bottom: 10px;
  outline: none; }

.floatingbutton-circle {
  text-align: center;
  cursor: pointer; }

/****************************************************************************
    Component Name : DropDown Menu
    Version : Amexio v4.2 onwards
*****************************************************************************/
/** dropdownmenu - Visual CSS **/
.dropdown-menu {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.dropdown-menu-content {
  background-color: var(--componentBGColor) !important;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); }

.dropdown-menu-content .dropdowndivider {
  border-bottom: solid 1px #ced4da; }

.nav-dropdown-content .dropdowndivider {
  border-bottom: solid 1px #ced4da; }

.dropdown-menu-content a:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.dropdown-menu-content a {
  color: var(--componentFontColor); }

/** dropdownmenu - Structure CSS **/
.dropdown-menu {
  position: relative;
  display: inline-block;
  font-size: 16px !important;
  padding: 16px;
  box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px;
  cursor: pointer; }

.dropdown-menu-content {
  display: block;
  position: absolute;
  flex-direction: column;
  min-width: 180px;
  cursor: pointer;
  z-index: 1;
  padding: 10px 0px;
  overflow-y: auto; }

.dropdown-menu:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px !important; }

.dropdown-menu-content a {
  text-decoration: none;
  display: inline-block;
  font-size: 16px !important;
  padding: 10px;
  display: block; }

.menu-right {
  right: 10px; }

.dropdown-list::-webkit-scrollbar {
  width: 6px; }

/*****************************************************************************
 Component Name : Toolbar
    Version : Amexio v4.2 onwards
****************************************************************************/
/** Toolbar - Visual CSS **/
.toolbaritemseperatorleft {
  border-left: 1px solid #ced4da; }

.toolbaritemseperatorright {
  border-right: 1px solid #ced4da; }

.toolbar:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.toolbar-item:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.toolbar-header {
  width: 100% !important; }

/** Toolbar - Structure CSS **/
.toolbar {
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 2px;
  position: relative;
  padding: 10px; }

.card-header .toolbar {
  background-color: unset;
  box-shadow: unset;
  padding: 0px; }

.toolbar-item {
  display: inline-flex;
  flex-direction: row;
  text-anchor: middle;
  letter-spacing: 1px; }

.toolbaritemseperatorleft {
  padding-left: 10px;
  padding-right: 10px;
  position: relative; }

.toolbaritemseperatorright {
  padding-right: 10px;
  padding-left: 10px;
  position: relative; }

.toolbar-item .inputgroup .input-control {
  width: unset !important;
  padding: 0px !important; }

/*****************************************************************************
 Component Name : Search Box
    Version : Amexio v4.2 onwards
****************************************************************************/
/** Searchbox - Visual CSS **/
.hrclass {
  border-color: #ced4da; }

.advancesearchform {
  background-color: var(--componentBGColor);
  border-color: #ced4da; }

.input-group-text-search {
  background-color: var(--themeSecondaryColor);
  border-color: #ced4da; }

.form-control {
  color: var(--componentFontColor);
  background-color: var(--componentBGColor);
  border-color: #ced4da; }

.search-form-label {
  color: var(--componentFontColor); }

.iconColor {
  color: var(--componentHeaderFontColor); }

.advancesearchbtn {
  background-color: var(--themeSecondaryColor);
  color: var(--componentBGColor); }

.search-dropdown-list .search-list-items {
  background-color: var(--componentBGColor); }

.search-dropdown-list li:hover {
  background: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.search-list-items-selected {
  background-color: var(--componentHoverBGColor) !important;
  color: var(--componentHoverFontColor) !important; }

.search-dropdown-list {
  border-color: #ced4da;
  background-color: var(--componentBGColor); }

.input-group:focus {
  outline: none; }

/** Searchbox - Structure CSS **/
.hrclass {
  margin-top: 2%;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 10%;
  font-weight: bold;
  display: block; }

.advancesearchform {
  position: absolute;
  font-weight: normal;
  border-width: 1px;
  border-style: solid;
  padding: .5%;
  z-index: 99; }

.dropdownposition {
  position: absolute;
  z-index: 1; }

.search-form-label {
  font-weight: bold; }

.close-icon {
  float: right;
  opacity: .54;
  cursor: pointer;
  padding-top: 0%;
  padding-right: 0%;
  font-size: 120%; }

.searchbutton {
  width: 100%; }

.input-group-text-search {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
  border-radius: .25rem;
  width: 15px;
  padding-right: 2%;
  padding-left: 2%; }

.input-group {
  display: flex; }

.input-group-prepend {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.form-control {
  display: block;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  background-clip: padding-box;
  transition: border-color 0.15s;
  border-width: 1px;
  border-style: solid; }

.search-dropdown-list .search-list-items {
  list-style: none;
  cursor: pointer;
  margin: 1px 0;
  padding: .186em .313em;
  text-align: left;
  overflow-y: auto; }

.search-dropdown-list {
  margin: 0;
  padding: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
  border-width: 1px;
  border-style: solid;
  z-index: 5;
  overflow-x: auto; }

.scroll {
  height: 200px;
  overflow-y: scroll; }

.advancesearchbuttondiv {
  z-index: 5;
  cursor: pointer; }

.advancesearchbtn {
  height: 37px;
  font-weight: bold;
  cursor: pointer; }

/*****************************************************************************
 Component Name : Spinner
    Version : Amexio v4.2 onwards
****************************************************************************/
/** Searchbox - Visual CSS **/
/** Searchbox - Structure CSS **/
.spinner-sm {
  position: fixed !important;
  z-index: 4 !important;
  padding-top: 0% !important;
  padding-left: 0% !important;
  width: 0% !important; }

.spinnerCss-relative {
  position: relative !important;
  padding-left: 35% !important; }

.spinner-vertical-top {
  top: 2%; }

.spinner-vertical-center {
  top: 35%; }

.spinner-vertical-bottom {
  bottom: 2% !important; }

.spinner-horizontal-left {
  left: 8% !important; }

.spinner-horizontal-center {
  left: 50% !important; }

.spinner-horizontal-right {
  right: 10% !important; }

.rectangle-bounces,
.rectangle-bounces:before,
.rectangle-bounces:after {
  background: var(--themePrimaryColorShade4);
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em; }

.rectangle-bounces {
  color: var(--themePrimaryColorShade4);
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.rectangle-bounces:before,
.rectangle-bounces:after {
  position: absolute;
  top: 0;
  content: ''; }

.rectangle-bounces:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.rectangle-bounces:after {
  left: 1.5em; }

@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em; }
  40% {
    box-shadow: 0 -2em;
    height: 5em; } }
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em; }
  40% {
    box-shadow: 0 -2em;
    height: 5em; } }
.half-circles {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: var(--componentHoverBGColor);
  background: -moz-linear-gradient(left, var(--componentHoverBGColor) 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, var(--componentHoverBGColor) 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, var(--componentHoverBGColor) 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, var(--componentHoverBGColor) 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, var(--componentHoverBGColor) 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

.half-circles:before {
  width: 50%;
  height: 50%;
  background: var(--themePrimaryColorShade4);
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: ''; }

.half-circles:after {
  background: #ffffff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }

@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
.rings,
.rings:before,
.rings:after {
  border-radius: 50%; }

.rings {
  color: var(--themePrimaryColorShade4);
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

.rings:before,
.rings:after {
  position: absolute;
  content: ''; }

.rings:before {
  width: 5.2em;
  height: 10.2em;
  background: #ffffff;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s; }

.rings:after {
  width: 5.2em;
  height: 10.2em;
  background: #ffffff;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease; }

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
.fading-circles {
  color: var(--themePrimaryColorShade4);
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; } }
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; } }
.ball-spins {
  color: var(--themePrimaryColorShade4);
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0); }

@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em; } }
.fire-spins {
  color: var(--themePrimaryColorShade4);
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease; }

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } }
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; } }
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
.three-bounces,
.three-bounces:before,
.three-bounces:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out; }

.three-bounces {
  color: var(--themePrimaryColorShade4);
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.three-bounces:before,
.three-bounces:after {
  content: '';
  position: absolute;
  top: 0; }

.three-bounces:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.three-bounces:after {
  left: 3.5em; }

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
.spinner-rounds,
.spinner-rounds:after {
  border-radius: 50%;
  width: 10em;
  height: 10em; }

.spinner-rounds {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid var(--componentHoverBGColor);
    border-top-opacity: 0.2;
  border-right: 1.1em solid var(--componentHoverBGColor);
    border-right-opacity: 0.2;
  border-bottom: 1.1em solid var(--componentHoverBGColor);
    border-bottom-opacity: 0.2;
  border-left: 1.1em solid var(--themePrimaryColorShade4);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear; }

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
/*****************************************************************************
 Component Name : CreditCard
    Version : Amexio v4.2 onwards
****************************************************************************/
/** CreditCard - Visual CSS **/
.image-label .fa {
  color: var(--componentFontColor) !important; }

.image .fa {
  color: var(--componentFontColor) !important; }

.imageSglCol .fa {
  color: var(--componentFontColor) !important; }

/** CreditCard - Structure CSS **/
/* CSS FOR SINGLE COLUMN */
.creditCardFormSglCol {
  max-width: 100%;
  border-style: dotted;
  padding: 30px;
  color: #4c4e56;
  border-radius: 10px;
  display: grid; }

.ownerdetailsSglCol {
  margin-top: 7px; }

.ownerSglCol {
  width: 100%; }

.cvvSglCol {
  width: 22%;
  margin-top: 1%; }

.cardNumberSglCol {
  /* width:100%; */
  margin-top: 7px; }

.expiration-dateSglCol {
  display: flex; }

.monthSglCol {
  margin-top: 5px;
  padding: 2px; }

.dateSglCol {
  margin-top: 5px;
  padding: 2px; }

.imageSglCol {
  display: grid;
  grid-template-columns: .1fr .1fr .1fr;
  grid-gap: .2em; }

.input-control-successSglCol {
  border-bottom-color: green; }

.input-control-failureSglCol {
  border-bottom-color: red; }

.disable-component {
  opacity: .5;
  cursor: not-allowed; }

/* CSS FOR DOUBLE COLUMN */
.creditCardForm {
  max-width: 100%;
  border-style: dotted;
  overflow: hidden;
  padding: 30px;
  color: #4c4e56;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(1, 2fr 1.5fr);
  grid-gap: 0.5em;
  justify-items: stretch; }

.cardNumber {
  grid-column: 1/3; }

.expiration-date {
  display: grid;
  grid-template-columns: 0.2fr 0.1fr;
  grid-gap: .2em; }

.expiration-date-label {
  display: grid;
  grid-template-columns: .1fr .3fr 3;
  grid-gap: .2em;
  /* grid-column: 1/3; */ }

.image {
  display: grid;
  grid-template-columns: .1fr .1fr .1fr;
  grid-gap: .2em; }

.image-label {
  display: grid;
  grid-template-columns: .1fr .1fr .1fr;
  grid-gap: .2em;
  padding-top: 2em; }

.cvv {
  /* width:25%; */
  display: grid; }

.exp-month-date-label {
  display: grid;
  grid-template-columns: .1fr .1fr;
  grid-gap: .2em;
  padding-top: 9px; }

@media (max-width: 500px) {
  .creditCardForm {
    display: block;
    padding: 2em; } }
.input-control-success {
  border-bottom-color: green; }

.input-control-failure {
  border-bottom-color: red; }

/*****************************************************************************
 Component Name : Chips
    Version : Amexio v5.3onwards
****************************************************************************/
/** Chips - Visual CSS **/
/** Chips- Structure CSS **/
.chips {
  display: inline-block;
  padding: 0 15px;
  height: 35px;
  font-size: 16px;
  border-radius: 25px;
  background-color: #f1f1f1;
  margin: 3px;
  color: black; }

.chips:hover {
  background: var(--componentHoverBGColor); }

.chips label {
  padding-top: 5px; }

.badge {
  padding: .0em .4em;
  font-size: small;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  /* white-space: nowrap; */
  vertical-align: baseline;
  border-radius: 30rem;
  margin-left: 10px;
  background-color: black;
  margin-right: 3px;
  color: whitesmoke; }

.chiplabelicon {
  cursor: pointer;
  padding-left: 10px; }

.chiplabel {
  cursor: pointer; }

/*****************************************************************************
 Component Name : Grid Layout
    Version : Amexio v5.3.2onwards
****************************************************************************/
/** Grid Layout- Visual CSS **/
/** Grid Layout- Structure CSS **/
.griditemcontainer {
  height: 100%;
  width: 100%;
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column; }

.griditemcontainer-header {
  padding: 10px;
  border-bottom: 1px solid #ced4da;
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor);
  font-size: 15px; }

.collapsibleicon {
  background-color: var(--componentHeaderFontColor);
  color: var(--componentHeaderBGColor); }

.griditemcontainer-header-collapsed {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.griditemcontainer-header-collapsed label {
  transform: rotate(270deg); }

.grid-vc-towards-top {
  display: flex;
  flex-direction: column-reverse; }

.vc-towards-top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: -5px;
  height: 10px;
  background-color: #ced4da;
  margin-left: -1px;
  margin-right: -1px; }

.vc-towards-top i {
  cursor: pointer; }

.grid-vc-towards-bottom {
  display: flex;
  flex-direction: column; }

.vc-towards-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -10px;
  height: 10px;
  background-color: #ced4da;
  margin-left: -1px;
  margin-right: -1px; }

.vc-towards-bottom i {
  cursor: pointer; }

.grid-hc-towards-left {
  display: flex;
  flex-direction: row-reverse; }

.hc-towards-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: -5px;
  background-color: #ced4da;
  margin-top: -1px;
  margin-bottom: -1px;
  width: 7px; }

.hc-towards-left i {
  cursor: pointer; }

.grid-hc-towards-right {
  display: flex;
  flex-direction: row; }

.hc-towards-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -5px;
  background-color: #ced4da;
  margin-top: -1px;
  margin-bottom: -1px;
  width: 7px; }

.hc-towards-right i {
  cursor: pointer; }

/*****************************************************************************
 Component Name : Amexio Badge
 Version : Amexio v5.5.5 onwards
****************************************************************************/
/** Amexio Badge- Structure CSS **/
.amexio-badge {
  display: flex;
  text-align: center;
  padding: 5px;
  box-sizing: border-box; }

/** Amexio Badge- Vars CSS **/
/** Amexio Badge- Visual CSS **/
.amexio-badge {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100; }

.amexio-badge-color {
  background: var(--componentBGColor);
  color: var(--themeFontColor); }

/*****************************************************************************
 Component Name : Amexio Progress-ce
 Version : Amexio v5.6.0 onwards
****************************************************************************/
/** Amexio Progress-ce- Structure CSS **/
.circularProgress {
  float: left;
  margin-left: 30px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%; }

.innerCircle {
  display: flex;
  flex-direction: column;
  justify-content: center; }

/* FOR RADIAL */
.radial {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin-left: 16px;
  margin-top: 16px;
  text-align: center;
  line-height: 108px;
  font-size: 24px; }

/*  FOR RING */
.ring {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin-left: 16px;
  margin-top: 16px;
  text-align: center;
  line-height: 108px;
  font-size: 24px; }

/*  FOR PIE */
.pie {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin-left: 16px;
  margin-top: 16px;
  text-align: center;
  line-height: 108px;
  font-size: 24px; }

/** Amexio Progress-ce- Vars CSS **/
/** Amexio Progress-ce- Visual CSS **/
.circularProgress {
  background-color: var(--componentBGColor); }

/* FOR RADIAL */
.radial {
  background-color: var(--componentBGColor); }

/*  FOR RING */
.ring {
  background-color: var(--componentBGColor); }

/****************************************************************************
    Component Name : Range slider
    Version : Amexio v5.10 onwards
*****************************************************************************/
/** range - Visual CSS **/
.amexio-slider .amexio-slider-range {
  font-size: 0.7em; }

.amexio-slider .amexio-slider-handle {
  background: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.amexio-slider {
  background: var(--componentDisabledBGColor); }

.amexio-slider-widget-content {
  background: var(--componentBGColor);
  color: var(--themeFontColor); }

.amexio-slider-widget {
  font-size: 1em; }

.amexio-slider .amexio-slider-range {
  font-size: 0.7em; }

.amexio-slider .amexio-slider-range {
  font-size: 0.7em;
  background: var(--componentHoverBGColor);
  /** use card header here **/ }

.amexio-slider-widget-header {
  background: var(--componentBGColor) 0 0 repeat-x;
  background: -moz-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--componentBGColor)), color-stop(100%, var(--componentBGColor)));
  background: -webkit-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: -o-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: -ms-linear-gradient(top, var(--componentBGColor) 0%, var(--componentBGColor) 100%);
  background: linear-gradient(to bottom, var(--componentBGColor) 0%, var(--componentBGColor) 100%); }

.amexio-slider-widget-header {
  background: var(--componentBGColor);
  color: var(--componentHeaderFontColor);
  font-weight: normal; }

.focusOnSlider:focus {
  outline: none;
  border: 2px solid var(--componentHoverBGColor); }

/** range - Structure CSS **/
.amexio-slider {
  position: relative;
  text-align: left;
  border: none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset; }

.amexio-slider .amexio-slider-handle.amexio-slider-handle-active {
  z-index: 2; }

.rectangle-css {
  right: -1.2em !important;
  border-radius: 0px !important;
  line-height: 35px !important;
  width: 45px !important; }

.square-css {
  border-radius: 0px !important;
  line-height: 35px !important; }

.circle-css {
  line-height: 35px !important; }

.amexio-slider-horizontal {
  height: 15px; }

.amexio-slider-horizontal .amexio-slider-handle {
  top: -.55em;
  margin-left: -.6em; }

.amexio-slider-horizontal .amexio-slider-range {
  top: 0;
  height: 100%; }

.amexio-slider-horizontal .amexio-slider-range-min {
  left: 0; }

.amexio-slider-horizontal .amexio-slider-range-max {
  right: 0; }

.amexio-slider-vertical {
  width: .8em;
  height: 300px;
  margin-left: 30px; }

.amexio-slider-vertical .amexio-slider-handle {
  left: -.55em;
  margin-left: 0;
  margin-bottom: -.6em;
  right: -.8em; }

.amexio-slider-vertical .amexio-slider-range {
  left: 0;
  width: 100%; }

.amexio-slider-vertical .amexio-slider-range-min {
  bottom: 0; }

.amexio-slider-vertical .amexio-slider-range-max {
  top: 0; }

.amexio-slider-animate .amexio-slider-handle {
  transition: left .3s; }

.amexio-slider-widget, .amexio-slider-widget * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.ui-corner-all {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; }

.amexio-slider-widget-content {
  border: 1px solid #D5D5D5; }

.amexio-slider-widget {
  font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; }

.amexio-slider .amexio-slider-range {
  position: absolute;
  display: block;
  border: 0;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }

.amexio-slider-widget-header {
  border: 1px solid #d9d9d9; }

.amexio-slider .amexio-slider-handle {
  position: absolute;
  z-index: 0;
  width: 32px;
  height: 32px;
  cursor: default;
  outline: none;
  border-radius: 2em;
  line-height: 32px;
  text-align: center;
  border: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset; }

/****************************************************************************
    Component Name : Multi Date Time
    Version : Amexio v5.12 onwards
*****************************************************************************/
/** multidatepicker - Visual CSS **/
/** multidatepicker - Structure CSS **/
.lbl_input {
  text-transform: uppercase; }

.appendButton10 {
  margin-bottom: 10px; }

.latoBold {
  font-weight: 700; }

.fromdiv {
  padding: 5px;
  background-color: var(--componentBGColor);
  border: var(--componentBGColor) 0px;
  color: var(--componentFontColor);
  cursor: pointer;
  width: max-content;
  border-style: outset; }

.fromdiv:hover {
  color: var(--appHeaderHoverFontColor);
  background: var(--appHeaderHoverBGColor); }

.dropicon {
  color: var(--themePrimaryColor);
  font-weight: bolder; }

.font30 {
  font-size: 30px;
  line-height: 30px; }

.lactoBlack {
  font-weight: 800; }

.blackText {
  color: #000; }

.font20 {
  font-size: 20px;
  line-height: 20px; }

#parentdate {
  display: block;
  /* margin:1em; */ }

.mainspan {
  display: flex;
  margin-bottom: 1px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.datePickerContaier {
  width: 625px;
  border-radius: 4px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 999999; }

.dayPickerFlightWrap .RangeExample {
  display: block; }

.fsw .dayPickerFlightWrap .RangeExample .dayPickerHeader {
  padding: 13px 10px;
  background-color: #fff;
  border-radius: 4px 4px 0 0; }

.makeFlex {
  display: flex; }

.dashed {
  padding-top: 15px; }

.font16 {
  font-size: 16px;
  line-height: 16px; }

.appendRight30 {
  margin-right: 30px; }

.appendRight10 {
  margin-right: 10px; }

fsw .widgetSprite.icCalendar {
  width: 10px;
  height: 10px;
  background-position: -5px -5px; }

.fsw .dateFiled.active .selectedDateField {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: #eaf5ff;
  position: relative; }

.pointer {
  cursor: pointer; }

.haltcursor {
  opacity: 0.2;
  cursor: not-allowed; }

.fsw .dateFiled.active .selectedDateField:after {
  width: 100%;
  height: 3px;
  background: var(--appHeaderHoverBGColor);
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px; }

.datetimepicker .datetimepickertopbar {
  padding: 1px 25px;
  text-align: center; }

/* every individual month header font color  */
.datetimepicker .datetimepickertopbar ul li {
  color: black; }

/* every individual month header background color  */
.datetimepicker .datetimepickertopbar {
  background: white; }

.arrowiconshadow {
  color: var(--themePrimaryColor); }

.arrowiconshadow:hover {
  text-shadow: 2px 2px 5px var(--appHeaderHoverFontColor); }

/* .activecolortab class replica from tab */
.activecolordatetab {
  border-bottom: 2px solid var(--componentActiveBGColor) !important; }

.datesrange {
  background: var(--appHeaderHoverBGColor);
  color: var(--componentDisabledFontColor);
  padding: 5px;
  border-radius: 50%; }

.ab {
  display: absolute;
  overflow-y: scroll; }

.datetabs {
  padding: 0px !important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.datetabs .datetimepicker {
  box-shadow: unset; }

.dropdivMulti {
  width: 100%; }

.dropspanMulti {
  float: left;
  width: 25%; }

.dropulMulti {
  list-style-type: none;
  -webkit-padding-start: 5px; }

.dropspanMulti2 {
  width: 25%;
  float: left;
  border-right: 1px solid var(--componentDisabledFontColor); }

.dropulMulti2 {
  list-style-type: none;
  -webkit-padding-start: 15px; }

.dropspanMulti4 {
  width: 25%;
  display: table-row-group; }

.btndivMulti1 {
  position: relative;
  bottom: 0; }

.dropbtnspanMulti {
  display: inline-flex;
  padding-left: 105px; }

.dropiconpaddingMulti {
  cursor: pointer;
  -webkit-padding-start: 20px; }

/****************************************************************************
    Component Name : Dialpad
    Version : Amexio v5.19 onwards
*****************************************************************************/
/** dialpad - Visual CSS **/
.btncolor {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.labcolor {
  color: var(--componentFontColor); }

.btncolor:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.nonecls {
  border-color: var(--componentFontColor) !important; }

.redcls {
  border-color: red !important; }

.greencls {
  border-color: green !important; }

/** dialpad - Structure CSS **/
.btnspan {
  display: flex;
  flex-direction: row;
  justify-content: center; }

.clear-btn button::before {
  margin-left: -3px; }

.btn {
  margin: 3px; }

.pointer {
  cursor: pointer; }

.rounded {
  border-radius: 50%; }

/****************************************************************************
    Component Name : Multi Date Range Time
    Version : Amexio v5.19 onwards
*****************************************************************************/
/** multidaterangepicker - Visual CSS **/
.customRangePanel {
  background-color: white; }

.customRangePanel:hover {
  color: black;
  background: var(--componentHoverBGColor); }

.customRange {
  border-bottom: 3px solid var(--componentHoverBGColor); }

/** multidaterangepicker - Structure CSS **/
.customRangePanel {
  cursor: pointer;
  padding: 14px; }

.customRange {
  padding-bottom: 10px;
  padding-top: 21px; }

.tooltipRange {
  position: relative;
  display: inline-block; }

.tooltipRange .tooltiptextRange {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: -5px;
  left: 110%; }

.tooltipRange .tooltiptextRange::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  border-color: black; }

.tooltipRange:hover .tooltiptextRange {
  visibility: visible; }

/****************************************************************************
    Component Name : Enterprise Content
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** enterprise-content - Visual CSS **/
.content-title {
  color: var(--componentHoverBGColor); }

.content-area {
  color: var(--componentHoverBGColor); }

/* Button Related CSS */
.content-button {
  color: var(--componentHoverBGColor); }

header .billboard .content-button {
  color: var(--componentHoverBGColor); }

.content-button i {
  color: var(--componentHoverBGColor); }

.content-button-small i {
  color: var(--componentHoverBGColor); }

.close-button {
  color: gray; }

/** enterprise-content - Structure CSS **/
.inline-list {
  padding-left: 0; }

.inline-list > li {
  display: inline;
  list-style-type: none;
  padding-left: 0; }

.main-content {
  position: relative;
  width: 100%;
  /* for IE 6 */
  height: 65vh;
  background-size: 100% 100%;
  background-repeat: no-repeat; }

.main-content > div {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%; }

.content-title {
  width: 100%;
  font-size: 180%;
  font-weight: 700;
  line-height: 130%;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); }

.content-area {
  padding-left: 30px; }

/*  TODO: Removed unused styling after testing
header {
  width: 100%;
  padding: 0px 48px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.0), #141414); //theme color?
  background-size: cover;
  background-position: center;
  height: 100vh;
}

header .billboard {
  margin-top: 40px;
  width: 40%;
  padding: 2px;
  font-size: 110%;
  line-height: 160%;
}

header .billboard .tab-area a {
  width: 120px;
  float: left;
  font-size: 90%;
  color: #ffffff;     //theme color?
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px;
  margin-right: .75em;
  margin-bottom: 30px;
  transition: border 0.5s;
}

header .billboard .tab-area a:hover {
  border-bottom: solid 2px #eeeeee;   //theme color?
}

header .billboard .tab-area .active {
  border-bottom: solid 2px #e50914;   //theme color?
}

!* Text Related CSS *!
header .billboard .content-area {
  color: #999;      //theme color?
  font-size: 100%;
}

header .billboard .content-area .subtitle {
  font-size: 120%;
  line-height: 200%;
}

header .billboard .content-area .credits {
  font-size: 80%;
}

header .billboard .content-area .credits strong {
  color: #fff;    //theme color?
}*/
/* Button Related CSS */
.content-button {
  display: inline-block;
  margin-right: .75em;
  margin-top: 20px;
  padding: 5px 20px;
  font-size: 70%;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase; }

header .billboard .content-button {
  display: inline-block;
  margin-right: .75em;
  margin-top: 20px;
  padding: 5px 20px;
  font-size: 70%;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase; }

.content-button i {
  display: inline-block;
  margin-top: 20px;
  width: 20px;
  height: 20px;
  padding: 8px 0 0 13px;
  border: solid 2px rgba(255, 255, 255, 0.4);
  border-radius: 40px;
  font-size: 10px;
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.5s; }

.button i:hover {
  transform: scale(1.1); }

.content-button-small i {
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 7px 0 0 5px;
  border: solid 2px rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.5s; }

.close-button {
  cursor: pointer;
  padding-left: 98%;
  background: radial-gradient(ellipse at top right, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); }

/****************************************************************************
    Component Name : Enterprise Youtube
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** enterprise-youtube - Visual CSS **/
.close-button {
  color: grey;
  background: radial-gradient(ellipse at top right, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); }

.close-button i:hover {
  color: red; }

/** enterprise-youtube - Structure CSS **/
.close-button {
  cursor: pointer; }

.close-button i:hover {
  cursor: pointer; }

/****************************************************************************
    Component Name : Enterprise Carousel
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** enterprise-carousel - Visual CSS **/
.row__inner {
  font-size: 0; }

.tile {
  font-size: 20px; }

.tile__details {
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); }

.tile__details:after,
.tile__details:before {
  display: #000; }

.tile__details_v {
  font-size: 10px;
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); }

.tile__details_v:after,
.tile__details_v:before {
  display: #000; }

.tile__title {
  color: white; }

.controls {
  color: dimgrey; }

.controls-v {
  color: dimgrey; }

.textonly {
  color: var(--componentActiveFontColor);
  background-color: transparent; }

.match {
  color: lightgreen; }

.age {
  color: var(--componentActiveFontColor); }

.actionpanel {
  color: red;
  background-color: transparent; }

.section-header {
  color: white; }

.playpanel .playbutton {
  color: white; }

.playpanel .playbutton:hover {
  color: red; }

.selected {
  color: white; }

/** enterprise-carousel - Structure CSS **/
.contain {
  width: 100%; }

.contain-vertical {
  width: 100%;
  height: 450px; }

.row1 {
  overflow: hidden;
  width: 94%; }

.row__inner {
  -webkit-transition: 450ms -webkit-transform;
  transition: 450ms -webkit-transform;
  transition: 450ms transform;
  transition: 450ms transform, 450ms -webkit-transform;
  font-size: 0;
  white-space: nowrap;
  margin: 70.3125px 0;
  padding-bottom: 10px; }

.tile {
  position: relative;
  display: inline-block;
  width: 250px;
  /*height: 140.625px;*/
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
  -webkit-transition: 450ms all;
  transition: 450ms all;
  -webkit-transform-origin: center left;
  transform-origin: center left; }

.tile__img {
  width: 250px;
  /* height: 140.625px;*/
  -o-object-fit: cover;
  object-fit: cover; }

.tile__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: 450ms opacity;
  transition: 450ms opacity; }

.tile__details:after,
.tile__details:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; }

.tile__details:after {
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  /*border: 3px solid #ecf0f1;*/
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  z-index: 1; }

.tile__details_v {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 50%;
  font-size: 10px;
  opacity: 0;
  -webkit-transition: 450ms opacity;
  transition: 450ms opacity; }

.tile__details_v:after,
.tile__details_v:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: #000; }

.tile__details_v:after {
  margin-top: -25px;
  margin-left: -20px;
  width: 50px;
  height: 50px;
  /*border: 3px solid #ecf0f1;*/
  line-height: 50px;
  text-align: center;
  border-radius: 100%;
  /*background: rgba(0,0,0,0.5);*/
  z-index: 1; }

.tile:hover .tile__details_v {
  opacity: 1; }

.tile:hover .tile__details {
  opacity: 1; }

.tile__title {
  position: absolute;
  bottom: 0;
  padding: 10px; }

.row__inner:hover {
  -webkit-transform: translate3d(-62.5px, 0, 0);
  transform: translate3d(-62.5px, 0, 0); }

.row__inner:hover .tile {
  opacity: 0.3; }

.row__inner:hover .tile:hover {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 1; }

.tile:hover ~ .tile {
  -webkit-transform: translate3d(125px, 0, 0);
  transform: translate3d(125px, 0, 0); }

.left-arrow {
  float: left;
  width: 4%; }

.right-arrow {
  width: 2%;
  float: right;
  z-index: 1;
  margin-top: -340px; }

.right-arrow-tall {
  width: 2%;
  float: right;
  z-index: 1;
  margin-top: -700px; }

.controls {
  padding-top: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em; }

.controls-v {
  padding-top: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em; }

.textonly {
  padding: 0px 7px 2px 7px;
  width: 100%;
  text-align: left; }

.carousel-title {
  font-weight: 600; }

.subtitle {
  font-weight: 500;
  white-space: pre-wrap; }

.age {
  display: inline-block;
  border: solid 2px #666;
  padding: 0 10px 0 10px; }

.mini {
  border: solid 1px #666;
  padding: 0 5px 0 5px; }

.actionpanel {
  padding-top: 4px;
  padding-left: 109px; }

.section-header {
  font-weight: 700;
  padding: 0em 0em 0em 1em;
  position: absolute;
  bottom: 100; }

.playpanel {
  padding: 40px 0 0 100px;
  background-size: cover;
  background-position: center; }

.playpanel .playbutton {
  display: inline-block;
  border: solid 1px #ffffff;
  padding: 8px  0px 0px 10px;
  height: 30px;
  width: 30px;
  border-radius: 40px; }

.selected {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0px;
  height: 5px;
  border-top: 3px solid white; }

/****************************************************************************
    Component Name : Enterprise Appointment
    Version : Amexio v5.5.2 onwards
*****************************************************************************/
/** enterprise - Visual CSS **/
.weekdaycomponent {
  display: block;
  border: 1px solid #ced4da;
  box-shadow: 0 1px 3px 0 #ced4da; }

.availableweekday {
  color: var(--themePrimaryColor);
  background-color: var(--componentActiveBGColor);
  cursor: pointer; }

.availableweekday:focus {
  outline: none;
  color: var(--componentHeaderFontColor);
  background: var(--componentHeaderBGColor); }

.availableweekday:hover {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.selectedDay {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.notavailableweekday {
  text-decoration: line-through;
  cursor: not-allowed;
  color: lightgray; }

/****************************************************************************
    Component Name : Enterprise Calendar
    Version : Amexio v5.7 onwards
*****************************************************************************/
.calendar-header {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.calendar-header-items {
  border: 1px solid #ced4da; }

.calendar-box-items {
  border: 1px solid #ced4da; }

.calendar-inactive {
  opacity: 0.5; }

.calendar-active-box {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  border: 1px solid #ced4da; }

.calendar-week-active-timeslot {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.calendar-year-month-hasevent {
  color: var(--componentActiveBGColor);
  cursor: pointer; }

.calendar-active-custom-color {
  height: 100%;
  margin: 0px -5px; }

.calendar-active-1 {
  background-color: sandybrown;
  color: #211102; }

.calendar-active-2 {
  background-color: darkmagenta;
  color: #fffaff; }

.calendar-active-3 {
  background-color: deepskyblue;
  color: #000507; }

.calendar-active-4 {
  background-color: #1d008b;
  color: #fffaff; }

.calendar-active-5 {
  background-color: seagreen;
  color: #f0faf4; }

.calendar-active-6 {
  background-color: coral;
  color: #240a00; }

.calendar-active-7 {
  background-color: gold;
  color: #241e00; }

.calendar-active-8 {
  background-color: #ff9900;
  color: #241500; }

.calendar-active-9 {
  background-color: black;
  color: white; }

.calendar-box-items:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.calendar-user-active:focus {
  background-color: var(--componentHoverBGColor) !important;
  outline: none; }

.focuscls:focus {
  background-color: var(--componentHoverBGColor);
  outline: none; }

.calendar-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  font-size: 20px;
  font-weight: 300;
  text-transform: capitalize; }

.calendar-header-items {
  padding: 0.571em 1em;
  text-align: center; }

.calendar-mainbox {
  vertical-align: top; }

.calendar-scroller {
  height: 100%;
  overflow: auto; }

.calendar-box-items {
  padding: 0.571em 1em;
  vertical-align: top;
  text-align: right; }

.calendar-bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

.calendar-user-content {
  position: relative;
  padding-top: 20px; }

.calendar-user-active {
  font-size: 15px; }

.calendar-user-active-timeslot {
  font-size: 10px; }

.calendar-week-timeslot {
  font-size: 10px;
  border-top: 0px;
  border-bottom: 0px; }

.calendar-week-timeslot .calendar-week-timeslotseries-div {
  margin-top: -15px;
  min-height: 60px; }

.calendar-week-day-timeslot {
  min-height: 60px; }

.calendar-week-active-timeslot {
  position: absolute;
  padding: 0px 5px;
  text-align: left;
  cursor: pointer; }

.calendar-ul {
  list-style: none;
  list-style-position: inside;
  padding: 10px 2px; }

.calendar-li {
  padding-left: 5px;
  padding-bottom: 5px;
  cursor: pointer; }

.calendar-navigation {
  padding-left: 20px;
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.calendar-year {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.calendar-year-box {
  text-align: center;
  padding: 10px;
  flex: 0 0 25%;
  max-width: 50%;
  box-sizing: border-box;
  padding: 5px;
  flex-wrap: wrap; }

.calendar-year-month {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
  line-height: 24px; }

.calendar-year-month-today {
  height: 100%;
  width: 100%; }

/****************************************************************************
    Component Name : Enterprise Calendar
    Version : Amexio v5.12.1 onwards
*****************************************************************************/
.themecolorpalette {
  display: block;
  flex-grow: 1; }

/****************************************************************************
    Component Name : Enterprise Step Wizard
    Version : Amexio v5.5.2 onwards
*****************************************************************************/
.step-wizard {
  counter-reset: section;
  overflow-y: auto;
  overflow-x: hidden; }

.step-wizard-horizontal {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow-y: hidden; }

.step-wizard-horizontal li {
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative; }

.step-wizard-horizontal li:not(:last-child):after {
  content: "";
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  background-color: var(--componentFontColor); }

.step-wizard li a {
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; }

.step-wizard li.active a .label,
.step-wizard li.completed a .label {
  color: var(--componentFontColor); }

.step-wizard li a .label {
  display: inline-block;
  color: var(--componentFontColor); }

ul.step-wizard li.active a .circle {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

ul.step-wizard li.completed a .circle {
  background-color: var(--themeSecondaryColor);
  color: var(--appBackground); }

.step-wizard li a .circle {
  display: inline-block;
  color: var(--componentHoverFontColor);
  background: var(--componentDisabledBGColor);
  text-align: center; }

.step-wizard li.completed a .label {
  color: var(--componentFontColor); }

.step-wizard li.active a .labe {
  color: var(--componentFontColor); }

.step-wizard li a .label {
  display: inline-block;
  color: var(--componentFontColor); }

amexio-step-wizard-item .form-container {
  box-shadow: none; }

amexio-step-wizard .form-footer {
  justify-content: space-between; }

.stepTitleColor {
  color: var(--componentFontColor); }

.step-wizard {
  padding: 0.8rem 1.5rem 0.5rem 1.5rem; }

.step-wizard-horizontal li {
  margin-right: 15px; }

.step-wizard-horizontal li:not(:last-child):after {
  flex: 1;
  height: 1px; }

.step-wizard li a {
  padding: 0.4rem; }

.step-wizard li.completed a .label {
  font-weight: 600; }

.step-wizard li.active a .label {
  font-weight: 600; }

.step-wizard li a .circle {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  margin-right: .5rem; }

.step-wizard li.completed a .label {
  font-weight: 600;
  margin-right: 7px; }

.step-wizard li.active a .label {
  font-weight: 600;
  margin-right: 7px; }

.lhs-mobile {
  flex: 1 1 100% !important;
  max-width: 100% !important; }

.rhs-mobile {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  height: 100% !important; }

.topnav-lhs-inner {
  display: flex;
  flex-direction: row;
  justify-content: start; }

.topnav-lhs-nologo {
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column; }

.topnav-lhs-nologo .mobilebar {
  padding-top: 0px; }

.topnav-lhs-inner-mobile {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.topnavmainbaritems-mobile {
  width: 100%; }

amexio-homepage-northpanel .topnav {
  padding: 0px !important; }

.topnav-lhs {
  flex: 0 0 19%;
  max-width: 19%; }

.topnav-lhs-mobile {
  flex-direction: row;
  justify-content: space-evenly;
  display: flex; }

.topnav-lhs-mobile > div {
  flex-grow: 1; }

.topnav-lhs-mobile .mobilebar {
  flex-grow: 1; }

.topnav-lhs-mobile > div > span {
  padding: 0px !important; }

.topnav-rhs {
  flex-grow: 1;
  height: 50px; }

.topnav-lhs-mobile {
  padding-left: 45px; }

amexio-homepage-westpanel .homepage-westpanel {
  padding-top: 50px; }

amexio-homepage-centerpanel .homepage-centerpanel {
  padding: 10px;
  padding-top: 15px; }

.top-nav-button {
  padding-left: 0px; }

.homepage-2 .sidenav::-webkit-scrollbar,
.homepage-3 .sidenav::-webkit-scrollbar {
  width: 3px; }

.homepage-centerpanel-flex {
  flex-grow: 1;
  padding-top: 50px;
  width: 81%; }

.homepage-centerpanel-flex-fullview {
  flex-grow: 1;
  padding-top: 50px;
  width: 100%; }

.homepage-3 .homepage-expand {
  display: flex;
  justify-content: space-between;
  flex-direction: row; }

.homepage-3 .homepage-collapse {
  display: flex;
  justify-content: space-around;
  flex-direction: row; }

.homepage-2 .homepage-expand {
  display: flex;
  justify-content: space-between;
  flex-direction: row; }

.homepage-2 .homepage-collapse {
  display: flex;
  justify-content: space-between;
  flex-direction: row; }

.homepage-northpanel-flex {
  display: flex;
  flex-direction: row; }

.collaspe-icon-style {
  position: fixed;
  left: 17%;
  top: 0px;
  width: 50px;
  border-radius: 100%;
  height: 50px; }

.homepage-bar-collapse {
  padding-left: 10px;
  padding-right: 15px; }

.homepage-bar-collapse .fa {
  font-size: 26px; }

.homepage3-bar .fa {
  font-size: 26px; }

.collaspe-icon-style amexio-image {
  display: flex;
  align-items: center; }

.collaspe-icon-style {
  z-index: 2;
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor);
  justify-content: center;
  display: flex;
  cursor: pointer;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) !important;
  filter: grayscale(20%);
  transform: perspective(1px) translateZ(0);
  transition-duration: 0.5s;
  transition-property: box-shadow; }

.homepage-bar-collapse {
  cursor: pointer;
  transition: all .2s ease-in-out;
  transition-duration: .4s;
  transition-property: color, margin;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }

.homepage3-bar {
  cursor: pointer; }

/****************************************************************************
    Component Name : Tree Tab Calendar
    Version : Amexio v5.13 onwards
*****************************************************************************/
.sideNavBorder .sidenav {
  border-right: 1px solid #ced4da; }

/****************************************************************************
    Component Name : Calendar
    Version : Amexio v5.13 onwards
*****************************************************************************/
.fpClass amexio-floating-panel div {
  z-index: 300 !important; }

.fpRightClass amexio-floating-panel div {
  right: 0px;
  z-index: 300 !important; }

.fpClass amexio-floating-panel div .card-container-body {
  height: 100% !important; }

.fpRightClass amexio-floating-panel div .card-container-body {
  height: 100% !important; }

/****************************************************************************
    Component Name : Rich Editable Text
    Version : Amexio v5.20 onwards
*****************************************************************************/
.rich-first-div {
  border: 1px solid #ced4da; }

.rich-editor-buttons {
  background: white; }

.rich-text-editor {
  background-color: var(--componentBGColor); }

.rich-text-editor::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.rich-text-editor::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.rich-text-editor::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.rich-text-editor {
  border-radius: 5px;
  margin: 2px;
  overflow-x: hidden;
  padding: 1px; }

.rich-first-div {
  resize: both;
  border-radius: 5px;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 5px 0px, rgba(0, 0, 0, 0.12) 0px 2px 10px 0px; }

.rich-editor-buttons {
  border: 0;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 9px 0px;
  text-align: start;
  padding: 5px 0px; }

.rich-button {
  width: auto;
  cursor: pointer;
  line-height: 34px;
  text-align: center;
  padding: 0px !important;
  box-shadow: none; }

.rich-button .button-small {
  padding: 3px !important; }

.rich-button .button-small span {
  padding: 0px !important; }

.hidden-input {
  position: absolute;
  width: 1px;
  left: -10000px;
  top: auto;
  height: 1px;
  overflow: hidden; }

.heading-dropdown {
  width: auto;
  padding: .375rem 0;
  background: white;
  line-height: 2;
  border-radius: 0px;
  border: none;
  border-bottom: 1px solid var(--componentFontColor);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }

.heading-dropdown:required:invalid {
  color: gray; }

option[value=""][disabled] {
  display: none; }

option {
  cursor: pointer;
  color: black; }

.rich-text-editor::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.rich-text-editor::-webkit-scrollbar {
  width: 6px; }

.rich-seperator {
  margin-right: 16px; }

.rich-right-space {
  margin-right: 5px; }

.rich-editor-buttons amexio-layout-columns amexio-layout-item {
  padding: 0px 5px !important; }

/****************************************************************************
    Component Name : Availability
    Version : Amexio v5.19 onwards
*****************************************************************************/
.datespan {
  background-color: #DCDCDC;
  height: 5px;
  line-height: 20px; }

.maindiv {
  border: 1px solid black; }

.availability-row {
  margin-bottom: 3px;
  text-align: left;
  padding-left: 5px;
  background-color: #DCDCDC; }

.mainAvailabilityDiv {
  width: 100%;
  height: 100%; }

.availability-right-row {
  text-align: center;
  display: inline-block;
  width: 46px;
  line-height: 20px;
  margin-bottom: 3px;
  background-color: #DCDCDC;
  border-left: 3px solid #F6F6F6; }

.availability-right-row-ul {
  padding: 0px 0px 0px 0px !important;
  margin: 0;
  display: flex;
  list-style: none; }

.datespan {
  background-color: #DCDCDC;
  height: 5px;
  line-height: 20px; }

.maindiv {
  border: 1px solid black; }

.undoicon {
  margin-right: 1px; }

.timezonedrop {
  margin-left: 5px;
  /* margin-right:12px; */
  color: black;
  background-color: white;
  padding: 6px 4px 4px;
  border: 1px solid black; }

/*  */
.datespan1 {
  width: 100%;
  float: left;
  background-color: #DCDCDC;
  margin-top: 5px; }

.datespan2 {
  padding: 5px 0 !important;
  text-align: center;
  display: inline-block; }

.firstdiv {
  margin-top: 10px; }

/****************************************************************************
    Component Name : Datapoints
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** Datapoints - Visual CSS **/
.datapoints .datapoints-north {
  color: var(--componentDataBGColor); }
.datapoints .datapoint-south {
  background-color: var(--componentDataBGColor);
  color: var(--componentDataFontColor); }
.datapoints .datapoint-west {
  padding: 5px; }
.datapoints .datapoint-east {
  padding: 5px; }

.datapoint {
  background: var(--componentBGColor);
  color: var(--componentDataBGColor); }

/** Datapoints - Structure CSS **/
.datapoints {
  font-size: 125%;
  /* Border */
  border-radius: 0px;
  border: 1px solid #ced4da;
  padding: 0px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }
  .datapoints .datapoints {
    border: none;
    box-shadow: none; }
  .datapoints .datapoint-south {
    border-radius: 0px;
    padding: 5px;
    margin: 1px; }
  .datapoints .datapoint-west {
    padding: 5px; }
  .datapoints .datapoint-east {
    padding: 5px; }

/****************************************************************************
    Component Name : Datatable
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** Datatable - Structure CSS **/
.datatable-height::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.datagrid amexio-datagrid-header > * {
  padding: 3px; }

.datatable-height::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.datatable-height::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.datatable .datatable-header {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.datatable .datatable-row:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  cursor: pointer; }

.datatable .datatable-row-active {
  background-color: var(--componentActiveBGColor) !important; }

.datatable-row:nth-child(odd) {
  background-color: var(--appBackground); }

.datatable-col:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.float-right .enablecolumnfilter:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.dropdown-list .list-items:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.datatable-filter-icon:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.datatable-filter-icon1:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.float-right-datagridlist {
  float: right; }

.float-right-datagridlist:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

/** Datatable - Visual CSS **/
.datatabletitle {
  font-size: 1.5em;
  margin: .1em 0 .35em; }

.datatable {
  display: table;
  border-collapse: collapse;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed; }

.datatable-checkbox-width {
  width: 5%; }

.datatable-height {
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.datatable-height::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.datatable-height::-webkit-scrollbar {
  width: 6px; }

.datatable .title {
  margin: .5em 0 .75em; }

.datatable .datatable-header {
  display: table-header-group;
  text-align: left;
  font-size: larger;
  cursor: pointer; }

.datatable .datatable-col {
  vertical-align: middle; }

.datatable .datatable-row {
  border-bottom: 1px solid #ced4da;
  display: table-row;
  height: 50px; }

.datatable .datatable-row:hover {
  cursor: pointer; }

.datatable .datatable-col {
  display: table-cell;
  padding: .625em;
  text-align: left;
  overflow-wrap: break-word; }

.footer {
  margin: .1em 0 .35em;
  cursor: pointer;
  text-align: center; }

.col-group {
  text-align: left !important; }

.datatable-filter-icon {
  position: absolute;
  top: 10px;
  right: 0;
  display: block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center; }

.datatable-filter-icon1 {
  position: absolute;
  top: 1px;
  display: block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center; }

.iconPaddingStyle {
  padding-right: 5px; }

.datagrid-full-screen {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  background: white; }

/****************************************************************************
    Component Name : Horizontaltreeview
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** Horizontaltreeview - Visual CSS **/
.horizontaltreeview-node-label {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.horizontaltreeview-node-label:hover {
  color: var(--componentHoverFontColor);
  background-color: var(--componentHoverBGColor); }

/** Horizontaltreeview - Structure CSS **/
.horizontaltreeview {
  position: relative;
  overflow: auto; }

.horizontaltreeview-node {
  position: relative;
  margin-left: 250px; }
  .horizontaltreeview-node:before {
    content: "";
    width: 50px;
    border-top: 2px solid var(--componentActiveBGColor);
    position: absolute;
    left: -100px;
    top: 50%;
    margin-top: 1px; }

.horizontaltreeview-node-entry {
  position: relative;
  min-height: 60px; }
  .horizontaltreeview-node-entry:before {
    content: "";
    height: 100%;
    border-left: 2px solid var(--componentActiveBGColor);
    position: absolute;
    left: -50px; }
  .horizontaltreeview-node-entry:after {
    content: "";
    width: 50px;
    border-top: 2px solid var(--componentActiveBGColor);
    position: absolute;
    left: -50px;
    top: 50%;
    margin-top: 1px; }
  .horizontaltreeview-node-entry:first-child:before {
    width: 10px;
    height: 50%;
    top: 50%;
    margin-top: 2px;
    border-radius: 10px 0 0 0; }
  .horizontaltreeview-node-entry:first-child:after {
    height: 10px;
    border-radius: 10px 0 0 0; }
  .horizontaltreeview-node-entry:last-child:before {
    width: 10px;
    height: 50%;
    border-radius: 0 0 0 10px; }
  .horizontaltreeview-node-entry:last-child:after {
    height: 10px;
    border-top: none;
    border-bottom: 2px solid var(--componentActiveBGColor);
    border-radius: 0 0 0 10px;
    margin-top: -9px; }
  .horizontaltreeview-node-entry.sole:before {
    display: none; }
  .horizontaltreeview-node-entry.sole:after {
    width: 50px;
    height: 0;
    margin-top: 1px;
    border-radius: 0; }

.horizontaltreeview-node-label {
  display: block;
  min-width: 150px;
  padding: 5px 10px;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  cursor: pointer; }
  .horizontaltreeview-node-label span {
    padding-right: 5px; }

/****************************************************************************
    Component Name : Itemselector
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** Itemselector - Visual CSS **/
.item-selector-action-panel .actionbar .actionbarinner .action {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }
.item-selector-action-panel .actionbar .actionbarinner .actiondisable {
  background-color: var(--componentDisabledBGColor); }

.itemselector-list-active {
  background-color: var(--componentActiveBGColor); }

.itemselector-list-active:focus {
  background-color: var(--componentActiveBGColor);
  outline: none; }

.itemselector-list:focus {
  background-color: var(--componentHoverBGColor);
  outline: none; }

.itemselector-list:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

/** Itemselector - Structure CSS **/
.flex-col-45pt {
  max-width: 45%; }

.flex-col-10pt {
  max-width: 10%; }

.item-selector-action-panel .actionbar {
  display: flex;
  flex-direction: column; }
  .item-selector-action-panel .actionbar .actionbarinner {
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .item-selector-action-panel .actionbar .actionbarinner .action {
      width: 50px;
      height: 30px;
      text-align: center;
      cursor: pointer; }
    .item-selector-action-panel .actionbar .actionbarinner .movetop {
      display: block; }
    .item-selector-action-panel .actionbar .actionbarinner .moveup {
      display: block; }
    .item-selector-action-panel .actionbar .actionbarinner .moveleft {
      display: block; }
    .item-selector-action-panel .actionbar .actionbarinner .moveright {
      display: block; }
    .item-selector-action-panel .actionbar .actionbarinner .movedown {
      display: block; }
    .item-selector-action-panel .actionbar .actionbarinner .movebottom {
      display: block; }

.itemselector-list {
  list-style: none;
  cursor: pointer;
  font-weight: 400;
  margin: 1px 0;
  padding: 5px;
  text-align: left; }

/****************************************************************************
    Component Name : Listbox
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** Listbox - Visual CSS **/
.listbox-height::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.listbox-height::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.listbox-height::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.listbox .list .list-items .datatable-row:nth-child(odd) {
  background: none; }

.listbox .list .list-items:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.listbox .list {
  background-color: var(--componentBGColor); }
  .listbox .list .title {
    color: rgba(0, 0, 0, 0.87); }
    .listbox .list .title a {
      color: rgba(0, 0, 0, 0.87) !important; }

.list-items-click {
  background-color: var(--componentActiveBGColor); }

/** Listbox - Structure CSS **/
.listbox {
  margin-bottom: 1rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.listbox-height {
  overflow-y: auto;
  overflow-x: hidden; }

.listbox-height::-webkit-scrollbar {
  width: 6px; }

.list-box-items {
  background-color: #ffc0b8; }

.listbox .list {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  font-size: 100%;
  list-style: none; }

.listbox .list .list-items {
  list-style: none;
  border-bottom: 1px solid #ced4da;
  cursor: pointer;
  font-weight: 400;
  margin: 1px 0;
  padding: 10px;
  text-align: left;
  /*to remove and chk --imp*/ }
  .listbox .list .list-items .datatable {
    border: none;
    border-collapse: inherit; }

.listbox .list .title {
  float: left;
  font-size: 18px; }
  .listbox .list .title a {
    font-size: 16px;
    text-transform: lowercase; }

/****************************************************************************
    Component Name : Treenode
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** Treenode - Visual CSS **/
.treenode {
  background-color: transparent; }

/*.treenode-content:hover{
  background-color: $treeNodeHoverBGColor;
  color: $treeNodeHoverColor
}*/
.tree-node-label-hover:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.tree-node-label:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none; }

.treenode-label-active {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.tree-badge {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.context-menu-list li:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.context-menu-list-items-selected {
  background-color: var(--componentActiveBGColor) !important;
  color: var(--componentActiveFontColor); }

.tree-node-label-selected {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.context-menu-separator {
  border-bottom: 1px solid gray; }

.horizontaltreeview-node-label:focus {
  outline: none;
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

/** Treenode - Structure CSS **/
.treeview {
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: .25em;
  white-space: nowrap; }

.treenode {
  padding-left: 10px;
  transition: .5s;
  background-attachment: scroll;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat-y;
  list-style: none outside none;
  margin: 0; }

.treenode-toggler {
  cursor: pointer;
  position: relative;
  padding-top: 10px; }

.treenode-empty-space {
  padding-left: 15px; }

.treenode-label {
  padding: 10px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer; }

.treenode-children {
  margin: 0;
  padding: 0 0 0 1em;
  -moz-transition: expand .5s;
  -ms-transition: expand .5s;
  -o-transition: expand .5s;
  -webkit-transition: expand .5s;
  transition: expand .5s; }

.tree-node-label {
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden; }

.a {
  text-overflow: ellipsis; }

.tree-node-label-hover {
  width: 95%; }

.tree-badge {
  margin-left: 10px;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 10px; }

.context-menu-list {
  display: block;
  position: absolute;
  flex-direction: column;
  min-width: 180px;
  cursor: pointer;
  max-height: 150px;
  z-index: 1;
  padding: 10px 0px;
  overflow-y: auto;
  background-color: var(--componentBGColor) !important;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); }

.context-menu-list .context-menu-list-items {
  text-decoration: none;
  display: inline-block;
  font-size: 14px !important;
  padding: 5px;
  display: block; }

.tree-node-label-no-wrap {
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis; }

/****************************************************************************
    Component Name : PropertyGrid
    Version : Amexio v5.8.2 onwards
*****************************************************************************/
/** propertygrid - Visual CSS **/
/** propertygrid - Structure CSS **/
.borderStyle {
  border: 1px solid black;
  border-collapse: collapse; }

.field-name-align {
  word-break: break-all;
  padding-left: 5px; }

/****************************************************************************
    Component Name : Speech Bubble
    Version : Amexio v5.14.1onwards
*****************************************************************************/
/** speechbubble - Visual CSS **/
.bubble {
  background: var(--componentActiveBGColor); }

.speecharrowleft:after {
  border-color: transparent var(--componentActiveBGColor); }

.speecharrowright:after {
  border-color: transparent var(--componentActiveBGColor); }

.speecharrowbottomleft:after {
  border-color: var(--componentActiveBGColor) transparent; }

.speecharrowbottomright:after {
  border-color: var(--componentActiveBGColor) transparent; }

.speecharrowtopleft:after {
  border-color: var(--componentActiveBGColor) transparent; }

.speecharrowtopright:after {
  border-color: var(--componentActiveBGColor) transparent; }

/** speechbubble - Structure CSS **/
.bubble {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  border-radius: .4em; }

.speecharrowleft {
  margin-left: 7%;
  float: left; }

.speecharrowright {
  margin-right: 7%;
  float: right; }

.speecharrowtopleft {
  float: left; }

.speecharrowtopright {
  float: right; }

.speecharrowbottomleft {
  float: left; }

.speecharrowbottomright {
  float: right; }

.speecharrowleft:after {
  bottom: 12px;
  content: "";
  border-style: solid;
  position: absolute;
  left: -25px;
  border-width: 15px 26px 10px 0; }

.speecharrowright:after {
  bottom: 5px;
  content: "";
  border-style: solid;
  position: absolute;
  right: -24px;
  left: auto;
  border-width: 19px 0 20px 33px; }

.speecharrowbottomleft:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 34px;
  border-width: 15px 15px 0;
  border-style: solid;
  width: 0; }

.speecharrowbottomright:after {
  content: "";
  position: absolute;
  bottom: -15px;
  right: 34px;
  border-width: 15px 15px 0;
  border-style: solid;
  width: 0; }

.speecharrowtopleft:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 30px;
  border-style: solid;
  border-width: 0 15px 15px; }

.speecharrowtopright:after {
  content: "";
  position: absolute;
  top: -15px;
  right: 34px;
  border-style: solid;
  border-width: 0 15px 15px; }

.time {
  opacity: 0.5;
  position: absolute;
  padding-top: 17px; }

.timeclass {
  right: 20px; }

.timeright {
  padding-top: 27px;
  padding-right: 30px; }

.timeleft {
  padding-top: 27px;
  padding-left: 30px; }

/****************************************************************************
    Component Name : Menubar
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** menubar - Visual CSS **/
.menubar .menuheader .menulink a {
  color: var(--componentFontColor); }

.menubar .menuheader .menulink:hover a {
  color: var(--componentHoverFontColor);
  background-color: var(--componentActiveBGColor); }

.menulink:hover {
  background-color: var(--componentActiveBGColor);
  color: var(--componentFontColor); }

.menu-content {
  background: var(--componentBGColor); }

.menu-content .menu-content-cols .col-menu-nodes {
  background: none; }

.menu-content .menu-content-cols .content .menu-links-header {
  font-weight: bold;
  color: var(--componentFontColor); }

.menu-content .menu-content-cols .content .menu-links-header:hover {
  color: var(--componentHoverFontColor);
  background-color: var(--componentActiveBGColor); }

.menu-content .menu-content-cols .content .menulinks {
  color: var(--componentFontColor); }

.menu-content .menu-content-cols .content .menulinks:hover {
  color: var(--componentHoverFontColor);
  background-color: var(--componentActiveBGColor); }

.menubar .menuheader .menulink a {
  color: var(--componentHoverFontColor); }

/** menubar - Structure CSS **/
.menu-right {
  right: 10px; }

.menu-container {
  margin: 0 auto; }

.menubar .menuheader {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  display: table; }

.menubar .menuheader .menulink {
  float: left;
  padding: 0;
  margin: 0;
  cursor: pointer; }

.menubar .menuheader .menulink a {
  text-decoration: none;
  padding: 1.5em 1.5em;
  display: block; }

.menubar .menuheader .menulink:hover {
  display: block; }
  .menubar .menuheader .menulink:hover .menu-content {
    display: block; }

.menulink:focus {
  outline: none !important;
  background: var(--componentActiveBGColor) !important;
  color: var(--componentHoverFontColor); }

.menu-content {
  display: none;
  padding: 10px;
  position: fixed;
  z-index: 99;
  box-shadow: 0 0 5px 0 #ced4da; }

.menu-content-display {
  display: block !important; }

.menu-content-hide {
  display: none !important; }

.menu-content-left {
  left: 0;
  right: 0; }

.menu-content .menu-content-cols {
  list-style: none;
  float: left;
  padding: 0px;
  width: 100%; }

.menu-content .menu-content-cols .col-menu-nodes {
  list-style: none;
  float: left;
  display: block;
  height: 100%;
  padding-bottom: 10px; }

.menu-content .menu-content-cols .col-menu-nodes-fixed {
  width: 250px; }

.menu-content .menu-content-cols .col-menu-nodes-percentage {
  width: 25%; }

.menu-content .menu-content-cols .content {
  padding-right: 10px; }

.menu-content .menu-content-cols .content .menu-links-header {
  border-bottom: 1px solid #ced4da;
  padding: 10px;
  cursor: pointer; }

.menu-links-header:focus {
  outline: none !important;
  background: var(--componentActiveBGColor) !important;
  color: var(--componentHoverFontColor); }

.menu-content .menu-content-cols .content .menulinks {
  width: 100%;
  padding: 5px 10px 0px 10px;
  cursor: pointer; }

.menulinks:focus {
  outline: none !important;
  background: var(--componentActiveBGColor) !important;
  color: var(--componentHoverFontColor); }

/****************************************************************************
    Component Name : Navbar
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** navbar - Visual CSS **/
.topnav {
  background-color: var(--appHeaderBGColor);
  color: var(--appHeaderFontColor); }

.top-nav-button {
  background-color: inherit;
  color: var(--appHeaderFontColor); }

.topnav a {
  color: var(--appHeaderFontColor); }

.topnav a label {
  color: var(--appHeaderFontColor); }

.topnavmainbarinneritems .nav-dropdown-content {
  background-color: var(--appHeaderBGColor);
  color: var(--appHeaderFontColor); }

.topnavmainbarinneritems .nav-dropdown-content-transparent {
  background-color: transparent !important; }

.topnavmainbarinneritems-mobile .nav-dropdown-content {
  background-color: var(--appHeaderMenuBGColor);
  color: var(--appHeaderMenuFontColor); }

.topnavmainbarinneritems .nav-dropdown-content a {
  color: var(--appHeaderFontColor); }

.topnavmainbarinneritems .nav-dropdown-content a:hover {
  background-color: var(--appHeaderHoverBGColor);
  color: var(--appHeaderHoverFontColor) !important; }

.nav-dropdown:active {
  background-color: var(--appHeaderMenuBGColor);
  color: var(--appHeaderMenuFontColor); }

.topnavmainbarinneritems-mobile .top-nav-input-control {
  width: 100%; }

.mobilebar {
  color: var(--appHeaderFontColor); }

.topnav input {
  background-color: inherit;
  color: inherit; }

.nav-dropdown:hover .nav-dropdown-content .nav-menu-container {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

.nav-dropdown:hover .dropdownData {
  background-color: white; }

.nav-dropdown:hover .nav-dropdown-content .nav-menu-container a {
  color: var(--componentFontColor); }

.navbar-scroll::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.navbar-scroll::-webkit-scrollbar {
  width: 6px;
  background-color: var(--componentDisabledBGColor); }

.navbar-scroll::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

/** navbar - Structure CSS **/
.amexio-nav-submenus {
  display: block;
  z-index: 3;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
  background-color: var(--appHeaderBGColor);
  color: var(--appHeaderFontColor);
  padding: 0px; }

.amexio-nav-desktop-submenus {
  width: 250px;
  position: absolute; }

.amexio-nav-mobile-submenus {
  padding: 0px;
  position: relative; }

.amexio-nav-desktop-submenus .nav-desktop-link:hover {
  background-color: var(--appHeaderHoverBGColor);
  color: var(--appHeaderHoverFontColor); }

.nav-desktop-link {
  cursor: pointer;
  color: var(--appHeaderFontColor);
  text-decoration: none;
  display: inline-block;
  text-align: left;
  padding: 5px 10px;
  margin: 0px -10px; }

.nav-desktop-link > span {
  padding: 10px 0px;
  align-items: center; }

.nav-desktop-link > i {
  margin: 0px 5px; }

.nav-menu-separator {
  margin: 0px -10px;
  border-top: 1px solid; }

.nav-menu-header {
  padding: 5px 5px;
  opacity: 0.6;
  font-weight: 600; }

.nav-mobile-link {
  color: var(--appHeaderFontColor);
  text-decoration: none;
  display: inline-block;
  text-align: left; }

.nav-mobile-link > span {
  margin: 0px 30px 0px 50px;
  align-items: center; }

.nav-menu-mobile-separator {
  border-top: 1px solid; }

.topnav {
  position: fixed;
  width: 100%;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  z-index: 500; }

.transparentNav {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6) !important;
  background-color: transparent !important; }

.topnav-mobile {
  flex-direction: column;
  padding: 0px; }

.topnav * {
  vertical-align: middle; }

.top-nav-input-control {
  border-radius: 0px;
  padding: 0px 8px;
  border: none;
  border-bottom: 2px solid #ced4da;
  font-size: 1rem;
  line-height: 1.5;
  outline: none; }

.top-nav-button {
  border: none;
  box-shadow: none;
  cursor: pointer;
  font-size: 1rem; }

.topnav a {
  cursor: pointer;
  padding: 0px 8px; }

.topnav-lhs-mobile {
  width: 100%;
  padding: 5px;
  display: flex;
  justify-content: space-between; }

.topnavbarunit2-mobile {
  width: 100%;
  box-shadow: 0px 0px 2px 0px #ced4da; }

.topnavmainbar {
  display: flex;
  justify-content: space-between;
  height: inherit; }

.topnavmainbar-mobile {
  flex-direction: column;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden; }

.topnavmainbaritems {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  height: inherit;
  align-items: center; }

.topnavmainbaritems-mobile {
  flex-direction: column;
  align-items: unset; }

.topnavmainbarinneritems {
  display: contents;
  padding: 0px 8px; }

.topnavmainbarinneritems-mobile {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ced4da; }

.topnavmainbarinneritems .nav-dropdown {
  float: left;
  overflow: hidden; }

.topnavmainbarinneritems-mobile .nav-dropdown {
  width: 100%;
  line-height: 50px;
  flex-direction: column;
  display: flex; }

.top-nav-link {
  padding: 0px 8px; }

.top-nav-link i {
  padding: 0px 5px; }

.topnavmainbarinneritems-mobile .nav-dropdown .nav-dropbtn .dropdownicon {
  float: right;
  margin-top: 20px;
  margin-right: 20px; }

.nav-dropdown .nav-dropbtn em {
  padding: 0px 5px;
  margin-bottom: 2px; }

.nav-dropdown .nav-dropbtn {
  padding: 0px 8px; }

.topnavmainbarinneritems .nav-dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 3;
  padding: 10px 0px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
  transform-origin: 0 0; }

.topnavmainbarinneritems .nav-dropdown-content a {
  text-decoration: none;
  display: block;
  padding: 10px 10px;
  text-align: left; }

.topnavmainbarinneritems .nav-dropdown-content-mobile {
  position: absolute;
  min-width: 160px;
  z-index: 3;
  padding: 10px 0px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
  transform-origin: 0 0; }

.topnavmainbarinneritems .nav-dropdown-content-mobile a {
  text-decoration: none;
  display: block;
  padding: 10px 10px;
  text-align: left; }

.topnavmainbarinneritems-mobile .nav-dropdown-content {
  display: none;
  margin: 0px 5px;
  padding: 0px 5px;
  position: relative;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6); }

.nodehover {
  display: none; }

.nodehover:hover {
  background-color: var(--componentBGColor); }

.nav-dropdown:hover .nav-dropbtn .dropdownicon {
  transform: rotate(180deg); }
.nav-dropdown:hover .nav-dropdown-content {
  display: block; }

.nav-dropdown:hover .dropdownData {
  display: block;
  position: absolute;
  min-width: auto;
  z-index: 3;
  padding: 10px 0px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
  transform-origin: 0 0; }

.nav-dropdown-content-subnode {
  display: inline-flex;
  justify-content: space-between;
  text-decoration: none;
  width: 100%;
  background-color: var(--appHeaderBGColor);
  color: var(--appHeaderFontColor); }

.nav-dropdown-content-subnode > .innersubmenunodes {
  display: none;
  position: absolute;
  left: 100%;
  text-decoration: none;
  width: 100%;
  background-color: var(--appHeaderMenuBGColor); }

.nav-dropdown-content-subnode > .innersubmenunodesright {
  display: none;
  position: absolute;
  right: 100%;
  text-decoration: none;
  width: 100%;
  background-color: var(--appHeaderMenuBGColor); }

.nav-dropdown-content-subnode:hover {
  background-color: var(--appHeaderHoverBGColor);
  color: var(--appHeaderHoverFontColor); }

.nav-dropdown-content-subnode:hover > .innersubmenunodes {
  display: block; }

.nav-dropdown-content-subnode:hover > .innersubmenunodesright {
  display: block; }

.submenunodes {
  display: none;
  background-color: var(--appHeaderMenuBGColor);
  position: absolute;
  left: 100%;
  width: 100%;
  margin-top: -10px; }

.submenunodesright {
  display: none;
  background-color: var(--appHeaderMenuBGColor);
  position: absolute;
  right: 100%;
  width: 100%;
  margin-top: -10px; }

.nav-dropdown-content a:hover .submenunodes {
  display: inline-table; }
.nav-dropdown-content a:hover .submenunodesright {
  display: inline-table; }

.topnavmainbarinneritems-mobile .top-nav-input-control {
  width: 100%; }

.mobilebar {
  display: inline-block;
  float: right;
  padding-right: 10px;
  padding-top: 8px;
  cursor: pointer; }

.nav-dropdown-content-right .nav-dropdown-content {
  right: 10px; }

.navbar-logo {
  width: 50px;
  height: 50px; }

.sidenav-padding {
  display: inline-flex;
  flex-direction: row;
  height: 50px;
  align-items: center; }

.sidenav-mobile-bar {
  height: 50px; }

.sidenav-mobile-bar-left {
  flex-direction: column;
  justify-content: center;
  padding: 0px 10px;
  left: 0; }

.homepage-collapse {
  align-items: center; }

.transparentNav1 {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6) !important;
  background-color: transparent !important;
  opacity: 0.9 !important; }

.testClass .nav-dropdown-content {
  max-height: 500px;
  right: 0px; }

.topnavmainbarinneritems .nav-dropdown-content {
  width: 250px;
  max-width: 1000px;
  display: none;
  position: absolute;
  z-index: 3;
  padding: 10px 0px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0; }

.topnavmainbarinneritems .nav-dropdown-content-mobile {
  width: 94%;
  display: none;
  position: absolute;
  z-index: 3;
  padding: 10px 0px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0; }

.mobileModeNav {
  position: relative !important;
  width: 100% !important;
  box-shadow: none !important;
  height: 250px !important;
  overflow-y: auto !important; }

.separator-header {
  display: inline-flex;
  justify-content: space-between;
  text-decoration: none;
  width: 100%;
  color: var(--appHeaderFontColor);
  font-weight: 600; }

.navbar-scroll {
  overflow-y: auto; }

/****************************************************************************
    Component Name : Paginator
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** paginator - Visual CSS **/
.paginator .paginator-pages .paginator-page {
  color: inherit; }

.paginator .paginator-pages .paginator-page:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.paginator .paginator-pages .active {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.paginator-page:focus {
  outline: none;
  background-color: var(--componentHoverBGColor); }

.paginator-pages:focus {
  outline: none;
  background-color: var(--componentHoverBGColor); }

/** paginator - Structure CSS **/
.paginator {
  padding: 10px; }

.paginator .paginator-pages {
  display: inline-block;
  padding: .125em .375em;
  zoom: 1;
  margin-left: .063em;
  margin-right: .063em;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer; }

.paginator .paginator-pages .paginator-page {
  display: inline-block;
  padding: .125em .375em;
  zoom: 1;
  margin-left: .063em;
  margin-right: .063em;
  text-decoration: none;
  vertical-align: middle;
  border: 1px solid #ced4da;
  border-radius: 2px; }

/****************************************************************************
    Component Name : Sidenav
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** sidenav - Visual CSS **/
.sidenav-mobile-bar {
  color: var(--componentFontColor); }

.sidenav-mobile-bar-left {
  color: var(--appHeaderFontColor); }

.sidenav-mobile-bar-right {
  color: var(--appHeaderFontColor); }

.sidenav-color {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

.sidenav::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.sidenav::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.sidenav::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.left {
  background-color: var(--componentBGColor); }

.right {
  background-color: var(--componentBGColor); }

.sidenav .title {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

.sidenav .headernode:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.sidenav .headernode:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none !important; }

.sidenav .headernodeSeparator:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.sidenav .defaultnode:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none !important; }

.sidenav .defaultnode:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.sidenav .activenode {
  background-color: var(--componentActiveBGColor) !important;
  color: var(--componentActiveFontColor) !important; }

.sidenav .border {
  border-bottom: 1px solid #ced4da; }

.sidenav-submenu-expanded {
  overflow-x: hidden !important; }

.nav-badge {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

/** sidenav - Structure CSS **/
.sidenav-mobile-bar {
  top: 10px;
  position: relative;
  z-index: 3; }

.sideInnerNodeCss {
  display: inline-flex;
  width: 100%; }

.sideInnerNodeFlex {
  flex-grow: 1; }

.sidenav-mobile-bar-left {
  top: 10px;
  position: fixed;
  z-index: 9900;
  left: 0; }

.sidenav-submenu-details .tablink {
  padding: 0px; }

.sidenav-mobile-bar-right {
  top: 10px;
  position: fixed;
  z-index: 3;
  right: 0; }

.sidenav {
  overflow: auto;
  z-index: 1; }

.sidenav::-webkit-scrollbar {
  width: 6px; }

.left {
  left: 0;
  position: fixed;
  overflow: auto;
  z-index: 1;
  box-shadow: 0 0 5px 0 #ced4da; }

.right {
  right: 0;
  position: fixed;
  overflow: auto;
  z-index: 1;
  box-shadow: 0 0 5px 0 #ced4da; }

.sidenav ul {
  list-style: none;
  padding: 0;
  margin: 0; }

.sidenav ul li {
  padding-left: 20px; }

.sidenav .title {
  cursor: pointer;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 100%;
  margin-left: -100%; }

.sidenav .headernode {
  cursor: pointer;
  padding: 13px 0px 13px 17px;
  padding-left: 100%;
  margin-left: -100%;
  display: inline-flex;
  width: 100%; }

.sidenav .headernodeSeparator {
  cursor: pointer;
  padding: 13px 0px 13px 17px;
  padding-left: 100%;
  margin-left: -100%;
  border-top: 1px solid #ced4da !important; }

.sidenav .headernodeSeparator .node-icon {
  padding-right: 20px; }

.sidenav .defaultnode {
  cursor: pointer;
  padding: 13px 0px 13px 17px;
  padding-left: 100%;
  margin-left: -100%; }

.sidenav .border {
  padding-left: 100%;
  margin-left: -100%;
  border-bottom: 1px solid #ced4da; }

.sidenav .headernode .node-icon {
  padding-right: 20px; }

.sidenav .defaultnode .node-icon {
  padding-right: 20px; }

.sidenav-submenu-details {
  overflow: hidden;
  height: auto;
  max-height: 0;
  transition: max-height 0.5s ease-in-out; }

.submenu-details {
  overflow: hidden;
  height: auto;
  max-height: 0; }

.sidenav-submenu-expanded {
  max-height: 10000px;
  overflow: auto; }

.nav-badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 10px; }

/****************************************************************************
    Component Name : Dockbar
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** dockbar - Visual CSS **/
.dockbar {
  background-color: var(--themeSecondaryColor);
  color: #ced4da; }

.dockbar-content {
  background-color: var(--componentBGColor); }

/* Style the buttons inside the tab */
.dockbar button {
  background-color: inherit;
  color: #ced4da; }

/* Change background color of buttons on hover */
.dockbar button:hover {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

/* Create an active/current "tab button" class */
.dockbar button.active {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.dockbar-label-highlight {
  color: black; }

.dockbar-item-close-bar {
  color: var(--themePrimaryColor); }

.dockbar-height::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.dockbar-height::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.dockbar-height::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

/** dockbar - Structure CSS **/
.dockbar {
  float: left;
  width: 70px;
  position: relative;
  border-top: 1px solid #ced4da;
  border-bottom: 5px solid var(--themeSecondaryColor); }

/* Style the buttons inside the tab */
.dockbar button {
  display: block;
  padding: 5px;
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 1px solid #ced4da;
  border-left: 1px solid #ced4da;
  height: 50px; }

/* Create an active/current "tab button" class */
.dockbar button.active {
  border-left: 3px solid var(--themePrimaryColor); }

.dockbar-label-highlight {
  font-weight: bold; }

.dockbar-item-close-bar {
  font-size: 24px;
  float: right;
  font-weight: 500;
  cursor: pointer; }

.dockbar-title {
  font-size: 17px;
  font-weight: 500;
  padding: 15px 10px 10px 10px;
  border-bottom: 1px solid var(--themePrimaryColor); }

.dockbar-active-content {
  border-top: 3px solid var(--themePrimaryColor);
  border-right: 3px solid var(--themePrimaryColor);
  border-bottom: 3px solid var(--themePrimaryColor);
  height: 100%; }

.dockbar-height {
  overflow-y: auto;
  overflow-x: hidden; }

.dockbar-height::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.dockbar-height::-webkit-scrollbar {
  width: 6px; }

/****************************************************************************
    Component Name : Breadcrumb
    Version : Amexio v5.2 onwards
*****************************************************************************/
/** dockbar - Visual CSS **/
.breadcrum-rightshift-css {
  background-color: var(--appBackground); }

.context-menu-list1 {
  background-color: var(--componentBGColor);
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); }

.context-menu-list1 :hover {
  background-color: var(--componentHoverBGColor); }

.breadcrumb-group:hover {
  border: 1px solid var(--componentHoverBGColor);
  display: table !important; }

.breadcrumb-group {
  border-color: transparent; }

.breadcrumb-group:hover {
  border: 1px solid var(--componentHoverFontColor);
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.breadcrumb-group:hover .arrow-group-css {
  border-left: 1px solid var(--componentHoverFontColor); }

.arrow-group-css:hover {
  border-left: 1px solid var(--componentHoverFontColor); }

.arrow-group-css {
  border-left: 1px solid #f7f3f3; }

/** dockbar - Structure CSS **/
.breadcrum-rightshift-css {
  display: inline-flex;
  width: 100%;
  cursor: pointer;
  flex-direction: row;
  position: relative; }

.context-menu-list1 {
  display: block;
  position: absolute;
  flex-direction: column;
  min-width: 180px;
  cursor: pointer;
  max-height: auto;
  z-index: 1;
  margin-top: 8px;
  padding: 10px 0px; }

.context-menu-list1 .context-menu-list-items1 {
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  display: block;
  width: 94%;
  overflow: hidden; }

.arrow-icon-css {
  cursor: pointer; }

.data-click-css {
  cursor: pointer;
  font-size: 16px; }

.breadcrumb-group {
  padding: 7px; }

.breadcrumb-group:hover {
  padding: 6px; }

.label {
  display: none !important;
  margin: 0px !important; }

.arrow-group-css:hover {
  content: '';
  display: initial !important;
  margin-top: 0px !important;
  height: 120%;
  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-left: 1px solid #797575; }

.arrow-group-css {
  content: '';
  display: initial;
  margin-top: 0px;
  padding-left: 8px;
  height: 120%;
  padding-top: 8px;
  padding-bottom: 8px;
  border-left: 1px solid #f7f3f3; }

.label-icon-css {
  cursor: pointer; }

.dropdown-icon-css {
  width: 20%;
  text-align: left;
  display: inline; }

.dropdown-label-css {
  width: 80%;
  float: right;
  display: inline; }

.context-menu-list-items1:focus {
  background-color: var(--componentHoverBGColor);
  outline: none; }

.breadcrumb-group:focus {
  background: var(--componentHoverBGColor);
  outline: none; }

.arrow-group-css:focus {
  outline: none; }

.label-icon-css:focus {
  background: var(--componentHoverBGColor);
  outline: none; }

/****************************************************************************
    Component Name : Taskbar
    Version : Amexio v5.18 onwards
*****************************************************************************/
/** dockbar - Visual CSS **/
.taskbar {
  background: var(--componentHoverBGColor); }

/** dockbar - Structure CSS **/
.taskbar {
  display: flex;
  position: fixed;
  z-index: 999;
  bottom: 0px;
  left: 0px;
  padding: 10px  0px 10px 4px;
  width: 100%; }

.taskbar-item-display-fixed {
  background: rgba(128, 127, 127, 0.6);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 700;
  padding-top: 15%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  top: 0;
  left: 0; }

.taskbar-item-display-relative {
  display: block;
  position: fixed;
  bottom: 60px; }

/** Initialze Panels and Layouts variables ------------ */
/****************************************************************************
    Component Name : Accordion
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** accordion - Visual CSS **/
.accordion {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.accordion .active-accordion, .accordion:hover, .accordion:focus {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.accordion-transparent:focus, .accordion-transparent:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentActiveFontColor); }

.accordion:after {
  color: #dc143c; }

.panel {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

/** Transparent Styling **/
.accordion-transparent {
  background: var(--componentBGColor);
  color: var(--componentFontColor); }

.accordion .amexio-accordion-header {
  color: var(--componentHeaderFontColor); }

.accordion-transparent:after {
  color: red; }

/** accordion - Structure CSS **/
amexio-accordion {
  display: flex;
  flex-direction: column; }

amexio-accordion > amexio-accordion-tab {
  padding-bottom: 1px; }

.accordion {
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 0px;
  text-align: left;
  outline: none;
  font-size: 17px;
  transition: 0.4s; }

.accordion:after {
  font-weight: bold;
  float: right;
  margin-left: 5px; }

.panel {
  padding: 18px;
  overflow: auto; }

/** Transparent Styling **/
.accordion-transparent {
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border-color: var(--componentBGColor);
  text-align: left;
  outline: none;
  font-size: 17px;
  transition: 0.4s;
  box-shadow: none;
  border-top: 1px solid #ced4da; }

.accordion-transparent:after {
  font-weight: bold;
  float: right;
  margin-left: 5px; }

.accordion-disable {
  opacity: 0.55;
  cursor: not-allowed; }

.accordion .amexio-accordion-header > * {
  padding: 5px; }

/****************************************************************************
    Component Name : Cards
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** cards - Visual CSS **/
.card-container {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

.card-header {
  background: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.card-header .toolbar {
  background-color: unset;
  box-shadow: unset;
  padding: 0px; }

.cardbody::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.cardbody::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.cardbody::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.card-footer {
  background-color: var(--componentBGColor);
  color: var(--componentFooterFontColor); }

.card-container-pol-styl {
  transform: rotate(2deg);
  margin: 2em; }

.card-container-pol-styl2 {
  transform: rotate(-2deg);
  margin: 2em; }

.card-container-pol-styl3 {
  transform: rotate(4deg);
  margin: 2em; }

.card-container-pol-styl4 {
  transform: rotate(-4deg);
  margin: 2em; }

.card-container-pol-styl:hover {
  transform: scale(1.2);
  z-index: 10; }

.card-container-pol-styl2:hover {
  transform: scale(1.2);
  z-index: 10; }

.card-container-pol-styl3:hover {
  transform: scale(1.2);
  z-index: 10; }

.card-container-pol-styl4:hover {
  transform: scale(1.2);
  z-index: 10; }

/** cards - Structure CSS **/
.card-container {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 100%; }

.card-container > * {
  padding: 10px;
  text-align: left; }

.card-header {
  padding: 10px 12px 10px 24px;
  font-size: 20px;
  font-weight: 300;
  text-transform: capitalize; }

.card-body {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  flex-grow: 1;
  padding-left: 16px;
  padding-right: 16px; }

.cardbody::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.cardbody::-webkit-scrollbar {
  width: 6px;
  height: 6px; }

.card-footer {
  display: flex;
  border-top: 1px solid #ced4da; }

.full-screen-card {
  position: fixed;
  top: 0;
  height: 100%;
  left: 0;
  z-index: 1000;
  width: 100%; }

/****************************************************************************
    Component Name : Form
    Version : Amexio v4.1.6 onwards
*****************************************************************************/
/** cards - Visual CSS **/
.form-container {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

.form-error {
  color: var(--componentHeaderBGColor);
  font-weight: bold; }

.form-header {
  background: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

.form-header .toolbar {
  background-color: unset;
  box-shadow: unset;
  padding: 0px;
  overflow: none; }

.formbody::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.formbody::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.formbody::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.form-footer {
  background-color: var(--componentBGColor);
  color: var(--componentFooterFontColor); }

.form-tooltip .form-tooltiptext {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

/** cards - Structure CSS **/
.form-container {
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.form-container > * {
  padding: 10px;
  text-align: left; }

.form-header {
  padding: 10px 24px;
  font-size: 20px;
  font-weight: 300;
  text-transform: capitalize;
  overflow: auto; }

amexio-form-header {
  display: flex;
  justify-content: inherit; }

.form-body {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  padding-left: 16px;
  padding-right: 16px; }

.formbody::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.formbody::-webkit-scrollbar {
  width: 6px; }

.form-footer {
  display: flex;
  border-top: 1px solid #ced4da; }

.form-tooltip {
  position: relative;
  display: inline-block;
  padding: 5px; }

.form-tooltip .form-tooltiptext {
  visibility: hidden;
  width: 150px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  top: 100%;
  left: 60%;
  margin-left: -100px;
  /* Use half of the width (120/2 = 60), to center the tooltip */
  /* Position the tooltip */
  position: absolute;
  z-index: 1; }

.form-tooltip:hover .form-tooltiptext {
  visibility: visible; }

/****************************************************************************
    Component Name : Carousel
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** carousel - Visual CSS **/
/** carousel - Structure CSS **/
.carouselnavigation {
  padding: 125px 16px;
  cursor: pointer; }

.tablistitems:focus {
  border: 2px solid var(--componentHeaderBGColor);
  outline: none; }

/****************************************************************************
    Component Name : Fieldset
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** fieldset - Visual CSS **/
/** fieldset - Structure CSS **/
fieldset {
  border: 1px solid #ced4da;
  border-radius: 2px; }

.collapsible-legend {
  padding: 5px 10px;
  font-size: 13px;
  margin-left: 20px;
  box-shadow: none;
  border: 0;
  font-weight: bold;
  cursor: pointer; }

.collapsible-legend:focus {
  outline: none;
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.collapsible-fieldset {
  overflow: inherit; }

.collapsible-fieldset.active {
  height: auto; }

/****************************************************************************
    Component Name : steps
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** steps - Visual CSS **/
.step-label-highlight {
  color: var(--componentHeaderFontColor);
  font-weight: bold; }

.stepwizard-step p {
  color: var(--componentDisabledBGColor); }

.step-block-icon-disable {
  color: var(--componentDisabledFontColor); }

.step-box-table-item:focus {
  outline: none;
  background-color: var(--componentHoverBGColor) !important;
  color: var(--componentHoverFontColor); }

.stepwizard-row:before {
  background-color: var(--appBackground); }

.btn-circle {
  font-size: 12px; }

.step-box-table-item {
  background-color: var(--appBackground); }

.step-box-table-item a {
  color: var(--componentFontColor); }

.step-box-table-item.active {
  background-color: var(--componentActiveBGColor); }

.step-box-table-item.disbaled {
  background-color: var(--componentDisabledBGColor);
  color: var(--componentDisabledFontColor); }

.index-step-inactive {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.step-box-table-item-hover:hover {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

/** steps - Structure CSS **/
.stepwizard-step p {
  margin-top: 0px; }

.stepwizard-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between; }

.stepwizard {
  display: table;
  width: 100%;
  position: relative; }

.step-block-icon-disable {
  cursor: not-allowed; }

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  z-index: 0; }

.stepwizard-step {
  width: 100%;
  display: table-cell;
  text-align: center;
  position: relative; }

.btn-circle {
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  display: inline-block;
  line-height: 1.25;
  white-space: nowrap;
  outline: none;
  user-select: none;
  border: 1px solid #ced4da;
  transition: all .2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; }

.step-box-sqaure {
  width: 100%;
  display: table;
  table-layout: fixed; }

.step-box-table {
  display: table-row; }

.step-box-table-item {
  width: 2px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  line-height: 15px;
  border: 1px solid #ced4da;
  padding-top: 5px;
  cursor: pointer; }

.step-box-table-item.active {
  cursor: default; }

.step-box-table-item.disbaled {
  cursor: not-allowed; }

.index-step-inactive {
  cursor: not-allowed; }

.step-box-table-item-hover:hover {
  cursor: pointer; }

/****************************************************************************
    Component Name : Tab
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** tab - Visual CSS **/
.verticalnavtab .defaultnode {
  background-color: var(--componentBGColor);
  color: var(--componentActiveFontColor); }

.verticalnavtab .leftactivetab {
  background-color: var(--componentActiveBGColor);
  font-weight: bold;
  color: var(--componentActiveFontColor); }

.verticalnavtab .leftactiverotatetab {
  background-color: var(--componentActiveBGColor);
  font-weight: bold;
  color: var(--componentActiveFontColor); }

.rightactivetabrotate {
  background-color: var(--componentActiveBGColor);
  font-weight: bold;
  color: var(--componentActiveFontColor); }

.verticalnavtab .rightactivetab {
  background-color: var(--componentActiveBGColor);
  color: var(--componentActiveFontColor); }

.tabcontent::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.tabcontent::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.tabcontent::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

/** Theme Colors for Tab*/
/** CSS Class definitions for the Amexio Colors --- */
/** Amexio Colors --- 
   Crimson: #dc143c rgb(220,20,60,0.0);
   fffafb: #fffafb rgb(255,250,251,0.0);
*/
.amexio-bottom-tab-red {
  color: #dc143c;
  border-top: 1px solid #dc143c !important; }

/** Amexio Colors --- 
   SeaGreen: #2e8b57 rgb(46,139,87,0.0);
   f0faf4: #f0faf4 rgb(240,250,244,0.0);
*/
.amexio-bottom-tab-green {
  border-top: 1px solid #208d4f !important;
  color: #208d4f; }

/** Amexio Colors --- 
   DarkMagenta: #8b008b rgb(139,0,139,0.0);
   fffaff: #fffaff rgb(255,250,255,0.0);
*/
.amexio-bottom-tab-purple {
  border-top: 1px solid #8b008b !important;
  color: #8b008b; }

/** Amexio Colors --- 
   DarkBlue: #00008b rgb(0,0,139,0.0);
   f5f5ff: #f5f5ff rgb(245,245,255,0.0);
*/
.amexio-bottom-tab-blue {
  border-top: 1px solid #00008b !important;
  color: #00008b; }

/** Amexio Colors --- 
   SandyBrown: #f4a460 rgb(244,164,96,0.0);
   211102: #211102 rgb(33,17,2,0.0);
*/
.amexio-bottom-tab-brown {
  border-top: 1px solid #800000 !important;
  color: #800000; }

/** Amexio Colors --- 
   Gold: #ffd700 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-bottom-tab-yellow {
  border-top: 1px solid #FFFF00 !important;
  color: #FFFF00; }

/** Amexio Colors --- 
   Pink: #FF69B4 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-bottom-tab-pink {
  border-top: 1px solid #FF69B4 !important;
  color: #FF69B4; }

/** Amexio Colors --- 
   Orange: #FFA500 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-bottom-tab-orange {
  border-top: 1px solid #FFA500 !important;
  color: #FFA500; }

/** Amexio Colors --- 
   Black: #FFA500 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-bottom-tab-black {
  border-top: 1px solid #000000 !important;
  color: #000000; }

/** CSS Class definitions for the Amexio Colors --- */
/** Amexio Colors --- 
   Crimson: #dc143c rgb(220,20,60,0.0);
   fffafb: #fffafb rgb(255,250,251,0.0);
*/
.amexio-top-tab-red {
  color: #dc143c;
  border-bottom: 1px solid #dc143c !important; }

/** Amexio Colors --- 
   SeaGreen: #2e8b57 rgb(46,139,87,0.0);
   f0faf4: #f0faf4 rgb(240,250,244,0.0);
*/
.amexio-top-tab-green {
  border-bottom: 1px solid #208d4f !important;
  color: #208d4f; }

/** Amexio Colors --- 
   DarkMagenta: #8b008b rgb(139,0,139,0.0);
   fffaff: #fffaff rgb(255,250,255,0.0);
*/
.amexio-top-tab-purple {
  border-bottom: 1px solid #8b008b !important;
  color: #8b008b; }

/** Amexio Colors --- 
   DarkBlue: #00008b rgb(0,0,139,0.0);
   f5f5ff: #f5f5ff rgb(245,245,255,0.0);
*/
.amexio-top-tab-blue {
  border-bottom: 1px solid #00008b !important;
  color: #00008b; }

/** Amexio Colors --- 
   SandyBrown: #f4a460 rgb(244,164,96,0.0);
   211102: #211102 rgb(33,17,2,0.0);
*/
.amexio-top-tab-brown {
  border-bottom: 1px solid #800000 !important;
  color: #800000; }

/** Amexio Colors --- 
   Gold: #ffd700 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-top-tab-yellow {
  border-bottom: 1px solid #FFFF00 !important;
  color: #FFFF00; }

/** Amexio Colors --- 
   Pink: #FF69B4 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-top-tab-pink {
  border-bottom: 1px solid #FF69B4 !important;
  color: #FF69B4; }

/** Amexio Colors --- 
   Orange: #FFA500 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-top-tab-orange {
  border-bottom: 1px solid #FFA500 !important;
  color: #FFA500; }

/** Amexio Colors --- 
   Black: #FFA500 rgb(255,215,0,0.0);
   241e00: #241e00 rgb(36,30,0,0.0);
*/
.amexio-top-tab-black {
  border-bottom: 1px solid #000000 !important;
  color: #000000; }

.table1 {
  display: table;
  padding: 5px; }

.table1 .tablerow {
  display: table-row; }

.table1 .tablerow .tablecol {
  display: table-cell;
  padding-right: 5px;
  padding-left: 5px;
  vertical-align: middle; }

.table1:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor);
  outline: none !important; }

/** tab - Structure CSS **/
.tab {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ced4da; }

.tab li {
  display: table-cell;
  position: relative; }

.tablink {
  display: table-cell;
  text-decoration: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 0px;
  white-space: nowrap;
  color: var(--componentFontColor); }

.activetab {
  border-bottom: 3px solid var(--themePrimaryColor) !important; }

.disabled-tab {
  cursor: not-allowed !important;
  opacity: 0.5; }

.tabnavigation {
  padding: 10px 16px;
  cursor: pointer; }

.tabcontent {
  width: inherit;
  position: relative;
  color: var(--componentFontColor); }

.tabcontent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.tabcontent::-webkit-scrollbar {
  width: 6px;
  height: 6px; }

/**VERTICAL TABS**/
.verticalnavtab {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto; }

.verticalnavtab ul {
  list-style: none;
  padding: 0;
  margin: 0; }

.verticalnavtab .defaultnode {
  cursor: pointer;
  color: var(--componentFontColor);
  padding: 10px; }

.verticalnavtab .defaultnode:hover {
  font-weight: bold; }

.verticalnavtab .leftactivetab {
  font-weight: bold;
  border-right: 3px solid var(--themePrimaryColor); }

.tabposition-top {
  display: table-cell;
  vertical-align: top; }

.tabposition-bottom {
  display: table-cell;
  vertical-align: bottom; }

.verticalnavtab .rightactivetab {
  font-weight: bold;
  border-left: 3px solid var(--themePrimaryColor); }

.verticalnavtab-left {
  font-weight: bold;
  width: max-content; }

.verticalnavtab-right {
  font-weight: bold;
  width: max-content; }

.verticalalign-tableft {
  border-right: 1px solid #ced4da !important; }

.verticalalign-tabright {
  border-left: 1px solid #ced4da !important; }

.verticalalign-tabcontent {
  vertical-align: top !important; }

.float-right {
  float: right; }

.float-left {
  float: left; }

.equally-align-tabs {
  display: flex;
  width: 100%; }

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

.activecolortab {
  border-bottom: 3px solid var(--componentActiveBGColor) !important; }

.activebgcolortab {
  background-color: var(--componentActiveBGColor); }

.bottomTab {
  width: 100%;
  position: absolute !important;
  bottom: 0%;
  border-top: 1px solid #ced4da;
  min-width: 760px;
  max-width: 980px; }

.bottomActivetab {
  border-bottom: 3px solid var(--themePrimaryColor) !important; }

.activebottomcolortab {
  border-top: 3px solid !important; }

.tabposition-right {
  display: inline-flex !important;
  width: 100%;
  justify-content: space-between; }

.tabposition-left {
  display: inline-flex !important;
  width: 100%;
  justify-content: flex-start; }

.tablink .inputgroup * {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important; }

.tablink amexio-tab-action1 {
  padding-left: 5%;
  display: inline-block; }

.tabnavigation-bottom-right {
  bottom: 3%;
  z-index: 3;
  position: absolute;
  right: 16px; }

.tabnavigation-bottom-left {
  bottom: 3%;
  z-index: 3;
  position: absolute; }

.righttable .righttablerow .righttablecol {
  vertical-align: middle; }

.tabposition-right-top {
  display: table-cell;
  vertical-align: top; }

.tabposition-right-bottom {
  display: table-cell;
  vertical-align: bottom; }

#tabclass {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-origin: top left;
  transform: rotate(-90deg);
  left: 0px; }

#tabclass li {
  float: right;
  width: auto;
  padding: 1px;
  display: block; }

.verticalnavtab .leftactiverotatetab {
  font-weight: bold;
  border-bottom: 3px solid var(--themePrimaryColor); }

/* right align rotate tab */
#rightclass {
  width: max-content;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-origin: 0 0;
  transform: rotate(90deg);
  top: 0px;
  left: 46px; }

#rightclass li {
  float: left;
  width: auto;
  padding: 1px;
  display: block; }

.righttabdefaultnode {
  position: relative;
  cursor: pointer;
  /* color: $tabColor; */
  padding: 10px; }

.defaultnode:hover {
  /* font-weight: bold; */ }

.tabposition-rightrotate-top {
  display: block;
  vertical-align: top; }

.tabposition-rightrotate-bottom {
  display: block;
  vertical-align: top; }

.rightactivetabrotate {
  font-weight: bold;
  border-bottom: 3px solid var(--themePrimaryColor); }

.verticalalign-rotatetabright {
  border-left: 1px solid #ced4da !important;
  position: relative;
  left: 97%; }

/****************************************************************************
    Component Name : Window
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** window - Visual CSS **/
.amexio-root-window {
  background-color: var(--componentBGColor);
  /* Black w/ opacity */ }

.modal-window-header {
  background: var(--componentHeaderBGColor);
  font-size: 20px;
  color: var(--componentHeaderFontColor); }

.modal-card-header {
  font-size: 20px;
  color: var(--componentHeaderFontColor); }

.modal-window-header .toolbar {
  background: var(--componentHeaderBGColor);
  font-size: 20px;
  color: #ffedeb; }

.amexio-root-window-content {
  font-size: 14px; }

.amexio-root-window-content .window-middle::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.amexio-root-window-content .window-middle::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.amexio-root-window-content .window-middle::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.modal-window-footer {
  background: var(--componentBGColor);
  color: var(--componentFontColor); }

.minimize-window-bg {
  background: var(--componentHoverBGColor); }

/** window - Structure CSS **/
/* WINDOW */
.amexio-root-window {
  background: rgba(128, 127, 127, 0.6);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 700;
  display: flex;
  flex-direction: row;
  justify-content: center;
  top: 0;
  left: 0; }

.amexio-root-window-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 96%;
  margin-top: 5%; }

.amexio-root-window-content {
  position: relative; }

.amexio-root-window-content > * {
  padding: 10px 16px; }

.amexio-layout-columns-height {
  height: unset; }

@media only screen and (max-width: 600px) {
  .amexio-root-window-content {
    width: 100%; } }
.window-middle {
  line-height: 24px;
  font-weight: 400;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--componentBGColor);
  color: var(--componentFontColor);
  max-height: 100%;
  outline: none; }

.modal-window-header {
  display: flex;
  font-size: 20px;
  font-weight: 300;
  text-transform: capitalize; }

.modal-window-footer {
  display: flex; }

.modal-window-material-footer {
  background-color: white;
  color: black; }

.model-maximize {
  width: 100%;
  height: 100%;
  top: 0; }

.content-max-height .window-middle {
  height: 100%; }

.amexio-root-window-content .window-middle::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.amexio-root-window-content .window-middle::-webkit-scrollbar {
  width: 6px;
  height: 6px; }

amexio-window-header {
  width: 100%;
  display: inline-flex; }

amexio-window-header > amexio-toolbar {
  flex-grow: 1; }

amexio-window-header > amexio-toolbar > .toolbar {
  padding: 0px; }

.modal-card-header {
  display: flex; }

.amexio-root-window-windowModel {
  width: 100%;
  position: fixed;
  z-index: 700;
  display: flex;
  flex-direction: row;
  justify-content: center;
  top: 0;
  left: 0;
  pointer-events: none; }

.amexio-root-window-content-windowModel {
  position: relative; }

.amexio-root-window-content-windowModel {
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 96%;
  width: 400px;
  top: 0px;
  left: 0px;
  justify-content: flex-start;
  transform: none;
  opacity: 1;
  padding: 5px;
  pointer-events: all; }

.amexio-root-window-content-windowModel .window-middle::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.amexio-root-window-content-windowModel .window-middle::-webkit-scrollbar {
  width: 6px;
  height: 6px; }

@media only screen and (max-width: 600px) {
  .amexio-root-window-content-windowModel {
    width: 100%; } }
.amexio-root-window-content-windowModel > * {
  padding: 10px 16px; }

/****************************************************************************
    Component Name : Dialogue
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** dialogue - Visual CSS **/
.root-window {
  background: rgba(128, 127, 127, 0.6); }

.dialogue-content {
  background-color: var(--componentBGColor); }

.dialogue-material-design {
  background-color: white;
  color: black; }

.dialogue-header {
  background: var(--componentHeaderBGColor);
  color: var(--componentFontColor); }

.dialogue-table:focus {
  outline: none;
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.tablecol:focus {
  outline: none;
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.dialogue-message:focus {
  outline: none;
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

.dialogue-footer {
  background-color: var(--componentBGColor);
  color: var(--componentFooterFontColor); }

.dialogue-success {
  color: #5cb85c; }

.dialogue-danger {
  color: #d9534f; }

.dialogue-warning {
  color: #f0ad4e; }

/** dialogue - Structure CSS **/
.root-window {
  flex-direction: column;
  position: fixed;
  /* Stay in place */
  z-index: 3;
  /* Sit on top */
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }

.dialogue-sm {
  flex-direction: column;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 18%;
  /* Location of the box */
  width: 30%;
  padding-left: 35%;
  z-index: 3;
  top: 0;
  left: 0; }

.dialogue-content {
  margin: auto;
  padding: 0px;
  width: 80%;
  height: 80%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.dialogue-min {
  padding-top: 70px; }

.dialogue-content > * {
  padding: 5px; }

.dialogue-material-design {
  display: flex;
  font-size: 20px;
  font-weight: 300;
  text-transform: capitalize;
  color: black;
  padding: 10px;
  border-bottom: 1px solid #eceeef; }

.dialogue-header {
  display: flex;
  /* padding: 10px 24px;*/
  font-size: 20px;
  font-weight: 300;
  text-transform: capitalize; }

.dialogue-middle {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  padding-left: 16px;
  padding-right: 16px;
  min-height: 80%;
  overflow-y: hidden;
  overflow-x: hidden; }

.dialogue-material-design-footer {
  display: flex;
  border-top: 1px solid #eceeef;
  padding: 5px; }
  .dialogue-material-design-footer .button-transparent {
    border: none !important;
    box-shadow: none !important;
    font-size: 1rem; }
  .dialogue-material-design-footer .custom-btn .button-text {
    font-size: 1rem;
    color: blue; }

.dialogue-footer {
  display: flex;
  border-top: 1px solid #ced4da; }
  .dialogue-footer .button-transparent {
    border: none !important;
    box-shadow: none !important; }

.dialogue-message {
  display: flex;
  font-size: 20px;
  font-weight: 300;
  text-align: center; }

.dialogue-icon {
  float: left;
  display: flex;
  text-align: center; }

.dialogue-table {
  display: table;
  width: 100%; }

.dialogue-table .tablerow {
  display: table-row; }

.dialogue-material-design .dialogue-table .tablerow .tablecol {
  display: table-cell;
  vertical-align: middle;
  color: black; }

.dialogue-table .tablerow .tablecol {
  display: table-cell;
  vertical-align: middle;
  color: white; }

.icon-style {
  font-size: 15px; }

/****************************************************************************
    Component Name : Panel
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** panel - Visual CSS **/
.panel-accordion {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor);
  font-size: 15px; }

.panel-accordion:after {
  color: red;
  font-weight: bold; }

.panel-accordion .toolbar {
  background-color: unset;
  box-shadow: unset;
  padding: 0px; }

.panel-panel {
  background-color: var(--componentBGColor);
  color: var(--componentFontColor); }

.amexio-panel-header {
  display: flex; }

.amexio-panel-header > * {
  padding-right: 5px; }

.panel-panel::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.panel-panel::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.panel-panel::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

.panel-panel:focus {
  background-color: var(--componentHoverBGColor);
  color: var(--componentHoverFontColor); }

/** panel - Structure CSS **/
.panel-accordion {
  cursor: pointer;
  padding: 10px;
  border-color: #ced4da;
  text-align: left;
  outline: none;
  transition: 0.4s; }

.panel-accordion:after {
  float: right;
  margin-left: 5px; }

.panel-panel {
  padding: 5px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height 0.2s ease-out; }

.panel-box {
  width: 100%; }

.panel-box-border {
  border: 2px solid var(--themeSecondaryColor); }

.panel-panel::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.panel-panel::-webkit-scrollbar {
  width: 6px; }

.panel-header {
  display: flex;
  justify-content: space-between; }

.custom-header {
  display: flex;
  vertical-align: middle; }

.panel-icon {
  padding-left: 5px; }

.panel-accordion amexio-toolbar-item amexio-panel-header * {
  padding-right: 5px; }

.panel-accordion amexio-toolbar-item {
  margin: auto; }

.panel-full-screen {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 2000; }

.panel-full-screen .panel-panel {
  height: 100% !important; }

/****************************************************************************
    Component Name : Timeline
    Version : Amexio v5.2 onwards
*****************************************************************************/
/** panel - Visual CSS **/
.timeline-event-content {
  background: var(--componentHoverBGColor);
  box-shadow: 0 3px 0 var(--componentHoverBGColor); }

/** panel - Structure CSS **/
amexio-layout amexio-layout-item {
  padding: 5px; }

.timeline * {
  box-sizing: border-box; }

/* Timeline */
.timeline {
  padding: 20px;
  position: relative;
  display: block; }

.timeline:before {
  top: 40px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee; }

.timelineleft:before {
  /* right: 2%;
  margin-left: -1.5px; */
  /* left:94%; */
  margin-left: 86%; }

.timelineright:before {
  left: 3%;
  margin-left: 0%;
  /* right:91%;
  margin-right:-2%; */ }

.timelinecenter:before {
  left: 50%;
  margin-left: -1.5px; }

.timeline .timeline-item {
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  display: block; }

.timeline .timeline-item:before,
.timeline .timeline-item:after {
  content: "";
  display: table; }

.timeline .timeline-item:after {
  clear: both; }

.timeline .timeline-item .timeline-badge {
  color: #fff;
  width: 54px;
  height: 54px;
  line-height: 52px;
  font-size: 22px;
  text-align: center;
  position: absolute;
  background-color: var(--themePrimaryColor);
  border: 3px solid #ffffff;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%; }

.timeline-badge-center {
  left: 50%;
  margin-left: -25px; }

.timeline-badge-left {
  left: 0%;
  margin-left: -11px;
  /* left:4%; */ }

.timeline-badge-right {
  /* right: -0.75%; */
  left: 88%; }

.timeline .timeline-item .timeline-panel {
  position: relative;
  /* width: 46%; */
  padding: 10px; }

.timeline .timeline-item .timeline-panel-center {
  width: 45%; }

.timeline .timeline-item .timeline-panel-left {
  width: 84%; }

.timeline .timeline-item .timeline-panel-right {
  width: 92%; }

.timeline .timeline-item .timeline-panel-border {
  border: 1px solid var(--appHeaderMenuBGColor);
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  content: " "; }

.timeline .timeline-item .timeline-panel-border1 {
  border: 1px solid #777;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); }

.timeline .timeline-item .timeline-panel-float-left {
  float: left; }

.timeline-panel-float-left:before {
  position: absolute;
  right: -16px;
  display: inline-block;
  border-top: 16px solid transparent;
  border-left: 16px solid var(--appHeaderMenuBGColor);
  border-right: 0 solid var(--appHeaderMenuBGColor);
  border-bottom: 16px solid transparent;
  content: " "; }

.timeline .timeline-item .timeline-panel-float-right {
  float: right; }

.timeline-panel-float-right:before {
  left: -16px;
  transform: rotate(180deg);
  position: absolute;
  display: inline-block;
  border-top: 16px solid transparent;
  border-left: 16px solid var(--appHeaderMenuBGColor);
  border-right: 0 solid var(--appHeaderMenuBGColor);
  border-bottom: 16px solid transparent;
  content: " "; }

@media (max-width: 767px) {
  .timeline-badge-left {
    margin-left: -32px; }

  .timeline .timeline-item .timeline-panel-right {
    width: 84%; } }
@media (min-width: 768px) and (max-width: 1024px) {
  .timeline-badge-left {
    margin-left: -38px; }

  .timeline .timeline-item .timeline-panel-right {
    width: 94%; } }
/*****************************************************************************
 Component Name : Amexio overlay container 
  Version : Amexio v5.7.0 onwards
****************************************************************************/
/** Amexio overlay Vars CSS **/
/** Amexio overlay Visual CSS **/
.containerClass::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.containerClass::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.containerClass::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

/** Amexio overlay Structure CSS **/
.overlayContainer {
  position: absolute;
  z-index: 4;
  padding: 10px;
  margin: 10px;
  background-color: white;
  border-radius: 8px;
  transition: opacity 0.3s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.leftTopArrow::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10px;
  border-width: 15px;
  border-style: solid;
  transform: rotate(180deg);
  border-color: var(--componentHoverBGColor) transparent transparent transparent; }

.rightTopArrow::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10px;
  border-width: 15px;
  border-style: solid;
  transform: rotate(180deg);
  border-color: var(--componentHoverBGColor) transparent transparent transparent; }

.rightBottomArrow::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 10px;
  border-width: 15px;
  border-style: solid;
  border-color: var(--componentHoverBGColor) transparent transparent transparent; }

.leftBottomArrow::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  border-width: 15px;
  border-style: solid;
  border-color: var(--componentHoverBGColor) transparent transparent transparent; }

.hideoverlay {
  display: none; }

.iconClass {
  position: absolute;
  top: -8px;
  font-size: 20px;
  cursor: pointer; }

.containerClass {
  overflow-y: auto; }

.containerClass::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.containerClass::-webkit-scrollbar {
  width: 6px;
  height: 6px; }

/****************************************************************************
    Component Name : Window CE
    Version : Amexio v5.8 onwards
*****************************************************************************/
/** windowce - Vars CSS **/
/** windowce - Visual CSS **/
.amexio-root-window-ce {
  background: rgba(128, 127, 127, 0.6); }

.card-container-body::-webkit-scrollbar-track {
  background-color: var(--componentDisabledBGColor); }

.card-container-body::-webkit-scrollbar {
  background-color: var(--componentDisabledBGColor); }

.card-container-body::-webkit-scrollbar-thumb {
  background-color: var(--componentHeaderBGColor); }

/** windowce - Structure CSS **/
.amexio-root-window-ce {
  background: rgba(128, 127, 127, 0.6);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 700;
  display: flex;
  flex-direction: row;
  justify-content: center;
  top: 0;
  left: 0; }

.amexio-root-window-content-ce {
  position: relative; }

.amexio-root-window-content-ce {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 96%;
  padding: 5px; }

.amexio-root-window-content-ce > * {
  padding: 0px; }

.minimize-btn-css {
  display: block;
  position: fixed;
  z-index: 999;
  bottom: 0px;
  width: 100%; }

.amexio-root-window-ce-windowModel {
  width: 100%;
  position: fixed;
  z-index: 700;
  display: flex;
  flex-direction: row;
  justify-content: center;
  top: 0;
  left: 0;
  pointer-events: none; }

.amexio-root-window-content-ce-windowModel {
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.4) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 96%;
  width: 400px;
  top: 0px;
  left: 0px;
  justify-content: flex-start;
  transform: none;
  opacity: 1;
  padding: 5px;
  pointer-events: all; }

.amexio-root-window-content-ce-windowModel {
  position: relative; }

.amexio-root-window-content-ce-windowModel > * {
  padding: 0px; }

.card-container-body::-webkit-scrollbar {
  width: 6px; }

/* .amexio-root-window-content-ce .window-middle::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.amexio-root-window-content-ce .window-middle::-webkit-scrollbar {
    width: 6px;
    height: 6px;
} */
/** creative header - Structure CSS **/
.creative-header {
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1; }

.creative-header .creative-header-div {
  height: auto; }

.creative-header > * {
  padding-right: 10px;
  margin-top: 0px; }

.creative-header-icon-div {
  position: absolute;
  right: 0%;
  padding: 5px 10px; }

.creative-header-icon-div-full-screen {
  position: absolute;
  right: 0;
  padding-right: 5px !important;
  top: 0; }

.header-ce {
  padding: 10px;
  position: relative;
  display: flex; }

.header-div-ce {
  display: flex;
  flex-grow: 50;
  flex-direction: row; }

.header-content-ce {
  display: flex;
  flex-direction: column; }

.header-inner-div-ce {
  flex-grow: 1;
  flex-direction: row; }

/** creative form - Structure CSS **/
.form-container-ce {
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.form-container-ce > * {
  /* padding: 10px; */ }

.card-container-body {
  padding: 10px;
  font-size: 14px;
  display: block;
  line-height: 24px;
  font-weight: 400;
  flex-grow: 1;
  position: relative; }

.dailogue-header-ce .dialogue-table {
  display: flex; }

/*****************************************************************************
 Component Name : Amexio slidingpanel container 
  Version : Amexio v5.12 onwards
****************************************************************************/
/** Amexio slidingpanel Vars CSS **/
/** Amexio slidingpanel Visual CSS **/
.parentpanel {
  color: var(--componentActiveFontColor);
  background-color: var(--componentActiveBGColor); }

.parentpanel:hover {
  color: var(--componentHoverFontColor);
  background-color: var(--componentHoverBGColor); }

.panelitemrow:hover {
  color: var(--componentHoverFontColor);
  background-color: var(--componentHoverBGColor); }

.panelheader {
  background-color: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

/** Amexio slidingpanel Structure CSS **/
.parentpanel {
  width: 100%;
  height: 4%; }

.panelitemrow {
  width: 100%;
  margin: 0 auto;
  padding: 1%;
  border: 1px solid var(--themeSecondaryColor); }

.panelborder {
  border: 1px solid var(--themeSecondaryColor); }

.panelchild {
  width: 100%;
  margin: 0 auto;
  padding: 1%;
  border: 1px solid var(--themeSecondaryColor); }

.panelheader {
  width: 100%;
  margin: 0 auto;
  padding: 1%;
  border: 1px solid var(--themeSecondaryColor); }

/*****************************************************************************
 Component Name : Amexio floating panel container 
  Version : Amexio v5.14 onwards
****************************************************************************/
/** Amexio slidingpanel Vars CSS **/
/** Amexio slidingpanel Visual CSS **/
.floatarrow:after {
  border-color: var(--theme6thColor) transparent; }

.floatingpanel-header {
  background: var(--componentHeaderBGColor);
  color: var(--componentHeaderFontColor); }

/** Amexio slidingpanel Structure CSS **/
.floatarrow:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 30px;
  border-style: solid;
  border-width: 0 15px 15px; }

.floatingpanel-header {
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1; }

.floatingpanel-header .floatingpanel-header-div {
  height: auto; }

.floatingpanel-header > * {
  padding-right: 10px;
  margin-top: 0px; }

.floatingpanel-header-icon-div {
  position: absolute;
  right: 0%;
  padding: 5px 10px; }

.floatingPanelIndex amexio-floating-panel div {
  z-index: 2 !important; }

.floatingPanelIndex {
  margin-top: 15px; }

.leftPositionPanel {
  display: block;
  position: absolute;
  left: 50px;
  right: 0px;
  margin-top: 70px; }

.rightPositionPanel {
  display: block;
  position: absolute;
  right: 50px;
  margin-top: 70px; }

/*****************************************************************************
 Component Name : Amexio Stackable panel container 
  Version : Amexio v5.19 onwards
****************************************************************************/
/** Amexio StackablePanel Vars CSS **/
/** Amexio StackablePanel Visual CSS **/
/** Amexio StackablePanel Structure CSS **/
.stackablepanel {
  background-color: var(--componentBGColor);
  size: 10px;
  color: var(--componentFontColor); }

.stackablepanel .title {
  /* background-color: #ccc; */
  width: 100%;
  padding: 3.5px;
  cursor: pointer;
  border-bottom: 1.5px solid #e2d5d5;
  /* border-bottom: 0.4px solid #666; */ }

.stackablepanel .body {
  padding: 0px 10px 10px 10px; }

.stackablepanel .body.hidden {
  display: none; }

/****************************************************************************
    Component Name : Border Layout
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** borderlayout - Visual CSS **/
/** borderlayout - Structure CSS **/
.borderlayout-N {
  grid-area: north; }

.borderlayout-S {
  grid-area: south; }

.borderlayout-E {
  grid-area: east; }

.borderlayout-W {
  grid-area: west; }

.borderlayout-C {
  grid-area: center; }

/** handles N-E-C-W-S**/
.borderlayout-container-N-E-C-W-S {
  display: grid;
  grid-template-areas: 'north north north north north north' 'east center center center center west' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-N-E-C-W-S aside {
  border: 0px solid none; }

/** handles N-E-C-S **/
.borderlayout-container-N-E-C-S {
  display: grid;
  grid-template-areas: 'north north north north north north' 'east center center center center center' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-N-E-C-S aside {
  border: 0px solid none; }

/** handles N-C-W-S **/
.borderlayout-container-N-C-W-S {
  display: grid;
  grid-template-areas: 'north north north north north north' 'center center center center center west' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-N-C-W-S aside {
  border: 0px solid none; }

/** handles E-W-C-S **/
.borderlayout-container-E-C-W-S {
  display: grid;
  grid-template-areas: 'east center center center center west' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-E-C-W-S aside {
  border: 0px solid none; }

/** handles N-C-S **/
.borderlayout-container-N-C-S {
  display: grid;
  grid-template-areas: 'north north north north north north' 'center center center center center center' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-N-C-S aside {
  border: 0px solid none; }

/** handles E-C-S **/
.borderlayout-container-E-C-S {
  display: grid;
  grid-template-areas: 'east center center center center center' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-E-C-S aside {
  border: 0px solid none; }

/** handles C-W-S **/
.borderlayout-container-C-W-S {
  display: grid;
  grid-template-areas: 'center center center center center west' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-C-W-S aside {
  border: 0px solid none; }

/** handles N-C **/
.borderlayout-container-N-C {
  display: grid;
  grid-template-areas: 'north north north north north north' 'center center center center center center';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-N-C aside {
  border: 0px solid none; }

/** handles C-S **/
.borderlayout-container-C-S {
  display: grid;
  grid-template-areas: 'center center center center center center' 'south south south south south south';
  grid-gap: 2px;
  padding: 2px;
  grid-template-columns: repeat(6, 1fr); }

.borderlayout-container-C-S aside {
  border: 0px solid none; }

/****************************************************************************
    Component Name : Row Column
    Version : Amexio v4.0 onwards
*****************************************************************************/
/** rowcol - Visual CSS **/
/** rowcol - Structure CSS **/
.flex-row {
  flex-direction: row;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap; }

.flex-col {
  flex: 1 1 100%;
  box-sizing: border-box;
  padding: 5px;
  flex-wrap: wrap; }

.flex-col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%; }

.flex-col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%; }

.flex-col-3 {
  flex: 0 0 25%;
  max-width: 25%; }

.flex-col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%; }

.flex-col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%; }

.flex-col-6 {
  flex: 0 0 50%;
  max-width: 50%; }

.flex-col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%; }

.flex-col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%; }

.flex-col-9 {
  flex: 0 0 75%;
  max-width: 75%; }

.flex-col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%; }

.flex-col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%; }

.flex-col-12 {
  flex: 0 0 100%;
  max-width: 100%; }

.flex-col-2pt5 {
  flex: 0 0 20.8333325%;
  max-width: 20.8333325%; }

.flex-col-9pt5 {
  flex: 0 0 79.1666635%;
  max-width: 79.1666635%; }

/****************************************************************************
    Component Name : Layout
    Version : Amexio v5.4 onwards
*****************************************************************************/
/** rowcol - Structure CSS **/
amexio-layout-columns amexio-layout-item {
  padding: 5px; }

/****************************************************************************
    Component Name : Creative
    Version : Amexio v5.5.5 onwards
*****************************************************************************/
/** creative card - var CSS **/
/** creative card - Visual CSS **/
.card-container-ce {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 100%; }

.card-container-ce-bg-color {
  background-color: #fff; }

.card-container-ce-color {
  color: var(--componentFontColor);
  background: var(--componentBGColor); }

.card-container-ce-theme-color {
  color: var(--componentHeaderFontColor);
  background-color: var(--componentHeaderBGColor); }

.card-container-header {
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative; }

.card-container-header .card-container-header-div {
  height: auto; }

.card-container-header > * {
  padding-right: 10px;
  margin-top: 0px; }

.card-container-body {
  padding: 10px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  flex-grow: 1;
  position: relative;
  display: block;
  overflow: auto; }

.creative-footer {
  padding: 10px;
  text-transform: capitalize;
  display: flex;
  flex-direction: row;
  align-items: center; }

.creative-footer > * {
  padding-right: 10px;
  margin-top: 0px; }

.card-action-border {
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

.card-header-border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

/* ONLY WIDER ACTION */
.card-container-wider-action {
  margin: 0px 10px; }

.card-container-wider-action amexio-action-ce {
  margin: 0px -10px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

/* ONLY NARROWER ACTION */
.card-container-narrower-action {
  margin: 10px 10px; }

.card-container-narrower-action amexio-action-ce {
  margin: -10px 10px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

/* ONLY WIDER HEADER */
.card-container-wider-header {
  margin: 0px 10px; }

.card-container-wider-header amexio-header-ce {
  margin: 0px -10px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  z-index: 2; }

.card-container-narrower-header {
  margin: 10px 10px; }

.card-container-narrower-header amexio-header-ce {
  margin: -10px 10px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.ce-header-ribbon-l {
  border-color: transparent var(--componentHeaderBGColor) transparent transparent;
  left: -20px; }

.ce-header-ribbon-r {
  border-color: transparent transparent transparent var(--componentHeaderBGColor);
  right: -20px; }

.ce-header-ribbon {
  border-style: solid;
  border-width: 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  top: -10px; }

.card-container-ribbon-style amexio-header-ce {
  box-shadow: none; }

.card-container-ribbon-style .card-container-body {
  overflow: unset; }

/** creative card - Structure CSS **/
.card-ce-overflowhidden {
  overflow: hidden; }

.card-ce-overlay-fadeeffect:hover {
  opacity: 1;
  transition: all 2s ease-in-out; }

/* fading effect */
.card-ce-overlay-fadeeffect {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  transition-duration: 3s; }

/* sliding effect  */
.card-ce-overlay-slideeffect {
  transform: translateX(-300%);
  transition: all 0.3s ease-in-out; }

.card-ce-overlay-slideeffect-hover {
  transform: translateX(0%);
  transition-delay: 500ms;
  background-color: var(--componentHoverBGColor);
  color: var(--componentFontColor); }

.maincontainer {
  position: relative;
  /* width: 250px;
  height: 320px; */
  background: none;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */ }

.card-container-ce-main {
  /* position: relative; */
  position: relative;
  top: 0;
  left: 0;
  height: 100%; }

.card-container-ce-main-flip:hover .card-container-ce-flip {
  transform: rotateY(180deg); }
.card-container-ce-main-flip:hover .ce-flip-card-back {
  overflow: auto; }

.card-container-ce-flip {
  transition: transform 0.6s;
  transform-style: preserve-3d; }

.ce-flip-card-front, .ce-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; }

.ce-flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column; }

.card-container-ce-main-zoom:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
  /* Safari 3-8 */
  transform: scale(1.2);
  z-index: 300 !important; }
  .card-container-ce-main-zoom:hover .ce-zoom-card-front {
    display: block; }
  .card-container-ce-main-zoom:hover .ce-zoom-card-back {
    overflow: auto;
    display: block;
    display: flex;
    flex-direction: column;
    background: var(--componentBGColor);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.card-container-ce-main-zoom {
  transition: transform .2s;
  /* Animation */ }

.ce-zoom-card-front, .ce-zoom-card-back {
  position: absolute;
  width: 100%;
  height: 100%; }

.ce-zoom-card-back {
  display: none; }

/****************************************************************************
    Component Name : Creative Menus
    Version : Amexio v5.12 onwards
*****************************************************************************/
/** creative card - var CSS **/
/** creative card - Visual CSS **/
.bmenu1 a {
  color: transparent;
  text-shadow: 0px 0px 5px black; }

.bmenu1 a:hover {
  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }

.bmenu2 a {
  color: transparent;
  text-shadow: 0px 0px 6px black; }

.bmenu2 a:hover {
  text-shadow: 0px 0px 1px var(--componentHeaderBGColor); }

.bmenu3 a {
  text-shadow: 0px 0px 4px black; }

.bmenu3 a:hover {
  color: var(--componentHoverFontColor);
  text-shadow: 0px 0px 1px black; }

.bmenu4 a {
  color: transparent;
  text-shadow: 0px 0px 3px black; }

.bmenu4 a:hover {
  color: var(--componentHoverFontColor);
  background: var(--componentHoverBGColor); }

.bmenu4 a:hover {
  text-shadow: none; }

/** creative card - Structure CSS **/
.textLeftPosition {
  width: max-content;
  display: grid;
  justify-content: center;
  position: relative; }

.textRightPosition {
  width: max-content;
  text-align: right;
  float: right;
  position: relative; }

.textCenterPosition {
  text-align: center;
  position: relative;
  width: 100%; }

.bmenu {
  padding: 0px;
  margin: 0 0 10px 0;
  position: relative; }

.bmenu1 a {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none; }

.bmenu1 a:hover {
  padding-left: 10px; }

.bmenu2 a {
  white-space: nowrap;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  transition: all 0.6s linear; }

.bmenu2 a:hover {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1); }

.bmenu3 a {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

.bmenu3 a:hover {
  padding-left: 10px; }

.bmenu4 a {
  white-space: nowrap;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  transition: all 0.4s linear; }

.bmenu4 a:hover {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1); }

/****************************************************************************
    Component Name : Directive Round Edge
    Version : Amexio v5.12 onwards
*****************************************************************************/
/** Round Edge - var CSS **/
/** Round Edge card - Visual CSS **/
/* You can add global styles to this file, and also import other style files */
.roundEdgeCommonCss {
  border-radius: 10px; }

.roundEdgeCommonCss .card-container-ce {
  border-radius: 10px; }

.roundEdgeCommonCss .card-container-ce amexio-header-ce .creative-header-div {
  border-radius: 10px; }

.roundEdgeCommonCss .card-container-ce button {
  border-radius: 10px; }

.roundEdgeCommonCss amexio-header-ce {
  border-radius: 10px; }

.roundEdgeCommonCss amexio-header-ce button {
  border-radius: 10px; }

.roundEdgeCommonCss amexio-header-ce div .creative-header {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss amexio-action-ce div .creative-footer {
  border-radius: 0px 0px 10px 10px; }

.roundEdgeCommonCss amexio-action-ce div .creative-footer button {
  border-radius: 10px; }

.roundEdgeCommonCss .box-content {
  border-radius: 10px; }

.roundEdgeCommonCss .box-content button {
  border-radius: 10px; }

.roundEdgeCommonCss .panel-panel {
  border-radius: 0px 0px 10px 10px; }

.roundEdgeCommonCss .panel-accordion {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss .panel-without-header {
  border-radius: 10px; }

.roundEdgeCommonCss .card-header {
  border-radius: 10px 10px 0px 0px; }

.cardBorderClass {
  border-radius: 10px; }

.roundEdgeCommonCss .card-container {
  border-radius: 10px; }

.roundEdgeCommonCss .card-footer button {
  border-radius: 10px; }

.roundEdgeCommonCss amexio-accordion-tab button {
  border-radius: 10px; }

.roundEdgeCommonCss .activebgcolortab {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss .dialogue-content {
  border-radius: 10px; }

.roundEdgeCommonCss .dialogue-content header {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss .dialogue-content footer {
  border-radius: 0px 0px 10px 10px; }

.roundEdgeCommonCss .floatingpanel-header {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss .card-container-body {
  border-radius: 10px; }

.roundEdgeCommonCss .modal-window-header {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss .modal-window-footer {
  border-radius: 0px 0px 10px 10px; }

.roundEdgeCommonCss .modal-window-footer button {
  border-radius: 10px; }

.roundEdgeCommonCss .amexio-badge {
  border-radius: 10px; }

.roundEdgeCommonCss .datetimepickertopbar {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss .datetimepickertopbar div .days {
  border-radius: 10px; }

.roundEdgeCommonCss .datetimepicker1 {
  border-radius: 10px; }

.roundEdgeCommonCss .notification {
  border-radius: 10px; }

/* Class: progress */
.roundEdgeCommonCss .progress .success {
  border-radius: 10px 0px 0px 10px; }

.roundEdgeCommonCss .progress {
  border-radius: 10px; }

.roundEdgeCommonCss .progress .warning {
  border-radius: 10px 0px 0px 10px; }

.roundEdgeCommonCss .progress .danger {
  border-radius: 10px 0px 0px 10px; }

.roundEdgeCommonCss .progress .stripped {
  border-radius: 10px; }

/* class: pageginator-pages */
.roundEdgeCommonCss .paginator-pages .paginator-page {
  border-radius: 10px; }

.roundEdgeCommonCss .timeline-item .timeline-panel-float-right {
  border-radius: 10px; }

.roundEdgeCommonCss .timeline-item .timeline-panel-float-left {
  border-radius: 10px; }

.roundEdgeCommonCss .listbox {
  border-radius: 10px; }

.roundEdgeCommonCss .header {
  border-radius: 10px; }

/* listbox */
.roundEdgeCommonCss .listbox .header {
  border-radius: 10px 10ox 0px 0px; }

/* breadcrum-rightshift-css */
.roundEdgeCommonCss .breadcrumb-group:hover {
  border-radius: 10px; }

.roundEdgeCommonCss amexio-dockbar-item .dockbar-active-content {
  border-radius: 0px 10px 10px 0px; }

.roundEdgeCommonCss .dropdown-menu {
  border-radius: 10px; }

.roundEdgeCommonCss .menu-content {
  border-radius: 10px; }

.roundEdgeCommonCss .datapoints {
  border-radius: 10px; }

.roundEdgeCommonCss .datePickerContainer {
  border-radius: 10px 10px 0px 0px; }

.roundEdgeCommonCss .weekdaycomponent {
  border-radius: 10px; }

.roundEdgeCommonCss .weekdaycomponent .datetimepicker1 {
  border-radius: 10px; }

.roundEdgeCommonCss .amexio-root-window-content-ce div {
  border-radius: 10px; }

.roundEdgeCommonCss color-palette .color-palette {
  border-radius: 10px 0px 0px 10px; }

.roundEdgeCommonCss color-slider .color-slider {
  border-radius: 0px 10px 10px 0px; }

.roundEdgeCommonCss .main-content {
  border-radius: 10px; }

.roundEdgeCommonCss .card-container-ce-color {
  border-radius: 10px; }

.roundEdgeCommonCss .card-container-ce-main {
  border-radius: 10px; }

.roundEdgeCommonCss amexio-action-ce div {
  border-radius: 10px; }

.classicCommonCss {
  border-radius: 0px !important; }

.classicCommonCss .card-container-ce {
  border-radius: 0px !important; }

.classicCommonCss .card-container-ce amexio-header-ce .creative-header-div {
  border-radius: 0px !important; }

.classicCommonCss .card-container-ce button {
  border-radius: 0px !important; }

.classicCommonCss amexio-header-ce {
  border-radius: 0px !important; }

.classicCommonCss amexio-header-ce button {
  border-radius: 0px !important; }

.classicCommonCss amexio-header-ce div .creative-header {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss amexio-action-ce div .creative-footer {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss amexio-action-ce div .creative-footer button {
  border-radius: 0px !important; }

.classicCommonCss .box-content {
  border-radius: 0px !important; }

.classicCommonCss .box-content button {
  border-radius: 0px !important; }

.classicCommonCss .panel-panel {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .panel-accordion {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .panel-without-header {
  border-radius: 0px !important; }

.classicCommonCss .card-header {
  border-radius: 0px 10px 0px 0px !important; }

.cardBorderClass {
  border-radius: 0px !important; }

.classicCommonCss .card-container {
  border-radius: 0px !important; }

.classicCommonCss .card-footer button {
  border-radius: 0px !important; }

.classicCommonCss amexio-accordion-tab button {
  border-radius: 0px !important; }

.classicCommonCss .activebgcolortab {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .dialogue-content {
  border-radius: 0px !important; }

.classicCommonCss .dialogue-content header {
  border-radius: 0px !important; }

.classicCommonCss .floatingpanel-header {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .card-container-body {
  border-radius: 0px !important; }

.classicCommonCss .modal-window-header {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .modal-window-footer {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .modal-window-footer button {
  border-radius: 0px !important; }

.classicCommonCss .amexio-badge {
  border-radius: 0px !important; }

.classicCommonCss .datetimepickertopbar {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .datetimepickertopbar div .days {
  border-radius: 0px !important; }

.classicCommonCss .datetimepicker1 {
  border-radius: 0px !important; }

.classicCommonCss .notification {
  border-radius: 0px !important; }

/* Class: progress */
.classicCommonCss .progress .success {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .progress {
  border-radius: 0px !important; }

.classicCommonCss .progress .warning {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .progress .danger {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .progress .stripped {
  border-radius: 0px !important; }

/* class: pageginator-pages */
.classicCommonCss .paginator-pages .paginator-page {
  border-radius: 0px !important; }

.classicCommonCss .timeline-item .timeline-panel-float-right {
  border-radius: 0px !important; }

.classicCommonCss .timeline-item .timeline-panel-float-left {
  border-radius: 0px !important; }

.classicCommonCss .listbox {
  border-radius: 0px !important; }

.classicCommonCss .header {
  border-radius: 0px !important; }

/* listbox */
.classicCommonCss .listbox .header {
  border-radius: 0px 0px 0px 0px !important; }

/* breadcrum-rightshift-css */
.classicCommonCss .breadcrumb-group:hover {
  border-radius: 0px !important; }

.classicCommonCss amexio-dockbar-item .dockbar-active-content {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .dropdown-menu {
  border-radius: 0px !important; }

.classicCommonCss .menu-content {
  border-radius: 0px !important; }

.classicCommonCss .datapoints {
  border-radius: 0px !important; }

.classicCommonCss .datePickerContainer {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .weekdaycomponent {
  border-radius: 0px !important; }

.classicCommonCss .weekdaycomponent .datetimepicker1 {
  border-radius: 0px !important; }

.classicCommonCss .amexio-root-window-content-ce div {
  border-radius: 0px !important; }

.classicCommonCss color-palette .color-palette {
  border-radius: 10px 0px 0px 10px; }

.classicCommonCss color-slider .color-slider {
  border-radius: 0px 10px 10px 0px; }

.classicCommonCss .main-content {
  border-radius: 0px !important; }

.classicCommonCss .card-container-ce-color {
  border-radius: 0px !important; }

.classicCommonCss .card-container-ce-main {
  border-radius: 10px; }

.classicCommonCss amexio-action-ce div {
  border-radius: 10px; }

.roundEdgeCommonCss .datatable-header .datatable-col:nth-child(1) {
  border-radius: 10px 0px 0px 0px !important; }

.roundEdgeCommonCss .datatable-header .datatable-col:last-child {
  border-radius: 0px 10px 0px 0px !important; }

.roundEdgeCommonCss .datatable {
  border-radius: 10px !important; }

.classicCommonCss .datatable-header .datatable-col:nth-child(1) {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .datatable-header .datatable-col:last-child {
  border-radius: 0px 0px 0px 0px !important; }

.classicCommonCss .datatable {
  border-radius: 0px !important; }

/** Round Edge card - Structure CSS **/
/****************************************************************************
    Component Name : Directive Router animation
    Version : Amexio v5.19 onwards
*****************************************************************************/
/** Router animation card - Structure CSS **/
.myanislideleft {
  position: relative;
  display: block;
  animation-name: slideleft;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes slideleft {
  0% {
    left: -1000px; }
  100% {
    left: 0; } }
.myanislideright {
  position: relative;
  display: block;
  animation-name: slideright;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes slideright {
  0% {
    right: -1000px; }
  100% {
    right: 0; } }
.myanifadingeffect {
  position: relative;
  display: block;
  animation-name: fadeeffect;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeeffect {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.myanislidetop {
  position: relative;
  display: block;
  animation-name: slidetop;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes slidetop {
  0% {
    top: -1000px; }
  100% {
    top: 0; } }
.myanislidebottom {
  position: relative;
  display: block;
  animation-name: slidebottom;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes slidebottom {
  0% {
    bottom: -1000px; }
  100% {
    bottom: 0; } }
.myanislidetopleft {
  position: relative;
  display: block;
  animation-name: lefttop;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes lefttop {
  0% {
    left: -1000px;
    top: -1000px; }
  100% {
    left: 0;
    top: 0; } }
.myanislidebottomleft {
  position: relative;
  display: block;
  animation-name: leftbottom;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes leftbottom {
  0% {
    left: -1000px;
    bottom: -1000px; }
  100% {
    left: 0;
    bottom: 0; } }
.myanislidetopright {
  position: relative;
  display: block;
  animation-name: topright;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes topright {
  0% {
    top: -1000px;
    right: -1000px; }
  100% {
    top: 0;
    right: 0; } }
.myanislidebottomright {
  position: relative;
  display: block;
  animation-name: bottomright;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-fill-mode: forwards; }

@keyframes bottomright {
  0%, 20%, 50%, 80% {
    bottom: -1000px;
    right: -1000px;
    transform: translateY(0); }
  40% {
    transform: translateY(-30px); }
  60% {
    transform: translateY(-15px); }
  100% {
    bottom: 0;
    right: 0;
    transform: translateY(0); } }
/** Initialze Animation variables ------------ */
/****************************************************************************
                Animation CSS for Checkbox 
*****************************************************************************/
@keyframes checkboxripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0); }
  50% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1); }
  100% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0); } }
/* Show the input-box-container-label when checked */
.input-box-container input:checked ~ .input-box-checkbox-label:after {
  animation: checkboxripple .3s ease-in; }

/****************************************************************************
                 Animation CSS for Radiobox 
*****************************************************************************/
@keyframes radioripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0); }
  50% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1); }
  100% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0); } }
/* Show the input-box-container-label when checked */
.input-box-container input:checked ~ .input-box-radiobox-label:after {
  animation: radioripple 0.3s linear forwards; }

/* Style the input-box-container-label/indicator */
.input-box-container .input-box-radiobox-label:after {
  transform: scale(1); }

/****************************************************************************
                Animation CSS for Button 
*****************************************************************************/
button {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden; }

.button-success:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #5cb85c;
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%; }

.button-primary:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--componentBGColor);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%; }

.button-danger:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #d9534f;
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%; }

.button-warning:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #f0ad4e;
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%; }

.button-secondary:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--componentBGColor);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%; }

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1; }
  20% {
    transform: scale(25, 25);
    opacity: 1; }
  100% {
    opacity: 0;
    transform: scale(40, 40); } }
button:focus:not(:active)::after {
  animation: ripple 1s ease-out; }

/****************************************************************************
                Animation CSS for Input Box 
*****************************************************************************/
.inputfieldbar {
  position: relative;
  display: block;
  width: 100%; }

.inputfieldbar:before, .inputfieldbar:after {
  content: '';
  height: 1px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5cb3fd;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all; }

.inputfieldbar:before {
  left: 50%; }

.inputfieldbar:after {
  right: 50%; }

input:focus ~ .inputfieldbar:before, input:focus ~ .inputfieldbar:after {
  width: 50%; }

/****************************************************************************
                Animation CSS for Progress Bar
*****************************************************************************/
.progress .stripped {
  animation: progressbar-animate-stripes 3s linear infinite; }
@keyframes progressbar-animate-stripes {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 60px 0; } }
/****************************************************************************
                Animation CSS for Floating Button 
*****************************************************************************/
.floatingbutton:after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  z-index: 1;
  opacity: 0;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transition: transform 0.5s, opacity 0.5s;
  -webkit-transition: transform 0.5s, opacity 0.5s;
  -moz-transition: transform 0.5s, opacity 0.5s;
  -o-transition: transform 0.5s, opacity 0.5s;
  -ms-transition: transform 0.5s, opacity 0.5s; }

.floatingbutton:active:after {
  opacity: 0.7;
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  transition: 0s;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -o-transition: 0s;
  -ms-transition: 0s; }

/** Initialze Responsive Design variables ------------ */
/****************************************************************************
                    Media Query for width - 375
*****************************************************************************/
/************************************************************************/
/*        Card MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .card-header {
    display: flex;
    padding: 10px 24px;
    background: var(--componentHeaderBGColor);
    border-bottom: 1px solid #ced4da;
    font-size: 18px;
    color: var(--componentHeaderFontColor);
    font-weight: 300;
    text-transform: capitalize;
    overflow: auto; } }
/************************************************************************/
/*        DATATABLE MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .datatable {
    border: 0; }

  .datatable .datatable-header {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }

  .datatable .datatable-row {
    border-bottom: 3px solid #ced4da;
    display: block;
    margin-bottom: .625em;
    height: auto !important; }

  .datatable .datatable-header .datatable-col {
    height: auto !important;
    font-weight: 500; }

  .datatable .datatable-col {
    border-bottom: 1px solid #ced4da;
    display: block;
    font-size: .8em;
    text-align: right;
    width: auto !important; }
    .datatable .datatable-col .float-right {
      float: unset !important; }

  .datatable .datatable-col:before {
    content: attr(data-label);
    float: left;
    font-weight: bold; }

  .col-hidden {
    display: none !important; }

  .checkbox-col {
    text-align: unset !important; }

  .datatable-icon-right {
    float: right; }

  .text-input-width {
    width: 92%; } }
/************************************************************************/
/*        Datetime Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .datetimepicker .days .date-today {
    padding-top: 1%;
    padding-left: 36%; } }
/************************************************************************/
/*        Dialogue Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .dialogue-sm {
    flex-direction: column;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 60%;
    /* Location of the box */
    width: 100%;
    padding-left: 0px;
    z-index: 3;
    top: 0;
    left: 0; } }
/************************************************************************/
/*        Enterprise Media-Q COMPONENT         */
/************************************************************************/
@media (max-width: 480px) {
  .content-title {
    width: 100%;
    font-size: 180%;
    font-weight: 700;
    line-height: 130%;
    color: #fff;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); }

    /*

  h3 {
    font-size: 9pt;
  }

  span {
    font-size: 6pt;
  }

  li b {
    font-size: 6pt;
  }

  li {
    font-size: 6pt;
  }
  */
  .maincontent {
    position: relative;
    width: 100%;
    /* for IE 6 */
    height: 35vh;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat; } }
/************************************************************************/
/*        Image Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        ITEM SELECTOR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Label Media COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 450px) {
  /* phones */
  .large {
    font-size: 32px; }

  .medium {
    font-size: 18px; }

  .small {
    font-size: 16px; }

  .large-bold {
    font-size: 32px;
    font-weight: bold; }

  .medium-bold {
    font-size: 18px;
    font-weight: bold; }

  .small-bold {
    font-size: 16px;
    font-weight: bold; } }
/************************************************************************/
/*        MENU COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        NAVBAR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        ROW-COLUMN MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        SIDENAV MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window Treenode Media Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .footer-right-align {
    padding-right: 15px; } }
@media only screen and (max-width: 375px) {
  amexio-homepage-northpanel .topnav-lhs-mobile .mobilebar {
    flex-grow: 0.2; } }
/****************************************************************************
                    Media Query for width - 450
*****************************************************************************/
/************************************************************************/
/*        BORDER LAYOUT Media Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Card MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .card-header {
    display: flex;
    padding: 10px 24px;
    background: var(--componentHeaderBGColor);
    border-bottom: 1px solid #ced4da;
    font-size: 18px;
    color: var(--componentHeaderFontColor);
    font-weight: 300;
    text-transform: capitalize;
    overflow: auto; } }
/************************************************************************/
/*        DATATABLE MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .datatable {
    border: 0; }

  .datatable .datatable-header {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }

  .datatable .datatable-row {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
    height: auto !important; }

  .datatable .datatable-header .datatable-col {
    height: auto !important;
    font-weight: 500; }

  .datatable .datatable-col {
    border-bottom: 1px solid #ced4da;
    display: block;
    font-size: .8em;
    text-align: right;
    width: auto !important; }
    .datatable .datatable-col .float-right {
      float: unset !important; }

  .datatable .datatable-col:before {
    content: attr(data-label);
    float: left;
    font-weight: bold; }

  .col-hidden {
    display: none !important; }

  .checkbox-col {
    text-align: unset !important; }

  .datatable-icon-right {
    float: right; }

  .text-input-width {
    width: 92%; } }
/************************************************************************/
/*        Datetime Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .datetimepicker .days .date-today {
    padding-top: 1%;
    padding-left: 36%; } }
/************************************************************************/
/*        Dialogue Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .dialogue-sm {
    flex-direction: column;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 60%;
    /* Location of the box */
    width: 100%;
    padding-left: 0px;
    z-index: 3;
    top: 0;
    left: 0; } }
/************************************************************************/
/*        Enterprise Media-Q COMPONENT         */
/************************************************************************/
@media (max-width: 480px) {
  .content-title {
    width: 100%;
    font-size: 180%;
    font-weight: 700;
    line-height: 130%;
    color: #fff;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); }

    /*

  h3 {
    font-size: 9pt;
  }

  span {
    font-size: 6pt;
  }

  li b {
    font-size: 6pt;
  }

  li {
    font-size: 6pt;
  }
  */
  .maincontent {
    position: relative;
    width: 100%;
    /* for IE 6 */
    height: 35vh;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat; } }
/************************************************************************/
/*        Image Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        ITEM SELECTOR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Label Media COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 450px) {
  /* phones */
  .large {
    font-size: 32px; }

  .medium {
    font-size: 18px; }

  .small {
    font-size: 16px; }

  .large-bold {
    font-size: 32px;
    font-weight: bold; }

  .medium-bold {
    font-size: 18px;
    font-weight: bold; }

  .small-bold {
    font-size: 16px;
    font-weight: bold; } }
/************************************************************************/
/*        MENU COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        NAVBAR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        ROW-COLUMN MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        SIDENAV MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window Treenode Media Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 600px) {
  .footer-right-align {
    padding-right: 15px; } }
@media only screen and (max-width: 568px) {
  amexio-homepage-northpanel .topnav-lhs-mobile .mobilebar {
    flex-grow: 0.2; } }
/****************************************************************************
                    Media Query for width - 767
*****************************************************************************/
/************************************************************************/
/*        BORDER LAYOUT Media Q COMPONENT                                */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .borderlayout-N {
    grid-area: north; }

  .borderlayout-S {
    grid-area: south; }

  .borderlayout-E {
    grid-area: east; }

  .borderlayout-W {
    grid-area: west; }

  .borderlayout-C {
    grid-area: center; }

  .borderlayout-container-N-E-C-W-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-N-E-C-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-N-C-W-S {
    grid-template-areas: 'north north north north north north' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-W-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-C-W-S {
    display: grid;
    grid-template-areas: 'center center center center center center' 'west west west west west west' 'south south south south south south'; } }
/************************************************************************/
/*        Card MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .card-header {
    display: flex;
    padding: 10px 24px;
    background: var(--componentHeaderBGColor);
    border-bottom: 1px solid #ced4da;
    font-size: 18px;
    color: var(--componentHeaderFontColor);
    font-weight: 300;
    text-transform: capitalize;
    overflow: auto; } }
/************************************************************************/
/*        DATATABLE MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Datetime Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Dialogue Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .dialogue-sm {
    flex-direction: column;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 60%;
    /* Location of the box */
    width: 80%;
    padding-left: 10%;
    z-index: 3;
    top: 0;
    left: 0; } }
/************************************************************************/
/*        Enterprise Media-Q COMPONENT         */
/************************************************************************/
@media screen and (min-width: 1400px) {
  .maincontent > div {
    height: 32vw;
    padding-bottom: 20px; } }
@media (max-width: 799px) {
  .maincontent div {
    font-size: 11px; }

  .maincontent > div {
    top: 10px;
    width: 33vw;
    min-width: 330px;
    color: #999;
    line-height: 1.3; }

  .maincontent > div > table {
    height: 50px; } }
/************************************************************************/
/*        Image Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .image-title {
    display: -webkit-inline-box; } }
/************************************************************************/
/*        ITEM SELECTOR Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .flex-col-45pt,
  .flex-col-10pt {
    max-width: 100%; }

  .item-selector-action-panel .card-header {
    display: none; }
  .item-selector-action-panel .actionbar {
    flex-direction: row; }
    .item-selector-action-panel .actionbar .actionbarinner {
      max-height: 30px;
      flex-direction: row;
      justify-content: space-around;
      width: 100%; }
      .item-selector-action-panel .actionbar .actionbarinner .movetop {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveup {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveleft {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .moveright {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .movedown {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .movebottom {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .action {
        transform: rotate(90deg); } }
@media only screen and (min-width: 768px) {
  .large {
    font-size: 36px; }

  .medium {
    font-size: 20px; }

  .small {
    font-size: 18px; }

  .large-bold {
    font-size: 36px;
    font-weight: bold; }

  .medium-bold {
    font-size: 20px;
    font-weight: bold; }

  .small-bold {
    font-size: 18px;
    font-weight: bold; } }
/************************************************************************/
/*        Label Media COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        MENU COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 959px) {
  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menu-content {
    width: 100%; }

  .menubar .menuheader .menulink {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ced4da; }

  .menu-content .menu-content-cols {
    width: 100%;
    padding: 0px; }

  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menubar .menuheader .menulink:hover {
    display: block; }
    .menubar .menuheader .menulink:hover .menu-content {
      display: none; }
    .menubar .menuheader .menulink:hover a {
      color: var(--componentFontColor); } }
/************************************************************************/
/*        NAVBAR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        ROW-COLUMN MediaQ COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .flex-row {
    flex-direction: column; }

  .flex-col-1,
  .flex-col-2,
  .flex-col-3,
  .flex-col-4,
  .flex-col-5,
  .flex-col-6,
  .flex-col-7,
  .flex-col-8,
  .flex-col-9,
  .flex-col-10,
  .flex-col-11,
  .flex-col-12 {
    max-width: 100%;
    flex: 0 0 100%; } }
@media only screen and (max-width: 1024px) {
  .flex-col-2pt5,
  .flex-col-9pt5 {
    flex: 0 0 100%;
    max-width: 100%; } }
/************************************************************************/
/*        SIDENAV MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window Treenode Media Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        HOMEPAGE LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media only screen and (min-width: 568px) and (max-width: 768px) {
  amexio-homepage-northpanel .topnav-lhs-mobile .mobilebar {
    flex-grow: 0.1; } }
/****************************************************************************
                    Media Query for width - 1024
*****************************************************************************/
/************************************************************************/
/*        BORDER LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .borderlayout-N {
    grid-area: north; }

  .borderlayout-S {
    grid-area: south; }

  .borderlayout-E {
    grid-area: east; }

  .borderlayout-W {
    grid-area: west; }

  .borderlayout-C {
    grid-area: center; }

  .borderlayout-container-N-E-C-W-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-N-E-C-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-N-C-W-S {
    grid-template-areas: 'north north north north north north' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-W-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-C-W-S {
    display: grid;
    grid-template-areas: 'center center center center center center' 'west west west west west west' 'south south south south south south'; } }
/************************************************************************/
/*        Card MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .card-header {
    display: flex;
    padding: 10px 24px;
    background: var(--componentHeaderBGColor);
    border-bottom: 1px solid #ced4da;
    font-size: 18px;
    color: var(--componentHeaderFontColor);
    font-weight: 300;
    text-transform: capitalize;
    overflow: auto; } }
/************************************************************************/
/*        DATATABLE MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Datetime Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Dialogue Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .dialogue-sm {
    flex-direction: column;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 60%;
    /* Location of the box */
    width: 80%;
    padding-left: 10%;
    z-index: 3;
    top: 0;
    left: 0; } }
/************************************************************************/
/*        Enterprise Media-Q COMPONENT         */
/************************************************************************/
@media screen and (min-width: 1400px) {
  .maincontent > div {
    height: 32vw;
    padding-bottom: 20px; } }
@media (max-width: 799px) {
  .maincontent div {
    font-size: 11px; }

  .maincontent > div {
    top: 10px;
    width: 33vw;
    min-width: 330px;
    color: #999;
    line-height: 1.3; }

  .maincontent > div > table {
    height: 50px; } }
/************************************************************************/
/*        Image Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .image-title {
    display: -webkit-inline-box; } }
/************************************************************************/
/*        ITEM SELECTOR Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .flex-col-45pt,
  .flex-col-10pt {
    max-width: 100%; }

  .item-selector-action-panel .card-header {
    display: none; }
  .item-selector-action-panel .actionbar {
    flex-direction: row; }
    .item-selector-action-panel .actionbar .actionbarinner {
      max-height: 30px;
      flex-direction: row;
      justify-content: space-around;
      width: 100%; }
      .item-selector-action-panel .actionbar .actionbarinner .movetop {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveup {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveleft {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .moveright {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .movedown {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .movebottom {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .action {
        transform: rotate(90deg); } }
@media only screen and (min-width: 768px) {
  .large {
    font-size: 36px; }

  .medium {
    font-size: 20px; }

  .small {
    font-size: 18px; }

  .large-bold {
    font-size: 36px;
    font-weight: bold; }

  .medium-bold {
    font-size: 20px;
    font-weight: bold; }

  .small-bold {
    font-size: 18px;
    font-weight: bold; } }
/************************************************************************/
/*        Label Media COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        MENU COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 959px) {
  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menu-content {
    width: 100%; }

  .menubar .menuheader .menulink {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ced4da; }

  .menu-content .menu-content-cols {
    width: 100%;
    padding: 0px; }

  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menubar .menuheader .menulink:hover {
    display: block; }
    .menubar .menuheader .menulink:hover .menu-content {
      display: none; }
    .menubar .menuheader .menulink:hover a {
      color: var(--componentFontColor); } }
/************************************************************************/
/*        NAVBAR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        ROW-COLUMN MediaQ COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .flex-row {
    flex-direction: column; }

  .flex-col-1,
  .flex-col-2,
  .flex-col-3,
  .flex-col-4,
  .flex-col-5,
  .flex-col-6,
  .flex-col-7,
  .flex-col-8,
  .flex-col-9,
  .flex-col-10,
  .flex-col-11,
  .flex-col-12 {
    max-width: 100%;
    flex: 0 0 100%; } }
@media only screen and (max-width: 1024px) {
  .flex-col-2pt5,
  .flex-col-9pt5 {
    flex: 0 0 100%;
    max-width: 100%; } }
/************************************************************************/
/*        SIDENAV MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window Treenode Media Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        HOMEPAGE LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  amexio-homepage-northpanel .topnav-lhs-mobile .mobilebar {
    flex-grow: 0.1; } }
/****************************************************************************
                    Media Query for width - 1440
*****************************************************************************/
/************************************************************************/
/*        BORDER LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .borderlayout-N {
    grid-area: north; }

  .borderlayout-S {
    grid-area: south; }

  .borderlayout-E {
    grid-area: east; }

  .borderlayout-W {
    grid-area: west; }

  .borderlayout-C {
    grid-area: center; }

  .borderlayout-container-N-E-C-W-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-N-E-C-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-N-C-W-S {
    grid-template-areas: 'north north north north north north' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-W-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-C-W-S {
    display: grid;
    grid-template-areas: 'center center center center center center' 'west west west west west west' 'south south south south south south'; } }
/************************************************************************/
/*        Card MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .card-header {
    display: flex;
    padding: 10px 24px;
    background: var(--componentHeaderBGColor);
    border-bottom: 1px solid #ced4da;
    font-size: 18px;
    color: var(--componentHeaderFontColor);
    font-weight: 300;
    text-transform: capitalize;
    overflow: auto; } }
/************************************************************************/
/*        DATATABLE MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Datetime Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Dialogue Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .dialogue-sm {
    flex-direction: column;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 60%;
    /* Location of the box */
    width: 80%;
    padding-left: 10%; } }
/************************************************************************/
/*        Enterprise Media-Q COMPONENT         */
/************************************************************************/
@media screen and (min-width: 1400px) {
  .maincontent > div {
    height: 32vw;
    padding-bottom: 20px; } }
@media (max-width: 799px) {
  .maincontent div {
    font-size: 11px; }

  .maincontent > div {
    top: 10px;
    width: 33vw;
    min-width: 330px;
    color: #999;
    line-height: 1.3; }

  .maincontent > div > table {
    height: 50px; } }
/************************************************************************/
/*        Image Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .image-title {
    display: -webkit-inline-box; } }
/************************************************************************/
/*        ITEM SELECTOR Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .flex-col-45pt,
  .flex-col-10pt {
    max-width: 100%; }

  .item-selector-action-panel .card-header {
    display: none; }
  .item-selector-action-panel .actionbar {
    flex-direction: row; }
    .item-selector-action-panel .actionbar .actionbarinner {
      max-height: 30px;
      flex-direction: row;
      justify-content: space-around;
      width: 100%; }
      .item-selector-action-panel .actionbar .actionbarinner .movetop {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveup {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveleft {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .moveright {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .movedown {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .movebottom {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .action {
        transform: rotate(90deg); } }
@media only screen and (min-width: 768px) {
  .large {
    font-size: 36px; }

  .medium {
    font-size: 20px; }

  .small {
    font-size: 18px; }

  .large-bold {
    font-size: 36px;
    font-weight: bold; }

  .medium-bold {
    font-size: 20px;
    font-weight: bold; }

  .small-bold {
    font-size: 18px;
    font-weight: bold; } }
/************************************************************************/
/*        Label Media COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        MENU COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 959px) {
  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menu-content {
    width: 100%; }

  .menubar .menuheader .menulink {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ced4da; }

  .menu-content .menu-content-cols {
    width: 100%;
    padding: 0px; }

  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menubar .menuheader .menulink:hover {
    display: block; }
    .menubar .menuheader .menulink:hover .menu-content {
      display: none; }
    .menubar .menuheader .menulink:hover a {
      color: var(--componentFontColor); } }
/************************************************************************/
/*        NAVBAR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        SIDENAV MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window Treenode Media Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        HOMEPAGE LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  amexio-homepage-northpanel .topnav-lhs-mobile .mobilebar {
    flex-grow: 0.1; } }
/****************************************************************************
                    Media Query for width - 1440
*****************************************************************************/
/************************************************************************/
/*        BORDER LAYOUT Media Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .borderlayout-N {
    grid-area: north; }

  .borderlayout-S {
    grid-area: south; }

  .borderlayout-E {
    grid-area: east; }

  .borderlayout-W {
    grid-area: west; }

  .borderlayout-C {
    grid-area: center; }

  .borderlayout-container-N-E-C-W-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-N-E-C-S {
    grid-template-areas: 'north north north north north north' 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-N-C-W-S {
    grid-template-areas: 'north north north north north north' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-W-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'west west west west west west' 'south south south south south south'; }

  .borderlayout-container-E-C-S {
    display: grid;
    grid-template-areas: 'east east east east east east ' 'center center center center center center' 'south south south south south south'; }

  .borderlayout-container-C-W-S {
    display: grid;
    grid-template-areas: 'center center center center center center' 'west west west west west west' 'south south south south south south'; } }
/************************************************************************/
/*        Card MediaQ COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .card-header {
    display: flex;
    padding: 10px 24px;
    background: var(--componentHeaderBGColor);
    border-bottom: 1px solid #ced4da;
    font-size: 18px;
    color: var(--componentHeaderFontColor);
    font-weight: 300;
    text-transform: capitalize;
    overflow: auto; } }
/************************************************************************/
/*        DATATABLE MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Datetime Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Dialogue Media-Q COMPONENT         */
/************************************************************************/
@media screen and (max-width: 768px) {
  .dialogue-sm {
    flex-direction: column;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 60%;
    /* Location of the box */
    width: 80%;
    padding-left: 10%;
    z-index: 3;
    top: 0;
    left: 0; } }
/************************************************************************/
/*        Enterprise Media-Q COMPONENT         */
/************************************************************************/
@media screen and (min-width: 1400px) {
  .maincontent > div {
    height: 32vw;
    padding-bottom: 20px; } }
@media (max-width: 799px) {
  .maincontent div {
    font-size: 11px; }

  .maincontent > div {
    top: 10px;
    width: 33vw;
    min-width: 330px;
    color: #999;
    line-height: 1.3; }

  .maincontent > div > table {
    height: 50px; } }
/************************************************************************/
/*        Image Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .image-title {
    display: -webkit-inline-box; } }
/************************************************************************/
/*        ITEM SELECTOR Media-Q COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .flex-col-45pt,
  .flex-col-10pt {
    max-width: 100%; }

  .item-selector-action-panel .card-header {
    display: none; }
  .item-selector-action-panel .actionbar {
    flex-direction: row; }
    .item-selector-action-panel .actionbar .actionbarinner {
      max-height: 30px;
      flex-direction: row;
      justify-content: space-around;
      width: 100%; }
      .item-selector-action-panel .actionbar .actionbarinner .movetop {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveup {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .moveleft {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .moveright {
        display: block; }
      .item-selector-action-panel .actionbar .actionbarinner .movedown {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .movebottom {
        display: none; }
      .item-selector-action-panel .actionbar .actionbarinner .action {
        transform: rotate(90deg); } }
@media only screen and (min-width: 768px) {
  .large {
    font-size: 36px; }

  .medium {
    font-size: 20px; }

  .small {
    font-size: 18px; }

  .large-bold {
    font-size: 36px;
    font-weight: bold; }

  .medium-bold {
    font-size: 20px;
    font-weight: bold; }

  .small-bold {
    font-size: 18px;
    font-weight: bold; } }
/************************************************************************/
/*        Label Media COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        MENU COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 959px) {
  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menu-content {
    width: 100%; }

  .menubar .menuheader .menulink {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ced4da; }

  .menu-content .menu-content-cols {
    width: 100%;
    padding: 0px; }

  .menu-content .menu-content-cols .col-menu-nodes {
    width: 100%; }

  .menubar .menuheader .menulink:hover {
    display: block; }
    .menubar .menuheader .menulink:hover .menu-content {
      display: none; }
    .menubar .menuheader .menulink:hover a {
      color: var(--componentFontColor); } }
/************************************************************************/
/*        NAVBAR Media-Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        ROW-COLUMN MediaQ COMPONENT         */
/************************************************************************/
@media only screen and (max-width: 767px) {
  .flex-row {
    flex-direction: column; }

  .flex-col-1,
  .flex-col-2,
  .flex-col-3,
  .flex-col-4,
  .flex-col-5,
  .flex-col-6,
  .flex-col-7,
  .flex-col-8,
  .flex-col-9,
  .flex-col-10,
  .flex-col-11,
  .flex-col-12 {
    max-width: 100%;
    flex: 0 0 100%; } }
@media only screen and (max-width: 1024px) {
  .flex-col-2pt5,
  .flex-col-9pt5 {
    flex: 0 0 100%;
    max-width: 100%; } }
/************************************************************************/
/*        SIDENAV MediaQ COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        Window Treenode Media Q COMPONENT         */
/************************************************************************/
/************************************************************************/
/*        HOMEPAGE LAYOUT Media Q COMPONENT         */
/************************************************************************/
/** Initialze Creative Components ------------ */
/****************************************************************************
    Component Name : Viewport
    Version : Amexio v5.10 onwards
*****************************************************************************/
/** menubar - Structure CSS **/
.viewportContent {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  height: 100%;
  width: 100%; }

.viewportBody {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%; }

.viewportvideo {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  /*  background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat; */
  background-size: cover;
  transition: 1s opacity; }

.stopfade {
  opacity: .5; }

/** menubar - Vars CSS **/
/** menubar - Visual CSS **/
/****************************************************************************
    Component Name : Creative carousel
    Version : Amexio v5.5.5 onwards
*****************************************************************************/
/** creative carousel - var CSS **/
/** creative carousel - Visual CSS **/
.ce-carousel-textdata {
  color: var(--componentHeaderFontColor);
  background: transparent; }

.ce-carousel-textdata-right {
  background: transparent;
  color: var(--componentHeaderFontColor); }

.ce-carousel-textdata-left {
  background: transparent;
  color: var(--componentHeaderFontColor); }

.ce-carousel-textdata-center {
  background: transparent;
  color: var(--componentHeaderFontColor); }

.ce-caroueslbar {
  background: var(--componentHoverBGColor) repeat top left;
  color: var(--appHeaderBGColor); }

.ce-caroueslnav-content div {
  color: var(--appHeaderBGColor); }

.ce-caroueslnav-content span {
  color: var(--appHeaderBGColor); }

.ce-caroueslnav-content-current span {
  color: var(--appHeaderBGColor); }

.ce-caroueslnav-content div.ce-caroueslnav-content-prev {
  color: var(--appHeaderBGColor); }

.ce-caroueslnav-content div.ce-caroueslnav-content-next {
  color: var(--appHeaderBGColor); }

.ce-caroueslnav a.ce-caroueslnav-prev span {
  background: var(--themeSecondaryColor) url("prev.png") no-repeat center center; }

.ce-caroueslnav a.ce-caroueslnav-next span {
  background: var(--themeSecondaryColor) url("next.png") no-repeat center center; }

.ce-caroueslnav a:hover span {
  background-color: var(--componentHeaderBGColor); }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/** creative carousel - Structure CSS **/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.ce-caroueslslideshow {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  position: relative;
  margin: 0 auto; }

.ce-caroueslimages {
  width: 100%;
  height: 100%;
  position: relative; }

.ce-caroueslbar {
  height: 19%;
  position: absolute;
  bottom: 6px !important;
  right: 50px;
  left: 50px;
  z-index: 99; }

.ce-caroueslnav-content {
  position: absolute;
  top: 10%;
  height: 100%;
  width: auto;
  right: 70px;
  left: 70px;
  overflow: hidden;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

.ce-caroueslnav-content div {
  float: left;
  width: 90px; }

.ce-caroueslnav-content div.ce-caroueslnav-content-prev {
  margin-left: 15px;
  width: 26%;
  font-size: 14px !important; }

.ce-caroueslnav-content div.ce-caroueslnav-content-current {
  text-align: center;
  width: 28%;
  left: 35%;
  position: absolute;
  font-size: 14px !important; }

.ce-caroueslnav-content div.ce-caroueslnav-content-next {
  text-align: right;
  margin-right: 15px;
  float: right;
  font-size: 14px !important;
  width: 26%; }

.ce-caroueslnav-content div span {
  display: block;
  padding-top: 16%; }

.ce-caroueslnav > a {
  position: absolute;
  top: 0px;
  height: 100%;
  width: 70px; }

a.ce-caroueslnav-prev {
  left: 0px; }

a.ce-caroueslnav-next {
  right: 0px; }

.ce-caroueslnav a span {
  width: 46px;
  height: 46px;
  display: block;
  text-indent: -9000px;
  -moz-border-radius: 23px;
  -webkit-border-radius: 23px;
  border-radius: 23px;
  cursor: pointer;
  opacity: 0.9;
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: 17px 25px;
  margin: -23px 0 0 -23px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease; }

.ce-caroueslnav a div {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }

.ce-caroueslnav a:hover span {
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  opacity: 0.6;
  margin: -50px 0 0 -50px;
  background-size: 22px 32px; }

.ce-caroueslnav a:hover div {
  width: 90px;
  height: 90px;
  background-size: 120% 120%;
  margin: -45px 0 0 -45px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;
  border-radius: 45px; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 767px) {
  .ce-caroueslnav-content {
    display: none; }

  .ce-caroueslbar {
    background: transparent; } }
@media (min-width: 768px) and (max-width: 1024px) {
  .ce-caroueslnav-content {
    display: none; }

  .ce-caroueslbar {
    background: transparent; } }
@media only screen and (max-width: 600px) {
  .ce-caroueslnav-content {
    display: none; }

  .ce-caroueslbar {
    background: transparent; } }
@media (max-width: 500px) {
  .ce-caroueslnav-content {
    display: none; }

  .ce-caroueslbar {
    background: transparent; } }
@media screen and (max-width: 600px) {
  .ce-caroueslnav-content {
    display: none; }

  .ce-caroueslbar {
    background: transparent; } }
@media (min-width: 1024px) and (max-width: 1100px) {
  .ce-caroueslnav-content {
    top: 0%; } }
/****************************************************************************
    Component Name : Color Picker
    Version : Amexio v5.12 onwards
*****************************************************************************/
/** creative carousel - Structure CSS **/
:host {
  display: block;
  padding: 16px; }

.color-wrapper {
  display: flex;
  padding-bottom: 0px;
  z-index: 1010; }

.color-inline-picker {
  padding: 10px 10px 2px 10px;
  display: flex;
  height: 200%;
  width: 200%;
  position: fixed;
  z-index: 1010; }

.text {
  flex: 1;
  font-family: 'Helvetica';
  line-height: 32px; }

.block-css {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle; }

.color-picker-icon {
  position: absolute;
  right: 0;
  display: block;
  width: 38px;
  line-height: 38px;
  text-align: center; }

.input-control-class {
  width: 100%;
  padding: .375rem 0;
  line-height: 2;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid black;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }

.color-slider:hover {
  cursor: pointer; }

.color-slider {
  border: 5px solid #323232; }

.color-palette:hover {
  cursor: pointer; }

.color-palette {
  border: 5px solid #323232;
  border-right: 0px; }

:host {
  display: block; }

/** 
  Amexio Colors v2.0 Updated on April 10, 2019.
  Amexio Support ---------------------------------- 
  Contact  : amexiosupport@metamagic.in 
  Home     : http://www.amexio.tech/
  API Docs : http://api.amexio.tech/
  Demos    : http://demo.amexio.tech/
  Source   : https://github.com/meta-magic/amexio.github.io
*/

/*# sourceMappingURL=at-md-firebrick-crimson.css.map */