@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&Overpass:wght@600&family=Prata&display=swap');
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    /*-webkit-user-select: none;*/                  /* prevent copy paste, to allow, change 'none' to 'text' */
}
.login-page{overflow-y: auto;background-image: url(../images/space_bg_login.png);}
.login-page .content{padding: 0 30px;max-height: 100% !important;}
.login-page .border-container,.login-page  #footer .footer-top > .ui.grid:first-child > .row{border-color:#ffe3f1;}
.logo h1{font-weight: 700}
.w70{width: 70%;display: inline-block;vertical-align: bottom;}
.w30{width: 28%;display: inline-block;vertical-align: bottom;}
.w70 p{line-height: 58px;}
.d_block{display: block;    width: 100%;}
.meeting tr td,.meeting tr th{padding: 10px 5px;border-bottom: none;vertical-align: top}
.border-right{
    border-right: 1px solid #eee;
}
.add-listing-content {overflow-x: hidden;}
.banquet{line-height: 57px;margin-top: 36px !important;}
table.data{width: 100%;max-width: 100%;}
.data tr td{padding: 10px 5px;border-bottom: 1px solid #ddd;word-break:break-all}
.add-listing-footer{z-index: 1;position: fixed;bottom: 0;width: 100%;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1);}
.des{display: none;}
.border-b{border: 3px solid #eaeaea;position: relative;}
.border-b:after{
    content: '';
    position: absolute;
    width: 98%;
    height: 98%;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transform: translate3d(5px, 5px, 0);
    -moz-transform: translate3d(5px, 5px, 0);
    -ms-transform: translate3d(5px, 5px, 0);
    -o-transform: translate3d(5px, 5px, 0);
    transform: translate3d(5px, 5px, 0);
    border: 1px solid #e3e3e3;
}
.m--17{margin-top: -17px;}
.form_bg{
    box-shadow: 0 0 25px rgb(107 180 223);
    border: 5px solid #005c94;
    position: relative;
}
.form_bg:before{
    content: "";
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    display: block;
    border: 1px solid #005c94;
    left: 6px;
    top: 6px;
    position: absolute;
}
.footeradd {
    background-color: #eee;
    padding: 24px;
    text-align: center;
}
.footeradd p {
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.footeradd p a {
    display: inline-block;
    margin-left: 6px;
}
.col-center {
    margin: 5% auto;
    overflow-y: auto;
}
.login-page  .header{
    padding: 30px !important;
    font-size: 26px;
    line-height: 1.2857em;
    font-weight: bold;}
.login-img{
    background-image: url(../images/space_bg_login.png);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    animation: move-background-mobile 1.3s 0.7s forwards;
    opacity: .8;
    display: none;
}
.login-page .login-img:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background-image: -webkit-linear-gradient(#FFFFFF 47%, rgba(255, 255, 255, 0) 80%);
    background-image: -o-linear-gradient(#FFFFFF 47%, rgba(255, 255, 255, 0) 80%);
    background-image: linear-gradient(#FFFFFF 47%, rgba(255, 255, 255, 0) 80%);
    z-index: 2;
}
.login-page .actions{padding: 0px !important;text-align: left;opacity: 0}
.login-page .content{max-height: 40%;overflow-y: auto;font-size: 0.9em;opacity: 0}
.login-page #footer {opacity: 0}
.login-page .content .button-sq{margin: 0 0 20px 0;}
.login-page .content{animation: fade-in 1.2s 1.2s forwards;}
.login-page .actions,.login-page #footer { animation: fade-in 1.2s 1.4s forwards;}
.border-container{border-top: 1px solid #D4D4D4;}
.modal.small .actions,.modal.small .content{opacity: 1;animation:none;}
.ui.modal>.content{padding-top: 0;}
.ui.modal.small>.header{margin: 30px 50px 0;font-size: 1.4em!important}
.else-data,.photo_edit,.img-container,.form_status{display: none}
#image{min-height: 400px}
.up_avatar{
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
}
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}
.photo_edit .button-sq {
    min-height: 38px;
    line-height: 35px;
    vertical-align: bottom;
    padding: 0 1.2em;
    margin-bottom: 5px;
}
.photo_edit .button-sq img{width: 15px;}
.news_btn{ 
    position: fixed;
    right: 0;
    top: 35%;
    padding: 5px;
    border: 3px solid #ffffff;
    background: #ea2786;
    border-right: none;
    z-index: 9;
    display: none;
}
.news_btn span{
    border: 1px solid #ffffff;
    border-bottom: none;
    padding: 0 8px;
    letter-spacing: 15px;
    align-items: center;
    line-height: 38px;
    height: 38px;
    width: 40px;
    display: block;
    font-size: 20px;
    color: #fff;
}
.news_btn span:last-child{
    border-bottom:  1px solid #fff;
}
.news_btn:before{
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    display: block;
    border: 1px solid #ea2786;
    left: -3px;
    top: -3px;
    position: absolute;
    border-right: none;
}
.hero1{
    position: fixed;
    bottom: 15vh;
}
.hero1 img{
    width: 15%;
    transform: translateX(50px);
    z-index: -1;
}
.hero2{
    width: 11%;
    position: fixed;
    right: 0px;
    top: 100px;
    z-index: 9;
    transform: rotate(338deg);
}
.hero3{
    width: 11%;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9;
}
.hero4{
    width: 9%;
    position: fixed;
    left: 10%;
    bottom: 0;
    z-index: 9;
}
.hero5{
    width: 11%;
    bottom: 21vh;
    left: 0%;
    z-index: 9;
    transform: rotate(338deg);
    position: fixed;
}
.add-listing-content{height: auto !important;}
.pos_r{
    position: relative;
}
.img-container{background-color: #fff;}
input[type="checkbox"] + label{font-weight: 400;}
.form_status{
    background-color: #f7f7f9;
    padding: 25px;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 500;
}
.image-sq{
    background-position: center;
    background-size: cover;
    background-position: left center;
}
.typo-sq{background-color:#fff;}
.titleBox h2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 36px;
}
.titleBox i {
    position: relative;
    font-style: normal;
    padding: 2px 15px;
}
.titleBox i:not(:first-child):before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #e0e0e0;
}
.file{
    position: relative;
    display: inline-block;
    border-radius: 25px;
    line-height: 36px;
    border: 1px solid #D4D4D4;
    padding: 0px 40px 0 12px;
    margin-top: -10px;
    font-size: 15px;
}
.file i{
    font-size: 14px;
    padding: 5px;
    height: auto;
    position: absolute;
    top: 5px;
    right: 5px;
}
.file a{color:#444;}
.file a:hover{color:#0046B6;}
.overtime{width: 500px;max-width: 100%}
.typo-section-sq.top-default.bottom-default{flex:auto;}
.typo-section-sq.top-default.bottom-default > h2{
    color: #fff;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 0 20px #597aa0;
}
.header-section.header-sticky.is-sticky .header-item .main-menu>li.active:not(.has-submenu) .item:not(.burger-sidemenu-styles){color: #0247b6 !important}
.header-section .menu-default .submenu .item{color:#252B33 }
.cover{background-position: center;background-size: cover;width: 30px; height: 30px;margin-left: 5px;}
.logo.item{min-height: 45px;width: 200px}
.ig{width: 17px;vertical-align: text-top; opacity: .6;}
a:hover .ig{opacity: 1}
.footer-logo{pointer-events: none;}
.footer_logo{width: 200px;margin-bottom: 20px;}
.footer-top .row .ui:first-child{padding-left: 50px;}





::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent; 
}

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media only screen and (min-width: 760px){
    #form1 .typo-section-sq{
        height: calc(100vh - 618px) !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media only screen and (min-width: 1440px){
    #form1 .typo-section-sq{
        height: calc(100vh - 618px) !important;
    }
}
@media only screen and (min-width: 1600px){
    #form1 .typo-section-sq{
        height: calc(100vh - 616px) !important;
    }
}
@media (min-width: 1300px) {
    /* .login-page{overflow-y: hidden;} */
}
@media (max-width: 1600px) {
    .hero1 img {
        width: 10%;
        transform: translateX(20px);
        z-index: -1;
    }
    .hero4{left:6%;}
}
@media (max-width: 1281px) {
    .login-page{overflow-y: auto;}   
}
@media (max-width: 1367px) {
    .hero2{
        width: 14%;
    }
    .hero3{
        width: 14%;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 9;
    } 
    .hero4{
        width: 11%;
        left: 2%;
    }
    .hero5{
        width: 14%;
        bottom: 31vh;
    } 
}


@media (max-width: 1025px) {
    .menu-default.burger-sidemenu-styles.sidemenu-open-right>ul>li.has-submenu .submenu{
        background-color: #f7f3f3 !important;
        padding: 15px;
    }
    .hero2{
        width: 18%;
        right: -20px;
    }
    .hero3{
        width: 200px;
        bottom: 20px;
    }
    .hero3{
        width: 20%;
    }
    .hero4 {
        width: 13%;
        left: 6%;
        bottom: 34vh;
        z-index: 9;
    }
    .hero5{
        width: 17%;
        bottom: 51vh;
        left: -2%;
    }
}


@media (max-width: 821px) {
    .add-listing-content{padding: 0 80px }
    .add-listing-content .title-sq:after{width: 80%;left: 10%;}
    /* .img-container{max-height: 250px} */
    .actions .div-c.inline-2 .divided-column{width: 50%}
    .login-img{height: 70%}
    .login-page input{background-color: #fff;}
    #image{min-height: auto}
    .verify_btn{margin-bottom: 50px}
    .hero1{bottom:38vh;}
    .hero1 img{
        width: 150px;
        transform: translateX(-35px);
    }
    .hero2{
        width: 180px;
        right: -40px;
        top: 110px;
    }
    .hero3{
        width: 200px;
        bottom: 20px;
    }
    .hero3{
        width: 200px;
        bottom: 20px;
    }
    .hero4 {
        width: 140px;
        left: -5%;
        bottom: 21vh;
        z-index: 2;
    }
    .hero5{
        width: 180px;
        bottom: 50vh;
        left: -4%;
    }
    .div-c.inline-2 .divided-column{margin-right: 0px}

}


 /*iphone plus*/
@media (max-width: 415px) {
    h3{font-size: 1.55em}
    h4{font-size: 1.3em}
    .login-page{overflow-y: auto;}
    .meeting tr td:first-child{width: 43%;}
    /*.add-listing-footer{height: 100px;}*/
    /*.header-section.ths~.add-listing-content{height: calc(100% - 100px - 50px);}*/
    /*.add-listing-footer p{font-size: 13px;}
    .add-listing-footer .button-sq.next-sq{margin-left: 5px;}*/
    .w70,.w30{width: 100%}
    .w70.text-right{text-align: center!important}
    .white-section.pd-xs{padding: 0}
    .p25.border-b{padding: 15px;}
    .add-listing-content{padding: 0 30px }
    .border-b:after{width: 97%;height: 98.5%}
    .add-listing-footer { box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.09);}
    .form_bg{padding: 0 10px !important}
    .hero1{
        bottom: 15vh;
        /* position: absolute; */
        width: 130px;
        left: -34px;
        transform: rotate(338deg);
    }
    .hero1 img{
        width: 130px;
        transform: translateX(-5px);
    }
    .hero2{
        width: 145px;
        right: -60px;
    }
    .hero3{
        right: -34px;
        width: 40%;
        bottom: 100px;
        position: fixed;
        transform: rotate(22deg);
    }
    .hero4{
        display: none;
    }
    .hero5{
        width: 140px;
        bottom: 31vh;
        left: -48px;
    }
    #footer .footer-top{padding-left: 60px;}
    /* move-background-mobile */
    @-webkit-keyframes move-background-mobile {
      0% {
        top: 0;
      }
      100% {
        top: calc(100% - 200px);
      }
    }
    @-moz-keyframes move-background-mobile {
      0% {
        top: 0;
      }
      100% {
        top: calc(100% - 200px);
      }
    }
    @keyframes move-background-mobile {
      0% {
        top: 0;
      }
      100% {
        top: calc(100% - 200px);
      }
    }
    #footer .footer-top .ui.column{padding-left: 20px}
    .footer-bottom .text-right{text-align: left !important;}
}


/*iphone: 7px*/
@media (max-width: 376px) {}



/*iphone 5*/
@media (max-width: 321px) {}


/*iPhone XR*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { 



}

/*iPhone XS*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

}

/*iPhone XS Max*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { 


}