@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
a,
div,
span {
  font-family: "Roboto";
}

#ryb-connect {
  margin-block-start: 0;
  background: #fff;
}

#ryb-connect .ryb-connect-content {
  height: calc(100vh - 80px);
}

#ryb-connect.full-height .ryb-connect-content {
  height: calc(100vh - 140px) !important;
}

.admin-bar #ryb-connect .ryb-connect-content {
  height: calc(100vh - 115px) !important;
}

.admin-bar #ryb-connect.full-height .ryb-connect-content {
  height: calc(100vh - 160px) !important;
}

#ryb-connect > p {
  display: none;
}

#ryb-connect .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #56dad41a;
}

#ryb-connect .top-bar .info {
  font-size: 13px;
  line-height: 15.23px;
  color: #073d3d;
}

#ryb-connect .top-bar .close {
  margin-left: auto;
  font-size: 13px;
  line-height: 15.23px;
}

#ryb-connect .skip-step > span {
  cursor: pointer;
}

#ryb-connect .step-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 9;
}

#ryb-connect .step-loading .box {
  width: 300px;
  height: 200px;
  border: 1px solid #56dac959;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 3rem 1rem;
}

#ryb-connect .step-loading .box > div {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

#ryb-connect .step-loading .box > div .loading-text {
  text-align: center;
}

#ryb-connect button,
#ryb-connect a {
  user-select: none;
}

/* Header */
#ryb-connect header {
  box-sizing: border-box;
  padding: 1rem;
  background-color: #f3f3f3;
}

.ryb-connect-default-wrapper {
  max-width: 1800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.go-back-link {
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  border: 1px solid #333;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.4s;
}

.go-back-link:hover {
  color: #fff;
  background-color: #333;
  transition: 0.4s;
}

.ryb-connect-modal .top-controls {
  display: flex;
  justify-content: end;
  margin-top: -15px;
  margin-right: -10px;
}

.ryb-connect-modal .top-controls .close-modal {
  display: block;
  width: fit-content;
  cursor: pointer;
  color: #888;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #25b09b;
  animation: l15 1s infinite linear;
  margin-left: auto;
  margin-right: auto;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}
.loader::after {
  margin: 8px;
  animation-duration: 3s;
}

@keyframes l15 {
  100% {
    transform: rotate(1turn);
  }
}

.icon > svg {
  color: #53d89a;
}