.bbga-panel-container {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
}
@media screen and (max-width: 900px) {
.bbga-panel-container {
flex-direction: column;
align-items: center;
}
}
.bbga-active-logins, .bbga-login {
flex: 1 1 auto;
margin: 10px 20px 20px 20px;
max-width: 400px;
width: 100%;
}
.bbga-active-logins h3, .bbga-login h3 {
text-align: center;
} .bbga-active-logins table {
width: 100%;
border-collapse: collapse;
}
.bbga-active-logins > table, .bbga-active-logins > table th, .bbga-active-logins > table td {
border: 1px solid black;
padding: 3px 5px;
font-size: 13px;
}
.bbga-active-logins td.center {
text-align: center;
}
.bbga-active-logins td.center .dashicons {
cursor: pointer;
font-size: 18px;
padding: 5px;
height: auto;
width: auto;
}
.bbga-active-logins td.center .dashicons:hover {
color: #3f3f3f;
} .bbga-login .form {
padding: 15px;
border: 1px solid #3f3f3f;
}
.bbga-login .form-row {
justify-content: center;
display: flex;
flex-direction: row;
margin-top: 15px;
}
.bbga-login .form-row:first-of-type {
margin-top: 0;
}
.bbga-login .form-row label {
width: 100px;
}
.bbga-login .form-row select, .bbga-login .form-row input {
width: 100%;
padding: 4px;
box-sizing: border-box;
}
.bbga-login .form-row button {
border: 1px solid #3f3f3f;
background-color: #3f3f3f;
color: white;
padding: 5px 15px;
cursor: pointer;
}
.bbga-login .form-row button:hover {
outline: none;
background-color: #000000;
}
.bbga-login .form-row button:focus {
outline: none;
background-color: #000000;
} .bbga-gallery {
margin: 10px 0;
border: 2px solid #3f3f3f;
}
.bbga-gallery .photos {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
margin: 0 15px 15px 0;
}
.bbga-gallery .photos a.photo {
margin: 15px 0 0 15px;
width: calc(20% - 15px);
}
.bbga-gallery .photos a.photo img {
width: 100%;
display: block;
}
@media screen and (max-width: 900px) {
.bbga-gallery .photos a.photo {
width: calc(33% - 15px);
}
}
@media screen and (max-width: 720px) {
.bbga-gallery .photos a.photo {
width: calc(20% - 15px);
}
}
@media screen and (max-width: 500px) {
.bbga-gallery .photos a.photo {
width: calc(33% - 15px);
}
}
.bbga-gallery .gallery-info {
display: flex;
width: auto;
color: white;
justify-content: space-between;
}
.bbga-gallery .gallery-info .info {
background-color: #3f3f3f;
align-items: center;
display: flex;
font-size: 13px;
padding: 4px 10px;
}
.bbga-gallery .gallery-info .info span, .bbga-gallery .gallery-info .info a {
text-decoration: none;
color: white;
}
.bbga-gallery .gallery-info .info span.big .dashicons {
font-size: 20px;
text-decoration: none;
}