:host {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*font-family: Arial, Helvetica, sans-serif;*/

  .rp-element-buttons {
    &.animate {
      ::ng-deep .element-add-button {
        animation-name: pulse-add-buttons;
        animation-duration: 400ms;
        animation-iteration-count: 6;
        animation-direction: alternate;
      }
    }
  }
}

:host > * {
  pointer-events: all;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
}

.logo-menu-5th {
  position: absolute;
  top: 220px;
  left: 84px;
}

.logo-menu-5th.front .mat-mdc-raised-button {
  width: 170px;
  text-align: left;
}

.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  max-width: 30%;
  width: 400px;
  background: #fff;
  padding: 0 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .25);
}

.on-top {
  z-index: 3;
}

.solid-background {
  fill: white;
  background: white;
}

.solid-background > * {
  fill: white;
  background: white;
}

.button-close {
  height: 36px;
  width: 36px;
  min-width: initial;
  padding: 0;
  border: none;
  position: absolute;
  right: 20px;
  top: 15px;
  border-radius: 50%;
}

.remove-all {
  position: absolute;
  top: 15px;
  right: 71px;
}

#loader {
  width: 300px;
  position: fixed;
  top: 25%;
  left: 50%;
  margin-left: -200px;
  background-color: #fff;
  border-radius: 15px;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: "Public sans", serif;
  z-index: 1000;
  box-sizing: border-box;
  padding: 15px;
  &.full {
    width: 100%;
    top: 0;
    left: 0;
    margin-left: 0;
    border-radius: 0;
    transform: none;
    z-index: auto;
    padding: 0;
    position: absolute;
    #progress-bar {
      width: 100%;
      height: 5px;
      border: none;
      margin-top: 0;
      border-radius: 0;
    }
  }
}

#loader-text {
  font-family: "Public sans", serif;
  font-size: 15px;
}

#progress-bar {
  width: 270px;
  height: 20px;
  border: 1px solid transparent;
  background: #e0e0e0;
  position: relative;
  margin-top: 10px;
  border-radius: 15px;
  overflow: hidden;
}
.circular-progress-wrapper {
  position: absolute;
  width: 90px;
  height: 90px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.circular-progress {
  width: 90px;
  height: 90px;
  transform: rotate(-90deg); // makes stroke start at top
}

.bg {
  fill: none;
  stroke: #d1cec5;
  stroke-width: 2;
}

.progress {
  fill: none;
  stroke: #979284;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.percentage {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  font-size: 16px;
  font-weight: 600;
  line-height: 90px;
  text-align: center;
  color: #979284;
}

#progress {
  height: 100%;
  width: 0;
  background: #da9803;
  transition: width 0.3s;
}

@keyframes pulse-add-buttons {
  50% {
    box-shadow: 0 0 20px hsl(12, 100%, 60%);
  }
}
