@import url(color.css);
@import url(button.css);
@import url(size.css);

@import url(../fonts/font.css);

body {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    max-width: 960px;
    margin: auto;
    font-size: 16px;
    font-weight: 400;
}

/* Font Size */
.s-fs-1 { font-size: 8px; }    /* Extra small */
.s-fs-2 { font-size: 12px; }   /* Small */
.s-fs-3 { font-size: 16px; }   /* Base */
.s-fs-4 { font-size: 20px; }   /* Medium */
.s-fs-5 { font-size: 24px; }   /* Large */
.s-fs-6 { font-size: 28px; }   /* XL */
.s-fs-7 { font-size: 32px; }   /* 2XL */
.s-fs-8 { font-size: 40px; }   /* 3XL */
.s-fs-9 { font-size: 48px; }   /* 4XL */
.s-fs-10 { font-size: 64px; }  /* 5XL */


/* MARGIN CLASSES */
.s-m-0  { margin: 0 !important; }
.s-m-1  { margin: 4px !important; }
.s-m-2  { margin: 8px !important; }
.s-m-3  { margin: 12px !important; }
.s-m-4  { margin: 16px !important; }
.s-m-5  { margin: 20px !important; }
.s-m-6  { margin: 24px !important; }
.s-m-7  { margin: 28px !important; }
.s-m-8  { margin: 32px !important; }
.s-m-9  { margin: 36px !important; }
.s-m-10  { margin: 40px !important; }

.s-mt-0 { margin-top: 0 !important; }
.s-mt-1 { margin-top: 4px !important; }
.s-mt-2 { margin-top: 8px !important; }
.s-mt-3 { margin-top: 12px !important; }
.s-mt-4 { margin-top: 16px !important; }
.s-mt-5 { margin-top: 20px !important; }
.s-mt-6 { margin-top: 24px !important; }
.s-mt-7 { margin-top: 28px !important; }
.s-mt-8 { margin-top: 32px !important; }
.s-mt-9 { margin-top: 36px !important; }
.s-mt-10 { margin-top: 40px !important; }

.s-mb-0 { margin-bottom: 0 !important; }
.s-mb-1 { margin-bottom: 4px !important; }
.s-mb-2 { margin-bottom: 8px !important; }
.s-mb-3 { margin-bottom: 12px !important; }
.s-mb-4 { margin-bottom: 16px !important; }
.s-mb-5 { margin-bottom: 20px !important; }
.s-mb-6 { margin-bottom: 24px !important; }
.s-mb-7 { margin-bottom: 28px !important; }
.s-mb-8 { margin-bottom: 32px !important; }
.s-mb-9 { margin-bottom: 36px !important; }
.s-mb-10 { margin-bottom: 40px !important; }

.s-ml-0 { margin-left: 0 !important; }
.s-ml-1 { margin-left: 4px !important; }
.s-ml-2 { margin-left: 8px !important; }
.s-ml-3 { margin-left: 12px !important; }
.s-ml-4 { margin-left: 16px !important; }
.s-ml-5 { margin-left: 20px !important; }
.s-ml-6 { margin-left: 24px !important; }
.s-ml-7 { margin-left: 28px !important; }
.s-ml-8 { margin-left: 32px !important; }
.s-ml-9 { margin-left: 36px !important; }
.s-ml-10 { margin-left: 40px !important; }

.s-mr-0 { margin-right: 0 !important; }
.s-mr-1 { margin-right: 4px !important; }
.s-mr-2 { margin-right: 8px !important; }
.s-mr-3 { margin-right: 12px !important; }
.s-mr-4 { margin-right: 16px !important; }
.s-mr-5 { margin-right: 20px !important; }
.s-mr-6 { margin-right: 24px !important; }
.s-mr-7 { margin-right: 28px !important; }
.s-mr-8 { margin-right: 32px !important; }
.s-mr-9 { margin-right: 36px !important; }
.s-mr-10 { margin-right: 40px !important; }

.s-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.s-mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.s-mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.s-mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
.s-mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
.s-mx-5 { margin-left: 20px !important; margin-right: 20px !important; }
.s-mx-6 { margin-left: 24px !important; margin-right: 24px !important; }
.s-mx-7 { margin-left: 28px !important; margin-right: 28px !important; }
.s-mx-8 { margin-left: 32px !important; margin-right: 32px !important; }
.s-mx-9 { margin-left: 36px !important; margin-right: 36px !important; }
.s-mx-10 { margin-left: 40px !important; margin-right: 40px !important; }

.s-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.s-my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.s-my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.s-my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
.s-my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.s-my-5 { margin-top: 20px !important; margin-bottom: 20px !important; }
.s-my-6 { margin-top: 24px !important; margin-bottom: 24px !important; }
.s-my-7 { margin-top: 28px !important; margin-bottom: 28px !important; }
.s-my-8 { margin-top: 32px !important; margin-bottom: 32px !important; }
.s-my-9 { margin-top: 36px !important; margin-bottom: 36px !important; }
.s-my-10 { margin-top: 40px !important; margin-bottom: 40px !important; }


/* PADDING CLASSES */
.s-p-0  { padding: 0 !important; }
.s-p-1  { padding: 4px !important; }
.s-p-2  { padding: 8px !important; }
.s-p-3  { padding: 12px !important; }
.s-p-4  { padding: 16px !important; }
.s-p-5  { padding: 20px !important; }
.s-p-6  { padding: 24px !important; }
.s-p-7  { padding: 28px !important; }
.s-p-8  { padding: 32px !important; }
.s-p-9  { padding: 36px !important; }
.s-p-10  { padding: 40px !important; }

.s-pt-0 { padding-top: 0 !important; }
.s-pt-1 { padding-top: 4px !important; }
.s-pt-2 { padding-top: 8px !important; }
.s-pt-3 { padding-top: 12px !important; }
.s-pt-4 { padding-top: 16px !important; }
.s-pt-5 { padding-top: 20px !important; }
.s-pt-6 { padding-top: 24px !important; }
.s-pt-7 { padding-top: 28px !important; }
.s-pt-8 { padding-top: 32px !important; }
.s-pt-9 { padding-top: 36px !important; }
.s-pt-10 { padding-top: 40px !important; }

.s-pb-0 { padding-bottom: 0 !important; }
.s-pb-1 { padding-bottom: 4px !important; }
.s-pb-2 { padding-bottom: 8px !important; }
.s-pb-3 { padding-bottom: 12px !important; }
.s-pb-4 { padding-bottom: 16px !important; }
.s-pb-5 { padding-bottom: 20px !important; }
.s-pb-6 { padding-bottom: 24px !important; }
.s-pb-7 { padding-bottom: 28px !important; }
.s-pb-8 { padding-bottom: 32px !important; }
.s-pb-9 { padding-bottom: 36px !important; }
.s-pb-10 { padding-bottom: 40px !important; }

.s-pl-0 { padding-left: 0 !important; }
.s-pl-1 { padding-left: 4px !important; }
.s-pl-2 { padding-left: 8px !important; }
.s-pl-3 { padding-left: 12px !important; }
.s-pl-4 { padding-left: 16px !important; }
.s-pl-5 { padding-left: 20px !important; }
.s-pl-6 { padding-left: 24px !important; }
.s-pl-7 { padding-left: 28px !important; }
.s-pl-8 { padding-left: 32px !important; }
.s-pl-9 { padding-left: 36px !important; }
.s-pl-10 { padding-left: 40px !important; }

.s-pr-0 { padding-right: 0 !important; }
.s-pr-1 { padding-right: 4px !important; }
.s-pr-2 { padding-right: 8px !important; }
.s-pr-3 { padding-right: 12px !important; }
.s-pr-4 { padding-right: 16px !important; }
.s-pr-5 { padding-right: 20px !important; }
.s-pr-6 { padding-right: 24px !important; }
.s-pr-7 { padding-right: 28px !important; }
.s-pr-8 { padding-right: 32px !important; }
.s-pr-9 { padding-right: 36px !important; }
.s-pr-10 { padding-right: 40px !important; }

.s-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.s-px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.s-px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.s-px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.s-px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.s-px-5 { padding-left: 20px !important; padding-right: 20px !important; }
.s-px-6 { padding-left: 24px !important; padding-right: 24px !important; }
.s-px-7 { padding-left: 28px !important; padding-right: 28px !important; }
.s-px-8 { padding-left: 32px !important; padding-right: 32px !important; }
.s-px-9 { padding-left: 36px !important; padding-right: 36px !important; }
.s-px-10 { padding-left: 40px !important; padding-right: 40px !important; }

.s-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.s-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.s-py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.s-py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.s-py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.s-py-5 { padding-top: 20px !important; padding-bottom: 20px !important; }
.s-py-6 { padding-top: 24px !important; padding-bottom: 24px !important; }
.s-py-7 { padding-top: 28px !important; padding-bottom: 28px !important; }
.s-py-8 { padding-top: 32px !important; padding-bottom: 32px !important; }
.s-py-9 { padding-top: 36px !important; padding-bottom: 36px !important; }
.s-py-10 { padding-top: 40px !important; padding-bottom: 40px !important; }

/* Radisu */
.s-radius-0{ border-radius: 0 !important; }
.s-radius-1{ border-radius: 4px !important; }
.s-radius-2{ border-radius: 8px !important; }
.s-radius-3{ border-radius: 12px !important; }
.s-radius-4{ border-radius: 16px !important; }
.s-radius-5{ border-radius: 20px !important; }

.s-radius-br-0{ border-bottom-right-radius: 0 !important; }
.s-radius-br-1{ border-bottom-right-radius: 4px !important; }
.s-radius-br-2{ border-bottom-right-radius: 8px !important; }
.s-radius-br-3{ border-bottom-right-radius: 12px !important; }
.s-radius-br-4{ border-bottom-right-radius: 16px !important; }
.s-radius-br-5{ border-bottom-right-radius: 20px !important; }

.s-radius-bl-0{ border-bottom-left-radius: 0 !important; }
.s-radius-bl-1{ border-bottom-left-radius: 4px !important; }
.s-radius-bl-2{ border-bottom-left-radius: 8px !important; }
.s-radius-bl-3{ border-bottom-left-radius: 12px !important; }
.s-radius-bl-4{ border-bottom-left-radius: 16px !important; }
.s-radius-bl-5{ border-bottom-left-radius: 20px !important; }

.s-radius-tr-0{ border-top-right-radius: 0 !important; }
.s-radius-tr-1{ border-top-right-radius: 4px !important; }
.s-radius-tr-2{ border-top-right-radius: 8px !important; }
.s-radius-tr-3{ border-top-right-radius: 12px !important; }
.s-radius-tr-4{ border-top-right-radius: 16px !important; }
.s-radius-tr-5{ border-top-right-radius: 20px !important; }

.s-radius-tl-0{ border-top-left-radius: 0 !important; }
.s-radius-tl-1{ border-top-left-radius: 4px !important; }
.s-radius-tl-2{ border-top-left-radius: 8px !important; }
.s-radius-tl-3{ border-top-left-radius: 12px !important; }
.s-radius-tl-4{ border-top-left-radius: 16px !important; }
.s-radius-tl-5{ border-top-left-radius: 20px !important; }

.s-content-left{ justify-content: left; }
.s-content-center { justify-content: center; }
.s-content-right{ justify-content: right; }

.s-left { text-align: left; }
.s-center { text-align: center; }
.s-right { text-align: right; }

.s-middle { 
    align-items: center;
    vertical-align: middle; 
}
.s-center-middle {
    text-align: center;
    align-items: center;
    vertical-align: middle;
}

.s-bold { font-weight: bold; }

.s-flex{
    display: flex;
}

.s-row {
    display: flex;
    flex-wrap: wrap;
}

.s-row>* {
    width: 100%;
    max-width: 100%;
}

.s-table{
    width: 100%;
    vertical-align: top;
}

.s-table thead th {
    font-weight: bold;
}

.s-table-sm {
    font-size: 12px;
}

.s-table-sm thead tr th,
.s-table-sm tbody tr td {
    padding: 1px 2px;
}

/* Remove all borders */
.s-border-0 {
    border: 0 !important;
}

/* Individual borders */
.s-border-top {
    border-top: 1px solid var(--border-color) !important;
}

.s-border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

.s-border-left {
    border-left: 1px solid var(--border-color) !important;
}

.s-border-right {
    border-right: 1px solid var(--border-color) !important;
}

/* Overflow */
.s-auto{overflow: auto};
.s-clip{overflow: clip};
.s-hidden{overflow: hidden};
.s-overlay{overflow: overlay};
.s-inherit{overflow: inherit};
.s-initial{overflow: initial};