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

:root {
    --color-primary: #0054A5;
    --color-secondary: #5B6987;
}

.list {
    @apply before:tw-absolute before:tw-left-0 before:tw-top-0 before:tw-w-[2px] before:tw-h-[90px] tw-relative before:tw-bg-primary tw-pl-10;
}

    .list li {
        @apply tw-border-b tw-border-[#5B6987] tw-border-opacity-20 first:tw-border-t;
    }

        .list li a {
            @apply -tw-ml-5 -tw-mr-5 before:tw-w-4 before:tw-h-4 tw-relative before:tw-left-5 before:tw-absolute before:tw-top-1/2 before:-tw-mt-2 before:tw-bg-primary before:tw-rounded-[50%] before:tw-border-[#f8d0bd] before:tw-border-4 tw-text-[#5B6987] tw-pl-12 tw-pr-5 tw-py-4 tw-text-base tw-flex tw-rounded hover:tw-bg-primary hover:tw-text-white hover:before:tw-bg-white;
        }

            .list li a .icon {
                @apply tw-flex tw-justify-center tw-items-center tw-w-5 tw-h-5 tw-ml-auto tw-rounded-sm;
            }

            .list li a:hover .icon {
                @apply tw-bg-white;
            }

#topNav.navbar-light {
    @apply tw-bg-[#161E31] tw-relative;
}

#mainNav.mainHeaderNav.navbar-light {
    @apply !tw-bg-white;
}

    #mainNav.mainHeaderNav.navbar-light.sticky-menu {
        @apply !tw-bg-white !tw-shadow-lg;
    }

#mainNav.mainHeaderNav.navbar-light {
    @apply tw-relative tw-top-0;
}

    #mainNav.mainHeaderNav.navbar-light > .container {
        @apply tw-border-b-0;
    }

    #mainNav.mainHeaderNav.navbar-light #mainNavbar a {
        @apply tw-text-[#0C1622];
    }

    #mainNav.mainHeaderNav.navbar-light #searchToggle {
        @apply tw-border-[#161E31] tw-border-opacity-20;
    }

#mainNav.mainHeaderNav #searchToggle svg {
    @apply tw-fill-white;
}

#mainNav.mainHeaderNav.navbar-light #searchToggle svg {
    @apply tw-fill-black;
}

#mainNav.mainHeaderNav .white-bg {
    @apply tw-hidden;
}

#mainNav.mainHeaderNav.navbar-light .white-bg {
    @apply tw-block;
}

#mainNav.mainHeaderNav .transparent-bg {
    @apply tw-block;
}

#mainNav.mainHeaderNav.navbar-light .transparent-bg {
    @apply tw-hidden;
}

#menuBurger {
    @apply tw-fill-black;
}

#mainNav.mainHeaderNav.navbar-light #menuBurger {
    @apply tw-fill-black;
}

.custom-accordion .accordion-item {
    @apply tw-my-3 !tw-rounded !tw-border-spacing-0 tw-border-none tw-bg-transparent;
}

.custom-accordion .accordion-header {
    @apply tw-text-lg tw-leading-none;
}

.custom-accordion .accordion-button {
    border: 1px solid #D8DCED !important;
    @apply tw-text-lg tw-leading-none tw-rounded tw-bg-white;
}

.custom-accordion .accordion-body {
    @apply !tw-bg-transparent tw-text-left;
}

    .custom-accordion .accordion-body p {
        @apply tw-mb-3 tw-text-base tw-leading-tight;
    }

.custom-accordion .accordion-button:not(.collapsed) {
    @apply tw-bg-primary tw-text-white !tw-border-primary tw-rounded tw-shadow-none;
}

    .custom-accordion .accordion-button:not(.collapsed) .accordion-header {
        @apply tw-border-primary;
    }

.custom-accordion .accordion-item:first-of-type .accordion-button {
    @apply tw-rounded;
}

.custom-accordion .accordion-button:focus {
    @apply tw-shadow-none;
}

.custom-accordion .accordion-button::after {
    content: "\f107";
    font: normal normal normal 14px/1 FontAwesome;
    background-image: inherit;
    @apply tw-text-white tw-bg-primary tw-flex tw-items-center tw-justify-center tw-rounded-sm;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
    background-image: inherit;
    transform: inherit;
    @apply tw-bg-white tw-text-primary;
}

.custom-button {
    @apply tw-bg-primary tw-rounded-sm tw-transition-all tw-text-white tw-px-5 tw-py-2 tw-text-base tw-font-bold tw-min-h-[50px] tw-flex tw-items-center tw-min-w-[150px] hover:tw-text-white hover:tw-shadow-[3px_3px_10px_0_var(--custom-primary)];
}

    .custom-button:hover i {
        @apply tw-translate-x-1;
    }

.tabs .nav-link {
    @apply tw-w-full tw-bg-[#EDEDEE] tw-text-[#0C1521] tw-text-base md:tw-text-xl tw-font-bold tw-min-h-[76px] tw-p-1 tw-border-t-4 tw-border-white tw-transition-all;
}

    .tabs .nav-link.active {
        @apply tw-bg-white tw-border-primary;
    }