/* Importing Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
}

html,
body {
   height: auto;
   min-height: 100vh;
   margin: 0;
   padding: 0;
}

body {
   display: flex;
   justify-content: center;
   align-items: flex-start; /* Align to top */
   padding: 20px;
   background: linear-gradient(135deg, #7179e6, #b130bd);
   box-sizing: border-box;
}

body.amlogin {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
   background: linear-gradient(135deg, #7179e6, #b130bd);
}

.container {
   max-width: 700px;
   width: 100%;
   background-color: #fff;
   padding: 25px 30px;
   border-radius: 5px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.container .title {
   font-size: 25px;
   font-weight: 500;
   position: relative;
}

.container .title::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   height: 3px;
   width: 30px;
   border-radius: 5px;
   background: linear-gradient(135deg, #7179e6, #b130bd);
}

.content form .user-details {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin: 20px 0 12px 0;
}

form .user-details .input-box {
   margin-bottom: 15px;
   width: calc(100% / 2 - 20px);
}

form .input-box span.details {
   display: block;
   font-weight: 500;
   margin-bottom: 5px;
}

.user-details .input-box input {
   height: 45px;
   width: 100%;
   outline: none;
   font-size: 16px;
   border-radius: 5px;
   padding-left: 15px;
   border: 1px solid #ccc;
   transition: all 0.3s ease;
}

.user-details .input-box input:focus,
.user-details .input-box input:valid {
   border-color: #596ab6;
}

form .gender-details .gender-title {
   font-size: 20px;
   font-weight: 500;
}

form .category {
   display: flex;
   width: 80%;
   margin: 14px 0;
   justify-content: space-between;
}

form .category label {
   display: flex;
   align-items: center;
   cursor: pointer;
}

form .category label .dot {
   height: 18px;
   width: 18px;
   border-radius: 50%;
   margin-right: 10px;
   background: #d9d9d9;
   border: 5px solid transparent;
   transition: all 0.3s ease;
}

#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label .three {
   background: #9b59b6;
   border-color: #d9d9d9;
}

form input[type="radio"] {
   display: none;
}

form .button {
   height: 45px;
   margin: 35px 0;
}

form .button input {
   height: 100%;
   width: 100%;
   border-radius: 5px;
   border: none;
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 1px;
   cursor: pointer;
   transition: all 0.3s ease;
   background: #a034a0;
}

form .button input:hover {
   background: #c270c2;
}

/* Responsive media query code for mobile devices */
@media (max-width: 584px) {
   .container {
      max-width: 100%;
   }

   form .user-details .input-box {
      margin-bottom: 15px;
      width: 100%;
   }

   form .category {
      width: 100%;
   }

   .content form .user-details {
      max-height: 300px;
      overflow-y: scroll;
   }

   .user-details::-webkit-scrollbar {
      width: 5px;
   }
}

/* Responsive media query code for mobile devices */
@media (max-width: 459px) {
   .container .content .category {
      flex-direction: column;
   }
}

.errors-block {
   padding: 12px;
   display: block;
   background: #ffe2c0;
   color: #3d3d3d;
   margin-top: 20px;
   font-size: 0.9rem;
}

.iub__us-widget {
   display: none !important;
}

ul {
   padding-left: 20px;
}

input.error {
   border: 2px solid #fba4a0;
}

form .button input:disabled,
form button:disabled {
   background: #ccc!important;
   color: #888!important;
   cursor: not-allowed;
   opacity: 0.7;
}