.font-PPNeueMachina-Regular {
  font-family: PPNeueMachina-Regular !important;
}

.bg-gray-main {
  background-color: #D9D9D9;
}

.text-gray-main {
  color: #D9D9D9;
}

.text-gray-secound {
  color: #D9D9D9;
}

.bg-purple-main {
  background-color: #943EF8;
}

.text-purple-main {
  color: #943EF8;
}

.active-item {
  color: #943EF8 !important;
}

/* CLOCK */
.clock {
  width: 107px;
  height: 107px;
  border-radius: 50%;
  position: relative;
  padding: 20px;
  background: #B3B3B3;
}
.m-clock {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  position: relative;
  padding: 20px;
  background: #B3B3B3;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px);
}

.hour-hand {
  width: 50%;
  background: #943EF8;
  position: absolute;
  top: 50%;
  right: 50%;
  transform-origin: 100%;
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
  height: 4px;
}
.m-hour-hand {
  width: 70%;
  background: #943EF8;
  position: absolute;
  top: 50%;
  right: 50%;
  transform-origin: 100%;
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
  height: 3px;
}

.minute-hand {
  width: 70%;
  background: #943EF8;
  position: absolute;
  top: 50%;
  right: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
  height: 4px;
}
.m-minute-hand {
  width: 90%;
  background: #943EF8;
  position: absolute;
  top: 50%;
  right: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
  height: 3px;
}

.number {
  position: absolute;
  font-size: 24px;
  transform: translate(-50%, -50%);
}

.number1 {
  top: 20%;
  left: 85%;
}

.number2 {
  top: 35%;
  left: 92%;
}

.number3 {
  top: 50%;
  left: 97%;
}

.number4 {
  top: 65%;
  left: 92%;
}

.number5 {
  top: 80%;
  left: 85%;
}

.number6 {
  top: 85%;
  left: 50%;
}

.number7 {
  top: 80%;
  left: 15%;
}

.number8 {
  top: 65%;
  left: 8%;
}

.number9 {
  top: 50%;
  left: 3%;
}

.number10 {
  top: 35%;
  left: 8%;
}

.number11 {
  top: 20%;
  left: 15%;
}

.number12 {
  top: 15%;
  left: 50%;
}
/* End CLOCK */
.content-text.truncated {
    overflow: hidden;
    max-height: 4em; 
}

.content-text {
    transition: all 0.3s ease;
}