h1 {
    font-size: 2.6rem;
}
.subtitle {
    font-weight: 300;
    margin-top: -12px;
}

@media (min-width: 768px) {
	.su-max-width {
		max-width: 640px;
	}
}
.select-radio {
	display: inline-block;
}
.select-radio .nav-item {
	display: inline-block;
}
.select-radio i.fa-check-circle {
	font-size: 21px;
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: top;
    margin-top:1px;
}
.select-radio i.fa-check-circle:before {
	font-family: "Font Awesome 5 Pro";
    font-weight: 100;
    content: "\f111";
}
.select-radio .nav-link:hover i.fa-check-circle:before {
    content: "\f058";
}
.select-radio .nav-link.active i.fa-check-circle:before {
    font-weight: 900;
    content: "\f058";
}

.select-radio .ut-block {
	display: inline-block;
}
.select-radio .ut-ttl {
	font-weight: 500;
}
.select-radio .ut-ttl i {
	margin-right: 0.5rem;
    margin-left: 0.2rem;
    font-size: 89%;
    position: relative;
    top: -1px;
}

.su-features {
}
.su-features > div {
    width: 300px;
    margin: 0 auto;
}
.su-features ul{
    list-style-type: none;
}
.su-features ul li{
}
.su-features ul li:before {
	content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    margin-left: -1.3em;
    width: 1.3em;
    color: #55cc55;
}

.nav-pills.select-radio > li > div {
    padding-top: 2px;
    padding-right: 6px;
}
.nav-pills.select-radio .nav-link.active {
    text-decoration: none !important;
    text-decoration-style: unset !important;
	background-color: #F12908 !important;
	color: #ffffff !important;
}
.nav-pills.select-radio .nav-item .nav-link {
    background-color: #f0f0f0;
    margin-right: 3px;
    color: #999999;
    cursor: pointer;
    margin-bottom:5px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    padding: 0.5rem 0.8rem 0.5rem 0.6rem;
}
.nav-pills.select-radio .nav-item .nav-link:hover {
    background-color: #e0e0e0;
}


.user-type {
	font-size: 112%;
}
.user-type .ut-desc {
    display: block;
    text-align: left;
    font-size: 94%;
    line-height: 18px;
}
.user-type i.fa-check-circle {
	margin-top: 3px;
}
.nav-pills.user-type .nav-item .nav-link {
    margin-right: 0px;
	margin-bottom: 10px;
    padding: 0.7rem 1.2rem 0.7rem 1rem;
}
.doft-signup-page .select-radio button.nav-link {
    border: 0;
    font: inherit;
    width: 100%;
}
.doft-signup-page .user-type {
    max-width: 100%;
    padding-left: 0 !important;
}
.doft-signup-page .user-type button.nav-link {
    display: flex;
    white-space: normal;
}
.doft-signup-page [hidden] {
    display: none !important;
}
#form.signup-keyboard .doft-signup-page :is(button, a, input, select):focus {
    outline: 3px solid var(--red-600, #f12908) !important;
    outline-offset: 3px;
}
/* Role selection keeps the same position and width for every web signup state. */
#form.signup-web .su-max-width {
    width: 100%;
    max-width: 902px;
    box-shadow: none;
    container-type: inline-size;
}
#form.signup-web #signupDetails {
    max-width: 610px;
    margin: 8px auto 0;
}
#form.signup-web .user-type {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#form.signup-web .user-type .nav-item {
    min-width: 0;
}
#form.signup-web .user-type button.nav-link {
    align-items: center;
    height: 100%;
    min-height: 64px;
    gap: 10px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-body, #555);
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
}
#form.signup-web .user-type .ut-block {
    min-width: 0;
}
#form.signup-web .user-type .ut-ttl i {
    margin-left: 0;
}
#form.signup-web .user-type .ut-desc {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
}
#form.signup-web .user-type i.fa-check-circle {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}
@container (max-width: 840px) {
    #form.signup-web .user-type {
        grid-template-columns: minmax(0, 360px);
        justify-content: center;
        gap: 10px;
    }
}
#dispatcherChoicesTitle {
    margin: 8px 0 20px;
    color: var(--text, #444);
    font-family: var(--font-display, inherit);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
}
.dispatcher-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 1.5rem;
}
.dispatcher-option {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--line, #e8eaec);
    border-radius: var(--radius-lg, 14px);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16,24,40,.05));
}
.dispatcher-option-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--text, #444);
    font-family: var(--font-display, inherit);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}
.dispatcher-option-brand i {
    flex: none;
    font-size: 19px;
    color: var(--red-600, #f12908);
}
.dispatcher-option h3 {
    margin: 0 0 14px;
    color: var(--text, #444);
    font-family: var(--font-display, inherit);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.8px;
}
.dispatcher-option p {
    min-height: 66px;
    margin-bottom: 0;
    color: var(--text-body, #555);
    font-size: 14px;
    line-height: 1.55;
}
.dispatcher-option-features {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 21px 0 27px;
    list-style: none;
}
.dispatcher-option-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-body, #555);
    font-size: 14px;
    line-height: 1.5;
}
.dispatcher-option-features i {
    flex: none;
    width: 19px;
    margin-top: 2px;
    color: var(--red-600, #f12908);
    font-size: 18px;
    text-align: center;
}
.dispatcher-option-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}
.doft-signup-page .dispatcher-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    gap: 9px;
    padding: 12px;
    border-radius: var(--radius-md, 10px);
    font-family: var(--font-display, inherit);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    white-space: normal;
    text-align: center;
}
.dispatcher-trial {
    color: var(--text-body, #555);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.dispatcher-arrow {
    flex: none;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}
@media (max-width: 767px) {
    .dispatcher-options {
        grid-template-columns: 1fr;
    }
    .dispatcher-options { gap: 16px; }
    .dispatcher-option { padding: 23px 20px; }
    .dispatcher-option h3 { font-size: 27px; }
    .dispatcher-option p { min-height: 0; }
    .dispatcher-option-features { margin: 20px 0 25px; }
}
.user-type .nav-item {
	display: block;
}
.user-type .nav-item {
	display: block;
}


.su-iama {
	padding-top: 5px;	
	min-width: 42px;
}
form .form-group {
	margin-bottom: 1rem;
}

.form-group.validate input, .form-group.validate select, .form-group.validate textarea {
	color: #444444 !important;
    border-color: #ccd6e6 !important;
}
.form-group.issue input, .form-group.issue select, .form-group.issue textarea {
	color: #444444 !important;
    border-color: #ccd6e6 !important;
}
.btn.btn-light {
	background-color: #ffffff;
}
#docketBlock .input-group > .input-group-prepend > .btn {
    border-right: dashed 1px #cccccc;
}

.download-app-blockquote {
	position: relative; display: inline-block; border-radius: 3px; opacity: 0.9;
}
.download-app-blockquote .bg-info {
	min-height: 100%; position: absolute; border-radius: 3px 0px 0px 3px;
}
.download-app {
}
.download-app a {
	margin: 0 2px;
}
.download-app a img {
	height: 32px;
}
form .form-control {
	padding-left: 1rem;
}


/* password validation */
.password-strength {
    padding-left: 1px;
    padding-right: 1px;	
}
.password-strength .progress {
    height: 0.3rem;
    margin-top: -5px;
    margin-bottom: 0px;
    border-radius: 0 0 0.2rem 0.2rem;
}
.password-strength {
	font-size: 0.9rem;
	color: #a0a0a0;
}
.password-strength .strength-bg-1 {
	background-color: #f38e8e;
}
.password-strength .strength-bg-2 {
	background-color: #dada5e;
}
.password-strength .strength-bg-3 {
	background-color: #cccccc;
}
.password-strength .strength-bg-4 {
	background-color: #9e9eff;
}
.password-strength .strength-bg-5 {
	background-color: #46c746;
}
.password-strength .strength-1 {
	color: #e25a5a;
}
.password-strength .strength-2 {
	color: #b5b530;
}
.password-strength .strength-3 {
	color: #aaaaaa;
}
.password-strength .strength-4 {
	color: #9e9eff;
}
.password-strength .strength-5 {
	color: #10ab10;
}
.form-control-position {
	cursor: pointer;
}
.strength-desc {
	cursor: pointer;
}
.strength-desc i {
    padding-left: 4px;
    display: inline-block;
    padding-top: 3px;
    position: relative;
    top: 1px;
    color: #bbbbbb;
}
.password-strength .bullets {
   	list-style: none;
    padding: 2px 11px;
    margin-top: 4px;
    background-color: #fbfbfb;
    border-left: 3px solid #eee;
}
.password-strength .bullets li {
    color: #e25a5a;
}
.password-strength .bullets li:before {
	content: "\f00d";
    font-family: 'Font Awesome 5 Pro';
    display: inline-block;
    width: 1.5em;
    color: #e25a5a;
}
.password-strength .bullets li.done {
    color: #10ab10;
}
.password-strength .bullets li.done:before {
	content: "\f00c";
    color: #10ab10;
}
/* password validation */


.social-login {
    padding: 0.8rem 1.5rem;
    text-align: center;
}
.social-login button {
    border: none;
    background-color: #f0f0f0;
    border-radius: 30px;
    padding: 12px;
    display: inline;
    margin: 0 10px 10px 10px;
}
.social-login button:hover {
    background-color: #e0e0e0;
}
.social-login img {
	width: 24px;
    height: 24px;
}
.social-login button span {
	position: relative;
    padding: 10px 0 10px 13px;
    top: 2px;
    color: #666666;
    font-weight: 500;
    font-size: 15px;
}

.separator-txt {
	border-top: solid 1px #e0e0e0; 
	text-align: center; 
	position: relative;
    margin-top: 14px;
}
.separator-txt span {
	background: white; 
	display: inline-block; 
	top: -12px; 
	position: relative; 
	padding: 0 8px; 
	color: #aaaaaa;
}

.phone-group .btn.dropdown-toggle {
	height: calc(2.75rem + 2px);
	background-color: white;
    border-right-style: dashed;
}
.dropdown-toggle.btn-light::after {
	color: #909090 !important;
}
.phone-group button.dropdown-toggle .filter-option-inner-inner {
    visibility: hidden;
}
.phone-group .bootstrap-select {
    max-width: 2rem;
}
.phone-group button.dropdown-toggle {
    padding-left: 0.2rem;
    text-align: center;
}
.phone-group .dropup button.dropdown-toggle {
    padding-left: 0rem;
    text-align: center;
}
#phoneCountryCode {
	max-width: 56px;
    border-left: none;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    text-align: center !important;
    border-right: none;
    margin-left: 0px;
}
#phone {
    border-left: 1px dashed #cccccc;
    margin-left: 0px;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}
.phone-group ul.dropdown-menu li a {
	color: #444;
}
.phone-group ul.dropdown-menu li small {
    color: #909090 !important;
    padding-left: 0.8rem;
}
.phone-group ul.dropdown-menu li.selected a {
	font-weight: 700;
}
.phone-group ul.dropdown-menu li.selected small {
	color: #707070 !important;
	font-weight: 700;
}
.phone-group ul.dropdown-menu li.active small {
	color: #707070 !important;
}
.phone-group .dropdown-menu {
	max-height: 350px;
}
.phone-group .dropdown-divider {
    border-top: 1px solid #dddddd;
}
.phone-group .dropdown-header {
    padding: 0px !important;
    margin: 0px;
}
#phoneVerifyBtn {
	padding-right: 0.8rem;
}
.right-control-radius {
    border-radius: 0 0.25rem 0.25rem 0 !important;
}
#phoneVerifyType {
	padding-left: 0.1rem;
	padding-right: 0.8rem;
}
#phoneVerifySuccess {
    border: 1px solid #cccccc;
}
#phoneVerificationCode {
    max-width: 6.5rem;
}
#codeSeconds {
	position: absolute;
    left: 12rem;
    top: 2.35rem;
}
#codeCancel {
	position: absolute;
    top: 2.35rem;
	right: 1.2rem;
}

.phone-recovery-link {
	color: #6fbcff !important;
}

@media screen and (max-width: 350px) {
	.user-type {
		font-size: 100%;
	}
}
@media screen and (max-width: 326px) {
	.g-recaptcha {
		margin-left:-6px !important;
	}
}


#phone::-webkit-contacts-auto-fill-button, 
#phone::-webkit-credentials-auto-fill-button {
  visibility: hidden !important;
  position: absolute;
  right: 0;
}

#phoneInputGroup.parsley-error #phoneCountryCode, #phoneInputGroup.parsley-error #phone {
    border-top: none !important;
    border-bottom: none !important;
  	background-color: #fff5f5 !important;
  	border-left: 1px dashed #cccccc !important;
}
#phoneInputGroup.parsley-error .bootstrap-select .btn {
    border-top: none;
    border-bottom: none;
    border-left: none;    
    background-color: #fff5f5 !important;
}


/* 2026-08-31: form-actions owns the horizontal divider above reCAPTCHA.
   The legacy #ddd border is too bright on the dark signup surface. */
html[data-theme="dark"][data-refresh] .doft-signup-page .form-actions {
    border-top-color: var(--line, #343a44) !important;
}