@import url('https://fonts.googleapis.com/css?family=Quicksand:500,600&display=swap');
html{
    line-height:1.2;
    /*font-size:14px;*/
}

/** code by webdevtrick ( https://webdevtrick.com ) **/
/*::-webkit-scrollbar {*/
/*   width: 20px;*/
/*}*/
 
/*::-webkit-scrollbar-thumb {   */
/*  border-radius: 20px;*/
/*  background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));*/
/*  box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}*/
 
/*::-webkit-scrollbar-track {     */
/*  background-color: #fff;*/
/*  background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);*/
/*}*/
 
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb {   
  border-radius: 12px;
  background: #4c4c4c;  /*background: linear-gradient(transparent,#4CAF50); background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#4CAF50));*/
  /*box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);*/
}
 
::-webkit-scrollbar-track {     
  background-color: #fff;  /*background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);*/
}


.slider-bg
{
	background: #070000;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #070000, #4C0001, #070000);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #070000, #4C0001, #070000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.carousel-header
{
	font-size:4rem !important;
	padding:0.6rem 0;
	line-height:100% !important;
}
.square-img
{
  width: 90%;
}

.square-img:after
{
  content: "";
  display: block;
  padding-bottom: 100%;
}
.checkbox-green[type="checkbox"].filled-in:checked + label:after
{
    border: 2px solid #4CAF50 !important;
    background-color: #4CAF50 !important;
}
.checkbox-red[type="checkbox"].filled-in:checked + label:after
{
    border: 2px solid #AF4C50 !important;
    background-color: #AF4C50 !important;
}
.radio-green[type="radio"].filled-in:checked + label:after
{
    border: 2px solid #4CAF50 !important;
    background-color: #4CAF50 !important;
}
.radio-red[type="radio"].filled-in:checked + label:after
{
    border: 2px solid #AF4C50 !important;
    background-color: #AF4C50 !important;
}

/*.input-green[type=text]:focus + label, .input-green[type=password]:focus + label, .input-green[type=email]:focus + label, .input-green[type=number]:focus + label       /* label focus color */
.input-green:focus + label
{
 color: #4CAF50 !important;
}
/*.input-green[type=text]:focus,  .input-green[type=password]:focus, .input-green[type=email]:focus, .input-green[type=number]:focus               /* label underline focus color */
.input-green:focus
{
 border-bottom: 1px solid #4CAF50 !important;
 box-shadow: 0 1px 0 0 #4CAF50 !important;
}


.input-red:focus + label
{
 color: #AF4C50 !important;
}
.input-red:focus
{
 border-bottom: 1px solid #AF4C50 !important;
 box-shadow: 0 1px 0 0 #AF4C50 !important;
}


.msg-left
{
    background-color:#eeeeee; padding-bottom:10px  !important; text-align:left; border-radius:10px 10px 10px 0px;
}
.msg-right
{
    background-color:#00a200; padding-bottom:10px  !important; text-align:right; color:#fff; border-radius:10px 10px 0px 10px;
}
.btn,.btn-flat
{
    text-transform:none;
}
.btn-circle
{
    /*border-radius:50% !important;*/
    border-radius:10px;
}
.btn-ac{
    font-size:0.9rem;
}
.btn-ac-large{
    font-size:1rem;
    padding:1em;
}
.btn-ac-green{
    border: 1px solid #e8f5e9;
    border: 2px solid #a5d6a7;
    border: 2px solid #fff;
}
.btn-ac-grey{
    border: 2px solid #eeeeee;
    border: 2px solid #fff;
}
.btn-ac-red{
    border: 1px solid #aa0000;
    border: 2px solid #F44336;
    border: 2px solid #fff;
}
.btn-ac-border{
    border: 2px solid #a5d6a7;
    border: 2px solid #4CAF50;
}
h1{
    font-size: 2rem;
    line-height: 105%;
    margin: .85rem 0 .65rem 0;
}
h2{
    font-size: 1.75rem;
}
h3{
    font-size: 1.5rem;
    line-height: 105%;
    margin: 0.85rem 0 .65rem 0;
}
h4{
    font-size: 1.35rem;
}
h5{
    font-size: 1.2rem;
}
h6{
    font-size: 1.05rem;
}
.card-panel h5{
    font-size: 1.35rem;
}

.condensed{
    letter-spacing: -1px;
}

.tabs .indicator{
    background-color:#689f38;
}
.tabs .tab a:focus, .tabs .tab a:focus.active{
    background-color:transparent;
}
body{
    font-family: 'Quicksand', 'Roboto', sans-serif; font-weight:500; font-size:15px; scrollbar-width: 12px; scrollbar-color: #4c4c4c #fff;
}
h1,h2,h3,h4,h5,h6{
    font-weight:600;
    line-height: 105%;
    margin: 0.85rem 0 .65rem 0;
}
p{
    margin:0.5em 0; font-size:15px; font-size:1rem; line-height:1.5;
}
.f13px{
    font-size:13px; line-height:1.2;
}
.f18px{
    font-size:18px; line-height:1.5;
}
.justify{
    text-align:justify;
}
.overflow-hidden{
    overflow:hidden;
}
.ui-datepicker-title{
    display:inline !important;
}
.ui-datepicker-month{
    width:35% !important; height:80% !important; display:inline-block; background:#fff; color:#000; font-weight:500; font-size:10px; padding:0 !important;
}
.ui-datepicker-year{
    width:35% !important; height:80% !important; display:inline-block; background:#fff; color:#000; font-weight:500; font-size:10px; padding:0 !important;
}

/*
.marquee {
/ *
    width: 400px;
    line-height: 50px;
	background-color: Pink;
	color: Black;
* /
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
*/

.marquee {
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  font-weight:600;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  /* show the marquee just outside the paragraph */
  animation: marquee 45s linear infinite;
}
.marquee span:hover {
  animation-play-state: paused;
  cursor:pointer;
}
/* Make it move https://stackoverflow.com/a/21233577/4423079 */
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

.green-gradient{
    background: rgb(20,208,32);
    background: -moz-radial-gradient(circle, rgba(20,208,32,1) 0%, rgba(76,175,80,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(20,208,32,1) 0%, rgba(76,175,80,1) 100%);
    background: radial-gradient(circle, rgba(20,208,32,1) 0%, rgba(76,175,80,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#14d020",endColorstr="#4caf50",GradientType=1);
}
.zodiac-box-a{
    display:inline-block;
    font-weight:600;
    /*letter-spacing: -0.5px;*/
    /*font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed*/
}
.status-border{
    border: 5px dotted #f00;
}

/*https://itzone.com.vn/en/article/about-the-css-section-separator-generator/*/
/*https://wweb.dev/resources/css-separator-generator/*/

.skewed {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  z-index: 0;
  transform: skewY(6deg);
  transform-origin: top right;
}

.spikes {
  position: relative;
  background: #2c3e50;
  height: 50vh; height: auto;
}

.spikes::after {
  content: '';
  position: absolute;
  right: 0;
  left: -0%;
  top: 100%;
  z-index: 10;
  display: block;
  height: 10px;
  background-size: 10px 100%;
  background-image: linear-gradient(135deg, #4CAF50 25%, transparent 25%), linear-gradient(225deg, #4CAF50 25%, transparent 25%);
  background-position: 0 0;
}
.spikes::before {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 100%;
  z-index: 10;
  display: block;
  height: 10px;
  background-size: 10px 100%;
  background-image: linear-gradient(225deg, #ffffff 25%, transparent 25%), linear-gradient(135deg, #ffffff 25%, transparent 25%);
  background-position: 0 -20px;
}