:root{
    --purple: #740189;
    --yellow: #FFC107;
    --black: #000;
    --bs-gray: #f1f1f1;
}

body{
    background-color: #152733;
}
.w-500{
    width: 500px;
}
.login-card{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: #09141a;
    border-color: #09141a;
}
p,h1,h2,h3,h4,h5,h6{
    color: #fff;
}
input{
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
    border-radius: 3px !important;
}
input:focus{
    background-color: transparent !important;
    border-color: #fff !important;
    box-shadow: none !important;
}
.btn{
    background-color: #0093ff !important;
    border-color: #0093ff !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.login-container{
    min-height: 100vh;
}
.contact-container{
    min-height: 50vh;
}
.logo-container {
    text-align: center;
    margin-bottom: 20px;
}
.logo {
    max-width: 100px;
    height: auto;
}

.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate{
    color: #fff  !important;
}
.table.dataTable tbody tr{
    background-color: transparent !important;
    border-top: 1px solid #fff !important;
}

.table-responsive{
    background-color: #142733;
    padding: 10px;
    border-radius: 10px;
}

.pricing-card {
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #142733;
}

.selected {
    border: 2px solid #fff;
}
.h-610{
    min-height: 460px;
}
.bg-cus-card{
    background-color: #1577A3;
}
.btn-yellow{
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: var(--black) !important;
    padding: 13px !important;
}

.btn-yellow:hover{
    background-color: var(--black) !important;
    border-color: var(--black) !important;
    color: #fff !important;
}

.btn-purple{
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
    color: #fff !important;
    padding: 13px !important;
}

.btn-purple:hover{
    background-color: var(--black) !important;
    border-color: var(--black) !important;
    color: #fff !important;
}
.font-weight-600{
    font-weight: 600;
}
.verifier {
    font-style: italic;
    background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #FDB931 30%, #8A6E2F 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    background-clip: text;
    color: transparent;
}


.card{
    border-radius: 20px;
}
.verify_single_email_card{
    background-color: var(--purple);
    border-color: var(--purple);
    padding: 20px;
    border-radius: 20px;
}

.verify_single_email_card input {
    background: #fff !important;
    border-radius: 8px !important;
    color: #000 !important;
    flex-grow: 1;
    font-size: 18px;
    height: 60px;
    padding: 0 24px;
}
.verify_single_email_card input:focus {
    color: #000  !important;
}

.bg-gray{
    background-color: var(--bs-gray);
}

.bg-cus-secondary{
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}
.h-265{
    height: 220px; !important;
}


#msform {
    text-align: center;
    position: relative;
    margin-top: 20px
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

.form-card {
    text-align: left
}

#msform fieldset:not(:first-of-type) {
    display: none
}

.card {
    z-index: 0;
    border: none;
    position: relative
}


.steps {
    font-size: 25px;
    color: gray;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: right
}

.fieldlabels {
    color: gray;
    text-align: left
}

#progressbar {
    /*margin-bottom: 30px;*/
    overflow: hidden;
    color: lightgrey
}

#progressbar .active {
    color: #27AAE2;
}

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 31%;
    float: left;
    position: relative;
    font-weight: 400
}

#progressbar #account:before {
    font-family: FontAwesome;
    content: "\f1c0"
}

#progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f058"
}

#progressbar #payment:before {
    font-family: FontAwesome;
    content: "\f887"
}


#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1
}

#progressbar li.active:before,
#progressbar li.active:after {
    background: #27AAE2
}

.progress {
    height: 20px;
    margin: 1.5rem;
}

.progress-bar {
    background-color: #27AAE2;
}

.text-cus-primary{
    color: #27AAE2;
}

.card-container-cus {
    perspective: 1000px;
}

.card-cus {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.card-cus:hover {
    transform: rotateY(180deg);
}

.card-body-cus {
    backface-visibility: hidden;
}

.card-back-cus {
    transform: rotateY(180deg);
}

.panel .front{
    -webkit-transform: rotateX(0) rotateY(0);
    transform: rotateX(0) rotateY(0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.panel .back{
    position:absolute;
    -webkit-transform: rotateY(-179deg);
    transform: rotateY(-179deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.panel.flip .front{ transform: rotateY(179deg) }
.panel.flip .back{ -webkit-transform: rotateX(0) rotateY(0); }

.panel {
    -webkit-perspective: 800px;
    perspective: 800px;
}


/* Common styles for all devices */

/* Styles for laptops and desktops */
@media only screen and (min-width: 1024px) {
    .h-610{
        min-height: 530px;
        /*min-height: 460px;*/
    }
}

/* Styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .h-610{
        min-height: 610px;
    }
}

@media only screen and (max-width: 767px) {
    .login-container{
        min-height: 80vh;
    }
    .contact-container{
        margin-top: 20px;
        marginn-bottom: 20px;
        min-height: 50vh;
    }
}