/* #Mega Menu Styles
  if you use sass, convert all this additional css to tailwindcss using the 'hack' @apply for all element.style (css properties)
[ https://tailwindcss.com/docs/functions-and-directives/#apply ]
example:
  .mega-menu {
  @apply left-0 absolute hidden
w-full
text-left;
  }
  �������������������������������������������������� */
.bg-teal-dark {
    background-color: #003341;
}



body {
    background-color: #EEF2F2;
}

.mega-menu {
    opacity: 0;
    visibility: hidden;
    z-index: -900;
    xleft: 0;
    position: absolute;
    text-align: left;
    xwidth: 100%;
    transition: all 0.15s linear 0s;
}



/* #hoverable Class Styles */
.hoverable {
    position: static;
}

    .hoverable:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        z-index: 900;
    }


/* #toggle Class Styles */

.toggleable > label:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}

.toggle-input {
    display: none;
}

    .toggle-input:not(checked) ~ .mega-menu {
        opacity: 0;
        visibility: hidden;
        z-index: -900;
    }

    .toggle-input:checked ~ .mega-menu {
        opacity: 1;
        visibility: visible;
        z-index: 900;
    }

    .toggle-input:checked + label {
        color: white;
        background: rgb(3, 102, 114); /*@apply bg-teal-700 */
    }

    .toggle-input:checked ~ label:after {
        content: "\25B2";
        font-size: 10px;
        padding-left: 6px;
        position: relative;
        top: -1px;
    }