@charset "utf-8";
/* 
    File name: livestream-styles.css
*/

@charset "utf-8";
/* Main Content Styles */

body, html {
    overflow-x: hidden;
    background-color: #F4F6F4;
}

section#livestream {
    margin-top: 86px;
    padding-top: 3em;
    padding-bottom: 2em;
}

section#schedule {
    padding-top: 1em;
    padding-bottom: 3em;
    background-color: #F4F6F4;
}

/* Table Styles */

#tableContainer {
    border-width: 2px;
    border-color: #707070;
    border-style: solid;
}

#tableContainer table.table {
    margin-bottom: 0px;
}

thead {
    background-color: #C68D8B;
    color: #fff;
}

table#mainContent {
    border-collapse: collapse;
    border-style: hidden;
}

table#mainContent td, table#mainContent th {
    border: 1px solid gray;
    position: relative;
}

table#mainContent th {
    vertical-align: middle;
}

td.divider {
    text-align: center;
    background-color: rgb(56, 56, 56);
    color: honeydew;
    padding: 8px 12px 8px 12px;
}

td.details-cell {
    padding-bottom: 0;
    vertical-align: middle;
}


/* Time Button Styles */
td.divider {
    text-align: center;
    background-color: rgb(56, 56, 56);
    color: honeydew;
    padding: 8px 12px 8px 12px;
}

div.timeButtons {
    margin-bottom: 10px;
}

div.timeButtons label {
    cursor: pointer;
}

/* div#timeButtons label.active {
    background-color: rgb(34, 34, 34);
} */

div.timeButtons label.btn.btn-secondary.SGl {
    background-color: #C68D8B;
    border: 2px solid #C68D8B;
}

div.timeButtons label.btn.btn-secondary.IDl {
    background-color: #AC7274;
    border: 2px solid #AC7274;
}

div.timeButtons label.btn.btn-secondary.LNl {
    background-color: #985D6B;
    border: 2px solid #985D6B;
}

div.timeButtons label.btn.btn-secondary.USl {
    background-color: #694453;
    border: 2px solid #694453;
}

#smallScreen {
    display: none;
}

#smallScreen div {
    width: 100%;
    margin-bottom: 0px;
}

#smallScreen div label {
    width: 50%;
}

a.link-primary {
    color: blue;
    text-decoration: underline;
}

div.explain {
    width: 760px;
    height: 420px;
    background-color: grey;
    color: white;
    text-align: center;
    padding-top: 50px;
}


/* Mobile Screen */
@media (max-width: 576px) {
    #livestream iframe {
        height: 200px;
        width: auto;
    }
}

/* Responsive design */
@media (max-width: 992px) {
    #bigScreen {
        display: none;
    }

    #smallScreen {
        display: block;
    }
}