.sidebar-ext {
    padding: 16px;
}
.brand-logo {
    cursor: pointer;
    padding: 3px;
    margin-right: 5px;
}

.sidebar-ext-actions {
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    margin-top: 10px;
}

.sidebar-ext .version-select {
    display: flex;
    flex: 1 0;

    padding: 10px 15px;
    margin-right: 5px;

    background: #ffffff;

    border: 1px solid #bbb;
    border-radius: 5px;
}
.extension-select {
    display: flex;
    flex-direction: horizontal;
    flex-wrap: wrap;
    gap: 30px;
}


.extension-select .extension {
    flex: 0 1 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #eee;
    background: #fafafa;
    min-height: 10rem;
    border-radius: 4px;
}

@media screen and (min-width: 961px) {
    .extension-select .extension {
        flex: 0 1 30%;
    }
}

.extension .group {
   display: flex;
   flex: 0; 
   flex-direction: row;
}

.extension .title {
    display: flex;
    flex: 1 0;
    flex-direction: column;
}

.extension .title .name {
    font-weight: bold;
}

.extension .title .version {
    font-style: italic;
}

.extension .description {
    color: #666666;
    margin: 0px;
}

.extension .chk-enabled {
}

.extension .chk-enabled .input-group {
    padding: 2px 5px;
    background: #ddd;
    border-radius: 10px;
}

.extension .chk-enabled label {
    font-family: monospace;
    text-transform: lowercase;
    font-size: 10px;
    margin: 2px;
}


/**
 * DarkMode
 */

body.dark {
    background: #1f1f1f;
    color: #c7c7c7;
}

.dark .api-content h1,
.dark .api-content h2,
.dark .api-content h3,
.dark .api-content h4,
.dark .api-content h5,
.dark .api-content p,
.dark .api-content span {
    color: #c7c7c7 !important;
}

.dark .api-content .extension {
    background: #3e3e3e !important;
    border: 1px solid #3e3e3e;
}

.dark .api-content table {
    padding: 20px;
    background: #2e2e2e;
    width: fit-content !important;
    border-collapse: collapse;
    border: 15px solid #333;
    border-radius: 15px;
}

.dark .api-content td {
    color: #c7c7c7 !important;
    background: #3e3e3e !important;
    border: 1px solid #4a4a4a !important;
}
.dark .api-content th {
    color: #c7c7c7 !important;
    background: #2e2e2e !important;
    border: 1px solid #4a4a4a !important;
}

.dark .api-content a {
    color: #9ebf7d !important;
}

.dark .menu-content,
.dark .menu-content span:not(.operation-type),
.dark .menu-content label {
    background: #2e2e2e !important;
    color: #c7c7c7 !important;
}

.dark .menu-content .-depth0,
.dark .menu-content .-depth1 {
    font-weight: bold;
}

.dark .menu-content input {
    color: #c7c7c7 !important;
    border-bottom: 1px solid #4e4e4e;
}

.dark select,
.dark .sidebar-ext select.version-select {
    background: #444;
    border: 1px solid #222;
    color: #ffffff;
    outline: none;
}

.dark select {
    opacity: 100 !important;
    color: #ffffff !important;
}

.dark .search-icon {
    filter: invert();
}

.dark code {
    color: #35e5d5 !important;
}

.dark .scrollbar-container > div {
    filter: invert() hue-rotate(150deg);
}

.dark svg {
    filter: invert() hue-rotate(150deg);   
}

.dark .extension .chk-enabled .input-group {
    background: #303030;
}

/* Field: 'required' */
.dark .dBPdaM {
  color: #ff6161;
}

.light-switch {
   flex: 0 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-left: 5px;
}

.light-switch a {
    display: flex;
    border-radius: 30px;
    background: #afafaf;

    margin: 5px;
    padding: 0px 0px;
}

.light-switch a img {
    height: 25px;  
    color: white;
}


.light-switch .light {
    display: none;
}

.light-switch .dark {
    filter: invert() opacity(75%);
}