body {
  font-size: 0.875rem; /*=14px*/
  overscroll-behavior: contain;
}

.header-area.navbar-fixed-top {
    position: unset;
}

.hide-old-ui {
  display: none;
}

.canvasBox {
  position: absolute;
  top: 0;
  padding-top: 0;
  /*padding-top: 70px;*//*If the top menu is here*/
  padding-bottom: 165px;
}

#canvasContainer {
  background-image: url('/static/img/peli-melo-placeholder.svg');
  background-repeat: no-repeat;
  background-position: center;
}


.bottompanel {
    background: #eeeeee;
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 0px 6px 10px rgba(0,0,0,0.4);
    transition: all .3s;
}

.bottompanel .padding-15 {
  padding: 15px;
}

.bottompanel .padding-top-15 {
  padding-top: 15px;
}

.bottompanel .padding-7 {
  padding: 7.5px;
}

.bottompanel .padding-top-7 {
  padding-top: 7.5px;
}

.expand-button {
    position: absolute;
    top: -20px;
    right: 15px;
    cursor: pointer;
}

.bottompanel .menu {
}
.bottompanel .collapsable.swipe-transition {
    transition: all 0.3s;
}
.expand-button .expand-icon {
    display: none;
}
.expand-button.collapsed .expand-icon {
    display: block;
}
.expand-button .collapse-icon {
    display: block;
}
.expand-button.collapsed .collapse-icon {
    display: none;
}


.bottompanel .subpanel {
    transition: all 0.3s;
    overflow: hidden;
    opacity: 1;
}

.bottompanel .subpanel.subpanel-hidden {
    max-height: 0px !important;
    opacity: 0 !important;
    pointer-events: none;
}

.bottompanel .subpanel-title-left-icon, .bottompanel .subpanel-title-right-icon {
  width: 40px;
  height: 40px;
  transition: all 0.3s;
}

.bottompanel .subpanel-title-left-icon:hover, .bottompanel .subpanel-title-left-icon:active {
  cursor: pointer;
  transform: scale(0.96);
}

.bottompanel .subpanel-title {
  padding: 7.5px 15px 7.5px 15px;
  color: #262626;
  font-size: 16px;
}

.menu-switch-algo .selectable-item {
  flex: 1;
  overflow: auto;
}

.menu-switch-algo .selectable-item > img {
  padding: calc(15px / 2);
}

.selectable-item {
  border: 2px solid transparent;
  border-radius: 8px;
  transition: all 0.3s;
}
.no-touchevents .selectable-item:not(.disabled):hover, .selectable-item:not(.disabled):active {
  cursor: pointer;
  transform: scale(0.96);
}
.selectable-item:not(.disabled).selected {
  border-color: #e43c5c;
}
.selectable-item.disabled {
  opacity: .5;
}

.menu-change-borders .color-choice {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
}

.menu-change-borders .color-choice.color-10 {
  font-size: 1.2rem;
  line-height: 2rem;
  text-align: center;
  border: 1px solid #262626;
  color: #262626;
  overflow: hidden;
  position: relative;
}

.color-choice-more-icon {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: -1px;
  height: 2rem;
  width: 2rem;
}
.menu-change-borders .color-choice .sp-replacer {
  border: none;
  display: inline;
}

.menu-change-borders .color-choice .sp-preview {
  width: 100%;
  height: 100%;
  border: none;
}

.pm-color-picker {
  border: 0;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

.pm-color-picker .sp-picker-container {
  border: 0;
}

.images-list {
  max-height: 50vh;
  overflow: auto;
}

/* CUSTOM RANGE */
.custom-range:focus::-webkit-slider-thumb {
  box-shadow: none;
}
.custom-range::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: #e64c69;
  transition: all 0.3s;
}
.custom-range::-webkit-slider-thumb:active {
  background: #e64c69;
  width: 1.1rem;
  height: 1.1rem;
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: none;
}
.custom-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: #e64c69;
  transition: all 0.3s;
}
.custom-range::-moz-range-thumb:active {
  background: #e64c69;
  width: 1.1rem;
  height: 1.1rem;
}

.custom-range:focus::-ms-thumb {
  box-shadow: none;
}
.custom-range::-ms-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: #e64c69;
  transition: all 0.3s;
}
.custom-range::-ms-thumb:active {
  background: #e64c69;
  width: 1.1rem;
  height: 1.1rem;
}

.thumbnail-image {
  width: 60px;
  height: 60px;
  margin: 7.5px;
  background-size: 60px 60px;
  background-position: center;
}

/* BUTTONS */
button.ui {
  color: #fff;
  background-color: #e43c5c;
  padding: 0 20px;
  border-radius: 40px;
  height: 40px;
  line-height: 40px;
  border: none;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
  transition: all 0.3s;
  user-select: none;
  display: block;
  font-family: "Montserrat", sans-serif;
  margin: 0 auto;
  fill: currentColor;
}
button.ui.primary {
  width: 80%;
}
.no-touchevents button.ui:not(:disabled):hover, button.ui:not(:disabled):active {
  cursor: pointer;
  color: #fff !important;
  border-color: none;
  background-color: #e64c69 !important;
  transform: scale(0.96);
}
button.ui:not(:disabled):active {
  box-shadow: 0 0 0 0.2rem #ed7f94;
  outline: none;
  transition: all 0.3s, box-shadow 1s;
}
button.ui:disabled:not(.outline), button.ui:disabled:not(.transparent) {
  color: white;
  border-color: #f7c2cc;
  background-color: #f7c2cc;
}
button.ui:disabled.outline {
  color: #f7c2cc;
  border-color: #f7c2cc;
  background-color: transparent;
}
button.ui:disabled.transparent {
  color: #f7c2cc;
  border-color: transparent;
  background-color: transparent;
}
button.ui.outline {
  color: #e43c5c;
  background-color: transparent;
}
button.ui.transparent {
  color: #e43c5c;
  border-color: transparent;
  background-color: transparent;
}
button.ui.activated {
  color: #fff !important;
  background-color: #e43c5c !important;
}
button.ui.compact {
  padding: 0 0.2em;
}
button.ui.grey {
  color: #282828;
  background-color: #dbdbdb;
  padding: 0 2.5px;
  border-radius: 5px;
  height: auto;
  line-height: auto;
  border: none;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
  transition: all 0.3s;
  user-select: none;
  padding: 0 10px;
  color: #282828 !important;
}
.no-touchevents button.ui.grey:not(:disabled):hover {
  cursor: pointer;
  color: #282828 !important;
  border-color: none;
  background-color: #dedede !important;
  transform: scale(0.96);
}
button.ui.grey:not(:disabled):active {
  box-shadow: 0 0 0 0.2rem white;
  outline: none;
  transition: all 0.3s, box-shadow 1s;
}
button.ui.grey:disabled:not(.outline), button.ui.grey:disabled:not(.transparent) {
  color: #757575;
  border-color: white;
  background-color: white;
}
button.ui.grey:disabled.outline {
  color: white;
  border-color: white;
  background-color: transparent;
}
button.ui.grey:disabled.transparent {
  color: white;
  border-color: transparent;
  background-color: transparent;
  opacity: .5;
}
button.ui.grey.outline {
  color: #dbdbdb;
  background-color: transparent;
}
button.ui.grey.transparent {
  color: #dbdbdb;
  border-color: transparent;
  background-color: transparent;
}
button.ui.grey.activated {
  color: #282828 !important;
  background-color: #dbdbdb !important;
}
button.ui.grey.compact {
  padding: 0 0.2em;
}

/*The :not(:disabled) is only to win the css priority war with the classes above..*/
button.ui.grey:not(:disabled):active.active,
button.ui.grey:not(:disabled):hover.active,
button.ui.grey:not(:disabled).active {
  color: #e43c5c !important;
}

.menu-main .collapsable {
  max-height: 0;
}

.menu-main .buttons-container {
  max-width: 330px;
  margin-bottom: 1px;
}

.menu-main .buttons-container button {
  min-width: 104px;
}

.menu-resize-poster .estimated-price {
  text-align: center;
  margin: 15px;
  font-size: 16px;
  font-weight: 600;
}

.button-change-date {
  background: url("/static/img/icons/icon_change_date.svg");
  background-size: 60px 60px;
  background-repeat: no-repeat;
}

/*The top menu is now removed*/
/* @media (min-width: 768px) {
  .canvasBox {
    padding-top: 90px;
  }
} */

/*DESKTOP STYLES - LG*/
@media (min-width: 992px) {
  .canvasBox {
    padding-bottom: 120px;
  }
  /*MENU MAIN*/
  .menu-main .buttons-container {
    max-width: inherit;
  }

  .menu-main .buttons-container button {
    min-width: 90px;
  }

  .menu-main-collapsable .collapsable {
    max-height: inherit !important; /*to replace the value from hammer library*/
  }

  .menu-main .button-save {
    min-width: 100%;
  }

  /*BOTTOM PANEL*/
  .bottompanel .subpanel {
    overflow: inherit;
    position: relative;
  }

  /*on large screens, menu-main is always visible*/
  .bottompanel .subpanel.menu-main.subpanel-hidden {
    max-height: inherit !important;
    opacity: 1 !important;
    pointer-events: inherit;
  }

  .bottompanel .subpanel:not(.menu-main)>div {
    background: white;
    position: absolute;
    bottom: 10px;
    left: 10px;
    border-radius: 5px;
    overflow: hidden;
  }

  .bottompanel .subpanel .subpanel-title {
    margin-bottom: 10px;
  }

  .bottompanel .subpanel:not(.menu-main) .subpanel-content button:not(.primary) {
    padding-bottom: 10px;
    border-top: 0;
    border-radius: 0;
  }
  .bottompanel .subpanel:not(.menu-main) .subpanel-content button:not(.primary) ~ button {
    padding-top: 10px;
    border-top: 1px solid #e6e6e6;
  }

  /*MENU ADD PHOTOS*/
  .menu-add-photos > div {
    min-width: 250px;
  }

  .menu-add-photos .subpanel-content button.ui.grey svg {
    width: 25px;
    height: 25px;
    margin-left: 10px;
    margin-right: 15px;
  }

  /*MENU INSTAGRAM, FACEBOOK, GOOGLE PHOTOS*/
  .menu-instagram > div,
  .menu-facebook > div,
  .menu-google > div {
    max-width: 350px;
  }
  .menu-instagram .thumbnail-image,
  .menu-facebook .thumbnail-image,
  .menu-google .thumbnail-image {
    width: 90px;
    height: 90px;
    background-size: 90px 90px;
    border-radius: 0;
  }

  /*MENU SWITCH ALGO*/
  .menu-switch-algo > div {
    max-width: 350px;
  }

  .menu-switch-algo .selectable-item {
    min-width: 150px;
  }

  /*MENU CHANGE BORDERS*/
  .menu-change-borders > div {
    min-width: 390px;
  }

  /*MENU RESIZE POSTER*/
  .menu-resize-poster > div {
    min-width: 350px;
  }
}

/* ORIENTATION landscape */
/* En mode paysage, ce code permet d'avoir un menu sur la gauche de son écran.
   Le problème c'est que cela crée un menu de plus à maintenir, donc pour le moment cette feature
   est gardée de côté. */
/* @media (orientation: landscape) and (max-width: 991px)  {
  header.header-area .container {
    margin-left: 23%;
  }

  .canvasBox {
    padding-bottom: 0;
    padding-left: 23%;
  }

  .bottompanel {
    width: 23%;
    top: 0;
    right: auto;
  }

  .expand-button {
    display: none;
    background-color: #000000;
    top: 0px;
  }

  .subpanel {
    max-height: 100% !important;
  }

  .subpanel .subpanel-content {
    flex-direction: column;
    height: calc(100vh - 55px); *//*55px is the subpanel-title height*//*
    overflow: scroll;
  }

  .subpanel .menu-main-collapsable .content {
    height: 100vh;
    overflow: scroll;
  }

  .subpanel .menu-main-collapsable .collapsable {
    max-height: none !important;
  }

  *//*Change the button text*//*
  .subpanel.menu-main button.ui.primary.button-save {
    line-height: 0;
    color: transparent;
    padding: 0;
  }
  .subpanel.menu-main button.ui.primary.button-save::after {
    display: block;
    line-height: initial;
    color: #ffffff;
    content: "Sauvegarder";
    font-size: 12px;
  }

  .subpanel.menu-main .buttons-container,
  .subpanel.menu-add-photos .subpanel-content>div,
  .subpanel.menu-switch-algo .subpanel-content>div {
    flex-direction: column;
  }

  .subpanel.menu-add-photos .subpanel-content button {
    margin-bottom: 20px;
  }
  .subpanel.menu-add-photos .subpanel-content svg {
    width: 100%;
  }
} */