@import url(./more-custom.css);
@import url(./font.css);
body.darkmode--activated .left-menu ,body.darkmode--activated .loader img ,body.darkmode--activated .MuiButton-containedPrimary {
    mix-blend-mode: difference;
}
 

header#appBar img {
    mix-blend-mode: unset !important;
}
body.darkmode--activated header#appBar .MuiInputBase-root{

    background: #000000 !important;
    color: white;
    border-radius:0!important;
}
body.darkmode--activated header#appBar .MuiNativeSelect-select:not([multiple]) option, .MuiNativeSelect-select:not([multiple]) optgroup {
    background-color: #000000;
}
/* dev portal css */
footer#footer {
    color: gray !important;
    display: flex !important;
    background: #e6e6e6 !important;
    align-items: center !important;
    padding-left: 24px !important;
}

.hidden {
    display: none !important;
    /* visibility: hidden!important; */
}

.divider.hidden {
    display: block !important;
}

.MuiDrawer-paperAnchorLeft {
    background-color: #f1592b !important;
}

.g-recaptcha {
    margin-top: 10px;
}

.hidden-loki {
    display: none !important;
}

@font-face {
    font-family: "SAP-icons";
    src: url("../fonts/Sap/SAP-icons.woff2") format("woff2"), url("../fonts/Sap/SAP-icons.woff") format("woff"), url("../fonts/Sap/SAP-icons.ttf") format("truetype"), local("SAP-icons");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "72";
    font-style: normal;
    font-weight: 400;
    src: local("72"), url("../fonts/Sap/72-Regular.woff2") format("woff2"), url("../fonts/Sap/72-Regular.woff") format("woff");
}

@font-face {
    font-family: "72";
    font-style: normal;
    font-weight: 700;
    src: local("72-Bold"), url("../fonts/Sap/72-Bold.woff2") format("woff2"), url("../fonts/Sap/72-Bold.woff") format("woff");
}

.loader {
    position: fixed;
    width: 500px;
    height: 200px;
    left: calc(50vw - 250px);
    top: calc(50vh - 100px);
    overflow: hidden;
    text-align: center;
}

.loader .image-loading {
    width: 250;
    margin: auto;
    height: 50px;
    margin-bottom: 16px;
    background-image: url("./logo_long.png");
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: relative;
    left: -20px;
}

.loader span {
    position: relative;
    left: -12px;
}

.apim-dual-ring {
    width: 16px;
    margin: auto;
    height: 16px;
    position: relative;
    left: -32px;
    border-radius: 50%;
    color: #f14140;
    background: currentColor;
    box-shadow: 32px 0, -32px 0, 64px 0;
}

.apim-dual-ring::after {
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background: #f05107;
    animation: move 3s linear infinite alternate;
}

@keyframes move {

    0%,
    5% {
        left: -32px;
        width: 16px;
    }

    15%,
    20% {
        left: -32px;
        width: 48px;
    }

    30%,
    35% {
        left: 0px;
        width: 16px;
    }

    45%,
    50% {
        left: 0px;
        width: 48px;
    }

    60%,
    65% {
        left: 32px;
        width: 16px;
    }

    75%,
    80% {
        left: 32px;
        width: 48px;
    }

    95%,
    100% {
        left: 64px;
        width: 16px;
    }
}

.slideContentTitle span {
    background: #f05107;
    color: rgb(255, 255, 255);
}

.image-load-frame {
    background: #efefef;
    width: 100%;
    height: 145px;
    position: relative;
}

div.image-load-animation1 {
    width: 40px;
    height: 145px;
    background-color: #efefef;
    position: absolute;
    -webkit-animation-name: image-load-animation1;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;
    /* Safari 4.0 - 8.0 */
    animation-name: image-load-animation1;
    animation-duration: 2s;
    animation-iteration-count: 2;
}

div.image-load-animation2 {
    width: 40px;
    height: 145px;
    background-color: #efefef;
    position: absolute;
    -webkit-animation-name: image-load-animation2;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;
    /* Safari 4.0 - 8.0 */
    animation-name: image-load-animation2;
    animation-duration: 2s;
    animation-iteration-count: 2;
}

/* Standard syntax */
@keyframes image-load-animation1 {
    0% {
        background-color: #efefef;
        left: 0px;
        top: 0px;
    }

    70% {
        background-color: #e3e3e3;
        left: 160px;
        top: 0px;
    }

    100% {
        background-color: #efefef;
        left: 0px;
        top: 0px;
    }
}

@keyframes image-load-animation2 {
    0% {
        background-color: #efefef;
        left: 100px;
        top: 0px;
    }

    75% {
        background-color: #e3e3e3;
        left: 160px;
        top: 0px;
    }

    100% {
        background-color: #efefef;
        left: 0px;
        top: 0px;
    }
}

body {
    margin: 0;
    height: 100%;
}

a {
    text-decoration: none;
}

/* Hiding models section in swagger console */
.wrapper section.models {
    display: none;
}

/* Static style for graphql-explorer library */
.graphiql-explorer-root {
    max-height: 750px;
    overflow-y: scroll;
}

/* Swagger UI overides */
.swagger-ui .opblock .opblock-summary-method {
    color: #29292d !important;
}

.swagger-ui .opblock-delete .opblock-summary-method {
    color: #000 !important;
}

body header.MuiAppBar-root#appBar {
    background: #f14140;
    background: url(./background_header.png) no-repeat left center, linear-gradient(45deg, #f1592b, #f1592b) !important;
    border-bottom: none;
    box-shadow: none !important;
}

[class*="MuiInputBase-root"] {
    border-radius: 4px !important;
}

[class*="MuiIconButton-root"]:hover {
    border-radius: 4px !important;
}

p.margin-bottom-double {
    margin-bottom: 8px;
}

*:not(.material-icons) {
    font-family: 'Loki Sans', Arial, Helvetica, sans-serif !important;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #f5f5f5;
    position: absolute;
    border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: #333333;
    border-radius: 5px;
}

/* 
nav.left-menu {
    top: 37px;
    height: 43px;
    padding-left: 5px;
} */

nav.left-menu>div:last-child {
    display: none;
}

nav.left-menu>a:first-child {
    height: 40px;
    width: 150px;
}

nav.left-menu>a:first-child>svg {
    height: 24px;
}

nav.left-menu>a:first-child>p {
    font-size: 13px;
    padding: 0;
    position: relative;
    top: 3px;
}

body.embedded header,
body.embedded footer,
body.embedded .api-listing-left-menu-hidden {
    display: none;
}

a.header-item {
    font-family: 'Loki Sans', Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    color: white;
    font-size: 21px;
    font-weight: bolder;
    position: relative;
}

a.header-item span {
    background: #f14140;
    font-size: 12px;
    position: absolute;
    left: 39px;
    border-radius: 5px;
    bottom: -1px;
    padding: 2px 7px;
}

.min-dialog {
    min-width: 500px;
}

.leftLInk {
    border-left: 9px solid transparent;
}

.selected.leftLInk {
    border-left: 9px solid #f1592a;
}

.header-menu-icon path {
    fill: white;
}

.header-menu-icon circle {
    stroke: white
}

.search-tips-icon path {
    fill: white;
}