body
{
    background-color: #f5f4fa;
    min-width: 320px;
    color: #222222;
    font-family: "IRANYekan", "CenturyGothic";
    font-size: 10pt;
    line-height: 1.5em;
    cursor: default;
    direction: rtl;
    overflow-x: hidden;
}
body, html
{
    width: 100%;
    height: 100%;
}

button:focus
{
    outline: 0 !important;
}

.dir-ltr
{
    direction: ltr !important;
}
.dir-rtl
{
    direction: rtl;
}

.display-none
{
    display: none;
}
.display-inline-block
{
    display: inline-block;
}

.overflow-x-auto
{
    overflow-x: auto
}

.tooltip
{
    font-family: "IRANYekan", "CenturyGothic";
    white-space: nowrap;
}
.popover
{
    font-family: "IRANYekan", "CenturyGothic";
    right: auto;
    font-size: 10pt;
}

.clear-both
{
    clear: both;
}

.font-en
{
    font-family: "CenturyGothic" !important;
}
.font-bold
{
    font-weight: bold !important;
}
.font-normal
{
    font-weight: normal;
}

.text-decoration-underline
{
    text-decoration: underline;
}

.white-space-normal
{
    white-space: normal !important;
}

.cursor-default
{
    cursor: default;
}
.cursor-pointer
{
    cursor: pointer;
}

/* *** */

a/*, a:visited*/
{
    color: #222222;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
a:hover
{
    color: #d8194c;
}
a:hover, a:focus
{
    text-decoration: none;
}

/* font-size */

.font-size-7
{
    font-size: 7pt;
}
.font-size-8
{
    font-size: 8pt;
}
.font-size-9
{
    font-size: 9pt !important;
}
.font-size-10
{
    font-size: 10pt !important;
}
.font-size-11
{
    font-size: 11pt;
}
.font-size-12
{
    font-size: 12pt;
}
.font-size-13
{
    font-size: 13pt;
}
.font-size-14
{
    font-size: 14pt;
}

/* color */
.text-color-888888
{
    color: #888888;
}

/* margin */
.m-0
{
    margin: 0 !important;
}

.m-r--15
{
    margin-right: -15px !important;
}
.m-r-0
{
    margin-right: 0 !important;
}
.m-r-2
{
    margin-right: 2px !important;
}
.m-r-5
{
    margin-right: 5px !important;
}
.m-r-10
{
    margin-right: 10px !important;
}
.m-r-15
{
    margin-right: 15px !important;
}
.m-r-20
{
    margin-right: 20px !important;
}
.m-r-100
{
    margin-right: 100px !important;
}

.m-l-r-auto
{
    margin-right: auto !important;
    margin-left: auto !important;
}

.m-l--15
{
    margin-left: -15px !important;
}
.m-l-5
{
    margin-left: 5px !important;
}
.m-l-10
{
    margin-left: 10px !important;
}
.m-l-15
{
    margin-left: 15px !important;
}
.m-l-20
{
    margin-left: 20px !important;
}
.m-l-100
{
    margin-left: 100px !important;
}

.m-t--30
{
    margin-top: -30px !important;
}
.m-t--5
{
    margin-top: -5px !important;
}
.m-t-0
{
    margin-top: 0 !important;
}
.m-t-5
{
    margin-top: 5px !important;
}
.m-t-10
{
    margin-top: 10px !important;
}
.m-t-15
{
    margin-top: 15px !important;
}
.m-t-20
{
    margin-top: 20px !important;
}
.m-t-30
{
    margin-top: 30px !important;
}
.m-t-50
{
    margin-top: 50px !important;
}
.m-t-70
{
    margin-top: 70px !important;
}

.m-b-0
{
    margin-bottom: 0 !important;
}
.m-b-5
{
    margin-bottom: 5px !important;
}
.m-b-10
{
    margin-bottom: 10px !important;
}
.m-b-15
{
    margin-bottom: 15px !important;
}
.m-b-20
{
    margin-bottom: 20px !important;
}
.m-b-30
{
    margin-bottom: 30px !important;
}
.m-b-50
{
    margin-bottom: 50px !important;
}
.m-b-100
{
    margin-bottom: 100px !important;
}

/* padding */
.p-0
{
    padding: 0 !important;
}
.p-3
{
    padding: 3px !important;
}
.p-5
{
    padding: 5px !important;
}
.p-10
{
    padding: 10px !important;
}
.p-20
{
    padding: 20px !important;
}
.p-30
{
    padding: 30px !important;
}

.p-l-0
{
    padding-left: 0 !important;
}
.p-l-5
{
    padding-left: 5px !important;
}
.p-l-15
{
    padding-left: 15px !important;
}
.p-l-20
{
    padding-left: 20px !important;
}

.p-t-5
{
    padding-top: 5px !important;
}
.p-t-15
{
    padding-top: 15px !important;
}
.p-t-7
{
    padding-top: 7px !important;
}
.p-t-10
{
    padding-top: 10px !important;
}
.p-t-20
{
    padding-top: 20px !important;
}
.p-t-50
{
    padding-top: 50px !important;
}

.p-r-0
{
    padding-right: 0 !important;
}
.p-r-5
{
    padding-right: 5px !important;
}
.p-r-10
{
    padding-right: 10px !important;
}
.p-r-15
{
    padding-right: 15px !important;
}
.p-r-20
{
    padding-right: 20px !important;
}
.p-r-25
{
    padding-right: 25px !important;
}
.p-r-30
{
    padding-right: 30px !important;
}
.p-r-40
{
    padding-right: 40px !important;
}
.p-r-50
{
    padding-right: 50px !important;
}
.p-r-60
{
    padding-right: 60px !important;
}

.p-b-0
{
    padding-bottom: 0 !important;
}
.p-b-5
{
    padding-bottom: 5px !important;
}
.p-b-15
{
    padding-bottom: 15px !important;
}

/* width */
.width-auto
{
    width: auto;
}
.width-100-percent
{
    width: 100% !important;
}
.width-50-percent
{
    width: 50%;
}
.width-33-percent
{
    width: 33.33%;
}
.width-25-percent
{
    width: 25%;
}

.width-1
{
    width: 1px;
}
.width-20
{
    width: 20px;
}
.width-40
{
    width: 40px;
}
.width-50
{
    width: 50px;
}
.width-60
{
    width: 60px;
}
.width-70
{
    width: 70px;
}
.width-80
{
    width: 80px;
}
.width-85
{
    width: 85px;
}
.width-100
{
    width: 100px !important;
}
.width-120
{
    width: 120px;
}
.width-130
{
    width: 130px;
}
.width-140
{
    width: 140px;
}
.width-150
{
    width: 150px;
}
.width-160
{
    width: 160px;
}
.width-180
{
    width: 180px;
}
.width-190
{
    width: 190px;
}
.width-200
{
    width: 200px;
}
.width-220
{
    width: 220px;
}
.width-250
{
    width: 250px;
}

.width-max-100-percent
{
    max-width: 100% !important;
}
.width-max-60
{
    max-width: 60px;
}
.width-max-120
{
    max-width: 120px;
}
.width-max-300
{
    max-width: 300px;
}
.width-max-400
{
    max-width: 400px;
}
.width-max-500
{
    max-width: 500px;
}
.width-max-600
{
    max-width: 600px;
}
.width-max-700
{
    max-width: 700px;
}
.width-max-800
{
    max-width: 800px;
}
.width-max-1170
{
    max-width: 1170px;
}

.width-min-60
{
    min-width: 60px;
}
.width-min-200
{
    min-width: 200px;
}
.width-min-767
{
    min-width: 767px;
}

/* height */
.height-auto
{
    height: auto !important;
}
.height-10
{
    height: 10px !important;
}
.height-20
{
    height: 20px !important;
}
.height-32
{
    height: 32px !important;
}
.height-34
{
    height: 34px !important;
}
.height-60
{
    height: 60px;
}
.max-height-60
{
    max-height: 60px;
}
.height-100
{
    height: 100px !important;
}
.height-150
{
    height: 150px !important;
}
.height-200
{
    height: 200px !important;
}
.height-250
{
    height: 250px !important;
}
.height-300
{
    height: 300px !important;
}
.height-400
{
    height: 400px !important;
}

.min-height-20
{
    min-height: 20px !important;
}

/* line-height */
.line-height-2
{
    line-height: 2em !important;
}

/* form */
.form-horizontal label
{
    text-align: justify !important;
}

textarea
{
    resize: none;
}

/**/
.label, .badge
{
    font-family: "IRANYekan", "CenturyGothic";
}

/**/
.colorpicker.dropdown-menu
{
    right: auto !important;
}
.popover.clockpicker-popover
{
    right: auto !important;
}
.popover.clockpicker-popover .popover-title
{
    direction: ltr;
}

/* float */
.float-right
{
    float: right !important;
}
.float-left
{
    float: left !important;
}
.float-none
{
    float: none !important;
}

/* loader-wait */
form .loader-wait
{
    float: right;
}

/* * */
.string-single-line
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* * */

.border-bottom-black
{
    border-bottom: 1px solid #000000;
}
.border-bottom-gray
{
    border-bottom: 1px solid #dadada;
}
.border-black
{
    border: 1px solid #000000;
}

.border-bottom-dotted-black
{
    border-bottom: 1px dotted #000000;
}

.border-double-black
{
    border: 5px double #000000;
}

.border-0
{
    border: 0;
}
.border-top-0
{
    border-top: 0 !important;
}
.border-bottom-0
{
    border-bottom: 0;
}

/* * */

.vertical-align-top
{
    vertical-align: top !important;
}

/* *** */
::-webkit-input-placeholder
{
    direction: rtl;
}
:-moz-placeholder
{
    direction: rtl;
}
::-moz-placeholder
{
    direction: rtl;
}
:-ms-input-placeholder
{
    direction: rtl;
}

/* *** */
.font-en::-webkit-input-placeholder
{
    font-family: "IRANYekan", "CenturyGothic";
    direction: rtl;
}
.font-en:-moz-placeholder
{
    font-family: "IRANYekan", "CenturyGothic";
    direction: rtl;
}
.font-en::-moz-placeholder
{
    font-family: "IRANYekan", "CenturyGothic";
    direction: rtl;
}
.font-en:-ms-input-placeholder
{
    font-family: "IRANYekan", "CenturyGothic";
    direction: rtl;
}

/* *** */
::selection
{
    background-color: #30ccff;
    color: #ffffff;
}
::-moz-selection
{
    background-color: #30ccff;
    color: #ffffff;
}

/* *** */
.letter-spacing-0-3
{
    letter-spacing: 0.3em;
}

/* *** */
.form-horizontal .control-label
{
    text-align: right;
}

/* * */

.color-transparent
{
    color: transparent;
}

/* * */

@media (min-width: 1400px)
{
    .container
    {
        width: 1370px;
    }
}
@media (min-width: 1500px)
{
    .container
    {
        width: 1470px;
    }
}
@media (min-width: 1600px)
{
    .container
    {
        width: 1570px;
    }
}

/*
***********************************************************************************************************************/

.sweet-alert
{
    padding: 30px 30px !important;
    border-radius: 0;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.sweet-alert .sa-icon
{
    margin-top: 0;
}
.sweet-alert h2
{
    margin-top: 0;
}
.sweet-alert button
{
    border-radius: 25px 25px 0 25px;
    margin-top: 40px;
}
.sweet-alert div p
{
    line-height: 2em;
}
.sweet-alert .fa
{
    font-size: 7pt;
}

.alert
{
    border-radius: 0;
}

.modal-open .mm-slideout
{
    z-index: auto;
}

.mm-menu_rtl.mm-menu_offcanvas
{
    z-index: 10;
}

.modal-content
{
    border-radius: 0;
}

.table-responsive
{
    width: 100%;
    float: right;
}

/*
***********************************************************************************************************************/

.form-star
{
    color: #d3d3d3;
    font-size: 7pt;
    margin-right: 5px;
}

.form-field-star
{
    position: relative;
}
.form-field-star:after
{
    color: #d3d3d3;
    font-family:Font Awesome\ 5 Free;
    font-size: 7pt;
    font-style: normal;
    font-weight: 900;
    content: "\f005" !important;
    position: absolute;
    top: 7px;
    left: 20px;
}

.lg-backdrop
{
    background-color: rgba(0, 0, 0, 0.6);
}

.input-checkbox-style, .input-radiobox-style
{
    display: none;
}

.input-checkbox-style-box, .input-radiobox-style-box
{
    width: 15px;
    height: 15px;
    float: right;
    position: relative;
}
.input-checkbox-style-box:before, .input-radiobox-style-box:before
{
    color: #222222;
    font-family: 'Font Awesome 5 Free';
    font-size: 12pt;
    font-weight: 400;
    content: "\f0c8";
    position: absolute;
    right: 0;
    top: 0;
}
.input-radiobox-style-box:before
{
    content: "\f111";
}
.input-checkbox-style:checked + .input-checkbox-style-box:before, .input-radiobox-style:checked + .input-radiobox-style-box:before
{
    content: "\f14a";
}
.input-radiobox-style:checked + .input-radiobox-style-box:before
{
    content: "\f058";
}

/*
***********************************************************************************************************************/

.main-body
{
    min-width: 320px;
    overflow-x: hidden;
}
.main-body-inner
{
    background-color: #f5f4fa;
    width: 100%;
    float: right;
}

.page-content-box
{
    width: 100%;
    float: right;
}

/* *** */

.page-content
{
    width: 100%;
    min-height: 300px;
    float: right;
    margin: 50px 0 70px 0;
}/*
.page-content.page-des img, .page-content.post-des img
{
    max-width: 100%;
    min-width: 40px;
    height: auto !important;
}
.page-content.page-des p:last-child
{
    margin-bottom: 0;
}
*/
/* *** */

.panel-data-box
{
    background: #ffffff;
    width: 100%;
    float: right;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    /*
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    */
}

.panel-data-box .panel-content-box
{
    width: 100%;
    float: right;
    clear: both;
}

.panel-data-box .title-box
{
    font-size: 11pt;
    line-height: 2em;
    border-bottom: 1px solid #eeeeee;
}

.panel-data-box .des
{
    text-align: justify;
    line-height: 2em;
}

/*
.panel-data-box .title-box
{
    width: 100%;
    float: right;
    border-bottom: 1px solid #eeeeee;
    padding: 0 0 7px 0;
    margin-bottom: 20px;
    position: relative;
}
.panel-data-box .title-box .title-main
{
    color: #363382;
    font-size: 12pt;
    text-align: justify;
    float: right;
    position: relative;
}
.panel-data-box .title-box .title-main:before
{
    background: #d8194c;
    width: calc(100% + 20px);
    height: 1px;
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
}
*/

/* *** */

.bar-title
{
    width: 100%;
    text-align: right;
    float: right;
    margin-bottom: 40px;
    position: relative;
}/*
.bar-title:after
{
    background-color: #cbcbcb;
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 50%;
    right: 0;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -o-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}*/
/*
.bar-title:after
{
    background-image: url("../../img/title-line.png");
    background-repeat: no-repeat;
    width: 70px;
    height: 5px;
    content: "";
    position: absolute;
    bottom: -15px;
    right: 50%;
    transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
}*/
.bar-title .title
{
    /*background-color: #f5f4fa;*/
    color: #444444;
    font-size: 14pt;
    float: right;/*
    padding-left: 7px;
    position: relative;
    z-index: 1;*/
}
.bar-title .link-all, .bar-title .link-all:visited
{
    /*background-color: #f5f4fa;*/
    color: #888888;
    float: left;/*
    padding: 0 5px;
    border: 1px solid #cbcbcb;
    position: relative;
    z-index: 1;*/
}
.bar-title .link-all:hover
{
    color: #d8194c;
}
/*
.bar-title .des
{
    color: #888888;
    margin-top: 15px;
}
.bar-title .des.des-blue
{
    color: #c0efff;
}
*/

/* *** */

.page-banner
{
    background-image: url("../../img/loading.gif");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #d7d5e3;
    width: 100%;
    height: 25%;
    float: right;
    margin-top: -25px;
    overflow: hidden;
    position: relative;
}
.page-banner:before
{
    content: "";
    display: block;
    padding-top: 25%;
}

/* page-title & breadcrumb
***********************************************************************************************************************/

.page-title-breadcrumb
{
    /*background-color: #d7d5e3;*/
    background-color: #feae13;
    width: 100%;
    float: right;
    padding: 20px 0 10px 0;
    position: relative;
    z-index: 1;
}

/* *** */

.page-title
{
    float: right;
    position: relative;
}
.page-title .title
{
    color: #ffffff;
    font-size: 12pt;
    /*font-weight: bold;*/
    text-align: justify;
    position: relative;
    z-index: 2;
}
.page-title .title-back
{
    color: #ccc9d7;
    font-size: 30pt;
    font-weight: bold;
    text-align: justify;
    display: none;
    white-space: nowrap;
    content: "";
    position: absolute;
    top: 2px;
    right: -10px;
    z-index: 1;
}

/* *** */

.breadcrumb
{
    background: transparent;
    font-size: 8pt;
    color: #ffffff;
    float: left;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 15;
}
.breadcrumb > li + li:before
{
    color: #ffffff;
    font-family:Font Awesome\ 5 Free;
    font-style: normal;
    font-weight: 900;
    content: "\f30a";
    vertical-align: middle;
}
.breadcrumb a, .breadcrumb a:visited
{
    color: #ffffff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.breadcrumb a:hover
{
    color: #d8194c;
}

/* *** */

.page-title-box-divider
{
    height: 25px;
    display: block;
    position: relative;
    z-index: 2;
    -moz-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
}
.page-title-box-divider path
{
    /*
    fill: #d7d5e3;
    stroke: #d7d5e3;
    */
    fill: #feae13;
    stroke: #feae13;
}

/* *** */

@media (max-width: 992px)
{
    .page-title-breadcrumb .page-title
    {
        width: 100%;
    }
    .page-title-breadcrumb, .page-title-breadcrumb .page-title .title
    {
        text-align: center;
    }
    .page-title-breadcrumb .page-title .title-back
    {
        width: 100%;
        text-align: center;
    }
    .breadcrumb
    {
        float: none;
        display: inline-block;
        margin-top: 10px;
    }
}

/* swiper
***********************************************************************************************************************/

.swiper-btn-box
{
    text-align: center;
    display: none;
    margin-top: 30px;
}
.swiper-btn-next, .swiper-btn-prev
{
    width: 32px;
    height: 32px;
    color: #222222;
    font-size: 16pt;
    text-align: center;
    display: inline-block;
    padding-top: 5px;
    margin: 0;
}
.swiper-btn-next:hover, .swiper-btn-prev:hover
{
    color: #d8194c;
}
.swiper-button-disabled
{
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

/* menu & logo
***********************************************************************************************************************/

.menu-logo-bar
{
    background: #ffffff;
    width: 100%;
    min-width: 320px;
    height: 65px;
    float: right;
    /*
    border-top: 3px solid #d8194c;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    */
    position: relative;
    z-index: 20;
}

/* *** */

.menu-logo-bar .logo-title
{
    float: right;
}
.menu-logo-bar .logo-title .logo
{
    float: right;
    /*margin: 5px 0 0 0;*/
    position: relative;
    z-index: 1;
}
.menu-logo-bar .logo-title .logo img
{
    width: auto;
    max-width: 100%;
    height: 65px;
    padding: 5px 0;
    /*
    width: auto;
    max-width: 100%;
    max-height: 50px;
    */
    object-fit: contain;
    -o-object-fit: contain;
    font-family: "object-fit: contain;";
}
.menu-logo-bar .logo-title .title, .menu-logo-bar .menu .title
{
    color: #ffffff;
    text-align: justify;
    text-align-last: justify;
    float: right;
    margin: 10px 5px 0 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
.menu-logo-bar .logo-title .title h1
{
    font-size: 5pt;
    margin: 0;
}
.menu-logo-bar .logo-title .title h2
{
    font-size: 8pt;
    margin: 5px 0 0 0;
}

/* *** */

.menu-logo-bar ul.menu
{
    float: right;
    margin: 0 10px 0 0;
    padding: 0;
}
.menu-logo-bar ul.menu li
{
    float: right;
    position: relative;
}
.menu-logo-bar ul.menu ul li
{
    width: 100%;
}
.menu-logo-bar ul.menu li a, .menu-logo-bar ul.menu li a:visited
{
    width: 100%;
    height: 65px;
    color: #222222;
    line-height: 65px;
    float: right;
    padding: 0 8px;
}
.menu-logo-bar ul.menu li a:hover, .menu-logo-bar ul.menu > li:hover > a, .menu-logo-bar ul.menu ul > li:hover > a
{
    color: #d8194c;
}

.menu-logo-bar ul.menu ul
{
    padding: 5px 0;
}
.menu-logo-bar ul.menu ul li a
{
    height: auto;
    color: #222222;
    line-height: 2em;
    padding: 5px 10px;
}
.menu-logo-bar ul.menu ul
{
    background-color: #ffffff;
    width: 200px;
    display: none;
    border-top: 3px solid #f5f4fa;
    position: absolute;
    top: 65px;
    right: 0;
    z-index: 100;
}
.menu-logo-bar ul.menu ul ul
{
    border-top: 0;
    border-right: 3px solid #f5f4fa;
    top: 0;
    right: 100%;
}
.menu-logo-bar ul.menu > li:hover > ul
{
    display: block;
}
.menu-logo-bar ul.menu ul > li:hover > ul
{
    display: block;
}

/* *** */
/*
.link-boomgardi
{
    background-color: #d8194c;
    color: #ffffff;
    float: left;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 25px 0 25px 25px;
}
.link-boomgardi:hover
{
    color: #30ccff;
}
*/

.link-boomgardi-host
{
    background-color: #d8194c;
    color: #ffffff;
    float: left;
    padding: 5px 10px;
    margin-top: 17px;
    border-radius: 25px;
}
.link-boomgardi-host:hover
{
    color: #30ccff;
}

.link-boomgardi
{
    height: 65px;
    color: #d8194c !important;
    line-height: 65px;
    float: left;
    padding: 0 8px;
}
.link-boomgardi:hover
{
    color: #30ccff !important;
}

.link-user-account-box
{
    float: left;
    list-style: none;
    position: relative;
}
.link-user-account, .link-user-account:focus
{
    height: 65px;
    color: #222222;
    line-height: 65px;
    float: left;
    padding: 0 8px;
}
.link-user-account:hover
{
    color: #30ccff;
}

.link-user-account-box .dropdown-menu
{
    margin: 0;
    border: 0;
    border-top: 3px solid #f5f4fa;
    border-radius: 0;
    box-shadow: none;
    top: 65px;
}
.link-user-account-box .dropdown-menu a, .link-user-account-box .dropdown-menu a:visited
{
    color: #222222;
    font-size: 10pt;
    padding: 5px 10px;
}
.link-user-account-box .dropdown-menu a:hover, .link-user-account-box .dropdown-menu a:focus
{
    background-color: transparent;
    color: #d8194c;
}

/*
.link-signup, .link-signin, .link-agency
{
    background-color: #e2e2e2;
    color: #222222;
    float: left;
    padding: 10px 15px;
    margin: 10px 0 0 5px;
    border-radius: 0 25px 25px 25px;
}
.link-signup
{
    border-radius: 0 0 25px 25px;
}
.link-signup:hover, .link-signin:hover, .link-agency:hover
{
    color: #d8194c;
}
*/

/* *** */

.menu-logo-bar .phone
{
    text-align: right;
    float: left;
    display: inline-block;
    vertical-align: top;
    padding: 0 10px 0 0;
    margin: 15px 7px 0 0;
    border-right: 1px solid #888888;
}
.menu-logo-bar .phone .phone-number
{
    color: #888888;
    font-size: 13pt;
    padding-left: 30px;
    position: relative;
}
.menu-logo-bar .phone .phone-number:before
{
    color: #888888;
    font: 30px "font-caplus";
    content: "\e916";
    position: absolute;
    left: 0;
    top: 0;
}
.menu-logo-bar .phone:hover .phone-number:before
{
    animation: vibration 500ms ease-in-out;
}
.menu-logo-bar .phone span
{
    color: #909090;
    font-size: 8pt;
    line-height: 12px;
    display: block;
    margin-top: 5px;
}

/* *** */

@media (max-width: 1300px)
{
    .link-user-account-box .user-name-family
    {
        max-width: 75px;
        float: right;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
@media (max-width: 1199px)
{
    .btn-side-menu, .btn-side-menu:focus
    {
        height: 65px;
        color: #a5a5a5;
        font-size: 16pt;
        line-height: 65px;
        float: right;
        display: block;
        padding: 0 20px;
        margin-right: 10px;
    }
    .btn-side-menu i
    {
        margin-top: 22px;
    }
    .menu-logo-bar ul.menu
    {
        display: none;
    }
}
@media (max-width: 550px)
{
    .menu-logo-bar .logo-title .logo img
    {
        padding: 10px 0;
    }
}
@media (max-width: 500px)
{
    .btn-side-menu, .btn-side-menu:focus
    {
        padding: 0 10px;
    }
    .link-boomgardi
    {
        padding-left: 0;
    }
    .link-user-account
    {
        padding-left: 0;
    }
    .menu-logo-bar .phone
    {
        display: none;
    }
}

/* product-box
***********************************************************************************************************************/

.product-box .product-item
{
    background-color: #ffffff;
    width: 100%;
    float: right;
    padding: 5px;
    border: 1px solid #efefef;
    border-radius: 7px;

}
.page-search .product-box .product-item
{
    margin-bottom: 30px;
}
.product-box .product-item a
{
    width: 100%;
    text-align: center;
    float: right;
}
.product-box .product-item a .img
{
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
}
.product-box .product-item a .img:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.product-box .product-item a .img img
{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}
.product-box .product-item a:hover .img img
{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.product-box .product-item a .title, .product-box .product-item a:visited .title
{
    width: 100%;
    height: 4em;
    color: #222222;
    font-size: 10pt;
    text-align: center;
    line-height: 2em;
    float: right;
    clear: both;
    padding: 0;
    margin: 10px 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.product-box .product-item a:hover .title
{
    color: #d0b530;
}
/*
.product-box .product-item .no-exist
{
    color: #8b8b8b;
    font-size: 9pt;
    margin-bottom: 7px;
}
.product-box .product-item .no-exist .number
{
    color: #173f63;
    font-size: 10pt;
    margin-right: 10px;
}*/

.product-box .product-item .score-star-box
{
    color: #acacac;
    font-size: 9pt;
    margin-bottom: 5px;
    position: relative;
    direction: ltr;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}
.product-box .product-item .score-star-box .score-star-filled-box
{
    color: #d0b530;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

.product-box .product-item .product-price
{
    height: 42px;
    text-align: justify;
    clear: both;
    display: table-cell;
    vertical-align: bottom;
}
.product-box .product-item .product-price .price-old
{
    color: #f12a2d;
    font-size: 9pt;
    letter-spacing: 1px;
    text-decoration: line-through;
}
.product-box .product-item .product-price .price-final
{
    color: #222222;
    font-size: 11pt;
    letter-spacing: 1px;
}
.product-box .product-item .product-price .price-final .price-unit
{
    color: #acacac;
    font-size: 8pt;
    margin-right: 3px;
    letter-spacing: 0;
}

.product-box .product-item .product-price .label-status-exist
{
    font-size: 9pt;
}

.product-box .product-item .percent-discount
{
    background-color: #c52c50;
    width: 40px;
    color: #ffffff;
    font-size: 8pt;
    text-align: center;
    direction: ltr;
    position: absolute;
    top: 5px;
    left: -5px;
}

.product-box .product-item .buy-box
{
    height: 42px;
    float: left;
    position: absolute;
    bottom: 0;
    left: 0;
}
.product-box .product-item .buy-box button
{
    background-color: transparent;
    width: 32px;
    height: 32px;
    color: #acacac;
    font-size: 10pt;
    text-align: center;
    border: 1px solid #acacac;
    border-radius: 100%;
    padding-right: 0;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}/*
.product-box .product-item .buy-box button:hover
{
    color: #173f63;
    text-decoration: none;
    border-color: #173f63;
}*/
.product-box .product-item .buy-box button:before
{
    width: 22px;
    height: 19px;
    color: #acacac;
    font-size: 14pt;
    font-family: 'font-caplus';
    content: "\e910";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 9;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* *** */

.product-top-sale-box .swiper-button-next, .product-top-sale-box .swiper-button-prev,
.product-new-box .swiper-button-next, .product-new-box .swiper-button-prev,
.product-related-box .swiper-button-next, .product-related-box .swiper-button-prev
{
    background-image: none;
    width: 30px;
    height: 27px;
    color: #1a5284;
    font-size: 14pt;
    text-align: center;
    float: left;
    padding-top: 4px;
    margin: 0;
    display: inline-block;
    opacity: 1;
    -moz-opacity: 1;
    top: -3px;
    left: 0;
}
.product-top-sale-box .swiper-button-next,
.product-new-box .swiper-button-next,
.product-related-box .swiper-button-next
{
    right: auto;
}
.product-top-sale-box .swiper-button-prev,
.product-new-box .swiper-button-prev,
.product-related-box .swiper-button-prev
{
    left: 31px;
}
.product-top-sale-box .swiper-button-next:hover, .product-top-sale-box .swiper-button-prev:hover,
.product-new-box .swiper-button-next:hover, .product-new-box .swiper-button-prev:hover,
.product-related-box .swiper-button-next:hover, .product-related-box .swiper-button-prev:hover
{
    color: #d0b530;
}
.product-top-sale-box .swiper-button-disabled,
.product-new-box .swiper-button-disabled,
.product-related-box .swiper-button-disabled
{
    opacity: 0.35;
    -moz-opacity: 0.35;
}

/*
***********************************************************************************************************************/

.product-whit-category
{
    clear: both;
}

.product-whit-category .product-box .product-item
{
    width: 100%;
    float: right;
    padding: 0 0 10px 0;
    margin-bottom: 10px;
    border: 0;
    border-bottom: 1px solid #efefef;
    border-radius: 0;
}
.product-whit-category .product-box .product-item:last-child
{
    margin-bottom: 0;
    border-bottom: 0;
}

.product-whit-category .product-box .product-item .img
{
    width: 64px;
    height: 64px;
    float: right;
    overflow: hidden;
    position: relative;
}
.product-whit-category .product-box .product-item .img:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.product-whit-category .product-box .product-item .img img
{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}
.product-whit-category .product-box .product-item:hover .img img
{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.product-whit-category .product-box .product-item .title-price-box
{
    padding-right: 70px;
    position: relative;
}
.product-whit-category .product-box .product-item .title-price-box .title
{
    width: 100%;
    height: 3em;
    color: #222222;
    font-size: 10pt;
    text-align: justify;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.product-whit-category .product-box .product-item:hover .title-price-box .title
{
    color: #d0b530;
}
.product-whit-category .product-box .product-item .title-price-box .product-price
{
    height: auto;
    text-align: justify;
    margin-top: 3px;
    display: block;
    clear: none;
}
.product-whit-category .product-box .product-item .title-price-box .product-price .price-final
{
    color: #222222;
    font-size: 10pt;
    letter-spacing: 1px;
}
.product-whit-category .product-box .product-item .title-price-box .product-price .price-final .price-unit
{
    color: #acacac;
    font-size: 8pt;
    margin-right: 3px;
    letter-spacing: 0;
}
.product-whit-category .product-box .product-item .title-price-box .product-price .label-status-exist
{
    font-size: 9pt;
}

.product-whit-category .product-box .product-item .buy-box
{
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
}
.product-whit-category .product-box .product-item .buy-box button
{
    background-color: transparent;
    width: 28px;
    height: 28px;
    color: #acacac;
    font-size: 10pt;
    text-align: right;
    display: block;
    margin: 0;
    border: 1px solid #acacac;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.product-whit-category .product-box .product-item .buy-box button:before
{
    width: 18px;
    height: 18px;
    color: #acacac;
    font-size: 13pt;
    font-family: 'font-caplus';
    content: "\e910";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 9;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* *** */

@media (max-width:550px)
{
    .product-whit-category div[class*="col-"]
    {
        width: 100%;
    }
}

@media (max-width:1199px)
{
    .product-popular-box .product-box .product-item .img
    {
        width: 48px;
    }
    .product-popular-box .product-box .product-item .title-price-box
    {
        padding-right: 53px;
    }
}

/* home - banner
***********************************************************************************************************************/

.page-home .banner-bar
{
    background-color: #d7d5e3;
    width: 100%;
    min-width: 320px;
    float: left;/*
    margin-bottom: 70px;*/
    position: relative;
}
.page-home .banner-bar .banner-box
{
    width: 100%;
    min-width: 320px;
    height: 31.25%;
    float: left;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.page-home .banner-bar .banner-box:before
{
    content: "";
    display: block;
    padding-top: 31.25%;
}

.page-home .banner-bar .banner-box .banner-box-overly
{
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.page-home .banner-bar .banner-box .swiper-container
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.page-home .banner-bar .banner-box .swiper-slide
{
    overflow: hidden;
}
.page-home .banner-bar .banner-box .swiper-slide a
{
    width: 100%;
    height: 100%;
    float: right;
    overflow: hidden;
}
.page-home .banner-bar .banner-box .swiper-slide img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
}
.page-home .banner-bar .banner-box .swiper-slide video
{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.page-home .banner-bar .banner-box .swiper-slide .des-box
{
    /*background-color: rgba(3, 78, 162, 0.5);*/
    position: absolute;
    top: 50%;
    right: -1000px;
    z-index: 2;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}
.page-home .banner-bar .banner-box .swiper-slide .des-box .des-item
{
    width: 100%;
    color: #ffffff;
    font-size: 11pt;
    text-align: center;
    float: right;
    clear: both;
    padding: 5px 15px;
    visibility: hidden;
    white-space: nowrap;
}
.page-home .banner-bar .banner-box .swiper-slide .des-box .des-item:first-child
{
    font-size: 16pt;
}
.page-home .banner-bar .banner-box .swiper-slide .des-box .des-item:last-child
{
    margin-bottom: 0;
}

.page-home .banner-bar .swiper-pagination
{
    width: 20px;
    line-height: 1.5em;
    top: 50%;
    bottom: auto;
    right: 10px;
    left: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-home .banner-bar .swiper-pagination .swiper-pagination-bullet
{
    background-color: #d8194c;
    width: 12px;
    height: 12px;
    opacity: 0.4;
    -moz-opacity: 0.4;
    box-shadow: none;
    margin: 0;
}
.page-home .banner-bar .swiper-pagination .swiper-pagination-bullet-active
{
    background-color: #d8194c;
    opacity: 0.9;
    -moz-opacity: 0.9;
}

.page-home .banner-bar .banner-bar-divider
{
    width: 100%;
    height: 75px;
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}
.page-home .banner-bar .banner-bar-divider .path
{
    fill: #f5f4fa;
}

/* *** */

@media (max-width: 991px)
{
    .page-home .banner-bar .banner-box .swiper-slide .des-box
    {
        display: none;
    }
}
@media (max-width: 767px)
{
    .page-home .banner-bar .banner-bar-divider
    {
        height: 50px;
    }
}
@media (max-width: 550px)
{
    .page-home .banner-bar .banner-bar-divider
    {
        height: 30px;
    }
}

/* boomgardi - banner
***********************************************************************************************************************/

.page-boomgardi .banner-bar
{
    background-color: #d7d5e3;
    width: 100%;
    min-width: 320px;
    float: left;/*
    margin-bottom: 70px;*/
    position: relative;
}
.page-boomgardi .banner-bar .banner-box
{
    width: 100%;
    min-width: 320px;
    height: 31.25%;
    float: left;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.page-boomgardi .banner-bar .banner-box:before
{
    content: "";
    display: block;
    padding-top: 31.25%;
}

.page-boomgardi .banner-bar .banner-box .banner-box-overly
{
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.page-boomgardi .banner-bar .banner-box .swiper-container
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.page-boomgardi .banner-bar .banner-box .swiper-slide
{
    overflow: hidden;
}
.page-boomgardi .banner-bar .banner-box .swiper-slide a
{
    width: 100%;
    height: 100%;
    float: right;
    overflow: hidden;
}
.page-boomgardi .banner-bar .banner-box .swiper-slide img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
}
.page-boomgardi .banner-bar .banner-box .swiper-slide video
{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.page-boomgardi .banner-bar .banner-box .swiper-slide .des-box
{
    /*background-color: rgba(3, 78, 162, 0.5);*/
    position: absolute;
    top: 50%;
    right: -1000px;
    z-index: 2;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}
.page-boomgardi .banner-bar .banner-box .swiper-slide .des-box .des-item
{
    width: 100%;
    color: #ffffff;
    font-size: 11pt;
    text-align: center;
    float: right;
    clear: both;
    padding: 5px 15px;
    visibility: hidden;
    white-space: nowrap;
}
.page-boomgardi .banner-bar .banner-box .swiper-slide .des-box .des-item:first-child
{
    font-size: 16pt;
}
.page-boomgardi .banner-bar .banner-box .swiper-slide .des-box .des-item:last-child
{
    margin-bottom: 0;
}

.page-boomgardi .banner-bar .swiper-pagination
{
    width: 20px;
    line-height: 1.5em;
    top: 50%;
    bottom: auto;
    right: 10px;
    left: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-boomgardi .banner-bar .swiper-pagination .swiper-pagination-bullet
{
    background-color: #d8194c;
    width: 12px;
    height: 12px;
    opacity: 0.4;
    -moz-opacity: 0.4;
    box-shadow: none;
    margin: 0;
}
.page-boomgardi .banner-bar .swiper-pagination .swiper-pagination-bullet-active
{
    background-color: #d8194c;
    opacity: 0.9;
    -moz-opacity: 0.9;
}

.page-boomgardi .banner-bar .banner-bar-divider
{
    width: 100%;
    height: 75px;
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 1;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}
.page-boomgardi .banner-bar .banner-bar-divider .path
{
    fill: #f5f4fa;
}

/* *** */

@media (max-width: 991px)
{
    .page-boomgardi .banner-bar .banner-box .swiper-slide .des-box
    {
        display: none;
    }
}
@media (max-width: 767px)
{
    .page-boomgardi .banner-bar .banner-bar-divider
    {
        height: 50px;
    }
}
@media (max-width: 550px)
{
    .page-boomgardi .banner-bar .banner-bar-divider
    {
        height: 30px;
    }
}

/* search-bar
***********************************************************************************************************************/

.search-bar
{
    width: 100%;
    float: right;
    text-align: center;
    margin: -90px 0 70px 0;
    position: relative;
    z-index: 2;
}
.search-bar .search-form
{
    width: 100%;
    max-width: 800px;
    padding: 0 30px;
    margin: 0 auto 0 auto;
}
.search-bar .search-form .tab-box
{
    /*float: right;*/
    display: inline-flex;
    position: relative;
}
.search-bar .search-form .tab-box .tab
{
    background-color: #545454;
    width: 75px;
    color: #ffffff;
    font-size: 9pt;
    text-align: center;
    float: right;
    padding: 5px 0 4px 0;
    margin: 0 1px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}
.search-bar .search-form .tab-box .tab:before
{
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    border-radius: 10px 10px 0 0;
}
.search-bar .search-form .tab-box .tab.active
{
    background-color: #3b3b3b;
    color: #ffffff;
}
.search-bar .search-form .tab-box .tab:hover
{
    color: #d8194c;
}
.search-bar .search-form .input-box
{
    background-color: #3b3b3b;
    width: 100%;
    float: right;
    padding: 15px;
    position: relative;
    border-radius: 30px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}
.search-bar .search-form .input-box input
{
    background-color: #545454;
    width: 90%;
    color: #ffffff;
    text-align: center;
    padding: 10px 10px;
    border: 0;
    border-radius: 20px;
}

.search-bar .search-form .input-box input::-webkit-input-placeholder
{
    color: #ffffff;
}
.search-bar .search-form .input-box input:-moz-placeholder
{
    color: #ffffff;
}
.search-bar .search-form .input-box input::-moz-placeholder
{
    color: #ffffff;
}
.search-bar .search-form .input-box input:-ms-input-placeholder
{
    color: #ffffff;
}

/*
.search-bar
{
    width: 100%;
    float: right;
    text-align: center;
    margin: -90px 0 70px 0;
    position: relative;
    z-index: 2;
}
.search-bar .search-form
{
    width: 100%;
    max-width: 800px;
    padding: 0 30px;
    margin: 0 auto 0 auto;
}
.search-bar .search-form .tab-box
{
display: inline-flex;
position: relative;
}
.search-bar .search-form .tab-box .tab
{
    background-color: #5c70e4;
    width: 75px;
    color: #ffffff;
    font-size: 9pt;
    text-align: center;
    float: right;
    padding: 5px 0 4px 0;
    margin: 0 1px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}
.search-bar .search-form .tab-box .tab:before
{
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    border-radius: 10px 10px 0 0;
}
.search-bar .search-form .tab-box .tab.active
{
    background-color: #3F51B5;
    color: #ffffff;
}
.search-bar .search-form .tab-box .tab:hover
{
    color: #d8194c;
}
.search-bar .search-form .input-box
{
    background-color: #545454;
    width: 100%;
    float: right;
    padding: 15px;
    position: relative;
    border-radius: 30px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}
.search-bar .search-form .input-box input
{
    background-color: #5c70e4;
    width: 90%;
    color: #ffffff;
    text-align: center;
    padding: 10px 10px;
    border: 0;
    border-radius: 20px;
}
 */

/* *** */

.search-bar .search-result-box
{
    background: #fafafa;
    width: calc(90% - 30px);
    clear: both;
    padding: 20px 20px 0 20px;
    border-radius: 30px;
    position: absolute;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}
.search-bar .search-result-box .search-items-box li
{
    width: 100%;
    float: right;
    list-style: none;
    font-size: 9pt;
    text-align: justify;
    border-bottom: 1px solid #eeeeee;
}
.search-bar .search-result-box .search-items-box li a, .search-bar .search-result-box .search-items-box li a:visited
{
    width: 100%;
    font-weight: bold;
    float: right;
    padding: 10px 0 7px 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.search-bar .search-result-box .search-result-continue
{
    text-align: center;
    clear: both;
    padding-top: 20px;
}
.search-bar .alert-search-result
{
    margin-bottom: 20px;
}
.search-bar .search-result-box .search-result-continue a, .search-bar .search-result-box .search-result-continue a:visited
{
    background-color: #a5a5a5;
    color: #ffffff;
    font-size: 9pt;
    display: inline-block;
    padding: 5px 25px 5px 25px;
    border-radius: 30px 30px 0 0;
}
.search-bar .search-result-box .search-result-continue a:hover
{
    color: #d8194c;
}

/* *** */

@media (max-width: 1199px)
{
    .search-bar
    {
        margin: -70px 0 70px 0;
    }
}
@media (max-width: 991px)
{
    .search-bar
    {
        margin: -40px 0 70px 0;
    }
}
@media (max-width: 550px)
{
    .search-bar
    {
        margin: -30px 0 70px 0;
    }
}

/* about-bar
***********************************************************************************************************************/

.about-bar
{
    background-color: #30ccff;
    width: 100%;
    text-align: center;
    float: right;
    padding: 100px 0 70px 0;
    margin-bottom: 70px;
    position: relative;
}
.about-bar:before
{
    background-image: url("../../img/divider-cloud-hghlight.png");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: contain;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
.about-bar:after
{
    background-image: url("../../img/divider-cloud.png");
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: contain;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-animation: wave-animation-1 50s infinite linear;
    -moz-animation: wave-animation-1 50s infinite linear;
    -o-animation: wave-animation-1 50s infinite linear;
    animation: wave-animation-1 50s infinite linear;
}

.about-bar .air-plane
{
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 5;
    -webkit-animation: shake-up-down 10s infinite linear;
    -moz-animation: shake-up-down 10s infinite linear;
    -o-animation: shake-up-down 10s infinite linear;
    animation: shake-up-down 10s infinite linear;
}

.about-bar .bar-title
{
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
    z-index: 7;
}
.about-bar .des
{
    color: #222222;
    font-size: 11pt;
    text-align: justify;
    line-height: 2.5em;
    margin: 0 0 130px 0;
    position: relative;
    z-index: 5;
}

.about-bar .col-floating-box
{
    width: 25%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
.about-bar .col-floating-box a
{
    pointer-events: auto !important;
}
.about-bar .col-floating-box-2
{
    right: auto;
    left: 0;
}
.about-bar .col-floating-box .triangle-01
{
    float: right;
    position: absolute;
    top: 0;
    right: 50px;
}
.about-bar .col-floating-box .triangle-02
{
    float: right;
    position: absolute;
    bottom: 250px;
    right: 50px;
}
.about-bar .col-floating-box .triangle-03
{
    float: right;
    position: absolute;
    top: 50px;
    left: 30px;
}
.about-bar .col-floating-box .triangle-04
{
    float: right;
    position: absolute;
    bottom: 100px;
    left: 100px;
}

.about-bar .col-floating-box .triangle-01 img
{
    width: 160px;
    height: 160px;
}
.about-bar .col-floating-box .triangle-02 img
{
    width: 220px;
    height: 220px;
}
.about-bar .col-floating-box .triangle-03 img
{
    width: 260px;
    height: 260px;
}
.about-bar .col-floating-box .triangle-04 img
{
    width: 150px;
    height: 150px;
}

/* *** */

@media (max-width:991px)
{
    .about-bar .col-floating-box
    {
        display: none;
    }
}

/* tour ... bar
***********************************************************************************************************************/

.tour-new-bar
{
    width: 100%;
    float: right;
    padding-bottom: 70px;
}

.tour-suggest-bar
{
    width: 100%;
    float: right;
    padding-bottom: 70px;
    position: relative;
}
.tour-suggest-bar:before
{
    background-image: url("../../img/bg-map.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: -200px;
    left: 0;
}

.tour-new-bar .swiper-container, .tour-suggest-bar .swiper-container
{
    width: 100%;
    float: right;
}

/* *** */

.tour-suggest-bar .tour-suggest-group
{
    text-align: center;
    margin-bottom: 50px;
}
.tour-suggest-bar .tour-suggest-group .group-box
{
    background-image: url("../../img/bg-tour-icon.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 10px;
    display: inline-block;
    cursor: pointer;
}
.tour-suggest-bar .tour-suggest-group .group-box .icon
{
    width: 60px;
    height: 60px;
    padding: 10px;
    margin-bottom: 7px;
}
.tour-suggest-bar .tour-suggest-group .group-box .title
{
    color: #222222;
    font-size: 10pt;
}
.tour-suggest-bar .tour-suggest-group .group-box:hover .title, .tour-suggest-bar .tour-suggest-group .group-box.active .title
{
    color: #d8194c;
}

/* *** */

.tour-item-box
{
    background-color: #ffffff;
    width: 100%;
    float: right;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.tour-item-box .img
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #d7d5e3;
    width: 100%;
    height: 56.25%;
    float: right;
    overflow: hidden;
    position: relative;
}
.tour-item-box .img:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.tour-item-box .img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.tour-item-box .title-price-specification
{
    width: 100%;
    float: right;
    padding: 20px;
}
.tour-item-box .title-price-specification .title
{
    font-size: 11pt;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}
.tour-item-box .title-price-specification .price-specification .price
{
    float: right;
}
.tour-item-box .title-price-specification .price-specification .price .price-title
{
    color: #222222;
    font-size: 9pt;
    margin-bottom: 5px;
}
.tour-item-box .title-price-specification .price-specification .price .price-number
{
    color: #d8194c;
    font-size: 11pt;
}
.tour-item-box .title-price-specification .price-specification .price .price-unit
{
    font-size: 9pt;
    margin-right: 5px;
}
.tour-item-box .title-price-specification .price-specification .specification
{
    color: #222222;
    text-align: center;
    float: left;
}
.tour-item-box .title-price-specification .price-specification .specification .icon-box
{
    float: left;
    margin-right: 10px;
}
.tour-item-box .title-price-specification .price-specification .specification .icon-box .icon
{
    color: #888888;
    font-size: 14pt;
    margin-bottom: 7px;
}
.tour-item-box .title-price-specification .price-specification .specification .icon-box .icon-title
{
    font-size: 9pt;
}

/* *** */

.swiper-box
{
    width: 100%;
    float: right;
    position: relative;
}
.swiper-btn-next-middle, .swiper-btn-prev-middle
{
    background-color: #ffffff;
    width: 32px;
    height: 32px;
    color: #888888;
    font-size: 11pt;
    padding-top: 0;
    margin: 0;
    border-radius: 100%;
    box-shadow: 0 5px 15px -5px #888888;
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 1;
}
.swiper-btn-prev-middle
{
    right: -15px;
}
.swiper-btn-next-middle:hover, .swiper-btn-prev-middle:hover
{
    color: #d8194c;
}
.swiper-btn-next-middle i, .swiper-btn-prev-middle i
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.swiper-btn-next-middle.swiper-button-disabled, .swiper-btn-prev-middle.swiper-button-disabled
{
    pointer-events: all;
}

/* home-image-bar
***********************************************************************************************************************/

.home-image-bar
{
    background-color: #888888;
    background-size: cover;
    background-position: center center;
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    width: 100%;
    height: 25%;
    float: right;
    clear: both;
    margin-bottom: 70px;
}
.home-image-bar:before
{
    content: "";
    display: block;
    padding-top: 25%;
}

/* hotel ... bar
***********************************************************************************************************************/

.hotel-bar
{
    width: 100%;
    float: right;
    padding-bottom: 70px;
}

/* *** */

.hotel-bar .hotel-group
{
    text-align: center;
    margin-bottom: 50px;
}
.hotel-bar .hotel-group .group-box
{
    background-color: #d8194c;
    width: 120px;
    color: #ffffff;
    font-size: 9pt;
    padding: 7px 0;
    border-radius: 25px 25px 0 25px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.hotel-bar .hotel-group .group-box:nth-child(1)
{
    border-radius: 25px 25px 25px 0;
}
.hotel-bar .hotel-group .group-box:hover, .hotel-bar .hotel-group .group-box.active
{
    color: #ffbcce;
}

.hotel-divider-top
{
    width: 100%;
    max-height: 105px;
    float: right;
    margin-bottom: -1px;
}

/* *** */

.hotel-item-box
{
    background-color: #ffffff;
    width: 100%;
    float: right;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.hotel-item-box .img
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #d7d5e3;
    width: 100%;
    height: 56.25%;
    float: right;
    overflow: hidden;
    position: relative;
}
.hotel-item-box .img:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.hotel-item-box .img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hotel-item-box .title-price-star
{
    width: 100%;
    float: right;
    padding: 20px;
}
.hotel-item-box .title-price-star .title
{
    font-size: 11pt;
    text-align: center;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hotel-item-box .title-price-star .hotel-place
{
    color: #888888;
    font-size: 9pt;
    text-align: center;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hotel-item-box .title-price-star .price-star
{
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}
.hotel-item-box .title-price-star .price-star .price
{
    float: right;
}
.hotel-item-box .title-price-star .price-star .price .price-title
{
    color: #222222;
    font-size: 9pt;
    margin-bottom: 10px;
}
.hotel-item-box .title-price-star .price-star .price .price-number
{
    color: #d8194c;
    font-size: 11pt;
}
.hotel-item-box .title-price-star .price-star .price .price-unit
{
    font-size: 9pt;
    margin-right: 5px;
}
.hotel-item-box .title-price-star .price-star .star
{
    color: #222222;
    text-align: center;
    float: left;
    margin-top: 10px;
}
.hotel-item-box .title-price-star .price-star .star .icon
{
    color: #fccb00;
    font-size: 10pt;
}
.hotel-item-box .title-price-star .price-star .star .icon-title
{
    font-size: 9pt;
}

/* boomgardi-bar
***********************************************************************************************************************/

.boomgardi-bar
{
    width: 100%;
    float: right;
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}
.page-boomgardi .boomgardi-bar
{
    margin-bottom: 70px;
}
.boomgardi-bar .swiper-container
{
    width: 100%;
    float: right;
}

/* *** */

.boomgardi-bar .boomgardi-group
{
    text-align: center;
    margin-bottom: 50px;
}
.boomgardi-bar .boomgardi-group .group-box
{
    background-color: #e5e2f2;
    color: #888888;
    font-size: 9pt;
    display: inline-block;
    padding: 3px 14px 4px 14px;
    border-radius: 15px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.boomgardi-bar .boomgardi-group .group-box:hover, .boomgardi-bar .boomgardi-group .group-box.active
{
    color: #d8194c;
}

/* *** */

.residence-item-box
{
    background-color: #ffffff;
    width: 100%;
    float: right;
    position: relative;
    /*box-shadow: 0 5px 7px 0 #f0f0f0;*/
    border-radius: 10px;
    overflow: hidden;
}

.residence-item-box .img
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #d7d5e3;
    width: 100%;
    height: 56.25%;
    float: right;
    overflow: hidden;
    position: relative;
}
.residence-item-box .img:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.residence-item-box .img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.residence-item-box .title-facility-price-capacity-reserved
{
    width: 100%;
    float: right;
    padding: 20px;
}
.residence-item-box .title-facility-price-capacity-reserved .title
{
    font-size: 11pt;
    text-align: justify;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.residence-item-box .title-facility-price-capacity-reserved .boomgardi-place
{
    color: #888888;
    font-size: 9pt;
    text-align: justify;
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.residence-item-box .title-facility-price-capacity-reserved .boomgardi-place .icon
{
    font-size: 11pt;
    margin-left: 5px;
}

.residence-item-box .title-facility-price-capacity-reserved .facility
{
    width: 100%;
    height: 52px;
    text-align: center;
    padding-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid #eeeeee;
    overflow: hidden;
}
.residence-item-box .title-facility-price-capacity-reserved .facility .icon
{
    width: 32px;
    height: 32px;
    margin: 0 2px;
}

.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved
{
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}
.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved .price
{
    float: right;
}
.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved .price .price-title
{
    color: #222222;
    font-size: 9pt;
    margin-bottom: 10px;
}
.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved .price .price-number
{
    color: #d8194c;
    font-size: 11pt;
}
.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved .price .price-unit
{
    font-size: 9pt;
    margin-right: 5px;
}
.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved .capacity-reserved
{
    color: #222222;
    text-align: left;
    float: left;
}
.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved .capacity-reserved .capacity
{
    color: #363382;
    font-size: 9pt;
    margin-bottom: 10px;
}
.residence-item-box .title-facility-price-capacity-reserved .price-capacity-reserved .capacity-reserved .reserved
{
    font-size: 9pt;
}

.residence-item-box .discount
{
    background-color: #ee1e2d;
    color: #ffffff;
    font-size: 11pt;
    padding: 3px 5px 0 5px;
    border-radius: 0 0 10px 0;
    position: absolute;
    top: 0;
    left: 0;
    direction: ltr;
}

/* blog bar
***********************************************************************************************************************/

.blog-bar
{
    background-color: #ffffff;
    width: 100%;
    float: right;
    padding: 70px 0;
}

.blog-bar .col-title
{
    border-bottom: 1px solid #dcdcdc;
    color: #d8194c;
    font-weight: bold;
    padding-bottom: 7px;
    margin-bottom: 10px;
}

.page-boomgardi .blog-bar
{
    background-color: transparent;
    padding: 0 0 70px 0;
}

.blog-bar .col-blog-post
{
    background-color: #f5f4fa;
    width: 100%;
    float: right;
    padding: 15px;
    border-radius: 20px;
}
.page-boomgardi .blog-bar .col-blog-post
{
    background-color: #ffffff;
}

/* *** */

.blog-bar .item-top
{
    width: 100%;
    height: 100%;
    float: right;
    margin-bottom: 15px;
    position: relative;
}
.blog-bar .item-top .img
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #d7d5e3;
    width: 100%;
    height: 56.25%;
    float: right;
    overflow: hidden;
    position: relative;
}
.blog-bar .item-top .img:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.blog-bar .item-top .img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.blog-bar .item-top .title
{
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    color: #ffffff;
    padding: 7px 20px;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* *** */

.blog-item-box
{
    width: 100%;
    float: right;
    border-bottom: 1px solid #eeeeee;
    padding: 15px 0;
}
.blog-item-box:first-child
{
    padding: 0 0 15px 0;
}
.blog-item-box:last-child
{
    border-bottom: 0;
    padding: 15px 0 0 0;
}
.blog-item-box .img
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #d7d5e3;
    width: 120px;
    height: 68px;
    float: right;
    overflow: hidden;
    position: relative;
}
.blog-item-box .img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.blog-item-box .title-date-group
{
    width: calc(100% - 130px);
    height: 90px;
    float: left;
    position: relative;
}
.blog-item-box .title-date-group .title
{
    height: 3.5em;
    font-size: 10pt;
    text-align: justify;
    line-height: 1.7em;
    overflow: hidden;
}
.blog-item-box .date-group
{
    width: 100%;
    color: #888888;
    font-size: 8pt;
    float: right;
    position: absolute;
    bottom: 0;
    left: 0;
}
.blog-item-box .date-group .date
{
    float: right;
}
.blog-item-box .date-group .group
{
    float: left;
}

.blog-item-col-2 .img
{
    width: 120px;
    height: 72px;
}
.blog-item-col-2 .blog-item-box .title-date-group
{
    width: calc(100% - 130px);
    height: 72px;
}
.blog-item-col-2 .blog-item-box .title-date-group .title
{
    height: 3.4em;
    font-size: 9pt;
    line-height: 1.7em;
}

/* *** */

@media (max-width:1199px)
{

    .blog-item-box .img
    {
        width: 100px;
        height: 56px;
    }
    .blog-item-box .title-date-group
    {
        width: calc(100% - 110px);
        height: 75px;
    }

    /*
    .blog-item-col-2 .blog-item-box .img
    {
        width: 90px;
        height: 55px;
    }
    .blog-item-col-2 .blog-item-box .title-date-group
    {
        width: calc(100% - 100px);
        height: 55px;
    }
    .blog-item-col-2 .blog-item-box .title-date-group .title
    {
        height: 2.8em;
        font-size: 9pt;
        line-height: 1.4em;
    }*/
}
@media (max-width:991px)
{
    .blog-item-box .img
    {
        width: 90px;
        height: 51px;
    }
    .blog-item-box .title-date-group
    {
        width: calc(100% - 100px);
        height: 75px;
    }

    /*
    .blog-item-col-2 .blog-item-col-2-right
    {
        padding: 0;
    }
    .blog-item-col-2 .blog-item-col-2-left
    {
        display: none;
    }
    */
}
@media (max-width:768px)
{
    .blog-bar .col-title
    {
        border-bottom: 1px solid #dcdcdc;
        padding-bottom: 7px;
        margin-bottom: 10px;
        margin-top: 30px;
    }
    .blog-bar .col-blog-post:first-child .col-title
    {
        margin-top: 0;
    }
    /*
    .blog-bar .col-blog-post
    {
        width: 100%;
    }
    */

    /*
    .blog-item-box:first-child
    {
        padding: 15px 0;
    }
    .blog-item-box:last-child
    {
        border-bottom: 1px solid #eeeeee;
        padding: 15px 0;
    }

    .blog-item-col-2 .blog-item-box .img
    {
        width: 130px;
        height: 75px;
    }
    .blog-item-col-2 .blog-item-box .title-date-group
    {
        width: calc(100% - 140px);
        height: 75px;
    }
    .blog-item-col-2 .blog-item-box:last-child
    {
        border-bottom: 0;
        padding: 15px 0 0 0;
    }
    */
}

/* currency-date-time-weather bar
***********************************************************************************************************************/

.currency-date-time-weather-bar
{
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    float: right;
    padding: 0 0 50px 0;
}

.currency-date-time-weather-bar .currency-item-box, .currency-date-time-weather-bar .item-box
{
    display: inline-block;
    position: relative;
}
.currency-date-time-weather-bar .item-box
{
    margin-top: 40px;
}
.currency-date-time-weather-bar .item-box .icon
{
    color: #b1adc5;
    font-size: 22pt;
    position: absolute;
    top: -22px;
    right: 14px;
}
.currency-date-time-weather-bar .item-box .icon.img
{
    height: 29.2px;
}
.currency-date-time-weather-bar .item-box .title
{
    background-color: #f5f4fa;
    height: 45px;
    color: #706b8b;
    text-align: right;
    padding: 15px 15px 10px 15px;
    margin: 0 2px;
    border-radius: 20px;
}
.currency-date-time-weather-bar a.item-box:hover .title
{
    color: #d8194c;
}
.currency-date-time-weather-bar .item-box .price .number
{
    font-size: 12pt;
}
.currency-date-time-weather-bar .item-box .price .unit
{
    color: #b9b5d2;
    font-size: 8pt;
    margin-right: 5px;
}

/* *** */

@media (max-width:991px)
{
    .currency-date-time-weather-bar .currency-item-box
    {
        width: 100%;
    }
}
@media (max-width:767px)
{
    .currency-date-time-weather-bar .currency-item-box
    {
        display: none;
    }
}

/* convert-date
***********************************************************************************************************************/

.modal-convert-date-box
{
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    padding: 10px;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}
.modal-convert-date-box .modal-convert-date
{
    background-color: #f5f4fa;
    width: calc(100% - 20px);
    max-width: 500px;
    min-width: 320px;
    padding: 20px;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.modal-convert-date-box .modal-convert-date-close
{
    background-color: #8881a8;
    width: 30px;
    height: 30px;
    color: #ffffff;
    font-size: 12pt;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    border-radius: 100%;
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 1;
}

.modal-convert-date-box .form-convert-date-box
{
    text-align: center;
}
.modal-convert-date-box .form-convert-date-box .col-xs-6
{
    margin-bottom: 20px;
}
.modal-convert-date-box .form-convert-date-box .title
{
    color: #222222;
    font-size: 9pt;
    text-align: right;
    padding: 0 15px 0 0;
}
.modal-convert-date-box .form-convert-date-box input, .modal-convert-date-box .form-convert-date-box select
{
    height: 40px;
    padding: 20px 20px 16px 20px;
    border: 1px solid #d3d3d3;
    border-radius: 25px 25px 25px 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.modal-convert-date-box .form-convert-date-box input:focus, .modal-convert-date-box .form-convert-date-box select:focus
{
    border: 1px solid #363382;
}
.modal-convert-date-box .form-convert-date-box select
{
    padding-top: 7px;
    padding-bottom: 7px;
}
.modal-convert-date-box .form-convert-date-box button
{
    background-color: #363382;
    width: auto;
    color: #ffffff;
    font-size: 10pt;
    float: none;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.modal-convert-date-box .form-convert-date-box button:focus, .modal-convert-date-box .form-convert-date-box button:hover
{
    background-color: #d8194c;
}

.convert-date-result
{
    background-color: #fefeff;
    width: 100%;
    float: right;
    display: none;
    padding: 10px;
    margin-top: 30px;
    border-radius: 20px;
}
.convert-date-result .date-box
{
    width: 50%;
    text-align: center;
    float: right;
}
.convert-date-result .date-box .title
{
    color: #d8194c;
}
.convert-date-result .date-box .date
{
    line-height: 2em;
    margin-top: 10px;
}

/* *** */

@media (max-width:500px)
{
    .modal-convert-date-box .form-convert-date-box .col-xs-6, .convert-date-result .date-box
    {
        width: 100%;
    }
    .convert-date-result .date-box:first-child
    {
        margin-bottom: 20px;
    }
}


/* country time
***********************************************************************************************************************/

.modal-country-time-box
{
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    padding: 10px;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}
.modal-country-time-box .modal-country-time
{
    background-color: #82e3ff;
    width: calc(100% - 50px);
    min-width: 320px;
    padding: 20px;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.modal-country-time-box .modal-country-time-close
{
    background-color: #8881a8;
    width: 30px;
    height: 30px;
    color: #ffffff;
    font-size: 12pt;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    border-radius: 100%;
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 1;
}

.modal-country-time-box .img-box img
{
    width: 100%;
    object-fit: contain;
    -o-object-fit: contain;
    font-family: "object-fit: contain;";
    position: relative;
}

.modal-country-time-box .time-box
{
    background-color: rgba(232, 227, 255, 0.8);
    padding: 0 5px;
    border-radius: 15px;
    position: absolute;
}
.modal-country-time-box .time-box .title
{
    color: #544986;
    font-size: 8pt;
    text-align: center;
}

.modal-country-time-box .time-box.time-russia-box
{
    top: 10.29657767094236%;
    left: 61.65150454863541%;
}
.modal-country-time-box .time-box.time-france-box
{
    top: 34.1346586304626%;
    left: 50.58922558922559%;
}
.modal-country-time-box .time-box.time-america-box
{
    top: 37.4330094550503%;
    left: 34.56962911126662%;
}
.modal-country-time-box .time-box.time-mexico-box
{
    top: 55.57591545022352%;
    left: 26.430976430976433%;
}
.modal-country-time-box .time-box.time-brazil-box
{
    top: 79.2221248365051%;
    left: 36.95286195286195%;
}
.modal-country-time-box .time-box.time-united-kingdom-box
{
    top: 30.536457730912375%;
    left: 43.80685794261721%;
}
.modal-country-time-box .time-box.time-egypt-box
{
    top: 52.875288315620026%;
    left: 52.77777777777778%;
}
.modal-country-time-box .time-box.time-india-box
{
    top: 55.27408891532017%;
    left: 64.10076976906927%;
}
.modal-country-time-box .time-box.time-china-box
{
    top: 26.488481718918372%;
    left: 69.20923722883136%;
}
.modal-country-time-box .time-box.time-australia-box
{
    top: 82.71037077439064%;
    left: 77.74667599720084%;
}
.modal-country-time-box .time-box.time-japan-box
{
    top: 44.929261329113274%;
    left: 77.39678096571029%;
}

/* social-contact-bar
***********************************************************************************************************************/
/*
.social-contact-bar
{
    background-color: #d8194c;
    padding: 20px 0;
    clear: both;
}
*/
/* *** */
/*
.social-contact-bar .contact-address-tel .address-tel
{
    color: #ffffff;
    float: right;
    padding-right: 10px;
}
.social-contact-bar .contact-address-tel .address-tel .address
{
    font-size: 9pt;
    padding: 0;
    margin: 0 0 12px 0;
}
.social-contact-bar .contact-address-tel .address-tel .tel
{
    font-family: "CenturyGothic";
    font-size: 24pt;
    text-align: right;
    letter-spacing: 3px;
}
.social-contact-bar .contact-address-tel .icon
{
    width: 55px;
    height: 55px;
    float: right;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.social-contact-bar .contact-address-tel .icon:before
{
    color: #ffffff;
    font: 50px "font-caplus";
    content: '\e916';
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: absolute;
    top: 4px;
    right: 5px;
}
*/
/* *** */
/*
.social-contact-bar .social ul
{
    float: left;
    margin: 7px 0 0 0;
    padding: 0;
}
.social-contact-bar .social ul li
{
    float: left;
    margin: 0 10px 0 0;
}
.social-contact-bar .social ul li a, .social-contact-bar .social ul li a:visited
{
    width: 60px;
    height: 50px;
    color: #ffffff;
    font-size: 30pt;
    float: left;
    position: relative;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.social-contact-bar .social ul li a:hover
{
    color: #30ccff;
}
.social-contact-bar .social ul li a i
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
*/
/* *** */
/*
@media (max-width:767px)
{
    .social-contact-bar .contact-address-tel
    {
        text-align: center;
    }
    .social-contact-bar .contact-address-tel-box
    {
        display: inline-block;
    }

    .social-contact-bar .social
    {
        text-align: center;
        margin-top: 20px;
    }
    .social-contact-bar .social ul
    {
        float: none;
        display: inline-block;
    }
}
@media (max-width:380px)
{
    .social-contact-bar .contact-address-tel .address-tel
    {
        padding-right: 5px;
    }
    .social-contact-bar .contact-address-tel .address-tel .address
    {
        font-size: 8pt;
    }
    .social-contact-bar .contact-address-tel .address-tel .tel
    {
        font-size: 20pt;
    }
    .social-contact-bar .contact-address-tel .icon
    {
        width: 40px;
    }
    .social-contact-bar .contact-address-tel .icon:before
    {
        font: 40px "font-caplus";
    }
}
*/

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

.footer-bar
{
    background-color: #30ccff;
    width: 100%;
    float: right;
    padding: 0;
    position: relative;
}
.footer-bar:before
{
    background-image: url("../../img/divider-cloud-similar-body.png");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: contain;
    width: 100%;
    height: 100%;
    max-height: 300px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.main-body-home .footer-bar:before
{
    background-image: url("../../img/divider-cloud-white.png");
}
.footer-bar:after
{
    background-image: url("../../img/bg-footer.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    max-height: 150px;
    content: "";
    position: absolute;
    bottom: 40px;
    left: 0;
    z-index: 0;
}
.footer-boomgardi-bar:after
{
    background-image: url("../../img/bg-footer-boomgardi.png");
}

/* *** */

.footer-bar .certificate-social-contact
{
    width: 100%;
    float: right;
    clear: both;
    padding: 150px 0 50px 0;
    position: relative;
    z-index: 1;
}

.footer-bar .contact-box
{
    width: 100%;
    float: right;
}
.footer-bar .contact-box .address-tel
{
    color: #fafafa;
    float: right;
    padding-right: 5px;
}
.footer-bar .contact-box .address-tel .address
{
    font-size: 10pt;
    padding: 0;
    margin: 0 0 7px 0;
}
.footer-bar .contact-box .address-tel .tel
{
    font-family: "CenturyGothic";
    font-size: 15pt;
    text-align: right;
    letter-spacing: 2px;
}
.footer-bar .contact-box .icon
{
    width: 40px;
    height: 40px;
    float: right;
    position: relative;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.footer-bar .contact-box .icon:before
{
    color: #fafafa;
    font: 40px "font-caplus";
    content: '\e916';
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: absolute;
    top: 2px;
    right: 0;
}

.footer-bar .social
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.footer-bar .social ul
{
    float: right;
    margin: 0;
    padding: 0;
}
.footer-bar .social ul li
{
    float: left;
    margin: 0 0 0 5px;
}
.footer-bar .social ul li a, .footer-bar .social ul li a:visited
{
    background-color: transparent;
    width: 40px;
    height: 40px;
    color: #fafafa;
    font-size: 18pt;
    float: left;
    margin: 0;
    position: relative;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.footer-bar .social ul li a:hover
{
    color: #d8194c;
}
.footer-bar .social ul li a i
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.footer-bar .certificate a
{
    background-color: #fafafa;
    width: 75px;
    height: 75px;
    float: left;
    padding: 5px;
    margin: 0 7px 0 0;
    border-radius: 10px;
}
.footer-bar .certificate img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    -o-object-fit: contain;
    font-family: "object-fit: contain;";
}

/* *** */


@media (max-width:991px)
{
    .footer-bar:after
    {
        bottom: 60px;
    }
}
@media (max-width:767px)
{
    .footer-bar .certificate-social-contact
    {
        padding: 70px 0 150px 0;
    }

    .footer-bar .social-contact
    {
        text-align: center;
    }
    .footer-bar .contact-box
    {
        width: auto;
        float: none;
        display: inline-block;
    }

    .footer-bar .social
    {
        text-align: center;
    }
    .footer-bar .social ul
    {
        float: none;
        display: inline-block;
    }

    .footer-bar .certificate
    {
        text-align: center;
        margin-top: 30px;
    }
    .footer-bar .certificate a
    {
        float: none;
        display: inline-block;
        margin: 0 3px;
    }

    .footer-bar .certificate
    {
        margin-top: 15px;
    }
    .footer-bar .certificate a
    {
        width: 60px;
        height: 60px;
        margin: 0 3px 0 3px;
    }
}

/* copy-right-designer
***********************************************************************************************************************/

.footer-bar .copy-right-designer
{
    background-color: #1ab6e9;
    width: 100%;
    color: #222222;
    font-size: 8pt;
    text-align: right;
    float: right;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}
.footer-boomgardi-bar .copy-right-designer
{
    background-color: #bcd52f;
}

.footer-bar .designer
{
    float: left;
    text-align: left;
}
.footer-bar .designer a, .footer-bar .designer a:visited
{
    color: #222222;
}
.footer-bar .designer a:hover
{
    color: #d8194c;
}

/* *** */

@media (max-width:991px)
{
    .footer-bar .copy-right-designer, .footer-bar .designer
    {
        text-align: center;
    }
}

/*
***********************************************************************************************************************/

.popup
{
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000000;
}
.popup .img
{
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;/*
    overflow: hidden;*/
}
.popup .img a
{
    float: right;
    width: 100%;
    height: 100%;
}
.popup .img img
{
    width: 100%;
    max-width: 600px;
}
.btn-popup-close
{
    background: transparent;
    color: #ffffff;
    font-size: 15pt;
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 1;
}
.btn-popup-close:hover, .btn-popup-close:focus
{
    color: #d0b530;
}

/* 404
***********************************************************************************************************************/

.page-404
{
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
}

.page-404 img
{
    width: 100%;
    max-width: 800px;
    height: 100%;
    object-fit: contain;
    -o-object-fit: contain;
    font-family: "object-fit: contain;";
}

/* faq
***********************************************************************************************************************/

.page-faq .question-answer-box
{
    width: 100%;
    clear: both;
    margin-bottom: 20px;
}
.page-faq .question-answer-box:last-child
{
    margin-bottom: 0 !important;
}
.page-faq .question-answer-box .icon
{
    background-color: #363382;
    width: 40px;
    color: #ffffff;
    font-size: 12pt;
    text-align: center;
    float: right;
    padding: 9px 0 5px 0;
    border-radius: 25px 25px 0 25px;
}
.page-faq .question-answer-box .question
{
    color: #222222;
    font-size: 12pt;
    text-align: justify;
    line-height: 2em;
    padding: 0;
    margin: 0 50px 0 0;
}
.page-faq .question-answer-box .answer
{
    color: #888888;
    font-size: 10pt;
    text-align: justify;
    line-height: 2em;
    padding: 0;
    margin: 5px 50px 0 0;
}

/* contact
***********************************************************************************************************************/

.page-contact .contact-ways-des
{
    margin-bottom: 30px;
}

.page-contact .contact-ways
{
    width: 100%;
    float: right;
    /*margin-bottom: 30px;*/
    position: relative;
    z-index: 1;
}
.page-contact .contact-ways .data-box
{
    width: 50%;
    color: #222222;
    font-size: 11pt;
    float: right;
    margin-bottom: 20px;
    display: table;
}
.page-contact .contact-ways .data-box:nth-child(2n + 1)
{
    clear: both;
}
.page-contact .contact-ways .data-box .des
{
    text-align: justify;
    line-height: 2em;
    padding: 0 10px;
    display: table-cell;
    vertical-align: middle;
}
.page-contact .contact-ways .data-box .icon-box
{
    width: 48px;
    display: table-cell;
    vertical-align: middle;
}
.page-contact .contact-ways .data-box .icon
{
    background-color: #363382;
    width: 48px;
    height: 48px;
    color: #ffffff;
    font-size: 14pt;
    text-align: center;
    line-height: 48px;
    /*border: 2px solid #363382;*/
    border-radius: 25px 25px 0 25px;
    position: relative;
}/*
.page-contact .contact-ways .data-box .icon:before
{
    background: #363382;
    border-radius: 100%;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}*/
.page-contact .contact-ways .data-box .icon i
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.page-contact .contact-ways .data-box .des.mail
{
    word-break: break-all;
    letter-spacing: 5px;
}

/* *** */

.page-contact .form-box
{
    width: 100%;
    float: right;
    margin-top: -100px;
    position: relative;
    z-index: 1;
}
.page-contact .form-box .label
{
    color: #222222;
    font-size: 9pt;
    font-weight: normal;
    padding: 0 15px 0 0;
}
.page-contact .form-box input, .page-contact .form-box textarea
{
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 25px 25px 25px 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-contact .form-box input.form-contact-subject, .page-contact .form-box input.form-contact-mail
{
    border-radius: 25px 25px 0 25px;
}
.page-contact .form-box input:focus, .page-contact .form-box textarea:focus
{
    border: 1px solid #363382;
}
.page-contact .form-box textarea
{
    height: 140px;
    border-radius: 25px 25px 0 25px;
}
.page-contact .form-box button
{
    background-color: #363382;
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-contact .form-box button:focus, .page-contact .form-box button:hover
{
    background-color: #d8194c;
}
.page-contact .form-box button .icon
{
    margin-left: 10px;
}

@media screen and (max-width: 600px)
{
    .page-contact .form-box .col-xs-6
    {
        width: 100%;
    }
    .page-contact .form-box input
    {
        border-radius: 25px 25px 0 25px;
    }
}

/* *** */

.page-contact .map-box
{
    background-color: #f5f5f5;
    width: 100%;
    height: 600px;
    float: right;
    margin: -100px 0 0 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
.page-contact .map-box .map
{
    width: 100%;
    height:100%;
}/*
.page-contact .map-box .map .gm-svpc, .page-contact .map-box .map .gm-style-mtc, .page-contact .map-box .map a
{
    display: none;
}*/
.page-contact .leaflet-popup-close-button+.leaflet-popup-content-wrapper .leaflet-popup-content
{
    color: #222222;
    font-family: "IRANYekan", "CenturyGothic";
    font-size: 10pt;
}

.page-contact .leaflet-top.leaflet-left
{
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* complaint
***********************************************************************************************************************/

.page-complaint .form-box
{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}
.page-complaint .form-box .label
{
    color: #222222;
    font-size: 9pt;
    font-weight: normal;
    padding: 0 15px 0 0;
}
.page-complaint .form-box input, .page-complaint .form-box textarea
{
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 25px 25px 0 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-complaint .form-box input.form-complaint-subject, .page-complaint .form-box input.form-complaint-mail
{
    border-radius: 25px 25px 25px 0;
}
.page-complaint .form-box input:focus, .page-complaint .form-box textarea:focus
{
    border: 1px solid #363382;
}
.page-complaint .form-box textarea
{
    height: 140px;
    border-radius: 25px 25px 0 25px;
}
.page-complaint .form-box button
{
    background-color: #363382;
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-complaint .form-box button:focus, .page-complaint .form-box button:hover
{
    background-color: #d8194c;
}
.page-complaint .form-box button .icon
{
    margin-left: 10px;
}

/* *** */

@media screen and (max-width: 600px)
{
    .page-complaint .form-box .col-xs-6
    {
        width: 100%;
    }
    .page-complaint .form-box input
    {
        border-radius: 25px 25px 0 25px !important;
    }
}

/* career-opportunities
***********************************************************************************************************************/

.page-career-opportunities .des
{
    line-height: 2em;
    text-align: justify;
}

.page-career-opportunities .des-form
{
    color: #363382;
    font-size: 12pt;
    text-align: center;
    line-height: 2em;
    padding: 0;
    margin: 0 0 50px 0;
}

/* *** */

.page-career-opportunities .form-box
{
    margin-top: 70px;
}
.page-career-opportunities .form-career-opportunities
{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.page-career-opportunities .form-box .form-group
{
    margin-bottom: 15px;
}
.page-career-opportunities .form-box .label
{
    color: #222222;
    font-size: 9pt;
    font-weight: normal;
    padding: 0 15px 0 0;
}
.page-career-opportunities .form-box input, .page-career-opportunities .form-box select
{
    height: 45px;
    padding: 0 20px;
    border: 1px solid #d3d3d3;
    border-radius: 25px 25px 0 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-career-opportunities .form-box input:focus, .page-career-opportunities .form-box select:focus
{
    border: 1px solid #363382;
}
.page-career-opportunities .form-box button
{
    background-color: #363382;
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-career-opportunities .form-box button:focus, .page-career-opportunities .form-box button:hover
{
    background-color: #d8194c;
}
.page-career-opportunities .form-box button .icon
{
    margin-left: 10px;
}
.page-career-opportunities .form-career-opportunities .resume-file-des
{
    text-align: justify
}
.page-career-opportunities .form-career-opportunities .resume-file-des span
{
    margin-right: 10px;
}

/* *** */

@media screen and (max-width: 550px)
{
    .page-career-opportunities .career-opportunities-content .form-box
    {
        width: 100%;
    }
}

/*
***********************************************************************************************************************/

.page-form .box-title
{
    font-size: 12pt;
    text-align: justify;
    line-height: 2em;
    margin-bottom: 30px;
}
.page-form .label
{
    color: #222222;
    font-size: 9pt;
    font-weight: normal;
    padding: 0 15px 0 0;
}
.page-form input, .page-form textarea, .page-form select
{
    height: 42px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 25px 25px 0 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-form select
{
    padding: 0 20px;
}
.page-form textarea
{
    height: 140px;
    border-radius: 25px 25px 0 25px;
}
.page-form input:focus, .page-form textarea:focus
{
    border: 1px solid #363382;
}
.page-form button
{
    background-color: #363382;
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-form button:focus, .page-form button:hover
{
    background-color: #d8194c;
}
.page-form button .icon
{
    margin-left: 10px;
}

/* *** */

@media (max-width:400px)
{
    .page-signin .form-signin-remember-password
    {
        width: 100%;
        float: right !important;
        margin-bottom: 15px;
    }
}

/**************************************************************************/

/*
.page-signup .box-title,
.page-login .box-title,
.page-remember-password .box-title,
.page-change-password .box-title,
.page-active-mobile .box-title
{
    font-size: 12pt;
    text-align: justify;
    line-height: 2em;
    margin-bottom: 30px;
}
*/
/* *** */
/*
.page-signup input, .page-signup textarea,
.page-login input, .page-login textarea,
.page-remember-password input, .page-remember-password textarea,
.page-change-password input, .page-change-password textarea,
.page-active-mobile input
{
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-signup input:focus, .page-signup textarea:focus,
.page-login input:focus, .page-login textarea:focus,
.page-remember-password input:focus, .page-remember-password textarea:focus,
.page-change-password input:focus, .page-change-password textarea:focus,
.page-active-mobile input:focus
{
    border: 1px solid #173f63;
}
.page-signup button,
.page-login button,
.page-remember-password button,
.page-change-password button,
.page-active-mobile button
{
    background-color: #173f63;
    width: auto;
    font-size: 11pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-signup button:focus, .page-signup button:hover,
.page-login button:focus, .page-login button:hover,
.page-remember-password button:focus, .page-remember-password button:hover,
.page-change-password button:focus, .page-change-password button:hover,
.page-active-mobile button:focus, .page-active-mobile button:hover
{
    background-color: #8e9db4;
}
.page-signup button .icon,
.page-login button .icon,
.page-remember-password button .icon,
.page-change-password button .icon,
.page-active-mobile button .icon
{
    margin-left: 5px;
}

.page-signup a, .page-signup a:visited,
.page-login a, .page-login a:visited
{
    color: #173f63;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-signup a:focus, .page-signup a:hover,
.page-login a:focus, .page-login a:hover
{
    color: #8e9db4;
}
*/
/* *** */
/*
@media (max-width:767px)
{
    .page-signup .box-title,
    .page-login .box-title,
    .page-remember-password .box-title,
    .page-change-password .box-title,
    .page-active-mobile .box-title
    {
        font-size: 12pt;
    }
}*/

/* brand
***********************************************************************************************************************/

.page-brand .panel-content-box
{
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
}

.page-brand .brand-box
{
    width: 16.6666666%;
    text-align: center;
    float: right;
    padding: 0 15px 30px 15px;
}

.page-brand .brand-box a, .page-brand .brand-box a:visited
{
    width: 100%;
    color: #222222;
    float: right;
    padding: 7px;
    border: 1px solid #f2f2f2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-brand .brand-box a:hover
{
    color: #d0b530;
    border: 1px solid #e3e3e3;
}
.page-brand .brand-box a h4
{
    width: 100%;
    font-size: 10pt;
    float: right;
    margin: 15px 0 0 0;
}

.page-brand .brand-box a .img-box
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
    float: right;
    overflow: hidden;
    position: relative;
}
.page-brand .brand-box a .img-box:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.page-brand .brand-box a .img-box img
{
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    -o-object-fit: contain;
    font-family: "object-fit: contain;";
    position: absolute;
    top: 0;
    left: 0;
}

/* *** */

@media (max-width:1199px)
{
    .page-brand .brand-box
    {
        width: 20%;
    }
}
@media (max-width:991px)
{
    .page-brand .brand-box
    {
        width: 25%;
    }
}
@media (max-width:600px)
{
    .page-brand .brand-box
    {
        width: 33.3333333%;
    }
}
@media (max-width:400px)
{
    .page-brand .brand-box
    {
        width: 50%;
    }
}

/* pagination
***********************************************************************************************************************/

.pagination-box
{
    text-align: center;
    padding-top: 30px;
    clear: both;
}

.pagination
{
    margin: 0;
}
.pagination a, .pagination span
{
    margin: 0 10px;
}

.pagination li:first-child a, .pagination li:first-child span, .pagination li:last-child a, .pagination li:last-child span
{
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
.pagination .active a, .pagination .active a:focus, .pagination .active a:hover
{
    background-color: #ffffff;
    color: #222222;
    border-top: 1px solid #f0f0f0;
    border-bottom: 3px solid #173f63;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.pagination li
{
    display: inline-block;
}
.pagination li a
{
    background-color: #ffffff;
    color: #222222;
    font-size: 10pt;
    padding: 5px 14px;
    margin: 0 2px 0 2px;
    position: relative;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-bottom: 3px solid #f0f0f0;
}
.pagination li a:focus, .pagination li a:hover
{
    background-color: #ffffff;
    border-bottom: 3px solid #d8194c;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.pagination li span, .pagination li span:focus, .pagination li span:hover
{
    background-color: #ffffff;
    color: #222222;
    font-size: 10pt;
    padding: 5px 14px;
    margin: 0 2px 0 2px;
    position: relative;
    border: none;
    border-top: 1px solid #f0f0f0;
    border-bottom: 3px solid #f0f0f0;
}

/* col-filter
***********************************************************************************************************************/

.col-filter-box
{
    width: 100%;
    float: right;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid #d7d5e3;
    /*overflow-x: auto;*/
}
.col-filter
{
    /*width: max-content;*/
    float: right;
}
.page-residence .col-filter
{
    float: none;
    padding-left: 120px;
}
.col-filter .filter-dropdown-box
{
    background-color: #ffffff;
    height: 34px;
    font-size: 10pt;
    float: right;
    padding: 5px 10px;
    margin-left: 10px;
    border: 1px solid #d7d5e3;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
}
.col-filter .filter-search-word-box
{
    background-color: #ffffff;
    width: 200px;
    font-size: 10pt;
    float: right;
    padding: 5px 10px;
    margin-left: 10px;
    border: 1px solid #d7d5e3;
    border-radius: 15px;
    box-shadow: none;
}
.col-filter .filter-dropdown-box .filter-dropdown-btn .number
{
    background-color: #aeadb8;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    font-size: 9pt;
    text-align: center;
    float: left;
    display: none;
    margin-right: 5px;
    border-radius: 100%;
}
.col-filter .filter-dropdown-box .filter-dropdown-btn .item-selected
{
    color: #706e81;
    font-size: 9pt;
    margin-right: 5px;
}
.col-filter .filter-dropdown-box .filter-dropdown-btn .item-price, .col-filter .filter-dropdown-box .filter-dropdown-btn .item-date
{
    background-color: #aeadb8;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    font-size: 9pt;
    text-align: center;
    float: left;
    display: none;
    padding: 1px 3px 0 3px;
    margin-right: 5px;
    border-radius: 10px;
    direction: ltr;
}
.col-filter .filter-dropdown-item-box
{
    background-color: #ffffff;
    min-width: 250px;
    padding: 10px;
    display: none;
    border: 1px solid #d7d5e3;
    border-radius: 10px;
    box-shadow: none;
    cursor: default;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 1;
}
.col-filter .filter-dropdown-box.open .filter-dropdown-item-box
{
    display: block;
}
.col-filter .filter-dropdown-item-box label
{
    width: 100%;
    float: right;
    margin: 10px 0;
    cursor: pointer;
}
.col-filter .filter-dropdown-box, .col-filter .filter-search-word-box
{
    margin-bottom: 10px;
}
.col-filter .filter-dropdown-item-box .filter-dropdown-apply-clear
{
    width: 100%;
    float: right;
    margin: 15px 0 0 0;
    cursor: pointer;
}
.col-filter .filter-dropdown-item-box .filter-dropdown-apply-clear .filter-dropdown-apply
{
    color: #363382;
    font-size: 10pt;
    font-weight: bold;
    float: left;
    cursor: pointer;
}
.col-filter .filter-dropdown-item-box .filter-dropdown-apply-clear .filter-dropdown-clear
{
    color: #786ab9;
    font-size: 10pt;
    float: right;
    cursor: pointer;
}

.col-filter .filter-number-up-down
{
    width: 100%;
    float: right;
    margin: 10px 0;
}
.col-filter .filter-number-up-down .btn-up, .filter-number-up-down .btn-down
{
    width: 24px;
    height: 24px;
    color: #363382;
    font-size: 8pt;
    text-align: center;
    line-height: 24px;
    float: right;
    border: 1px solid #363382;
    border-radius: 100%;
    cursor: pointer;
}
.col-filter .filter-number-up-down .number
{
    height: 24px;
    float: right;
    line-height: 24px;
    margin: 0 15px;
}

.col-filter .filter-residence-price-from-to-label-box
{
    width: 100%;
    float: right;
    color: #363382;
    text-align: center;
}
.col-filter .filter-residence-price-from-to-label-box .price-from
{
    background-color: #363382;
    color: #ffffff;
    float: left;
    padding: 2px 5px 0 5px;
    border-radius: 15px;
}
.col-filter .filter-residence-price-from-to-label-box .price-to
{
    background-color: #363382;
    color: #ffffff;
    float: right;
    padding: 2px 5px 0 5px;
    border-radius: 15px;
}
.col-filter .filter-residence-price-from-to-label-box .number
{
    font-size: 9pt;
}
.col-filter .filter-residence-price-from-to-label-box .price-unit
{
    font-size: 7pt;
    margin-right: 5px;
}

.col-filter .filter-residence-date-from-to-label-box
{
    width: 100%;
    float: right;
    color: #363382;
}
.col-filter .filter-residence-date-from-to-label-box .date-box
{
    width: 50%;
    float: right;
}
.col-filter .filter-residence-date-from-to-label-box .date-box .title
{
    color: #888888;
    font-size: 8pt;
    text-align: right;
}
.col-filter .filter-residence-date-from-to-label-box .date-box input
{
    text-align: center;
    padding: 3px 0 0 0;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
}

.irs--round
{
    clear: both;
    direction: ltr;
}
.irs--round .irs-bar, .irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single
{
    background-color: #363382;
    font-family: "IRANYekan", "CenturyGothic";
    font-size: 10pt;
    direction: rtl;
}
.irs--round .irs-from:before, .irs--round .irs-to:before, .irs--round .irs-single:before
{
    border-top-color: #363382;
}
.irs--round .irs-handle
{
    width: 20px;
    height: 20px;
    border: 4px solid #363382;
    box-shadow: 0 0 0 transparent;
    cursor: pointer;
}

.btn-map-show-hide
{
    width: 120px;
    float: left;
    margin-top: 7px;
}
.btn-map-show-hide .title
{
    font-size: 9pt;
    font-weight: bold;
    float: right;
    margin-left: 10px;
}
.btn-map-show-hide .circle-box
{
    background-color: #cccccc;
    width: 40px;
    height: 20px;
    float: left;
    border-radius: 10px;
    cursor: pointer;
}
.btn-map-show-hide .circle-box .circle
{
    background-color: #ffffff;
    width: 16px;
    height: 16px;
    float: left;
    margin: 2px;
    border-radius: 20px;
}
.btn-map-show-hide .circle-box.show
{
    background-color: #d8194c;
}
.btn-map-show-hide .circle-box.show .circle
{
    float: right;
}

/* page-category
***********************************************************************************************************************/

.main-body-category
{
    background-color: transparent;
}
.main-body-category .footer-bar
{
    margin-top: 0;
}

/* header category slider
***********************************************************************************************************************/
/*
.header-category-slider
{
    background-color: #c9d0d6;
    width: 100%;
    height: 12.5%;
    float: left;
    margin-bottom: 30px;
    clear: both;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    border-radius: 7px;
    -webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
}
.header-category-slider:before
{
    content: "";
    display: block;
    padding-top: 12.5%;
}

.header-category-slider .swiper-container
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.header-category-slider .swiper-slide a
{
    width: 100%;
    height: 100%;
    float: right;
    overflow: hidden;
}
.header-category-slider .swiper-slide img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
}

.header-category-slider .swiper-pagination .swiper-pagination-bullet
{
    background-color: #ffffff;
    width: 12px;
    height: 12px;
    opacity: 0.5;
    -moz-opacity: 0.5;
    box-shadow: 0 5px 30px -5px #222222;
    margin: 0 2px !important;
}
.header-category-slider .swiper-pagination .swiper-pagination-bullet-active
{
    background-color: #d0b530;
    opacity: 0.7;
    -moz-opacity: 0.7;
}
*/
/* category banner
***********************************************************************************************************************/
/*
.category-banner
{
    background-color: #c9d0d6;
    width: 100%;
    height: 25%;
    float: left;
    clear: both;
    margin-bottom: 20px;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.4);
}
.category-banner:before
{
    content: "";
    display: block;
    padding-top: 25%;
}

.category-banner .swiper-container
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.category-banner .swiper-slide a
{
    width: 100%;
    height: 100%;
    float: right;
    overflow: hidden;
}
.category-banner .swiper-slide img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
}

.category-banner .swiper-pagination .swiper-pagination-bullet
{
    background-color: #ffffff;
    width: 12px;
    height: 12px;
    opacity: 0.5;
    -moz-opacity: 0.5;
    box-shadow: 0 5px 30px -5px #222222;
    margin: 0 2px !important;
}
.category-banner .swiper-pagination .swiper-pagination-bullet-active
{
    background-color: #d0b530;
    opacity: 0.7;
    -moz-opacity: 0.7;
}
*/
/* page-product
***********************************************************************************************************************/

.page-product .image-video-box
{
    padding-right: 0;
}
.page-product .image-video-box .image-single-box, .page-product .image-video-box .image-thumbnail-box
{
    width: 100%;
    height: 100%;
    float: right;
    padding-right: 0;
}
.page-product .image-video-box .image-thumbnail-box
{
    margin-top: 10px;
}
.page-product .image-video-box .image-single-box a, .page-product .image-video-box .image-thumbnail-box a
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f9f9f9;
    width: 100%;
    height: 100%;
    float: right;
    overflow: hidden;
    position: relative;
    border: 1px solid #ebebeb;
}
.page-product .image-video-box .image-single-box a:before, .page-product .image-video-box .image-thumbnail-box a:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.page-product .image-video-box .image-single-box a img, .page-product .image-video-box .image-thumbnail-box a img
{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
}
.page-product .image-video-box .image-thumbnail-box .swiper-slide-video .icon-video-play img
{
    width: 50px;
    height: 50px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
/*
.page-product .image-video-box .image-thumbnail-box .swiper-slide-video:after
{
    color: #222222;
    font-size: 20pt;
    font-family: "Font Awesome\ 5 Free";
    font-weight: 900;
    content: "\f144";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-shadow: 1px 1px 5px #ffffff;
}*/

.page-product .image-video-box .image-thumbnail-box .swiper-button
{
    width: 100%;
    text-align: center;
    float: right;
    clear: both;
}
.page-product .image-video-box .image-thumbnail-box .swiper-button-next, .page-product .image-video-box .image-thumbnail-box .swiper-button-prev
{
    background-color: #ffffff;
    background-image: none;
    width: 32px;
    height: 32px;
    color: #173f63;
    font-size: 16pt;
    text-align: center;
    display: none;
    padding-top: 5px;
    margin: 0;
    border: 1px solid #f9f9f9;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-product .image-video-box .image-thumbnail-box .swiper-button-next
{
    right: auto;
    left: 0;
}
.page-product .image-video-box .image-thumbnail-box .swiper-button-prev
{
    right: 0;
    left: auto;
}
.page-product .image-video-box .image-thumbnail-box .swiper-button-next .fa, .page-product .image-video-box .image-thumbnail-box .swiper-button-prev .fa
{
    margin-top: 9px;
}
.page-product .image-video-box .image-thumbnail-box .swiper-button-next:hover, .page-product .image-video-box .image-thumbnail-box .swiper-button-prev:hover
{
    color: #d0b530;
}

.page-product .image-video-box .image-single-box .product-exist-status
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}
.page-product .image-video-box .image-single-box .product-exist-status .bg
{
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 100px solid transparent;
    opacity: 0.7;
    -moz-opacity: 0.7;
}
.page-product .image-video-box .image-single-box .product-exist-status .title
{
    width: 60px;
    color: #ffffff;
    font-size: 11pt;
    line-height: 1.5em;
    position: absolute;
    top: 10px;
    right: 10px;
}

@media (max-width:767px)
{
    .page-product .image-video-box
    {
        padding: 0;
    }
}
@media (max-width:500px)
{
    .page-product .image-video-box
    {
        width: 100%;
        margin: 0;
    }
}

/* * */

.page-product .price-color-warranty-box
{
    width: 100%;
    float: right;
    margin-top: 30px;
}
.page-product .price-color-warranty-box .color-warranty-box
{
    width: 100%;
    float: right;
    margin-top: 30px;
}
.page-product .price-color-warranty-box .colors .title
{
    color: #8b8b8b;
    font-size: 11pt;
}
.page-product .price-color-warranty-box .colors .color-box
{
    width: 30px ;
    height: 30px;
    float: right;
}
.page-product .price-color-warranty-box .colors .color-box span
{
    width: 24px;
    height: 24px;
    float: right;
    cursor: pointer;
    border: 1px solid #f3f3f3;
    position: relative;
}
.page-product .price-color-warranty-box .colors .color-box span.active:before
{
    color: #ffffff;
    font: 8pt "font-caplus";
    content: "\e91b";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 3px #8b8b8b;
}

.page-product .price-color-warranty-box .warranties
{
    width: 100%;
    float: right;
    margin-top: 10px;
    display: none;
}
.page-product .price-color-warranty-box .warranties .title
{
    color: #8b8b8b;
    font-size: 11pt;
}
.page-product .price-color-warranty-box .warranties .select-box-warranty
{
    max-width: 300px;
    height: 40px;
    color: #222222;
    font-size: 10pt;
    padding: 7px 20px 7px 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-product .price-color-warranty-box .warranties .select-box-warranty:focus
{
    border: 1px solid #173f63;
}

.page-product .price-bon-box
{
    width: 100%;
    float: right;
}

.page-product .price-bon-box .price-box
{
    float: right;
}
.page-product .price-bon-box .price-box .price-old
{
    color: #b7b7b7;
    font-size: 10pt;
    letter-spacing: 2px;
    text-decoration: line-through;
}
.page-product .price-bon-box .price-box .price-final
{
    color: #173f63;
    font-size: 18pt;
    letter-spacing: 2px;
}
.page-product .price-bon-box .price-box .price-final .price-unit
{
    color: #173f63;
    font-size: 9pt;
    margin-right: 5px;
    letter-spacing: 0;
}
.page-product .price-bon-box .price-box .no-exist
{
    color: #8b8b8b;
}
.page-product .price-bon-box .price-box .no-exist .number
{
    color: #173f63;
    font-size: 12pt;
    margin-right: 10px;
}

.page-product .price-bon-box .bon-box
{
    background-color: #f9fcff;
    width: 100px;
    color: #173f63;
    text-align: center;
    float: right;
    padding: 2px 10px 10px 10px;
    margin-left: 20px;
    border: 1px solid #e0efff;
}
.page-product .price-bon-box .bon-box .title
{
    font-size: 11pt;
    margin-bottom: 7px;
}
.page-product .price-bon-box .bon-box .number
{
    width: 100%;
    font-size: 24pt;
    text-align: left;
}
.page-product .price-bon-box .bon-box .fa
{
    font-size: 17pt;
    float: right;
    /*
    margin-left: 10px;*/
}

/* * */

.page-product .product-content-box
{
    padding-left: 0;
}

.page-product .product-content-box .title-score
{
    width: 100%;
    float: right;
}

.page-product .product-content-box .title-score .title
{
    width: 100%;
    float: right;
}
.page-product .product-content-box .title-score .title .title-fa
{
    font-size: 14pt;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}
.page-product .product-content-box .title-score .title .title-en
{
    font-size: 11pt;
    line-height: 1.5em;
    padding: 0;
    margin: 5px 0 0 0;
    direction: ltr;
    text-align: right;
}

.page-product .product-content-box .title-score .score-code-box
{
    width: 100%;
    float: right;
    margin-bottom: 10px;
}
.page-product .product-content-box .title-score .score-code-box .code-box
{
    background-color: #8b8b8b;
    color: #ffffff;
    font-size: 9pt;
    line-height: 1.5em;
    float: right;
    padding: 3px 7px 2px 7px;
}

.page-product .product-content-box .title-score .score-star-box
{
    color: #d4d4d4;
    font-size: 9pt;
    float: left;
    position: relative;
    direction: ltr;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}
.page-product .product-content-box .title-score .score-star-box .score-star-filled-box
{
    color: #ffcd2b;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

.page-product .product-content-box .buy-box
{
    width: 100%;
    float: right;
    margin-top: 50px;
}
.page-product .product-content-box .buy-box .btn-basket-number-exist-box
{
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.page-product .product-content-box .buy-box .btn-basket-number-exist-box .number-exist-box
{
    margin-bottom: 10px;
}
.page-product .product-content-box .buy-box .btn-basket-number-exist-box .btn-increase-decrease
{
    color: #9f9f9f;
    vertical-align: middle;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #d8d8d8;
    display: inline-block;
    text-align: center;
}
.page-product .product-content-box .buy-box .btn-basket-number-exist-box .btn-increase
{
    width: 25px;
    height: 24px;
    font-size: 8pt;
    line-height: 26px;
    float: right;
    border-left: 1px solid #d8d8d8;
    cursor: pointer;
}
.page-product .product-content-box .buy-box .btn-basket-number-exist-box .btn-decrease
{
    width: 25px;
    height: 24px;
    font-size: 8pt;
    line-height: 26px;
    float: right;
    cursor: pointer;
}
.page-product .product-content-box .buy-box .btn-basket-number-exist-box .btn-increase:hover,
.page-product .product-content-box .buy-box .btn-basket-number-exist-box .btn-decrease:hover
{
    color: #d0b530;
}
.page-product .product-content-box .buy-box .btn-basket-number-exist-box .number
{
    background-color: #f5f5f5;
    width: 30px;
    height: 30px;
    /*display: inline-block;*/
    text-align: center;
    line-height: 26px;
    border-radius: 100%;
    border: 1px solid #d8d8d8;
}

.page-product .product-content-box .buy-box button.btn-basket-add
{
    background-color: #173f63;
    height: 35px;
    color: #ffffff;
    font-size: 10pt;
    text-align: right;
    float: left;
    border: 0;
    border-radius: 20px;
    padding-right: 10px;
    padding-left: 40px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-product .product-content-box .buy-box button.btn-basket-add:hover
{
    background-color: #d0b530;
}
.page-product .product-content-box .buy-box button.btn-basket-add:before
{
    width: 24px;
    height: 24px;
    color: #ffffff;
    font-size: 16pt;
    font-family: 'font-caplus';
    content: "\e910";
    position: absolute;
    top: 18%;
    left: 5px;
    z-index: 9;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

@media (max-width:767px)
{
    .page-product .product-content-box
    {
        padding: 0;
        margin-top: 30px;
    }
}

/* * */

.btn-product-favorite-notice
{
    float: right;
    padding-top: 7px;
}
.page-product .btn-product-favorite, .page-product .btn-product-notice, .page-product .btn-product-share
{
    background-color: transparent;
    color: #173f63;
    font-size: 16pt;
    padding: 0;
    margin: 0 0 0 10px;
    border: 0;
    line-height: 1em;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.page-product .btn-product-favorite:hover, .page-product .btn-product-notice:hover, .page-product .btn-product-share:hover
{
    color: #d0b530;
}

.btn-alert-not-logged
{
    border: 0;
    border-radius: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* * */

.page-product .product-short-des .title
{
    color: #173f63;
    font-size: 14pt;
    margin-bottom: 20px;
}

.page-product .tag-box
{
    width: 100%;
    text-align: justify;
    float: right;
}
.page-product .tag-box .title
{
    background-color: #f3eed7;
    color: #222222;
    float: right;
    padding: 0 10px 2px 10px;
    border: 1px solid #d0b530;
}
.page-product .tag-box .tag
{
    line-height: 2em;
    padding-right: 70px;
}
.page-product .tag-box .tag a, .page-product .tag-box .tag a:visited
{
    color: #222222;
    font-size: 9pt;
    float: right;
    margin-right: 20px;
    white-space: nowrap;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-product .tag-box .tag a:before
{
    color: #222222;
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 5pt;
    content: "\f111";
    position: absolute;
    right: -10px;
    top: 0;
}
.page-product .tag-box .tag a:hover
{
    color: #d0b530;
}

.modal-product-share .share-box
{
    width: 100%;
    text-align: center;/*
    float: right;*/
    display: inline-block;
}/*
.modal-product-share .share-box .title
{
    background-color: #f9fcff;
    color: #173f63;
    float: right;
    padding: 0 10px 2px 10px;
    border: 1px solid #e0efff;
}*/
.modal-product-share .share-box .share-link
{
    /*padding: 0 70px 0 0;*/
}
.modal-product-share .share-box .share-link a, .modal-product-share .share-box .share-link a:visited
{
    width: 30px;
    height: 30px;
    color: #173f63;
    font-size: 18pt;
    text-align: center;/*
    float: right;*/
    display: inline-block;
    padding-top: 3px;/*
    margin-right: 10px;*/
    margin: 0 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.modal-product-share .share-box .share-link a:hover
{
    color: #d0b530;
}

/* * */

.page-product .tab-box .title-main
{
    margin-left: 20px;
}
.page-product .tab-box .title-main:last-child
{
    margin-left: 0;
}
.page-product .tab-box .title-main.active a
{
    color: #d0b530;
}
/*
.page-product .tab-box
{
    width: 100%;
    float: right;
}
.page-product .tab-box ul
{
    padding-top: 4px;
    margin: 0;
}
.page-product .tab-box ul li
{
    float: right;
}
.page-product .tab-box ul li a
{
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 7px 20px;
    transition: all 0.3s;
}
.page-product .tab-box ul li a:hover, .page-product .tab-box ul li.active a
{
    color: #ffffff;
    background-color: #8e9db4;
}*/

.page-product .tab-content, .tab-content .tab-pane
{
    width: 100%;
    float: right;
    clear: both;
}

@media (max-width:550px)
{
    .page-product .tab-box .title-main
    {
        font-size: 11pt;
    }
    /*.page-product .tab-box ul li a
    {
        font-size: 10pt;
        padding: 7px 15px 5px 15px;
    }*/
}
@media (max-width:400px)
{
    .page-product .tab-box .title-main
    {
        font-size: 9pt;
        margin-left: 15px;
    }
    /*.page-product .tab-box ul li a
    {
        font-size: 9pt;
        padding: 7px 10px;
    }*/
}

/* * strength-weakness * */

.page-product .product-strength-weakness-score
{
    width: 100%;
    float: right;
}

.page-product .product-strength-weakness
{
    line-height: 2em;
    padding-right: 0;
}
.page-product .product-strength-weakness .product-strength
{
    padding-right: 0;
}
.page-product .product-strength-weakness .product-strength .title
{
    color: #33a700;
    font-size: 11pt;
}
.page-product .product-strength-weakness .product-strength .fa
{
    color: #33a700;
    font-size: 8pt;
    margin-left: 5px;
}
.page-product .product-strength-weakness .product-weakness
{
    padding-left: 0;
}
.page-product .product-strength-weakness .product-weakness .title
{
    color: #ff0000;
    font-size: 11pt;
}
.page-product .product-strength-weakness .product-weakness .fa
{
    color: #ff0000;
    font-size: 8pt;
    margin-left: 5px;
}

.page-product .product-score
{
    padding-left: 0;
}
.page-product .product-score div[class*="col-"]
{
    padding: 0;
}
.page-product .product-score .score-box
{
    margin-bottom: 20px;
}
.page-product .product-score div[class*="col-"]:last-child .score-box
{
    margin-bottom: 0;
}
.page-product .product-score .score-box .score-item-box
{
    background: #ededed;
    width: 20%;
    height: 5px;
    float: right;
    border-left: 2px solid #ffffff;
}
.page-product .product-score .score-box .score-item-box.active, .page-product .product-score .score-box .score-item-box.hover
{
    background: #33a700;
}

@media (max-width:991px)
{
    .page-product .product-strength-weakness, .page-product .product-score
    {
        width: 100%;
    }
    .page-product .product-strength-weakness
    {
        padding: 0;
    }
    .page-product .product-score
    {
        margin-top: 30px;
        padding: 0;
    }
}
@media (max-width:450px)
{
    .page-product .product-strength-weakness .product-strength, .page-product .product-strength-weakness .product-weakness
    {
        width: 100%;
        padding: 0;
    }
    .page-product .product-strength-weakness .product-weakness
    {
        margin-top: 10px;
    }
}

/* * property * */

.page-product .property-title
{
    font-size: 12pt;
    margin: 30px 0 15px 0;
}
.page-product .property-title .fa
{
    font-size: 10pt;
    margin-left: 10px;
}

.page-product .property-box
{
    width: 100%;
    float: right;
}
.page-product .property-box:first-child .property-title
{
    margin-top: 0;
}

.page-product .property-item
{
    width: 100%;
    float: right;
}
.page-product .property-item li
{
    width: 100%;
    float: right;
    clear: both;
    margin-bottom: 5px;
}
.page-product .property-item li:last-child
{
    margin-bottom: 0;
}
.page-product .property-item .property-item-title
{
    background: #f4f7fa;
    width: 200px;
    font-size: 11pt;
    float: right;
    padding: 5px 10px;
}
.page-product .property-item .property-item-value
{
    background: #f9fcff;
    padding: 5px 10px 5px 10px;
    margin-right: 210px;
}


@media (max-width:500px)
{
    .page-product .property-item .property-item-title, .page-product .property-item .property-item-value
    {
        width: 100%;
        float: right;
        margin: 0;
    }
}

/* * comment * */

.page-product .form-product-comment-box .box-title
{
    font-size: 14pt;
    margin-bottom: 30px;
}

/* * */
.page-product .form-product-comment input[type="text"], .page-product .form-product-comment textarea
{
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-product .form-product-comment input[type="text"]:focus, .page-product .form-product-comment textarea:focus
{
    border: 1px solid #173f63;
}
.page-product .form-product-comment textarea
{
    height: 140px
}
.page-product .form-product-comment button
{
    background-color: #173f63;
    width: auto;
    font-size: 11pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-product .form-product-comment button:focus, .page-product .form-product-comment button:hover
{
    background-color: #d0b530;
}
.page-product .form-product-comment button .icon
{
    margin-left: 5px;
}
.page-product .form-product-comment-box .warning
{
    color: #8b8b8b;
    font-size: 9pt;
    text-align: justify;
    line-height: 2em;
    clear: both;
    padding-right: 10px;
    margin-top: 20px;
    border-right: 3px solid #8b8b8b;
}

/* * */
.page-product .form-product-comment-box .form-product-comment-strength-weakness-box
{
    width: 100%;
    float: right;
    margin-top: 30px;
}
.page-product .form-product-comment-box .form-product-comment-strength-weakness-box input
{
    margin-bottom: 7px;
}
.page-product .form-product-comment-box .form-product-comment-strength-weakness-box .title
{
    font-size: 11pt;
}
.page-product .form-product-comment-box .btn-strength-add, .page-product .form-product-comment-box .btn-strength-remove,
.page-product .form-product-comment-box .btn-weakness-add, .page-product .form-product-comment-box .btn-weakness-remove
{
    color: #d3d3d3;
    font-size: 8pt;
    font-weight: 900;
    float: left;
    padding: 5px 6px;
    margin: 0 5px 0 0 !important;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-product .form-product-comment-box .btn-strength-add:hover, .page-product .form-product-comment-box .btn-strength-remove:hover,
.page-product .form-product-comment-box .btn-weakness-add:hover, .page-product .form-product-comment-box .btn-weakness-remove:hover
{
    background-color: #dfdfdf;
    color: #8b8b8b;
}
.page-product .form-product-comment-box .form-product-comment-strength-weakness-box div[class*="col-"]:first-child
{
    padding-right: 0;
}
.page-product .form-product-comment-box .form-product-comment-strength-weakness-box div[class*="col-"]:last-child
{
    padding-left: 0;
}

/* * */
.page-product .form-product-comment-box .form-product-comment-score-box
{
    width: 100%;
    float: right;
    padding-left: 0;
    margin-top: 30px;
}
.page-product .form-product-comment-box .form-product-comment-score-box .title
{
    color: #173f63;
    font-size: 12pt;
    padding: 0;
    margin-bottom: 10px;
}
.page-product .form-product-comment-score-box div[class*="col-"]:nth-child(odd)
{
    padding-left: 0;
}
.page-product .form-product-comment-score-box div[class*="col-"]:nth-child(even)
{
    padding-right: 0;
}
.page-product .form-product-comment-score-box .score-box
{
    margin-bottom: 20px;
}
.page-product .form-product-comment-score-box div[class*="col-"]:last-child .score-box
{
    margin-bottom: 0;
}
.page-product .form-product-comment-score-box .score-box .score-item-box
{
    background: #ededed;
    width: 20%;
    height: 7px;
    float: right;
    border-left: 2px solid #ffffff;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-product .form-product-comment-score-box .score-box .score-item-box.active, .page-product .form-product-comment-score-box .score-box .score-item-box.hover
{
    background: #33a700;
}

/* * */
.page-product .form-product-comment-suggest-others-box
{
    width: 100%;
    float: right;
    margin-top: 30px;
}
.page-product .form-product-comment-suggest-others-box .title
{
    color: #173f63;
    font-size: 12pt;
    padding: 0;
    margin-bottom: 10px;
}
.page-product .form-product-comment-suggest-others-box label
{
    font-weight: normal;
    clear: both;
    margin-left: 20px;
}


@media (max-width:600px)
{
    .page-product .form-product-comment-box .form-product-comment-strength-weakness-box div[class*="col-"]
    {
        width: 100%;
        padding: 0;
    }

    .page-product .form-product-comment-score-box div[class*="col-"]
    {
        width: 100%;
        padding: 0;
    }
}

/* * */
.page-product .product-comment-text-box
{
    background-color: #f9fcff;
    width: 100%;
    float: right;
    border: 1px solid #e0efff;
    margin-bottom: 20px;
}
.page-product .product-comment-text-box:last-child
{
    margin-bottom: 0;
}
.page-product .product-comment-text-box .product-comment-text-top
{
    background-color: #e0efff;
    width: 100%;
    color: #173f63;
    float: right;
    padding: 7px 10px;
}
.page-product .product-comment-text-box .product-comment-text-top .product-comment-user
{
    font-size: 12pt;
    float: right;
    padding-left: 10px;
}
.page-product .product-comment-text-box .product-comment-text-top .product-comment-date
{
    font-size: 9pt;
    float: right;
}
.page-product .product-comment-text-box .product-comment-text-top .product-comment-like
{
    font-size: 10pt;
    float: left;
}
.page-product .product-comment-text-box .product-comment-text-top .product-comment-like .fa
{
    font-size: 9pt;
    margin-right: 5px;
}
.page-product .product-comment-text-box .product-comment-text-top .product-comment-like button
{
    padding: 4px 5px 3px 5px;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.page-product .product-comment-text-box .product-comment-text
{
    width: 100%;
    float: right;
    text-align: justify;
    padding: 10px 15px;
}
.page-product .product-comment-text-box .product-comment-title
{
    font-size: 13pt;
    margin-bottom: 20px;
}
.page-product .product-comment-text-box .product-comment-des
{
    width: 100%;
    float: right;
}
.page-product .product-comment-text-box .product-comment-des .des
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.page-product .product-comment-text-box .product-comment-des .suggest
{
    height: 34px;
    float: right;
    border: 1px solid transparent;
    padding: 2px 10px 3px 10px;
}


.page-product .product-comment-text-box .product-comment-des .color
{
    background-color: #efefef;
    height: 32px;
    float: right;
    padding: 7px 5px 5px 5px;
    margin: 1px 10px 0 0;
    border: 1px solid #efefef;
}
.page-product .product-comment-text-box .product-comment-des .color .color-code
{
    width: 16px;
    height: 16px;
    float: right;
}
.page-product .product-comment-text-box .product-comment-des .color .color-title
{
    font-size: 9pt;
    float: right;
    margin: -3px 7px 0 0;
}


.page-product .product-comment-text-box .product-comment-score-box
{
    width: 100%;
    float: right;
    padding-left: 0;
    margin-top: 20px;
}
.page-product .product-comment-text-box .product-comment-score-box div[class*="col-"]:nth-child(odd)
{
    padding-right: 0;
}
.page-product .product-comment-text-box .product-comment-score-box div[class*="col-"]:nth-child(even)
{
    padding-left: 0;
}
.page-product .product-comment-text-box .product-comment-score-box .score-box
{
    margin-bottom: 20px;
}
.page-product .product-comment-text-box .product-comment-score-box div[class*="col-"]:last-child .score-box
{
    margin-bottom: 0;
}
.page-product .product-comment-text-box .product-comment-score-box .score-box .score-item-box
{
    background: #ededed;
    width: 20%;
    height: 5px;
    float: right;
    border-left: 2px solid #ffffff;
}
.page-product .product-comment-text-box .product-comment-score-box .score-box .score-item-box.active
{
    background: #33a700;
}

.page-product .product-comment-text-box .product-comment-strength-weakness
{
    width: 100%;
    float: right;
    line-height: 2em;
    margin-top: 20px;
}
.page-product .product-comment-text-box .product-comment-strength-weakness div[class*="col-"]:nth-child(1)
{
    padding-right: 0;
}
.page-product .product-comment-text-box .product-comment-strength-weakness div[class*="col-"]:nth-child(2)
{
    padding-left: 0;
}
.page-product .product-comment-text-box .product-comment-strength-title
{
    color: #33a700;
    font-size: 11pt;
}
.page-product .product-comment-text-box .product-comment-strength-des .fa
{
    color: #33a700;
    font-size: 8pt;
    margin-left: 5px;
}
.page-product .product-comment-text-box .product-comment-weakness-title
{
    color: #ff0000;
    font-size: 11pt;
}
.page-product .product-comment-text-box .product-comment-weakness-des .fa
{
    color: #ff0000;
    font-size: 8pt;
    margin-left: 5px;
}


@media (max-width:600px)
{
    .page-product .product-comment-text-box .product-comment-score-box div[class*="col-"]
    {
        width: 100%;
        padding: 0;
    }

    .page-product .product-comment-text-box .product-comment-strength-weakness div[class*="col-"]
    {
        width: 100%;
        padding: 0;
    }
    .page-product .product-comment-text-box .product-comment-weakness-title
    {
        margin-top: 20px;
    }
}

/* * */

.modal-product-favorite .form-box input, .modal-product-favorite .form-box select, .modal-product-favorite .form-box textarea
{
    height: 40px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.modal-product-favorite .form-box select
{
    padding-top: 7px;
    padding-bottom: 7px;
}
.modal-product-favorite .form-box input:focus, .modal-product-favorite .form-box select:focus, .modal-product-favorite .form-box textarea:focus
{
    border: 1px solid #173f63;
}
.modal-product-favorite .form-box textarea
{
    height: 120px
}
.modal-product-favorite .form-box button,
.modal-product-notice .form-box button
{/*
    background-color: #173f63;*/
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 5px 10px;
    margin: 0 0 0 10px;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.modal-product-favorite .form-box button .icon,
.modal-product-notice .form-box button .icon
{
    margin-left: 5px;
}

.modal-product-notice .title
{
    color: #173f63;
    font-size: 11pt;
    margin-bottom: 10px;
}
.modal-product-notice .notice-result
{
    text-align: center;
    clear: both;
}

/* * */

.order-product-number-box
{
    position: relative;
    display: inline-block;
}
.order-product-number
{
    background-color: #f5f5f5;
    width: 80px;
    height: 35px;
    color: #333333;
    font-size: 11pt;
    display: block;
    padding-right: 10px;
    margin: 0;
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.order-product-number-arrow
{
    width: 20px;
    color: #9f9f9f;
    font-size: 12pt;
    position: absolute;
    left: 5px;
    top: 8px;
    pointer-events: none;
}

/*
.order-product-number
{
    background-color: #f5f5f5;
    width: 80px;
    height: 35px;
    color: #333333;
    padding-right: 15px;
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.order-product-number::-ms-expand
{
    display: none;
}

.order-product-number-box
{
    position: relative;
    display: inline-block;
}


.order-product-number-arrow:after
{
    background-color: red;
    width: 80px;
    height: 35px;
    content: "\f007";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
}
.order-product-number-arrow
{
    background: #fff;
    bottom: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 50px;
    pointer-events: none;
}
*/

/*
***********************************************************************************************************************/

.page-profile-messages .tab-box,
.page-profile-favorite .tab-box,
.page-profile-comment .tab-box,
.page-survey .tab-box,
.page-lottery .tab-box
{
    width: 100%;
    float: right;
    margin-bottom: 30px;
    border-bottom: 2px solid #173f63;
}
.page-profile-messages .tab-box ul,
.page-profile-favorite .tab-box ul,
.page-profile-comment .tab-box ul,
.page-survey .tab-box ul,
.page-lottery .tab-box ul
{
    margin: 0;
}
.page-profile-messages .tab-box ul li,
.page-profile-favorite .tab-box ul li,
.page-profile-comment .tab-box ul li,
.page-survey .tab-box ul li,
.page-lottery .tab-box ul li
{
    float: right;
}
.page-profile-messages .tab-box ul li a,
.page-profile-favorite .tab-box ul li a,
.page-profile-comment .tab-box ul li a,
.page-survey .tab-box ul li a,
.page-lottery .tab-box ul li a
{
    background-color: #173f63;
    width: 100%;
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 7px 20px;
    -webkit-box-shadow: inset 0 1px 1px 0 rgba(255, 255,255, 0.3);
    -moz-box-shadow: inset 0 1px 1px 0 rgba(255, 255,255, 0.3);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-profile-messages .tab-box ul li a:hover, .page-profile-messages .tab-box ul li.active a,
.page-profile-favorite .tab-box ul li a:hover, .page-profile-favorite .tab-box ul li.active a,
.page-profile-comment .tab-box ul li a:hover, .page-profile-comment .tab-box ul li.active a,
.page-survey .tab-box ul li a:hover, .page-survey .tab-box ul li.active a,
.page-lottery .tab-box ul li a:hover, .page-lottery .tab-box ul li.active a
{
    background-color: #8e9db4;
}

.page-profile-messages .tab-content, .page-profile-messages .tab-content .tab-pane,
.page-profile-favorite .tab-content, .page-profile-favorite .tab-content .tab-pane,
.page-profile-comment .tab-content, .page-profile-comment .tab-content .tab-pane,
.page-survey .tab-content, .page-survey .tab-content .tab-pane,
.page-lottery .tab-content, .page-lottery .tab-content .tab-pane
{
    width: 100%;
    float: right;
    clear: both;
}

.page-profile-comment .tab-box .badge,
.page-survey .tab-box .badge
{
    width: 20px;
    height: 20px;
    border-radius: 100%;
}

/* *** */

@media (max-width:550px)
{
    .page-profile-messages .tab-box ul li,
    .page-profile-favorite .tab-box ul li,
    .page-profile-comment .tab-box ul li,
    .page-survey .tab-box ul li,
    .page-lottery .tab-box ul li
    {
        width: 50%;
    }
    .page-profile-messages .tab-box ul li a,
    .page-profile-favorite .tab-box ul li a,
    .page-profile-comment .tab-box ul li a,
    .page-survey .tab-box ul li a,
    .page-lottery .tab-box ul li a
    {
        font-size: 10pt;
        padding: 5px 15px;
    }
}
@media (max-width:400px)
{
    .page-profile-messages .tab-box ul li,
    .page-profile-favorite .tab-box ul li,
    .page-profile-comment .tab-box ul li,
    .page-survey .tab-box ul li,
    .page-lottery .tab-box ul li
    {
        width: 100%;
    }
}

/*
***********************************************************************************************************************/

.modal-favorite-group .form-box,
.modal-favorite .form-box
{
    float: right;
}
.modal-favorite .form-box input, .modal-favorite .form-box select, .modal-favorite .form-box textarea,
.modal-favorite-group .form-box input,
.filter-favorite select
{
    height: 40px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.modal-favorite .form-box textarea
{
    height: 120px;
}
.modal-favorite .form-box select,
.filter-favorite select
{
    padding-top: 7px;
    padding-bottom: 7px;
}
.modal-favorite .form-box input:focus, .modal-favorite .form-box select:focus, .modal-favorite .form-box textarea:focus,
.modal-favorite-group .form-box input:focus
{
    border: 1px solid #173f63;
}

.modal-favorite .form-box button,
.modal-favorite-group .form-box button
{
    width: auto;
    font-size: 11pt;
    float: right;
    padding: 5px 10px;
    margin: 0 0 0 10px;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.modal-favorite .form-box button .icon,
.modal-favorite-group .form-box button .icon
{
    margin-left: 5px;
}

.page-profile-favorite .panel-filter
{
    border: 0;
    border-bottom: 1px solid #cccccc;
    border-radius: 0;
}
.page-profile-favorite .panel-filter .panel-body
{
    padding: 0 0 15px 0;
}


.page-profile-favorite .panel-filter select
{
    height: 40px;
    padding: 7px 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-profile-favorite .panel-filter select:focus
{
    border: 1px solid #173f63;
}

/*
***********************************************************************************************************************/

.page-profile-comment .like-dislike .label,
.modal-comment .like-dislike .label
{
    padding: 4px 5px 3px 5px;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-profile-comment .like-dislike .label .fa,
.modal-comment .like-dislike .label .fa
{
    font-size: 10pt;
    margin-right: 5px;
}

.modal-comment .table-show-data td
{
    background-color: transparent !important;
    padding: 8px;
}

.modal-comment .comment-strength-weakness
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.modal-comment .comment-strength-weakness div[class*="col-"]:nth-child(1)
{
    padding-right: 0;
}
.modal-comment .comment-strength-weakness div[class*="col-"]:nth-child(2)
{
    padding-left: 0;
}
.modal-comment .comment-strength-weakness .comment-strength-title
{
    color: #33a700;
    font-size: 11pt;
    margin-bottom: 10px;
}
.modal-comment .comment-strength-weakness .comment-strength-des .fa
{
    color: #33a700;
    font-size: 8pt;
    margin-left: 5px;
}
.modal-comment .comment-strength-weakness .comment-weakness-title
{
    color: #ff0000;
    font-size: 11pt;
    margin-bottom: 10px;
}
.modal-comment .comment-strength-weakness .comment-weakness-des .fa
{
    color: #ff0000;
    font-size: 8pt;
    margin-left: 5px;
}

.modal-comment .comment-scores
{
    width: 100%;
    float: right;
    padding-left: 0;
    margin-top: 20px;
}
.modal-comment .comment-scores div[class*="col-"]:nth-child(odd)
{
    padding-right: 0;
}
.modal-comment .comment-scores div[class*="col-"]:nth-child(even)
{
    padding-left: 0;
}
.modal-comment .comment-scores .score-box
{
    margin-bottom: 20px;
}
.modal-comment .comment-scores div[class*="col-"]:last-child .score-box
{
    margin-bottom: 0;
}
.modal-comment .comment-scores .score-box .score-item-box
{
    background: #ededed;
    width: 20%;
    height: 5px;
    float: right;
    border-left: 2px solid #ffffff;
}
.modal-comment .comment-scores .score-box .score-item-box.active
{
    background: #33a700;
}

@media (max-width:767px)
{
    .modal-comment .comment-scores div[class*="col-"]
    {
        width: 100%;
        padding: 0;
    }

    .modal-comment .comment-strength-weakness div[class*="col-"]
    {
        width: 100%;
        padding: 0;
    }
    .modal-comment .comment-strength-weakness .comment-weakness-title
    {
        margin-top: 20px;
    }
}

/*
***********************************************************************************************************************/

.table-show-data-bon .td-credit .label,
.table-show-data-gift-card .td-credit .label
{
    width: 100%;
    font-size: 11pt;
    font-weight: normal;
    text-align: left;
    float: right;
    border-radius: 0;
    margin-bottom: 5px;
}
.table-show-data-bon .td-credit .label:last-child,
.table-show-data-gift-card .td-credit .label:last-child
{
    margin-bottom: 0;
}
.table-show-data-bon .td-credit .label span,
.table-show-data-gift-card .td-credit .label span
{
    font-size: 9pt;
    text-align: right;
    float: right;
    margin-top: 2px;
}

.table-show-data-bon .td-status .label,
.table-show-data-gift-card .td-status .label
{
    font-size: 10pt;
    font-weight: normal;
    border-radius: 0;
}

.modal-bon .form-box,
.modal-gift-card .form-box
{
    float: right;
}
.modal-bon .form-box input,
.modal-gift-card .form-box input
{
    height: 40px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.modal-bon .form-box input:focus,
.modal-gift-card .form-box input:focus
{
    border: 1px solid #173f63;
}

.modal-bon .form-box button,
.modal-gift-card .form-box button
{
    width: auto;
    font-size: 11pt;
    float: right;
    padding: 5px 10px;
    margin: 0 0 0 10px;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.modal-bon .form-box button .icon,
.modal-gift-card .form-box button .icon
{
    margin-left: 5px;
}

/* profile
***********************************************************************************************************************/

.page-profile .profile-data-box
{
    width: 100%;
    float: right;
    margin-bottom: 50px;
}
.page-profile .profile-data-box:last-child
{
    margin-bottom: 0;
}

.page-profile .title
{
    width: 100%;
    float: right;
    margin-bottom: 20px;
    border-bottom: 1px solid #173f63;
}
.page-profile .title span
{
    background-color: #173f63;
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 0 15px 2px 15px;
}

.page-profile .real-data, .page-profile .legal-data, .page-profile .address, .page-profile .performance-report
{
    width: 100%;
    text-align: justify;
    line-height: 2em;
    float: right;
}

.page-profile label
{
    color: #173f63;
    font-weight: bold;
}

.page-profile .bar-btn
{
    width: 100%;
    text-align: left;
    float: right;
    margin-top: 20px;
}

@media (max-width:500px)
{
    .page-profile .real-data .col-xs-6,
    .page-profile .legal-data .col-xs-6,
    .page-profile .performance-report .col-xs-6
    {
        width: 100%;
    }
}

/* page-order
***********************************************************************************************************************/

.page-order .table-show-data-no-bg
{
    background-color: transparent;
}
.page-order .table-show-data-no-bg tfoot td
{
    border-color: transparent;
}

.page-order .color-box
{
    width: 16px ;
    height: 16px;
    float: right;
}
.page-order .color-box span
{
    width: 16px;
    height: 16px;
    float: right;
    border: 1px solid #d4d4d4;
    position: relative;
}

.page-order .order-tracking
{
    text-align: center;
    margin-top: 30px;
}
.page-order .order-tracking .title
{
    font-size: 12pt;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #d4d4d4;
}
.page-order .order-tracking .order-tracking-items
{
    display: inline-block;
    margin: 0 auto;
}
.page-order .order-tracking .order-tracking-items .label
{
    font-size: 10pt;
    font-weight: normal;
    border-radius: 0;
    padding: 5px 10px 7px 10px;
}
.page-order .order-tracking .order-tracking-items .label .fa
{
    width: 14px;
    height: 20px;
}

.page-order .order-receiver
{
    margin-top: 30px;
}
.page-order .order-receiver div[class*="col-"]
{
    float: right;
    padding: 3px;
}
.page-order .order-receiver .data-item
{
    background: #ffffff;
    width: 100%;
    float: right;
    padding: 7px;
}
.page-order .order-receiver .data-item .title
{
    width: 65px;
    color: #8e9db4;
    float: right;
    display: block;
}
.page-order .order-receiver .data-item .des
{
    padding-right: 65px;
}

.page-order .panel-filter
{
    border: 0;
    border-bottom: 1px solid #cccccc;
    border-radius: 0;
}
.page-order .panel-filter .panel-body
{
    padding: 0 0 15px 0;
}

.page-order .panel-filter input
{
    height: 40px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-order .panel-filter input:focus, .page-order .panel-filter input:focus + span, .page-order .panel-filter input:focus + span + span
{
    border: 1px solid #173f63;
}

.page-order .panel-filter .filter-profile-order-btn-search, .page-order .panel-filter .filter-profile-order-btn-cancel
{
    font-size: 14pt;
    cursor: pointer;
    border-radius: 0;
    border-right: 0 !important;
}
.page-order .panel-filter .filter-profile-order-btn-search:hover, .page-order .panel-filter .filter-profile-order-btn-cancel:hover
{
    color: #173f63;
}

/* *** */

@media (max-width:767px)
{
    .page-order .panel-filter .input-group
    {
        width: 100%;
    }
}

/* order-basket
***********************************************************************************************************************/

.page-order .table-show-data-basket th, .page-order .table-show-data-basket td
{
    text-align: center;
}
.page-order .table-show-data-basket td.title
{
    text-align: justify;
    white-space: normal;
}

.page-order .table-show-data-basket .img
{
    width: 64px;
}
.page-order .table-show-data-basket .img img
{
    width: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
}

.page-order .table-show-data-basket .price-unit
{
    color: #173f63;
    font-size: 9pt;
    font-weight: normal;
    margin-right: 5px;
    letter-spacing: 0;
}

.page-order .table-show-data-basket .price-unit-old,
.page-order .table-show-data-basket .price-total-old
{
    color: #173f63;
    font-size: 9pt;
    font-weight: normal;
    text-decoration: line-through;
}
.page-order .table-show-data-basket .price-unit-final,
.page-order .table-show-data-basket .price-total-final
{
    color: #173f63;
    font-size: 11pt;
    font-weight: normal;
}

.page-order .table-show-data-basket select
{
    height: 40px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}

.page-order .table-show-data-basket .discount
{
    color: #ff0000;
    display: inline-block;
}
.page-order .table-show-data-basket .discount span
{
    width: 60px;
    float: right;
    text-align: right;
}
.page-order .table-show-data-basket .price-final
{
    font-size: 12pt;
    color: #33a700;
}

.page-order .table-show-data-basket .order-price-total .title
{
    background-color: #173f63;
    color: #ffffff;
}
.page-order .table-show-data-basket .order-price-total .price
{
    background-color: #173f63;
    color: #ffffff;
    font-size: 14pt;
    text-align: left;
    letter-spacing: 0.2em;
}
.page-order .table-show-data-basket .order-price-total .price-unit
{
    color: #ffffff;
}
.page-order .table-show-data-basket .order-gift-card-discount .title
{
    background-color: #ffd1cb;
}
.page-order .table-show-data-basket .order-gift-card-discount .price
{
    background-color: #ffd1cb;
    font-size: 14pt;
    text-align: left;
    letter-spacing: 0.2em;
}
.page-order .table-show-data-basket .order-price-total-final .title
{
    background-color: #d0ecd0;
}
.page-order .table-show-data-basket .order-price-total-final .price
{
    background-color: #d0ecd0;
    font-size: 14pt;
    text-align: left;
    letter-spacing: 0.2em;
}

.page-order-basket2 .btn-default
{
    background-color: #dfdfdf;
    float: right;
}

.page-order-basket2 input, .page-order-basket2 select
{
    height: 40px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-order-basket2 select
{
    padding-top: 7px;
    padding-bottom: 7px;
}
.page-order-basket2 input:focus, .page-order-basket2 select:focus
{
    border: 1px solid #173f63;
}
.page-order-basket2 .table-show-data-basket select
{
    padding: 6px 12px;
}

/* *** */

@media (max-width:767px)
{
    .page-order .table-show-data-basket .th-title,
    .page-order .table-show-data-basket tbody tr:nth-child(even) .title,
    .page-order .table-show-data-basket tbody tr:nth-child(even) .img
    {
        display: none;
    }
    .page-order .table-show-data-basket tfoot tr td:first-child
    {
        display: none;
    }
    .page-order .table-show-data-basket tbody tr:nth-child(odd)
    {
        display: table-row;
    }

    .page-order-follow .table-show-data-basket .th-title,
    .page-order-follow .table-show-data-basket tbody tr:nth-child(even) .title,
    .page-order-follow .table-show-data-basket tbody tr:nth-child(even) .img
    {
        display: table-cell;
    }
    .page-order-follow .table-show-data-basket tfoot tr td:first-child
    {
        display: table-cell;
    }

    .page-order-basket2 .table-show-data-basket2 td
    {
        display: table-cell !important;
    }
}

/* order basket 2
***********************************************************************************************************************/

.page-order-basket2 .contact-us-box
{
    background-color: #4d396a;
    background: -moz-linear-gradient(left, rgba(33,60,121,0.2) 0%, rgba(254,47,47,0.2) 100%), #4d396a;
    background: -webkit-linear-gradient(left, rgba(33,60,121,0.2) 0%,rgba(254,47,47,0.2) 100%), #4d396a;
    background: linear-gradient(to right, rgba(33,60,121,0.2) 0%,rgba(254,47,47,0.2) 100%), #4d396a;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    margin: 30px 0;
    clear: both;
}
.page-order-basket2 .contact-us-box a
{
    color: #ffffff;
    font-size: 16pt;
}
.page-order-basket2 .contact-us-box a .fa
{
    font-size: 12pt;
    margin-left: 10px;
}

.page-order-basket2 .title-box
{
    width: 100%;
    float: right;
    margin-bottom: 20px;
    border-bottom: 1px solid #173f63;
}
.page-order-basket2 .title-box span
{
    background-color: #173f63;
    width: 140px;
    height: 30px;
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 2px 10px 0 15px;
}
.page-order-basket2 .title-box span.icon
{
    width: 32px;
    padding: 7px 15px 0 0;
}

/* order-levels
***********************************************************************************************************************/

.order-levels
{
    text-align: center;
    margin: 30px 0;
}
.order-levels ul
{
    display: inline-block;
    margin-top: -40px;
}
.order-levels ul li
{
    width: 50px;
    height: 50px;
    float: right;
    border-radius: 100%;
    border: 1px solid #888795;
    position: relative;
    margin-left: 50px;
    margin-top: 40px;
}
.order-levels ul li:last-child
{
    margin-left: 0;
}
.order-levels ul li:before
{
    background-color: #f1f1f1;
    width: auto;
    height: auto;
    color: #888795;
    font-size: 8pt;
    line-height: 2em;
    float: right;
    white-space: nowrap;
    padding: 0 7px;
    border-radius: 5px;
    content: "سبد خرید";
    position: absolute;
    top: -30px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}
.order-levels ul li:after
{
    background-color: #888795;
    width: 50px;
    height: 2px;
    content: "";
    position: absolute;
    top: 50%;
    right: 49px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.order-levels ul li:last-child:after
{
    width: 0;
}
.order-levels ul li.active:after
{
    background-color: #5cb85c;
}
.order-levels ul li.current:after
{
    background-color: #d0b530;
}
.order-levels ul li.active
{
    border: 1px solid #5cb85c;
}
.order-levels ul li.current
{
    border: 1px solid #d0b530;
}
.order-levels ul li .icon
{
    color: #888795;
    font-size: 16pt;
    margin-top: 13px;
}
.order-levels ul li.active .icon
{
    color: #5cb85c;
}
.order-levels ul li.current .icon
{
    color: #d0b530;
}

.order-levels ul li:nth-child(2):before
{
    content: "اطلاعات ارسال";
}
.order-levels ul li:nth-child(3):before
{
    content: "بازبینی";
}
.order-levels ul li:nth-child(4):before
{
    content: "پرداخت";
}
.order-levels ul li:nth-child(5):before
{
    content: "پایان";
}

.order-level-warning
{
    color: #d0b530;
    font-size: 9pt;
    margin-top: 10px;
}

/* col-basket
***********************************************************************************************************************/

.col-basket
{
    background: #ffffff;
    width: 100%;
    float: right;
    clear: both;
    margin-bottom: 20px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.col-basket .title-box
{
    background: #888795;
    width: 100%;
    height: 42px;
    color: #ffffff;
    float: right;
    padding: 10px;
    margin: 0;
    border-radius: 5px 5px 0 0;
    z-index: 1;
    position: relative;
}
.col-basket .title-box .icon
{
    font-size: 16pt;
    float: right;
}
.col-basket .title-box .title
{
    font-size: 12pt;
    float: right;
    margin-right: 10px;
}
.col-basket .title-box .number
{
    background-color: #d7d7d7;
    width: 24px;
    height: 24px;
    color: #666666;
    float: left;
    text-align: center;
    line-height: 24px;
    border-radius: 100%;
}

.col-basket .basket-item
{
    text-align: justify;
    clear: both;
    padding: 10px;
}
.col-basket .basket-item .item
{
    clear: both;
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eeeeee;
}
.col-basket .basket-item .item a, .col-basket .basket-item .item a:visited
{
    color: #337ab7;
}
.col-basket .basket-item .item a:hover
{
    color: #d0b530;
}

.col-basket .basket-item .item .price .price-unit
{
    font-size: 8pt;
}

.col-basket .basket-item .item .number-exist-box
{
    float: left;
}
.col-basket .basket-item .item .btn-increase-decrease
{
    color: #9f9f9f;
    vertical-align: middle;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #d8d8d8;
    display: inline-block;
    text-align: center;
    float: right;
}
.col-basket .basket-item .item .btn-increase
{
    cursor: pointer;
    border-left: 1px solid #d8d8d8;
    float: right;
    font-size: 7pt;
    width: 21px;
    height: 20px;
}
.col-basket .basket-item .item .btn-decrease
{
    cursor: pointer;
    float: right;
    font-size: 7pt;
    width: 20px;
    height: 20px;
}
.col-basket .basket-item .item .btn-increase:hover,
.col-basket .basket-item .item .btn-decrease:hover
{
    color: #d0b530;
}
.col-basket .basket-item .item .btn-increase-decrease .icon
{
    margin-top: 6px;
}
.col-basket .basket-item .item .number-exist-box .number
{
    background-color: #f5f5f5;
    width: 22px;
    height: 22px;
    font-size: 9pt;
    float: right;
    display: inline-block;
    text-align: center;
    line-height: 19px;
    border-radius: 100%;
    border: 1px solid #d8d8d8;
}
.col-basket .basket-item .item .btn-delete
{
    background-color: #f5f5f5;
    width: 22px;
    height: 22px;
    color: #9f9f9f;
    font-size: 7pt;
    float: left;
    padding-top: 3px;
}

.col-basket .order-price-total
{
    color: #9f9f9f;
    margin: 10px 0;
}
.col-basket .order-price-total .price
{
    color: #666666;
    font-size: 12pt;
    float: left;
}
.col-basket .order-price-total .price-unit
{
    font-size: 8pt;
    margin-right: 5px;
}

.col-basket .submit-basket, .col-basket .submit-basket:visited
{
    background: #38b7be;
    color: #ffffff !important;
    font-size: 12pt;
    text-align: center;
    display: inline-block;
    padding: 7px 60px 8px 17px;
    margin-top: 0;
    overflow: hidden;
    position: relative;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.col-basket .submit-basket:hover .icon:after
{
    right: 7px;
}
.col-basket .submit-basket .icon
{
    font-size: 10px;
    margin-left: 5px;
}
.col-basket .submit-basket .icon:before
{
    top: -6px;
    width: 59px;
    right: -2px;
    z-index: 2;
    left: auto;
    height: 100%;
    line-height: 3;
    font-size: 164%;
    position: absolute;
}
.col-basket .submit-basket .icon:after
{
    background: rgba(255,255,255, 0.1);
    top: 0;
    right: 0;
    z-index: 1;
    width: 55px;
    content: "";
    height: 200%;
    position: absolute;
    margin: -5px 0 0 -5px;
    transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    -mz-transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -mz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    -ms-transition: all .3s ease 0s;
    -mz-transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
}

.col-basket .alert-null
{
    font-weight: bold;
    text-align: center;
}

/* *** */

@media (max-width:992px)
{
    .col-basket
    {
        display: none;
    }
}

/* blog top visit
***********************************************************************************************************************/

.col-right .blog-top-visit-box .blog-box
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #efefef;
    width: 100%;
    height: 100%;
    float: left;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}
.col-right .blog-top-visit-box .blog-box:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.col-right .blog-top-visit-box .blog-box img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: transform .3s linear;
    -moz-transition: transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
}
.col-right .blog-top-visit-box .blog-box .title
{
    background-color: rgba(23, 63, 99, 0.7);
    background: linear-gradient(0deg, rgba(23, 63, 99, 0.7) 0%, rgba(23, 63, 99, 0.35) 50%, rgba(23, 63, 99, 0) 100%);
    width: 100%;
    color: #ffffff;
    font-size: 10pt;
    text-align: center;
    padding: 20px 10px 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.col-right .blog-top-visit-box .swiper-pagination
{
    margin-top: 15px;
    position: inherit;
}
.col-right .blog-top-visit-box .swiper-pagination .swiper-pagination-bullet
{
    background-color: #173f63;
    width: 12px;
    height: 12px;
    opacity: 1;
    -moz-opacity: 1;
    margin: 0 2px !important;
}
.col-right .blog-top-visit-box .swiper-pagination .swiper-pagination-bullet-active
{
    background-color: #d0b530;
    opacity: 0.7;
    -moz-opacity: 0.7;
}

/* order-shipping
***********************************************************************************************************************/

.page-order .shipping-data-box
{
    width: 100%;
    float: right;
    margin-bottom: 50px;
}
.page-order .shipping-data-box:last-child
{
    margin-bottom: 0;
}

.page-order .shipping-data-box .title-box, .page-order-payment .title-box
{
    width: 100%;
    float: right;
    padding: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #173f63;
}
.page-order .shipping-data-box .title-box span, .page-order-payment .title-box span
{
    background-color: #173f63;
    width: 123px;
    height: 30px;
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 2px 10px 0 15px;
}
.page-order .shipping-data-box .title-box span.icon, .page-order-payment .title-box span.icon
{
    width: 32px;
    padding: 7px 15px 0 0;
}

.page-order .bar-btn
{
    width: 100%;
    text-align: left;
    float: right;
    clear: both;
    margin-top: 20px;
}

.page-order .shipping-data-box .label-box
{
    background-color: #f9fcff;
    width: 100%;
    float: right;
    padding: 7px 10px;
    margin-bottom: 10px;
}
.page-order .shipping-data-box .label-box:nth-child(odd)
{
    background-color: #f5f8fb;
}
.page-order .shipping-data-box .shipping-address-data-box .label-box:last-child,
.page-order .shipping-data-box .shipping-legal-data-box .label-box:last-child,
.page-order .shipping-data-box .shipping-delivery-data-box .label-box:last-child
{
    margin-bottom: 0;
}

.page-order .shipping-data-box .table-show-data td
{
    background-color: transparent;
    line-height: 2em;
    border: 0;
    padding: 0;
}

.page-order .shipping-data-box .title
{
    color: #173f63;
}

.page-order .shipping-data-box .price-unit
{
    font-size: 9pt;
    margin-right: 5px;
}

/* *** */

@media (max-width:767px)
{
    .page-order .shipping-data-box .title
    {
        padding: 0;
    }
    .page-order .shipping-data-box .data
    {
        padding: 0;
    }
    .page-order .shipping-data-box .data-box
    {
        margin-bottom: 10px;
    }
    .page-order .shipping-data-box .data-box:last-child
    {
        margin-bottom: 0;
    }
}

/* order-review
***********************************************************************************************************************/

.page-order-review .order-delivery-box, .page-order-review .order-receiver-box
{
    background-color: #f5f8fb;
    width: 100%;
    float: right;
    margin-bottom: 30px;
}
.page-order-review .order-delivery-box .title, .page-order-review .order-receiver-box .title
{
    padding: 10px 15px;
}
.page-order-review .order-delivery-box .data, .page-order-review .order-receiver-box .data
{
    background-color: #f9fcff;
    padding: 10px 15px;
}

.page-order-review .order-receiver-box .data-box
{
    clear: both;
    margin-bottom: 10px;
}
.page-order-review .order-receiver-box .data-box:last-child
{
    margin-bottom: 0;
}
.page-order-review .order-receiver-box .data-box .title
{
    background-color: transparent;
    width: 120px;
    color: #173f63;
    float: right;
    padding: 0;
}
.page-order-review .order-receiver-box .data-box .data
{
    background-color: transparent;
    padding: 0 120px 0 0;
}

.page-order-review .price-box
{
    width: 100%;
    max-width: 400px;
    float: left;
}
.page-order-review .price-box .price-data-box
{
    margin-bottom: 5px;
}
.page-order-review .price-box .price-data-box .title
{
    width: 140px;
    float: right;
    padding: 10px 10px 10px 0;
}
.page-order-review .price-box .price-data-box .price
{
    font-size: 14pt;
    text-align: left;
    padding: 10px 120px 10px 10px;
    letter-spacing: 0.2em;
}
.page-order-review .price-box .price-data-box .price-unit
{
    color: #173f63;
    font-size: 9pt;
    margin-right: 5px;
    letter-spacing: 0;
}

.page-order-review .price-box .price-total
{
    background-color: #173f63;
    color: #ffffff;
}
.page-order-review .price-box .price-total .price-unit
{
    color: #ffffff;
}
.page-order-review .price-box .discount
{
    background-color: #ffd1cb;
}
.page-order-review .price-box .delivery
{
    background: #c7ecff;
}
.page-order-review .price-box .packing
{
    background: #c7ecff;
}
.page-order-review .price-box .price-total-final
{
    background-color: #d0ecd0;
}

/* page-order-payment
***********************************************************************************************************************/

.page-order-payment .title-box
{
    width: 100%;
    float: right;
    margin-bottom: 20px;
    border-bottom: 1px solid #173f63;
}
.page-order-payment .title-box span
{
    background-color: #173f63;
    width: 123px;
    height: 30px;
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 2px 10px 0 15px;
}
.page-order-payment .title-box span.icon
{
    width: 32px;
    padding: 7px 15px 0 0;
}

.page-order-payment .alert-price
{
    clear: both;
    margin-bottom: 0;
}
.page-order-payment .alert-price .price-total
{
    color: #173f63;
    font-size: 14pt;
    margin: 7px 0 5px 0;
    letter-spacing: 0.2em;
}
.page-order-payment .alert-price .price-unit
{
    font-size: 9pt;
}

.page-order-payment .payment-data-box
{
    margin-top: 30px;
}
.page-order-payment .payment-data-box .label-box
{
    background-color: #f9fcff;
    width: 100%;
    float: right;
    padding: 7px 10px;
    margin-bottom: 10px;
}
.page-order-payment .payment-data-box .label-box:nth-child(odd)
{
    background-color: #f5f8fb;
}
.page-order-payment .payment-data-box .label-box:last-child
{
    margin-bottom: 0;
}

/* page-order-finish
***********************************************************************************************************************/

.page-order-finish .title-box
{
    width: 100%;
    float: right;
    margin-bottom: 20px;
    border-bottom: 1px solid #173f63;
}
.page-order-finish .title-box span
{
    background-color: #173f63;
    height: 30px;
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 2px 10px 0 10px;
}

.page-order-finish .order-data-box .title, .page-order-finish .order-receiver-box .title
{
    color: #173f63;
}
.page-order-finish .order-data-box
{
    padding-right: 0;
}
.page-order-finish .order-receiver-box
{
    padding-left: 0;
}

/* *** */

@media (max-width:767px)
{
    .page-order-finish .order-data-box, .page-order-finish .order-receiver-box
    {
        padding: 0;
    }
    .page-order-finish .order-receiver-box
    {
        margin-top: 30px;
    }
}

/* page-order-deposit
***********************************************************************************************************************/

.page-order-deposit .form-col-right
{
    padding-right: 0;
}
.page-order-deposit .form-col-left
{
    padding-left: 0;
}

.page-order-deposit .form-order-deposit input
{
    height: 40px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-order-deposit .form-order-deposit input:focus
{
    border: 1px solid #173f63;
}

.page-order-deposit .form-order-deposit .label-box
{
    background-color: #f9fcff;
    width: 100%;
    float: right;
    padding: 7px 10px;
    margin-bottom: 10px;
}
.page-order-deposit .form-order-deposit .label-box:nth-child(odd)
{
    background-color: #f5f8fb;
}
.page-order-deposit .form-order-deposit .label-box:last-child
{
    margin-bottom: 0;
}

.page-order-deposit .form-order-deposit .table-show-data td
{
    background-color: transparent;
    border: 0;
    padding: 0;
}

.page-order-deposit .form-order-deposit .data-box .title
{
    width: 80px;
    color: #173f63;
    float: right;
}
.page-order-deposit .form-order-deposit .data-box .data
{
    padding-right: 80px;
}

.page-order-deposit .title-box
{
    width: 100%;
    float: right;
    margin-bottom: 20px;
    border-bottom: 1px solid #173f63;
}
.page-order-deposit .title-box span
{
    background-color: #173f63;
    height: 30px;
    color: #ffffff;
    font-size: 12pt;
    float: right;
    padding: 2px 10px 0 10px;
}

.page-order-deposit .alert-price .price-total
{
    color: #173f63;
    font-size: 14pt;
    margin: 0 5px;
    letter-spacing: 0.2em;
}
.page-order-deposit .alert-price .price-unit
{
    font-size: 9pt;
}

/* *** */

@media (max-width:767px)
{
    .page-order-deposit .form-col-right, .page-order-deposit .form-col-left
    {
        padding: 0;
    }
    .page-order-deposit .form-col-right
    {
        margin-bottom: 30px;
    }
}

/* page-user
***********************************************************************************************************************/

.page-user .form-box input, .page-user .form-box select,
.page-address .form-box input, .page-address .form-box select,
.page-reagent-invitation .form-box input,
.page-reagent .form-box input
{
    height: 40px;
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-user .form-box select,
.page-address .form-box select
{
    padding-top: 7px;
    padding-bottom: 7px;
}
.page-user .form-box input:focus, .page-user .form-box select:focus,
.page-address .form-box input:focus, .page-address .form-box select:focus
{
    border: 1px solid #173f63;
}
.page-user .form-box button,
.page-address .form-box button,
.form-bon.form-box button,
.form-gift-card.form-box button,
.modal-survey .form-survey button,
.page-reagent-invitation .form-box button,
.page-reagent .form-box button
{
    background-color: #173f63;
    width: auto;
    color: #ffffff;
    font-size: 11pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-address .form-box button.btn-go-to-my-location
{
    background-color: #38b7be;
}
.page-user .form-box button:focus, .page-user .form-box button:hover,
.page-address .form-box button:focus, .page-address .form-box button:hover,
.form-bon.form-box button:focus, .form-bon.form-box button:hover,
.form-gift-card.form-box button:focus, .form-gift-card.form-box button:hover,
.modal-survey .form-survey button:focus, .modal-survey .form-survey button:hover,
.page-reagent-invitation .form-box button:focus, .page-reagent-invitation .form-box button:hover,
.page-reagent .form-box button:focus, .page-reagent .form-box button:hover
{
    background-color: #8e9db4;
}
.page-user .form-box button .icon,
.page-address .form-box button .icon,
.form-bon.form-box button .icon,
.form-gift-card.form-box button .icon,
.modal-survey .form-survey button .icon,
.page-reagent-invitation .form-box button .icon,
.page-reagent .form-box button .icon
{
    margin-left: 5px;
}

.page-user .form-box .btn-default,
.page-address .form-box .btn-default,
.page-reagent-invitation .form-box .btn-default,
.page-reagent .form-box .btn-default
{
    background-color: #e0efff;
    color: #173f63;
    padding: 10px 25px;
    width: auto;
    font-size: 11pt;
    float: right;
    margin: 0 5px 0 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.page-user .form-box .btn-default:focus, .page-user .form-box .btn-default:hover,
.page-address .form-box .btn-default:focus, .page-address .form-box .btn-default:hover,
.page-reagent-invitation .form-box .btn-default:focus, .page-reagent-invitation .form-box .btn-default:hover,
.page-reagent .form-box .btn-default:focus, .page-reagent .form-box .btn-default:hover
{
    background-color: #8e9db4;
}

/*
***********************************************************************************************************************/

.sk-spinner-three-bounce div
{
    background-color: #d8194c;
}

/*
***********************************************************************************************************************/

.table-show-data
{
    margin-bottom: 0;
}
.table-show-data > tbody > tr > td, .table-show-data > tbody > tr > th, .table-show-data > tfoot > tr > td, .table-show-data > tfoot > tr > th, .table-show-data > thead > tr > td, .table-show-data > thead > tr > th
{
    padding: 12px 8px;
    vertical-align: middle;
    border-top: 5px solid #ffffff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.table-show-data > thead > tr > td, .table-show-data > thead > tr > th
{
    background-color: #d9dee2;
    color: #222222;
    font-size: 10pt;
    font-weight: bold;
    padding: 12px 8px;
    border-bottom: 7px solid #ffffff;
}
.table-show-data > tbody > tr:nth-child(even) > td, .table-show-data > tbody > tr:nth-child(even) > th,
.table-show-data > tbody > tr.row-even > td, .table-show-data > tbody > tr.row-even > th
{
    background-color: #f5f8fb;
}
.table-show-data > tbody > tr:nth-child(odd) > td, .table-show-data > tbody > tr:nth-child(odd) > th,
.table-show-data > tbody > tr.row-odd > td, .table-show-data > tbody > tr.row-odd > th
{
    background-color: #f9fcff;
}
.table-show-data > tbody > tr.row-even > td, .table-show-data > tbody > tr.row-even > th
{
    background-color: #f5f8fb !important;
}
.table-show-data > tbody > tr.row-odd > td, .table-show-data > tbody > tr.row-odd > th
{
    background-color: #f9fcff !important;
}
.table-show-data.table-hover tbody > tr:hover > td, .table-show-data.table-hover tbody > tr:hover > th
{
    background-color: #ffdde6 !important;
}

.table-show-data .row-detail .table-show-data > tbody > tr > td
{
    background-color: #f5f5f5 !important;
    border-top: 2px solid #ececec !important;
}
.table-show-data .row-detail .table-show-data > thead > tr > th
{
    border-bottom: 3px solid #ececec !important;
}

.table-show-data .table-row-data
{
    background-color: #888795;
    color: #ffffff;
    font-weight: normal;
    padding: 8px;
}

.btn, .btn:visited
{
    /*color: #ffffff;*/
    font-size: 11pt;
    margin: 0 2px;
    border: 0;
    border-radius: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.btn:hover
{
    /*color: #ffffff;*/
}

.btn-circle
{
    width: 30px;
    height: 30px;
    font-size: 11pt !important;
    text-align: center;
    line-height: 1.428571429;
    padding: 6px 0;
    border: 0;
    border-radius: 15px;
}

/*
***********************************************************************************************************************/

.btn-app-support
{
    position: fixed;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1000;
    display: none;
}
.btn-app-support a, .btn-app-support a:visited
{
    background: #38b7be;
    width: 40px;
    color: #ffffff;
    white-space: nowrap;
    margin: 6px 0;
    display: block;
    overflow: hidden;
    border-radius: 5px 0 0 5px;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.btn-app-support a:hover
{
    width: 140px;
}
.btn-app-support a .icon
{
    width: 40px;
    height: 40px;
    font-size: 20pt;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.btn-app-support a .title
{
    height: 40px;
    font-size: 10pt;
    font-weight: bold;
    line-height: 40px;
    margin: 0 2px 0 10px;
    display: inline-block;
    vertical-align: middle;
}

/* lottery
***********************************************************************************************************************/

.page-lottery-view .banner-box
{
    background-color: #c9d0d6;
    width: 100%;
    height: 25%;
    float: right;
    clear: both;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.page-lottery-view .banner-box:before
{
    content: "";
    display: block;
    padding-top: 25%;
}
.page-lottery-view .banner-box img
{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
}

.page-lottery-view .lottery-des
{
    width: 100%;
    float: right;
    clear: both;
    margin: 30px 0;
}

.page-lottery-view .lottery-data
{
    background-color: #d9dee2;
    float: right;
    clear: both;
    margin-bottom: 10px;
}
.page-lottery-view .lottery-data:last-child
{
    margin-bottom: 0;
}
.page-lottery-view .lottery-data .title
{
    background-color: #173f63;
    width: 150px;
    color: #ffffff;
    font-size: 9pt;
    text-align: right;
    float: right;
    padding: 5px 10px;
}
.page-lottery-view .lottery-data span
{
    width: 160px;
    float: right;
    text-align: center;
    padding: 5px 10px;
}

.page-lottery-view .lottery-winner-data-box
{
    padding: 0;
}
.page-lottery-view .lottery-data-box
{
    padding-right: 0;
}
.page-lottery-view .lottery-form-box
{
    padding-left: 0;
}

/* *** */

.page-lottery-view .form-lottery input
{
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-lottery-view .form-lottery input:focus
{
    border: 1px solid #173f63;
}
.page-lottery-view .form-lottery .input-group-addon
{
    border-radius: 0;
}
.page-lottery-view .form-box button
{
    background-color: #173f63;
    width: auto;
    font-size: 11pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-lottery-view .form-lottery button:focus, .page-lottery-view .form-lottery button:hover
{
    background-color: #d0b530;
}
.page-lottery-view .form-lottery button .icon
{
    margin-left: 5px;
}

/* * */

@media (max-width: 991px)
{
    .page-lottery-view .lottery-data-box, .page-lottery-view .lottery-form-box
    {
        float: right;
        clear: both;
        padding: 0;
    }
    .page-lottery-view .lottery-form-box
    {
        margin-top: 30px;
    }
}

/*
***********************************************************************************************************************/

.panel-content-box.des
{
    text-align: justify;
    line-height: 2em;
}
.panel-content-box.des p:last-child
{
    margin-bottom: 0;
}
.panel-content-box.des img
{
    max-width: 100%;
    height: auto !important;
}

.space-line
{
    width: 100%;
    height: 1px;
    float: right;
    margin-top: 10px;
    border-bottom: 1px solid #eeeeee;
}

/* file btn
***********************************************************************************************************************/

.input-file-box
{
    background: #d7d5e3;
    float: right;
    position: relative;
    cursor: pointer;
    margin: 0 0 2px 2px;
    border-radius: 25px 25px 0 25px;
    overflow: hidden;
}
.input-file-box:hover
{
    background: #f0f0f0;
}

.input-file-box .btn
{
    background-color: transparent !important;
    color: #363382 !important;
    border: 0;
}

/* * */
.input-file-no-image-box
{
}
.input-file-no-image-box .file-name
{
    float: right;
    margin: 10px 5px 5px 5px;
    direction: ltr;
}
.input-file-no-image-box .fas
{
    color: #222222;
    font-size: 9pt !important;
    font-weight: 900;
    float: left;
    padding-top: 7px;
    margin: 5px;
}

/* image */
.input-file-image-box
{
    width: 100px;
    height: 100px;
}
.input-file-image-box img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
}
.input-file-image-box .fas
{
    color: #222222;
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 50%;
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.input-file-btn-box
{
    width: 100%;
    height: 100%;
}

/* hotel
***********************************************************************************************************************/

.page-hotel .col-result .show-data
{
    margin-left: -10px;
    margin-right: -10px;
}
.page-hotel .col-result .show-data .col-lg-3
{
    width: 25% !important;
    margin-bottom: 20px;
}

/* * */

@media (max-width: 1300px)
{
    .page-hotel .col-result .show-data .col-lg-3
    {
        width: 25% !important;
    }
}
@media (max-width: 1199px)
{
    .page-hotel .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
}
@media (max-width: 992px)
{
    .page-hotel .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
}
@media (max-width: 768px)
{
    .page-hotel .col-result .show-data .col-lg-3
    {
        width: 50% !important;
    }
}
@media (max-width: 500px)
{
    .page-hotel .col-result .show-data .col-lg-3
    {
        width: 100% !important;
    }
}

/*
.page-hotel .col-result .show-data
{
    margin-left: -10px;
    margin-right: -10px;
}
.page-hotel .col-result .show-data .col-xs-6
{
    margin-bottom: 20px;
}
*/
/* * */
/*
@media (max-width: 550px)
{
    .page-hotel .col-result .show-data .col-xs-6
    {
        width: 100%;
    }
}
*/
/*
.page-hotel .col-result .panel-data-box
{
    padding-right: 15px;
    padding-left: 15px;
}
.page-hotel .col-result .hotel-item-box
{
    background-color: #fafafa;
    margin-bottom: 30px;
}
@media (max-width: 600px)
{
    .page-hotel .col-result .panel-data-box .show-data .col-xs-6
    {
        width: 100%;
    }
}
*/

/* hotel view
***********************************************************************************************************************/

.page-hotel-view .hotel-title
{
    font-size: 14pt;
    text-align: justify;
}

.page-hotel-view .hotel-place
{
    color: #888888;
    font-size: 9pt;
    text-align: justify;
    margin: 10px 0 0 0;
}
.page-hotel-view .hotel-place .icon
{
    font-size: 11pt;
    margin-left: 5px;
}
.page-hotel-view .hotel-price-star
{
    padding-top: 20px;
}
.page-hotel-view .hotel-price-star .price
{
    float: right;
}
.page-hotel-view .hotel-price-star .price .price-title
{
    color: #222222;
    margin-bottom: 10px;
}
.page-hotel-view .hotel-price-star .price .price-number
{
    color: #d8194c;
    font-size: 12pt;
}
.page-hotel-view .hotel-price-star .price .price-unit
{
    font-size: 9pt;
    margin-right: 5px;
}
.page-hotel-view .hotel-price-star .star
{
    color: #222222;
    text-align: center;
    float: left;
    margin-top: 10px;
}
.page-hotel-view .hotel-price-star .star .icon
{
    color: #fccb00;
    font-size: 10pt;
}
.page-hotel-view .hotel-price-star .star .icon-title
{
    font-size: 9pt;
}

.page-hotel-view .hotel-contact-box
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.page-hotel-view .hotel-contact-box .title
{
    width: 50px;
    color: #888888;
    font-size: 9pt;
    float: right;
}
.page-hotel-view .hotel-contact-box .des
{
    font-size: 11pt;
    float: right;
    letter-spacing: 2px;
    direction: ltr;
}

.page-hotel-view .map-box
{
    background-color: #d7d5e3;
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.page-hotel-view .map-box:before
{
    content: "";
    display: block;
    padding-top: 100%;
}
.page-hotel-view .map-box .map
{
    width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0;
    left: 0;
}
.page-hotel-view .map-overly
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/*
.page-hotel-view .map .gmnoprint
{
    display: none;
}
.page-hotel-view .map .gm-style a[href^="https://maps.google.com/maps"]
{
    display: none !important;
}
*/
.page-hotel-view .leaflet-top.leaflet-left
{
    display: none;
}

/* *** */

.page-hotel-view .hotel-image
{
    background-color: #d7d5e3;
    width: 100%;/*
    height: 56.25%;*/
    float: left;
    overflow: hidden;
    position: relative;/*
    top: 0;
    left: 0;*/
}/*
.page-hotel-view .hotel-image:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}*/
.page-hotel-view .hotel-image .swiper-container
{
    width: 100%;
    height: 100%;
    padding: 0 40px;/*
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
}/*
.page-hotel-view .hotel-image .swiper-slide
{
    overflow: hidden;
}*/
.page-hotel-view .hotel-image .swiper-slide
{
    background-color: #d7d5e3;
    width: 100%;
    height: 56.25%;
    float: left;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.page-hotel-view .hotel-image .swiper-slide:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.page-hotel-view .hotel-image .swiper-slide img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.page-hotel-view .hotel-image .swiper-button-next, .page-hotel-view .hotel-image .swiper-button-prev
{
    background-image: none;
    background-color: rgba(0, 0, 0, 0.4);
    width: 40px;
    height: 100%;
    color: #ffffff;
    font-size: 20pt;
    text-align: center;
    margin: 0;
    display: inline-block;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-hotel-view .hotel-image .swiper-button-next i, .page-hotel-view .hotel-image .swiper-button-prev i
{
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}
.page-hotel-view .hotel-image .swiper-button-next
{
    right: auto;
    left: 0;
}
.page-hotel-view .hotel-image .swiper-button-prev
{
    right: 0;
    left: auto;
}
.page-hotel-view .hotel-image .swiper-button-next:hover, .page-hotel-view .hotel-image .swiper-button-prev:hover
{
    color: #d8194c;
}

/* *** */
/*
.page-hotel-view .hotel-des .des
{
    overflow: hidden;
}
.page-hotel-view .hotel-des .show-more
{
    color: #d8194c;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}
.page-hotel-view .hotel-des .show-more:after
{
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 1) 99%, #ffffff);
    width: 100%;
    height: 6em;
    content: "";
    position: absolute;
    bottom: 50px;
    left: 0;
}
.page-hotel-view .hotel-des .show-more.open:after
{
    height: 0;
}
*/
/* *** */
/*
.page-hotel-view .hotel-facility .des
{
    margin-top: 10px;
    overflow: hidden;
}
*/
.page-hotel-view .hotel-facility .facility-box
{
    width: 33.33%;
    float: right;
    margin-top: 10px;
}
.page-hotel-view .hotel-facility .facility-box.inactive
{
    opacity: 0.5;
    -moz-opacity: 0.5;
}
.page-hotel-view .hotel-facility .facility-box img
{
    width: 25px;
    height: 25px;
}
.page-hotel-view .hotel-facility .facility-box .title
{
    margin-right: 10px;
    vertical-align: middle;
}
.page-hotel-view .hotel-facility .facility-box.active .title
{
    color: #4caf50;
}
/*
.page-hotel-view .hotel-facility .show-more
{
    color: #d8194c;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}
.page-hotel-view .hotel-facility .show-more:after
{
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 1) 99%, #ffffff);
    width: 100%;
    height: 6em;
    content: "";
    position: absolute;
    bottom: 50px;
    left: 0;
}
.page-hotel-view .hotel-facility .show-more.open:after
{
    height: 0;
}
*/
/* *** */

.page-hotel-view .hotel-related .hotel-item-box
{
    background-color: #fafafa;
}

/* *** */

.page-hotel-view .form-hotel-comment .comment-col-right
{
    padding-left: 30px;
}
.page-hotel-view .form-hotel-comment .comment-col-left
{
    padding-right: 30px;
}

.page-hotel-view .form-hotel-comment .label
{
    color: #888888;
    font-size: 9pt;
    font-weight: bold;
    padding: 0;
}
.page-hotel-view .form-hotel-comment input, .page-hotel-view .form-hotel-comment textarea, .page-hotel-view .form-hotel-comment select
{
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 25px 25px 0 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-hotel-view .form-hotel-comment select
{
    height: 42px;
    padding: 0 20px;
}

.page-hotel-view .form-hotel-comment .form-hotel-comment-trip-date-month
{
    border-radius: 0 25px 0 0;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-trip-date-year
{
    border-radius: 25px 0 0 25px;
}

.page-hotel-view .form-hotel-comment input:focus, .page-hotel-view .form-hotel-comment textarea:focus, .page-hotel-view .form-hotel-comment select:focus
{
    border: 1px solid #363382;
}
.page-hotel-view .form-hotel-comment textarea
{
    height: 260px;
    text-align: justify;
}
.page-hotel-view .form-hotel-comment button
{
    background-color: #363382;
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-hotel-view .form-hotel-comment button:focus, .page-hotel-view .form-hotel-comment button:hover
{
    background-color: #d8194c;
}
.page-hotel-view .form-hotel-comment button .icon
{
    margin-left: 10px;
}

.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box
{
    margin-top: 10px;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box .score-title
{
    font-size: 9pt;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box div[class*="col-"]:nth-child(odd)
{
    padding-right: 0;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box div[class*="col-"]:nth-child(even)
{
    padding-left: 0;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box .score-box
{
    margin-bottom: 20px;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box div[class*="col-"]:last-child .score-box
{
    margin-bottom: 0;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box .score-box .score-item-box
{
    background: #eeeeee;
    width: 20%;
    height: 7px;
    float: right;
    border-left: 2px solid #ffffff;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-hotel-view .form-hotel-comment .form-hotel-comment-score-box .score-box .score-item-box.active, .page-hotel-view .form-hotel-comment .form-hotel-comment-score-box .score-box .score-item-box.hover
{
    background-color: #d8194c;
}

/* *** */

.page-hotel-view .comment .comment-box
{
    background: #fafafa;
    width: 100%;
    min-height: 100%;
    float: right;
    margin-top: 20px;
    position: relative;
}

.page-hotel-view .comment .comment-box .col-right
{
    background: #f2f2f2;
    width: 200px;
    min-height: 100%;
    text-align: center;
    float: right;
    padding: 20px;
    position: absolute;
    z-index: 1;
}
.page-hotel-view .comment .comment-box .col-right .user-image
{
    width: 64px;
    height: 64px;
    margin: 0 auto;
    position: relative;
}
.page-hotel-view .comment .comment-box .col-right .user-image img
{
    width: 100%;
    height: 100%;
    border: 3px solid #353482;
    border-radius: 100%;
}
.page-hotel-view .comment .comment-box .col-right .user-image .score
{
    background-color: #353482;
    width: 30px;
    height: 30px;
    color: #ffffff;
    font-size: 8pt;
    text-align: center;
    padding-top: 7px;
    border-radius: 100%;
    position: absolute;
    bottom: -5px;
    left: -5px;
}
.page-hotel-view .comment .comment-box .col-right .user-name-family
{
    font-size: 9pt;
    margin-top: 15px;
}
.page-hotel-view .comment .comment-box .col-right .date
{
    font-size: 8pt;
}
.page-hotel-view .comment .comment-box .col-right .suggest-others .suggest
{
    background-color: #4caf50;
    color: #ffffff;
    font-size: 8pt;
    display: inline-block;
    padding: 1px 7px;
    margin-top: 15px;
    border-radius: 25px 25px 0 25px;
}
.page-hotel-view .comment .comment-box .col-right .suggest-others .no-suggest
{
    background-color: #d8194c;
    color: #ffffff;
    font-size: 8pt;
    display: inline-block;
    padding: 1px 7px;
    margin-top: 15px;
    border-radius: 25px 25px 0 25px;
}

.page-hotel-view .comment .comment-box .col-right .like-dislike
{
    width: 100%;
    float: right;
    margin-top: 20px;
    direction: ltr;
}
.page-hotel-view .comment .comment-box .col-right .like-dislike .like, .page-hotel-view .comment .comment-box .col-right .like-dislike .dislike
{
    background-color: #4caf50;
    color: #ffffff;
    font-size: 9pt;
    display: inline-block;
    padding: 7px 7px 3px 7px;
    margin-top: 15px;
    border-radius: 25px 25px 0 25px;
    direction: ltr;
    cursor: pointer;
}
.page-hotel-view .comment .comment-box .col-right .like-dislike .dislike
{
    background-color: #d8194c;
    border-radius: 25px 25px 25px 0;
}
.page-hotel-view .comment .comment-box .col-right .like-dislike .number
{
    margin-left: 10px;
}

.page-hotel-view .comment .comment-box .col-left
{
    width: 100%;
    float: right;
    padding: 20px 220px 20px 20px;
}
.page-hotel-view .comment .comment-box .col-left .title
{
    font-size: 11pt;
    font-weight: bold;
}
.page-hotel-view .comment .comment-box .col-left .des
{
    text-align: justify;
    margin-top: 15px;
}

.page-hotel-view .comment .comment-box .col-left .trip-type-date
{
    font-size: 9pt;
    margin-top: 15px;
}
.page-hotel-view .comment .comment-box .col-left .trip-type-date .ttd-des
{
    color: #d8194c;
    margin-right: 5px;
}

.page-hotel-view .comment .comment-box .col-left .comment-score-box
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.page-hotel-view .comment .comment-box .col-left .comment-score-box .score-title
{
    width: 50%;
    float: right;
    margin-top: 10px;
}
.page-hotel-view .comment .comment-box .col-left .comment-score-box .score-title .score
{
    background-color: #d8194c;
    width: 20px;
    height: 20px;
    color: #ffffff;
    font-size: 9pt;
    text-align: center;
    float: right;
    margin-left: 5px;
    border-radius: 100%;
}
.page-hotel-view .comment .comment-box .col-left .comment-score-box .score-title .title
{
    font-size: 9pt;
    font-weight: normal;
    text-align: justify;
    padding-right: 25px;
}

/* *** */

.page-hotel-view .hotel-title-box-2
{
    display: none;
    margin-bottom: 30px;
}

.page-hotel-view .col-left .hotel-item-box
{
    background-color: #fafafa;
    margin-top: 30px;
}

/* *** */

.page-hotel-view .hotel-related-bar
{
    margin-top: 50px;
}

/* *** */

@media (max-width: 991px)
{
    .page-hotel-view .tab-section .tab[data-section="data-location-box-2"], .page-hotel-view .tab-section .tab[data-section="data-contact-box-2"]
    {
        display: block;
    }

    .page-hotel-view .col-left-main
    {
        display: none;
    }
    .page-hotel-view .hotel-title-box-2
    {
        display: block;
    }

    .page-hotel-view .hotel-data-contact-box-2, .page-hotel-view .hotel-data-location-box-2
    {
        display: block;
    }

    .page-hotel-view .map-box
    {
        height: 250px;
    }
    .page-hotel-view .map-box:before
    {
        padding: 0;
    }
}
@media (max-width: 650px)
{
    .page-hotel-view .hotel-facility .facility-box
    {
        width: 50%;
    }

    .page-hotel-view .form-hotel-comment .comment-col-right
    {
        width: 100%;
        padding-left: 15px;
    }
    .page-hotel-view .form-hotel-comment .comment-col-left
    {
        width: 100%;
        padding-right: 15px;
    }
    .page-hotel-view .form-hotel-comment .form-hotel-comment-suggest-others-box .control-label
    {
        margin: 0 !important;
    }
    .page-hotel-view .form-hotel-comment .form-hotel-comment-score-box .col-xs-6
    {
        width: 100%;
        padding: 0;
    }

    .page-hotel-view .comment .comment-box .col-right
    {
        width: 100%;
        position: inherit;
    }
    .page-hotel-view .comment .comment-box .col-left
    {
        width: 100%;
        padding: 20px;
    }
    .page-hotel-view .comment .comment-box .col-left .comment-score-box .score-title
    {
        width: 100%;
    }
}
@media (max-width: 400px)
{
    .page-hotel-view .hotel-facility .facility-box
    {
        width: 100%;
    }
}

/* residence-reserve-step
***********************************************************************************************************************/

.residence-reserve-step-box
{
    width: 100%;
    text-align: center;
    float: right;
    margin-bottom: 50px;
    position: relative;
}
.residence-reserve-step-box .step-title
{
    width: 24%;
    max-width: 125px;
    color: #888888;
    font-size: 8pt;
    display: inline-block;
    position: relative;
}
.residence-reserve-step-box .step-title:before
{
    background-color: #cccccc;
    width: 20px;
    height: 20px;
    font-size: 11pt;
    text-align: center;
    content: "";
    border-radius: 100%;
    position: absolute;
    top: -30px;
    right: 50%;
    transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    z-index: 1;
}
.residence-reserve-step-box .step-title:after
{
    background-color: #cccccc;
    width: 100%;
    height: 2px;
    content: "";
    position: absolute;
    top: -20px;
    right: 50%;
}
.residence-reserve-step-box .step-title:last-child:after
{
    display: none;
}
.residence-reserve-step-box .step-title.done
{
    color: #009e00;
}
.residence-reserve-step-box .step-title.done:before, .residence-reserve-step-box .step-title.done:after
{
    background-color: #009e00;
}
.residence-reserve-step-box .step-title.current:before, .residence-reserve-step-box .step-title.current:after
{
    background-color: #d8194c;
}

/* residence
***********************************************************************************************************************/

.page-residence .col-result .show-data
{
    margin-left: -10px;
    margin-right: -10px;
}
.page-residence .col-result .show-data .col-lg-3
{
    width: 25% !important;
    margin-bottom: 20px;
}
.page-residence.show-map .col-result .show-data .col-lg-3
{
    width: 33.33% !important;
}
.page-residence .col-result .show-data .residence-item-box
{
    border: 2px solid #f5f4fa;
}
.page-residence .col-result .show-data .residence-item-box.selected
{
    border: 2px solid rgba(216, 25, 76, 0.51);
}

.page-residence.show-map
{
    width: 60%;
}
.page-residence.show-map .container
{
    width: 100%;
}

/* map */

.page-residence-map
{
    background-color: #fafafa;
    width: 40%;
    height: 100%;
    position: fixed;
    top: 0;
    left: -10000px;
    z-index: 0;
}

.main-body-residence .leaflet-top.leaflet-left
{
    top: auto;
    bottom: 10px;
}

.marker-pin
{
    background: transparent;
}
.marker-pin:after
{
    background-color: #d7d5e3;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    content: '';
    position: absolute;
    right: -5px;
    bottom: 0;
}
.marker-pin .marker-des-box
{
    background-color: #d7d5e3;
    width: 100px;
    font-family: "IRANYekan", "CenturyGothic";
    font-size: 10pt;
    text-align: center;
    border-radius: 10px;
    position: absolute;
    top: -15px;
    right: -40px;
    padding: 5px;
    z-index: 1;
    direction: rtl;
}

/* * */

@media (max-width: 1300px)
{
    .page-residence .col-result .show-data .col-lg-3
    {
        width: 25% !important;
    }
    .page-residence.show-map .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
}
@media (max-width: 1199px)
{
    .page-residence .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
    .page-residence.show-map .col-result .show-data .col-lg-3
    {
        width: 50% !important;
    }
}
@media (max-width: 992px)
{
    .page-residence .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
    .page-residence.show-map .col-result .show-data .col-lg-3
    {
        width: 50% !important;
    }
}
@media (max-width: 768px)
{
    .page-residence .col-result .show-data .col-lg-3
    {
        width: 50% !important;
    }

    .page-residence .col-filter
    {
        padding: 0;
    }
    .page-residence.show-map
    {
        width: 100%;
    }
    .btn-map-show-hide, .page-residence-map
    {
        display: none !important;
    }
}
@media (max-width: 500px)
{
    .page-residence .col-result .show-data .col-lg-3
    {
        width: 100% !important;
    }
}

/* residence view
***********************************************************************************************************************/

.page-residence-view .residence-title
{
    font-size: 14pt;
    font-weight: bold;
    text-align: justify;
    line-height: 1.5em;
}

.page-residence-view .residence-code
{
    color: #058e13;
    font-weight: bold;
    text-align: justify;
    margin: 10px 0 0 0;
}
.page-residence-view .residence-code .number
{
    margin-right: 10px;
}

.page-residence-view .residence-place
{
    color: #888888;
    font-size: 9pt;
    text-align: justify;
    margin: 10px 0 0 0;
}
.page-residence-view .residence-place .icon
{
    font-size: 11pt;
    margin-left: 5px;
}
.page-residence-view .residence-price-star
{
    padding-top: 20px;
}
.page-residence-view .residence-price-star .price
{
    width: 100%;
    text-align: center;
    float: right;
}
.page-residence-view .residence-price-star .price .price-title
{
    color: #222222;
    margin-bottom: 10px;
}
.page-residence-view .residence-price-star .price .price-number
{
    color: #d8194c;
    font-size: 12pt;
}
.page-residence-view .residence-price-star .price .price-unit
{
    font-size: 9pt;
    margin-right: 5px;
}
.page-residence-view .residence-price-star .star
{
    color: #222222;
    text-align: center;
    float: left;
    margin-top: 10px;
}
.page-residence-view .residence-price-star .star .icon
{
    color: #fccb00;
    font-size: 10pt;
}
.page-residence-view .residence-price-star .star .icon-title
{
    font-size: 9pt;
}

.page-residence-view .residence-contact-box
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.page-residence-view .residence-contact-box .title
{
    width: 50px;
    color: #888888;
    font-size: 9pt;
    float: right;
}
.page-residence-view .residence-contact-box .des
{
    font-size: 11pt;
    float: right;
    letter-spacing: 2px;
    direction: ltr;
}

/* *** */

.page-residence-view .residence-position .des
{
    margin-top: 10px;
}
.page-residence-view .residence-position .province-des
{
    margin-bottom: 20px;
}
.page-residence-view .residence-position .texture-type-box
{
    display: flex;
    margin-bottom: 20px;
}
.page-residence-view .residence-position .texture-type-box .texture-type-title
{
    background-color: #dcdcdc;
    text-align: center;
    font-size: 9pt;
    line-height: 2.1em;
    padding: 0 7px;
    margin-right: 7px;
    border-radius: 5px;
}
.page-residence-view .residence-position .map-box
{
    background-color: #d7d5e3;
    width: 100%;
    height: 300px;
    float: left;
    margin-bottom: 20px;
}

/* *** */

.page-residence-view .residence-image
{
    background-color: #d7d5e3;
    width: 100%;/*
    height: 56.25%;*/
    float: left;
    overflow: hidden;
    position: relative;/*
    top: 0;
    left: 0;*/
}/*
.page-residence-view .residence-image:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}*/
.page-residence-view .residence-image .swiper-container
{
    width: 100%;
    height: 100%;
    padding: 0 40px;/*
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
}/*
.page-residence-view .residence-image .swiper-slide
{
    overflow: hidden;
}*/
.page-residence-view .residence-image .swiper-slide
{
    background-color: #d7d5e3;
    width: 100%;
    height: 56.25%;
    float: left;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.page-residence-view .residence-image .swiper-slide:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.page-residence-view .residence-image .swiper-slide img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.page-residence-view .residence-image .swiper-button-next, .page-residence-view .residence-image .swiper-button-prev
{
    background-image: none;
    background-color: rgba(0, 0, 0, 0.4);
    width: 40px;
    height: 100%;
    color: #ffffff;
    font-size: 20pt;
    text-align: center;
    margin: 0;
    display: inline-block;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-residence-view .residence-image .swiper-button-next i, .page-residence-view .residence-image .swiper-button-prev i
{
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}
.page-residence-view .residence-image .swiper-button-next
{
    right: auto;
    left: 0;
}
.page-residence-view .residence-image .swiper-button-prev
{
    right: 0;
    left: auto;
}
.page-residence-view .residence-image .swiper-button-next:hover, .page-residence-view .residence-image .swiper-button-prev:hover
{
    color: #d8194c;
}

/* *** */

.page-residence-view .residence-des .des
{
    margin-top: 10px;
    overflow: hidden;
}
/*
.page-residence-view .residence-des .show-more
{
    color: #d8194c;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}
.page-residence-view .residence-des .show-more:after
{
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 1) 99%, #ffffff);
    width: 100%;
    height: 6em;
    content: "";
    position: absolute;
    bottom: 50px;
    left: 0;
}
.page-residence-view .residence-des .show-more.open:after
{
    height: 0;
}
*/
/* *** */

.page-residence-view .residence-capacity-bedroom-bed
{
    width: 100%;
    float: right;
    margin-top: 15px;
}
.page-residence-view .residence-capacity-bedroom-bed .item
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.page-residence-view .residence-capacity-bedroom-bed .item .icon
{
    width: 30px;
    float: right;
}
.page-residence-view .residence-capacity-bedroom-bed .item .data
{
    font-size: 11pt;
    font-weight: bold;
    float: right;
}
.page-residence-view .residence-capacity-bedroom-bed .item-des-box
{
    width: 100%;
    float: right;
    padding-right: 30px;
    margin-top: 10px;
}
.page-residence-view .residence-capacity-bedroom-bed .item-des-box .item-des
{
    float: right;
    margin-left: 20px;
}

/* *** */

.page-residence-view .residence-space
{
    width: 100%;
    float: right;
    margin-top: 30px;
}
.page-residence-view .residence-space .title
{
    font-size: 11pt;
    font-weight: bold;
    line-height: 2em;
}
.page-residence-view .residence-space .item-box .item
{
    width: 25%;
    float: right;
    margin-top: 20px;
}

/* *** */

.page-residence-view .residence-location-around .residence-location-around-box
{
    background-color: #ffffff;
    width: 100%;
    float: right;/*
    margin-top: 10px;*/
    padding: 10px 0;
}
.page-residence-view .residence-location-around .residence-location-around-box:nth-child(odd)
{
    background-color: #fafafa;
}
.page-residence-view .residence-location-around .residence-location-around-box .residence-location-around-title
{
    width: calc(100% - 100px);
    font-size: 10pt;
    float: right;
    padding: 0 20px;
}
.page-residence-view .residence-location-around .residence-location-around-box .residence-location-around-distance
{
    width: 100px;
    font-size: 10pt;
    text-align: left;
    float: right;
    padding: 0 20px;
    direction: ltr;
}

/* *** */
/*
.page-residence-view .residence-facility .des
{
    margin-top: 10px;
    overflow: hidden;
}
*/
.page-residence-view .residence-facility .facility-box
{
    width: 33.33%;
    float: right;
    margin-top: 10px;
}
.page-residence-view .residence-facility .facility-box.inactive
{
    opacity: 0.5;
    -moz-opacity: 0.5;
}
.page-residence-view .residence-facility .facility-box img
{
    width: 25px;
    height: 25px;
}
.page-residence-view .residence-facility .facility-box .title
{
    margin-right: 10px;
    vertical-align: middle;
}
.page-residence-view .residence-facility .facility-box.active .title
{
    color: #4caf50;
}
/*
.page-residence-view .residence-facility .show-more
{
    color: #d8194c;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}
.page-residence-view .residence-facility .show-more:after
{
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 1) 99%, #ffffff);
    width: 100%;
    height: 6em;
    content: "";
    position: absolute;
    bottom: 50px;
    left: 0;
}
.page-residence-view .residence-facility .show-more.open:after
{
    height: 0;
}
*/
/* *** */

.page-residence-view .residence-rule .des
{
    width: 100%;
    float: right;
    margin-top: 10px;
}

.page-residence-view .residence-rule .title
{
    width: 100%;
    font-size: 11pt;
    font-weight: bold;
    float: right;
    margin-top: 30px;
}

.page-residence-view .residence-rule .rule-animal-ceremony
{
    width: 100%;
    font-weight: bold;
    float: right;
    margin-top: 5px;
}
.page-residence-view .residence-rule .rule-animal-ceremony .allowed
{
    color: #0a8c00;
    font-size: 12pt;
    margin-left: 5px;
}
.page-residence-view .residence-rule .rule-animal-ceremony .no-allowed
{
    color: #eb0008;
    font-size: 12pt;
    margin-left: 5px;
}

.page-residence-view .residence-rule .rule-time-box
{
    background-color: #f2f2f2;
    text-align: center;
    float: right;
    padding: 7px 15px;
    margin-left: 10px;
    border: 2px solid #d0d0d0;
    border-radius: 5px;
}
.page-residence-view .residence-rule .rule-time-box .title
{
    width: 100%;
    color: #888888;
    font-size: 9pt;
    font-weight: normal;
    float: right;
    margin: 0;
}
.page-residence-view .residence-rule .rule-time-box .time
{
    width: 100%;
    font-size: 14pt;
    font-weight: bold;
    float: right;
    letter-spacing: 2px;
}

/* *** */

.page-residence-view .residence-related .residence-item-box
{
    background-color: #fafafa;
}

/* *** */

.page-residence-view .form-residence-comment .comment-col-right
{
    padding-left: 30px;
}
.page-residence-view .form-residence-comment .comment-col-left
{
    padding-right: 30px;
}

.page-residence-view .form-residence-comment .label
{
    color: #888888;
    font-size: 9pt;
    font-weight: bold;
    padding: 0;
}
.page-residence-view .form-residence-comment input, .page-residence-view .form-residence-comment textarea, .page-residence-view .form-residence-comment select
{
    padding: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 25px 25px 0 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-residence-view .form-residence-comment select
{
    height: 42px;
    padding: 0 20px;
}

.page-residence-view .form-residence-comment .form-residence-comment-trip-date-month
{
    border-radius: 0 25px 0 0;
}
.page-residence-view .form-residence-comment .form-residence-comment-trip-date-year
{
    border-radius: 25px 0 0 25px;
}

.page-residence-view .form-residence-comment input:focus, .page-residence-view .form-residence-comment textarea:focus, .page-residence-view .form-residence-comment select:focus
{
    border: 1px solid #363382;
}
.page-residence-view .form-residence-comment textarea
{
    height: 260px;
    text-align: justify;
}
.page-residence-view .form-residence-comment button
{
    background-color: #363382;
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 10px 25px;
    margin: 0;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-residence-view .form-residence-comment button:focus, .page-residence-view .form-residence-comment button:hover
{
    background-color: #d8194c;
}
.page-residence-view .form-residence-comment button .icon
{
    margin-left: 10px;
}

.page-residence-view .form-residence-comment .form-residence-comment-score-box
{
    margin-top: 10px;
}
.page-residence-view .form-residence-comment .form-residence-comment-score-box .score-title
{
    font-size: 9pt;
}
.page-residence-view .form-residence-comment .form-residence-comment-score-box div[class*="col-"]:nth-child(odd)
{
    padding-right: 0;
}
.page-residence-view .form-residence-comment .form-residence-comment-score-box div[class*="col-"]:nth-child(even)
{
    padding-left: 0;
}
.page-residence-view .form-residence-comment .form-residence-comment-score-box .score-box
{
    margin-bottom: 20px;
}
.page-residence-view .form-residence-comment .form-residence-comment-score-box div[class*="col-"]:last-child .score-box
{
    margin-bottom: 0;
}
.page-residence-view .form-residence-comment .form-residence-comment-score-box .score-box .score-item-box
{
    background: #eeeeee;
    width: 20%;
    height: 7px;
    float: right;
    border-left: 2px solid #ffffff;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-residence-view .form-residence-comment .form-residence-comment-score-box .score-box .score-item-box.active, .page-residence-view .form-residence-comment .form-residence-comment-score-box .score-box .score-item-box.hover
{
    background-color: #d8194c;
}

/* *** */

.page-residence-view .residence-comment .comment-box
{
    background: #fafafa;
    width: 100%;
    min-height: 100%;
    float: right;
    margin-top: 20px;
    position: relative;
}

.page-residence-view .residence-comment .comment-box .col-right
{
    background: #f2f2f2;
    width: 200px;
    min-height: 100%;
    text-align: center;
    float: right;
    padding: 20px;
    position: absolute;
    z-index: 1;
}
.page-residence-view .residence-comment .comment-box .col-right .user-image
{
    width: 64px;
    height: 64px;
    margin: 0 auto;
    position: relative;
}
.page-residence-view .residence-comment .comment-box .col-right .user-image img
{
    width: 100%;
    height: 100%;
    border: 3px solid #353482;
    border-radius: 100%;
}
.page-residence-view .residence-comment .comment-box .col-right .user-image .score
{
    background-color: #353482;
    width: 30px;
    height: 30px;
    color: #ffffff;
    font-size: 8pt;
    text-align: center;
    padding-top: 7px;
    border-radius: 100%;
    position: absolute;
    bottom: -5px;
    left: -5px;
}
.page-residence-view .residence-comment .comment-box .col-right .user-name-family
{
    font-size: 9pt;
    margin-top: 15px;
}
.page-residence-view .residence-comment .comment-box .col-right .date
{
    font-size: 8pt;
}
.page-residence-view .residence-comment .comment-box .col-right .suggest-others .suggest
{
    background-color: #4caf50;
    color: #ffffff;
    font-size: 8pt;
    display: inline-block;
    padding: 1px 7px;
    margin-top: 15px;
    border-radius: 25px 25px 0 25px;
}
.page-residence-view .residence-comment .comment-box .col-right .suggest-others .no-suggest
{
    background-color: #d8194c;
    color: #ffffff;
    font-size: 8pt;
    display: inline-block;
    padding: 1px 7px;
    margin-top: 15px;
    border-radius: 25px 25px 0 25px;
}

.page-residence-view .residence-comment .comment-box .col-right .like-dislike
{
    width: 100%;
    float: right;
    margin-top: 20px;
    direction: ltr;
}
.page-residence-view .residence-comment .comment-box .col-right .like-dislike .like, .page-residence-view .residence-comment .comment-box .col-right .like-dislike .dislike
{
    background-color: #4caf50;
    color: #ffffff;
    font-size: 9pt;
    display: inline-block;
    padding: 7px 7px 3px 7px;
    margin-top: 15px;
    border-radius: 25px 25px 0 25px;
    direction: ltr;
    cursor: pointer;
}
.page-residence-view .residence-comment .comment-box .col-right .like-dislike .dislike
{
    background-color: #d8194c;
    border-radius: 25px 25px 25px 0;
}
.page-residence-view .residence-comment .comment-box .col-right .like-dislike .number
{
    margin-left: 10px;
}

.page-residence-view .residence-comment .comment-box .col-left
{
    width: 100%;
    float: right;
    padding: 20px 220px 20px 20px;
}
.page-residence-view .residence-comment .comment-box .col-left .title
{
    font-size: 11pt;
    font-weight: bold;
}
.page-residence-view .residence-comment .comment-box .col-left .des
{
    text-align: justify;
    margin-top: 15px;
}

.page-residence-view .residence-comment .comment-box .col-left .trip-type-date
{
    font-size: 9pt;
    margin-top: 15px;
}
.page-residence-view .residence-comment .comment-box .col-left .trip-type-date .ttd-des
{
    color: #d8194c;
    margin-right: 5px;
}

.page-residence-view .residence-comment .comment-box .col-left .comment-score-box
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.page-residence-view .residence-comment .comment-box .col-left .comment-score-box .score-title
{
    width: 50%;
    float: right;
    margin-top: 10px;
}
.page-residence-view .residence-comment .comment-box .col-left .comment-score-box .score-title .score
{
    background-color: #d8194c;
    width: 20px;
    height: 20px;
    color: #ffffff;
    font-size: 9pt;
    text-align: center;
    float: right;
    margin-left: 5px;
    border-radius: 100%;
}
.page-residence-view .residence-comment .comment-box .col-left .comment-score-box .score-title .title
{
    font-size: 9pt;
    font-weight: normal;
    text-align: justify;
    padding-right: 25px;
}

/* *** */

.page-residence-view .residence-title-box-2
{
    display: none;
    margin-bottom: 30px;
}

.page-residence-view .col-left .residence-item-box
{
    background-color: #fafafa;
    margin-top: 30px;
}

.page-residence-view .col-left .residence-help
{
    margin-top: 30px;
}
.page-residence-view .col-left .residence-help .line-first
{
    font-size: 10pt;
}
.page-residence-view .col-left .residence-help .line-tow
{
    font-size: 12pt;
    margin: 10px 0 30px 0;
}
.page-residence-view .col-left .residence-help .tel
{
    color: #d8194c;
    font-size: 16pt;
    text-align: center;
}

/* *** */

.page-residence-view .col-left .residence-reserve
{
    margin-top: 30px;
}
.page-residence-view .col-left .residence-reserve .residence-reserve-box
{
    position: relative;
    z-index: 1;
}
.page-residence-view .col-left .residence-reserve .residence-reserve-title
{
    font-size: 12pt;
    text-align: justify;
    float: right;
}

.page-residence-view .col-left .residence-reserve .calendar-des-box
{
    width: 100%;
    float: right;
    margin-top: 20px;
}
.page-residence-view .col-left .residence-reserve .calendar-des-box .calendar-color
{
    width: 50%;
    color: #888888;
    font-size: 8pt;
    float: right;
}
.page-residence-view .col-left .residence-reserve .calendar-des-box .calendar-color .day-free .icon
{
    color: #888888;
}
.page-residence-view .col-left .residence-reserve .calendar-des-box .calendar-color .day-reserve .icon
{
    color: #d8194c;
}
.page-residence-view .col-left .residence-reserve .calendar-des-box .price-des
{
    width: 50%;
    color: #888888;
    font-size: 8pt;
    text-align: left;
    float: left;
}
.page-residence-view .col-left .residence-reserve .calendar-des-box .price-extra-des
{
    width: 50%;
    color: #888888;
    font-size: 8pt;
    text-align: right;
    float: right;
}

.page-residence-view .col-left .residence-reserve.residence-reserve-popup
{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    display: block;
    z-index: 1000000;
}
.page-residence-view .col-left .residence-reserve.residence-reserve-popup:before
{
    background-color: #ffffff;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.page-residence-view .col-left .residence-reserve .btn-hide-request-reserve
{
    float: left;
    color: #888888;
    display: none;
    cursor: pointer;
}

.page-residence-view .residence-number-title
{
    width: 100%;
    font-size: 10pt;
    font-weight: bold;
    float: right;
    margin: 10px 0 10px 0;
}
.page-residence-view .residence-number-up-down
{
    width: 100%;
    float: right;
    margin: 0;
    border: 1px solid #dbdbdb;
    border-radius: 20px;
}
.page-residence-view .residence-number-up-down .btn-up, .page-residence-view .residence-number-up-down .btn-down
{
    width: 30px;
    height: 30px;
    color: #afafaf;
    font-size: 10pt;
    text-align: center;
    line-height: 30px;
    float: left;
    border: 1px solid #dbdbdb;
    border-radius: 100%;
    cursor: pointer;
}
.page-residence-view .residence-number-up-down .number
{
    height: 30px;
    text-align: center;
    float: right;
    line-height: 30px;
    margin: 0 10px;
}

.page-residence-view .col-left .residence-reserve .btn-check-request-reserve
{
    background-color: #d8194c;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    padding: 10px 5px;
    margin-top: 20px;
    border: 0;
    border-radius: 25px;
}
.page-residence-view .col-left .residence-reserve .btn-check-request-reserve:hover
{
    background-color: #d2184a;
}
.page-residence-view .col-left .residence-reserve .form-reserve-submit
{
    background-color: #5849ad;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    padding: 10px 5px;
    margin-top: 20px;
    border: 0;
    border-radius: 25px;
}
.page-residence-view .col-left .residence-reserve .form-reserve-submit:hover
{
    background-color: #7460e4;
}

.page-residence-view .col-left .residence-reserve .residence-reserve-result
{
    margin-top: 20px;
}
.page-residence-view .col-left .residence-reserve .residence-reserve-result .price-night-person
{
    float: right;
    width: 100%;
    font-size: 9pt;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 2px 5px;
    margin-top: 5px;
}
.page-residence-view .col-left .residence-reserve .residence-reserve-result .price-night-person .title
{
    float: right;
}
.page-residence-view .col-left .residence-reserve .residence-reserve-result .price-night-person .price
{
    float: left;
}

/* *** */

.page-residence-view .residence-reserve-bar
{
    background-color: #f5f4fa;
    width: 100%;
    text-align: center;
    display: none;
    padding: 10px;
    border-top: 1px solid #dbd7ef;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10000;
}
.page-residence-view .residence-reserve-bar .btn-show-request-reserve
{
    background-color: #b5b0d1;
    width: 100%;
    max-width: 150px;
    color: #ffffff;
    font-weight: bold;
    padding: 10px 5px;
    border: 0;
    border-radius: 25px;
}

/* *** */

.page-residence-view .residence-related-bar
{
    margin-top: 50px;
}

/* *** */

@media (max-width: 991px)
{
    .page-residence-view .col-left-main .residence-title-box, .page-residence-view .col-left-main .residence-reserve
    {
        display: none;
    }

    .page-residence-view .residence-title-box-2,
    .page-residence-view .residence-reserve-bar,
    .page-residence-view .residence-data-contact-box-2, .page-residence-view .residence-data-location-box-2
    {
        display: block;
    }

    .page-residence-view .map-box
    {
        height: 250px;
    }
    .page-residence-view .map-box:before
    {
        padding: 0;
    }
}
@media (max-width: 650px)
{
    .page-residence-view .residence-space .item-box .item
    {
        width: 50%;
    }

    .page-residence-view .residence-facility .facility-box
    {
        width: 50%;
    }

    .page-residence-view .form-residence-comment .comment-col-right
    {
        width: 100%;
        padding-left: 15px;
    }
    .page-residence-view .form-residence-comment .comment-col-left
    {
        width: 100%;
        padding-right: 15px;
    }
    .page-residence-view .form-residence-comment .form-residence-comment-suggest-others-box .control-label
    {
        margin: 0 !important;
    }
    .page-residence-view .form-residence-comment .form-residence-comment-score-box .col-xs-6
    {
        width: 100%;
        padding: 0;
    }

    .page-residence-view .residence-comment .comment-box .col-right
    {
        width: 100%;
        position: inherit;
    }
    .page-residence-view .residence-comment .comment-box .col-left
    {
        width: 100%;
        padding: 20px;
    }
    .page-residence-view .residence-comment .comment-box .col-left .comment-score-box .score-title
    {
        width: 100%;
    }
}
@media (max-width: 400px)
{
    .page-residence-view .residence-facility .facility-box
    {
        width: 100%;
    }
}

/* limit-box
***********************************************************************************************************************/

.limit-box
{
    position: relative;
}
.limit-box .des
{
    margin-top: 10px;
    overflow: hidden;
}
.limit-box .show-more
{
    color: #d8194c;
    text-align: center;
    padding-top: 20px;
    cursor: pointer;
}
.limit-box .show-more span
{
    position: relative;
}
.limit-box .show-more:before
{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #ffffff 100%);
    width: 100%;
    height: 100px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
}
.limit-box .show-more.open:before
{
    height: 0;
}

/* reserve
***********************************************************************************************************************/

.page-reserve .form-reserve-message-success
{
    text-align: center;
    padding: 50px 0;
}
.page-reserve .form-reserve-message-success .icon
{
    color: #94d58a;
    font-size: 50pt;
}
.page-reserve .form-reserve-message-success .message
{
    font-size: 11pt;
    margin-top: 30px;
}

.page-reserve .reserve-data-price-box
{
    background-color: #fafafa;
    width: 100%;
    float: right;
    padding: 7px 10px;
    margin-bottom: 10px;
    border-radius: 15px;
}
.page-reserve .reserve-data-price-box:last-child
{
    margin: 0;
}
.page-reserve .reserve-data-price-box .title
{
    width: 100px;
    float: right;
    margin-left: 15px;
    border-left: 1px solid #dcdcdc;
}
.page-reserve .reserve-data-price-box .des
{
    font-size: 9pt;
}
.page-reserve .reserve-data-price-box .number
{

}
.page-reserve .reserve-data-price-box .price-unit
{
    color: #888888;
    font-size: 9pt;
    margin-right: 5px;
}

/* tour
***********************************************************************************************************************/
/*
.page-tour .col-result .panel-data-box
{
    padding-right: 15px;
    padding-left: 15px;
}
.page-tour .col-result .tour-item-box
{
    background-color: #fafafa;
    margin-bottom: 30px;
}
*/
.page-tour .col-result .show-data
{
    margin-left: -10px;
    margin-right: -10px;
}
.page-tour .col-result .show-data .col-lg-3
{
    width: 25% !important;
    margin-bottom: 20px;
}

/* * */

@media (max-width: 1300px)
{
    .page-tour .col-result .show-data .col-lg-3
    {
        width: 25% !important;
    }
}
@media (max-width: 1199px)
{
    .page-tour .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
}
@media (max-width: 992px)
{
    .page-tour .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
}
@media (max-width: 768px)
{
    .page-tour .col-result .show-data .col-lg-3
    {
        width: 50% !important;
    }
}
@media (max-width: 500px)
{
    .page-tour .col-result .show-data .col-lg-3
    {
        width: 100% !important;
    }
}

/* tour view
***********************************************************************************************************************/

.page-tour-view .tour-title
{
    font-size: 14pt;
    text-align: justify;
}

.page-tour-view .tour-origin-destination
{
    color: #888888;
    font-size: 9pt;
    text-align: justify;
    margin: 10px 0 0 0;
}
.page-tour-view .tour-origin-destination .icon
{
    font-size: 11pt;
    margin-left: 5px;
}

.page-tour-view .tour-price-specification
{
    padding-top: 20px;
}
.page-tour-view .tour-price-specification .price
{
    float: right;
}
.page-tour-view .tour-price-specification .price .price-title
{
    color: #222222;
    margin-bottom: 10px;
}
.page-tour-view .tour-price-specification .price .price-number
{
    color: #d8194c;
    font-size: 12pt;
}
.page-tour-view .tour-price-specification .price .price-unit
{
    font-size: 9pt;
    margin-right: 5px;
}
.page-tour-view .tour-price-specification .specification
{
    color: #222222;
    text-align: center;
    float: left;
}
.page-tour-view .tour-price-specification .specification .icon-box
{
    float: left;
    margin-right: 10px;
}
.page-tour-view .tour-price-specification .specification .icon-box .icon
{
    font-size: 16pt;
}
.page-tour-view .tour-price-specification .specification .icon-box .icon-title
{
    font-size: 9pt;
}

/* *** */

.page-tour-view .tour-image
{
    background-color: #d7d5e3;
    width: 100%;
    /*height: 56.25%;*/
    float: left;
    overflow: hidden;
    position: relative;/*
    top: 0;
    left: 0;*/
}/*
.page-tour-view .tour-image:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}*/
.page-tour-view .tour-image .swiper-container
{
    width: 100%;
    height: 100%;
    padding: 0 40px;/*
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
}/*
.page-tour-view .tour-image .swiper-slide
{
    overflow: hidden;
}
*/
.page-tour-view .tour-image .swiper-slide
{
    background-color: #d7d5e3;
    width: 100%;
    height: 56.25%;
    float: left;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.page-tour-view .tour-image .swiper-slide:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.page-tour-view .tour-image .swiper-slide img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}
.page-tour-view .tour-image .swiper-button-next, .page-tour-view .tour-image .swiper-button-prev
{
    background-image: none;
    background-color: rgba(0, 0, 0, 0.4);
    width: 40px;
    height: 100%;
    color: #ffffff;
    font-size: 20pt;
    text-align: center;
    margin: 0;
    display: inline-block;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.page-tour-view .tour-image .swiper-button-next i, .page-tour-view .tour-image .swiper-button-prev i
{
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}
.page-tour-view .tour-image .swiper-button-next
{
    right: auto;
    left: 0;
}
.page-tour-view .tour-image .swiper-button-prev
{
    right: 0;
    left: auto;
}
.page-tour-view .tour-image .swiper-button-next:hover, .page-tour-view .tour-image .swiper-button-prev:hover
{
    color: #d8194c;
}

/* *** */

.page-tour-view .tour-des .des img
{
    max-width: 100% !important;
    height: auto !important;
}

/*
.page-tour-view .tour-des .des
{
    overflow: hidden;
}
.page-tour-view .tour-des .show-more
{
    color: #d8194c;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}
.page-tour-view .tour-des .show-more:after
{
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 1) 99%, #ffffff);
    width: 100%;
    height: 6em;
    content: "";
    position: absolute;
    bottom: 50px;
    left: 0;
}
.page-tour-view .tour-des .show-more.open:after
{
    height: 0;
}
*/
/* *** */
/*
.page-tour-view .tour-tourist-attraction .des
{
    padding-top: 20px;
    overflow: hidden;
}
.page-tour-view .tour-tourist-attraction .show-more
{
    color: #d8194c;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}
.page-tour-view .tour-tourist-attraction .show-more:after
{
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 1) 99%, #ffffff);
    width: 100%;
    height: 6em;
    content: "";
    position: absolute;
    bottom: 50px;
    left: 0;
}
.page-tour-view .tour-tourist-attraction .show-more.open:after
{
    height: 0;
}
*/
/* *** */

.page-tour-view .tour-service .des, .page-tour-view .tour-document .des, .page-tour-view .tour-cost .des
{
    margin-top: 10px;
}
.page-tour-view .tour-service .service-box, .page-tour-view .tour-document .document-box, .page-tour-view .tour-cost .cost-box
{
    width: 50%;
    float: left;
    padding-right: 10px;
    margin-top: 10px;
}
.page-tour-view .tour-service .service-box:nth-child(odd), .page-tour-view .tour-document .document-box:nth-child(odd), .page-tour-view .tour-cost .cost-box:nth-child(odd)
{
    float: right;
    clear: both;
    padding-right: 0;
    padding-left: 10px;
}
.page-tour-view .tour-service .service-box .icon, .page-tour-view .tour-document .document-box .icon, .page-tour-view .tour-cost .cost-box .icon
{
    color: #888888;
    font-size: 4pt;
    margin-left: 5px;
}

/* *** */

.page-tour-view .table-show-data-tour-package
{
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.page-tour-view .table-show-data-tour-package thead th
{
    background-color: #363382;
    color: #ffffff;
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    padding: 7px;
}
.page-tour-view .table-show-data-tour-package thead th, .page-tour-view .table-show-data-tour-package tbody td
{
    vertical-align: middle;
}
.page-tour-view .table-show-data-tour-package thead th:first-child, .page-tour-view .table-show-data-tour-package tbody td:first-child
{
    font-weight: bold;
    text-align: right;
}
.page-tour-view .table-show-data-tour-package tbody .tr-even td
{
    background-color: #eeeeee;
    padding: 7px;
}
.page-tour-view .table-show-data-tour-package tbody .tr-odd td
{
    background-color: #dddddd;
    padding: 7px;
}
.page-tour-view .table-show-data-tour-package tbody .tr-des td
{
    font-size: 9pt;
}
.page-tour-view .table-show-data-tour-package tbody .tr-border
{
    border-top: 5px solid #ffffff;
}
.page-tour-view .table-show-data-tour-package .space-line
{
    margin-top: -7px;
    margin-bottom: 7px;
    border-bottom: 1px solid #ffffff;
}
.page-tour-view .table-show-data-tour-package .star
{
    margin-top: 5px;
}
.page-tour-view .table-show-data-tour-package .star .icon
{
    color: #fccb00;
    font-size: 9pt;
}
.page-tour-view .table-show-data-tour-package .price-unit
{
    font-size: 8pt;
    margin-right: 3px;
    letter-spacing: 0;
}

/* *** */

.page-tour-view .tour-related-bar
{
    margin-top: 50px;
}

/* *** */

.page-tour-view .tour-title-box-2
{
    display: none;
    margin-bottom: 30px;
}

.page-tour-view .col-left .tour-item-box
{
    background-color: #fafafa;
    margin-top: 30px;
}

/* *** */

@media (max-width: 991px)
{
    .page-tour-view .col-left
    {
        display: none;
    }
    /*
    .page-tour-view .tour-title-box
    {
        display: none;
    }
    */
    .page-tour-view .tour-title-box-2
    {
        display: block;
    }
}
@media (max-width: 600px)
{
    .page-tour-view .tour-service .service-box, .page-tour-view .tour-document .document-box, .page-tour-view .tour-cost .cost-box
    {
        width: 100%;
        padding: 0;
    }
}

/* visa
***********************************************************************************************************************/

.page-visa .col-result .show-data
{
    margin-left: -10px;
    margin-right: -10px;
}
.page-visa .col-result .show-data .col-lg-3
{
    width: 20% !important;
    margin-bottom: 20px;
}

.visa-item-box
{
    background-color: #ffffff;
    width: 100%;
    float: right;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.visa-item-box .img
{
    background-image: url("../../img/loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #d7d5e3;
    width: 100%;
    height: 37.5%;
    float: right;
    overflow: hidden;
    position: relative;
}
.visa-item-box .img:before
{
    content: "";
    display: block;
    padding-top: 37.5%;
}
.visa-item-box .img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.visa-item-box .title
{
    width: 100%;
    background-image: linear-gradient(0, #000000 0%, rgba(0, 0, 0, 0) 100%);
    color: #ffffff;
    font-size: 11pt;
    text-align: right;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    right: 0;
}
.visa-item-box:hover .title
{
    color: #d8194c;
}

/* * */
/*
@media (max-width: 1300px)
{
    .page-visa .col-result .show-data .col-lg-3
    {
        width: 25% !important;
    }
}
@media (max-width: 1199px)
{
    .page-visa .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
}
@media (max-width: 992px)
{
    .page-visa .col-result .show-data .col-lg-3
    {
        width: 33.33% !important;
    }
}
@media (max-width: 768px)
{
    .page-visa .col-result .show-data .col-lg-3
    {
        width: 50% !important;
    }
}
@media (max-width: 500px)
{
    .page-visa .col-result .show-data .col-lg-3
    {
        width: 100% !important;
    }
}*/

/* visa - view
***********************************************************************************************************************/

.main-body-visa-view .page-banner
{
    height: 37.5%;
}
.main-body-visa-view .page-banner:before
{
    content: "";
    display: block;
    padding-top: 37.5%;
}

/* tab-share-favorite
***********************************************************************************************************************/

.my-sticky
{
    border-bottom: 1px solid #dcdcdc;
    position: fixed;
    top: 0;
    right: 0;
}
.tab-share-favorite
{
    background-color: #ffffff;
    width: 100%;
    float: right;
    padding: 10px;
    z-index: 1000;
}
.tab-share-favorite .tab-section
{
    float: right;
}
.tab-share-favorite .tab-section .tab
{
    font-size: 9pt;
    font-weight: bold;
    float: right;
    margin-left: 16px;
    cursor: pointer;
    position: relative;
}
.tab-share-favorite .tab-section .tab:hover
{
    color: #d8194c;
}
.tab-share-favorite .tab-section .tab:before
{
    background-color: #222222;
    width: 3px;
    height: 3px;
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.tab-share-favorite .tab-section .tab:last-child:before
{
    height: 0;
}

.tab-share-favorite .share-favorite
{
    float: left;
    position: relative;
}
.tab-share-favorite .share-favorite span
{
    color: #888888;
    font-size: 14pt;
    float: left;
    margin-right: 10px;
    cursor: pointer;
}
.tab-share-favorite .share-favorite .btn-favorite.fa
{
    color: #d8194c;
}
.tab-share-favorite .share-favorite span:hover
{
    color: #d8194c;
}
.tab-share-favorite .btn-share-dropdown
{
    background: #eaeaea;
    min-width: auto;
    border: 0;
    box-shadow: none;
}
.tab-share-favorite .btn-share-dropdown a
{
    width: 40px;
    text-align: center;
    float: right;
    clear: both;
    padding: 10px 0;
}
.tab-share-favorite .btn-share-dropdown a span
{
    float: none;
    margin: 0;
}
.tab-share-favorite .btn-share-dropdown a:hover span
{
    color: #d8194c;
}

/* * */

@media (max-width: 600px)
{
    .tab-share-favorite .share-favorite
    {
        display: none;
    }
}

/* banner-bar
***********************************************************************************************************************/

.banner-residence-bar
{
    width: 100%;
    float: right;
    clear: both;
    margin-bottom: 70px;
}
.banner-residence-bar .banner-box
{
    width: 100%;
    height: 37.5%;
    float: right;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 7px -3px rgba(0, 0, 0, 0.5);
}
.banner-residence-bar .banner-box:before
{
    content: "";
    display: block;
    padding-top: 37.5%;
}
.banner-residence-bar .banner-box img
{
    width: 100%;
    height: 100%;
    float: right;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
}

/* * */

@media (max-width: 992px)
{
    .banner-residence-bar div[class*="col-"]
    {
        width: 50%;
    }
    .banner-residence-bar div[class*="col-"]:last-child
    {
        display: none;
    }
}
@media (max-width: 500px)
{
    .banner-residence-bar div[class*="col-"]
    {
        width: 100%;
        margin-bottom: 15px;
    }
    .banner-residence-bar div[class*="col-"]:last-child
    {
        display: block;
    }
}

/* banner-page-residence-bar
***********************************************************************************************************************/

.banner-page-residence-bar
{
    width: 100%;
    text-align: center;
    float: right;
    clear: both;
    margin-bottom: 70px;
}
.banner-page-residence-bar .banner-box
{
    margin: 0 5px;
    display: inline-block;
}
.banner-page-residence-bar .banner-box img
{
    width: 64px;
    height: 64px;
    display: inline-block;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
}
.banner-page-residence-bar .banner-box .title
{
    font-weight: bold;
    margin-top: 10px;
}

/* * */

@media (max-width: 430px)
{
    .banner-page-residence-bar .banner-box:nth-child(5)
    {
        display: none;
    }
}
@media (max-width: 340px)
{
    .banner-page-residence-bar .banner-box:nth-child(4)
    {
        display: none;
    }
}

/* statistic-bar
***********************************************************************************************************************/

.statistic-bar
{
    background-color: #888888;
    background-size: cover;
    background-position: center center;
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    width: 100%;
    height: 25%;
    text-align: center;
    float: right;
    clear: both;/*
    padding: 100px 0;*/
    margin-bottom: 70px;
    position: relative;
}
.statistic-bar:before
{
    content: "";
    display: block;
    padding-top: 25%;
}
.statistic-bar .statistic-data-box
{
    width: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.statistic-bar .statistic-item-box
{
    width: 15%;
    color: #f5f4fa;
    display: inline-block;
    position: relative;
    z-index: 5;
}
.statistic-bar .statistic-item-box .icon
{
    font-size: 40pt;
}
.statistic-bar .statistic-item-box .number
{
    font-size: 16pt;
    margin: 20px 0 5px 0;
}
.statistic-bar .statistic-item-box .title
{
    font-size: 10pt;
}

.statistic-bar .statistic-overly
{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

/* * */

@media (max-width: 992px)
{
    .statistic-bar .statistic-item-box
    {
        width: 20%;
    }
}
@media (max-width: 767px)
{
    .statistic-bar .statistic-item-box
    {
        width: 24%;
    }
}
@media (max-width: 550px)
{
    .statistic-bar:before
    {
        padding-top: 80%;
    }
    .statistic-bar .statistic-item-box
    {
        width: 49%;
    }
    .statistic-bar .statistic-item-box:nth-child(1), .statistic-bar .statistic-item-box:nth-child(2)
    {
        margin-bottom: 30px;
    }
}

/* page-favorite
***********************************************************************************************************************/

.page-favorite .box-title
{
    background-image: linear-gradient(-90deg, #f5f5f5 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    float: right;
    font-size: 11pt;
    font-weight: bold;
    padding: 5px;
    margin: 30px 0 30px 0;
}
.page-favorite .box-title:first-child
{
    margin-top: 0;
}

.page-favorite .favorite-item a
{
    width: 100%;
    height: 56.25%;
    float: right;
    margin-bottom: 20px;
    position: relative;
}
.page-favorite .favorite-item a:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.page-favorite .favorite-item a .image
{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: "object-fit: cover;";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
}
.page-favorite .favorite-item a .title
{
    width: 100%;
    background-image: linear-gradient(0, #000000 0%, rgba(0, 0, 0, 0) 100%);
    color: #ffffff;
    font-size: 10pt;
    text-align: right;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    right: 0;
}
.page-favorite .favorite-item a .btn
{
    position: absolute;
    top: 10px;
    left: 10px;
}

/* * */

@media (max-width: 500px)
{
    .page-favorite .favorite-item
    {
        width: 100%;
    }
}

/*
***********************************************************************************************************************/

.page-message .tab-box
{
    width: 100%;
    float: right;
    text-align: center;
    margin-bottom: 30px;
}
.page-message .tab-box a
{
    background-color: #f5f4fa;
    color: #706b8b;
    font-size: 10pt;
    display: inline-block;
    padding: 7px 20px;
    border-radius: 30px 30px 0 30px;
}
.page-message .tab-box a:last-child
{
    border-radius: 30px 30px 30px 0;
}
.page-message .tab-box a:hover, .page-message .tab-box a.active
{
    color: #d8194c;
}

.page-message .message-box
{
    background-color: #fafafa;
    width: 100%;
    float: right;
    text-align: justify;
    padding: 10px 60px 10px 15px;
    margin-top: 5px;
    border-radius: 30px 30px 0 30px;
    position: relative;
}
.page-message .message-box .row-number
{
    width: 60px;
    color: #d7d5e3;
    font-size: 20pt;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.page-message .message-box .date-time
{
    color: #888888;
    font-size: 9pt;
    margin-top: 10px;
}
.page-message .message-box .date-time .time
{
    margin-right: 10px;
}

/*
***********************************************************************************************************************/

.trip-box
{
    background-color: #fafafa;
    width: 100%;
    float: right;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.trip-box .trip-image
{
    width: 100%;
    height: 56.25%;
    float: right;
    position: relative;
}
.trip-box .trip-image:before
{
    content: "";
    display: block;
    padding-top: 56.25%;
}
.trip-box .trip-image img
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.trip-box .trip-title-date-price
{
    width: 100%;
    text-align: center;
    float: right;
}
.trip-box .trip-title-date-price .trip-title
{
    font-size: 11pt;
    font-weight: bold;
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trip-box .trip-title-date-price .trip-date
{
    color: #888888;
    margin-top: 15px;
}
.trip-box .trip-title-date-price .trip-date .title
{
    margin-left: 10px;
}
.trip-box .trip-title-date-price .trip-price
{
    font-weight: bold;
    margin-top: 15px;
}
.trip-box .trip-title-date-price .trip-price .title
{
    margin-left: 10px;
}
.trip-box .trip-title-date-price .trip-price .price-unit
{
    color: #888888;
    font-weight: normal;
    margin-right: 5px;
}

.trip-box .trip-btn
{
    margin-top: 20px;
}
.trip-box .trip-btn .btn-payment, .trip-box .trip-btn .btn-view, .trip-box .trip-btn .btn-invoice, .trip-box .trip-btn .btn-location
{
    background-color: #dbd050;
    width: 105px;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    padding: 5px 0;
    border-radius: 30px 30px 30px 0;
}
.trip-box .trip-btn .btn-payment
{
    background-color: #009e00;
    border-radius: 30px 30px 0 30px;
    margin-left: 2px;
}
.trip-box .trip-btn .btn-invoice
{
    background-color: #9e0d00;
    border-radius: 30px 30px 0 30px;
    margin-left: 2px;
}
.trip-box .trip-btn .btn-location
{
    background-color: #9e920c;
    border-radius: 30px 30px 0 30px;
    margin-left: 2px;
}
.trip-box .trip-btn .btn-payment:hover, .trip-box .trip-btn .btn-view:hover, .trip-box .trip-btn .btn-invoice:hover, .trip-box .trip-btn .btn-location:hover
{
    opacity: 0.6;
    -moz-opacity: 0.6;
}

.trip-box .trip-status-box
{
    width: 100%;
    text-align: center;
    float: right;
    margin-top: 60px;
    position: relative;
}
.trip-box .trip-status-box .status-title
{
    width: 33.33%;
    color: #888888;
    font-size: 8pt;
    float: right;
    position: relative;
}
.trip-box .trip-status-box .status-title:before
{
    background-color: #cccccc;
    width: 20px;
    height: 20px;
    font-size: 11pt;
    text-align: center;
    content: "";
    border-radius: 100%;
    position: absolute;
    top: -30px;
    right: 50%;
    transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
}
.trip-box .trip-status-box .status-title:after
{
    background-color: #cccccc;
    width: 100%;
    height: 2px;
    content: "";
    position: absolute;
    top: -20px;
    right: 50%;
}
.trip-box .trip-status-box .status-title:last-child:after
{
    display: none;
}

.trip-box .trip-status-box .status-title.done
{
    color: #009e00;
}
.trip-box .trip-status-box .status-title.done:before, .trip-box .trip-status-box .status-title.done:after
{
    background-color: #009e00;
}

.trip-box .trip-status-box.cancel .status-title
{
    color: #c90013 !important;
}
.trip-box .trip-status-box.cancel .status-title:before, .trip-box .trip-status-box.cancel .status-title:after
{
    background-color: #c90013 !important;
}

/* *** */

@media (max-width: 600px)
{
    .page-trip .panel-data-box .col-lg-3
    {
        width: 100%;
    }
}

/* trip view
***********************************************************************************************************************/

.table-show-data-trip
{
    width: 100%;
}
.table-show-data-trip .price-unit
{
    color: #d7d5e3;
    font-size: 8pt;
}
.table-show-data-trip thead th
{
    background-color: #68628b;
    color: #ffffff;
    padding: 7px;
}
.table-show-data-trip thead th:first-child
{
    border-radius: 0 30px 0 0;
}
.table-show-data-trip thead th:last-child
{
    border-radius: 30px 0 0 0;
}
.table-show-data-trip tbody tr
{
    border-top: 3px solid #ffffff;
}
.table-show-data-trip tbody td
{
    background-color: #fafafa;
    text-align: center;
    padding: 7px;
}
.table-show-data-trip tbody td:nth-child(2)
{
    text-align: right;
}
.table-show-data-trip tfoot tr
{
    border-top: 3px solid #ffffff;
}
.table-show-data-trip tfoot td
{
    background-color: #68628b;
    color: #ffffff;
    line-height: 2.5em;
    padding: 7px;
}
.table-show-data-trip tfoot td:first-child
{
    border-radius: 0 0 30px 0;
}
.table-show-data-trip tfoot td:last-child
{
    border-radius: 0 0 0 30px;
}

.page-trip-view .trip-box
{
    background-color: transparent;
    text-align: center;
    padding: 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
}
.page-trip-view .trip-box .trip-image
{
    max-width: 400px;
    float: none;
    display: inline-block;
}

.page-trip-view .trip-address
{
    width: 100%;
    float: right;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #e8e8e8;
}
.page-trip-view .trip-address .title
{
    width: 40px;
    font-weight: bold;
    float: right;
}
.page-trip-view .trip-address .address
{
    padding-right: 40px;
}

.page-trip-view .trip-status-box
{
    background-color: #fafafa;
    width: 100%;
    max-width: 200px;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    border: 1px solid #f5f5f5;
    margin: 0 auto 30px auto;
    border-radius: 15px;
}
.page-trip-view .trip-status-box.success
{
    background-color: #e9fae9;
    border: 1px solid #d0e7d0;
}
.page-trip-view .trip-status-box.cancel
{
    background-color: #fae9e9;
    border: 1px solid #e7d0d0;
}
.page-trip-view .trip-status-box .title
{
    font-size: 9pt;
    font-weight: normal;
    margin-bottom: 10px;
}

.page-trip-view div[class*="col-"]
{
    margin-bottom: 20px;
}

/*
***********************************************************************************************************************/

.main-body-trip-invoice
{
    background-color: #ffffff;
}

.main-body-trip-invoice .page-content
{
    margin: 0;
}

.page-trip-invoice .invoice-header
{
    width: 100%;
    text-align: center;
    float: right;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #888888;
}
.page-trip-invoice .invoice-header .logo
{
    width: 150px;
    float: right;
    text-align: right;
}
.page-trip-invoice .invoice-header .logo img
{
    width: 100%;
    max-width: 60px !important;
}
.page-trip-invoice .invoice-header .invoice-title
{
    font-size: 12pt;
    font-weight: bold;
    display: inline-block;
    margin-top: 15px;
}
.page-trip-invoice .invoice-header .invoice-number-date
{
    width: 150px;
    text-align: left;
    float: left;
}
.page-trip-invoice .invoice-header .invoice-number-date div
{
    float: left;
    clear: both;
}
.page-trip-invoice .invoice-header .invoice-number-date .title
{
    text-align: left;
    float: right;
    margin-left: 5px;
}
.page-trip-invoice .invoice-header .invoice-number-date .des
{
    text-align: left;
    width: 80px;
    float: left;
}

.page-trip-invoice .table-show-data-trip
{
    width: 100%;
}
.page-trip-invoice .table-show-data-trip .price-unit
{
    color: #8a8a8a;
    font-size: 8pt;
}
.page-trip-invoice .table-show-data-trip thead th
{
    background-color: #f9f9f9 !important;
    color: #444444;
    font-weight: bold;
    padding: 7px;
    border: 1px solid #888888;
    border-radius: 0;
}
.page-trip-invoice .table-show-data-trip tbody tr
{
    border: 0;
}
.page-trip-invoice .table-show-data-trip tbody td
{
    background-color: #ffffff;
    text-align: center;
    padding: 7px;
    border: 1px solid #888888;
}
.page-trip-invoice .table-show-data-trip tbody td:nth-child(2)
{
    text-align: right;
}
.page-trip-invoice .table-show-data-trip tfoot tr
{
    border: 0;
}
.page-trip-invoice .table-show-data-trip tfoot td
{
    background-color: #ffffff;
    color: #444444;
    line-height: 2.5em;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
}
.page-trip-invoice .table-show-data-trip tfoot div
{
    background-color: #f3f3f3 !important;
    width: 100%;
    max-width: 250px;
    float: left;
    clear: both;
    padding: 0 7px;
    margin-bottom: 2px;
}
.page-trip-invoice .table-show-data-trip tfoot div .title
{
    font-weight: bold;
    float: right;
}
.page-trip-invoice .table-show-data-trip tfoot div .price
{
    font-weight: bold;
}

/*
***********************************************************************************************************************/

.page-host .section-form-memorandum .memorandum-des
{
    max-height: 300px;
    text-align: justify;
    line-height: 2em;
    padding: 15px;
    border: 1px solid #dcdcdc;
    overflow-y: auto;
}

.section-form-facility label
{
    width: 200px;
    margin-bottom: 15px;
}
.page-host .section-form .form-star
{
    color: #cdcdcd;
    font-size: 6pt;
    margin-right: 5px;
}
.page-host .section-form input[type="text"], .page-host .section-form select, .page-host .section-form textarea,
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple
{
    height: 42px;
    padding: 3px 20px 0 20px;
    border: 1px solid #d3d3d3 !important;
    border-radius: 25px 25px 25px 0 !important;
    box-shadow: inset 0 0 0 0 transparent !important;
    resize: none;
}
.page-host .section-form textarea
{
    height: 150px;
}
.page-host .section-form .similar-input-text
{
    background-color: #ffffff;
    height: 35px;
    padding: 3px 7px 0 7px;
    border: 1px solid #cdcdcd;
}
.page-host .section-form input[type="text"]:focus, .page-host .section-form select:focus, .page-host .section-form textarea:focus,
span.select2-selection--single[aria-expanded=true], span.select2-selection--multiple[aria-expanded=true]
{
    border: 1px solid #363382 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow
{
    height: 42px;
}

.page-host .section-form-submit
{
    background-color: #f5f5f5;
    width: 100%;
    float: right;
    padding: 10px;
    margin-top: 50px;
}
.page-host .section-form-submit button, .page-host .section-form-submit button:focus
{
    background-color: #363382;
    width: auto;
    font-size: 10pt;
    float: right;
    padding: 10px 25px;
    margin: 0 0 0 10px;
    border: 0;
    border-radius: 25px 0 25px 25px;
    box-shadow: inset 0 0 0 0 transparent !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
.page-host .section-form-submit button:hover
{
    background-color: #d8194c;
}
.page-host .section-form-submit button .icon
{
    margin-left: 10px;
}

/* tab-steps
***********************************************************************************************************************/

.section-form-tabs
{
    width: 100%;
    float: right;
    margin: 0 0 50px 0;
}
.section-form-tabs .section-form-tabs-tab
{
    background-color: #9f9f9f;
    width: 12.5%;
    color: #ffffff;
    font-size: 10pt;
    text-align: right;
    float: right;
    padding: 5px 25px 5px 3px;
    border-left: 1px solid #929292;
    position: relative;
}
.section-form-tabs .section-form-tabs-tab.active
{
    background-color: #00ac33;
    color: #ffcf5c;
    border-left: 1px solid #00ac33;
}
.section-form-tabs .section-form-tabs-tab.done
{
    background-color: #01922c;
    border-left: 1px solid #00ac33;
}
.section-form-tabs .section-form-tabs-tab:last-child
{
    border-left: 0;
}
.section-form-tabs .section-form-tabs-tab .number
{
    color: #b3b3b3;
    font-size: 25pt;
    line-height: 30px;
    border-radius: 100%;
    position: absolute;
    top: 3px;
    right: 3px;
}
.section-form-tabs .section-form-tabs-tab.done .number, .section-form-tabs .section-form-tabs-tab.active .number
{
    color: #00bb37;
}

/* *** */

@media (max-width: 1199px)
{
    .section-form-tabs .section-form-tabs-tab
    {
        font-size: 9pt;
    }
}
@media (max-width: 992px)
{
    .section-form-tabs .section-form-tabs-tab
    {
        width: 25%;
        margin-bottom: 1px;
    }
}
@media (max-width: 500px)
{
    .section-form-tabs .section-form-tabs-tab
    {
        width: 33.33%;
    }
}
@media (max-width: 420px)
{
    .section-form-tabs .section-form-tabs-tab
    {
        width: 50%;
    }
}

/* calendar
***********************************************************************************************************************/

.calendar-date-start-end
{
    width: 100%;
    float: right;
}
.calendar-date-start-end .trip-date-title
{
    font-size: 10pt;
    font-weight: bold;
    float: right;
}
.calendar-date-start-end .btn-delete-date
{
    color: #1f83a4;
    font-size: 8pt;
    float: left;
    cursor: pointer;
}

.calendar-date-start-end .date-start-end-box
{
    width: 100%;
    text-align: center;
    float: right;
    padding: 10px;
    margin: 20px 0 20px 0;
    border: 1px solid #dbdbdb;
    border-radius: 20px;
    cursor: pointer;
}
.calendar-date-start-end .date-start-end-box .date-start-title
{
    float: right;
}
.calendar-date-start-end .date-start-end-box .date-end-title
{
    float: left;
}
.calendar-date-start-end .date-start-end-box .icon
{
    display: inline-block;
}

.calendar-box
{
    width: 100%;
    float: right;
    margin-top: 20px;
    display: none;
}
.calendar
{
    width: 100%;
    float: right;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.calendar .calendar-top-bar
{
    text-align: center;
    padding-bottom: 15px;
}
.calendar .calendar-top-bar .calendar-year-month-title
{
    color: #444444;
    font-weight: bold;
    display: inline-block;
}
.calendar .calendar-top-bar .calendar-btn-prev
{
    color: #888888;
    font-size: 9pt;
    float: right;
    padding: 1px 3px 1px 3px;
    border: 1px solid #dcdcdc;
    border-radius: 7px;
    display: none;
    cursor: pointer;
}
.calendar .calendar-top-bar .calendar-btn-next
{
    color: #888888;
    font-size: 9pt;
    float: left;
    padding: 1px 3px 1px 3px;
    border: 1px solid #dcdcdc;
    border-radius: 7px;
    display: none;
    cursor: pointer;
}

.calendar .calendar-day-title-bar
{
    width: 100%;
    float: right;
}
.calendar .calendar-day-title-bar .calendar-day-title
{
    width: 14.28%;
    color: #888888;
    font-size: 9pt;
    float: right;
    padding-bottom: 5px;
    text-align: center;
}
.calendar .calendar-days-bar
{
    width: 100%;
    float: right;
}
.calendar .calendar-days-bar .calendar-days-day
{
    background-color: #f5f4fa;
    width: 14.28%;
    color: #444444;
    text-align: center;
    float: right;
    padding: 3px 0 0 0;
    border: 1px solid #ffffff;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
.calendar .calendar-days-bar .calendar-days-day:hover
{
    background-color: #e9e6f4;
}
.calendar .calendar-days-bar .calendar-days-day.day-null
{
    background-color: transparent;
    cursor: default;
}
.calendar .calendar-days-bar .calendar-days-day.day-inactive, .calendar .calendar-days-bar .calendar-days-day.day-inactive2
{
    background: repeating-linear-gradient(-45deg, transparent, transparent 8px, #eeeeee 0, #eeeeee 10px);
    cursor: default;
    color: #bbbbbb;
}
.calendar .calendar-days-bar .calendar-days-day.day-selected, .calendar .calendar-days-bar .calendar-days-day.day-selection
{
    background-color: #bfb9e1 !important;
}
.calendar .calendar-days-bar .calendar-days-day.holiday
{
    color: #d8194c;
}
.calendar .calendar-days-bar .calendar-days-day .day-number
{
    font-weight: bold;
    font-size: 10pt;
}

/*
***********************************************************************************************************************/

.map-marker-center
{
    background: url("../../img/map-marker.png") no-repeat;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -32px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
}

/*
***********************************************************************************************************************/

.container
{
    padding-left: 10px;
    padding-right: 10px;
}
.row
{
    margin-left: -10px;
    margin-right: -10px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9
{
    padding-left: 10px;
    padding-right: 10px;
}

/*
***********************************************************************************************************************/