html { font-size: 14px; position: relative; min-height: 100%; --lh: 1.5rem; line-height: var(--lh); }
body { font-family: 'Montserrat', sans-serif; font-weight: 500; }
h1,h2,h3,h4 { font-weight: 700;  letter-spacing: 0.5px }
h1 { font-size: 30px; margin-bottom: 30px }
h2 { font-size: 24px }
h3 { font-size: 20px }
h4 { font-size: 17px }
.btn-link, a, .pointer { color: #18bcb1; transition: all 0.2s; cursor: pointer }
.btn-link:hover, a:hover, .pointer:hover { color: #139a91; text-decoration: none }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.accept-policy { font-size: 1rem; line-height: inherit; }

.stars-outer { display: inline-block; position: relative; font-family: FontAwesome; }
.stars-outer::before { content: "\f006 \f006 \f006 \f006 \f006"; }

.stars-inner { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; width: 0; }
.stars-inner::before { content: "\f005 \f005 \f005 \f005 \f005"; color: #f8ce0b; }

.circle { border: 0.3em solid #18bcb1; border-radius: 100%; height: 3em; width: 3em; text-align: center; }
.circle p { margin-top: 0.35em; font-size: 1.7em; font-weight: bold; font-family: sans-serif; color: #18bcb1; }

.grid { margin: 0 -.5% }
.grid-item { margin: 0 .5%; width: calc((100% - 4%) / 4); }
.grid.two-column .grid-item { margin: 0 .5%; width: calc((100% - 2%) / 2); }
@media (max-width: 1199px) { .grid-item { width: calc((100% - 3%) / 3); } }
@media (max-width: 1023px) { .grid-item { width: calc((100% - 2%) / 2);} .grid.two-column .grid-item { width: calc((100% - 1%)) } }
@media (max-width: 767px) { .grid-item { width: calc((100% - 1%)) } }
i[class^="fa"] { font-size: 16px }
small i[class^="fa"] { font-size: 0.75rem }
small.s-90 { font-size: 90% }
.card { border: 0; box-shadow: 0 0 12px rgba(0,0,0,0.1); border-radius: 10px;  }
.card-body { padding: 2rem; }
.card-columns { column-count: 4; }

.card-columns { column-count: 4; }
@media (max-width: 1023px) { .card-columns { column-count: 3; } }
@media (max-width: 767px) { .card-columns { column-count: 1; } }

main .btn:not(.loginBtn) { padding: .6rem 2rem }
button, .btn { font-weight: 500 }
.btn-primary { background-color: #18bcb1; border-color: #18bcb1 }
.btn-primary:hover { background-color: #139a91; border-color: #139a91 }
.btn-primary { background-color: #18bcb1; border-color: #18bcb1 }
.btn-primary:hover { background-color: #139a91; border-color: #18bcb1 }
.btn-outline-primary {
    color: #18bcb1;
    background-color: transparent;
    background-image: none;
    border-color: #18bcb1;
}
.btn-outline-primary:hover { color: #fff; background-color: #139a91; border-color: #139a91; }
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(19,154,145, 0.8); }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #139a91; background-color: transparent; }
.btn-info { background-color: #3D74BA; border-color: #3D74BA }
.btn-info:hover { background-color: #34639e; border-color: #34639e }
.btn.btn-arrow-right { padding-right: 50px !important; position: relative }
.btn.btn-arrow-right:before { font-size: 16px; content: ""; display: block;  position: absolute; height: 1px; background: #fff; width: 22px; top: 0; bottom: 0; margin: auto; right: 1rem }
.btn.btn-arrow-right:after { content: ""; position: absolute; width: 7px; height: 7px; transform: rotate(45deg); border-right: 1px solid #fff; border-top: 1px solid #fff; top: 0; bottom: 0; margin: auto; right: 1rem  } 

.bg-light { background-color: #e5e6e7 !important }
.bg-success { background-color: #18bcb1 !important; color: #fff }

.border-success { border-color: #18bcb1 !important }
.border-thick { border-width: 2px !important }
.border-5 { border-width: 5px !important }

.text-success { color: #18bcb1 !important }

.alert-light { background-color: #f7f7f7 }

.rounded { border-radius: 5px !important }

.py-25 { padding-top: .75rem;  padding-bottom: .75rem; }
.my-25 { margin-top: .75rem;  margin-bottom: .75rem; }

.my-5.py-5 > h2 { position: relative; padding-bottom: 40px }
.my-5.py-5 > h2:after { position: absolute; content: ""; background: #ffc107; width: 128px; height: 2px; bottom: 0; margin: auto; left: 0; right: 0 }

.text-black-65 { color: rgba(0,0,0,.65)!important; }

form .form-row .col { max-width: 50% }
form .form-header { position: relative; margin-bottom: 15px }
form .form-header:before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; background: #f2f2f2; bottom: 0px; margin: auto; z-index: 1 }
form .form-header h3 { margin-bottom: 0; font-weight: 300; color: #212121; background: #fff; display: inline-block; padding-right: 20px; position: relative; z-index: 2 }


.switch { position: relative; display: inline-block; width: 40px; height: 20px; vertical-align: top; }
.switch input { opacity: 0; width: 0px; height: 0px; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px;}
.slider:hover { background-color: #aaa; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s;  border-radius: 50%;}
.switch input:not(:disabled):checked ~ .slider { background-color: #18bcb1; }
.switch input:focus ~ .slider { box-shadow: 0 0 1px #18bcb1; }
.switch input:not(:disabled):checked ~ .slider:before { -webkit-transform: translateX(20px); transform: translateX(20px); }
.switch input:disabled ~ .slider { cursor: default; background-color: #efefef;  }
.switch+label { display: inline-block; vertical-align: top; line-height: 26px; margin-bottom: 0px; padding-left: 8px }
.switch .slider { font-size: 0px; margin: 0px; }
.switch.switch-yesno input ~ .slider:after { position: absolute; content: "No"; height: 20px;  right: calc(100% + 8px); top: 0px;  -webkit-transition: .4s; transition: .4s; font-size: 13px; color: #121212;  }
.switch.switch-yesno input:checked ~ .slider:after { content: "Yes" }

.switch.switch-button { width: 200px }
.switch.switch-button .slider { font-size: 0.75rem; text-align: center }
.switch.switch-button .slider:before { display: none }
.switch input:not(:disabled):checked ~ .slider { color: #fff; }
@media (min-width: 1200px) {
  form label { font-size: 12px; font-weight: 600; color: #121212 }
}
@media only screen and (max-width: 1199px) {
  html { font-size: 16px }
}

@media (max-width: 767px) {
  html { font-size: 14px; }
  h1 { font-size: 1.5rem; font-weight: 600 }
  main .btn { width: 100% }
}

.fas.fa-star, .fas.fa-star-half-alt, .far.fa-star { color: #ffc107 }


/* Header
===============================================================================*/
header { box-shadow: 0 0 12px rgba(0,0,0,.05); }
header .LanguageButton span { 
  text-decoration: none; 
  border-radius: 0;  
  background-repeat: no-repeat;
  background-position: center left 5px;  
  padding: 0 0 0 45px;
  font-size: 14px;     
  white-space: nowrap;  
}
header .LanguageButton { padding: 0; border: 0 }
header #LangaugeMenu { z-index: 1; white-space: nowrap; }
header #LangaugeMenu li * { padding: 0.5rem 0 }
header #LangaugeMenu a { padding-left: calc(32px); background-repeat: no-repeat; background-position: center left ; background-size: 20px; font-size: 9pt }
header .LanguageButton[data-language="en"] span,
header #LangaugeMenu a[data-language="en"] { background-image: url(/images/en-flag.png); }
header .LanguageButton[data-language="th"] span,
header #LangaugeMenu a[data-language="th"] { background-image: url(/images/th-flag.png); }
header #LangaugeMenu h6 { margin: 0 }
#AccountPanel a strong { color: #18BCB1; font-size: 15px }
#AccountPanel a { color: #212121;}
@media only screen and (min-width: 1200px) {
  header a { color: #212121 }
  .container { max-width: 1230px }
  header+.container { max-width: 1230px; }
  header { background-image: linear-gradient(to bottom, #18BCB1 40px, #f7f7f7 40px, #f7f7f7 40px);}
  header > div { background-image: linear-gradient(to top, #fff 90px, transparent 90px) }
  header .LanguageButton { color: #fff; line-height: 40px; min-width: 60px; min-height: 40px; padding: 0; border: 0 }
  header img { height: 50px; }         
  header .navbar-brand { padding: 20px 0; position: absolute; top: 40px; }  
  header .navbar { padding: 0; }
  #MenuPanel { flex-basis: 80% }
  header .LanguagePanel .navbar-collapse { right: 0 }
  header > div > div > *:nth-of-type(n+2) { height: 90px }
  #LangaugeMenu li { margin-left: 12px; font-weight: 600 }
  #LangaugeMenu li.active a { color: #18BCB1 }
  #LangaugeMenu h6 { font-size: 12px; }
  #AccountPanel { letter-spacing: 1px }
  #AccountPanel a { padding: 0; line-height: 35px; }
  #AccountPanel li+li { margin-left: 20px }
  
  #AccountPanel button {font-size: 13px; line-height: 33px;padding: 0 10px;margin-left: 20px;border-radius: 3px; text-transform: uppercase;letter-spacing: 1px;}
  #AccountPanel button i { margin-left: 8px }  

  #MainMenu ul { position: relative; margin-right: 12px }
  #MainMenu ul:after { content: ""; position: absolute; right: 0; width: 1px; height: 13px; top: 14px; background: #fff }
  #MainMenu ul > li { display: inline-block; }
  #MainMenu ul > li a { padding: 0 15px;  line-height: 40px; color: #fff }
    
}
@media only screen and (max-width: 1199px) {

  .container { max-width: 100% }
  
  header > div > div{ height: 60px }
  header .navbar {padding: 0;}
  header .navbar-toggler { border: 0 }
  header .navbar-collapse { position: absolute; z-index: 1;  top: 0; width: 100vw; top: 60px; }
  header .navbar-nav { padding: .5rem 1rem; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.1) }
  
  header .LanguageButton span { background-position: center center; background-size: 44px; padding-left: 0; width: 28px; height: 28px; display: block; font-size: 0; margin: auto; border-radius: 18px; margin-top: 16px }
  header .LanguagePanel a { padding-left: 45px; text-decoration: none; color: rgba(0,0,0,.5); display: block; }  

  header .container > *:nth-child(1) { flex-basis: 30% }
  header .container > *:nth-child(2) { order: 2; flex-basis: 44px; }
  header .container > *:nth-child(5) { order: 2; flex-basis: 60px; }
  header .container > *:nth-child(5) .navbar-toggler { padding-right: 0px; padding-left: 0; margin: auto; display: block; flex-basis: 55px; }
  header .container > *:nth-child(4) { margin-right: auto; text-align: center; width: 40% }
  header .container > *:nth-child(4) img { width: 70% }
  .far.fa-user-circle { font-size: 28px; }

  #MainMenu { left: -15px; }
  #LangaugeMenu { left: 0px; }
  #AccountPanel { right: -15px; }
  
}
@media only screen and (max-width: 767px) {  
  header .container > *:nth-child(4) img { width: 100% } 
  header .container > *:nth-child(2),
  header .container > *:nth-child(5) { flex-basis: 36px; }
  header .container > *:nth-child(5) { flex-basis: 43px; }
  header .container > *:nth-child(5) .navbar-toggler { padding-right: 7px; }
  
  header .LanguageButton span { width: 20px; height: 20px; background-size: 32px; margin-top: 20px }
  
  .far.fa-user-circle { font-size: 20px; }
  header .LanguageButton { background-size: 20px; padding-left: 0 }  
}



/* Footer
===============================================================================*/
footer { background: #202529; padding-top: 80px; padding-bottom: 40px; }
footer a { color: rgba(255,255,255,0.5) }
footer h4 { color: #fff; font-weight: 300; margin-bottom: 20px }
footer ul { list-style: none; padding-left: 0 }
footer div > i { color: #18bcb1;  }
footer div > i+a { margin-left: 4px }
footer div a i { color: #fff; font-size: 20px }
footer h4+div { margin-bottom: 6px }
footer .col-lg-3 div a+a { margin-left: 20px; line-height: 36px }
footer .col-lg-3:first-child h4+div a { font-weight: bold }
footer .col-12 { text-align: center }
@media only screen and (min-width: 1200px) {
  body { margin-bottom: 390px; }
  footer {    
    position: absolute;
    bottom: 0;
    width: 100%;    
    height: 390px;
    padding-top: 80px;    
  }
  footer .col-12 { padding-top: 120px }
}
@media only screen and (max-width: 767px) {
  footer .col-lg-3 { margin-bottom: 40px }
}

.loginBtn {
    position: relative;     
    margin: 0.2em;
    padding: 0.5rem 48px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: 0.2em;
    color: #FFF; 
}
.loginBtn:before {
    content: "";    
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
}
.loginBtn:focus { outline: none; }
.loginBtn:active { box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1); }


/*-- Facebook --*/
.loginBtn-facebook {
    background-color: #4663AE;    
    text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn-facebook:before { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') center left 12px no-repeat; }
.loginBtn-facebook:hover, .loginBtn-facebook:focus { background-color: #5B7BD5;  }
/*-- Google --*/
.loginBtn-google { background: #DF4A38; }

.loginBtn-google:before { background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') center left 12px no-repeat; }
.loginBtn-google:hover, .loginBtn-google:focus { background: #E74B37; }



#HomePage .CategoryItem { display: inline-block; width: 20%; vertical-align: top; box-shadow: none }
#HomePage .CategoryItem:nth-of-type(n+6) { margin-top: 3rem }
#HomePage .CategoryItem > div { margin-bottom: 8px; background: #18bcb1 !important; overflow: hidden; width: 60px }
#HomePage .CategoryItem > div:before { content: ""; padding-top: 100%; display: block }
#HomePage .CategoryItem > div:after { content: ""; padding-top: 100%; position: absolute; width: 100%; background: rgba(0,0,0,0.05); top: 0px;  }
#HomePage .CategoryItem > div i { left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 28px; z-index: 1; width: auto; }
#HomePage .CategoryItem > h4 { font-size: 16px; font-weight: 400; color: #565656; transition: color 0.2s; margin-bottom: 0 }
#HomePage .CategoryItem:hover { text-decoration: none;  }
#HomePage .CategoryItem:hover h4 { color: #18bcb1 }

#CategoryItem59 .CategoryItemIcon:before { content: "\f568" }   /* Architects */
#CategoryItem166 .CategoryItemIcon:before { content: "\f78b" }   /* Bricklayers */
#CategoryItem99 .CategoryItemIcon:before { content: "\f863" }   /* Air Condition */
#CategoryItem7 .CategoryItemIcon:before { content: "\f7d9" }    /* Builders */
#CategoryItem122 .CategoryItemIcon:before { content: "\f51a" }  /* Cleaners */
#CategoryItem70 .CategoryItemIcon:before { content: "\f0e7" }   /* Electricians */
#CategoryItem172 .CategoryItemIcon:before { content: "\f1bb" }  /* Gardener */
#CategoryItem27 .CategoryItemIcon:before { content: "\f82c" }   /* Handyman */
#CategoryItem148 .CategoryItemIcon:before { content: "\f5aa" }  /* Painters & Decorators */
#CategoryItem92 .CategoryItemIcon:before { content: "\f043" }   /* Plumbers */
#CategoryItem46 .CategoryItemIcon:before { content: "\f132" }   /* Security */
#CategoryItem55 .CategoryItemIcon:before { content: "\f00a" }   /* Tilers */
#CategoryItem20 .CategoryItemIcon:before { content: "\f018"; }   /* Driveway */
#CategoryItem140 .CategoryItemIcon:before { content: "\f2e6" }   /* Kitchen */
#CategoryItem88 .CategoryItemIcon:before { content: "\f6ea" }    /* Metalworker */
#CategoryItem188 .CategoryItemIcon:before { content: "\f084" }   /* Locksmiths */
#CategoryItem160 .CategoryItemIcon:before { content: "\f400" }   /* Tree Surgeons */
#CategoryItem194 .CategoryItemIcon:before { content: "\f7f9" }   /* Pest Control */
#CategoryItem98 .CategoryItemIcon:before { content: "\f508" }    /* Specialist Tradesmen */
#CategoryItem197 .CategoryItemIcon:before { content: "\f80c" }   /* Roofers */

#CategoryItem224 .CategoryItemIcon:before { content: "\f21c" }
#CategoryItem228 .CategoryItemIcon:before { content: "\f7d9" }
#CategoryItem227 .CategoryItemIcon:before { content: "\f1e6" }
#CategoryItem225 .CategoryItemIcon:before { content: "\f21a" }
#CategoryItem226 .CategoryItemIcon:before { content: "\f6fa" }
#CategoryItem223 .CategoryItemIcon:before { content: "\f5de" }
#CategoryItem229 .CategoryItemIcon:before { content: "\f79f" }
#CategoryItem231 .CategoryItemIcon:before { content: "\f5c4" }
#CategoryItem230 .CategoryItemIcon:before { content: "\f015" }
#CategoryItem232 .CategoryItemIcon:before { content: "\f059" }

#HomePage .ServiceRequestList a { display: block; background: #f7f7f7; padding: 20px 15px; position: relative; border-radius: 10px }
#HomePage .ServiceRequestList a:nth-of-type(3n+1) { margin-left: 0 }
#HomePage .ServiceRequestList a:nth-of-type(n+4) { margin-top: 3rem }
#HomePage .ServiceRequestList h4 { font-size: 18px; color: #121212; margin-bottom: 12px }
#HomePage .ServiceRequestList h4+div { position: absolute; right: 10px; top: -11px } 
#HomePage .ServiceRequestList h4+div small { background: #18bcb1; border-radius: 40px; padding: 3px 8px; margin-bottom: 12px; color: #fff }
#HomePage .ServiceRequestList h4+div small label { margin: 0 }
#HomePage .ServiceRequestList p { color: #a0a0a0 }

#HomeBanner img { max-width: 100% }
#HomeBanner h1 { display: none }
#HomeBanner { position: relative; background: #E6E7E8; font-size: 16px; margin-bottom: 40px }
#HomeBanner .col-lg-4:nth-child(1) { position: relative; z-index: 0 }
#HomeBanner .col-lg-4:nth-child(1):before { content:""; width: 90%; padding-top: 90%; border: 24px solid #19BCB1; position: absolute; z-index: -1; top: 24px }
#HomeBanner .col-md-6:first-child i.fa-check-circle { color: #19BCB1; font-size: 18px; margin-right: 8px }
#HomeBanner .col-md-6:first-child i.fa-chevron-right { margin-left: 24px }
#HomeBanner .col-lg-8 .col-lg-6:last-child .d-flex.flex-wrap > div { max-width: 80px; flex-basis: 80px; margin-bottom: 16px; font-size: 12px }
#HomeBanner .col-lg-8 .col-lg-6:last-child .d-flex.flex-wrap img { border: 3px solid #EE3C3A; margin-bottom: 4px }
#HomeBanner .col-lg-8 .col-lg-6:last-child .d-flex.flex-wrap > div a { color: #000 }
#HomeBanner .col-lg-8 .col-lg-6:last-child h2 { font-size: 40px }
#HomeBanner .btn-primary { background: linear-gradient(to right, #009994, #44C0B1) }

@media (min-width: 1200px) {
  #HomeBanner .btn:not(.mt-2) { height: 50px; line-height: 50px; padding-top: 0; padding-bottom: 0; font-size: 16px }
  #HomeBanner .btn.btn-danger { width: 100% }
}
@media (max-width: 1199px) {
  #HomeBanner { font-size: 14px }
  #HomeBanner h3 { font-size: 16px }
  #HomeBanner .col-md-4:nth-child(1):before { top: 80px }
}
@media (max-width: 959px) {
  #account .form-group { position: relative }
  #account .fas { right: calc(1px + .75rem); top: 11px; font-size: 12px; color: #202529 }
}

@media only screen and (max-width: 767px) {
  #HomePage .CategoryItem { width: 50%; vertical-align: top }  
  #HomePage .CategoryItem:nth-of-type(n+3) { margin-top: 40px }
  #HomePage .ServiceRequestList a { width: 100%; margin-left: 0px }
  #HomePage .ServiceRequestList a:nth-of-type(n+2) { margin-top: 3rem }
}


/* Service Page
===============================================================================*/
 .CategoryItem { padding: .725rem; min-height: calc(48px + 1.75rem); border: 0px solid #e4e4e4; margin-bottom: 10px; background: #fff;box-shadow: 0 0 12px rgba(0,0,0,0.1); border-radius: 10px; }
 .CategoryItem i { width: 20px; text-align: center }
 .CategoryItem a { color: #121212 }
 .CategoryItem a:hover { color: #18bcb1 }
 .CategoryItem h4 { font-size: 16px; margin-bottom: 0px }
 .CategoryItem h4 i:not(.fa-star) { position: absolute; margin-right: 12px; color: #18bcb1; font-size: 24px; vertical-align: top; width: 48px; height: 48px; border-radius: 50px; line-height: 48px }
 .CategoryItem h4 > a { display: inline-block; padding-top: 16px; padding-left: 60px }
 .CategoryItem .Popular i { width: 17px; text-align: center; margin: auto; position: absolute; left: 40px; background: #ffc107; border-radius: 18px; height: 17px; margin: 0; color: #fff; font-size: 10px; }
 .CategoryItem .Popular i:before { display: block; margin-left: 1px; margin-top: 3px; font-size: 10px }
 .CategoryItem ul { padding-left: 80px; padding-top: 8px; color: #18bcb1; list-style: none; margin-bottom: 0 }
 .CategoryItem li { position: relative; padding: 0.25rem 0; font-size: 13px }
 .CategoryItem li > div { display: inline }
 .CategoryItem li .Popular i { left: -24px; top: 5px }
 .CategoryItem li:before { content: ""; position: absolute; width: 6px; height: 6px; border-right: 2px solid #18bcb1; border-top: 2px solid #18bcb1; left: -20px; transform: rotate(45deg); top: 10px } 


@media only screen and (max-width: 767px) {
  #Services h1+div ol li { width: 100% }
}


#RegistrationPage > div { padding-top: 0px; padding-bottom: 20px }
#RegistrationDetails { background: none; border: 0; }
#RegistrationDetails h3 { font-weight: 600; font-size: 28px; margin-bottom: 20px; }

/* Chat containers */
.chat-container {border: 2px solid #dedede; background-color: #f1f1f1;  border-radius: 5px; padding: 10px; margin: 10px 0;}

/* Darker chat container */
.darker {border-color: #ccc; background-color: #ceeae8;}

/* Clear floats */
.chat-container::after {content: ""; clear: both; display: table;}

/* Style images */
.chat-container img {float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%;}

/* Style the right image */
.chat-container img.right {float: right; margin-left: 20px; margin-right: 0;}

/* Style time text */
.time-right {float: right; color: #000;}

/* Style time text */
.time-left {float: left; color: #000;}

.IconSet { margin-bottom: 8px; background: #18bcb1 !important; overflow: hidden; position: relative; width: 48px; border-radius: 24px }
.IconSet:before { content: ""; padding-top: 100%; display: block }
.IconSet:after { content: ""; padding-top: 100%; position: absolute; width: 100%; background: rgba(0,0,0,0.05); top: 0px; left: 50% }
.IconSet i { position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 24px; z-index: 1; color: #fff }

.OfferList .OfferPrice { font-size: 28px; font-weight: 700; }
.OfferList .OfferApproved i { font-size: 18px; vertical-align: top; margin-right: 8px }

.UserRequestInfo { line-height: 21px }
.UserRequestInfo i { font-size: 20px; vertical-align: top; margin-right: 4px }
.UserRequestInfo > div:last-child h4 { font-size: 36px; margin: 0; line-height: 1 }
.UserRequestInfo > div label { margin: 0px }
.UserRequestInfo > div label+* { padding-left: 26px }

.header-devider { position: relative; }
.header-devider:before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; background: #f2f2f2; bottom: 0px; margin: auto; z-index: 1 }
.header-devider > * { margin-bottom: 0; font-weight: 300; color: #212121; background: #fff; display: inline-block; padding-right: 20px; position: relative; z-index: 2 }

.card-text + p {
    --max-lines: 3;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
    padding-right: 1rem; /* space for ellipsis */
}


.ServiceRequests { background: linear-gradient(to bottom, #dedede 0px, #f3f3f3 50px); padding: 50px 0 }
.ServiceRequests h1 { font-weight: bold; letter-spacing: 2px }
.ServiceRequests .ServiceRequestList > a { border-radius: 10px; padding: 28px; border: 0; box-shadow: 0 0 12px rgba(0,0,0,0.1) }
.ServiceRequests .ServiceRequestList > a:hover { background-color: #fff }
.ServiceRequests .ServiceRequestList > a+a { margin-top: 30px; }
.ServiceRequests .ServiceRequestList h4 { font-weight: 700; color: #000; letter-spacing: 1px }
.ServiceRequests .ServiceRequestList h4+span { color: #000; font-weight: 600 }
.ServiceRequests .ServiceRequestList .Info { font-size: 13px; line-height: 22px; font-weight: 600 }
.ServiceRequests .ServiceRequestList .Info > span { padding-left: 30px; position: relative }
.ServiceRequests .ServiceRequestList .Info > span:before { content: ""; position: absolute; left: 0; width: 22px; height: 22px; background-image: url(/images/icons-22px.png); background-repeat: no-repeat; vertical-align: top; margin-right: 10px }
.ServiceRequests .ServiceRequestList .Info .Location:before { background-position: left -22px top }
.ServiceRequests .ServiceRequestList .btn i:before { display: none }
.ServiceRequests .ServiceRequestList .btn {font-size: 1rem;text-align: left;position: relative;padding-right: 50px !important }
.ServiceRequests .ServiceRequestList .btn i { position: absolute; width: 22px; height: 9px; right: 1rem; top: 0; bottom: 0; margin: auto; }
.ServiceRequests .ServiceRequestList .btn i:before { font-size: 16px; content: ""; display: block;  position: absolute; height: 1px; background: #fff; width: 22px; top: 0; bottom: 0; margin: auto; }
.ServiceRequests .ServiceRequestList .btn i:after { content: ""; position: absolute; width: 7px; height: 7px; transform: rotate(45deg); border-right: 1px solid #fff; border-top: 1px solid #fff; top: 0; bottom: 0; margin: auto; right: 0  } 
@media (min-width: 1200px) { .ServiceRequests .ServiceRequestList .btn { padding: 0.75rem 1rem; } }

#ViewMyOffer { background: linear-gradient(to bottom, #dedede 0px, #f3f3f3 50px); padding: 38px 0 50px }

#ViewMyOffer .fa-map-marker-alt { background-image: url(/images/icons-22px.png); background-repeat: no-repeat; font-size: 0; width: 22px; height: 22px; background-position: left -22px top }
#ViewMyOffer .fa-map-marker-alt:before { display: none }

#MyServiceOffers .message { position: relative }
#MyServiceOffers .message:after { position: absolute; content: ""; border: 10px solid #e5e6e7; border-left-color: transparent; border-bottom-color: transparent; left: -10px; bottom: -10px; transform: rotate(45deg) }

/* Custome class
---------------------------------------*/
.Back { position: relative; padding-left: 38px }
.Back:before { font-size: 16px; content: ""; display: block;  position: absolute; height: 2px; background: #18bcb1; width: 22px; top: 0; bottom: 0; margin: auto; }
.Back:after { content: ""; position: absolute; width: 8px; height: 8px; transform: rotate(-45deg); border-left: 2px solid #18bcb1; border-top: 2px solid #18bcb1; top: 0; bottom: 0; margin: auto; left: 0  } 

header+main > div.container { padding-top: 38px; padding-bottom: 50px }
.bg-page { background: linear-gradient(to bottom, #dedede 0px, #f3f3f3 50px); padding: 38px 0 50px; min-height: calc(100vh - 131px - 390px) }
.bg-page-white { background: linear-gradient(to bottom, #f5f5f5 0px, #fff 40px); padding: 38px 0 50px }
@media (max-width: 1199px) { .bg-page { min-height: calc(100vh - 60px - 296px) } }
@media (max-width: 1023px) { .bg-page { min-height: calc(100vh - 60px - 424px) } }
.bg-page-white { background: linear-gradient(to bottom, #f5f5f5 0px, #fff 40px); padding: 38px 0 50px }

.Date { font-weight: 600; font-size: 13px }
.date-icon,.pin-icon { line-height: 22px }
.date-icon:before,.pin-icon:before { content: ""; display: inline-block; background-image: url(/images/icons-22px.png); background-repeat: no-repeat; font-size: 0; width: 22px; height: 22px; vertical-align: top; margin-right: 4px }
.date-icon:before { background-position: left top; }
.pin-icon:before { background-position: left -22px top; }

.line-through { position: relative; text-align: center }
.line-through:before { content: ""; position: absolute; width: 100%; height: 1px; background-color: #202529; bottom: 0; top: 0; margin: auto; left: 0; right: 0 }
.line-through > * { background-color: #fff; position: relative; z-index: 1; padding: 0 .75rem; font-size: 1.25rem }

.ratingStars { overflow: hidden; display: inline-block }
.ratingStars > * { float: right }
.ratingStars > input { width: 0 }
.ratingStars > input:checked+*+*+*+*~label i { font-weight: 900 }
.ratingStars:hover > label i { font-weight: 400 !important }
.ratingStars:hover > label:hover i,
.ratingStars:hover > label:hover~label i { font-weight: 900 !important }

.Send { text-transform: uppercase; font-size: 13px; height: auto }

.Step .flex-shrink-0 span { display: block; width: 28px; text-align: center; border-radius: 40px; border: 2px solid #BCBDC2; background: #BCBDC2; line-height: 24px; margin-right: 12px; color: #fff }
.Step .flex-shrink-0.active span { border-color: #18bcb1; background: #18bcb1;  }
.Step .flex-shrink-0 i { width: 28px; text-align: center; border-radius: 40px; line-height: 28px; margin-right: 12px; color: #18bcb1; font-size: 24px }

.Step ol,.Step ul, .List ul { padding-left: 0; counter-reset: step; list-style: none; margin: 0 }
.Step ol > li, .Step ul > li, .List ul > li { padding-left: 40px; position: relative; margin: .75rem 0; padding: .25rem 0 0.25rem 40px }
.Step ol > li:before, 
.Step ul > li:before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; text-align: center; border-radius: 40px; border: 2px solid #18bcb1; background: #18bcb1; line-height: 24px; margin-right: 12px; color: #fff }
.List ul > li:before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 40px; background: #18bcb1; }
.List ul > li:after { content: ""; position: absolute; left: 9px; top: 10px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

.Step.inline ol > li { display: inline-block; width: 24.5%; padding-right: 10px; vertical-align: top; margin: 0; padding-top: 0; padding-bottom: 0 }
.Step.inline ol > li:nth-of-type(n+5) { margin-top: .725rem }
@media (max-width: 1023px) {.Step.inline ol > li { width: 50%; margin: 6px 0 } }

.Step.checked li { padding: .35rem 0 0.35rem 48px; margin: 1rem 0;  }
.Step.checked li:before { content: ""; height: 32px; width: 32px }
.Step.checked li:after { content: ""; position: absolute; left: 13px; top:7px; width: 6px; height: 16px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) }

.text-inherit { color: inherit }
.text-15 { font-size: 15px }

@media (min-width: 1024px) { #NavAccountPanel { box-shadow: 0 0 12px rgba(0,0,0,0.1); } }

#NavAccount a { padding: 1.25rem 0; color: inherit; position: relative; overflow: hidden }
#NavAccount a.active { background: none; color: #18bcb1; padding-left: 0 !important }
@media (min-width: 1200px) { #NavAccount a.active:before,#NavAccount a.active:after { display: none } }
#NavAccount li+li { border-top: 1px solid #EAEBEC }

#NavAccount a:before { font-size: 16px; content: ""; display: block;  position: absolute; height: 2px; background: #18bcb1; width: 22px; top: 0; bottom: 0; margin: auto; left: -22px; transition: all 0.2s }
#NavAccount a:after { content: ""; position: absolute; width: 8px; height: 8px; transform: rotate(45deg); border-right: 2px solid #18bcb1; border-top: 2px solid #18bcb1; top: 0; bottom: 0; margin: auto; left: -10px; transition: all 0.2s } 
#NavAccount a:hover { padding-left: 36px }
#NavAccount a:hover:before { left: 0px }
#NavAccount a:hover:after { left: 14px  } 
@media (max-width: 1200px) {
  #NavAccount a.active { padding-left: 36px !important }
  #NavAccount a.active:before { left: 0px }
  #NavAccount a.active:after { left: 14px  } 
}


/* Image Crop (Need script)
===============================================================================*/
.ImgCard.Crop { position: relative; overflow: hidden; background: #efefef; z-index: 1; display: block; padding-top: 100% }
.ImgCard.Crop img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; width: auto }
.ImgCard.Crop.Hor img { max-width: none; height: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.ImgCard.r4-3.Crop { padding-top: 75% }
.ImgCard.r4-5.Crop { padding-top: 125% }
.ImgCard.r16-9.Crop { padding-top: 56.25% }
.ImgCard.r16-10.Crop { padding-top: 62.5% }

.ItemImage .container {
    position: relative;
    width: 100%;
    max-width: 400px;
}
.ItemImage .container img {
    width: 100%;
    height: auto;
}

    .ItemImage .container .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
        background-color: transparent;
    }

    .ItemImage .container .btn:hover {
        background-color: red;
    }

.slide-content, .slide-auto {
    margin-left: auto;
    margin-right: auto
}

.slide-content {
    max-width: 980px
}

.slide-auto {
    max-width: 1140px
}

.slide-opacity, .slide-hover-opacity:hover {
    opacity: 0.60
}

.slide-opacity-off, .slide-hover-opacity-off:hover {
    opacity: 1
}

.slide-col, .slide-half, .slide-third, .slide-twothird, .slide-threequarter, .slide-quarter {
    float: left;
    width: 100%
}

    .slide-col.s1 {
        width: 8.33333%
    }

    .slide-col.s2 {
        width: 16.66666%
    }

    .slide-col.s3 {
        width: 24.99999%
    }

    .slide-col.s4 {
        width: 33.33333%
    }

    .slide-col.s5 {
        width: 41.66666%
    }

    .slide-col.s6 {
        width: 49.99999%
    }

    .slide-col.s7 {
        width: 58.33333%
    }

    .slide-col.s8 {
        width: 66.66666%
    }

    .slide-col.s9 {
        width: 74.99999%
    }

    .slide-col.s10 {
        width: 83.33333%
    }

    .slide-col.s11 {
        width: 91.66666%
    }

    .slide-col.s12 {
        width: 99.99999%
    }

@media (min-width:601px) {
    .slide-col.m1 {
        width: 8.33333%
    }

    .slide-col.m2 {
        width: 16.66666%
    }

    .slide-col.m3, .slide-quarter {
        width: 24.99999%
    }

    .slide-col.m4, .slide-third {
        width: 33.33333%
    }

    .slide-col.m5 {
        width: 41.66666%
    }

    .slide-col.m6, .slide-half {
        width: 49.99999%
    }

    .slide-col.m7 {
        width: 58.33333%
    }

    .slide-col.m8, .slide-twothird {
        width: 66.66666%
    }

    .slide-col.m9, .slide-threequarter {
        width: 74.99999%
    }

    .slide-col.m10 {
        width: 83.33333%
    }

    .slide-col.m11 {
        width: 91.66666%
    }

    .slide-col.m12 {
        width: 99.99999%
    }
}

@media (min-width:993px) {
    .slide-col.l1 {
        width: 8.33333%
    }

    .slide-col.l2 {
        width: 16.66666%
    }

    .slide-col.l3 {
        width: 24.99999%
    }

    .slide-col.l4 {
        width: 33.33333%
    }

    .slide-col.l5 {
        width: 41.66666%
    }

    .slide-col.l6 {
        width: 49.99999%
    }

    .slide-col.l7 {
        width: 58.33333%
    }

    .slide-col.l8 {
        width: 66.66666%
    }

    .slide-col.l9 {
        width: 74.99999%
    }

    .slide-col.l10 {
        width: 83.33333%
    }

    .slide-col.l11 {
        width: 91.66666%
    }

    .slide-col.l12 {
        width: 99.99999%
    }
}