/* GLOBAL STYLES
 * Padding below the footer and lighter body text
* -------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Mitr|Open+Sans:400,600,700|Prompt&display=swap');


body {
   
  color: #5a5a5a;
  font-family: Open Sans , Prompt !important;
}

a { cursor: pointer;}

.fontx18 { font-size:18px;}
.fontx30 { font-size:30px !important;}
.fontx24 { font-size:24px;}

.fontx14 { font-size:14px;}

@media screen and (min-width:766px){
  .fontx40 { font-size:35px !important;}
}

@media screen and (max-width:768px) {
    h1 { font-size:24px !important;}
    .fontx30 { font-size:24px;}

    .fontx14 { font-size:11px;}

}

/* CUSTOMIZE Color
-------------------------------------------------- */
.color-light-blue {color:#1db0c8 !important;}
.color-dark-green {color:#026738}
.color-light-green{color:#26b52c !important;}
.color-dark-blue { color:#1c374c !important;}
.color-yellow {color:#ffcd02}
/* CUSTOMIZE Space
-------------------------------------------------- */

.pl-130 { padding-left: 130px;}


.lh-100 { line-height: 1}

.h-35 { min-height:35px;}
.h500 { height:500px;}
.h450 {
    height: 450px;
}

.min-h-auto { min-height: auto !important}

.min-h-100 { min-height: 100px !important}

@media screen and (min-width:576px){
    .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-right: 10px !important;
      padding-left: 10px !important;
    }
}

/* CUSTOMIZE type
-------------------------------------------------- */

h2,h3 {color:#1c374c !important;text-transform: uppercase;}

@media screen and (max-width:768px){

  h2 { font-size:20px !important;}

}




/* CUSTOMIZE GRIDE  fiver star bug safari 
-------------------------------------------------- */
.row:before { width: 0 !important;}




/* CUSTOMIZE flex 
-------------------------------------------------- */

.flex { display: flex;}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
.bg-dark-blue { background: #1c374c; color: #fff; font-size:11px;}
.bg-white-80 { background-color: rgba(255,255,255,.8) !important }
.bg-light-grey { background: #eee;}
.bg-lightness-grey { background: #f5fafe;}
.bg-light-blue { background: #1db0c8;}
.bg-light-blue2 {background-color:#bfcedf;}
.bg-bn-1 {background: #5e9df5}
.bg-gross { background-image:url(../image/bg-title/bg-g.png) ; background-position: center; background-size: auto 100%; background-repeat: no-repeat; }

.dms-topbar a,.dms-topbar a * {transition: all ease-in-out .5s;}

.dms-topbar .btn-outline-light { border:1px solid #081a26 ; border-radius :100px;}
.dms-topbar a:hover.btn-outline-light { background:#081a26; }
.dms-topbar .btn-sm { font-size:12px; color:#c6cecf;}

.dms-topbar  .border-left-1 { border-left:1px solid #081a26;}
.dms-topbar .border-left-1 a { color: #bbb}
.dms-topbar .border-left-1 a.active { color:#FFF;}

.serach-box--dms-topbar { padding-right: 0px; margin-right: 10px;}
.serach-box--dms-topbar .input-group { display: flex !important;}
.serach-box--dms-topbar .input-group input { width: auto;min-width: 470px;}
.serach-box--dms-topbar .btn {padding: 6px 15px !important; background:#fae80f;color: #081a26;  }
.serach-box--dms-topbar .btn:hover {background:#facf0f;}
@media screen and (min-width:576px){

  .serach-box--dms-topbar {max-width:  570px; }


}

@media screen and (max-width:576px){
  .serach-box--dms-topbar { display: block; width: 100%; margin-bottom: 8px;}
  .serach-box--dms-topbar .btn {padding: 7px    !important;  font-size: 0px !important;  }
  .serach-box--dms-topbar .btn i { font-size: 14px;}
  .serach-box--dms-topbar .input-group input { width: 90%;min-width: 207px;}
  div.input-group-append { width: 10%;}

}


a.nav-link { color:#666;}
.navbar-toggler-icon { width: auto; height: auto; color:#FFF;}


/* social btn str */

.btn-squre { width: 30px;height: 30px;
    text-align: center;   display: flex;
    justify-content: center;color:#fff;
}

.btn-fb,.btn-ins,.btn-twitter,.btn-youtube,.btn-mail { background: transparent;}

a:hover.btn-fb { background:#3B5998}
a:hover.btn-ins { background-image:url(../fonts/ins-bg.jpeg) ; 
    background-size: auto 100%; background-repeat: no-repeat; background-position: top ; }
a:hover.btn-twitter { background:#00acee;}
a:hover.btn-youtube { background:#c4302b;}
a:hover.btn-mail { background:#337ab7;}


/* social btn end */



/*color str*/

.color-white { color:#FFF;}
.color-grey {color:#999 !important;}
.color-light-blue { color:#1db0c8 ;}

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  background: #f2f2f2;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 5px;
  padding-left: 5px;
  height: 100px;
}
.navbar-wrapper .navbar .container {
  width: 100%;
}

.navbar-brand { height: 100px !important;}
/* CUSTOMIZE THE Navbar Main Menu 
-------------------------------------------------- */

.dms-logo { position:absolute; z-index: 2002; width: 125px; top: 0px;}

.dms-topbar a.btn:hover { color:#ccc;}
.dms-topbar .btn.btn-squre { padding-left: 0 !important; padding-right: 0 !important; margin-top: 3px;}

.dms-topbar .btn.btn-squre span ,.dms-topbar .btn.btn-squre div { display: block;}

.navbar-nav { padding-left: 0px; line-height: 1.2;font-family: Open Sans , Prompt ;}

.navbar { width: 100%; min-height: 100px; height: auto !important; }

.navbar-nav  li a { position: relative;}

  

.nav>li>a:focus, .nav>li>a:hover {
  text-decoration: none;
  background-color: #f6f8fb !important;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
  color: #262626;
  text-decoration: none;
  background-color: #07895030 !important;
  border-radius: 6px;
}



@media screen and (min-width:1200px) {
  .dms-logo { width: 190px; top:-30px;}
  .navbar-brand .pl-130 { padding-left: 200px !important;}

  .navbar-brand .fontx24 {
    font-size: 38px;
}

.navbar-brand  .fontx14 { font-size:18px;}

    .navbar-nav li a {
        font-size: 28px !important;
        padding-left: 10px !important;
        font-weight: bold;
    }
  .dropdown-menu li a { font-size: 16px !important; color: #484848   !important;}

  .dropdown-menu li li a { font-size: 14px !important; color: #484848   !important;}
}





@media screen and (max-width:1200px) {
   
    .dms-logo   { width: 100px;top: 0px; position: relative;}
    .navbar-brand .pl-130 { padding-left: 5px;}

    .navbar-brand { display: flex}
    .navbar-nav { padding-left: 5px;}
    .m-w-md-auto { margin: auto;}
}



@media screen and (min-width: 992px){

      .top-minus-lg-100{ top:-100px !important;}
      .top-minus-lg-160{ top:-160px !important; float:none !important;}
      .mega-menu  .top-minus-lg-70 { top:-70px;}

      .w-lg-50-per { width: 50% !important; float: left;}

}
@media screen and (min-width: 768px){
   
    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute;
        width: 400px!important;
    }

    .navbar-expand-md .navbar-nav .mega-menu.dropdown-menu {

          position: absolute;
          width: 80vw!important;
          right: 0;
          left:  -10vw!important;
          margin-left: 0px;
          margin-top: 0px;
          min-width: 10em;
          max-width: 80vw !important;
          top:94px !important;
          min-height: 320px;
          border-radius: 0 0 16px 16px;
          /*padding-left: 200px;*/

    }

    .mega-menu.dropdown-menu li { width: 33%; float: left; padding:  10px;position: relative;}

    .mega-menu-service li:not(:first-child ) { width: 50% !important;}
    /*.mega-menu-service li:first-child { width: 100% !important;}*/

    .mega-menu.dropdown-menu li a {white-space: normal !important;}

    .mega-menu.dropdown-menu .dropdown-divider { display: none;}

    .navbar-expand-md .navbar-nav .dropdown-menu.mega-menu.dropdown-menu .dropdown-menu { 
         display: block !important; position: relative !important; 
        width: 100% !important; border:0; box-shadow: 0 0 0 #000; border-top:1px solid #ccc; 
        right: 0;  
        left:  0vw !important;
        margin-left: 0px;
        margin-top: 10px;
        min-width: none;
        max-width: 100% !important;
        top:0px !important  ;
        min-height: 40px;
        border-radius: 0 ;
    }

    .navbar-expand-md .navbar-nav .dropdown-menu.mega-menu .dropdown-item.dropdown-toggle { padding-bottom: 3px}
    .navbar-expand-md .navbar-nav .dropdown-menu.mega-menu.dropdown-menu .dropdown-menu li { width: 100% !important; padding: 0px 5px  !important ; }

    .navbar-expand-md .navbar-nav .dropdown-menu.mega-menu.dropdown-menu .dropdown-menu li a { padding-left: 20px !important; display: block;}

    .navbar-expand-md .navbar-nav .dropdown-menu.mega-menu.dropdown-menu .dropdown-menu li a:before {
       content:"-"; font-family:'Font Awesome 5 Free'; display:inline-block;width: 6px;color:#337ab7; position:absolute;top:3px;left: 3px;
      }
    
    .mega-menu-about { background:url(../image/mega-menu/about.jpg) left #FFF no-repeat ;}

    .mega-menu-service { background:url(../image/mega-menu/service.jpg) right #FFF no-repeat ;}

    .mega-menu-staff { background:url(../image/mega-menu/staff.jpg) right #FFF no-repeat ;}

    .mega-menu .mega-menu  { background: none;}
    .mega-menu  .dropdown-toggle:after { opacity:0 !important;}

    .mega-menu .top-minus-md-100 { top:-100px;}

    .mega-menu  .top-minus-md-70 { top:-70px;}

    .mega-menu  .top-minus-md-60 { top:-50px;}

    .dropdown-divider  {border-top:solid 1px #ddd;}

}


@media screen and (min-width: 768px) and (max-width:992px){
  
            .mega-menu.dropdown-menu li {

                width: 50%; float: left; padding:  10px

            }
            .mega-menu .top-minus-md-100 { top:-200px;}
}


@media screen and (max-width:768px) {

  html,body { overflow-x: hidden; }
.navbar-nav { width: 98% !important; margin: auto !important;}
  .navbar-nav  li a { font-size: 14px !important ;padding-left: 10px !important;}
  .navbar-brand { position: absolute; top: 0;left: 0;}
.navbar-nav{ padding-top: 100px;}
.navbar-expand-md .navbar-nav  .dropdown-menu .dropdown-menu { 
 
        border:0; box-shadow: 0 0 0 #000;  
}
}

@media screen and (max-width:414px) {


  .navbar-brand  img { width: 80px !important;}

}

@media screen and (max-width:350px) {


  .navbar-brand  img { width: 80px !important;}
  .navbar-brand .fontx24 { font-size: 18px;}
  .navbar-brand .fontx14 { font-size: 8px;}


}
 
 

a.dropdown-item { font-size: 14px;}

.nav-item { position: relative;}


  

.dropdown-item.active, .dropdown-item:active {
  color: #495c5f;
  text-decoration: none;
  background-color: #dbeaec;
}

.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer;
  z-index: 9999;
  background: #026738;
  padding: 10px;
  position: absolute;
  right: 20px;
  top: 30px;
}

@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-menu{
        position: absolute;
        left: -170px;
        top: 0;
    }
    .dropdown-item {

    padding:   .5rem;

    }

}


@media screen and  (max-width:495px){

  .navbar-nav  li a { font-size: 14px !important ;padding-left: 10px !important;}

}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */




/* Carousel base class */


.carousel {
  height: 450px;
  margin-bottom: 60px;
  font-family: Open Sans , Prompt ;
}
.carousel-caption {
  z-index: 10; /* Since positioning the image, we need to help out the caption */
}
.carousel-caption a{ 
  text-decoration: none;position:relative;

}

@media screen and  (max-width:576px){


.carousel-caption.carousel-caption-image { padding-top:0; margin-top: 0; top:20px!important; }

}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.carousel-indicators { font-family: 'Prompt'; text-shadow: 0 0 0  !important; background: url(../image/bn/bg-control.png) no-repeat; background-size:100% 100%; }

.carousel-inner a { position: relative;}
.carousel-inner a:hover { text-decoration: none;}
.carousel-inner  h3 { color:#1db0c8; font-size: 24px;text-shadow: 0 0 0 !important; line-height: 1.2;font-weight:700;}
.carousel-item.white  h3,.carousel-item.white  p { color: #FFF;}
.carousel-inner p {
    color: #666;
    font-size: 20px;
/*    max-width: 500px;*/
    margin: auto;
    text-shadow: 0 0 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4; /* จำนวนบรรทัดที่ต้องการแสดง */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-indicators li { width: 48px !important; background-color: #eee !important; border: 1px solid #eee;}
.carousel-indicators .active { width: 48px !important; background-color: #1db0c8 !important; border: 1px solid #1db0c8; height: 10px !important;}

.carousel-indicators {
  bottom: -10px !important;
  height: 40px;
  display: flex;
  align-items: center;
  padding-top: 20px;
 
}
@media screen and (min-width:576px){

  .carousel-inner .position-sm-absolute {bottom:-150px; left:20px;position:absolute !important; }


}

@media screen and (max-width:576px){

  .carousel-inner .position-sm-absolute {bottom:-150px; left:60px;position:relative !important; display: block; width: 120px; margin:10px auto;position:absolute !important; }


}

.btn-yellow { background: #fae80f;border-radius:400px !important; color:#1c374c !important; padding: 10px 30px !important; }



.carousel-item .carousel-caption  img { opacity:1 !important;}
.h500-bn { height: 500px;}
.banner-main--image .carousel-caption { left:0!important;right:0;text-align:center!important;}
.banner-main--image .carousel-caption img {max-width:1200px; width:96%; margin:0 auto !important;}


  @media screen and (min-width:992px){
   
        .carousel-caption { text-align: left !important; top:40px !important; left: 10% !important; }
        .carousel-inner p  {  margin: 0;}
        .carousel-item img { margin-left: 40vw !important;}
  }



  @media screen and (max-width:992px){
    .carousel-inner p  {  margin: 0; /*padding-bottom: 20px;*/}
    .carousel-inner  h3 { font-size: 40px;}
    .carousel-item img { margin-left: 0 !important; opacity: 1;}
    .carousel {
        height: 850px;
    }
  }

  @media screen and (min-width: 992px) {
    .carousel-caption {
        width: 30%;
    }
  }

  @media screen and (min-width:576px){

    .banner-main--image    .carousel-caption-image  { top:60px;}

     
  }
  @media screen and (max-width:576px){
    .carousel-item img { margin-left: 0 !important; opacity: 1;}
    .carousel-inner p { color:#444;font-size: 16px;}
    .h500-bn { height: 400px;}

    .carousel-indicators  {  width: 98% !important; left: 30% !important;}
    .carousel {
      height: 650px;
    }
    .carousel .item {
      height: 400px;
    }
    .carousel-item img {
      height: 400px;
    }
    .carousel-caption { 
      bottom:40px !important;}

      .carousel-item .carousel-caption  img { max-height:320px !important ;margin-top: 10px;}
      .banner-main--image img { width:auto !important;
      
      }

  }


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
   
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

 


@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 0px;
  }
  .navbar-wrapper .container {
    padding-right: 5px;
    padding-left: 5px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
    border-radius: 4px; /* The navbar becomes detached from the top, so we round the corners */
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
   
    display: block;
  }

  .featurette-heading {
    font-size: 50px;
  }

}
    /* .container { width: 90% !important} */
 

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}


@media  screen and (min-width: 576px){
        .container {
            max-width: 90% !important;
        }
}

/* CARD
-------------------------------------------------- */

.card  { border-radius:8px; box-shadow: 0 1px 4px #ddd; border:1px solid #f8f8f8;}
.card  h4 { font-size:16px;font-weight:400;}
.card a { text-decoration: none !important;}
.card p { color:#808080;}
.card-icon { border:1px solid #eee;   background: rgb(255,255,255); min-height: 133px;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(230,230,230,.5) 100%);}
  .card-icon  a { text-decoration: none !important}
  .card-icon  a:hover { color:#1db0c8 !important;}
  .card-icon  a.btn:hover { color:#081a26!important;}

.card-title-bg {background: #1db0c8 url(../image/bg-title/bg-w.png) no-repeat center; color:#FFF; border-radius: 6px 6px 0  0;background-size:auto 100%; }
.card-title-w-bg {background: #eee url(../image/bg-title/bg-g.png) no-repeat center; background-size:auto 100%; border-radius: 6px 6px 0  0; color:#1c374c }
.card a,.card a * { transition: all ease-in-out .25s;}
.card a img:hover{ filter: brightness(1.1);}
.card-bg-lighter-blue { background: #f5fafe;}

.card-bg-lighter-blue a { color:#081a26;}

.max-600 { max-width:600px;}


@media screen and (min-width:992px){
  .max-246-img  img{ max-width: 246px;}
   

}
@media screen and (max-width:576px){

  .card  h4 , h4 { font-size:14px !important; padding-left: 5px !important;}
  
}

/* button
-------------------------------------------------- */

.btn {padding: 8px 20px !important;}

.btn-dark { color:#FFF;background:#1c374c; padding: 8px 20px !important;}

.btn-dark:hover { color:red;background:#224359;color:#FFF !important  ;}

.btn-primary { color:#FFF;background:#1db0c8 !important; padding: 8px 20px !important; border:1px solid #17a1af !important;}
.btn-primary:hover { background: #ffcd02!important ;color: #081a26 !important;border:1px solid #c3b400 !important;}
.btn-warning { color: #081a26 !important; background: #fae80f !important; border: #c3b400 1px solid !important;}

@media screen and (max-width:576px){

  .dms-topbar .btn {

     
    font-size: 12px ;

}
.dms-topbar .btn.btn-sm {

            padding: 8px !important;
            font-size: 0px;
            width: 38px;
    
      }

      



}

/*border
-------------------------------------------------- */

.border-top-1 {border-top:solid 1px #eee;}

.border-left-1 { border-left:solid 1px #eee;}

.border-bottom-1 { border-bottom:solid 1px #eee;}

.border-bottom-light-blue {border-bottom:solid 1px #1db0c8;}


@media screen and ( min-width:768px){


    .border-right-md-1 { border-right:#ddd solid 1px;}

}

.btn-position-absolute { position:absolute; right:0; top:-15px;}
.btn-position-absolute-bottom-right { bottom: 15px; right: 15px; top: auto;}




@media screen and (max-width:768px){


.btn-position-absolute { position: relative; right:0; top:0px; display: block; width: 100% !important; text-align: center; }
.btn-position-absolute-bottom-right {
   border-radius: 0 0 8px 8px !important; background: #f8f8f8 !important; 
  color:#081a26 !important; border: 1px solid #CCC !important;}
}

/**/

.bn-etc img { border-radius:6px;}



/*anounce-box 
-------------------------------------------------- */

.anounce-box { background-image: url(../image/content/bg/document.png); background-repeat: no-repeat; background-position-x:20%;  }

.color--light-blue-box { background-color: #c1dbe5;}

.annouce-news a { text-decoration: none !important;}

.annouce-news a p { margin-bottom:0; padding-bottom:0; }

.annouce-news a:hover { background: #f8f8f8 ;}

@media screen and (max-width:576px){
.annouce-news  p { 
  display: flex;
  align-items:center;
  
  font-size:11px;}
}
.annouce-news  p i{ 
  
  padding-right: 10px !important;
   
}

/* dark-blue-box

-------------------------------------------------- */

.color--dark-blue-box {background-color:#1c374c;}
.color--dark-blue-box h34{ font-family: Prompt;}

.links-box a { display: inline-block; filter:grayscale(.3); transition: ease-in-out .25s;}
.links-box a:hover {filter:grayscale(0);}
.links-box a img {border-radius:8px;}

@media screen and (max-width:576px){
  .links-box { padding-top: 20px; padding-bottom: 20px;}
    .links-box a  {width: 32%; margin: auto;text-align: center; }
    .links-box a img {width:90%;margin: auto;}
}

/*dark-grey-box
-------------------------------------------------- */


.dark-grey-box { background:#2b3238;}

.dark-grey-box ,.dark-grey-box a  {color:#c6cecf;text-decoration: none !important;}

.dark-grey-box a:hover {color: #1db0c8;}


/*dark-back-box
-------------------------------------------------- */

.dark-back-box {background-color:#181d21;color:#c6cecf;}


/*news-manage
-------------------------------------------------- */

@media screen and (min-width:1280px){

  .news-manage .py-3{

      padding-top: 10px !important;
      padding-bottom: 10px !important;


   }
  }

   @media screen and (min-width:1280px) and (max-width:992px){

    .news-manage .py-3{
  
        padding-top: 15px !important;
        padding-bottom: 15px !important;
   
     }
  
   
  }

 
/* siderer bar
-------------------------------------------------- */

.slider {
  width: 90%;
 /* max-width: 900px;*/
  margin: 20px auto;
  line-height: 1;
}
.vertical-center.slider   {
  
  width: 100%;

}
.slick-slide {
margin: 0px 20px;
}

.slick-slide img {
width: 100%;
max-width: 175px;
margin:auto;
}

.vertical-center .slick-slide img {
  width: 100%;
  max-width: 319px !important;
  margin:auto;
  }


.slick-slide strong {
  padding-bottom: 10px;
  }

.slick-prev:before,
.slick-next:before {
color: black;
}


.slick-slide {
transition: all ease-in-out .3s;
opacity: 1;
}

.slick-active {
opacity: 1;
}

.slick-current {
opacity: 1;
}

.vertical-center.slider .slick-dots { bottom:-30px;}

/*font-console str*/

.font-console { height: 38px; display: flex; align-items: center; }

.font-console input { background: rgba(0,0,0,.1); border-radius:100px; margin-right: 4px;color:#bbb; border:1px solid #181d21; transition:all ease-in-out .25s;}
.font-console input:hover {background: rgba(0,0,0,.5);}

@media screen and (max-width:576px){

  .font-console { display: none;}


}





.align-items-center .mr-4 { margin-right:2rem !important   }


/*table
--------------------------*/

.thead-light { background-color:#eee;border-top:#ddd solid 1px;}

.table-round thead th:first-child {
    border-radius: 10px 0 0 0;
}
.table-round thead th:last-child {
    border-radius: 0 10px 0 0;
}
 
.table-round tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px; 
}
.table-round tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}


.table-responsive td { white-space: normal !important;}

@media screen and (max-width:768px){

  .table-responsive table { width: 800px !important;}


}

/*tab
--------------------------*/
.fade {
  opacity: 1;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}
.tab-content  .fade {
  opacity: 1;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}


.accordion-dms .card-header {
 
  border-bottom: 0px solid rgba(0,0,0,.125) !important;
}


.fa * { transition: all ease-in-out .25s }

.fa-right-display {right:20px;position:absolute;}


/* footer
...............................*/

.dark-grey-box  .col-lg-3.col-md-6  a { font-size: 12px;}




/*label and count pop*/


.new-lable { position:absolute; width:42px; left:5px; top:0;}

.count-pop {  background: #ff5c50;font-weight:600; font-size:10px;position: absolute;
     right:8px; top:-8px;height:17px;padding: 1px 5px; color:#FFF;border-radius: 90px;display: inline-block;}


     /* paging & search button custom */

     .page-item.active .page-link {
      z-index: 1;
      color: #fff;
      background-color: #04864a !important;
      border-color: #027540 !important;
  }

  .btn-primary.btn{background: #1db0c8 !important;transition: ease-in-out .25s; text-shadow: 0 1px 1px rgba(0,0,0,.3); font-family: Arial, Helvetica, sans-serif; 
    background: linear-gradient(180deg, #1db0c8 0%, #2dbed4 50%, #1db0c8 50%, #05788a 100%) !important;}

    .btn-primary.btn:hover {

        filter:brightness(130%)  !important;
        border: #1db0c8 1px solid !important;

    }




  @media screen and (max-width:576px){
      .pagination { font-size: 12px;}
      .pagination>li>a, .pagination>li>span {
        
        padding: 2px 6px !important;
      }

      .col-xs-6:nth-child(even) { padding-right: 0 !important;}
      .btn.btn-lg.btn-warning { padding: 8px 5px !important; font-size: 0px; text-align: center;}
      .btn.btn-lg.btn-warning i {  font-size: 16px; margin: auto;}


  }

/* dms content  str */

.dms-content p { color:#666;}

@media screen and (min-width:768px){

  .dms-content h1 { font-size:25px; }

  .dms-content p { font-size:16px;}


}

@media screen and (max-width:576px){

  .dms-content h1 { font-size:22px; }


}
  
  .card-news h4 a ,.card-news p a:not(.btn) { color: #081a26;}
  
  .card-news h4 a:hover ,.card-news p a:hover { color:#1db0c8;}

  /* dms content end */

  /* all appilcation str */

  @media screen and (max-width:576px){

    .all-application  .col-xs-4 img{

                width: 100%;

    }
    .all-application  .col-xs-4  a{

        font-size:11px; 

    }
  }


  /* tme-line str  */

  ul.timeline {
    list-style-type: none;
    position: relative;
    }
    ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
    }
    ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
    }
    ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
    }

  /* tme-line str  */
  .sizeimg { width:100%;max-width:150px;}
  .img_excutive2 { display:block; text-align:center;}


  .bg-light-grey.bg-gross h1 { font-size:24px !important;}

  .slider-img  {max-width:1100px !important; width:90%;}

  .slider-img img { max-width:217px !important; position: relative;}
  .slider-img  div { position: relative;}
   a.gear { position: relative; display: block;}

  a.gear ,a.gear[type="button"] { position:absolute;content:""; 
  right: 5px; top:5px; width: 20px; height:20px; 
  background:url(../image/icon/gear.png) no-repeat center; 
  background-size:contain;z-index: 9; }

  .position-relative.p-3 a.gear { top:10px!important;}

.border-radius { border-radius: 8px; }

.border-1 { border:1px solid #ddd;}

.container-landingpage .dropdown-menu {


      left:-160px !important;

}


.container-landingpage .slider-img div { padding-bottom:8px;}


.container-landingpage  .dropdown-divider { margin: 0.25em 0; padding-bottom: 0 !important;}

.left-0 { left:0;}


.max-1k {max-width: 1000px}

.background-lighter-grey {background-color:#fbfbfb;}