body {
    font-family: "ThaiSans Neue";
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 20px;    
}

body {
    padding-top: 0px;
}

footer {
    display:none;
}

.top-menu {
    /*background-image: linear-gradient(red,white);
    border-bottom: 1px solid #808080;
    border-radius: 30px 30px;*/
}

    .top-menu .bg-body-tertiary {
        background-image: linear-gradient(rgb(159 156 148 / 0.10),rgb(159 156 148 / 0.70));
        border-radius: 3px 3px;
    }

.navbar-nav li {
    padding: 2px;
    border-radius: 5px;
    transition: 0.5s;
}

.navbar-nav li a{
    font-weight:bold;
}

    .navbar-nav li:hover {
        background-image: linear-gradient(rgb(159 156 148 / 0.10),rgb(159 156 148 / 0.70));
        /*transition: 0.5s;*/
        /*border-radius: 3px 25px;*/
    }

.control-label {
    color: white;
    border-radius: 5px;
    padding-top: 4px;
}

.form-horizontal .control-label {
    padding-top: 4px;
}

.form-control {
    font-size: 20px;
}

    .form-control:focus {
        border-color: #FD9680;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
    }

.panel-body {
    padding-left: 35px;
}

.panel-primary > .panel-heading {
    border-color: #FF9F87;
    color: #634235;
    font-weight: bold;
}

.btn-primary:active, .btn-primary:hover {
    border-color: #FFA791;
    color: #634235;
    font-weight: bold;
    background-image: linear-gradient(to right, #FFDFD1, #FFDFD1);
}

.label-default {
    color: #634235;
}

.control-label {
    color: white;
    border-radius: 5px;
    padding-top: 4px;
}

.form-horizontal .control-label {
    padding-top: 4px;
}

.form-control {
    font-size: 20px;
}

.panel-body {
    padding-left: 35px;
}

.form-control:focus {
    border-color: #FD9680;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
}

.btn-primary {
    border-color: #FFDFD1;
    color: #634235;
    font-weight: bold;
    background-image: linear-gradient(to right, #FFA791, #FFA791);
}

    .btn-primary:active, .btn-primary:hover {
        border-color: #FFA791;
        color: #634235;
        font-weight: bold;
        background-image: linear-gradient(to right, #FFDFD1, #FFDFD1);
    }

.panel-primary > .panel-heading {
    border-color: #FF9F87;
}

.label-default {
    color: #634235;
}

.control-label {
    color: #634235;
}

.form-horizontal .control-label {
    padding-top: 4px;
}

.form-control {
    font-size: 20px;
    padding: 3px 12px;
}

.panel-body {
    padding-left: 35px;
}

.form-control:focus {
    border-color: #FD9680;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
}

.panel-primary > .panel-heading {
    border-color: #FF9F87;
}

.btn-primary {
    border-color: #FFDFD1;
    color: #634235;
    font-weight: bold;
    background-image: linear-gradient(to right, #FFA791, #FFA791);
}

    .btn-primary:active, .btn-primary:hover {
        border-color: #FFA791;
        color: #634235;
        font-weight: bold;
        background-image: linear-gradient(to right, #FFDFD1, #FFDFD1);
    }

.btn-primary {
    border-color: #FFDFD1;
    color: #634235;
    font-weight: bold;
    background-image: linear-gradient(to right, #FFA791, #FFA791);
}

    .btn-primary:active, .btn-primary:hover {
        border-color: #FFA791;
        color: #634235;
        font-weight: bold;
        background-image: linear-gradient(to right, #FFDFD1, #FFDFD1);
    }

.panel-info > .panel-heading {
    border-color: #FFA791;
}

.form-control:focus {
    border-color: #FD9680;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
}

.montana-bg-color {
    background-attachment: fixed;
    /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
    /*background-image: linear-gradient(red, yellow, blue);*/
    /*background-size: 100% 100%;*/
    /*background-image: linear-gradient(to bottom, #FFA791, #FFDFD1);*/

    background-image: url("images/presenter-d.png"),url("images/final_s1-d.png"),url("images/nabo_says_hi.png"),radial-gradient(closest-side at 50% -80%,red 100%,black 200%);
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-size: 290px,320px,200px,150%;
    background-position-x: 0px,right,280px,center;
    background-position-y: calc(100% + 5px),bottom,calc(100% - 80px),100px;
    /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
}

.control-label {
    color: #634235;
}

.form-horizontal .control-label {
    padding-top: 4px;
}

.form-control {
    font-size: 20px;
    padding: 3px 12px;
}

.panel-body {
    padding-left: 35px;
}

.form-control:focus {
    border-color: #FD9680;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
}

.panel-primary > .panel-heading {
    border-color: #FF9F87;
}

.btn-primary {
    border-color: #FFDFD1;
    color: #634235;
    font-weight: bold;
    background-image: linear-gradient(to right, #FFA791, #FFA791);
}

    .btn-primary:active, .btn-primary:hover {
        border-color: #FFA791;
        color: #634235;
        font-weight: bold;
        background-image: linear-gradient(to right, #FFDFD1, #FFDFD1);
    }

h5, .h5 {
    font-size: 22px;
}

.panel-heading {
    padding: 6px 12px;
}

.form-control {
    font-size: 20px;
}

.panel-primary > .panel-heading {
    border-color: #FFA791;
}

.form-control:focus {
    border-color: #FD9680;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(253 150 128 / 60%);
}

.btn-primary {
    border-color: #FFDFD1;
    background-image: linear-gradient(to right, #FFA791, #FFA791);
}

    .btn-primary:active, .btn-primary:hover {
        border-color: #FFA791;
        background-image: linear-gradient(to right, #FFDFD1, #FFDFD1);
    }

.presenter-left {
    /*border: 0px dotted white;
    padding:0;
    width: 50%;
    height: 700px;
    background-image: url("images/presenter-d.png");
    float:left;
    background-repeat: no-repeat;
    background-size: 550px;
    background-position-x: -160px;
    background-position-y: -50px;*/
}

.presenter-right {
    /*border: 0px solid white;
    width: 50%;
    height: 700px;
    background-image: url("images/final_s1-d.png");
    float: right;
    background-repeat: no-repeat;
    background-size: 500px;
    background-position-x: right;    
    background-position-y: -10px;*/
    /*margin-right: 0px;*/
/*    position: absolute;
    right: 0;*/
}

.product-logo {
    /*border: 0px solid white;
    width: 100%;
    height: 700px;
    background-image: url("images/nabo_says_hi.png");
    background-repeat: no-repeat;
    background-size: 300px;
    background-position-x: 350px;
    background-position-y: 170px;*/
}

.text-detail-bottom {
    list-style-type: none;
    padding:0;
}

.text-detail-bottom li {
    display: inline-block;
    font-size: 20px;
}

.text-detail-bottom li span {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}

.text-top-search {
    letter-spacing: 1px;
}

#TextSearch,#SearchInput {
    /*font-size: 18px;*/
    max-width: 900px;
}

#TextSearch {
    border-radius: 20px 0 0 20px;
    font-size: 26px;
    border-right: 0px;
}

#basic-addon1 {
    border-radius: 0 20px 20px 0;
    background-color: white;
    border-left: 0px;
}


.li-20 {
    width: 20%;
    display: inline-block;
    vertical-align: top;
}

.li-30 {
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

.li-40 {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.title-bar {
    border: 0px solid #000;
    /*background-color: deepskyblue;*/
    /*background-image: linear-gradient(to right, #FFA791, #FFDFD1);*/
    /*background-image: linear-gradient(deepskyblue, white, deepskyblue);*/
    padding: 5px 10px;
    color: aliceblue;
    border-radius: 5px;
    box-shadow: 3px 3px 5px grey;
}

.btn {
    font-size: 20px;
    padding: 2px 6px;
}

ul {
    margin: 0;
}

/*.panel-body ul:hover {
    background-color: #eee;
}*/

.panel-danger > .panel-heading {
    color: #fff;
    /*background-image: linear-gradient(to right, #FFA791, #FFDFD1);
    border-color: #FF9F87;*/
    text-shadow: 0px 0px #000;
    font-size: 28px;
}

.form-control:focus {
    border-color: white;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(255 255 255 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(255 255 255 / 60%);
}

mark, .mark {
    background-color: #ff0;
    color: red;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 350px;
}

@font-face {
    font-family: "ThaiSans Neue";
    src: url("fonts/ThaiSansNeue-Light.ttf");
    src: url("fonts/ThaiSansNeue-Light.ttf") format("truetype");
}

.thaisans-neue {
    font-family: "ThaiSans Neue";
    font-style: normal;
    font-weight: normal;
}

.cosmamedical-logo-backend {
    margin-top: 0px;
    width: 100%;
    padding: 50px 0 50px 0;
    /*height: 122px;*/
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('images/logo_montana_marketing.png');
    background-size: auto 80px;
}

.cosmamedical-logo {
    margin-top: 0px;
    width: 100%;
    padding: 10px 0 10px 0;
    /*height: 122px;*/
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('images/logo_montana_marketing.png');
    background-size: auto 80px;
}

.link-home {
    height: 80px;
    width: 240px;
    cursor: pointer;
}

.input-search {
    border: 0;
    /*max-width: 40% !important;*/
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    font-size: 22px;
    letter-spacing: 1px;
}

.button-search {
    border: 0;
    width: auto;
    background-color: white;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;    
}

.nabo-logo {
    width: 51px;
    height: 33px;
    background-image: url('images/nabo_logo_h33_2021.png');
}

.btn {
    font-size: 20px;
    padding: 3px 12px;
}

.navbar-brand {
    font-size: 22px;
}

.title-bar {
    border: 0px solid #000;
    background-color: saddlebrown;
    color: white;
    padding: 5px 10px;
    color: aliceblue;
    border-radius: 5px;
}

.btn-search {
    color: #fff;
    background-color: #FFA993;
    border-color: #FFBFAC;
}

    .btn-search:hover {
        color: #fff;
        background-color: #FF967F;
        border-color: #FFA993;
    }

.btn-search-center {
    margin: auto;
    width: 50%;
    /*border: 1px solid white;*/
    padding: 10px;
}

.bottomspace {
    padding-bottom: 75px;
}

.style_box_head {
    display: block;
    background-color: #FFA791;
    width: 100%;
    border-top: 1px solid #ddd;
    border-radius: 10px;
    padding: 8px;
    margin-top: 3px;
    margin-bottom: 8px;
}

.style_box1, .style_box2 {
    background-color: white;
}

.style_box1:hover, .style_box2:hover {
    background-color: #eee;
    transition: 0.2s;
}

.style_box1, .style_box2 {
    display: block;
    width: 100%;
    border-radius: 15px;
    margin-bottom: 7px;
    border-top: 1px solid #ddd;
    padding: 8px;
}

/*.style_box1 {
    display: block;
    width: 100%;
    background-color: white;
    border-top: 1px solid #ddd;
    padding: 8px;
}

.style_box2 {
    display: block;
    width: 100%;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
    padding: 8px;
}*/

.clinic_name {
    width: 30%;
    vertical-align: top;
}

.clinic_branch {
    width: 20%;
    vertical-align: top;
}

.clinic_contact {
    width: 40%;
    vertical-align: top;
}

.style_box1 li, .style_box2 li {
    display: inline-block;
}

.style_box1 li span, .style_box2 li span {
    word-wrap:break-word;
}

.style_box1 li.head_mobile, .style_box2 li.head_mobile {
    display: none;
}

.bg_color_main {
    background-image: linear-gradient(to right, #FFA791, #FFDFD1);
}

.bg_label_color_main {
    background-image: linear-gradient(to right, #FFA791, #FFA791);
}

.border_color_main {
    border-color: #FFA791;    
}

.font_color_main {
    color: #634235;
}

.font_bold{
    font-weight:bold;
}

.title_top {
    justify-content: center;
    display: flex;
    padding: 0;
}

    .title_top > li {
        display: inline-block;
        float: left;
    }

/*@media (max-height: 550px) {

    .montana-bg-color {
        background-attachment: fixed;*/
        /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
        /*background-image: linear-gradient(red, yellow, blue);*/
        /*background-size: 100% 100%;*/
        /*background-image: linear-gradient(to bottom, #FFA791, #FFDFD1);*/

        /*background-image: url("images/presenter-d.png"),url("images/nabo_says_hi.png"),radial-gradient(closest-side at 50% -80%,red 100%,black 200%);
        background-repeat: no-repeat,no-repeat;
        background-size: 320px,150px,150% 1000px;
        background-position-x: -10px,180px;
        background-position-y: calc(100% - 5px),calc(100% - 130px),30px;*/
        /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
    /*}
}*/

/*@media (max-height: 750px) {

    .montana-bg-color {
        background-attachment: fixed;*/
        /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
        /*background-image: linear-gradient(red, yellow, blue);*/
        /*background-size: 100% 100%;*/
        /*background-image: linear-gradient(to bottom, #FFA791, #FFDFD1);*/

        /*background-image: url("images/presenter-d.png"),url("images/nabo_says_hi.png"),radial-gradient(closest-side at 50% -80%,red 100%,black 200%);
        background-repeat: no-repeat,no-repeat;
        background-size: 320px,150px,150% 1000px;
        background-position-x: -10px,180px;
        background-position-y: calc(100% - 5px),calc(100% - 130px),30px;*/
        /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
    /*}
}*/

@media (max-width: 600px) {
    .cosmamedical-logo {
        margin-top: 0px;
        width: 100%;
        padding: 70px 0 70px 0;
        height: 122px;
        background-color: white;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('images/logo_montana_marketing.png');
        background-size: auto 80px;
    }

    .montana-bg-color {
        background-attachment: fixed;
        /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
        /*background-image: linear-gradient(red, yellow, blue);*/
        /*background-size: 100% 100%;*/
        /*background-image: linear-gradient(to bottom, #FFA791, #FFDFD1);*/

        background-image: url("images/presenter-d.png"),url("images/nabo_says_hi.png"),radial-gradient(closest-side at 50% -80%,red 100%,black 200%);
        background-repeat: no-repeat,no-repeat;
        background-size: 220px,150px,150%;
        background-position-x: -10px,180px,center;
        background-position-y: calc(100% - 5px),calc(100% - 130px),150px;
        /*background-image: radial-gradient(closest-side at 50% -80%,red 100%,black 200%);*/
    }

    .btn-search-center {
        margin: auto;
        width: 90%;
        /*border: 1px solid white;*/
        padding: 10px;
    }

    .bottomspace {
        padding-bottom: 25px;
    }

    .style_box_head {
        display: none;
    }

    .style_box1, .style_box2 {
        padding: 4px;
    }

        .style_box1 li, .style_box2 li {
            display: block;
            margin: 5px;
        }

    .clinic_name, .clinic_branch, .clinic_contact {
        width: 90%;
    }

    .style_box1 li.head_mobile, .style_box2 li.head_mobile {
        display: block;
        width: 90%;
        color: #FF0066;
    }

    #detail > .title_top {
        justify-content: center;
        display: inherit;
        padding: 0;
    }

        #detail > .title_top > li {
            display: inline-block;
            float: inherit;
        }
}