:root {
    /* ============== Primary Color Pallette ============ */
    --primary-color: #1a85cf;
    --primary-100-color: #002762;
    --primary-90-color: #1555b4;
    --primary-80-color: #002762;
    --primary-70-color: #3075dd;
    --primary-60-color: #5297ff;
    --primary-50-color: #71aaff;
    --primary-40-color: #90bcff;
    --primary-30-color: #afcfff;
    --primary-20-color: #cee2ff;
    --primary-10-color: #edf4ff;
    --btn-primary-color: #1a85cf;
    --btn-hover-color: #14679e;
    /* ============= Secondary Color Pallete ==============*/
    --secondary-color: #02398b;
    --secondary-100-color: #00415c;
    --secondary-90-color: #005e85;
    --secondary-80-color: #007aad;
    --secondary-70-color: #0097d6;
    --secondary-60-color: #00b4ff;
    --secondary-50-color: #2ec1ff;
    --secondary-40-color: #5ccfff;
    --secondary-30-color: #8adcff;
    --secondary-20-color: #b7eaff;
    --secondary-10-color: #e5f7ff;
    /* =========== Danger Color Pallete ============== */
    --danger-color: #e5553c;
    --danger-100-color: #5d1205;
    --danger-90-color: #7f1e0d;
    --danger-80-color: #a12e19;
    --danger-70-color: #c34029;
    --danger-60-color: #e5553c;
    --danger-50-color: #ff6a4f;
    --danger-40-color: #ff8b77;
    --danger-30-color: #ffad9e;
    --danger-20-color: #ffcec6;
    --danger-10-color: #fff0ed;
    /* ============== Success Color Pallete ================= */
    --success-color: #36b37e;
    --success-100-color: #0b4d31;
    --success-90-color: #156f49;
    --success-80-color: #249163;
    --success-70-color: #36b37e;
    --success-60-color: #4cd59b;
    --success-50-color: #66f7b9;
    --success-40-color: #8affcd;
    --success-30-color: #acffdc;
    --success-20-color: #ceffea;
    --success-10-color: #f0fff8;
    /* =============== Pending Color Pallete ================ */
    --pending-color: #ffab00;
    --pending-100-color: #5c3e00;
    --pending-90-color: #855900;
    --pending-80-color: #ad7400;
    --pending-70-color: #d69000;
    --pending-60-color: #ffab00;
    --pending-50-color: #ffba2e;
    --pending-40-color: #ffc95c;
    --pending-30-color: #ffd88a;
    --pending-20-color: #ffe7b7;
    --pending-10-color: #fff6e5;
    /* =============== Info Color Pallete ================ */
    --info-color: #00b4ff;
    --info-100-color: #00415c;
    --info-90-color: #005e85;
    --info-80-color: #007aad;
    --info-70-color: #0097d6;
    --info-60-color: #00b4ff;
    --info-50-color: #2ec1ff;
    --info-40-color: #5ccfff;
    --info-30-color: #8adcff;
    --info-20-color: #b7eaff;
    --info-10-color: #e5f7ff;
    /* ============ Text Color ===============  */
    --text-primary-color: #525252;
    --text-black-color: #000;
    --text-banner-color: #10293d;
    --text-smallbanner-color: #6e6e73;
    --text-header-color: #6c6c6c;
    --text-100-color: #282829;
    --text-90-color: #3d3d3d;
    --text-80-color: #525252;
    --text-70-color: #666666;
    --text-60-color: #8f8f8f;
    --text-50-color: #a3a3a3;
    --text-40-color: #b8b8b8;
    --text-30-color: #cccccc;
    --text-20-color: #e1e1e1;
    --text-10-color: #f5f5f5;
    --text-light-color: #fff;
    /* ================ Complimentary Color =========*/
    --complimentary-color: #ff863b;
    /* ============ Text Sizes ================ */
    --atom-lg-text: 4.313rem;
    --atom-md-text: 3.438rem;
    --atom-h1: 2.75rem;
    --atom-h2: 2.188rem;
    --atom-h3: 1.75rem;
    --atom-h4: 1.438rem;
    --atom-label: 0.875rem;
    --atom-p: 1rem;
    --atom-tiny: 0.75rem;
    --atom-btn-text: 1rem;
    /* ==================== Spacing ================= */
    --atom-5x-space: 7.5rem;
    --atom-4x-space: 6.5rem;
    --atom-3x-space: 5rem;
    --atom-2x-space: 4rem;
    --atom-x-space: 3.75rem;
    --atom-l-space: 3.125rem;
    --atom-m-space: 2.5rem;
    --atom-s-space: 1.3rem;
    /* ================== Font Weight ================ */
    --font-bold: 700;
    --font-normal: 400;
    --font-family: Roboto, sans-serif;
    /* ============= Box Shadow ============= */
    --box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
    /*--box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);*/
    /* =============== width =============== */
    --atom-width-10: 10%;
    --atom-width-20: 20%;
    --atom-width-30: 30%;
    --atom-width-40: 40%;
    --atom-width-50: 50%;
    --atom-width-60: 60%;
    --atom-width-70: 70%;
    --atom-width-80: 80%;
    --atom-width-90: 90%;
    --atom-width-100: 100%;
}

/* ============= Global ============= */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

p {
    margin-bottom: 0 !important;
}

ul,
li {
    margin-bottom: 0 !important;
}

/* =========== Badge components =============== */
.atom-badge {
    /* padding: 3px 10px;
    border-radius: 50px;
    display: inline-block;
    font-size: 0.7rem;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;*/

    border: none;
    display: inline-flex;
    max-width: 100%;
    outline: 0;
    padding: 0 12px;
    position: relative;
    box-sizing: border-box;
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    align-items: center;
    white-space: normal;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    line-height: 1.5;
    margin: 4px;
}

.atom-badge > .atom-badge-content {
    align-items: center;
    display: inline-flex;
    height: 100%;
    max-width: 100%;
    /*font-weight: 500 !important;*/
}

/*Sizes Badge*/
.atom-badge.atom-badge-size-small {
    font-size: 12px;
    padding: 0 8px;
    border-radius: 12px;
    height: 24px;
}

.atom-badge.atom-badge-size-medium {
    font-size: 14px;
    padding: 0 12px;
    border-radius: 16px;
    height: 32px;
}

.atom-badge.atom-bage-size-large {
    font-size: 16px;
    padding: 0 16px;
    border-radius: 20px;
    height: 40px;
}


/*===========Variants and Colors===========*/
/*TEXT*/
.atom-badge-text.atom-badge-primary {
    color: #409FE1;
    background-color: #409FE133;
}

.atom-badge-text.atom-badge-success {
    color: #36B37E;
    background-color: #36B37E33;
}

.atom-badge-text.atom-badge-danger {
    color: #E5553C;
    background-color: #E5553C33;
}

.atom-badge-text.atom-badge-pending {
    color: #FFAB00;
    background-color: #FFAB0033;
}

.atom-badge-text.atom-badge-default {
    color: #525252;
    background-color: #5252520D;
}

/*Filled*/
.atom-badge-filled.atom-badge-primary {
    color: #fff;
    background-color: #409FE1;
}

.atom-badge-filled.atom-badge-success {
    color: #fff;
    background-color: #36B37E;
}

.atom-badge-filled.atom-badge-danger {
    color: #fff;
    background-color: #E5553C;
}

.atom-badge-filled.atom-badge-pending {
    color: #fff;
    background-color: #FFAB00;
}

.atom-badge-filled.atom-badge-default {
    color: #525252;
    background-color: #52525226;
}

.atom-badge-filled.atom-badge-highlight {
    color: #1A85CF;
    background-color: #D0ECFF;
}

/*Outlined*/
.atom-badge-outlined.atom-badge-primary {
    color: #409FE1;
    border: 1px solid #409FE1;
}

.atom-badge-outlined.atom-badge-success {
    color: #36B37E;
    border: 1px solid #36B37E;
}

.atom-badge-outlined.atom-badge-danger {
    color: #E5553C;
    border: 1px solid #E5553C;
}

.atom-badge-outlined.atom-badge-pending {
    color: #FFAB00;
    border: 1px solid #FFAB00;
}

.atom-badge-outlined.atom-badge-default {
    color: #525252;
    border: 1px solid #52525280;
}
/* =========== Badge components =============== */

/* =============== Background Color ============= */
/* =========== Background With Hover Color =========== */
.atom-bg-hover-primary {
    background: var(--btn-primary-color);
    transition: 0.3s ease;
}

.atom-bg-hover-primary:hover {
    background: var(--btn-hover-color);
}

.atom-bg-hover-success {
    background: var(--success-color);
    transition: 0.3s ease;
}

.atom-bg-hover-success:hover {
    background: var(--success-80-color);
}

.atom-bg-hover-danger {
    background: var(--danger-color);
    transition: 0.3s ease;
}

.atom-bg-hover-danger:hover {
    background: var(--danger-70-color);
}

.atom-bg-hover-pending {
    background: var(--pending-color);
    transition: 0.3s ease;
}

.atom-bg-hover-pending:hover {
    background: var(--pending-70-color);
}

.atom-bg-hover-info {
    background: var(--info-color);
    transition: 0.3s ease;
}

.atom-bg-hover-info:hover {
    background: var(--info-70-color);
}

/* =============== Background Color ============= */

/* ============= Background Color Without Hover ============= */

.atom-bg-primary {
    background: var(--primary-color);
    transition: 0.3s ease;
}

.atom-bg-success {
    background: var(--success-60-color);
    transition: 0.3s ease;
}

.atom-bg-danger {
    background: var(--danger-70-color);
    transition: 0.3s ease;
}

.atom-bg-pending {
    background: var(--pending-40-color);
    transition: 0.3s ease;
}

.atom-bg-info {
    background: var(--secondary-40-color);
    transition: 0.3s ease;
}

.atom-bg-confirm {
    background: var(--text-40-color);
    transition: 0.3s ease;
}

/* ============== Buttons =============== */
.atom-btn img {
    width: auto;
    height: 25px;
}

.atom-btn {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 3rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: var(--atom-p);
    font-family: Arial;
    font-style: normal;
    margin-bottom: 1rem;
}

.atom-btn-sqr {
    padding: 0.5rem 3rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border: 1px solid transparent;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    font-size: var(--atom-p);
    font-family: Arial;
    font-style: normal;
    margin-bottom: 1rem;
}

.atom-btn-pill {
    padding: 0.5rem 3rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 3.125rem;
    border: 1px solid transparent;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    font-size: var(--atom-p);
    font-family: Arial;
    font-style: normal;
    margin-bottom: 1rem;
}

.atom-btn-outline-success {
    border: 1px solid var(--success-color);
    color: var(--success-color);
    background: transparent;
    transition: 0.3s ease;
}

.atom-btn-outline-success:hover {
    background: var(--success-color);
    color: var(--text-10-color);
}

.atom-btn-outline-danger {
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    background: transparent;
    transition: 0.3s ease;
}

.atom-btn-outline-danger:hover {
    background: var(--danger-color);
    color: var(--text-10-color);
}

.atom-btn-outline-pending {
    border: 1px solid var(--pending-color);
    color: var(--pending-color);
    background: transparent;
    transition: 0.3s ease;
}

.atom-btn-outline-pending:hover {
    background: var(--pending-color);
    color: var(--text-10-color);
}

.atom-btn-outline-primary {
    border: 1px solid var(--btn-primary-color);
    color: var(--btn-primary-color);
    background: transparent;
    transition: 0.3s ease;
}

.atom-btn-outline-primary:hover {
    background: var(--btn-hover-color);
    color: var(--text-10-color);
}

.atom-btn-outline-secondary {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    background: transparent;
    transition: 0.3s ease;
}

.atom-btn-outline-secondary:hover {
    background: var(--secondary-color);
    color: var(--text-10-color);
}

.atom-btn-outline-cancel {
    border: 1px solid var(--text-70-color);
    color: var(--text-70-color);
    background: transparent;
    transition: 0.3s ease;
}

.atom-btn-outline-cancel:hover {
    background: var(--text-70-color);
    color: var(--text-10-color);
}

.atom-btn-primary {
    background: var(--btn-primary-color);
    border-color: var(--btn-primary-color);
    transition: 0.3s ease;
}

.atom-btn-primary:hover {
    background: var(--btn-hover-color);
    border-color: var(--btn-hover-color);
}

.atom-btn-secondary {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    transition: 0.3s ease;
}

.atom-btn-secondary:hover {
    background: var(--secondary-50-color);
    border-color: var(--secondary-50-color);
}

.atom-btn-danger {
    background: var(--danger-color);
    border-color: var(--danger-color);
    transition: 0.3s ease;
}

.atom-btn-danger:hover {
    background: var(--danger-70-color);
    border-color: var(--danger-70-color);
}

.atom-btn-success {
    background: var(--success-color);
    border-color: var(--success-color);
    transition: 0.3s ease;
}

.atom-btn-success:hover {
    background: var(--success-80-color);
    border-color: var(--success-80-color);
}

.atom-btn-pending {
    background: var(--pending-color);
    border-color: var(--pending-color);
    transition: 0.3s ease;
}

.atom-btn-pending:hover {
    background: var(--pending-70-color);
    border-color: var(--pending-70-color);
}

.atom-btn-cancel {
    background: var(--text-70-color);
    border-color: var(--text-70-color);
    transition: 0.3s ease;
}

.atom-btn-cancel:hover {
    background: var(--text-80-color);
    border-color: var(--text-80-color);
}

/* ============== Buttons =============== */

/* ============== Width ============= */
.atom-w-10 {
    width: var(--atom-width-10) !important;
}

.atom-w-20 {
    width: var(--atom-width-20) !important;
}

.atom-w-30 {
    width: var(--atom-width-30) !important;
}

.atom-w-40 {
    width: var(--atom-width-40) !important;
}

.atom-w-50 {
    width: var(--atom-width-50) !important;
}

.atom-w-60 {
    width: var(--atom-width-60) !important;
}

.atom-w-70 {
    width: var(--atom-width-70) !important;
}

.atom-w-80 {
    width: var(--atom-width-80) !important;
}

.atom-w-90 {
    width: var(--atom-width-90) !important;
}

.atom-w-100 {
    width: var(--atom-width-100) !important;
}

/* ============== Width ============= */

/* ============= Spacing ============= */

.atom-5x-space {
    margin-bottom: var(--atom-5x-space) !important;
}

.atom-4x-space {
    margin-bottom: var(--atom-4x-space) !important;
}

.atom-3x-space {
    margin-bottom: var(--atom-3x-space) !important;
}

.atom-2x-space {
    margin-bottom: var(--atom-2x-space) !important;
}

.atom-x-space {
    margin-bottom: var(--atom-x-space) !important;
}

.atom-l-space {
    margin-bottom: var(--atom-l-space) !important;
}

.atom-m-space {
    margin-bottom: var(--atom-m-space) !important;
}

.atom-s-space {
    margin-bottom: var(--atom-s-space) !important;
}

/* ============= Spacing ============= */

/* ====== Typography ======= */

/* ========== Text Color ============ */

.txt-primary-color {
    color: var(--text-primary-color) !important;
}

.txt-banner-color {
    color: var(--text-banner-color) !important;
}

.txt-disabled-color {
    color: var(--text-smallbanner-color) !important;
}

.txt-logo-color {
    color: var(--info-100-color) !important;
}

.txt-primary {
    color: var(--primary-color) !important;
}

.txt-secondary {
    color: var(--secondary-color) !important;
}

.txt-danger {
    color: var(--danger-color) !important;
}

.txt-success {
    color: var(--success-color) !important;
}

.txt-pending {
    color: var(--pending-color) !important;
}

.txt-info {
    color: var(--info-color) !important;
}

.txt-dark {
    color: var(--text-100-color) !important;
}

.txt-light {
    color: var(--text-light-color) !important;
}

.txt-black {
    color: var(--text-black-color) !important;
}

.txt-complimentary {
    color: var(--complimentary-color) !important;
}

.txt-btn-primary-color {
    color: var(--btn-primary-color) !important;
}

/* ========== Text Color ============ */

/* ========= Classes Typography ============ */

.atom-lg-title {
    font-size: var(--atom-lg-text);
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.atom-md-title {
    font-size: var(--atom-md-text);
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.atom-h1 {
    font-size: var(--atom-h1);
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.atom-h2 {
    font-size: var(--atom-h2);
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.atom-h3 {
    font-size: var(--atom-h3);
    font-family: var(--font-family);
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.atom-h4 {
    font-size: var(--atom-h4);
    font-family: var(--font-family);
    font-style: normal;
    margin-bottom: 0.3rem;
}

.atom-label {
    font-size: var(--atom-label);
    font-style: normal;
    font-weight: bold;
    display: block;
    margin-bottom: 0.3rem;
}

.atom-p {
    font-size: var(--atom-p);
    font-family: var(--font-family);
    font-style: normal;
}

.atom-tiny {
    font-size: var(--atom-tiny);
    font-family: Arial;
    font-style: normal;
}

/* ========= Classes Typography ============ */

/* ======================== Input Components ============== */
.atom-inputfields {
    padding: 12px 10px;
    border-radius: 7px;
    border: 1px solid #DDDDDD;
    outline: none;
    width: 100%;
}

/* ======================== Searchbar ============== */

.atom-searchbar {
    margin-bottom: 1rem;
}

.atom-search img {
    position: absolute;
    top: 17px;
    left: 15px;
}

.atom-search {
    position: relative;
}

input.atom-search-input {
    height: 50px;
    outline: none;
    padding: 10px 40px;
    border: 1px solid #DDDDDD;
    border-radius: 7px;
    width: 100%;
}


/* Media Query */
@media (max-width: 569px) {
    :root {
        --atom-lg-text: 3.313rem;
        --atom-md-text: 2.438rem;
        --atom-h1: 2.75rem;
        --atom-h2: 2.188rem;
        --atom-h3: 1.75rem;
        --atom-h4: 1.438rem;
        --atom-label: 0.875rem;
        --atom-p: 1rem;
        --atom-tiny: 0.75rem;
        --atom-btn-text: 1rem;
    }
}