@import './colors';
@import 'variables';
@import 'mixins';

.about-modal-content {
    padding: 15px 0;
    color: $gray-500;
    text-align: center;
    overflow-y: auto;
}

.about-header {
    width: 100%;
    padding-bottom: 20px;
}

.about-logo {
    height: 50px;
    width: 279px;
    margin-bottom: 15px;
}

.about-app {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $dark-blue;
}

.about-icon img {
    width: 75px;
    height: 75px;
    margin-right: 17px;
}

.about-name {
    text-align: left;
}

.about-name img {
    height: 24px;
    width: 157px;
    margin-left: -2px;
}

.about-version {
    @include fontSize(14px);
    color: $white;
    font-weight: 300;
}

.about-footer {
    @include fontSize(12px);
    line-height: 18px;
    text-align: center;
}

.about-footer a {
    text-decoration: none;
    color: $primary-brand;
    font-weight: bold;
}

.about-reference {
    display: table;
    text-align: center;
    vertical-align: middle;
    padding: 15px 0;
    margin: 0 auto;

    & > div {
        display: table-row;
        flex-flow: row;
        text-align: left;

        & > div {
            display: table-cell;
            vertical-align: middle;
            padding: 0 0 20px 40px;
        }
    }
}

.about-reference-detail {
    font-weight: 600;
    color: $text;
    @include fontSize(16px);
    line-height: 24px;
}

.about-divider {
    border: none;
    height: 1px;
    background-color:#e0e0e0;
    margin: 0;
}

.about-close-container {
    display: flex;
}

.about-close {
    margin: 20px auto;
}