.container-homepage {
   /*  background-color: rgba(0, 0, 0, .3); */
   /*  background-color: rgb(215 213 206); */
   /* background-color: rgba(171, 167, 161, .8); */
   background-color: rgb(215 213 206);
}
.div-articles {
 
    /* padding-bottom: 50px; */
     
}
.div-article {
    padding: 10px;
    padding-top: 50px;
    text-align: center;
   
}
.div-article2 {
    padding: 10px;
    text-align: center;
   
}
.div-article-berhit{
    padding: 10px;
    padding-top: 0px;
    text-align: center;
}  

img.img-favicon {
    border-radius: 5px;
    margin: 10px;
    box-shadow: 0px 0px 10px 0px #dab44e;
}


.div-article-item-link {
    color:#7f6a34;/*  #c9c6bf; */
    /* background-color: rgb(123 113 100 / 80%); */
    padding: 5px;
    border-radius: 5px;
    margin: 10px;
    background-color: rgb(209 202 189 / 90%);
    box-shadow: 0px 0px 10px 0px #e8e4dd;
    
}
.div-article-item-link>a{
    text-decoration: none;
    color:#7f6a34;
}
.div-article-item-link>a:hover{
    color: #ffffff;
}
 
.div-article-item-link:hover{
    color: #ffffff;
    background-color: rgba(157, 109, 12, 0.5);
    padding: 5px;
    border-radius: 5px;
    margin: 5px;
}
 

.div-article-title {
    color: #000000; /* #fff2d2; */
    padding: 20px;
    font-family: pattaya;
    font-size: 1.2rem;

    background: url(../images/article/menu.png) center;
    background-size: contain;
    background-repeat: no-repeat;
}
.div-article-title-bermongkol {
    color: #000000; /* #fff2d2; */
    padding: 20px;
    font-family: pattaya;
    font-size: 1.2rem;

    background: url(../images/article/menu.png) center;
    background-size: contain;
    background-repeat: no-repeat;
}


.div-contactus {
    display: flex;
    /* text-align: center; */
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.padding-bottom-menu{
    margin-bottom: 100px;

}

.div-berhits {
    display: flex;
    /* text-align: center; */
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.div-berhit{
    margin: 10px;
    box-shadow: 0px 0px 10px 0px #493632;
    border-radius: 10px;
    width: 350px;
    background-color: #FF5722;
}
.div-berdragon{
    background-image: url(../images/article/dragon-menu.jpg);
    height: 150px;
    background-position-x: right;
    background-position-y: top;
    border-radius: 10px;
    opacity: 0.8;
    padding: 20px;
}
.div-berdragon-row1 ,.div-berdragon-row1>a  {
    color: #ffc62b;
    font-family: pattaya;
    text-align: left;
    font-size: 28pt;
    text-decoration: none;
}

.div-berdragon-row2 {
    color: #ffffff;
    text-align: left;
}

.div-berphoenix{
    background-image: url(../images/article/phoenix-menu.jpg);
    height: 150px;
    background-position-x: left;
    background-position-y: top;
    border-radius: 10px;
    opacity: 0.8;
    padding: 20px;
}
.div-berphoenix-row1 {
    color: #ffc62b;
    font-family: pattaya;
    text-align: right;
    font-size: 28pt;
}
.div-berphoenix-row2 {
    color: #ffffff;
    text-align: right;
}





.divMoredetail {
    float: right;
}
.moredetail{
    background: linear-gradient(180deg, rgb(193 189 178) -10.74%, #faf3e5 20.74%, #fffaed 50.25%, rgb(213 208 195) 80.49%, #c4bca8 99%);
}    

.article-container {
    background-color: rgba(255, 255, 255, 1);
    margin: 5px;
    max-width: 500px;
}
.carousel-item.active {
    display: flex;
    justify-content: center;
   
}

.margin-bottom{
    margin-bottom: 20px;
}

.margin-bottom-berhit{
    margin-bottom: 10px;
}

.bermongkol-type-topic {
    background: rgba(249, 228, 169, .3);
    padding: 5px;
    border-radius: 10px;
    /* margin: 5px; */
}
.bermngkol-100{

}

/************************************/
/* page เข็คเบอร์มงคล*/
/************************************/
.div-check-bermongkol{
    padding-top: 50px;
    background: rgb(243 236 216);
}

/************************************/
/* page เบอร์มงคลตามวันเกิด     */
/************************************/
.div-img-taksa {
    margin: 5px;
    
   /*  border-radius: 25px; */
}
img.img-taksa {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
    border-radius: 30px;
}
.divPra-title1 {
    font-size: 18pt;
    font-weight: bold;
    padding-top: 20px;
}
.divPra-title2 {
    font-weight: bold;
    font-size: 14pt;
    padding-top: 15px;
}

/************************************/
/* page เบอร์มงคล*/
/************************************/
.divDisplayTypeAdvice {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}
.bermongkol-group-container {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.bermongkol-group {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    background: aliceblue;
    margin: 5px;
    border-radius: 10px;
    width: 150px;
}
.bermongkol-group-name {
    font-size: 10pt;
}
.img-menu-icon{
    border-radius: 10px;
    min-width: 50px;
}
img.img-menu-icon2 {
    width: 75px;
}

.div-bermongkol-container {
    display: flex;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 10px;
    padding: 30px;
}
.div-bermongkol-container2 {
    display: flex;
    background-color: rgb(214 208 190);
    border-radius: 10px;
    padding: 30px;
}

.div-icon-title {
    font-size: 18pt;
    font-weight: bold;
}
.div-icon-msg {
    padding-left: 10px;
}
.goodnumber-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.goodnumber {
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #83d151;
    border-radius: 100%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 10pt;
    margin: 2px;
}
.warningnumber{
    
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #cd9e18;
    border-radius: 100%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 10pt;
    margin: 2px;
    color:#ffffff;
}
.prohibitionnumber{
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #7a1c07;
    border-radius: 100%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 10pt;
    margin: 2px; 
    color:#ffffff;
}
.good-and-prohibition-number-container {
    padding-top: 20px;
}
span.span-good-and-prohibition-number-text {
    font-weight: bold;
}
.div-number-position{
    background-color: #f3ecd8;
    text-align: center;
    border-radius: 10px;
    margin-top: 10px;
}
.img-numberposition{
    border-radius: 10px;
}
.img-numberposition2{
    border-radius: 10px;
    
}
.img-numberposition3{
    border-radius: 10px;
    padding: 0px;
    margin: 0px;
    padding-bottom: 50px;
     
    
}
.div-img-numberposition2{
    border-radius: 10px;
    text-align: center;
}
.div-selBermongkolSum {
    padding: 30px;
    background: linear-gradient(270deg, rgba(125, 94, 7, 1) -10.74%, #ddb444 20.74%, #fae5ac 50.25%, rgba(125, 94, 7, 1) 80.49%, #e5c15d 99%);
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #c3bc99;
}
.div-selBermongkolSum-container{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
select#selBermongkolSum {
    min-width: 300px;
   
}
 
option.option-bermongkol-title{
    font-weight: bold;
    color: rgb(125 94 7);
    text-align: center;
    
}

.div-sum {
    display: flex;
    background: rgb(218 214 203);
    padding: 20px;
    padding-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    flex-wrap: wrap;
    flex-direction: row;
}
.div-sum-number {
    height: 50px;
    max-width: 75px;
    padding: 20px;
    margin-bottom: 10px;
   /*  background: linear-gradient(270deg, rgba(125, 94, 7, 1) -10.74%, #ddb444 20.74%, #fae5ac 50.25%, rgba(125, 94, 7, 1) 80.49%, #e5c15d 99%);
    */
    background:rgb(218 214 203);
    border-radius: 5px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-weight: bold;

}
.div-sum-number-searchresult{
    height: 50px;
    max-width: 75px;
    padding: 20px;
    margin-bottom: 10px;
    background: linear-gradient(270deg, rgba(125, 94, 7, 1) -10.74%, #ddb444 20.74%, #fae5ac 50.25%, rgba(125, 94, 7, 1) 80.49%, #e5c15d 99%);
    border-radius: 5px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-weight: bold;
}

.div-sum-meaning {
    margin-left: 10px;
}
.div-sum-meaning-title {
    font-weight: bold;
    font-size: 14pt;
}
.div-resultSearchBermongkolSums {
    overflow: auto;
    height: 350px;
    overflow-y: scroll;
    scrollbar-color: #dad6cb #eeeeee;
    padding: 10px;
}
.div-resultSearchBermongkolSum {
    background: rgba(255, 255, 255, .3);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 50px;
}
.div-resultSearchBermongkolSum-item {
    display: flex;
    flex-wrap: wrap;
  
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
}
.div-resultSearchBermongkolSum-item:nth-child(odd) {
    display: flex;
    flex-wrap: wrap;
    background: rgb(229 227 224);
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;

}
.sum-provider {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    
}
.sum-telnumber {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.sum-telsum {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.sum-price {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.search-sum-result-header {
    /* color: rgb(0, 0, 0); */
    /* float: right; */
    /* font-size: 25px; */
    /* font-weight: bold; */
    /* padding-right: 10px; */
    cursor: pointer;
    /* margin-top: 1px; */
    position: relative;
    top: 10px;
    width: 100%;
    right: -10px;
}
.search-sum-result-modal-close {
    color: rgb(0, 0, 0);
    float: right;
    font-size: 25px;
    font-weight: bold;
    padding-right: 10px;
    cursor: pointer;
    margin-top: 1px;
    position: relative;
    /* top: -25px; */
}
.div-sum-header {
    display: flex;
}
div#divTelsum-Count {
    padding: 10px;
}
.padding-sum-count{
    padding: 10px;
}
.div-sum-info {
    display: flex;
    padding: 10px;
 
    background: rgb(238 238 238);
    margin-bottom: 10px;
}

/*เบอร์มงคลผลรวม*/
.div-sum-info-group {
    background-color: rgb(214 208 190);
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.div-sum-info-group-title {
    color: #6f6234;
    font-weight: bold;
}

/*เบอร์มงคลตามวันเกิด*/
.berbirthday {
    background-color: rgb(227 219 223);
}
.div-taksas {
/*     background: rgba(224, 204, 214, .5);
    border-radius: 10px;
    padding: 10px;
    margin: 10px; 
    box-shadow: 0 0 10px 1px #fffef9;*/
}
.div-taksa-item{
    padding: 10px;
    border-radius: 10px;
    /* background-color: #f2eded; */
    margin: 5px;
     
}
.div-taksa {

 
}
.div-taksa-name {
    text-align: center;
    background: rgba(185, 137, 161, .3);
    font-weight: bold;
    font-size: 1.1rem;
}
.div-taksa-detail {
    font-size: 1rem;
    padding: 10px;
    background: rgb(225 213 213 / 30%);
  
}
.div-taksa-content {
    margin: 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, .3);
    border-radius: 10px;
}
 
.taksa-name {
    font-size: 1rem;
}
.taksa-number{
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #83d151;
    border-radius: 100%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 10pt;
    margin: 2px;
}
.taksa-number-red{
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #7a1c07;
    color:#ffffff;
    border-radius: 100%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 10pt;
    margin: 2px;
}
.div-taksa-contents {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
.div-h3 {
    border-top: #7d5e07;
    border-bottom: #7d5e07;
    border-style: solid;
    border-left: none;
    border-right: none;
    border-width: 3px;
    display: inline-block;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    margin-bottom: 10px;
    background: rgb(217 214 214 / 30%);
    box-shadow: rgb(191 182 186) 0px 4px 12px;
}

.search-data-result-modal-close {
    float: right;
    display: block;
    position: relative;
  

    color: rgb(0, 0, 0);
    font-size: 25px;
    font-weight: bold;
    padding-right: 10px;
    cursor: pointer;
    margin-top: 1px;
    position: relative;
}
.search-data-result {
    background: rgb(238 238 238);
    padding: 20px;
    border-radius: 10px;
}
 
.div-resultsearch-birthday {
    overflow: auto;
    height: 350px;
    overflow-y: scroll;
    scrollbar-color: #dad6cb #eeeeee;
    padding: 10px;
}
.div-resultsearch-birthday2 {
    overflow: auto;
/*     height: 350px;
    overflow-y: scroll; */
    scrollbar-color: #dad6cb #eeeeee;
    padding: 10px;
}
.top-minus-20{
    top: -20px;
}
.wednesday-time {
    font-style: italic;
    font-size: 10pt;
}
.div-number2 {
    text-align: center;
}
.wording-center {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.prohibitionText {
    font-size: 10pt;
    font-style: italic;
    color:#7a1c07;
}

div#adviceResultTableView {
    overflow: auto;
    max-height: 350px;
    overflow-y: scroll;
    scrollbar-color: #b4cad4 #dad8d0;
    padding: 10px;
    top: -40px;
    position: relative;
}
.add-to-cart-panel2 {
    padding: .5rem;
 
}
.bermongkol100percent {
    color: rgb(125 94 33);
    font-size: 24pt;
    font-weight: bold;
}

/* .btn-refresh-page {
    background: linear-gradient(180deg, rgb(193 189 178) -10.74%, #faf3e5 20.74%, #fffaed 50.25%, rgb(213 208 195) 80.49%, #c4bca8 99%);
    height: 40px;
}
 */

 
/************************************/
/*          Article Catalog         */
/***********************************/
.img-wrapper{
    max-width: 100%;
    height: 65vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;

}
img{
    max-width: 100%;
    max-height: 100%;
}
@media (min-width: 768px) {
    .carousel-inner {
      display: flex;
    }
    .carousel-item {
      margin-right: 0;
      flex: 0 0 calc(100%/3);
      display: block;
    }
    .img-wrapper{
        max-width: 100%;
        height: 23vw;
    }
}
.carousel-inner {
    display: 1em;
}
.card{
    margin: 0 .5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
}
/*page "เบอร์มงคล" */
.card-background-bermongkol-page{
    background-color: #d7d5ce;
    box-shadow: 0px 0px 0px 0 rgba(22, 22, 26, 0.18);
}

/*overrides*/
.card-title {
    font-size: 1.5rem;
}
.card-body {
    font-size: 1.0rem;
}


.carousel-control-prev, .carousel-control-next{
    background-color: #e1e1e1;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.howtoorder{
    padding-top: 50px;
    background-color: rgb(55 54 52);
}
/* .card .img-wrapper {
    max-width: 100%;
    height: 13em;
    display: flex;
  justify-content: center;
    align-items: center;  
  } */
img{
    max-height: 100%;
}


/************************************/
/* page เบอร์มังกร789*/
/************************************/
.article-dragon{
   /* background: url(http://localhost/BermongkolLite/public_html/images/article/dragon.png); */
}


/************************************/
/* page เบอร์มงคล ais*/
/************************************/
.bg-checkber{
    background: rgb(222 217 203);
    border-radius: 10px;
    padding: 10px;
   
    text-align: center;
}
.header-provider{
/*     display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    background: rgba(255, 255, 255, .5);
    padding: 10px;
    width: 350px;
    margin: auto;
    border-radius: 10px; */
}
.divImgLogo {
    display: block;
    position: relative;
   /*  background: rgba(255, 255, 255, .5); */
    text-align: center;

    border-radius: 5px;
    top: 0px;
   /*  left: 1rem; */
    
}
.divImgLogo-container{
    padding-top: 30px;
}

/************************************/
/* สารบัญ */
/************************************/
.page{
    margin-bottom: 5px;
}
.pages {
    padding: 20px;
}
.indent-10{
    padding-left: 10px;
}
.indent-15{
    padding-left: 15px;
}
.indent-20{
    padding-left: 20px;
}