:root {
    --primary-base: #904FED;
    --primary-dark: #482877;
    --primary-medium: #E9DCFB;
    --primary-light: #F4EDFD;
    --page-background: #E4E6EB;
    --input-background: #F5F5F5;
    --red-base: #FF002E;
    --red-dark: #8A0019;
    --green-base: #00C45B;
    --blue-base: #0066FF;
    --yellow-base: #FFB800;
    --carbone: #202020;
    --grey-base: #8D8D8D;
    --grey-light: #C6C6C6;
    --grey-lighter: #F7F7F7;
    --white: #FFFFFF;

    --graph1:#8C52E8;
    --graph2:#F9A0FC;
    --graph3:#38C262;
    --lightgraph1:#F6F0FD;
    --lightgraph2:#FEEBFE;
    --lightgraph3:#CFF2F0;
    --redgraph1:#8E163F;
    --redgraph2:#F85D35;
    --redgraph3:#FCC536;
  }
.VerticalCenterContainer {
  position: relative;
}

.VerticalCenterContent {
  position: absolute;
  top: 50%;
  left: 0px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.dashboardDialogInsideDiv {
  display: flex;
  width: calc(100% - 40px);
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Roboto";
  gap: 10px;
  color: var(--white);
  border-radius: 6px;
  background: var(--primary-dark);
}

.UploadHover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  pointer-events: none;
}

.DecisionTreeLevelContainer {
  flex: 1;
  max-height: calc(100vh - 235px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
  gap: 20px !important;
  padding: 20px;
  opacity: var(--thickness-regular, 1);
  background: var(--white);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.DecisionTreeBranchCardContainer {
  padding: 10px 0px;
  flex-grow: 1;
  border-radius: 10px;
  border: 1px solid var(--primary-base);
  background: var(--grey-lighter);
}

.DecisionTreeBranchCardContainer.dragging {
  opacity: 0.6;
}

.DecisionTreeHomeLinkContainer {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid var(--grey-light);
  background: var(--white);
}

.activityIslandContainer {
  display: inline-flex;
  padding: 20px;
  align-items: center;
  gap: 20px;
  flex-grow: 1;
  flex-shrink: 0;
  border-radius: 60px;
  border: 1px solid rgba(33, 33, 33, 0.12);
  background: var(--white);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 9999; /* Just under modal */
}

.modal-call-categories {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  background-color: var(--white);
  max-height: 190px;
  width: 243px;
  border: 1px solid var(--grey-lighter);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.modal-call-categories ::-webkit-scrollbar {
  height: 3px;
  width: 3px;
}
.modal-call-categories ::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 8px;
}
.modal-call-categories .item-radio-button {
  display: flex;
  gap: 4.5px;
}
.modal-call-categories .item-radio-button p {
  margin: 0;
}

.callLinkMasterCard {
  display: flex;
  width: 400px;
  height: "100%";
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  border-radius: 10px;
  opacity: var(--thickness-regular, 1);
  background: var(--white);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.callLinkSmallCardsContainer {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--grey-lighter);
}

.callLinkSmallCardsSectionTitle {
  color: var(--primary-base);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.callLinkSmallCard {
  display: flex;
  width: calc(100% - 20px);
  padding: 10px;
  align-items: center;
  border-radius: 6px;
  background: var(--white);
}

.container-icon-credit-card {
  cursor: pointer;
}
.container-icon-credit-card .icon-credit-card {
  display: flex;
  align-items: center;
}

#subject-call {
  font-weight: 400;
  font-size: 14px;
  font-family: "Roboto";
  height: 68px;
  background-color: transparent;
  border: 4px solid var(--white);
  width: calc(100% - 5px);
}

.card-consent, .card-consent-accepted, .card-consent-refused {
  position: relative;
  background-color: var(--white);
  padding: 20px;
  border-left: 1px solid var(--grey-light);
  height: 100%;
  width: calc(100% - 40px);
}
.card-consent .title-consent, .card-consent .title-consent-accepted, .card-consent .title-consent-refused, .card-consent-accepted .title-consent, .card-consent-accepted .title-consent-accepted, .card-consent-accepted .title-consent-refused, .card-consent-refused .title-consent, .card-consent-refused .title-consent-accepted, .card-consent-refused .title-consent-refused {
  font-weight: 700;
  font-size: 14px;
  margin: 0;
  line-height: 18.75px;
}
.card-consent .date-consent, .card-consent-accepted .date-consent, .card-consent-refused .date-consent {
  font-weight: 400;
  font-size: 14px;
  margin: 0;
  color: #8D8D8D;
}
.card-consent .text-consent, .card-consent-accepted .text-consent, .card-consent-refused .text-consent {
  font-weight: 400;
  font-size: 14px;
  margin: 20px 0 0 0;
  color: var(--carbone);
}

.card-consent-accepted {
  border-left: 1px solid var(--green-base) !important;
}
.card-consent-accepted .title-consent-accepted {
  color: var(--green-base);
}

.card-consent-accepted::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: var(--green-base);
}

.card-consent-refused {
  border-left: 1px solid var(--red-base) !important;
}
.card-consent-refused .title-consent-refused {
  color: var(--red-base);
}

.card-consent-refused::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: var(--red-base);
}

.card-consent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: var(--grey-light);
}

.box-send-payment {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.AppBarLogo {
  margin-left: 20px;
  height: 24px;
}
.AppBarLogo svg {
  height: 24px;
}

.AppBarFlag {
  margin-right: 10px;
}

.TagElement {
  margin: 5px;
}

.bootstrapInput {
  border-radius: 4px;
  background-color: var(--white);
  border: "1px solid #ced4da";
  font-size: 14px;
  padding: 4px 12px;
  width: "calc(100% - 24px)";
}

.primarybootstrapInputColors {
  background-color: #005b70;
  color: var(--white) !important;
}

.secondarybootstrapInputColors {
  background-color: var(--white);
  color: var(--carbone) !important;
}

.bootstrapFormLabel {
  font-size: 18;
  animation: none;
}

.TextHeader32 {
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0em;
  text-align: left;
  user-select: none;
  color: #000000;
}

.TextContent14 {
  color: var(--Carbone, rgba(0, 0, 0, 0.87));
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.TextContent16 {
  color: var(--Carbone, rgba(0, 0, 0, 0.87));
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.w700 {
  font-weight: 700;
}

.w400 {
  font-weight: 400;
}

.primaryColor {
  color: var(--primary-base);
}

.VerticalSeparator {
  width: 1px;
  height: 21px;
  opacity: var(--thickness-regular, 1);
  background: var(--carbone);
  margin: 5px;
  margin-left: 15px;
  margin-right: 15px;
}

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

.tooltip .tooltiptext {
  font-family: "Roboto", sans-serif;
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: var(--white);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  font-family: "Roboto", sans-serif;
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

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

.MuiTooltip-tooltip {
  font-family: "Roboto", sans-serif !important;
  background: var(--Carbone, var(--carbone)) !important;
  border-radius: 6px !important;
  border: 1px solid var(--white) !important;
  font-size: 14px !important;
  padding: 10px !important;
}

.verticalFlexContainer {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  flex-shrink: 0;
}

.horizontalFlexContainer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0px;
  flex-shrink: 0;
}

.modal-titleDialog {
  margin: 0 20px;
  width: calc(100% - 40px);
}

.defaultPagePaper {
  min-height: 85vh;
  margin-bottom: 20px;
}

.fullPageList {
  width: 500px;
  height: calc(100% - 90px);
  margin: auto;
  text-align: center;
}

.TagInterludeText {
  font-family: "Roboto", sans-serif;
  padding: 5px;
}

.TopTitle {
  flex: 1;
  text-align: center;
  font-weight: 900px;
  font-size: 28;
}

.TopButtons {
  margin: 5px !important;
}

.ReactTable {
  font-family: "Roboto", sans-serif;
}

.ReactTable .rt-tr-group {
  min-height: 43px;
}

.ReactTable .rt-td {
  cursor: pointer;
}

.ALink {
  text-decoration: underline;
  color: var(--carbone);
  cursor: pointer;
}
.ALink:hover {
  color: var(--primary-base);
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialogContent {
  margin: 20px;
  flex: 1;
  flex-grow: 0.4;
  background: var(--white);
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px;
  transition: all 0.3s ease 0s;
}

.DecisionTreeParameterContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 20px;
  color: var(--Carbone, var(--carbone));
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.DecisionTreeParameterContent .ContentName {
  width: 90px;
  text-align: left;
}

.fadeInAnimation {
  animation: fadeIn 0.3s ease-in both;
}

.fadeOutAnimation {
  animation: fadeOut 0.3s ease-in both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -40%, 0);
  }
}
/**Overrides of kendo ui**/
.k-scheduler {
  font-family: "Roboto", sans-serif !important;
}

.k-calendar .k-state-selected .k-link,
.k-calendar .k-weekend.k-state-selected .k-link,
.k-calendar:not(.k-calendar-infinite) .k-content .k-state-selected .k-link,
.k-calendar:not(.k-calendar-infinite) .k-content .k-weekend .k-state-selected .k-link,
.k-drag-clue,
.k-event,
.k-panelbar .k-panel > .k-item > .k-link.k-state-selected,
.k-treeview .k-in.k-state-selected {
  font-family: "Roboto", sans-serif !important;
  background-color: var(--primary-base) !important;
  border-color: var(--primary-base) !important;
}

.editorToolbarWindow.k-header.k-window-content,
.k-block > .k-header,
.k-calendar .k-calendar-view thead,
.k-calendar .k-content thead,
.k-calendar .k-header,
.k-pager-wrap,
.k-panel > .k-header,
.k-scheduler-footer,
.k-scheduler-toolbar,
.k-spreadsheet-column-header,
.k-spreadsheet-row-header,
.k-spreadsheet-top-corner,
.k-treemap .k-treemap-title {
  font-family: "Roboto", sans-serif !important;
  background-color: var(--white) !important;
}

.k-calendar .k-content .k-today .k-link {
  font-family: "Roboto", sans-serif !important;
  box-shadow: inset 0 0 0 1px var(--primary-base) !important;
}

.k-window {
  margin-top: -200px;
  font-family: "Roboto", sans-serif !important;
}

.k-primary {
  background-color: #0099BC !important;
  border-color: #0099BC !important;
}

.k-state-selected {
  background-color: #0099BC !important;
}

.progressCenter {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
}

/*react-autosuggest overrides*/
.react-autosuggest__container {
  flex-grow: 1 !important;
  position: relative !important;
  height: 100px !important;
  z-index: 10 !important;
}

.react-autosuggest__suggestions-container--open {
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  right: 0 !important;
}

.react-autosuggest__suggestions-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: none !important;
}

.react-autosuggest__suggestion {
  display: block !important;
}

.cursorPointer {
  cursor: pointer !important;
}

.cover {
  position: fixed;
  top: -300px;
  left: 0;
  bottom: 0;
  right: 0;
}

.sketch-picker {
  z-index: 10;
}

.picker-container {
  margin-top: -30px;
  position: absolute;
  display: block;
  z-index: 1500;
  left: 30px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--Grey-lighter, var(--grey-lighter));
  background: var(--white);
  box-shadow: 17px 100px 28px 0px rgba(0, 0, 0, 0), 11px 64px 26px 0px rgba(0, 0, 0, 0.01), 6px 36px 22px 0px rgba(0, 0, 0, 0.05), 3px 16px 16px 0px rgba(0, 0, 0, 0.09), 1px 4px 9px 0px rgba(0, 0, 0, 0.1);
}

.dropdown-container {
  width: 100%;
  background: var(--input-background);
}

.error-container {
  margin: 20px;
}

.error-container > p {
  white-space: pre-wrap;
  margin-top: 15px;
}

.languageBadge {
  color: var(--white) !important;
  background-color: var(--primary-base);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.languageBadge-input {
  height: 20px;
  position: relative;
  align-self: flex-end;
  top: -10px;
  margin-right: 10px !important;
}

.MuiTableSortLabel-icon {
  color: var(--white) !important;
}

.RightGridPaper {
  padding: 20px 0px 20px 20px !important;
}

.RightGridPaperStack {
  margin-right: 10px !important;
}

@keyframes pulse {
  0%, 45% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  90% {
    transform: scale(1.5);
  }
  95%, 100% {
    transform: scale(1);
  }
}
.blink {
  animation: pulse 2.5s ease-in-out infinite;
}

.MenuList-account .css-cveggr-MuiListItemIcon-root {
  min-width: 36px;
}

.text-menu {
  color: var(--carbone);
  text-transform: capitalize;
}

.text-menu::first-letter {
  text-transform: uppercase;
}

hr {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 45px 0 30px 0;
}

.menu-drawer .css-137ul40-MuiButtonBase-root-MuiIconButton-root:hover {
  background-color: transparent !important;
}
.menu-drawer .css-137ul40-MuiButtonBase-root-MuiIconButton-root {
  color: transparent;
}
.menu-drawer .text-menu {
  color: var(--carbone);
  text-transform: capitalize;
}
.menu-drawer .text-menu::first-letter {
  text-transform: uppercase;
}

#menu-user .css-1ka5eyc-MuiPaper-root-MuiMenu-paper-MuiPopover-paper {
  background-color: transparent !important;
  left: 1140px;
  width: 350px;
  margin-left: 50px;
}
#menu-user .MuiMenu-paper {
  left: 0px;
}

.block-behind-avatar-account {
  background-color: transparent !important;
}

.drawer {
  display: inline-flex;
  height: calc(100vh - 140px);
  width: "100%";
  padding: 20px;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  user-select: none;
}
.drawer .categoryTitle {
  width: 100%;
  color: var(--grey-base);
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: left;
}

.input-standard .css-1gzkxga-MuiSelect-select-MuiInputBase-input-MuiFilledInput-input.css-1gzkxga-MuiSelect-select-MuiInputBase-input-MuiFilledInput-input.css-1gzkxga-MuiSelect-select-MuiInputBase-input-MuiFilledInput-input {
  padding: 8px 12px;
}
.input-standard .css-1v669lf-MuiAutocomplete-root .MuiFilledInput-root.MuiInputBase-sizeSmall {
  padding: 8px 12px;
}

.main-days30 {
  overflow: auto;
}
.main-days30 .container-button-30days {
  margin-top: 20px;
}

.tooltip-bar-chart {
  background: var(--carbone);
  border-radius: 6px;
  padding: 7px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
}
.tooltip-bar-chart .sessions {
  color: var(--white);
  margin: 5px;
  font-weight: 300;
}
.tooltip-bar-chart .date-or-hour {
  margin: 5px;
  color: var(--white);
  font-weight: 300;
}

.tooltip-area-chart {
  display: flex;
  flex-direction: column-reverse;
  text-align: center;
  background: var(--carbone);
  border-radius: 5px;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  margin-right: 20px;
  margin-left: 20px;
}
.tooltip-area-chart .module-tooltip-area-chart {
  display: flex;
  align-items: center;
  padding-top: 5px;
}
.tooltip-area-chart .module-tooltip-area-chart #cercle-tooltip-area-chart {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  border: solid 1.3px var(--white);
  margin-right: 5px;
}
.tooltip-area-chart .module-tooltip-area-chart p {
  color: var(--white);
  margin: 0px;
  font-weight: 300;
}
.tooltip-area-chart .module-tooltip-area-chart p span {
  font-weight: 500;
}
.tooltip-area-chart .date-or-hour {
  color: var(--white);
  margin: 0px;
  font-weight: 300;
  text-align: left;
}
.tooltip-area-chart .date-or-hour span {
  font-weight: 500;
}
.tooltip-area-chart .p-module1 {
  color: #EF8354;
}
.tooltip-area-chart .p-module2 {
  color: #00B3A6;
}
.tooltip-area-chart .p-module3 {
  color: #CC3780;
}
.tooltip-area-chart .p-module4 {
  color: #7F39FB;
}
.tooltip-area-chart .p-Other {
  color: #376BB0;
}

.legend {
  height: 60px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 0px 0px 6px 6px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1098039216);
  display: flex;
  justify-content: space-around;
}
.legend .legend-chart {
  display: flex;
  align-items: center;
}
.legend .legend-chart #cercle-legend-chart {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: solid 1px var(--white);
}
.legend .legend-chart .cercle-legend-module1 {
  background-color: #EF8354;
}
.legend .legend-chart .cercle-legend-module2 {
  background-color: #00B3A6;
}
.legend .legend-chart .cercle-legend-module3 {
  background-color: #CC3780;
}
.legend .legend-chart .cercle-legend-module4 {
  background-color: #7F39FB;
}
.legend .legend-chart .cercle-legend-Other {
  background-color: #376BB0;
}
.legend .legend-chart p {
  color: var(--white);
  margin-left: 8px;
  margin-top: 17px;
  font-size: 12px;
  text-transform: capitalize;
}

.days30-container {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 345px);
}
.days30-container .container-session {
  min-width: 49%;
  height: 430px;
}
.days30-container .container-session .recharts-surface {
  background-color: var(--white);
  padding-top: 20px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1098039216);
  border-radius: 5px;
}
.days30-container .container-session:nth-child(odd) {
  margin-right: 8px;
}
.days30-container .container-session:nth-child(even) {
  margin-left: 8px;
}
@media only screen and (max-width: 1255px) {
  .days30-container .container-session {
    width: 100%;
  }
}
.days30-container .container-module {
  min-width: 49%;
  height: 430px;
  padding-top: 20px;
}
.days30-container .container-module .recharts-surface {
  background-color: var(--white);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1098039216);
  border-radius: 6px 6px 0px 0px;
}
.days30-container .container-module:nth-child(odd) {
  margin-right: 8px;
}
.days30-container .container-module:nth-child(even) {
  margin-left: 8px;
}
.days30-container .container-TopBest30Days {
  display: flex;
  margin-top: 70px;
  width: 100%;
}
.days30-container .container-TopBest30Days .box-top10Best {
  min-width: 49%;
}
.days30-container .container-TopBest30Days .box-top10Best .css-1pclhgl-MuiTable-root {
  min-width: 0;
}
.days30-container .container-TopBest30Days .box-top10Best:nth-child(odd) {
  margin-right: 8px;
}
.days30-container .container-TopBest30Days .box-top10Best:nth-child(even) {
  margin-left: 8px;
}
@media only screen and (max-width: 1255px) {
  .days30-container .box-top10Best {
    width: 100%;
  }
}

@media only screen and (max-width: 1255px) {
  .container-module {
    width: 100%;
  }
}
@media (max-width: 1255px) {
  .container-module:nth-child(2n) {
    margin-top: 145px;
  }
}
.contentCard {
  display: flex;
  margin: 0px;
  width: 380px;
  height: 380px;
  flex-direction: column;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid var(--Disabled, var(--grey-light));
  background: var(--white);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.contentCard .thumbnail {
  display: flex;
  width: 100%;
  height: calc(100% - 100px);
  border-radius: 10px 10px 0px 0px;
}
.contentCard .bottom {
  display: flex;
  width: calc(100% - 40px);
  height: 100px;
  padding: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  border-radius: 0px 0px 10px 10px;
}
.contentCard .bottom .subtitle {
  overflow: hidden;
  color: var(--Grey-light, var(--Disabled, var(--grey-light)));
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  text-transform: lowercase;
}
.contentCard .bottom .title {
  overflow: hidden;
  color: var(--carbone);
  text-overflow: ellipsis;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
  text-transform: lowercase;
}

.container-card-reporting {
  background-color: var(--white);
  border-radius: 6px;
  padding: 20px 17px 0px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.container-card-reporting .result-report {
  font-size: 120px;
  font-weight: 300;
  width: 100%;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--primary-base);
}
.container-card-reporting .notation-card {
  display: flex;
  flex: 1;
}
.container-card-reporting .infos-report {
  color: #8D8D8D;
  font-size: 14px;
  min-height: 20px;
  margin-top: -20px;
  padding-bottom: 20px;
  text-align: center;
}
.container-card-reporting .modal-paper {
  width: 440px;
}
.container-card-reporting .highest-rating {
  color: var(--primary-base);
}
.container-card-reporting .bloc-rating {
  width: calc(100% - 20px);
  padding: 0 20px;
  height: 39px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--carbone);
  font-size: 14px;
  font-weight: 400;
}
.container-card-reporting .bloc-rating p {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
.container-card-reporting .bloc-rating .bloc-stars .stars-rating {
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 16;
}

.custom-tooltip {
  width: 81px;
  height: 46px;
  border-radius: 6px;
  background-color: var(--carbone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.custom-tooltip, .date-tooltip {
  color: #8D8D8D;
  font-size: 14px;
  margin: 0;
}

.custom-tooltip, .call-tooltip {
  color: var(--white);
  font-size: 14px;
  margin: 0;
}

.jalios-agenda-container #simple-tabpanel-0 div.css-348804-MuiPaper-root:nth-child(2) {
  height: calc(100% - 735px);
}

.react-autosuggest__suggestions-list {
  display: flex;
  flex-wrap: wrap;
}
.react-autosuggest__suggestions-list .react-autosuggest__suggestion {
  margin: 0px 5px;
}

#uploadManager-dialog-title {
  font-size: 34px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

#inProgressFiles-dialog-description, #doneFiles-dialog-description, #queueFiles-dialog-description {
  display: flex;
  justify-content: space-between;
  margin: 15px 0px;
}
#inProgressFiles-dialog-description p, #doneFiles-dialog-description p, #queueFiles-dialog-description p {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
}
#inProgressFiles-dialog-description .name-file, #inProgressFiles-dialog-description .size, #doneFiles-dialog-description .name-file, #doneFiles-dialog-description .size, #queueFiles-dialog-description .name-file, #queueFiles-dialog-description .size {
  color: var(--carbone);
}
#inProgressFiles-dialog-description .name-file, #doneFiles-dialog-description .name-file, #queueFiles-dialog-description .name-file {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#inProgressFiles-dialog-description .span-file, #doneFiles-dialog-description .span-file, #queueFiles-dialog-description .span-file {
  width: 300px;
}
#inProgressFiles-dialog-description .size, #doneFiles-dialog-description .size, #queueFiles-dialog-description .size {
  width: 300px;
  text-align: left;
}
#inProgressFiles-dialog-description .status, #doneFiles-dialog-description .status, #queueFiles-dialog-description .status {
  width: 275px;
  text-align: right;
}

#inProgressFiles-dialog-description .status {
  color: var(--primary-base);
}

#queueFiles-dialog-description .status {
  color: var(--carbone);
}

#doneFiles-dialog-description .status {
  color: var(--green-base);
}

.layout .VerticalCenterContainer {
  background-size: cover !important;
  background-position: center !important;
}

.storage-button {
  display: flex;
  justify-content: space-between;
}
.storage-button .MuiButtonBase-root:disabled {
  background-color: var(--white);
}

.tooltip-storage {
  font-family: "Roboto", sans-serif;
}
.tooltip-storage .module-tooltip-storage {
  display: flex;
  align-items: center;
  padding: 4px;
  font-size: 12px;
}
.tooltip-storage .module-tooltip-storage .cercle-tooltip-storage {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  border: solid 1.3px var(--white);
  margin-right: 5px;
}
.tooltip-storage .module-tooltip-storage p {
  color: var(--white);
  margin: 0;
  font-weight: 300;
}
.tooltip-storage .module-tooltip-storage p span {
  font-weight: 500;
}

.react-resizable-handle {
  opacity: 0;
}

.showcount-div {
  width: 26px;
  height: 26px;
  line-height: 26px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
  background: var(--primary-light);
  text-align: center;
  color: rgb(98, 0, 238);
  font-size: 12px;
  font-weight: 500;
}

.title-editMainGrid #simple-tabpanel-0 > div > div > div.MuiGrid-root.MuiGrid-item.MuiGrid-grid-xs-8.css-vok43g-MuiGrid-root > div:nth-child(1) > div > div:nth-child(3) > div > div {
  width: 133%;
}

.MuiInputBase-adornedEnd {
  height: 100%;
}
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

body {
  margin: 0;
  overflow-y: auto;
  height: 520px;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto", sans-serif;
}
body ::-webkit-scrollbar {
  height: 3px;
  width: 3px;
}
body ::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 8px;
}

@media screen and (min-height: 520px) {
  body {
    overflow-y: hidden;
    height: auto;
  }
}
a {
  color: var(--primary-base);
  text-decoration: none;
}

h4 {
  font-family: "Roboto", sans-serif;
}

th {
  font-weight: inherit !important;
}

.scrollbar-base, .scrollbar-light-mode, .scrollbar-dark-mode {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: inherit;
}

.scrollbar-dark-mode {
  background-color: rgba(255, 255, 255, 0.2);
}

.scrollbar-light-mode {
  background-color: rgba(0, 0, 0, 0.2);
}

.verticalFlexContainer {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  flex-shrink: 0;
}

.horizontalFlexContainer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0px;
  flex-shrink: 0;
}

.rgt-header-container {
  display: none !important;
}

.rgt-footer {
  display: none !important;
}

.rgt-container {
  border-radius: 6px !important;
}

.SideBarContainer {
  transition: width 0.5s cubic-bezier(0.68, 0.05, 0.27, 1.55);
  user-select: none;
}

.box-sideBar::-webkit-scrollbar {
  width: 6px; /* width scrollbar */
}

.box-sideBar::-webkit-scrollbar-thumb {
  background: var(--page-background); /* color scrollbar */
}

.sidebar-button-container {
  transition: right 0.3s ease-in;
}

.sidebar-avatar-container {
  transition: bottom 0.3s ease-in;
}

.AppPagesContainer {
  height: 100%;
  display: inline-flex;
  flex-grow: 1;
  background-color: var(--page-background);
  transition: width 0.3s ease-in;
}

.defaultPageContent {
  position: relative;
  width: 100%;
  height: 100%;
}

.defaultPageWrapper {
  height: calc(100% - 40px);
  padding: 20px;
}

.welcome-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.welcome-container .welcome-image {
  display: flex;
}
.welcome-container .welcome-image .welcome-avatar {
  margin-left: -10px;
}
.welcome-container .welcome-message {
  font-weight: 600;
  font-size: 32px;
  margin: 0;
}

.user-avatar {
  background-color: var(--primary-light);
  color: var(--primary-base);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  width: 36px;
  border-radius: 20px;
  border: 0px solid #000;
  margin-bottom: 0px;
}
.user-avatar svg {
  stroke: var(--primary-base);
}
.user-avatar:hover {
  cursor: pointer;
  background-color: var(--primary-medium);
}

.TextHeader32 {
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0em;
  text-align: left;
  user-select: none;
  color: #000000;
}

.TextContent14 {
  color: var(--Carbone, rgba(0, 0, 0, 0.87));
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.TextContent16 {
  color: var(--Carbone, rgba(0, 0, 0, 0.87));
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.w700 {
  font-weight: 700;
}

.w400 {
  font-weight: 400;
}

.primaryColor {
  color: var(--primary-base);
}

.VerticalSeparator {
  width: 1px;
  height: 21px;
  opacity: var(--thickness-regular, 1);
  background: var(--carbone);
  margin: 5px;
  margin-left: 15px;
  margin-right: 15px;
}

.switchButtonpaginationcontainer {
  display: flex;
  width: 128px;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
}
.switchButtonpaginationcontainer .switchButtonPaginationcontent {
  border: 0px;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  flex: 1;
}

.ResizableColumn {
  position: relative;
  resize: horizontal;
  overflow: hidden;
}

.ResizableColumn:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: var(--grey-lighter);
  width: 8px;
  height: 100%;
  pointer-events: none;
}

::-webkit-resizer {
  background: transparent;
}

.PaginationTableRow {
  cursor: pointer;
}

.PaginationTableHeader {
  height: 48px;
  border-bottom: 1px solid var(--Grey-light, var(--grey-light));
  background: var(--grey-lighter);
  padding: 0px 20px;
  width: calc(100% - 40px) !important;
}

.PaginationTableContainer {
  height: calc(100% - 20px);
  width: calc(100% - 40px) !important;
  gap: 10px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  flex-grow: 1;
  flex-shrink: 0;
  overflow-y: auto;
}

.PaginationRowContainer {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grey-light);
}

.PaginationTableBottom {
  height: 49px;
  border-top: 1px solid var(--Grey-light, var(--grey-light));
  background: var(--grey-lighter);
  padding: 0px 20px;
  width: calc(100% - 40px) !important;
}

.PaginationButtonCloseModal {
  background-color: var(--grey-lighter);
  justify-content: right;
  width: calc(100% - 40px);
  padding: 20px;
  border-radius: 0 0 10px 10px;
}

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

.rgt-cell {
  justify-content: center;
  font-size: 14px;
}

.rgt-cell-header {
  background-color: var(--grey-lighter);
  border-bottom: 1px solid var(--grey-light);
  font-size: 14px;
}

.rgt-cell-header-inner {
  background-color: var(--grey-lighter);
}

.area-component {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.area-component .area-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.area-component .area-section-title .area-title {
  font-weight: 700;
  font-size: 32px;
  margin: 0;
}
.area-component .area-section-title .area-side-buttons {
  display: flex;
  gap: 10px;
}
.area-component .area-body {
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.area-component .area-body .container-area-body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.badge-container {
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-alert-container {
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader-container .loader {
  border-radius: 50%;
  background: conic-gradient(from 0deg, #904FED, rgba(144, 79, 237, 0.05), #904FED);
  mask: radial-gradient(farthest-side, transparent 85%, black 93%);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.tagchipcontainer {
  display: flex;
  padding: 4px 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: var(--white);
  color: var(--carbone);
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
  border: 1px solid var(--carbone);
}
.tagchipcontainer img {
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.tagchipcontainer-selected {
  background: var(--primary-medium);
  color: var(--primary-base);
  border: 1px solid var(--primary-base);
}

.CardInfoInsideDiv {
  display: flex;
  width: calc(100% - 40px);
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Roboto";
  gap: 10px;
  color: var(--white);
  border-radius: 6px;
  background: var(--primary-dark);
  font-weight: 400;
}

.CardCascadeParentContainer {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--primary-base);
  color: var(--primary-base);
  background-color: var(--primary-light);
  font-weight: 400;
  display: flex;
  flex-direction: row;
  width: calc(100% - 42px);
  justify-content: space-between;
}

.CardCascadeChildContainer {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--grey-light);
  color: var(--carbone);
  background-color: var(--grey-lighter);
}

.CallLinkCardContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--white);
  border-radius: 6px;
  overflow-y: auto;
}

.CallLinkCardContent {
  display: flex;
  flex-direction: row;
  padding: 20px;
  background-color: var(--grey-lighter);
  border-radius: 6px;
  align-items: center;
}

#date-picker-dashboard, #date-picker-modal {
  --rdp-cell-size: 49px;
  --rdp-accent-color: var(--primary-base);
  margin: 0 0 0 -10px;
}
#date-picker-dashboard .rdp-caption, #date-picker-modal .rdp-caption {
  position: relative;
  justify-content: center;
  align-items: normal;
}
#date-picker-dashboard .rdp-caption .rdp-caption_label, #date-picker-modal .rdp-caption .rdp-caption_label {
  text-transform: uppercase;
}
#date-picker-dashboard .rdp-caption .rdp-nav_button_previous, #date-picker-dashboard .rdp-caption .rdp-nav_button_next, #date-picker-modal .rdp-caption .rdp-nav_button_previous, #date-picker-modal .rdp-caption .rdp-nav_button_next {
  width: 50px;
  height: 26px;
  background-color: var(--grey-base);
  border-radius: 4px;
  padding: 4px 10px;
}
#date-picker-dashboard .rdp-caption .rdp-nav_button_previous .rdp-nav_icon, #date-picker-dashboard .rdp-caption .rdp-nav_button_next .rdp-nav_icon, #date-picker-modal .rdp-caption .rdp-nav_button_previous .rdp-nav_icon, #date-picker-modal .rdp-caption .rdp-nav_button_next .rdp-nav_icon {
  color: var(--white);
  width: 10px;
}
#date-picker-dashboard .rdp-caption .rdp-nav_button_previous, #date-picker-modal .rdp-caption .rdp-nav_button_previous {
  position: absolute;
  left: 0;
  margin-left: 15px;
}
#date-picker-dashboard .rdp-caption .rdp-nav_button_next, #date-picker-modal .rdp-caption .rdp-nav_button_next {
  position: absolute;
  right: 0;
  margin-right: 15px;
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-head, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-head, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-head, #date-picker-modal #date-picker-modal-grid-0 .rdp-head {
  color: var(--grey-light);
  font-weight: 500;
  font-size: 20px;
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day {
  margin: 2.5px 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--carbone);
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day:hover, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day:hover, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day:hover, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day:hover {
  background-color: var(--primary-light);
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_selected, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day_selected, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_selected, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day_selected {
  background-color: var(--primary-base);
  color: var(--white);
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_range_middle, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day_range_middle, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_range_middle, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day_range_middle {
  background-color: var(--primary-medium);
  color: var(--carbone);
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_disabled, #date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_outside, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day_disabled, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day_outside, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_disabled, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_outside, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day_disabled, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day_outside {
  color: var(--grey-light);
  pointer-events: none;
  opacity: 1;
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_disabled:hover, #date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_outside:hover, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day_disabled:hover, #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-day_outside:hover, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_disabled:hover, #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-day_outside:hover, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day_disabled:hover, #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-day_outside:hover {
  background-color: transparent;
}
#date-picker-dashboard #date-picker-dashboard-grid-0 .rdp-tbody .rdp-button[disabled]:not(.rdp-day_selected), #date-picker-dashboard #date-picker-modal-grid-0 .rdp-tbody .rdp-button[disabled]:not(.rdp-day_selected), #date-picker-modal #date-picker-dashboard-grid-0 .rdp-tbody .rdp-button[disabled]:not(.rdp-day_selected), #date-picker-modal #date-picker-modal-grid-0 .rdp-tbody .rdp-button[disabled]:not(.rdp-day_selected) {
  opacity: 1;
}

#date-picker-modal {
  --rdp-cell-size: 55px !important;
}

.button-primary,
.button-primary-icon,
.button-secondary,
.button-secondary-icon,
.button-primary-icon-without-text,
.button-round-secondary-icon-without-text,
.button-secondary-icon-border-without-text,
.button-secondary-icon-carbone-without-text,
.button-pink-icon-without-text,
.button-pagination,
.button-pagination-large,
.button-primary-icon-green,
.button-round-navMenu,
.button-primary-icon-animated {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px 0 16px;
  height: 36px;
  border-radius: 20px;
  border: 0px solid #000;
  margin-bottom: 0px;
}
.button-primary:hover,
.button-primary-icon:hover,
.button-secondary:hover,
.button-secondary-icon:hover,
.button-primary-icon-without-text:hover,
.button-round-secondary-icon-without-text:hover,
.button-secondary-icon-border-without-text:hover,
.button-secondary-icon-carbone-without-text:hover,
.button-pink-icon-without-text:hover,
.button-pagination:hover,
.button-pagination-large:hover,
.button-primary-icon-green:hover,
.button-round-navMenu:hover,
.button-primary-icon-animated:hover {
  cursor: pointer;
}
.button-primary div,
.button-primary-icon div,
.button-secondary div,
.button-secondary-icon div,
.button-primary-icon-without-text div,
.button-round-secondary-icon-without-text div,
.button-secondary-icon-border-without-text div,
.button-secondary-icon-carbone-without-text div,
.button-pink-icon-without-text div,
.button-pagination div,
.button-pagination-large div,
.button-primary-icon-green div,
.button-round-navMenu div,
.button-primary-icon-animated div {
  display: flex;
  height: 36px;
  align-items: center;
  gap: 4px;
}
.button-primary span,
.button-primary-icon span,
.button-secondary span,
.button-secondary-icon span,
.button-primary-icon-without-text span,
.button-round-secondary-icon-without-text span,
.button-secondary-icon-border-without-text span,
.button-secondary-icon-carbone-without-text span,
.button-pink-icon-without-text span,
.button-pagination span,
.button-pagination-large span,
.button-primary-icon-green span,
.button-round-navMenu span,
.button-primary-icon-animated span {
  height: 18px;
}

.button-primary-icon,
.button-primary,
.button-primary-icon-without-text,
.button-round-navMenu,
.button-primary-icon-animated {
  background-color: var(--primary-base);
  color: var(--white);
  box-shadow: none;
}
.button-primary-icon svg,
.button-primary svg,
.button-primary-icon-without-text svg,
.button-round-navMenu svg,
.button-primary-icon-animated svg {
  stroke: var(--white);
}
.button-primary-icon:hover,
.button-primary:hover,
.button-primary-icon-without-text:hover,
.button-round-navMenu:hover,
.button-primary-icon-animated:hover {
  background-color: var(--primary-dark);
}
.button-primary-icon:disabled,
.button-primary:disabled,
.button-primary-icon-without-text:disabled,
.button-round-navMenu:disabled,
.button-primary-icon-animated:disabled {
  background-color: rgb(255, 255, 255);
  color: rgba(0, 0, 0, 0.38);
  border: 1px solid transparent;
  cursor: default;
  box-shadow: none;
}
.button-primary-icon:disabled svg,
.button-primary:disabled svg,
.button-primary-icon-without-text:disabled svg,
.button-round-navMenu:disabled svg,
.button-primary-icon-animated:disabled svg {
  stroke: rgba(0, 0, 0, 0.38);
}

.special-stroke svg {
  stroke: var(--primary-base) !important;
}

.button-primary-icon-animated {
  position: relative;
}

.button-primary-icon-animated::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--green-base);
  z-index: 0;
  transition: width 1s ease-in-out;
}

.button-primary-icon-animated.animate::after {
  animation: fillButton 1s forwards;
}

@keyframes fillButton {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.button-primary-icon-animated img,
.button-primary-icon-animated p {
  position: relative;
  z-index: 1; /* To be sure that <img/> and <p> must be under animation */
}

.button-secondary,
.button-secondary-icon,
.button-round-secondary-icon-without-text,
.button-secondary-icon-border-without-text {
  background-color: transparent;
  color: var(--primary-base);
  border: solid 1px #8D8D8D;
}
.button-secondary svg,
.button-secondary-icon svg,
.button-round-secondary-icon-without-text svg,
.button-secondary-icon-border-without-text svg {
  stroke: var(--primary-base);
}
.button-secondary:hover,
.button-secondary-icon:hover,
.button-round-secondary-icon-without-text:hover,
.button-secondary-icon-border-without-text:hover {
  border: solid 1px var(--primary-base);
  background-color: rgba(98, 0, 238, 0.1);
  color: var(--primary-base);
}
.button-secondary:disabled,
.button-secondary-icon:disabled,
.button-round-secondary-icon-without-text:disabled,
.button-secondary-icon-border-without-text:disabled {
  color: rgba(0, 0, 0, 0.12);
  cursor: default;
  border-color: rgba(0, 0, 0, 0.12);
}
.button-secondary:disabled svg,
.button-secondary-icon:disabled svg,
.button-round-secondary-icon-without-text:disabled svg,
.button-secondary-icon-border-without-text:disabled svg {
  stroke: rgba(0, 0, 0, 0.12);
}

.button-round-secondary-icon-without-text {
  border: solid 0px #8D8D8D;
  border-radius: 50%;
}
.button-round-secondary-icon-without-text:hover {
  border: solid 0px var(--primary-base);
}

.button-secondary-icon-border-without-text {
  border-radius: 4px;
  padding: 8px;
}

.button-secondary-icon-border-without-text svg {
  stroke: var(--grey-base);
}

.button-secondary-icon-carbone-without-text {
  background-color: var(--primary-medium);
  border: none;
  cursor: auto;
  border-radius: 6px;
  padding: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.button-secondary-icon-carbone-without-text svg {
  stroke: var(--carbone);
}

.disabled-button:hover {
  border: 1px solid var(--grey-light);
}

.button-primary-icon-green {
  background-color: var(--green-base);
  color: var(--white);
}
.button-primary-icon-green svg {
  stroke: var(--white);
}
.button-primary-icon-green:hover {
  cursor: default;
}

.button-round-primary-icon-red {
  background-color: var(--red-base);
  color: var(--white);
}
.button-round-primary-icon-red svg {
  stroke: var(--white);
}
.button-round-primary-icon-red:hover {
  cursor: default;
}

.button-primary-icon span,
.button-secondary-icon span,
.button-primary-icon-green span {
  margin-top: -6px;
  margin-right: 0px;
}

.button-primary-icon-without-text,
.button-round-secondary-icon-without-text {
  gap: 0px;
  border-radius: 4px;
  width: 36px;
}
.button-primary-icon-without-text span,
.button-round-secondary-icon-without-text span {
  margin-top: 10px;
  margin-right: 4px;
}

.button-round-primary,
.button-round-primary-icon-red,
.button-round-secondary,
.button-round-white,
.button-round-green,
.button-round-red,
.button-round-carbone {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  border: 0px solid #000;
}
.button-round-primary svg,
.button-round-primary-icon-red svg,
.button-round-secondary svg,
.button-round-white svg,
.button-round-green svg,
.button-round-red svg,
.button-round-carbone svg {
  stroke: var(--white);
}
.button-round-primary:hover,
.button-round-primary-icon-red:hover,
.button-round-secondary:hover,
.button-round-white:hover,
.button-round-green:hover,
.button-round-red:hover,
.button-round-carbone:hover {
  cursor: pointer;
}
.button-round-primary:disabled,
.button-round-primary-icon-red:disabled,
.button-round-secondary:disabled,
.button-round-white:disabled,
.button-round-green:disabled,
.button-round-red:disabled,
.button-round-carbone:disabled {
  cursor: default;
}
.button-round-primary span,
.button-round-primary-icon-red span,
.button-round-secondary span,
.button-round-white span,
.button-round-green span,
.button-round-red span,
.button-round-carbone span {
  display: flex;
  justify-content: center;
}

.button-round-primary {
  background-color: var(--primary-base);
}
.button-round-primary:hover {
  background-color: var(--primary-dark);
}
.button-round-primary:disabled {
  background-color: var(--grey-lighter);
}
.button-round-primary:disabled svg {
  stroke: var(--grey-light);
}

.button-round-secondary {
  background-color: transparent;
  border: 1px solid var(--grey-base);
}
.button-round-secondary svg {
  stroke: var(--primary-base);
}
.button-round-secondary:hover {
  border: 1px solid var(--primary-base);
  background-color: var(--primary-medium);
}
.button-round-secondary:disabled {
  background-color: transparent;
  border: 1px solid var(--grey-light);
}
.button-round-secondary:disabled svg {
  stroke: var(--grey-light);
}

.button-round-white {
  background-color: var(--white);
  color: var(--primary-base);
}
.button-round-white svg {
  stroke: var(--primary-base);
}

.button-round-green {
  background-color: var(--green-base);
}
.button-round-green svg {
  stroke: var(--white);
}

.button-round-red {
  background-color: var(--red-base);
}
.button-round-red svg {
  stroke: var(--white);
}

.button-round-carbone {
  background-color: var(--carbone);
}
.button-round-carbone svg {
  stroke: var(--white);
}

.button-pink-icon-without-text {
  background-color: transparent;
  color: var(--primary-base);
  border: solid 1px transparent;
  gap: 0px;
  border-radius: 4px;
  width: 36px;
}
.button-pink-icon-without-text svg {
  stroke: var(--primary-base);
}
.button-pink-icon-without-text:hover {
  background-color: #E7D9FC;
}
.button-pink-icon-without-text:disabled {
  background-color: rgba(0, 0, 0, 0.12);
  cursor: default;
}
.button-pink-icon-without-text div {
  gap: 0px;
}
.button-pink-icon-without-text span {
  margin-top: 10px;
  margin-right: 4px;
}

.button-red {
  background-color: var(--red-base) !important;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
  height: 36px;
  border-radius: 20px;
  border: 0px solid #000;
  margin-bottom: 0px;
}
.button-red svg {
  stroke: var(--white);
}
.button-red:hover {
  cursor: pointer;
  background-color: var(--red-dark) !important;
}
.button-red div {
  display: flex;
  height: 36px;
  align-items: center;
  gap: 5px;
}
.button-red span {
  height: 18px;
}

.button-recording {
  background-color: var(--green-base) !important;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 0 16px;
  height: 36px;
  border-radius: 20px;
  border: 0px solid #000;
  margin-bottom: 0px;
}
.button-recording svg {
  stroke: var(--white);
}
.button-recording:hover {
  cursor: pointer;
  background-color: #00622E !important;
}
.button-recording div {
  display: flex;
  height: 36px;
  align-items: center;
  gap: 5px;
}
.button-recording span {
  height: 18px;
}

.button-capsule-red {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  background-color: var(--red-base);
  color: var(--white);
  width: 220px;
  height: 70px;
  border-radius: 10px;
  border: none;
}
.button-capsule-red svg {
  stroke: var(--white);
}
.button-capsule-red:hover {
  background-color: var(--red-dark);
  color: var(--white);
}
.button-capsule-red:disabled {
  color: rgba(0, 0, 0, 0.12);
  cursor: default;
}
.button-capsule-red:disabled svg {
  stroke: rgba(0, 0, 0, 0.12);
}
.button-capsule-red div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.button-capsule-red div p {
  font-size: 20px !important;
  font-family: Avenir !important;
}

.button-pagination, .button-pagination-large {
  border-radius: 4px;
  height: 26px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--Grey-light, var(--grey-light));
  background-color: #8D8D8D;
  color: var(--white);
}
.button-pagination svg, .button-pagination-large svg {
  stroke: var(--white);
}
.button-pagination:hover, .button-pagination-large:hover {
  background-color: var(--primary-dark);
}
.button-pagination:disabled, .button-pagination-large:disabled {
  background-color: #F2F2F2;
  color: var(--grey-light);
  cursor: default;
  box-shadow: none;
}
.button-pagination:disabled svg, .button-pagination-large:disabled svg {
  stroke: var(--grey-light);
}
.button-pagination div, .button-pagination-large div {
  display: flex;
  height: 26px;
  margin-bottom: 0px;
}
.button-pagination span, .button-pagination-large span {
  height: 18px;
}
.button-pagination img, .button-pagination-large img {
  height: 18px;
  margin-top: auto;
  margin-bottom: auto;
}

.button-pagination {
  padding: 4px 6px;
}

.button-pagination-large {
  padding: 4px 14px;
}

.button-card-dashboard, .button-card-dashboard-unactived {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 0 16px;
  height: 36px;
  border-radius: 20px;
  border: 0px solid #000;
  margin-bottom: 0px;
  color: var(--primary-base);
}
.button-card-dashboard svg, .button-card-dashboard-unactived svg {
  stroke: var(--primary-base);
}

.button-card-dashboard {
  background-color: var(--primary-light);
}

.button-card-dashboard-unactived {
  background-color: var(--white);
}

*, *:focus, *:hover {
  outline: none;
}

.icon svg {
  display: flex;
  justify-content: center;
  align-items: center;
  stroke-width: 1.5;
}

.icon-stroke-width2 svg {
  stroke-width: 2;
}

.icon-color-primary-base svg {
  stroke: var(--primary-base);
}

.icon-fill-primary-base svg {
  fill: var(--primary-base);
}

.icon-color-primary-dark svg {
  stroke: var(--primary-dark);
}

.icon-fill-primary-dark svg {
  fill: var(--primary-dark);
}

.icon-color-primary-medium svg {
  stroke: var(--primary-medium);
}

.icon-fill-primary-medium svg {
  fill: var(--primary-medium);
}

.icon-color-grey svg {
  stroke: var(--grey-base);
}

.icon-fill-grey svg {
  fill: var(--grey-base);
}

.icon-color-grey-light svg {
  stroke: var(--grey-light);
}

.icon-fill-grey-light svg {
  fill: var(--grey-light);
}

.icon-color-yellow-base svg {
  stroke: var(--yellow-base);
}

.icon-fill-yellow-base svg {
  fill: var(--yellow-base);
}

.icon-color-white svg {
  stroke: var(--white);
}

.icon-fill-white svg {
  fill: var(--white);
}

.icon-color-carbone svg {
  stroke: var(--carbone);
}

.icon-fill-carbone svg {
  fill: var(--carbone);
}

.icon-height16 svg {
  width: 16px;
  height: 16px;
}

.icon-height20 svg {
  width: 20px;
  height: 20px;
}

.filled-icon .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 24;
}

.help-icon .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 10;
}

.spinner-ButtonSKA {
  margin-top: 4px !important;
}

.rotate-icon .material-symbols-outlined {
  transform: rotate(90deg);
}

.modal {
  position: fixed;
  z-index: 1300;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
}

.modal-black-box {
  opacity: 1;
  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  position: fixed;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
  z-index: -1;
}

.modal-container {
  opacity: 1;
  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  height: 100%;
  outline: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.modal-paper {
  display: flex;
  flex-direction: column;
  width: 600px;
  max-height: calc(100vh - 80px);
  margin: 20px;
  border-radius: 6px;
  background: var(--white);
}

.modal-header {
  align-items: center;
  gap: 10px;
  padding: 20px;
  width: calc(100% - 40px);
  background: var(--primary-medium);
  color: var(--primary-base);
  -ms-flex-item-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: flex;
  flex-direction: row;
  border-radius: 6px 6px 0 0;
}
.modal-header .header-info {
  color: var(--primary-base);
  font-size: 14px;
  font-weight: 400;
}

.modal-body {
  padding: 20px;
  width: calc(100% - 40px);
  max-height: calc(100% - 56px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 20px;
  color: var(--Carbone, var(--carbone));
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.modal-body .ContentName {
  width: 120px;
  text-align: left;
}
.modal-body .ContentTitle {
  min-width: 140px;
  display: flex;
  text-align: left;
  flex-direction: row;
  color: var(--primary-base);
  width: 100%;
  padding: 0 0 0 0;
  font-size: 22px;
  font-weight: 700;
}

.modal-footer {
  display: flex;
  align-content: flex-end;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  padding: 20px;
  background-color: var(--grey-lighter);
  border-radius: 0 0 6px 6px;
}
.modal-footer .container-button-group-footer-modal {
  display: flex;
  gap: 10px;
  padding: 5px 5px 5px 20px;
  background-color: var(--primary-medium);
  border-radius: 46px;
  align-items: center;
}
.modal-footer .container-button-group-footer-modal .info-button-group-footer-modal {
  color: var(--primary-base);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.drawer-container {
  opacity: 1;
  transition: width 0.3s ease-in;
  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  position: absolute;
  right: 0;
}

.drawer-paper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: var(--white);
}

.UploadHover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  pointer-events: none;
}

.ToggleButtonRoot {
  color: var(--red-base);
}

.SquareRadioButton {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 24px;
  width: 24px;
}
.SquareRadioButton input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.SquareRadioButton .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--white);
  border-radius: 4px;
  border: 2px solid var(--carbone);
}
.SquareRadioButton .checkmark-circle {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--white);
  border-radius: 50%;
  border: 2px solid var(--carbone);
}
.SquareRadioButton input:checked ~ .checkmark,
.SquareRadioButton input:checked ~ .checkmark-circle {
  border: 2px solid var(--primary-base);
}
.SquareRadioButton input:disabled ~ .checkmark,
.SquareRadioButton input:disabled ~ .checkmark-circle {
  border: 2px solid var(--grey-light);
}
.SquareRadioButton .checkmark:after {
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--primary-base);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.SquareRadioButton .checkmark-circle:after {
  width: 10px;
  height: 10px;
  background-color: var(--primary-base);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.SquareRadioButton input:disabled + .checkmark-circle::after {
  background-color: var(--grey-light);
}
.SquareRadioButton .checkmark:after,
.SquareRadioButton .checkmark-circle:after {
  content: "";
  position: absolute;
  display: none;
}
.SquareRadioButton input:checked ~ .checkmark:after,
.SquareRadioButton input:checked ~ .checkmark-circle:after {
  display: block;
}
.SquareRadioButton input:disabled ~ .checkmark:after,
.SquareRadioButton input:disabled ~ .checkmark-circle:after {
  border: solid var(--grey-light);
  border-width: 0 3px 3px 0;
}

.SwitchButton {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}
.SwitchButton input {
  opacity: 0;
  width: 0;
  height: 0;
}
.SwitchButton input + .slider {
  background-color: var(--carbone);
}
.SwitchButton .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--carbone);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
.SwitchButton .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
.SwitchButton input:checked + .slider {
  background-color: var(--primary-base);
}
.SwitchButton input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-base);
}
.SwitchButton input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}
.SwitchButton input:disabled {
  cursor: default;
}
.SwitchButton input:disabled + .slider {
  background-color: var(--grey-light);
}

.container-release-note {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-release-note .title-release-note {
  font-size: 22px;
  font-weight: 700;
  color: var(--carbone);
  margin: 0;
}
.container-release-note .container-feature {
  background-color: var(--grey-lighter);
  border-radius: 6px;
  padding: 20px;
  gap: 20px;
  display: flex;
  flex-direction: column;
}
.container-release-note .container-feature .title-feature {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-base);
  margin: 0;
}
.container-release-note .container-feature .text-feature {
  font-size: 14px;
  font-weight: 400;
  color: var(--carbone);
  margin: 0;
}
.container-release-note .container-feature .text-feature h3 {
  font-size: 14px;
  font-weight: 700;
}
.container-release-note .container-feature .text-feature p {
  margin: 0;
}
.container-release-note .container-feature .text-feature ul {
  margin: 0;
}
.container-release-note .container-feature .text-feature li {
  margin-bottom: 10px;
}
.container-release-note .container-feature .text-feature li:last-child {
  margin-bottom: 0;
}

.toggle {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 10px;
}
.toggle .toggle-button {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}
.toggle .toggle-button input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle .toggle-button input + .slider {
  background-color: var(--carbone);
}
.toggle .toggle-button .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--carbone);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
.toggle .toggle-button .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: var(--white);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
.toggle .toggle-button input:checked + .slider {
  background-color: var(--primary-base);
}
.toggle .toggle-button input:focus + .slider {
  box-shadow: 0 0 1px var(--primary-base);
}
.toggle .toggle-button input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}
.toggle .toggle-button input:disabled {
  cursor: default;
}
.toggle .toggle-button input:disabled + .slider {
  background-color: var(--grey-light);
}
.toggle .toggle.disabled .slider {
  background-color: var(--grey-light);
  cursor: not-allowed;
}
.toggle .toggle.disabled input:checked + .slider {
  background-color: var(--grey-light);
}

.modal-pairing-code {
  width: 400px;
  background-color: var(--white);
  border-radius: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-pairing-code .text-modal-pairing-code {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}
.modal-pairing-code .container-code-input {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.modal-pairing-code .code-digit {
  width: 56px;
  height: 60px;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
  border: none;
  border-radius: 6px 6px 0 0;
  background-color: var(--grey-lighter);
  font-weight: 600;
  outline: none;
}
.modal-pairing-code .code-digit:focus {
  border-color: var(--primary-base);
}

.pill-default, .pill-current {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 0 16px;
  height: 30px;
  border-radius: 6px;
  margin-bottom: 0px;
  color: var(--primary-base);
}

.pill-default {
  background-color: transparent;
  border: 1px solid var(--primary-medium);
}
.pill-default:hover {
  border: 1px solid var(--primary-base);
  background-color: transparent;
}

.pill-current {
  background-color: var(--primary-light);
  border: 1px solid var(--primary-light);
}

.tooltip-graph-bar-composed {
  display: flex;
  flex-direction: column;
  background: var(--carbone);
  border: 1px solid var(--white);
  border-radius: 5px;
  padding: 10px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: auto;
  margin-bottom: auto;
}
.tooltip-graph-bar-composed .header-tooltip-graph-bar-composed {
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
.tooltip-graph-bar-composed .header-tooltip-graph-bar-composed p {
  margin: 0;
}
.tooltip-graph-bar-composed .header-tooltip-graph-bar-composed span {
  color: var(--grey-light);
  margin-left: 10px;
}
.tooltip-graph-bar-composed .header-tooltip-graph-bar-composed p:first-of-type span {
  margin-left: 13px;
}
.tooltip-graph-bar-composed .module-graph-bar-composed {
  display: flex;
  align-items: center;
  padding-top: 5px;
  font-weight: 400;
  font-size: 14px;
}
.tooltip-graph-bar-composed .module-graph-bar-composed #cercle-graph-bar-composed {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  display: block;
  border: solid 1px var(--white);
  margin-right: 10px;
}
.tooltip-graph-bar-composed .module-graph-bar-composed p {
  color: var(--white);
  margin: 0px;
}
.tooltip-graph-bar-composed .module-graph-bar-composed .label-module-graph-bar-composed {
  margin-right: 10px;
}
.tooltip-graph-bar-composed .module-graph-bar-composed .value-module-graph-bar-composed {
  color: var(--grey-light);
}
.tooltip-graph-bar-composed .date-or-hour {
  color: var(--white);
  margin: 0px;
  font-weight: 300;
  text-align: left;
}
.tooltip-graph-bar-composed .date-or-hour span {
  font-weight: 500;
}
.tooltip-graph-bar-composed .p-module1 {
  color: #EF8354;
}
.tooltip-graph-bar-composed .p-module2 {
  color: #00B3A6;
}
.tooltip-graph-bar-composed .p-module3 {
  color: #CC3780;
}
.tooltip-graph-bar-composed .p-module4 {
  color: #7F39FB;
}
.tooltip-graph-bar-composed .p-Other {
  color: #376BB0;
}

.graph-bar-composed {
  font-size: 120px;
  font-weight: 300;
  height: 275px;
  width: 100%;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--primary-base);
  overflow: auto;
  max-width: calc(50vw - 80px);
}

.TextField-small-filled {
  display: flex;
  height: 40px;
  padding: 4px 10px;
  justify-content: center;
  align-items: center;
  border-radius: 6px 6px 0px 0px;
  border: 0;
  background: var(--white);
  box-shadow: 0px -1px 0px 0px var(--grey-base) inset;
  color: var(--Carbone, rgba(0, 0, 0, 0.87));
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.TextField-small-filled ::placeholder {
  color: var(--grey-light);
  opacity: 0.7;
}
.TextField-small-filled ::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--grey-light);
  opacity: 0.7;
}

.TextField-small-filled::placeholder {
  color: var(--grey-light);
}

.container-phone-input .TextField-small-filled {
  border-radius: 0px 6px 0px 0px;
}

.custom-select-container {
  height: 48px;
  border-radius: 6px 6px 0px 0px;
  background: var(--input-background);
  box-shadow: 0px -1px 0px 0px var(--grey-base) inset;
  position: relative;
}

.selected-text {
  padding: 14px 10px;
  text-align: left;
}

.selected-text::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 20px;
  opacity: 0;
  border: 7px solid transparent;
  border-color: var(--grey-light) transparent transparent transparent;
}

.selected-text.active::after {
  top: 13px;
  opacity: 0;
  border-color: transparent transparent var(--grey-light) transparent;
}

.custom-select-container ul {
  margin: 0;
  padding: 0;
  text-align: center;
  background: var(--input-background);
  border-bottom: 1px solid var(--carbone);
}

.select-options {
  position: absolute;
  width: 100%;
}

.custom-select-option {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  font-size: 14px;
}

.custom-select-container li {
  list-style-type: none;
  text-align: left;
  padding: 6px 10px;
  background: var(--input-background);
  border-bottom: 0px solid #37b0b0;
  cursor: pointer;
}

.custom-select-container li:hover {
  background-color: var(--grey-light);
}

.importFileField {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 10px;
  flex: 1;
  border-radius: 6px 6px 0px 0px;
  background: var(--input-background);
  box-shadow: 0px -1px 0px 0px var(--grey-base) inset;
}

.InputImage {
  height: 48px;
  width: 48px;
  border-radius: 3px;
  background-color: var(--grey-light);
}

.progress-bar-import {
  background-color: var(--primary-medium);
  height: 6px;
  width: 80px;
  margin: 0 auto;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.progress-bar-import:before {
  content: "";
  border-radius: 10px;
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
}

.progress-bar-import .bar-progress-import {
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  left: 0;
  background: var(--primary-base);
  width: 0;
  animation: borealisBar 2s linear infinite;
}

@keyframes borealisBar {
  0% {
    left: 0%;
    right: 100%;
    width: 0%;
  }
  10% {
    left: 0%;
    right: 75%;
    width: 25%;
  }
  90% {
    right: 0%;
    left: 75%;
    width: 25%;
  }
  100% {
    left: 100%;
    right: 0%;
    width: 0%;
  }
}
.categoryTitle {
  width: 100%;
  color: var(--grey-base);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: left;
}

.categoryBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

.cardResourceContainer {
  display: flex;
  width: 300px;
  height: 200px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 10px;
}

.cardResourceImage {
  display: flex;
  flex-grow: 1;
  align-self: stretch;
  border-radius: 10px 10px 0px 0px;
  border-top: var(--thickness-regular, 1px) solid var(--grey-light);
  border-right: var(--thickness-regular, 1px) solid var(--grey-light);
  border-left: var(--thickness-regular, 1px) solid var(--grey-light);
}

.cardResourceBottom {
  display: flex;
  height: 48px;
  padding: 10px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 0px 0px 10px 10px;
  border-right: var(--thickness-regular, 1px) solid var(--grey-light);
  border-bottom: var(--thickness-regular, 1px) solid var(--grey-light);
  border-left: var(--thickness-regular, 1px) solid var(--grey-light);
  border-top: var(--thickness-regular, 1px) solid var(--grey-light);
  background: var(--white);
}

.header-call-app {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  height: 80px;
  background-color: var(--white);
  padding: 0 20px;
}
.header-call-app .logo-header-call-app {
  height: 24px;
}
.header-call-app .container-buttons-header-call-app {
  display: flex;
  gap: 20px;
  align-items: center;
}

.header-call-app-mobile {
  z-index: 1;
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 0 0 20px 20px;
  justify-content: space-between;
  position: relative;
}
.header-call-app-mobile .logo-header-call-app-mobile {
  height: 16px;
}

.container-stars {
  display: flex;
  gap: 10px;
}

.video-message {
  position: relative;
}

.slider-video-message {
  width: calc(100% - 40px);
  position: absolute;
  left: 20px;
  bottom: 20px;
  appearance: none;
  height: 2px;
  background: linear-gradient(to right, var(--carbone) 0%, var(--white) 0%);
  background-color: var(--carbone);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  outline: none;
  cursor: pointer;
  margin-top: 6px;
}

/* Le "thumb" (round white) */
.slider-video-message::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  margin-top: -1px;
}

.slider-video-message::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: none;
}

.carousel-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.carousel-container .carousel-header {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.carousel-container .carousel-header .card-transition-carousel {
  display: flex;
  background-color: var(--white);
  border-radius: 6px;
  padding: 20px;
}
.carousel-container .carousel-header .card-time-advertisement-carousel {
  display: flex;
  gap: 20px;
  align-items: center;
  background-color: var(--white);
  border-radius: 6px;
  padding: 20px;
}
.carousel-container .carousel-header .card-time-advertisement-carousel p {
  margin: 0;
  font-size: 14px;
}
.carousel-container .carousel-header .card-advice-carousel {
  background-color: #D7DAE2;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  align-items: center;
}
.carousel-container .carousel-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  padding-right: 10px;
}

.carousel-item-container {
  background-color: var(--white);
  border-radius: 6px;
  padding: 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr auto;
  align-items: center;
  gap: 20px;
}
.carousel-item-container h3 {
  color: var(--grey-base);
  margin: 0;
  font-size: 14px;
}
.carousel-item-container p {
  color: var(--carbone);
  margin: 0;
  font-size: 14px;
}
.carousel-item-container .carousel-thumb-name {
  display: flex;
  gap: 20px;
  width: 320px;
}
.carousel-item-container .carousel-thumb-name .carousel-thumb {
  width: 56px;
  height: 100px;
  border-radius: 6px;
}
.carousel-item-container .carousel-thumb-name .carousel-thumb .carousel-thumb {
  width: 100%;
  height: 100%;
}
.carousel-item-container .carousel-name, .carousel-item-container .carousel-button, .carousel-item-container .carousel-text-button, .carousel-item-container .carousel-link {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-item-container .carousel-action {
  display: flex;
  gap: 10px;
}

.carousel-empty-item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-radius: 6px;
  border: solid 1px var(--grey-light);
}
.carousel-empty-item-container .carousel-thumb-empty {
  width: 56px;
  height: 100px;
  border-radius: 6px;
  background-color: var(--grey-light);
}

.commitment-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.commitment-container .commitment-header {
  display: flex;
  gap: 20px;
  width: 100%;
}
.commitment-container .commitment-header .card-commitment {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: var(--white);
  padding: 20px;
  border-radius: 6px;
}
.commitment-container .commitment-header .card-commitment .card-commitment-number {
  margin: 0;
  font-size: 96px;
  font-weight: 300;
  color: var(--primary-base);
}
.commitment-container .commitment-main {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
  background-color: var(--white);
  border-radius: 6px;
  overflow: auto;
}
.commitment-container .commitment-main .card-ad-container {
  flex: 1;
  justify-items: center;
  background-color: var(--grey-lighter);
  border-radius: 4px;
  padding: 20px;
}
.commitment-container .commitment-main .card-ad-container .card-ad {
  width: 281px;
  height: 584px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.commitment-container .commitment-main .card-ad-container .card-ad .thumb-card-ad {
  width: 100%;
  height: 500px;
  flex: 0 0 500px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.commitment-container .commitment-main .card-ad-container .card-ad .infos-card-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.commitment-container .commitment-main .card-ad-container .card-ad .infos-card-ad .name-card-ad {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--carbone);
}
.commitment-container .commitment-main .card-ad-container .card-ad .infos-card-ad .view-click-card-ad {
  display: flex;
  gap: 20px;
}
.commitment-container .commitment-main .card-ad-container .card-ad .infos-card-ad .view-click-card-ad .view-click-icon-card-ad {
  display: flex;
  align-items: center;
  gap: 7px;
}
.commitment-container .commitment-main .card-ad-container .card-ad .infos-card-ad .view-click-card-ad .view-click-icon-card-ad p {
  margin: 0;
  font-size: 14px;
  color: var(--carbone);
}
.Toastify__toast-container {
  z-index: 9999;
  -webkit-transform: translateZ(9999px);
  position: fixed;
  padding: 4px;
  width: 320px;
  box-sizing: border-box;
  color: #fff;
}

.Toastify__toast-container--top-left {
  top: 1em;
  left: 1em;
}

.Toastify__toast-container--top-center {
  top: 1em;
  left: 50%;
  margin-left: -160px;
}

.Toastify__toast-container--top-right {
  top: 1em;
  right: 1em;
}

.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}

.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  margin-left: -160px;
}

.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Toastify__toast-container--top-center, .Toastify__toast-container--top-left, .Toastify__toast-container--top-right {
    top: 0;
  }
  .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-right {
    bottom: 0;
  }
  .Toastify__toast-container--rtl {
    right: 0;
    left: auto;
  }
}
.Toastify__toast {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 1px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-height: 800px;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
  direction: ltr;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--default {
  background: #fff;
  color: #aaa;
}

.Toastify__toast--info {
  background: #3498db;
}

.Toastify__toast--success {
  background: #07bc0c;
}

.Toastify__toast--warning {
  background: #f1c40f;
}

.Toastify__toast--error {
  background: #e74c3c;
}

.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1;
  flex: 1;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast {
    margin-bottom: 0;
  }
}
.Toastify__close-button {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.Toastify__close-button--default {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button:focus, .Toastify__close-button:hover {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  opacity: 0.7;
  background-color: hsla(0, 0%, 100%, 0.7);
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  transform-origin: right;
}

.Toastify__progress-bar--default {
  background: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}

@keyframes Toastify__bounceInRight {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--bottom-left, .Toastify__bounce-enter--top-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--bottom-right, .Toastify__bounce-enter--top-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--bottom-left, .Toastify__bounce-exit--top-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--bottom-right, .Toastify__bounce-exit--top-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  0% {
    transform: perspective(400px) rotateX(90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  0% {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  0% {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideInLeft {
  0% {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideInUp {
  0% {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideInDown {
  0% {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__slideOutRight {
  0% {
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}
@keyframes Toastify__slideOutLeft {
  0% {
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}
@keyframes Toastify__slideOutDown {
  0% {
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  0% {
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--bottom-left, .Toastify__slide-enter--top-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--bottom-right, .Toastify__slide-enter--top-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--bottom-left, .Toastify__slide-exit--top-left {
  animation-name: Toastify__slideOutLeft;
}

.Toastify__slide-exit--bottom-right, .Toastify__slide-exit--top-right {
  animation-name: Toastify__slideOutRight;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}

.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
}

.react-grid-item img {
  pointer-events: none;
  user-select: none;
}

.react-grid-item.cssTransforms {
  transition-property: transform;
}

.react-grid-item.resizing {
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}

.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
  background-position: bottom right;
  padding: 0 3px 3px 0;
}

.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}

.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}

.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}

.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}

.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}

.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}

.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}

.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}

.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}

.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.rdp {
  --rdp-cell-size: 40px; /* Size of the day cells. */
  --rdp-caption-font-size: 18px; /* Font size for the caption labels. */
  --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */
  --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */
  --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */
  --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */
  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
  --rdp-selected-color: #fff; /* Color of selected day text */
  margin: 1em;
}

/* Hide elements for devices that are not screen readers */
.rdp-vhidden {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: absolute !important;
  top: 0;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
}

/* Buttons */
.rdp-button_reset {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  cursor: default;
  color: inherit;
  background: none;
  font: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.rdp-button_reset:focus-visible {
  /* Make sure to reset outline only when :focus-visible is supported */
  outline: none;
}

.rdp-button {
  border: 2px solid transparent;
}

.rdp-button[disabled]:not(.rdp-day_selected) {
  opacity: 0.25;
}

.rdp-button:not([disabled]) {
  cursor: pointer;
}

.rdp-button:focus-visible:not([disabled]) {
  color: inherit;
  background-color: var(--rdp-background-color);
  border: var(--rdp-outline);
}

.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
  background-color: var(--rdp-background-color);
}

.rdp-months {
  display: flex;
}

.rdp-month {
  margin: 0 1em;
}

.rdp-month:first-child {
  margin-left: 0;
}

.rdp-month:last-child {
  margin-right: 0;
}

.rdp-table {
  margin: 0;
  max-width: calc(var(--rdp-cell-size) * 7);
  border-collapse: collapse;
}

.rdp-with_weeknumber .rdp-table {
  max-width: calc(var(--rdp-cell-size) * 8);
  border-collapse: collapse;
}

.rdp-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  text-align: left;
}

.rdp-multiple_months .rdp-caption {
  position: relative;
  display: block;
  text-align: center;
}

.rdp-caption_dropdowns {
  position: relative;
  display: inline-flex;
}

.rdp-caption_label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 0.25em;
  white-space: nowrap;
  color: currentColor;
  border: 0;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: var(--rdp-caption-font-size);
  font-weight: bold;
}

.rdp-nav {
  white-space: nowrap;
}

.rdp-multiple_months .rdp-caption_start .rdp-nav {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.rdp-multiple_months .rdp-caption_end .rdp-nav {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.rdp-nav_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-cell-size);
  height: var(--rdp-cell-size);
  padding: 0.25em;
  border-radius: 100%;
}

/* ---------- */
/* Dropdowns  */
/* ---------- */
.rdp-dropdown_year,
.rdp-dropdown_month {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown {
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  opacity: 0;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.rdp-dropdown[disabled] {
  opacity: unset;
  color: unset;
}

.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
  background-color: var(--rdp-background-color);
  border: var(--rdp-outline);
  border-radius: 6px;
}

.rdp-dropdown_icon {
  margin: 0 0 0 5px;
}

.rdp-head {
  border: 0;
}

.rdp-head_row,
.rdp-row {
  height: 100%;
}

.rdp-head_cell {
  vertical-align: middle;
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;
  text-transform: uppercase;
}

.rdp-tbody {
  border: 0;
}

.rdp-tfoot {
  margin: 0.5em;
}

.rdp-cell {
  width: var(--rdp-cell-size);
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;
  text-align: center;
}

.rdp-weeknumber {
  font-size: 0.75em;
}

.rdp-weeknumber,
.rdp-day {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--rdp-cell-size);
  max-width: var(--rdp-cell-size);
  height: var(--rdp-cell-size);
  margin: 0;
  border: 2px solid transparent;
  border-radius: 100%;
}

.rdp-day_today:not(.rdp-day_outside) {
  font-weight: bold;
}

.rdp-day_selected,
.rdp-day_selected:focus-visible,
.rdp-day_selected:hover {
  color: var(--rdp-selected-color);
  opacity: 1;
  background-color: var(--rdp-accent-color);
}

.rdp-day_outside {
  opacity: 0.5;
}

.rdp-day_selected:focus-visible {
  /* Since the background is the same use again the outline */
  outline: var(--rdp-outline);
  outline-offset: 2px;
  z-index: 1;
}

.rdp:not([dir=rtl]) .rdp-day_range_start:not(.rdp-day_range_end) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rdp:not([dir=rtl]) .rdp-day_range_end:not(.rdp-day_range_start) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rdp[dir=rtl] .rdp-day_range_start:not(.rdp-day_range_end) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rdp[dir=rtl] .rdp-day_range_end:not(.rdp-day_range_start) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rdp-day_range_end.rdp-day_range_start {
  border-radius: 100%;
}

.rdp-day_range_middle {
  border-radius: 0;
}


/* CSS variables. */
:root {
  --PhoneInput-color--focus: #03b2cb;
  --PhoneInputInternationalIconPhone-opacity: 0.8;
  --PhoneInputInternationalIconGlobe-opacity: 0.65;
  --PhoneInputCountrySelect-marginRight: 0.35em;
  --PhoneInputCountrySelectArrow-width: 0.3em;
  --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
  --PhoneInputCountrySelectArrow-borderWidth: 1px;
  --PhoneInputCountrySelectArrow-opacity: 0.45;
  --PhoneInputCountrySelectArrow-color: currentColor;
  --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
  --PhoneInputCountrySelectArrow-transform: rotate(45deg);
  --PhoneInputCountryFlag-aspectRatio: 1.5;
  --PhoneInputCountryFlag-height: 1em;
  --PhoneInputCountryFlag-borderWidth: 1px;
  --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
  --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
  --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
  /* This is done to stretch the contents of this component. */
  display: flex;
  align-items: center;
}

.PhoneInputInput {
  /* The phone number input stretches to fill all empty space */
  flex: 1;
  /* The phone number input should shrink
     to make room for the extension input */
  min-width: 0;
}

.PhoneInputCountryIcon {
  width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
  height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
  width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
  /* Removed `background-color` because when an `<img/>` was still loading
     it would show a dark gray rectangle. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
     and sometime there can be seen white pixels of the background at top and bottom. */
  background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
  /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
     and sometime there can be seen white pixels of the background at top and bottom,
     so an additional "inset" border is added. */
  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
  /* Fixes weird vertical space above the flag icon. */
  /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
  display: block;
  /* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
     Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
  width: 100%;
  height: 100%;
}

.PhoneInputInternationalIconPhone {
  opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
  opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */
.PhoneInputCountry {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
  cursor: default;
}

.PhoneInputCountrySelectArrow {
  display: block;
  content: "";
  width: var(--PhoneInputCountrySelectArrow-width);
  height: var(--PhoneInputCountrySelectArrow-width);
  margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
  border-style: solid;
  border-color: var(--PhoneInputCountrySelectArrow-color);
  border-top-width: 0;
  border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  border-left-width: 0;
  border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  transform: var(--PhoneInputCountrySelectArrow-transform);
  opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}

/*# sourceMappingURL=site.css.map*/