/* SAKON CSS*/

.circle-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
  background-color: #1a252f;
  color: #FAFAFF;
  height: 40px;
  width: 40px;
}

.cornered-box-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  text-align: center;
  display: flex;
  background-color: #021831;
  color: #FAFAFF;
  height: 80px;
  width: 80px;
}

.sakon-midnight {
  background-color: #021831 !important;
  color: #FFFFFF !important;
}

.sakon-midnight-dark {
  background-color: #021831 !important;
  color: #000000 !important;
}

.sakon-marine {
  background-color: #0077EE !important;
  color: #FFFFFF !important;
}

.sakon-marine-dark {
  background-color: #0077EE !important;
  color: #000000 !important;
}

.sakon-sky {
  background-color: #41DFFF !important;
  color: #FFFFFF !important;
}
.sakon-sky-dark {
  background-color: #41DFFF !important;
  color: #000000 !important;
}


.sakon-cloud-dark {
  background-color: #ACE2F3 !important;
  color: #000000 !important;
}

.sakon-cloud {
  background-color: #ACE2F3 !important;
  color: #FFFFFF !important;
}

.sakon-light-cloud-dark {
  background-color: #DFF8FE !important;
  color: #000000 !important;
}


.sakon-cream {
  background-color: #FFFDF5 !important;
  color: #FFFFFF !important;
}

.sakon-cream-dark {
  background-color: #FFFDF5 !important;
  color: #000000 !important;
}

.sakon-mantis {
  background-color: #73CE9C !important;
  color: #FFFFFF !important;
}

.bg-sakon-dark {
  background-color: #0D1224 !important;
}
.bg-sakon-primary {
  background-color: #B3F6FF !important;
}

.sakon-sky-btn{
  height: 48px;
  border-radius: 50px !important;
  font-weight: normal;
  text-transform: none;
  font-size: medium;
  background-color: #41DFFF !important;
  color: #000000 !important;
}

.sakon-delete-btn{
  height: 48px;
  border-radius: 50px !important;
  font-weight: normal;
  text-transform: none;
  font-size: medium;
  background-color: red !important;
  color: #FFFFFF !important;
}

.sakon-cancel-btn{
  height: 48px;
  border-radius: 50px !important;
  font-weight: normal;
  text-transform: none;
  font-size: medium;
  background-color: lightgrey !important;
  color: #000000 !important;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #b3f6ff;
  outline: 0;
  box-shadow: 0 0 0 2px #BFFEFF;
}

.form-select:focus {
  color: #495057;
  background-color: #fff;
  border-color: #B3F6FF;
  outline: 0;
  box-shadow: 0 0 0 2px #BFFEFF;
}

/* ellipsis for process/agent */
.is-typing {
   margin-top: 20px;
   width: 40px;
   justify-content: space-around;
   display: flex;
   margin-bottom: 20px;
}

.jump1,
.jump2,
.jump3,
.jump4,
.jump5 {
   width: 10px;
   height: 10px;
   border-radius: 100%;
   background-color: gray;
}

.jump1 {
   animation: typing 1.5s linear infinite;
   animation-delay: 01.1s;
}

.jump2 {
   animation: typing 1.5s linear infinite;
   animation-delay: 01.2s;
}

.jump3 {
   animation: typing 1.5s linear infinite;
   animation-delay: 01.3s;
}

.jump4 {
   animation: typing 1.5s linear infinite;
   animation-delay: 01.4s;
}

.jump5 {
   animation: typing 1.5s linear infinite;
   animation-delay: 1.5s;
}

@keyframes typing {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(0px);
    }

    35% {
        transform: translateY(15px);
    }

    45% {
        transform: translateY(0px);
    }

    60% {
        transform: translateY(-15px);
    }

    75% {
        background-color: white;
        transform: translateY(0px);
    }

    100% {
        transform: translateY(0px);
    }
}

.spinner_sakon {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  margin: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  background-color: #fff;
}

.spinner_sakon_full {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 50px no-repeat;
}

.close:before {
  content: '✕';
}
.close {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.image-viewer {
    width: 100%; /* or any desired width */
    overflow-x: scroll;
    white-space: nowrap; /* Prevents the images from wrapping onto a new line */
}

.image-container img {
    height: 200px;   /* Specify a height */
    width: auto;     /* Maintain aspect ratio */
    margin-right: 10px; /* Space between images */
}

.onboarding-container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
}
.onboarding-container img {
    width: 100px;
}

.border-5 {
    border-width: 5px;
}

.no-border-left {
  border: none;
  text-align: left;
  outline: none;
  box-shadow: none;
}

.sakon-custom-input {
    font-size: 16px;
    height: 52px;
    font-family: "Poppins";
}

.icon-fixed-width {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

/* APC */
:root {
    --Primary-Midnight: #021831;
    --Primary-Mantis: #73CE9C;
    --Primary-Sky: #41DFFF;
    --Nature-Steel: #4C4C4C;
    --Error: #D9363E;
    --Grey-800: #3C4257;
    --Grey-600: #697386;
    --Color-Correct: #177C6D;
    /* Font */
    --Poppins: 'Poppins', serif;
    /* Gradient */
    --Mix-Gradient-3: linear-gradient(228deg, var(--Primary-Sky, #41DFFF) 0.48%, #4DDBE8 22.09%, #5CD6CA 43.94%, var(--Primary-Mantis, #73CE9C) 81.73%, #73CE9C 90.38%);
    --Mix-Gradient-2: linear-gradient(228deg, var(--Primary-Sky, #41DFFF) 0.48%, #4DDBE8 22.09%, #5CD6CA 43.94%, var(--Primary-Mantis, #73CE9C) 81.73%, #73CE9C 90.38%);
}

.apc-green-checkbox {
    accent-color: var(--Primary-Mantis, #73CE9C) !important;
    background-color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.apc-green-checkbox:hover {
    border-color: var(--Primary-Mantis, #73CE9C) !important;
    box-shadow: 0 0 0 2px rgba(115, 206, 156, 0.1) !important;
}

.apc-green-checkbox:focus {
    outline: none !important;
    border-color: var(--Primary-Mantis, #73CE9C) !important;
    box-shadow: 0 0 0 3px rgba(115, 206, 156, 0.2) !important;
}

.apc-green-checkbox:checked {
    background-color: var(--Primary-Mantis, #73CE9C) !important;
    border-color: var(--Primary-Mantis, #73CE9C) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.apc-green-checkbox:checked:hover {
    background-color: #5fb882 !important;
    border-color: #5fb882 !important;
}

.btn-disabled {
    background-color: #d3d8dc !important; /* Grey background */
    color: #000000 !important; /* Black text */
    border-color: #6c757d !important;
    cursor: not-allowed !important;
}

.gradient-border-3 {
    outline: none;
    box-shadow: none;
}

.gradient-border-3:focus {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                var(--Mix-Gradient-3) border-box;
}

.apc-large-input{
    height: 48px;
}

.apc-error-border {
    display: flex;
    padding: 13.5px 12px 13.5px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 5px;
    border: 1px solid var(--Error, #D9363E);
}

.apc-error-border:focus {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                var(--Mix-Gradient-3) border-box;
}


.apc-error-text{
    color: var(--Error, #D9363E);

    /* SM/Normal */
    font-family: 'Poppins',serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
}

/* gradient button */
.apc-btn-layout{
    display: flex;
    width: 218px;
    height: 54px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.apc-btn{
    border-radius: 10px;
    background: var(--Mix-Gradient-3, linear-gradient(228deg, var(--Primary-Sky, #41DFFF) 0.48%, #4DDBE8 22.09%, #5CD6CA 43.94%, var(--Primary-Mantis, #73CE9C) 81.73%, #73CE9C 90.38%));
    box-shadow: 0 1.2px 24px 4.5px rgba(172, 226, 243, 0.10);
}

.apc-bold {
    color: var(--Primary-Midnight, #021831);
    /* Heading/4 */
    font-family: var(--Poppins, 'Poppins', serif), serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
}

.apc-bold-thick {
    color: var(--Primary-Midnight, #021831);
    /* Heading/4 */
    font-family: var(--Poppins, 'Poppins', serif), serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    height: 48px;
    line-height: 28px; /* 140% */
}

.apc-label {
    color: var(--Grey-800,#3C4257);
    /* Basic/Normal */
    font-family: 'Poppins', serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.apc-footer-text{
    color: var(--Grey-600, #697386);

    /* SM/Strong */
    font-family: 'Poppins',serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 166.667% */
}

.apc-button-text{
    color: var(--Primary-Midnight, #021831);
    font-family: 'Poppins',serif;
    font-size: 14.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 8.4px;
}

.apc-question{
    color: var(--Nature-Steel, #4C4C4C);
    /* SM/Normal */
    font-family: 'Poppins', serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
}

/* Variations */
.apc-semibold {
    font-family: 'Poppins', serif;
    font-weight: 600;
    color: #000;
    /* Heading/4 */
    font-size: 20px;
    font-style: normal;
    line-height: 28px; /* 140% */
}

.apc-medium {
    font-family: 'Poppins', serif;
    font-weight: 500;
}

.apc-regular {
    font-family: 'Poppins', serif;
    font-weight: 400;
}

/* SM/Normal */
.apc-small-normal{
    font-family: 'Poppins', serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
}

.apc-medium-normal {
    font-family: 'Poppins', serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 166.667% */
}

.apc-large-normal {
    font-family: 'Poppins', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 166.667% */
}

.close-helper-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-helper-btn:hover {
    background: #fff;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.apc-wave{
    color: #000;
    font-family: var(--Poppins, 'Poppins', serif), serif;
    font-size: 28.8px;
    font-style: normal;
    font-weight: 600;
    line-height: 40.32px; /* 140% */
    display: flex;
    width: 32px;
    height: 35px;
    transform: rotate(-4.814deg);
    flex-direction: column;
    justify-content: center;
}

.apc-circular-image-container {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: var(--Mix-Gradient-3);
    padding: 3px; /* Border thickness */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto; /* Centers horizontally */
}

.apc-circular-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: white; /* Background color inside the border */
}

.apc-blue-text{
    color: #07E;
    font-family: var(--Poppins, 'Poppins', serif), serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 137.5% */
}

.apc-correct{
    color: var(--Color-Correct, #177C6D);
    /* SM/Normal */
    font-family: var(--Poppins, 'Poppins', serif), serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
}

.password-requirements {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
}

.requirement {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.requirement:last-child {
    margin-bottom: 0;
}

.requirement i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.requirement-text {
    color: #6c757d;
    font-family: 'Poppins', serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
}

.requirement.valid .requirement-text {
    color: #5fb882;
}

/* Register */
.apc-circular-image-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 50%; /* Make sure the container itself is circular */
}

.apc-circular-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.profile-dropzone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.profile-dropzone:hover {
    background: rgba(0, 0, 0, 0.1);
}

.dropzone-content {
    color: #666;
    font-size: 24px;
}
.camera-icon {
    font-size: 24px;
    margin-bottom: 5px;
    display: block;
}