/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 8, 2017, 2:47:26 PM
    Author     : NYA
*/
@font-face {
    font-family: "Michroma";
    src: url('../fonts/Michroma.ttf');
}

@font-face {
    font-family: "Eurosteal";
    src: url('../fonts/EurostealBigCaps.ttf');
}
@font-face {
    font-family: "Steinerlight";
    src: url('../fonts/Steinerlight.ttf');
}

@font-face {
    font-family: "trench100free";
    src: url('../fonts/trench100free.ttf');
}

@font-face {
    font-family: "AdequateExtraLight";
    src: url('../fonts/Adequate-ExtraLight.ttf');
}

@font-face {
    font-family: "SFArborcrestLight";
    src: url('../fonts/SFArborcrestLight.ttf');
}

@font-face {
    font-family: "pakenham";
    src: url('../fonts/pakenhamrg.ttf');
}

body::-webkit-scrollbar {
    width: 0.7em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: #6B207F;
    outline: 1px solid slategrey;
}

#coronaBanner   {
    background: #50cc00;
    color: white;
    text-align: center;
    padding: 10px;
    font-family: sans-serif !important;
    font-size: 14px;
}
#coronaBanner a  {
    color: white;
}
#openButton {
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px !important;
    padding: 1px 10px;
    background: #3a4046 !important;
    box-shadow: #343a40 0px 0px 6px !important;
}

html,
body {
    height: auto;

    position: relative;
    /*font-family: "Michroma";*/
}
html {

    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f9f9f9;
}

@media (min-width: 800px){
    html,
    body {
        height: 100%;
    }
}

#footer-system {
    position: fixed;
    bottom: 0;
    z-index: -1;
}
@media (min-width: 800px){
    #footer-system {
        position: fixed;
    }
}

.footer-social-mobile button {
    margin-left:0;
    margin-top:0px;
    margin-bottom: 0px;
}
.footer-social-mobile .social-icon {
    font-size: 2.5em;
}


h1, h2 {
    font-family: "Michroma";
}
h3 {
    font-family: inherit;
}

.system-menu .navbar-brand {
    background: url(../images/logo-static.jpg) no-repeat center left;
    height: 70px;
    width: 70px;
    background-size: contain;
}

.nav-item {
    align-items: center;
    display: flex;
}

.dark-text {
    color: #290a31;
}
.card-header h5 button, .card-header h5 button:focus, .card-header h5 button:active, .card-header h5:hover button,
.card-header h6 button, .card-header h6 button:focus, .card-header h6 button:active, .card-header h6:hover button{
    color:#fff;
    outline:none;
    box-shadow: none;
    text-decoration: none;
}

.accordion .card-header {
    background: #290a31;
    box-shadow: 1px 1px 2px #290a3182;
}

.small-text {
    font-size: 0.4em;
    line-height: 2.8em;
    vertical-align: bottom;
}
.smaller-text {
    font-size: 0.8em;
    line-height: 1em;
    vertical-align: bottom;
}

.larger-text {
    font-size: 1.8em;
    line-height: 1em;
    vertical-align: bottom;
}

#background {
    display: block;
    position: fixed;
    background: linear-gradient(rgba(255, 255, 255, 0.53), rgba(255, 255, 255, 0.46));
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -99;
}

.bg-1 {
    background: linear-gradient(rgb(107 32 127 / 93%), rgb(41 10 49 / 86%)), url('../images/bg-imgs/bg1.webp') no-repeat center !important;
}
.bg-2 {
    background: linear-gradient(rgb(255 255 255 / 90%), rgb(252 252 252)), url('../images/bg-imgs/bg2.webp') no-repeat center !important;
}
.bg-2-dark {
    background: linear-gradient(rgb(107 32 127 / 93%), rgb(41 10 49 / 86%)), url('../images/bg-imgs/bg2.webp') no-repeat center !important;
}
.bg-3 {
    background: linear-gradient(rgb(107 32 127 / 73%), rgb(41 10 49 / 66%)), url('../images/bg-imgs/bg3.webp') no-repeat center right !important;
}
.bg-4 {
    background: linear-gradient(rgb(107 32 127 / 83%), rgb(41 10 49 / 76%)), url('../images/bg-imgs/bg4.webp') no-repeat center !important;
}
.bg-5 {
    background: linear-gradient(rgb(107 32 127 / 73%), rgb(41 10 49 / 66%)), url('../images/bg-imgs/bg5.webp') no-repeat center !important;
}
.bg-6 {
    background: linear-gradient(rgb(107 32 127 / 73%), rgb(41 10 49 / 66%)), url('../images/bg-imgs/bg6.webp') no-repeat center !important;
}
.bg-7 {
    background: linear-gradient(rgb(107 32 127 / 93%), rgb(41 10 49 / 86%)), url('../images/bg-imgs/17.webp') no-repeat center !important;
}

.bg-8 {
    background: linear-gradient(rgb(107 32 127 / 93%), rgb(41 10 49 / 86%)), url('../images/bg-imgs/6.webp') no-repeat center !important;
}

.animation-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-shadow: #00000059 0px 2px 25px, 0px 1px 2px #00000061;
}

.animation-box p {
    font-weight: 700;
}

.animation-box p.smaller {
    font-family: sans-serif;
    width: 70%;
    font-size: 0.4em;
    font-weight: 100;
}

@keyframes topFadeOut {
    0% {
        position: absolute;
        top: -3rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        top: 25%;
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes bottomFadeOut {
    0% {
        position: absolute;
        bottom: -5rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        bottom: 25%;
        opacity: 1;
    }

    100% {
        opacity: 1;
    }

}

@keyframes topFadeOutVertical {
    0% {
        position: absolute;
        top: -3rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        top: 45%;
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes rightFadeInOut {
    0% {
        position: absolute;
        right: -3rem;
        opacity: 0;
    }

    75% {
        position: absolute;
        right: 10rem;
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

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

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1%;
    }
}

.banner-o-text {
    opacity: 0;
}

.banner-text {
    font-size: 3.4rem;
    position: absolute;
    left: 10%;
    top: 5rem;
    opacity: 0;
    animation-name: topFadeOut;
    animation-duration: 8s;
    /*animation-iteration-count: infinite;*/
    color: white;
    font-family: "Michroma";
}

.banner-text .smaller {
    font-size: 1.4rem;
}
@media (max-width: 800px){
    .banner-text {
        font-size: 2rem;
    }
    .banner-text .smaller {
        font-size: 1rem;
    }
}

.second-text {
    font-size: 3.4rem;
    position: absolute;
    top: 8.5rem;
    opacity: 0;
    animation-name: rightFadeInOut;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    color: pink !important;
}

.third-text {
    font-size: 2rem;
    position: absolute;
    left: 45%;
    top: 45%;
    opacity: 0;
    animation-name: topFadeOutVertical;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    color: pink !important;
    white-space: nowrap;
}


.btn {
    display: inline-block;
    font-family: inherit;
    padding: 5px 15px;
    border: none;
    margin: 10px auto 10px auto;
    font-size: 1.2em;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
}

.icon-btn {
    color: #53585d;
    filter: drop-shadow(#3c9504 0px 1px 1px);
}
.icon-btn:hover {
    color: #3c9504;
    filter: drop-shadow(#53585d 0px 1px 1px);
}

#eftinfobtn:hover:disabled:after {
    content:"Only available when you wish to buy for Utilities like Electricity, Water, or Gas only, and not with any other products";
    display: block;
    position: absolute;
    top:-90px;
    color:#fff;
    background:#121212;
    border-radius: 5px;
}
.table .btn {
    margin: 1px 1px 1px 1px;
    font-size: 0.9em;
    padding: 3px 9px;
}
.table-dark i {
    color: #fff;
}

#result-container {
    position: sticky;
    top: 5%;
    right: 5%;
    display: block;
    padding: 5px;
    margin-left: auto;
    z-index: 999999999999999;
}

.modal-header {
    background: #343a40;
    color:#fff;

    box-shadow: #00000087 2px 2px 6px;
}
.modal-dialog {
}

.modal {
    z-index: 3;
}
.modal-backdrop {
    z-index: 2;
}
.close {
    color: #fff;
    text-shadow: 0 1px 2px #000;
    opacity: 1;
}

.alert {
    z-index: 999999999 !important;
    width: max-content;
    max-width: 500px;
    position: absolute;
    top: 0;
    right: 1%;
    padding: 15px 35px;
    box-shadow: #00000087 2px 2px 6px;
}
.alert-loader {
    position: fixed;
    align-items: center;
    display: flex;
    z-index: 99999;
    background: rgb(128 128 128 / 22%);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(#54d900, #3e890f);
    box-shadow: #2e7203 0px 0px 2px;
}
.btn-secondary {
    color: #ffffff;
    background: linear-gradient(#5a5a5a, #7f7f7f);
    box-shadow: #272727 0px 0px 2px;
}
.btn-tertiary {
    color: #ffffff;
    background: linear-gradient(#ceba0e, #daec27);
    box-shadow: #7f7f00 0px 0px 2px;
}
.btn-quartary {
    color: #ffffff;
    background: linear-gradient(#3a4046, #2d3136);
    box-shadow: #343a40 0px 0px 6px;
}
.btn-plain {
    background: none;
    border:none;
    color:darkgrey;
}
.btn-plain-w-icon {
    background: none;
    border:none;
    color:darkgrey;
}
.btn-plain:hover, .btn-plain-w-icon:hover {
    background: none;
    border:none;
    opacity: 0.7;
}
.btn-plain-w-icon:hover {
    color:#fff;
}
.btn-primary:hover, .btn-secondary:hover, .btn-tertiary:hover {
    box-shadow: 1px 1px 5px #434144c2;
}
.btn-primary:hover {
    background: linear-gradient(#44b100, #377c0b);
}
.btn-secondary:hover {
    background: linear-gradient(#414141, #5e5e5e);
}
.btn-tertiary:hover {
    background: linear-gradient(#ab9a0c, #bdcc21);
}
.btn-quartary:hover {
    background: linear-gradient(#3a4046, #2d3136);
    box-shadow: #343a40 0px 0px 10px;
    color:#fff;
}
.btn-sm {
    font-size: 0.8em;
}
.btn.disabled, .btn:disabled {
    cursor: not-allowed;
}

#cartNavigate {
    bottom: 0;
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 99999;
}

#cartNavigate a{
    bottom: 50px;
    position: fixed;
}



.btn-quartary i, .btn-plain-w-icon i, .btn-primary i {
    color: #58e200;
    opacity: 1;
    top: 0;
    text-shadow: -3px 0px 9px black;
    filter: drop-shadow(rgb(77 197 0 / 45%) -1px -1px 3px);
    transition: 0.4s ease-in-out all;
    cursor: pointer;
}
.btn-primary i {
    color: #2d2e2e;
    text-shadow: -1px 0.5px 1px #0000009e;
    filter: drop-shadow(rgb(77 197 0 / 45%) -1px -1px 3px);
}
.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;

}
.btn-quartary:hover i, .btn-plain-w-icon:hover i,.btn-primary:hover i {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

table i {
    min-width: 18px;
}

.popover-button, .popover-button-s  {
    background: transparent;
    border: none;
    position: absolute;
    display: inline-block;
    float: right;
    right: -25px;
    top: 5px;
}
.popover-button-s  {
    position: relative;
    float: none;
    right: 0;
    top:0;
    color: #fff;
}
.popover-button img, .popover-button-s img {
    width: 30px;
    height: 30px;
}
.round {
    border-radius: 100px;
}
.text-green {
    color:#58e200;
}
.text-purple {
    color:#5a5a5a;
}
.text-white-opacity {
    color:#ffffff69 !important;
}

.bg-green {
    background-color: #58e200;
}
.line {
    border-bottom: #c3c3c3 1px solid;
}
.arrow-btn {
    height: 35px;
    width: 35px;
    margin-bottom: 3px;
    text-align: center;
    line-height: 1.2em;
    color: white !important;
    box-shadow: 1px 1px 3px grey;
}
.search-input, .search-input:focus, .search-input:active, .search-input-select {
    margin: 0;
    color: #fff;
    padding: 1px 5px;
    background: grey;
    border: none;
    box-shadow: none;
    outline: none;
    border-radius: 5px;
}
.search-input.smaller {
    max-width: 130px;
}

.page-item.active .page-link {
    color: #ffffff;
    background: linear-gradient(#58e200, #74ec27);
    box-shadow: #2e7203 0px 0px 2px;
    border: none;
}

.modal-body p{
    color:#212529;
}

.small-form label {
    margin-bottom:0px;
}
.small-form .form-control, .small-form .form-control:focus {
    margin-top:5px;
}

.carousel-item {

    display: block;
    height: 500px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 768px){
    .carousel-item {
        height: 300px;
    }
}

.car-img-1 {
    background-image: linear-gradient(to top,rgb(41 10 49 / 25%), rgb(41 10 49 / 25%), rgb(41 10 49 / 25%)), url(../images/banners/2.webp);
    box-shadow:white inset 0px 2px 1px;
    background-position: top center !important;
}

.car-img-2 {
    background-image: linear-gradient(to top,rgb(41 10 49 / 25%), rgb(41 10 49 / 25%), rgb(41 10 49 / 25%)),  url(../images/banners/7.webp);
}
.car-img-3 {
    background-image: url(../images/bg-imgs/bg6.webp);
}

.dark {
    background: linear-gradient(rgba(107, 32, 127, 0.9), #290a31);
    color:white;
}


.dark.gray-variant {
    background: linear-gradient(rgb(68 68 68), #121212);
    color:white;
}

.light {
    background: linear-gradient(rgba(1, 1, 1, 0.9), #290a31);
    color:#290a31;
}

.dark.shadow, .bg-dark.shadow {
    box-shadow: #292929 1px 1px 7px !important;
}

.dark.shadow-inset {
    box-shadow: #292929 0px 0px 13px inset !important;
}

.bg-light-opaque.shadow {
    box-shadow: 1px 1px 4px #bdbdbd !important;
}

.bg-grey {
    background: #e7e7e7 !important;
}
.bg-white {
    background: #fcfcfc !important;
}
.bg-light-opaque {
    background: linear-gradient(45deg, #343a40, #2b3034);
}
.bg-white-opaque {
    background: #ffffff12;
}
.bg-orange {
    background: #ffc107 !important;
}
.bg-yellow {
    background: #f0ff07 !important;
}
.bg-light-green {
    background: #b0f584 !important;
}
.bg-blue {
    background: #9cccff !important;
}
.bg-light-purple {
    background: #cb63e7 !important;
}
.bg-light-pink {
    background: #f983da !important;
}
nav.bg-white {
    background: #ffff !important;
}
.cart-icon i {
    font-size: 1.3em;
}
.cart-icon span {
    position: relative;
    top: 7px;
    right: 8px;
    font-size: 0.55em;
    padding: 5px 8px;
    font-weight: 200;
    opacity: 0.9;
    box-shadow: grey 1px 1px 4px;
}
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white p {
    color: #212529;
}

.dark a {
    color:#fff;
}

.white a {
    color:#212529;
}

.opacity-25 {
    opacity: 0.25;
}
.opacity-85 {
    opacity: 0.85;
}

.navbar-collapse {
    -ms-flex-align: right;
    align-items: right;
}
.navbar {
    box-shadow: #80808078 0px 1px 7px;
    z-index: 2;
}
.text-logo {
    max-height: 115px;
}

.split-line:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -95px;
    left: -45.5%;
    height: 1px;
    background: #dedede;
    width: 200%;
    z-index: 99;
}

.steps {
    text-align: center;
    min-height: 300px;
}

.step-icons i {
    display: block;
    width: 100px;
    height: 100px;
    font-size: 5em;
    padding: 20px 0;
    color:white;
    background: -webkit-linear-gradient(#d6d6d6, #c3c3c3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: rgb(82 211 0 / 0%) 0px 0px 0px;
    margin: 20px auto;
}
.steps h3 {
    font-size: 1.5em;
    font-weight: 400;
}
.overlay {
    display: flex;
    position: absolute;
    height: 0px;
    padding: 0 25px !important;
    overflow: hidden;
    transition: height 0.2s ease-in;
    text-align: center;
}

.steps:hover .overlay {
    height: 100%;
    transition: height 0.2s ease-in;
    display: flex;
    position: absolute;
    /*background: grey;*/
}
.step-top {
    padding-top: 50px;
    padding-bottom: 50px;
}

input[type="text"], #reg-form select, input[type="number"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
    box-shadow: inset #d3d3d3 1px 1px 5px;
    border: none;
    color: #4c4c4c;
    padding: 7px 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    outline: none;
}
.form-control, input[type="text"]:focus, #reg-form select:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
    transition: box-shadow ease-in-out 0.2s;
    box-shadow: inset #999999 1px 1px 2px !important;
    outline: none;
    border: none;
}

.spheres-1:after {
    content: '';
    background: url(../images/about-about.png) no-repeat center;
    background-size: contain;
    opacity: 0.2;
    display: block;
    height: 400px;
    width: 400px;
    position: absolute;
    top:0;
    right: -50px;
    z-index: -1;
}


.spheres-2:after {
    content: '';
    background: url(../images/about-elec.png) no-repeat center;
    background-size: contain;
    opacity: 0.2;
    display: block;
    height: 400px;
    width: 400px;
    position: absolute;
    top:0;
    right: -50px;
    z-index: -1;
}

.spheres-3:after {
    content: '';
    background: url(../images/contact-img.png) no-repeat center;
    background-size: contain;
    opacity: 0.2;
    display: block;
    height: 400px;
    width: 400px;
    position: absolute;
    top:0;
    right: -50px;
    z-index: -1;
}

.spheres-4:after {
    content: '';
    background: url(../images/umbrella.png) no-repeat center;
    background-size: contain;
    opacity: 0.2;
    display: block;
    height: 400px;
    width: 400px;
    position: absolute;
    top:0;
    right: -50px;
    z-index: -1;
}

.img-team {
    background: url(../images/team.webp) no-repeat center;
    background-size: cover;
    min-height: 400px;
    /*margin: 40px 0 45px 0px;*/
}

.right-angle:after {

    width: 0px;
    height: 100%;
    display: block;
    position: absolute;
    border-left: 45px solid #fcfcfc;
    border-right: 0px solid blue;
    border-top: 240px solid transparent;
    border-bottom: 260px solid transparent;
    right: -45px;
    top: 0;
    filter: drop-shadow(#280e2f 5px 5px 2px) !important;

}
@media (min-width: 1200px){
    .right-angle:after {
        content: '';
    }
}

.right-angle {
    /*border-top-right-radius:200px;
    border-bottom-right-radius:200px;*/
}
.right-angle.shadow {
    box-shadow: #280e2f 3px 3px 5px !important;
}

.vaps-image {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 200px;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    font-size: 3.9em;
    opacity: 1;
    top: 0;
    text-shadow: -1px 0px 4px #83ff3454;
    line-height: 0.0em;
    padding: 0px 10px !important;
    margin-left:5px;
    margin-right:5px;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    background: linear-gradient(#3a4046, #2d3136);
    border-radius: 30px;
    color: #58e200;
    width: 40px;
    height: 40px;
    box-shadow: #0000007a -2px 0px 5px, #ffffff -1px 0px 3px inset;
    transition: all 0.2s ease;
}
.owl-prev span, .owl-next span {
    position: relative;
    top: -7px;

}
.owl-carousel .owl-nav button:hover {
    /*opacity: 0.7;*/
    background: linear-gradient(#2d3136, #3a4046);
    box-shadow: #0000007a 2px 0px 3px, #ffffff 1px 0px 2px inset;
    transition: all 0.2s ease;
}
.owl-carousel .owl-nav {
    text-align: right;
}

.partner-car-s .owl-nav {
    width: 100%;
}
.partner-car-s .owl-dots {
    display: none;
}
.partner-car h3 {
    opacity: 0.5;
    width: 100%;
    font-size: 1.2em;
    text-align: center;
}

.ease-icons {

}

.ease-icons i {
    display: block;
    width: 120px;
    height: 120px;
    font-size: 3.5em;
    line-height: 1.3em;
    padding: 20px;
    color: #4dc700;
    color: #fff;
    background: linear-gradient(#2a2f34, #1f2124);
    background: linear-gradient(rgb(107 32 127 / 93%), rgb(41 10 49 / 86%));
    box-shadow: #000000 0px 1px 5px inset, #ffffff7d 5px -7px 0px inset !important;
    text-shadow: #000000 0px 1px 4px;
    border-radius: 70px;
    margin: 20px auto;
}

.ease-icons-white i {
    font-size: 1em;
    padding: 7px;
    color: #451950;
    background: white;
    box-shadow: #292929 0px 1px 5px inset !important;
    text-shadow: #292929 0px 1px 4px;
    border-radius: 50px;
    margin: 0;
}

.options-icon-container .ease-icons i {
    display: block;
    width: 220px;
    height: 220px;
    border-radius: 150px;
    /*filter: grayscale(1);*/
    background: linear-gradient(rgb(64 64 64), rgb(53 53 53));
    box-shadow: #000000 0px 1px 5px inset, #50cc00 10px -9px 0px inset !important;
}
.options-icon-container .number-icons:after {
    font-size: 3.8em;
    line-height: 0.7em;
    display: flex;
    justify-content: center;
    position: relative;
    top: 0;
    width: 200px;
    height: 200px;
    text-align: center;
    font-weight: 800;
}

.num-sequence .number-one:before, .num-sequence .number-two:before, .num-sequence .number-three:before {
    display: block;
    position: absolute;
    right: 28%;
    bottom: 42%;
    color: #50cb00;
    font-size: 0.8em;
}

.num-sequence .number-one:before {
    content: 'st';
    right: 33%;
}
.num-sequence .number-two:before {
    content: 'nd';
}
.num-sequence .number-three:before {
    content: 'rd';
    right: 30%;
}

.number-one:after {
    content: '1';
}
.number-two:after {
    content: '2';
}
.number-three:after {
    content: '3';
}
.options-icon-container i.number-icons-smaller {
    width: 150px;
    height: 150px;
    font-size: 2.8em;
    line-height: 0.7em;
}
.options-icon-container .number-icons-smaller:after {
    width: 100px;
    height: 150px;
    font-size: 2.8em;
    line-height: 0.7em;
}

.options-icon-container h1 {
    font-size: 3.5em;
}
.dashkpi div {
    overflow: hidden;
}
.dashkpi:after {
    display: block;
    position: absolute;
    color: white;
    font-size: 6em;
    right: -20px;
    opacity: 0.1;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
@media (min-width: 450px){
    .dashkpi:after {
        font-size: 7em;
        right: -20px;
    }
}
.dashkpi.total:after {
    content: "\f53c";
}
.dashkpi.eft:after {
    content: "\f09d";
}
.dashkpi.bills:after {
    content: "\f26c";
}
.dashkpi.betting:after {
    content: "\f522";
}
.dashkpi.mobile:after {
    content: "\f51e";
}
.dashkpi.elec:after {
    content: "\f043";
}
.dashkpi.gaming:after {
    content: "\f11b";
}
.dashkpi.entertainment:after {
    content: "\f630";
}
.dashkpi.vouchers:after {
    content: "\e569";
}
.dashkpi.transport:after {
    content: "\f5e4";
}
.dashkpi.wifi:after {
    content: "\f1eb";
}
.dashkpi.retail:after {
    content: "\f291";
}
.dashkpi.dstv:after {
    content: "\f26c";
}
.dashkpi.admin:after {
    content: "\f552";
}
.dashkpi.reports:after {
    content: "\f233";
}
.dashkpi.money:after {
    content: "\f555";
}
.dashkpi.split:after {
    content: "\f2d2";
}
.dashkpi.unclaimed:after {
    content: "\f2d2";
}
.dashkpi.users:after {
    content: "\f0c0";
}
.dashkpi.meters:after {
    content: "\f1ec";
}
.dashkpi.imports:after {
    content: "\f56f";
}
.dashkpi.matched:after {
    content: "\f0c1";
}
.dashkpi.sales:after {
    content: "\f291";
}
.dashkpi.logins:after {
    content: "\f4fd";
}
.dashkpi.changes:after {
    content: "\f044";
}
.dashkpi.registrations:after {
    content: "\f234";
}
.dashkpi.employees:after {
    content: "\f0c0";
}
.dashkpi.communication:after {
    content: "\f27a";
}
.dashkpi.banner:after {
    content: "\f071";
}
.dashkpi.municipality:after {
    content: "\f66f";
}
.dashkpi.templates:after {
    content: "\f815";
}
.dashkpi.products:after {
    content: "\f54e";
}
.dashkpi.scripts:after {
    content: "\f70e";
}
.dashkpi.logs:after {
    content: "\f15c";
}

.dashkpi.investigate:after {
    content: "\f002";
}



.dashkpi a, .dashkpi a:hover, .dashkpi a:focus {
    text-decoration: none;
}
.dashkpi.icon-important, .dashkpi.icon-arrow, .dashkpi.icon-cat-2, .dashkpi.icon-cat-3, .dashkpi.icon-cat-4, .dashkpi.icon-cat-5, .dashkpi.icon-cat-6,.dashkpi.icon-cat-7 {
    cursor: pointer;
}
.dashkpi.icon-important:after,.dashkpi.icon-arrow:after,.dashkpi.icon-cat-2:after, .dashkpi.icon-cat-3:after, .dashkpi.icon-cat-4:after,
.dashkpi.icon-cat-5:after, .dashkpi.icon-cat-6:after,.dashkpi.icon-cat-7:after,.dashkpi.icon-cat-8:after ,.dashkpi.icon-cat-9:after ,
.dashkpi.icon-cat-10:after, .dashkpi.icon-cat-11:after,.dashkpi.icon-cat-12:after,.dashkpi.icon-cat-13:after ,.dashkpi.icon-cat-14:after,
.dashkpi.transactions:after, .dashkpi.splits:after, .dashkpi.duplicates:after, .dashkpi.unclaimed:after, .dashkpi.users:after, .dashkpi.meters:after,
.dashkpi.imports:after, .dashkpi.matched:after, .dashkpi.sales:after, .dashkpi.logins:after, .dashkpi.changes:after, .dashkpi.registrations:after, .dashkpi.icon-info:after {
    color: #58e200;
    opacity: 1;
    top: 0;
    text-shadow: -3px 0px 9px black;
    filter: drop-shadow(rgb(77 197 0 / 45%) -1px -1px 3px);
    transition: 0.4s ease-in-out all;
    cursor: pointer;
}

.dashkpi.icon-arrow:after {
    content: "\f54e";
}

.dashkpi.icon-important:after {
    content: "\f06a";
    color: #d50000;
    filter: drop-shadow(rgb(237 0 0 / 45%) -1px -1px 3px);
}
.dashkpi.icon-cat-1:after {

}
.dashkpi.icon-cat-2:after {
    content: "\f26c";

}
.dashkpi.icon-cat-3:after {
    content: "\f522";
}
.dashkpi.icon-cat-4:after {
    content: "\f51e";
}
.dashkpi.icon-cat-5:after {
    content: "\f043";
}
.dashkpi.icon-cat-6:after {
    content: "\f3cd";
}
.dashkpi.icon-cat-7:after {
    content: "\f7cd";
}
.dashkpi.icon-cat-8:after {
    content: "\e528";
}
.dashkpi.icon-cat-9:after {
    content: "\f1eb";
}
.dashkpi.icon-cat-10:after {
    content: "\f630";
}
.dashkpi.icon-cat-11:after {
    content: "\f11b";
}
.dashkpi.icon-cat-12:after {
    content: "\f291";
}
.dashkpi.icon-cat-13:after {
    content: "\f5e4";
}
.dashkpi.icon-cat-14:after {
    content: "\e569";
}

.dashkpi.transactions:after {
    content: "\f09d";
}
.dashkpi.splits:after {
    content: "\f248";
}
.dashkpi.duplicates:after {
    content: "\f0c5";
}
.dashkpi.out:after {
    content: "\f08b";
}
.dashkpi.unclaimed:after {
    content: "\e073";
}

.dashkpi.icon-info:after {
    content: "\f129";
    left: 40%;
    text-shadow: -1px 0px 3px #6c6c6c;
    filter: drop-shadow(rgb(77 197 0 / 45%) -1px -1px 2px);
    font-size: 2em;
}
.cart-row {
    overflow: hidden;
    padding-left:30px;
}
.cart-row .dashkpi:after {
    font-size: 2em;
    left: -35px;
    text-shadow: -2px 0px 4px #307a00;
    width: fit-content;
}

.dashkpi.icon-important:hover:after, .dashkpi.icon-arrow:hover:after, .dashkpi.icon-cat-2:hover:after, .dashkpi.icon-cat-2:hover:after, .dashkpi.icon-cat-3:hover:after, .dashkpi.icon-cat-4:hover:after,
.dashkpi.icon-cat-5:hover:after, .dashkpi.icon-cat-6:hover:after,.dashkpi.icon-cat-7:hover:after,.dashkpi.icon-cat-8:hover:after,.dashkpi.icon-cat-9:hover:after,.dashkpi.icon-cat-10:hover:after,
.dashkpi.icon-cat-11:hover:after,.dashkpi.icon-cat-12:hover:after,.dashkpi.icon-cat-13:hover:after,.dashkpi.icon-cat-14:hover:after, .dashkpi.transactions:hover:after, .dashkpi.users:hover:after,
.dashkpi.unclaimed:hover:after, .dashkpi.duplicates:hover:after, .dashkpi.splits:hover:after, .dashkpi.meters:hover:after,
.dashkpi.imports:hover:after, .dashkpi.matched:hover:after, .dashkpi.sales:hover:after, .dashkpi.logins:hover:after, .dashkpi.changes:hover:after, .dashkpi.registrations:hover:after{
    transform: translate3d(10px, 10px, 10px);
    transition: 0.2s ease-in-out all;
    z-index: -1;
}
.cont-with-icon .dashkpi:after {
    opacity: 1 !important;
    color: white !important;
    text-shadow: none !important;
}
.cont-with-icon .dashkpi:hover:after {
    z-index: 9 !important;
}
#cur-products .txn-box {
    min-height: 150px;
    display: flex;
    align-items: flex-end;
}
#cur-products .usr-content {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #353b40;
    z-index: 9;
    text-align: right;
    padding: 5px 10px;
    box-shadow: #424242c2 0px -1px 7px;
}
#cur-products a:hover {
    text-decoration: none !important;
    cursor: pointer;
}

#cur-products .txn-status {
    background: linear-gradient(207deg, #ffffffd4, rgb(255 255 255 / 90%), rgb(255 255 255 / 81%), rgb(255 255 255 / 89%), rgb(255 255 255 / 56%) , rgb(255 255 255 / 64%));
    ;
}
.dashboarde .dashkpi:after {
    top: 0;
    color: #50cc00;
    opacity: 1;
    right: 30px;
    font-size: 9em;
}

.products-provider-logo {
    background-color: white;
    background-size: 170px auto;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: black 1px 1px 3px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    transition: all 0.1s linear;
}
.products-provider-logo:hover {
    background-size: 180px auto;
    transition: all 0.1s linear;
}
.add-to-cart-container {
    bottom: 0;
    padding:10px 20px;
}

.profile-picture-container {
    border-radius: 200px;
    background-color: white;
    background-position: center;
    background-size: cover;
    width: 150px;
    height: 150px;
    box-shadow: inset #1b1e22 3px 3px 15px, #838383e3 0px 0px 6px;
}
.profile-m {
    width: 120px;
    height: 120px;
}

#profilee .profile-m {
    width: 300px;
    height: 300px;
}

.outer-circle, .inner-circle{
    overflow: hidden;
}

.outer-circle:after {
    content: '';
    display: block;
    position: absolute;
    z-index: -15;
    background: #fff;
    top: 0;
    height: 100%;
    width: 100%;
}

.inner-circle:before {
    content: '';
    z-index: -14;
    display: block;
    position: absolute;
    background: #50cc00;
    top: -8px;
    height: 100%;
    width: 100%;
    box-shadow: #222222c7 1px 2px 11px inset;
    border-top-left-radius: 538px;
    border-bottom-left-radius: 375px;
}
.inner-circle:after {
    content: '';
    z-index: -10;
    display: block;
    position: absolute;
    background: #ffffff;
    box-shadow: 2px 1px 7px #1c1c1ca8 inset;
    top: -14px;
    left: 100px;
    height: 101%;
    width: 100%;
    border-top-left-radius: 425px;
    border-bottom-left-radius: 400px;
}

@media (max-width: 700px) {
    .inner-circle:after, .inner-circle:before,.outer-circle:after {
        content: unset;
    }
    .cart-row {
        overflow: hidden;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 15px;
        box-shadow: 1px 3px 5px #28282840 !important;
    }
    .cart-row .dashkpi:after {
        font-size: 12em;
        top: -40px;
        opacity: 0.05;
        left: -35px;
        text-shadow: none;
        width: fit-content;
        color: black;
    }

    .ui-status-container {
        padding: 5px 10px !important;
        background: #d7d7d7a6;
        margin-top: 12px;
    }
    .alert {
        z-index: 999999999 !important;
        max-width: unset;
        min-width: 340px;
        width: 100%;
        top: 80px;
    }
}
.bottom-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    background: transparent;
    color: white;
    border: none;
    padding: 7px 15px;
    font-size: 0.7em;
}

.btn-group>.btn {
    background: #a04db6;
    color: white;
    padding: 5px 12px;
    font-size: 0.9em;
    box-shadow: #6b207f 1px 1px 2px inset;
}
.btn-check:checked + label, .btn-check:focus + label, .btn-check:active + label {
    background: #6B207F !important;
    box-shadow: #340c3f 1px 1px 3px;
    z-index: 1;
}
.btn-group>.btn-check {
    display: none;
}

.btn-group .btn:nth-child(2) {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.sub-icon {
    padding: 15px 32px;
    position: absolute;
    text-align: right;
    text-decoration: none;
    display: inline;
    float: right;
    font-size: 16px;
    margin: 5px;
    right: -10px;
    top: 30px;
    color: grey;
    cursor: pointer;
}

#updatePasswordForm .sub-icon {
    top: 0px;
}

.sub-icon:hover {
    color: rgba(128, 128, 128, 0.76);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: grey;
}

.nav-link {
    position: relative;
    color: #fff;
}

.nav-link:hover {
    color: #fff;
}

.nav-pills .nav-link.active::after {
    font-family: "Font Awesome 5 Free";
    content: '\f058';
    position: absolute;
    display: block;
    font-size: 7em;
    color: #fff;
    top: -50px;
    right: 5%;
    filter: drop-shadow(1px 2px 3px black);
}

.alert-success {
    z-index: 9999;
}

.alert-success, .alert-danger {
    color: #ffffff;
    background-color: #454a4e;
    border-color: #45494e;
    padding-left:60px;
}
.alert-success:before {
    content: '';
    -webkit-mask-image: url('./../../images/icons/check-solid.svg');
    mask-image: url('./../../images/icons/check-solid.svg');
    background-color:#58e200;
    /* background-image: url('./../../images/icons/circles.svg'); */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    text-shadow: -3px 0px 9px black;
    filter: drop-shadow(rgb(77 197 0 / 45%) -1px -1px 3px);
    height: 30px;
    width: 30px;
    display: inline-block;
    position: absolute;
    left:15px;
    top:20%;
}
.alert-danger:before {
    content: '';
    -webkit-mask-image: url('./../../images/icons/close-solid.svg');
    mask-image: url('./../../images/icons/close-solid.svg');
    background-color:#bb0202;
    /* background-image: url('./../../images/icons/circles.svg'); */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    text-shadow: -3px 0px 9px black;
    filter: drop-shadow(rgb(255 104 104 / 45%) -1px -1px 3px);
    height: 30px;
    width: 30px;
    display: inline-block;
    position: absolute;
    left:15px;
    top:20%;
}


@keyframes click-wave {
    0% {
        height: 40px;
        width: 40px;
        opacity: 0.15;
        position: relative;
    }
    100% {
        height: 200px;
        width: 200px;
        margin-left: -80px;
        margin-top: -80px;
        opacity: 0;
    }
}

input[type='checkbox'].form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 2px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.15s ease-out 0s;
    background: #cbd1d8;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
}
input[type='checkbox'].form-control:hover {
    background: #66db1c;
}
input[type='checkbox'].form-control:checked {
    background: #6de91e;
}
input[type='checkbox'].form-control:checked::before {
    height: 20px;
    width: 20px;
    position: absolute;
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-size: 12.66667px;
    text-align: center;
    line-height: 22px;
}
input[type='checkbox'].form-control:checked::after {
    -webkit-animation: click-wave 0.25s;
    -moz-animation: click-wave 0.25s;
    animation: click-wave 0.25s;
    background: #E91E63;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
}
input[type='checkbox'].form-control {
    border-radius: 40%;
}
input[type='checkbox'].form-control::after {
    border-radius: 50%;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
    border: #dc3545 1px solid;
    background-color: #ebcfcf;
}

.back-btn i {
    display: block;
    position: absolute;
    left: -29px;
    top: 13px;
    font-size: 0.7em;
    color:#74ec27;

}
.back-btn {
    width: 100%;
    color: #4c5156;
}
.back-btn:hover {
    text-decoration: none;
    color: #676b6e;
}

.bg-image-hands {
    background-image: url(../images/bg-imgs/4.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 300px;
}


.bg-image-magicphone {
    background-image: url(../images/bg-imgs/17.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 300px;
}

.provider-container h4, .cat-container h4, .product-container h4 {
    font-size: 1.2em;
}
.product-container {
    color: #fff;
}
.product-container button {
    font-size: 0.9em;
}

.provider-container {
    background: transparent !important;
    border:none !important;
}

.provider-container .collapse, .provider-container .collapsing {
    position: absolute;
    top: 100%;
    z-index: 1;
}

.txn-status {
    background: #4ab307;
    box-shadow: #272727 1px 1px 4px;
    color: rgb(255 255 255);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: right;
}

.txn-status p {
    text-shadow: #343a40 0px 0px 1px;
    /* font-weight: 500; */
}
.txn-box {
    filter: drop-shadow(#80808078 -1px 2px 7px);
}

.txn-box::before {
    content: '';
    /*background: linear-gradient(to right, #343a40, #343a40, #343a40, rgb(52 58 64 / 91%), rgb(52 58 64 / 51%), transparent);*/
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 80%;
    z-index: 1;
}

.txn-content, .usr-content {
    position: relative;
    z-index: 2;
}
.txn-content h2 {
    position: relative;
    font-family: unset;
    width: 100%;
    text-shadow: -4px 2px 5px #00000036;
    left: -6px;
    padding-left: 35px;
    padding-top: 20px;
}
.txn-content h2 span {
    font-size: 2.2em;
    left: 0px;
    top: -15px;
    text-shadow: none;
    position: absolute;
    z-index: -999999;
    opacity: 0.2;
}
.txn-content h6 {
    font-family: unset;
    font-weight: 100;
}

.txn-dropdown {
    position: absolute;
    right: 2%;
    bottom: 0;
}
.txn-dropdown i {
    text-shadow: #212529 0px 0px 1px;
    font-size: 1.5em;
}

.usr-content h2 {
    position: relative;
    font-family: unset;
    width: 100%;
    text-shadow: -4px 2px 5px #00000036;
    left: -6px;
    padding-left: 35px;
    padding-top: 20px;
    font-size: 1.8em;
}
.usr-content h2 span {
    font-size: 2.5em;
    left: -34px;
    top: -52px;
    text-shadow: none;
    position: absolute;
    z-index: -999999;
    opacity: 0.1;
    height: 200px;
    width: 100px;
}

.icon-elipse {
    display: block;
    -webkit-mask-image: url('./../../images/icons/circles.svg');
    mask-image: url('./../../images/icons/circles.svg');
    background-color:#fcfcfc;
    /* background-image: url('./../../images/icons/circles.svg'); */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    height: 30px;
    width: 30px;
    opacity: 0.7;
}

.icon-profile {
    display: block;
    -webkit-mask-image: url('./../../images/icons/user-solid.svg');
    mask-image: url('./../../images/icons/user-solid.svg');
    background-color:#fcfcfc;
    /* background-image: url('./../../images/icons/circles.svg'); */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    height: 50px;
    width: 50px;
    opacity: 0.7;
}

.icon-meter {
    display: block;
    -webkit-mask-image: url('./../../images/icons/calculator-solid.svg');
    mask-image: url('./../../images/icons/calculator-solid.svg');
    background-color:#fcfcfc;
    /* background-image: url('./../../images/icons/circles.svg'); */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    height: 50px;
    width: 50px;
    opacity: 0.7;
}

.icon-check {
    display: block;
    -webkit-mask-image: url('./../../images/icons/check-solid.svg');
    mask-image: url('./../../images/icons/check-solid.svg');
    background-color:#fcfcfc;
    /* background-image: url('./../../images/icons/circles.svg'); */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    height: 50px;
    width: 50px;
    opacity: 0.7;
}

.smaller-input {
    max-width: 130px;
}
.x-smaller-input {
    max-width: 60px;
}

.search-input::placeholder {
    color:#ffffff69;
}

.form-control-plaintext {
    box-shadow: none !important;
}


@media (max-width: 576px){
    .pic-logo {
        max-height: 80px;
        min-height: 60px;
        padding: 0px !important;
    }
    .text-logo {
        max-height: 100px;
        min-width: 135px;
    }
    h1 {
        font-size: 2.1rem;
    }
    h2 {
        font-size: 1.9rem;
    }
    h3 {
        font-size: 1.5rem;
    }
}
@media (max-width: 450px){

    .cart-row .x-smaller-input {
        max-width: 90%;
    }

    .cart-row .product-ref-input {
        max-width: 85%;
        margin-left: auto !important;
        position: relative;
    }
    .pic-logo {
        max-height: 80px;
        min-height: 60px;
        padding: 0px !important;
    }
    .text-logo {
        max-height: 100px;
        min-width: 135px;
    }
    h1 {
        margin-top:20px;
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.2rem;
    }
    h3 {
        font-size: 1.4rem;
    }
    h4 {
        font-size: 1rem;
    }
    .txn-content h2 {
        padding-left: 25px;
    }
    .txn-content h2 span {
        top: -15px;
    }

    .usr-content h2 {
        padding-left: 25px;
    }
    .usr-content h2 span {
        top: -15px;
    }
}

.numbered-list{
    list-style: auto;
}

.provider-bg-banner-22 {
    min-height: 200px;
    overflow: hidden;
    position: relative;
    background:url(../images/provider-banner.jpg) no-repeat center;
    background-size: cover;
}
.provider-bg-banner-22:after {
    min-height: 200px;
    width: 40%;
    content: '';
    display: block;
    position: absolute;
    top:-10px;
    right: -10px;
    filter: grayscale(1);
    opacity: 0.2;

}

.table-responsive{
    height:400px;
    overflow:scroll;
}
thead tr:nth-child(1) th{
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #343a40;
}

.cart-result-accordion .card-header button {

}
.accordion-button:not(.accordion-arrow)::after {
    -webkit-mask-image: url(../images/icons/close-solid.svg);
    mask-image: url(../images/icons/close-solid.svg);
    transform: rotate(0deg);
    background-color:#fff;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.accordion-button::after {
    width: 20px;
    height: 20px;
    right: 20px;
    top: 32px;
    margin-left: auto;
    content: "";
    display: block;
    position: absolute;
    -webkit-mask-image: url(../images/icons/close-solid.svg);
    mask-image: url(../images/icons/close-solid.svg);
    transform: rotate(45deg);
    background-color:#fff;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: ease 0.3s all;
}

.accordion-button .float-right {
    margin-right: 20px;
}

.product-value-input:read-only {
    box-shadow: none !important;
}

.small-form .input-group {
    box-shadow: #b5b5b5 0px 1px 3px;
    border-radius: 3px;
}
.small-form .input-group .input-group-text {
    border: none;
}
.small-form .input-group input {
}

.small-col {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dropdownMenuTransCategoryOptions, #catButtonOptions {
    top: 95px !important;
}

.muni-page-logo img {
    max-height: 150px;
}

.btn-badge {
    max-width: 35px;
    display: inline-flex;
    padding: 5px 10px !important;
}

.badge {
    display: block;
    position: relative;
    float: right;
    top: -12px !important;
    right: 5px;
}

.splitbadges .badge {
    display: block;
    position: relative;
    float: right;
    top: 0 !important;
    right: 5px;
}

.popcell {
    position: absolute;
    float: right;
    top: -10%;
    left: 91%;
}

@media (min-width: 767px){
    .popcell {
        position: absolute;
        float: right;
        top: 4px;
        left: 47%;
    }
}
@media (min-width: 990px){
    .popcell {
        position: absolute;
        float: right;
        top: 25%;
        right: 17%;
    }
}

.back-btn-products-modal {
    display: flex;
    position: fixed;
    z-index: 99999999999;
    bottom: 53px;
}

.back-btn-products-modal button {
    padding: 15px 18px 22px 18px;
    background: radial-gradient( #21262a, #282d32, #31373c, #cbc9c9);
    border-radius: 40px;
    box-shadow: 1px 1px 4px #1c1f22;
    line-height: 0.6em;
    font-size: 2em;
}
#remove-meter {
    position: absolute;
    right: 27%;
    top: 32px;
    padding: 10px 20px;
}


.opacity-50 {
    opacity: 0.5;
}

.app-active {
    height: 100%;
}
.app-active #account-container-1 {
    height: 100%;
}
.app-active #account-container-2 {
    padding-bottom: 0px !important;
}
.app-active #account-container-3 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: flex;
    align-content: center;
}
.app-active #result-container {
    position: absolute;
}

#municipality-container .rounded-circle {
    min-width: 45px;
    min-height: 45px;
    line-height: 1.7em;
}

#widget-settings-cont {
    position: absolute;
    right: 0;
    top: -60px;
    display: block;

}


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

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}
@keyframes my-pulse {
    0% {
        filter: opacity(0); 
    }
    50% {
        filter: opacity(1); 
    }
    100% {
        filter: opacity(0); 
    }
}
.my-spin {
    -webkit-animation: my-pulse 3s ease-in-out infinite;
    animation: my-pulse 3s ease-in-out infinite
}

#cur-profile-1 {
overflow: hidden;
}

#cur-profile-1 .rounded.bg-dark:before {
    content: '';
    width: 61%;
    border-radius: 87px;
    border-top-left-radius: 327px;
    border: transparent solid 0px;
    border-top: solid 0px transparent;
    border-bottom: solid 0px transparent;
    border-left: solid 158px #50cc00;
    box-shadow: #343a40 inset -10px -6px 0px 10px, #343a40 -10px -6px 0px 10px, #343a40 inset 13px 3px 10px -11px, #fbfbfb inset 13px -20px 0px 7px, #343a40 inset 13px -19px 10px 9px, #50cc00 inset 19px -7px 0px 24px;
    height: 187%;
    display: block;
    position: absolute;
    top: -68px;
    background: #ffffff00;
    left: 2%;
}

#dashboard-no-widgets {
border-radius: 0.25rem!important;
    background-color: #343a40!important;
    min-height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.dashboard-kpi-close {
cursor: pointer;
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 99;
    padding: 10px;
}
.dashboard-kpi-close:hover {
    cursor: pointer;
    opacity: 0.8;
}

#cur-kpis .dashkpi:after {
color: #fbfbfb;
    text-shadow: 9px 9px 39px #000000d1, 1px 1px 3px #fcfcfc70;
    opacity: 1;
    font-size: 6em;
    right: 30px;
    top: 20%;
    filter: unset;
}

#cur-profile .dashkpi:after {
    text-shadow: 2px 4px 28px #1a1e22;
}

#cur-profile .dashkpi:hover:after, #cur-kpis .dashkpi:hover:after {
    z-index: 9 !important;
}

#cur-kpis .dashkpi h4, #cur-kpis .dashkpi h3, #cur-kpis .dashkpi p{
    text-shadow: 1px 1px 53px #fbfbfb3b, 1px 1px 0px #282e33;
}

.btn-summary-download {
    font-size: 1.4em;
    position: absolute;
    padding: 8px;
    right: 20px;
    bottom: 10px;
    z-index: 2;
}
.user-passed {
		overflow:hidden;
	position:relative;
	height: 100%;
}
.user-passed:after {
	content:"";
    background: url("../images/icons/check-solid-green.svg") no-repeat center;
    background-size: contain;
    position: absolute;
    top:0;
    right: 0;
    height: 100%;
    opacity: 0.2;
    width: 90%;    
	display: block;
}

.user-failed {
	overflow:hidden;
	position:relative;
	height: 100%;
}
.user-failed:after {
	content:"";
    background: url("../images/icons/close-solid-red.svg") no-repeat center;
    background-size: contain;
    position: absolute;
    top:0;
    right: 0;
    height: 100%;
    opacity: 0.2;
    width: 90%;
	display: block;
}