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

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(fonts/Lato-Light.woff2) format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/Lato-Regular.woff2) format('woff2');
}


@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/Lato-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(fonts/Lato-Black.woff2) format('woff2');
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-VariableFont_wght.ttf") format("ttf-variations");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: oblique 0deg 20deg;
}


@layer components {
    /* Custom Colors */ 
    .text-primary-contrast { @apply text-[var(--primary-contrast)] }
    .text-primary { @apply text-[var(--primary-50)] }

    /* Button Classes */
    button{
        @apply cursor-pointer pt-1 pb-1 pl-2 pr-2 text-sm leading-5 font-semibold rounded-lg border rounded;
    }

    button:disabled, button[disabled]{
        @apply cursor-not-allowed opacity-[0.9]
    }

    button.no-border {
        @apply bg-transparent border-none outline-none;
    }

    button.blue {
        @apply bg-blue-500 border-blue-700 text-white;
    }
    button.blue:hover {
        @apply bg-blue-700;
    }
    button.outline-blue {
        @apply bg-transparent text-blue-500 border border-blue-700;
    }
    button.outline-blue:hover {
        @apply bg-blue-500 text-white border-transparent;
    }
    button.green {
        @apply bg-green-500 border-green-700 hover:bg-green-700 text-white;
    }
    button.green {
        @apply bg-green-700;
    }
    button.outine-green {
        @apply bg-transparent text-green-500 border border-reen-700;
    }
    button.outine-green:hover {
        @apply bg-green-500 text-white border-transparent;
    }
    button.red {
        @apply bg-red-500 border-red-700 hover:bg-red-700 text-white;
    }
    button.red:hover {
        @apply bg-red-700;
    }
    button.outline-red {
        @apply bg-transparent text-red-500 border border-red-700;
    }
    button.outline-red:hover {
        @apply bg-red-500 text-white border-transparent;
    }
    button.primary {
        @apply bg-[var(--primary-50)] border-[var(--primary-70)] text-[var(--primary-contrast)];
    }
    button.primary:hover {
        @apply bg-[var(--primary-70)];
    }
    button.primary-outline, button.outline-on-primary, button.primary-on-white {
        @apply bg-transparent border border-[var(--primary-70)];
    }
    button.primary-outline:hover, button.outline-on-primary:hover, button.primary-on-white:hover {
        @apply bg-[var(--primary-50)] text-[var(--primary-contrast)] border-transparent;
    }
    button.primary-outline {
        @apply text-[var(--primary-50)];
    }
    button.secondary {
        @apply bg-[var(--secondary-50)] border-[var(--secondary-50-70)] text-[var(--secondary-contrast)];
    }
    button.secondary:hover {
        @apply bg-[var(--secondary-70)];
    }
    button.secondary-outline, button.outline-on-secondary, button.secondary-on-white {
        @apply bg-transparent border border-[var(--secondary-70)];
    }
    button.secondary-outline:hover, button.outline-on-secondary:hover, button.secondary-on-white:hover {
        @apply bg-[var(--secondary-50)] text-[var(--secondary-contrast)] border-transparent;
    }
    button.secondary-outline {
        @apply text-[var(--secondary-50)];
    }
    button.accent {
        @apply bg-[var(--accent-50)] border-[var(--accent-50-70)] text-[var(--accent-50-contrast)];
    }
    button.accent:hover {
        @apply bg-[var(--accent-50-70)];
    }
    button.accent-outline, button.outline-on-accent, button.accent-on-white {
        @apply bg-transparent border border-[var(--accent-70)];
    }
    button.accent-outline:hover, button.outline-on-accent:hover, button.accent-on-white:hover {
        @apply bg-[var(--accent-50)] text-[var(--accent-contrast)] border-transparent;
    }
    button.accent-outline {
        @apply text-[var(--accent-50)];
    }
    button.outline-on-primary {
        @apply text-[var(--primary-contrast)] transition-all border-none outline-none;
    }
    button.outline-on-primary:hover {
        @apply scale-105;
    }
    button.primary-on-white {
        @apply text-[var(--primary-on-white)];
    }
    button.outline-gray {
        @apply bg-transparent text-gray-700 border border-gray-500;
    }
    button.outline-gray:hover {
        @apply bg-gray-300 text-white border border-gray-500 border-transparent;
    }

    [multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, select:focus, textarea:focus {
        --tw-ring-color: var(--primary-70);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        border-color: var(--primary-70);
        box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
        outline-offset: 1px;
    }

}

/* Basic styling */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    height: 100%;
    width: 100%;
}
body {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    background-color: #eaeaea;
    color: #3a3a3a;
    height: 100%;
    width: 100%;
}

/*
.main{
    display: flex;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
*/

.content{
    flex: 1 1;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.pageContent {
    height: 100%;
    padding: clamp(0px, 1vw, 20px) 0;
    display: flex; 
    flex-direction:column;
    justify-content: center;
}
pre {
    user-select: text !important;
}
a {
    color: black;
    text-decoration: none;
}

/*
section{
    margin: 20px auto;
    max-width: 1500px;
    background-color: #fff;
    box-shadow:
        0.2px 0.3px 0.6px rgba(0, 0, 0, 0.022),
        0.4px 0.8px 1.5px rgba(0, 0, 0, 0.031),
        0.9px 1.6px 3px rgba(0, 0, 0, 0.039),
        1.8px 3.3px 6.2px rgba(0, 0, 0, 0.048),
        5px 9px 17px rgba(0, 0, 0, 0.07)
        ;
    padding: 20px;
}
*/


/*
Utility Classes
*/

section.flex-center{
    padding:0px;
}

.flexContainer{
    display: flex;
    flex-wrap: wrap;
}

.flex-center{
    display: flex;
    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;
}

.flex-split{
    display: flex;
    justify-content: space-between !important;
    align-content: center !important;
    align-items: center !important;
}

.flex-stretch{
    display: flex;
    justify-content: center !important;
    align-self: stretch !important;
}

.flex-wrap-reverse{
    flex-wrap: wrap-reverse !important;
}
.innerSection{
    padding: 20px;
}

.noPadding{
    padding:0px !important;
}

.noMargin{
    margin:0px !important;
}

.noBorder{
    border: 0px !important;
}

.formControl{
    min-width:100px;
    height: 51px;
    display: block;
    padding: 20px 0 5px 5px;
    margin: 5px 0px;
    font-size: 1rem;
    line-height: 1.5;
    color: #111;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #8b9095;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* For Cards */
.cardGrid {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
}

.card{
    margin: 25px 5px 0px;
    background-color: #fff;
    border: 1px solid #ccc; 
    border-top: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow:
        0.2px 0.3px 0.6px rgba(0, 0, 0, 0.022),
        0.4px 0.8px 1.5px rgba(0, 0, 0, 0.031),
        0.9px 1.6px 3px rgba(0, 0, 0, 0.039),
        1.8px 3.3px 6.2px rgba(0, 0, 0, 0.048),
        5px 9px 17px rgba(0, 0, 0, 0.07)
        ;
    /*grid-column-end: auto;*/
}

.cardHeader{
    color: #efefef;
    padding: 7px;
    font-size: 22px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; 
}

.cardBody{
    background-color: #fff;
    padding: 7px;
}

.cardLink{
    text-align: center;
    margin-top: 10px;
    min-height: 20px;
    padding: 5px;
    cursor: pointer;

}



/* Make it clickable */
.clickable{
    box-shadow: 0px 0px 5px #cccccc;
    cursor: pointer;
}

.clickable:hover{
    box-shadow:
        0.2px 0.3px 0.6px rgba(0, 0, 0, 0.022),
        0.4px 0.8px 1.5px rgba(0, 0, 0, 0.031),
        0.9px 1.6px 3px rgba(0, 0, 0, 0.039),
        1.8px 3.3px 6.2px rgba(0, 0, 0, 0.048),
        5px 9px 17px rgba(0, 0, 0, 0.07)
        ;
}

.disabled{
    cursor: not-allowed !important;
    background-color: #e7e7e7;
    color: #aaa;
}


/******************************************************************************
                              NAVIGATION
    background: linear-gradient(146deg,  0%, rgba(70,131,175,1) 100%);

/*******************************************************************************/

.menu,
.submenu {
    list-style-type: none;
}

/* background white this is incase practice logo is not transparent bg */
.menuTopContainer{
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

.menuTop{
    margin-right: 1rem;
    display: flex;
    flex: 1 1;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.menuTop > div {
    padding: 0.5rem;
}
.menuTop a {
    color: #000000A0;
    transition: color 200ms ease-in-out;
}
.menuTop a:hover {
    color: var(--primary-50);
}
.menuTop a[active]{
    text-decoration: underline;
}

.logo {
    font-size: 20px;
    padding: 7.5px 10px;
}

.item {
    padding: 10px;
}
.item.button {
    padding: 9px 0px;
}
.item:not(.button) a:hover,
.item a:hover::after {
    color: #fff;
}
.item:hover{
    background-color: rgb(255 255 255 / 10%);
}


/* Mobile menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    transition: max-height 0.2s ease-in;
    overflow: hidden;
}
.menu.active {
    max-height: 100vh;
    transition: max-height 0.2s  ease-in;
}
.menu li a {
    display: block;
    padding: 15px 5px;
    color: white;
}

.menu .toggle i {
    display: block;
    padding: 15px 5px;
    color: white;
}

.menu li.subitem a {
    padding: 15px;
}
.messageAlert{
    display: inline-block;
    background: #e7e7e7;
    color: #3a3a3a;
    font-size: 16px;
    border-radius: 10px;
    padding: 1px 5px;
    text-align: center;
}


.toggle {
    order: 1;
    font-size: 20px;
}
.item.button {
    order: 2;
}
/*This seems way too generic. Need to rearrange and split up */
.item {
    order: 3;
    width: 100%;
    text-align: center;
}
.menu > .item > a[active] {
    text-decoration: underline;
}

.button.secondary {
    /* divider between buttons and menu links */
    border-bottom: 1px #444 solid;
}
/* Submenu up from mobile screens */
.submenu {
    display: none;
}
.submenu-active .submenu {
    display: block;
}
.has-submenu i {
}
.has-submenu > a::after {
    font-size: 12px;
    line-height: 16px;
    font-weight: 900;
    content: "\f078";
    color: white;
    padding-left: 5px;
}
.subitem a {
    text-align:left;
    padding: 10px 15px;
}
.submenu-active {
    /*border-radius: 3px;*/
}

.desktop-only {
    display: initial;
}


/******************************************************************************
                              
/*******************************************************************************/

/* Uploader */
.drop_file_zone {
    outline: 2px dashed #afafaf;
    outline-offset: -5px; 
    width: 100%;
    padding: 8px;
    font-size: 18px;
    margin: 0px 0px 5px;
}
#drag_upload_file {
    width:90%;
    margin:0 auto;
}
#drag_upload_file p {
    text-align: center;
}
#drag_upload_file #selectfile {
    display: none;
}

.is-dragover {
    background-color: #ffffff;
    outline: 2px dashed #afafaf;
    outline-offset: -5px; 
    width: 100%;
    padding: 8px;
    font-size: 18px;
    margin: 0px 0px 5px;
}




/* Tab Styles */
.tabMenu {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.tabMenu li {
    flex: 1 1;
    text-align: center;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 16px;
    transition: 0.1s;
    color:white;
    display: block;
    font-size: 18px;
}

.tabMenu li:hover {
    background-color: rgba(255,255,255,0.2);
}

.tabMenu li.active {
    background-color: #fff;
    color: #3a3a3a;
    border: 2px solid #ddd;
    border-radius: 2px;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
}

@keyframes shake {
    0% { transform: translateX(0rem); }
    25% { transform: translateX(0.5rem); }
    75% { transform: translateX(-0.5rem); }
    100% {transform: translateX(0rem); }
}

.alertFloat{
    position: fixed;
    right: 0px;
    width: 300px;
    z-index: 99;
}

.info{
    padding-left: 0.5em;
    font-size: 0.65rem;
    opacity: 0.8;
    font-style: italic;
}

/********************************************************
                    TOOLTIPS
********************************************************/
/*
.tooltip {
    position: relative;
    display: inline-block;
    color: #aaa;
}

 Tooltip text 
.tooltiptext {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: var(--primary-50-90);
    border-radius: 12px;
    border: 2px solid var(--primary-80-80);
    /*color: var(--primary-contrast);;* /
    color: var(--primary-contrast);

    visibility: hidden;
    width: max-content;
    max-width: 80%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5em;
    /* Position the tooltip text* /
    position: absolute;
    right: 105%;
    top: -5px;
    z-index: 100;
    font-weight: normal;
}
.tooltiptext span {
    display: block;
    font-size: 16px;
    width: 100%;
    overflow-wrap: break-word;
    overflow: hidden;
}

.tooltip_button {
    font-size: 70%;
    color:  var(--primary-contrast);
    border: 1px solid var(--primary-contrast);
    pointer: cursor;
    border-radius: 10px;
    padding: 0.5em;
    max-width: fit-content;
    margin: auto;
    margin-top: 1em;
}
*/
/* Hamburger burton */
.hamburger {
    position: fixed;
    z-index: 100;
    top: 1rem;
    right: 1rem;
    padding: 4px;
    border: black solid 1px;
    background: white;
    cursor: pointer;
}

.hamburger_closeIcon {
    display: none;
}

.hamburger_showMenu {
    transform: translateY(0);
}

.hamburger_menu {
    position: fixed;
    transform: translateY(-100%);
    transition: transform 0.2s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: black;
    color: white;
    list-style: none;
    padding-top: 4rem;
}

.fade-top {
    -webkit-mask-image: linear-gradient(-180deg, #000 60%, transparent);
}


/********************************************************
                    Edit Forms
********************************************************/

.flex-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0.5em;
    gap: 0.5em;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

/********************************************************
                    DayPicker
********************************************************/

.dayPicker{
    border-radius: 5px; 
    display: grid;
    position: relative;
    grid-template-columns: min-content 1fr min-content; 
    grid-template-rows: 1fr 1.2fr; 
    gap: 5px;
}

.dayPicker i {
    font-size: clamp(15px, 3vw, 30px);
}

.dayPicker-month-list{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    gap: clamp(2px, 0.5vw, 5px);
    grid-row: 1;  
    grid-column: 1 / -1;
}

.dayPicker-day-list{
    display: flex;
    flex-direction: row;
    justify-content: center;
    grid-row: 2;
    grid-column: 2;
    max-width: 100%;
    width: 100%;
    gap: clamp(2px, 0.5vw, 5px);
    overflow-x: auto;
}

.dayPicker-day{
    font-size: clamp(12px, 2vw, 1.1rem);
    text-align: center; 
    padding: 0 clamp(2px, 0.5vw, 5px);
    height: unset;
    line-height: unset;
    margin: 0;
    flex: 1 1 10%;
}

.dayPicker-month{
    flex: 1 0 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    font-size: clamp(12px, 2vw, 1rem);
    text-align: center; 
    padding: 0.5em;
    height: auto;
    margin: 0;
    line-height: unset;
}

.dayPicker-month>*, .dayPicker-day>*{
    pointer-events: none;
}

.dayPickerAltInput{
    display: none;
    position: absolute
}

.data-table {
    width: 100%;
}
.data-table > tbody > tr > th {
    text-align: right;
    padding-right: 1em;
}

/*************************************************************************
                UTILS
*************************************************************************/


/*************************************************************************
CUSTOM COLORING
*************************************************************************/
.practice-gradient {
    background: var(--primary-50);
}

progress {
    -webkit-appearance: none;
}

progress::-webkit-progress-bar {
    background-color: var(--primary-10);
}
progress::-webkit-progress-value {
    background-color: var(--primary-30);
}