@purple: #501CB5;
@light-purple: #B1B2F4;
@dark-purple: #0E0038;
@blue: #74edd6;
@dark-blue: #1acbab;
@dark-yellow: #deb942;
@yellow: #F7CE4A;
@light-yellow: #FCEBB7;

@white: #fff;
@black: #000;
@dark-white: #eee;
@barely-not-white: #f7f6f9; //#f5f5f5;
@light-gray: #aaa;
@lightish-gray: #999;
@gray: #666;
@dark-gray: #333;
@deep-gray: #181818;
@text: #333;
@box-shadow-gray: rgba(0,0,0,0.15);

html {
    font-family: 'Lato', sans-serif;
    color: @text;
}
body {
    -webkit-font-smoothing: antialiased;
}
// Body Text
.body-lato {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: @text;
}

// Subtitles
.subtitle-lato {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 19px;
    color: @purple;
}

// Headers
.header-lato {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: @gray;
}

// Titles
.title-lato {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: @purple;
}

// Links
.link-lato .bill-lato {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: @purple;
}

// Dark Background Links
.dark-link-lato {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: @blue;
}

// All bold text
.bold-text {
    font-weight: 600;
}

// Should be rarely used
.purple-background {
    background-color: @purple !important;
}

// For all major dark themed color blocks
.dark-purple-background {
    background-color: @dark-purple !important;
}

// For highlight color blocks
.yellow-background {
    background-color: @yellow !important;
}

// For buttons
.blue-background {
    background-color: @blue !important;
}

// For buttons
.dark-blue-background {
    background-color: @dark-blue !important;
}

// Non-body text--Use this sparingly, the classes above should be used for text
.purple-text {
    color: @purple !important;
}

// Dark background text should be this color, or dark-white
.blue-text {
    color: @blue !important;
}

//For subtitles
.gray-text, .grey-text {
    color: @gray !important;
}

//For subtitles on dark backgrounds
.light-gray-text {
    color: @light-gray !important;
}

// Dark background text
.dark-white-text {
    color: @dark-white !important;
}

.white-text {
    color: @white !important;
}

//Error text class
.error {
    color: darkred;
}

// This is because all text should be dark gray, not black
.black-text {
    color: @text !important;
}

// Custom Input Colors
.white-background-input-field input:focus, .white-background-input-field textarea:focus {
    border-bottom: 1px solid @purple !important;
    box-shadow: 0 1px 0 0 @purple !important;
}
.white-background-input-field input.invalid, .white-background-input-field textarea.invalid {
    border-bottom: 1px solid @yellow !important;
    box-shadow: 0 1px 0 0 @yellow !important;
}

.white-background-input-field textarea.invalid {
    border-bottom: 1px solid @yellow !important;
    box-shadow: 0 1px 0 0 @yellow !important;
}

.white-background-input-field input.valid, .white-background-input-field textarea.valid  {
    border-bottom: 1px solid @purple !important;
    box-shadow: 0 1px 0 0 @purple !important;
}
.white-background-input-field input:focus + label, .white-background-input-field textarea:focus + label {
    color: @purple !important;
}

.dark-background-input-field input:focus, .dark-background-input-field textarea:focus {
    border-bottom: 1px solid @blue !important;
    box-shadow: 0 1px 0 0 @blue !important;
}
.dark-background-input-field input.invalid {
    border-bottom: 1px solid @yellow !important;
    box-shadow: 0 1px 0 0 @yellow !important;
}
.dark-background-input-field input.valid {
    border-bottom: 1px solid @blue !important;
    box-shadow: 0 1px 0 0 @blue !important;
}
.dark-background-input-field input:focus + label, .dark-background-input-field textarea:focus + label {
    color: @blue !important;
}

.btn-small {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    padding-left: 16px;
    padding-right: 16px;
    i.left {
        float: left;
        margin-right: 8px;
    }
    i.right {
        float: left;
        margin-right: 8px;
    }
}

//Scroll Divs
.scroll-col {
    overflow: scroll;
}

.col {
    .no-pads {
        padding: 0;
    }
}
