html,
html body {
    height: 100%;
    min-height: 100%    
}

html {
    overflow: hidden;
}

html body {
    /*background: #EAF6FB url(../../assets/images/bg.svg) no-repeat center center;*/
    background: #fff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover
}

.app-loading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.app-loading .logo {
    width: 140px;
    height: 140px;
    background: var(--log-url) center center no-repeat;
    opacity: 0.8;
    background-size: var(--loaderSize);
    background-position: 52%;
    -webkit-animation: logoStart 2.5s;
    animation: logoStart 2.5s;
}

@-webkit-keyframes logoStart {
    0% {transform: rotate(0deg);}
    15% {transform: rotate(0deg);}
    50% {transform: rotate(392deg);}
    80% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@-moz-keyframes logoStart {
    0% {transform: rotate(0deg);}
    15% {transform: rotate(0deg);}
    50% {transform: rotate(392deg);}
    80% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@-o-keyframes logoStart {
    0% {transform: rotate(0deg);}
    15% {transform: rotate(0deg);}
    50% {transform: rotate(392deg);}
    80% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@keyframes logoStart {
    0% {transform: rotate(0deg);}
    15% {transform: rotate(0deg);}

    /*45% {transform: rotate(0deg);}*/

    50% {transform: rotate(392deg);}

    /*60% {transform: rotate(360deg);}*/

    /*75% {transform: rotate(360deg);}*/

    80% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

.app-loading .caption-holder {
    position: relative;
    text-align: center;
}

.app-loading .caption {
    position: absolute;
    left: -69px;
    width: 139px;
}




.demo-animation {
    width: 100px;
    height: 102px;
    border-radius: 100%;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

.demo-animation .circle {
    width: 100%;
    height: 100%;
    position: absolute;
}
.demo-animation .circle .inner {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid rgba(16, 64, 82, 0.7);;/*rgba(0, 255, 170, 0.7);*/
    border-right: none;
    border-top: none;
    backgroudn-clip: padding;
    box-shadow: inset 0px 0px 10px rgba(0, 174, 239, 0.15);/*rgba(0, 255, 170, 0.15);*/
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.demo-animation .circle:nth-of-type(0) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.demo-animation .circle:nth-of-type(0) .inner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.demo-animation .circle:nth-of-type(1) {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
}
.demo-animation .circle:nth-of-type(1) .inner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.demo-animation .circle:nth-of-type(2) {
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
}
.demo-animation .circle:nth-of-type(2) .inner {
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

.demo-animation {
    -webkit-animation: spin 5s infinite linear;
    animation: spin 5s infinite linear;
}
/*************************responsive css shadabi*******************************/
@media only screen and (max-width: 850px) {
    html body {
        background: #fff !important;
    }
}