:root {
    /*Primary Colors*/
    --electric-blue: #1D49E6;
    --black: #000000;

    /*Secondary Colors*/
    --deep-blue: #292D78;
    --sky-blue: #00A3DB;
    --friendly-green: #38B3A0;

    /*Tertiary Colors*/
    --success: #66DDA1;
    --warning: #E0E049;
    --error: #FF1F32;

    /*Button Attributes*/
    --border-radius-btn: 6px;
    --padding-btn: 10px 15px;
    --border-outline-btn: 1px solid;
}



/*Buttons - Full*/
.btn-electric-blue-full {
    background-color: var(--electric-blue);
    color: white !important;
    border-radius: var(--border-radius-btn) !important;
    padding: var(--padding-btn) !important;
}

.btn-electric-blue-full:hover {
    background-color: var(--black);
    color: white;
}

.btn-white-full {
    background-color: white !important;
    color: var(--electric-blue) !important;
    border-radius: var(--border-radius-btn ) !important;
    padding: var(--padding-btn) !important;
}

.btn-white-full:hover {
    background-color: var(--black) !important;
    color: white !important;
}

.btn-white-full > i {
    margin-left: 8px;
    color: inherit !important;
}

.btn-sky-blue-full {
    background-color: var(--sky-blue) !important;
    color: white !important;
    border-radius: var(--border-radius-btn) !important;
    padding: var(--padding-btn) !important;
}

.btn-sky-blue-full:hover {
    border: var(--border-outline-btn);
    border-color: var(--sky-blue);
    background-color: white;
    color: var(--sky-blue);
}

.btn-friendly-green-full {
    background-color: var(--friendly-green) !important;
    color: white !important;
    border-radius: var(--border-radius-btn) !important;
    padding: var(--padding-btn) !important;
}

    .btn-friendly-green-full:hover {
        border: var(--border-outline-btn);
        border-color: var(--friendly-green);
        background-color: white;
        color: var(--success);
    }

.btn-success-full {
    background-color: var(--success) !important;
    color: white !important;
    border-radius: var(--border-radius-btn) !important;
    padding: var(--padding-btn) !important;
}

.btn-success-full:hover {
    border: var(--border-outline-btn);
    border-color: var(--success);
    background-color: white;
    color: var(--success);
}

.btn-error-full {
    background-color: var(--error);
    color: white;
    border-radius: var(--border-radius-btn) !important;
    padding: var(--padding-btn) !important;
}

.btn-error-full:hover {
    border: var(--border-outline-btn);
    border-color: var(--error);
    background-color: white;
    color: var(--error);
}

/*Buttons - Outline*/
.btn-electric-blue-outline {
    border: var(--border-outline-btn) !important;
    border-color: var(--electric-blue) !important;
    color: var(--electric-blue) !important;
    border-radius: var(--border-radius-btn) !important;
    padding: var(--padding-btn) !important;
    background-color: white !important;
}

.btn-electric-blue-outline:hover {
    background-color: var(--electric-blue) !important;
    color: white !important;
}

.btn-electric-blue-outline:focus {
    outline: unset !important;
}

.btn-sky-blue-outline {
    border: var(--border-outline-btn) !important;
    border-color: var(--sky-blue) !important;
    color: var(--sky-blue) !important;
    border-radius: var(--border-radius-btn) !important;
    padding: var(--padding-btn) !important;
    background-color: white;
}

    .btn-sky-blue-outline:hover {
        background-color: var(--sky-blue) !important;
        color: white !important;
    }

/*Hyperlinks*/

.link-electric-blue {
 color: var(--electric-blue);
}

.link-electric-blue:hover {
    color: var(--black);
}

.link-deep-blue{
    color: var(--deep-blue);
} 

.link-deep-blue:hover {
    filter: brightness();
}

.link-sky-blue{
    color: var(--sky-blue);
}

.link-sky-blue:hover {
    filter: brightness(85%);
}

.link-friendly-green {
    color: var(--friendly-green);
}

.link-friendly-green:hover {
    filter: brightness();
}

.link-success {
    color: var(--success);
}

.link-success:hover {
    filter: brightness();
}

.link-warning {
    color: var(--warning);
}

.link-warning:hover {
    filter: brightness();
}

.link-error {
    color: var(--error);
}

.link-error:hover {
    filter: brightness();
}


/*Text*/

.electric-blue-text {
    color: var(--electric-blue) !important;
}

.sky-blue-text {
    color: var(--sky-blue) !important;
}

.success-text {
    color: var(--success) !important;
}

.error-text {
    color: var(--error);
}

/*Backgrounds*/
.electric-blue-background {
    background: var(--electric-blue) !important;
}

.sky-blue-background {
    background: var(--sky-blue) !important;
}

.success-background {
    background: var(--success) !important;
}

.error-background {
    background: var(--error) !important;
}

/*Labels*/
.label-friendly-green-full {
    background-color: var(--friendly-green);
    padding: 7px 10px;
    display: inline-block;
    font-weight: normal;
    font-size: 12px;
    border-radius: var(--border-radius-btn);
    color: white;
}

.label-success-full {
    background-color: var(--success);
    padding: 7px 10px;
    display: inline-block;
    font-weight: normal;
    font-size: 12px;
    border-radius: var(--border-radius-btn);
    color: white;
}

.label-danger-full {
    background-color: var(--error);
    padding: 7px 10px;
    display: inline-block;
    font-weight: normal;
    font-size: 12px;
    border-radius: var(--border-radius-btn);
    color: white;
}

.label-warning-full {
    background-color: var(--warning);
    padding: 7px 10px;
    display: inline-block;
    font-weight: normal;
    font-size: 12px;
    border-radius: var(--border-radius-btn);
    color:white;
}

/*Alerts*/
.alert-warning-full {
    background-color: var(--warning);
    color: white;
}


/*Gridview*/
.table-link {
    color: var(--success) !important;
}

.table-link > a {
    color: inherit !important;
}

.success-cell {
    background-color: var(--success);
}

.friendly-green-cell {
    background-color: var(--friendly-green);
}

/*Global Slide-out*/
.slideout-header {
    background-color: var(--electric-blue);
    padding: 10px 0;
    color: white !important;
    height: 65px;
}

/*Menu*/
.menu-svg {
    stroke: #515151;
}

    .menu-svg:hover, .menu-svg:active {
        stroke: var(--electric-blue);
    }

.dd-svg-menu {
    margin: 4px 8px 0px 0px !important;
}