/* =============================================== +\
|               REGULAR LAB CONTENT                 |
|    Reusable in many content pages without Hero    |
\* =============================================== */

/* A large round Icon for YouTube SVG logo */
.youtube {
    color: white;
    background: red;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: "Share Tech Mono", monospace;
}

.responsive-video-container {
    max-width: 50vw;
    margin: 0 auto;
    position: relative;
    padding-bottom: 28%; /* Aspect ratio hack. */
    height: 0;
    overflow: hidden;
    border-radius: 5px;
}

.responsive-video-container video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}


/* CSS Specific to language tutorials */
.custom-alphabet-table {
  border-color: #495057 !important;
}

.custom-alphabet-table th,
.custom-alphabet-table td {
  padding: 1rem 1.25rem;
  border: 1px solid #495057 !important;
  vertical-align: middle;
}


/* Table header cells. */
th {
    background-color: #19334d !important; /* Dark blue background. */
    font-weight: 500;
    font-size: 1.2rem;
    padding: 4px;
}

/* General content tables for syntax, operators, etc */
.table.table-dark.table-striped tbody tr.row-audio-active > td {
    background-color: #5a3c1e !important;
    color: #f7e7d3 !important;
}

.table.table-dark.table-striped tbody tr.row-audio-active:nth-of-type(odd) > td,
.table.table-dark.table-striped tbody tr.row-audio-active:nth-of-type(even) > td {
    background-color: #5a3c1e !important;
}

.table.table-dark.table-striped tbody tr.row-audio-active > td .row-audio-btn.row-audio-btn-active {
    background-color: #081016 !important;
    border-color: #081016 !important;
    color: #0dcaf0 !important;
}