@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .title {
    @apply lg:text-[28px] text-2xl font-semibold;
  }

  .side-bar {
    @apply bg-white xl:w-[28rem] md:w-[20rem] xl:py-10 xl:px-8 p-5 flex flex-col md:fixed top-0 left-0 bottom-0 border-lightBlue border-r-[1px];

    .step {
      @apply flex items-center xl:justify-end justify-between py-6 font-semibold opacity-50;
    }

    .step.active {
      @apply opacity-100;
    }

    .step-number {
      @apply ml-3 h-[2.75rem] w-[2.75rem] flex items-center justify-center rounded-full;
    }

    .step.current .step-number {
      @apply border-primary border-2 bg-primary/10;
    }
  }

  .main-container {
    @apply flex-1 xl:pl-[28rem] md:pl-[20rem];
  }

  .content-wrapper {
    @apply xl:p-10 md:p-10 p-4 m-auto max-w-[70rem];
  }

  .checkbox-label {
    @apply flex items-center text-center align-middle select-none cursor-pointer w-[100%] flex-1 h-[7.5rem] border border-grey rounded-[12px] bg-white peer-checked:border-primary peer-checked:border-2 peer-checked:bg-primary/10 text-primary font-semibold transition ease-out hover:shadow-xl;
  }

  .checkbox-long {
    @apply flex items-center text-left align-middle select-none cursor-pointer w-[100%] flex-1 h-[5.5rem] border border-grey rounded-[12px] bg-white peer-checked:border-primary peer-checked:border-2 peer-checked:bg-primary/10 text-primary font-semibold transition ease-out hover:shadow-xl;
  }

  .icon-container {
    @apply flex border-primary bg-white border rounded-md w-[2rem] h-[2rem] mx-auto mb-3;

    .icon {
      @apply mx-auto p-[5px] w-[100%];
    }
  }

  .action-btns {
    @apply xl:justify-end flex justify-between mt-10;

    .back-btn {
      @apply inline-flex border border-primary text-primary uppercase p-2 justify-center rounded-md md:min-w-[12rem] md:flex-none flex-1 font-semibold hover:bg-primary hover:text-white hover:shadow-xl;
    }

    .next-btn {
      @apply inline-flex border border-primary ml-5 uppercase p-2 justify-center rounded-md md:min-w-[12rem] md:flex-none flex-1 font-semibold bg-primary text-white hover:shadow-xl disabled:opacity-50;
    }
  }
}
.email-field {
  padding-left: 40px;
  background: url(/assets/mail-icon-5d903c71af98a0d27446224311380e816677fde149b7d2a4bbca220e1da3d91a.svg) no-repeat 10px;
}

.linkedin-field {
  padding-left: 40px;
  background: url(/assets/linkedin-icon-ba6add4765ef6daa08cf8d500840d0badc113eefc9bcb408a596bc75993a1210.svg) no-repeat 10px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
    background-color: #ffffff!important;
}