/*
--phoenix-primary-rgb: 56, 116, 255;--phoenix-secondary-rgb: 49, 55, 74;--phoenix-success-rgb: 37, 176, 3;--phoenix-info-rgb: 0, 151, 235;--phoenix-warning-rgb: 229, 120, 11;--phoenix-danger-rgb: 237, 32, 0;--phoenix-light-rgb: 239, 242, 246;--phoenix-dark-rgb: 20, 24, 36;--phoenix-primary-soft-rgb: 245, 248, 255;--phoenix-primary-100-rgb: 229, 237, 255;--phoenix-primary-200-rgb: 173, 197, 255;--phoenix-primary-300-rgb: 133, 169, 255;--phoenix-primary-500-rgb: 0, 77, 255;--phoenix-primary-600-rgb: 0, 60, 199;--phoenix-warning-soft-rgb: 255, 246, 224;--phoenix-warning-100-rgb: 255, 239, 202;--phoenix-warning-200-rgb: 255, 230, 173;--phoenix-warning-300-rgb: 255, 204, 133;--phoenix-warning-500-rgb: 214, 112, 10;--phoenix-warning-600-rgb: 188, 56, 3;--phoenix-danger-300-rgb: 244, 130, 112;--phoenix-danger-100-rgb: 255, 224, 219;--phoenix-danger-200-rgb: 250, 188, 179;--phoenix-danger-500-rgb: 204, 27, 0;--phoenix-danger-600-rgb: 184, 24, 0;--phoenix-success-100-rgb: 217, 251, 208;--phoenix-success-200-rgb: 190, 232, 180;--phoenix-success-300-rgb: 144, 214, 127;--phoenix-success-500-rgb: 35, 137, 11;--phoenix-success-600-rgb: 28, 108, 9;--phoenix-info-100-rgb: 199, 235, 255;--phoenix-info-200-rgb: 150, 217, 255;--phoenix-info-300-rgb: 96, 198, 255;--phoenix-info-500-rgb: 0, 128, 199;--phoenix-info-600-rgb: 0, 85, 133;--phoenix-white-rgb: 255, 255, 255;--phoenix-black-rgb: 0, 0, 0;--phoenix-white: #fff;--phoenix-black: #000000;--phoenix-white-rgb: 255, 255, 255;--phoenix-black-rgb: 0, 0, 0;--phoenix-body-color-rgb: 49, 55, 74;--phoenix-body-bg-rgb: 245, 247, 250;
*/

.ag-header {

  /*background: linear-gradient(to right, #3B71CA, #3aa3ff);*/
  background: linear-gradient(to right, rgba(var(--phoenix-secondary-rgb), 0.1), rgba(var(--phoenix-light-rgb), 0.1));
  /*background-color: #FFFFFF !important;*/
  
  border-style: solid;
  border-width: 0px;
  border: none;
  height: 100vh;
  margin: 0;
  background-size: 200% 200%;
  animation: gradientAnimation 10s ease infinite;
  width: 100%;
}

/* Keyframes for gradient animation */
@keyframes gradientAnimation {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

@keyframes gradientAnimation2 {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 0%;
  }
}





/* Custom CSS to make header text bold */
.ag-header-cell-label {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

/* Custom CSS to change font family and size */
.ag-header-cell-label, .ag-cell {
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  cursor: pointer;
}

/* Custom CSS to make the first column bold */
.bold-cell {
  font-weight: 600;
  opacity: 0.55;
}

.ag-theme-quartz {
  /*background-color: #FFFFFF;*/
  background: none;
  background-color: none;
  border-style: none;
  border-width: 0px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  border: none;
}

.ag-row {
  background: #FFFFFF;
  background-color: #FFFFFF;
}

.ag-row:hover {
  background: #f1f1f1;
  background-color: #f1f1f1;
}

.action-buttons {
  display: flex;
  gap: 5px;
}

.action-button {
  padding: 2px 5px;
  cursor: pointer;
  opacity: 0.75;
}

.action-button:hover {
  opacity: 1;
}

/* Custom tooltip styling */
.ag-tooltip {
  /*font-size: 16px;
  padding: 8px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;*/
}


/* first page / default.html */
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.99px) {

  .header-subheader-presentation {
    height: 330px!important;
    min-height: 330px!important;
    max-height: 330px!important;
    margin-top: -40px;
  }

  .d-sm-none-2 {
    display: none;
  }

  .space-adjustment {
    --max-height: 200px; /* Maximum height of the element */
    --factor: calc(100vh / 100); /* Inverse factor based on viewport height */
    height: calc(1vw + (var(--max-height) - var(--factor) * 25));
  }

  .logo-adjustment {
    margin-top: -10px;
  }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.99px) {
  .header-subheader-presentation {
    height: 204px!important;
    /*min-height: 300px!important;
    max-height: 300px!important;*/
  }
  .d-sm-none-2 {
    display: block;
  }

  .logo-adjustment {
    margin-top: -6px;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .header-subheader-presentation {
    height: 204px!important;
    /*min-height: 200px!important;
    max-height: 200px!important;*/
  }
  .d-sm-none-2 {
    display: block;
  }

  .space-adjustment {
    height: 20px;
  }

  .logo-adjustment {
    margin-top: -6px;
  }

}
/* first page / default.html */

.profile-picture-topbar {
  opacity: 1;
};

.profile-picture-topbar:hover {
  opacity: 1!important;
};

.action-buttons-checkboxes {
  background-color: rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.7);
};

.animated-badge-danger {
  /* Keep this */
}

.animated-badge-danger:hover {
  background: linear-gradient(to right, rgba(var(--phoenix-danger-rgb), 1), rgba(var(--phoenix-warning-rgb), 1));
  background-size: 200% 200%;
  animation: gradientAnimation 1s ease infinite;
  color: white;
}

.animated-icons:hover {
  /*transition: transform 0.5s ease-out;
  transform: scale(1.2);
  color: white;*/
}

.btn-gray {
  color: gray;
  font-size: 20px;
}

.bgtc-0:hover {
  color: rgba(var(--phoenix-primary-rgb));
}
.bgtc-1:hover {
  color: rgba(var(--phoenix-success-rgb));
}
.bgtc-2:hover {
  color: rgba(var(--phoenix-warning-rgb));
}
.bgtc-3:hover {
  color: rgba(var(--phoenix-info-rgb));
}
.bgtc-4:hover {
  color: rgba(var(--phoenix-primary-rgb));
}
.bgtc-5:hover {
  color: rgba(var(--phoenix-secondary-rgb));
}
.bgtc-6:hover {
  color: rgba(var(--phoenix-danger-rgb));
}




.btn-outline-light {
  border-color: white;
  color: white;
}
.btn-outline-light:hover {
  border-color: rgb(255, 255, 255, 0.6);
  color: rgb(255, 255, 255, 0.6);
}



.border-color-primary {
  border-color: rgba(var(--phoenix-primary-rgb), 1);
}
.border-color-info {
  border-color: rgba(var(--phoenix-info-rgb), 1);
}



/* Cells of the list pages (clients, events) keep the width of their column */
.ag-theme-alpine .ag-cell:not(.app-list-cell) {
  width: 100% !important;
}
.ag-root-wrapper {
  border: none !important;
  width: 100% !important;
}
.ag-header-viewport {
  width: 100% !important;
}
.ag-theme-alpine .ag-header-cell-label {
  font-size: 14px;
}
.ag-theme-alpine .ag-cell {
  font-size: 14px !important;
  display: flex;
  align-items: center;
}
.ag-theme-alpine .ag-row {
  border: none !important;
}
#events_grid {
  height: 400px;
  width: 100%;
}
.col-event-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--phoenix-secondary-rgb), 0.9);
}
.date_time-first-row {
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--phoenix-secondary-rgb), 0.9);
}
.date_time-second-row {
  margin-top: -20px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(var(--phoenix-secondary-rgb), 0.6);
}


.badge-phoenix-text {
  margin-top: 2px;
  margin-bottom: 1px;
  font-size: 11px;
}


.sidebar-active {
  background-color: rgb(238, 238, 238);
  background-color: rgb(244, 244, 244);
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}


.cursor-pointer {
  cursor: pointer;
}


.alert-subtle-warning {
  background-color: rgba(var(--phoenix-secondary-rgb), 0.6);
}



.cookies-alert {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  margin-bottom: 0;
  color: white;
}



.item-zoom-in {
  transition: transform 0.2s ease-in-out;
}
.item-zoom-in:hover {
  transform: scale(1.025);
}


.text-secondary-lighter {
  color: rgba(var(--phoenix-secondary-rgb), 0.5);
}

.text-secondary-lighter:hover {
  color: rgba(var(--phoenix-secondary-rgb), 1);
}




/* For mobile devices (up to 767px wide) */
@media (max-width: 767px) {
  .page-sub-fs {
    font-size: 20px;
    font-weight: bolder;
  }
  #avatarme_title {
    font-size: 8px;
    margin-top: 20px;
  }
  #qrcode_area {
    display: none;
  }
  #qrcode_area button {
    display: block;
  }
  .model_option {
    width: 75px;
    height: 75px;
    font-size: 12px;
  }
  #cartoon_style_column_34 button {
    width: 110px;
    height: 50px;
    /*display: inline-block;*/
    border-style: solid;
    border-width: 1px;
    border-color: white;
    font-size: 10px;
  }
  #cartoon_style_column_34 button {
    width: 110px;
    height: 50px;
    /*display: inline-block;*/
    border-style: solid;
    border-width: 1px;
    border-color: white;
    font-size: 10px;
  }
}
/* For tablets and larger screens */
@media (min-width: 768px) {
  .page-sub-fs {
    font-size: 26px;
    font-weight: bolder;
  }
  #avatarme_title {
    font-size: 18px;
  }
  .model_option {
    width: 150px;
    height: 150px;
    font-size: 18px;
  }
  #cartoon_style_column_34 button {
    width: 150px;
    height: 100px;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    font-size: 18px;
  }
  #cartoon_style_column_35 {
    opacity: 0;
  }
}

/* For desktops and larger screens */
@media (min-width: 1200px) {
  .page-sub-fs {
    font-size: 30px;
    font-weight: bolder;
  }
  #avatarme_title {
    font-size: 18px;
  }
  .model_option {
    width: 150px;
    height: 150px;
    font-size: 16px;
  }
  .model_option span {
    font-size: 24px;
  }
  #cartoon_style_column_34 button {
    width: 150px;
    height: 100px;
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    font-size: 18px;
  }
  #cartoon_style_column_35 {
    opacity: 0;
  }
}



.tox-promotion {
  display: none;
}
.tox-statusbar__right-container {
  display: none;
}






.live_loader {
  display: none;
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  /*position: relative;*/
  position: absolute;
  top: 30%;
  left: 30%;
  right: 30%;
  -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);
  }
}





/* Mobile menu button: its lines collapsed to zero width inside the flex row of the topbar */
.navbar-logo .navbar-toggler-humburger-icon { flex: 0 0 auto; }
.navbar-logo .navbar-toggle-icon { flex: 0 0 auto; width: 1.125rem; min-width: 1.125rem; }
.navbar-logo .navbar-toggle-icon .toggle-line { width: 100%; }

/* User menu: larger text for the options, the name and the buttons */
.dropdown-profile h6 { font-size: 1.15rem; }
.dropdown-profile .nav-link { font-size: 1.05rem; }
.dropdown-profile .nav-link svg { width: 20px; height: 20px; }
.dropdown-profile .btn { font-size: 1.05rem; }
.dropdown-profile .fs-10 { font-size: 0.85rem !important; }