.survey {
    background-image: url("/Images/survey/survey1.jpeg"); /* The image used */
    background-color: white; /* Used if the image is unavailable */
    height: 100%; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}


.home-new {
    background-image: url("/Images/home/home-new2.png"); 
    background-color: white; /* Used if the image is unavailable */
    height: 100%; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
a.active {
    color: darkorange !important;
}


a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}


.announ-img-max-height {
    max-height: 200px;
}

.app-menu-height {
    height:90px;
}


.bg-semi-transparent{
    opacity: 0.8;
}

.bg-black{
    background: black;
}


.blog-index {
    transition: ease-in-out 0.5s;
}

    .blog-index:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: ease-in-out 0.5s;
    }

.single-post {
    transition: ease-in-out 0.5s;
}

    .single-post:hover {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: ease-in-out 0.5s;
    }

/* Blog Single CSS */
.blog-single {
    background: #fff;
    padding: 70px 0 100px;
}

    .blog-single .blog-single-main {
        margin-top: 30px;
        background: #fff;
    }

    .blog-single .blog-detail {
        background: #f7f7f7;
    }

    .blog-single .image {
        position: relative;
    }

        .blog-single .image img {
            width: 100%;
            height: 100%;
        }

    .blog-single .blog-title {
        font-size: 24px;
        font-weight: 600;
        text-transform: capitalize;
        margin: -2px 0 15px 0;
    }

    .blog-single .blog-meta {
        margin-bottom: 0;
        overflow: hidden;
        padding-bottom: 10px;
        margin-bottom: 0px;
    }

        .blog-single .blog-meta .author i {
            color: #F7941D;
            margin-right: 10px;
            font-size: 13px;
        }

        .blog-single .blog-meta .author a {
            font-size: 13px;
            border-right: 1px solid #ddd;
            padding: 0px 15px;
        }

            .blog-single .blog-meta .author a:first-child {
                padding-left: 0;
            }

            .blog-single .blog-meta .author a:last-child {
                padding-right: 0;
                border: none;
            }

        .blog-single .blog-meta span {
            display: inline-block;
            font-size: 14px;
            color: #666;
        }

            .blog-single .blog-meta span a i {
                margin-right: 10px;
                color: #F7941D;
            }

            .blog-single .blog-meta span a:hover {
                color: #F7941D;
            }

    .blog-single .content p {
        margin-bottom: 25px;
        line-height: 26px;
    }

        .blog-single .content p:last-child {
            margin: 0;
        }

    .blog-single blockquote {
        position: relative;
        font-size: 13px;
        font-weight: 400;
        padding-left: 20px;
        padding: 10px 20px;
        background: #F6F6F6;
        padding: 30px 40px 30px 70px;
        color: #555;
        border: none;
        margin-bottom: 25px;
        border-left: 3px solid #F7941D;
    }

        .blog-single blockquote i {
            font-size: 30px;
            color: #F7941D;
            position: absolute;
            left: 20px;
            top: 20px;
        }

    .blog-single .content .img-post {
        margin-bottom: 25px;
    }

    .blog-single .share-social .content-tags {
        position: relative;
        margin-top: 25px;
    }

        .blog-single .share-social .content-tags h4 {
            position: absolute;
            left: 0;
            top: 7px;
            font-size: 15px;
            font-weight: 500;
        }

        .blog-single .share-social .content-tags .tag-inner {
            padding-left: 60px;
        }

            .blog-single .share-social .content-tags .tag-inner li {
                display: inline-block;
                margin-right: 7px;
                margin-bottom: 10px;
                margin-top: 4px;
            }

                .blog-single .share-social .content-tags .tag-inner li:last-child {
                    margin-right: 0px;
                    margin-bottom: 0px;
                }

                .blog-single .share-social .content-tags .tag-inner li a {
                    border-radius: 30px;
                    padding: 5px 15px;
                    background: #f4f7fc;
                    font-size: 13px;
                }

                    .blog-single .share-social .content-tags .tag-inner li a:hover {
                        color: #fff;
                        background: #F7941D;
                    }




body {
    font-family: 'Roboto', sans-serif;
    font-display: swap;
    overflow-x: hidden;
    /*    font-family: 'Source Sans Pro', sans-serif;*/
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.btn-default{
    background-color:lightgray;
}

.btn-lightgrey {
    background-color: lightgrey;
}

.bg-lightgrey {
    background: #eeeeee;
}
.carousel-picture-height {
    height: 500px;
}

.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
}


.centered {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centered-home {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 75%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

/*
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);*/
}

.container-1000 {
    width: 1000px;
}

.content {
    margin-left: 75px;
    font-size: 30px;
}

.container-iframe {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 62.5%; /* 1:1 Aspect Ratio */
}
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.child1 {
    position: relative;
    width: 100%;
    opacity: 0;
    animation: fadeIn 4s .2s forwards;
}

/*Cookie consent stuff -----------------------------------------------------*/
.cookie-container {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #2f3640;
    color: #f5f6fa;
    padding: 0 32px;
    box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);
    transition: 400ms;
    z-index:5;
}

    .cookie-container.active {
        bottom: 0;
    }

    .cookie-container a {
        color: #f5f6fa;
    }

.cookie-btn {
    /*background: blue;*/
    border: 0;
    /*color: white;*/
    padding: 12px 48px;
    font-size: 18px;
    margin-bottom: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.cookie-deny-btn {
    /*background: blue;*/
    border: 0;
    /*color: white;*/
    padding: 12px 48px;
    font-size: 18px;
    margin-bottom: 16px;
    border-radius: 5px;
    cursor: pointer;
}
/*Cookie consent stuff -----------------------------------------------------*/


/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

#expert{
    width: 100%;
}



/*#region formCenter ------------------------------------------------------------ */
.formCenter {
    margin: auto;
    position: absolute;
    top: 200px;
    left: 0;
    bottom: 0;
    right: 0;
}

    .formCenter.formChange {
        min-width: 300px;
        max-width: 500px;
        padding: 50px;
    }

#loginForm .input-group {
    margin: 20px 0;
}

@media (max-width: 768px) {
    .formCenter.formChange {
        width: 100%;
    }
}
/*#endregion */

.FixedHeader {
    position: absolute;
    font-weight: bold;
}

/* to freeze column cells and its respective header*/
.FrozenCell {
    position: relative;
    cursor: default;
    left: expression(document.getElementById("gvEvents").scrollLeft-2);
}

/* for freezing column header*/
.FrozenHeader {
    position: relative;
    cursor: default;
    top: expression(document.getElementById("gvEvents").scrollTop-2);
    z-index: 10;
}

/*for the locked columns header to stay on top*/
.FrozenHeader.locked {
    z-index: 99;
}


.fs-small{
    font-size: small;
}

.full-screen-width {
/*    height:400px;*/
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    width: 100vw;
    height:375px;
}

.full-screen-width-mobile {
    /*    height:400px;*/
/*    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;*/
    max-width: 100vw;
    width: 100vw;
/*    height: 200px;*/
}

.greyscale {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


home-mov {
    position: relative;
    background-color: black;
    height: 100vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

    home-mov video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 75%;
        width: auto;
        height: auto;
        z-index: 0;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

    home-mov .ontop {
        position: relative;
        z-index: 2;
    }

    home-mov .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: .9;
        z-index: 3;
    }





@media (max-device-width: 600px) {
    .employee-mobile {
        text-align: center !important;
    }
}



.hidden {
    display: none;
}

.hiringnow {
    background-color: #004c97; /* Used if the image is unavailable */
}


.home-card {
    background-color: transparent;
}

.home-image {
    background-image: url("../images/12.jpg"); /* The image used */
    background-color: white; /* Used if the image is unavailable */
    height: 800px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

html {
    font-size: 15px;
}


iframe.enphase {
    width: 50%;
    height: 600px;
} 

    .samerow > div {
/*        width: 300px;*/
/*        background: red;
        border: 3px solid white;
        height: 20px;*/
        display: inline-block;
    }

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 0.9
    }
}


.logos {
    max-height: 100px;
}

.logo-header-height {
    max-height: 60px;
}

.logo-height {
    max-height: 60px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}



.min-vh-50 {
    min-height: 50vh;
}
.min-vh-75 {
    min-height: 75vh;
}


.msNav-1 {
    margin-left: -.75rem !important;
}



.mud-expand-panel, .muudstrap-navbar-expand {
    color: var(--mud-palette-appbar-text);
    background-color: var(--mud-palette-appbar-background);
}

.mud-expand-panel-text {
    font-size: 1.7rem;
}

.mud-icon-button {
    color: orange;
}

.mud-icon-root.mud-svg-icon {
    fill: currentColor;
    /*    fill: #004c97;*/
}

/*.mud-icon-root.mud-svg-icon {
    fill: orange;
}*/

.muudstrap-navbar .mud-button {
    text-transform: none;
}

.muudstrap-navbar .mud-expand-panel-header {
    padding: 0px;
    width: 100%;
    height: 100%;
    flex: none;
}


.mud-tab {
    color: White !important;
    background-color: #004c97;
    width: 500px;
    height: 130px;
    padding-bottom: 0px;
}

    .mud-tab.mud-tab-active {
        color: white !important;
        background-color: lightgray;
        /*    background-color: #2196f3;*/
        width: 500px;
        height: 130px;
        padding-bottom: 0px;
    }

.mud-tabs-toolbar {
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
}

/*
.mud-tooltip-root {
    color: Black !important;
    background-color: lightgray;
        background-color: #2196f3;
    width: 500px;
    height: 130px;
    padding-bottom: 0px;
}*/


.mud-tab-slider {
    position: absolute;
    background: none !important;
}

/*.mud-icon-root.mud-svg-icon {
    fill: orange;
}*/

.mud-custom-treeview-item .mud-icon-root .mud-svg-icon {
    fill: orange;
}

.mud-custom-treeview-item .mud-checkbox svg {
    font-size: 2.25rem;
}



.navbarOpacity {
    opacity: 0.5;
}



.error-image {
    background-image: url("../images/error.jpg"); /* The image used */
    background-color: white; /* Used if the image is unavailable */
    height: 500px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

.on-top {
    z-index: 3;
}



.overlay-grad-semi-trans {
    background-image: linear-gradient(78deg,rgba(1,58,97,.8) 35%,rgba(1,58,97,.2) 65%)
}

.centered-left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.container-fluid {
    padding: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");
    /* Set a specific height */
    min-height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.remove-padding{
    padding: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.scroll-container {
    overflow: auto;
    background-color: beige;
    height: 180px;
}


.solaron-bc-grey {
    background-color: #A6A6A6;
}

.solaron-bc-darkgrey {
    background-color: #666666;
}


.solaron-bc-lightgrey {
    /*    background-color: #b3b3b3;*/
    background-color: #f2f2f2;
}


.solaron-bc-lightblue {
    background-color: #A2D4F2;
}

.solaron-bc-darkblue {
    background-color: #084f8c;
}

.solaron-bc-orange {
    background-color: #F27405;
}
.solaron-bc-yellow {
    background-color: yellow;
}

.solaron-fc-platinum {
    color: #E5E4E2;
}

.solaron-fc-lightblue {
    color: #A2D4F2;
}

.solaron-fc-darkblue {
    color: #084f8c;
}

.solaron-fc-orange {
    color: #F27405;
}
.solaron-fc-yellow {
    color: yellow;
}
.solaron-fc-red {
    color: #ff3351;

    
}
.solaron-fc-darkgrey {
    color: #666666;
}


.solaron-logo-sun {
    background-image: url("/Images/logos/solaron-sun-bnw-2.png"); /* The image used */
    background-color: white; /* Used if the image is unavailable */
    height: 100%; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}



.solaron-grad1 {
/*background-color: #f27405;
background-image: linear-gradient(0deg, #f27405 0%, #fcfcc3 50%, #ffffff 95%, #ffffff 99%);
*/

background-color: #ffffff;
background-image: linear-gradient(0deg, #ffffff 0%, #fcfcc3 10%, #f27405 29%, #f27405 71%, #fcfcc3 88%, #ffffff 100%);

}
.solaron-grad-orange {
    background: linear-gradient(180deg, #ffffff, #fff2e9, #ffe6d4, #ffd9be, #ffcca9, #ffc095, #ffb380, #ffa76b, #ff9a56);
   /* background: linear-gradient(180deg, #ffffff, #fff2e9, #ffe6d4, #ffd9be, #ffcca9, #ffc095, #ffb380, #ffa76b, #ff9a56, #fb8e41, #f78129, #f27405);*/
    /*  background: linear-gradient(180deg, #ffffff, #fbf6ed, #f6eddb, #f1e3c9, #ecdab7, #e7d2a6, #e1c995, #dbc083, #d5b772, #ceaf61, #c7a64f, #c09e3d);*/
}

.solaron-grad-yellow {
    background: linear-gradient(180deg, #ffffff, #fffffe, #fffffa, #fefef4, #fefeed, #fefee5, #fdfddd, #fdfdd5, #fdfdce, #fcfcc8, #fcfcc4, #fcfcc3);
}


.solaron-grad2 {
   /* background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,252,186,1) 17%, rgba(255,196,110,1) 64%, rgba(247,147,46,1) 100%);*/
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,252,186,1) 100%, rgba(255,196,110,1) 100%, rgba(247,147,46,1) 100%);
    /*background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 35%, #  80%);*/
    /*    background: linear-gradient(180deg, rgba(255,255,255,1) 35%, #fcfcc3 80%, #fcfcc3 99%);*/
    /* background: linear-gradient(180deg, rgba(255,255,255,1) 22%, #f6d365 59%, #f27405 99%);*/
}



.solaron-header-img {
    position: relative;
}

.solaron-header-txt {
    position: absolute;
    top: 17px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.solaron-survey-grad {
    background-image: linear-gradient(to right, #F09819 0%, #EDDE5D 51%, #F09819 100%);
    margin: 10px;
    width: fit-content;
    padding: 5px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #084f8c;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 20px #eee;
    border-radius: 0px;
    display: block;
}

    .solaron-survey-grad:hover {
        background-position: right center; /* change the direction of the change here */
        color: #084f8c;
        text-decoration: none;
    }

.solaron-call-grad {
    position:relative;
    background-image: linear-gradient(to right, #F09819 0%, #EDDE5D 51%, #F09819 100%);
    margin: 10px;
    width: fit-content;
    padding: 5px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #084f8c;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 0 20px #eee;
    border-radius: 0px;
    display: block;
}

.solaron-call-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #084f8c;
    text-decoration: none;
}

.solaron-btn1-grad {
    background-image: linear-gradient(to right, #F09819 0%, #EDDE5D 51%, #F09819 100%);
    margin: 10px;
    width: fit-content;
    padding: 10px 40px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #084f8c;
    font-weight:700;
    font-size: 1.1rem;
    box-shadow: 0 0 20px #eee;
    border-radius: 0px;
    display: block;
}

    .solaron-btn1-grad:hover {
        background-position: right center; /* change the direction of the change here */
        color: #084f8c;
        text-decoration: none;
    }

.solaron-btn2-grad {
    background-image: linear-gradient(to right, #F09819 0%, #EDDE5D 51%, #F09819 100%);
    margin: 10px;
    width: fit-content;
    padding: 15px 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #084f8c;
      font-weight:700;
    font-size: .75rem;
    box-shadow: 0 0 20px #eee;
    border-radius: 0px;
    display: block;
}

    .solaron-btn2-grad:hover {
        background-position: right center; /* change the direction of the change here */
        color: #084f8c;
        text-decoration: none;
    }



    .solaron-above-the-sky{
background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
    }

.solaron-sunny-morning {
    background-image: linear-gradient(120deg, #f6d365 0%, #F27405 100%);
    border-radius: 100% 0% 100% 0% / 0% 53% 47% 100%;
}



.solaron-bg-grad {
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
    background: linear-gradient(-45deg, white, #ff3351, #F7941D, #f6d365, white);
    /*background: linear-gradient(-45deg, white, #F7941D, #f6d365, white);*/
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    /*    height: 100vh;*/
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



.vertical-align-expanding-div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


/*#region Social media side bar-----------------------------------------------------*/
.icon-bar {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .icon-bar a {
        display: block;
        text-align: center;
        padding: 6px;
        transition: all 0.3s ease;
        color: white;
        font-size: 20px;
    }

        .icon-bar a:hover {
            background-color: #000;
        }

.facebook {
    background: #004c97;
    color: white;
}

.twitter {
    background: #004c97;
    color: white;
}

.google {
    background: #004c97;
    color: white;
}

.linkedin {
    background: #004c97;
    color: white;
}

.youtube {
    background: #004c97;
    color: white;
}

/*#endregion */



.samerow {
    white-space: nowrap;
}


.sol-bg-dark-blue{
    background: #084f8c;
    color: white;
}

.sol-bg-light-blue {
    background: #A2D4F2;
    color: white;
}

.sol-bg-orange {
    background: #f27405;
    color: white;
}

.special-card {
    background-color: rgb(0 0 0);
    opacity: .6;
}

.team-img {
    height: 200px;
    width: 100%;
}

ul.no-bullets {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.upper-right {
    position: absolute;
    top: -15px;
    right: 0px;
}

.upper-left {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index:100;
}




/* Cool infinite background scrolling animation.
 * Twitter: @kootoopas
 */

/* Exo thin font from Google. */
@import url(https://fonts.googleapis.com/css?family=Exo:100);

/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
$bg-url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC";
$bg-width: 50px;
$bg-height: 50px;
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
    100%

{
    background-position: $bg-width $bg-height;
}

}

@-moz-keyframes bg-scrolling-reverse {
    100% {
        background-position: $bg-width $bg-height;
    }
}

@-o-keyframes bg-scrolling-reverse {
    100% {
        background-position: $bg-width $bg-height;
    }
}

@keyframes bg-scrolling-reverse {
    100% {
        background-position: $bg-width $bg-height;
    }
}

@-webkit-keyframes bg-scrolling {
    0% {
        background-position: $bg-width $bg-height;
    }
}

@-moz-keyframes bg-scrolling {
    0% {
        background-position: $bg-width $bg-height;
    }
}

@-o-keyframes bg-scrolling {
    0% {
        background-position: $bg-width $bg-height;
    }
}

@keyframes bg-scrolling {
    0% {
        background-position: $bg-width $bg-height;
    }
}

/* Main styles */
.solaron-sol-pnl {
    margin-top: 13.5rem;
    color: #999;
    font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
    text-align: center;
    /* img size is 50x50 */
    background: url($bg-url) repeat 0 0;
    -webkit-animation: bg-scrolling-reverse .92s infinite; /* Safari 4+ */
    -moz-animation: bg-scrolling-reverse .92s infinite; /* Fx 5+ */
    -o-animation: bg-scrolling-reverse .92s infinite; /* Opera 12+ */
    animation: bg-scrolling-reverse .92s infinite; /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    content: "INFINITY";
    font-size: 8rem;
    font-weight: 100;
    font-style: normal;
}

.my-custom-icon .mud-icon-root {
    fill: white !important;
}






/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    width: 300px;
    height: 590px;
    border: 1px solid #f1f1f1;
    /*perspective: 1000px;*/ /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
/*    width: 100%;
    height: 100%;*/
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
    position: absolute;
/*    width: 100%;
    height: 100%;*/
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
    background-color: #084f8c;
    color: white;
}

/* Style the back side */
.flip-box-back {
    background-color: lightgrey;
    color: dimgrey;
    transform: rotateY(180deg);
}