:root {
    --primary-brand-color: #14C8BE;
    --primary-brand-R: 255;
    --primary-brand-G: 102;
    --primary-brand-B: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    word-break: keep-all;
}

.loader-body {
    background-color: white;
    font-family: 'Roboto', sans-serif;
}

img {
    max-width: 100%;
}

.loaderTimeout g:first-child g:first-child {
    display: none;
}

.loaderTimeout path {
    fill: var(--primary-brand-color);
    stroke: rgba(var(--primary-brand-R), var(--primary-brand-G), var(--primary-brand-B), 0.3);
}

.timeOutPage {
    background: linear-gradient(180.06deg, rgba(187, 181, 250, 0) 44.16%, rgba(197, 172, 233, 0.409457) 55.72%, #D3A0D0 69.38%, #EE7C71 84.99%) no-repeat 0 100px;
    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.timeOutPage .container {
    height: 300px;
    margin: 100px auto 0;
    padding: 60px 0 0 0;
    position: relative;
    width: 300px;
}

.timeOutPage .animation {
    align-items: center;
    display: flex;
    height: 300px;
    justify-content: center;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 300px;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.timeOutPage .image {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.timeOutPage .text-center {
    position: relative;
    text-align: center;
    z-index: 10;
}

.timeOutPage .text-center .text-xl {
    font-size: 1.25em;
}

.timeOutPage .text-center .text-xs {
    font-size: 0.75em;
}

.stroke-primary-brand-color {
    stroke: var(--primary-brand-color);
}