/* Hawaii Theme Bootstrap 5.3 */

:root {
 --hi-font-family: "Open Sans", serif;
}


body {
    background: url('/bg-image.jpg') 0% 0% / cover no-repeat fixed;
    font-family: var(--hi-font-family);
    font-optical-sizing: auto;
}

p,
.p,
.page_section p,
.section-diagonal-left p,
.section-diagonal-right p,
p.form-text span {
  font-family: var(--hi-font-family);
  font-weight: 400;
  font-size: 1rem;
  color: #333;
  }

a, .a {
    font-size:1rem;
}

a, .a, a.nav-link[role="tab"]:not(.active),
.static-top.navbar .menu-bar > .navbar-nav > li > a {
     font-family: var(--hi-font-family);
}

h1, .h1, .section-landing-heading, .section-landing .row > div .section-landing-heading,
 .section-inline-search .row > div h1, .section-landing h1, .section-search .header-search h1,
 .page_section h1, .color-inverse h1, h1 p {
     font-family: var(--hi-font-family);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hi-font-family);
}




.container.main,
.container.wrapper-body,
#content-container,
#content_form {
    -webkit-box-shadow: 0 0 9px rgba(0,0,0,.4);
    -moz-box-shadow: 0 0 9px rgba(0,0,0,.4);
    box-shadow: 0 0 9px rgba(0,0,0,.4);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
}

#content_form {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    min-height: calc(100% - 400px);
    margin-bottom: 0px;
}

.page-header {
    margin-top:0;
}

.page-header h1 {
    margin-top:0;
}

.breadcrumb {
    margin-bottom:0;
}

@media (min-width: 576px) {
    #content_form {
        max-width:540px
    }
}

@media (min-width: 768px) {
    #content_form {
        max-width:720px
    }
}

@media (min-width: 992px) {
    #content_form {
        max-width:960px
    }
}

@media (min-width: 1200px) {
    #content_form {
        max-width:1140px
    }
}

@media (min-width: 1400px) {
    #content_form {
        max-width:1320px
    }
}

/**********************************************************************
 Statewide Banner 
**********************************************************************/
.statewide-header img { height: 22px; }

.statewide-header a, .statewide-header a:hover .statewide-header a:visited { color: #fff; }

.statewide-header {
      font-size: .8em;
      height: 4.2em;
      margin-bottom: 1em;
      background: #284661;
      background: rgba(0,0,0,.5);
      color: #fff;
      overflow-x: hidden;
      border-bottom: 1px solid rgba(0,0,0,.3);
      -webkit-box-shadow: 0 5px 5px rgba(0,0,0,.2);
      -moz-box-shadow: 0 5px 5px rgba(0,0,0,.2);
      box-shadow: 0 5px 5px rgba(0,0,0,.2);
  }

  .statewide-banner {
      padding: .5em 0;
      color: #fff;
  }

.statewide-banner a {color: #fff; color: rgba(255,255,255,.8) !important ; cursor: pointer;}

.statewide-banner-left {
    float: left;
    padding-left: .5em;
    position: relative;
    top: 6px;
}

#font-resize {
  float:left;
  list-style: none outside none;
  position: relative;
  width: 30em;
  padding: 0 0 0 2.5em;
  line-height: 1em;
  margin-top: .5em;
  background: url('/resize.png') center left no-repeat;
}

#font-resize ul {position: relative; margin: 0 0 0 1em; padding: 0; display: inline-block;}

#font-resize li.fontResizer {
  float:left;
  list-style: none;
  position: relative;
  font-size: 1.1em;
  padding-top: 4px;
  margin-bottom: 0;
}

.statewide-banner-right {
    float: right;
    padding: 0.19em 0.1em 0.1em 2em;
    position: relative;
    margin-top: .5em;
    text-align: right;
    font-size: 1.2em;
    background: url('/globe.png') center left no-repeat;
}
.statewide-banner-right a {padding-left: .25em;}

.statewide-banner #hawaii-home {padding-right: 1.5em;}

#hawaii-home a {
  text-indent: -9999em;
  width: 145px;
  height: 30px;
  display: inline-block;
  background: url('/hawaii.png') center left no-repeat;
}

/**********************************************************************
 Navigation
**********************************************************************/



.navbar {
--bs-navbar-padding-x: calc(var(--bs-gutter-x) * .5)
}


.nav-account {
    padding-top:20px;
    margin-top:0;
}


.static-top.navbar-dark {
    background:#008080;
}

.siteTitle,
.static-top.navbar-dark .navbar-brand a .siteTitle,
.static-top.navbar-dark .navbar-brand a .siteTitle > span {
  color: #FFF;
  font-size: 2rem;
  font-weight: bold;
}

.navbar-brand a:hover,
.navbar-brand a:not(.btn):hover {
    text-decoration:none !important;
    opacity:.85;
}
/**********************************************************************
 Profile
**********************************************************************/
.client-header {
    padding: 1rem;
    background: #FFF;
    margin: .4rem 0 2rem 0;
    position: relative;
    box-shadow: 5px 5px 9px rgba(0,0,0,0.2);
    border: 1px solid #CCC;
}

.client-header .client-profile-actions {
    text-align:center;
    margin-top:10px;
}

.profile-image {
    font-size:.625rem;
    width:15em;
    height:15em;
    margin:auto auto;
}
.profile-image img,
.profile-image i {
    border-radius:50%;
    background:#FFF;
    overflow:hidden;
    box-shadow: 5px 5px 9px rgba(0,0,0,0.2);
    border: 1px solid #CCC;
}

.profile-image-placeholder {
    font-size: 12em;
    color:#333;
    width: 1.25em;
    height: 1.25em;
    text-align: center;
    line-height: 1.25em;
    vertical-align: bottom;
    display: inline-block;
}

.profile-instructions,
.profile-instructions p {
    font-size:1rem;
}
/**********************************************************************
 Home
**********************************************************************/
.welcome-banner {
    background: url('/welcome-banner-header.jpg') 20% 50% / cover no-repeat;
    padding: 50px 0;
    background-size: 160% 160%;
}
.welcome-banner h1,
.welcome-banner p {
    color:white;
}

.welcome-banner h1 {
    font-weight:bolder
}
.welcome-banner p {
    font-size:1.2rem
}
.welcome-banner .btn-primary {
    width:auto;
    font-size:2.5rem;
    font-weight:normal;
    padding:1rem;
}

.welcome-banner-content {
    backdrop-filter: blur(10px);
}

/**********************************************************************
 Form
**********************************************************************/
.btn-primary {
    font-family: var(--hi-font-family);
}

.crmEntityFormView, .entitylist, .modal-content, .popover-content {
    box-shadow: 5px 5px 9px rgba(0,0,0,0.2);
    border: 1px solid #CCC;
    margin-bottom: 30px;
    padding:25px;
    z-index: 10;
    position: relative;
}
.nav-tabs .nav-link {
    background:#008080;
    color:#FFF;
   
}
a.nav-link[role="tab"]:not(.active) {
    color:#FFF;
}
.nav > li > a.nav-link[role="tab"]:hover {
    color:#008080;
    text-decoration:none !important;
} 
.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active { 
    background:#FFF;
    box-shadow: 5px 5px 9px rgba(0,0,0,0.2);
}


.signatureControl.editmode .inkControl .inkControlCommandBar .confirmButton {
    width: 30% !important;
    border-radius: 0 !important;
}

.signatureControl.editmode .inkControl .inkControlCommandBar .confirmButtonTick:before {
    content:'Confirm' !important;
}

.signatureControl.editmode .inkControl .canvasContainer {
    border:1px solid #CCC;
}
/**********************************************************************
 FOOTER
**********************************************************************/

#footer {
  margin: 0 auto 1em auto; 
  padding: 1em 0 2em;  
  color: #fff;
  color: rgba(255,255,255,.9);
  clear: both; 
  background: rgba(0,0,0,.6); 
}

#footer .powered-by a {
  background: url('/poweredby.png') top left no-repeat;
  text-indent: -9999em;
  display: inline-block;
  height: 33px;
  width: 187px;
  float: right;
  margin-right:2%;
}
.copyright {font-size: .8em; color: #fff; color: rgba(255,255,255,.3); text-align: left; clear: both;}
#footer #copyright_info p{
    color: rgba(255, 255, 255, 1);
    font-size: 0.8em;
    line-height: 1.6em;
    text-align: right;
    margin-right: 2%;
}

#footer .powered-by a:hover, 
#footer .powered-by a:active, 
ul.social-networking a:hover, 
ul.social-networking a:active {opacity: 1;}

#footer .inner-footer {
    background: url('/footer-seal.png') top right no-repeat;
    margin: 0 2%; 
}  

#footer, .inner-footer {min-height: 130px;}
.footermenu {min-height: 120px;}
.inner-footer {padding: 0 0 0 36px; margin-right: 36px;}

#footer h4 {
    padding-bottom: 0.5em;
    font-weight: 700;
}

/**********************************************************************
 Misc
**********************************************************************/

a i {
    margin-right:5px;
}

.data-attributes dt,
.data-attributes dd {
    font-size: 1rem;
    font-variation-settings: "wdth" 75;
}

.data-attributes dt i{
    margin-right:5px;
}



/** Hide Hidden form sections **/
.section[data-name="hidden_section"],
.section[data-name="hidden_section_2"],
.section[data-name="hidden_section_3"],
.section[data-name="hidden_section_4"],
.section[data-name="hidden_section_5"],
.section[data-name="hidden_section_6"],
.section[data-name="hidden_section_7"],
.section[data-name="hidden_section_8"],
.section[data-name="hidden_section_9"] {
    display: none !important;
}



/***************************************
 Portal Announcement Banner
***************************************/
.portal-banner {
  display: block;
  width: 100%;
  padding: 12px 20px;
  text-align: center;
  font-weight: 600;

  /* Make it reliably appear above header/nav */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.portal-banner-warning {
  background-color: #fff4ce; /* tan */
  color: #674422;            /* deep brown */
  border-bottom: 1px solid #edebe9;
}