/*-----------------------------------------------------------------------------------
    URI: https://eulz.net/
    Description: This is version 3 of Steven Zhang's website. Version 2 is https://lz284.org and version 1 is https://lz284.github.io
    Author: Steven Zhang
    Author URI: https://eulz.net/
    Version: 3.0

--------------------------
    CSS INDEX
--------------------------
    01. Default css 
    02. Header css
    03. About css
    04. Features css
    05. Service css
    06. Gallery css
    07. Team css
    08. Testimonial css
    09. Faqs css
    10. News css 
    11. EULZ css
    12. Contact css
    13. Footer css
    14. Sections css
    15. Blog css
    16. Video css 
    17. Web clock
    18. Chat css
    19. User nav
    20. Manage page
    21. Login css
-----------------------------------------------------------------------------------*/
@import url("css2.css");

:root {
  --thm-font: 'Barlow', sans-serif;
  --thm-reey-font: 'reeyregular';
  --thm-gray: #7b7981;
  --thm-gray-rgb: 123, 121, 129;
  --thm-primary: #1989fb;
  --thm-primary-rgb: 25, 137, 251;
  --thm-black: #1b1825;
  --thm-black-rgb: 27, 24, 37;
  --thm-base: #ffffff;
  --thm-base-rgb: 255, 255, 255;
  --thm-extra: #42d9be;
  --thm-extra-rgb: 66, 217, 190;
  --thm-bdr-color: #dae3e9;
  --thm-bdr-color-rgb: 218, 227, 233;
  --thm-bdr-radius: 8px;
}

/*---========================
    01. Default css 
=======================----*/

/* Google Fonts */
/* Base CSS */
html {
  font-size: 100%;
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
a:hover, a:focus {
  color: inherit;
  text-decoration: none;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

i,
span,
a {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  font-family: "Roboto", sans-serif;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  margin: 0px;
}

input, textarea {
  display: inherit;
}

img {
  max-width: 100%;
}

body {
  font-weight: normal;
  font-style: normal;
  font-weight: 300;
  color: #484848;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 28px;
  overflow-x: hidden;
}

/*====== Extra CSS ======*/
.container-fluid {
  padding-left: 70px;
  padding-right: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (max-width: 1199px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.mt-minus-85 {
  margin-top: -85px;
}

.mt-minus-100 {
  margin-top: -100px;
}

.mt-minus-130 {
  margin-top: -130px;
}

ul.social-link li {
  display: inline-block;
}

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.slick-slide {
  outline: 0;
}

.form_group {
  position: relative;
}

label {
  margin-bottom: 0;
}

.form_control {
  width: 100%;
  padding: 0 30px;
  height: 60px;
  border: none;
}

textarea.form_control {
  padding-top: 15px;
  display: inherit;
  height: 145px;
}

.p-r {
  position: relative;
}

.z-1  {z-index: 1;}
.z--1 {z-index: -1;}
.z-2  {z-index: 2;}

.sub-title {
  font-size: 20px;
  line-height: 0.9;
  font-weight: 500;
}
.sub-title span.number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sub-title span.number:after {
  content: "";
  width: 105px;
  height: 1px;
  background-color: #1C231F;
  margin: 0 25px;
}

.section-title span.sub-title {
  margin-bottom: 15px;
}

.section-title h4{
  font-size: 30px;
}
.section-title h4 span.thin {
  font-size: 24px;
  font-weight: 200;
  display: block;
}

.section-title h2{
  font-size: 40px;
}
.section-title h2 span.thin {
  font-weight: 200;
  display: initial;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .section-title h2 {
    font-size: 38px;
  }
}
@media (max-width: 1199px) {
  .section-title h2 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .section-title h2 {
    font-size: 30px;
  }
}
.section-title h2 a:hover{
  color:#63AC45;
}
.section-title h2 a:active{
  color: #FF6100;   
}

.content-box-gap > p {
  margin-bottom: 30px;
}

.text-white .sub-title {
  color: #fff;
}
.text-white .sub-title span.number:after {
  background-color: #fff;
}
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
  color: #fff;
}
.text-white p {
  color: #e1e1e1;
}

/*===== All Bg =====*/
.dark-black-bg {background-color: #1C231F;}
.dark-green-bg {background-color: #63AC45;}
.light-gray-bg {background-color: #F9F9F7;}

/*===== All Button Style =====*/
button {
  border: none;
}

.main-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 16px 30px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 7px;
  color: #fff;
  line-height: 21px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.main-btn i {
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}
.main-btn.btn-green {
  background-color: #63AC45;
}
.main-btn.btn-green:hover {
  background-color: #1C231F;
  color: #fff;
}
.main-btn.btn-yellow {
  background-color: #F7921E;
}
.main-btn.btn-yellow:hover {
  background-color: #1C231F;
  color: #fff;
}
.main-btn.btn-black {
  background-color: #1C231F;
}
.main-btn.btn-black:hover {
  color: #fff;
}
.main-btn.btn-white {
  background-color: #fff;
  color: #1C231F;
}
.main-btn.filled-btn {
  background-color: transparent;
  border: 1px solid rgba(28, 35, 31, 0.15);
}
.main-btn.filled-btn:hover {
  border-color: #1C231F;
}


/*                 added by liang 08.21.2021                   */
.main-btn.btn-outline-white{
  padding: 14px 15px;
  font-size: 18px;
  text-transform: none;
  color: #F0F0F0;
  background-color: #1C1C1C;
  border:3px solid #E8E8E8;
}
.main-btn.btn-outline-white:hover{background-color: #F0F0F0;color: #1C1D1E; }

.main-btn.btn-outline-warning{
  padding: 14px 24px;
  font-size: 18px;
  text-transform: none;
  color: #ffc107;
  background-color: #000;
  border:3px solid #ffc107;
}
.main-btn.btn-outline-warning:hover {background-color: #F0F0F0;border-color: #F0F0F0;color: #1C1D1E; }

.main-btn.btn-RebeccaPurple{
  padding: 14px 12px;
  font-size: 18px;
  text-transform: none;
  color: #F0F0F0;
  background-color: #663399;
  border:3px solid #663399;
}
.main-btn.btn-RebeccaPurple:hover{background-color: #F0F0F0;border-color: #F0F0F0;color: #1C1D1E; }

.main-btn.btn-Sandy-Brown{
  padding: 14px 5px;
  font-size: 18px;
  text-transform: none;
  color: #F0F0F0;
  background-color: #D2691E;
  border:3px solid #D2691E
  
}
.main-btn.btn-Sandy-Brown:hover{background-color: #F0F0F0;border-color: #F0F0F0;color: #1C1D1E; }

.main-btn.btn-outline-success{
  padding: 14px 14px;
  font-size: 18px;
  text-transform: none;
  color: #F0F0F0;
  background-color: #28a745;
  border:3px solid #28a745;
}
.main-btn.btn-outline-success:hover{color:#000;background-color:#F0F0F0;border-color:#F0F0F0;}

.main-btn.btn-school-yellow{
  padding: 14px 16px;
  font-size: 18px;
  text-transform: none;
  color: #1C1D1E; 
  background-color: #ffe026;
  border:3px solid #ffe026;
  
}
.main-btn.btn-school-yellow:hover{color:#000;background-color:#F0F0F0;border-color:#F0F0F0}
/* .btn-link:hover i {
  -webkit-margin-start: 12px;
          margin-inline-start: 12px;
} */





/*---==================
    03. Header css 
=================----*/
/* Hero Slider  */
.hero-slider-two .slick-arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  font-size: 18px;
  color: #fff;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.hero-slider-two .slick-arrow:hover {
  border-color: #63AC45;
}
@media (max-width: 991px) {
  .hero-slider-two .slick-arrow {
    width: 50px;
    height: 50px;
    font-size: 16px;
  }
}
.hero-slider-two .slick-arrow.prev {
  left: 100px;
}
@media (max-width: 1199px) {
  .hero-slider-two .slick-arrow.prev {
    left: 40px;
  }
}
.hero-slider-two .slick-arrow.next {
  right: 100px;
}
@media (max-width: 1199px) {
  .hero-slider-two .slick-arrow.next {
    right: 40px;
  }
}

.single-slider .image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 1.4s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1.4s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  z-index: -1;
}
.single-slider .image-layer:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(129.29deg, rgba(0, 0, 0, 0.6) 16.77%, rgba(0, 0, 0, 0.3) 74.33%);
  z-index: -1;
}
.single-slider.slick-current .image-layer {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* Hero Content  */
.hero-content span.sub-title {
  margin-bottom: 20px;
  color: #D1EEEE;
}
.hero-content span.sub-title span.number:after {
  background-color:#D1EEEE;
}

.hero-content h1 {
  font-size: 48px;
  margin-top: 5px;
  margin-bottom: 400px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {.hero-content h1 {font-size: 44px;margin-bottom: 160px;}}
@media only screen and (min-width: 992px) and (max-width: 1199.98px)  {.hero-content h1 {font-size: 40px;line-height: 1em;  margin-bottom: 200px;}}
@media (max-width: 991.98px)                                          {.hero-content h1 {font-size: 36px;line-height: 1.2em;margin-bottom: 200px;}}


.hero-content .hero-button .btn-link {
  color: #fff;
}
/* Hero Form  */
.hero-area-form {
  background-color: #fff;
  padding: 73px 60px 80px;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .hero-area-form {
    padding: 73px 30px 80px;
  }
}
.hero-area-form .adventure-hero-form span {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 10px;
}
.hero-area-form .adventure-hero-form label {
  position: absolute;
  top: 55px;
  right: 25px;
}
.hero-area-form .adventure-hero-form .nice-select, .hero-area-form .adventure-hero-form .form_control {
  height: 60px;
  border: 1px solid rgba(28, 35, 31, 0.15);
  -webkit-box-shadow: 0px 10px 60px rgba(28, 35, 31, 0.1);
          box-shadow: 0px 10px 60px rgba(28, 35, 31, 0.1);
  border-radius: 5px;
  margin-bottom: 32px;
  padding: 0 25px;
}
.hero-area-form .adventure-hero-form .nice-select {
  line-height: 60px;
}
.hero-area-form .adventure-hero-form .nice-select:after {
  right: 25px;
}
.hero-area-form .adventure-hero-form .main-btn {
  width: 100%;
}

/* Hero wrapper  */
.hero-wrapper-one .hero-dots {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 17%;
  z-index: 3;
}
@media (max-width: 1199px) {
  .hero-wrapper-one .hero-dots {
    right: 5%;
  }
}
.hero-wrapper-one .hero-dots .slick-dots li {
  display: block;
}
.hero-wrapper-one .hero-dots .slick-dots li:not(:last-child) {
  margin-bottom: 25px;
}
.hero-wrapper-one .hero-dots .slick-dots li a {
  position: relative;
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  line-height: 23px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.hero-wrapper-one .hero-dots .slick-dots li a:hover:after {
  width: 100%;
}
.hero-wrapper-one .hero-dots .slick-dots li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 0%;
  height: 1px;
  background-color: #fff;
  -webkit-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}
.hero-wrapper-one .hero-dots .slick-dots li.slick-active a {
  -webkit-margin-start: -15px;
          margin-inline-start: -15px;
}
.hero-wrapper-one .hero-dots .slick-dots li.slick-active a:after {
  width: 100%;
}
.hero-wrapper-one .single-slider {
  /* padding: 205px 0 210px; */
  padding: 120px 0 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {.hero-wrapper-one .single-slider {padding: 80px 0 20px;}}
@media only screen and (min-width: 992px) and (max-width: 1199.98px)  {.hero-wrapper-one .single-slider {padding: 80px 0 10px;}}
@media (max-width: 991.98px)                                          {.hero-wrapper-one .single-slider {padding: 80px 0 10px;}}




.hero-wrapper-two .single-slider {
  padding: 308px 0 360px;
}
@media (max-width: 767px) {
  .hero-wrapper-two .single-slider {
    padding: 208px 0 260px;
  }
}

.hero-wrapper-three {
  background-color: #1C231F;
  padding-top: 270px;
}
@media (max-width: 767px) {
  .hero-wrapper-three {
    padding-top: 170px;
  }
}
.hero-wrapper-three .shape {
  position: absolute;
  z-index: -1;
}
.hero-wrapper-three .shape.hero-shape {
  top: 80px;
  left: 70px;
}
.hero-wrapper-three .hero-content {
  margin-bottom: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .hero-wrapper-three .hero-content h1 {
    font-size: 100px;
  }
}
.hero-wrapper-three .hero-area-form {
  position: relative;
  min-width: 690px;
  margin-bottom: -50px;
  z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .hero-wrapper-three .hero-area-form {
    min-width: 580px;
  }
}
@media (max-width: 1199px) {
  .hero-wrapper-three .hero-area-form {
    min-width: 100%;
  }
}
.hero-wrapper-three .video-wrapper {
  min-height: 730px;
}
.hero-wrapper-three .video-wrapper:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(28, 35, 31, 0.2);
  z-index: -1;
}

/* page banner  */
.page-banner,.page-ban{
  position: relative;
  z-index: 1;
  padding: 80px 0px 20px;
}
.page-banner.none{
  padding: 24px 0px 6px; 
}
.page-banner-filter{
  -webkit-filter: grayscale(90%);
  -moz-filter: grayscale(90%);
  -ms-filter: grayscale(90%);
  -o-filter: grayscale(90%);
  filter: grayscale(90%);
  filter: gray;
  /* mix-blend-mode: luminosity; */
  z-index: 1;
}
.page-banner:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(129.29deg, rgba(0, 0, 0, 0.6) 16.77%, rgba(0, 0, 0, 0.3) 74.33%);
}
.page-ban:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.page-banner .page-banner-content h1,.page-ban .page-banner-content h1 {
  font-size: 44px;
  margin-bottom: 20px;
}
@media (max-width: 1199px) {
  .page-banner .page-banner-content h1,.page-ban .page-banner-content h1 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .page-banner .page-banner-content h1,.page-ban .page-banner-content h1 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .page-banner .page-banner-content h1,.page-ban .page-banner-content h1 {
    font-size: 42px;
  }
}
.page-banner-content ul.breadcrumb{
  position: relative;
  display: block;
  margin-bottom:10px;
}
.page-banner-content ul.breadcrumb li{
  position: relative;
  display: inline-block;
  color: white;
  font-size: 18px;
  font-weight: 400;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}


.page-banner-content ul.breadcrumb li+li {
  margin-left: 5px;
}
.page-banner-content ul.breadcrumb li a {
  color:#E8E8E8;
  font-size: 18px;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.page-banner-content ul.breadcrumb li span{
color:#E8E8E8;
}
.page-banner-content ul.breadcrumb li a:hover{
  color:	#F7921E;
  background: none;
  font-weight: 450;
}



@media (max-width: 767px) {
  .page-banner-content ul.breadcrumb li {
    font-size: 17px;
  }
}
.page-banner-content ul.breadcrumb li:not(:last-child):after {
  display: inline-block;
  /* content: ""; */
  font-weight: 400;
  font-family: "Font Awesome 5 Pro";
  margin-left: 20px;
  margin-right: 13px;
}






/*---========================
    13. Footer css 
=======================----*/
/* Footer Newsletter  */
.footer-newsletter label {
  position: absolute;
  top: 14px;
  left: 30px;
}
.footer-newsletter .form_control {
  background-color: #fff;
  padding: 0 30px;
  padding-left: 65px;
  /* height: 73px; */
  height: 56px;
  border-radius: 5px;
}
.footer-newsletter .main-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 16px 15px;
  height: 46px;
}
.footer-newsletter .main-btn i {
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}




/* Footer Widget  */
.footer-widget h4.widget-title {
  font-size: 22px;
  margin-bottom: 28px;
}

.about-company-widget .footer-logo {
  font: 600 26px "Roboto", sans-serif;
  width: 140px;
  padding:0px 2px;
  margin-bottom: 13px;
}
.about-company-widget .footer-logo:hover, .about-company-widget ul li a:hover{
  color: #63AC45;
}
.about-company-widget > p {
  color:	#B5B5B5;
  margin-bottom: 30px;
}
.about-company-widget ul.social-link li {
  -webkit-margin-end: 5px;
          margin-inline-end: 5px;
}
.about-company-widget ul.social-link li a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #484848;
  font-size: 17px;
}
.about-company-widget ul.social-link li a:hover {
  background-color: #63AC45;
  color: #fff;
  border-color: transparent;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .footer-nav-widget.pl-lg-20 {padding-left: 0px;}
  .footer-nav-widget.pl-lg-55 {padding-left: 30px;}
  .footer-nav-widget.pl-lg-70 {padding-left: 50px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-nav-widget.pl-lg-55 {padding-left: 55px;}
}
.footer-nav-widget .footer-nav-content ul.footer-nav li {
  font-weight: 400;
}
.footer-nav-widget .footer-nav-content ul.footer-nav li:not(:last-child) {
  margin-bottom: 15px;
}
.footer-newsletter-widget .newsletter-content p {
  margin-bottom: 32px;
}
.footer-newsletter-widget .newsletter-content form label {
  position: absolute;
  top: 8px;
  right: 0;
}
.footer-newsletter-widget .newsletter-content form label button {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: #63AC45;
  font-size: 13px;
  color: #fff;
}
.footer-newsletter-widget .newsletter-content form .form_control {
  border-bottom: 1px solid #1C231F;
  background-color: transparent;
  padding: 0;
}

.contact-info-widget .contact-info-box h4.title {
  font-size: 22px;
  margin-bottom: 28px;
}
.contact-info-widget .contact-info-box p {
  color:#B5B5B5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 20px;
}
.contact-info-widget .contact-info-box p i {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 15px;
  -webkit-margin-end: 12px;
          margin-inline-end: 12px;
}
.contact-info-widget .contact-info-box p span, .contact-info-widget .contact-info-box p a {
  color:#B5B5B5;
  margin-top: -5px;
  line-height: 26px;
}
/* Copyright Area */
.copyright-area {
  padding: 15px 0;
}
.copyright-area .copyright-text p{
  color:#828282;
}
.copyright-area .copyright-text p a{
  color: #e1e1e1;
}
.copyright-area .copyright-text p a:hover{
  color: #63AC45;
}
@media (max-width: 991px) {
  .copyright-area .copyright-nav, .copyright-area .copyright-text {
    text-align: center;
  }
}
.copyright-area .copyright-nav ul li {
  display: inline-block;
}
.copyright-area .copyright-nav ul li:not(:first-child) {
  -webkit-margin-start: 35px;
          margin-inline-start: 35px;
}
@media (max-width: 991px) {
  .copyright-area .copyright-nav ul li:not(:first-child) {
    -webkit-margin-start: 15px;
            margin-inline-start: 15px;
    -webkit-margin-end: 15px;
            margin-inline-end: 15px;
  }
}


/* Footer Default  */

/* .footer-default .footer-newsletter {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} */
.footer-default .footer-newsletter .section-title span.thin {
  display: block;
}
.footer-default .about-company-widget ul.social-link li {
  -webkit-margin-end: 5px;
          margin-inline-end: 5px;
}
.footer-default .about-company-widget ul.social-link li a {
  background-color: rgba(255, 255, 255, 0.1);
  color: #B1B6B3;
}
.footer-default .about-company-widget ul.social-link li a:hover {
  background-color: #63AC45;
  color: #fff;
}
.footer-default .copyright-area {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-default .copyright-area .copyright-nav ul li a {
  color: #e1e1e1;
}
/* Footer Two  */
.footer-two .copyright-area {
  border-top: 1px solid rgba(28, 35, 31, 0.1);
}


/*---========================
    17. Web clock 
=======================----*/
/*----------      web-clock  ---------*/
.web-clock{
  text-align: center;
}
.web-clock h3{
  font: 550 28px "Roboto", sans-serif;
  padding: 4px 0px 6px 10px;
}
.web-clock h4{
  font: 550 25px "Roboto", sans-serif;
  padding: 4px 0px 6px 10px;
}
.web-clock h3:hover, .web-clock h4:hover{
  color: #FF4500;  
}
.web-clock h4 span{
  font-size: 24px;
}
.web-clock .title{
  font: 550 26px "Roboto", sans-serif;
  padding: 4px 0px 6px 10px;
}
.web-clock ol{
  list-style-type: decimal;
}
.web-clock ol li{
  font: 400 17px "Roboto", sans-serif;
  line-height: 1.9em;
  text-align: left;
  padding: 4px 2px 4px; 
}
.web-clock ol li a{
  display: inline;
  color: #0000AB; 
  padding-right: 6px;
}
.web-clock ol li a:hover{
  font-weight: 500;
  color: #0000FF;          
	text-decoration:none;
  padding-right: 2px;
}
.web-clock ol li a:active{color: #FF4500; }

/*----------      web-clock 2  ---------*/

/* .web-clock2{background-color:#1c1d1e;} */
.web-clock2:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(129.29deg, rgba(0, 0, 0, 0.6) 16.77%, rgba(0, 0, 0, 0.3) 74.33%);
}
.web-clock2 .webclock-top{
  padding: calc(35vh + 100px) 0px;
}
.web-clock2 .clock {opacity: 1;}
.web-clock2 .fill .clock {left: 50%;top: 50%;}
.web-clock2 .centre {position: relative;top: 50%;left: 50%;width: 0;height: 0;}
.web-clock2 .expand {position: absolute;top: 0;left: 0;transform: translate(-50%, -50%);}
.web-clock2 .anchor {position: absolute;top: 0;left: 0;width: 0;height: 0;}
.web-clock2 .element {position: absolute;top: 0;left: 0;}
.web-clock2 .round {border-radius: 296px;}
.web-clock2 .circle-1 {background: white;width: 12px;height: 12px;}
.web-clock2 .circle-2 {background: #FA9F22;width: 8px;height: 8px;}
.web-clock2 .circle-3 {background: black;width: 4px;height: 4px;}
.web-clock2 .second {transform: rotate(180deg);}
.web-clock2 .minute {transform: rotate(54deg);}
.web-clock2 .second-hand {width: 2px;height: 164px;background: #FA9F22;transform: translate(-50%,-100%) translateY(24px);}
.web-clock2 .hour {transform: rotate(304.5deg);}
.web-clock2 .thin-hand {width: 4px;height: 50px;background: white;transform: translate(-50%,-100%);}
.web-clock2 .fat-hand {width: 10px;height: 57px;border-radius: 10px;background: white;transform: translate(-50%,-100%) translateY(-18px);}
.web-clock2 .minute-hand {height: 112px;}
.web-clock2 .hour-text {position: absolute;font: 40px Hei, Helvetica, Arial, sans-serif;color: white;transform: translate(-50%,-50%);}
.web-clock2 .hour-10 {padding-left: 0.4ex;}
.web-clock2 .hour-11 {padding-left: 0.25ex;}
.web-clock2 .minute-text {position: absolute;font: 12px Avenir Next, Helvetica, Arial, sans-serif;color: white;transform: translate(-50%,-50%);}
.web-clock2 .minute-line {background: white;width: 1px;height: 9px;transform: translate(-50%,-100%) translateY(-131px);opacity: 0.34;}


@media (min-width: 1600px) {

}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .web-clock2 .webclock-top{padding: calc(30vh + 100px) 0px;}
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .web-clock2 .webclock-top{padding: calc(30vh + 100px) 0px;}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .web-clock2 .webclock-top{padding: calc(28vh + 100px) 0px;}
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  .web-clock2 .webclock-top{padding: calc(24vh + 100px) 0px;}
}
@media (max-width: 575.98px) {
  .web-clock2 .webclock-top{padding: calc(18vh + 100px) 0px;}
}


/*----------      web-clock 3  ---------*/
.web-clock3{
  font-family: 'Montserrat', 'sans-serif';
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.web-clock3:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(129.29deg, rgba(0, 0, 0, 0.6) 16.77%, rgba(0, 0, 0, 0.3) 74.33%);
}
.clock-main{
  background-color: #080808;
  padding: 10px 80px 20px;
}
.clock-main .top-area{
  font: 400 50px "Roboto", sans-serif;
  color:#828282;
  text-align: left;
  margin-right: 40px;
  margin-left: 40px;
  min-width: 280px;
  padding: 50px 20px 20px;
  display: flex;
}
.clock-main .middle{
  font: 400 200px "Roboto", sans-serif;
  text-align: center;
  position: relative;
  display: flex;
  color:#828282;
  min-width: 280px;
  padding-left: 20px;
  padding-bottom: 20px;
}
.clock-main .clock-hours,.clock-main .clock-minutes{
  text-align: right;
  min-width: 220px;
  margin-right: 40px;
  margin-left: 40px;
}
.clock-main .clock-colon{
  margin-top: -20px;
}
.clock-main .clock-ampm{
  font-size: 44px;
  margin-top: 30px;
  margin-left: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .web-clock3{min-height: 70vh;}
  .clock-main .top-area{font-size: 40px;}
  .clock-main .middle{font-size: 150px;}
  .clock-main .clock-hours,.clock-main .clock-minutes{text-align: right;min-width: 160px;}
  .clock-main .clock-colon{margin-top: -15px;}
  .clock-main .clock-ampm{font-size: 36px;margin-top: 15px;}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .web-clock3{min-height: 65vh;}
  .clock-main .top-area{font-size: 36px;padding: 20px 20px 20px;}
  .clock-main .middle{font-size: 120px;}
  .clock-main .clock-hours,.clock-main .clock-minutes{text-align: right;min-width: 80px;  margin-right: 30px;margin-left: 30px;}
  .clock-main .clock-colon{margin-top: -10px;}
  .clock-main .clock-ampm{font-size: 28px;margin-top: 15px;margin-left: 20px;}
}
@media (max-width: 575.98px) {
  .web-clock3{min-height: 60vh;}
  .clock-main{padding: 30px 20px 20px;}
  .clock-main .top-area{font-size: 30px;padding: 10px 10px 20px;}
  .clock-main .middle{font-size: 80px;}
  .clock-main .clock-hours,.clock-main .clock-minutes{text-align: right;min-width: 70px;  margin-right: 10px;margin-left: 10px;}
  .clock-main .clock-colon{padding-top: 0px;margin-top: -5px;}
  .clock-main .clock-ampm{font-size: 20px;margin-top: 10px;margin-left: 30px;}
}

#btn-background:hover, #btn-brightness:hover, #btn-autocolor:hover{
  font-weight: 500;
  color:#63AC45;
}   
#btn-background:active, #btn-brightness:active, #btn-autocolor:active{
  color: #FF4500; 
} 


/*----------      web-clock 4  ---------*/
.web-clock4{
  /* background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); */
  font-family: 'Montserrat', 'sans-serif';
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.web-clock4:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(129.29deg, rgba(0, 0, 0, 0.6) 16.77%, rgba(0, 0, 0, 0.3) 74.33%);
}

.web-clock4 .clock-day:before {
  content: var(--timer-day);
}
.web-clock4 .clock-hours:before {
  content: var(--timer-hours);
}
.web-clock4 .clock-minutes:before {
  content: var(--timer-minutes);
}
.web-clock4 .clock-seconds:before {
  content: var(--timer-seconds);
}
.web-clock4 .clock-container {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #080808;
  border-radius: 5px;
  padding: 60px 20px;
  box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.15), 0 15px 90px 30px rgba(0, 0, 0, 0.25);
  display: flex;
}
.web-clock4 .clock-col {
  padding-top: 100px;
  text-align: center;
  margin-right: 40px;
  margin-left: 40px;
  min-width: 200px;
  position: relative;
  font-size: 20rem;
  color:#696969;
}

.web-clock4 .clock-col:not(:last-child):before, .clock-col:not(:last-child):after {
  content: "";
  background-color: rgba(255, 255, 255, 0.3);
  height: 8px;
  width: 8px;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: -42px;
  margin-top: -40px;
  font-size: 2rem;
}

.web-clock4 .clock-seconds{
  font-size: 10rem;
}
.web-clock4 .clock-col:not(:last-child):before {
  top: 35%;
}
.web-clock4 .clock-col:not(:last-child):after {
  top: 50%;
}
.web-clock4 .clock-timer:before {
  color: #fff;
  font-size: 0.2rem;
  text-transform: uppercase;
}
.web-clock4 .clock-label {
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  font-size: 2rem;
  margin-top: 160px;
}



@media only screen and (min-width: 768px) and (max-width: 991px) {
  .web-clock4 .clock-col {padding-top: 40px;margin-right: 60px;margin-left: 0px;font-size: 10rem;}
  .web-clock4 .clock-col:not(:last-child):before, .clock-col:not(:last-child):after {right: 0px;margin-top: -30px;font-size: 2rem;}
  .web-clock4 .clock-seconds{padding-top: 5%;font-size: 6rem;}
  .web-clock4 .clock-label {font-size: 1.5rem;margin-top: 100px;}

}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .web-clock4 .clock-col {padding-top: 20px;margin-right: 0px;margin-left: 0px;font-size: 7rem;}
  .web-clock4 .clock-col:not(:last-child):before, .clock-col:not(:last-child):after {right: 0px;margin-top: -30px;font-size: 2rem;}
  .web-clock4 .clock-seconds{padding-top: 0%;font-size: 4rem;}
  .web-clock4 .clock-label {font-size: 1.2rem;margin-top: 60px;}
}
@media (max-width: 575.98px) {
  .web-clock4 .clock-col {padding-top: 0px;margin-right: 0px;margin-left: 0px;font-size: 4rem;}
  .web-clock4 .clock-col:not(:last-child):before, .clock-col:not(:last-child):after {right: 0px;margin-top: -30px;font-size: 2rem;}
  .web-clock4 .clock-seconds{padding-top: 0%;font-size: 2rem;}
  .web-clock4 .clock-label {font-size: 1rem;margin-top: 30px;}
}

/*---========================
    18. Chat css 
=======================----*/

 /*                      added by Liang at 2022-03-15                        */
 .chat-one {
    position: relative;
    display: block;
    padding: 0px 0 20px;
    box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
  }
  .chat-one .bottom{
    background-color: #fff;
    position: relative;
    display: block;
    padding: 10px 6px 10px 6px;
    margin-top: 15px;
    margin-right: -30px;
  }
  .chat-one .top{
    background: #fff;
    padding:  6px 2px 10px;
    border-radius: 10px 120px 10px 10px;
    box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
    min-height: 480px;
    overflow:auto;
  }
  .chat-one ul{
    list-style-type: none;
    padding: 0 10px 0 30px;
    padding-bottom: 10px;
  }
  .chat-one ul li{
    font: 500 20px "Roboto", sans-serif;
    display: inline-block; 
    padding: 2px 4px 2px 8px;
    font-weight: 650;
  }
  .chat-one ul li:nth-child(1){
    width: 320px;
  }
  .chat-one ul li:nth-child(2){
    width: 200px;
  }
  .chat-one ul li:nth-child(3){
    width: 150px;
  }
  .chat-one ol{
    padding: 0 10px 0 30px;
    list-style: decimal;
    color:#292421;
  }
  .chat-one ol li{
    font: 450 16px "Roboto", sans-serif;
    padding: 2px 4px 2px 8px;
    background: #f6f6f6;
    color: #555;
    position: relative;
    border-bottom: 1px solid #e6e6e6;
    height: auto;
    line-height: 1.7em;
    color:#4F4F4F;
  }
  .chat-one ol li a{
    font-weight: 550;
    color: darkblue;
  } 
  .chat-one ol li:nth-child(even){background: #f2f2f2;}
  .chat-one ol li span{
    padding-right: 25px;
  }
  .chat-one ol li span:nth-child(1){
    width: 320px;
    color: darkgreen;
  }
  .chat-one ol li span:nth-child(2){
    width: 200px;
    font-size: 15px;
    margin-top: 3px;
    color:#4F4F4F;
  }
  
  .chat-one ol li span:nth-child(3){
    white-space: pre;
    font-size: 15px;
    margin-top: 2px;
    margin-right: 20px;
    color:#4F4F4F;
  }
  
  .chat-one ol li span:nth-child(4){
    padding-top: 2px;
    display: block;
    color:	#1C1C1C;
    text-align: justify;
  }
  .chat-one ol li span:nth-child(4):hover{
    color:#1E90FF;
  }
  .chat-one ol li span:nth-child(4) a:hover{
    color:#FF4500;
  }
  .chat-one ol li div:hover{color: #FF0000; background-color: none;font-weight: 550;}
  .chat-one ol li div{
    position: absolute;
    top: 0;
    right: 0px;
    color: #FF00FF;
    opacity: 0.9;
    background: rgba(255,255,255,0.6);
    width: 40px;
    height: 40px;
    font-size: 15pt;
    text-align: center;
    padding: 4px;
    font-weight:  bold;
    cursor:  pointer;
  }
  
  
  .chat-one .top{
    position: relative;
    display: block;
  }
  
  .chat-one .section-title {
    margin-bottom: 25px;
  }
  @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .chat-one ul li:nth-child(3){width: 320px;}
  }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .chat-one ul li:nth-child(3){width: 320px;}
    .chat-one .bottom{padding: 10px 15px 6px;margin-top: 18px;margin-right: 0px;}
  }
  @media (max-width: 767.98px) {
    .chat-one {padding: 0px 6px;}
    .chat-one .top{padding:  4px 10px 10px;min-height: 560px;}
    .chat-one ol{padding: 4px 2px 4px 20px;}
    .chat-one ol li{padding: 4px 6px 4px 6px;font-size: 14px;line-height: 1.4em;}
    .chat-one ol li span:nth-child(1){width: 240px;}
    .chat-one ol li span:nth-child(2){font-size: 13px;width: 120px;}
    .chat-one ol li span:nth-child(3){font-size: 13px;margin-right: 0px;}
    .chat-one .bottom{padding: 10px 15px 6px;margin-top: 18px;margin-right: 0px;}

    .chat-one ul li:nth-child(1){width: 240px;}
    .chat-one ul li:nth-child(2){width: 120px;}
    .chat-one ul li:nth-child(3){width: 240px;}
  }
  .chat-one__text {
    margin: 0;
    padding-bottom: 40px;
  }
  
  .chat-one__social-list {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
  }
  
  .chat-one__social-list a {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    color: var(--thm-black);
    background-color: #eef3f7;
    border-radius: 50%;
    font-size: 13px;
    height: 45px;
    width: 45px;
    transform: rotate(0);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 1;
  }
  
  .chat-one__social-list a:hover {
    color: var(--thm-base);
    transform: rotate(360deg);
  }
  
  .chat-one__social-list a:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-color: var(--thm-primary);
    border-radius: 50%;
    transform: scale(0.0);
    transform-origin: center;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52);
    z-index: -1;
  }
  
  .chat-one__social-list a:hover:before {
    transform: scaleX(1.0);
  }
  
  .chat-one__social-list a+a {
    margin-left: 10px;
  }
  
  .chat-one__right {
    position: relative;
    display: block;
  }


/*---========================
    19. User nav 
=======================----*/
.user-nav{
  background-color:#1C231F;;
}
.user-nav nav{
  padding: 15px 10px 15px;
}
.user-nav nav .navbar-toggler-new{
  color:white;
  margin-bottom: 4px;
  font-size: 24px;
  width: 50px;
  background-color: #343a40;
  border: #343a40 1px solid;
}
.user-nav nav button{
  right: 10%;
}

.user-nav nav .navbar-collapse ul li{
  padding-left: 20px;
  padding-right: 20px;
}
.user-nav nav .navbar-collapse ul li:last-child{
  position:absolute;
  right:20px;
}
.user-nav nav .navbar-collapse ul li .nav-link.active{
  color:#FFD700;
}
.user-nav nav .navbar-collapse ul li .nav-link{
  font: 500 18px "Roboto", sans-serif;
  line-height: 1.8rem;
  color:#E8E8E8;
}
.user-nav nav .navbar-collapse ul li .nav-link:hover{
  color: #FF4500;  
}
.user-nav nav .navbar-nav .nav-item.dropdown{
  max-width: 300px;
}
.user-nav nav .navbar-nav .nav-item .dropdown-menu{
  padding: 10px 4px 50px;
  background-color: whitesmoke;
  margin-left: 10px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
}
@media only screen and (max-width: 991.98px) {
  .user-nav nav{padding: 10px 10px 5px;}
  .user-nav nav .navbar-collapse ul{background-color:#343a40;}
  .user-nav nav .navbar-collapse ul li{padding-left: 25px;}
  .user-nav nav .navbar-collapse ul li:last-child{position: relative; padding-left:45px;padding-bottom: 10px;}
  .user-nav nav .navbar-collapse ul li .nav-link{font: 500 17px "Roboto", sans-serif;line-height: 1.9rem;}
}
.user-nav .fieldsDiv{
  display: flex;flex-wrap: wrap;
}



/*---========================
    20. manage page
=======================----*/
.manage-page .section-title__tagline {
  display: inline-flex;
  color: var(--thm-gray);
  font-size: 18px;
  align-items: center;
  line-height: 30px;
  margin-bottom: 2px;
  font-weight: 500;
}

.manage-page .section-title__tagline::before {
  content: '';
  background-color: var(--thm-extra);
  width: 10px;
  height: 2px;
  margin-right: 10px;
}
.manage-page .section-title__title{
  margin: 0;
  font-weight: 800;
  color: var(--thm-black);
  font-size: 40px;
  line-height: 50px;
  padding: 0px 20px 0px;
}


.manage-page .header{
  font-size: 18px;
font-weight: 800;
color:#292421;
text-align: left;
}

.manage-page hr{
margin: 10px 20px 10px 10px;
border: 1px solid #1C1C1C;
opacity: 0.8;
}

.manage-page ul{
list-style-type: none;
  padding: 0;
}
.manage-page ul li{
  font-size: 18px;
  display: inline-block; 
  padding-right: 40px;
  font-weight: 650;
}

.manage-page.manage-one ol{
/* list-style-type: none; */
  padding: 0;
}
.manage-page ol li{
  padding: 20px 12px 20px;
  background: #f6f6f6;
  font-size: 18px;
  color: #555;
  position: relative;
  border-bottom: 1px solid #e6e6e6;
  height: auto;
}

.manage-page ol li:nth-child(even){
  background: #f2f2f2;
}

.manage-page ol li span{
padding-right: 25px;
}

.manage-page ol li span:nth-child(2){
  font-size: 16px;
  margin-top: 6px;
  color: #999;
}

.manage-page ol li div{
  position: absolute;
  top: 0;
  right: 0px;
  background: rgba(255,255,255,0.6);
  width: 40px;
  text-align: center;
  padding: 10px 0;
  font-weight:  bold;
  cursor:  pointer;
}



.manage-page .detail{
  font-size: 17px;
font-weight: 550;
color:#292421;
text-align: left;
}
.manage-page .detail .row{
  border-bottom: 1px solid #B5B5B5;
}
.manage-page .detail .org{
  padding-left: 50px;
}
.manage-page .detail .pro_one .product-image{
max-width: 150px;
transform: scale(1);  
transition: all 0.5s ease 0s;
}
.manage-page .detail .pro_one .product-image:hover{
transform: scale(1.2);
transition: all 0.5s ease 0s;
-webkit-transform: scale(1.3);
-webkit-transform: all 0.5s ease 0s;
}

.manage-page .detail .pro_one, .manage-page .detail .pro_two, .manage-page .detail .pro_three,.manage-page .detail .pro_four, .manage-page .detail .pro_five, .manage-page .detail .pro_six, .manage-page .detail .pro_seven{
font-size: 16px;
font-weight: 550;
color:#292421;
text-align: left;
}

.manage-page .nowdate, .manage-page .nowtime, .manage-page .name, .manage-page .email, .manage-page .organization, .manage-page .telephone, .manage-page .project, .manage-page .pro_action, .manage-page .pro_notes{
font-size: 16px;
font-weight: 550;
color:#292421;
text-align: left;
}

.manage-page .pro_vm, .manage-page .pro_vc{
font-size: 16px;
font-weight: 550;
color:#292421;
text-align: left;
}
.manage-page .detail .pro_action, .manage-page .detail .pro_six{
font-size: 18px;    
color:#292421;
}
.manage-page .detail .pro_action a, .manage-page .detail .pro_six a{
  color:darkblue;
  margin-right: 20px;
}
.manage-page .detail .pro_action a:hover, .manage-page .detail .pro_six a:hover{
color:#FF4500;
transform: scale(1.05,1.05);
}
.manage-page .detail .pro_action a:active, .manage-page .detail .pro_six a:active{
color:lightgreen;
transform: scale(1.05,1.05);
}
.manage-page .detail .pro_notes{
  max-height: 90px;
  overflow-y: auto;
}  

.manage-page .detail .pro_notes a{
  color:#0000CD;
  font-size:17px;
} 
.manage-page .detail .pro_notes a:active{
  color: #FF4500; 
}
.manage-page .detail .pro_notes a:hover{
  color:#63AC45;
}


.manage-page .detail .pro_action a{
  font-size: 20px;
  padding-right: 5px;
}
@media only screen and (max-width: 576px){
  .manage-page .detail .pro_action a{font-size: 16px;}
}

.manage-page .detail .pro_title:hover{
  color:#FF4500;
}
.manage-page .detail .name:hover{
  color:#63AC45;
}


.manage-page .detail .input-control{
padding: 0px 5px;
margin-top: 2px;
margin-left: 6px;
margin-right: 6px;
width: 46px;
height: 44px;
border:1px solid #ebebeb;
border-radius: 10px;
font-family: "Inter", sans-serif; 
text-align: center;
} 
.manage-page .detail .input-control:active, .manage-page .detail .input-control:focus {
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
border-color: #3b5d50;
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); 
}
.manage-page .detail .input-control::-webkit-input-placeholder {
font-size: 14px; 
}
.manage-page .detail .input-control::-moz-placeholder {
font-size: 14px; 
}
.manage-page .detail .input-control:-ms-input-placeholder {
font-size: 14px; 
}
.manage-page .detail .input-control:-moz-placeholder {
font-size: 14px; 
}

.manage-page .bottom{
  background-color: #fff;
  position: relative;
  display: block;
  padding: 10px 4px 10px 10px;
  margin-top: 15px;
}

/* added by Liang  2023-02-10 */
@media only screen and (min-width: 2000px)  {
}
@media only screen and (min-width: 1600px) and (max-width: 1999.98px) { 
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {

}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .manage-page .header{font-size: 16px;}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .manage-page .detail .pro_one .product-image{
      max-width: 100px;
      transform: scale(1);  
      transition: all 0.5s ease 0s;
  }
  .manage-page .header{font-size: 16px;}
  .manage-page .nowdate, .manage-page .nowtime, .manage-page .name, .manage-page .email, .manage-page .organization, .manage-page .telephone, .manage-page .project, .manage-page .pro_action, .manage-page .pro_notes, .manage-page .pro_vm, .manage-page .pro_vc{
      font-size: 15px;
  }
  .manage-page .detail .pro_one{
      padding-right: 0px;
      padding-left: 4px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .manage-page .content hr{ margin: 10px 5px;}
  .manage-page .detail .pro_one .product-image{
      max-width: 80px;
      transform: scale(1);  
      transition: all 0.5s ease 0s;
  }
  .manage-page .header{font-size: 15px;}
  .manage-page .nowdate, .manage-page .nowtime, .manage-page .name, .manage-page .email, .manage-page .organization, .manage-page .telephone, .manage-page .project, .manage-page .pro_action, .manage-page .pro_notes, .manage-page .pro_vm, .manage-page .pro_vc{
      font-size: 14px;
  }
  .manage-page .detail .pro_one{
      padding-right: 0px;
      padding-left: 10px;
  }
  .manage-page .detail .input-control{
      padding: 0px 5px;
      margin-top: 1px;
      width: 38px;
      height: 40px;
  } 
}
@media (max-width: 575.98px) {
  .manage-page .content hr{ margin: 10px 0px;}
  .manage-page .detail .pro_one .product-image{
      max-width: 70px;
      transform: scale(1);  
      transition: all 0.5s ease 0s;
  }
  .manage-page .header{font-size: 14px;}
  .manage-page .nowdate, .manage-page .nowtime, .manage-page .name, .manage-page .email, .manage-page .organization, .manage-page .telephone, .manage-page .project, .manage-page .pro_action, .manage-page .pro_notes, .manage-page .pro_vm, .manage-page .pro_vc{
      font-size: 12px;
  }
  .manage-page .detail .input-control{
      padding: 0px 5px;
      margin-top: 2px;
      width: 28px;
      height: 34px;
  } 
}


/*---========================
    21. Login css
=======================----*/
.new-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 16px 30px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 7px;
  color: #fff;
  line-height: 21px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  width:160px;
  margin: 10px 20px;
}
.new-btn i {
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}
.new-btn.btn-green {
  background-color: #63AC45;
}
.new-btn.btn-green:hover {
  background-color: #1C231F;
  color: #fff;
}

@media (min-width: 992px) {
  .home-bg3 {
    background-image: url("../../image/home/bg3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 40vh;
  }
}


/*----   log in page  ----*/
.wrapper{
  text-align: center;
}
.wrapper .home{
  font-size: 32px;
  color:darkgreen;
  padding-bottom: 10px;
}
.wrapper .text{
  font: 400 16px "Roboto", sans-serif;
  line-height: 1.8rem;
  padding: 20px 0px 10px;
}
.wrapper .text h2{
  font-size: 32px;
}

.wrapper .input-data .form-floating{
  width:90%;
  margin-left: 5%;
  text-align: center;
}
.wrapper .input-data a{
  font-size: 18px;
  font-weight: 600;
  color: #1C231F;
}
.wrapper .home:hover, .wrapper .input-data a:hover{
  color:#FF4500;
}


/*----   loggedin page  ----*/
.main-page{
  width: 96%;  
  margin-left:2%;
  padding: 0px;
  text-align: left;
}

.main-page .main-title h4{
  font: 500 28px "Roboto", sans-serif;
  padding-right: 30px;
  padding-top: 2px;
}

.main-page .main-title .selectFolder{
  font: 500 28px "Roboto", sans-serif;
  color:#63AC45;
  font-weight: 500;
  width: calc(25% + 5rem);
  max-width: 300px;
  padding-left: 20px;
  background-color: whitesmoke;

}
.main-page .main-title ul{
  list-style-type: none;
  padding: 0;
}
.main-page .main-title ul li{
  font: 450 22px "Roboto", sans-serif;
  display: inline-block; 
  padding-right: 30px;
}

@media only screen  and (max-width: 767px) {
  .main-page .main-title h4{font-size: 20px;padding-right: 10px; padding-top: 8px;}
  .main-page .main-title .selectFolder{width: 10rem;font-size:18px; padding-top: 10px;}
}
.main-page .section-title__tagline {
  display: inline-flex;
  color: var(--thm-gray);
  font-size: 18px;
  align-items: center;
  line-height: 30px;
  margin-bottom: 2px;
  font-weight: 500;
}
.main-page .section-title__tagline::before {
  content: '';
  background-color: var(--thm-extra);
  width: 10px;
  height: 2px;
  margin-right: 10px;
}
.main-page .section-title__title{
  margin: 0;
  font-weight: 800;
  color: var(--thm-black);
  font-size: 40px;
  line-height: 50px;
  padding: 0px 20px 0px;
}


/*----   main-page header   ----*/
.main-page .header{
  font-size: 18px;
  font-weight: 800;
  color:#292421;
  text-align: left;
  padding-top: 50px;
}

.main-page hr{
  margin: 10px 20px 10px 10px;
  border: 1px solid #1C1C1C;
  opacity: 0.8;
}

.main-page ul{
  list-style-type: none;
  padding: 0;
}
.main-page ul li{
  font-size: 18px;
  display: inline-block; 
  padding-right: 40px;
  font-weight: 650;
}

.main-page ol{
  /* list-style-type: none; */
  padding: 0;
}
.main-page ol li{
  padding: 20px 12px 20px;
  background: #f6f6f6;
  font-size: 18px;
  color: #555;
  position: relative;
  border-bottom: 1px solid #e6e6e6;
  height: auto;
}



.main-page .detail{
  font-size: 17px;
  font-weight: 550;
  color: #555;
  text-align: left;
}
.main-page .detail .main-area .row{
  border-bottom: 1px solid #B5B5B5;
}
.main-page .detail .fileTime, .main-page .detail .pro_action, .main-page .detail .pro_notes{
  font: 350 18px "Roboto", sans-serif;
  padding-top: 15px;
  color:#555;
  text-align: left;
}
.main-page .detail .pro_action{
  left: 0;
}
.main-page .detail .pro_action button{
  font-size: 18px;    
  color:#1C231F;
  padding-right:16px;
  background-color: white;
  text-align: left;
}
.main-page .detail .pro_action button:hover{
  color:#FF4500;
  transform: scale(1.05,1.05);
}
.main-page .detail .pro_action button:active{
  color:lightgreen;
  transform: scale(1.05,1.05);
}


.main-page .detail .pro_notes{
  font-weight: 500;
  color:#292421;
  padding-left: 10px;
  max-height: 120px;
  overflow-y: auto;
}
.main-page .detail .pro_notes a{
  color: #63AC45;
  margin-right: 4px;
}
.main-page .detail .pro_notes a:hover{
  color:#FF4500;
  transform: scale(1.02,1.02);
}
.main-page .detail .pro_notes a:active{
  color:lightgreen;
  transform: scale(1.02,1.02);
}
.main-page .main-area-header{
  font: 500 28px "Roboto", sans-serif;
  padding-bottom: 10px;
}


/* added by Liang  2025-12-30 */
/*    table design for job-one */
.job-one table{
  text-align: center;
  border-collapse: collapse;
}
.job-one table th{
  font: 550 18px "Roboto", sans-serif;
  padding: 15px 5px;
  border-top: 1px solid #9C9C9C;
  border-bottom: none;
  /* background-color: #BFEFFF; */
}
.job-one table th:nth-child(1){
  padding-left: 8px;
  border-right: 1px solid#9C9C9C;
}
.job-one table tr{
  color:#292421;
}
.job-one table td{
  font: 450 16px "Roboto", sans-serif;
  padding: 10px 5px;
  border-top: 1px solid #9C9C9C;
  border-bottom: 1px solid #9C9C9C;
}
.job-one table td a{
  font-weight: 550;
}
.job-one table td:hover{
  color: #63AC45; 
}
.job-one table td:nth-child(1){
  text-align: left;
  padding-left: 8px;
  background-color: #F0F8FF;
  border-right: 1px solid#9C9C9C;
}
.job-one table td:nth-child(6) a{
  font-weight: 700;
  color:#1E90FF;
}
.job-one table td:nth-child(1):hover{
  color:#FF4500; 
}
.job-one table td:nth-child(3):hover{
  color:#8470FF; 
}
.job-one table td:nth-child(6) a:hover, .job-one table td.topic:hover{
  color: #63AC45;
}
.job-one table td.article{
  font-weight: 500;
  color:#1E90FF;
}
.job-one table td.article:hover{
  color:#0000FF; 
}
.job-one table td s{
  color:#1874CD;
  font-weight: 600;
}
.job-one table td b{
  color:red;
  font-weight: 700;
}
.job-one table th:hover{
  color:#FF4500; 
}

.job-one table td:nth-child(1),.job-one table td:nth-child(2),.job-one table td:nth-child(3),.job-one table td:nth-child(4){
  text-align: left;
  padding-left: 2%;
}


@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .design-one ol li, .design-two ol li, .design-three ol li, .design-four ol li, .design-five ol li, .design-six ol li, .adv-one ol li, .adv-two ol li, .adv-three ol li, .adv-four ol li, .card-one ol li, .card-two ol li, .color-one ol li{
    font-size:17px;
  }
  .design-one .title, .design-two .title, .design-three .title, .design-four .title, .design-five .title, .design-six .title, .card-one .title, .card-two .title, .color-one .title{
    font-size:22px;
  }
  .adv-one .title, .adv-two .title, .adv-three .title, .adv-four .title, .job-one .title{font-size:24px;  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .design-one ol li, .design-two ol li, .design-three ol li, .design-four ol li, .design-five ol li, .design-six ol li, .adv-one ol li, .adv-two ol li, .adv-three ol li, .adv-four ol li, .card-one ol li, .card-two ol li, .color-one ol li{
    font-size:16px;
  }
  .design-one .title, .design-two .title, .design-three .title, .design-four .title, .design-five .title, .design-six .title, .card-one .title, .card-two .title, .color-one .title{
    font-size:20px;
  }
  .adv-one .title, .adv-two .title, .adv-three .title, .adv-four .title, .job-one .title{font-size:22px;  }
  .adv-two ol li a{font-size: 16px;}
  .adv-two ol li .conf{width: 100%;display: block;}
  .adv-two table th{padding: 5px 2px;font-size: 14px;}
  .adv-two table td{padding: 5px 2px;font-size: 12px;}
  .job-one table th{padding: 5px 2px;font-size: 14px;}
  .job-one table td{padding: 5px 2px;font-size: 12px;}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px){
  .design-one ol li, .design-two ol li, .design-three ol li, .design-four ol li, .design-five ol li, .design-six ol li, .adv-one ol li, .adv-two ol li, .adv-three ol li, .adv-four ol li, .card-one ol li, .card-two ol li, .color-one ol li{
    font-size:14px;
  }
  .design-one .title, .design-two .title, .design-three .title, .design-four .title, .design-five .title, .design-six .title, .card-one .title, .card-two .title, .color-one .title{
    font-size:18px;
  }
  .adv-one .title, .adv-two .title, .adv-three .title, .adv-four .title{font-size:19px;  }
  .adv-two ol li span, .adv-two ol li .location{width:170px;}
  .adv-two ol li a{font-size: 14px;}
  .adv-two ol li .conf{width: 100%;display: block;}
  .adv-two table th, .job-one table th{padding: 5px 2px;font-size: 11px;}
  .adv-two table td, .job-one table td{padding: 5px 2px;font-size: 10px;} 
}

@media (max-width: 575.98px){
  .design-one ol li, .design-two ol li, .design-three ol li, .design-four ol li, .design-five ol li, .design-six ol li, .adv-one ol li, .adv-two ol li, .adv-three ol li, .adv-four ol li, .card-one ol li, .card-two ol li, .color-one ol li{
    font-size:12px;
  }
  .design-one .title, .design-two .title, .design-three .title, .design-four .title, .design-five .title, .design-six .title, .card-one .title, .card-two .title, .color-one .title{
    font-size:16px;
  }
  .adv-one .title, .adv-two .title, .adv-three .title, .adv-four .title{font-size:18px;  }

  .adv-two ol li span, .adv-two ol li .location{width:160px;}
  .adv-two ol li a{font-size: 11px;}
  .adv-two ol li .conf, .adv-two ol li .conf-link{width: 100%;display: block;}
  .adv-two table th:nth-child(1), .job-one table th:nth-child(1){padding-left: 2px;}
  .adv-two table td:nth-child(1), .job-one table td:nth-child(1){padding-left: 2px;}
  .adv-two table th, .job-one table th{padding: 5px 0px;font-size: 11px;}
  .adv-two table td, .job-one table td{padding: 5px 0px;font-size: 10px;}
}


























/* added by Liang  2023-05-26 */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .manage-page .header{font-size: 16px;}
  .main-page .detail .fileTime, .main-page .detail .pro_action, .main-page .detail .pro_notes{font-size: 15px;}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .wrapper .text{font-size: 15px;}
  .wrapper .text h2{font-size: 24px;}

  .main-page .header{font-size: 15px;}
  .main-page .detail .fileTime, .main-page .detail .pro_action, .main-page .detail .pro_notes{font-size: 14px;}
}
@media (max-width: 575.98px) {
  .main-page{width: 100%;  margin-left:0%;}
  .wrapper .home{font-size: 24px;}
  .wrapper .text{font-size: 13px;   line-height: 1.2rem;;}
  .wrapper .text h2{font-size: 18px;}
  
  .main-page .main-title h4, .main-page .main-title .selectFolder{font-size:16px; padding-right: 8px;}
  .main-page .main-title ul li{display:block;font-size: 16px;width: 155px;}

  .main-page .header{font-size: 14px;}
  .main-page .detail{font-size:12px}
  .main-page .detail .fileTime, .main-page .detail .pro_action, .main-page .detail .pro_notes{font-size: 12px;} 
  .main-page .detail .pro_action button{font-size: 16px;}
  .main-page .main-area-header{font-size: 20px;}
}















  /* added by Liang  2023-03-10 */
@media only screen and (min-width: 2000px)  {
}
@media only screen and (min-width: 1600px) and (max-width: 1999.98px) { 
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
}
@media (max-width: 575.98px) {
}