/*-----------------------------------------------------------------------------------
    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;
}

/*---========================
    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  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) {
}