@font-face {
    font-family: 'Assistant';
    font-style: normal;
    src: url('../fonts/Assistant/Assistant-SemiBold.ttf') format('ttf'), url('../fonts/Assistant/Assistant-Medium.ttf') format('ttf'), url('../fonts/Assistant/Assistant-Bold.ttf') format('ttf') url('../fonts/Assistant/Assistant-ExtraBold.ttf') format('ttf'),url('../fonts/Assistant/Assistant-ExtraLight.ttf') format('ttf'),url('../fonts/Assistant/Assistant-Light.ttf') format('ttf'),url('../fonts/Assistant/Assistant-Regular.ttf') format('ttf');
}
html, #app, #content {
    height: 100%;
}
body {
    font-family: Assistant, sans-serif !important;
    height: 100%;
}

p {
    margin-bottom: 10px;
}

.bold, .strong {
    font-weight: bold;
}

.strong {
    color: #4e4670;
}

#header {
    top: 0;
}

#logo {
    height: 59px;
}

#sectionContent {
    color: #4e4670;
}

.backButton {
    float: left;
    margin-top: 5px;
    padding: 10px;
    margin-left: -5px;
    font-size: 16px;
    font-weight: 600;
    color: #6574df;
    cursor: pointer;
    margin-top: 44px;
}

.sectionTitle {
    font-size: 28px;
    /*color: #433a67;*/
}

.dialogContent {
    margin-top: 60px;
}

.sectionTitleNoProgress {
    padding-top: 75px;
}

.sectionTitleWithIcon span {
    padding: 5px 0 0 5px;
}

.mainSectionImage {
    margin: 0px auto;
    padding: 30px 0px;
}

.bigText {
    font-size: 32px;
    line-height: 1.1;
}

.mainText, .selectField.mainText label, .choiceField.mainText label > p, .radioGroup.mainText label p {
    font-size: 24px;
    line-height: 1.2;
    font-weight: normal;
    color: #4e4670;
    font-weight: 500;
    font-family: Assistant, sans-serif !important;
}

.choiceField.mainText label > p {
    margin-bottom: 20px;
}

.subTitle {
    font-size: 24px;
    font-weight: 500;
}

.subText {
    font-size: 16px;
    color: #433a67;
}

.card {
    margin: 30px 0;
}

.card .textField {
    padding-left: 0;
    padding-right: 0;
}

#selectDate .selectField label {
    font-size: 24px;
    line-height: 1.2;
    font-weight: normal;
    color: #4e4670;
    font-family: Assistant, sans-serif !important;
}

#selectDate .selectField > div {
    margin: 0px !important;
    width: 95% !important;
}

#selectDate #expiredAppointmentPopUp .card {
    padding-bottom: 100px;
}

.adviserDetails {
    color: #5261ac;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.33;
}

.cssHeaderGrey14, .disclaimerText {
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    color: #8983a0;
}

.disclaimerText {
    font-size: 12px;
}

.cssHeaderGrey14 {
    font-size: 14px;
}

.groupTitle {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    margin: 20px 0px 10px 0px;
}

.detailsGroupLineItem {
    min-height: 40px;
}

    .detailsGroupLineItem label {
        display: block;
        line-height: 1.2;
        font-weight: 600;
        margin-top: 2px;
    }

    .detailsGroupLineItem span span {
        color: #87819e;
    }

#selectCustomerCIFNumber, #selectCustomerLife2CIFNumber {
    margin: 0px;
}

#selectCustomerCIFNumber label, #selectCustomerLife2CIFNumber label {
    font-size: 15px;
}

.CIFGroup label {
    font-size: 15px;
    padding: 12px 0;
    display: block;
}

.CIFGroup button {
    float: right;
    position: relative;
    top: -55px;
}

.CIFGroup input {
    max-width: 190px;
}

.CIFGroup .errorMessage {
    height: 5px;
}

.CIFGroup {
    padding: none;
}

.successInfo {
    padding: 5px 0;
    color: #5f6edc;
    font-size: 22px;
    font-weight: 500;
}

#appointmentType .card .selectField > div {
    margin: 0;
}

#appointmentType .card .selectField > div label {
    margin-left: 0;
}

#customerDetails .inputField {
    margin-left: 0px;
    margin-right: 0px;
}

#customerDetails input:disabled, .chakra-button:disabled span {
    color: #a1a1a1 !important;
}

.selectField .MuiSelect-root {
    border: 1px solid #b0b7d8;
}

#appointmentExpiredDialogGroup {
    margin-top: 110px;
}

.dialogTitleWithIcon {
    font-size: 19px;
    line-height: 1.2;
    padding: 5px 0;
    font-weight: 700;
}

.dialogButton {
    display: flex;
    flex-direction: row-reverse;
}

.errorCardTitle {
    color: #d9145b;
}

.infoCardTitle {
    color: #0C1E68;
}

#bookingSummary {
    border-bottom: 2px solid #cfd4fa;
    margin-bottom: 24px;
}

#bookingSummary > div {
    margin-bottom: 10px;
}

#bookingSummary .textIconImage > img {
    margin-top: 2px;
}


#additionalDescription {
    margin-left: 0 !important;
    margin-right: 5px !important;
}

#additionalDescription svg {
    display: none;
}

.introNotice {
    font-size: 12px;
    color: #615A80;
    border-top: 1px solid #b0adbf;
    padding-top: 10px;
}

.innerUrlStyling a {
    color: #3681d9;    
    text-decoration-line: underline;
}

.errorMessage {
    color: red !important;
    font-weight: 500;
    display: block;
}

.radioText span:not(.errorMessage) {
    color: #4e4670 !important;
}

.pageColor .mainText {
    color: #4e4670 !important;
}

.pageColor .textField:not(.errorMessage) {
    color: #766f90;
}

.alertBox {
    display: flex;
    padding: 16px !important;
    font-size: 16px;
    border-radius: 4px;
    border: 2px solid #D9145B;
    background: var(--White, #FFF);
    color: #0C1E68 !important
}

.infoBox {
    display: flex;
    padding: 16px !important;
    font-size: 16px;
    border-radius: 4px;
    border: 2px solid #3681D9;
    background: var(--White, #FFF);
    color: #0C1E68 !important
}

/*---------------START -- IMPROVE TO BE SET THIS BY CONFIGURATION----------------------*/
.calendarField button.css-1qkvj4k, button.css-1xaam86 {
    background-color: #606eda !important
}

#editCancelAppointment .chakra-form-control button.css-1gyngr2 {
    background-color: #FFF;
    color: #192a70;
}

#editCancelAppointment .chakra-form-control button {
    height: 50px;
    box-shadow: 5px 0 30px 0 rgba(78, 70, 112, 0.1);
}

#appointmentType .chakra-radio__control {
    border-color: #5e6cda;
}

.radioGroup .chakra-radio__control[data-checked] {
    border-color: #5e6cda;
    background-color: #5e6cda;
}

/*#editCancelAppointment .css-i65qa3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 90%;
    position: relative;
    margin: 0 auto;
}*/

/* PIN SECTION */
#pin div[id^="pinInput"] {
    width: 45px;
    margin-right: 0px;
    text-align: center;
}

#pin .textField {
    color: #362d5c;
}

#PINText1 span {
    color: #99a2cd;
}

#PINText1 {
    margin-top: 180px !important;
}

#pinGroup {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}

.pinInput input {
    border: 1px solid rgb(192, 197, 224);
    height: 45px;
    width: 60px;
    border-radius: 0px;
}

.InputField-error-6 {
    border-color: #D9145B !important;
}

/*---------------END -- IMPROVE TO BE SET THIS BY CONFIGURATION----------------------*/

#ptsbAppointmentLocation {
    padding: 0 10px;
}

#ptsbAppointmentLocation label.chakra-form__label p {
    margin-bottom: -10px;
}

.card .infoMsgBox {
    border: 2px #3681d9 solid;
    border-radius: 4px;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
}
#intro {
    background: #eef0fc;
    height: 100%;
}
#partnerForm {
    margin-left: -15px;
    margin-right: -15px;
}

#confirmCustomerGroup, #confirmCustomerJointGroup {
    padding-bottom: 30px;
    margin-bottom: 45px;
    border-bottom: 2px solid #CFD4FA;
}
.MuiPaper-root.MuiMenu-paper.MuiPopover-paper.MuiPaper-rounded { /*dropdown*/
    max-height: 50%;
    margin-left: 0px;
    width: auto;
}

/* PTSB Rebranding */

.ptsb-branding input {
    border-color: #99A2CD;
}

.buttonField.ptsb-branding button {
    background-color: #1D252C;
}

.buttonField.ptsb-branding-continue button, .buttonField.ptsb-branding-continue-back button {
    background-color: #FD824E;
    color: #1D252C;
}

.radioGroup.ptsb-branding .chakra-radio__control[data-checked] {
    border-color: #FD824E;
    background-color: #FD824E;
}

.calendarField.ptsb-branding button.css-1qkvj4k, .ptsb-branding button.css-1xaam86 {
    background-color: #FD824E !important;
    color: #1D252C;
}

.outline.buttonField.ptsb-branding > button {
    border: 2px solid #1D252C;
    color: #1D252C;
    background-color: #ffffff;
}

.ptsbRebrandOn #logo {
    height: initial;
    margin-top: 7px;
    height: 40px;
    margin-left: 24px;
}

.ptsbRebrandOn #header {
    background-color: #1D252C;
}

.ptsbRebrandOn .StepperDotsElem-dotActive-5 {
    border: 3px solid #FC4C02;
    background-color: #fff;
}

.ptsbRebrandOn .jss5 {
    border: 3px solid #FC4C02;
    background-color: #fff;
}

.ptsbRebrandOn .backButton {
    color: #D23A06;
}

/* LOADER */
.ptsbRebrandOn .dot-pulse {
    background-color: #FC4C02;
    color: #FC4C02;
    box-shadow: 9999px 0 0 -5px #FC4C02;
    animation: dotPulseOrange 1.5s infinite linear;
    animation-delay: .25s;
}

.ptsbRebrandOn .dot-pulse::before, .ptsbRebrandOn .dot-pulse::after {
    background-color: #FC4C02;
    color: #FC4C02;
}

.ptsbRebrandOn .dot-pulse::before {
     box-shadow: 9974px 0 0 -5px #FC4C02;
     animation: dotPulseBeforeOrange 1.5s infinite linear;
     animation-delay: 0s;
}

.ptsbRebrandOn .dot-pulse::after {
    box-shadow: 10024px 0 0 -5px #FC4C02;
    animation: dotPulseAfterOrange 1.5s infinite linear;
    animation-delay: .5s;
}

@keyframes dotPulseBeforeOrange {
    0% {
        box-shadow: 9974px 0 0 -5px #FC4C02;
    }

    30% {
        box-shadow: 9974px 0 0 2px #FC4C02;
    }

    60%, 100% {
        box-shadow: 9974px 0 0 -5px #FC4C02;
    }
}

@keyframes dotPulseOrange {
    0% {
        box-shadow: 9999px 0 0 -5px #FC4C02;
    }

    30% {
        box-shadow: 9999px 0 0 2px #FC4C02;
    }

    60%, 100% {
        box-shadow: 9999px 0 0 -5px #FC4C02;
    }
}

@keyframes dotPulseAfterOrange {
    0% {
        box-shadow: 10024px 0 0 -5px #FC4C02;
    }

    30% {
        box-shadow: 10024px 0 0 2px #FC4C02;
    }

    60%, 100% {
        box-shadow: 10024px 0 0 -5px #FC4C02;
    }
}

.ptsb-branding-continue img.active {
    content: url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 28C21.732 28 28 21.732 28 14C28 6.268 21.732 -1.52588e-05 14 -1.52588e-05C6.26801 -1.52588e-05 0 6.268 0 14C0 21.732 6.26801 28 14 28ZM14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289L20.7071 13.2929C20.8946 13.4804 21 13.7348 21 14C21 14.2652 20.8946 14.5196 20.7071 14.7071L15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071C13.9024 19.3166 13.9024 18.6834 14.2929 18.2929L17.5858 15H8.00001C7.44772 15 7.00001 14.5523 7.00001 14C7.00001 13.4477 7.44772 13 8.00001 13H17.5858L14.2929 9.7071C13.9024 9.31658 13.9024 8.68341 14.2929 8.29289Z' fill='%231D252C'/%3e %3c/svg%3e");
}

.ptsb-branding-continue img.hover {
    content: url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 28C21.732 28 28 21.732 28 14C28 6.268 21.732 -1.52588e-05 14 -1.52588e-05C6.26801 -1.52588e-05 0 6.268 0 14C0 21.732 6.26801 28 14 28ZM14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289L20.7071 13.2929C20.8946 13.4804 21 13.7348 21 14C21 14.2652 20.8946 14.5196 20.7071 14.7071L15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071C13.9024 19.3166 13.9024 18.6834 14.2929 18.2929L17.5858 15H8.00001C7.44772 15 7.00001 14.5523 7.00001 14C7.00001 13.4477 7.44772 13 8.00001 13H17.5858L14.2929 9.7071C13.9024 9.31658 13.9024 8.68341 14.2929 8.29289Z' fill='%231D252C'/%3e %3c/svg%3e");
}

.ptsb-branding-continue img.pressed {
    content: url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 28C21.732 28 28 21.732 28 14C28 6.268 21.732 -1.52588e-05 14 -1.52588e-05C6.26801 -1.52588e-05 0 6.268 0 14C0 21.732 6.26801 28 14 28ZM14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289L20.7071 13.2929C20.8946 13.4804 21 13.7348 21 14C21 14.2652 20.8946 14.5196 20.7071 14.7071L15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071C13.9024 19.3166 13.9024 18.6834 14.2929 18.2929L17.5858 15H8.00001C7.44772 15 7.00001 14.5523 7.00001 14C7.00001 13.4477 7.44772 13 8.00001 13H17.5858L14.2929 9.7071C13.9024 9.31658 13.9024 8.68341 14.2929 8.29289Z' fill='%231D252C'/%3e %3c/svg%3e");
}

.ptsb-branding-continue-back img.active {
    content: url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='red' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0ZM13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071L7.29288 14.7071C6.90235 14.3165 6.90235 13.6834 7.29288 13.2929L12.2929 8.29285C12.6834 7.90233 13.3166 7.90233 13.7071 8.29285C14.0976 8.68338 14.0976 9.31654 13.7071 9.70707L10.4142 13H20C20.5523 13 21 13.4477 21 14C21 14.5522 20.5523 15 20 15H10.4142L13.7071 18.2929C14.0976 18.6834 14.0976 19.3165 13.7071 19.7071Z' fill='%231D252C'/%3e %3c/svg%3e");
}

.ptsb-branding-continue-back img.hover {
    content: url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='red' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0ZM13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071L7.29288 14.7071C6.90235 14.3165 6.90235 13.6834 7.29288 13.2929L12.2929 8.29285C12.6834 7.90233 13.3166 7.90233 13.7071 8.29285C14.0976 8.68338 14.0976 9.31654 13.7071 9.70707L10.4142 13H20C20.5523 13 21 13.4477 21 14C21 14.5522 20.5523 15 20 15H10.4142L13.7071 18.2929C14.0976 18.6834 14.0976 19.3165 13.7071 19.7071Z' fill='%231D252C'/%3e %3c/svg%3e");
}

.ptsb-branding-continue-back img.pressed {
    content: url("data:image/svg+xml,%3csvg width='28' height='28' viewBox='0 0 28 28' fill='red' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0ZM13.7071 19.7071C13.3166 20.0976 12.6834 20.0976 12.2929 19.7071L7.29288 14.7071C6.90235 14.3165 6.90235 13.6834 7.29288 13.2929L12.2929 8.29285C12.6834 7.90233 13.3166 7.90233 13.7071 8.29285C14.0976 8.68338 14.0976 9.31654 13.7071 9.70707L10.4142 13H20C20.5523 13 21 13.4477 21 14C21 14.5522 20.5523 15 20 15H10.4142L13.7071 18.2929C14.0976 18.6834 14.0976 19.3165 13.7071 19.7071Z' fill='%231D252C'/%3e %3c/svg%3e");
}

.cifClearButton.ptsb-branding button {
    background-color: white;
    color: #55676C;
    border: 2px solid #55676C;
}

.cifClearButton.ptsb-branding button:hover {
    background-color: #eaebed;
}

.cifClearButton.ptsb-branding button:active {
    background-color: #55676C;
    color: white;
}

.ptsbChoiceField button {
    background-color: #EBEDF7;
    color: black;
}

.ptsbChoiceField button:active:after,
.ptsbChoiceField button:active,
.ptsbChoiceField button:focus {
    border: none;
    background-color: #FD7035 !important;
    color: black;
}

.ptsbChoiceField button:focus:blur {
    background-color: #EBEDF7 !important;
    color: black;
    border: none;
}

.ptsbChoiceField button.css-1xaam86 {
    background-color: #FD7035 !important;
}

.ptsb-info-text {
    color: #D23A06 !important;
    width: 100%;
}

.ptsb-info-text span {
    margin-top: auto;
    margin-bottom: auto;
    font-weight: 700;
    font-size: 16px;
}
.ptsb-info-text img  {
    margin-top: auto;
    margin-bottom: auto;
    height: 14.4px;
}


.mainTitle {
    width: fit-content;
    margin-right: 25px;
}

.mainTitle span {
    font-size: 24px;
    font-weight: 600;
    line-height: 104%;
    margin-top: auto;
    margin-bottom: auto;
}

.mainTitle img {
    width: 32px;
    height: 32px;
}

.dialogCloseIcon {
    margin-left: 2px;
}

.ptsb-light-text span {
    color: #55676C;
}

.ptsb-medium-text span {
    color: #3F5156;
}

.ptsb-dark-text span {
    color: #1D252C;
}