@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
  .arrow-after:hover:after {
    content: "⬈";
  }

  .notice {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative;
  }

  .alert {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative;
  }

  .btn {
    @apply font-bold py-2 px-4 rounded cursor-pointer;
  }

  .btn-primary {
    @apply bg-csg-400 text-csg-900;
  }

  .btn-primary:hover {
    @apply bg-csg-600;
  }

  .devise-page-container {
    @apply w-screen h-screen relative top-0 left-0 lg:bg-csg-600 lg:bg-opacity-20;
  }

  .circle-container {
    @apply w-[660px] h-[660px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-full border-csg-400 border-[1.2px];
  }

  .form-container {
    @apply w-[285px] lg:w-[350px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
  }

  .form-label {
    @apply block text-csb-400 text-lg;
  }

  .form-input {
    @apply appearance-none border-[1.2px] border-[#c1c1c1] rounded-[15px] lg:rounded-[20px] w-full px-6 leading-6 h-[40px] lg:h-[50px] text-csb-400 text-sm;
  }

  .form-input::placeholder {
    @apply text-[#c1c1c1] text-[15px] font-medium leading-[22px] tracking-normal;
  }

  .form-input:focus {
    @apply outline-none;
  }

  .form-submit {
    @apply rounded-2xl lg:rounded-3xl h-[40px] lg:h-[50px] text-[19px] lg:text-[20px] text-csg-900 leading-6 font-normal hover:text-white hover:bg-csg-700;
  }

  .field-label {
    @apply mt-5;
  }

  .form-heading {
    @apply text-3xl text-csg-600 mb-6 mx-auto w-fit;
  }

  .list-container {
    @apply w-full max-w-7xl bg-white drop-shadow-2xl rounded px-8 pt-6 pb-8 mb-4 mx-auto;
  }

  .tab {
    @apply float-left bg-stone-200 w-1/4 h-[71vh] rounded-2xl;
  }

  .tablinks {
    @apply bg-inherit h7-semibold text-black px-5 py-4 w-full border-none outline-none text-left cursor-pointer duration-300 block rounded-2xl;
  }

  .tablinks:hover {
    @apply bg-stone-300 rounded-2xl h7-semibold text-csb-700;
  }

  .tablinks.disabled {
    @apply rounded-2xl h7 text-csb-400;
  }

  .tablinks.disabled:hover {
    @apply rounded-2xl h7 bg-inherit cursor-default;
  }

  .active_tab {
    @apply bg-csg-700 rounded-2xl h7-semibold text-csw-0;
  }

  .tabcontent {
    @apply float-left p-6 w-8/12 min-h-[600px] h-fit;
  }

  .accordion-opened,
  .accordion-closed {
    @apply cursor-pointer;
  }

  .accordion-opened:after {
    content: "\025BE";
  }

  .accordion-closed:after {
    content: "\025B8";
  }

  .required:after {
    content: "*";
    color: red;
  }

  td a,
  th a {
    display: block;
  }

  .header-link {
    @apply uppercase py-2.5 lg:py-2 pr-2 pl-14 lg:pl-24 text-csg-900 block duration-300;
  }
  .header-link:hover {
    @apply text-white;
  }

  .sub-link,
  .arrow-link {
    @apply flex items-center;
  }
  .sub-link .list-pointer,
  .arrow-link .faq-link-pointer {
    opacity: 0;
  }
  .sub-link:hover .list-pointer,
  .arrow-link:hover .faq-link-pointer {
    opacity: 1;
  }

  a {
    @apply text-csg-600 cursor-pointer;
  }

  .asterisk {
    @apply text-csg-400 text-lg font-extrabold;
  }

  .checkbox {
    @apply rounded-xl bg-[#D9D9D9] border-none w-5 h-5;
  }

  input[type="text"]:read-only {
    @apply bg-gray-200 border-gray-400;
  }

  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"] {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
  }

  input[type="radio"] {
    @apply ml-4;
  }
  input[type="radio"] + label {
    @apply ml-2;
  }

  .list-pointer {
    @apply w-5 h-5 rounded-full;
  }

  .contact-us {
    @apply bg-csg-900 bg-[url(/assets/city_background-5b4891fc4da86b426a2977271d4ee02ce2b71f401258a408eea7e513f8ba1f84.png)] absolute top-0 bg-cover pt-48 bg-blend-multiply;
  }

  .about-us {
    @apply bg-csg-10/95 bg-[url(/assets/about_us_city_image_mobile-c621c9471d058322c96d93e7c54f01006a39f0eb93cda0de40cf8560194b169d.png)] lg:bg-[url(/assets/about_us_city_image-f02f472ec91e84e55467666dbd3a0bf63c06d1d1f608c9dbce6120b2048d1d93.png)] bg-cover lg:bg-contain bg-bottom bg-no-repeat w-full h-[730px] bg-blend-multiply;
  }

  .about-us-final-section {
    @apply bg-[url(/assets/about_us_final_section_image-d12e6de4fe0b8b1d6597ca1638ea7c1f9e2d926d20f3efe105966b07ef9d7707.png)] bg-cover bg-blend-multiply bg-center bg-no-repeat w-full h-[550px] lg:h-[920px];
  }
  .rounded-circle-text {
    @apply w-56 lg:w-96 h-56 lg:h-96 rounded-full bg-white border border-csg-400 flex flex-col px-20 items-center gap-6 justify-center text-csb-700;
  }
  .rounded-circle-text:hover {
    @apply bg-csg-900 text-csg-400;
  }
  .rounded-circle-text img {
    opacity: 0;
  }
  .rounded-circle-text:hover img {
    opacity: 1;
  }

  .contact-form-field {
    @apply w-full lg:w-[428px] h-12 rounded-[18px];
  }
  .contact-form-field::placeholder {
    @apply uppercase text-[15px] font-medium leading-[22px] tracking-wider text-csg-700 opacity-60 pt-2 pl-1;
  }

  .transparent-submit-btn {
    @apply bg-transparent border rounded-[18px] border-csg-400 text-csg-400 uppercase;
  }
  .transparent-submit-btn:hover {
    @apply bg-csg-400 text-csg-900;
  }

  .faq-link {
    @apply underline underline-offset-4 text-csg-400;
  }
  .arrow-link:hover .faq-link {
    @apply text-white;
  }

  h1 {
    @apply text-[32px] lg:text-[50px] font-normal leading-[34px] lg:leading-[52px] lg:-tracking-[1px];
  }

  h1.medium {
    @apply -tracking-[0.5px];
  }

  h2 {
    @apply text-3xl lg:text-4xl font-medium lg:font-normal leading-8 lg:leading-[43px] -tracking-[0.3px] lg:tracking-normal;
  }

  h2.variation {
    @apply leading-[38px];
  }

  h2.semibold {
    @apply font-semibold -tracking-[0.36px];
  }

  .h3 {
    @apply text-2xl lg:text-3xl font-normal leading-7 lg:leading-[34px] tracking-normal;
  }

  h3 {
    @apply h3;
  }

  h3.medium {
    @apply leading-[32px];
  }

  h3.bold {
    @apply font-bold;
  }

  h4 {
    @apply text-xl lg:text-2xl font-normal leading-6 lg:leading-[29px] tracking-normal;
  }

  h4.medium {
    @apply font-medium;
  }

  h4.semibold {
    @apply font-semibold max-lg:leading-[22px];
  }

  h4.bold {
    @apply font-bold leading-6;
  }

  h4.boldvariation {
    @apply font-bold;
  }

  h4.extrabold {
    @apply font-extrabold max-lg:leading-[22px];
  }

  h5 {
    @apply text-lg lg:text-xl font-normal leading-[21px] lg:leading-6 tracking-normal;
  }

  h5.variation {
    @apply leading-[26px];
  }

  h5.medium {
    @apply font-medium leading-[23px];
  }

  h5.bold {
    @apply font-bold leading-6;
  }

  h5.bold.variation {
    @apply leading-[26px];
  }

  h5.extrabold {
    @apply font-extrabold lg:leading-[23px];
  }

  h6 {
    @apply text-base lg:text-lg font-normal leading-[21px] lg:leading-5 tracking-normal;
  }

  h6.medium {
    @apply font-medium tracking-[0.54px];
  }

  .h6-medium {
    @apply text-base lg:text-lg font-medium leading-[21px] lg:leading-7 tracking-[0.54px];
  }

  .h7 {
    @apply text-sm lg:text-[17px] font-normal leading-5 lg:leading-[23px] tracking-normal;
  }

  .h7-italic {
    @apply text-sm lg:text-[17px] italic font-normal leading-4 lg:leading-[23px] tracking-[0.3px] lg:tracking-[0.34px];
  }

  .h7-medium {
    @apply text-sm lg:text-[17px] font-medium leading-4 lg:leading-[23px] tracking-[0.85px];
  }

  .h7-medium-underline {
    @apply text-sm lg:text-[17px] font-medium leading-4 lg:leading-[23px] tracking-[0.51px] underline;
  }

  .h7-semibold {
    @apply text-sm lg:text-[17px] font-semibold leading-4 lg:leading-[23px] tracking-[0.51px];
  }

  .h7-bold {
    @apply text-sm lg:text-[17px] font-bold leading-4 lg:leading-[23px] tracking-[0.51px];
  }

  .h7-extrabold {
    @apply text-sm lg:text-[17px] font-extrabold leading-5 lg:leading-[23px] tracking-normal;
  }

  .h8 {
    @apply text-[15px] font-normal leading-[22px] tracking-normal;
  }

  .h8-underline {
    @apply text-[15px] font-normal leading-[22px] underline tracking-normal;
  }

  .h8-variation {
    @apply text-[15px] font-normal leading-[22px] tracking-[0.75px];
  }

  .h8-medium {
    @apply text-[15px] font-medium leading-[22px] tracking-normal;
  }

  .gradient-bg {
    background: linear-gradient(
      180deg,
      rgba(160, 189, 59, 0.5) 0%,
      rgba(160, 189, 59, 0.1) 100%
    );
    mix-blend-mode: multiply;
  }

  .submission-link {
    @apply h7-medium-underline text-csw-0;
  }

  .submission-link:hover {
    @apply text-csg-400 no-underline;
  }

  .home-gradient-bg {
    background: linear-gradient(
      180deg,
      #68933e 0%,
      #68933e 0.01%,
      rgba(217, 217, 217, 0) 100%
    );

    opacity: 0.6;
    mix-blend-mode: multiply;
  }

  .gradient-bg-white {
    background: linear-gradient(
      180deg,
      rgba(160, 189, 59, 0.5) 0%,
      rgba(160, 189, 59, 0) 100%
    );
    mix-blend-mode: multiply;
  }
  .gradient-bg-1 {
    opacity: 0.6;
    background: linear-gradient(
      180deg,
      rgba(160, 189, 59, 0.67) 0%,
      rgba(217, 217, 217, 0) 100%
    );
    mix-blend-mode: multiply;
  }

  .menu-terms {
    @apply text-[13px] font-medium leading-5;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) 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
 * 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.
 *


 */