@import 'variables';

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    /* src: url('static/css/MaterialIcons-Regular.eot'); For IE6-8 */
    src: local('Material Icons'),
    local('/static/fonts/Material_Icons/MaterialIcons-Regular'),
    url('/static/fonts/Material_Icons/MaterialIcons-Regular.woff2') format('woff2'),
    url('/static/fonts/Material_Icons/MaterialIcons-Regular.woff') format('woff'),
    url('/static/fonts/Material_Icons/MaterialIcons-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Fira Sans'),
    local('FiraSans-Regular'),
    url('/static/fonts/Fira_Sans/FiraSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Fira Sans'),
    local('FiraSans-Medium'),
    url('/static/fonts/Fira_Sans/FiraSans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 400;
    src: local('Fira Mono'),
    local('FiraMono-Regular'),
    url('/static/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 500;
    src: local('Fira Mono'),
    local('FiraMono-Medium'),
    url('/static/fonts/Fira_Mono/FiraMono-Medium.ttf') format('truetype');
}

html, body {
    background-color: $gray_background;
    color: rgba(0, 0, 0, 0.87);
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
    font-feature-settings: 'kern';
    text-rendering: optimizelegibility;
    //height: 100%;
    position: initial !important;
    width: 100%;
    //overflow-x: hidden;
}

button, input, select, textarea, md-select {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
}

.default-padding {
    padding-left: 16px;
}

._main-toolbar {
    //background: $base linear-gradient(to bottom, $base, $palette_primary);
    //background: $aspirin_blue linear-gradient(to bottom, $aspirin_blue, $aspirin_blue);
    background-color: $palette_primary; // linear-gradient(to bottom, $aspirin_blue, $aspirin_blue);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    min-height: 64px;
    position: relative;
    width: 100%;
    z-index: 2;

    @media only screen and (max-width: 959px) and (min-width: 0) and (orientation: landscape) {
        .md-toolbar-tools {
            height: 64px;
            max-height: 64px;
        }
    }
}

._gradient {
    background-color: $base;
    background-image: radial-gradient(40% 60% at 5% 10%, rgba($purple_start, 0.7) 50%, transparent),
    radial-gradient(24% 24% at 45% 1%, rgba($header_green, 0.4) 20%, transparent),
    radial-gradient(16% 16% at 30% 1%, rgba($header_yellow, 0.5) 20%, transparent),
    radial-gradient(25% 25% at bottom right, rgba($palette_primary, 0.7), $base, transparent);
}

._homepage {
    //position: absolute;
    top: 0;
    //bottom: 0;
    //display: flex;
    //flex-direction: column;
    //min-height: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    background-color: $palette_primary;

    & .dark {
        background-color: $palette_primary;
    }

    & .light {
        background-color: white;
    }

    & ._auth-form {
        position: relative;
        max-width: 384px;
        margin-left: auto;
        margin-right: auto;
        background-color: $palette_light;
        padding: 8px 4%;
        color: #000;
        & h3 {
            color: rgba(0, 0, 0, 0.54);
        }
        & md-input-container {
            margin: 0;
        }
        & ._auth-footer {
            padding-top: 8px;
            text-align: center;
        }
    }
    & ._body {
        text-align: center;
        //height: 100%;
    }
    & ._name {
        padding-bottom: 40px;
        font-size: 40px;
        font-weight: 500;
        text-transform: uppercase;
    }
    & ._nav-logo {
        margin-top: 40px;
        margin-bottom: 20px;
    }
    & ._main-message {
        font-weight: 500;
        font-size: 26px;
        &._first {
            margin-top: 5%;
        }
        //margin-bottom: 10px;

    }
    & ._text {
        font-size: 18px;
    }
    & ._form {
        margin-bottom: 50px;
        margin-top: 5%;
        position: relative;
        & md-input-container {
            padding: 0;
            margin: 0;
            & .md-errors-spacer {
                display: none;
            }
        }
        & md-input-container .md-input {
            background-color: $palette_light;
            height: 40px;
            line-height: 32px;
            margin: 0;
            padding: 0 0 0 6px;
            width: 384px;
            font-weight: 500;
            font-size: 16px;
            border: none;
            &:focus {
                border-bottom-color: $palette_light;
            }
        }
        & .md-button {
            margin: 0 0 0 -4;
            padding: 0;
            text-transform: none;
            background-color: $palette_accent;
            border-radius: 0;
            height: 40px;
            min-width: 128px;
            font-weight: 500;
            font-size: 16px;
            &:hover {
                background-color: $palette_accent;
            }
        }
        & ._login {
            margin-top: 8px;
            font-size: 14px;
            & a {
                color: $palette_accent;
                text-decoration: none;
                border-bottom: solid 1px $palette_accent;
            }
        }

    }
}

nvd3.dark svg {
    text {
        fill: white;
    }

    .nv-axis path {
        fill: none;
        stroke: white;
    }

    .nv-axis .tick {
        //fill:rgba(255,255,255,0.25);
        stroke: white;
        stroke-opacity: 0.1;
    }

    .nv-axis.nv-x path.domain {
        stroke-opacity: 1;
    }
}

._content-body {
    //min-width: 768px;
}

._header {
    position: fixed;
    height: 75px;
    width: 100%;
    background-color: $base;
    z-index: 10;

}

._nav {
    position: relative;
    min-width: 384px;
}

._nav-logo {
    fill: $palette_primary;
    height: 56px;
    &._small {
        height: 36px;
    }
    &._medium {
        height: 144px;
    }
    @media only screen and (max-width: 959px) {
        height: 36px;
    }
}

._nav-platform-name {
    font-size: xx-large;
    color: white;
    padding-left: 16px;
    padding-top: 6px;
    cursor: pointer;
    outline: none;
    @media only screen and (max-width: 959px) {
        font-size: x-large;
    }
}

._wrapper {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: 92%;
    @media only screen and (max-width: 959px) {
        width: 100%;
    }
}

._main-wrapper {

}

._bold {
    font-weight: 500;
}

md-toolbar {
    //min-height: 75px;
}

._nav-list-items {
    display: inline-block;
    height: 40px;
    white-space: nowrap;
    list-style: none;
    font-size: 0;
    float: right;
}

._nav-list-item {
    display: inline-block;
    text-transform: capitalize;
    font-size: 0;
    vertical-align: middle;
    & a {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 16px 12px;
        outline: none;
        -webkit-transition: border-bottom-color 0.1s ease-out 0s;
        -moz-transition: border-bottom-color 0.1s ease-out 0s;
        -o-transition: border-bottom-color 0.1s ease-out 0s;
        transition: border-bottom-color 0.1s ease-out 0s;
        border-top: solid 4px rgba(255, 255, 255, 0);
        &._active {
            border-top-color: rgba(255, 255, 255, 1);
        }
        &:hover {
            text-decoration: none;
        }
    }
    ._nav-actions {
        margin: 0;
        min-width: 24px;
        min-height: 24px;
        font-size: 0;
        //top: -4px;
    }
}

._nav-list-item a:not(._active):hover {
    border-top-color: rgba(255, 255, 255, 0.54)
}

._main-content {
    //margin-top: -22px;
    //min-height: calc(100vh - 64px);
    font-size: 14px;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 109px;
    //width: 0;
    //background-color: white;

    &._relative {
        margin-top: 53px;
        overflow: hidden;
    }
    @media screen and (min-width: 480px) {
        width: 100%;
    }
}

md-content {
    background-color: white;
}

._gt-sm {
    width: 100%;
}

._sm {
    width: 92%;
}

.z-index-high {
    z-index: 40;
}

._content-nav {
    height: 56px;
    //border-bottom: solid 1px rgba(0, 0, 0, 0.24);
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.1);

    color: $palette_primary;
    position: fixed;
    top: 53px;
    //width: 768px;
    max-width: 768px;
    z-index: 12;
    width: 100%;
    background-color: $palette_light;
    & ._nav-title {
        max-width: 150px;

        font-weight: 500;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.7);
    }
    & .md-button:not(._text-button) {
        min-width: 24px;
        color: inherit;
        & md-icon {
            color: inherit;
            opacity: 0.87;
        }
    }
    & md-icon {
        color: inherit;
        opacity: 0.87;
    }
    & a {
        & md-icon {
            margin-top: 6px;
        }
    }
    & ._content-actions {
        margin: auto 12px auto auto;
        position: relative;

    }
    &._relative {
        position: relative;
        top: 0;
    }

    @media screen and (max-width: 767px) and (min-width: 480px) {
        & ._nav-title {
            max-width: 350px;
        }
        width: 100%;
    }
    @media screen and (min-width: 768px) {
        width: 92%;
        & ._nav-title {
            max-width: 500px;
        }
    }
}

._icon-18 {
    font-size: 18px;
    height: 18px;
    width: 18px;
}

._icon-text {
    font-size: 14px;
    padding-left: 4px;
    padding-right: 12px;
    text-align: right;
}

._main-content-body {
    //width: 768px;
    width: 100%;
    background-color: white;
}

._ml-24 {
    margin-left: 24px;
}

._ml-16 {
    margin-left: 16px;
}

._mr-16 {
    margin-right: 16px;
}

._mt-16 {
    margin-top: 16px;
}

._mt-32 {
    margin-top: 32px;
}

._mb-16 {
    margin-bottom: 16px;
}

._mt-4 {
    margin-top: 4px;
}

._mr-24 {
    margin-right: 24px;
}

._text-constrained {
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-search {
    margin-left: 30px;
    height: 32px;
    .md-autocomplete-wrap {
        height: 32px;
    }
}

._project-name {
    font-weight: 500;
    font-size: 18px;
}

.authentication-form {
    border: 1px solid #ebebeb;
    box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}

.authentication-error {
    color: $error_color;
    font-size: small;
    //font-weight: 500;
}

._text-error {
    color: $error_color;
    font-size: small;
}

._text-ok {
    color: $text-green;

    font-size: small;
}

.clickable:hover {
    color: $palette_secondary;
    text-decoration: underline;
    cursor: pointer;
}

._secondary {
    color: $aspirin_orange;
}

.pointer-cursor {
    cursor: pointer;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

md-list md-list-item.md-3-line .md-list-item-text h4 {
    line-height: 1.5em;
}

//md-toolbar .md-button.md-active{
//  color:#FBF5AB;
//}
a, ._link {
    color: #496193;

    text-decoration: none;
    cursor: pointer;
    outline: none;
    &:hover {
        text-decoration: underline;
    }
}

.md-margin-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.md-bg-white {
    background-color: white;
    color: $palette_primary;
}

.md-bg-primary {
    background-color: $palette_primary;
    color: white;
    md-icon {
        color: white;
    }
}

.md-bg-accent {
    background-color: $palette_accent;
    color: $palette_primary;
    md-icon {
        color: $palette_primary;
    }
}

.md-bg-secondary {
    background-color: $secondary;
    color: $primary;
    md-icon {
        color: $primary;
    }
}

.md-bg-warn {
    background-color: $warn;
    color: white;
    md-icon {
        color: white;
    }
}

.md-bg-success {
    background-color: $success;
    color: white;
    md-icon {
        color: white;
    }
}

.md-bg-background {
    background-color: $background;
}

.md-text-primary {
    color: $palette_primary;
}

.md-text-secondary {
    color: $secondary;
}

.md-text-warn {
    color: $warn;
}

.md-text-success {
    color: $success;
}

md-toast.md-bottom {
    position: fixed;
}

.md-16 {
    font-size: 16px;
}

.md-32 {
    font-size: 32px;
}

.md-48 {
    font-size: 48px;
}

md-checkbox.md-checked .md-icon:after, md-radio-button.md-checked .md-off {
    border-color: $palette_primary;
}

md-radio-button .md-on {
    background-color: $palette_primary;
}

md-dialog.centered-dialog {
    max-height: 500px;
    width: 75%;
}

.pagination {
    margin-bottom: 30px;
    margin-top: 30px;

    button {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        min-width: 40px;

    }
    .active {
        background-color: #E3F2FD;
    }
}

span.inset {
    padding: 0 5px;
}

.no-surround {
    margin: 0;
    padding: 0;
}

.sub-row {
    padding-top: 5px;
}

a.md-button.md-default-theme:not([disabled]):hover, a.md-button:not([disabled]):hover, .md-button.md-default-theme:not([disabled]):hover, .md-button:not([disabled]):hover {
    background-color: rgba(158, 158, 158, 0.2);
}

.md-icon-button.my-projects-icon-button {
    margin: 10px;
}

._centered {
    margin-left: auto;
    margin-right: auto;
}

._sub-header {
    color: rgba(0, 0, 0, 0.54);
    font-weight: 500;
    font-size: 14px;
}

._user-alias {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500;
    font-size: 13px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.54);
    display: inline-block;
    &._no-border {
        padding-right: 6px;
        border-bottom: none;
    }
}

._small-button .md-button {
    min-width: 24px;
    margin-bottom: 0;
    color: inherit;
    & md-icon {
        color: inherit;
        opacity: 0.87;
    }
}

$list-h3-margin: 0 0 0px 0 !default;
$list-header-line-height: 1.2em !default;
$list-p-margin: 0 0 0 0 !default;
$list-p-line-height: 1.6em !default;
@function rem($multiplier) {
    $font-size: 10px;
    @return $multiplier * $font-size;
}

._md-list-item-text {
    flex: 1;
    margin: auto;
    text-overflow: ellipsis;
    h3 {
        font-size: rem(1.400);
        font-weight: 500;
        letter-spacing: 0.010em;
        margin: $list-h3-margin;
        line-height: $list-header-line-height;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    p {
        font-size: rem(1.400);
        font-weight: 400;
        letter-spacing: 0.010em;
        margin: $list-p-margin;
        line-height: $list-p-line-height;
        color: rgba(0, 0, 0, 0.54);
    }
}

md-radio-button {
    outline: none;
}

img.circular {
    border-radius: 50%;
}

._small-note {
    font-size: $font_small;
}

._display-none {
    display: none;
}

._overflowed {
    display: block;
    &._show-all {
        max-height: inherit !important;

    }
    & ._view-more {
        color: $link-color;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        //padding-left: 8px;
        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

._truncated-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

._error {
    color: $aspirin_orange;
    //font-weight: 500;
    //padding-bottom: 8px;
    &._small {
        font-size: $font_small;
    }
    &._tiny {
        font-size: $font_tiny;
    }
}

._small-container {
    height: 40px;
    margin-bottom: 4px;
}

._tooltip {
    position: absolute;
    right: 0;
    top: -125px;
    &._small {
        top: -82px;
    }
    font-size: 12px;
    padding: 4px 5px;
    & ._main-text {
        font-weight: 500;
        color: rgba(0, 0, 0, 0.7);
    }
    color: rgba(0, 0, 0, 0.54);
    background-color: $medium-grey;
    width: 128px;
    &:after {
        content: ' ';
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        bottom: -14px;
        right: 0;
        border-width: 0 13px 15px 0;
        border-color: transparent $medium-grey transparent transparent;
    }
}

._row-item {
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin: 0 36px 16px;
    height: 54px;
    //background-color: #f6f7f9;
    background-color: #ffffff;
    outline: none;
    overflow: hidden;
    &._expanded {
        min-height: 380px;
        //height: calc(100% - 64px);
    }
    & ._icon-left {
        width: 40px;
        padding-left: 20px;
    }
    & ._rheader {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.54);
        height: 37px;
        padding-top: 17px;
    }
    &:hover {
        background-color: $palette_light;
    }
}

._clickable {
    cursor: pointer;
    outline: none;
}

._dialog {
    width: 700px;
    & ._content {
        //padding: 8px;
        background-color: $palette_tertiary;
        height: 524px;
    }
    ._close {
        position: absolute;
        top: 20px;
        right: 20px;
    }
    ._title {
        color: rgba(0, 0, 0, 0.7);
        font-weight: 500;
        font-size: 24px;
        line-height: 30px;
        margin-top: 32px;
    }
    ._secondary-text {
        color: rgba(0, 0, 0, 0.4);
        font-size: $font_small;
        margin-top: 4px;
        margin-bottom: 32px;
    }
    ._content-block {
        margin-left: 36px;
    }
    & ._margin-lr {
        margin-left: 20px;
        margin-right: 20px;
    }

    ._detail-text {
        color: rgba(0, 0, 0, 0.54);
        font-size: $font_small;
        margin-top: 4px;
        margin-bottom: 12px;
    }
    ._worker-list {
        overflow-y: auto;
        position: relative;
        //height: 200px;
    }
    ._user {
        display: inline-block;
        font-size: $font_small;
        font-weight: 500;
        line-height: 32px;
        text-align: center;
        ///margin: 2px;
        &._blocked {
            color: $error_color;
            & ._detail-secondary {
                color: rgba($error_color, 0.54);
            }
        }
        &._unblocked {
            color: rgba(0, 0, 0, 0.2);
            & ._detail-secondary {
                color: inherit;
            }
        }
        & ._detail-secondary {
            font-size: 12px;
            line-height: 20px;
        }
        & ._alias {
        }

    }
}

._inline {
    display: inline-block;
}

._link {
    outline: none;
    cursor: pointer;
    color: $aspirin_orange;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
    line-height: 22px;
}

._pb-12 {
    padding-bottom: 12px;
}

._pt-0 {
    padding-top: 0;
}

._badge-parent {
    position: relative;
    display: inline-block;
}

md-radio-group.md-default-theme[disabled],
md-radio-group[disabled],
md-radio-button.md-default-theme[disabled],
md-radio-button[disabled] {
    color: rgba(0, 0, 0, 0.54);

}

._badge-parent > ._badge {
    color: rgba(255, 255, 255, 1);
    background-color: $aspirin_orange;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 3px;
    position: absolute;
    margin-left: 4px;
    top: -10px;
    display: inline-block;
}

._secondary-text {
    color: rgba(0, 0, 0, 0.54);
}

._font-medium {
    font-weight: 500;
}

._button-special {
    display: inline-block;
    padding: 4px;
    border: solid 1px;

    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

table th {
    text-align: left;
    color: rgba(0, 0, 0, 0.54);
    font-weight: 400;
}

table td, table th {
    //word-wrap: break-word;
    overflow-wrap: break-word;
    //word-break: break-all;
    //min-width: 32px;
    //-ms-hyphens: auto;
    //-moz-hyphens: auto;
    //-webkit-hyphens: auto;
    //hyphens: auto;
    max-width: 128px;
    //vertical-align: top;
    //padding-top: 8px;
    //margin-bottom: 8px;
    //line-height: 1.2em;
    //max-height: 2.4em;
    //max-height: 64px;
    overflow: hidden;
}

._pd-32 {
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 32px
}

._link-button {
    color: $palette_accent;
    font-weight: 500;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
}

/*/
md-input-container.angular-message .md-auto-hide .md-input-message-animation:not(.ng-animate) {
    opacity: 1;
    margin-top: 0px;
}
*/
md-input-container .md-placeholder, md-input-container label:not(.md-no-float):not(.md-container-ignore) {
    padding-left: 0;
}

md-input-container {
    padding-left: 0;
}

._variable {
    font-family: 'Fira Mono', monospace;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
}

._text-button {
    line-height: 18px;
}

._card-list-item {
    padding: 16px;
    border-left: solid 4px white;
    //min-height: 64px;
    &._draft {
        border-left: solid 4px rgba($palette_accent, 0.2);
    }
    &._completed {
        border-left: solid 4px rgba($palette_accent, 0.54);
    }

}

._card-list-text {
    font-size: large;
    color: rgba(0, 0, 0, 0.7);
    line-height: 32px;
    text-transform: none;
    &._small {
        font-size: medium;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.7);
    }
}

._card-list-label {
    font-size: small;
    color: rgba(0, 0, 0, 0.54);
}

._inline {
    display: inline-block;
    padding-right: 24px;
    //width: 218px;
}

._status {
    font-size: small;
    line-height: 18px;
}

._completed {
    //color: rgba($aspirin_orange, 0.87);
}

._draft {
    //color: rgba($aspirin_orange, 0.54);
}

._create-new {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    color: rgba(0, 0, 0, 0.54);
    font-size: small;
    font-weight: 500;
}

._primary-btn {
    color: rgba($palette_accent, 0.87);
}

._text-btn {
    font-size: x-large;
    //color: $link-color;
    //border: dashed 1px rgba(0, 0, 0, 0.2);
}

._title {
    line-height: 32px;
    //text-decoration: underline;
    //cursor: pointer;
    outline: none;
    //color: #496193;

    display: inline-block;
    max-width: 550px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    @media only screen and (max-width: 480px) {
        max-width: 240px;
    }
    @media only screen and (max-width: 959px) and (min-width: 480px) {
        max-width: 75%;
    }
}

._hide-xs {
    @media only screen and (max-width: 480px) {
        display: none;
    }
}

._hide-sm {
    @media only screen and (max-width: 959px) {
        display: none;
    }
}

._primary {
    color: #496193;
}

._integer-block {
    width: 96px
}

._step-name {
    font-weight: 500;
    //font-size: medium;
    line-height: 26px;
}

._step-link {
    outline: none;
    cursor: pointer;
    color: rgb(0, 0, 238);
    vertical-align: middle;
    text-decoration: underline;
}

._left {
    text-align: left;
}

/*
md-input-container.angular-message .md-auto-hide .md-input-message-animation:not(.ng-animate) {
    opacity: 1;
    margin-top: 0px;
}
*/
._irb {
    background-color: $palette_light;
    color: rgba(0, 0, 0, 0.87);
    margin-left: auto;
    margin-right: auto;
    div {
        font-size: large;
        font-weight: 500;
        padding-top: 8px;
    }
}

._info-footer {
    background-color: $palette_tertiary;
    padding: 4px 16px;

}

md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item {
    background-color: #642f8d;
}

md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:nth-child(4) {
    background-color: #FFC333;
    color: black;
    padding: 12px;
}

md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active {
    color: #FFC333;
}

.md-tab {
    padding: 0;
    text-transform: none;
}

._text-light {
    color: $palette_light;
    a {
        color: $palette_light;
    }
}

div.home {
    .section {
        padding: 10px 0 30px 0;

        &.medium {
            min-height: 230px;
        }

        &.small {
            min-height: 150px;
        }

        & .heading {
            font-size: 1.4em;
            text-align: center;
        }

        & .sub-heading {
            font-size: 1.4em;
            text-align: center;
            font-weight: 400;
        }
    }

    & .dark {
        background-color: $palette_primary;
        //color: $palette_light;

        & a {
            text-decoration: underline;
            //color: $palette_light;
        }
    }

    & .light {
        background-color: $palette_light;
        color: $palette_primary;

        & a {
            text-decoration: underline;
            color: $palette_primary;
        }
    }

    & .textblock {
        & p, li {
            margin-bottom: 1em;
            text-align: left;
            font-size: large;
            line-height: 1.5;
        }

        & .free-height {
            max-height: none;
        }

        & img {
            margin-bottom: 1em;
        }

        & h1 {
            margin-top: 2em;
        }
    }

    & code {
        //background-color: rgba(255, 255, 255, 0.7);
    }

    & .project-preview {
        margin-bottom: 1em;
        border: 1px solid $medium-grey;
        max-height: 40em;
        overflow-y: auto;
    }

    & div > img {
        text-align: center;
    }

    & .dark-text {
        color: $palette_primary;
    }

    & .light-text {
        color: $palette_light;
    }

    & .accent {
        background-color: $palette_accent;
        color: $palette_primary;
    }

    & .bg-network {
        // http://qrohlf.com/trianglify/
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%), url('/static/images/pattern.png') no-repeat;
        background-size: cover;
    }

    & .bg-network.reverse {
        background: url('/static/images/background-bottom-orange-blue.png') no-repeat;
        background-size: contain; //65% 100%;
        //background-position-x: right;
    }

    //#about_us{
    //        min-height: 900px;
    //    }

    @media screen and (min-width: 1200px) {
        & .bg-network {
            //background-size: 50% 75%;
        }
    }

    @media screen and (min-width: 550px) and (max-width: 1200px) {
        & .bg-network {
            //background-size: 70% 65%;
        }
    }

    @media screen and (min-width: 300px) and (max-width: 550px) {

        & .bg-network {
            //background-size: 90% 55%;
        }
    }

    & .logo-overlay {
        background: rgba(255, 255, 255, 0.7);
        margin: 65px 0px;
        padding: 30px;
    }

    & .logo-container {
        text-align: center;
    }

    & .logo-text {
        font-size: 2em;
        color: $palette_primary;
    }

    & .logo-subtitle {
        color: $palette_primary;
    }

    .logo a {
        text-decoration: none;
    }

    & .byline {
        margin-top: 40px;
        margin-bottom: 75px;
        font-size: 2em;
    }

    & h1 {
        font-size: 30px;
    }

    & h2.title {
        font-size: 30px;
    }

    & h3 {
        margin-top: 0;
        font-weight: 100;
    }

    & p {
        margin-top: 0;
        margin-bottom: 0;
        line-height: 30px;
        //font-weight: 200;

        & b {
            //font-weight: 500;
        }
    }

    & .projectpreview {
        margin-bottom: 1em;
    }

    button.md-button {
        text-transform: none;
        font-size: 1.2em;
    }

    button.md-button.dark {
        background-color: $palette_primary;
        color: $palette_light;
        //margin: 0px;
        //min-width: 100px;
        //font-size: 18px;

        &:hover {
            color: $palette_primary;
            background-color: $palette_light;
        }
    }

    button.md-button.action {
        padding: 5px 15px;
        border-radius: 0;
        border: 1px solid gainsboro;
        margin: -2.5px;
        min-width: 175px;
        text-transform: capitalize;
    }

    & .navbar {
        .md-button {
            min-width: 106px;
            text-transform: capitalize;
            font-size: 1em;
            //min-width: 110px;

            &.highlighted {
                border: 2px solid $palette_primary;
                background-color: transparent;
                border-radius: 0;

                &:hover {
                    background-color: $palette_primary;
                    color: white;
                }
            }

            &.muted {
                color: #b2b2b2;

                &:hover {
                    color: $palette_primary;
                }
            }
        }
    }

    md-tabs:not(.md-no-tab-content) {
        margin-top: 15px;
        min-height: 550px;

        &.dark .md-tab {
            color: $palette_light;
        }

        md-tab-item {
            max-width: none !important;
            min-width: 180px;
            //white-space: nowrap;
        }

        md-tab-content {
            overflow: hidden;

            md-content {
                background-color: transparent;

                p {
                    margin-bottom: 10px;

                    &.dark-text {
                        color: $palette_primary;
                    }

                    &.light-text {
                        color: $palette_light;
                    }
                }

                button.md-button {
                    text-transform: none;
                    margin: 20px 0;
                }
            }
        }
    }

    button.signup {
        border: 2px solid rgb(255, 255, 255); //$palette_primary;
        background-color: transparent;
        border-radius: 0;
        padding: 10px;
        //margin-top: 20px;
        color: white; //$palette_primary;
        font-size: 1.4em;

        &:hover {
            background-color: rgb(255, 255, 255); //$palette_primary;
            color: $palette_primary; //white;
        }
    }
}

._disabled-text {
    color: rgba(0, 0, 0, 0.32);
    cursor: default;
}

._ls-4 {
    letter-spacing: 4px;
}

._button-active {
    background-color: rgba($primary, 0.2);
}

._single-char-icon {
    height: 24px;
    width: 24px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.38);
    color: white;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    &._active {
        background-color: $primary;
        font-weight: 500;
    }
}

._steppers-row {
    & ._step {
        cursor: pointer;
        outline: none;
        display: flex;
        align-items: center;
        height: 72px;
        flex: 1;
        padding-left: 8px;
        padding-right: 8px;
        & ._text {
            padding-left: 8px;
        }
        &._active {
            font-weight: 600;
        }
        &._not-visited {
            cursor: auto;
            color: rgba(0, 0, 0, 0.38);
        }
    }
    & ._connector {
        height: 1px;
        background-color: rgba(0, 0, 0, 0.1);
        flex: 2;
        //padding-left: 8px;
        margin-right: 24px;
    }
}

._large-header-centered {
    text-align: center;
    font-weight: 500;
    font-size: large;
    line-height: 36px;
    color: rgba(0, 0, 0, 0.7)
}

.hide-sm, .hide-md, .hide-lg {
}

._btn-load-more {
    color: $link-color;
    height: 90px;
    width: 90px;
    text-align: center;
    font-weight: 500;
    border: solid 1px $link-color;
    border-radius: 50%;
    line-height: 90px;
    padding: 4px;
    margin: 16px auto;
    outline: none;
    cursor: pointer;
}

._focused {
    &:focus {
        background-color: rgba($palette_primary, 0.1);
        //padding-left: 8px;
    }
}

._normal-text {
    font-size: medium !important;
    p {
        font-size: medium !important;
    }
}

p img {
    display: block;
    width: 100%;
}

.hljs-keyword {
    color: $palette_primary !important;
    font-weight: bold;
}

.hljs-built_in, .hljs-literal, .hljs-bullet, .hljs-code, .hljs-addition, .hljs-number, .hljs-string {
    color: $corporate_orange !important;
}

.hljs {
    color: #434f54 !important;
}

._mono {
    font-family: $font-family-mono;
}

._md-dark {
    background-color: $dark-color;
}

._lh3 {
    position: relative;
    line-height: 1.2em;
    max-height: 3.6em;
}

code {
    white-space: initial;
}

._md-chip {
    height: 32px;
    line-height: 32px;
    cursor: default;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 8px 8px 0 0;
    background-color: rgb(224, 224, 224);
    color: rgb(66, 66, 66);
    border-radius: 16px;
    display: block;
    float: left;
}

._collapsible-row.ng-hide-add,
._collapsible-row.ng-hide-remove {
    -webkit-transition: height 0.5s ease-in-out;
    -webkit-transition-delay: 2s;
    -moz-transition: height 0.5s ease-in-out;
    -moz-transition-delay: 2s;
    -ms-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    -o-transition-delay: 2s;
    transition: height 0.5s ease-in-out;
    transition-delay: 2s;
}

._nav-div {
    height: 48px;
    line-height: 48px;

    & ._active {
        background-color: #f5f5f5;
        border-left-color: rgba(0, 0, 0, 0.54);
    }
    & a {
        display: flex;
        padding-left: 16px;
        border-left: solid 4px transparent;

    }
}

md-input-container .md-input {
    padding-left: 0 !important;
}

@supports (-webkit-appearance:none) {
    ._ml-4-chrome {
        margin-left: -4px;
    }
}

md-radio-group.layout-gt-lg-row md-radio-button,
md-radio-group.layout-gt-md-row md-radio-button,
md-radio-group.layout-gt-sm-row md-radio-button,
md-radio-group.layout-gt-xs-row md-radio-button,
md-radio-group.layout-lg-row md-radio-button,
md-radio-group.layout-md-row md-radio-button,
md-radio-group.layout-row md-radio-button,
md-radio-group.layout-sm-row md-radio-button,
md-radio-group.layout-xl-row md-radio-button,
md-radio-group.layout-xs-row md-radio-button {
    margin: 8px 16px 0 0 !important;
}
