@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:wght@400;700&display=swap);
/* @import "tailwindcss";
@import "../views"; */

*:not(.material-symbols-outlined) {
  font-family: 'Inter', sans-serif !important;
}

.material-symbols-outlined {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

.button-outline {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 80px;
  cursor: pointer;

  &.lg {
    padding: 1rem 2rem;
  }

  &.primary {
    color: #FFF;
    background-color: #4F2FD3;
    border: 0;

    span {
      color: #FFF;
    }

    &:hover {
      background-color: #4029AA;

      span {
        color: #FFF;
      }
    }

    &:active {
      background-color: #372986;
    }

    &:focus {
      background-color: #4F2FD3;
      box-shadow: 0px 0px 0px 4px #A0A6FF;
    }
  }

  &.secondary {
    background-color: #FFF;
    border: 1px solid #DFE0E6;
    color: #323036;

    span {
      color: #323036;
    }

    &:hover {
      background-color: #F6F6F7;

      span {
        color: #323036;
      }
    }

    &:active {
      background-color: #EEEFF1;
    }

    &:focus {
      box-shadow: 0px 0px 0px 3px #5B3DEE;
    }

    &:disabled {
      background-color: #c9c9c9;
    }
  }
}

.button-filled {
  display: inline-flex;
  padding: 1rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  border-radius: 80px;
  border: 0;
  cursor: pointer;

  &.lg {
    padding: 1rem 2rem;
  }

  &.primary {
    background-color: #4F2FD3;

    &:hover {
      background-color: #4029AA;

      span {
        color: #fff;
      }
    }

    &:active {
      background-color: #372986;
    }

    &:focus {
      background-color: #4F2FD3;
      outline: 2px solid #EDEFFF;
      box-shadow: 0 0 0 4px #A0A6FF;
    }

    &:disabled {
      background-color: #DFE0E6;

      span {
        color: #908D9E;

        &:not(.material-symbols-outlined) {
          font-weight: 600;
        }
      }
    }
  }

  &.secondary {
    border: 1px solid #DFE0E6;
    background-color: #FFF;
    color: #323036;

    &:hover {
      background-color: #F6F6F7;
    }

    &:active {
      background-color: #EEEFF1;
    }

    &:focus {
      background-color: #FFF;
      box-shadow: 0 0 0 3px #5B3DEE;
    }

    &:disabled {
      background-color: #F6F6F7;

      span {
        color: #A2A2B2;
      }
    }
  }

}

.button-link {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 80px;
  border: 0;
  background-color: transparent;

  span {
    color: #5B3DEE;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
  }

  &:hover span {
    color: #4F2FD3
  }

  &:active span {
    color: #4029AA
  }
}

/* Resend code button used on tutor CPF verification */
.button-resend-code {
  display: flex;
  padding: var(--md, 16px) var(--xl, 32px);
  justify-content: center;
  align-items: center;
  gap: var(--xs, 8px);
  align-self: stretch;
  border-radius: var(--7xl, 80px);
  border: 1px solid var(--Neutral-200, #DFE0E6);
  background: var(--Brand-White, #FFF);
  color: var(--Neutral-950, #323036);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 150% */
}

.badges {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;

  &.not_started {
    background-color: #EDEFFF;
    color: #4F2FD3;
  }

  &.canceled {
    background-color: #FEF3F2;
    color: #B72A1E;
  }

  &.closed {
    background-color: #FEF3F2;
    color: #ff1500;
  }

  &.executing {
    background-color: #FEF1F9;
    color: #EA288C;
  }

  &.finished {
    background-color: #F2FBF4;
    color: #237238;
  }
}


.bg-login {
  background: url('/img/9d6ff0a0d410c1a65044b2871ccde8fd.jpg') no-repeat center/cover;
}

.bg-login-tutor {
  background: url('/img/login-tutor-bg.jpg') no-repeat center/cover;
}

.form-login-container {
  max-width: 494px;
  width: 100%;


  .form-login {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
  }

  .login-title {
    display: flex;
    flex-direction: column;
    gap: 16px;


    p {
      font-size: 14px;
      line-height: 24px;
      margin: 0;
    }
  }

  h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-family: "Inter", Arial, sans-serif;
    font-weight: 400;
    margin: 0;
  }

  .login-google-button {
    color: #323036;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    width: 100%;
  }

  .login-separator {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;

    .separator {
      max-width: 200px;
      width: 100%;
      height: 1px;
      background-color: #DFE0E6;
    }

    span:not(.separator) {
      font-size: 0.75rem;
      line-height: 1rem;
      font-family: "Inter", Aria, sans-serif;
      color: #7B7989;
    }
  }

  .login-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;

    .login-fields-row {
      display: flex;
      gap: 1rem;
      align-items: center;
      padding: 0.75rem 1rem;
      align-self: stretch;
      border-radius: 8px;
      border: 1px solid #DFE0E6;
      background-color: #FFF;

      .material-symbols-outlined {
        color: #908D9E;
        font-variation-settings:
          'opsz' 20
      }

      label {
        display: flex;
        flex-direction: column;
        flex: 1;

        span {
          font-family: "Inter", Arial, sans-serif;
          font-size: 0.75rem;
          line-height: 1rem;
          color: #323036;
        }

        input {
          width: 100%;
          border: 0;
          padding: 0;
          outline: 0;
        }

        .row-opt-input {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          gap: 8px;


          input {
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 8px;
            border: 1px solid #DFE0E6;
            height: 64px;
            font-size: 24px;
          }
        }
      }
    }
  }

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

.toast-message {
  position: fixed;
  top: 1.5rem;
  right: -1.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
  background-color: #FEF2F2;
  border-radius: 8px;
  max-width: 312px;
  width: 100%;
  animation: fadeInRight 500ms 300ms linear forwards;
  opacity: 0;

  span {
    font-size: 20px;
    line-height: 1;
  }

  p {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    margin: 0;
  }

  div {
    min-height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin-left: 11px;
    /* align-items: center; */
  }

  &.error {
    span {
      color: #FF6467;
    }

    p {
      color: #A00912;
    }
  }

  &.success {
    background-color: #ECFDF5;

    span {
      color: #04B95E;
    }

    p {
      color: #197764;
    }
  }
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    right: 1.5rem
  }
}

@keyframes toBottom {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#template-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0px 2rem;
    /* box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06); */
    /* border-bottom: 1px solid #EEEFF1; */

    nav {
      flex: 1;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 1.5rem;
      align-items: center;
      justify-content: flex-start;

      li {
        padding: 1.5rem 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        position: relative;

        &.active,
        &:hover {
          a {
            color: #323036;

            &::after {
              width: 100%;
            }
          }
        }

        a {
          color: #908D9E;

          &::after {
            content: "";
            width: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #6A5BF9;
            height: 2px;
            transition: width 300ms linear;
          }
        }
      }
    }

    .user-block {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      align-items: center;
      padding: 0.75rem 0;

      .user,
      .notifications,
      .dropdown {
        display: inline-flex;
        align-self: center;
        justify-content: center;
        align-items: center;
        position: relative;
        gap: 1rem;

        img {
          border-radius: 50%;
          overflow: hidden;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        gap: 4px;

        p {
          margin: 0;
          font-size: 0.875rem;
          line-height: 1rem;
          font-weight: 600;
        }

        span {
          font-size: 0.75rem;
          line-height: 1rem;
          /* text-transform: capitalize; */
        }
      }
    }
  }

  /* Dropdown */

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: -2rem;
    background-color: #fff;
    border: 1px solid #DFE0E6;
    padding: 10px;
    list-style: none;
    margin: 0;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    z-index: 10;
  }

  .dropdown-menu.show {
    display: block;
    /* Controla a visibilidade */
  }

  .dropdown-menu li {
    padding: 8px 16px;
  }

  .dropdown-menu li a {
    text-decoration: none;
    color: #333;
  }

  .dropdown-menu li:hover {
    background-color: #f1f1f1;
  }

  ul.drop-user {
    width: 220px;

    padding: 0;

    li:not(:last-child) {
      border-bottom: 1px solid #DFE0E6;
    }

    a {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
      border-radius: 8px;

      .material-symbols-outlined {
        color: #A2A2B2;
      }

      span:not(.material-symbols-outlined) {
        color: #323036;
      }
    }
  }

  /* Notifications Dropdown */
  .notification-badge {
    position: relative;
    cursor: pointer;

    .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background-color: #E53535;
      color: #fff;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.625rem;
      font-weight: 600;
      line-height: 1;
    }
  }

  
}

.notifications-dropdown {
  /* position: absolute;
  top: 100%;
  right: 0; */
  margin-top: 9px;
  background-color: #fff;
  border: 1px solid #DFE0E6;
  border-radius: 12px;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
  /* max-width: 520px; */
  width: 100%;
  max-height: 620px;
  overflow: hidden;
  /* z-index: 1000; */
  padding: 16px 20px;

  .notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: #323036;
    }

    .close-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #908D9E;
      transition: color 200ms;

      &:hover {
        color: #323036;
      }
    }
  }

  .notification-tabs {
    display: flex;
    border-bottom: 1px solid #EEEFF1;
    padding: 0 20px;

    button {
      flex: 1;
      padding: 12px 16px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 500;
      color: #908D9E;
      transition: all 200ms;

      &.active {
        color: #6A5BF9;
        border-bottom-color: #6A5BF9;
      }

      &:hover:not(.active) {
        color: #323036;
      }
    }
  }

  .ant-tabs-ink-bar .ant-tabs-ink-bar-animated {
    background: #4F2FD3;
  }

  .ant-tabs-ink-bar {
    background: #4F2FD3 !important;
  }

  .notification-list {
    max-height: 380px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #F7F7F8;
    }

    &::-webkit-scrollbar-thumb {
      background: #DFE0E6;
      border-radius: 3px;

      &:hover {
        background: #C8C9D0;
      }
    }
  }

  .notification-item {
    padding: 16px 20px;
    border: 2px solid #DFE0E6;
    border-radius: 12px;
    margin-bottom: 12px;
    background-clip: padding-box;
    cursor: pointer;
    transition: background-color 200ms, border-color 200ms, transform 120ms;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      background-color: #F7F7F8;
      transform: translateY(-2px);
    }

    &.unread {
      background-color: #F5F4FF;
      border-color: #D9D3FF;

      &:hover {
        background-color: #EFEEFB;
      }
    }

    .notification-content {
      display: flex;
      gap: 12px;

      .notification-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #EBE9FE;
        color: #6A5BF9;
      }

      .notification-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;

        .notification-title {
          font-size: 0.875rem;
          font-weight: 600;
          color: #323036;
          margin: 0;
        }

        .notification-description {
          font-size: 0.813rem;
          color: #908D9E;
          margin: 0;
          line-height: 1.4;
        }

        .notification-time {
          font-size: 0.75rem;
          color: #A2A2B2;
          margin: 0;
        }
      }
    }
  }

  .ant-list-items {
    margin-top: 10px !important;
  }

.notifications-dropdown .notification-list {
padding-top: 8px !important;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}

/* Estilização do scrollbar */
.notifications-dropdown .notification-list::-webkit-scrollbar {
width: 6px;
}

.notifications-dropdown .notification-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.notifications-dropdown .notification-list::-webkit-scrollbar-thumb {
background: #4F2FD3;
border-radius: 10px;
}

.notifications-dropdown .notification-list::-webkit-scrollbar-thumb:hover {
background: #3d24a8;
}

  .notifications-dropdown .notification-list>.notification-item:first-child {
    margin-top: 8px !important;
  }

  .notifications-dropdown .ant-tabs-nav .ant-tabs-tab-btn,
  .notifications-dropdown .ant-tabs-nav .ant-tabs-tab,
  .notifications-dropdown .ant-tabs-nav .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
  .notifications-dropdown .ant-tabs-nav .ant-tabs-tab[aria-selected="true"] .ant-tabs-tab-btn {
    color: #4F2FD3 !important;
  }

  .notifications-dropdown .ant-tabs-ink-bar {
    background: #4F2FD3 !important;
  }

  .notifications-dropdown .notification-icon,
  .notifications-dropdown .ant-avatar {
    background-color: #4F2FD3 !important;
    color: #ffffff !important;
    font-weight: 700;
  }

  .notifications-dropdown .notification-item .notification-dot,
  .notifications-dropdown .notification-item>div[style*="background: #6A5BF9"] {
    background: #4F2FD3 !important;
  }

  .notifications-dropdown .ant-list-item.notification-item {
    border: 2px solid #DFE0E6;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 12px 18px;
    background-clip: padding-box;
  }

  .notifications-dropdown .ant-list-item.notification-item:hover {
    transform: translateY(-2px);
    background-color: #F7F7F8;
  }

  .notification-empty {
    padding: 40px 20px;
    text-align: center;
    color: #908D9E;
    font-size: 0.875rem;
  }
}
.container-app {
  display: flex;
  flex-wrap: nowrap;
  /* gap: 1rem; */
  flex: 1;

  .sidebar {
    height: auto;
    width: 256px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0.5rem 1.5rem;
    transition: width 300ms linear;
    /* border-right: 1px solid #EEEFF1; */

    &.closed {
      width: 56px;

      .sidebar-menu li,
      .sidebar-help {
        padding: 0.5rem;

        span:not(.material-symbols-outlined) {
          display: none;
        }
      }
    }

    .sidebar-action {
      display: flex;
      padding: 0.5rem;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
    }

    .sidebar-menu {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;

      ul {
        padding-inline-start: 0;
        list-style: none;
        flex: 1;

        li {
          padding: 0.5rem 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 0.5rem;
          border-radius: 0.5rem;
          transition: background-color 300ms linear;
          margin-bottom: 0.5rem;

          a {
            flex: 1;
            display: flex !important;
            justify-content: flex-start;
            align-items: center;
            gap: 0.5rem;
            color: #323036;
            font-weight: 500;

            .material-symbols-outlined {
              color: #A2A2B2;
            }

          }

          .badge {
            padding: 0.25rem 0.75rem;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 48px;
            gap: 8px;
            border-radius: 80px;
            border: 1px solid #DFE0E6;
            background-color: #FFF;
          }

          &.active,
          &:hover {
            background-color: #EDEFFF;

            .material-symbols-outlined {
              color: #4F2FD3
            }

            span:not(.material-symbols-outlined) {
              color: #4029AA
            }
          }
        }
      }

      .sidebar-help {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        color: #323036;
        font-weight: 500;
        cursor: pointer;

        .material-symbols-outlined {
          color: #A2A2B2;
        }
      }
    }


  }

  main {
    height: auto;
    flex: 1;
    padding: 2rem;
    border-top: 1px solid #EEEFF1;
    border-left: 1px solid #EEEFF1;
    border-radius: 1rem 0 0 0;
    background-color: #F6F6F7;
  }
}

/* Profile */
.container-account {
  display: flex;
  height: 100%;
  background-color: #F6F6F7;
  justify-content: center;
  padding: 3rem 0;
}

.form-profile {
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  /* padding: 3rem 0; */

  .form-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;

    &>p {
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: 600;
      color: #323036;
      margin: 0;
    }

    div {
      width: 100%;

      &.dual-field {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;

      }

      &>p {
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 500;
        color: #323036;
      }

      .row-role {
        padding: 1rem;
        background-color: #EDEFFF;

        label {
          display: flex;
          align-items: center;
          gap: 1rem;

          span {
            color: #4F2FD3;
            font-size: 1rem;
          }

          input[type=radio] {
            accent-color: #5B3DEE;
            width: 1rem;
            height: 1rem;
          }
        }
      }

      .section-password {
        display: flex;
        flex-direction: column;
        gap: 8px;


        .title {
          display: flex;
          flex-direction: column;
          gap: 4px;

          p {
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 500;
            color: #323036;
            margin: 0;
          }

          span {
            font-size: 0.75rem;
            line-height: 1rem;
            font-weight: 500;
            color: #7B7989;
          }
        }

        .field-pass {
          display: flex;
          align-items: center;
          gap: 1rem;
          align-self: stretch;
        }

      }
    }

    .row-field {
      display: flex;
      width: 100%;
      flex-direction: column;
      /* align-items: center; */
      gap: 1rem;
      padding: 0.75rem 1rem;
      border: 1px solid #DFE0E6;
      border-radius: 0.5rem;
      background-color: #FFF;

      label {
        margin: 0;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 500;
        color: #323036;
      }

      input {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
      }

      &.row-disabled {
        background-color: #F6F6F7;

        span {
          color: #908D9E;
        }

        input {
          color: #A2A2B2;
        }
      }
    }

    input:not([type=radio]) {
      border: 0;
      width: 100%;
      outline: none;

      &:disabled {
        background-color: #F6F6F7;
      }
    }

  }

  .form-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
}

.container-form-responsible {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.field-icon {
  display: flex;
  gap: 1rem;
}

.container-responsible {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 420px;
  width: 100%;

  .title {
    color: #323036;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
  }

  .responsible-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;

    .responsible-list-item {
      display: flex;
      align-items: flex-start;
      padding: 1rem;
      gap: 1rem;
      border-radius: 0.5rem;
      border: 1px solid #DFE0E6;
      width: 100%;

      img {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 2rem;
      }
    }

    .responsible-description {
      display: flex;
      flex-direction: column;
      flex: 1;
      align-items: flex-start;
      justify-content: center;
      gap: 1rem;

      .name {
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #323036;

        :first-child {
          font-size: 0.75rem;
          line-height: 1rem;
          font-weight: 500;
        }

        :last-child {
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 500;
        }
      }

      .description {
        display: flex;
        width: 100%;
        align-items: flex-start;
        gap: 1rem;

        .responsible-description-block {
          display: flex;
          flex-direction: column;
          flex: 1;
          align-items: flex-start;
          justify-content: center;

          :first-child {
            font-size: 0.75rem;
            line-height: 1rem;
            font-weight: 500;
          }

          :last-child {
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 500;
          }
        }
      }
    }
  }
}

/* customers */
.breadcrumbs {
  padding-bottom: 2rem;

  a {
    display: flex;
    gap: 1rem;
    align-items: center;

    color: #908D9E;

    span:not(.material-symbols-outlined) {
      font-size: 1rem;
      line-height: 1.5rem;
    }
  }
}

.section-apprentice {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;

  header {
    width: 100%;

    h1 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 2rem;
      color: #323036;
    }
  }

  .search-apprentice {
    /* border: solid; */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      border: 1px solid #DFE0E6;
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      background-color: #FFF;
      border-radius: 0.5rem;
      gap: 1rem;

      input {
        border: 0;
        outline: 0;

        &::-moz-placeholder {
          color: #A2A2B2;
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 500;
        }

        &::placeholder {
          color: #A2A2B2;
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 500;
        }
      }

      span {
        color: #908D9E;
      }
    }
  }

  .content-apprentice {
    padding: 80px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;


    &> :nth-child(2) {
      max-width: 376px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;

      p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.rem;
        font-weight: 500;
        color: #323036;
      }

      span {
        font-size: 0.875rem;
        line-height: 1.5rem;
        color: #656370;
        text-align: center;
      }
    }
  }

  .action-apprentice {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;

  }
}

.table-apprendtice {
  width: 100%;

  .ant-table-thead .ant-table-cell {
    background: #FFF;
    color: #A2A2B2;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
  }

  .ant-table-tbody {
    .ant-table-cell {
      &>span {
        color: #323036;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
      }

      .customer-name {
        width: 100%;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;

        img {
          border-radius: 50%;
        }
      }
    }
  }
}

.container-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-form {
  max-width: 642px;
  width: 100%;
  margin: 0 auto;

  label {
    flex: 1;
  }
}

.form-create {
  max-width: 642px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;

  .form-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  label {
    border: 1px solid #DFE0E6;
    background-color: #FFF;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;

    span {
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: 500;
      color: #323036;
    }

    input {
      border: 0;
      outline: 0;
    }

    select {
      border: 0;
      outline: 0;
      background: transparent;
    }
  }

  .form-info {
    background-color: #EDEFFF;
    display: flex;
    gap: 1rem;
    border-radius: 0.5rem;
    padding: 1rem;

    .material-symbols-outlined {
      color: #5B3DEE;
    }

    ul {
      padding-left: 1rem;
    }

    div {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    p,
    li {
      color: #323036;
      font-size: 0.875rem;
      margin: 0;
    }
  }

  .container-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .row-file {
      display: flex;
      gap: 1rem;
      align-items: center;
      background-color: #FFF;
      border: 1px solid #DFE0E6;
      border-radius: 0.5rem;
      padding: 1rem;

      label {
        border: 0;

        input[type=file] {
          display: none;
        }
      }

      &>span {
        color: #908D9E
      }

      div {
        display: flex;
        flex-direction: column;
        flex: 1;

        :first-child {
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 600;
          color: #323036;
        }

        :last-child {
          font-size: 0.875rem;
          line-height: 1.5rem;
          color: #908D9E;
          font-weight: 400;
        }
      }

      .button-link {
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        border-radius: 80px;
        border: 0;
        background-color: transparent;

        span {
          color: #5B3DEE;
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 600;
        }

        &:hover span {
          color: #4F2FD3
        }

        &:active span {
          color: #4029AA
        }
      }
    }
  }

  .form-fields {
    display: flex;
    /* flex-direction: column; */
    gap: 1rem;
    align-items: center;
  }
}

.section-session {
  header {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    h1 {
      font-size: 1.5rem;
      line-height: 2rem;
      font-weight: 500;
      color: #323036;
      margin-bottom: 1.5rem;
    }
  }
}

.session-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.session-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 1rem;
  border: 1px solid #DFE0E6;
  background-color: #FFF;
  max-width: 696px;
  width: 100%;
  overflow: hidden;

  .session-card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
    padding: 1rem;

    &> :first-child {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 1rem;

      .avatar {
        display: inline-flex;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        background-color: #5B3DEE;
        border: 1px solid #FFF;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: #FFF;
        border-radius: 2rem;
        overflow: hidden;
      }

      .name {
        flex: 1;
      }

      .material-symbols-outlined {
        font-size: 1.25rem;
        color: #7B7989;
      }
    }

    &> :last-child {
      width: 100%;
      display: flex;
      gap: 1rem;

      p {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;

        span:last-child {
          color: #323036;
          font-size: 0.875rem;
          line-height: 1.5rem;
          font-weight: 400;
        }

        &:first-child {
          :first-child {
            color: #5B3DEE;
          }
        }

        &:last-child {
          :first-child {
            color: #EA288C;
          }
        }
      }
    }
  }

  .session-date {
    display: flex;
    padding: 1rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #DFE0E6;
    background-color: #F6F6F7;
    width: 100%;

    &> :first-child {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      &> :first-child {
        color: #7B7989;
      }

      :last-child {
        color: #323036;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
      }
    }
  }
}

.session-footer {
  display: flex;
  align-items: center;
  padding: 1.5rem 1.5rem 2.5rem;
  border-top: 1px solid #EEEFF1;
  background-color: #FFF;

  .sessions-status-counter {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: #FFF;
    border-radius: 1rem;

    .counter {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      width: 1.5rem;
      border-radius: 0.5rem;
      background-color: transparent;
    }


    &.active {
      background-color: #EDEFFF;


      .material-symbols-outlined {
        font-size: 1.25rem;
      }

      .text,
      .counter {
        color: #4F2FD3;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
      }

      .counter {
        background-color: #FFF;
      }
    }
  }
}

.container-session {
  max-width: 744px;
  width: 100%;
  position: relative;

  &>div {
    padding: 1.5rem 0;
  }

  .session-header {
    width: 100%;
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .session-user-data {
    display: flex;
    align-items: center;
    gap: 1rem;

    .user {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
    }

    .session-controller {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      button {
        border-radius: 8px;
        padding: 8px 16px 8px 8px;
      }

      &> :last-child {
        span {
          color: #B72A1E;
        }
      }
    }

  }

  .session-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #FFF;
    align-items: flex-start;


    .session-progress-data {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      border: 1px solid #DFE0E6;
      border-radius: 1rem;
      width: 100%;

      .session-progress {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        /* flex: 1; */

        &:not(:last-child) {
          border-right: 1px solid #DFE0E6;
        }

        .title {
          font-size: 0.875rem;
          line-height: 1.5rem;
          font-weight: 400;
          color: #323036;
        }

        .content {
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 600;
          color: #323036;
        }
      }
    }

    .session-notes {
      width: 100%;

      div {
        width: 100%;

        label {
          width: 100%;
          border: 1px solid #DFE0E6;
          display: flex;
          gap: 1rem;
          align-items: center;
          justify-content: flex-start;
          padding: 1.5rem;
          border-radius: 1rem;

          span {
            color: #7B7989;
          }

          p {
            flex: 1;
            margin: 0;
            color: #908D9E;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 400;
          }
        }
      }
    }
  }

  .session-row {
    display: flex;
    flex-direction: column;
    gap: 3rem;

    .session-attempts {
      display: flex;
      gap: 3rem;
      align-items: flex-start;

      .blocks {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        &>span {
          color: #323036;
          font-size: 1rem;
          line-height: 1.5rem;
        }

        .blocks-points {
          display: flex;
          align-items: center;
          gap: 12px;

          div {
            display: inline-flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }

  .session-actions {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

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


      .tip-switch {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .switch {
          width: 58px;
          display: flex;
          padding: 0.25rem;
          align-items: center;
          gap: 2px;
          background-color: #F6F6F7;
          border: 1px solid #DFE0E6;
          border-radius: 80px;
          margin: 0;
          transition: background 300ms linear;

          &.active {
            background-color: #5B3DEE;
          }

          input {
            display: none;

            &+.switch-pad {
              background-color: #FFF;
              border-radius: 80px;
              display: flex;
              align-items: center;
              width: 20px;
              height: 20px;
              font-size: 1.25rem;
              transform: translateX(0);
              transition: transform 300ms linear;
            }

            &:checked+.switch-pad {
              color: #5B3DEE;
              transform: translateX(28px);
            }
          }
        }
      }

      .tip-select {
        max-width: 336px;
        width: 100%;
      }
    }


  }

  .session-answers {
    display: flex;
    gap: 1.5rem;
    align-self: stretch;

    .answers {
      height: 200px;
      padding: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 1rem;
      flex: 1;
      cursor: pointer;

      :first-child {
        font-size: 2.5rem;
        line-height: 1;
      }

      :last-child {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
      }

      &.noTips {
        border: 1px solid #C4C9FF;
        background-color: #EDEFFF;
        color: #5B3DEE;
      }

      &.incorrect {
        border: 1px solid #FDCFCB;
        background-color: #FEF3F2;
        color: #B72A1E;
      }

      &.withTips {
        border: 1px solid #C3EFCE;
        background-color: #F2FBF4;
        color: #237238;
      }
    }
  }

  .container-modal-notes {
    position: fixed;
    inset: 0;
    background: #FFF;
    display: flex;
    flex-direction: column;
    padding: 0;
    opacity: 0;
    transform: translateY(-200vh);

    &.active {
      animation: toBottom 600ms 1 linear forwards;
    }

    &>div {
      padding: 1.5rem;


      &.notes-header {

        button {
          padding: 0;

          span {
            color: #908D9E;

            &:last-child {
              font-weight: 400;
            }
          }
        }
      }

      &.notes-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        align-self: stretch;
        gap: 1.5rem;
        border-bottom: 1px solid #DFE0E6;

        .content-text {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          align-items: flex-start;
          align-self: stretch;

          p {
            width: 100%;
            margin: 0;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 400;
            color: #323036;

            &:first-child {
              font-weight: 500;
            }
          }
        }

        .content-input {
          flex: 1;
          width: 100%;
          display: flex;
          flex-direction: column;

          textarea {
            width: 100%;
            resize: none;
            border-radius: 0.5rem;
            padding: 12px 16px;
            border: 1px solid #B6B6C3;
            outline: 0;
            white-space: pre-wrap;

            &:focus {
              border: 1px solid #4F2FD3;
              box-shadow: 0 0 0 2px #C4C9FF;
            }

            &.error {
              border: 1px solid #EB4335;
            }

          }
        }
      }

      &.notes-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
      }
    }
  }

}

.section-programs {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 2rem;
  /* max-width: 1184px; */
  width: 100%;
  gap: 1.5rem;
  align-self: stretch;
  border-radius: 1rem 1rem 0 0;
  background-color: #FFF;


  .header-programs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;

    h1 {
      font-size: 1.5rem;
      line-height: 2rem;
      font-weight: 500;
      color: #323036;
    }

    p {
      margin: 0;
      font-size: 0.875rem;
      line-height: 1.5rem;
      font-weight: 400;
      color: #A2A2B2;
    }

    .programs-buttons {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: nowrap;
    }

  }

  .separator {
    width: 100%;
    background-color: #EEEFF1;
    border: 1px solid #EEEFF1;
  }

  .table-programs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .table-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      &>div {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        &:last-child {
          max-width: 490px;
          width: 100%;

          .select {
            max-width: 188px;
            width: 100%;
          }
        }
      }
    }

    .antd-table-programs {
      width: 100%;
    }
  }
}

.scheme-form {
  label {
    display: flex;
    margin: 0;
    flex: 1;
  }

  .select-customers .ant-select-selector {
    border: none;
    box-shadow: none !important;
  }
}

.plans-group {
  label {
    &:hover {
      background-color: #EDEFFF;
    }
  }

  input[type=radio]:checked+p>span {
    color: #4F2FD3;
  }
}

.clinic-action {
  width: 220px;

  .material-symbols-outlined {
    color: #A2A2B2
  }

  a,
  button {
    color: #323036;
    cursor: pointer;
  }

  a:hover,
  button:hover {
    background-color: #EDEFFF;
    color: #5B3DEE;

    .material-symbols-outlined {
      color: inherit;
    }
  }
}

div.modal-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.24);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;


  .modal {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 1rem;
    border: 1px solid #DFE0E6;
    background-color: #FFF;
  }

  .modal-row {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    .modal-icon {
      width: 40px;
      height: 40px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 80px;
      background-color: #FEF3F2;


      span {
        font-size: 20px;
        line-height: 1;
        color: #EB4335
      }
    }

    .modal-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 4px;

      &>p {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
      }

      &> :first-child {
        color: #323036;
        font-weight: 500;
      }

      &> :last-child {
        color: #7B7989;
      }
    }
  }

  .modal-footer {
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
  }
}

.edit-form .select-customers {

  .ant-select-selection-placeholder {
    left: 0;
  }

  .ant-select-selector {
    border: none;
    box-shadow: none !important;
    padding: 0;
  }
}

/* Layout principal: 60% esquerda (imagem), 40% direita (form) */
.container-fluid>.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* 2) Colunas lado a lado em desktop */
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

/* 1) Lado esquerdo: ocupa 60% e recebe background */
/* reaproveita para .bg-login e .bg-login-tutor */

.bg-login-tutor {
  position: relative;
  flex: 0 0 60%;
  background: url('/img/login-tutor-bg.jpg') center/cover no-repeat;
}

.bg-login {
  position: relative;
  flex: 0 0 60%;
  background: url('/img/9d6ff0a0d410c1a65044b2871ccde8fd.jpg') center/cover no-repeat;
}

.bg-login::before,
.bg-login-tutor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(111.26% 60.85% at 77.76% 52.76%,
      rgba(55, 41, 134, 0) 0%,
      rgba(55, 41, 134, 0.9) 100%);
}

/* Logo dentro da área de imagem */
.branch {
  position: relative;
  z-index: 2;
  padding: 2rem;
  display: block;
  width: auto;
}

/* 2) Lado direito: ocupa 40% e fundo branco total */
.form-side {
  flex: 0 0 40%;
  max-width: 40%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Caixa do formulário (se quiser ativar) */
/*
.form-login-container {
  width: 100%;
  max-width: 360px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-radius: 8px;
  background: #fff;
}
*/

/* Título */
.login-title h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
}

/* Botão Google */
.login-google-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem;
  background: #fff;
  cursor: pointer;
  transition: background .2s;
}

.login-google-button img {
  margin-right: 0.5rem;
}

.login-google-button:hover {
  background: #f5f5f5;
}

/* Separador */
.login-separator {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: #777;
}

.login-separator .separator {
  flex: 1;
  height: 1px;
  background: #ddd;
}

.login-separator span:not(.separator) {
  padding: 0 1rem;
}

/* Campos de input */
.login-fields-row {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.75rem;
  margin-bottom: 1rem;
  transition: border-color .2s;
}

.login-fields-row input {
  border: none;
  outline: none;
  flex: 1;
}

.login-fields-row:hover {
  border-color: #aaa;
}

.input_invalid {
  border-color: #dc3545 !important;
}

/* Ícone mostrar senha */
#icon_pass {
  margin-left: 0.5rem;
  font-size: 1.2rem;
  color: #888;
}

/* Botões em coluna invertida para recover-password */
.button-group-column {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

.button-group-column .button-outline {
  width: 100%;
  text-align: center;
}

/* Toast (erro/sucesso) */
.toast-message {
  position: fixed;
  right: 2rem;
  display: flex;
  align-items: center;
  padding: 1rem;
  z-index: 2;
  border-radius: 8px;
  background: #F2FBF4;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  color: #205B30;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

.toast-message.error {
  background: #FEF3F2;
  color: #a71d2a;
}

.toast-message.success {
  background: #F2FBF4;
  color: #205B30;
}

.toast-message>div:first-child {
  margin-right: 0.75rem;
}

.toast-message .material-symbols-outlined {
  color: #205B30;
  font-size: 24px;
}

.toast-message.error .material-symbols-outlined {
  color: #a71d2a;
}

/* Tutor CPF verification actions layout */
.tutor-actions {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  /* left (resend) and right (submit) */
}

/* On smaller screens (tablet and mobile), stack buttons vertically */
@media (max-width: 1023px) {
  .tutor-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Email card used in CheckEmail screen */
.email-card {
  display: flex;
  padding: var(--lg, 24px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lg, 24px);
  align-self: stretch;
  border-radius: var(--md, 16px);
  border: 1px solid var(--Neutral-300, #CCCCD5);
  background: var(--Brand-White, #FFF);
}

.email-card .email-card-label {
  color: var(--Neutral-950, #323036);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.email-card .email-card-body {
  color: var(--Neutral-950, #323036);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.email-card .email-card-icon {
  color: #5B3DEE;
  font-size: 28px;
}

/* 3) Coluna de imagem 60% / form 40% em telas grandes */
@media (min-width: 1024px) {

  .bg-login,
  .bg-login-tutor {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .form-side {
    flex: 0 0 40%;
    max-width: 40%;
  }
}

/* 4) Em tablets (>=768px <1024px): mesma proporção */
@media (min-width: 768px) and (max-width: 1024px) {
  .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* coloca o form antes da imagem */
  .form-side {
    order: 2;
    padding: 2rem 1rem;
    z-index: 2;
    margin-top: -2rem;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }

  .bg-login,
  .bg-login-tutor {
    order: 1;
    min-height: 30vh;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* 5) Em mobile (<768px): col-6 vira full width e inverte ordem */
@media (max-width: 767px) {
  .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* coloca o form antes da imagem */
  .form-side {
    order: 2;
    padding: 2rem 1rem;
    z-index: 2;
    margin-top: -2rem;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }

  .bg-login,
  .bg-login-tutor {
    order: 1;
    min-height: 30vh;
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .form-login {
    gap: 13px !important;
  }

  .form-login-container {
    padding: 1rem 0.5rem !important;
  }
}

.custom-tabs .ant-tabs-ink-bar {
  background: #4F2FD3 !important;
  /* cor da linha */
}

.custom-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn {
  color: #7a7a7a;
  /* Cor do texto das abas não ativas ao passar o mouse */
}

.custom-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #4F2FD3 !important;
  /* texto do rótulo ativo */
}

.white-descriptions .ant-descriptions-view {
  background: #ffffff;
  /* fundo branco completo */
  border-radius: 12px;
  padding: 4px;
  /* mesmo efeito do p-6 */
}

.card {

  &>.icon {
    transform: rotate(00deg);
    transition: transform 300ms linear;
  }

  &+.scheme-fields {
    transition: height 300ms linear;
  }

  &.active+.scheme-fields {
    height: 418px;
  }

  &.active>.icon {
    transform: rotate(180deg);
  }
}

.custom-tabs .ant-tabs-ink-bar {
  background-color: #4F2FD3 !important;
  height: 2px !important;
}

.custom-descriptions .ant-descriptions-item-label {
  color: #323036;
  font-size: 14px;
  font-weight: 400;
}

.custom-descriptions .ant-descriptions-item-content {
  color: #323036;
  font-size: 14px;
  font-weight: 400;
}

.custom-descriptions__content {
  color: #323036;
  font-size: 16px;
  font-weight: 600;
}

/* BatchAddCustomers.css */

/* Wrapper mantém margem no topo */
.batch-add-wrapper {
  margin-top: 20px;
}

/* HEADER alinhado à esquerda com padding e margem */
.batch-add-header {
  text-align: left;
  /* padding: 0 24px; */
  margin-bottom: 24px;
  max-width: 650px;
  margin: auto;
}

.batch-add-header .ant-typography {
  margin: 0px 0px 14px 0px;
}

/* Descrição com padding extra e margem interna */
.batch-add-desc {
  color: #666;
  font-size: 14px;
  padding: 8px 0;
  /* padding vertical */
  margin: 0;
  /* sem margem adicional */
}

/* CONTAINER principal */
.batch-add-container {
  /* padding: 24px; */
  /* background: #fff; */
  max-width: 650px;
  margin: 0 auto;
  border-radius: 8px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
}

/* Bloco de download */
.batch-download-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 24px;
}

/* Info de download alinhada à esquerda */
.download-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 14px;
  text-align: left;
  /* força alinhamento à esquerda */
}

/* Bloco de upload */
.batch-upload-block {
  background: #fff;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 24px;
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
  /* primeiro item começa, último vai pro fim */
}

/* Bloco de upload */
.batch-upload-block1 {
  background: #fff;
  /* padding: 12px 16px; */
  border-radius: 6px;
  /* margin-bottom: 24px; */
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
  /* primeiro item começa, último vai pro fim */
}

/* Texto de dica de upload alinhado e com padding */
.upload-hint {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  text-align: left;
  /* alinhamento à esquerda */
}

/* Ações finais */
.batch-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px;
  /* mesmo padding lateral do header */
}

/* Bloco de download */
.batch-add-container_b {
  /* padding: 24px; */
  background: #DFE0E6;
  max-width: 650px;
  margin: 0 auto;
  border-radius: 8px;

}

.batch-download-block_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* primeiro item começa, último vai pro fim */
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 24px;
}

.btn-rounded {
  border-radius: 30px !important;
}

.download-row {
  display: flex;
  align-items: center;
  /* ou center, se preferir verticalmente centralizados */
  gap: 12px;
  /* espaço entre ícone e texto */
}

.download-icon {
  font-size: 24px;
  /* ajusta o tamanho do ícone */
  line-height: 1;
  /* evita desalinhamento vertical */
}

.text-info {
  display: flex;
  flex-direction: column;
}

.text-info .titulo {
  font-weight: bold;
  font-size: 16px;
}

.text-info .upload-hint {
  font-size: 12px;
  color: #999;
}

.style-button {
  background: #4F2FD3;
  color: #fff;
}

.btn-rounded.style-button:hover {
  background: #4F2FD3 !important;
  color: #fff !important;
}

.uploaded-preview {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #e0e0ff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.uploaded-preview .left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  font-size: 32px;
  color: #6f42c1;
}

.text-info .titulo {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.text-info .upload-hint {
  font-size: 13px;
  color: #999;
}

.uploaded-preview .right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-badge {
  background: #f1f0ff;
  border-radius: 16px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4a00e0;
  font-weight: 500;
  font-size: 13px;
}

.file-badge .material-symbols-outlined {
  font-size: 18px;
}

.upload-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background-color: #fff;
}

.left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  font-size: 24px;
  color: #4F2FD3;
}

.text-info .titulo {
  font-weight: 600;
  font-size: 14px;
  color: #111;
}

.text-info .upload-hint {
  font-size: 12px;
  color: #888;
}

.file-badge {
  background: #f4f0ff;
  color: #4F2FD3;
  padding: 4px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.filename {
  font-weight: 500;
  font-size: 13px;
}

.style-select {
  color: #5B3DEE !important;
  border: 0 !important;
  font-weight: 600 !important;
}

.button-save {
  font-weight: 500;
  font-size: 15px;
}

.custom-table-header {
  color: #A2A2B2;
  font-weight: 600;
  font-size: 16px;
}

.custom-modal .ant-modal-wrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.custom-modal .ant-modal {
  top: 0 !important;
  transform: none !important;
}

/* .custom-modal .ant-modal-content {
  max-width: 420px;
  padding: 24px;
  border-radius: 12px;
} */

.custom-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 25px;
  font-weight: 600;
  font-size: 16px;
}

.custom-modal .modal-title .material-symbols-outlined {
  font-size: 20px;
  color: #4F2FD3;
}

.custom-modal .modal-content {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  color: #7B7989;
  margin-left: 48px;
  width: 70%;
}

.custom-modal .modal-content .material-symbols-outlined {
  font-size: 18px;
  color: #999;
  margin-top: 2px;
}

.custom-modal .ant-modal-footer {
  margin: 20px -24px -24px -24px;
  padding: 16px 24px;
  background-color: #f5f5f5;
  border-top: none;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}


.custom-modal .btn-modal-cancel {
  background: transparent;
  border: none;
  color: #323036;
  font-weight: 500;
  border-radius: 30px;
  background-color: #fff;
}

.custom-modal:hover .btn-modal-cancel:hover {
  color: #323036;
  background-color: #fff;
}

.custom-modal .btn-modal-ok {
  background-color: #4F2FD3;
  border: none;
  color: white;
  font-weight: 500;
  border-radius: 30px;
}

.custom-modal:hover .btn-modal-ok:hover {
  background-color: #4F2FD3;
  color: white;
}

.custom-select-dropdown .ant-select-item-option:hover {
  background-color: #4F2FD3 !important;
  color: #fff !important;
}

.custom-select-dropdown .ant-select-item-option {
  padding: 8px 12px;
  font-weight: 500;
}

.custom-select-dropdown .ant-select-item-option:hover {
  background-color: #4F2FD3 !important;
  color: #fff !important;
}

.custom-select-dropdown .ant-select-item-option-selected {
  background-color: #4F2FD3 !important;
  color: #fff !important;
  opacity: 0.7;
  font-weight: 600;
}

.custom-select .ant-select-selector {
  color: #4F2FD3;
  font-weight: 500;
  font-size: 14px;
}

.custom-pagination {
  display: flex;
  gap: 0px;
}

.custom-pagination .ant-pagination-item,
.custom-pagination .ant-pagination-prev,
.custom-pagination .ant-pagination-next {
  background-color: #fff;
  border: none;
  border-radius: 12px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  color: #1f1f1f;
  transition: all 0.2s ease-in-out;
}

.custom-pagination .ant-pagination-item-active {
  background-color: #4F2FD3;
  color: #fff !important;
}

.custom-pagination .ant-pagination-item-active a {
  color: #fff !important;
}

.custom-pagination .ant-pagination-item:hover,
.custom-pagination .ant-pagination-prev:hover,
.custom-pagination .ant-pagination-next:hover {
  background-color: #ececec;
}

.custom-pagination .ant-pagination-prev .ant-pagination-item-link,
.custom-pagination .ant-pagination-next .ant-pagination-item-link {
  color: #1f1f1f;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

.custom-pagination .ant-pagination-item-ellipsis {
  color: #999;
}

.cancel-style:hover {
  background: #fff !important;
  color: #000000 !important;
  border-color: #999 !important;
}

.action-apprentice-new {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.style-select {
  background-color: 0 !important;
  padding: 0 !important;
}

.span-style {
  font-size: 0.75rem;
  line-height: 0rem;
  font-weight: 500;
  color: #323036;
  margin-top: 10px;
  margin-bottom: 15px;

}

.tall-select .ant-select-selector {
  height: 53px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 11px;
}

.floating-label-wrapper {
  position: relative;
  margin-top: 1rem;
}

.floating-label-input {
  padding-top: 1.8rem !important;
}

.floating-label-label {
  position: absolute;
  left: 16px;
  top: 28px;
  transition: all 0.2s;
  color: #7D7A8B;
  background: #fff;
  pointer-events: none;
  font-size: 13px;
}

.floating-label-input:not(:-moz-placeholder)+.floating-label-label {
  top: 10px;
  font-size: 12px;
  color: #323036;
}

.floating-label-input:focus+.floating-label-label,
.floating-label-input:not(:placeholder-shown)+.floating-label-label {
  top: 10px;
  font-size: 12px;
  color: #323036;
}


.spark-select {

  .ant-select-selector,
  &:hover .ant-select-selector {
    border-color: #d9d9d9 !important;
  }

  &.error .ant-select-selector {
    border-color: #EB4335 !important;
  }
}

.spark-input {
  &:hover {
    border-color: #d9d9d9;
  }

  &.error {
    border-color: #EB4335;
  }
}

.ant-modal-footer .ant-btn-primary {
  background: #6C3EF4;
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.5rem 1.75rem;
  border: 2px solid #6C3EF4;
  box-shadow: none;
}

.ant-modal-footer .ant-btn:not(.ant-btn-primary) {
  background: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.5rem 1.75rem;
  box-shadow: none;
}

.ant-modal-footer:hover .ant-btn-primary:hover {
  background: #6C3EF4;
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.5rem 1.75rem;
  border: 2px solid #6C3EF4;
  box-shadow: none;
}

.ant-modal-footer:hover .ant-btn:not(.ant-btn-primary):hover {
  background: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.5rem 1.75rem;
  box-shadow: none;
  border: 2px solid #d1d1d1;
}

.custom-range-slider {
  width: 100%;
  height: 6px;
  background: #ffe0dc;
  border-radius: 3px;
  outline: none;
  margin: 0 8px;
  transition: background 0.2s;
}

.custom-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E61E32;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #E61E32;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.custom-range-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E61E32;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #E61E32;
  cursor: pointer;
  -moz-transition: background 0.2s;
  transition: background 0.2s;
}

.custom-range-slider::-ms-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E61E32;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #E61E32;
  cursor: pointer;
  -ms-transition: background 0.2s;
  transition: background 0.2s;
}

.custom-range-slider:focus {
  outline: none;
}

.custom-range-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #ffe0dc;
}

.custom-range-slider::-ms-fill-lower {
  background: #ffe0dc;
}

.custom-range-slider::-ms-fill-upper {
  background: #ffe0dc;
}

.custom-range-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #ffe0dc;
}

.custom-range-slider::-ms-tooltip {
  display: none;
}

.slider-label {
  color: #9a9a9a;
  font-size: 1.3rem;
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.badge-behavior {
  /* flex px-4 py-3 rounded-lg border border-[#DFE0E6] */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 8px;
  border: 1px solid #DFE0E6;
  background-color: #fff;

  &.active {
    background-color: #5B3DEE;
    border-color: #fff;
    box-shadow: 0 0 0 2px #C4C9FF;
    color: #FFF;
  }
}

.nav-menu-schemes {
  &::-webkit-scrollbar {
    display: none;
  }
}

.nav-active {
  /* transform: translateY(-100vh);  */
  animation: toTop 300ms linear forwards;
}

@keyframes toTop {
  to {
    transform: translateY(-100vh);
  }
}

.custom-select_ .ant-select-selector {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* .toolbar button {
  margin: 2px;
  border: 1px solid #ddd;
  background: #f4f4f4;
  cursor: pointer;
}

.toolbar button.is-active {
  background: #333;
  color: #fff;
} */

.toolbar button.is-active {
  background-color: #FFF;
  box-shadow: 0 0 0 3px #5B3DEE;
}

.toolbar input[type="color"] {
  margin: 0 5px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.flip-icon {
  display: inline-block;
  transform: rotateY(180deg);
}

.tiptap-editor {
  .tiptap {
    padding: 1rem;
    outline: none;
  }

  h1 {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }

  h2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  h3 {
    font-size: 1.75rem;
    line-height: 2rem;
  }


  ul {
    list-style-type: disc;
  }

  ol {
    list-style: decimal;
  }

  p {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  a {
    text-decoration: underline;
    cursor: pointer;
  }

}

.fc-event--brand {
  background-color: #5B3DEE20 !important;
  color: #5B3DEE !important;
  border: 1px solid #5B3DEE50 !important;
}

.fc-event--functional {
  background-color: #fee5f585 !important;
  color: #ea288c62 !important;
  border: 1px solid #ea288c62 !important;
}

.container-functional {
  /* max-width: 744px; */
  width: 100%;
  position: relative;

  &>div {
    padding: 1.5rem 0;
  }

  .functional-header {
    width: 100%;
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .functional-user-data {
    display: flex;
    align-items: center;
    gap: 1rem;

    .user {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1;
    }

    .functional-controller {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      button {
        border-radius: 8px;
        padding: 8px 16px 8px 8px;
      }

      &> :last-child {
        span {
          color: #B72A1E;
        }
      }
    }

  }

  .functional-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #FFF;
    align-items: flex-start;
    width: 100%;


    .functional-progress-data {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      border: 1px solid #DFE0E6;
      border-radius: 1rem;
      width: 100%;

      .functional-progress {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        /* flex: 1; */

        &:not(:last-child) {
          border-right: 1px solid #DFE0E6;
        }

        .title {
          font-size: 0.875rem;
          line-height: 1.5rem;
          font-weight: 400;
          color: #323036;
        }

        .content {
          font-size: 1rem;
          line-height: 1.5rem;
          font-weight: 600;
          color: #323036;
        }
      }
    }

    .functional-notes {
      width: 100%;

      div {
        width: 100%;

        label {
          width: 100%;
          border: 1px solid #DFE0E6;
          display: flex;
          gap: 1rem;
          align-items: center;
          justify-content: flex-start;
          padding: 1.5rem;
          border-radius: 1rem;

          span {
            color: #5B3DEE;
          }

          p {
            flex: 1;
            margin: 0;
            color: #908D9E;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 400;
          }
        }
      }
    }
  }

  .functional-row {
    display: flex;
    flex-direction: column;
    gap: 3rem;

    .functional-attempts {
      display: flex;
      gap: 3rem;
      align-items: flex-start;

      .blocks {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        &>span {
          color: #323036;
          font-size: 1rem;
          line-height: 1.5rem;
        }

        .blocks-points {
          display: flex;
          align-items: center;
          gap: 12px;

          div {
            display: inline-flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }

  .functional-actions {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

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


      .tip-switch {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .switch {
          width: 58px;
          display: flex;
          padding: 0.25rem;
          align-items: center;
          gap: 2px;
          background-color: #F6F6F7;
          border: 1px solid #DFE0E6;
          border-radius: 80px;
          margin: 0;
          transition: background 300ms linear;

          &.active {
            background-color: #5B3DEE;
          }

          input {
            display: none;

            &+.switch-pad {
              background-color: #FFF;
              border-radius: 80px;
              display: flex;
              align-items: center;
              width: 20px;
              height: 20px;
              font-size: 1.25rem;
              transform: translateX(0);
              transition: transform 300ms linear;
            }

            &:checked+.switch-pad {
              color: #5B3DEE;
              transform: translateX(28px);
            }
          }
        }
      }

      .tip-select {
        max-width: 336px;
        width: 100%;
      }
    }
  }

  .functional-answers {
    display: flex;
    gap: 1.5rem;
    align-self: stretch;

    .answers {
      height: 200px;
      padding: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 1rem;
      flex: 1;
      cursor: pointer;

      :first-child {
        font-size: 2.5rem;
        line-height: 1;
      }

      :last-child {
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 500;
      }

      &.noTips {
        border: 1px solid #C4C9FF;
        background-color: #EDEFFF;
        color: #5B3DEE;
      }

      &.incorrect {
        border: 1px solid #FDCFCB;
        background-color: #FEF3F2;
        color: #B72A1E;
      }

      &.withTips {
        border: 1px solid #C3EFCE;
        background-color: #F2FBF4;
        color: #237238;
      }
    }
  }

  .container-modal-notes {
    position: fixed;
    inset: 0;
    background: #FFF;
    display: flex;
    flex-direction: column;
    padding: 0;
    opacity: 0;
    transform: translateY(-200vh);

    &.active {
      animation: toBottom 600ms 1 linear forwards;
    }

    &>div {
      padding: 1.5rem;


      &.notes-header {

        button {
          padding: 0;

          span {
            color: #908D9E;

            &:last-child {
              font-weight: 400;
            }
          }
        }
      }

      &.notes-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        align-self: stretch;
        gap: 1.5rem;
        border-bottom: 1px solid #DFE0E6;

        .content-text {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          align-items: flex-start;
          align-self: stretch;

          p {
            width: 100%;
            margin: 0;
            font-size: 1rem;
            line-height: 1.5rem;
            font-weight: 400;
            color: #323036;

            &:first-child {
              font-weight: 500;
            }
          }
        }

        .content-input {
          flex: 1;
          width: 100%;
          display: flex;
          flex-direction: column;

          textarea {
            width: 100%;
            resize: none;
            border-radius: 0.5rem;
            padding: 12px 16px;
            border: 1px solid #B6B6C3;
            outline: 0;
            white-space: pre-wrap;

            &:focus {
              border: 1px solid #4F2FD3;
              box-shadow: 0 0 0 2px #C4C9FF;
            }

            &.error {
              border: 1px solid #EB4335;
            }

          }
        }
      }

      &.notes-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
      }
    }
  }

}

.tippy-box {
  background-color: #FFF !important;

  .tippy-content {
    padding: 0;
  }

  .tippy-arrow::before {
    border-color: transparent !important;
  }
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-menu ul {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  height: 100%;
}

.sidebar-menu .sidebar-help-item {
  margin-top: auto;
}

.ocr-table {
  /* .ant-tabs-ink-bar { */
  .ant-tabs .ant-tabs-ink-bar {
    background-color: #5B3DEE !important;
  }
  .ant-tabs-tabpane-active {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

.ant-drawer-header{display: none !important;}
/* .ant-drawer-header-title{
  justify-content: flex-end !important;
} */