@import "variables.css";
.spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cFirst);
    z-index: 999999;
    /* width: 100px; */
}

path.elementor-shape-fill {
    fill: var(--cFirst);
}

#presalesSVGTitle {
    fill: var(--cBackground);
    font-family: var(--fFourth), sans-serif;
    font-size: 50px;
}

#presalesSVGSubTitle {
    fill: var(--cSecond);
    font-family: var(--fPrimary), sans-serif;
    transform: translateY(10px);
}

#svgAudi,
#svgAutoTrader,
#svgBMW {
    width: 100%;
    height: 100%;
}

.spinner {
    width: 60px;
    height: 60px;
    background-color: var(--cBackground);
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

#psSpinner {
    font-size: 40px;
    text-align: center;
    color: var(--cFirst);
    font-family: var(--fThird);
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(200px)
    }
    50% {
        -webkit-transform: perspective(200px) rotate(359deg)
    }
    100% {
        -webkit-transform: perspective(200px) rotate(359deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(200px) rotate(0deg);
        -webkit-transform: perspective(200px) rotate(0deg)
    }
    50% {
        transform: perspective(200px) rotate(-359.1deg);
        -webkit-transform: perspective(200px) rotate(-359.1deg)
    }
    100% {
        transform: perspective(200px) rotate(-359deg);
        -webkit-transform: perspective(200px) rotate(-359);
    }
}

#healthTitle,
#motorTitle {
    font-family: var(--fSecondary), sans-serif;
}

legend {
    width: max-content !Important;
    margin-left: 10px;
    text-transform: uppercase;
}

#presalesTitle {
    font-family: var(--fPrimary);
    color: var(--cFirst);
    text-align: center;
    padding-top: 20px;
    font-size: 100px;
    font-weight: 400;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    /* background-size: 200px; */
    background-size: 400px;
}

#psTPTitle,
#psLightTitle,
#psTitle,
#psAFTitle,
#psCPTitle,
#psPowerBITitle,
#psGPTitle {
    font-family: var(--fPrimary), sans-serif;
    font-weight: 600;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    background-size: 100px;
}


#presalesContainer {
    background: var(--cBackground);
}

#genasysG {
    font-family: sans-serif;
}

body {
    background-color: var(--cBackground) !important;
}

.fa,
.fas,
.swaggerTitle .productTitle,
.productCPTitle,
.productGPTitle,
.productAPTitle,
#genasysG {
    color: var(--cSecond);
}


#psGPTitle,
#psPowerBITitle,
#psAFTitle,
#psLightTitle {
    color: var(--cBackground)
}

#psTPTitle,
#psCPTitle,
#psTitle {
    color: var(--cFirst)
}

#portalContainer,
#thirdpartyContainer,
#customerportalContainer,
#buildContainer,
#BackOfficeContainer,
#powerBIContainer {
    justify-content: middle;
}

#thirdpartyContainer {
    padding-top: 20px;
}

#buildContainer,
#BackOfficeContainer,
#powerBIContainer {
    padding: 20px;
    justify-content: middle;
}
#presalesAFContainer,
#powerBIReportContainer {
    background-color: var(--cFirst);
}

#buildContainer {
    width: 380px;
}

#spinner,
#productContainer {
    width: 100px;
    height: 100px;
    margin: auto;
    vertical-align: middle;
    border-radius: 50px;
}

#spinner:hover {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    transition: 5s;
}

.fa,
.fas {
    padding-top: 12px;
}

.fas.fa-cogs,
.fas.fa-ship,
.fas.fa-person-booth,
.fas.fa-plane-departure {
    font-size: 60px;
    text-align: center;
    padding-top: 20px;
}

.fa.fa-heartbeat,
.fas.fa-business-time,
.fa.fa-car,
.fa.fa-home,
.fa.fa-lock,
.fa.fa-user,
.fas.fa-house-user,
.fas.fa-building,
.fas.fa-cross,
.fas.fa-hammer,
.fas.fa-hard-hat,
.fas.fa-dog,
.fas.fa-mail-bulk,
.fas.building,
.fas.fa-shield-alt,
.fas.fa-chart-area,
.fas.fa-handshake,
.fas.fa-recycle,
.fas.fa-money-bill-wave,
.fas.fa-users,
#genasysG {
    font-size: 70px;
    text-align: center;
}

#fasPortalWhite {
    color: white;
}

#fasPortalColour {
    background: -webkit-linear-gradient(var(--cThird), var(--cSecond));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#productContainer:hover #fasPortalWhite {
    color: var(--cThird);
    transition: 0.2s;
    transform-origin: bottom;
}

#productContainer:hover #fasPortalColour {
    background: -webkit-linear-gradient(var(--cFirst), var(--cBackground));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: 0.2s;
    transform-origin: bottom;
}

#psAFTitle,
#psLightTitle,
#psTitle {
    font-weight: 600;
}
#psTPTitle,
#psAFTitle,
#psLightTitle,
#psTitle,
.productTitle,
.swaggerTitle,
.productCPTitle,
.productGPTitle,
.productAPTitle {
    text-align: center;
    text-transform: uppercase;
}
#psPowerBITitle,
#psGPTitle,
#psCPTitle {
    text-align: center;
}

.productTitle,
.swaggerTitle,
.productCPTitle,
.productGPTitle,
.productAPTitle {
    font-size: 20px;
    padding-top: 10px;
}

.swaggerTitle {
    color: var(--cFirst);
}

.productTitle {
    color: var(--cBackground);
}

.productCPTitle,
.productGPTitle,
.productAPTitle {
    color: var(--cBackground);
}

.container {
    width: calc(100% - 30px);
    max-width: 1170px !important;
}
.presalesTPProductDescription,
.presalesPowerBIProductDescription,
.presalesCPProductDescription,
.presalesGPProductDescription,
.presalesLightProductDescription,
.presalesAFProductDescription,
.presalesProductDescription {
    text-align: center;
    font: var(--fSecondary);
    font-weight: 400;
}
.presalesTPProductDescription,
.presalesCPProductDescription {
	color: var(--cFirst);
	max-width: 400px;
	margin: auto;
}
.presalesPowerBIProductDescription,
.presalesLightProductDescription,
.presalesGPProductDescription,
.presalesAFProductDescription {
    color: var(--cBackground);
}

.presalesLightProductDescription {
    max-width: 400px;
    margin: auto;
}

.presalesAFProductDescription {
    max-width: 400px;
    margin: auto;
}

.presalesProductDescription {
    color: var(--cFirst);
    max-width: 400px;
    margin: auto;
}

#presalesCustomerPortalContainer,
#presalesTopContainer,
#presalesPortalContainer {
    display: flex;
    flex-wrap: wrap;
}

#presalesCustomerPortalContainer,
#presalesPortalContainer,
#widgetContainer,
#presalesAFContainer,
#swaggerContainer {
    padding-top: 100px;
}

#presalesPortalContainer,
#presalesCustomerPortalContainer,
#presalesTopContainer {
    justify-content: center;
}

#powerBIContainer,
#widgetContainer,
#presalesPortalContainer {
    background: var(--cFirst);
}

#presalesTopContainer {
    margin-left: 20%;
    margin-right: 20%;
}

.product-content,
.product-contentAF {
    display: flex;
    flex-wrap: wrap;
}

.product-content {
    justify-content: center;
}

.product-contentAF {
    justify-content: center;
}

.product-content>#productContainer,
.product-contentAF>#productContainer {
    margin: 20px;
    justify-content: center;
}

#genasysG {
    font-weight: 600;
}

#productContainer:hover {
    background-color: var(--cSecond);
    color: var(--cFirst);
    transition: 0.2s;
    transform-origin: bottom;
}

#pAudi,
#pAutoTrader,
#pBmw {
    fill: var(--cSecond);
}

#productContainer:hover #pAudi,
#productContainer:hover #pAutoTrader,
#productContainer:hover #pBmw {
    fill: var(--cFirst);
    background: var(cSecond);
}

#productContainer:hover .fa,
#productContainer:hover .fas {
    color: var(--cFirst);
    transition: 0.2s;
    transform-origin: bottom;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

#presalesDisclaimer {
    margin-top: 20px;
}

#presalesDisclaimerContainer {
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
    background-color: var(--cBackground);
    border: var(--cSecond);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    padding: 10px;
}

#presalesDisclaimerDetail {
    color: var(--cFirst);
    font-family: var(--fSecondary);
}

#presalesLink {
    color: var(--cSecond);
}

#fsAFProducts,
#fsProducts,
#fsCPProducts,
#fsGPProducts {
    border: solid !important;
    border-radius: 10px;
    border-color: var(--cSecond) !important;
    margin: auto;
    padding-bottom: 80px;
}

#fsGPProducts,
#fsGPProducts {
    color: var(--cFirst);
}

#fsAFProducts,
#fsProducts {
    color: var(--cBackground);
    max-width: max-content;
}

#lAFProducts. #lProducts,
#lSwagger,
#lCPProducts,
#lGPProducts,
#presalesDisclaimerTitle {
    font-family: var(--fPrimary);
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
    border: none;
    text-align: left;
    text-transform: uppercase;
}


#lSwagger {
    color: var(--cFirst) !important;
}
#lAFProducts,,
#lProducts {
    color: var(--cBackground) !important;
}

#lCPProducts,
#lGPProducts {
    color: var(--cBackground) !important;
}

#presalesDisclaimerTitle {
    color: var(--cSecond) !important;
}

.productTitleUC {
    text-align: center;
}