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

.bbb-room-selection {
	display: inline-block;
	min-width: 10em;
	margin-bottom: 1.5em;
	background: #fff;
    height: 50px;
	width: 240px;
	padding: 0.36rem 0.66rem;
}

.bbb-error {
	color: #f00;
}

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

.bbb-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;
}

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

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

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

.bbb-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) {

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

	.flex-row {
		width: 100%;
	}

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

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

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

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

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

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

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

.bbb-inline-block {
	display: inline-block;
    font-size: 18px;
    margin-left: 50px;
}

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

.bbb-button {
	color: #fff !important;
	background-color: #050047 !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
	width: 166px;
    height: 50px;
	font-size: 22px !important;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

.bbb-recording-link:hover,
.bbb-recording-link:focus,
.bbb-recording-link:active,
.bbb-button:hover,
.bbb-button:focus,
.bbb-button:active {
	border-color:  #050047 !important;
	background-color:  #050047 !important;
}

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

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

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

.bbb-hidden {
	visibility: hidden;
}

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

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

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

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

.bbb-join-room-label {
	display: inline-block;
	display: flex;
	width: 180px;
}

.bbb-join-room-input {
	display: inline-block;
	width: 240px;
	height: 50px;
	padding: 0.36rem 0.66rem;
}

.bbb-join-form-block {
	margin-bottom: 0.8em;
    text-align: left;
    font-size: 18px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	width: 420px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 800px) {

	.bbb-join-room-input {
		margin-left: 0px;
		width: 240px;
		height: 40px;
	}

	.bbb-room-selection {
		margin-bottom: 1.5em;

		display: inline-block;
		min-width: 10em;
		background: #fff;
		height: 50px;
		width: 240px;
	}

	.bbb-inline-block {
		margin-bottom: 0px;
	}

	.bbb-button {
		width: 80%;
		font-size: 22px !important;
		margin-top: 10px;
	}

	.bbb-join-form-block {
		width: 240px;
	}

	.bbb-room-selection {
	}

	.bbb-inline-block {
		margin-left: -53px;
	}

	.bbb-button {
		width: 240px;
		font-size: 27px !important;
	}
}

.widget.widget_bigbluebuttonwidget {
	margin-left: auto !important;
	margin-right: auto !important;
}

.widget.widget_bigbluebuttonwidget > .widget-title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bbb-error-disabled {
	display: none;
}