﻿/* Common Styles */

html, body, p, li, span, td {
    font-family: inherit;
    font-size: 12px;
}

.container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px!important;
}

.title {
    font-size: 24px;
    color: #1b75bc;
}

.subtitle {
    font-size: 20px;
    color: #767676;
    border-bottom: 1px solid #767676;
    margin-bottom: 2rem;
}

.btn-success,
.btn-view {
    color: #fff;
    background-color: #218838;
    border-color: #218838;
}

    .btn-success:hover,
    .btn-view:hover {
        background-color: #218838;
    }

.btn-primary,
.btn-edit {
    background: #1b75bc;
    border-color: #1b75bc;
    color: #ffffff;
}

    .btn-primary:hover,
    .btn-edit:hover {
        background: #343d49;
    }

.btn-secondary,
.btn-select {
    background: #343d49;
    border-color: #343d49;
    color: #ffffff;
}

    .btn-secondary:hover,
    .btn-select:hover {
        background: #1b75bc;
    }

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

    .btn-danger:hover {
        background-color: #c82333;
    }

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

    .btn-warning:hover {
        background-color: #e0a800;
    }

.detail-group:not(:first-of-type) {
    margin-top: 3rem;
}

.main-area {
    padding: 20px 15px;
}

.button-rail {
    display: flex;
    flex-wrap: wrap;
}

    .button-rail > * {
        margin: 0 6px 6px 0;
/*        flex: 1;*/
    }

[role="button"] {
    cursor: pointer;
}

.info-header, .panel-toggle {
    padding: 1.5rem;
}

@media screen and (min-width:770px) {


    .main-area {
        padding: 40px;
    }

    .columns2 {
        column-count: 2;
        column-gap: 80px;
        column-rule: 1px solid #ccc;
    }

    .button-rail > * {
        margin: 0 6px 0 0;
/*        flex: 0;*/
    }

    .content-rail > *:not(.title) {
        flex: 1;
    }

    .content-rail > .title {
        margin-right: 2rem;
    }
}

.text-ge {
    color: #1b75bc;
}

    .text-ge:hover {
        color: #343d49;
    }

.text-null {
    color: #ccc;
}

.btn-ge {
    background: #1b75bc;
    color: #ffffff;
    transition: background .2s;
}

    .btn-ge:hover {
        background: #343d49;
        transition: background .2s;
    }

/*
.btn[disabled="disabled"] {
    background: #c0c0c0;
    color: #4f4f4f;
}*/

@media screen and (max-width: 769px) {
    .tab-pane {
        padding: 2rem 0 !important;
    }

    .chk .stat {
        display: inline-block;
        flex-grow: 0 !important;
        margin-right: 10px;
    }

    .detstat.chk .stat-title {
        width: auto !important;
        flex-grow: 1;
    }

    .detstat.chk {
        display: inline-flex;
        align-items: center !important;
        flex-direction: row;
        width: 100%;
    }
}

.hidden {
    display: none !important;
}

/* for templates */

.template, .subtemplate, .tcTemplate, .subtcTemplate, .assignmentList {
    display: none !important;
}

.no-submittals, #notimecards, .no-records {
    /*width: 100%;*/
    background: #efefef;
    padding: 40px;
    color: #444;
    font-size: 20px;
    font-style: italic;
    margin: 0 auto;
    text-align: center;
}


.detailrow, .addrow, .accordion .card .list-group-item.tbl {
    background: rgba(200,200,200,1) !important;
}

    .detailrow .detail-view.address {
        transform: scale(1.2);
    }

    .detailrow .address em {
        margin: 0 0 0 .5rem;
        font-family: Inter, sans-serif;
        font-size: .65rem;
        font-style: normal !important;
    }


div.detail-area .detail-edit {
    display: none;
}

.panel-toggle .panel-toggle {
    padding: 0 !important;
}

/*row highlight*/
.highlight, .k-alt.highlight, .highlight:hover, .k-alt.highlight:hover {
    background-color: rgba(52,61,73,0.7) !important;
}

    .highlight > td, .highlight > div {
        color: #fff !important;
    }

        .highlight > div a {
            color: lightgreen !important;
        }

            .highlight > div a:hover {
                color: #fff !important;
            }

/*for timecard row*/
.highlight-row > td > table tr {
    background-color: rgba(2,143,204, 0.15) !important;
}

.notesBadge, .filesBadge {
    margin-left: 4px;
}

.input-validation-error {
    border: 1px solid #dc3545 !important;
}
