﻿/* This style file is used to add the global css rules in the platform*/

/*Section Backgrounds*/
.sds-bg-primary {
    background: var(--sds-primary);
}

.sds-bg-primary-100 {
    background: var(--sds-primary-100);
}

.sds-bg-primary-200 {
    background: var(--sds-primary-200);
}

.sds-bg-primary-300 {
    background: var(--sds-primary-300);
}

.sds-bg-primary-400 {
    background: var(--sds-primary-400);
}

.sds-bg-primary-600 {
    background: var(--sds-primary-600);
}

.sds-bg-primary-700 {
    background: var(--sds-primary-700);
}

.sds-bg-primary-800 {
    background: var(--sds-primary-800);
}

.sds-bg-primary-900 {
    background: var(--sds-primary-900);
}

.sds-bg-secondary {
    background: var(--sds-secondary);
}

.sds-bg-secondary-100 {
    background: var(--sds-secondary-100);
}

.sds-bg-secondary-200 {
    background: var(--sds-secondary-200);
}

.sds-bg-secondary-300 {
    background: var(--sds-secondary-300);
}

.sds-bg-secondary-400 {
    background: var(--sds-secondary-400);
}

.sds-bg-secondary-600 {
    background: var(--sds-secondary-600);
}

.sds-bg-secondary-700 {
    background: var(--sds-secondary-700);
}

.sds-bg-secondary-800 {
    background: var(--sds-secondary-800);
}

.sds-bg-secondary-900 {
    background: var(--sds-secondary-900);
}

.sds-bg-tertiary {
    background: var(--sds-tertiary);
}

.sds-bg-tertiary-100 {
    background: var(--sds-tertiary-100);
}

.sds-bg-tertiary-200 {
    background: var(--sds-tertiary-200);
}

.sds-bg-tertiary-300 {
    background: var(--sds-tertiary-300);
}

.sds-bg-tertiary-400 {
    background: var(--sds-tertiary-400);
}

.sds-bg-tertiary-600 {
    background: var(--sds-tertiary-600);
}

.sds-bg-tertiary-700 {
    background: var(--sds-tertiary-700);
}

.sds-bg-tertiary-800 {
    background: var(--sds-tertiary-800);
}

.sds-bg-tertiary-900 {
    background: var(--sds-tertiary-900);
}

.sds-bg-grey {
    background: var(--sds-grey);
}

.sds-bg-grey-100 {
    background: var(--sds-grey-100);
}

.sds-bg-grey-200 {
    background: var(--sds-grey-200);
}

.sds-bg-grey-300 {
    background: var(--sds-grey-300);
}

.sds-bg-grey-400 {
    background: var(--sds-grey-400);
}

.sds-bg-grey-600 {
    background: var(--sds-grey-600);
}

.sds-bg-grey-700 {
    background: var(--sds-grey-700);
}

.sds-bg-grey-800 {
    background: var(--sds-grey-800);
}

.sds-bg-grey-900 {
    background: var(--sds-grey-900);
}

.sds-bg-success {
    background: var(--sds-success);
}

.sds-bg-success-100 {
    background: var(--sds-success-100);
}

.sds-bg-success-200 {
    background: var(--sds-success-200);
}

.sds-bg-success-300 {
    background: var(--sds-success-300);
}

.sds-bg-success-400 {
    background: var(--sds-success-400);
}

.sds-bg-success-600 {
    background: var(--sds-success-600);
}

.sds-bg-success-700 {
    background: var(--sds-success-700);
}

.sds-bg-success-800 {
    background: var(--sds-success-800);
}

.sds-bg-success-900 {
    background: var(--sds-success-900);
}

.sds-bg-interactive {
    background: var(--sds-interactive);
}

.sds-bg-interactive-100 {
    background: var(--sds-interactive-100);
}

.sds-bg-interactive-200 {
    background: var(--sds-interactive-200);
}

.sds-bg-interactive-300 {
    background: var(--sds-interactive-300);
}

.sds-bg-interactive-400 {
    background: var(--sds-interactive-400);
}

.sds-bg-interactive-600 {
    background: var(--sds-interactive-600);
}

.sds-bg-interactive-700 {
    background: var(--sds-interactive-700);
}

.sds-bg-interactive-800 {
    background: var(--sds-interactive-800);
}

.sds-bg-interactive-900 {
    background: var(--sds-interactive-900);
}

.sds-bg-highlight {
    background: var(--sds-highlight);
}
.sds-bg-highlight-200 {
    background: var(--sds-highlight-200);
}

.sds-bg-warning {
    background: var(--sds-warning);
}
.sds-bg-warning-200 {
    background: var(--sds-warning-200);
}
.sds-bg-critical {
    background: var(--sds-critical);
}
.sds-bg-critical-200 {
    background: var(--sds-critical-200);
}

.sds-bg-alert {
    background: var(--sds-alert);
}

.sds-bg-white {
    background: var(--sds-white);
}

/*Section Text Colors*/
.sds-text-primary {
    color: var(--sds-primary);
}

.sds-text-primary-100 {
    color: var(--sds-primary-100);
}

.sds-text-primary-200 {
    color: var(--sds-primary-200);
}

.sds-text-primary-300 {
    color: var(--sds-primary-300);
}

.sds-text-primary-400 {
    color: var(--sds-primary-400);
}

.sds-text-primary-600 {
    color: var(--sds-primary-600);
}

.sds-text-primary-700 {
    color: var(--sds-primary-700);
}

.sds-text-primary-800 {
    color: var(--sds-primary-800);
}

.sds-text-primary-900 {
    color: var(--sds-primary-900);
}

.sds-text-secondary {
    color: var(--sds-secondary);
}

.sds-text-secondary-100 {
    color: var(--sds-secondary-100);
}

.sds-text-secondary-200 {
    color: var(--sds-secondary-200);
}

.sds-text-secondary-300 {
    color: var(--sds-secondary-300);
}

.sds-text-secondary-400 {
    color: var(--sds-secondary-400);
}

.sds-text-secondary-600 {
    color: var(--sds-secondary-600);
}

.sds-text-secondary-700 {
    color: var(--sds-secondary-700);
}

.sds-text-secondary-800 {
    color: var(--sds-secondary-800);
}

.sds-text-secondary-900 {
    color: var(--sds-secondary-900);
}

.sds-text-tertiary {
    color: var(--sds-tertiary);
}

.sds-text-tertiary-100 {
    color: var(--sds-tertiary-100);
}

.sds-text-tertiary-200 {
    color: var(--sds-tertiary-200);
}

.sds-bg-tertiary-300 {
    color: var(--sds-tertiary-300);
}

.sds-bg-tertiary-200 {
    color: var(--sds-tertiary-200);
}

.sds-text-tertiary-400 {
    color: var(--sds-tertiary-400);
}

.sds-text-tertiary-600 {
    color: var(--sds-tertiary-600);
}

.sds-text-tertiary-700 {
    color: var(--sds-tertiary-700);
}

.sds-text-tertiary-800 {
    color: var(--sds-tertiary-800);
}

.sds-text-tertiary-900 {
    color: var(--sds-tertiary-900);
}

.sds-text-grey {
    color: var(--sds-grey);
}

.sds-text-grey-100 {
    color: var(--sds-grey-100);
}

.sds-text-grey-200 {
    color: var(--sds-grey-200);
}

.sds-text-grey-300 {
    color: var(--sds-grey-300);
}

.sds-text-grey-400 {
    color: var(--sds-grey-400);
}

.sds-text-grey-600 {
    color: var(--sds-grey-600);
}

.sds-text-grey-700 {
    color: var(--sds-grey-700);
}

.sds-text-grey-800 {
    color: var(--sds-grey-800);
}

.sds-text-grey-900 {
    color: var(--sds-grey-900);
}

.sds-text-success {
    color: var(--sds-success);
}

.sds-text-success-100 {
    color: var(--sds-success-100);
}

.sds-text-success-200 {
    color: var(--sds-success-200);
}

.sds-text-success-300 {
    color: var(--sds-success-300);
}

.sds-text-success-400 {
    color: var(--sds-success-400);
}

.sds-text-success-600 {
    color: var(--sds-success-600);
}

.sds-text-success-700 {
    color: var(--sds-success-700);
}

.sds-text-success-800 {
    color: var(--sds-success-800);
}

.sds-text-success-900 {
    color: var(--sds-success-900);
}

.sds-text-interactive {
    color: var(--sds-interactive);
}

.sds-text-interactive-100 {
    color: var(--sds-interactive-100);
}

.sds-text-interactive-200 {
    color: var(--sds-interactive-200);
}

.sds-text-interactive-300 {
    color: var(--sds-interactive-300);
}

.sds-text-interactive-400 {
    color: var(--sds-interactive-400);
}

.sds-bg-interactive-600 {
    color: var(--sds-interactive-600);
}

.sds-text-interactive-700 {
    color: var(--sds-interactive-700);
}

.sds-text-interactive-800 {
    color: var(--sds-interactive-800);
}

.sds-text-interactive-900 {
    color: var(--sds-interactive-900);
}

.sds-text-highlight {
    color: var(--sds-highlight);
}

.sds-text-warning {
    color: var(--sds-warning);
}


.sds-text-critical {
    color: var(--sds-critical);
}

.sds-text-critical:hover {
    color: var(--sds-critical);
}

.sds-text-alert {
    color: var(--sds-alert);
}

.sds-text-white {
    color: var(--sds-white);
}

.sds-text-black {
    color: var(--sds-black);
}

/*Section Buttons*/
.sds-btn-primary {
    color: var(--sds-white) !important;
    border-radius: 6px !important;
    background: var(--sds-primary) !important;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
}

.sds-btn-primary:disabled {
    opacity: 0.3;
}

.sds-btn-primary:hover {
    background: var(--sds-primary-600) !important;
    color: var(--sds-white) !important;
}

.sds-btn-primary:active {
    background: var(--sds-primary-700) !important;
    color: var(--sds-white) !important;
}

.sds-btn-primary:focus {
    background: var(--sds-primary) !important;
    color: var(--sds-white) !important;
}

.sds-btn-secondary {
    color: var(--sds-grey-900) !important;
    border: 1px solid var(--sds-grey) !important;
    border-radius: 6px !important;
    background: var(--sds-grey-000) !important;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
}

.sds-btn-secondary:disabled {
    opacity: 0.3;
}

.sds-btn-secondary:hover {
    background: var(--sds-grey-200) !important;
    color: var(--sds-grey-900) !important;
}

.sds-btn-secondary:active {
    background: var(--sds-grey-300) !important;
    color: var(--sds-grey-900) !important;
}

.sds-btn-secondary:focus {
    background: var(--sds-grey-000) !important;
    color: var(--sds-grey-900) !important;
}

.sds-btn-tertiary {
    color: var(--sds-primary);
    border-radius: 6px;
}

.sds-btn-secondary:hover {
    background: var(--sds-grey-200);
    color: var(--sds-primary);
}

.sds-btn-secondary:active {
    background: var(--sds-grey-300);
    color: var(--sds-primary);
}

.sds-btn-secondary:focus {
    background: var(--sds-primary);
    color: var(--sds-primary);
}

.sds-btn-critical {
    color: var(--sds-white) !important;
    border-radius: 6px !important;
    background: var(--sds-critical) !important;
}

.sds-btn-critical:disabled {
    opacity: 0.3;
}

.sds-btn-critical:hover {
    background: var(--sds-critical-600) !important;
    color: var(--sds-white) !important;
}

.sds-btn-critical:active {
    background: var(--sds-critical-700) !important;
    color: var(--sds-white) !important;
}

.sds-btn-critical:focus {
    background: var(--sds-critical-600) !important;
    color: var(--sds-white) !important;
}

/*SDS INPUT TEXT*/

.sds-input-text {
    border-radius: 6px;
    border: 1px solid var(--sds-grey);
    background: var(--sds-grey-000);
    display: flex;
    height: 32px;
    padding: 6px 12px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    outline: none;
}

.sds-input-text:read-only,
textarea:read-only{
    opacity: 0.7;
}

/*sds-card*/
.sds-card-main {
    border-radius: 8px;
    background: var(--sds-grey-000);   
    box-shadow: 0px 0px 1px 0px rgba(2, 3, 3, 0.25), 0px 2px 1px 0px rgba(2, 3, 3, 0.05);
}

/*SDS TEXT*/

.sds-text-b2-regular {
    font-family: var(--sds-font-family);  
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; 
}

.sds-text-b2-semi-bold {
    font-family: var(--sds-font-family);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.sds-text-b3-semi-bold {
    font-family: var(--sds-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
.sds-text-b4-regular { 
    font-family: var(--sds-font-family);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}
.sds-text-b4a-semi-bold { 
    font-family: var(--sds-font-family);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; 
}
.sds-text-b5-regular {
    font-family: var(--sds-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; 
}
.sds-text-b5-semi-bold {
    font-family: var(--sds-font-family);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
}
