:root {
  --skillcat_red: #F05523;
  --skillcat_white: #fff;
  --skillcat_orange: #F47D57; }

body {
  font-family: 'Fira Sans';
}


.form-control {
  border-color: black; }

.btn-outline-skillcat {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  --bs-btn-color: black;
  --bs-btn-border-color: black;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--skillcat_red);
  --bs-btn-hover-border-color: var(--skillcat_red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--skillcat_red);
  --bs-btn-active-border-color: var(--skillcat_red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--skillcat_red);
  --bs-btn-disabled-bg: transparent;
  --bs-gradient: none; }

.btn-skillcat-dropdown {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  --bs-btn-color: black;
  --bs-btn-border-color: black;
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: black;
  --bs-btn-active-color: black;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: black;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: black;
  --bs-btn-disabled-bg: transparent;
  --bs-gradient: none;
  height: 2.5rem;
  margin-right: 1em;
}

.btn-skillcat {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--skillcat_red);
  --bs-btn-border-color: var(--skillcat_red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--skillcat_red);
  --bs-btn-hover-border-color: var(--skillcat_red);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--skillcat_red);
  --bs-btn-active-border-color: var(--skillcat_red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--skillcat_red);
  --bs-btn-disabled-border-color: var(--skillcat_red);
  height: 43px; }
.btn-skillcat-new {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--skillcat_orange);
  --bs-btn-border-color: var(--skillcat_orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--skillcat_orange);
  --bs-btn-hover-border-color: var(--skillcat_orange);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--skillcat_orange);
  --bs-btn-active-border-color: var(--skillcat_orange);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--skillcat_orange);
  --bs-btn-disabled-border-color: var(--skillcat_orange);
  height: 43px; }

.btn-skillcat-disabled {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  --bs-btn-color: #fff;
  --bs-btn-bg: #c4c4c4;
  --bs-btn-border-color: #c4c4c4;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c4c4c4;
  --bs-btn-hover-border-color: #c4c4c4;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c4c4c4;
  --bs-btn-active-border-color: #c4c4c4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #c4c4c4;
  --bs-btn-disabled-border-color: #c4c4c4;
  height: 2.5rem; }


.btn-skillcat2 {
  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  height: 2.5rem;
  background: #F7F7F7;
  border-radius: 5px;
  color: var(--skillcat_red);
  --bs-btn-hover-bg: #F7F7F7;
  --bs-btn-hover-color: var(--skillcat_red);
  --bs-btn-hover-border-color: #F7F7F7;
  --bs-btn-active-color: var(--skillcat_red);
  --bs-btn-active-bg: #F7F7F7;
  --bs-btn-active-border-color: var(--skillcat_red); }

.label-skillcat-orange {
  color: var(--skillcat_red); }

.stepper .line {
  width: 2px;
  background-color: #F9BDAA;
  height: 423px; }

.stepper .lead {
  font-size: 1.1rem; }

.stepper .rounded-circle {
  width: 30px;
  height: 30px;
  display: flex;
  align-content: center;
  justify-content: center; 
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;}

.bg-skillcat-step-button {
  background: #F9BDAA;
  color: rgba(124, 124, 124, 0.8); }

.bg-skillcat-step-button-active {
  background: var(--skillcat_red);
  color: var(--skillcat_white); }

.skillcat-stepper-normal-text {
  color: #7c7c7c;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px; }

.stepper-item {
  height: 30%; }

.skillcat-description-area {
  background: #FFF9F8;
  border: 1px solid rgba(240, 85, 35, 0.3);
  border-radius: 5px;
  font-size: 14px; }

#resume_bio {
  resize: none; 
  border-radius: 5px;
  border: 1px solid #000000;}

.country-flag-option {
  width: 30px;
  height:20px;
  object-fit: contain;
  margin-right: 8px;
}

.img-caretdown {
  width: 22px;
  height: 32px;
}

.title-form {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
}

.server-validation {
  color: red;
  padding-bottom: 0.25rem;
}

.hidden {
  display: none;
}

.resend-link {
  color: #0F6CBF;
}

.loading-spinner {
  position: fixed;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background: #ffffffcc;
  z-index: 10;
}
.loader {
  left: 50%;
  margin-left: -4em;
  font-size: 10px;
  border: .8em solid var(--skillcat_red);;
  border-left: .8em solid aliceblue;
  animation: spin 1.1s infinite linear;
}
.loader, .loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -4.05em;
}

@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.country-picker {
  width: 12%!important;
}

.label-signup-form {
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}

.resume-modal-title {
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 35px;
}

.resume-modal-description {
  font-style: normal;
  font-weight: 400;
  font-size: 23px;
  line-height: 27px;
}

.resume-image {
  width: 60%;
  object-fit: contain;
  border-radius: 5px;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25))
}

.profile-content-shadow {
  border: 1px solid rgba(237, 237, 237, 0.52);
  box-shadow: 0px 1px 7px rgba(240, 85, 35, 0.35);
  border-radius: 5px;
}

.bg-orange-transparent {
  background: rgba(240, 85, 35, 0.2);
  border-radius: 5px;
}

.btn-skillcat-pink {
  font-style: normal!important;
  font-weight: 500;
  font-size: 22px;
  line-height: 22px;
  --bs-btn-color: var(--skillcat_red) !important;
  --bs-btn-bg: rgba(240, 85, 35, 0.2) !important;
  --bs-btn-border-color: rgba(240, 85, 35, 0.2) !important;
  --bs-btn-hover-color: var(--skillcat_red)!important;
  --bs-btn-hover-bg: rgba(240, 85, 35, 0.2)!important;
  --bs-btn-hover-border-color: rgba(240, 85, 35, 0.2)!important;
  --bs-btn-focus-shadow-rgb: 49,132,253!important;
  --bs-btn-active-color: var(--skillcat_red)!important;
  --bs-btn-active-bg: rgba(240, 85, 35, 0.2)!important;
  --bs-btn-active-border-color: rgba(240, 85, 35, 0.2)!important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)!important;
  --bs-btn-disabled-color: #fff!important;
  --bs-btn-disabled-bg: #c4c4c4!important;
  --bs-btn-disabled-border-color: #c4c4c4!important;
  /* height: 2.5rem!important; */
}

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

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

#modalWebCam {
  --bs-modal-width: 100%!important;
}

#modalWebCam .modal-header {
  border: none!important;
}

#video, #canvas, #videoSave {
  border-radius: 10px;
  max-height: 25rem;
}

.skillcat-select-button {
  width: 152px !important;
  height: 50px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000000 !important;
}

.skillcat-dropdown-button {
  width: 168px ;
  height: 36px !important;
}
.selectpicker.hvac_experience.bootstrap-select>.dropdown-toggle{
  width: 168px !important;
}
.skillcat-dropdown-button .filter-option {
  text-align: center!important;
}

.skillcat-dropdown-button.selected {
  background: rgba(240, 85, 35, 0.15) !important;
  color: var(--skillcat_red) !important;
  font-weight: 700!important;
}

.selectpicker.hvac_experience select option, .selectpicker.non_hvac_experience select option {
  font-size: 1em!important;
  text-align: center!important;
}

@media (max-width: 992px) {
  .profile-content-shadow {
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  #photo-area {
    width: 60%;
  }

  .skillcat-dropdown-button {
    min-width: 100px!important;
  }
}

#email-validationarea a, #phoneValidationRule a {
  color: var(--skillcat_red);
}

.color-upload-cert {
  color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 992px) {
  .last-page-qrcode {
    display: none!important;
  }
  
  .qrcode-app {
    display: none!important;
  }
}


@media (max-width: 300px) {
  .signup_section_two>.skillcat-phone{
    max-width: 29.2rem;
    margin-top: 0rem !important;
  }
}

#modal-container {
  /*height: 100vh;*/
  width: 100%;
  position: fixed;
  background: transparent;
  z-index: 1002;
  top: 0;
  left: 0;
}

.signup_section_two>.skillcat-phone{
  max-width: 29.2rem;
  margin-top: 3rem;
}

.phone-skip{
  font-size: 20px;
  font-weight: 600;
}