/* This file contains the custom styling for the TA app suite beyond what is 
   included via bootstrap and UW/CSE styling */

/* ***** PAGE STRUCTURE ***** */

    div#uw-container {
        min-height: 500px;
        height: 100vh;
        overflow: auto;
    }

    div#uw-container-inner {
        height: 100%;
        overflow: auto;
    }

    /* Make the page body extend at least to the bottom of the screen
     * while leaving room for footer content
    */
    div.uw-body {
        min-height: calc(100% - 217px);
    }

/* ***** FONTS ***** */

    /* A thinner subtitle makes for a more pleasant viewing experience (imo) */
    h3 {
        font-weight: 500 !important;
    }

    .subtitle {
        color: rgb(89, 89, 89) !important;
    }

    .thin {
        font-weight: 500 !important;
    }

    .main a:not(.btn):not(.purple), .link {
        color: #0078C2;
        text-decoration: underline;
    }

    .link:hover {
        cursor: pointer;
    }

    .radio-group-div label{
        font-weight: normal;
    }

    .bold {
        font-weight: bold;
    }

    .purple {
        color: #4b2e83;
    }

    .alert-success {
        color: #3c763d;
    }

    .alert-warning {
        color: #a38300;
    }

    .mono {
        font-family: monospace;
    }

    .course-number {
        font-size: 20px;
    }

    label.thin-label {
        font-weight: normal;
    }

    /* For labels that are visually unnecessary, but needed for screen readers */
    .hidden-label {
        display: block;
        height: 0px;
        font-size: 0px;
        border: 0px;
        margin: 0px;
        padding: 0px;
    }

    /* Make sure buttons are accessible */
    .btn-light:hover, .btn-light:active, .btn-light:focus,
    .btn-link:hover, .btn-link:active, .btn-link:focus {
        color: black;
    }

/* ***** QUARTER CHANGER ***** */

    #change-quarter {
        /* Prevent conflict with quarter name (which also floats right */
        clear: right;
        color: #0078C2;
        border: none;
        background-color: transparent;
    }

    #change-quarter:hover {
        cursor: pointer;
    }

    #change-quarter-select {
        /* Prevent conflict with quarter name (which also floats right */
        clear: right;
        display: none;
    }

    #change-year, .input-year {
        height: 26px;
        width: 70px;
    }

/* ***** LAYOUT ***** */

    .inline {
        display: inline;
    }

    .block {
        display: block;
    }

    .inline-block {
        display: inline-block;
    }

    /* Bootstrap's .hidden class uses !important, which means we can't override it with jQuery .show() */
    .soft-hidden {
        display: none;
    }

    .right {
        float: right;
    }

    .clear-right {
        clear: right;
    }

    /* Vertical alignment */
        .valign-top {
            vertical-align: top;
        }

    /* Text alignment */
        .left-align {
            text-align: left;
        }

        .right-align {
            text-align: right;
        }


    /* Small screens & above */
    @media only screen and (min-width: 650px) {
        .inline-sm {
            display: inline-block;
        }
    }

    /* Medium screens and above */
    @media only screen and (min-width: 992px) {
        .inline-md {
            display: inline;
        }
        .right-md {
            float: right;
        }
        .left-md {
            float: left;
        }
        .mtop-50-md {
            margin-top: 50px;
        }
        .right-align-md {
            text-align: right;
        }
    }

    /* Small screens and below */
    @media only screen and (max-width : 767px) {
        button {
            float: none;
            vertical-align: baseline;
            position: static;
            z-index: auto;
        }
    }

    /* Miscellaneous */
        .radio-group-div {
            display: block;
        }

        /* Where username is displayed on the page */
        .username {
            float: right;
        }

/* ***** TABLES ***** */

    /* Override the default tablesorter-blue class stylings for tables that we don't want a hover effect on */
    .no-row-highlight tbody > tr.hover > td,
    .no-row-highlight tbody > tr:hover > td,
    .no-row-highlight tbody > tr:hover + tr.tablesorter-childRow > td,
    .no-row-highlight tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
    .no-row-highlight tbody > tr.even.hover > td,
    .no-row-highlight tbody > tr.even:hover > td,
    .no-row-highlight tbody > tr.even:hover + tr.tablesorter-childRow > td,
    .no-row-highlight tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
        background-color: white !important;
    }

    .no-row-highlight tbody > tr.odd.hover > td,
    .no-row-highlight tbody > tr.odd:hover > td,
    .no-row-highlight tbody > tr.odd:hover + tr.tablesorter-childRow > td,
    .no-row-highlight tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
        background-color: white !important;
    }

    /* Prevent the gap between the bottom of a table and its div container */
    div.table-container table {
        margin-bottom: 0px !important;
    }

    /* The div container for tablesorter tables */
    div.table-container {
        height: 100%;
        width: 100%;
        overflow: auto;
        border: 1px solid #dddddd;
        position: relative; /* This is what allows tablesorter stickyheaders to work! */
    }

    table.border-table td {
        border: 1px solid #dddddd;
    }

    /* Display a more compact table for certain tables */
    .compact-table tr:not(.tablesorter-filter-row) td {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    thead {
        border-top: 1px solid #dddddd;
    }

    tbody {
        border-bottom: 1px solid #dddddd;
    }

    .tbl-hr {
        padding: 0px;
        margin: 0px;
    }

    /* This is what actually hides filtered columns */
    .tablesorter-filter.disabled {
        display:none;
    }

    /* Tables that only have row borders but not column borders */
    .row-table td {
        border-width: 1px 0px;
    }

/* *** IMAGES *** */

    .ta-photo {
        height: 150px;
        width: 100px;
    }

/* ***** MISCELLANEOUS ***** */

    .main-hr {
        height: 3px;
    }

    .full-width {
        width: 100% !important;
    }

    .border-form {
        border: 1px solid #e9e6f0;
        border-radius: 4px;
        padding: 15px;
    }

    .pointer {
        cursor: pointer;
    }

    .resize {
        resize: both;
    }

    .small-icon {
        height: 20px;
        width: 20px;
    }

    .borderless-sides {
        border-right: 0px !important;
    }

    /* Blatantly ripped off from cse_boundless_style.css without requiring the .btn class */
    .disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.65;
        filter: alpha(opacity=65);
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .btn.btn-light:hover {
        color: black;
    }