/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Jul 25, 2024, 3:10:45 PM
    Author     : thoma
*/
.clusters-page {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.clusters-page .div {
  background-color: #ffffff;
  overflow: hidden;
  width: 426px;
  height: 932px;
  position: relative;
}

.clusters-page .overlap {
  position: absolute;
  width: 249px;
  height: 40px;
  top: 111px;
  left: 28px;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #a3a0a0;
}

.clusters-page .screenshot {
  position: absolute;
  width: 59px;
  height: 20px;
  top: 9px;
  left: 3px;
  object-fit: cover;
}

.clusters-page .img {
  position: absolute;
  width: 99px;
  height: 40px;
  top: 111px;
  left: 296px;
  object-fit: cover;
}

.clusters-page .frame {
  position: absolute;
  width: 186px;
  height: 219px;
  top: 328px;
  left: 223px;
}

.clusters-page .overlap-group {
  position: absolute;
  width: 186px;
  height: 241px;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #e9e7e8;
}

.clusters-page .rectangle {
  position: absolute;
  width: 8px;
  height: 241px;
  top: -1px;
  left: -1px;
  background-color: #5c348b;
}

.clusters-page .text-wrapper {
  position: absolute;
  top: 53px;
  left: 35px;
  font-family: "Alata-Regular", Helvetica;
  font-weight: 400;
  color: #221f20;
  font-size: 20px;
  text-align: center;
  letter-spacing: -0.41px;
  line-height: 22px;
  white-space: nowrap;
}

.clusters-page .frame-2 {
  display: flex;
  width: 135px;
  align-items: center;
  gap: 2.49px;
  position: absolute;
  top: 196px;
  left: 19px;
}

.clusters-page .rectangle-2 {
  background-color: #d5643a;
  position: relative;
  width: 4.15px;
  height: 13.28px;
}

.clusters-page .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -0.83px;
  font-family: "Alata-Regular", Helvetica;
  font-weight: 400;
  color: #675f61;
  font-size: 10.2px;
  text-align: center;
  letter-spacing: -0.24px;
  line-height: 13.2px;
  white-space: nowrap;
}

.clusters-page .text-wrapper-3 {
  position: absolute;
  width: 171px;
  top: 75px;
  left: 10px;
  font-family: "Alata-Regular", Helvetica;
  font-weight: 400;
  color: #938a8d;
  font-size: 15px;
  text-align: center;
  letter-spacing: -0.41px;
  line-height: 22px;
}

.clusters-page .frame-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: absolute;
  top: 216px;
  left: 12px;
}

.clusters-page .screenshot-2 {
  position: relative;
  width: 27.86px;
  height: 13px;
}

.clusters-page .frame-4 {
  display: flex;
  width: 135px;
  align-items: center;
  gap: 2.49px;
  position: relative;
}

.clusters-page .rectangle-3 {
  background-color: #a63333;
  position: relative;
  width: 4.15px;
  height: 13.28px;
}

.clusters-page .screenshot-3 {
  position: absolute;
  width: 54px;
  height: 44px;
  top: 4px;
  left: 69px;
}

.clusters-page .frame-5 {
  position: absolute;
  width: 186px;
  height: 219px;
  top: 256px;
  left: -206px;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #e9e7e8;
}

.clusters-page .rectangle-4 {
  position: absolute;
  width: 8px;
  height: 219px;
  top: -1px;
  left: -1px;
  background-color: #5c348b;
}

.clusters-page .text-wrapper-4 {
  position: absolute;
  top: 53px;
  left: 64px;
  font-family: "Alata-Regular", Helvetica;
  font-weight: 400;
  color: #221f20;
  font-size: 20px;
  text-align: center;
  letter-spacing: -0.41px;
  line-height: 22px;
  white-space: nowrap;
}

.clusters-page .screenshot-4 {
  position: absolute;
  width: 38px;
  height: 44px;
  top: 4px;
  left: 73px;
}

.clusters-page .frame-6 {
  display: flex;
  width: 135px;
  align-items: center;
  gap: 2.49px;
  position: absolute;
  top: 194px;
  left: 46px;
}

.clusters-page .rectangle-5 {
  position: relative;
  width: 4.15px;
  height: 13.28px;
  background-color: #66a8dd;
}

.clusters-page .screenshot-5 {
  position: absolute;
  width: 28px;
  height: 13px;
  top: 195px;
  left: 13px;
}

.clusters-page .lock {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 4px;
  left: 10px;
}

.clusters-page .frame-7 {
  position: absolute;
  width: 186px;
  height: 241px;
  top: 0;
  left: -206px;
  background-color: #ffffff;
  border: 1px solid;
  border-color: #e9e7e8;
}

.clusters-page .text-wrapper-5 {
  position: absolute;
  top: 53px;
  left: 56px;
  font-family: "Alata-Regular", Helvetica;
  font-weight: 400;
  color: #221f20;
  font-size: 20px;
  text-align: center;
  letter-spacing: -0.41px;
  line-height: 22px;
  white-space: nowrap;
}

.clusters-page .div-wrapper {
  display: flex;
  width: 384px;
  height: 31px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 117px;
  position: absolute;
  top: -57px;
  left: -202px;
  background-color: #5c348b;
}

.clusters-page .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -0.21px;
  font-family: "Alata-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  letter-spacing: -0.24px;
  line-height: 13.2px;
  white-space: nowrap;
}

.clusters-page .p {
  position: absolute;
  top: 232px;
  left: 55px;
  font-family: var(--single-line-body-base-font-family);
  font-weight: var(--single-line-body-base-font-weight);
  color: #000000;
  font-size: var(--single-line-body-base-font-size);
  letter-spacing: var(--single-line-body-base-letter-spacing);
  line-height: var(--single-line-body-base-line-height);
  white-space: nowrap;
  font-style: var(--single-line-body-base-font-style);
}

.clusters-page .eye-off {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 178px;
  left: 183px;
}

.clusters-page .status-bar-iphone {
  position: absolute;
  width: 393px;
  height: 54px;
  top: 0;
  left: 16px;
  background-color: #ffffff;
}

.clusters-page .time {
  position: absolute;
  width: 140px;
  height: 54px;
  top: 0;
  left: 0;
}

.clusters-page .time-2 {
  position: absolute;
  top: 17px;
  left: 52px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: 22px;
  white-space: nowrap;
}

.clusters-page .levels {
  position: absolute;
  width: 140px;
  height: 54px;
  top: 0;
  left: 252px;
}

.clusters-page .battery {
  position: absolute;
  width: 27px;
  height: 13px;
  top: 23px;
  left: 81px;
}

.clusters-page .capacity-wrapper {
  position: absolute;
  width: 25px;
  height: 13px;
  top: 0;
  left: 0;
  border-radius: 4.3px;
  border: 1px solid;
  border-color: #00000059;
}

.clusters-page .capacity {
  position: relative;
  width: 21px;
  height: 9px;
  top: 1px;
  left: 1px;
  background-color: #000000;
  border-radius: 2.5px;
}

.clusters-page .cap {
  position: absolute;
  width: 1px;
  height: 4px;
  top: 5px;
  left: 26px;
}

.clusters-page .wifi {
  position: absolute;
  width: 17px;
  height: 12px;
  top: 24px;
  left: 57px;
}

.clusters-page .cellular-connection {
  position: absolute;
  width: 19px;
  height: 12px;
  top: 24px;
  left: 30px;
}

.clusters-page .user-avatar {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 54px;
  left: 352px;
}

.clusters-page .bottom-bar {
  position: absolute;
  width: 430px;
  height: 123px;
  top: 809px;
  left: 0;
}

.clusters-page .overlap-2 {
  position: relative;
  height: 123px;
}

.clusters-page .rectangle-6 {
  position: absolute;
  width: 430px;
  height: 74px;
  top: 49px;
  left: 0;
  background-color: #ffffff;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #dedede;
}

.clusters-page .user-avatar-2 {
  position: absolute;
  width: 50px;
  height: 48px;
  top: 57px;
  left: 359px;
}

.clusters-page .icon {
  position: absolute;
  width: 45px;
  height: 40px;
  top: 65px;
  left: 111px;
}

.clusters-page .icon-2 {
  position: absolute;
  width: 47px;
  height: 48px;
  top: 60px;
  left: 284px;
}

.clusters-page .home-button {
  position: absolute;
  width: 72px;
  height: 77px;
  top: 43px;
  left: 14px;
  background-image: url(./img/image-6.png);
  background-size: cover;
  background-position: 50% 50%;
}

.clusters-page .xrathus-plusbutton {
  position: absolute;
  width: 81px;
  height: 81px;
  top: 0;
  left: 176px;
  object-fit: cover;
}