@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/eot/dana-fanum-thin.eot');
    src: url('../fonts/eot/dana-fanum-thin.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-thin.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-thin.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/eot/dana-fanum-extralight.eot');
    src: url('../fonts/eot/dana-fanum-extralight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-extralight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-extralight.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/eot/dana-fanum-light.eot');
    src: url('../fonts/eot/dana-fanum-light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-light.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/eot/dana-fanum-medium.eot');
    src: url('../fonts/eot/dana-fanum-medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-medium.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/eot/dana-fanum-demibold.eot');
    src: url('../fonts/eot/dana-fanum-demibold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-demibold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-demibold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/eot/dana-fanum-extrabold.eot');
    src: url('../fonts/eot/dana-fanum-extrabold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-extrabold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-extrabold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/eot/dana-fanum-black.eot');
    src: url('../fonts/eot/dana-fanum-black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-black.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/dana-fanum-bold.eot');
    src: url('../fonts/eot/dana-fanum-bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-bold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}
@font-face {
    font-family: dana;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/dana-fanum-regular.eot');
    src: url('../fonts/eot/dana-fanum-regular.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('../fonts/woff2/dana-fanum-regular.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/dana-fanum-regular.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}


@font-face {
    font-family: "Flaticon";
    src: url("../fonts/Flaticon.eot");
    src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Flaticon.woff") format("woff"),
    url("../fonts/Flaticon.ttf") format("truetype"),
    url("../fonts/Flaticon.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "Flaticon";
        src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
    }
}

[class^="icon-"], [class*=" icon-"],
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    vertical-align: middle;
    margin-top: 3px;
}

[class^="icon-"]:before, [class*=" icon-"]:before,
[class^="icon-"]:after, [class*=" icon-"]:after {
    font-family: Flaticon;
    font-size: 16px;
    font-style: normal;
}

.icon-avatar:before { content: "\f100"; }
.icon-avatar-1:before { content: "\f101"; }
.icon-back:before { content: "\f102"; }
.icon-book:before { content: "\f103"; }
.icon-cancel:before { content: "\f104"; }
.icon-chat:before { content: "\f105"; }
.icon-chat-1:before { content: "\f106"; }
.icon-chat-2:before { content: "\f107"; }
.icon-copy:before { content: "\f108"; }
.icon-dislike:before { content: "\f109"; }
.icon-download:before { content: "\f10a"; }
.icon-download-1:before { content: "\f10b"; }
.icon-edit:before { content: "\f10c"; }
.icon-envelope:before { content: "\f10d"; }
.icon-folder:before { content: "\f10e"; }
.icon-garbage:before { content: "\f10f"; }
.icon-glasses:before { content: "\f110"; }
.icon-hand:before { content: "\f111"; }
.icon-headphones:before { content: "\f112"; }
.icon-heart:before { content: "\f113"; }
.icon-house:before { content: "\f114"; }
.icon-like:before { content: "\f115"; }
.icon-link:before { content: "\f116"; }
.icon-logout:before { content: "\f117"; }
.icon-magnifying-glass:before { content: "\f118"; }
.icon-monitor:before { content: "\f119"; }
.icon-musical-note:before { content: "\f11a"; }
.icon-next:before { content: "\f11b"; }
.icon-next-1:before { content: "\f11c"; }
.icon-padlock:before { content: "\f11d"; }
.icon-paper-plane:before { content: "\f11e"; }
.icon-phone-call:before { content: "\f11f"; }
.icon-photo-camera:before { content: "\f120"; }
.icon-pie-chart:before { content: "\f121"; }
.icon-piggy-bank:before { content: "\f122"; }
.icon-placeholder:before { content: "\f123"; }
.icon-printer:before { content: "\f124"; }
.icon-reload:before { content: "\f125"; }
.icon-settings:before { content: "\f126"; }
.icon-settings-1:before { content: "\f127"; }
.icon-share:before { content: "\f128"; }
.icon-shopping-bag:before { content: "\f129"; }
.icon-shopping-cart:before { content: "\f12a"; }
.icon-shuffle:before { content: "\f12b"; }
.icon-speaker:before { content: "\f12c"; }
.icon-star:before { content: "\f12d"; }
.icon-tag:before { content: "\f12e"; }
.icon-upload:before { content: "\f12f"; }
.icon-upload-1:before { content: "\f130"; }
.icon-vector:before { content: "\f131"; }


body,html,input,textarea{
    font-family: dana;
    font-size: 20px;
}

body,html{
    height: 100%;
    padding: 0;
    margin: 0;
    background: #f5f5f5;
}

*{
    box-sizing: border-box;
}

.blackBg{
    width: 100%;
    height: 100%;
    background: #222222;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 0;
}

.loginPageBody {
    width: 120%;
    height: 120%;
    position: fixed;
    background-size: auto 100%;
    background-position: center center;
    filter: blur(15px);
    top: -10%;
    right: -10%;
    z-index: 0;
    opacity: 0.8;
}

.loginArea{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    z-index: 2;
}

.loginAreaContent{
    margin: auto;
}

.loginAreaBox{
    max-width: 800px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin: auto;
    overflow: hidden;
}

.loginHead{
    background: #785fee;
}

.logoImage{
    width: 100px;
    margin-top: 1rem;
    margin-right:.75rem;
    margin-bottom: 2rem;
}

.loginImage{
    display: block;
    width: 60%;
    margin: 0 auto;
}

.loginHead .info{
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    padding: 2rem;
}

.loginArea .title{
    font-size: 24px;
    margin-top: 3rem;
    font-weight: 900 !important;
}

.acceptForm,
.phoneForm{
    margin-right: 1.5rem;
    margin-left: 1.5rem;
}

.dontShow{
    display: none;
}

.editNumber{
    cursor: pointer;
}

.input{
    font-size: 18px;
    padding-top: 12px;
}

.input option{
    font-size: 18px;
}

.fs18{
    font-size: 18px;
}

.btn{
    font-size: 16px;
    font-weight: 600;
}

.loginContent .info{
    font-size: 14px;
    font-weight: 400;
    padding: .75rem 0 1rem;
}

.backhome{
    margin-top: 1rem;
    font-size: 16px;
}

.myNav{
    background: #785fee;
    border-radius: 8px;
    height: 3rem;
    display: flex;
    margin-bottom: 2rem;
}

.myNav .logo{
    width: 100px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: .75rem;
}

.myNav .logo img{
    width: 100%;
    height: auto;
}

.myNav ul{
    display: flex;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.myNav li{
    list-style: none;
    background: rgba(0,0,0,.1);
    font-size: .7rem;
    padding: 0 1rem;
    line-height: 2rem;
    height: 2rem;
    margin-left: .75rem;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
}

.myNav li:hover{
    background: rgba(0,0,0,.2);
}

.steps{
    display: flex;
    padding: 0;
    position: relative;
}

.steps:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background: #eee;
    top: 50%;
    margin-top: -1.5px;
}

.steps li{
    width: 60px;
    height: 60px;
    text-align: center;
    border: 3px solid #eee;
    line-height: 60px;
    margin-right: auto;
    margin-left: auto;
    background: #ffffff;
    border-radius: 50%;
    list-style: none;
    font-weight: 900;
    position: relative;
    z-index: 2;
    color: #333333;
}

.steps li.active{
    background: #785fee;
    color: #fff;
}

.steps li:nth-child(1){
    margin-right: 0;
}

.steps li:nth-last-child(1){
    margin-left: 0;
}

.pageTitle{
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
}

.supportNum {
    font-size: .7rem;
    margin-left: 2rem;
    margin-top:-.5rem;
    display: inline-block;
    vertical-align: middle;
}

.contentArea{
    background: #ffffff;
    border-radius: 8px;
    overflow-y: auto;
}

.confirmArea{
    display: none;
}

.stepContent{
    height: 100%;
    overflow-y: auto;
    padding: .5rem 1.5rem;
    font-size: 16px;
    display: none;
}

.stepContent.active{
    display: block;
}

.stepContent h1{
    font-size: 1.3rem;
    font-weight: 700;
    color: #333333;
    margin-top: 1.25rem;
    margin-bottom: .75rem;
}

.stepContent h2{
    font-size: 1.2rem;
    font-weight: 700;
    color: #333333;
    margin-top: 1.25rem;
    margin-bottom: .75rem;
}

.stepContent h3{
    font-size: 1.1rem;
    font-weight: 700;
    color: #333333;
    margin-top: 1.25rem;
    margin-bottom: .75rem;
}

.stepContent h4{
    font-size: 1rem;
    font-weight: 700;
    color: #333333;
    margin-top: 1.25rem;
    margin-bottom: .75rem;
}

.stepContent h5{
    font-size: .9rem;
    font-weight: 700;
    color: #333333;
}

.stepContent h6{
    font-size: .8rem;
    font-weight: 700;
    color: #333333;
}

.stepContent .alert{
    color: #fff;
    background: #ff355e;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.stepContent .alert.green{
    background: #198754;
}

.stepContent p{
    color: #666;
}

.stepContent blockquote{
    color: #666;
    padding: 1.25rem;
    background: rgba(0,0,0,0.03);
    margin: 1rem;
    border-radius: 6px;
}

.cursor-pointer{
    cursor: pointer;
}


/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.myAlert{
    padding: 1rem 2rem;
    position: fixed;
    background: #ff355e;
    color: white;
    top: 3rem;
    right: 50%;
    transform: translateX(50%);
    border-radius: 8px;
    display: none;
    z-index: 99999999999;
}

.myAlertSuccess {
    padding: 1rem 2rem;
    position: fixed;
    background: #1bb301;
    color: white;
    top: 3rem;
    right: 50%;
    transform: translateX(50%);
    border-radius: 8px;
    display: none;
    z-index: 99999999999;
}

.dragDrop{
    width: 100%;
    height: 200px;
    border: 1px dashed #785fee;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.dragDrop:hover{
    border: 1px dashed #6f42c1;
}

.dragDrop.added{
    border: 1px dashed #198754;
}

.dragDrop input{
    position: absolute;
    top: -10px;
    left: -2000px;
    width: 5000%;
    height: 150%;
    margin-right: -400%;
    border: none;
    background: none;
    font-size: 1px;
    z-index: 5;
}

.dragDrop .ddtitle{
    width: 100%;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1rem;
    color: #777;
    text-align: center;
}

.dragDrop .ddbtn{
    margin-top: 10px !important;
    font-size: .6rem !important;
}

.dragDrop .filepath{
    background: #dc3545;
    text-align: center;
    padding: .2rem;
    padding-top: .3rem;
    font-size: .6rem;
    bottom: 0;
    position: absolute;
    width: 100%;
    color: #fff;
}

.dragDrop .filepath.added{
    background: #198754;
}

.dragDrop .preview{
    width: 100%;
    min-height: 100%;
    opacity: .2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.dragdrophover{
    background: rgba(0,150,255,0.2) !important;
}

.imagePrevArea img{
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #eee;
}

.blured{
    filter: blur(3px);
}

.caflex{
    display: flex;
}

@media (min-width: 992px) {
    .loginAreaBox{
        min-width: 800px;
    }

    .loginContent{
        padding-right: 0;
    }

    .fixHeightContainer{
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .contentArea{
        flex-grow: 1;
    }
}

@media (max-width: 992px) {
    .loginArea{
        padding: 1rem;
    }

    .loginImage{
        display: none;
    }

    .loginHead .info{
        padding: 1rem;
        padding-top: 0;
    }

    .logoImage{
        margin-bottom: 1rem;
    }

    .phoneForm{
        margin: 0 20px;
    }

    .loginAreaBox{
        max-width: 500px;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .myAlert {
        width: 100%;
        padding: 1rem 1rem;
        font-size: 16px;
        top: 0;
        border-radius: 0;
    }

    .myAlertSuccess {
        width: 100%;
        padding: 1rem 1rem;
        font-size: 16px;
        top: 0;
        border-radius: 0;
    }

    .input{
        font-size: 14px;
        padding-top: 12px;
    }

    .input option{
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    .steps li{
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-width: 2px;
        font-size: .8rem;
    }

}

.loading{
    position: absolute;
    background: url("/media/assets/img/loading.gif") rgba(255,255,255,0.75) center center no-repeat;
    background-size: 100px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    filter: hue-rotate(70deg)	;
}


@media (min-aspect-ratio: 16/10) {
    .loginPageBody {
        background-size: 100% auto;
    }
}

.loginPageBody.bg1 {
    background-image: url("/media/assets/img/bg/1.jpg");
}

.loginPageBody.bg2 {
    background-image: url("/media/assets/img/bg/2.jpg");
}

.loginPageBody.bg3 {
    background-image: url("/media/assets/img/bg/3.jpg");
}

.loginPageBody.bg4 {
    background-image: url("/media/assets/img/bg/4.jpg");
}

.loginPageBody.bg5 {
    background-image: url("/media/assets/img/bg/5.jpg");
}