@font-face {
    font-family: Fidex;
    src: url('/design/fonts/fidex.otf') format('opentype');
}

:root {
    --loading-grey: #ededed;
}

a {
    display: block;
    text-decoration: none !important;
}

ul {
    margin: 0;
    /* padding: 0; */
    list-style-type: none !important;
}

body {
    padding: 0;
    z-index: 0;
    margin: 0;
    font-family: Fidex !important;
    color: rgba(255, 255, 255, 0.815);
    background: #eff4f7 !important;
}

/*elements*/
.pad0 {
    padding: 0 !important
}

.pad20 {
    padding: 20px
}

/*elements*/

/*------header--------*/
header {
    width: 100%;
    float: left;
    height: 85px;
    padding-left: 50px;
    background: #fff;
    box-shadow: 0px 10px 20px 0px #0000001a;
}

.mobileMenuButton {
    width: 60px;
    height: 60px;
    float: left;
    /* margin-right: 15px; */
    background-color: #ecf1f4;
    margin-top: 12px;
    /* background: url(/design/img/menu.svg) center center no-repeat,#ffffff; */
    background-size: 60%;
    text-shadow: 0px 0px 10px #616c7552;
    border-radius: 50px;
    /* box-shadow: 0px 0px 10px #050d1a14; */
    text-align: center;
    font-size: 40px;
    color: #616c75;
    padding-top: 6px;
    /* border: 1px solid #0000001a; */
    margin-left: 15px;
    display: none;
}

.mobileUserButton {
    width: 60px;
    height: 60px;
    float: right;
    margin-right: 15px;
    background-color: #ecf1f4;
    margin-top: -72px;
    /* background: url(/design/img/menu.svg) center center no-repeat,#ffffff; */
    background-size: 60%;
    text-shadow: 0px 0px 10px #333f4791;
    border-radius: 50px;
    /* box-shadow: 0px 0px 10px #050d1a14; */
    text-align: center;
    font-size: 40px;
    color: #616c75;
    padding-top: 3px;
    display: none;
    /* border: 1px solid #0000001a; */
    /* margin-left: 17px; */
}


.headerLeft {
    width: auto;
    float: left;
    height: 100%;
    margin-right: 50px;
}

.fdxAccountWth {
    width: 240px !important;
    float: right;
    height: 100%;
    overflow: hidden;
}

    .fdxAccountWth .cricleLoginOut {
        width: 120px;
        /* z-index: 5555555555556; */
    }

    .fdxAccountWth .headerRightBgBack {
        margin-right: -85px;
    }

.headerRight {
    width: 380px;
    float: right;
    height: 100%;
    overflow: hidden;
}

.headerLang {
    float: right;
    width: auto;
    margin-top: 20px;
    cursor: pointer;
    position: relative;
    /* z-index: 5555555555555; */
    border-radius: 5000px;
    background: #fff;
}

    .headerLang.open {
        position: relative;
        /* z-index: 5555555555555; */
        /* box-shadow: 0px 0px 10px #000; */
        border-radius: 5000px;
        background: #fff;
    }

.langIcon {
    float: left;
    width: 50px;
    height: 50px;
    background: #308ba7;
    font-size: 25px;
    text-align: center;
    padding-top: 8px;
    color: #fff;
    border-radius: 50px;
    box-shadow: 0px 0px 10px #072e4b3b;
}

.langText {
    width: auto;
    float: left;
    padding-left: 12px;
    padding-top: 10px;
    font-size: 20px;
    padding-right: 10px;
}

    .langText i {
        font-size: 25px !important;
        position: relative;
        top: 1px;
    }

    .langText ul {
        display: none
    }

.logo {
    width: auto;
    float: left;
    padding-top: 13px;
    padding-bottom: 10px;
}

    .logo img {
        /* height: 60px; */
        float: left;
        margin-top: 10px;
    }

.headerMenu {
    width: auto;
    float: left;
    height: 100%;
    padding: 0;
    margin: 0;
}

    .headerMenu ul {
        margin: 0;
        padding: 0;
    }

    .headerMenu li {
        float: left;
    }

        .headerMenu li a {
            display: block;
            color: #1d1e2a;
            transition: 0.4s;
            padding: 31px 10px 30px 10px;
        }

            .headerMenu li a:hover {
                background: #ebf0f4
            }

.headerRightBg {
    width: 340px;
    height: 100%;
    float: left;
    box-shadow: -1px 3px 10px #00000061;
}

    .headerRightBg:before {
        content: '';
        float: left;
        transition: 0.4s all;
        width: 100%;
        height: 20px;
        background: #308ba7;
        transform: skew(264deg,310deg);
    }

.headerRightBgBack {
    width: 250px;
    float: right;
    margin-top: -85px;
    margin-right: -100px;
    box-shadow: -1px 3px 10px #00000061;
}

    .headerRightBgBack:before {
        content: '';
        float: left;
        transition: 0.4s all;
        width: 100%;
        height: 20px;
        box-shadow: -1px 3px 10px #00000061;
        background: #308ba7;
        transform: skew(264deg,310deg);
    }

.topHeader {
    width: 100%;
    float: left;
    height: 40px;
}

.topHeaderLeft {
    width: 50%;
    float: left;
    height: 100%;
    overflow: hidden;
}

.topHeaderRight {
    width: 100%;
    float: right;
    position: absolute;
    /* padding-top: 5.5px; */
    z-index: -1;
}

.topHeaderRightBg {
    background: #308ba7;
    width: 100%;
    float: right;
    transform: skew( 262deg, 310deg );
    box-shadow: -1px 3px 10px #00000061;
}

.topHeaderRightBgBack {
    background: #308ba7;
    width: 500px;
    float: left;
    z-index: -1;
    margin-left: -50px;
    transform: skew( 87deg, 310deg );
    box-shadow: -1px 3px 10px #0000002b;
}

.topHeaderLeftText {
    position: relative;
    z-index: 555;
    color: #1d395f;
    margin-top: 10px;
    padding-left: 65px;
}

.cricleRegisterOut {
    width: 100px;
    height: 40px;
    float: left;
    text-align: center;
    padding-top: 6px;
    z-index: 78878;
    margin-left: 85px;
    margin-top: 3px;
    color: #1d1e2a;
    border-radius: 30px;
    position: relative;
    font-size: 16px;
    transition: 0.4s;
    background: #fff;
    box-shadow: 0px 10px 10px #00000026;
}

    .cricleRegisterOut i {
        font-size: 22px;
        position: relative;
        top: 3px;
    }

.cricleLoginOut {
    width: 100px;
    height: 40px;
    float: left;
    text-align: center;
    padding-top: 6px;
    z-index: 1000;
    margin-left: 30px;
    color: #1d1e2a;
    border-radius: 30px;
    position: relative;
    font-size: 16px;
    transition: 0.4s;
    background: #fff;
    margin-top: 3px;
    box-shadow: 0px 10px 10px #00000026;
}

    .cricleLoginOut i {
        font-size: 22px;
        position: relative;
        top: 3px;
    }

    .cricleLoginOut:hover,
    .cricleRegisterOut:hover {
        background: #eef3f6
    }

/*------header--------*/

/*slider*/
#slider {
    z-index: 0;
    position: relative;
    width: 100%;
    float: left;
}

.carousel-inner img {
    width: 100%;
}

.lineLeft {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff;
    left: 20%;
    opacity: 0.1;
    z-index: 99999;
}

.lineCenter {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff;
    left: 40%;
    opacity: 0.1;
    z-index: 99999;
}

.lineRight {
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff;
    left: 89%;
    opacity: 0.1;
    z-index: 99999;
}

.slidingLine1 {
    position: absolute;
    width: 2px;
    height: 40px;
    background-color: #ffffff8c;
    animation-delay: 0s;
    animation-duration: 6.4s;
    animation-fill-mode: forwards;
    animation-name: slidingLine;
    animation-iteration-count: 9999999;
    top: 50%;
    left: 20%;
    opacity: 1;
    z-index: 99999;
}

@keyframes slidingLine {

    0% {
        opacity:;
        top: 10%;
    }

    50% {
        opacity:;
        top: 90%;
    }

    100% {
        opacity:;
        top: 10%;
    }
}

.slidingLine2 {
    position: absolute;
    width: 2px;
    height: 40px;
    background-color: #ffffff8c;
    animation-delay: 0s;
    animation-duration: 8.4s;
    animation-fill-mode: forwards;
    animation-name: slidingLine;
    animation-iteration-count: 9999999;
    top: 50%;
    left: 40%;
    opacity: 1;
    z-index: 99999;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

    .carousel-indicators .active {
        opacity: 1;
    }

.carousel-control-next,
.carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    opacity: 0.7;
    transition: opacity .15s ease;
}

.carousel-control-next-icon {
    right: 0;
    bottom: 70px;
    position: absolute;
    margin-top: -35px;
}

.carousel-control-prev-icon {
    right: 200px;
    position: absolute;
    bottom: 70px;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    display: inline-block;
    width: 50px;
    color: #f9d653;
    line-height: 3;
    font-size: 24px !important;
    height: 70px;
}
/*---slider-----*/

.img-responsive {
    max-width: 100%
}

/*box-item*/

.box-item {
    overflow: hidden;
    /* background: #f6dd30; */
}

.item-detail {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 30px 30px 50px 30px !important;
    z-index: 11 !important;
    -webkit-backface-visibility: hidden !important;
    -moz-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

    .item-detail .title {
        color: #fff !important;
        font-size: 1.2em !important;
    }

.box-item .group {
    color: #fed13e;
    letter-spacing: 0.25px;
    font-size: 0.85em;
}

.box-item figure:after {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 8;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    background: transparent;
    background: -webkit-linear-gradient(transparent, rgba(0,0,0,0.75));
    background: -o-linear-gradient(transparent, rgba(0,0,0,0.75));
    background: -moz-linear-gradient(transparent, rgba(0,0,0,0.75));
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
}

.box-item img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .7s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all .7s cubic-bezier(0.23, 1, 0.32, 1);
}

.box-item:hover img {
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}

.hover {
    background: #fdb23396;
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    z-index: 4;
    transition: 0.4s;
}

.box-item:hover .hover {
    top: 0
}

.line-wrap {
    width: 100%;
    height: 130px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #050d1a54;
}

.line-wrap-right {
    color: #fff !important;
    font-size: 30px;
    float: right;
    margin-right: 80px;
    margin-top: 50px;
    position: relative;
    z-index: 888;
}

/*box-item*/

/*----footer-----*/
footer {
    /* min-height: 500px; */
    background: url(/design/img//service-bg.svg), linear-gradient(to bottom,#ffffff 0,#f8f8f9 100%);
    width: 100%;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    /* padding-top: 50px; */
    padding-left: 50px;
    padding-bottom: 50px;
    color: #242f39;
}

    footer .col-md-3 {
        text-align: center
    }

    footer h4 {
        border-bottom: 1px solid #ffffff85;
        padding-bottom: 10px;
    }

    footer ul {
        margin: 0;
        padding: 0;
        padding-top: 10px;
    }

        footer ul li a {
            width: 100%;
            float: left;
            padding-top: 10px;
            padding-bottom: 10px;
            transition: 0.4s;
            color: #060606;
        }

            footer ul li a:hover {
                color: #308ba7 !important;
            }

.footer-bottom-white {
    width: 100%;
    float: left;
    padding-top: 20px;
    /* min-height: 100px; */
    padding-bottom: 20px;
    color: #ffffffbf;
    text-align: center;
    background: #fff;
    box-shadow: 1px -6px 10px #0000001a;
}

    .footer-bottom-white .owl-item {
        box-shadow: none
    }

    .footer-bottom-white img {
        width: 160px;
        background-color: #fff;
    }

.footer-bottom {
    width: 100%;
    float: left;
    padding-top: 25px;
    height: 70px;
    color: #000000bf;
    text-align: center;
    background: #f9f9fa;
    box-shadow: 1px -6px 10px #00000005;
}

.footer-logo {
    /* width: 100%; */
    margin-bottom: 20px;
    margin-top: 120px;
    /* margin-left: 30px; */
}

.social-icons {
    width: 100%;
    float: left;
}

    .social-icons a {
        background: #308ba7;
        padding: 10px;
        width: 50px;
        height: 50px;
        display: inline-block !important;
        color: #fff;
        font-size: 20px;
        transition: 0.4s;
        margin-top: 30px;
        margin-right: 2px;
        margin-left: 2px;
        text-shadow: 0px 10px 10px #0000004d;
        box-shadow: 0px 10px 10px #00000026;
    }

        .social-icons a:hover {
            color: #000 !important
        }

/*----footer-----*/

/*corporate*/
.img-full {
    width: 100%;
}

.corporate {
    background: url(/design/img/footer.svg), linear-gradient(to left,#050d1a 0,#3d4b53 100%);
    min-height: 500px;
    padding: 50px;
    background-size: 100%;
    overflow: hidden;
}

.item-cricle {
    width: 400px;
    height: 400px;
    position: absolute;
    right: -250px;
    top: 80%;
    margin-top: -200px;
    border: 30px solid #308ba7;
    border-radius: 500px;
}

.item-arrow {
    background: url(/design/img/arrow.svg) no-repeat center center;
    width: 300px;
    height: 100%;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100%;
}

.item-img {
    width: 300px;
    float: right;
    border-radius: 500px;
    right: 0;
    margin-top: 60px;
    box-shadow: 0px 1px 20px 18px #2d3840;
}

.item-dotted {
    background: url(/design/img/dotted.svg) no-repeat center center;
    width: 250px;
    height: 100%;
    float: left;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -50px;
    background-size: 100%;
}

.item-text {
    padding-top: 100px;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.item-head {
    color: #308ba7;
    text-shadow: 0px 10px 10px #00000057;
}

    .item-head hr {
        border-color: #308ba7cc;
    }

.item-section {
    color: #ffffffe0;
    text-shadow: 0px 10px 10px #00000057;
}

/*main page icon set*/
.item-horizontal {
    background: url(/design/img/item-bg.png) no-repeat;
    background-size: 100%;
    padding: 50px;
    background-color: #308ba7;
    text-shadow: 0px 10px 10px #00000029;
}

.item-img-cricle {
    vertical-align: middle;
    border-style: none;
    background: #2f3841;
    box-shadow: 1px 1px 20px 5px #00000026;
    border-radius: 500px;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    margin-bottom: 10px;
    padding-top: 26px;
}
/*main page icon set*/

/*main page video*/

.item-horizontal-video {
    padding: 50px;
    background: url(/design/img/video_bg.svg) left center no-repeat, linear-gradient(to left,#525d64 0,#131c28 60%);
    background-size: 100%;
    background-color: #36434b;
    text-shadow: 0px 10px 10px #00000029;
    min-height: 400px;
    padding-top: 100px;
}

.item-video-bg {
    background: #00000061
}

.item-video-img {
    text-align: center;
    border-radius: 5000px;
    padding: 50px;
    margin-left: 50px;
    box-shadow: 1px -1px 20px 20px #0000002e;
}

    .item-video-img img {
        height: 300px
    }
/*main page video*/

/*btns*/

.fdxBtn {
    width: 100%;
    min-height: 50px;
    border-radius: 50px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    background: #308ba7;
    color: #fff;
    text-align: center;
    font-size: 19px;
    padding-top: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: 0.4s;
    cursor: pointer;
}

a.fdxBtn:hover {
    color: #fff
}

.fdxBtn a {
    color: #fff !important;
    display: block;
    width: 100%;
    height: 50px;
    /* padding-top: 12px; */
    float: left;
}

.fdxBtn:hover {
    background: #000;
}

.fdxBtnSuccess {
    width: 100%;
    min-height: 50px;
    border-radius: 50px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    background: #16cf40;
    color: #fff;
    text-align: center;
    font-size: 19px;
    padding-top: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: 0.4s;
    cursor: pointer;
}

a.fdxBtnSuccess:hover {
    color: #fff
}

.fdxBtnSuccess a {
    color: #fff !important;
    display: block;
    width: 100%;
    height: 50px;
    /* padding-top: 12px; */
    float: left;
}

.fdxBtnSuccess:hover {
    background: #000;
}

.fdxBtnDanger {
    width: 100%;
    min-height: 50px;
    border-radius: 50px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    background: #ff4949;
    color: #fff;
    text-align: center;
    font-size: 19px;
    padding-top: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: 0.4s;
    cursor: pointer;
}

a.fdxBtnDanger:hover {
    color: #fff
}

.fdxBtnDanger a {
    color: #fff !important;
    display: block;
    width: 100%;
    height: 50px;
    /* padding-top: 12px; */
    float: left;
}

.fdxBtnDanger:hover {
    background: #000;
}
/*btns*/


/*road map*/

.road-icon {
    width: 115px;
    height: 115px;
    float: left;
    background: #308ba7;
    color: #fff;
    text-align: center;
    box-shadow: 0px 0 20px 0px #0000003d;
    text-shadow: 0px 0 17px #0000002e;
    padding-top: 15px;
    font-size: 52px;
    margin-right: 40px;
    margin-left: 40px;
    margin-bottom: 70px;
    position: relative;
    bottom: -40px;
    border-radius: 500px;
    z-index: 7887;
    transition: 0.8s;
    cursor: pointer;
    border: 8px solid #57666f;
}

    .road-icon:hover {
        transform: rotate( 360deg );
    }

.block-bg-animate-wrap {
    position: absolute;
    top: calc(50% - .5rem);
    width: 100%;
    left: 0;
    z-index: 0;
    height: 15px;
    box-shadow: 0 5px 20px -5px rgb(16 16 16 / 14%);
}

    .block-bg-animate-wrap > div {
        width: 100%;
        height: 100%;
        background: #505b62;
        box-shadow: 0 0 10px 0 rgb(16 16 16 / 14%);
    }

        .block-bg-animate-wrap > div > div {
            width: 3rem;
            height: 1rem;
            font-size: 35px;
            position: relative;
            top: -15px;
            color: #fec007;
            text-shadow: 0 0 7px #fabd07, 0 0 10px #f9bc07, 0 0 21px #fbbe07, 0 0 42px #fec007, 0 0 82px #fdc007, 0 0 92px #308ba7, 0 0 102px #fec107, 0 0 151px #fdbf07;
        }

.slider-move {
    -webkit-animation-name: slider-move;
    animation-name: slider-move;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes slider-move {
    0% {
        margin-left: 15%
    }

    to {
        margin-left: 80%
    }
}

@keyframes slider-move-vertical {
    0% {
        top: -15px
    }

    to {
        top: 80%
    }
}

.road {
    background: url(/design/img/item-bg.png), linear-gradient(to bottom,#24303b 0,#3d4b53 100%);
    min-height: 500px;
    padding: 50px;
    overflow: hidden;
}

    .road ul {
        margin: 0;
        padding: 0;
        width: 100%;
        float: left;
    }

        .road ul li {
            position: relative;
            float: left;
        }

.road-item-box {
    background: #308ba7;
    color: #fff;
    padding: 10px;
    border-radius: 50px;
    position: absolute;
    top: 190px;
    width: 85%;
    text-align: center;
    height: 75px;
    font-size: 20px;
    z-index: 5478454;
    box-shadow: 0px 0 20px 20px #2a3236bd;
    left: 18px;
    cursor: pointer;
}

@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);
    }
}

.road-item-box:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.road-item-box::after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: -10px;
    border-style: solid;
    border-width: 0 15px 10px 15px;
    border-color: transparent transparent #308ba7 transparent;
}

.mt-120 {
    margin-top: 120px
}
/*road map*/
/*leaders*/
.owl-carousel {
    border-radius: 50px;
    box-shadow: 0 0 20px 7px #505b6226;
}

.owl-item img {
    /* border-radius: 50px; */
}

.leaders_prev {
    border-radius: 52px;
    background: #fec007;
    position: absolute;
    width: 60px;
    transition: 0.4s;
    height: 36px;
    text-align: center;
    font-size: 24px;
    top: 0;
    padding-top: 2px;
    cursor: pointer;
    right: 80px;
    box-shadow: 0 0 20px 7px #505b6226;
}

.leaders_next {
    border-radius: 52px;
    background: #fec007;
    width: 60px;
    height: 36px;
    transition: 0.4s;
    text-align: center;
    cursor: pointer;
    position: absolute;
    padding-top: 2px;
    top: 0;
    right: 10px;
    font-size: 24px;
    box-shadow: 0 0 20px 7px #505b6226;
}

.leaders_nav:hover {
    background: #505b62;
    color: #fff;
}

.item-leaders {
    padding: 50px;
    text-shadow: 0px 10px 10px #00000029;
    float: left;
    width: 100%;
    background: white;
}
/*leaders*/

/*Login and Register*/

.login-register-out {
    width: 80%;
    margin: 0 auto;
    background: white;
    box-shadow: 0px 0 20px 6px #00000029;
    border-radius: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: 600px;
    padding-bottom: 50px;
    padding-top: 50px;
    background: url(/design/img//service-bg.svg) center bottom;
    background-size: cover;
    /* opacity: 0.8; */ background-color: #fff;
}

    .login-register-out.register-bg {
        background: url(/design/img/login-register-bg.svg) center bottom;
        background-size: cover;
    }

.faq-bg {
    width: 80%;
    margin: 0 auto;
    background: white;
    box-shadow: 0px 0 20px 6px #00000029;
    border-radius: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: 600px;
    background: url(/design/img/faq-bg.svg) center bottom;
    background-size: contain;
    background-color: white;
}

.radius-box {
    width: 80%;
    margin: 0 auto;
    background: white;
    box-shadow: 0px 0 20px 6px #00000029;
    border-radius: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    min-height: 600px;
}

.div-center {
    margin: 0 auto;
    float: none !important
}

.login-register-box {
    background: #ffffff;
    width: 100%;
    float: left;
    box-shadow: 0px 0px 18px 4px #00000014;
    border-radius: 50px;
    padding: 30px;
    margin-top: 70px;
    margin-bottom: 70px;
}

.form-input {
    width: 100%;
    float: left;
    margin-bottom: 10px
}

    .form-input select {
        font-family: sans-serif;
    }

    .form-input textarea,
    .form-input select,
    .form-input input {
        width: 100%;
        float: left;
        height: 50px;
        padding-left: 20px;
        border-radius: 50px;
        border: 2px solid #00000057;
    }

        .form-input textarea.error,
        .form-input select.error,
        .form-input input.error {
            border: 2px solid #de2020;
        }

        .form-input input:disabled {
            cursor: no-drop
        }

        .form-input input:focus {
            outline: 0
        }

.login-register-box a {
    color: #000
}

#chkContract {
    float: left;
    margin-right: 5px;
    margin-top: 2px;
}

.g-recaptcha {
    transform: scale(0.90);
    transform-origin: 0 0;
}
/*Login and Register*/


/*breadcumb navi*/

.enopading {
    padding: 0 !important;
}

.wider-breadcrumb .fa-home {
    position: relative;
    top: 2px;
    margin-left: 5px;
    margin-right: 5px;
}

.wider-breadcrumb {
    background: #515c63;
    width: 100%;
    height: 70px;
    float: left;
    color: #ffffffbf;
    z-index: 555555555;
    position: relative;
    padding: 15px;
    box-shadow: inset 0px 20px 20px 0px rgb(0 0 0 / 16%);
}

    .wider-breadcrumb h3 {
        padding-top: 5px;
    }

    .wider-breadcrumb a {
        color: #ffffffbf;
        transition: 0.4s;
        display: inline-block !important;
    }

        .wider-breadcrumb a:focus, .wider-breadcrumb a:hover {
            color: #333e48;
            text-decoration: none;
        }

    .wider-breadcrumb span.delimiter {
        margin: 0 1.429em;
        color: #fff;
    }

        .wider-breadcrumb span.delimiter + a {
            padding: 10px;
            background-color: #fec007;
            display: inline-block !important;
            color: #1d1e2a;
            border-radius: 30px;
            position: relative;
            top: -2px;
            transition: 0.4s;
            box-shadow: 0 0 4px 0px rgb(51 51 51 / 42%);
        }

    .wider-breadcrumb a:hover {
        color: #fff
    }

    .wider-breadcrumb span.delimiter + a:focus, .wider-breadcrumb span.delimiter + a:hover {
        background-color: #e8e8e8;
    }

    .wider-breadcrumb i {
        font-size: 24px !important;
        color: #fffc;
    }

/*breadcumb navi*/

/*faq*/
.faq-img-wth {
    padding-top: 50px;
    text-align: right;
}

    .faq-img-wth img {
        width: 80%;
    }

.faq-img-wth-two {
    padding-top: 50px;
    text-align: right;
}

/*faq*/

/*TransactionRoot*/
#pnlTransactionRoot {
    height: 100%
}

.topHeaderRight .owl-item {
    border-radius: 0;
    text-align: center;
    background: #fff;
    box-shadow: none !important
}

    .topHeaderRight .owl-item .item {
        padding-top: 9px;
        padding-bottom: 5px;
    }

.lastAmount span {
    color: #f7a815;
}

/*TransactionRoot*/

/*presentation*/
.arrow-bg {
    width: 80%;
    margin: 0 auto;
    background: white;
    box-shadow: 0px 0 20px 6px #00000029;
    border-radius: 50px;
    margin-top: 50px;
    padding-bottom: 30px;
    /* margin-bottom: 50px; */
    min-height: 600px;
    /*background: url(/design/img/arrow-bg.svg) right bottom no-repeat;*/
    background-size: contain;
    background-color: white;
}

.videos {
    padding: 20px;
    box-shadow: 0px 0 20px 6px #00000029;
}

.videos-item-box {
    background: #308ba7;
    min-height: 200px;
    text-align: center;
    padding-top: 50px
}

    .videos-item-box img {
        width: 70%
    }

.videos-item-text {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: #000;
    text-align: center;
}

.videos-item-box-icon {
    font-size: 40px;
    color: #202d34;
    margin-top: -20px;
}
/*presentation*/


/*mobile menus*/

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1000000000;
    left: 0;
    display: none;
    background: #0000009c;
}

.menu-line {
    border: none;
    border-radius: 2px;
    background-color: rgb(221, 221, 221);
    width: 32px;
    height: 4px;
    margin: 0 auto;
    position: relative;
    top: 20px;
}

#rightLangMenuClose,
#rightMenuClose,
#leftMenuClose {
    font-size: 25px;
    height: 60px;
    width: 60px;
    background: #ecf1f4;
    padding-top: 11px;
    margin-right: 20px;
    float: right;
    border-radius: 50px;
    font-size: 30px;
    cursor: pointer;
}

.mobileLangRightMenu h3,
.mobileRightMenu h3,
.mobileLeftMenu h3 {
    padding-top: 20px;
    color: #616c75;
}

.mobileLangRightMenu {
    right: 145px !important
}

.mobileLangRightMenu,
.mobileRightMenu,
.mobileLeftMenu {
    width: 300px;
    position: fixed;
    /* top: 127px; */
    right: 0;
    bottom: -100%;
    background: #ffffff;
    height: 100%;
    transition: 0.4s;
    margin: 0;
    padding: 0;
    z-index: 999999999999999999999999999999;
    /* display: none; */
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    /* box-shadow: 0px 0px 10px #000000bf; */
}

    .mobileLangRightMenu ul,
    .mobileRightMenu ul,
    .mobileLeftMenu ul {
        padding: 0;
        margin: 0;
        width: 100%;
        float: left;
        height: 53%;
        /* padding-bottom: 6px; */
        overflow: auto;
        /* box-shadow: inset 0px -9px 10px #000; */
    }

        .mobileLangRightMenu ul li,
        .mobileRightMenu ul li,
        .mobileLeftMenu ul li {
            position: relative;
        }

            .mobileLangRightMenu ul li a,
            .mobileRightMenu ul li a,
            .mobileLeftMenu ul li a {
                width: 100%;
                padding-left: 90px;
                padding-top: 30px;
                padding-bottom: 30px;
                background: white;
                float: left;
                transition: 0.5s;
                border-bottom: 1px solid #ecf1f4;
                color: #616c75;
            }

                .mobileLangRightMenu li a:hover,
                .mobileRightMenu ul li a:hover {
                    background: #308ba7
                }

        .mobileLangRightMenu ul span,
        .mobileRightMenu ul span,
        .mobileLeftMenu ul span {
            color: #646f78;
            font-size: 25px;
            background: #ecf1f4;
            /* padding: 15px; */
            border-radius: 50px;
            position: absolute;
            left: 20px;
            float: left;
            width: 60px;
            height: 60px;
            padding-top: 13px;
            text-align: center;
            /* right: 10px; */
            margin-top: -17px;
        }

.mobileLangMenu ul {
    height: 75px;
    background: #ecf1f4;
    position: absolute;
    bottom: 127px;
    left: 0;
    transition: 0.4s;
}

    .mobileLangMenu ul span {
        background: #fff
    }

.mobileLangMenu li a {
    padding-top: 25px !important;
    border-bottom: 1px solid #646f781f !important;
    /* padding-bottom: 0 !important; */
}

#fadeUp a {
    background: #ecf1f4;
}

.angleRight {
    right: 5px !important;
    left: inherit !important;
    background: transparent !important;
}



.mobileMenuHead {
    width: 100%;
    float: left;
    /* height: 150px; */
    text-align: center;
    margin-top: 15px;
    /* padding-top: 40px; */
    /* background: url(/design/img/menu-line.svg) left bottom no-repeat; */
    /* background-size: 100%; */
    /* box-shadow: 0px 5px 10px #100f0a30; */
    /* border-bottom-left-radius: 189px; */
    /* border-bottom-right-radius: 188px; */
    /* background-color: #fff; */
    padding-bottom: 20px;
    border-bottom: 1px solid #ecf1f4;
    /* padding-left: 30px; */
}

    .mobileMenuHead img {
        width: 60%;
    }

/*mobile menus*/

/*popup*/
.package-popup-features-item {
    margin-bottom: 5px;
}

    .package-popup-features-item a.btn {
        padding: 3px 5px;
        background: none;
        color: #333333;
        border-color: #4cae4c;
        cursor: default;
    }

        .package-popup-features-item a.btn:active {
            box-shadow: unset;
        }

        .package-popup-features-item a.btn:focus {
            outline: unset;
            outline-offset: unset;
        }

        .package-popup-features-item a.btn i {
            margin-right: 4px;
        }
/*pupup*/


/*Responsive*/
@media(max-width:1366px) {
    .carousel-control-prev-icon {
        left: 10px;
        top: 50%;
        margin-top: -35px;
    }

    .carousel-control-prev {
        left: 0px !important;
    }

    .carousel-control-next-icon {
        right: 10px;
        top: 50%;
        margin-top: -35px;
    }

    .carousel-control-next {
        right: 0px !important;
    }
}

@media(max-width:1200px) {
    .login-register-out {
        /* background: url(/design/img/login-register-bg.svg) center bottom; */
        background-size: cover;
    }
}

@media(min-width:451px) and (max-width:1320px) {
    .road {
        background-size: cover;
        background: url(/design/img/footer.svg), linear-gradient(to bottom,#24303b 0,#3d4b53 100%);
    }

        .road ul li {
            width: 50%;
        }

    .road-icon {
        float: none;
        margin: 0 auto;
        margin-bottom: 150px;
    }

    .road-item-box {
        padding-top: 22px;
        font-size: 19px;
    }

    .block-bg-animate-wrap {
        height: 100%;
        top: 115px;
        width: 15px;
        left: 50%;
        margin-left: -10px;
    }

    .slider-move {
        -webkit-animation-name: slider-move-vertical;
        animation-name: slider-move-vertical;
        -webkit-animation-duration: 3s;
        /* transition: 3.4s; */
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

        .slider-move i {
            transform: rotate(90deg);
            margin-left: -10px;
        }
}

@media(max-width:1320px) {

    .mobileRightMenu, .mobileLeftMenu {
        width: 100%
    }

        .mobileRightMenu h3, .mobileLeftMenu h3 {
            padding-top: 20px;
            margin-left: -50px;
            color: #616c75;
        }

    .mobileMenuButton,
    .mobileUserButton {
        display: block !important
    }

    .headerLang,
    .headerRight,
    .headerMenu {
        display: none
    }

    .headerLeft {
        margin-right: 0;
        width: 270px;
        float: none;
        margin: 0 auto;
    }

    .topHeaderRightBgBack {
        width: 50%
    }

    .login-register-out .lineLeft, .login-register-out .lineCenter, .login-register-out .lineRight,
    .login-register-out .slidingLine1, .login-register-out .slidingLine2 {
        display: none
    }
}

@media(min-width:1320px) and (max-width:1425px) {
    .road-icon {
        width: 100px;
        height: 100px;
        font-size: 40px;
        right: -15px;
    }

    .road-item-box {
        top: 175px;
        width: 90%;
        padding: 12px;
    }
}

@media(max-width:500px) {

    .pad-right-left {
        padding-left: 15px;
        padding-right: 15px
    }

    .item-leaders .pad20 {
        padding: 0
    }

    .leaders_prev {
        margin-top: -17px;
        top: 50%;
        z-index: 5;
        left: -15px;
    }

    .leaders_next {
        margin-top: -17px;
        top: 50%;
        z-index: 5;
        right: -15px;
    }

    .login-register-out .col-md-8 {
        padding: 0;
    }

    .g-recaptcha {
        margin-bottom: -15px;
        transform: scale(0.80);
        transform-origin: 0 0;
    }
}

@media(max-width:575px) {

    .carousel-indicators {
        display: none !important
    }

    .logo {
        text-align: center
    }

        .logo img {
            width: 100%;
        }

    .wider-breadcrumb {
        height: auto
    }

        .wider-breadcrumb .col-6.text-right,
        .wider-breadcrumb .col-6 {
            padding: 0;
            max-width: 100%;
            text-align: center !important;
            float: left;
        }

        .wider-breadcrumb .container {
            padding-left: 5px;
            padding-right: 5px
        }

    .footer-bottom-white .owl-carousel .owl-item img {
        display: block;
        width: 70%;
        margin: 0 auto;
    }
}

@media(max-width:370px) {
    .g-recaptcha {
        margin-bottom: -25px;
        transform: scale(0.70);
        transform-origin: 0 0;
    }

    .login-register-box {
        padding-left: 5px;
        padding-right: 5px
    }
}

@media(min-width:768px) and (max-width:999px) {
    .login-register-out .col-md-8 {
        max-width: 100% !important;
    }

    .checkbox {
        padding-left: 20px
    }
}

@media(min-width:999px) and (max-width:1200px) {
    .login-register-out .col-md-8 {
        max-width: 80% !important;
        margin: 0 auto !important;
        float: none !important;
    }
}

@media(max-width:999px) {

    header {
        padding: 0
    }

    .headerLeft {
        margin-right: 0;
        width: 45%;
        float: none;
        margin: 0 auto;
    }

    .headerLang {
        display: none
    }

    .logo {
        width: 100% !important
    }

        .logo img {
            float: none;
            margin: 0 auto;
        }

        .logo a {
            width: 100%;
            float: left;
            text-align: center;
        }

    .mobilePad0 {
        padding: 0 !important
    }
}

@media(max-width:768px) {

    .footer-bottom-white {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .footer-logo {
        width: 85%;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .corporate {
        background-size: cover;
    }

    footer .col-md-3 {
        margin-bottom: 20px
    }

    .headerRight, .topHeaderLeft, .item-dotted,
    .headerMenu {
        display: none
    }

    .item-img {
        width: 240px;
        margin: 0 auto;
        float: none;
        box-shadow: 0 0 20px 13px #2d3840;
    }

    .item-cricle {
        width: 150px;
        height: 150px;
        right: -100px;
        margin-top: -100px;
        top: 100%;
        border: 15px solid #308ba7;
    }

    .item-arrow {
        width: 150px;
        top: -249px;
    }

    .item-horizontal {
        background: #308ba7;
    }

    .item-horizontal-video {
        background-size: cover
    }

    .item-video-img {
        margin-left: 0;
        padding: 5px;
        border-radius: 50px;
        margin-top: 25px;
        background: linear-gradient(to bottom,#525d64 0,#308ba7 90%);
    }

        .item-video-img img {
            width: 100%
        }

    .login-register-box .col-md-6 {
        text-align: center !important
    }

    .login-register-box .form-input.col-md-6 {
        text-align: left !important;
    }

    .g-recaptcha {
        margin-bottom: -7px;
    }

    .login-register-out.register-bg .form-input .col-md-5 {
        margin-top: 10px
    }

    .checkbox {
        width: 100%;
        float: left;
        margin-top: 15px;
    }

    .form-input {
        padding: 0 !important
    }

        .form-input .col-md-3.mt-4 {
            margin-top: 10px !important;
            margin-bottom: 10px !important
        }
}

@media(max-width:450px) {
    .road ul li {
        width: 100%;
    }

    .road-icon {
        float: none;
        margin: 0 auto;
        margin-bottom: 150px;
    }

    .road-item-box {
        padding-top: 22px
    }

    .block-bg-animate-wrap {
        height: 100%;
        top: 115px;
        width: 15px;
        left: 50%;
        margin-left: -10px;
    }

    .slider-move {
        -webkit-animation-name: slider-move-vertical;
        animation-name: slider-move-vertical;
        -webkit-animation-duration: 3s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

        .slider-move i {
            transform: rotate(90deg);
            margin-left: -10px;
        }
}


/*modal*/
.modal-header .close:focus {
    outline: none !important;
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

.nav > li {
    position: relative;
    display: block;
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-tabs > li a.active, .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li a.active > a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.tab-content {
    position: relative;
    padding: 15px !important;
}

.modal-footer .btn {
    background-color: #308ba7;
    padding: 10px;
    box-shadow: 0px 0px 10px #0000001c;
}

/*wallet*/
.wallet-items-out {
    width: 100%;
    float: left;
    overflow: hidden;
}

.wallet-item {
    width: 400px;
    margin-right: 30px;
    height: auto;
    text-shadow: 0px 0px 10px #00000026;
    float: left;
    background: #58707c;
    box-shadow: 0px 7px 17px 0 #00000024;
    cursor: pointer;
    color: #ffffff;
    transition: 0.7s;
}

    .wallet-item.active {
        background: #126fad;
    }

.wallet-items-slide {
    width: 100%;
    float: left;
    margin: 0 auto;
    display: -webkit-inline-box;
}

.wallet-navi-prev {
    height: 60px;
    width: 60px;
    text-align: center;
    background: #308ba7;
    position: absolute;
    left: 0;
    color: #fff;
    top: 50%;
    margin-top: -30px;
    padding-top: 9px;
    box-shadow: 0 0px 17px 9px #00000045;
    cursor: pointer;
    color: #ebf3fa;
    transition: 0.4s;
    border: 1px solid #11793c47;
}

.wallet-navi-next {
    height: 60px;
    width: 60px;
    text-align: center;
    background: #308ba7;
    position: absolute;
    right: 0px;
    color: #fff;
    top: 50%;
    margin-top: -30px;
    padding-top: 9px;
    box-shadow: 0px 0 17px 6px #00000054;
    cursor: pointer;
    color: #ebf3fa;
    transition: 0.4s;
    border: 1px solid #11793c47;
}

    .wallet-navi-prev i, .wallet-navi-next i {
        font-size: 35px;
    }

    .wallet-navi-prev:hover, .wallet-navi-next:hover {
        background: #126fad;
    }

.wallet-top {
    width: 100%;
    min-height: 150px;
    float: left;
    background: url(/assets/img/bg-cricle.svg) no-repeat top right;
    background-size: 50%;
    box-shadow: 0px 15px 10px 0px #0000001f;
    position: relative;
    background-color: #607d8b;
    transition: 0.4s;
}

.wallet-bottom {
    width: 100%;
    min-height: 80px;
    transition: 0.4s;
    float: left;
    background-color: #58707c;
}

.wallet-item.active .wallet-top {
    background: url(/assets/img/bg-cricle.svg) no-repeat top right;
    background-size: 50%;
    background-color: #308ba7;
}

.wallet-item.active .wallet-bottom {
    background: #126fad;
}

.coin-type {
    padding-top: 5px;
    margin-top: 10px;
    margin-bottom: -10px;
    font-size: 20px;
    border-bottom: 1px solid #ffffff59;
}

.coin-balance {
    margin-top: 5px;
    font-size: 20px;
    border-bottom: 1px solid #ffffff59;
}

.coin-name {
    font-size: 60px;
    padding-left: 30px;
}

.qr-code {
    text-align: center;
    margin-top: 30px;
}

    .qr-code svg {
        width: 70%;
    }

.wallet-address {
    padding-bottom: 15px;
}

    .wallet-address i {
        margin-left: 10px;
        transition: 0.4s;
    }

.wallet-item.active .wallet-address i:hover {
    color: #107038
}

.wallet-item .wallet-address i:hover {
    color: #308ba7;
}
/*wallet*/

/*table*/

.divCenter {
    width: 235px;
    margin: 0 auto;
}

.pagenum {
    /* margin-top: 20px; */
    display: block;
    float: left;
    margin-bottom: 10px;
    text-align: center;
}

    .pagenum a {
        color: #fff;
        font-family: arial;
        background: #308ba7;
        text-align: center;
        font-weight: 500;
        transition: 0.4s;
        cursor: pointer;
        border-radius: 50px;
        padding-top: 11px;
        /* float: left; */
        display: block;
        width: 45px;
        height: 45px;
        float: left;
        /* display: inline-block!important; */
        box-shadow: 0px 7px 17px 0 #00000024;
    }

        .pagenum a:hover {
            background: #117a3d;
            color: #fff;
        }

        .pagenum a.active {
            background: #11793d;
        }

.pagenext.passive,
.pageprev.passive {
    background: #126fad;
    cursor: no-drop;
}

.paginationInput {
    width: 100px;
    padding: 0px !important;
    color: #fff;
    /* height: 50px; */
    background: transparent;
    text-align: center;
}

.form_ctrl {
    padding-left: 20px;
    /* border-radius: 30px; */
    min-height: 45px;
    border: none;
    padding-right: 20px;
    float: left;
    font-family: Arial, Helvetica, sans-serif !important;
}

    .form_ctrl::placeholder {
        color: #202442;
    }

    .form_ctrl:focus {
        outline: 0;
    }

.abix-table-head {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    background: linear-gradient(to bottom,#126fad 0,#308ba7 100%);
    color: #fff;
    margin-top: -50px;
}

.table-out {
    margin-top: 80px;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(239 244 247);
}

.table-out .alert {
    position: relative;
    padding: 0;
    font-family: arial;
    box-shadow: 0px 7px 17px 0 #00000024;
    margin-bottom: 0;
    border-radius: 0;
    text-align: center;
}

.btnCard {
    margin: 0;
    min-height: auto;
    padding: 0px 5px 0px 5px !important;
    background: #58707c;
    color: #fff;
    text-align: center;
    transition: 0.4s;
    cursor: pointer;
}

.alert-danger {
    color: #ffffff;
    background-color: #f36d7e !important;
    border-color: #fd4f5d !important;
}

.alert-success {
    color: #ffffff;
    background-color: #2cc562;
    border-color: #2cc562;
}
/*table*/

.icerik_content {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    overflow: auto;
    z-index: 900;
    float: right;
    position: relative;
    /* border-bottom: 5px solid #5e2572; */
    box-shadow: -1px 8px 12px 0 rgb(0 0 0 / 8%);
    background: #fff;
}

.nav-tabs .buy.active {
    color: #fff !important;
    background-color: #76d006 !important;
    /* border-color: #f26100!important; */
}

.nav-tabs .sell.active {
    color: #fff !important;
    background-color: red !important;
    /* border-color: #f26100!important; */
}

.BtnRateGreen {
    /* min-width: 100%; */
    height: 50px;
    width: 25%;
    float: left;
    background: #308ba7;
    color: #fff;
    text-align: center;
    border: none;
    transition: 0.4s;
    line-height: 0;
    border-radius: 50px;
    margin-top: 15px;
    margin-bottom: 15px !important;
    box-shadow: 0px 7px 17px 0 #00000024;
}

    a.BtnRateGreen,
    .BtnRateGreen a {
        width: 100%;
        float: left;
        height: 50px;
        padding: 13px 15px 0px 15px;
    }

    .BtnRateGreen:hover {
        background: #253745;
    }


.holder {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 5000000;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000a1;
}

#preloader {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    /* display: none; */
    right: 0;
    bottom: 0;
    z-index: 99999999999;
}

.loader {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

    .loader::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cdefs%3E%3CradialGradient id = 'loader-gradient' cx = '50%25' cy = '0' r = '100%25'%3E%3Cstop stop-color = '#727cf5' offset = '10%25' stop-opacity = '0'/%3E%3Cstop stop-color = '#727cf5' offset = '100%25' stop-opacity = '100'/%3E%3C/radialGradient%3E%3ClinearGradient id = 'loader-linear-gradient' cx = '15%25' cy = '15%25' r = '100%25'%3E%3Cstop stop-color = '#727cf5' offset = '0%25' stop-opacity = '100'/%3E%3Cstop stop-color = '#727cf5' offset = '50%25' stop-opacity = '100'/%3E%3Cstop stop-color = '#727cf5' offset = '50%25' stop-opacity = '0'/%3E%3Cstop stop-color = '#727cf5' offset = '50%25' stop-opacity = '0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle id='loader-circle' cx= '50%25' cy= '50%25' r = '42%25' stroke='url(%23loader-gradient)' fill='none' stroke-width='2'/%3E%3Ccircle id='loader-circle' cx= '50%25' cy= '50%25' r = '42%25' stroke='url(%23loader-linear-gradient)' fill='none' stroke-width='2'/%3E%3Ccircle cx= '50%25' cy= '8%25' r = '8%25' fill='#727cf5' stroke='0'/%3E%3Ccircle cx= '50%25' cy= '50%25' r = '30%25' stroke='0' fill='#727cf5' /%3E%3C/svg%3E");
        background-repeat: no-repeat;
        animation: rotate 1s linear infinite;
        background-size: cover;
    }

    .loader::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Ccircle cx= '50%25' cy= '50%25' r = '30%25' stroke='0' fill='#727cf5' /%3E%3C/svg%3E");
        background-size: cover;
    }

.preloader {
    /* size */
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: rotatePreloader 2s infinite ease-in;
}

@keyframes rotatePreloader {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
    }
}

.preloader div {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

    .preloader div:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0%;
        width: 10%;
        height: 10%;
        background-color: #ffffff;
        transform: translateX(-50%);
        border-radius: 50%;
    }

    .preloader div:nth-child(1) {
        transform: rotateZ(0deg);
        animation: rotateCircle1 2s infinite linear;
        z-index: 9;
    }

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

    0% {
        opacity: 1;
        transform: rotateZ(36deg);
    }

    7% {
        transform: rotateZ(0deg);
    }

    57% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(2) {
    transform: rotateZ(36deg);
    animation: rotateCircle2 2s infinite linear;
    z-index: 8;
}

@keyframes rotateCircle2 {
    5% {
        opacity: 0;
    }

    5.0001% {
        opacity: 1;
        transform: rotateZ(0deg);
    }

    12% {
        transform: rotateZ(-36deg);
    }

    62% {
        transform: rotateZ(-36deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(3) {
    transform: rotateZ(72deg);
    animation: rotateCircle3 2s infinite linear;
    z-index: 7;
}

@keyframes rotateCircle3 {
    10% {
        opacity: 0;
    }

    10.0002% {
        opacity: 1;
        transform: rotateZ(-36deg);
    }

    17% {
        transform: rotateZ(-72deg);
    }

    67% {
        transform: rotateZ(-72deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(4) {
    transform: rotateZ(108deg);
    animation: rotateCircle4 2s infinite linear;
    z-index: 6;
}

@keyframes rotateCircle4 {
    15% {
        opacity: 0;
    }

    15.0003% {
        opacity: 1;
        transform: rotateZ(-72deg);
    }

    22% {
        transform: rotateZ(-108deg);
    }

    72% {
        transform: rotateZ(-108deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(5) {
    transform: rotateZ(144deg);
    animation: rotateCircle5 2s infinite linear;
    z-index: 5;
}

@keyframes rotateCircle5 {
    20% {
        opacity: 0;
    }

    20.0004% {
        opacity: 1;
        transform: rotateZ(-108deg);
    }

    27% {
        transform: rotateZ(-144deg);
    }

    77% {
        transform: rotateZ(-144deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}

.preloader div:nth-child(6) {
    transform: rotateZ(180deg);
    animation: rotateCircle6 2s infinite linear;
    z-index: 4;
}

@keyframes rotateCircle6 {
    25% {
        opacity: 0;
    }

    25.0005% {
        opacity: 1;
        transform: rotateZ(-144deg);
    }

    32% {
        transform: rotateZ(-180deg);
    }

    82% {
        transform: rotateZ(-180deg);
    }

    100% {
        transform: rotateZ(-324deg);
        opacity: 1;
    }
}


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-color: #308ba7;
}

.spinner-border {
    width: 20px !important;
    height: 20px !important
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: #308ba7 !important;
    /* border-color: #f26100!important; */
}

.loading .image,
.loading h4,
.loading .description {
    background-color: var(--loading-grey);
    background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60% ) var(--loading-grey);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s loading ease-in-out infinite;
}

.loading .image {
    /* margin: 20px; */
    margin-bottom: 0;
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

.loading h4 {
    min-height: 20px;
    animation-delay: .05s;
    width: 100%;
    display: inline-block;
    /* margin-top: 15px; */
    margin: 0;
}

.cl-w {
    color: #ffc107;
}

.cl-d {
    color: #ff0118;
}

.cl-s {
    color: #3da020;
}

.swal-button--confirm {
    background-color: #308ba7;
}


.rateImg {
    width: 100%;
    float: left;
    text-align: center;
}

    .rateImg img {
        width: 30px !important;
        margin-bottom: 5px
    }

.ratePrice {
    width: 100%;
    float: left;
    text-align: center;
}

.rateChange {
    width: 100%;
    float: left;
    text-align: center
}

.rateChangeRatio {
    width: 100%;
    float: left;
    font-size: .8em;
}

.rateChangeAmount {
    width: 100%;
    float: left;
    font-size: .8em;
    margin-right: 5px
}

.rateHr {
    width: auto;
    float: left;
    font-size: .8em;
    font-weight: bold
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    transition: all 0.3s
}

    .social-link:hover, .social-link:focus {
        background: #308ba7;
        color: #fff !important;
        text-decoration: none;
        border-color: #188acb;
    }

.stepwizard-out {
    width: 100%;
    float: left;
    background: #fff;
    /* padding: 0; */
    margin-top: -20px;
    z-index: 0;
    position: relative;
    box-shadow: rgb(85 85 85 / 50%) 0px 0 5px 0px !important;
}


.tooth-chart {
    width: 100%;
}

#Spots polygon,
#Spots path {
    -webkit-transition: fill 0.25s;
    transition: fill 0.25s;
    /*fill: #308ba7;*/
    fill: #616c75;
    cursor: pointer;
}

    #Spots polygon.active,
    #Spots path.active {
        fill: #16c005 !important;
        -webkit-transition: fill 0.25s;
        transition: fill 0.25s;
    }

        #Spots polygon.active:hover,
        #Spots path.active:hover {
            fill: red !important;
            -webkit-transition: fill 0.25s;
            transition: fill 0.25s;
        }

    #Spots polygon:hover,
    #Spots polygon:active,
    #Spots path:hover,
    #Spots path:active {
        fill: #308ba7 !important;
    }

#adult-outlines
path {
    fill: #eff4f7;
    pointer-events: none;
}

.card-header {
    background-color: #2f88a4 !important;
}

    .card-header .btn {
        color: #fff
    }

.stepwizard-step p {
    margin-top: 5px;
    color: #666;
    font-size: 15px
}

    .stepwizard-step p small {
        margin-top: 3px;
        font-size: 15px
    }

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    /*opacity: 1 !important;
    filter: alpha(opacity=100) !important;*/
}

.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
    opacity: 1 !important;
    color: #bbb;
}

.stepwizard .stepwizard-row:before {
    top: 33px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 2px;
    /* background-color: #ccc; */
    border-bottom: 2px dotted #ccc;
    z-index: 0;
}

.stepwizard-step.active:before {
    top: 33px;
    bottom: 0;
    left: 0;
    position: absolute;
    content: " ";
    width: 50%;
    height: 2px;
    /* background-color: #ccc; */
    border-bottom: 2px solid #308ba7;
    z-index: 0;
}

.stepwizard-step.active-completed:before {
    top: 33px;
    bottom: 0;
    left: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    /* background-color: #ccc; */
    border-bottom: 2px solid #308ba7;
    z-index: 0;
}

.stepwizard .stepwizard-row .stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
    float: left;
    padding-top: 10px;
}

    .stepwizard .stepwizard-row .stepwizard-step .btn-circle {
        width: 45px;
        height: 45px;
        text-align: center;
        padding: 6px 0;
        position: relative;
        font-size: 20px;
        z-index: 1;
        /* line-height: 1.428571429; */
        margin: 0 auto;
        background: #f0f2f5;
        border-color: #00000038;
        border-radius: 51px;
    }

    .stepwizard .stepwizard-row .stepwizard-step .btn-success {
        background-color: #308ba7 !important;
        border-color: #fff1e2 !important;
    }


.wpCk,
.wrapper {
    /* display: inline-flex; */
    background: #fff;
    /* height: 50px; */
    width: auto;
    /* display: contents; */
    /* max-width: 200px; */
    float: left;
    /* align-items: center; */
    /* justify-content: space-evenly; */
    /* border-radius: 5px; */
    padding: 10px;
    /* margin-top: 10px; */
    /* box-shadow: 5px 5px 30px rgba(0,0,0,0.2); */
}

    .wrapper .option {
        background: #fff;
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 10px;
        border-radius: 500px;
        cursor: pointer;
        padding: 0 10px;
        border: 2px solid lightgrey;
        transition: all 0.3s ease;
        box-shadow: 0px 0px 10px #30323f14;
    }

        .wrapper .option .dot {
            height: 20px;
            width: 20px;
            background: #d9d9d9;
            border-radius: 50%;
            position: relative;
        }

            .wrapper .option .dot::before {
                position: absolute;
                content: "";
                top: 4px;
                left: 4px;
                width: 12px;
                height: 12px;
                background: #024fa1;
                border-radius: 50%;
                opacity: 0;
                transform: scale(1.5);
                transition: all 0.3s ease;
            }

    .wpCk input[type="radio"] {
        display: none;
    }

    .wpCk:checked:checked ~ label {
        border-color: #308ba7;
        background: #308ba7;
    }

        .wpCk:checked:checked ~ label .dot {
            background: #fff;
        }

            .wpCk:checked:checked ~ label .dot::before {
                opacity: 1;
                transform: scale(1);
            }

    .wrapper .option span {
        font-size: 16px;
        color: #808080;
        margin-left: 10px;
        margin-right: 10px;
    }

    .wpCk:checked:checked ~ label span {
        color: #fff !important;
    }

.basketTotal,
.productTotal {
    font-family: sans-serif;
}

.coin-info {
    font-size: 20px;
}

.rateImg i {
    font-size: 30px;
}