/* Styleguide base colours

    Orange:
        #ff761a - main

    Blue:
        #304e70 - sober

    Dark greys:
        #0c0c0c - darkest
        #1a1a1a - darker

    Medium greys:
        #696969 - spacial
        #a5a5a5 - concrete
        #c3c3c3 - dust

    Light greys:
        #e1e1e1 - light
        #f1f1f1 - lighter
        #fafafa - lightest
        #ffffff - white
*/

.bg-orange{
    background-color: #ff761a;
}
.bg-blue{
    background-color: #304e70;
}
.bg-blue-gradient{
    background-color: rgb(47, 107, 145);
    background-image: linear-gradient(150deg, rgb(47, 107, 145) 0px, #304e70 100%);
}

.clr-blue{
    color: #304e70;
}
.clr-orange{
    color: #ff761a;
}

.clr-success{
    color: #498B56;
}
.clr-warning{
    color: #F7CA18;
}
.clr-error{
    color: #D64541;
}

/* darks */

.bg-darkest{
    background-color: #0c0c0c;
}
.bg-darker{
    background-color: #1a1a1a;
}

.clr-darkest{
    color: #0c0c0c;
}
.clr-darker{
    color: #1a1a1a;
}

/* mediums */

.bg-spacial{
    background-color: #696969;
}
.bg-concrete{
    background-color: #a5a5a5;
}
.bg-dust{
    background-color: #c3c3c3;
}

.clr-spacial{
    color: #696969;
}
.clr-concrete{
    color: #a5a5a5;
}
.clr-dust{
    color: #c3c3c3;
}

/* lights */
.bg-light{
    background-color: #e1e1e1;
}
.bg-lighter{
    background-color: #f1f1f1;
}
.bg-lightest{
    background-color: #fafafa;
}
.bg-white{
    background-color: #ffffff;
}

.clr-light{
    color: #e1e1e1;
}
.clr-lighest{
    color: #fafafa;
}
.clr-white{
    color: #fafafa;
}

.border-gray{
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.35) !important;
}


/* specials */
.hover-shadow:hover{
    box-shadow: 0 0 3px 0 rgba(186, 186, 186, 0.5)
}