/*
NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

@media only screen and (max-width:600px) {
    .no-hidden-xs {
        display: none !important;
    }
}
/* Bootstrap overide for dashboard page */
@media (min-width: 1200px) {
    .col-xl-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    
    .col-xl-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    

   /* .col-xl-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .col-xl-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }*/
}
@media (min-width: 1650px) {
    .col-xl-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-calendar {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-xl-advert {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-xl-9 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }

    .col-xl-11 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .col-xl-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.menu-item-box {
    background: #fff;
    border-radius: 10px;
    margin: 8px;
    width: 120px
}
.menu-item-box:hover {
    background: #46c7b9;
    color: #fff !important;
    box-shadow: 0px 0px 18px rgba(0,0,0,.4);
    -webkit-transition : 600ms ease all;
    transition: 600ms ease all;
}

.menu-item-box a i{
    font-size:28px
}

.menu-item-box a{
    display:block
}

.menu-item-box a:hover {
    color: #fff !important;
    -webkit-transition: 600ms ease all;
    transition: 600ms ease all;
}

.menu-item-box-disabled,
.menu-item-box[disabled] {
    border: 1px solid #999999;
    background: rgba(255,255,255,0.5);
    color: #666666;
    cursor:not-allowed
}


.max-column-height-1 .card{
    max-height: 400px;
}
.max-column-height-1 .card {
    overflow-y: scroll
}
.bg-rating-very-bad {
    width: 30px;
    height: 30px;
    background: url('../images/pages/rating-bg.png') no-repeat;
    background-position: -6px -6px;
    margin-top: 5px;
}
.bg-rating-bad {
    width: 30px;
    height: 30px;
    background: url('../images/pages/rating-bg.png') no-repeat;
    background-position: -46px -6px;
    margin-top: 5px;
}
.bg-rating-fair {
    width: 30px;
    height: 30px;
    background: url('../images/pages/rating-bg.png') no-repeat;
    background-position: -85px -6px;
    margin-top: 5px;
}
.bg-rating-good {
    width: 30px;
    height: 30px;
    background: url('../images/pages/rating-bg.png') no-repeat;
    background-position: -6px -44px;
    margin-top: 5px;
}
.bg-rating-excellent {
    width: 30px;
    height: 30px;
    background: url('../images/pages/rating-bg.png') no-repeat;
    background-position: -47px -45px;
    margin-top: 5px;
}

.upload-container {
    background-color: rgb(239, 239, 239);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 20px;
    position: relative
}

.border-container {
    border: 5px dashed rgba(198, 198, 198, 0.65);
    border-radius: 6px;
    padding: 20px;
}

    .border-container p {
        color: #130f40;
        font-weight: 600;
        font-size: 1.1em;
        letter-spacing: -1px;
        /*margin-top: 30px;*/
        margin-bottom: 0;
        opacity: 0.65;
    }

#file-browser {
    text-decoration: none;
    color: rgb(22,42,255);
    border-bottom: 3px dotted rgba(22, 22, 255, 0.85);
}

    #file-browser:hover {
        color: rgb(0, 0, 255);
        border-bottom: 3px dotted rgba(0, 0, 255, 0.85);
    }

#file-upload {
    opacity: 0;
    width: 95%;
    height: 180px;
    position: absolute;
    left: 20px;
    top: 0;
    z-index:2
}

#profile-picture-file-upload {
    opacity: 0;
    width: 95%;
    height: 180px;
    position: absolute;
    left: 20px;
    top: 0;
    z-index: 2
}

#profile-video-file-upload {
    opacity: 0;
    width: 95%;
    height: 180px;
    position: absolute;
    left: 20px;
    top: 0;
    z-index: 2
}

.selectedImageDisplayArea {
    position: absolute;
    right: 30px;
    top: 20px;
    max-width: 100px;
    max-height: 100px;
}

.file-upload-hidden {
    opacity: 0;
    width: 95%;
    height: 180px;
    position: absolute;
    left: 20px;
    top: 0;
    z-index: 2
}

.uploadedDocumentCard {
    height: 90%
}

    .uploadedDocumentCard:hover {
        box-shadow: 0px 0px 16px #eee !important
    }

.icons {
    color: #95afc0;
    opacity: 0.55;
}


/* For Jquery Validation */
.field-validation-error {
    color: #ff0000;
    font-size: 12px;
    padding: 5px;
    background: rgba(255,255,255,0.2);
    border-radius:30px
}

/* For Jquery Validation */
.error {
    color: #ff0000;
    font-size: 12px;
    padding: 5px;
    background: #f5f5f5;
    font-weight:400
}

/* ---------- Skeletons ------------ */
placeholder-loading::before {
    content: '';
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
    animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.demo:empty {
    margin: auto;
    width: 500px;
    height: 600px; /* change height to see repeat-y behavior */
    background-image: radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ), linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), linear-gradient( lightgray 20px, transparent 0 ), linear-gradient( lightgray 20px, transparent 0 ), linear-gradient( lightgray 20px, transparent 0 ), linear-gradient( lightgray 20px, transparent 0 );
    background-repeat: repeat-y;
    background-size: 100px 200px, /* circle */
    50px 200px, /* highlight */
    150px 200px, 350px 200px, 300px 200px, 250px 200px;
    background-position: 0 0, /* circle */
    0 0, /* highlight */
    120px 0, 120px 40px, 120px 80px, 120px 120px;
    animation: shine 1s infinite;
}

#goal-overview-chart::before {
    margin: auto;
    width: 400px;
    height: 400px; /* change height to see repeat-y behavior */
    background-image: radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ), linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ), linear-gradient( lightgray 20px, transparent 0 ), linear-gradient( lightgray 20px, transparent 0 ), linear-gradient( lightgray 20px, transparent 0 ), linear-gradient( lightgray 20px, transparent 0 );
    background-repeat: repeat-y;
    background-size: 100px 200px, /* circle */
    50px 200px, /* highlight */
    150px 200px, 350px 200px, 300px 200px, 250px 200px;
    background-position: 0 0, /* circle */
    0 0, /* highlight */
    120px 0, 120px 40px, 120px 80px, 120px 120px;
    animation: shine 1s infinite;
}

@keyframes shine {
    to {
        background-position: 0 0, 100% 0, /* move highlight to right */
        120px 0, 120px 40px, 120px 80px, 120px 120px;
    }
}

/* For loading Modal */
.modal {
    display: none;
    position: fixed;
    /*z-index: 1000;*/
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .6 );
    /*background: rgba( 0, 0, 0, .6 ) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;*/
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

    /* Anytime the body has the loading class, our
   modal element will be visible */
    body.loading .modal {
        display: block;
    }

#loadingPopupView {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000
}
.loader {
    border: 6px solid #ccc;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

/* --------------- UI DATEPICKER- --------------- */
/* --------------- UI DATEPICKER- --------------- */
.ui-datepicker {
    width: 20em;
    padding: .3em .3em 0;
    display: none;
}

.ui-datepicker {
    font-family: Montserrat;
    background-color: #fff;
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .6em 0;
    }

.ui-datepicker-header {
    background-color: #48d6b2;
    background-color: #f27021
}

.ui-datepicker-title {
    color: white;
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
    background: #fff;
    color: #3b41ef;
}

.ui-datepicker td {
    border: 0;
    padding: 5px;
    background: #f5f5f5;
}

.ui-widget-content .ui-state-default {
    border: 0px;
    text-align: center;
    background: #fff;
    font-weight: normal;
    color: #000;
}

    .ui-widget-content .ui-state-default:hover {
        border: 0px;
        text-align: center;
        background: #000;
        font-weight: normal;
        color: #fff;
    }

.ui-widget-content .ui-state-active {
    border: 0px;
    background: #616eff;
    color: #fff;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    margin: 2px;
    font-family: Montserrat
}

/* Custome scrol bars */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

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

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #ccc;
    }

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 400px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: 0px;
    /*-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;*/
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

.bloom-card{
    border-radius:2.5rem
}

.bloom-card-2 {
    border-radius: 2rem
}

.text-align-right{
    text-align: right !important
}
.text-bloom-orange {
    color: #F36F20
}

.text-bloom-blue {
    color: #1C4B75
}

.text-bloom-green {
    color: #197F3E
}

.text-bloom-underline{
    text-decoration:underline;
}

.bg-bloom-blue-gradient {
    background-image: linear-gradient(to bottom right, #1C4B75, #21354A);
}

.bg-bloom-orange-gradient {
    background-image: linear-gradient(to bottom right, #F36F20, #F06E20);
}

.bg-bloom-light-orange-gradient {
    background: rgba(243,111,32,0.1);
}

.bg-bloom-light-green-gradient {
    background: rgba(27,141,66,0.1);
}

.border-bloom-orange-gradient {
    border: 5px solid #F36F20
}

table {
    border-collapse: separate;
}

td {
    border: none !important;
    padding:10px
}

table thead tr {
    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
    background: #fff;
    border-radius:30px
}

table thead tr td{
    font-weight: 800
}

table tbody tr {
/*    box-shadow: 0px 2px 10px rgba(0,0,0,0.1);*/
    background:#fff
}

tr th:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

tr th:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

tr td:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

tr td:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}


/* calendar */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#calendar {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
}

.header {
    height: 50px;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    text-align: center;
    position: relative;
    z-index: 100;
}

    .header h1 {
        margin: 0;
        padding: 0;
        font-size: 20px;
        line-height: 50px;
        font-weight: 100;
        letter-spacing: 1px;
    }

.left, .right {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    top: 50%;
    margin-top: -7.5px;
    cursor: pointer;
}

.left {
    border-width: 7.5px 10px 7.5px 0;
    border-color: transparent rgba(160, 159, 160, 1) transparent transparent;
    left: 20px;
}

.right {
    border-width: 7.5px 0 7.5px 10px;
    border-color: transparent transparent transparent rgba(160, 159, 160, 1);
    right: 20px;
}

.month {
    /*overflow: hidden;*/
    opacity: 0;
}

    .month.new {
        -webkit-animation: fadeIn 1s ease-out;
        opacity: 1;
        text-align: center
    }

    .month.in.next {
        -webkit-animation: moveFromTopFadeMonth .4s ease-out;
        -moz-animation: moveFromTopFadeMonth .4s ease-out;
        animation: moveFromTopFadeMonth .4s ease-out;
        opacity: 1;
        text-align: center;
    }

    .month.out.next {
        -webkit-animation: moveToTopFadeMonth .4s ease-in;
        -moz-animation: moveToTopFadeMonth .4s ease-in;
        animation: moveToTopFadeMonth .4s ease-in;
        opacity: 1;
        text-align: center;
    }

    .month.in.prev {
        -webkit-animation: moveFromBottomFadeMonth .4s ease-out;
        -moz-animation: moveFromBottomFadeMonth .4s ease-out;
        animation: moveFromBottomFadeMonth .4s ease-out;
        opacity: 1;
        text-align: center;
    }

    .month.out.prev {
        -webkit-animation: moveToBottomFadeMonth .4s ease-in;
        -moz-animation: moveToBottomFadeMonth .4s ease-in;
        animation: moveToBottomFadeMonth .4s ease-in;
        opacity: 1;
        text-align: center;
    }

.week {
    background: #fff;
}

.day {
    display: inline-block;
    width: auto;
    padding: 7px;
    padding-bottom: 0;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    /*    background: #fff;*/
    position: relative;
    z-index: 100;
}

    .day.other {
        color: rgba(255, 255, 255, .3);
    }

    .day.today {
        color: rgba(156, 202, 235, 1);
    }

.day-name {
    font-size: 8px;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, .8);
    letter-spacing: .7px;
}

.day-number {
/*    font-size: 16px;*/
    letter-spacing: 1.5px;
}


.day .day-events {
    list-style: none;
    margin-top: 3px;
    text-align: center;
    height: 12px;
    line-height: 6px;
    overflow: hidden;
}

    .day .day-events span {
        vertical-align: top;
        display: inline-block;
        padding: 0;
        margin: 0;
        width: 5px;
        height: 5px;
        line-height: 5px;
        margin: 0 1px;
    }

.blue {
    background: rgba(156, 202, 235, 1);
}

.orange {
    background: rgba(247, 167, 0, 1);
}

.green {
    background: rgba(153, 198, 109, 1);
}

.yellow {
    background: rgba(249, 233, 0, 1);
}

.details {
    position: relative;
    display:none;
    width: 100%;
    height: 75px;
    background: rgba(164, 164, 164, 1);
    margin-top: 5px;
    border-radius: 4px;
}

    .details.in {
        -webkit-animation: moveFromTopFade .5s ease both;
        -moz-animation: moveFromTopFade .5s ease both;
        animation: moveFromTopFade .5s ease both;
    }

    .details.out {
        -webkit-animation: moveToTopFade .5s ease both;
        -moz-animation: moveToTopFade .5s ease both;
        animation: moveToTopFade .5s ease both;
    }

.arrow {
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -2px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(164, 164, 164, 1) transparent;
    transition: all 0.7s ease;
}

.events {
    height: 75px;
    padding: 7px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    .events.in {
        -webkit-animation: fadeIn .3s ease both;
        -moz-animation: fadeIn .3s ease both;
        animation: fadeIn .3s ease both;
    }

    .events.in {
        -webkit-animation-delay: .3s;
        -moz-animation-delay: .3s;
        animation-delay: .3s;
    }

.details.out .events {
    -webkit-animation: fadeOutShrink .4s ease both;
    -moz-animation: fadeOutShink .4s ease both;
    animation: fadeOutShink .4s ease both;
}

.events.out {
    -webkit-animation: fadeOut .3s ease both;
    -moz-animation: fadeOut .3s ease both;
    animation: fadeOut .3s ease both;
}

.event {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .5px;
    padding: 2px 14px;
    vertical-align: top;
}

    .event.empty {
        color: #eee;
    }

.event-category {
    height: 10px;
    width: 10px;
    display: inline-block;
    margin: 6px 0 0;
    vertical-align: top;
}

.event span {
    display: inline-block;
    padding: 0 0 0 7px;
    color: #fff
}

.legend {
    /*    position: absolute;*/
    bottom: 0;
    width: 100%;
    height: 30px;
    background: rgba(60, 60, 60, 0.1);
    line-height: 30px;
    text-align: center;
    display:none
}

.entry {
    position: relative;
    padding: 0 0 0 25px;
    font-size: 13px;
    display: inline-block;
    line-height: 30px;
    background: transparent;
}

    .entry:after {
        position: absolute;
        content: '';
        height: 5px;
        width: 5px;
        top: 12px;
        left: 14px;
    }

    .entry.blue:after {
        background: rgba(156, 202, 235, 1);
    }

    .entry.orange:after {
        background: rgba(247, 167, 0, 1);
    }

    .entry.green:after {
        background: rgba(153, 198, 109, 1);
    }

    .entry.yellow:after {
        background: rgba(249, 233, 0, 1);
    }

/* Animations are cool!  */
@-webkit-keyframes moveFromTopFade {
    from {
        opacity: .3;
        height: 0px;
        margin-top: 0px;
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes moveFromTopFade {
    from {
        height: 0px;
        margin-top: 0px;
        -moz-transform: translateY(-100%);
    }
}

@keyframes moveFromTopFade {
    from {
        height: 0px;
        margin-top: 0px;
        transform: translateY(-100%);
    }
}

@-webkit-keyframes moveToTopFade {
    to {
        opacity: .3;
        height: 0px;
        margin-top: 0px;
        opacity: 0.3;
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes moveToTopFade {
    to {
        height: 0px;
        -moz-transform: translateY(-100%);
    }
}

@keyframes moveToTopFade {
    to {
        height: 0px;
        transform: translateY(-100%);
    }
}

@-webkit-keyframes moveToTopFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(-30%) scale(.95);
    }
}

@-moz-keyframes moveToTopFadeMonth {
    to {
        opacity: 0;
        -moz-transform: translateY(-30%);
    }
}

@keyframes moveToTopFadeMonth {
    to {
        opacity: 0;
        -moz-transform: translateY(-30%);
    }
}

@-webkit-keyframes moveFromTopFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(30%) scale(.95);
    }
}

@-moz-keyframes moveFromTopFadeMonth {
    from {
        opacity: 0;
        -moz-transform: translateY(30%);
    }
}

@keyframes moveFromTopFadeMonth {
    from {
        opacity: 0;
        -moz-transform: translateY(30%);
    }
}

@-webkit-keyframes moveToBottomFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(30%) scale(.95);
    }
}

@-moz-keyframes moveToBottomFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(30%);
    }
}

@keyframes moveToBottomFadeMonth {
    to {
        opacity: 0;
        -webkit-transform: translateY(30%);
    }
}

@-webkit-keyframes moveFromBottomFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(-30%) scale(.95);
    }
}

@-moz-keyframes moveFromBottomFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(-30%);
    }
}

@keyframes moveFromBottomFadeMonth {
    from {
        opacity: 0;
        -webkit-transform: translateY(-30%);
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOutShink {
    to {
        opacity: 0;
        padding: 0px;
        height: 0px;
    }
}

@-moz-keyframes fadeOutShink {
    to {
        opacity: 0;
        padding: 0px;
        height: 0px;
    }
}

@keyframes fadeOutShink {
    to {
        opacity: 0;
        padding: 0px;
        height: 0px;
    }
}


/* CSS class for loader */
.lds-hourglass {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.9);
    background-size: cover;
}

    /* Style the loader GIF */
    .lds-hourglass::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url(/images/BBLoader.gif);
        width: 150px;
        height: 150px;
        background-size: cover;
    }

    /* Style the loading text */
    .lds-hourglass::before {
        content: "Loading, Please Wait";
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 18px;
        animation: ellipsis 2.2s infinite;
    }

/* Animation for the ellipsis effect */
@keyframes ellipsis {
    0% {
        content: "Loading, Please Wait";
    }

    33% {
        content: "Loading, Please Wait.";
    }

    66% {
        content: "Loading, Please Wait..";
    }

    100% {
        content: "Loading, Please Wait...";
    }
}


svg#freepik_stories-devices:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-devices.animated #freepik--background-complete--inject-8 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedLeft;
    animation-delay: 0s;
}

svg#freepik_stories-devices.animated #freepik--Shadow--inject-8 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;
    animation-delay: 0s;
}

svg#freepik_stories-devices.animated #freepik--Floor--inject-8 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;
    animation-delay: 0s;
}

svg#freepik_stories-devices.animated #freepik--Computer--inject-8 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-devices.animated #freepik--Tablet--inject-8 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;
    animation-delay: 0s;
}

svg#freepik_stories-devices.animated #freepik--Mobile--inject-8 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-devices.animated #freepik--Character--inject-8 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn;
    animation-delay: 0s;
}

@keyframes lightSpeedLeft {
    from {
        transform: translate3d(-50%, 0, 0) skewX(20deg);
        opacity: 0;
    }

    60% {
        transform: skewX(-10deg);
        opacity: 1;
    }

    80% {
        transform: skewX(2deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}