:root {
    --primary: #005EB8;
    --white: #ffffff;
    --gray: lightgray;
}

@font-face {
    font-family: 'josefin-san';
    src: url('/fonts/josefin-sans.regular.ttf') format('truetype');
}

@font-face {
    font-family: 'SeymourOne';
    src: url('/fonts/SeymourOne-Regular.ttf') format('truetype');
}



@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Light.ttf') format('truetype');
}


html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.a-nav-pad {
    margin: 0px 0px 0px 40px;
    padding: 0px 0px 0px 40px;
    background-color: transparent;
}


button {
    background-color: royalblue;
    color: white;
    font-size: 16px;
    margin: 0px 0px;
    padding: 5px 20px;
    border-radius: 10px;
    border-color: royalblue;
    text-decoration: none;
}

#divAdvocates, #divSellers {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
    column-gap: 15px;
    row-gap: 30px;
    justify-content: center;
}

.divGrid300 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    column-gap: 10px;
    row-gap: 30px;
    justify-content: center;
}



.divGrid300-One {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
    column-gap: 10px;
    row-gap: 30px;
    justify-content: center;
}


.divGridPages {
    width: 100%;
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(50px, 50px));
    column-gap: 5px;
    row-gap: 5px;
    justify-content: center;
}



input[type=text] {
    border: 1px solid var(--primary);
    padding: 4px 5px 4px 5px;
    border-radius: 10px;
}

input[type=password] {
    border: 1px solid var(--primary);
    padding: 4px 5px 4px 5px;
    border-radius: 10px;
}


input[type=submit] {
    background-color: royalblue;
    color: white;
    font-size: 16px;
    margin: 0px 0px;
    padding: 5px 20px;
    border-radius: 10px;
    border-color: royalblue;
    text-decoration: none;
}


input[type=button] {
    background-color: royalblue;
    color: white;
    font-size: 16px;
    margin: 0px 0px;
    padding: 5px 20px;
    border-radius: 10px;
    border-color: royalblue;
    text-decoration: none;
}

input[type=email] {
    border: 1px solid var(--primary);
    padding: 4px 5px 4px 5px;
    border-radius: 10px;
}


input[type=number] {
    border: 1px solid var(--primary);
    padding: 4px 5px 4px 5px;
    border-radius: 10px;
}


select {
    border: 1px solid var(--primary);
    padding: 4px 5px 4px 5px;
    border-radius: 10px;
}


textarea {
    border: 1px solid var(--primary);
    padding: 4px 5px 4px 5px;
    border-radius: 10px;
}


.tdPadding {
    border: 1px solid lightgray;
    padding: 10px 15px;
}

.tblBorderPadding {
    width: 100%;
    border: 1px solid lightgray;
}

.tdPaddingHead {
    min-height: 30px;
    height: 30px;
    max-height: 30px;
    overflow: hidden;
}

.tdPaddingBody {
    min-height: 90px;
    height: 90px;
    max-height: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-underline {
    border-bottom:1px solid lightgray;
}


@media screen and (min-width: 320px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 140px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 360px) {
    .divGrid300 {
        width: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 160px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 340px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 375px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(165px, 165px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 340px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 384px) {
    .divGrid300 {
        width: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 170px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 340px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 412px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(185px, 185px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(390px, 390px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

}

@media screen and (min-width: 414px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(185px, 185px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(390px, 390px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

}


@media screen and (min-width: 480px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }


    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(440px, 440px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

}


@media screen and (min-width: 600px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

}



@media screen and (min-width: 768px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(305px, 305px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(305px, 305px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 800px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 900px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 1024px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 1152px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}

@media screen and (min-width: 1280px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 1360px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 1366px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 1400px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}


@media screen and (min-width: 1440px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}



@media screen and (min-width: 1600px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}



@media screen and (min-width: 1680px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}



@media screen and (min-width: 1920px) {
    .divGrid300 {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }

    .divGrid300-One {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 310px));
        column-gap: 2px;
        row-gap: 10px;
        justify-content: center;
    }
}