/* ************************************************************************************
**   CUSTOM FONTS
************************************************************************************ */

/* NAME_OF_FONT */



/*@font-face {
    font-family: 'NAME';
    src: url('FILENAME.woff2') format('woff2'),
         url('FILENAME.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}*/

/* ************************************************************************************
**   SITE-WIDE
************************************************************************************ */

html {overflow-y: scroll; height:100%;}

body, body * {font-family: 'Arial',Questrial,Helvetica,sans-serif; letter-spacing:.5px;}

#site-body {min-height:34.5vh; padding-top:2rem;}

/*  System Message Container */

#system-message-container > dl {background-color: #fcf8e3; border-color: #faf2cc; color: #8a6d3b; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid #faf2cc; border-radius: .25rem;}
#system-message-container > dl dd:last-child,
#system-message-container > dl dd:last-child ul
  {margin-bottom:0;}
#system-message-container .alert-notice {    color: #856404; background-color: #fff3cd; border-color: #ffeeba;}
#system-message-container .alert-error {color: #721c24; background-color: #f8d7da; border-color: #f5c6cb;}
#system-message-container .alert-message {color: #155724; background-color: #d4edda; border-color: #c3e6cb;}
#system-message-container .alert > *:last-child {margin-bottom:0;}
#system-message-container div[class^="alert"] div[class^="alert"] {background:transparent; border:0;}

.btn {font-weight:bold!important;}

/* Override Bootstrap defaults */
  .btn-primary {/*background-color:#ccc!important; border-color:#ccc; color:#fff;*/}

/* ************************************************************************************
**   CUSTOM ICONS  
************************************************************************************ */
/*
#cpx .icon.Housing a {background-image: url(../../../images/CUSTOMER_FOLDER/icons/icon-NAME.png);}


#cpx #search-results .icon.Custom-Topic a {background-image: url(../../../components/com_cpx/images/binoculars128.png);}
*/
/* ************************************************************************************
**   EDIT MY ACCOUNT
************************************************************************************ */

.profile-edit #member-profile {width:285px;}

.profile-edit #member-profile,
.profile-edit #member-profile dd,
.profile-edit #member-profile dt
  {width:285px;}

.profile-edit #member-profile label {margin-bottom:.25em;}

.profile-edit #member-profile dd {margin-bottom:1.5em;}

.profile-edit #member-profile .btn {margin-bottom:.5em;}

.profile-edit #member-profile input {border:0; width:100%;}

/* ************************************************************************************
**   CREATE AN ACCOUNT
************************************************************************************ */

#member-registration,
#member-registration dd,
#member-registration dt
  {width:285px;}

#member-registration label {margin-bottom:.25em;}

#member-registration dd {margin-bottom:1.5em;}

#member-registration input {width:100%; border:0;}

#member-registration #jform_spacer-lbl {margin-bottom:2em;}

/* ************************************************************************************
**   FORGOT USERNAME
************************************************************************************ */

.remind #user-registration input {width:100%; border:0;}

.remind #user-registration .form-control {width:285px;}

.remind #user-registration .btn {font-weight:bold; width:285px;}

/* ************************************************************************************
**   FORGOT PASSWORD - SET NEW PASSWORD
************************************************************************************ */

.reset-complete dd input {width:100%; border:0;}

.reset-complete .btn {width:285px;}

.reset-complete dt + dd {margin-bottom:2em;}

.reset-complete dt label {margin-bottom:.25em;}

.reset-complete .form-control {width:285px;}

/* ************************************************************************************
**   FORGOT PASSWORD CONFIRMATION
************************************************************************************ */

.reset-confirm dd input {width100%; border:0;}

.reset-confirm .btn {width:285px; font-weight:bold;}

.reset-confirm dt + dd {margin-bottom:2em;}

.reset-confirm dt label {margin-bottom:.25em;}

.reset-confirm .form-control {width:285px;}


/* ************************************************************************************
**   FORGOT PASSWORD
************************************************************************************ */
/* These styles are included here instead of the CP CSS because they modify the com_users component, not the CP component */

#forgot_password label[for="jform_email"] + .input-group-addon {border-top-left-radius:.3rem; border-bottom-left-radius:.3rem;}
#forgot_password #jform_email {border-top-right-radius:.3rem; border-bottom-right-radius:.3rem;}

#forgot_password .fa-4x {font-size:6em; display:block;}


/* ************************************************************************************
**   MAIN MENU
************************************************************************************ */

nav {box-shadow: 0 0 6px #000; /*background: #FBF7E9; border-bottom: #C89400 2px solid;*/}
nav .container {padding:0;}

.navbar .navbar-brand {color:#fff!important; transition: all .25s ease-in-out;}
.navbar .navbar-brand:hover {color:#037FAE  !important;}
.navbar .navbar-brand img {padding-right:.5em; height:32px; width:auto;}
.navbar .navbar-brand span {font-weight:bold;}

/* Parent menu items */
#site-menu *, #site-menu *:after {transition: all .25s ease-in-out!important;}
#site-menu a {font-weight:bold;}
#site-menu > li > a {color:#fff; /*color:#C89400;*/}
#site-menu > li:hover > a {color:#037FAE ; text-decoration:none;}
#site-menu > li:hover > a::after {color:#E2DFDA  !important;}

/* Translation */
#translate-strappy .dropdown-toggle::after {display:none;}

/* Font Sizer */
#fontsize .dropdown-toggle::after {display:none;}
#fontsize a.dropdown-toggle {color:#fff; font-weight:bold; transition: all .25s ease-in-out;}
#fontsize a.dropdown-toggle:hover {color:#f1da36;}
#fontsize a.dropdown-toggle i + span {font-size:1.25em;}

/* mobile menu toggle button */
nav button.navbar-toggler {color: #fff; border:1px solid #fff!important;}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important;
}

nav .dropdown-item.active, .dropdown-item:active {background:transparent;}

/* ************************************************************************************
**   FOOTER
************************************************************************************ */

#footer-standard {
  background-color: #000; /* optional dark background */
  padding: 45px 0;
  color: #ffffff;
  font-size: 0.9em;
}

.footer-content {
  display: flex;
  justify-content: space-between; /* pushes left and right to edges */
  align-items: center;
}

.footer-left, .footer-right {
  color: #ffffff;
}

.footer-right a {
  color: #ffffff;
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}





/* *******************************************************************
** CUSTOM COLOR

Primary Color:  #0E406A
Secondary Color:  #D34727
********************************************************************** */


nav.bg-primary {background-color:#0E406A!important;} /* change the background color of the main menu */
#site-menu > li:hover > a {color:#049FDA;}
#site-menu > li:hover > a::after {color:#049FDA!important;}
#fontsize a.dropdown-toggle:hover {color:#049FDA!important;}


.btn-group {display:none; visibility:hidden;} /* hide the editing options on the frontend */

a {color:#0E406A;} /* change the default color of all hyperlinks */

.btn-primary {background-color: #0E406A; border-color: #0E406A;} /* change the background color of Bootstrap's 'btn-primary' class */
.btn-primary:hover {background-color:  #049FDA  ; border-color:  #049FDA  ;}
.alert-primary {color: #D34727; background-color: #0E406A; border-color: #D34727;} /* change the Bootstrap class colors  */
.alert-primary .btn {background:#D34727;}
.alert-primary > * {color: #E2DFDA}
.alert-primary > * a {color: #E2DFDA; text-decoration:underline;}
.btn-outline-primary {border-color:#0E406A; color:#0E406A;}
.btn-outline-primary:hover {/*background-color: #D34727; border-color: #D34727;*/}
.btn-primary:focus {box-shadow: 0 0 0 0.2rem rgba(22,109,136,.5);} /* change the color of the shadow-border which appears when a button is clicked */

#cpx #default-main #common-searches div a {color:#0E406A!important;} /* change the color of the names of the common searches on the homepage */

#cpx #search-results .search-results-category h4 {color:#0E406A;} /* change the color of the heading on the Search Results page */
#cpx #search-results .search-results-category {border-color:#0E406A;} /* change the border color of the header on the Search Results page */
#cpx #search-results .search-results-category .row + .row div:hover {background:#0E406A;} /* change the hover color of buttons at the bottom of the header on the Search Results page */

#cpx .search-results-options #print-resources input.btn:hover {background:#0E406A;} /* change the color of the Print button at the bottom of the Search Results page*/

#cpx .custom-checkmark-wrapper input:checked ~ .checkmark {background-color:#0E406A;} /* change the background color of the custom checkboxes when checked */
#cpx .custom-checkmark-wrapper:hover input ~ .checkmark {background-color: #0E406A;} /* change the background color of the custom checkboxes when hovered */

#cpx #results-column .checkbox-column input:checked ~ .checkmark {background-color: #0E406A;} /* change the color of the custom checkboxes on the Search Results page */
#cpx #results-column .checkbox-column:hover input ~ .checkmark {background-color: #0E406A;} /* change the background color of the custom checkboxes when hovered */

#cpx-print a {color:#0E406A;} /* change the color of hyperlinks on the printer-friendly profile page */
#cpx-print .btn-primary {background-color: #0E406A; border-color: #0E406A;} /* change the background color of Bootstrap's 'btn-primary' class */
#cpx-print .btn-primary:hover {background-color: #D34727; border-color: #D34727;} /* change the hover color of Bootstrap's 'btn-primary' class */
#cpx-print .btn-primary:focus {box-shadow: 0 0 0 0.2rem rgba(22,109,136,.5);} /* change the color of the shadow-border which appears when a button is clicked */

#multi-print a {color:#0E406A;} /* change the color of hyperlinks on the printer-friendly search results profile page */
#multi-print .btn-primary {background-color: #0E406A; border-color: #0E406A;} /* change the background color of Bootstrap's 'btn-primary' class */
#multi-print .btn-primary:hover {background-color: #D34727; border-color: #D34727;} /* change the hover color of Bootstrap's 'btn-primary' class */
#multi-print .btn-primary:focus {box-shadow: 0 0 0 0.2rem rgba(22,109,136,.5);} /* change the color of the shadow-border which appears when a button is clicked */

/* Comment out the original definitions for these elements, further down in this document, in the “grid of icons on the homepage” section */
#custom_container input {border: 2px solid #0E406A;}
#custom_container a.button_link {border: 2px solid #0E406A; background: #0E406A;}
#below-icons .col-md-6 a {border: 2px solid #0E406A!important; color:#0E406A!important;}






/* ************************************************************************************
**   RESPONSIVE
       Bootrap 4 Breakpoints
         Extra small (less than 576px): Default
         Small: 576px
         Medium: 768px
         Large: 992px
         Extra Large: 1200px
************************************************************************************ */

/* Down from maximum width to the Small breakpoint */
@media only screen and (min-width : 576px) {

  /* Site menu */
    .navbar #nav-short-name {display:none;}

}

/* -------------------------------------------------------------------------- */

/* Down from maximum width to the Medium breakpoint */
@media only screen and (min-width : 768px) {

}

/* -------------------------------------------------------------------------- */

/* Down from maximum width to the Large breakpoint */
@media only screen and (min-width : 992px) {

  /* Site menu */
    /* sub-menus */
    #site-menu > li > a {padding:0 .5em;}
    #site-menu li.parent:hover > a:after {color:#f1da36;}

    #site-menu li.parent ul {background: #fff; padding:0; list-style-type:none; border-radius:5px; box-shadow: 0 0 6px #aaa;}
    #site-menu li ul li {padding:0;}
    #site-menu li ul li a {display:block; width:100%; height:100%; padding:15px; white-space: nowrap; color: #0E406A  ;}
    #site-menu li ul li:first-child a {border-top-left-radius:5px; border-top-right-radius:5px;}
    #site-menu li ul li:last-child a {border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
    #site-menu li ul li a:hover {background:#eee; text-decoration:none;}
    /*#site-menu li a.restricted {background:#0275d8; color:#f1da36;}
    #site-menu li a.restricted:hover {background:#0275d8;}*/
    #site-menu li a.restricted {color:orange;}


    /* Translation options */
    #translate-strappy ul {background: #fff; padding:0; list-style-type:none; border-radius:5px; box-shadow: 0 0 6px #aaa; min-width:8em;}
    #translate-strappy ul li {padding:0;}
    #translate-strappy ul li a {display:block; width:100%; height:100%; padding:15px; white-space: nowrap; color:#0275d8; font-weight:bold;}
    #translate-strappy ul li:first-child a {border-top-left-radius:5px; border-top-right-radius:5px;}
    #translate-strappy ul li:last-child a {border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
    #translate-strappy ul li a:hover {background:#eee; text-decoration:none; cursor:pointer;}

    /* Font sizer */
    #fontsize ul {background: #fff; padding:0; list-style-type:none; border-radius:5px; box-shadow: 0 0 6px #aaa; min-width:5em;}
    #fontsize ul li {padding:0;}
    #fontsize ul li a {display:block; width:100%; height:100%; padding:15px; white-space: nowrap; color:#0275d8; font-weight:bold;}
    #fontsize ul li:first-child a {border-top-left-radius:5px; border-top-right-radius:5px;}
    #fontsize ul li:last-child a {border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
    #fontsize ul li a:hover {background:#eee; text-decoration:none; cursor:pointer;}

}

/* -------------------------------------------------------------------------- */

/* Down from maximum width to the Extra Large breakpoint */
@media only screen and (min-width : 1200px) {

}

/* -------------------------------------------------------------------------- */

/* Up from minimum width to the Extra Large breakpoint */
@media only screen and (max-width:1199px) {

}

/* -------------------------------------------------------------------------- */

/* Up from minimum width to the Large breakpoint */
@media only screen and (max-width:991px) {

  /* Site menu */
  #site-menu li {padding-top:.5em; padding-bottom:.5em; text-align:right;}
  #site-menu > li:first-child {margin-top:1em;}


    /* sub-menus */
    #site-menu li.parent:hover > a:after {color:#f1da36;}
    #site-menu > li {border-bottom:1px solid #fff;}
    #site-menu li.parent ul {padding:0; list-style-type:none;}
    #site-menu li ul li {padding:0;}
    #site-menu li ul li a {display:block; width:100%; height:100%; padding:8px 0 8px 8px; white-space: nowrap; color:#fff;}
    #site-menu li ul li a:hover {color:#f1da36;}
    #site-menu .dropdown-item:focus,
    #site-menu .dropdown-item:hover
      {background-color:transparent;}
    #site-menu .dropdown-menu {background-color:transparent; border:0; margin-top:0; border-right:1px dashed rgba(255, 255, 255, 0.5); margin-right:.25em; border-radius:0;}
    #site-menu .dropdown-menu a:after {content:' -'; color:rgba(255, 255, 255, 0.5);}

    /* Translation */
    #translate-strappy {border-bottom:1px solid #fff;}
    #translate-strappy * {text-align:right;}
    #translate-strappy img {width:32px; padding-top:15px;}
    #translate-strappy .dropdown-toggle {padding-top:0; padding-bottom:15px;}

    #translate-strappy .parent ul {padding:0; list-style-type:none;}
    #translate-strappy li {padding:0;}
    #translate-strappy li a {display:block; width:100%; height:100%; padding:8px 0 8px 8px; white-space: nowrap; color:#fff; font-weight:bold;}
    #translate-strappy li a:hover {color:#f1da36;}
    #translate-strappy .dropdown-item:focus,
    #translate-strappy .dropdown-item:hover
      {background-color:transparent;}
    #translate-strappy .dropdown-menu {background-color:transparent; border:0; margin-top:0; border-right:1px dashed rgba(255, 255, 255, 0.5); margin-right:.25em; border-radius:0;}
    #translate-strappy .dropdown-menu a:after {content:' -'; color:rgba(255, 255, 255, 0.5);}

    /* Font sizer */
    #fontsize * {text-align:right;}
    #fontsize .dropdown-toggle {padding-top:15px;}

    #fontsize .parent ul {padding:0; list-style-type:none;}
    #fontsize li {padding:0;}
    #fontsize li a {display:block; width:100%; height:100%; padding:8px 0 8px 8px; white-space: nowrap; color:#fff; font-weight:bold;}
    #fontsize li a:hover {color:#f1da36;}
    #fontsize .dropdown-item:focus,
    #fontsize .dropdown-item:hover
      {background-color:transparent;}
    #fontsize .dropdown-menu {background-color:transparent; border:0; margin-top:0; border-right:1px dashed rgba(255, 255, 255, 0.5); margin-right:.25em; border-radius:0;}
    #fontsize .dropdown-menu a:after {content:' -'; color:rgba(255, 255, 255, 0.5);}

}

/* -------------------------------------------------------------------------- */

/* Between the Large breapoint and the Medium breakpoint */
@media only screen and (max-width: 991px) and (min-width:768px) {

}

/* -------------------------------------------------------------------------- */

/* Up from minimum width to the Medium breakpoint */
@media only screen and (max-width:767px) {

  /* Search bar on the homepage */
  #custom_container input[type="text"] {border-right: 2px solid red; border-radius:5px; margin-bottom:.5em;}
  #custom_container .button_link {border-radius:5px;}
  
  #below-icons .col-md-6 {padding:0 0 .5em 0 !important;}

}

/* -------------------------------------------------------------------------- */

/* Up from minimum width to the Small breakpoint */
@media only screen and (max-width:575px) {

  /* Main menu */
  .navbar .navbar-brand {max-width:75%; overflow:hidden;}
  .navbar #nav-full-name {display:none;}

  /* Footer */
  #footer-standard {padding-left:15px; padding-right:15px;}

}

/* Fix to the conflict between jQuery Bootstrap */
/* When the element is hovered dissapear */
div.nav-item, li.nav-item, .hasTooltip {
    display: inline !important;
}

/* ************************************************************************************
**   CONTACT FORM HEADER STYLING
************************************************************************************ */

/* Reduce top padding for contact page */
.contact #site-body,
div[class*="contact"] #site-body {
    padding-top: 1rem !important;
}

.contact-form {
    max-width: 800px;
    margin: -3rem auto 0 auto;
    padding-top: 0;
}

.contact-form .contact-header-info {
    margin-bottom: 1.5rem;
    margin-top: 0;
    text-align: center;
}

.contact-form .contact-header-info .contact-link {
    color: #0066cc;
    text-decoration: none;
}

.contact-form .contact-header-info .contact-link:hover {
    text-decoration: underline;
}

.contact-form .contact-header-info .tty-label {
    color: #333;
}

/* Form Styling - Equal Width and Margins */
.contact-form #contact-form {
    margin: 0 auto;
    padding: 30px;
}

.contact-form #contact-form .control-group {
    margin-bottom: 20px;
}

.contact-form #contact-form .control-label {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
}

.contact-form #contact-form .controls {
    margin-left: 0;
}

.contact-form #contact-form input[type="text"],
.contact-form #contact-form input[type="email"],
.contact-form #contact-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contact-form #contact-form textarea {
    min-height: 150px;
}

.contact-form #contact-form button[type="submit"] {
    margin-top: 10px;
}

/* Modern Button Styling */
.modern-button {
    display: inline-block;
    padding: 12px 30px;
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    background-color: #0066cc;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    position: relative;
    overflow: hidden;
}

.modern-button:hover {
    background-color: #0052a3;
    text-decoration: none;
    color: #fff;
}

.modern-button:active {
    transform: scale(0.98);
}

/* Ripple Effect */
.modern-button.ripple {
    position: relative;
    overflow: hidden;
}

.modern-button.ripple:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.modern-button.ripple:active:after {
    width: 300px;
    height: 300px;
}