:root,
[data-theme="light"] {
  --fussion-font-family: "Roboto Serif", sans-serif;
  --fussion-font-size: 18px;
  --fussion-font-weight: 400;
  --fussion-line-height: 1.5;
  --fusion-blue: #007bff;
  --fusion-indigo: #6610f2;
  --fusion-purple: #6f42c1;
  --fusion-pink: #e83e8c;
  --fusion-red: #d9534f;
  --fusion-orange: #fd7e14;
  --fusion-yellow: #f0ad4e;
  --fusion-green: #4bbf73;
  --fusion-teal: #20c997;
  --fusion-cyan: #1f9bcf;
  --fusion-black: #000;
  --fusion-white: #fff;
  --fusion-gray: #919aa1;
  --fusion-gray-dark: #343a40;
  --fusion-gray-100: #f8f9fa;
  --fusion-gray-200: #f7f7f9;
  --fusion-gray-300: #eceeef;
  --fusion-gray-400: #ced4da;
  --fusion-gray-500: #adb5bd;
  --fusion-gray-600: #919aa1;
  --fusion-gray-700: #55595c;
  --fusion-gray-800: #343a40;
  --fusion-gray-900: #1a1a1a;
  --fusion-primary: #1a1a1a;
  --fusion-secondary: #fff;
  --fusion-success: #4bbf73;
  --fusion-info: #1f9bcf;
  --fusion-warning: #f0ad4e;
  --fusion-danger: #d9534f;
  --fusion-light: #fff;
  --fusion-dark: #343a40;
  --fussion-btn-hover-color: white;
  --fussion-btn-hover-bg: #292929;
  --fussion-btn-hover-border-color: #292929;
  --fusion-sidebar-darkgrey: rgb(20, 20, 20);


  --fusion-tabbar-1st: #5e2bb9;
  --fusion-tabbar-1st-gradient: #804be3;
  --fusion-tabbar-2nd: #8d6cca;
  --fusion-tabbar-2nd-gradient: #804be3;
  --fusion-tabbar-hover: rgba(255, 255, 255, 0.075);

  --fussion-theme-darkblue-bar-a: rgb(2 3 49);
  --fussion-theme-darkblue-bar-b: #000e1c;




}

[data-theme="dark"] {
  color-scheme: dark;
  --fusion-body-color: #eceeef;
  --fusion-body-color-rgb: 236, 238, 239;
  --fusion-body-bg: #1a1a1a;
  --fusion-body-bg-rgb: 26, 26, 26;
  --fusion-emphasis-color: #fff;
  --fusion-emphasis-color-rgb: 255, 255, 255;
  --fusion-secondary-color: rgba(236, 238, 239, 0.75);
  --fusion-secondary-color-rgb: 236, 238, 239;
  --fusion-secondary-bg: #343a40;
  --fusion-secondary-bg-rgb: 52, 58, 64;
  --fusion-tertiary-color: rgba(236, 238, 239, 0.5);
  --fusion-tertiary-color-rgb: 236, 238, 239;
  --fusion-tertiary-bg: #272a2d;
  --fusion-tertiary-bg-rgb: 39, 42, 45;
  --fusion-primary-text-emphasis: #767676;
  --fusion-secondary-text-emphasis: white;
  --fusion-success-text-emphasis: #93d9ab;
  --fusion-info-text-emphasis: #79c3e2;
  --fusion-warning-text-emphasis: #f6ce95;
}

* {
  /*outline: rgb(255, 0, 0) solid 2px;*/
}

/*
@font-face {
    font-family: 'boxicons'; 
    src: url('manager/dashboard/assets/fonts/boxicons.woff2'); 
  }*/

/*
@view-transition {
  navigation: auto;
}*/


html {
  height: 100%;
  min-height: 100%;
  width: 100%;
  /* specifies whether to smoothly animate the scroll position */
  scroll-behavior: smooth; 

}

body {
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  font-family: "Roboto Serif", sans-serif;
  color: #909090;
}

/* unvisited link */
a:link {
  color:#000;
  font-family: "Roboto Serif", sans-serif;  
}


/* visited link */
a:visited {
  color:#000;
  font-family: "Roboto Serif", sans-serif;  
}

/* mouse over link */
a:hover {
  color:#000;
  font-family: "Roboto Serif", sans-serif;  
}

/* selected link */
a:active {
  color:#000;
  font-family: "Roboto Serif", sans-serif;  
}



p {
  margin: 0px;
  padding: 0px;
  line-height: normal;
}

h1 {
  font-size: clamp(22px, 1.6vw + 1rem, 40px);
  font-weight: 600;
  /*text-transform: uppercase;*/
  margin: 5px 0px 5px 0px;
  padding: 5px 0px 5px 0px;
  color: #4b4b4d;
}

h2 {
  font-size: clamp(22px, 1.6vw + 1rem, 26px);
  font-weight: 400;
  margin: 5px 0px 5px 0px;
  padding: 5px 0px 5px 0px;
}

h3 {
  font-size: clamp(16px, 0.3vw + 1rem, 28px);
  font-weight: 600;
  margin: 5px 0px 5px 0px;
  padding: 5px 0px 5px 0px;
}

h4 {
  font-size: clamp(16px, 0.2vw + 1rem, 28px);
  font-weight: 600;
  margin: 5px 0px 5px 0px;
  padding: 5px 0px 5px 0px;
}

h5 {
  font-size: clamp(16px, 0.1vw + 1rem, 28px);
  font-weight: 500;
  margin: 5px 0px 5px 0px;
  padding: 5px 0px 5px 0px;
}

h6 {
  font-size: clamp(16px, 0.1vw + 1rem, 28px);
  font-weight: 400;
  margin: 5px 0px 5px 0px;
  padding: 5px 0px 5px 0px;
}

.br-spacer {
  min-height: 20px;
  line-height: 55px;;
  margin-top: 5px;
  margin-bottom: 5px;
}

label {
  display: flex;
  text-align: right;
  font-weight: 600;
  vertical-align: middle;
  padding: 0px;
  margin: 0px;
}

input {
  /* The native appearance is hidden */
  /*appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; */
}

input[type="text" i], input[type="password" i], input[type="email" i], textarea  {
  padding:10px;
  margin:0px;
  border: 2px solid var(--fusion-gray-300);
  border-radius: 5px;
  font-family: var(--fusion-btn-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5rem;
  color: var(--fusion-dark);
  width:100%;
  text-align: left;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
  height: 50px;
}

input[type="radio" i] {
  appearance: none !important;
}

input[type="checkbox" i] {
  appearance: none !important;
}

input[type="submit" i], input[type="button" i] {
  height: 45px;
  background-color: var(--fusion-sidebar-darkgrey);
  color: var(--fusion-light);
  padding: 10px;
  border-color: var(--fusion-sidebar-darkgrey);
  display: inline-block;
  padding: 10px 25px;
  font-family: var(--fusion-btn-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid var(--fusion-sidebar-darkgrey);
  border-radius: 3px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="file" i]::-webkit-file-upload-button {
  height: 45px;
  background-color: var(--fusion-sidebar-darkgrey);
  color: var(--fusion-light);
  padding: 10px;
  border-color: var(--fusion-sidebar-darkgrey);
  display: inline-block;
  padding: 10px 25px;
  font-family: var(--fusion-btn-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid var(--fusion-sidebar-darkgrey);
  border-radius: 3px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="file" i] {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5rem;
  font-family: var(--fusion-btn-font-family);
}

input[type="submit" i]:hover, input[type="button" i]:hover {
  color: var(--fussion-btn-hover-color);
  background-color: var(--fussion-btn-hover-bg);
  border-color: var(--fussion-btn-hover-border-color);
}

select {
  padding: 10px;
  border: 2px solid var(--fusion-gray-300);
  border-radius: 5px;
  font-family: var(--fusion-btn-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5rem;
}

select > option {
  color: black;
  padding: 10px;
  font-size: 18px;
  line-height: 1.5rem;
  font-weight: 400;
  background-color: var(--fusion-gray-300);
  border: 2px solid var(--fusion-gray-500);
}

/*
select>option:checked { 
    background: #000 !important;
}*/

[type="checkbox"]:before {
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: "boxicons";
  color: var(--fusion-gray-400);
  content: "\ec49";
  font-size: 50px;
  cursor: pointer;
  /*
    width: 24px;
    height: 24px;
    background-color: #c7c7c7;
    border-radius: 50%;
    border: 2px solid #00000033;  
    */
  position: relative;
  top: 0px;
  left: 0px;
}

[type="checkbox"]:checked::before {
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: "boxicons";
  font-size: 50px;
  color: var(--fusion-green);
  content: "\eecc";
  cursor: pointer;
  /*width: 24px;
    height: 24px;
    background-color: #4ccf00;
    border-radius: 50%;
    border: 2px solid #00000033;
    */
  position: relative;
  top: 0px;
  left: 0px;
}

[type="radio"]:before {
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: "boxicons";
  color: var(--fusion-gray-400);
  content: "\ebd3";
  font-size: 50px;
  cursor: pointer;
  /*
    width: 24px;
    height: 24px;
    background-color: #c7c7c7;
    border-radius: 50%;
    border: 2px solid #00000033;  
    */
  position: relative;
  top: 0px;
  left: 0px;
}

[type="radio"]:checked::before {
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: "boxicons";
  color: var(--fusion-green);
  content: "\ebd4";
  font-size: 50px;
  cursor: pointer;
  /*
    width: 24px;
    height: 24px;
    background-color: #c7c7c7;
    border-radius: 50%;
    border: 2px solid #00000033;  
    */
  position: relative;
  top: 0px;
  left: 0px;
}

#toggle-password[type="button"] {
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: "boxicons";
  color: var(--fusion-gray-400);
  font-size: 25px;
  cursor: pointer;
  border: none;
  background-color: #f0f8ff00;
  margin-bottom: 2px;
}

#toggle-password[type="button"]::before {
  content: "\ec0c";
}

#toggle-password[type="button"].active::before {
  content: "\ede6";
}

#togglebtn[type="button"] {
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: "boxicons";
  color: var(--fusion-gray-900);
  font-size: 25px;
  cursor: pointer;
  border: none;
  background-color: var(--fusion-gray-200);
  min-height: 60px;
  border-bottom: 1px solid #f1eeee;
  margin-bottom: 2px;
}

#togglebtn[type="button"] {
  display: flex;
  align-items: center;
  justify-items: center;
  font-family: "boxicons";
  color: var(--fusion-gray-900);
  font-size: 25px;
  cursor: pointer;
  border: none;
  background-color: var(--fusion-gray-200);
  min-height: 60px;
  border-bottom: 1px solid #f1eeee;
}


#togglebtn[type="button"]::before {
  content: "\ea4a";
}
/*
#answerbtn[type="button"]:focus::before {
  content: "\ea57";
}*/

#togglebtn[type="button"].active::before {
  content: "\ea57";
}

/*
button#answerbtn:active {
  content: "\ea57";
  color: var(--fusion-blue) !important;
}*/


.btn {
  display: inline-block;
  padding: 10px 15px;
  color: var(--fusion-light);
  font-family: var(--fusion-btn-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-radius: 3px;
  border: 1px solid var(--fusion-sidebar-darkgrey);
  background-color: var(--fusion-sidebar-darkgrey);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  color: var(--fussion-btn-hover-color);
  background-color: var(--fussion-btn-hover-bg);
  border-color: var(--fussion-btn-hover-border-color);
}

.btnsave {
  display: inline-block;
  width: 10%;
  height: 60px;
  margin: 40px;
  padding: 10px 15px;
  color: var(--fusion-light);
  font-family: var(--fusion-btn-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5rem;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-radius: 3px;
  border: 1px solid var(--fusion-sidebar-darkgrey);
  background-color: var(--fusion-sidebar-darkgrey);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  color: var(--fussion-btn-hover-color);
  background-color: var(--fussion-btn-hover-bg);
  border-color: var(--fussion-btn-hover-border-color);
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.185);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.overlay.show {
  display: flex;
}


/*
.btn-spinner:focus:after {
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px dotted #ffffff9f;
  border-top-color: #ffffff;
  animation: spin 1s linear 5 forwards;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}*/


.load-save-spinner {
  position: absolute;
  content: "";
  z-index: 1;
  /*pointer-events: none;*/
  --b: 20px;  /* border thickness */
  --n: 10;    /* number of dashes*/
  --g: 10deg; /* gap  between dashes*/
  --c: rgba(37, 37, 37, 0.678);   /* the color */
  width: 10%; /* size */
  aspect-ratio: 1;
  border-radius: 70%;
  padding: 0px; /* get rid of bad outlines */
  background: conic-gradient(#0000,var(--c)) content-box;
  --_m: /* we use +/-1deg between colors to avoid jagged edges */
    repeating-conic-gradient(#0000 0deg,
       #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
       #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
    radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: load 1s infinite steps(var(--n));
}
@keyframes load {to{transform: rotate(1turn)}}



.colgap {
  column-gap: 3%;
}


.rowgap {
  row-gap: 10%;
}


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


.columns-3 {
  min-width: 390px;
  flex-basis: 33.3%;
  flex-grow: 1;
}


.columns-3-box {
  min-width: 390px;
  flex-basis: 30.6%;
  flex-grow: 1;
}

/* box-sizing: border-box; scroll bar for container*/

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


.wrap {
  display: flex;
  flex-wrap: wrap;
}


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


.left {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  justify-content: left;
  align-items: center;
}


.right {
  display: flex;
  flex-wrap: wrap;
  text-align: right;
  justify-content: right;
  align-items: center;
}


.fullheight {
  height: 100%;
}

.fullwidth {
  width: 100%;
}


hr {
  border: 1px solid var(--fusion-gray-300);
  width: 100%;
}


/* Vertical rule */
.vr {
  border-right: 1px solid var(--fusion-gray-300);
  height: 100%;
  padding-right: 2%;
  margin-right: -1%;
  margin-bottom: 25px;
}


/* Column Vertical Scroll */
.colvscroll { 
  overflow-y: auto; /* Change to scroll if you want permanent scroll bar */
  overflow-x: clip;
   /* Need to set height in separate css calss or id*/
}


/* Column horizantal Scroll */
.colhscroll {
  overflow-x: auto; /* Change to scroll if you want permanent scroll bar */
  overflow-y: clip;
  /* Need to set height in separate css calss or id*/
}


.container {
  display: flex;
  position: relative;
  height: 100%;
  width: 100%;
  
}


.wrapper {
  display: flex;
  position: relative;
  flex-grow: 1;
}


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


.footer {
    display: flex;
    position: relative;
    text-align: center;
    height: 50px;
    width: 100%;
    border-top: 1px solid #ada9a91c;
    background: rgba(191, 191, 191, 0.1);
    margin: auto;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }