/**
 *
 * Best break points for mobile devices:
 *
 * 320px: smartphones, iPhone, portrait 480x320 phones
 * 481px: portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide
 * 641px: portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
 * 961px: tablet, landscape iPad, lo-res laptops ands desktops
 * 1025px: big landscape tablets, laptops, and desktops
 * 1281px; hi-res laptops and desktops
 *
 **/

@media screen and (min-width: 1200px) {
    .-container,
    #nav,
    .ani_actions,
    #divContent, #mainTable {
        max-width: 900px;
    }
}

@media screen and (max-width: 600px) {
    #nav > li {
        width: 100%;
    }

    .w3-even .w3-col:nth-child(even) {
        background: #e9e9e9;
    }

    .mobile-width-200, .mobile-width-170 {
        width: 100%;
    }

    .hide-mobile {
        display: none;
    }

    #set-landing-page {
        margin-bottom: 0px;
    }
}

@media screen and (min-width: 600px) {
    .w3-even .w3-row:nth-child(even) {
        background: #e9e9e9;
    }

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

    .-login {
        width: 50%;
    }

    .float-l {
        float: left;
    }

    .float-r {
        float: right;
    }

    .mobile-width-200: {
        width: 200px;
    }

    .mobile-width-170: {
        width: 170px;
    }

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

    .quick-links.-perc10 li { width: 10%; }
    .quick-links.-perc15 li { width: 15%; }
    .quick-links.-perc20 li { width: 20%; }
    .quick-links.-perc30 li { width: 30%; }
    .quick-links.-perc50 li { width: 49%; }
    .quick-links.-perc100 li { width: 100%; }

    .hide-desktop {
        display: none;
    }
}

#nav {
    width: auto;
}

#showNav {
    display: inline-block;
    cursor: pointer;
    display: none;
    margin: 0 auto;
    padding: 1px;
    background-color: rgba(0, 0, 0, .35);
}

.bar1, .bar2, .bar3 {
    width: 27px;
    height: 4px;
    background-color: white;
    margin: 6px auto;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -9px);
    transform: rotate(45deg) translate(-8px, -9px);
}

#nav {
    right: min(100vh - 100px, 50vh);
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-in-out;
}

.-container {
    overflow: hidden;
}

#divContent select {
    font-size: 10pt;
}

/**
 * Responsive Tables:
 * 
 * Tables having class="mobile" will display table rows as blocks,
 * repeating the head of the table for easy viewing on mobile devices
 *
 * Note: The table row containing the head of the table should always be wrapped in <thead>
 *       window.handleTables() should be used after the table is rendered to populate mobile
 *       view tables head titles for each row. This function should be re-run for dynamically
 *       rendered tables
 *
 *       To make a specific <td> on mobile view the full width of the table add class="full" to the <td>
 *       Add class="non-abso" to a <td> if you want the title to display above the <td> in mobile view
 *
 **/

table.mobile {
    border-collapse: collapse;
    width: 100%;
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    table.mobile, table.mobile thead, table.mobile tbody, table.mobile th, table.mobile td, table.mobile tr { 
        display: block; 
    }

    table.mobile thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.mobile tr { border-bottom: 1px solid #ccc; }

    table.mobile td:not(.full) { 
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    .full {
        width: auto;
    }

    table.mobile td:not(.non-abso):before { 
        position: absolute;
    }

    table.mobile td:before { 
        top: 3px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        font-weight: bold;
    }

    table.mobile tr td {
        min-height: 20px;
    }

    .space-rows:not(:last-child) {
        padding-bottom: 15px;
    }

    .space-rows:not(:first-child) {
        padding-top: 15px;
    }
}