body {
     font-family:Arial, Sans-Serif;
}
.clearfix:before, .clearfix:after{
     content: "";
     display: table;
}
.clearfix:after{
     clear: both;
}
a{
     color:#0067ab;
     text-decoration:none;
}
a:hover{
     text-decoration:underline;
}
.form{
     width: 300px;
     margin: 0 auto;
}
input[type='text'], input[type='email'],
input[type='password'] {
     width: 200px;
     border-radius: 2px;
     border: 1px solid #CCC;
     padding: 10px;
     color: #333;
     font-size: 14px;
     margin-top: 10px;
}
input[type='submit']{
     padding: 10px 25px 8px;
     color: #fff;
     background-color: #0067ab;
     text-shadow: rgba(0,0,0,0.24) 0 1px 0;
     font-size: 16px;
     box-shadow: rgba(255,255,255,0.24) 0 2px 0 0 inset,#fff 0 1px 0 0;
     border: 1px solid #0164a5;
     border-radius: 2px;
     margin-top: 10px;
     cursor:pointer;
}
input[type='submit']:hover {
     background-color: #024978;
}

.platlogo{
     max-width: 100px;
     max-height: 30px;
}

.platlogo-background{
     background-color: #343a40!important;
     padding-top: 5px;
     padding-bottom: 5px;
}

.bg-dark{
     background-color: #343a40!important;
}
.text-white{
     color: #fff!important;
}

.ihide{
     display: none;
}

/*the background-color of Mr.FatBet*/
.bg-fat-primary{
     background-color: #33FFC7;
}

a.bg-fat-primary:hover{
     background-color: #46DFB5;
     color: white;
}

.sidebar[data-color="mrfatbet"]:after {
     background: #33FFC7;
     background: -moz-linear-gradient(top, #33FFC7 0%, #0D4032 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33FFC7), color-stop(100%, #0D4032));
     background: -webkit-linear-gradient(top, #33FFC7 0%, #0D4032 100%);
     background: -o-linear-gradient(top, #33FFC7 0%, #0D4032 100%);
     background: -ms-linear-gradient(top, #33FFC7 0%, #0D4032 100%);
     background: linear-gradient(to bottom, #33FFC7 0%, #0D4032 100%);
     background-size: 150% 150%;
}

.mylogo{
     width: 90px !important;
     height: 90px !important;
     overflow: hidden !important;
     border-radius: 50% !important;
     margin: 10px auto !important;
     box-shadow: 0 4px 8px rgba(0,0,0,.05) !important;
     position: relative !important;
     z-index: 1 !important;
     background-color: #fff;
}

.bg-head-fat-primary{
     background: rgb(51,255,199);
     background: linear-gradient(90deg, rgba(51,209,255,1) 0%, #FF336B 100%);
}

.start-brand{
     font-weight: bold;
     color: #fff;
     padding: 5px;
}
.start-brand:hover{
     background-color: rgba(255,255,255,.2);
     color: rgba(255,255,255,.8);
     border-radius: 7px;
}

.m-auto{
     margin:auto;
     padding-left: .3rem;
}

.start-nav{
     color: #fff;
     padding: 5px;
     text-decoration: none;
}
.start-nav:hover{
     background-color: rgba(255,255,255,.2);
     color: rgba(255,255,255,.8);
     border-radius: 7px;
     text-decoration: none;
}

.btn-earn{
     background-color: transparent;
     border: 1px solid #fff!important;
     border-radius: 20px;
     color: #fff!important;
}

.btn-earn:hover{
     background-color: rgba(51,209,255,1);
     border-color: rgba(51,209,255,1)!important;
}

.intro{
     height: 100vh;
}

.white{
     color: white!important;
     border-color: white!important;
}

.leftcontent{
     animation-name: fadeInLeft;
     max-width: 50%;
     margin-right: auto;
     padding: 20px;
}
.rightcontent{
     animation-name: fadeInRight;
     max-width: 50%;
     margin-right: auto;
     padding: 20px;
}

.animated {
     padding-top:95px;
     margin-bottom:60px;
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
}

@-webkit-keyframes fadeInRight {
     0% {
          opacity: 0;
          -webkit-transform: translateX(200px);
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
     }
}
@keyframes fadeInRight {
     0% {
          opacity: 0;
          transform: translateX(200px);
     }
     100% {
          opacity: 1;
          transform: translateX(0);
     }
}

.fadeInRight {
     -webkit-animation-name: fadeInRight;
     animation-name: fadeInRight;
}

@-webkit-keyframes fadeInLeft {
     0% {
          opacity: 0;
          -webkit-transform: translateX(-200px);
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
     }
}
@keyframes fadeInLeft {
     0% {
          opacity: 0;
          transform: translateX(-200px);
     }
     100% {
          opacity: 1;
          transform: translateX(0);
     }
}

.fadeInLeft {
     -webkit-animation-name: fadeInLeft;
     animation-name: fadeInLeft;
}

.h-software{
     font-family: Montserrat;
     font-size: 250%;
     font-weight: bolder;
}

.pd-10{
     padding: 13px!important;
     margin: 10px;
}

.btn-intro-empty{
     background-color: transparent;
     border: 1px solid #fff!important;
     border-radius: 50px!important;
     color: #fff!important;
}

.btn-intro-empty:hover{
     background-color: #fff!important;
     color: rgba(51,209,255,1)!important;
}

.btn-intro-full{
     background-color: #fff !important;
     color: rgba(51,209,255,1)!important;
     border-radius: 50px!important;
}
.btn-intro-full:hover{
     background-color: rgba(51,209,255,1) !important;
     color: #fff!important;
}

.content-heading{
     font-family: Montserrat;
     font-weight: 400;
     font-size: 250%;
}

.content-subtext{
     padding-top: 3%;
}

.mrfatbet-primary-text{
     color: rgba(51,209,255,1);
}

.features{
     padding-top: 8vh;
     padding-bottom: 8vh;
}

.feature:hover .feature-icon{
     color: #FF336B;
}

.feature-icon{
     font-size: 250%;
     padding-bottom: 5vh;
}

.feature-heading{
     font-family: Montserrat;
     font-weight: 700;
     font-size: 100%;
}

.equal {
     display: flex;
     display: -webkit-flex;
     flex-wrap: wrap;
}

.usage{
     background-color: #f9f9f9;
}

.pricing{
     background: linear-gradient(90deg, rgba(51,209,255,1) 0%, #FF336B 100%);
     padding-top: 15vh;
     padding-bottom: 15vh;
}

.pricing .card{
     transition: all 0.2s;
     box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing .card:hover {
     margin-top: -.25rem;
     margin-bottom: .25rem;
     box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.pricing .card:hover .btn {
     opacity: 1;
}

.period{
     font-size: 35%;
}

.card-title{
     color: #6c757d;
     font-family: Montserrat;
     font-size: 80%;
}
.card{
     border-radius: 1rem!important;
}

.popular{
}

.pricing-button, .register-button{
     color: #fff!important;
     background-color: rgba(51,209,255,0.6) !important;
     border-radius: 2rem!important;
     font-size: 150%!important;
     margin: 3vh!important;
     padding-left: 3vh!important;
     padding-right: 3vh!important;
}
.card:hover .pricing-button{
     background-color: rgba(51,209,255,1) !important;
}

.fa-ul li{
     padding: 1.5vh;
}

.register{
     padding-top: 10vh;
     padding-bottom: 10vh;
}

.register-button{
     background-color: rgba(51,209,255,1) !important;
}
.register-button:hover{
     background-color: #FF336B!important;
}

.pulse {
     overflow: visible;
     position: relative;
}
.pulse:hover{
     animation: none;
}
.pulse:hover:before{
     animation: none;
}
.pulse:before {
     content: '';
     display: block;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: inherit;
     border-radius: inherit;
     transition: opacity .3s, transform .3s;
     animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
     z-index: -1;
}
@keyframes pulse-animation {
     0% {
          opacity: 1;
          transform: scale(1);
     }
     50% {
          opacity: 0;
          transform: scale(1.5);
     }
     100% {
          opacity: 0;
          transform: scale(1.5);
     }
}

.footer-container{
     color: #fff;
     background-color: rgba(51,209,255,1) !important;
     padding-top: 5vh;
}
.footer-heading{
     font-family: Montserrat;
     font-weight: 600;
     font-size: 150%;
}

footer hr{
     border-color: #FF336B;
     width: 60px!important;
}

.footer-link{
     text-decoration: none;
     color: #fff;
}

.footer-link:hover{
     text-decoration: none;
     color: #fff;
}

.footer-social-icon{
     color: #fff;
     font-size:200%;
     padding: .5vw;
}

html{
     scroll-behavior: smooth;
}

.nohover:hover{
     color: #9A9A9A!important;
}

.status-active{
     color: #33FFC7;
}

.status-inactive{
     color: #FF336B;
}

.bg-white{
     background-color: #fff;
}

.margin-1{
     margin: 1%;
}
.padding-2{
     padding: 2%;
}
.corner-rounded{
     border-radius: 20px;
}

.no-bullets{
     list-style-type: none;
}

#paymentContainer .form-control{
     width: 100% !important;
}

#paymentContainer .countrypicker{
     margin-top: 10px;
}

#paymentContainer .form-row label{
     font-family: Montserrat;
     font-weight: normal;
     margin-bottom: 0px
}

#paymentContainer .form-check-label{
     margin-left: 1.25vw;
}

#paymentContainer .form-check{
     padding-left: .25rem;
}

.backbutton{
     color: #fff!important;
     background-color: rgba(51,209,255,0.6) !important;
     border-radius: 2rem!important;
     font-size: 100%!important;
     margin: 3vh!important;
     padding-left: 3vh!important;
     padding-right: 3vh!important;
}

.backbutton:hover{
     background-color: rgba(51,209,255,1) !important;
}

.pay-button{
     color: #fff!important;
     background-color: rgba(51,209,255,0.6) !important;
     border-radius: 2rem!important;
     font-size: 150%!important;
     margin: 3vh!important;
     padding-left: 3vh!important;
     padding-right: 3vh!important;
}

.pay-button:hover{
     background-color: rgba(51,209,255,1) !important;
}

#paymentDetailsContainer{
     padding-top: 5vh;
}

.persErrorField{
}