:root {
  --animate-duration: 1s;
}

.container-layer.hidden {
  visibility: hidden !important;
}

.container-layer {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 699999;
  width: 100%;
  height: 100%;
}
.container-layer .layer {
  cursor: default;
  transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out;
  inset: 0px;
  display: block;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.container-layer .transition {
  background-color: var(--sdx-color-sc-white);
  height: 100vh;
  transition: width 0.5s ease 0s, transform 0.5s ease 0s;
  box-shadow: var(--sdx-boxShadow-default);
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
.container-layer .transition-right {
  transform: translateX(110%);
  right: 0;
  border-radius: 20px 0 0 20px;
}
.container-layer .transition-left {
  transform: translateX(-110%);
  left: 0;
  border-radius: 0 20px 20px 0;
}
.container-layer .title {
  padding-left: 12px;
  padding-right: 12px;
  height: 112px;
  flex: 0 0 auto;
}
.container-layer .title h3 {
  font-size: var(--sdx-font-heading-l-fontSize);
  color: var(--sdx-color-text-heading);
}
.container-layer .drawer-full {
  border-radius: 0;
  transition: width 0.5s ease 0s, transform 1s ease 0s;
  width: 100% !important;
}
.container-layer .drawer-full.no-header {
  width: calc(100% - 50px) !important;
}
.container-layer .drawer-large {
  transition: width 0.5s ease 0s, transform 0.8s ease 0s;
  width: 80% !important;
  max-width: 1488px !important;
}
.container-layer .drawer-medium {
  transition: width 0.5s ease 0s, transform 0.6s ease 0s;
  width: 600px !important;
}
.container-layer .drawer-small {
  transition: width 0.5s ease 0s, transform 0.5s ease 0s;
  width: 600px !important;
}
@media only screen and (max-width: 728px) {
  .container-layer .title {
    height: 79px;
  }
  .container-layer .transition {
    border-radius: 0;
  }
  .container-layer .drawer-full,
  .container-layer .drawer-large,
  .container-layer .drawer-medium,
  .container-layer .drawer-small {
    transition: width 0.5s ease 0s, transform 0.4s ease 0s;
    width: 100% !important;
  }
  .container-layer .no-header {
    transition: width 0.5s ease 0s, transform 0.4s ease 0s;
    width: calc(100% - 50px) !important;
  }
}
.container-layer .cursor-pointer {
  cursor: pointer;
}