:root {
    --primary: #4990e2;
    --primary-rgba-100: rgba(73, 144, 226, 1);
    --primary-rgba-90: rgba(73, 144, 226, 0.9);
    --primary-rgba-60: rgba(73, 144, 226, 0.6);
    --primary-rgba-30: rgba(73, 144, 226, 0.3);
    --secondary: #49cc90;
    --success: #49cc90;
    --info: #49cc90;
    --warning: #ffb600;
    --danger: #ff6060;
    --light: #ghostwhite;
    --dark: #343a40;
    --border-radius-big: 1.25em;
    --border-radius-small: 0.675em;
    --border-radius-tiny: 0.375em;
}

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-thumb {
    border: 3px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: var(--primary-rgba-30);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-rgba-60);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--primary-rgba-100);
}

.bracket-highlight {
    color: #9012fe;
}

li {
    margin: 6px 0;
    line-height: 16pt;
}

body {
    background: ghostwhite;
    transition: all 500ms ease;
}

button {
    border-radius: var(--border-radius-big) !important;
}

.swagger-ui {
    & table tbody tr td {
        min-width: 6em;
        padding: 10px 0;
        vertical-align: middle;
    }

    #warning {
        color: #ff3737;
        font-weight: bolder;
    }

    #information {
        color: #d5913e;
        font-style: italic;
    }

    #highlight {
        color: #55a;
        font-weight: bold;
    }

    & textarea {

        &.curl {
            color: #383838;
            background: rgba(248, 248, 255, 0.71);
        }
    }

    .auth-container {
        .errors {
            border-radius: var(--border-radius-big);
        }

        & input {
            border-radius: var(--border-radius-small);
            transition: background 150ms ease-in,
            border 400ms ease;

            &:focus {
                border: 1px solid #4990e2;
                outline: none;
                background: #4990e244;
            }

            &:hover {
                background: #4990e244;
            }
        }

        & input[disabled] {
            border-radius: var(--border-radius-small);

            &:hover {
                background: #fafafa;
            }
        }
    }

    .btn {
        border: none;
        background: #4990e2;
        color: #fafafa;
        padding: 8px 20px 8px 20px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .3),
        inset 0 0 0 rgba(0, 0, 0, 0);

        &:active {
            transition: box-shadow cubic-bezier(0.7, 0.8, 0.95, 1);
            box-shadow: 0 0 0 rgba(0, 0, 0, .3),
            inset 0 0 6px rgba(255, 255, 255, .7);
        }

        &.execute {
            background-color: #49cc90;
            border: none;
            color: #fafafa;
            font-size: 16pt;
            transition: background-color 100ms cubic-bezier(0.7, 0.8, 0.95, 1);
        }

        &.cancel {
            border: none;
            background: #ff6060;
            color: #fafafa;
        }


        &.authorize {
            background-image: linear-gradient(
                    145deg,
                    #85ea2d 10%,
                    #49cc90 56%
            );
            border: none;
            color: #fafafa;
            font-size: 12pt;
            position: fixed;
            bottom: 32px;
            right: 32px;
            z-index: 2;
            transition: box-shadow 100ms cubic-bezier(0.7, 0.8, 0.95, 1);
            box-shadow: 0 0 24px rgba(0, 0, 0, .3),
            rgba(0, 0, 0, 0) 0 0 1px inset;

            :is(svg) {
                fill: rgba(255, 255, 255, 0.5);
            }

            &:before {
                border-radius: inherit;
                color: #ffffff;
                content: '';
                box-shadow: 0 0 8px rgba(0, 0, 0, .3);
                background-image: linear-gradient(
                        215deg,
                        rgb(73, 204, 193) 35%,
                        #49cc90 70%
                );
                transition: opacity 200ms cubic-bezier(0.0, 0.5, 0.6, 1),
                box-shadow 50ms cubic-bezier(0.7, 0.8, 0.95, 1);
                opacity: 0;
                display: block;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                z-index: -1;
            }

            &:hover {
                text-shadow: 0 1px 10px rgb(0, 255, 139);
                box-shadow: 0 0 8px rgb(0, 255, 139),
                rgba(0, 0, 0, 0) 0 0 1px inset;

                :is(svg) {
                    filter: drop-shadow(0px 1px 10px rgb(255 255 255 / 1));
                }

                &:before {
                    opacity: 1;
                }
            }

            &:active {
                box-shadow: 0 0 0 rgba(133, 133, 133, 0.5),
                inset 0 0 12px rgba(255, 255, 255, .7);

                &:before {
                    box-shadow: 0 0 0 rgb(255, 255, 255),
                    rgb(255, 255, 255) 0 0 24px inset;
                }
            }

            &.locked {
                :is(svg) {
                    fill: rgba(255, 255, 255, 1) !important;
                }
            }
        }

        &.btn-sm {
            font-size: 12px;
            padding: 4px 16px;
            vertical-align: middle !important;
            margin-bottom: 2px;
            margin-left: 2px;
        }
    }

    .parameters-col_description {
        & select {
            padding: 8px;
        }

        & input {
            transition: background 150ms ease-in,
            border 400ms ease;

            &:focus {
                border: 1px solid #4990e2;
                outline: none;
                background: #4990e244;
            }

            &:hover {
                background: #4990e244;
            }
        }

        & input[disabled] {
            &:hover {
                background: #fafafa;
            }
        }
    }

    .filter {
        min-width: 200px;
        max-width: 40%;

        border-radius: var(--border-radius-big);
        margin: 12px 30% 12px 30%;

        .operation-filter-input {
            border-radius: var(--border-radius-big);
            border: 2px dashed #969696;
            text-align: center;
            background: #ffffff;
            color: #3d3d3d;
            min-width: 200px;
            margin-bottom: 0;
            margin-top: 0;
            transition: background 100ms cubic-bezier(0.33, 0.4, 0.6, 1),
            border 50ms cubic-bezier(0.33, 0.4, 0.77, 1);

            &:focus {
                outline: none;
                border: 2px dashed #4990e2;
                background: #4990e244;
            }

            &:hover {
                background: #4990e244;
            }
        }
    }

    .scope-def {
        display: none;
    }

    .dialog-ux {
        z-index: 4;

        .backdrop-ux {
            backdrop-filter: blur(10px);
        }

  

        .modal-ux {
            border: none;
            border-radius: var(--border-radius-big);

            :is(code) {
                color: #9012fe;
            }

            .btn.authorize {
                position: relative;
                right: 0;
                bottom: 0;
                box-shadow: 0 0 8px rgba(0, 0, 0, .3);
            }
            .btn-done{
                display: none;
            }
        }

        .modal-ux-header {
            border-bottom: none;

            .close-modal {
                position: relative;
                margin-right: 16px;
                margin-top: 4px;
                transform: scale(1.5);
                padding: 0;
            }
        }
    }

    .errors-wrapper {
        background: rgba(249, 62, 62, .1);
        border: 2px solid #f93e3e;
        border-radius: var(--border-radius-small);
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 3;

        .btn {
            background: #fafafa;
            border: 1px solid #969696;
            color: #6c6c6c;
        }
    }

    .execute-wrapper {
        & .btn {
            padding: 8px 20px;
            width: inherit;
        }
    }

    .info {
        margin: 50px 0 0 0;

        & li {
            &::marker {
                color: #AAAAAA;
            }
        }

        .title {
            & small {
                &.version-stamp {
                    background-color: #85ea2d;

                    & pre {
                        color: #3d3d3d;
                    }
                }
            }
        }

        & details {
            & summary {
                cursor: pointer;
                user-select: none;
                text-align: center;
                font-weight: bold;
                background: rgba(255, 255, 255, 1);
                box-shadow: rgba(59, 59, 59, 0.4) 0 3px 10px,
                rgba(0, 0, 0, 0) 0 0 0 inset;
                width: 26%;
                padding: 8px;
                margin-left: 36%;
                color: rgb(73, 73, 73);
                border-radius: var(--border-radius-big);
                transition: background 450ms cubic-bezier(0, 0.5, 0.8, 1),
                box-shadow 100ms cubic-bezier(0, 0.7, 0.8, 1);

                &:hover {
                    color: #363636;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: rgba(89, 89, 89, 0.66) 0 1px 6px,
                    rgba(0, 0, 0, 0) 0 0 1px inset;
                }

                &:active {
                    transition: background 100ms ease-out,
                    box-shadow 50ms cubic-bezier(0.33, 0.4, 0.77, 1);
                    color: #090505;
                    background: rgb(255, 255, 255);
                    box-shadow: rgba(101, 0, 94, 0.16) 0 0 0,
                    rgba(255, 255, 255, 1) 0 0 10px inset;
                }

                &::marker {
                    color: #85ea2d;
                }
            }

            #authentication {
                border-radius: var(--border-radius-big);
                background: rgba(255, 255, 255, 0.7);
                box-shadow: rgba(59, 59, 59, 0.3) 0 2px 12px;
                margin-top: 24px;
                margin-bottom: 12px;
                padding: 4px 24px 12px 24px;


                :is(blockquote) {
                    border-left: darkorange 6px dashed;
                    border-right: darkorange 6px dashed;
                }
            }
        }

        & blockquote {
            border-left: #0066ffAA 4px solid;
            border-right: #0066ffAA 4px solid;
            padding: 8px 20px 8px 20px;
            margin: 8px 20% 8px 20%;
            text-align: center;
            font-style: italic;
        }

        & blockquote > p {
            margin: 0 0 0 0 !important;
        }


        #auth-table-row {
            display: table-row;
            overflow: hidden;
        }

        #auth-table-cell-left {
            display: table-cell;
            padding: 0 16px 0 0;
            width: 50%;
        }

        #auth-table-cell-right {
            display: table-cell;
            padding: 0 0 0 16px;
            width: 50%;
        }

        #info-table-row {
            display: table-row;
            padding: 8px;
            table-layout: fixed;
        }

        #version-table-cell {
            display: table-cell;
            padding: 0 16px 0 16px;
            line-height: 16pt;
            width: 33%;

            & h2 {
                line-height: 20pt;
            }
        }

        #baseurl-table-cell {
            display: table-cell;
            padding: 0 16px 0 16px;
            line-height: 16pt;
            width: 33%;
        }

        #error-handling-table-cell {
            display: table-cell;
            padding: 0 16px 0 16px;
            line-height: 16pt;
            width: 33%;
        }

        #ui-text {
            color: #85ea2d;
            font-weight: 300;
        }

        #swagger-text {
            font-weight: 300;
        }

        #authorize-text {
            color: #fafafa;
            background-color: #49cc90;
            font-weight: bold;
            border-radius: var(--border-radius-big);
            padding: 4px 8px 4px 8px;
            margin-right: 2px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

            &:after {
                content: url(#locked);
            }
        }
    }

    .model-box {
        background: rgba(255, 255, 255, 0.4) !important;
        outline: none;
        border-radius: var(--border-radius-small);

        .model {
            & table {
                & tr {
                    line-height: 14pt;
                    border-bottom: rgba(0, 0, 0, 0.2) 1px dashed;

                    &.property-row {
                        .star {
                            margin-left: 8px;
                            font-size: 14pt;
                            position: relative;
                            top: 5px;
                        }

                        & td:first-child {
                            vertical-align: middle !important;
                        }
                    }

                    & p {
                        font-size: 10pt;
                        font-weight: bold;
                        font-family: monospace;
                        color: #5555AA;
                    }

                    & li {
                        line-height: 12pt;
                        font-size: 10pt;
                        font-weight: bold;
                        color: #3b3b77;
                    }
                }

                & tr:last-child {
                    border-bottom: none;
                }
            }

            .model-title {
                color: #5555AA !important;
            }

            .model-box-control {
                &:focus {
                    outline: none;
                }
            }

            .model-toggle {
                &:focus {
                    outline: none;
                }

                outline: none;
            }


        }
    }

    .markdown code, .renderedMarkdown code {
        padding: 2px 8px 2px 8px;
    }

    .no-margin {
        display: inline;
        border: none;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .opblock-summary-control {
        transition: all 450ms ease;

        &:focus {
            outline: none;
        }
    }

    .opblock {
        border: none;
        border-radius: var(--border-radius-big);
        box-shadow: none;

        & input {
            border-radius: var(--border-radius-small);
        }

        .btn-group {
            display: block;
            padding: 20px;
            text-align: right;

            .btn:last-child {
                margin-left: 10px;
                background: ghostwhite;
                color: #515151;
                font-size: 14pt;
                border: 1px solid #4990e2;
            }
        }


        .parameters-col_description {
            .renderedMarkdown p, .renderedMarkdown li {
                font-style: italic;
            }
        }

        .opblock-summary {
            border-radius: var(--border-radius-big);

            .copy-to-clipboard {
                display: none;
            }
        }

        &.is-open {
            border-radius: var(--border-radius-big);
            .opblock-summary {
                border-bottom: none;
            }
        }

        .opblock-summary-method {
            border-radius: var(--border-radius-big);
        }

        &.opblock-get {
            .opblock-summary-method {
                color: #fafafa;
                text-shadow: 1px 1px 10px rgba(15, 71, 176, 1);
                background-image: linear-gradient(
                        145deg,
                        #00f2fe 10%,
                        #61affe 75%);
            }
        }

        &.opblock-put {
            .opblock-summary-method {
                color: #fafafa;
                text-shadow: 0 0 10px rgba(136, 43, 134, 1);
                background-image: linear-gradient(
                        145deg,
                        #fa709a 10%,
                        #ffcc00 75%
                );
            }
        }

        &.opblock-post {
            .opblock-summary-method {
                color: #fafafa;
                text-shadow: 0 0 10px rgba(99, 141, 120, 1);
                background-image: linear-gradient(
                        145deg,
                        rgb(140, 225, 0) 10%,
                        rgb(73, 204, 144) 75%
                );
            }
        }

        &.opblock-patch {
            .opblock-summary-method {
                color: #fafafa;
                text-shadow: 0 0 5px rgb(4, 155, 45);
                background-image: linear-gradient(
                        145deg,
                        #43e97b 10%,
                        #50e3c2 75%
                );
            }
        }

        &.opblock-delete {
            .opblock-summary-method {
                color: #fafafa;
                text-shadow: 0 0 10px rgba(141, 30, 30, 1);
                background-image: linear-gradient(
                        145deg,
                        #ff6800 10%,
                        #ff0844 75%
                );
            }
        }
    }

    <!-- DROPDOWN MENUS/MUTIPLE SELECTS -->
    & select {
        border-radius: var(--border-radius-small);
        border: none !important;

        &:focus {
            outline: 2px solid #4990e2 !important;
        }
    }

    .opblock-body {
        & pre.microlight {
            border-radius: var(--border-radius-tiny);
            color: #383838;
            background: rgba(255, 255, 255, 0.7);
        }

        .download-contents {
            border-radius: var(--border-radius-tiny);
            color: ghostwhite;
            background: #49cc90;
        }


        & textarea {
            transition: outline 100ms cubic-bezier(0.8, 0.85, 0.95, 1),
            background 100ms cubic-bezier(0.9, 0.94, 0.97, 1);
            outline: 0 solid transparent;
            background: rgba(255, 255, 255, 0.7);

            &:focus {
                outline: 1px solid #4990e2;
                border: none;
            }
        }
    }

    .opblock-tag-section {
        border-radius: var(--border-radius-tiny);

    }

    .opblock-tag {
        border-radius:var(--border-radius-tiny);
        border-bottom: none;
        margin-top: 6px;
    }

    .scheme-container {
        background: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .tab {
        .tabitem {
            color: #d9d9d9;
            background: #777777;
            border-radius: var(--border-radius-big);
            padding: 0;
            margin-left: 12px;
            transition: box-shadow 350ms ease;

            &:hover {
                box-shadow: 0 0 8px rgba(0, 0, 0, .3);
                background: rgba(128, 145, 176, 0.7);
                color: #fafafa;
            }
        }

        :is(li) button.tablinks {
            padding: 4px;
            color: inherit;
            text-align: center;
            margin: 8px;
        }

        :is(li):first-of-type {
            padding: 0;

            &:after {
                display: none;
                padding-left: 0;
            }
        }

        .active {
            background: #4990e2;
            color: #fafafa;
            box-shadow: 0 0 8px rgba(0, 0, 0, .3);
            transition: background 350ms ease,
            color 350ms ease,
            box-shadow 500ms ease-in-out;

            &:hover {
                background: #9cb9e5;
                color: #fafafa;
                box-shadow: 0 0 8px rgba(0, 0, 0, .3);
            }
        }
    }

    .topbar {
        background: ghostwhite;
        transition: all 500ms ease;

        :is(img) {
            overflow: visible;
            width: 30%;
            height: 30%;
            padding: 12px;
            margin: 6px 0 0 0;
            background: white;
            border-radius: 33%;
            box-shadow: rgba(54, 54, 54, 0.16) 0 3px 6px,
            rgba(47, 47, 47, 0.23) 0 3px 6px;
            box-sizing: initial;
            z-index: 5;
        }

        .download-url-wrapper {
            .select-label {
                display: none;

                & span {
                    flex: 1;
                    font-size: 20px;
                    padding: 0 10px 0 0;
                    text-align: right;
                    color: #3d3d3d;
                }

                & select {
                    box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px, rgba(0, 0, 0, 0.24) 0 1px 2px;
                }
            }
        }
    }

    .prop-format {
        white-space: pre;
        color: #9012fe;
    }
}