/* Base theme styles */

/*
    I build up this theme based on the following structure:
    https://medium.com/@elad/css-architecture-folders-files-structure-f92b40c78d0b
*/


/* Loads in the base structure */
@import "local/background.css";
@import "local/fonts.css";
@import "local/wrapper.css";
@import "local/display.css";
@import "local/partials.css";
@import "local/offsets.css";
@import "local/sizing.css";
@import "local/grid.css";

:root {
    --primary: #0093FD;
    --success: #49c496;
    --danger: #ED5553;
    --grey-light: #909090;
    --grey: #31415F;
    --grey-dark: #151b26;
    --light: #ecf0f5;
    --lighter: #CED7E1;
    --light-grey: #8e97a7;
    --shadow: rgba(18, 22, 33, .1);
    --topnavheight: 88px;
}

html {
    /*background:#fff;*/
}

.bg-main {
    background: #ecf0f5;
}

.bg-main-h:hover {
    background: #ecf0f5;
}

.rad-1 {
    border-radius: 4px;
}

.rad-2 {
    border-radius: 8px;
}

/*Default link*/
.link {
    color: #0093FD;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: 250ms;
}

    .link:hover {
        cursor: pointer;
        color: #0066b0;
        text-decoration: underline;
        text-decoration-color: #0066b0;
        transition: 250ms;
    }

    .link.dark {
        color: var(--grey-dark);
    }

        .link.dark:hover {
            text-decoration-color: var(--grey-dark);
        }

.no-border {
    border: none !important;
}

@media screen and (max-width: 767px) {
    :root {
        --topnavheight: 100px;
    }
}