body {
    background-color: white !important;
}

body, div, span, select, h1, h2, h3, h4, h5, h6, p {
    font-family: 'Roboto', 'Segoe UI' !important;
}

h1, h2, h3 {
    color: #0052cc !important;
}

.swagger-ui .info .title {
    font-size: 30px !important;
}

.swagger-ui .info .title small.version-stamp {
    background-color: #1974d3 !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.swagger-ui .info pre {
    font-size: 10px !important
}

.arrow {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
}



.swagger-ui .opblock {
    border-radius: 0px !important;
    margin-bottom: 5px !important;
}

.swagger-ui .info {
    margin: 40px 0px 30px 0px !important;
}

.opblock-summary-control {
    outline: none !important;
}

/* SWAGGER LOGO */
.swagger-ui img {
    content: url('/Images/Logos/LayerLogo.png');
    height: 42px !important;
    width: auto !important;
    display: inline !important;
    filter: brightness(0) invert(1);
    margin-top: -6px
}

img:before {
    content: "Joe's Task: ";
}

/* CONTROLLER TITLE */
.swagger-ui .opblock-tag {
    border: 1px solid rgba(59,65,81,.3) !important;
    font-size: 18px !important;
    padding-right: 1px !important;
    margin-top: 35px !important;
    background-color: #d9d9d9 !important;
}

.swagger-ui .opblock-tag-section.is-open > .opblock-tag {
    background-color: #f1f1f1 !important;
}

.swagger-ui .opblock-tag > a {
    color: #424242 !important;
}

/* ENDPOINT LABEL */
.swagger-ui .opblock .opblock-summary-path {
    font-weight: 500 !important;
    font-size: 15px !important;
    width: calc(100% - 110px) !important;
    max-width: none !important;
}

/* BUTTONS (GET, PUT, POST, DELETE) */
.swagger-ui .opblock-summary-method {
    border-radius: 0px !important;
    font-size: 12px !important;
    line-height: 24px !important;
}

/* BUTTON GET */
.swagger-ui .opblock.opblock-get .opblock-summary {
    background-color: #fff; /*#e6f3ff*/
}
.swagger-ui .opblock.opblock-get .opblock-summary-method {
    background-color: #0052cc;
}

/* BUTTON PUT */
.swagger-ui .opblock.opblock-put .opblock-summary {
    background-color: #fff; /*#fff3e6*/
}
.swagger-ui .opblock.opblock-put .opblock-summary-method {
    background-color: #ff3300 !important;
}

/* BUTTON POST */
.swagger-ui .opblock.opblock-post .opblock-summary {
    background-color: #fff; /*#ebfaf3*/
}
.swagger-ui .opblock.opblock-post .opblock-summary-method {
    background-color: #16703c !important;
}

/* BUTTON DELETE */
.swagger-ui .opblock.opblock-delete .opblock-summary {
    background-color: #fff; /*#ffcccc*/
}
.swagger-ui .opblock.opblock-delete .opblock-summary-method {
    background-color: #de0a18 !important;
}

.swagger-ui .opblock.opblock-get,
.swagger-ui .opblock.opblock-post,
.swagger-ui .opblock.opblock-put,
.swagger-ui .opblock.opblock-delete {
    border-color: #dfdfdf !important;
    box-shadow: none !important;
}

/* BUTTON EXECUTE*/
.swagger-ui .btn.execute {
    background-color: #1974d3 !important;
    width: 200px !important;
    border-color: #1974d3 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.swagger-ui .topbar {
    height: 59px !important;
}

/* DROPDOWN NAVBAR DEFINITION */
.swagger-ui .topbar .download-url-wrapper .select-label select {
    background-color: #0052cc !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.swagger-ui .topbar .download-url-wrapper {
    display: none;
}

/* CLIPBOARD BUTTON */
.swagger-ui .copy-to-clipboard {
    background: #1974d3 !important;
    height: 30px !important;
    width: 30px !important;
    bottom: 10px !important;
}

/* DOWNLOAD-CONTENT BUTTON */
.swagger-ui .download-contents {
    padding: 5px 10px;
    font-size: 11px !important;
    font-weight: 500 !important;
    background-color: #ff3300 !important;
    text-transform: uppercase !important;
}


.swagger-ui .copy-to-clipboard button {
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/> </svg>') 50% no-repeat
}


.swagger-ui select {
    appearance: none !important;
    background: none !important;
    font-weight: 500 !important;
}

.swagger-ui .topbar .download-url-wrapper .select-label span {
    font-weight: 500 !important;
    font-size: 12px !important;
}

/* SWAGGER TOPBAR */
.topbar {
    background-color: #003a66 !important;
    padding: 15px 0px !important;
    height: 59px !important;
}

/* SWAGGER NAVBAR CUSTOM */
.sidebar {
    margin: 0;
    padding: 0;
    width: 260px;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
    transition: all 0.2s ease-in !important;
}

    /* Sidebar links */
    .sidebar a {
        display: block;
        color: black;
        font-size: 15px;
        padding: 19px 20px 20px 18px;
        text-decoration: none;
        font-weight: 500;
        border-bottom: 1px solid white !important;
    }

        /* Active/current link */
        .sidebar a.active {
            background-color: #002b4d;
            color: white;
        }

        /* Links on mouse-over */
        .sidebar a:hover:not(.active) {
            background-color: #555;
            color: white;
        }

    .sidebar a > img {
        height: 24px;
        float: left;
        margin-right: 6px;
    }

#swagger-ui {
    margin-left: 260px;
    height: auto;
    transition: all 0.2s ease-in !important;
}


table:not(.live-responses-table, .parameters) {
    /*background-color: #dfdfdf !important;*/
    opacity: 0.3 !important;
}

.swagger-ui .response-col_links {
    display: table-cell;
}

.response-col_status {
    font-size: 24px !important;
    padding-top: 20px !important;
}

.col_header.response-col_status {
    font-size: 12px !important;
    padding-top: 10px !important;
}
 h4 {
     font-size: 14px !important;
     font-weight: 500 !important;
     margin: 15px 0px !important;
}

.swagger-ui .response-control-media-type--accept-controller select {
    border: 1px solid #3b4151 !important;
    box-shadow: none !important;
    height: 36px !important;
    border-radius: 0px !important;
}

.microlight {
    background-color: #212121 !important;
    border-radius: 0px !important;
}

.microlight span {
    font-weight: 400 !important;
    font-family: Verdana !important;
}

.authorization__btn {
    opacity: 1 !important;
}

#unlocked path {
    fill: #ff0000 !important;
}

#locked path {
    fill: #16703c !important;
}


#layout-loading {
    position: fixed;
    top: 60px;
    left: 260px !important;
    height: 100vh;
    width: calc(100vw - 260px) !important;
    background-color: white;
    opacity: 1;
    z-index: 2;
    transition: all 0.2s !important;
}

.information-container {
    position: relative;
}

/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Michael Vieth
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */
/* EXTRALARGE */
@media all and (min-width: 1025px) and (max-width: 1280px) {
    #layout-loading {
        top: 60px;
        left: 260px !important;
        height: 100vh;
        width: calc(100vw - 260px) !important;
    }
}

/* LARGE */
@media all and (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }
    #swagger-ui {
        margin-left: 220px;
    }
    .download-url-wrapper {
        display: none !important;
    }
    .swagger-ui .response-col_links {
        display: none;
    }

    #layout-loading {
        top: 60px;
        left: 220px !important;
        height: 100vh;
        width: calc(100vw - 220px) !important;
    }
}

/* MEDIUM */
@media all and (min-width: 480px) and (max-width: 768px) {
    .sidebar {
        display: none;
    }
    #swagger-ui {
        margin-left: 0px;
    }
    .download-url-wrapper {
        display: none !important;
    }
    .swagger-ui .response-col_links {
        display: none;
    }

    #layout-loading {
        top: 60px;
        left: 0px !important;
        height: 100vh;
        width: calc(100vw - 0px) !important;
    }
}

/* SMALL */
@media all and (max-width: 480px) {
    .sidebar {
        display: none;
    }
    #swagger-ui {
        margin-left: 0px;
    }
    .download-url-wrapper {
        display: none !important;
    }
    .swagger-ui .response-col_links {
        display: none;
    }

    #layout-loading {
        top: 60px;
        left: 0px !important;
        height: 100vh;
        width: calc(100vw - 0px) !important;
    }
}


/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */
    #layout-loading {
        top: 60px;
        left: 0px;
        height: 100vh;
        width: calc(100vw - 0px);
    }
}
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */
    #layout-loading {
        top: 60px;
        left: 0px;
        height: 100vh;
        width: calc(100vw - 0px);
    }
}