/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.elive-room-selection {
	display: inline-block;
	min-width: 10em;
	margin-bottom: 2em;
	background: #fff;
}

.elive-error {
	color: #f00;
}

.elive-table-container,
.elive-table-container > div {
	box-sizing: border-box;
}

.elive-flex-table {
	display: flex;
	width: 100%;
	margin: auto 0;
	border-left: solid 1px #d9d9d9;
	transition: 0.5s;
}

.flex-row {
	padding: 0.5em 0.5em;
	border-right: solid 1px #d9d9d9;
	border-bottom: solid 1px #d9d9d9;
	text-align: center;
}

.elive-flex-table:nth-child(even) .flex-row {
	background: #f4f2f1;
}

.elive-flex-table:first-of-type .flex-row,
.elive-flex-table:first-of-type a .flex-row {
	border-color: #1565c0;
	color: #fff;
	background: #1976d2;
	text-decoration: none;
}

.elive-flex-table-3 {
	grid-template-columns: repeat(auto-fill, 33%);
}

.elive-flex-table-4 {
	grid-template-columns: repeat(auto-fill, 25%);
}

.flex-row-5 {
	width: calc(100% / 5);
}

.flex-row-6 {
	width: calc(100% / 6);
}

@media all and (max-width: 1200px) {

	.elive-flex-table {
		flex-flow: row wrap;
	}

	.flex-row {
		width: 100%;
	}

	.flex-row:first {
		width: 100%;
		border-bottom: solid 1px #d9d9d9;
	}

	.elive-flex-table > .flex-row {
		border-bottom: solid 1px #d9d9d9;
	}

	.elive-header > .flex-row {
		border-bottom: solid 1px;
	}
}

.elive-recording-table-input {
	width: 100%;
}

.elive-icon {
	color: #1976d2;
	cursor: pointer;
}

.elive-header-icon {
	color: #fff;
	cursor: pointer;
}

.dashicon-disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

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

.elive-recording-link {
	max-width: 7em;
	margin: 0.2em 0.1em;
	padding: 0.2em 0.3em;
	color: #fff;
	background-color: #007acc;
}

.elive-button {
	color: #fff !important;
	background-color: #007acc !important;
	padding: 0.8em 1.5em;
}

.elive-recording-link:hover,
.elive-recording-link:focus,
.elive-recording-link:active,
.elive-button:hover,
.elive-button:focus,
.elive-button:active {
	border-color: #006799 !important;
	background-color: #0a9ed4 !important;
}

.elive-recording-link > a {
	color: #fff;
	box-shadow: none !important;
	text-decoration: none !important;
}

.elive-recording-link > a:hover,
.elive-recording-link > a:focus,
.elive-recording-link > a:active,
.elive-recording-link > a:visited {
	color: #fff;
}

.elive-column-header-highlight {
	background: #52a8fd !important;
}

.elive-hidden {
	visibility: hidden;
}

.single-elive-room .elive-room .entry-content {
	float: none !important;
	width: auto !important;
}

.elive-expandable-header {
	display: inline-block;
	margin-top: auto;
	margin-bottom: auto;
	font-size: 1.2em;
	font-weight: 400;
}

.elive-recordings-display {
	cursor: pointer;
}

.elive-recording-display-block {
	margin: 0.5em 0;
	border-top: groove;
	border-bottom: groove;
}

.elive-join-room-label {
	display: inline-block;
	min-width: 20%;
}

.elive-join-room-input {
	display: inline-block;
	min-width: 70%;
}

.elive-join-form-block {
	margin-bottom: 0.2em;
}


h2{
    text-align: left;
    font-size: 18px;
    letter-spacing: 1px;
    color: #339966;
   
    
   
}

/* Table Styles */

.table-wrapper{
    margin: 10px 10px 10px;
    box-shadow: 0px 5px 5px rgba( 0, 0, 0, 0.2 );
}

.fl-table {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background-color: white;
}

.fl-table td, .fl-table th {
    text-align: center;
    padding: 8px;
}

.fl-table td {
    border-right: 1px solid #f8f8f8;
    font-size: 12px;
}

.fl-table thead th {
    color: #ffffff;
    background: #4FC3A1;
}


.fl-table thead th:nth-child(odd) {
    color: #ffffff;
    background: #324960;
}

.fl-table tr:nth-child(even) {
    background: #F8F8F8;
}

/* Responsive */

@media (max-width: 767px) {
    .fl-table {
        display: block;
        width: 100%;
    }
    .table-wrapper:before{
        content: "Scroll horizontally >";
        display: block;
        text-align: right;
        font-size: 11px;
        color: white;
        padding: 0 0 10px;
    }
    .fl-table thead, .fl-table tbody, .fl-table thead th {
        display: block;
    }
    .fl-table thead th:last-child{
        border-bottom: none;
    }
    .fl-table thead {
        float: left;
    }
    .fl-table tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .fl-table td, .fl-table th {
        padding: 20px .625em .625em .625em;
        height: 60px;
        vertical-align: middle;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 120px;
        font-size: 13px;
        text-overflow: ellipsis;
    }
    .fl-table thead th {
        text-align: left;
        border-bottom: 1px solid #f7f7f9;
    }
    .fl-table tbody tr {
        display: table-cell;
    }
    .fl-table tbody tr:nth-child(odd) {
        background: none;
    }
    .fl-table tr:nth-child(even) {
        background: transparent;
    }
    .fl-table tr td:nth-child(odd) {
        background: #F8F8F8;
        border-right: 1px solid #E6E4E4;
    }
    .fl-table tr td:nth-child(even) {
        border-right: 1px solid #E6E4E4;
    }
    .fl-table tbody td {
        display: block;
        text-align: center;
    }
}