/* School Search Tools Style Definitions */

.sfsContent {
    max-width: 1000px;

    @media screen and (max-width: 700px) {
        padding-inline: 0.25rem;
    }
    font-size: 15px;
    margin-bottom: 3rem;
}

.formContainer {
    display: flex;
    flex-direction: column;
    gap: 0;  
    font-size: 15px;
    

    --base-color: #808080;
    --darker-color: color-mix(in oklab, var(--base-color), black 10%);

    &.blue {
        --base-color: #134F8A;
    };
    
    &.red {
        --base-color: #782456;
    };
    
    &.green {
        --base-color: #138b51;
    }

    &.cobalt {
        --base-color: #367796;
    }
    
    &.mel0ny {
        --base-color: #3f1649;
    }
}

.formHead {
    display: flex;
    flex-direction: row;
    background-color: var(--base-color);
    padding: 0.25rem .65rem;
    align-items: center;

    .formTitle {
        text-decoration: none;
        color: white;

        * {
            color: white;
        }
        
        thin {
            font-weight: 200;
        }
    }

    .formLogo {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        font-weight: 900; 
        background-image: url(/images/favicons/IESfavicon_196px.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 56px;width: 56px;
        background-color: transparent;filter: grayscale(1) brightness(1.5);
    }
}

.formNav {
    display: flex;
    flex-direction: row;
    background-color: var(--darker-color);
    color: white;
    padding: 0.325rem .65rem;
    align-items: center;

    >:first-child {
        font-weight: bold;
    }

    .formNavLinks {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        gap: 0.5rem;
        font-size: 0.7rem;
        * {
            color: white;
        }
    }
}

.formBody {
    display: grid;
    grid-template-columns: 1fr 20%;
    grid-template-areas: "main side";
    border-inline: 1px solid var(--base-color);

    @media screen and (max-width: 700px) {
            grid-template-columns: 1fr;
            grid-template-areas:
                "main"
                "side";
    }

    input[type="text"] {
        flex-grow: 1;
    }

    label {
        font-weight: bold;
        font-size: .8rem;
    }

    select#Miles {
        max-width: 100px;
    }

}

.formBodyMain {
    grid-area: main;
    display: flex;
    flex-direction: column;
}

.formSection {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding:0.5rem 0.5rem;

    --local-color: #ffffff;
    --local-accent-color: #a9a9a9;
    border-top-style: solid;
    border-top-width: 2px;

    &.green {
        --local-color: #EDFFE8;
        --local-accent-color: #8CC27E;
    }
    &.blue {
        --local-color: #E8FCFF;
        --local-accent-color: #79BEC8;
    }
    &.yellow {
        --local-color: #FFF3DD;
        --local-accent-color: #EDC578;
    }
    &.red {
        --local-color: #F9E6E6;
        --local-accent-color: #EDB6B6;
    }



    background-color: var(--local-color);
    border-color: var(--local-accent-color);
}

.formRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    @media screen and (max-width: 700px) {
        grid-template-columns: 1fr;
    }
}

.formCol {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.formGrid {
    display: grid;
    column-gap: 0.25rem;
    &.\/3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

label, .label {
    font-weight: bold;
    font-size: .8rem;
}

.formDivider {
    display: flex;
    flex-direction: row;
    background-color: var(--darker-color);
    color: white;
    padding: 0.325rem .65rem;
    align-items: center;
}

.formNavDivider {
    display: flex;
    flex-direction: row;
    background-color: var(--darker-color);
    color: white;
    padding: 0.325rem .65rem;
    align-items: center;

    >:first-child {
        font-weight: bold;
    }

    .formNavDividerLinks {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        gap: 0.5rem;
        font-size: 0.7rem;
        * {
            color: white;
        }
    }
}

.formBodySide {
    grid-area: side;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.25rem;
    background-color: #E8FCFF;
    border-top: 2px solid;
    border-color: #79BEC8;
}

.formTips {
    flex-grow: 1;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    gap:0.25rem;
    
    >:first-child {
        color: var(--base-color);
        font-size: 1rem;
        font-weight: bold;
    }
}

.formTipsList {
    display: flex;
    flex-direction: column;
    gap:0.5rem;
}

.formControls {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-around;
    padding-block: 0.5rem;
    margin-top: auto;
}

.button-clear {
    background: hsl(0, 0%, 40%);
    border: 1px solid black;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
    cursor: pointer;
    outline: 0;
    padding: 0.33rem 0.66rem;
    text-align: center;
    text-transform: none;
    user-select: none;
    vertical-align: middle;
    &:hover,
    &:active {
        background-color: hsl(0, 0%, 30%);
    }
}   

.button-submit {
    background:  var(--base-color);
    border: 1px solid black;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
    cursor: pointer;
    outline: 0;
    padding: 0.33rem 0.66rem;
    text-align: center;
    text-transform: none;
    user-select: none;
    vertical-align: middle;
    &:hover,
    &:active {
        background-color: var(--darker-color);
    }
    flex-grow: 1;
}

.button-color {
    background:  var(--base-color);
    border: 1px solid black;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
    cursor: pointer;
    outline: 0;
    padding: 0.33rem 0.66rem;
    text-align: center;
    text-transform: none;
    user-select: none;
    vertical-align: middle;
    &:hover,
    &:active {
        background-color: var(--darker-color);
    }
}

.formSectionHeader {
    color:#2566A7;
    font-size: 1rem;
    font-weight: bold;
}

.formFoot {
    background-color: var(--darker-color);
    padding: 0.5rem 0.25rem;
    color:white;
    font-size: 0.8rem;
    border-bottom: 5px solid var(--base-color);

    a {
        color: white;
        text-decoration: none;
        :hover {
            cursor: pointer;
        }
    }
}

.formBib {
    padding-block: 0.5rem;
    font-size: 0.7rem;
}

.formNotes {
    padding-block: 0.5rem;
    font-size: 0.7rem;

    >:first-child {
        font-weight: bold;
    }

    .formNotesList {
        margin:0;
        list-style-type: disc;
        padding-inline-start: 4ch;
    }
}

.resultList {
    --result-color: color-mix(in oklab, var(--base-color), white 90%);;
    --result-darker-color: color-mix(in oklab, var(--result-color), black 50%);

    background-color: var(--result-darker-color);
    color: white;
    border-inline: 1px solid var(--base-color);

    .resultHeader {
        padding: 0.25rem 0.25rem;
        display: grid;
        font-weight: bold;
        font-size: 0.8rem;
        grid-template-columns: 5% 1fr 15% 10% 10% 10%;
        &.global {
            grid-template-columns: 10% 1fr 20%;
        }
        & > div:not(:nth-child(2)) {
            text-align: center;
        }
        @media screen and (max-width: 700px) {
            font-size: 0.6rem;
        }
    }
    
    .resultRow {
        background-color: var(--result-color);
        color: black;
        font-size: 0.9rem;
        padding: 0.25rem 0.25rem;
        display: grid;
        grid-template-columns: 5% 1fr 15% 10% 10% 10%;
        &.global {
            grid-template-columns: 10% 1fr 20%;
        }
        align-items: center;
        border-bottom: 1px solid var(--result-darker-color);

        & > div:not(:nth-child(2)) {
            text-align: center;
        }
        
        & > div {
            font-size: 0.7rem;
            overflow-x: auto;
        }
    }
}

.detailsContainer {
    border-inline: 1px solid var(--base-color);
}

.detailsContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem 0.65rem;
}

.detailsTable {
    font-size: 0.75rem;
    border-collapse: collapse;
    
    thead {
        font-weight: bold;
        background-color: var(--local-accent-color);
        font-size: 0.8rem;
        

        tr > td, tr > th {
            border-bottom: 2px solid black;
            padding: 0.25rem 0.5rem;
        }
        
    }

    td {
        text-align: right;
    }
    .nested {
        padding-inline-start: 0.66rem;
        font-weight: normal;
    }
    .divider {
        background-color: var(--local-accent-color);
        height: 1px;
    }

    tr {
        border-bottom: 1px solid var(--local-accent-color);
    }
}

.radioItem {
    gap:0; 
    align-items: center;

    & > input[type="radio"] {
        margin: 0.25rem;
    }
}

.InstHeader {
    display: flex;
    flex-direction: row;
    background-color: var(--base-color);
    color: white;
    padding: 0.325rem .65rem;
    align-items: center;
    font-weight: bold;
    

    .chevron {
        aspect-ratio: 1/1;
        width: 1rem;
        margin-right: 1ch;
    }
    .chevron::after {
        display: inline;
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

    }
    
    .chevron.closed::after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>');
    }
}

.InstFooter {
    display: flex;
    flex-direction: row;
    background-color: var(--darker-color);
    color: white;
    padding: 0.325rem .65rem;
    align-items: center;
    font-size: 0.8rem;
    a {
        color: #ffffff !important;
        text-decoration: none !important;
    }
}

.tipsList {
    border: 1px solid var(--base-color);
    border-top: 0;
    display: flex;
    flex-direction: column;
}