.buttonPanel {
    padding: 2px;
    display: flex;
    align-items: center;
    .buttonClass {
        margin: 0 5px;
    }
    &.center {
        justify-content: center;
    }
    &.left {
        justify-content: flex-start;
    }
    &.right {
        justify-content: flex-end;
    }
}

.buttonClass {
    background: $bt-white;
    padding: 8px 10px;
    border: none;
    border-radius: $corner-radius;
    text-align: center !important;
    box-sizing: border-box;
    position: relative;
    min-width: 80px;
    &:disabled {
        opacity: 0.7;
    }
    .left {
        margin-right: 8px;
    }
    .right {
        margin-left: 8px;
    }
    &.raised {
        box-shadow: $bt-raised-shadow;
    }
    &.default {
        background: transparent;
        border: 1px solid $bt-indigo;
        color: $bt-indigo;
        &:hover {
            border-color: $bt-indigo-dark;
            color: $bt-indigo-dark;
        }
    }
    &.primary {
        background: $bt-indigo;
        color: text-contrast($bt-indigo, $bt-white, $bt-black);
        &:hover {
            background: $bt-indigo-dark;
            color: text-contrast($bt-indigo-dark, $bt-white, $bt-black);
        }
    }
    &.secondary {
        background: $bt-newpink;
        color: $bt-white;
        &:hover {
            background: $bt-newpink-dark;
            color: $bt-white;
        }
    }
    &.tertiary {
        background: $bt-blue-light;
        color: text-contrast($bt-blue-light, $bt-white, $bt-black);
        &:hover {
            background: $bt-blue;
            color: text-contrast($bt-blue, $bt-white, $bt-black);
        }
    }
    &.header {
        border: 2px solid $bt-blue-light;
        &:hover {
            border-color: $bt-black;
        }
    }
    &.activity {
        background: $bt-amber-light;
        color: text-contrast($bt-amber-light, $bt-white, $bt-black);
        border: none;
        &:hover {
            background: $bt-amber;
            color: text-contrast($bt-amber, $bt-white, $bt-black);
        }
        &.visited {
            background: $bt-green;
            color: text-contrast($bt-green, $bt-white, $bt-black);
            &:hover {
                background: $bt-green-dark;
                color: text-contrast($bt-green-dark, $bt-white, $bt-black);
            }
        }
    }
    &.warning {
        background: $bt-red;
        color: text-contrast($bt-red, $bt-white, $bt-black);
        &:hover {
            background: $bt-red-dark;
            color: text-contrast($bt-red-dark, $bt-white, $bt-black);
        }
    }
    &.cancel {
        border: none;
        &:hover {
            background: $bt-grey-light-85;
        }
    }
    &.file {
        background: $bt-grey-dark-20;
        color: $bt-white;
        border: none;
        &:hover {
            background: $bt-grey-dark-60;
        }
    }
    &.toggled {
        background: $bt-grey-dark-95;
        color: $bt-white;
        border: none;
        &:hover {
            background: $bt-grey-dark-40;
            color: $bt-white;
        }
    }
}
.fileInputWrapper {
    margin: 0;
    padding: 2px;
    .fileUploadButton {
        padding: 8px 15px;
        margin-right: 5px;
        border: none;
        border-radius: 5px;
        height: 38px;
        font-size: 15px !important;
        text-align: center !important;
        box-sizing: border-box;
        position: relative;
        min-width: 80px;
        background: #333333;
        color: $bt-white;
        border: none;
        display: inline-block;
        cursor: pointer;
        &:hover {
            background: #5f5f5f;
        }
        input {
            position: absolute;
            left: 0;
            top: 2px;
            margin: 0;
            padding: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            direction: ltr;
            height: 35px;
            width: 100%;
        }
    }
    .fileNames {
        display: inline-block;
        font-size: 0.9em;
        padding: 3px;
    }
}