/*--------------------------------------------------------------
  File: customs.css
  Project: PerfexCRM Custom Styling
  Purpose: Overrides and additions to default PerfexCRM theme
           for customer-facing pages (web-to-lead forms,
           estimate requests, customer portal, login screens).
  Notes:
    - Organized into logical sections: global layout, typography,
      navigation, forms, panels, responsive tweaks.
    - Uses !important only where necessary to override core styles.
    - Keep edits modular and document future changes with date/author.
--------------------------------------------------------------*/

/*==================================================
 Global layout and base elements
==================================================*/
html {
  max-width: 100%;
  overflow-x: hidden;
}
/* body.customers {padding-top: 15px} */
nav.navbar.navbar-default.header {padding-top: 5px;background: #f0f0f0;}
body.web-to-lead,
body.estimate-request-form {
  width: 100%;
  margin: 0 auto;
  background: white;
  padding: 0;
}
.authentication-form-wrapper {margin-top: 30px;}
.login_admin .authentication-form-wrapper {margin-top: 10px} /* overrides above margin-top */
.login_admin .tw-pt-24 {padding-top: 10px}
.login_admin .company-logo {padding-top: 10px; padding-bottom: 10px}
.login_admin .authentication-form-wrapper h1, .login_admin .authentication-form-wrapper p {display: none}

/*==================================================
 Typography and text alignment
==================================================*/
body.customers .services_description.mbot15 p {text-align: justify;}
.customers h4.card-text {text-align: center;}
.login_admin .tw-text-2xl.tw-text-neutral-800.text-center.tw-font-semibold.tw-mb-5 {
  line-height: 1;
  margin-bottom: 20px;
}

/*==================================================
 List styles inside service descriptions
==================================================*/
.services_description ol {list-style: decimal-leading-zero; margin-left: 2em}
.services_description ul {list-style: lower-latin; margin-left: 2em}

/*==================================================
 Navbar and navigation
==================================================*/
.customers .navbar-nav > li > a {
	padding-top: 8px !important;
}
.customers-nav-item-estimate-request a:active,
.customers-nav-item-Products a:active,
.customers-nav-item-register a:active,
.customers-nav-item-login a:active {
	background-color: #999 !important;
	border-radius: 0px !important;
	color: #fff;
}
.customers-nav-item-estimate-request a:hover,
.customers-nav-item-Products a:hover,
.customers-nav-item-register a:hover,
.customers-nav-item-login a:hover {
	background-color: #999 !important;
	border-radius: 0px !important;
	color: #fff !important;
}
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
	background: #999;
	border-radius: 0px;
  color: #fff !important;
}
.navbar-default .navbar-nav>li.customers-nav-item-login>a {
    background: #d93025 !important;
    color: #fff !important;
    display: inline;
    font-size: 14px;
    border-radius: 0px !important;
    padding: 8px 16px;
    margin-left: 10px;
}
.navbar-default .navbar-nav>li.customers-nav-item-login>a:active, .navbar-default .navbar-nav>li.customers-nav-item-login>a:hover {
    background: #a00000 !important;
    border-radius: 0px !important;
}
.customers .container .navbar-brand {margin-left: 0;}
.customers .nav>li {text-align: center}
.customers .nav-tabs {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
.customers .nav-tabs>li:first-child>a {
    /* border-top: 1px solid #dddddd; */
    border-right: 1px solid #ddd !important;
    /* border-bottom: 1px solid #dddddd; */
    border-left: 1px solid #ddd;
}
.customers .nav-tabs>li>a {
    margin-right: 0px;
    line-height: 1.2;
    /* border-top: 1px solid #dddddd; */
    border-radius: 0;
    font-size: 15px;
    font-weight: bold;
    border-right: 1px solid #dddddd;
    /* border-bottom: 1px solid #dddddd; */
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {border-width: 0; margin-bottom: 0;border-right: 1px solid #ddd;}
.nav-tabs>li>a{margin-bottom: 0;}

/*==================================================
 Buttons and form controls
==================================================*/
.btn-success {
  color: #fff;
  background-color: #F05323;
  border: 0;
  padding: 5px 30px !important;
  text-transform: none !important;
  font-size: 18px !important;
}
.miamia-button {
  background: #ffffff;
  border: 1px solid #CBD5E1;
  border-radius: 0;
  color: #ff3114;
  font-size: large;
  font-weight: 600;
}
.miamia-button:hover {background: #F8FAFC; border-color:#CBD5E1; color:#ff3114;}
#form_submit {font-size: 20px; padding: 10px 40px; border-radius: 0}
.customers a.btn.btn-default.btn-xs.bold.mtop10 {
  padding: 8px 20px;
  width: 100%;
  box-shadow: 0 0 0px 0px #ff3114;
  color: #ff3114;
  font-size: 18px;
}
.authentication-form button.btn-info {font-size: 20px;}

/*==================================================
 Input fields and textareas
==================================================*/
input[type=text], textarea.form-control, input[type=email] {font-size: 20px;}
input[type=text], input[type=email] {height: 45px;}
textarea.form-control {height: 120px;}
.login_admin input[type=password] {height: 45px;}
.login_admin button[type=submit] {height: 45px; font-size: 24px;}
.dataTables_length select,
.uneditable-input,
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime],
input[type=email], input[type=file], input[type=month], input[type=number],
input[type=password], input[type=search], input[type=tel], input[type=text],
input[type=time], input[type=url], input[type=week], select.form-control,
textarea.form-control {
  border: 1px solid #008b8b;
}
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=time],
input[type=url] {border-radius: 0 !important}
.web-to-lead .form-control {border-radius: 0 !important}
.text-left.col-md-12.submit-btn-wrapper {padding-left: 15 !important}

/*==================================================
 Panels and cards
==================================================*/
.panel, .panel-body, .panel_s {border-radius: 0;}
.panel_s.mtop25 {margin-bottom: 0px; border: 0;}
.customers .panel_s.mtop25 {margin-top: 0;} /* overrides generic .panel_s margin-top */
.card.panel-body {
  margin-top: -20px;
  padding-top: 0;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  box-shadow: 3px 3px 10px 10px rgb(0,0,0,0.1);
}
.customers.register .panel-body {padding: 0;}
.customers.register .panel-footer {
  background-color: unset;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: unset;
  border-style: unset;
  border-top-width: unset;
  padding: unset;
}

/*==================================================
 Specific container adjustments
==================================================*/
.customers #content {padding: 0}
.customers #wrapper #content .container:nth-of-type(2) .row .panel_s {box-shadow: none}
.customers #wrapper #content .container:nth-of-type(2) .row .panel_s:nth-of-type(2) .panel-body {display: flex; flex-wrap: wrap}
.customers #wrapper #content .container:nth-of-type(2) .row .panel_s:nth-of-type(2) .panel-body .col-md-4.col-sm-6.mbot30 {
  min-width: 300px;
  box-shadow: 0px -1px 1px 0px rgb(0, 0, 0, 0.1);
}
.styled.estimate-request-form .form-col {margin-top: 0; border: 0px;box-shadow: unset !important; padding: 15px}
@media (min-width: 767px) {
  .customers #wrapper #content .container:nth-of-type(2) .row .panel_s:nth-of-type(2) .panel-body .col-md-4.col-sm-6.mbot30 {
    width: calc((100% / 3) - 10px);
    border-radius: 5px;
    border: 2px solid #eee;
    margin: 5px;
    box-shadow: none;
		padding: 0 10px 7.5px;
  }
	.estimate-request-form .container-fluid {background: grey}
	.styled.estimate-request-form .form-col {padding: 35px}
}
.customers #wrapper #content .container:nth-of-type(2) .row .panel_s:nth-of-type(2) .panel-body .col-md-4.col-sm-6.mbot30 .card.panel-body {
  margin-top: 0px;
  padding-top: 0;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
}

/*==================================================
 Logo and images
==================================================*/
.company-logo img {max-width: 250px}
.web-to-lead img,
.estimate-request-form img {
  max-width: 150px!important;
  padding-bottom: 20px;
  padding-top: 10px;
}
.estimate-request-form .logo img {max-width: 270px !important}
.estimate-request-form .logo {padding: 0; margin: 0}

/*==================================================
 Misc elements
==================================================*/
.mia-sub {
    border: 2px solid #999;
    padding: 5px 10px;
    background: none;
    float: right;
    background: #f9f9f9;
    border-radius: 5px;
    min-width: 85px;
}
.g-recaptcha {max-width: 303px; width: 100%; height: 77px; border: 1px solid #008b8b; background: #F9F9F9; border-radius: 4px;}

/*==================================================
 Responsive adjustments
==================================================*/
.col-md-4.col-sm-6.mbot30 {padding-left: 0; padding-right: 0px;}
@media (max-width: 767px) {
  .customers .col-md-4.col-sm-6.mbot30 {padding-left: 15px; padding-right: 15px;}
  .navbar-toggle {margin-top: 2px;}
  .navbar a.navbar-brand img {margin-left: 10px;}
  .navbar-toggle .icon-bar {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 5px;
  }
  .customers .nav.navbar-nav.navbar-right {display: flex; flex-wrap: nowrap}
  .customers .nav.navbar-nav.navbar-right li {white-space: nowrap}
  .customers .nav.navbar-nav.navbar-right li a {
    line-height: 30px !important;
    font-size: 20px;
    background: #1B334B !important;
    color: #fff !important;
    border-radius: 3px !important;
    margin-left: -2px;
    padding: 8px 10px;
  }
	.col-md-6.col-xs-6:has(.mia-price) {
		padding-left: 0
	}
}
@media only screen and (min-width: 600px){
  .panel-body>div.col-md-4:not(:nth-child(3n)) {padding-right: 5px;}
  .web-to-lead .container-fluid,
  .estimate-request-form .container-fluid {
    /* background: #fff; */
    padding: 10px;
  }
}
@media only screen and (max-width: 480px){
  .h1-reduced-size {font-size: 22px}
}

/*==================================================
 Unused / commented code
==================================================*/
/* .services_module { height: 100% !important } */
/* #header {background: #740000 !important;} */
/* #side-menu, #setup-menu-wrapper {background: #F05323 !important;} */
/* .row h1 {color: #ffffff;} */
/* input[type=text],input[type=email] {max-width: 360px;} */
/* body.web-to-lead, body.estimate-request-form {background: #626F80;} */
/* .control-label, label {font-size: 20px; color: #F05323;} */
/* .web-to-lead .row .col-md-12 h1, .estimate-request-form .row .col-md-12 h1 {color: #F05323} */
/* .web-to-lead .text-danger {float: right} */
/* .customers .nav-tabs li:not(.project_tab_activity) {display: none;} */
/* .web-to-lead, .web-to-lead * {background: #DDDDDD} */