.corpay-text h1, .corpay-text h2, .corpay-text h3, .corpay-text h4,
.corpay-text span, .corpay-text p, .corpay-text td, .corpay-text tr,
.corpay-text div, .corpay-text label, .corpay-text li {
    color: var(--corpay-secondary);
    cursor: default;
    font-family: var(--corpay-font-family);
    letter-spacing: normal;
    font-size: var(--corpay-value-font-size);
}
h1.corpay-text, h2.corpay-text, h3.corpay-text, h4.corpay-text,
span.corpay-text, p.corpay-text, td.corpay-text, tr.corpay-text,
div.corpay-text, label.corpay-text, li.corpay-text {
    color: var(--corpay-secondary);
    cursor: default;
    font-family: var(--corpay-font-family);
    letter-spacing: normal;
    font-size: var(--corpay-value-font-size);
}

.corpay-text h1, .corpay-text h2, .corpay-text h3, .corpay-text h4,
h1.corpay-text, h2.corpay-text, h3.corpay-text, h4.corpay-text {
    font-weight: bold;
}

.corpay-text.page-title h1, .corpay-text.page-title h2, .corpay-text.page-title h3, .corpay-text.page-title h4,
h1.corpay-text.page-title, h2.corpay-text.page-title, h3.corpay-text.page-title, h4.corpay-text.page-title {
    font-size: var(--corpay-header-font-size);
}

/* Label/Title */
.corpay-text.title h1, .corpay-text.title h2, .corpay-text.title h3, .corpay-text.title h4,
.corpay-text.title span, .corpay-text.title p, .corpay-text.title div, .corpay-text.title label,
h1.corpay-text.title, h2.corpay-text.title, h3.corpay-text.title, h4.corpay-text.title,
span.corpay-text.title, p.corpay-text.title, div.corpay-text.title, label.corpay-text.title,
.corpay-dropdown-container label,
.corpay-textbox-container label {
    font-weight: normal;
    color: var(--corpay-tertiary);
    font-size: var(--corpay-title-font-size);
    letter-spacing: normal;
    font-family: var(--corpay-font-family);
    letter-spacing: normal;
}
.corpay-text.title.readonly h1, .corpay-text.title.readonly h2, .corpay-text.title.readonly h3, .corpay-text.title.readonly h4,
.corpay-text.title.readonly span, .corpay-text.title.readonly p, .corpay-text.title.readonly div, .corpay-text.title.readonly label,
h1.corpay-text.title.readonly, h2.corpay-text.title.readonly, h3.corpay-text.title.readonly, h4.corpay-text.title.readonly,
span.corpay-text.title.readonly, p.corpay-text.title.readonly, div.corpay-text.title.readonly, label.corpay-text.title.readonly,
.corpay-dropdown-container.readonly label,
.corpay-textbox-container.readonly label {
    background-color: var(--corpay-disabled-background);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding-left: 5px;
    display: block;
    width: calc(100% - 5px);
    font-family: var(--corpay-font-family);
    letter-spacing: normal;
}
.corpay-text.title.focus h1, .corpay-text.title.focus h2, .corpay-text.title.focus h3, .corpay-text.title.focus h4,
.corpay-text.title.focus span, .corpay-text.title.focus p, .corpay-text.title.focus div, .corpay-text.title.focus label,
h1.corpay-text.title.focus, h2.corpay-text.title.focus, h3.corpay-text.title.focus , h4.corpay-text.title.focus,
span.corpay-text.title.focus, p.corpay-text.title.focus, div.corpay-text.title.focus, label.corpay-text.title.focus {
    color: var(--corpay-anchor);
}
/* Bubble Label/Title */
.corpay-text.bubble h1, .corpay-text.bubble h2, .corpay-text.bubble h3, .corpay-text.bubble h4,
.corpay-text.bubble span, .corpay-text.bubble p, .corpay-text.bubble div, .corpay-text.bubble label,
h1.corpay-text.bubble, h2.corpay-text.bubble, h3.corpay-text.bubble, h4.corpay-text.bubble,
span.corpay-text.bubble, p.corpay-text.bubble, div.corpay-text.bubble, label.corpay-text.bubble,
.corpay-dropdown-container.bubble label,
.corpay-textbox-container.bubble label {
    font-weight: normal;
    color: var(--corpay-tertiary);
    margin-left: 10px;
    background-color: var(--corpay-white);
    font-size: var(--corpay-title-font-size);
    z-index: 10;
    position: absolute;
    width: fit-content;
    padding: 0 5px;
    letter-spacing: normal;
    font-family: var(--corpay-font-family);
    letter-spacing: normal;
}
.corpay-text.bubble.readonly h1, .corpay-text.bubble.readonly h2, .corpay-text.bubble.readonly h3, .corpay-text.bubble.readonly h4,
.corpay-text.bubble.readonly span, .corpay-text.bubble.readonly p, .corpay-text.bubble.readonly div, .corpay-text.bubble.readonly label,
h1.corpay-text.bubble.readonly, h2.corpay-text.bubble.readonly, h3.corpay-text.bubble.readonly, h4.corpay-text.bubble.readonly,
span.corpay-text.bubble.readonly, p.corpay-text.bubble.readonly, div.corpay-text.bubble.readonly, label.corpay-text.bubble.readonly,
.corpay-dropdown-container.bubble.readonly label,
.corpay-textbox-container.bubble.readonly label {
    background-color: var(--corpay-disabled-background);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: var(--corpay-font-family);
    letter-spacing: normal;
}
.corpay-text.bubble.focus h1, .corpay-text.bubble.focus h2, .corpay-text.bubble.focus h3, .corpay-text.bubble.focus h4,
.corpay-text.bubble.focus span, .corpay-text.bubble.focus p, .corpay-text.bubble.focus div, .corpay-text.bubble.focus label,
h1.corpay-text.bubble.focus, h2.corpay-text.bubble.focus, h3.corpay-text.bubble.focus, h4.corpay-text.bubble.focus,
span.corpay-text.bubble.focus, p.corpay-text.bubble.focus, div.corpay-text.bubble.focus, label.corpay-text.bubble.focus {
    color: var(--corpay-anchor);
}

.corpay-text.disabled, .corpay-text .disabled {
    color: var(--corpay-disabled) !important;
}

.corpay-text.error,
.corpay-text .error {
    color: var(--corpay-error) !important;
    font-weight: normal !important;
}

.corpay-text a,
a.corpay-text {
    color: var(--corpay-anchor);
    text-decoration: none;
}
.corpay-text a:hover,
a.corpay-text:hover {
    color: var(--corpay-anchor-hover);
    text-decoration: underline;
    cursor: pointer;
}
.corpay-text a:visited,
a.corpay-text:visited {
    color: var(--corpay-anchor);
    text-decoration: none;
}

span.material-symbols-outlined.corpay-calendar.bubble,
.corpay-textbox-container.bubble span.material-symbols-outlined.corpay-calendar {
    font-size: 19px;
}

/*** Icons ***/
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-size: 20px;
    vertical-align: text-bottom;
    border: 1px solid transparent;
}

.corpay-text.bubble span.material-symbols-outlined,
.corpay-text .bubble span.material-symbols-outlined,
.corpay-text.title span.material-symbols-outlined,
.corpay-text .title span.material-symbols-outlined,
.corpay-dropdown-container label + span.material-symbols-outlined,
.corpay-textbox-container label + span.material-symbols-outlined,
.corpay-dropdown-container label span.material-symbols-outlined,
.corpay-textbox-container label span.material-symbols-outlined {
    padding: 0;
    margin: 0;
    vertical-align: top;
    font-size: 16px;
}

.actionable-symbol {
    border: 1px solid transparent;
    border-radius: 100%;
    color: var(--corpay-tertiary);
}
.actionable-symbol.primary {
    color: var(--corpay-primary);
}
.actionable-symbol:hover,
.actionable-symbol.primary:hover {
    background-color: var(--corpay-disabled-background);
    border-color: var(--corpay-disabled-background);
    cursor: pointer;
}
.actionable-symbol.contrast {
    color: var(--corpay-secondary);
}
.actionable-symbol.contrast:hover {
    color: var(--corpay-white);
    background-color: var(--corpay-secondary-hover);
    border-color: var(--corpay-secondary-hover);
    cursor: pointer;
}
.actionable-symbol.disabled,
.actionable-symbol.disabled:hover {
    cursor: default;
    color: var(--corpay-disabled) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
/* Loader */
.progress-container {
    margin: 0 auto;
    text-align: center;
}
.circular-progress {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
}

.circular-progress-svg {
    animation: mui-rotate 1.4s linear infinite;
    display: block;
}

.circular-progress-circle {
    stroke: var(--corpay-primary);
    stroke-dasharray: 80px, 200px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    animation: mui-dash 1.4s ease-in-out infinite;
    stroke-width: 4px;
}

@keyframes mui-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes mui-dash {
    0% {
        stroke-dasharray: 1px, 200px;
        stroke-dashoffset: 0px;
    }

    50% {
        stroke-dasharray: 100px, 200px;
        stroke-dashoffset: -15px;
    }

    100% {
        stroke-dasharray: 100px, 200px;
        stroke-dashoffset: -125px;
    }
}
/* End Loader */
/*** End Icons ***/

.corpay-hr {
    border: 1px solid var(--corpay-tertiary);
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}