/* IMPORT CSS BASE */

@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";
@import "https://cdn.jsdelivr.net/npm/bulma-extensions@6.2.7/dist/css/bulma-extensions.min.css";
@import url('https://fonts.googleapis.com/css?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.min.css";

/* GLOBAL */

:root {
  /* Colors and Lightness values */
  --bulma-scheme-h: var(--bulma-primary-h);
  --bulma-scheme-s: 25%;
  --bulma-light-l: 90%;
  --bulma-light-invert-l: 20%;
  --bulma-dark-l: 20%;
  --bulma-dark-invert-l: 90%;
  --bulma-soft-l: 90%;
  --bulma-bold-l: 20%;
  --bulma-soft-invert-l: 20%;
  --bulma-bold-invert-l: 90%;
  --bulma-link-h: var(--bulma-primary-h);
  --bulma-link-s: 100%;
  --bulma-link-l: 50%;

  /* Color Palettes */
  --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
  --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
  --bulma-link-text: hsla(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-primary-l) + 12%), 1);

  /* These 3 lines or replaced in elixir-admin-custom.css */
  --bulma-primary-h: 200deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 50%;

  --bulma-primary-00-l: 1%;
  --bulma-primary-05-l: 6%;
  --bulma-primary-10-l: 11%;
  --bulma-primary-15-l: 16%;
  --bulma-primary-20-l: 21%;
  --bulma-skeleton-background: hsl(var(--bulma-primary-h), 14%, 24%);

  /* Typography */
  --bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
  --bulma-size-small: 0.75rem;
  --bulma-size-normal: 1rem;
  --bulma-size-medium: 1.25rem;
  --bulma-size-large: 1.5rem;
  /* etc. */

  /* Menu background */
  --menu-background-h: var(--bulma-primary-h);
  --menu-background-s: 50%;
  --menu-background-l: 97%;
  --bulma-menu-item-background-l-delta: 100%;
}


/* BULMA OVERRIDE */

.button.is-primary {
  color: var(--bulma-link-invert);
}

.file-cta {
  color: var(--bulma-link-invert);
  background-color: var(--bulma-primary);
}

.file-input[disabled] + .file-cta {
  cursor: not-allowed;
  opacity: 0.5;
}

.file-cta .file-label {
  cursor: inherit;
}
strong {
  color: currentColor;
}
.button.is-primary,
div.button.is-primary>a {
  color: var(--bulma-link-invert) !important;
}


/* MENU */

.is-main-menu {
  background-color: hsl(var(--menu-background-h), var(--menu-background-s), var(--menu-background-l));
}

.menu {
  padding: 2rem;
}

.menu-list a {
  background-color: hsl(var(--menu-background-h), var(--menu-background-s), calc(var(--menu-background-l) + var(--bulma-menu-item-background-l-delta)));
}

.menu-list a.is-active {
  background-color: var(--bulma-primary);
}

.menu-label {
  color: var(--bulma-link-text);
}

.menu .icon {
  margin-right: 0.5rem;
}


/* NAVBAR */

.navbar {
  --bulma-navbar-background-color: hsl(var(--menu-background-h), var(--menu-background-s), var(--menu-background-l));
}


.datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper::before,
.datetimepicker-dummy.is-primary .datetimepicker-dummy-wrapper:before,
.datetimepicker-dummy.is-primary::before,
.datetimepicker-dummy.is-primary:before {
  background-color: var(--bulma-primary);
}

/* Text editor */
.ck-editor__editable_inline {
  padding: 0 30px !important;
}

.ck-word-count {
  font-size: var(--bulma-help-size);
  margin-top: 5px !important;
}

.ck-editor {
    overflow-wrap: anywhere;    /* Nouveau standard */
    word-break: break-all !important;
}


/* Text editor rendered */
.list-item-description.ck-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.ck-content>ul {
  padding-left: 15px;
}

/* Barre de progression simple pour CKeditor MyUploadAdapterPlugin*/
#uploadProgressContainer {
  display: none;
  width: 100%;
  background: #eee;
  border-radius: 4px;
  margin-top: 10px;
}
#uploadProgressBar {
  width: 0%;
  height: 6px;
  background: var(--bulma-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}
#uploadProgressText {
  display: none;
  margin-top: 5px;
  font-size: 0.9em;
  color: #666;
}

.selectize-input input {
  font-size: 16px !important;
}

.selectize-input {
  font-size: 16px !important;
}

.field .label:has(+ .control input[required])::after,
.field .label:has(+ .control select[required])::after {
  content: " *";
  color: red;
  display: inline-block;
}


/* PREVIEW */

.preview {
  width: 50%;
  height: 40%;
  display: flex;
  align-items: center;
  margin-top: 10px;
}


svg .header-cololr {
  fill: var(--bulma-primary);
}

.header-color {
  fill: var(--bulma-primary);
}

.svg-box{
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border: 2px solid var(--bulma-primary);
}
.svg-box-mobile{
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border: 2px solid var(--bulma-primary);
}

.header-color-light {
  fill: var(--bulma-primary-light);
}

.config-layout-row {
  display: flex;
  flex-direction: row;
}
.config-layout-mobile{
  margin-left: 2rem;
  width: 100%;
}
.config-layout-desktop
{
  width: 100%;
}

.export-button-admin{
  border: 2px solid var(--bulma-primary) !important;
}

.file-label-name{
  display: flex;
  align-items: flex-start;
}

.file-name,
.control .file-cta{
  border-radius: 12px !important;
}

.file-name {
  display: flex;
  align-items: center;
  max-width: 100% !important;
}

.admin-tag {
  color: var(--admin-tag-text-color, black);
}