﻿#okta-sign-in {
    border-style: none !important;
    margin-top: 2% !important;
    border: 1px solid #B7B7B7 !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    font-family: Roboto !important;
    font-style: normal !important;
}

.button-primary {
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    padding: 6px 16px !important;
    color: #fff;
    background-color: #008545;
    background: -o-linear-gradient(top,#008545 0,#008545 100%) !important;
    background: -ms-linear-gradient(top,#008545 0,#008545 100%) !important;
    background: -webkit-gradient(linear,left top,left bottom,from(#008545),to(#008545)) !important;
    background: -webkit-linear-gradient(#007dc1,#0073b2) !important;
    background: linear-gradient(#008545,#008545) !important;
    border-color: #008545 #008545 #008545 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    color: #FFFFFF !important;
    flex: none !important;
    order: 0 !important;
    flex-grow: 0 !important;
    text-transform: none !important;
    align-self: center !important;
    font-family: 'Roboto' !important;
}

    .button-primary.sms-button {
        color: #008545 !important;
        background: none !important;
        border: 2px solid #008545 !important;
    }

.sms-request-button {
    color: #008545 !important;
    background: none !important;
    border: 2px solid #008545 !important;
    text-transform: none;
}

#okta-signin-username, #account-recovery-username {
    /*background-image: url('../../img/signin_person.svg') !important;*/
    background-repeat: no-repeat !important;
    /*padding-left: 10% !important;*/
    background-position: 4% !important;
    background-size: 4% !important;
}
.okta-form-infobox-error span.icon.error-16 {
    display: none !important;
}

.okta-form-infobox-error {
    position: relative !important;
    top: 4px !important;
}

.okta-form-infobox-error .error-header-text {
    font-weight: bold !important;
    font-size: 14px !important;
    line-height: 20px !important;
    position: relative;
}

.okta-form-infobox-error .error-header-text::before{
    content: "";
    background-image: url(https://www.sunbeltrentals.com/Content/styles/img/signin_alert.svg) !important;
    display: block;
    background-size: 100% !important;
    background-position: 4% !important;
    position: absolute;
    top: 8%;
    right: 103%;
    height: 16px;
    width: 16px;
    background-repeat: no-repeat;
}

.okta-form-infobox-error ul{
    margin-top: 5px !important;
    list-style: disc !important;
}

.okta-form-infobox-error ul li{
    text-transform: lowercase;
    margin-top: 5px !important;
}

.okta-form-infobox-error ul li:first-letter {
    text-transform: uppercase;
}

span.o-form-input-name-username, span.o-form-input-name-password {
    border: 2px solid #D6D6D6 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 0px #d6d5d6, 0 0px 0px 0 rgb(0 0 0 / 20%), 0 0px 1px 0 rgb(0 0 0 / 19%);
}

#okta-sign-in .infobox:before, #okta-sign-in .infobox-error:before, #okta-sign-in .infobox-warning:before {
    background: none !important;
}

#okta-sign-in .infobox {
    width: 100% !important;
    background: #FFF8F8 !important;
    background-image: url('https://www.sunbeltrentals.com/Content/styles/img/signin_alert.svg') !important;
    background-repeat: no-repeat !important;
    padding-left: 11% !important;
    background-position: 4% !important;
    background-size: 5% !important;
}

#okta-sign-in .infobox {
    border: 2px solid #D23B12 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    margin: 4px 0px !important;
}

input[name="newPassword"], input[name="confirmPassword"] {
    background-image: url('https://www.sunbeltrentals.com/Content/styles/img/signin_lock.svg') !important;
    background-repeat: no-repeat !important;
    padding-left: 11% !important;
    background-position: 4% !important;
    background-size: 5% !important;
}

#help-links-container {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

    #help-links-container a {
        color: #008545 !important;
        font-family: Roboto !important;
        font-style: normal !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: center !important;
    }

a.registration-link {
    color: #008545 !important;
}

label[for='okta-signin-username'], label[for='okta-signin-password'], label[for='account-recovery-username'] {
    font-family: Roboto !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #1C1C1C !important;
}

h2.okta-form-title.o-form-head {
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 30px !important;
    color: #1C1C1C !important;
    margin-bottom: 32px !important;
}

div.registration-container div.content-container {
    text-align: center !important;
    font-family: Roboto !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 30px 0 10px 0 !important;
}

div.custom-checkbox {
    margin-top: -10px !important;
    margin-bottom: 10px !important;
}

#okta-sign-in .registration-container {
    margin-top: 30px !important;
}

#okta-sign-in .o-form-button-bar.focused-input {
    box-shadow: none;
}

#okta-sign-in.auth-container input[type=submit]:focus {
    box-shadow: none;
}

#okta-sign-in .o-form-button-bar {
    padding-bottom: 10px !important;
}

div.o-form-has-errors ~ div.o-form-fieldset-container span.input-fix {
    border-color: #d93934 !important;
}

div.o-form-has-errors ~ div.o-form-fieldset-container label[for='okta-signin-username'] {
    color: #d93934 !important;
}

div.o-form-has-errors ~ div.o-form-fieldset-container label[for='okta-signin-password'] {
    color: #d93934 !important;
}

span.input-fix {
    display: flex !important;
    align-items: center !important;
}

span.o-form-input-name-username::before {
    content: "";
    background: url('https://www.sunbeltrentals.com/Content/styles/img/signin_person.svg') no-repeat;
    display: block;
    width: 18px;
    height: 100%;
    margin-left: 3%;
    background-size: 75% !important;
    background-position: 4% !important;
}

span.o-form-input-name-password::before {
    content: "";
    background: url('https://www.sunbeltrentals.com/Content/styles/img/signin_lock.svg') no-repeat;
    display: block;
    width: 18px;
    height: 100%;
    margin-left: 3%;
    background-size: 95% !important;
    background-position: 4% !important;
}

@media only screen and (max-width: 480px) {
    #okta-sign-in.auth-container .auth-content {
        max-width: 100% !important;
    }

    #okta-sign-in div.auth-content {
        border: none !important;
    }

    #okta-sign-in .header-txt {
        font-size: 20px !important;
    }
}

@media only screen and (min-width: 768px) {
    #okta-sign-in .auth-content .help-links li:nth-child(2) {
        margin-bottom: 40% !important;
    }

    #okta-sign-in {
        margin-bottom: 10%;
    }
}


@media only screen and (max-width: 767px) and (min-width: 481px) {
    .right-side-inner,
    .left-side-inner.inner-wrap-general {
        width: 100% !important;
    }

    #okta-sign-in {
        margin: 0px 0px 10% 0px !important;
        width: 100% !important;
    }

    #LoginPanel {
        margin: 0px 48px !important;
    }

    #cclogo {
        display: none !important;
    }

    #okta-sign-in .auth-content .help-links li:nth-child(2) {
        margin-bottom: 20% !important;
    }

    #login-video {
        padding-bottom: 50% !important;
    }

    #okta-sign-in.auth-container .auth-content {
        max-width: 100% !important;
    }

    .header-txt {
        font-size: 20px !important;
    }
}

/*iPad 9th gen*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    .right-side-inner,
    .left-side-inner.inner-wrap-general {
        width: 100% !important;
        padding: 5% 12% 0 12%;
    }

    #LoginSideContent .Content{
        padding-left: 20px;
    }

    #okta-sign-in {
        margin: 0px 0px 10% 0px !important;
        width: 100% !important;
    }

    #LoginPanel {
        margin: 0px 48px !important;
    }

    #cclogo {
        display: none !important;
    }

    #okta-sign-in .auth-content .help-links li:nth-child(2) {
        margin-bottom: 20% !important;
    }

    #login-video {
        padding-bottom: 50% !important;
    }

    #okta-sign-in.auth-container .auth-content {
        max-width: 100% !important;
    }

    .header-txt {
        font-size: 20px !important;
    }
 }

#okta-sign-in .options {
    overflow-y: inherit !important
}

#okta-sign-in span.o-form-input-name-rememberDevice {
    display: none !important;
}

.txt-center {
    text-align: center !important;
}

.txt-left {
    text-align: left !important;
}

.header-txt {
    font-weight: 500 !important;
    font-size: 24px !important;
    font-family: 'Roboto' !important;
    font-style: normal !important;
    color: #1C1C1C !important;
}

.header-size {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.full-width {
    width: 100% !important;
}

.no-float {
    float: none !important;
}

.medium-font {
    font-size: 20px !important;
}

#okta-sign-in div.okta-form-label label {
    float:left !important;
}

#okta-sign-in .sms-request-button {
    border: 2px solid #008545 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-align: center !important;
    text-transform: none !important;
    color: #008545 !important;
    margin-top:34px !important;
}

#okta-sign-in .icon.warning-16 {
    display: none !important;
}
#okta-sign-in .password-reset .auth-footer {
    border-top: 1px solid #ddd;
    justify-content: center;
    display: flex;
    align-items: center;
    padding-top: 20px;
    font-size: 14px;
}

    #okta-sign-in .password-reset .auth-footer a {
        color: #008545 !important;
    }

.password-reset-email-sent .o-form-explain {
    text-align: left;
    font-size: 16px;
}

::-ms-reveal {
    display: none;
}

#okta-sign-in .password-reset-email-sent .o-form-head + .o-form-explain {
    text-align: left;
    color: #353535;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
}

.recovery-challenge-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px !important;
}

    .recovery-challenge-code-container span.email-reset-didnot-receive-code-text {
        text-align: center;
    }

        .recovery-challenge-code-container span.email-reset-didnot-receive-code-text a.send-email-link {
            display: inline !important;
            color: #008545 !important;
            font-size: 14px !important;
            font-weight: 500 !important;
        }

#okta-sign-in .recovery-challenge .o-form-fieldset.enroll-sms-phone {
    width: 100% !important;
}

#okta-sign-in .recovery-challenge .o-form-fieldset .okta-form-label {
    color: #1C1C1C;
    font-size: 14px;
    line-height: 20px;
    font-weight:500;
}


#okta-sign-in .mobile-recovery-hint {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #353535;
}

#okta-sign-in div.password-reset-email-sent .o-form-head {
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    color: #1C1C1C !important;
    text-align: left !important;
}
#okta-sign-in .forgot-password-sms-enabled .mobile-recovery-hint {
    font-size: 13px;
    padding-bottom: 30px;
    position: relative;
    top: 5px;
    color: black;
}

#okta-sign-in .forgot-password .auth-footer {
    border-top: 1px solid #ddd;
    justify-content: center;
    display: flex;
    align-items: center;
    padding-top: 20px;
    font-size: 14px;
    /*margin-top: 218px;*/
}

    #okta-sign-in .forgot-password .auth-footer a {
        color: #008545 !important;
    }

#okta-sign-in .recovery-challenge .auth-footer {
    border-top: 1px solid #ddd;
    justify-content: center;
    display: flex;
    align-items: center;
    padding-top: 20px;
    font-size: 14px;
    /*margin-top: 218px;*/
}

    #okta-sign-in .recovery-challenge .auth-footer a {
        color: #008545 !important;
    }

#okta-sign-in .password-reset .auth-footer {
    border-top: 1px solid #ddd;
    justify-content: center;
    display: flex;
    align-items: center;
    padding-top: 20px;
    font-size: 14px;
    /*margin-top: 218px;*/
}

    #okta-sign-in .password-reset .auth-footer a {
        color: #008545 !important;
    }

.password-reset-email-sent .o-form-explain {
    text-align: left;
    font-size: 16px;
}

#okta-sign-in.auth-container .mfa-okta-sms, #okta-sign-in.auth-container .mfa-okta-email {
    background-size: 40px 40px !important;
    background-color: #F2FCF5;
}

#okta-sign-in.auth-container .mfa-okta-sms {
    background-image: url('https://www.sunbeltrentals.com/Content/styles/img/signin_sms.svg');
   
}

#okta-sign-in.auth-container .mfa-okta-email {
    background-image: url('https://www.sunbeltrentals.com/Content/styles/img/signin_email.svg');
}

#okta-sign-in.auth-container .okta-form-label {
    font-size: 14px;
    line-height: 20px;
    color: #1C1C1C;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
}


#okta-sign-in .mfa-email-sent-content, #okta-sign-in .mfa-send-email-content {
    text-align: center !important;
    margin-bottom: 32px !important;
}

#okta-sign-in .mfa-verify-email .mask-email {
    font-weight: normal !important;
    font-size: 24px !important;
    line-height: 32px !important;
    color: #000000 !important;
}

#okta-sign-in .mfa-verify p.o-form-explain {
    font-size: 24px !important;
    color: #000000 !important;
}

#okta-sign-in .green {
    color: #008545 !important;
}

#okta-sign-in.auth-container .mfa-sms-30, #okta-sign-in.auth-container .mfa-email-30 {
    background-color: #F2FCF5 !important;
    background-size: 16px !important;
    height: 30px !important;
    width: 30px !important;
    border: 1px solid #D6D6D6;
}
#okta-sign-in.auth-container .mfa-sms-30 {
    background-image: url('https://www.sunbeltrentals.com/Content/styles/img/signin_sms.svg');
}

#okta-sign-in.auth-container .mfa-email-30 {
    background-image: url('https://www.sunbeltrentals.com/Content/styles/img/signin_email.svg');
  
}

#okta-sign-in .okta-dropdown-option a {
    color: #000000 !important;
    text-align: left !important;
    padding-left: 35px !important;
    font-size: 14px !important;
}

#okta-sign-in .okta-dropdown-option a.dropdown-list-title {
    font-weight: 600 !important;
    font-size: 16px !important;
}

#okta-sign-in .factors-dropdown-wrap {
    top: 44% !important;
    right: -57% !important;
}

#okta-sign-in .factors-dropdown-wrap .link-button {
    width: 38px !important;
    height: 38px !important;
    float: right;
    margin-left: 0px;
    border-radius: 5px !important;
    border: 2px solid #D6D6D6;
}

#okta-sign-in .factors-dropdown-wrap .dropdown.more-actions span.icon-dm {
        background: url('https://www.sunbeltrentals.com/Content/styles/img/signin_drop.svg') no-repeat;
        top: 14px;
        left: 12px;
        width: 100%;
}

#okta-sign-in .mfa-verify .sms-request-button {
    width: 42%;
}
#okta-sign-in .mfa-verify-passcode .auth-passcode {
    width: 54%;
}
#okta-sign-in .auth-header {
    z-index: 1;
}

#okta-sign-in .recovery-challenge .sms-request-button.link-button {
    width: 58%;
}
#okta-sign-in .recovery-challenge .o-form .input-fix,
#okta-sign-in .password-reset .o-form .input-fix {
    border: 2px solid #D6D6D6;
    box-sizing: border-box;
    border-radius: 8px;
}

#okta-sign-in .auth-content.normal-padding {
    padding-left: 34px;
    padding-right: 34px;
}
#okta-sign-in .forgot-password .o-form-error-container {
    color: #777;
}

#okta-sign-in .account-unlock .auth-footer {
    border-top: 1px solid #ddd;
    justify-content: center;
    display: flex;
    align-items: center;
    padding-top: 20px;
    font-size: 14px;
    /*margin-top: 218px;*/
}

    #okta-sign-in .account-unlock .auth-footer a {
        color: #008545 !important;
    }


/*
    set font size as 16px to avoid safari browser to zoom in when inout focus
    DOTC-9092
*/
#okta-sign-in .o-form .input-fix input[type=number], 
#okta-sign-in .o-form .input-fix input[type=password], 
#okta-sign-in .o-form .input-fix input[type=tel], 
#okta-sign-in .o-form .input-fix input[type=text], 
#okta-sign-in .o-form .input-fix input[type=textbox]{
    font-size: 16px !important;
}

#okta-sign-in .o-form .input-fix input[type=number], 
#okta-sign-in .o-form .input-fix input[type=tel], 
#okta-sign-in .o-form .input-fix input[type=text], 
#okta-sign-in .o-form .input-fix input[type=textbox]{
    font-family: 'Roboto' !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #1c1c1c !important;
}

#okta-sign-in .no-margin {
    width: 90%;
    margin: 0 auto;
}

input[name="newPassword"]::-webkit-credentials-auto-fill-button,
input[name="confirmPassword"]::-webkit-credentials-auto-fill-button {
    margin-right: 16px !important;
}

.error-format {
    word-wrap: break-word !important;
    text-align: left !important;
}

#okta-sign-in .mfa-verify p.o-form-explain.o-form-input-error {
    font-size: 14px !important;
    word-break: break-word !important;
    text-align: left !important;
}

.o-form-input-name-answer{
    border-radius:  8px !important;
}

#okta-sign-in .custom-checkbox label{
    font-size: 14px !important;
    font-weight: 400 !important;
    /*background-position: -16px -113px !important;*/
}

@media only screen and (max-width: 900px){
    #okta-sign-in .mfa-verify p.o-form-explain.o-form-input-error {
        font-size: 12px !important;
        word-break: break-word !important;
    }
}


@media only screen and (min-width:760px) and (max-width: 1190px) {
    #okta-sign-in .mfa-verify p.o-form-explain.o-form-input-error {
        font-size: 14px !important;
        word-break: break-word !important;
    }
}

.cmp-Minicart__minicart__root {
    top: 16px;
    right: 16px;
    border-radius: 12px;
    width: 375px;
    max-width: 375px;
}
  
@media (min-width: 640px) {
    .cmp-Minicart__minicart__root {
      max-height: 868px;
    }
}

  @media (min-width: 768px) {
    .cmp-Minicart__minicart__root {
      max-height: 896px;
    }
}

/* OKTA Widget Spinner CSS*/
/*DOTC-22138*/
/*Make thead of okta spinner visible*/
#okta-sign-in .beacon-container.show-oktaloader.beacon-small {
    display: flex;
}

#okta-sign-in .beacon-container.show-oktaloader > div {
    background: rgb(0 0 0 / 30%);
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 8px;
}

#okta-sign-in .show-oktaloader .beacon-blank,
#okta-sign-in .show-oktaloader .auth-beacon {
    display: none;
}
#okta-sign-in.auth-container .okta-sign-in-header {
    padding: 0;
    border: none;
    position: static;
}

#okta-sign-in .beacon-container.show-oktaloader {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: initial !important;
    width: initial !important;
    inset: 0 !important;
    z-index: 9;
    justify-content: center;
    align-items: center;
}

#okta-sign-in .show-oktaloader.beacon-loading::after {
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    border: 4px solid #e3e3e3;
    border-top: 4px solid #008545;
    right: initial;
    bottom: initial;
    transform: translate(-50%,-50%);
}
.help-block {
    display: none !important;
}