/* Vars */
:root {
    --primary: #0090d1;
    --secondary: #4cb8c3;
    --terceary: #009aaa;
    --lightGray: #9c9b9b;
    --gray: #6f6f6e;
    --pink: #e5007e;
    --yellow: #f08700;
    --success: #00a266;
    --lightTerceary: #99d7dd;
    --lightBlue: #00b0ea;
    --lightGray-20: rgb(235, 235, 235);
    --violet: #8c1d80;
    --violet-90: rgb(151, 52, 140);
    --green-70: rgb(77, 190, 148);
    --blue-70: rgb(77, 150, 201);
    /* New version */
    --color-header: #232d4f;
    --color-navbar: #0072BB;
    --color-main-button: #0072BB;
    --color-icon: #004F90;
    --color-link: #0072BB;
    --color-gray: #F4F4F4;
    --color-footer: #232d4f;
    --color-white: white;
    --color-black: #000000;
    --color-card-title: #333333;
    --color-card-body-text: #525252;
    --color-area: #f4f4f4;
    --color-success-body: rgba(46, 125, 51, 0.05);
    --color-error-body: rgba(125, 46, 46, 0.05);
    --color-success-1: #2E7D33;
    --color-error-1: #7D2E2E;
    --color-danger-1: #dc3545;
    --color-line: #CECECE;
    --color-disabled-1: #8F8F8F;
    --color-warning-1: #F9A822;
    --color-body-warning-1: #FFFAF3;
    --color-gray-1: #979797;
    --color-gray-2: #8F8F8F;
    --color-lightblue-1: #37BBED;
}

/* Delete style*/
.ut-btn-no-style {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

a.ut-btn-no-style {
    text-decoration: none;
}

.ut-p-no-style {
    margin-bottom: 0;
}

/* Background Color */
.ut-bg-primary {
    background-color: var(--primary);
}

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

.ut-bg-lightTerceary {
    background-color: var(--lightTerceary);
}

.ut-bg-terceary {
    background-color: var(--terceary);
}

.ut-bg-lightGray {
    background-color: var(--lightGray);
}

.ut-bg-success {
    background-color: var(--success) !important;
}

.ut-bg-lightBlue {
    background-color: var(--lightBlue);
}

.ut-bg-pink {
    background-color: var(--pink);
}

.ut-bg-violet-90 {
    background-color: var(--violet-90);
}

.ut-bg-green-70 {
    background-color: var(--green-70);
}

.ut-bg-blue-70 {
    background-color: var(--blue-70);
}

.ut-bg-lightGray-20 {
    background-color: var(--lightGray-20);
}


.ut-bg-header {
    background-color: var(--color-header);
}

.ut-bg-navbar {
    background-color: var(--color-navbar);
}

.ut-bg-main-button {
    background-color: var(--color-main-button);
}

.ut-bg-icon {
    background-color: var(--color-icon);
}

.ut-bg-link {
    background-color: var(--color-link);
}

.ut-bg-gray {
    background-color: var(--color-gray);
}

.ut-bg-footer {
    background-color: var(--color-footer);
}

.ut-bg-area {
    background-color: var(--color-area)
}

.ut-bg-success-body {
    background-color: var(--color-success-body)
}

.ut-bg-error-body {
    background-color: var(--color-error-body)
}

.ut-bg-success-1 {
    background-color: var(--color-success-1) 
}

.ut-bg-error-1 {
    background-color: var(--color-error-1)
}

.ut-bg-line {
    background-color: var(--color-line)
}

.ut-bg-white {
    background-color: var(--color-white)
}

.ut-bg-body-warning-1 {
    background-color: var(--color-body-warning-1)
}

.ut-bg-transparent {
    background-color: transparent;
}

.ut-bg-lightblue-1 {
    background-color: var(--color-lightblue-1)
}

/* Text Color */
.ut-text-primary,
.ut-text-primary:hover {
    color: var(--primary) !important;
}

.ut-text-green-70 {
    color: var(--green-70);
}

.ut-text-gray {
    color: var(--gray);
}

.ut-text-lightGray {
    color: var(--lightGray);
}

.ut-text-lightGray-20 {
    color: var(--lightGray-20);
}

.ut-text-pink {
    color: var(--pink);
}

.ut-text-terceary {
    color: var(--terceary);
}

.ut-text-white {
    color: var(--color-white)
}

.ut-text-link {
    color: var(--color-link)
}

.ut-text-black {
    color: var(--color-black)
}

.ut-text-card-title {
    color: var(--color-card-title)
}

.ut-text-card-body-text {
    color: var(--color-card-body-text)
}

.ut-text-icon {
    color: var(--color-icon)
}

.ut-text-disabled-1 {
    color: var(--color-disabled-1)
}

.ut-text-footer {
    color: var(--color-footer)
}

.ut-text-main-button {
    color: var(--color-main-button)
}

.ut-text-gray-1 {
    color: var(--color-gray-1)
}

.ut-text-gray-2 {
    color: var(--color-gray-2)
}

.ut-text-danger-1 {
    color: var(--color-danger-1)
}

.ut-text-warning-1 {
    color: var(--color-warning-1)
}

/* Border Color */
.ut-border-primary {
    border-color: var(--primary)
}

.ut-border-terceary {
    border-color: var(--terceary)
}

.ut-border-main-button {
    border-color: var(--color-main-button)
}

.ut-border-warning-1 {
    border-color: var(--color-warning-1)
}

.ut-border-footer {
    border-color: var(--color-footer)
}

.ut-border-transparent {
    border-color: transparent
}

/* Space */
.ut-space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
}

.ut-space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 1rem;
}

/* Border Width */
.ut-border-0 {
    border-width: 0px;
}

.ut-border-b {
    border-bottom-width: 1px;
}
.ut-border-b-2 {
    border-bottom-width: 2px;
}

/* Border Style */
.ut-border-solid {
    border-style: solid;
}

.ut-border-dotted {
    border-style: dotted;
}

.ut-border-color-line {
    border-color: var(--color-line)
}

/* Font Size */
.ut-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.ut-text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.ut-text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.ut-text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.ut-text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.ut-text-5xl {
    font-size: 3rem;
    line-height: 1;
}

/* Display */
.ut-grid {
    display: grid;
}

/* Grid Cols */
.ut-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Grid Gap */
.ut-gap-x-3 {
    column-gap: 0.75rem;
}

/* Grid Col Span */
.ut-col-span-2 {
    grid-column: span 2 / span 2;
}

/* Placement of positioned elements */
.ut-top-0 {
    top: 0px;
}

.ut-right-0 {
    right: 0px;
}

.ut-bottom-0 {
    bottom: 0px;
}

.ut-left-0 {
    left: 0px;
}

/* Z-Index */
.ut-z-0 {
    z-index: 0;
}

.ut-z-10 {
    z-index: 10;
}

.ut-z-20 {
    z-index: 20;
}

/* Text Overflow */
.ut-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Resize */
.resize-none {
    resize: none;
}

/* Object Fit */
.ut-object-cover {
    object-fit: cover;
}

/* Media */
@media (min-width: 768px) {
    /* Background Color */
    .ut-bg-md-transparent {
        background-color: transparent;
    }
    /* Border Size */
    .ut-border-md-0 {
        border-width: 0px;
    }
    /* Text Size */
    .ut-text-md-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .ut-text-md-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .ut-text-md-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .ut-text-md-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .ut-text-md-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .ut-text-md-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    /* Space */
    .ut-space-md-y-0 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0rem;
    }
    .ut-space-md-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 1rem;
    }
    .ut-space-md-x-8 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 2rem;
    }
}

@media (min-width: 1024px) {
    /* Text Size */
    .ut-text-lg-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .ut-text-lg-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .ut-text-lg-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .ut-text-lg-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .ut-text-lg-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    .ut-text-lg-5xl {
        font-size: 3rem;
        line-height: 1;
    }
}