//****************************************************************************
//****************************************************************************
// SwellCore Quasar Record View Styles
//****************************************************************************
//****************************************************************************
.scq-record-view {

    //=============================================================
    // Record Header
    //=============================================================
    .record_header {
        margin: 10px 0 10px;

        h5 {
            margin: 0;
        }

        //-----------------------------------------------------
        // Record Header Links
        //-----------------------------------------------------
        .record_links {
            padding-left: 10px;

            .q-btn {
                //margin-bottom: 5px;
                margin-right: 5px;
                //padding: 2px 0;

                .q-icon {
                    font-size: 14px;
                }
            }
        }

        .record_links .fa {
            margin-right: 0;
            padding-right: 0;
        }

    }

    //=============================================================
    // Header Links Positioning
    //=============================================================
    &.header-links-right {
        .record_header_text {
            float: left;
        }
        .record_links {
            float: right;
        }
    }

    //=============================================================
    // Record Details
    //=============================================================
    .record_details {
        border-top: 1px #ddd solid;
        border-bottom: 1px #ddd solid;
        padding: 10px 0px 10px;

        .row {
            margin-bottom: 5px;

            .detail_header {
                h5 {
                    border-bottom: 1px #eeeeee solid;
                    font-size: 20px;
                    font-weight: 700;
                    margin-bottom: 10px;
                }
            }

            .detail {}
            .long-detail {}
            .memo {
                .detail_label {
                    text-decoration: underline;
                    margin-bottom: 3px;
                }
                margin-top: 15px;
                margin-bottom: 10px;
            }
        }

        .detail_label {
            font-size: 15px;
            color: #333333;
            font-weight: bold;
            //width: 150px;
            border-radius: 5px;
        }

        .detail_data {
            font-size: 14px;
        }

        .detail_label,
        .detail_data {
            float: left;
            word-wrap: break-word;

            .label {
                padding: .1em .2em;
                font-size: 14px;
            }
        }
    }

    //*****************************************************
    // Sub-section Nav
    //*****************************************************
    .sub_section_nav {
        margin-top: 5px;

        .q-tabs {
            padding-bottom: 5px;
            border-bottom: 1px #ddd solid;

            .q-tabs-head {
                background: inherit;
            }
        }
    }

    //*****************************************************
    // Sub-section
    //*****************************************************
    .sub_section {
        margin-top: 10px;

        .scq-page {
            padding: 0;

            .scq-page-title {
                //border-bottom: 1px #f3f3f3 solid;
                border-bottom: 0;
                font-size: 20px;
                font-weight: 500;
                margin-top: 0;
                //margin-bottom: 0px;
                line-height: 32px;
            }
        }
    }

    //****************************************************************************
    //****************************************************************************
    // Responsive CSS Styles
    //****************************************************************************
    //****************************************************************************

    //**********************************************************
    // Large desktop
    //**********************************************************
    @media (min-width: 1200px) {

    }

    //**********************************************************
    // Small Desktop
    //**********************************************************
    @media (min-width: 980px) {

    }

    //**********************************************************
    // Portrait tablet to landscape and Desktop
    //**********************************************************
    @media (min-width: 768px) and (max-width: 979px) {

    }

    //**********************************************************
    // Tablet
    //**********************************************************
    @media (max-width: 1024px) {

    }

    //**********************************************************
    // Landscape phone to portrait tablet
    //**********************************************************
    @media (max-width: 767px) {

        .detail_item {
            clear: none;
            float: none;
            padding-bottom: 5px;
        }

    }

    //**********************************************************
    // Landscape phones
    //**********************************************************
    @media (max-width: 480px) {

        .record_header{
            .record_links {
                display: block;
                //margin-top: 10px;
                padding-left: 0px;
            }
        }

        .detail_item {
            clear: none;
            float: none;
        }

        .record_details .detail_item .detail_data {
            clear: left;
            margin-bottom: 12px;
        }

    }

    //**********************************************************
    // Portrait phones and down
    //**********************************************************
    @media (max-width: 320px) {

    }

}