@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap');

#tinymce { background-color: #fff; }
.ui-widget-overlay {     background-color: #fff;     }
body {font-family: 'Kanit', sans-serif;     background-color: white;}
header .container { background-color: transparent; }
header.top-header  { background-color: #fff;     border-bottom: 2px solid #12677f; padding-top: 30px;
    padding-bottom: 30px;}

.banner-info p a {     font-size: 1.3em;    font-weight: 700;    color: #007897;    padding-bottom: 0px; line-height: 1em;}
.banner-info p { margin-bottom: 0px;}
.banner-info p a:hover {  color: #03bbda; }

.navbar { padding: 0rem; }
nav {     border-bottom: 2px solid #12677f; }
nav .container { padding-left: 0px; }
.primary-menu .menu, .primary-menu .menu a,.primary-menu .menu a.active, .primary-menu .menu a, .primary-menu .menu a:hover   {background-image: none;  font-weight: 500;}
.primary-menu, .small-hidden-menu ul li, .menu li li a  
{ color:#000; background-image: none;  margin-left: 0px; margin-right: 0px; background-color: #fff;  text-transform: uppercase; }
    .primary-menu a { color:#000; letter-spacing: 0.05em; }
    .primary-menu a, .primary-menu a:visited { padding-left: 17px; padding-right: 17px; }
    .menu a:hover,  .menu a.active, .primary-menu a:hover, .primary-menu .menu a:hover  { color:#01a4c7; border-bottom: none; }

/* Child menus */
.menu li li {  float: none; }
.primary-menu-item ul {  position: absolute;  z-index: 999; }
.menu li > a:after {  font-family: "Font Awesome 5 Pro"; content: " \f107"; } 
.menu li > a:only-child:after { content: ''; }

/*mobile menu */
a.open-menu.details-opener.xs-opener { color: #000; padding: 10px 10px 7px 10px; }
a.open-menu.details-opener.xs-opener:hover { color: #a53c46;  }
.fa-bars:before { font-size: 1.8rem; }
.small-hidden-menu .xs-opener {border: none; background-color: #fff;    margin-top: 10px; margin-right: 20px; padding:  10px;    }
.small-hidden-menu .details-slide.menu { background-color: rgba(255,255,255,0.75);  padding-left: 120px; margin-top: 130px;}
.details-slide.opened {   border-bottom: none; }

#main-content {  background-color: #fff;    background-image: none;}
#middle-panel { margin-bottom: 30px;    margin-top: 50px; }
   @media screen and (max-width: 600px) { #middle-panel  {  margin-bottom: 10px; }}
#right-panel  {  margin-bottom: 30px; }
   @media screen and (max-width: 600px) { #right-panel  {  margin-top: 10px; }}
#content-top { padding-right: 25px;    padding-left: 25px; width:100%; }
#content-extra img, #content-bottom { width:100%; }
@media screen and (max-width: 600px) {  #content-top, #content-bottom {  padding-left: 15px; padding-right: 15px; }}

#search fieldset .form-group { margin: 0px; min-height: 35px;     }
#searchCollapse { position: absolute;   z-index: 999; right: 0; margin-right: 15px;}
    @media screen and (max-width: 600px) {#searchCollapse   {  margin-right: 60px;}}
#search-collapse-button { color: #05c3f5;   float: right; margin-right: 30px; padding: 10px; background-color: transparent;  border: none;  border-radius: 0px;}
    @media screen and (max-width: 600px) { #search-collapse-button   {  margin-right: 60px;}}
#search-collapse-button:hover { color: #e46501;     border: none;}

#search {     margin-top: 2px; }
#search input { width: 210px; border: none; }
#search input.form-control {    border-radius: 0px; background-clip: unset;     background-color:#99d7e9f5; }
#search-btn {     color: #676767;    background-color: transparent;    float: right;    margin-top: -42px;    padding: 10px 8px; }  
#search-text { background-color:transparent; text-transform: uppercase; font-size: 0.8em; padding:10px;  height: 43px; }
#search-on-fly {    padding-top: 20px; }

p { color: #000; font-size: 1.2em; line-height: 1.8;  font-weight: 300;}
ul li, ol li  { color: #000; font-size: 1.2em; line-height: 1.8; margin-bottom: 0.5em; }
.intro {     font-size: 1.4em;     margin-top: 1em;     margin-bottom: 1em;     line-height: 1.6;     font-weight: 400;     color: #6a8086;}
.box ol, .box ul { margin: 6px 10px 0 10px;     padding-left: 20px; }

h1 { font-size:2.3em; color:#027ea0; font-weight:700; margin-bottom:0.5em; line-height: 1.4; letter-spacing: 0.01em;}
h1 a, h1 a:visited { color:#027ea0; }
h2 { font-size:1.8em; color:#7f8182; font-weight:600; padding-top: 0.6em; margin-bottom:0.1em; margin-top:0.8em; line-height: 1.3;} 
h2 a, h2 a:visited { color:#7f8182; }
h3 { font-size:1.4em; color:#027ea0; font-weight:600; padding-top: 0.6em; margin-bottom:0.4em; line-height: 1.4;}
h3 a, h3 a:visited { color:#027ea0; }
h4 { font-size:1.4em; color:#7f8182; font-weight:500; padding-top: 0.5em; margin-bottom:0.4em; line-height: 1.35;}
h4 a, h4 a:visited { color:#7f8182; }
h5 { font-size:1.4em; color:#027ea0; font-weight:400; padding-top: 0.4em; margin-bottom:0.4em; line-height: 1.4;}
h5 a, h5 a:visited { color:#027ea0; }
h6 { font-size:1.2em; color:#474848; font-weight:600; padding-top: 0.4em; margin-bottom:0.4em; margin-top: 0.8em; line-height: 1.4;}
h6 a, h6 a:visited { color:#474848; }
a:hover, h1 a:hover, h2 a:hover,  h3 a:hover,  h4 a:hover,  h5 a:hover,  h6 a:hover, strong a:hover { text-decoration:none; color:#03bbda; }

 .top-header a img {  max-width: 280px; }
   @media screen and (max-width: 600px) { .top-header a img { padding-bottom:20px; }}
.top-header a img:hover { opacity: 1; }
a img:hover { opacity: 0.7; filter: alpha(opacity=70); }

a { color: #4383c7;  text-decoration:none; }
article a { text-decoration:none; }
article a p { line-height: 1.7; }
.content-header {     margin-bottom: 10px; }
.signature-image {     margin-top: 3px; }
.read-more:hover { color:#007bff;}
img.bordered {    border: 1px solid #ccc9c9; }

legend { font-size:1.2em; color: #036476; background-color:transparent; font-weight: 500;}
dt label { color: #4b5d61; }
.small { font-size: 1em; line-height: 1.4;}
.highlight { color:#F00; }
strong {color: inherit;}
a strong, a strong:visited { color: #428bca; }
a strong:hover { color: #0a8de9; }

/* CLASSES */
.button {   border: 2px solid #4a6f7c; padding: 10px 30px; background-color: #fff; width: 100%; display:block; text-align: center; border-radius:60px;    line-height: 2em;}
.button:hover a {  color: #c3d7df; } 
.button:hover  { background-color:#4a6f7c; border: 2px solid #4a6f7c; color:#fff;  }
.button a, .button a:visited   { text-decoration:none;}

.background { padding: 1rem .5rem 0.2rem; background-color: #ececec;  text-align: center; display:block;     margin-bottom: 0em; margin-top: 0em; margin-left: 0px; margin-right: 0px;}
.background a, .background a:visited   { text-decoration:none;} 
.background a:hover  { color:#0392eb; }

.rule { border-bottom: 2px solid #aaaea7; padding-bottom: 10px; margin-bottom: 30px;}
.rule a, .rule a:visited   { text-decoration:none; }
.rule a:hover { color:#0392eb; text-decoration:none; }
.background.rule  { margin-bottom: 0px; }
.caption { line-height:1.4; font-size:0.9em; }
.paddingnone { padding-bottom: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; }

blockquote {    margin: 0 0 1rem;  font-weight:500;  font-size:1.1rem; margin: 1.2rem 0 1.2rem;  padding-left: 40px; border-left: 2px solid #b5a639; }

/* Extra Content banners */
.banner {  position: relative;     background-color: #0381a3;}
.bannerimage img { object-fit: cover;    height: 270px; width: 100%; object-position: right; }
      @media screen and (max-width: 1650px) { .bannerimage img  {   object-fit: cover; height: 250px;}}
      @media screen and (max-width: 962px) { .bannerimage img  {  object-fit: cover; height: 210px; }}
      @media screen and (max-width: 768px) { .bannerimage img   {  object-fit: cover; height: 180px; }}

.top-left {  position: absolute;  top:70px;  left: 400px; width: 40%; }
      @media screen and (max-width: 1750px) { .top-left {  top:60px;  left: 100px; width: 70%;}}
      @media screen and (max-width: 962px) { .top-left  { top:30px;  left: 80px; width: 60%;}}
     @media screen and (max-width: 768px) { .top-left {  top:30px;  left: 60px; width: 80%; }}
     @media screen and (max-width: 576px) { .top-left { top:30px;  left: 40px; width: 90%; }}
.bannertext a, .bannertext_sm a {color: #fff; }
.bannertext {color: #fff;    font-size: 2.5rem;    line-height: 1.4;    font-weight: 700; }
      @media screen and (max-width: 1650px) { .bannertext  {  font-size: 2.3rem;}}
      @media screen and (max-width: 962px) { .bannertext  {  font-size: 2rem;}}
     @media screen and (max-width: 768px) { .bannertext  {  font-size: 2rem;}}
     @media screen and (max-width: 576px) { .bannertext  {  font-size: 1.7rem;  }}

.bannertext_sm { color: #fff;    font-size: 1.5rem;    line-height: 1.4;    font-weight: 600;  padding-top: 10px;     padding-left: 500px; padding-right: 500px; width: 100%; }
      @media screen and (max-width: 1650px) { .bannertext_sm  {  padding-left: 100px; padding-right:100px;}}
     @media screen and (max-width: 768px) { .bannertext_sm  { padding: 50px 20px 0px 20px; }}
     @media screen and (max-width: 576px) { .bannertext_sm  { padding: 30px 20px 0px 20px; }}


.hmpgbutton { margin: 20px auto;  display: inline-block; }
.hmpgbutton a, a.hmpgbutton { color:#fff; padding: 7px 20px; background-color: rgba(0, 0, 0, 0.2); border: 1px #fff solid; border-radius: 3px;  }
.hmpgbutton a:hover{ color:#0589a1; background-color: #fff; border: 1px #fff solid;  }

/* BUTTONS*/
#h2-error .btn.green { border: solid; border-radius: 60px; background-color: #028553;}

.btn.green {  color: #028553;  border: 2px solid #028553;  background-color: #fff;    font-weight: 500; }
.btn.green:hover {background-color: #028553; border: 2px solid #028553; }
.btn.green:active {background-color: #028553; border: 2px solid #028553;  }

.btn.blue {  color: #0381cc;  border: 2px solid #0381cc; background-color: #fff;     border-radius: 20px;     font-weight: 500;}

#event-search-calendar td.day.new-day.active.selected {     background-color: #f7b61f; }

.bootstrap-modal-btn:hover { color: #428bca; }
.bootstrap-modal-btn:before { color: #084c71; font-family: "Font Awesome 5 Pro", sans-serif; content: "\f055"; margin-right: 5px; font-size: .9em; }

a.btn.broadcast-ignore { width: inherit;}
#modules-holder ol { margin-left: 5px;}

.details-opener.opened h1:before, .details-opener.opened h2:before, .details-opener.opened h3:before, .details-opener.opened h4:before, .details-opener.opened h5:before, .details-opener.opened h6:before, .details-opener.opened p:before { color: #028553; font-family: "Font Awesome 5 Pro"; content: "\f056"; margin-right: 5px;font-size: .7em;}
.details-opener h1:before, .details-opener h2:before, .details-opener h3:before, .details-opener h4:before, .details-opener h5:before, .details-opener h6:before, .details-opener p:before { color: #095a8c; font-family: "Font Awesome 5 Pro"; content: "\f055"; margin-right: 5px; font-size: .7em;}
.details-slide.opened    { border-bottom: 2px #0492a4 solid;    margin-bottom: 40px; }
.small-hidden-menu .details-slide.opened    { border-bottom: 0px #fff solid; }

.rating_text {     float: right;     text-align: right;     font-size: 0.8em;     text-transform: uppercase;     font-weight: 600; }
.map-responsive{  overflow:hidden;  padding-bottom:56.25%; position:relative; height:0;  }
.map-responsive iframe {  left:0;  top:0; height:100%; width:100%;  position:absolute;  }

#footer{ background-image: url('/uploads/sites/kaiparaultrasound//theme/images/KUS_bg.gif'); background-repeat: no-repeat; background-position: top right; background-color: #0081a3; padding-bottom: 300px;     padding-top: 10px;}
#footer .container { background-color: transparent; }
#footer p { color: #fff; padding-top: 10px; }
#footer a { color: #fff;      text-transform: inherit;     padding: 0px; }
#footer a:hover { color:#baf0fd; }
#footer a.active { color:#baf0fd; }
#footer li { margin: 10px 10px 0px 10px; font-weight: 600;}
#footer ul { padding-inline-start: 0px; }

.footer-info h5 { color:#fff; padding-top:0px; padding-left: 15px; padding-bottom:0px; font-size: 1.3em; font-weight: 500;}
.footer-info h5 a {  color:#fff; }
#footer .footer-info p { color:#fff;     font-size: 1.3em;      font-weight: 600;   margin-bottom: 0.8rem;     padding-top: 0px; padding-left: 15px;}
#footer p.rule { border-bottom: 1px solid #02a2d6;    padding-bottom: 5px;    margin-bottom: 5px; line-height: 1;}

.footer-bg{  position: relative; }
.footer-bg-image img { object-fit: cover;    height: 270px; width: 100%; object-position: right top; }
      @media screen and (max-width: 1650px) { .bannerimage img  {   object-fit: cover; height: 250px;}}
      @media screen and (max-width: 962px) { .bannerimage img  {  object-fit: cover; height: 210px; }}
      @media screen and (max-width: 768px) { .bannerimage img   {  object-fit: cover; height: 180px; }}

     @media screen and (max-width: 600px) { .footer-info h5, #footer .footer-info p {  padding-left: 20px; padding-right: 20px; }}