@import url('https://fonts.googleapis.com/css?family=Prompt');

html,body{font-family:"Prompt";font-size:0.93rem;line-height:1.5rem;}html{overflow-x:hidden}
h1{font-size:2.25rem;}
h2{font-size:1.875rem;}
h3{font-size:1.5rem;}
h4{font-size:1.25rem;}
h5{font-size:1.125rem;}
h6{font-size:1rem;}
a{font-family: 'Prompt';text-decoration:none!important;}
h1, h2, h3, h4, h5, h6{font-family:"Prompt";font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
a, p, span, button {font-family: "Prompt";font-size:0.93rem;line-height:1.5rem; text-decoration:none!important}
.w3-serif{font-family:"Prompt"}.w3-sans-serif{font-family:"Prompt"}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}

@media only screen and (min-width: 769px) and (max-width: 1281px) { 
  html,body{font-family:"Prompt";font-size:0.8rem;line-height:1.4rem;}html{overflow-x:hidden}
  .w3-serif{font-family:"Prompt"}.w3-sans-serif{font-family:"Prompt"}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
  h1,h2,h3,h4,h5,h6{font-family:"Prompt";font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
  h1 {font-family:"Prompt"; font-size: 2.2rem!important}
  h2 {font-family:"Prompt"; font-size: 1.8rem!important}
  h3 {font-family:"Prompt"; font-size: 1.4rem!important}
  h4 {font-family:"Prompt"; font-size: 1.3rem!important}
  h5 {font-family:"Prompt"; font-size: 1.2rem!important}
  h6 {font-family:"Prompt"; font-size: 1.1rem!important}
  a, p, span {font-family: "Prompt";font-size:0.9rem!important;line-height:1.4rem; text-decoration:none!important}
  div a {font-family: "Prompt";font-size:0.9rem!important;line-height:1.4rem; text-decoration:none!important}
  div p {font-family: "Prompt";font-size:0.9rem!important;line-height:1.4rem; text-decoration:none!important}
  div button {font-family: "Prompt";font-size:0.9rem!important;line-height:1.4rem; text-decoration:none!important}
  button {font-family: "Prompt";font-size:0.9rem!important;line-height:1.4rem; text-decoration:none!important}
  span {font-family: "Prompt";font-size:0.9rem!important;line-height:1.4rem; text-decoration:none!important}
  div td,tr {font-size: 0.9rem!important}
  label {font-family:"Prompt"; font-size: 1rem!important}
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
div a {font-size: .7rem!important; line-height:1rem!important; text-decoration:none!important}
div p {font-size: .7rem!important; line-height:1rem!important; text-decoration:none!important}
div button {font-size: .7rem!important; text-decoration:none!important}
span {font-size: .7rem!important; line-height:1rem!important; text-decoration:none!important}
h1 {font-family:"Prompt"; font-size: 1.6rem!important}
h2 {font-family:"Prompt"; font-size: 1.3rem!important}
h3 {font-family:"Prompt"; font-size: 1.2rem!important}
h4 {font-family:"Prompt"; font-size: 1rem!important}
h5 {font-family:"Prompt"; font-size: .8rem!important}
h6 {font-family:"Prompt"; font-size: .7rem!important}
div td,tr {font-size: .7rem!important}
label {font-family:"Prompt"; font-size: 1rem!important}
}

input, textarea, select, option { font-family: "Prompt"; }
label { 
  font-family: "Prompt"; font-size: 1.2rem;
  line-height: 2rem;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.small_text{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.small_table{
margin-left: -26px;
}
}


.bodycover {
  /* background: url('https://images.pexels.com/photos/19572608/pexels-photo-19572608/free-photo-of-scenic-view-of-a-forest-and-mountains-in-the-distance.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')top center repeat; */
  background-image: url('../images/bg.png');
  background-color: rgba(255, 255, 255, 0.468);
  background-blend-mode: overlay;
  height: 100vh;
  -webkit-backgound-size: cover;
  -o-backgound-size: cover;
  -moz-backgound-size: cover;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* background-position: center center; */
  /* text-align: center; */
  overflow: auto;  
  /* background-size: cover;
  background-attachment:fixed;  
  background-repeat:no-repeat;  */
}

@media only screen and (min-width: 320px) and (max-width: 1281px) { 
  .bodycover {
  background-image: url('../images/bg.png')no-repeat center center fixed;
  height: 100vh;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* background-position: center center; */
    /* text-align: center; */
    overflow: auto;  

    
  }

}

/* start flexrow */

.flexrow {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.flexrow.row-5-el > .element  {
  flex: 0 0 calc(100%/5  - 16px);
  max-width: calc(100%/5  - 16px);
}

.flexrow.row-7-el > .element  {
  flex: 0 0 calc(100%/8  - 16px);
  max-width: calc(100%/8  - 16px);
}

.element {
margin: 8px;
text-align: center;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .flexrow {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    
  }
  .flexrow.row-5-el > .element  {
    flex: 0 0 calc(100%/3  - 16px);
    max-width: calc(100%/3  - 16px);
  }
  
  .flexrow.row-7-el > .element  {
    flex: 0 0 calc(100%/3  - 16px);
    max-width: calc(100%/3  - 16px);
  }
  
  .element {
  margin: 8px;
  text-align: center;
  }
}
/* For small screens (phones) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .flexrow {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  .flexrow.row-5-el > .element {
    flex: 0 0 calc(100%/3 - 16px);
    max-width: calc(100%/3 - 16px);
  }
  .flexrow.row-7-el > .element {
    flex: 0 0 calc(100%/3 - 16px);
    max-width: calc(100%/3 - 16px);
  }
  .element {
    margin: 8px;
    text-align: center;
  }
}

/* For medium screens (tablets / iPads) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .flexrow {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  .flexrow.row-5-el > .element {
    flex: 0 0 calc(100%/4 - 16px); /* Adjust to fit 4 elements in a row */
    max-width: calc(100%/4 - 16px); /* Ensure proper width for 4 elements */
  }
  .flexrow.row-7-el > .element {
    flex: 0 0 calc(100%/4 - 16px); /* Adjust to fit 4 elements in a row */
    max-width: calc(100%/4 - 16px); /* Ensure proper width for 4 elements */
  }
  .element {
    margin: 8px;
    text-align: center;
  }
}

/* end flexrow */





.bgcover{
background: url("../images/header.jpg") bottom center no-repeat ;
opacity: 50%;
height: 100%; 
/*height: 100vh;*/
background-size: cover;

/*text-decoration:none;*/
}




/* NAVBARSCROLL.PHP */

.header {
font-family: "Prompt";
/* background: url("../images/bgg.png") bottom center no-repeat ; */
/*background-image: linear-gradient(to top, #5d142c, #5d142c);*/
text-align: center;
height: 100vh;
align-content: center;
background-size: cover;
position: relative;
text-decoration:none;

  /* max-height: 600px; */

  background-image:

    url('../images/logo.png'),
    url('https://78.media.tumblr.com/28bd9a2522fbf8981d680317ccbf4282/tumblr_p7n8kqHMuD1uy4lhuo3_1280.png'),
    url('https://78.media.tumblr.com/28bd9a2522fbf8981d680317ccbf4282/tumblr_p7n8kqHMuD1uy4lhuo3_1280.png'),
    url('../images/IMG_4435.PNG'),
    url('../images/forest.png');
    /* url('https://cdn.shopify.com/s/files/1/1038/1798/files/36._iPhone_Pink_Clouds_Wallpaper_4k_HD.jpg?v=1707396182'); */
  background-repeat: 

  no-repeat,

  repeat-x,
  repeat-x,
  no-repeat,
  no-repeat;

  background-position: 

  50% 50%,

    500px -20px,
    0 300px,
    0 100%,
    0 100%;
  background-size: 

    200px 200px,

    100% 80% ,
    80% 80% ,
    100% 690px,
    100% 250px;
  
  animation: 60s para infinite linear;
  }

@keyframes para {
  100% {
    background-position: 

      50% 50%,

      900px 100px,
      -350px 300px,
      0 100%,
      0 100%;
    }
  }

  @media only screen and (min-width: 769px) and (max-width: 1281px) { 

    .header {
      font-family: "Prompt";
      /* background: url("../images/bgg.png") bottom center no-repeat ; */
      /*background-image: linear-gradient(to top, #5d142c, #5d142c);*/
      text-align: center;
      height: 100vh;
      align-content: center;
      background-size: cover;
      position: relative;
      text-decoration:none;
      
        /* max-height: 600px; */
      
        background-image:

          url('../images/logo.png'),
      
          url('https://78.media.tumblr.com/28bd9a2522fbf8981d680317ccbf4282/tumblr_p7n8kqHMuD1uy4lhuo3_1280.png'),
          url('https://78.media.tumblr.com/28bd9a2522fbf8981d680317ccbf4282/tumblr_p7n8kqHMuD1uy4lhuo3_1280.png'),
          url('../images/IMG_4435.PNG'),
          url('../images/forest.png');
          /* url('https://cdn.shopify.com/s/files/1/1038/1798/files/36._iPhone_Pink_Clouds_Wallpaper_4k_HD.jpg?v=1707396182'); */
        background-repeat: 
        no-repeat,

        repeat-x,
        repeat-x,
        no-repeat,
        no-repeat;

        background-position: 
        50% 50%,

        0px -20px,
        0 600px,
        0px 100%,
        0 100%;
      background-size: 
        200px 200px,

        100% 80% ,
        100% 30% ,
        100% 650px,
        100% 250px;
      
      animation: 100s para infinite linear;
      }
    
    @keyframes para {
      100% {
        background-position: 
          50% 50%,

          900px 100px,
          -200px 600px,
          0 100%,
          0 100%;
        }
        }
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .header {
      font-family: "Prompt";
      /* background: url("../images/bgg.png") bottom center no-repeat ; */
      /*background-image: linear-gradient(to top, #5d142c, #5d142c);*/
      text-align: center;
      height: 100vh;
      align-content: center;
      background-size: cover;
      position: relative;
      text-decoration:none;
      
        /* max-height: 600px; */
      
        background-image:
          url('../images/logo.png'),
      
          url('https://78.media.tumblr.com/28bd9a2522fbf8981d680317ccbf4282/tumblr_p7n8kqHMuD1uy4lhuo3_1280.png'),
          url('https://78.media.tumblr.com/28bd9a2522fbf8981d680317ccbf4282/tumblr_p7n8kqHMuD1uy4lhuo3_1280.png'),
          url('../images/IMG_4435.PNG'),
          url('../images/forest.png');
          /* url('https://cdn.shopify.com/s/files/1/1038/1798/files/36._iPhone_Pink_Clouds_Wallpaper_4k_HD.jpg?v=1707396182'); */
        background-repeat: 
        no-repeat,

        repeat-x,
        repeat-x,
        no-repeat,
        no-repeat;

        background-position: 
          50% 50%,

          -200px 10px,
          0 300px,
          -100px 100%,
          0 100%;
        background-size: 
          150px 150px,

          100% 50% ,
          120% 80% ,
          130% 400px,
          180% 270px;
        
        animation: 60s para infinite linear;
        }
      
      @keyframes para {
        100% {
          background-position: 
            50% 50%,  

            200px 100px,
            200px 400px,
            -100 100%,
            0 100%;
          }
        }
  }
  
.navbar {
  /* position: -webkit-sticky;  */
  position: sticky; /* If enabled it breaks dropdown menu */
  top: 0;
  z-index: 3;
  background-color: #fff;
}
:root {
  --color-primary: #6d4b2f ;
  --color-primary-1: #e4ad12;
  --color-primary2-1: #fff4d5;
  --color-primary-0: #02a554;
  --color-white: #e9e9e9;
  --color-black: #111;
  --color-grey: #bdbdbd;
  --color-grey2:#bcbcc4;
  --color-black-1: #333;
}
.icolor-gradient {background-image: linear-gradient(to top, #6d4b2f, #e4ad12); color:#6d4b2f;}
.icolor,.hover-icolor:hover{color: #fff!important;background-color: #02a554!important}
.icolor-dark,.hover-icolor-dark:hover{color: #fff!important;background-color: #e4ad12!important}
.icolor-light,.hover-icolor-light:hover{color: #000!important;background-color: #fff4d5!important}

.text-icolor{color: #6d4b2f!important}
.text-icolor2{color: #e4ad12!important}
.text-icolor0{color: #02a554!important}

.w3-border-icolor,.w3-hover-border-indigo:hover{border-color:#6d4b2f!important}
.w3-border-icolor2,.w3-hover-border-indigo:hover{border-color:#02a554!important}

.icolor2,.hover-icolor2:hover{color: #fff!important;background-color: #e4ad12!important}
.icolor2-dark,.hover-icolor2-dark:hover{color: #fff!important;background-color: #6d4b2f!important}
.icolor2-light,.hover-icolor2-light:hover{color: #000!important;background-color: #fff4d5!important}

.vicolor,.hover-vicolor:hover{color: #fff!important;background-color: #727272!important}
.vicolor-dark,.hover-vicolor-dark:hover{color: #fff!important;background-color: #333!important}
.vicolor-light,.hover-vicolor-light:hover{color: #333!important;background-color: #bdbdbd!important}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu-bar {
  background-color: var(--color-primary);
  width: 100%;
  display: flex;
  justify-content:left;
  align-items:center;
  padding-top:20px;
  padding:10px;
  position: relative;
  margin: 0;
  /* justify-content: space-around; */
  padding-left: 20px!important;
  transition: width 6s;
  align-content: center;

}
.menu-bar ul {
  list-style: none;
  display:contents;
  /* justify-content: space-around; */
  align-content: center;
  align-self: center;
}

.menu-bar ul li {
  position: relative;
  max-width: 490px;
}

.menu-bar ul li a {

  font-size: .9rem;
  line-height: .9rem;
  color: var(--color-primary2-1);
  text-decoration: none;
  transition: 2s ease-out;
}

@media only screen and (min-width: 769px) and (max-width: 1281px) { 
.menu-bar ul li a {
  font-size: .7rem;;
}

.dropdown-menu-1 ul li a {
  font-family: "Prompt";
  font-size: .7rem;
  line-height: .7rem;
}

div a {font-size: .8rem!important}
div p {font-size: .8rem!important}
td {font-size: .8rem!important}
h5 {font-family:Prompt;font-size: .9rem!important}
}

.menu-bar ul li a:hover {
  color:rgb(255, 255, 0);
}

.fas {
  float: right;
  margin-left: 10px;
  padding-top: 3px;
}

/* dropdown menu style */
.dropdown-menu {
  display: none;
  text-align: left;
  cursor: pointer;
  transition-delay: 250ms;
  transition-property: margin-right;
  box-shadow: none!important;
  border: none!important;
}


.menu-bar ul li:hover .dropdown-menu {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: var(--color-primary);
  transition: 2s delay ;

}

.menu-bar ul li:hover .dropdown-menu ul {
  display: block;
  transition: all .5s ease;
}

.menu-bar ul li:hover .dropdown-menu ul li {
  width: 250px;
  padding: .5rem;
  border-bottom: .4px solid #6e6e6e;
  border-bottom-style:groove!important;
}

.dropdown-menu-1 ul li a {
  font-family: "Prompt";
  font-size: .8rem;
  line-height: .9rem;
}

.dropdown-menu-1 {
  display: none;
}

.dropdown-menu ul li:hover .dropdown-menu-1 {
  display: block;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 3;
  background-color: var(--color-primary-1);
  text-align: left;
}

.dropdown-menu-1-left{
  display: none;
}

.dropdown-menu ul li:hover .dropdown-menu-1-left {
  display: block;
  position: absolute;
  right: 250px;
  top: 0;
  z-index: 3;
  background-color: var(--color-primary-1);
  text-align: left;
}



/* SIDEBSR.PHP */
.sidenav {
  height: 100%;
  width: 400px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding: 20px;
  z-index: 100!important;
}

.mapSide {

  width: 80%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding: 20px;
  z-index: 3;
  border-radius: 30px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  font-family: "Prompt";
  padding: 11px 9px;
  text-decoration: none;
  color: #b6b6b6;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  line-height: 30px;
  border-bottom:  1px solid #262626;
  background-color: #111;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.sidenav {
  height: 100%;
  width: 280px;
  padding: .7rem .5rem;
  }
.sidenav a, .dropdown-btn {
    line-height: 1.3em;
  }
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 400px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 20px;
}

/* Add an active class to the active dropdown button */
.active {
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
}
.dropdown-container a {
  border: 1px solid #262626;
  border-bottom-style: dotted;
  color: #F48FB1;
  float: left;
  text-indent: 6px;
  padding: 5px;
  margin-block-end: 8px;
}
.dropdown-container2 a {
  border-bottom: 1px solid #363636;
  border-bottom-style: dotted;
  float: left;
  text-indent: 20px;
  background-color: #b6b6b6;
}

.dropdown-container2 a:hover {
  color: #111;
}

.sidenav .dropdown-container2 a {
  padding: 6px 16px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.hidex {
  position: fixed;
  top: .5rem;
  right: .5rem;

  z-index: 100;
  color: var(--color-primary-0);
  /* padding: .3rem .3rem; */
  /* background-color:var(--color-primary); */
  /* border-radius: 400px; */
    /* border-radius: 50%;
    padding: .2px; */
  }

  .zoom {
    padding: 1rem;
    background-color: var(--color-primary2-1);
    transition: transform .3s; /* Animation */
    border-radius: 2rem;
    margin-top: 13px;
    font-family: "Prompt";
    font-size: .8rem;
    height: 10rem;
    align-content: center; /* อันนี้ลบออกได้เลย */
    display: flex; /* เพิ่ม */
    flex-direction: column; /* เพิ่ม - จัดให้อยู่แนวตั้ง */
    justify-content: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
    color: var(--color-black);
    text-align: center;
  }
  
.centerzoom {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.zoom:hover {
  transform: scale(0.9);
  background-color: #6d4b2f;
  color: #fff!important;
}

.zoom a:hover {color:var(--color-white);}

@media screen and (max-width: 768px) { /* สำหรับหน้าจอมือถือ */
  .zoom {
    height: 7rem; /* ลดความสูง */
    padding: 0.5rem; /* ลด padding ถ้าจำเป็น */
    font-size: 0.7rem; /* ลดขนาดฟอนต์ถ้าอยากให้มันดูไม่แน่นเกินไป */
    border-radius: 1rem;
  }
}

.responsive-img {
  width: 100%;
  height: auto;
  height: 270px!important;
}

@media screen and (max-width: 800px) {
  .responsive-img {
    height: 220px!important;
  }
}

@media screen and (max-width: 600px) {
  .responsive-img {
    height: 180px!important;
  }
}


.responsive-iframe {
  width: 100%;
  height: 900px!important;
  border-style: none;
  background-color: #fff !important;
}

@media screen and (max-width: 800px) {
  .responsive-iframe {
    height: 700px!important;
  }
}

@media screen and (max-width: 600px) {
  .responsive-iframe {
    height: 500px!important;
  }
}

.leader-image {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 15px;
  object-fit: cover;
  object-position: top;
}
.customcols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* ระยะห่างระหว่างปุ่ม */
}

.customcols .element2 {
  padding: .3rem .8rem;
  border-radius: 30px; /* ทำให้ปุ่มมีมุมโค้ง */
  font-size: 0.9rem;
}

@media (max-width: 1024px) {
  .customcols {
    flex-direction: column!important; /* ปรับการจัดเรียงให้เป็นคอลัมน์บน iPad แนวตั้งและมือถือ */
    align-items: center!important;
  }

  .customcols .element2 {
    font-size: 0.8rem; /* ลดขนาดตัวอักษรบนมือถือและ iPad */
    padding: .2rem .6rem; /* ปรับขนาดปุ่ม */
  }
}




footer p {  
  font-family: "Prompt";
  font-size: 1rem;
  margin-top: -5px;
  text-align: left;
}

.footer a {  
  font-family: "Prompt";
  font-size: 1rem;
  text-align: left;
}

footer h4 {  
  font-family: "Prompt";
  text-align: left;
  padding-bottom: 1rem;
  /* border-bottom: #000 2px dotted; */
}

footer .social-links a {
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  text-align: left;
}

footer .social-links a:hover {
  background: #b6b6b6;
  color: #fff;
  text-decoration: none;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 769px) {

#footer p {text-align: center!important;}
#footer h4 {text-align: center!important;}


}

/*////////// END  FOOTER ///////////*/



.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/*  CREATE COLORE */
.lightshade {
  z-index: 0;
  background-color:inherit!important ;
  position: relative;
  animation: mymove 1 ;
  animation-delay: 2s;
  animation-timing-function: linear;}


.split {
  height: 100%;
  width: 50%;
  position:relative;
  z-index: 0;
  top: 0;
  overflow-x: hidden;
  padding-top: 0;
  background-color: white;
}

.left {left: 0;}
.right {right: 0;}



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

.icon-bar {
  position: fixed;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: rgba(0, 0, 0, 0.647)!important;
  background-color: #41517ffb;
  cursor: pointer;
}



</style>