/* Template */
:root
{

}
* {
    padding: unset;
    line-height: 1.4;
    font-family: 'Roboto', sans-serif !important;
}
a {
    cursor: pointer;
}
html
{
    font-size: 16px !important;
    background: #fff;
    font-family: 'Roboto', sans-serif !important;
}
body {
    background:#fff;
}
a:hover {text-decoration: unset !important;}
.onlyweb {display: block !important;}
.onlymob {display: none !important;}
.onlywebflex {display: flex !important;}
.onlymobflex {display: none !important;}
@media only screen and (max-width: 767px)
{
    html
    {
        font-size: 15px !important;
    }
    .onlyweb {display: none !important;}
    .onlymob {display: block !important;}
    .onlywebflex {display: none !important;}
    .onlymobflex {display: flex !important;}
}

/*scrollbar*/
::-webkit-scrollbar {
    width: 3px;
    background: transparent;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px transparent;
    background: transparent;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #ffffff76;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #ffffff76;
}
/* end scrollbar*/


/* bg */
.pre-login
{
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/bg-01.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
    background-color: #fff;
    background-size: 100%;
    background-position-y: -135vh;
}
.pre-default
{
    background:#fff;
    position: relative;
    min-height: 100vh;
}
.content-box.pre-bg_02
{
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/bg-12.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
    background-color: #fff;
    background-size: 100%;
    background-position-y: -130vh;
}
.pre-footer
{
    font-family: Roboto;
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #717171;
    padding: 0rem 0 1rem;
}
.content-01
{
    padding: 6rem 17% 7rem;
    min-height: 100vh;
    background-color: #fff;
}
.content-02 {
    padding: 6rem 17% 5rem;
}
.content-03 {
    padding: 6rem 17% 5rem;
}
.content-05
{
    background: url('../images/looking-partner-bg.png') top;
    max-width: 400px;
    margin:auto;
    /*background: linear-gradient(to top, rgba(54, 69, 79, 0.7), rgba(0, 0, 0, 0)), url('../images/partner-bg.png');*/
    height: 100vh;
    background-size: 100%;
    background-repeat: no-repeat;

}
.flex-login
{
    width: 500px;
    margin: auto;
    position: relative;
}
@media only screen and (max-width: 767px)
{
    .pre-login
    {
        background-position-y: -50px;
    }
    .content-01
    {
        padding: 0 1.25rem 7rem;
    }
    .content-02 {
        padding: 5rem 1.25rem;
    }
    .content-03 {
        padding: unset;
        position: fixed !important;
        bottom: 0;
        left: 0;
        top: 65px;
    }
    .flex-login
    {
        width: 100%;
        margin: unset;
        padding-top: 42vh;
        padding-bottom: 3rem;
    }
    .content-box.pre-bg_02
    {
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/bg-12.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        min-height: 100vh;
        background-color: #fff;
        background-size: 100%;
        background-position-y: -50px;
    }
}







/* nav */
.nav-01
{
    padding: 1.125rem 8%;
    background-color: #00adee;
    display: flex !important;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;

}
.nav-01 img {
    width: 7.419rem;
    height: auto;
}
.nav-01-language
{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.nav-01-language b {
    font-size: 0.875rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: uppercase;
}
.nav-01-language i {
    color: #000;
    font-size: 0.675rem;
    margin-left: 0.313rem;
}
.nav-pre-01
{
    padding: 1.5rem 8%;
    display: flex !important;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.nav-pre-01-language
{
    display: flex;
    align-items: center;
}
.nav-pre-01-language b {
    font-size: 0.875rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
    text-transform: uppercase;
}
.nav-pre-01-language i {
    color: #000;
    font-size: 0.675rem;
    margin-left: 0.313rem;
}
.login--logo
{
    width: 15.203rem;
    height: auto;
}
.web-nav-header
{
    padding: 1.1rem 1.25rem;
    z-index: 10;
    position: fixed;
    -webkit-backdrop-filter: blur(4.1px);
    backdrop-filter: blur(4.1px);
    background-color: #fff;
    width: 100%;
    top: 0;
    
}
.web-nav-header img {
    width: 1.5rem;
    height: auto;
}
.web-nav-header .web-nav-language
{
    display: inline-flex;
    align-items: center;
}
.web-nav-header .web-nav-language b
{
    font-size: 0.875rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #00adee;
    text-transform: uppercase;
}
.web-nav-header .web-nav-language i
{
    margin-left: 0.625rem;
    font-size: 1rem;
    color: #00adee;
}
.web-nav-header .web-nav-short-nav
{
    
    cursor: pointer;
    margin-right: 1rem;
    border-right: 1px solid #fff;
    padding-right: 1rem;
    display: flex;
    align-items: center;
}
.web-nav-header .web-nav-short-nav i {
    font-size: 1.125rem;
    color: #fff;
    margin-right: 0.65rem;
}
.web-nav-header .web-nav-short-nav b {
    font-size: 1.125rem;
    color: #fff;
    font-size: 0.813rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.26px;
}
.web-nav-header .web-nav-left-top {
    width: 35%;
}
.web-nav-header .web-nav-center-top {
    width: 30%;
    text-align: center;

    font-size: 1.125rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #00adee;
}
.web-nav-header .web-nav-right-top {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: end;
}
.web-header--username
{
    font-size: 0.813rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #00adee;
}
.web-header--ranking
{
    font-size: 0.688rem;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #00adee;

    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    background-color: #f6faff;
}
.invite--box-web-header
{
    padding: 0.813rem 0.625rem;
    border-radius: 4px;
    background-color: #f6faff;
    cursor: pointer;
}
.invite--box-web-header:hover 
{
    opacity: 0.75;
}
.invite--box-web-header span {
    font-size: 0.688rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #00adee;
}
.invite--box-web-header b {
    font-size: 0.813rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #00adee;
}
.invite--box-web-header i {
    color: #00adee;
    font-size: 0.813rem;
}
.btn--logout-web
{
    padding: 0.315rem 1rem;
    border-radius: 4px;
    background-color: #00adee;

    font-size: 0.688rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    cursor: pointer;
}
.btn--logout-web:hover 
{
    opacity: 0.75;
}
.mob-nav-header
{
    padding: 1.1rem 1.25rem;
    z-index: 15;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #00adee;
}
.mob-nav-header .mob-nav-back
{
    width: 20%;
    color: #fff;
    font-size: 1.125rem;
}
.mob-nav-header .mob-nav-notification
{
    width: 20%;
    text-align: right;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: end;
}
.mob-nav-header .mob-nav-notification i {
    color: #00adee;
    font-size: 1.25rem;
}
.mob-nav-header .mob-nav-filter
{
    width: 20%;
    text-align: right;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: end;
}
.mob-nav-header .mob-nav-filter i {
    color: #fff;
    font-size: 0.5rem;
}
.mob-nav-header .mob-nav-filter span {
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: right;
    color: #fff;
    text-decoration: underline;
}
.mob-nav-header .mob-nav-title
{
    width: 70%;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: -0.16px;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mob-nav-header img {
    width: 6.419rem;
    height: auto;
}

@media only screen and (max-width: 767px)
{
    .nav-pre-01
    {
        padding: 1.5rem 1.25rem;
    }
    .nav-01
    {
        padding: 1.125rem 1.5rem;
    }
}

/* bottom nav */
.bottom-nav
{
    /*padding: 1.063rem 0 1.25rem;*/
    box-shadow: 0 10px 100px 0 rgba(85, 94, 104, 0.12);
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
}

.bottom-nav .active
{
    padding: 1.063rem 0 1.25rem;
    /*background-image: linear-gradient(to bottom, #ffe2d1 0%, rgba(255, 255, 255, 0) 100%);*/
}

.bottom-nav .bottom-nav-options
{
    width: 25%;
    text-align: center;
}
.bottom-nav .bottom-nav-options i
{
    color: #d0d0d0;
    font-size: 1.25rem;
}
.bottom-nav .bottom-nav-options div
{
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.83;
    letter-spacing: normal;
    text-align: center;
    color: #d0d0d0;
}
.bottom-nav .bottom-nav-options.bolded
{
    
}
.bottom-nav .bottom-nav-options.bolded i
{
    color: #00adee;
    font-size: 1.25rem;
}
.bottom-nav .bottom-nav-options.bolded div
{
    color: #00adee;
    font-weight: 400;
}



/* other */
.ml-auto
{
    margin-left: auto;
}
.flex-items-center {
    align-items: center;
    display: flex;
}

/* main default */
.main-template.max
{
    display: block;
}
.main-template.max .left-site
{
    width: 17%;
    max-height: 100vh;
    min-height: 100vh;
    overflow: auto;
    box-shadow: none;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    transition: all .5s ease-in;
    z-index: 10;
}
.main-template.max .right-site
{
    margin-left: 17%;
    position: relative;
    transition: all .5s ease-in;
    width: calc( 100% - 17% );
}

.main-template.min
{
    display: block;
}
.main-template.min .left-site
{
    width: 0%;
    max-height: 100vh;
    min-height: 100vh;
    overflow: auto;
    background-color: #00adee;
    position: fixed;
    top: 0;
    left: 0;
    transition: all .5s ease-in;
    z-index: 10;
}
.main-template.min .right-site
{
    margin-left: 0%;
    position: relative;
    transition: all .5s ease-in;
}
.main-template.max .web-nav-header{
    width: calc( 100% - 17% );
}
.main-template.min .web-nav-header{
    width: 100%;
}
.content-box
{
    position: relative;
}

@media only screen and (max-width: 767px)
{
    .main-template.max .left-site
    {
        display: none;
    }

    .main-template.min .left-site
    {
        display: none;
    }
    .main-template.max .right-site
    {
        margin-left: 0;
        width: 100%;
    }
    .main-template.max .right-site.float-bottom
    {
        position: fixed !important;
        bottom: 0;
        left: 0;
        height: 100vh;
        background-color: #00adee;
    }
    .main-template.min .right-site
    {
        margin-left: 0;
        width: 100%;
    }
    .main-template.max .web-nav-header{
        width: 100%;
    }
    .main-template.min .web-nav-header{
        width: 100%;
    }
    .content-box
    {
        position: relative;
    }
}


.btn--primary:hover{
    opacity: 0.7
}
.btn--primary
{
    /*border-radius: 30px;*/
    box-shadow: 0 26px 60px 0 rgba(33, 33, 33, 0.05);
    background-color: #00adee !important;
    padding: 0.5rem 1.375rem;
    min-width: 9.375rem;
    font-size: 0.938rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.15px;
    text-align: center;
    border-radius: 15px;
    color: #fff;
}

.btn--second
{
    font-size: 0.938rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #00adee;
    padding: 0.5rem;
    border-radius: 15px;
    background-color: transparent;
}
.btn--third
{
    font-size: 0.875rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #00adee;
    text-decoration: underline;
    cursor: pointer;
}
.btn--third:hover 
{
    opacity: 0.75;
}


/* form */
.form-box-new
{
    position: relative;
    background-color: white;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    border: solid 1px #dfdfdf;
    border-radius: 15px;
    margin-bottom: 1rem;
}
.form-box-new span {
    font-size: 0.875rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: -0.14px;
    text-align: left;
    color: #676767;
    white-space: nowrap;
}
.form-box-new input {
    background-color: transparent;
    width: 100%;

    font-size: 0.875rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.14px;
    text-align: left;
    color: #000;
}
.form-box-new textarea {
    width: 100%;
    background: transparent;
    outline: none !important;
    color: #000;
    font-size: 0.875rem;
    font-weight: 500;
}
.form-box-new:hover , .form-box-new:focus-within
{
    display: block;
    text-align: left;
    padding: 0.4rem 1.25rem;
}
.form-box-new:hover span , .form-box-new:focus-within span
{
    font-size: 0.625rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: -0.1px;
    text-align: left;
    color: #676767;
}
.form-box-new .btn-view-pass
{
    position: absolute;
    bottom: 0.75rem;
    right: 1.25rem;
}
.form-box-new .btn-view-pass i {
    color: #00adee;
    font-size: 0.85rem;
}
.closed-eye
{
    font-size: 1.15rem !important;
}
.form-control
{
    padding: 0;
    background-color: transparent;
    height: auto !important;
}

/*modal*/
.modal-content
{
    border-radius: 24px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    background-color: #fff;
}
.modal-header
{
    padding: 0.75rem 1.25rem;
}
.modal-header i {
    font-size: 0.875rem;
    color: #0000009d;
    position: absolute;
    right: 1.25rem;
    top: 0.8rem;
    cursor: pointer;
}
.modal-header i:hover {
    opacity: 0.75;
}
.modal-header .modal-title
{
    font-size: 0.875rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #00adee;
}
.modal-body
{
    padding: 1.5rem 1.25rem 1rem;
    text-align: center;
}
.modal-body.error i {
    color: #ff0f0f;
    font-size: 2rem;
}

.modal-body.error .modal-desc
{
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: -0.12px;
    text-align: center;
    color: #d67976;
}
.modal-body
{
    padding: 1.5rem 1.25rem 1rem;
    text-align: center;
}
.modal-body.success i.icon-icon6 {
    color: #00c808;
    font-size: 2rem;
}
.modal-body.success .modal-desc
{
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: -0.12px;
    text-align: center;
    color: #000000;
}



/* Site Nav */
.site-nav-user-box
{
    background: linear-gradient(rgba(0, 41, 88, 0.1), rgba(0, 41, 88, 1)), url('../images/deposit-acc-amount-bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: cover;

}
.site-nav-username 
{
    font-size: 0.938rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}
.site-nav-ranking span {
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}
.site-nav-invite-box
{
    font-size: 0.688rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
    background-color: #f1ad00;
    padding: 0.188rem 0.375rem;
    border-radius: 3px;
    margin-right: 1rem;
}
.assets-box--nav
{
    padding: 1.063rem 1.25rem;
    border-radius: 4px;
    background-color: #f6faff;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}
.assets-box--nav .assets-box-name span
{
    font-size: 0.688rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.85px;
    text-align: center;
    color: #00adee;
}

.assets-box--nav .assets-box-name i
{
    color: #00adee;
    font-size: 0.5rem;
}
.assets-box--nav .assets-box-value
{
    font-size: 0.875rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #00adee;
}
.assets-box--nav .wallet--eye
{
    color: #d0d0d0;
    font-size: 1.125rem;
}
.navigator-title-box
{
    padding: 0.5rem;
    background-image: linear-gradient(to left, rgba(246, 250, 255, 0.01), #f6faff, rgba(246, 250, 255, 0.01) );
    font-size: 0.688rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.85px;
    text-align: center;
    color: #00adee;
}
.navigator-listing
{
    border-radius: 10px;
    border-radius: 10px;
    padding: 0rem 1.25rem;
    margin: 1rem 0.75rem 1rem;
    border-radius: 5px;
    background-color: #f6faff;
}
.navigator-listing2
{
    border-radius: 10px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background-color: #fff;
    padding: 0 1.25rem;
}
.navigator
{
    display: flex;
    align-items: center;
    padding: 1.25rem 0rem;
    border-top: solid 1px #dfdfdf;
}
.navigator .i-logo 
{
    color: #d0d0d0;
    font-size: 1.25rem;
}
.navigator span {
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #d0d0d0;
}
.navigator i {
    color: #00adee;
    font-size: 0.65rem;
}

.navigator.bolded
{
    display: flex;
    align-items: center;
    padding: 1.25rem 0rem;
    border-top: solid 1px #00adee24;
}
.navigator.bolded .i-logo 
{
    color: #00adee;
    font-size: 1.25rem;
}
.navigator.bolded span {
    /*font-size: 0.688rem;*/
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #00adee;
}
.navigator.bolded i {
    color: #00adee;
    font-size: 0.65rem;
}
.top-nav--code
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 1.25rem 1.5rem;
}
.top-nav--code i 
{
    color: #00adee;
    font-size: 1rem;
}
.top-nav--code span 
{
    font-size: 20px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: -0.16px;
    text-align: center;
    color: #00adee;
}
.content--01
{
    padding: 10rem 1.25rem 5rem;
}
.invite-code-ss
{
    font-size: 0.75rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.83;
    letter-spacing: 0.24px;
    text-align: center;
    color: #545454;
}
.law_desc
{
    font-size: 0.813rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.54;
    letter-spacing: normal;
    text-align: left;
    color: #676767;
}
.faq-each
{
    display:flex;
    align-items: center;
    padding: 1.875rem 1.25rem;
    border-bottom: solid 0.5px #d4d4d4;
    margin: 0 -1.5rem;
}
.faq-each span 
{
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #00adee;
}
.faq-each i 
{
    color: #00adee;
    font-size: 0.75rem;
    margin-left: auto;
}


/* terms */
.terms-content
{
    font-size: 0.875rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}

/* About Us */
.about-date
{
    font-size: 0.5rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #999;
}
.about-title
{
    font-size: 1.375rem;
    font-weight: bold;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #3498db;
}
.about-desc
{
    font-size: 0.875rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}
.brand-listing
{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    row-gap: 1rem;
    column-gap: 1rem;
}
.amount-options-box
{
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 0.625rem;
    column-gap: 0.625rem;
}
.amount-options
{
    border-radius: 10px;
    border: solid 1px #00adee;
    background-color: #00adee;
    padding: 1rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #00adee;
}
@media only screen and (max-width: 767px)
{
    .brand-listing
    {
        display: grid;
        grid-template-columns: auto auto;
        row-gap: 1rem;
        column-gap: 1rem;
    }
    .amount-options-box
    {
        display: grid;
        grid-template-columns: auto auto auto;
        row-gap: 0.625rem;
        column-gap: 0.625rem;
    }
}

.loading-indicator-box
{
    position: fixed;
    top: 0;
    min-width: 100vw;
    min-height: 100vh;
    left: 0;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.65);
    overflow-y: hidden;
}
.loading-indicator
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    overflow-y: hidden;

}
.loading-text
{
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}


/* Breakcrumb */
.breakcrumb {padding-top:0.5rem;padding-bottom:1.5rem;display:flex;gap:0.625rem;align-items:center;}
.breakcrumb .previous {color: #00adee;font-size: 0.813rem;}
.breakcrumb .previous:hover {color: #00adeecc;font-size: 0.813rem;}
.breakcrumb i {color: #00adee;font-size: 0.813rem;}
.breakcrumb .now {color: #00adee;font-size: 0.813rem;font-weight: bold;}