/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/* google Icons */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(../assets/fonts/MaterialSymbolsRounded[FILL\,GRAD\,opsz\,wght].woff2) format('woff');
}
.material-symbols-rounded {
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48}
.material-symbols-rounded {
  display: inline-flex;
  vertical-align: middle;
}

.html,h1,h2,h3,h4,h5,h6 {
  font-family: "Comfortaa", sans-serif;
}

body {
  font-family: Comfortaa, sans-serif;
  font-size: 14px;
  line-height: 1.5
}

/* Remove Styling on ALL Links */
a {
  text-decoration: none;
}

/* Remove Styling on ALL Unordered List items */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Styling on ALL Ordered List items */
ol {
  margin: 0px;
  padding: 16px;
}

/* amend W3 input styling */
.w3-input{
  padding:10px;
  border-radius: 14px !important;
}

/* amend W3 List */
.w3-ul li:last-child {
  border-bottom: none !important;
  }

/* Dropdown elements */
.dropdown {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
}

/* Croftz Branding */
@media (prefers-color-scheme: light) {
  .nav-logo-dark
  {
  display: none
  } .menu-logo-dark
    {
    display: none
  }
}

/* Client Dark Mode changes */
@media (prefers-color-scheme: dark) {
  .nav-logo-light
  {
  display: none
} .menu-logo-light
  {
  display: none
}
}

/* Background Image */
@media (prefers-color-scheme: light) {
  .background-image
  {
  background-image: url('../assets/background-light.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  }
}
@media (prefers-color-scheme: dark) {
  .background-image
  {
  background-image: url('../assets/background-dark.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  }
}
.background-image-error {
  background-image: url('../assets/background-error.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Toast start -> */
/* Top Right notification box */
#toast_success {
  visibility: hidden;
  min-width: 250px;
  max-width: 390px;
  margin-left: -125px;
  background-color: #b4dc70;
  color: #354320;
  text-align: left;
  border-radius: 14px;
  padding: 6px;
  position: fixed;
  z-index: 1;
  right: 12px;
  top: 80px;
  font-size: 14px;
}
@media (prefers-color-scheme: dark){
  #toast_success{
    background-color: #84a350 !important;
    color: #fff !important;
  }
}
#toast_success.show {
  visibility: visible;
  -webkit-animation: fadein 0.7s, fadeout 0.7s 4.6s;
  animation: fadein 0.7s, fadeout 0.7s 4.6s;
  z-index: 2;
}

#toast_info {
  visibility: hidden;
  min-width: 250px;
  max-width: 390px;
  margin-left: -125px;
  background-color: #a6bde6;
  color: #00204b;
  text-align: left;
  border-radius: 14px;
  padding: 6px;
  position: fixed;
  z-index: 1;
  right: 12px;
  top: 80px;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  #toast_info
  {
  color: #fff !important;
  background-color: #5674a0 !important
  }
}
#toast_info.show {
  visibility: visible;
  -webkit-animation: fadein 0.7s, fadeout 0.7s 4.6s;
  animation: fadein 0.7s, fadeout 0.7s 4.6s;
  z-index: 2;
}

#toast_warning {
  visibility: hidden;
  min-width: 250px;
  max-width: 390px;
  margin-left: -125px;
  background-color: #ffdea0;
  color: #b77700;
  text-align: left;
  border-radius: 14px;
  padding: 6px;
  position: fixed;
  z-index: 1;
  right: 12px;
  top: 80px;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  #toast_warning
  {
  color: #7c5100 !important;
  background-color: #ffa600 !important
  }
}
#toast_warning.show {
  visibility: visible;
  -webkit-animation: fadein 0.7s, fadeout 0.7s 4.6s;
  animation: fadein 0.7s, fadeout 0.7s 4.6s;
  z-index: 2;
}

#toast_error {
  visibility: hidden;
  min-width: 250px;
  max-width: 390px;
  margin-left: -125px;
  background-color: #ffd8d8;
  color: #9e0909;
  text-align: left;
  border-radius: 14px;
  padding: 6px;
  position: fixed;
  z-index: 1;
  right: 12px;
  top: 80px;
  font-size: 14px;
}
@media (prefers-color-scheme: dark){
  #toast_error
  {
  color: #fff !important;
  background-color: #c30000 !important
  }
}
#toast_error.show {
  visibility: visible;
  -webkit-animation: fadein 0.7s, fadeout 0.7s 4.6s;
  animation: fadein 0.7s, fadeout 0.7s 4.6s;
  z-index: 2;
}

#toast_wait {
  visibility: hidden;
  min-width: 250px;
  max-width: 390px;
  margin-left: -125px;
  background-color: #ccc;
  color: #414141;
  text-align: left;
  border-radius: 14px;
  padding: 6px;
  position: fixed;
  z-index: 1;
  right: 12px;
  top: 80px;
  font-size: 14px;
}
@media (prefers-color-scheme: dark){
  #toast_wait
  {
  background-color: #909090 !important;
  color: #414141 !important;
  }
}
#toast_wait.show {
  visibility: visible;
  -webkit-animation: fadein 0.7s, fadeout 0.7s 4.6s;
  animation: fadein 0.7s, fadeout 0.7s 4.6s;
}
@-webkit-keyframes fadein {
  from {
    top: 0; opacity: 0;}
  to {
    top: 80px; opacity: 1;}
}

@keyframes fadein {
  from {
    top: 0; opacity: 0;}
  to {
    top: 80px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {
    top: 80px; opacity: 1;}
  to {
    top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {
    top: 80px; opacity: 1;}
  to {
    top: 0; opacity: 0;}
}
/* <- end Toast */

/* Login Cards */
.left-card-outer {
  width: calc(100% - 60%);
  min-height: 98vh;
  padding: 4px;
}
@media (max-width: 921px) {
  .left-card-outer {
  width: calc(100% - 40%);
  }
}
@media (max-width: 640px) {
  .left-card-outer {
  width: 100%;
  }
}

.left-card-inner {
  align-items: center;
  position: relative;
  display: grid;
  padding: 40px 0;
  height: 100%;
  width: 100%;
}

.right-card-outer {
  width: calc(100% - 40%);
  height: 98vh;
  padding: 4px;
}
@media (max-width: 820px) {
  .right-card-outer {
  width: calc(100% - 60%);
  }
}
@media (max-width: 640px) {
  .right-card-outer {
  width: 100%;
  }
}


/* Animation */
.animation-container {
  position: fixed;
  height: 98vh;
  width: inherit;
}

.animation-svg {
  width: 70%;
  max-width: 600px;
  margin: auto;
  background-image: radial-gradient(black, transparent, transparent);
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: 50% 70%;
}
@media (max-width: 1150px) {
  .animation-svg {
  background-image: none;
  }
}

.animation-svg::after {
  content: "";
  width: 70%;
  max-width: 600px;
  height: 50vh;
  max-height: 600px;
}

.animation-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.animation-slider .animation {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.animation-slider .animation.active {
  opacity: 1;
}


/* SLIDER SWITCH start -> */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
  .slider {
  background-color: #414141}
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
  background-color: #5674a0;
}
@media (prefers-color-scheme: dark){

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #202020;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  input:checked+.slider{
    background-color: #354660 !important;
  }

}

input:checked+.slider.green {
  background-color: #84a350;
}

input:checked+.slider.gold {
  background-color: #ffa600;
}

input:checked+.slider.red {
  background-color: #c30000;
}

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

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

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

/* slider:before - gold slider */
.slider.no-gold {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffa600;
  -webkit-transition: .4s;
  transition: .4s;
}
@media (prefers-color-scheme: dark) {
  .slider.no-gold {background-color: #b87700}
}

/* Coloured YES/NO Sliders */

/* Default No  -red color*/
.slider.no-red {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c30000;
  -webkit-transition: .4s;
  transition: .4s;
}
@media (prefers-color-scheme: dark) {
  .slider.no-red {
  background-color: #780000;
  }
}

/* default No - red color - When Checked yes - green color */
input:checked+.slider.yes-green {
  background-color: #84a350;
}
@media (prefers-color-scheme: dark) {
  input:checked+.slider.yes-green {
  background-color: #6c8442 !important;
  }
}


/* default NO - green color */
.slider.no-green {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #84a350;
  -webkit-transition: .4s;
  transition: .4s;
}

@media (prefers-color-scheme: dark) {
  .slider.no-green {
  background-color: #6c8442
  }
}


/* default No - green color -  When Checked yes - red color */
input:checked+.slider.yes-red {
  background-color: #c30000;
}
@media (prefers-color-scheme: dark) {
  input:checked+.slider.yes-red {
  background-color: #780000 !important;
  }
}


/* opposite state yes/no */

/* Default Yes - red color */
.slider.opposite-yes-red {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c30000;
  -webkit-transition: .4s;
  transition: .4s;
}
@media (prefers-color-scheme: dark) {
  .slider.opposite-yes-red {
  background-color: #780000;
  }
}


/* default Yes - red color - When Checked no - green color */
input:checked+.slider.opposite-no-green {
  background-color: #84a350;
}
@media (prefers-color-scheme: dark){
  input:checked+.slider.opposite-no-green {
  background-color: #6c8442 !important;
  }
}


/* Default Yes - green color */
.slider.opposite-yes-green {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #84a350;
  -webkit-transition: .4s;
  transition: .4s;
}
@media (prefers-color-scheme: dark) {
  .slider.opposite-yes-green
  {
  background-color: #6c8442;
  }
}


/* default Yes - green color - When Checked no - red color */
input:checked+.slider.opposite-no-red {
  background-color: #c30000;
}
@media (prefers-color-scheme: dark){
  input:checked+.slider.opposite-no-red {
  background-color: #780000 !important;
  }
}
/* <- end SLIDER SWITCH */

/* <- Space Management -> */
.croftz-toplevel {
  padding-left: 10px;
  padding-right: 10px;
  height: inherit;
  padding-bottom: 40px;
}
@media (max-width: 640px) {
  .croftz-toplevel {
  padding-left: 2px;
  padding-right: 2px;
  height: inherit;
  padding-bottom: 10px;
  }
}

.croftz-display-flex {
  display: flex;
  padding: 10px;
}

.croftz-hr {
  border: none;
  height: 1px;
  margin: 5px 0;
  background-color: rgba(128, 128, 128, 0.7);
}
@media (prefers-color-scheme: light) {
  .croftz-hr {
  border: none;
  height: 1px;
  background-color: rgba(128, 128, 128, 0.5);
  }
}

/* Top Menu */
.croftz-menubar-top {
  overflow: hidden;
  position: fixed;
  z-index: 1;
  height: 58px;
  width: calc(100% - 20px);
  margin-top: 10px;
  margin-left: 10px;
}
@media (min-width: 993px) {
  .croftz-menubar-top {
  float: left;
  width: calc(100% - 126px);
  margin-left: 114px;
}
}

.top-bar-bg {
  position: fixed;
  z-index: 1;
  width: 100%;
  top: 0;
  left: 0;
  height: 25px;
}

.croftz-menubar-location {
  display: none;
}
@media (min-width: 375px) {
  .croftz-menubar-location {
  display: block;
  max-width: calc(100% - 45%);
  margin-left: -20px;
  }
}
@media (min-width: 568px) {
  .croftz-menubar-location {
  display: block;
  max-width: calc(100% - 40%);
  margin-left: -10px;
  }
}
@media (min-width: 1180px) {
  .croftz-menubar-location {
  display: block;
  max-width: calc(100% - 30%);
  margin-left: 0px;
  }
}
@media (min-width: 1186px) {
  .croftz-menubar-location {
  display: block;
  max-width: calc(100% - 20%);
  margin-left: 0px;
  }
}

/* Left Side Menu */
.croftz-menubar-left {
  position: fixed;
  height: calc(100% - 20px);
  width: 90px;
  margin-top: 10px;
  margin-left: 10px;
}

#menubar_left a p {
  margin: 6px 0 0 0;
}

.left-menu-cont {
  padding: 15px 10px 0 10px;
}

#menubar_left .left-menu-cont a {
  padding: 8px 0;
  margin-bottom: 8px;
}

#menubar_left .left-menu-cont hr {
  margin: 10px 0;
}

#menubar_left {
  z-index: 10;
  position: relative;
}

.croftz-menu-item {
  box-shadow: inset 0 0 0 0 #5674a0;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  border-radius: 10px;
  padding: 5px;
}

@media (prefers-color-scheme: dark){
  .croftz-menu-item {
  box-shadow: inset 0 0 0 0 #354660;
  }
}

.croftz-menu-item:hover {
  box-shadow: inset 100px 0 0 0 #5674a0;
  color: white;
  border-radius: 10px;
}

@media (prefers-color-scheme: dark){
  .croftz-menu-item:hover{
  box-shadow: inset 100px 0 0 0 #354660;
  }
}

/* Horizontal Scrolling for breadcrumb bar */
div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  text-align: center;
  padding: 14px;
}

div.scrollmenu a:hover {
  background-color: #5674a0;
  border-radius: 14px;
  color: white;
  border-radius: 14px;
  transition: all 0.3s ease-in;
}

.croftz-leftmenu-footer {
  position: relative;
  width: 100%;
}
@media (orientation:landscape) and (min-height: 810px) {


/* Affix elements to bottom of Left menu */
.croftz-leftmenu-footer {
  position: absolute;
  bottom: 10px;
  width: calc(100% - 20px);
  padding-top: 15px;
  }
}

/* Affix elements to bottom of Right menu */
.croftz-rightmenu-footer {
  position: absolute;
  bottom: 10px;
}

@media (orientation:landscape) and (max-height: 768px) {
  .croftz-rightmenu-footer {
  position: relative;
  }
}

@media (orientation:portrait) and (max-height: 896px) {
  .croftz-rightmenu-footer {
  position: relative;
  }
}

.right-menu-overlay {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #00000070;
  display: none;
}

.croftz-menu-close {
  box-shadow: inset 0 0 0 0 #c30000;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
  border-radius: 10px;
  padding: 5px;
}

@media (prefers-color-scheme: dark){
  .croftz-menu-close {
  box-shadow: inset 0 0 0 0 #780000;
  }
}

.croftz-menu-close:hover {
  box-shadow: inset 100px 0 0 0 #c30000;
  color: white;
  border-radius: 10px;
}

@media (prefers-color-scheme: dark){
  .croftz-menu-close:hover {
  box-shadow: inset 100px 0 0 0 #780000;
  }
}


/* Top Level Divider to add side padding on large screens */
.croftz-spacer-top {
  padding-top: 80px;
}

@media (max-width: 992px) {
  .croftz-spacer-left {
  display: none;
  }
}

/* Column Anchor for sticky column 1*/
.croftz-column-anchor {
  top: 68px;
}

@media (min-width: 600px) {
  .croftz-column-anchor {
    position: -webkit-sticky;
    position: sticky;
    top: 68px;
  }
}


/* dropdown card icon transition hide-body-card */
.croftz-main-card .croftz-first-box .croftz-icon-rotate {
  transform: translateY(0);
  transition: 0.3s transform;
}
.croftz-main-card .croftz-first-box:hover .croftz-icon-rotate {
  transform: translateY(5px);
}
.croftz-main-card .croftz-first-box:hover .croftz-hover-icon-blue-lt {
  background-color: #a6bde6 !important;
}
.croftz-main-card:has(.show-body) .croftz-first-box .croftz-icon-rotate {
  transform: rotate(180deg);
}
.croftz-dropdown-card {
  transition: 0.75s;
}
.croftz-dropdown-card .croftz-hide-card-body {
  display: none;
}
.croftz-dropdown-card.active .croftz-hide-card-body {
  display: block;
}

/** Croftz Colours Buttons & Blocks **/
.croftz-hover-opacty:hover {
  opacity: 0.75;
  transition: 0.3s;
}
/* Croftz-grey */
.croftz-grey-lt,.croftz-hover-grey-lt:hover {
  background-color:#ccc !important;
  color:#000 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-grey-lt,.croftz-hover-grey-lt:hover {
    color: #fff !important;
    background-color: #414141 !important
  }
}
.croftz-grey,.croftz-hover-grey:hover {
  background-color:#414141 !important;
  color:#fff !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-grey-blue,.croftz-hover-grey:hover {
    color: #fff !important;
    background-color: #313131 !important
  }
}
.croftz-grey-dk,.croftz-hover-grey-dk:hover {
  background-color:#313131 !important;
  color:white !important;
}

/* Croftz Blue */
.croftz-blue-xlt,.croftz-hover-blue-xlt:hover {
  color: #00204b !important;
  background-color: #dcdbf0 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-blue-xlt,.croftz-hover-blue-xlt:hover
  {
    color: #fff !important;
    background-color: #171a20 !important;
  }
}

.croftz-blue-lt,.croftz-hover-blue-lt:hover {
  color: #00204b !important;
  background-color: #a6bde6 !important;}
@media (prefers-color-scheme: dark) {
  .croftz-blue-lt,.croftz-hover-blue-lt:hover
  {
    color: #fff !important;
    background-color: #5674a0 !important
  }
}
.croftz-blue,.croftz-hover-blue:hover {
  color: #fff !important;
  background-color: #5674a0 !important;}
@media (prefers-color-scheme: dark) {
  .croftz-blue,.croftz-hover-blue:hover
  {
    color: #fff !important;
    background-color: #354660 !important
  }
}
.croftz-blue-dk,.croftz-hover-blue-dk:hover {
  color: #fff !important;
  background-color: #354660 !important
}
.croftz-border-blue,.croftz-border-blue:hover {
  border-color: #5674a0;
  border-style: solid;
  border-width: 1px;
}
@media (prefers-color-scheme: dark){
  .croftz-border-blue,.croftz-border-blue:hover {
    color: #fff !important;
    border-color: #354660 !important
  }
}

/* Croftz Green */
.croftz-green-lt,.croftz-hover-green-lt:hover {
  color: #354320 !important;
  background-color: #b4dc70 !important;}
@media (prefers-color-scheme: dark){
  .croftz-green-lt,.croftz-hover-green-lt:hover
  {
    color: #fff !important;
    background-color: #84a350 !important
  }
}
.croftz-green,.croftz-hover-green:hover{
  color: #fff !important;
  background-color: #84a350 !important;}
@media (prefers-color-scheme: dark){
  .croftz-green,.croftz-hover-green:hover
  {
    color: #fff !important;
    background-color: #6c8442 !important;
  }
}
.croftz-green-dk,.croftz-hover-green-dk:hover {
  color: #fff !important;
  background-color: #6c8442 !important;
}
.croftz-border-green,.croftz-border-green:hover {
  border-color: #b4dc70;
  border-style: solid;
  border-width: 1px;
}
@media (prefers-color-scheme: dark){
  .croftz-border-green,.croftz-border-green:hover {
    color: #fff !important;
    border-color: #6c8442 !important;
  }
}

/* Croftz Gold */
.croftz-gold-lt,.croftz-hover-gold-lt:hover {
  color: #7c5100 !important;
  background-color: #ffdea0 !important;
  }
@media (prefers-color-scheme: dark){
  .croftz-gold-lt,.croftz-hover-gold-lt:hover {
    color: #7c5100 !important;
    background-color: #ffa600 !important;
  }
}
.croftz-gold,.croftz-hover-gold:hover {
  color: #7c5100 !important;
  background-color: #ffa600 !important;
}
@media (prefers-color-scheme: dark){
  .croftz-gold,.croftz-hover-gold:hover {
    color: #fff !important;
    background-color: #b87700 !important;
  }
}
.croftz-gold-dk,.croftz-hover-gold-dk:hover {
  color: #fff !important;
  background-color: #b87700 !important;
}
.croftz-border-gold,.croftz-border-gold:hover {
  border-color: #ffa600;
  border-style: solid;
  border-width: 1px;
}
@media (prefers-color-scheme: dark){
  .croftz-border-gold,.croftz-border-gold:hover {
    color: #fff !important;
    border-color: #b87700 !important;
  }
}

/* Croftz Red */
.croftz-red-lt,.croftz-hover-red-lt:hover {
  color: #fff !important;
  background-color: #fe7581 !important;
}
@media (prefers-color-scheme: dark){
  .croftz-red-lt,.croftz-hover-red-lt:hover {
    color: #fff !important;
    background-color: #c30000 !important;
  }
}
.croftz-red,.croftz-hover-red:hover {
  color: #fff !important;
  background-color: #c30000 !important;
}
@media (prefers-color-scheme: dark){
  .croftz-red,.croftz-hover-red:hover {
    color: #fff !important;
    background-color: #780000 !important;
  }
}
.croftz-red-dk,.croftz-hover-red-dk:hover {
  color: #fff !important;
  background-color: #780000 !important;
}
/* Croftz purple */
.croftz-purple-lt,.croftz-hover-red-lt:hover {
  color: #fff !important;
  background-color: #ce5ff9 !important;
}
@media (prefers-color-scheme: dark){
  .croftz-purple-lt,.croftz-hover-purple-lt:hover {
    color: #fff !important;
    background-color: #9100ca !important;
  }
}
.croftz-purple,.croftz-hover-purple:hover {
  color: #fff !important;
  background-color: #9100ca !important;
}
@media (prefers-color-scheme: dark){
  .croftz-purple,.croftz-hover-purple:hover {
    color: #fff !important;
    background-color: #5b007e !important;
  }
}
.croftz-purple-dk,.croftz-hover-purple-dk:hover {
  color: #fff !important;
  background-color: #5b007e !important;
}
.croftz-border-red,.croftz-border-red:hover {
  border-color: #c30000;
  border-style: solid;
  border-width: 1px;
}
@media (prefers-color-scheme: dark) {
  .croftz-border-red,.croftz-border-red:hover {
    color: #fff !important;
    border-color: #780000 !important;
  }
}

/* Croftz Pale Yellow */
.croftz-pale-yellow,.croftz-hover-pale-yellow:hover {
  color:#000 !important;
  background-color:#fcf8cd !important;
}
@media (prefers-color-scheme: dark){
  .croftz-pale-yellow,.croftz-hover-pale-yellow:hover {
    color:#000 !important;
    -webkit-text-fill-color: #000;
    background-color:#fff2aa !important;
}
}

/* Croftz Pale Blue */
.croftz-pale-blue,.croftz-hover-pale-blue:hover {
  color:#000 !important;
  background-color:#cbdbf0 !important;
}
@media (prefers-color-scheme: dark){
  .croftz-pale-blue,.croftz-hover-pale-blue:hover {
    color:#000 !important;
    background-color: #99b0d0 !important;
  }
}

/** Croftz Text Styles **/
.croftz-text-blue,.croftz-text-hover-blue:hover {
  color: #5674a0 !important;
}
.croftz-text-blue-dk,.croftz-text-hover-blue-dk:hover {
  color: #00204b !important;
}
.croftz-text-green,.croftz-text-hover-green:hover {
  color: #84a350 !important;
}
.croftz-text-green-dk,.croftz-text-hover-green-dk:hover {
  color: #6c8442 !important;
}
.croftz-text-gold,.croftz-text-hover-gold:hover {
  color: #ffa600 !important;
}
.croftz-text-gold-dk,.croftz-text-hover-gold-dk:hover {
  color: #b87700 !important;
}
.croftz-text-red,.croftz-text-hover-red:hover {
  color: #c30000 !important;
}
.croftz-text-red-dk,.croftz-text-hover-red-dk:hover {
  color: #780000 !important;
}
.croftz-text-purple,.croftz-text-hover-purple:hover {
  color: #ce5ff9 !important;
}
.croftz-text-purple-dk,.croftz-text-hover-purple-dk:hover {
  color: #5b007e !important;
}
::placeholder {
  font-style: italic;
}
.required {
  font-style: italic;font-size: x-small;color: #ffa600;float: right; margin-right: 6px;
}
.disabled {
  font-style: italic; font-size: x-small;color: #fe7581;float: right; margin-right: 6px;
}
.optional {
  font-style: italic; font-size: x-small;color: #616161;float: right; margin-right: 6px;
}

/* Gradient Colors */
.croftz-grad-blue {
  background-image: linear-gradient(to bottom right, #a6bde6, #5674a0);
}
.croftz-grad-gold {
  background-image: linear-gradient(to bottom right, #f8ddaa, #ffa600);
}
.croftz-grad-red {
  background-image: linear-gradient(to bottom right, #ffd8d8, #cc0000);
}
.croftz-grad-green {
  background-image: linear-gradient(to bottom right, #D8FFD8, #5B8E00);
}
.croftz-grad-grey {
  background-image: linear-gradient(to bottom right, #eee, #999);
}
@media (prefers-color-scheme: dark) {
  .croftz-grad-blue {
    background-image: linear-gradient(to bottom right, #5674a0, #00204b);
  }
  .croftz-grad-gold {
    background-image: linear-gradient(to bottom right, #ffa600, #885900);
  }
  .croftz-grad-red {
    background-image: linear-gradient(to bottom right, #c54848, #700707);
  }
  .croftz-grad-green {
    background-image: linear-gradient(to bottom right, #6dad00, #375700);
  }
  .croftz-grad-grey {
    background-image: linear-gradient(to bottom right, #ccc, #777);
  }
}

.input-action-container {
  position: relative;
  display: inline-block;
}
.input-action-button {
  position: absolute;
  top: 52%;
  right: 6px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}

/* croftz-status - background colors / dark mode */
.croftz-status-lt {
  border-radius:10px;
  padding:6px;
  background-color:#ccc !important;
  color:#000 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-lt {
    color: #fff !important;
    background-color: #414141 !important;
  }
}
.croftz-status {
  border-radius:10px;
  padding:6px;
  background-color:#414141 !important;
  color:#fff !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-blue {
    color: #fff !important;
    background-color: #616161 !important;
  }
}
.croftz-status-dk {
  border-radius:10px;
  padding:6px;
  background-color:#313131 !important;
  color:white !important;
}

.croftz-status-blue-lt {
  border-radius:10px;
  padding:6px;
  background-color:#a6bde6 !important;
  color:#00204b !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-blue-lt {
    color: #fff !important;
    background-color: #5674a0 !important;
  }
}
.croftz-status-blue {
  border-radius:10px;
  padding:6px;
  background-color:#5674a0 !important;
  color:white !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-blue {
    color: #fff !important;
    background-color: #354660 !important;
  }
}
.croftz-status-blue-dk {
  border-radius:10px;
  padding:6px;
  background-color:#354660 !important;
  color:white !important;
}

.croftz-status-red-lt {
  border-radius:10px;
  padding:6px;
  background-color:#fe7581 !important;
  color:#fff !important;
}
.croftz-status-purple-lt {
  border-radius:10px;
  padding:6px;
  background-color:#ce5ff9 !important;
  color:#fff !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-red-lt {
  color: #fff !important;
  background-color: #c30000 !important;
  }
}
.croftz-status-red {
  border-radius:10px;
  padding:6px;
  background-color:#c30000 !important;
  color:white !important;
}
.croftz-status-purple {
  border-radius:10px;
  padding:6px;
  background-color:#9100ca !important;
  color:white !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-red {
    color: #fff !important;
    background-color: #780000 !important;
  }
}
.croftz-status-red-dk {
  border-radius:10px;
  padding:6px;
  background-color:#780000 !important;
  color:white !important;
}

.croftz-status-purple-dk {
  border-radius:10px;
  padding:6px;
  background-color:#5b007e !important;
  color:white !important;
}
.croftz-status-gold-lt {
  border-radius:10px;
  padding:6px;
  background-color:#ffdea0 !important;
  color:#7c5100 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-gold-lt {
    color: #7c5100 !important;
    background-color: #ffa600 !important;
  }
}
.croftz-status-gold {
  border-radius:10px;
  padding:6px;
  color: #7c5100 !important;
  background-color: #ffa600 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-gold {
    color: #fff !important;
    background-color: #b87700 !important;
  }
}
.croftz-status-gold-dk {
  border-radius:10px;
  padding:6px;
  color: #fff !important;
  background-color: #b87700 !important;
}

.croftz-status-green-lt {
  border-radius:10px;
  padding:6px;
  color: #354320 !important;
  background-color: #b4dc70 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-green-lt {
    color: #fff !important;
    background-color: #84a350 !important;
  }
}
.croftz-status-green {
  border-radius:10px;
  padding:6px;
  color: #fff !important;
  background-color: #84a350 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-status-green {
    color: #fff !important;
    background-color: #6c8442 !important;
  }
}
.croftz-status-green-dk {
  border-radius:10px;
  padding:6px;
  color: #fff !important;
  background-color: #6c8442 !important;
}

/* ul- list selection */
.selection-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.selection-list li a {
  border: 1px solid #ddd;
  border-radius: 12px;
  margin-top: 6px;
  /* Prevent double borders */
  padding: 12px;
  text-decoration: none;
  display: block }

  .croftz-no-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.new-modal .col-left {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
}
.new-modal .col-right {
  display: block;
  margin-bottom: 25px;
}
.new-modal .d-flex {
  display: block !important;
}
.new-modal h3 {
  text-align: center;
}
.new-modal .modal-footer {
  text-align: center;
  justify-content: center;
  display: flex;
}

.croftz-slider{
  width: 100%;
  cursor: pointer;
  accent-color: #5674a0;
}

.user-profile-modal {
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  background-color: #000000cf;
}
.user-profile-modal .modal-box {
  width: 100%;
  max-width: 450px;
  margin: auto;
  margin-top: calc(50vh - 400px);
}
.profile-photo-div{
  position: relative;
  margin: 50px auto 10px auto;
  width: 250px;
  height: auto;
  overflow: hidden;
  -webkit-transition: ease .3s;
  -o-transition: ease .3s;
  transition: ease .3s;
}
.profile-img-div{
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.profile-img{
  width: 100%;
}
#img_profile{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: move;
}
#change_photo{
  display: none;
}
#canvas_cropped_photo{
  position: fixed;
  top: -2000px;
  left: -2000px;
  z-index: -1;
}
.profile-img-confirm{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
#img_profile {
  position: relative;
  width: 300px;
  height: 300px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.new-image-crop img {
  width: 100%;
  height: auto;
}
.file-upload-modal {
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  background-color: #000000cf;
}
.file-upload-modal .modal-box {
  width: 100%;
  max-width: 450px;
  margin: auto;
  margin-top: calc(50vh - 400px);
}
.file-upload-div{
  position: relative;
  margin: 25px auto 25px auto;
  width: 350px;
  height: auto;
  overflow: hidden;
  -webkit-transition: ease .3s;
  -o-transition: ease .3s;
  transition: ease .3s;
}

/* Range Slider */
.slidecontainer {
  width: 100%;
  cursor: pointer;
  accent-color: #5674a0;
}

.croftz-rest{
  overflow:auto
}
.croftz-stretch {
  margin-left:-16px;
  margin-right:-16px;
}

.croftz-loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #ccc;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
   /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
  -webkit-transform: rotate(0deg);
  } 100% {
  -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
  transform: rotate(0deg);
  } 100% {
  transform: rotate(360deg);
  }
}

.disabled-column {
  pointer-events: none;
  opacity: 0.6;
}
.disabled-element {
  pointer-events: none;
  opacity: 0.6;
}

/* input no arrows */
/* Chrome, Safari, Edge, Opera */
.input-number-clean::-webkit-outer-spin-button,
.input-number-clean::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.input-number-clean[type=number] {
  -moz-appearance: textfield;
}

@media (prefers-color-scheme: dark) {
  .input-number-clean {
    background-color: #222 !important;
  }
}

.modal-text {
  text-align: left;
  margin-left: 86px;
  max-width: 82%;
}
@media screen and (max-width: 820px) {
  .modal-text {
    text-align: left;
    margin-left: 0px;
    max-width: 100%;
  }
}

/* Default style for the .mobile-modal class */
.modal-body {
  display: flex;
  align-items: center;
  text-align: center;
}
/* Media query for mobile screens (adjust the max-width as needed) */
@media screen and (max-width: 767px) {
  .modal-body {
    display: block;
    /* Change the display property for mobile screens */
    align-items: center;
  }
}

.croftz-note-input{
  padding:8px;
  display:block;
  border:none;
  border-bottom:1px solid #ccc;
  width:100%;
}

.form-padding {
  margin-left: 0%;
  margin-right: 0%;
}
@media (min-width: 1186px) {
  .form-padding {
    margin-left: 8%;
    margin-right: 8%;
  }
}
@media (min-width: 1886px) {
  .form-padding {
    margin-left: 16%;
    margin-right: 16%;
  }
}

.black-text {
  color: #000;
}

input[type="date"] {
  position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent;
  background: transparent;
  cursor: pointer !important;
}
input[type="time"] {
  position: relative;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent;
  background: transparent;
  cursor: pointer !important;
}

/* TIMELINE STYLING */
/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: #a6bde6;
  top: 0;
  bottom: 0;
  left: 2%;
  margin-left: 0px;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  .timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: #5674a0;
    top: 0;
    bottom: 0;
    left: 2%;
    margin-left: 0px;
    z-index: 0;
  }
}

/* Container around content */
.container {
  padding: 10px 10px 10px 40px;
  position: relative;
  background-color: inherit;
  width: auto;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: white;
  border: 3px solid #a6bde6;
  top: 24px;
  border-radius: 50%;
  z-index: 1;
}
@media (prefers-color-scheme: dark) {
  .container::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #222;
    border: 3px solid #5674a0;
    top: 24px;
    border-radius: 50%;
    z-index: 1;
  }
}

/* Place the container to the right */
.right {
  left: 2%;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 0;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}
@media (prefers-color-scheme: dark) {
  .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 0;
    left: 30px;
    border: medium solid #2d2d2d;
    border-width: 10px 10px 10px 0;
    border-color: transparent #2d2d2d transparent transparent;
  }
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -7px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
    left: 19px;
  }
  /* Full-width containers */
  .container
  {
    width: auto;
    padding-left: 50px;
    padding-right: 3px;
  }
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 40px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  @media (prefers-color-scheme: dark) {
    .container::before {
      left: 40px;
      border: medium solid #2d2d2d;
      border-width: 10px 10px 10px 0;
      border-color: transparent #2d2d2d transparent transparent;
    }
  }
  /* Make sure all circles are at the same spot */
  .left::after, .right::after {left: 12px;}
  /* Make all right containers behave like the left ones */
  .right {left: 0%;}
}

/* Hierarchy Tree Styling START */
.tree ul {
  padding-top: 20px;
  position: relative;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li .all-tree {
  float: left;
}

/* using ::before and ::after to draw the connectors */

.tree li::before, .tree li::after{
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after{
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}

/* remove left-right connectors from elements without any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}

/* remove space from the top of single children */
.tree li:only-child{ padding-top: 0;}

/* remove left connector from first child and
right connector from last child */
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
/* adding back the vertical connector to the last nodes */
.tree li:last-child::before{
  border-right: 1px solid #ccc;
  border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
  -moz-border-radius: 0 6px 0 0;
}
.tree li:first-child::after{
  border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
  -moz-border-radius: 6px 0 0 0;
}

/* add downward connectors from parents */
.tree ul ul::before{
  content: '';
  position: absolute; top: 0; left: 50%;
  border-left: 1px solid #ccc;
  width: 0; height: 20px;
}

.tree li a{
  border: 1px solid #ccc;
  padding: 5px 5px 5px 10px;
  text-decoration: none;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  text-align: left;
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 44px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tree ul li div:hover a, .tree ul li div:hover ~ ul li a {
  background: #c8e4f8;
  border-radius: 6px;
}

@media (prefers-color-scheme: dark){
  .tree ul li div:hover a, .tree ul li div:hover ~ ul li a {
    background: #5674a0;
    border-radius: 6px;
  }
}

.tree ul li>div {
  display: inline-flex;
}

.tree ul li .team {
  display: inline-block;
}

.tree ul li .team span:last-child {
  font-size: 16px;
  font-weight: bold;
}

.tree ul li .entity::before, .tree ul li .Entity::before, .tree ul li .Individual::before {
  background-size: 0%;
  border: 0px;
  width: 0px;
  height: 0px;
}

.tree ul li a div span:first-child {
  font-weight: bold;
}

.tree ul li a div span {
  display: block;
}

.tree ul li a span {
  display: block;
}

.tree ul li a div {
  margin-right: 10px;
}

.full-screen-active .full-screen-btn, .full-screen-active {
  display: none;
}

.full-screen-active .main-container-zoom {
  min-height: calc(100vh - 180px);
}

.tree-image {
  margin: 0px 10px 0px 0px;
  opacity: 1;
  max-width: 36px;
  max-height: 36px;
  transition: 0.5s ease;
  backface-visibility: hidden;
}
/* Hierarchy Tree Styling END */


/* Common styles for all toast messages */
.toast {
  visibility: hidden;
  min-width: 250px;
  max-width: 390px;
  border-radius: 14px;
  padding: 12px;
  position: fixed;
  z-index: 9999; /* Ensure it's above all content */
  top: 80px; /* Adjust this value for vertical positioning */
  right: 20px; /* Adjust this value for horizontal positioning */
  font-size: 14px;
  animation: fadeinout 0.7s forwards;
}

/* Different toast types */
.toast_info {
  background-color: #a6bde6;
  color: #00204b;
}
@media (prefers-color-scheme: dark) {
  .toast_info {
    background-color: #5674a0 !important;
    color: #fff !important;
  }
}

.toast_success {
  background-color: #b4dc70;
  color: #354320;
}
@media (prefers-color-scheme: dark) {
  .toast_success {
    background-color: #84a350 !important;
    color: #fff !important;
  }
}

.toast_warning {
  background-color: #ffdea0;
  color: #b77700;
}
@media (prefers-color-scheme: dark) {
  .toast_warning {
    background-color: #ffa600 !important;
    color: #7c5100 !important;
  }
}

.toast_danger {
  background-color: #ffd8d8;
  color: #9e0909;
}
@media (prefers-color-scheme: dark) {
  .toast_danger {
    background-color: #c30000 !important;
    color: #fff !important;
  }
}

.toast_wait {
  background-color: #ccc;
  color: #414141;
}
@media (prefers-color-scheme: dark) {
  .toast_wait {
    background-color: #909090 !important;
    color: #414141 !important;
  }
}

/* ... Repeat the same structure for other toast types */

/* Animation */
@keyframes fadeinout {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  90% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
  }
}

.toast.show {
  visibility: visible;
  animation: fadeinout 4.6s forwards;
}

@keyframes shake-element {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake-element {
  animation: shake-element 0.8s ease-in-out;
}

/* Profile Avatar START */

.avatar-container {
  position: relative;
  padding-top: 4px;
  cursor: pointer;
}

.avatar-image {
  opacity: 1;
  display: block;
  max-width: 65px;
  max-height: 65px;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

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

.avatar-container:hover .avatar-image {
  opacity: 0.3;
}

.avatar-container:hover .avatar-middle {
  opacity: 1;
}

.avatar-text {
  color: black;
  font-size: 16px;
  padding: 16px 32px;
}
.avatar-tooltip {
  position: relative;
  display: inline-block;
}

.avatar-tooltip .avatar-tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

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

/* Profile Avatar END */


.w3-modal {
  overscroll-behavior: contain;
}

@media print {
  .exact-colour-on-print * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact;
    height: 100%;
    }
  .hidden-on-print {
      display: none !important;
  }
  .display-on-print {
    display: block !important;
  }
  .pagebreak { page-break-before: always; } /* page-break-after works, as well */
  .orientation {
    display:inline-flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 4px;
  }
  #column2.w3-half,
  #column2.exact-colour-on-print {
    width: 100%;
  }

  #location_information .on-print-full-width {
    width: 100% !important;
    padding-bottom: 50px;
  }

  #device_check .w3-quarter,
  #device_check .w3-threequarter {
    width: 49% !important;
  }

  #controlling_parties .adjust-height {
    padding-bottom: 40px;;
  }

  #aml_screenings_content .w3-light-grey {
    background-color: transparent !important;
  }

  .instacheck-iframe-adjustments {
    margin-bottom: -150px !important;
    margin-top: -80px !important;
    scroll-behavior: none !important;
    overflow: hidden !important;
  }
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  width: auto;
  top: 110%;
  left: 50%;
  margin-left: -60px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgb(50, 50, 50) transparent;
}

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

.tooltiptop .tooltiptoptext {
  visibility: hidden;
  width: auto;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 65%;
  left: 50%;
  margin-left: -60px;
}

.tooltiptop .tooltiptoptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltiptop:hover .tooltiptoptext {
  visibility: visible;
}

/* Document Upload styling */
.upload-drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  margin: 0% 10% 0% 10%;
  padding: 20px;
  width: 80%;
}
.drop-area-highlight {
  border-color: purple;
}
#div_upload_gallery {
  max-height: 650px;
  overflow: scroll;
  overflow-x: hidden;
}
#div_upload_gallery img {
  max-width: 150px;
  max-height: 150px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: middle;
}

.dropshadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.dropshadow:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.enhanced-dropshadow {
  box-shadow: 0 4px 6px rgba(255, 166, 0, 0.8);
  transition: box-shadow 0.3s ease;
}

.enhanced-dropshadow:hover {
  box-shadow: 0 8px 12px rgba(255, 166, 0, 0.8);
}

.button-3d {
  display: inline-block;
  padding: 10px 30px;
  color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.button-3d:active {
  transform: translateY(4px); /* Button pressed effect when clicked */
  box-shadow: none; /* Remove box shadow when button is pressed */
}

.negative-3d {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 16px;
  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
  border-top: 2px solid rgba(255, 255, 255, 0); /* top border */
  border-left: 2px solid rgba(255, 255, 255, 0); /* left border */
  border-bottom: 2px solid rgba(0, 0, 0, 0); /* bottom border */
  border-right: 2px solid rgba(0, 0, 0, 0); /* right border */
}

.negative-3d:active {
  transform: translateY(3px); /* Button pressed effect when clicked, move downwards */
  border-top-color: rgba(120, 120, 120, 0.8);
  border-left-color: rgba(120, 120, 120, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.9);
  border-right-color: rgba(255, 255, 255, 0.9);
}

@media (prefers-color-scheme: dark) {
  .negative-3d:active {
    transform: translateY(3px); /* Button pressed effect when clicked, move downwards */
    border-top-color: rgba(0, 0, 0, 0.8);
    border-left-color: rgba(0, 0, 0, 0.8);
    border-bottom-color: rgba(180, 180, 180, 0.7);
    border-right-color: rgba(180, 180, 180, 0.7);
  }
}


/* Croftz Blue */
.croftz-blue-lt-3d.button-3d {
  color: #00204b !important;
  background-color: #a6bde6 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-blue-lt-3d.button-3d {
    color: #fff !important;
    background-color: #5674a0 !important;
  }
}
.croftz-hover-blue-lt-3d.button-3d:hover {
  box-shadow: 6px 6px 12px #7c96c6, -6px -6px 12px #dbe4ff;
}

/* Croftz Green */
.croftz-green-lt-3d.button-3d {
  color: #354320 !important;
  background-color: #b4dc70 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-green-lt-3d.button-3d {
    color: #fff !important;
    background-color: #84a350 !important;
  }
}
.croftz-hover-green-lt-3d.button-3d:hover {
  box-shadow: 6px 6px 12px #7f9964, -6px -6px 12px #c1e18e;
}

/* Croftz Gold */
.croftz-gold-lt-3d.button-3d {
  color: #7c5100 !important;
  background-color: #ffdea0 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-gold-lt-3d.button-3d {
    color: #7c5100 !important;
    background-color: #ffa600 !important;
  }
}
.croftz-hover-gold-lt-3d.button-3d:hover {
  box-shadow: 6px 6px 12px #ccac5f, -6px -6px 12px #ffe794;
}

/* Croftz Red */
.croftz-red-lt-3d.button-3d {
  color: #fff !important;
  background-color: #fe7581 !important;
}
@media (prefers-color-scheme: dark) {
  .croftz-red-lt-3d.button-3d {
    color: #fff !important;
    background-color: #c30000 !important;
  }
}
.croftz-hover-red-lt-3d.button-3d:hover {
  box-shadow: 6px 6px 12px #b1525e, -6px -6px 12px #ff9d9d;
}

.c3-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(407px, 0fr));
  gap: 10px;
}

@media (max-width: 600px) {
  .c3-cards {
    grid-template-columns: repeat(auto-fit, minmax(300px, 0fr));
  }
}

.spin-animation {
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* minimal custom – keep close to w3 style */
.network-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 800px;
  /* margin: 0 auto; */
  background: white;
  border-radius: 16px;
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
  overflow: hidden;
  user-select: none;
  font-family: 'Segoe UI', Roboto, sans-serif;
  z-index: 0;
}
.network-node {
  position: absolute;
  padding: 10px 10px;
  background: white;
  border-radius: 40px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border: 1px solid #dde1e6;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e293b;
  cursor: grab;
  transition: box-shadow 0.15s, border 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  background: #ffffff;
  letter-spacing: 0.3px;
  max-height: 55px;
}
.node-text {
  position: absolute;
  padding: 10px 10px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: grab;
  transition: box-shadow 0.15s, border 0.15s;
  white-space: break-spaces;
  display: flex;
  align-items: center;
  text-align: center;
  gap: 6px;
  z-index: 10;
  letter-spacing: 0.3px;
  top: 50px;
  left: -72px;
  width: 200px;
}
.network-node:active {
  cursor: grabbing;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border-color: #7c8ba0;
}
.network-node .badge {
  font-size: 0.6rem;
  background: #d1d9e6;
  padding: 2px 8px;
  border-radius: 30px;
  color: #1e293b;
  font-weight: 400;
  letter-spacing: 0.2px;
}
/* hub node special styling */
.network-node.hub {
  background: #e8f0fe;
  border-color: #4a7db5;
  box-shadow: 0 4px 14px rgba(0, 80, 200, 0.15);
  font-weight: 600;
}
.network-node.hub .badge {
  background: #c5d9f0;
}
/* modal */
.c3-modal-content {
  border-radius: 20px;
  max-width: 420px;
  padding: 0;
}
.modal-header {
  background: #f1f5f9;
  padding: 16px 24px;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid #e2e8f0;
}
.detail-label {
  font-weight: 500;
  color: #475569;
}
.detail-value {
  color: #0f172a;
  font-weight: 500;
}