:root 
{
    /*--a-color: #757575;
    --main-color: #74C043;
    --hover-color: #720202 ;
    --bg-gray: #e5e5e5;
    --error-color:#e53935;*/

    --a-color: #757575;
    --main-color: #0072B9;
    --hover-color: #025386;
    --bg-gray: #e5e5e5;
    --error-color:#e53935;
}
.modal-backdrop.show{
    opacity: 0 !important;
}
.modal{
    background-color: unset !important;
}
/* document modal */
.modal-document .modal-content,
.modal-productlist .modal-content
{
    background: linear-gradient(0deg, #013B6F 0%, #0E5B8D 60.86%, #1772A3 100%);
    opacity: 0.95;
    border: 0px !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 1rem 3rem 3rem 3rem;
    font-size: 1.3vw;

    width: 80%;
    margin: 5rem auto 0rem auto;
}
@media (max-width: 960px) 
{
    .modal-document .modal-content
    {
        width: 90%;
        margin: 5rem auto 0rem auto;
    }
    .modal-productlist .modal-content
    {
        margin: 8rem auto 0rem auto;
    }
}
.modal-document .modal-content .modal-title,
.modal-productlist .modal-content .modal-title
{
    font-size: 1.6vw;
    text-align: center;
    margin: 1rem;
}
.modal-document .modal-content hr,
.modal-productlist .modal-content hr
{
    border-color: #fff;
}
.modal-document .modal-content .modal-table tr td{
    padding: 1rem 2rem;
}
.modal-document .modal-content img{
    width: 25px;
    margin-right: 10px;
}
.modal-document .modal-content a{
    color: #fff;
}
.modal-document .modal-content a:hover{
    text-decoration: underline;
}

/* language modal */
.modal-lang .modal-content{
    width: 100%;
    margin-top: 35vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modal-lang .modal-content{
    background: linear-gradient(0deg, #013B6F 0%, #0E5B8D 60.86%, #1772A3 100%);
    opacity: 0.95;
    border: 0px !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 3rem;
    font-size: 1.3vw;
}
@media screen and (orientation: portrait)
{
    .modal-lang .modal-content{
        width: auto;
    }
}

/* Main menu */
#main-menu
{
    bottom: -10px !important;
    min-height: 15px;
    z-index: 100;
}
#main-menu ul 
{
    display: inline-block;
    list-style-type: none;
    padding: 0 30px !important;
    margin-bottom: 0px !important;
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(180deg, #0072B9 0%, rgba(0, 114, 185, 0.984375) 0.01%, #025386 123.21%);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
#main-menu li 
{
    float:left;
}
#main-menu a
{
    display:block;
    text-align:center;
    text-decoration:none; 
    color: #fff !important;
    padding: 10px;
    font-size: 1vw;
}
    #main-menu a:hover
    {
        background: unset !important;
        color: #FFC700 !important;
    }
    #main-menu .menu-active a{
        background: unset !important;
        color: #FFC700 !important;
    }
.en-hall-icon{
    width:35px; height: 35px; 
    background: url('../img/smartsme/icon/Artboard\ 1@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
    margin: auto;
}#main-menu a:hover .en-hall-icon, .menu-active a .en-hall-icon{
    background: url('../img/smartsme/icon/Artboard 1 copy@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}
.info-icon{
    width:35px; height: 35px; 
    background: url('../img/smartsme/icon/Artboard\ 20@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
    margin: auto;
}#main-menu a:hover .info-icon, .menu-active a .info-icon{
    background: url('../img/smartsme/icon/Artboard\ 19@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}
.menu-info-active{
    background: url('../img/smartsme/icon/Artboard\ 19@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}
.ex-hall-icon{
    width:35px; height: 35px; 
    background: url('../img/smartsme/icon/Artboard\ 3@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
    margin: auto;
}#main-menu a:hover .ex-hall-icon, .menu-active a .ex-hall-icon{
    background: url('../img/smartsme/icon/Artboard\ 3\ copy@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}
.workshop-icon{
    width:35px; height: 35px; 
    background: url('../img/smartsme/icon/Artboard\ 4@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
    margin: auto;
}#main-menu a:hover .workshop-icon, .menu-active a .workshop-icon{
    background: url('../img/smartsme/icon/Artboard\ 4\ copy@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}
.map-icon{
    width:35px; height: 35px; 
    background: url('../img/smartsme/icon/Artboard\ 5@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
    margin: auto;
}#main-menu a:hover .map-icon, .menu-active a .map-icon{
    background: url('../img/smartsme/icon/Artboard\ 5\ copy@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}
.matching-icon{
    width:35px; height: 35px; 
    background: url('../img/smartsme/icon/Artboard\ 6@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
    margin: auto;
}#main-menu a:hover .matching-icon, .menu-active a .matching-icon{
    background: url('../img/smartsme/icon/Artboard\ 6\ copy@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}
@media (max-width: 960px) 
{
    /* ============================
    # Main Menu
    =============================== */
    #main-menu
    {
        bottom: -5px !important;
    }
    #main-menu ul 
    {
        margin-bottom: 0px;
    }
    #main-menu a 
    {
        font-size: 1.3vw !important;
    }
}

/*========================================*/
/*//////////////// LOGIN /////////////////*/
/*========================================*/
.login-body{
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
    url("../img/smartsme/Exterior\ draft2\ 1.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.container-login{
    width: 80% !important;
    margin: 5% 10%;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 3rem;
    float: left;
}
.container-login{
    border-radius: 20px !important;
}
#brand-logo img{
    width: 15vw !important;
    max-width: 200px;
}
.container-login .form-body{
    width: 50%;
    margin: 1rem 25%;
    float: left;
}
.login-title{
    font-size: 1.6vw;
    color: #E83E6C;
}
.container-login input, .container-register input{
    border-radius: 20px !important;
    padding-left: 20px;
}
.container-login a.txt-link{
    color: #646363;
}
.container-login a.txt-link:hover{
    color: #E83E6C;
}
.container-login .btn-login{
    background: linear-gradient(180deg, #EE4170 0%, #BB1542 92.06%);
    color: #fff;
    border-radius: 36px !important;
    padding: 10px;
}
.container-login .btn-register, .container-register .btn-register{
    background: linear-gradient(180deg, #0072B9 0%, rgba(0, 114, 185, 0.984375) 0.01%, #025386 100%);
    color: #fff;
    border-radius: 36px !important;
    padding: 10px;
}
.login-form form, .login-form input, .login-form label, .login-form button, .login-form a{
    /*font-size: 1.3vw;*/
    font-size: 00.8rem;
    font-weight: 300;
}
/*========================================*/
/*//////////////// LOGIN /////////////////*/
/*========================================*/

.container-register{
    width: 80% !important;
    margin: 5% 10%;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 3rem;
    float: left;
}
.container-register{
    border-radius: 20px !important;
}
.container-register #brand-logo{
    width: auto;
    float: right;
    text-align: right !important;
    margin: 0px !important;
}
.container-register #brand-logo img{
    width: 15vw !important;
    max-width: 200px;
    margin: 0px !important;
}
.register-body{
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
    url("../img/smartsme/Exterior\ draft2\ 1.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.register-body .form-body{
    width: 74%;
    margin-left: 5%;
    float: left;
}
.register-title{
    /*font-size: 1.6vw;*/
    font-size: 1.75rem;
    color: #0072B9;
    margin: 3rem 0rem 0rem 0rem;
}
.register-txtform{
    width: 100%;
    float: left;
    margin-bottom: 1rem;
}
.register-txtform-left{
    width: 49%;
    float: left;
    margin-right: 1%;
}
.register-txtform-right{
    width: 49%;
    float: left;
    margin-left: 1%;
}

@media screen and (orientation: portrait)
{
    .register-txtform-left{
        width: 100%;
        float: left;
        margin: 0%;
    }
    .register-txtform-right{
        width: 100%;
        float: left;
        margin: 0%;
        margin-top: 1rem;
    }
}

.register-form form, .register-form input, .register-form label, .register-form button, .register-form a{
    /*font-size: 1.3vw;*/
    font-size: 1rem;
    font-weight: 300;
}
.register-login a.txt-link{
    color: #0072B9 !important;
}

/*Styling Selectbox*/
.dropdown {
    width: 100%;
    display: inline-block;
    background-color: #fff;
    border:1px solid #d1d3e2;
    border-radius: 30px;
    height: calc(1.5em + .75rem + 7px);
    color: #6e707e;
    line-height: 1;
    transition: all .5s ease;
    position: relative;
    text-align: left;
    font-size: .85rem !important;
    padding:0rem .75rem !important;
}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 10px
}
.dropdown .select > i {
    font-size: .85rem !important;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 1;
}
.dropdown:hover {
    border:1px solid #6e707e;
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8
}
.dropdown.active .select > i {
    transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

/* Radio Box */
/* Hide the browser's default radio button */
/* The container */
/*.select-box {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin-right: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0.8rem;
  }

.select-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}*/
  
/* Create a custom radio button */

/*.select-box span.checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 12px;
    width: 12px;
    background-color: #5B5A58;
    border-radius: 2px;
}
.select-lang span.checkmark {
    top: 4px;
    left: 0;
    height: 12px;
    width: 12px;
    background-color: #5B5A58;
    border-radius: 2px;
}

/* On mouse-over, add a grey background color */
/*.select-box:hover input ~ .checkmark {
    background-color: #5B5A58;
}*/
/* When the radio button is checked, add a blue background */
/*.select-box input:checked ~ .checkmark {
    background-color: #5B5A58;
}*/

/* Create the indicator (the dot/circle - hidden when not checked) */
/*.checkmark:before {
    content: "";
    position: absolute;
    display: none;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}*/

/* Show the indicator (dot/circle) when checked */
/*.select-box input:checked ~ .checkmark:before {
    display: block;
}
.select-box input:checked ~ .checkmark:after {
    display: block;
}*/

/* Style the indicator (dot/circle) */
/*.select-box .checkmark:before {
    position: absolute;
    left: -6px;
    top: 50%;
    height: 40%;
    width: 2.5px;
    background-color: #fff;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}
.select-box .checkmark:after {
    position: absolute;
    left: -6px;
    bottom: 1.5px;
    height: 2.5px;
    width: 90%;
    background-color: #fff;
    content: "";
    transform: translateX(10px) rotate(-45deg);
    transform-origin: left bottom;
}*/


.page-regis-num{
    width: 100%;
    height: 5px;
}
.page-regis-num .num{
    width: 15%;
    height: 100%;
    background-color: #C4C4C4;
    margin-right: 2%;
    display: inline-block;
}
.num-active{
    background-color: #1479BA !important;
}





/* -- Policy -- */
.close-btn{
    width: 20px;
    height: 20px;
    background: url("../img/smartsme/icon/close-icon.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    float: right;
    cursor: pointer;
}
.text-link{
    color: #0072b9 !important;
    cursor: pointer;
}
.text-link:hover{
    text-decoration: underline !important;
}

/*========================================*/
/*//////////////// INDEX /////////////////*/
/*========================================*/

section img.bg-hall
{
    width: 100%; 
    height: 100%;
    position: relative;
}
section video.bg-hall
{
    width: 100%; 
    height: 100%;
    position: relative;
    object-fit: inherit;
    z-index: 1;
}
section .bg-container{
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: 2;
    top: 0;
}
@media screen and (orientation: portrait) {
    section img.bg-hall
    {
        width: 100vh;
        height: 100vw;
        top: 0 !important;
    }
    section video.bg-hall
    {
        width: 100vh;
        height: 100vw;
        top: 0 !important;
    }
}
/*@media screen and (orientation: landscape) {
    section img.bg-hall
    {
        width: 100vw; 
        height: 100vh;
        top: 0 !important;
    }
    section video.bg-hall
    {
        width: 100vw; 
        height: 100vh;
        top: 0 !important;
    }
}*/

.event-title{
    width: 100%;
    height: 6.9%;
    position: absolute; 
    top: 9.9%; 
    z-index: 2;
}
.event-name{
    width: 27%;
    height: 100%;
    left: 0;
    top: 0;
    margin-left: 19.3%;
    margin-right: 53.7%;
    position: relative;
}
.event-name span {
    width: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.4vw;
    text-align: center;
}

.slide-image{
    width: 100%;
    height: 13%;
    position: absolute; 
    top: 21.3%; 
    z-index: 1;
}
.slide-image-item{
    width: 35%;
    height: 100%;
    float: left;
    margin-left: 15%;
    margin-right: 50%;
    text-align: center;
    background-color: #5e5e5e;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.outside-banner{
    width: 35%;
    height: 22.3%;
    position: absolute; 
    top: 35.5%; 
    left: 0;
    z-index: 1;
    margin-left: 15%;
    margin-right: 50%;
}
.outside-vdo-item{
    width: 70%;
    height: 100%;
    float: left;
    text-align: center;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.outside-vdo-item iframe{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.ads-banner{
    width: 29%;
    height: 100%;
    float: left;
    margin-left: 1%;
    background-color: #fff;
    border: 2px solid #000;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.ads-banner img{
    width: 100%;
    height: 100%;
    /*object-fit: contain;*/
}

.ads-image{
    width: 25%;
    height: 38%;
    position: absolute; 
    top: 25.3%; 
    left: 0;
    z-index: 1;
    margin-left: 65%;
    margin-right: 10%;
}
.ads-image-item1{
    width: 25.5%;
    height: 100%;
    float: left;
    margin-left: 11%;
    text-align: center;
    background-color: #fff;
    /*position: relative;*/
}
.ads-image-item2{
    width: 24.7%;
    height: 100%;
    float: left;
    margin-left: 2.1%;
    text-align: center;
    background-color: #fff;
    /*position: relative;*/
}
.ads-image-item1 img,
.ads-image-item2 img{
    width: 100%;
    height: 100%;
    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

.link-menu{
    width: 100%;
    height: 16.7%;
    position: absolute; 
    top: 70%; 
    z-index: 1;
}
.link-menu-inside{
    width: 12%;
    height: 100%;
    float: left;
    margin-left: 37.7%;
    margin-right: 50.3%;
    text-align: center;
}
.link-menu-inside img{
    width: 90%;
    animation: link_inside 1s infinite;
}
/*.link-menu-inside img:hover{
    margin: 0% 5%;
}*/
@keyframes link_inside {
    0% {
        margin-top: 5%;
    }
    100% {
        margin-top: 0%;
    }
}

/*========================================*/
/*//////////////// INDEX /////////////////*/
/*========================================*/

/*========================================*/
/*///////////////// HALL /////////////////*/
/*========================================*/

.main-ads{
    width: 100%;
    height: 14.9%;
    position: absolute; 
    top: 11.5%; 
    z-index: 1;
}
@media (max-width: 960px) 
{
    .main-ads{
        height: 16.6%;
        top: 9.8%;
    }
}
.main-ads-item{
    width: 84.5%;
    height: 100%;
    float: left;
    margin-left: 12.3%;
    margin-right: 3.2%;
    position: relative;

    /*background-color: #fff;*/
    background: url('../img/smartsme/bg/hall-title-bg.png');

    text-align: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.ads-item-produce{
    width: 100%;
    height: 50%;
    padding: 1% 5% 0% 5%;
    text-align: center;
}
.item-produce{
    display: inline;
    width: 8%;
    height: 100%;
    margin-left: 1%;
    margin-right: 1%;
    object-fit: cover;
    /*background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}
.ads-item-sponsor{
    width: 100%;
    height: 50%;
    padding: 0.3% 5% 0.5% 5%;
    float: left;
}

.hall-ads{
    width: 100%;
    height: 15%;
    position: absolute; 
    top: 26.7%; 
    z-index: 1;
}
.hall-ads-1{
    width: 4.5%;
    height: 100%;
    float: left;
    margin-left: 26%;
    position: relative;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.hall-ads-2{
    width: 4.3%;
    height: 100%;
    float: left;
    margin-left: 2%;
    position: relative;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.hall-ads-3{
    width: 4.3%;
    height: 100%;
    float: left;
    margin-left: 2%;
    position: relative;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.hall-ads-4{
    width: 4.3%;
    height: 100%;
    float: left;
    margin-left: 25.3%;
    position: relative;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.hall-ads-5{
    width: 4.3%;
    height: 100%;
    float: left;
    margin-left: 1.8%;
    position: relative;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.hall-ads-6{
    width: 4.3%;
    height: 100%;
    float: left;
    margin-left: 2%;
    position: relative;
    background-color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.hall-ads-1 img,
.hall-ads-2 img,
.hall-ads-3 img,
.hall-ads-4 img,
.hall-ads-5 img,
.hall-ads-6 img{
    width: 100%;
    height: 100%;
}

.hall-vdo{
    width: 18%;
    height: 18%;
    position: absolute; 
    top: 26.8%; 
    left: 0;
    margin-left: 46.5%;
    margin-right: 35.5%;
    z-index: 2;
    background-color: #000;
}
.hall-vdo iframe{
    width: 100%;
    height: 100%;
}
.map{
    width: 100%;
    height: 7.4%;
    position: absolute; 
    top: 28.5%; 
    z-index: 1;
}
.link-map{
    width: 11.7%;
    height: 100%;
    float: left;
    margin-left: 11.5%;
    margin-right: 76.8%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    border:2px solid #00FFFF;
    box-shadow: 0px 0px 10px #00f7ff;
    border-radius: 10px;
}
.link-map:hover .link-map-title{
    color: #0072B9;
    text-shadow: 0px 0px 20px #00f7ff;
}
.link-map-title{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-size: 1.3vw;
}
.link-map-title img{
    width: 40%;
    margin-right: 10px;
}
.link-map:hover .link-map-title img{
    box-shadow: 0px 1px 20px #00f7ff;
}

.link-door{
    width: 100%;
    height: 11.4%;
    position: absolute; 
    top: 52.5%; 
    z-index: 1;
}
.link-door-1{
    width: 9.7%;
    height: 100%;
    float: left;
    margin-left: 29.8%;
    background-color: rgba(255, 255, 255, 0.7);
    border:2px solid #00FFFF;
    box-shadow: 0px 0px 10px #00f7ff;
    border-bottom: 0px;
    position: relative;
}
.link-door-2{
    width: 9.5%;
    height: 100%;
    float: left;
    margin-left: 11.8%;
    background-color: rgba(255, 255, 255, 0.7);
    border:2px solid #00FFFF;
    box-shadow: 0px 0px 10px #00f7ff;
    border-bottom: 0px;
    position: relative;
}
.link-door-3{
    width: 9.3%;
    height: 100%;
    float: left;
    margin-left: 12%;
    background-color: rgba(255, 255, 255, 0.7);
    border:2px solid #00FFFF;
    box-shadow: 0px 0px 10px #00f7ff;
    border-bottom: 0px;
    position: relative;
}
.link-door-1 div,
.link-door-2 div,
.link-door-3 div{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3vw;
    text-align: center;
}
.link-door-1 img,
.link-door-2 img,
.link-door-3 img{
    width: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    animation: link_door 1s infinite;
}
@keyframes link_door {
    0% {
        margin-top: 10%;
    }
    100% {
        margin-top: 15%;
    }
}

.link-door-1:hover div,
.link-door-2:hover div,
.link-door-3:hover div{
    color: #0072B9;
    text-shadow: 0px 0px 10px #00f7ff;
}

.link-info-center{
    width: 100%;
    height: 15.2%;
    position: absolute; 
    top: 70%; 
    z-index: 1;
}
.link-info{
    width: 17.4%;
    height: 100%;
    float: left;
    margin-left: 4%;
    text-align: center;
    position: relative;
}
.link-info img{
    width: 100%;
    height: 100%;
}
.link-info .link-info-title span{
    width: 50%;
    position: absolute;
    top: 70%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-size: 1.3vw;
    cursor: pointer;
}
.link-info div img{ 
    width: 1vw;
    margin-left: 5px;
}
.link-info:hover .link-info-title{
    color: #0072B9;
    text-shadow: 0px 0px 10px #00f7ff;
}
.info-active{
    color: #0072B9;
    text-shadow: 0px 0px 10px #00f7ff;
}

/* === menu dropdown === */
/* Dropdown Button */
/*.link-dropbtn{
    width: 100%;
    height: 30%;
    position: absolute; 
    top: 67.7%; 
    z-index: 1;
}*/
div.info-dropdiv {
    background-color: #fff;
    color: #fff;
    opacity: 0%;
    width: 100%;
    height: 200px;
    padding: 1rem 7rem;
    float: left;
    margin-left: 100%;
}
.info-dropdown {
    position: relative;
    display: inline-block;
}
.info-dropdown-content {
    display: none;
    position: absolute;
    opacity: 0.8;
    min-width: 300px;
    box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);
    background: linear-gradient(90deg, #013B6F 0%, #0E5B8A 60.86%, #17729E 99.99%);
    border-radius: 10px;
    text-align: left;
    z-index: 5;
    margin-left: 0%;
    /*top:-30px;
    left: 100px;*/
    bottom: 60px;
    padding: 0px 10px 20px 10px;
}
@media screen and (orientation: portrait)
{
    .info-dropdown-content{
        bottom: 40px;
    }
}
.info-dropdown-content a {
    width: auto;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #fff;
}
.info-dropdown-content a img{
    width: 20px;
    margin-right: 10px;
}
.info-dropdown-content a:hover img{
    width: 25px;
}
.link-info:hover .info-dropdown-content {display: block;}

/*========================================*/
/*///////////////// HALL /////////////////*/
/*========================================*/

/*========================================*/
/*//////////////// WORKSHOP ///////////////*/
/*========================================*/

.wp-info-icon{
    width: 5%;
    height: 11%;
    position: absolute; 
    top: 42%; 
    left: 0;
    margin-left: 26%;
    margin-right: 69%;
    margin-top: 5px;
    z-index: 1;
}
.wp-info-icon:hover{
    margin-top: 0px;
}
.wp-info-icon img{
    width: 100%;
    height: 100%;
}

.workshop-vdo{
    width: 24.7%;
    height: 22.9%;
    position: absolute; 
    top: 30.7%; 
    left: 0;
    margin-left: 37.2%;
    margin-right: 38.1%;
    z-index: 1;
    background-color: #000;
}
.workshop-vdo-mini{
    width: 12.3%;
    height: 12%;
    position: absolute; 
    top: 34.1%; 
    left: 0;
    margin-left: 70%;
    margin-right: 17.7%;
    z-index: 1;
    background-color: #000;
}
.workshop-vdo img,
.workshop-vdo iframe,
.workshop-vdo-mini img,
.workshop-vdo-mini iframe{
    width: 100%;
    height: 100%;
}
.calendar-icon{
    width: 2%;
    height: 4%;
    position: absolute; 
    top: 33%; 
    left: 0;
    margin-left: 83%;
    margin-right: 15%;
    margin-top: 5px;
    z-index: 1;
    background-color: #5A4797;
    border-radius: 5px;
}
.calendar-icon img{
    width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.calendar-icon:hover{
    box-shadow: 0px 0px 10px #00f7ff;
    margin-top: 0px;
}

/*========================================*/
/*//////////////// WORKSHOP ///////////////*/
/*========================================*/

/*========================================*/
/*/////////////// EXHIBITION //////////////*/
/*========================================*/

.ex-link-map{
    width: 30%;
    height: 15.9%;
    position: absolute; 
    top: 7.5%; 
    left: 0;
    z-index: 1;
    margin-left: 35%;
    margin-right: 35%;
    background-color: #fff;
    border: 5px solid #00f7ff;
    box-shadow: 0px 0px 10px #00f7ff;
    border-radius: 10px;
}
.ex-link-map:hover .ex-link-map-title{
    color: #0072B9;
    text-shadow: 0px 0px 20px #00f7ff;
}
.ex-link-map-title{
    width: 80%;
    height: 80%;
    float: left;
    margin: 2% 10%;
    font-size: 2vw;
    color: #0072B9;
}
.ex-link-map-title img{
    width: 40%;
    height: 100%;
    margin: 1% 15% 0% 15%;
}
.ex-link-map:hover .ex-link-map-title img{
    box-shadow: 0px 1px 20px #00f7ff;
}

.ex-ads1{
    width: 3.1%;
    height: 15.3%;
    position: absolute; 
    top: 43.6%; 
    left: 0;
    z-index: 1;
    margin-left: 33%;
    margin-right: 63.9%;
    background-color: #C4C4C4;
}
.ex-logo1{
    width: 5.7%;
    height: 6.3%;
    position: absolute; 
    top: 60%; 
    left: 0;
    z-index: 1;
    margin-left: 35.2%;
    margin-right: 59.1%;
    background-color: #C4C4C4;
}

.ex-ads2{
    width: 3.2%;
    height: 15.3%;
    position: absolute; 
    top: 43.6%; 
    left: 0;
    z-index: 1;
    margin-left: 65.1%;
    margin-right: 31.7%;
    background-color: #C4C4C4;
}
.ex-logo2{
    width: 5.7%;
    height: 6.3%;
    position: absolute; 
    top: 60%; 
    left: 0;
    z-index: 1;
    margin-left: 60.3%;
    margin-right: 37%;
    background-color: #C4C4C4;
}

.ex-ads3{
    width: 4%;
    height: 18.8%;
    position: absolute; 
    top: 42.8%; 
    left: 0;
    z-index: 1;
    margin-left: 23.2%;
    margin-right: 72.8%;
    background-color: #C4C4C4;
}
.ex-logo3{
    width: 7.3%;
    height: 8.5%;
    position: absolute; 
    top: 63.6%; 
    left: 0;
    z-index: 1;
    margin-left: 25.3%;
    margin-right: 67.4%;
    background-color: #C4C4C4;
}

.ex-ads4{
    width: 4%;
    height: 18.8%;
    position: absolute; 
    top: 43%; 
    left: 0;
    z-index: 1;
    margin-left: 74.3%;
    margin-right: 21.7%;
    background-color: #C4C4C4;
}
.ex-logo4{
    width: 7.3%;
    height: 8.5%;
    position: absolute; 
    top: 63.6%; 
    left: 0;
    z-index: 1;
    margin-left: 69%;
    margin-right: 23.7%;
    background-color: #C4C4C4;
}

.ex-ads5{
    width: 5.2%;
    height: 24.5%;
    position: absolute; 
    top: 42%; 
    left: 0;
    z-index: 1;
    margin-left: 7.3%;
    margin-right: 87.5%;
    background-color: #C4C4C4;
}
.ex-logo5{
    width: 9%;
    height: 11%;
    position: absolute; 
    top: 69.6%; 
    left: 0;
    z-index: 1;
    margin-left: 8.5%;
    margin-right: 82.5%;
    background-color: #C4C4C4;
}

.ex-ads6{
    width: 5.2%;
    height: 24.5%;
    position: absolute; 
    top: 42%; 
    left: 0;
    z-index: 1;
    margin-left: 89.3%;
    margin-right: 5.5%;
    background-color: #C4C4C4;
}
.ex-logo6{
    width: 9%;
    height: 11%;
    position: absolute; 
    top: 69.6%; 
    left: 0;
    z-index: 1;
    margin-left: 84.6%;
    margin-right: 6.4%;
    background-color: #C4C4C4;
}

.ex-ads1 img, .ex-logo1 img,
.ex-ads2 img, .ex-logo2 img,
.ex-ads3 img, .ex-logo3 img,
.ex-ads4 img, .ex-logo4 img,
.ex-ads5 img, .ex-logo5 img,
.ex-ads6 img, .ex-logo6 img{
    width: 100%;
    height: 100%;
}

.ex-go-inside{
    width: 10%;
    height: 22%;
    position: absolute; 
    top: 65.5%; 
    left: 0;
    z-index: 1;
    margin-left: 45%;
    margin-right: 45%;
    text-align: center;
}
.ex-go-inside img{
    width: 100%;
    animation: ex_link_inside 1s infinite;
}
@keyframes ex_link_inside {
    0% {
        margin-top: 5%;
    }
    100% {
        margin-top: 0%;
    }
}

/*========================================*/
/*/////////////// EXHIBITION //////////////*/
/*========================================*/

/*========================================*/
/*//////////////// BOOTH /////////////////*/
/*========================================*/

#booth
{
    width: 100%; 
    height: 100%; 
    position: relative;
}
.booth-title{
    width: 100%;
    height: 10%;
    top: 0;
    position: absolute;
    background: url('../img/smartsme/BG_TOP.png'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center;
    z-index: 2;
}
.booth-title img{
    width: 40%;
    max-width: 580px;
}

.booth-slider{
    width: 100%;
    height: 87%;
    position: absolute;
    background: url('../img/smartsme/bg/booth.png');
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center;
    z-index: 1;
}
.booth-gall-code{
    width: 10.7%;
    height: 8%;
    position: absolute; 
    top: 29.3%; 
    left: 0;
    z-index: 2;
    margin-left: 20%;
    margin-right: 69.3%;
    border-radius: 15px;
    text-align: center;
}
.zone1{background-color: #F26230; color: #fff;}
.zone2{background-color: #F3E230;}
.zone3{background-color: #D5286A; color: #fff;}
.zone4{background-color: #3DBFD5; color: #fff;}
.zone5{background-color: #A0CC39; color: #fff;}

.booth-gall-code span{
    width: 80%;
    font-size: 1.6vw;
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 1;
    transform: translate(-50%, -50%);
}
.booth-gall-ads1{
    width: 4.7%;
    height: 18.2%;
    position: absolute; 
    top: 31.9%; 
    left: 0;
    z-index: 2;
    margin-left: 42.5%;
    margin-right: 52.8%;
    background: #fff;
    border: 2px solid #dbe7e0;
}
.booth-gall-ads2{
    width: 4.7%;
    height: 18.2%;
    position: absolute; 
    top: 31.9%; 
    left: 0;
    z-index: 2;
    margin-left: 50%;
    margin-right: 45.3%;
    background-color: #fff;
    border: 2px solid #dbe7e0;
}
.booth-gall-title{
    width: 14.5%;
    height: 8.6%;
    position: absolute; 
    top: 31.9%; 
    left: 0;
    z-index: 2;
    margin-left: 56.6%;
    margin-right: 28.9%;
    background-color: #fff;
    border: 2px solid #dbe7e0;
}
.booth-gall-vdo{
    width: 8.4%;
    height: 22.9%;
    position: absolute; 
    top: 53%; 
    left: 0;
    z-index: 2;
    margin-left: 23%;
    margin-right: 68.6%;
    background-color: #000 !important;
}
.booth-gall-chat{
    width: 6.4%;
    height: 9.9%;
    position: absolute; 
    top: 48%; 
    left: 0;
    z-index: 2;
    margin-left: 33%;
    margin-right: 60.6%;
}
.booth-gall-logo{
    width: 16%;
    height: 12%;
    position: absolute; 
    top: 62%; 
    left: 0;
    z-index: 2;
    margin-left: 44.5%;
    margin-right: 39.5%;
    text-align: center;
}
.gall-logo{
    width: 60%;
    max-width: 80px;
    height: 80%;
    max-height: 80px;
    /*position: relative;
    margin: auto auto;*/

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}*/

@media (max-width: 992px) {
    .gall-logo {
      max-width: 40px !important;
      max-height: 40px !important;
    }
}
  
@media (max-width: 768px) {
    .container {
        max-width: 25px !important;
        max-height: 25px !important;
    }
}


.booth-gall-ads4{
    width: 15%;
    height: 31.9%;
    position: absolute; 
    top: 45%; 
    left: 0;
    z-index: 2;
    margin-left: 64%;
    margin-right: 21%;
    cursor: pointer;
}
.prod-img{
    width: 80%;
    max-width: 180px;
    height: 100%;
    margin: auto;
    position: relative;
}

.booth-gall-ads5{
    width: 4.8%;
    height: 36.9%;
    position: absolute; 
    top: 49%; 
    left: 0;
    z-index: 2;
    margin-left: 80.5%;
    margin-right: 14.7%;
}
.booth-gall-ads1 img,
.booth-gall-ads2 img,
.booth-gall-vdo img,
.booth-gall-vdo iframe,
.booth-gall-ads2 img,
.booth-gall-ads4 img,
.booth-gall-title img{
    width: 100% !important;
    height: 100% !important;
}
#facebook video{
    width: 100% !important;
    height: 140px !important;
}

.booth-gall-logo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
.booth-gall-chat img{
    width: 90%;
}
.booth-gall-chat:hover img{
    width: 100%;
}

.booth-footer{
    width: 100%;
    height: 13%;
    bottom: 0;
    position: absolute;
    background: url('../img/smartsme/BG\ Bottom.png'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center;
}


#brochure-pdf{
    margin-top: 70px;
}
.pdf-modal{
    width: 100%;
    height: 650px;
}
@media screen and (orientation: portrait)
{
    #brochure-pdf{
        width: 80%;
        margin: 50px 10% 0% 10%;
    }
    .pdf-modal{
        height: 400px;
    }
}

/*========================================*/
/*//////////////// BOOTH /////////////////*/
/*========================================*/

/*========================================*/
/*///////////////// MAP //////////////////*/
/*========================================*/

#map{
    width: 100%;
    height: 100%;
    position: relative;
    /* background: linear-gradient(180deg, rgba(0, 114, 185, 0.984375) 0%, #51BBAD 100%); */
    background-image: url('../../assets/img/smartsme/map_bg.png');
    background-size: cover;
}
#map .title{
    width: 100%;
    height: 10%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2;
}
#map .title img{
    width: 45%;
    max-width: 500px;
}


#map .map-img{
    width: 73%;
    height: 90%;
    margin: 0 1%;
    position: absolute;
    top: 8%;
    left: 0;
}

#map .map-detail{
    width: 24%;
    height: 60%;
    position: absolute;
    margin: 0% 1% 0% 0%;
    top: 8%;
    right: 0;
    /* background: linear-gradient(0deg, #013B6F 0%, #0E5B8D 60.86%, #1772A3 100%); */
    background-image: url('../../assets/img/smartsme/map_detail_bg.png');
    background-size: cover;
}

#map .map-detail .img-detail{
    width: 100%;
    height: 40%;
    float: left;
    text-align: center;
    padding: 1rem 0;
    background-color: #fff;
}
#map .map-detail .img-detail img{
    width: 50%;
    height: 30%;
    object-fit: contain;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*#map .map-detail .img-detail .logo img{
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    font-size: 1.3vw;
    cursor: pointer;
}*/
#map .map-detail .detail{
    width: 100%;
    height: 60%;
    float: left;
    padding: 1.5rem;
    position: relative;
    color: #fff;
}
.detail-smartsme-logo{
    width: 100%;
    height: auto;
    text-align: right;
    position: absolute;
    float: left;
    right: 0;
    bottom: 0;
}
.detail-smartsme-logo img{
    width: 25%;
    max-width: 70px;
    min-width: 30px;
    margin: 1rem;
}

#map .map-img .map-mark-bg{
    width: 100%;
    /*max-width: 1300px;*/
    position: relative;
    top: 0;
    left: 0;
    margin: auto;
    z-index: 1;
    /*transform: translate(-50%, -50%);*/
}
#map .map-img .map-mark-bg img{
    width: 85%;
    margin: 0% 7.5%;
    height: 100%;
    z-index: 2;
    margin-top: -3%;
}

#map-mark{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

/*========================================*/
/*///////////////// MAP //////////////////*/
/*========================================*/

/*========================================*/
/*//////////////// MATCH /////////////////*/
/*========================================*/

.match-title{
    width: 100%;
    height: 5%;
    position: absolute; 
    top:30.5%;
    z-index: 1;
}
.match-title1{
    width:9.4%;
    height: 100%;
    float: left;
    margin-left: 20.3%;
    text-align: center;
    position: relative;
}
.match-title2{
    width:14%;
    height: 100%;
    float: left;
    margin-left: 2.3%;
    text-align: center;
    position: relative;
}
.match-title3{
    width:14%;
    height: 100%;
    float: left;
    margin-left: 2.8%;
    margin-right: 37.2%;
    text-align: center;
    position: relative;
}
.match-title1 span,
.match-title2 span,
.match-title3 span{
    width: 100%;
    font-size: 1.3vw;
    line-height: 1;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.match-vdo{
    width: 10.5%;
    height: 28%;
    position: absolute; 
    top: 39.5%; 
    left: 0;
    z-index: 1;
    margin-left: 19.7%;
    margin-right: 70.7%;
    background-color: #000;
}
.match-vdo iframe{
    width: 100%;
    height: 100%;
}

.match-ads1{
    width: 13.8%;
    height: 11.3%;
    position: absolute; 
    top: 37.6%; 
    left: 0;
    z-index: 1;
    margin-left: 32.2%;
    margin-right: 54%;
    background-color: #D5F1FF;
}
.match-ads2{
    width: 13.8%;
    height: 11.6%;
    position: absolute; 
    top: 37.6%; 
    left: 0;
    z-index: 1;
    margin-left: 48.9%;
    margin-right: 37.3%;
    background-color: #D5F1FF;
}
.match-ads1 img, .match-ads2 img{
    width: 100%;
    height: 100%;
}

.modal-ads3{
    width: 1.5%;
    height: 2.6%;
    position: absolute; 
    top: 58%; 
    left: 0;
    z-index: 1;
    margin-left: 68.1%;
    margin-right: 36.3%;
    /*background-color: #FFC700;*/
}

.match-info{
    width: 5.3%;
    height: 8.6%;
    position: absolute; 
    top: 60%; 
    left: 0;
    z-index: 1;
    margin-left: 72.5%;
    margin-right: 36.3%;
}
.match-info span{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
    text-align: center;
}
.match-info:hover span{
    color: #0072B9;
    text-shadow: 0px 0px 10px #00f7ff;
}

.math-icon1{
    width: 4%;
    height: 8.6%;
    position: absolute; 
    top: 50%; 
    left: 0;
    z-index: 1;
    margin-left: 33.2%;
    margin-right: 62.8%;
    animation: link_match_icon 1s infinite;
    /*background: url('../img/smartsme/icon/Artboard\ 23@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;*/
}
/*.math-icon1:hover{
    background: url('../img/smartsme/icon/Artboard\ 22@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}*/
.math-icon2{
    width: 4%;
    height: 8.6%;
    position: absolute; 
    top: 50%; 
    left: 0;
    z-index: 1;
    margin-left: 47.5%;
    margin-right: 48.5%;
    animation: link_match_icon 1s infinite;
    /*background: url('../img/smartsme/icon/Artboard\ 23@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;*/
}
/*.math-icon2:hover{
    background: url('../img/smartsme/icon/Artboard\ 22@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}*/

.math-icon3{
    width: 4%;
    height: 8.6%;
    position: absolute; 
    top: 50%; 
    left: 0;
    z-index: 1;
    margin-left: 59.2%;
    margin-right: 36.8%;
    animation: link_match_icon 1s infinite;
    /*background: url('../img/smartsme/icon/Artboard\ 23@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;*/
}
/*.math-icon3:hover{
    background: url('../img/smartsme/icon/Artboard\ 22@2x.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: cover; 
    background-position: center;
}*/

@keyframes link_match_icon {
    0% {
        margin-top: 1%;
    }
    100% {
        margin-top: 0%;
    }
}

/*========================================*/
/*//////////////// MATCH /////////////////*/
/*========================================*/

/*========================================*/
/*/////////////// MSG BOX ////////////////*/
/*========================================*/
.msg-box{
    position: fixed;
    bottom: 50px;
    right: 50px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:#036aa9;
    z-index: 2000;
  }
  
  .msg-box a{
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #036aa9;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    background: url('../img/smartsme/icon/msg_icon.png'); 
    background-repeat: no-repeat, repeat; 
    background-size: 25px; 
    background-position: center;

    text-transform: uppercase;
    transition: all .35s;
  }
  
  .msg-box a:before,
  .msg-box a:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    
    background: url('../img/smartsme/icon/pencil.png'), #fff; 
    background-repeat: no-repeat, repeat; 
    background-size: 20px; 
    background-position: center;

    z-index: -1;
    transition: all .35s;
  }
  
  .msg-box a:before{
    opacity: .5;
  }
  
  .msg-box a:after{
    transition-delay: .1s;
  }
  
  .msg-box a:hover{
    background: none; 
  }
  
  .msg-box a:hover:before,
  .msg-box a:hover:after{
    top: 0;
  }

.chat-popup {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 50px;
    border: 3px solid #036aa9;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, 
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 17px;
    z-index: 3000;
}

/* Add styles to the form container */
.form-container {
    max-width: 300px;
    padding: 10px;
    background-color: white;
    border-radius: 13px;
}

/* Full-width textarea */
.form-container textarea{
    width: 100%;
    padding: 15px;
    margin: 5px 0 15px 0;
    font-size: 0.8rem;
    border: none;
    background: #f1f1f1;
    resize: none;
    min-height: 200px;
    border-radius: 10px;
}
.form-container input{
    width: 100%;
    padding: 15px;
    margin: 5px 0 5px 0;
    border-radius: 10px;
    font-size: 0.8rem;
    border: none;
    background: #f1f1f1;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus, 
.form-container input:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
    background: linear-gradient(180deg, #0072B9 0%, rgba(0, 114, 185, 0.984375) 0.01%, #025386 100%);
    color: #fff;
    border-radius: 36px !important;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    font-size: 0.8rem;
}
.form-container .btn span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.form-container .btn span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.form-container .btn:hover span {
    padding-right: 15px;
}
.form-container .btn:hover span:after {
    opacity: 1;
    right: 0;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background: linear-gradient(180deg, #EE4170 0%, #BB1542 92.06%);
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
    opacity: 1;
}
.form-container .msg-success{
    width: 100%; 
    float: left; 
    color: #4ba259; 
    text-align: center; 
    margin-bottom: 5px;
}

.block-msg{
    width: 100%; 
    height: 100%; 
    position:absolute; 
    float: left; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: 4000; 
    border-radius: 13px;
}
.btn-block-login{
    background: linear-gradient(180deg, #0072B9 0%, rgba(0, 114, 185, 0.984375) 0.01%, #025386 100%);
    color: #fff;
    border-radius: 36px !important;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width:80%;
    margin: 30% 10%;
    margin-bottom:10px;
    font-size: 0.8rem;
}
.btn-block-close{
    background: linear-gradient(180deg, #EE4170 0%, #BB1542 92.06%);
    color: #fff;
    border-radius: 36px !important;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width:80%;
    margin: 0% 10%;
    margin-bottom:10px;
    font-size: 0.8rem;
}

@media (max-width: 960px) 
{
    .msg-box{
        bottom: 20px;
        right: 20px;
    }
    .chat-popup{
        bottom: 20px;
        right: 20px;
    }
    .form-container input{
        padding: 10px;
    }
    .form-container{
        max-width: 200px;
    }
    .form-container textarea{
        min-height: 30px;
        margin: 5px 0 5px 0;
    }
}

/*========================================*/
/*/////////////// MSG BOX ////////////////*/
/*========================================*/