smart-webcomponents/bootstrap/source/styles/smart.bootstrap.css

Web Components & Custom Elements for Professional Web Applications

:root {	
    --smart-blue_500: 39, 162, 252;
    --smart-blue_400: 39, 143, 255;
    --smart-blue_600: 0, 95, 198;
    --smart-blue_0: 255, 255, 255;
    --smart-blue_800: 0, 39, 82;
    --smart-blue_900: 0, 36, 74;
    --smart-blue_50: 204, 229, 255;
    --smart-blue_100: 182, 217, 255;
    --smart-blue_200: 138, 194, 255;
    --smart-blue_300: 120, 185, 255;
    --smart-blue_700: 0, 64, 133;
    --smart-blue_1000: 0, 4, 9;
    --smart-indigo_500: 102, 16, 242;
    --smart-indigo_400: 124, 50, 244;
    --smart-indigo_600: 81, 11, 196;
    --smart-indigo_0: 255, 255, 255;
    --smart-indigo_800: 46, 6, 110;
    --smart-indigo_900: 29, 4, 70;
    --smart-indigo_50: 236, 226, 253;
    --smart-indigo_100: 220, 200, 252;
    --smart-indigo_200: 197, 164, 250;
    --smart-indigo_300: 173, 127, 248;
    --smart-indigo_700: 63, 8, 152;
    --smart-indigo_1000: 4, 0, 9;
    --smart-purple_500: 111, 66, 193;
    --smart-purple_400: 131, 92, 202;
    --smart-purple_600: 88, 51, 156;
    --smart-purple_0: 255, 255, 255;
    --smart-purple_800: 49, 29, 87;
    --smart-purple_900: 32, 18, 56;
    --smart-purple_50: 236, 236, 246;
    --smart-purple_100: 222, 211, 241;
    --smart-purple_200: 200, 183, 231;
    --smart-purple_300: 178, 153, 222;
    --smart-purple_700: 68, 40, 120;
    --smart-purple_1000: 4, 2, 7;
    --smart-pink_500: 228, 27, 119;
    --smart-pink_400: 232, 62, 140;
    --smart-pink_600: 185, 22, 97;
    --smart-pink_0: 255, 255, 255;
    --smart-pink_800: 104, 12, 54;
    --smart-pink_900: 66, 8, 35;
    --smart-pink_50: 252, 227, 238;
    --smart-pink_100: 249, 203, 224;
    --smart-pink_200: 245, 169, 204;
    --smart-pink_300: 241, 134, 183;
    --smart-pink_700: 143, 17, 75;
    --smart-pink_1000: 8, 1, 4;
    --smart-red_500: 176, 0, 32;
    --smart-red_400: 228, 96, 109;
    --smart-red_600: 184, 32, 47;
    --smart-red_0: 255, 255, 255;
    --smart-red_800: 73, 18, 23;
    --smart-red_900: 63, 11, 16;
    --smart-red_50: 248, 215, 218;
    --smart-red_100: 245, 198, 203;
    --smart-red_200: 240, 169, 176;
    --smart-red_300: 235, 140, 149;
    --smart-red_700: 114, 28, 36;
    --smart-red_1000: 8, 1, 2;
    --smart-orange_500: 253, 126, 20;
    --smart-orange_400: 253, 137, 41;
    --smart-orange_600: 205, 94, 2;
    --smart-orange_0: 255, 255, 255;
    --smart-orange_800: 115, 53, 1;
    --smart-orange_900: 73, 34, 1;
    --smart-orange_50: 255, 238, 224;
    --smart-orange_100: 255, 223, 197;
    --smart-orange_200: 254, 203, 160;
    --smart-orange_300: 254, 182, 121;
    --smart-orange_700: 159, 73, 1;
    --smart-orange_1000: 9, 4, 0;
    --smart-yellow_500: 255, 193, 7;
    --smart-yellow_400: 255, 201, 39;
    --smart-yellow_600: 211, 158, 0;
    --smart-yellow_0: 255, 255, 255;
    --smart-yellow_800: 83, 63, 3;
    --smart-yellow_900: 74, 56, 0;
    --smart-yellow_50: 254, 246, 216;
    --smart-yellow_100: 255, 238, 186;
    --smart-yellow_200: 255, 232, 161;
    --smart-yellow_300: 255, 221, 120;
    --smart-yellow_700: 133, 100, 4;
    --smart-yellow_1000: 9, 7, 0;
    --smart-green_500: 139, 195, 74;
    --smart-green_400: 81, 213, 111;
    --smart-green_600: 40, 167, 69;
    --smart-green_0: 255, 255, 255;
    --smart-green_800: 21, 87, 36;
    --smart-green_900: 11, 46, 19;
    --smart-green_50: 230, 249, 234;
    --smart-green_100: 212, 237, 218;
    --smart-green_200: 186, 227, 195;
    --smart-green_300: 113, 221, 138;
    --smart-green_700: 30, 126, 52;
    --smart-green_1000: 2, 7, 3;
    --smart-teal_500: 32, 201, 151;
    --smart-teal_400: 69, 225, 179;
    --smart-teal_600: 28, 179, 134;
    --smart-teal_0: 255, 255, 255;
    --smart-teal_800: 16, 100, 75;
    --smart-teal_900: 10, 64, 48;
    --smart-teal_50: 228, 251, 244;
    --smart-teal_100: 205, 247, 235;
    --smart-teal_200: 172, 242, 221;
    --smart-teal_300: 139, 236, 207;
    --smart-teal_700: 22, 138, 104;
    --smart-teal_1000: 1, 8, 6;
    --smart-info_500: 28, 200, 227;
    --smart-info_400: 63, 208, 231;
    --smart-info_600: 23, 162, 184;
    --smart-info_0: 255, 255, 255;
    --smart-info_800: 12, 84, 96;
    --smart-info_900: 6, 44, 51;
    --smart-info_50: 227, 248, 252;
    --smart-info_100: 209, 236, 241;
    --smart-info_200: 181, 225, 232;
    --smart-info_300: 135, 226, 240;
    --smart-info_700: 17, 122, 139;
    --smart-info_1000: 1, 7, 8;
    --smart-gray_500: 129, 129, 130;
    --smart-gray_400: 147, 147, 147;
    --smart-gray_600: 104, 104, 104;
    --smart-gray_800: 58, 58, 58;
    --smart-gray_900: 24, 27, 30;
    --smart-gray_50: 245, 245, 245;
    --smart-gray_100: 226, 226, 226;
    --smart-gray_200: 206, 208, 210;
    --smart-gray_300: 185, 187, 190;
    --smart-gray_700: 80, 80, 80;
    --smart-gray_1000: 0, 0, 0;
    --smart-gray_500: 108, 117, 125;
    --smart-gray_400: 139, 147, 155;
    --smart-gray_600: 87, 95, 101;
    --smart-gray_0: 255, 255, 255;
    --smart-gray_800: 49, 54, 60;
    --smart-gray_900: 31, 35, 38;
    --smart-gray_50: 230, 233, 237;
    --smart-gray_100: 224, 224, 224;
    --smart-gray_200: 207, 210, 215;
    --smart-gray_300: 173, 181, 189;
    --smart-gray_700: 76, 83, 89;
    --smart-gray_1000: 4, 5, 5;
    --smart-primary_500: var(--smart-blue_500);
    --smart-primary_400: var(--smart-blue_400);
    --smart-primary_600: var(--smart-blue_600);
    --smart-primary_0: var(--smart-blue_0);
    --smart-primary_800: var(--smart-blue_800);
    --smart-primary_900: var(--smart-blue_900);
    --smart-primary_50: var(--smart-blue_50);
    --smart-primary_100: var(--smart-blue_100);
    --smart-primary_200: var(--smart-blue_200);
    --smart-primary_300: var(--smart-blue_300);
    --smart-primary_700: var(--smart-blue_700);
    --smart-primary_1000: var(--smart-blue_1000);
    --smart-danger_500: var(--smart-red_500);
    --smart-danger_400: var(--smart-red_400);
    --smart-danger_600: var(--smart-red_600);
    --smart-danger_0: var(--smart-red_0);
    --smart-danger_800: var(--smart-red_800);
    --smart-danger_900: var(--smart-red_900);
    --smart-danger_50: var(--smart-red_50);
    --smart-danger_100: var(--smart-red_100);
    --smart-danger_200: var(--smart-red_200);
    --smart-danger_300: var(--smart-red_300);
    --smart-danger_700: var(--smart-red_700);
    --smart-danger_1000: var(--smart-red_1000);
    --smart-warning_500: var(--smart-yellow_500);
    --smart-warning_400: var(--smart-yellow_400);
    --smart-warning_600: var(--smart-yellow_600);
    --smart-warning_0: var(--smart-yellow_0);
    --smart-warning_800: var(--smart-yellow_800);
    --smart-warning_900: var(--smart-yellow_900);
    --smart-warning_50: var(--smart-yellow_50);
    --smart-warning_100: var(--smart-yellow_100);
    --smart-warning_200: var(--smart-yellow_200);
    --smart-warning_300: var(--smart-yellow_300);
    --smart-warning_700: var(--smart-yellow_700);
    --smart-warning_1000: var(--smart-yellow_1000);
    --smart-success_500: var(--smart-green_500);
    --smart-success_400: var(--smart-green_400);
    --smart-success_600: var(--smart-green_600);
    --smart-success_0: var(--smart-green_0);
    --smart-success_800: var(--smart-green_800);
    --smart-success_900: var(--smart-green_900);
    --smart-success_50: var(--smart-green_50);
    --smart-success_100: var(--smart-green_100);
    --smart-success_200: var(--smart-green_200);
    --smart-success_300: var(--smart-green_300);
    --smart-success_700: var(--smart-green_700);
    --smart-success_1000: var(--smart-green_1000);
    --smart-cyan_500: var(--smart-info_500);
    --smart-cyan_400: var(--smart-info_400);
    --smart-cyan_600: var(--smart-info_600);
    --smart-cyan_0: var(--smart-info_0);
    --smart-cyan_800: var(--smart-info_800);
    --smart-cyan_900: var(--smart-info_900);
    --smart-cyan_50: var(--smart-info_50);
    --smart-cyan_100: var(--smart-info_100);
    --smart-cyan_200: var(--smart-info_200);
    --smart-cyan_300: var(--smart-info_300);
    --smart-cyan_700: var(--smart-info_700);
    --smart-cyan_1000: var(--smart-info_1000);
    --smart-secondary_500: var(--smart-gray_500);
    --smart-secondary_400: var(--smart-gray_400);
    --smart-secondary_600: var(--smart-gray_600);
    --smart-secondary_0: var(--smart-gray_0);
    --smart-secondary_800: var(--smart-gray_800);
    --smart-secondary_900: var(--smart-gray_900);
    --smart-secondary_50: var(--smart-gray_50);
    --smart-secondary_100: var(--smart-gray_100);
    --smart-secondary_200: var(--smart-gray_200);
    --smart-secondary_300: var(--smart-gray_300);
    --smart-secondary_700: var(--smart-gray_700);
    --smart-secondary_1000: var(--smart-gray_1000);
}
 :root { 
    --smart-blue: rgba(var(--smart-primary_500), 1);
    --smart-indigo: rgba(var(--smart-indigo_500), 1);
    --smart-purple: rgba(var(--smart-purple_500), 1);
    --smart-pink: rgba(var(--smart-pink_400), 1);
    --smart-red: rgba(var(--smart-danger_500), 1);
    --smart-orange: rgba(var(--smart-orange_500), 1);
    --smart-yellow: rgba(var(--smart-warning_500), 1);
    --smart-green: rgba(var(--smart-success_600), 1);
    --smart-teal: rgba(var(--smart-teal_500), 1);
    --smart-cyan: rgba(var(--smart-cyan_600), 1);
    --smart-white: rgba(var(--smart-gray_0));
    --smart-gray: rgba(var(--smart-secondary_500), 1);
    --smart-gray-dark: rgba(var(--smart-secondary_800), 1);
    --smart-info: rgba(var(--smart-cyan_600), 1);
    --smart-warning: rgba(var(--smart-warning_500), 1);
    --smart-danger: rgba(var(--smart-danger_500), 1);
    --smart-light: rgba(var(--smart-gray_0), 1);
    --smart-dark: rgba(var(--smart-secondary_800), 1);	
		
    --smart-primary: rgba(var(--smart-primary_500), 1); /* The theme primary color */
    --smart-primary-color: var(--smart-white); /* Text color on top of a primary background */
    --smart-secondary: rgba(var(--smart-secondary_500), 1); /* The theme secondary color */
    --smart-secondary-color: var(--smart-white); /* Text color on top of a secondary background */
    --smart-error: rgba(var(--smart-danger_500), 1); /* The theme error color */
    --smart-error-color: var(--smart-white); /* Text color on top of a error background */
    --smart-success: rgba(var(--smart-success_500), 1); /* The theme success color */
    --smart-success-color: var(--smart-white); /* Text color on top of a success background */
    --smart-background: var(--smart-white); /* The theme background color. The background color appears behind scrollable content.*/
    --smart-background-color: var(--smart-dark); /* Text color on top of a background background */
    --smart-surface: rgba(var(--smart-gray_50), 1); /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */
    --smart-surface-color: var(--smart-dark); /* Text color on top of a surface surface */
    --smart-font-size: 14px; /* Theme font-size */
    --smart-font-family: Roboto,"Helvetica Neue",sans-serif; /* Theme font-family */
    --smart-border-width: 1px; /* Theme border-width */
    --smart-border-radius: 4px; /* Theme border-radius */
    --smart-border: rgba(var(--smart-secondary_100), 1); /* The theme background border color */
    --smart-outline: var(--smart-primary);
  
    --smart-breakpoint-xs: 0;
    --smart-breakpoint-sm: 576px;
    --smart-breakpoint-md: 768px;
    --smart-breakpoint-lg: 992px;
    --smart-breakpoint-xl: 1200px; 
  }

  .smart *,
  .smart *::before,
  .smart *::after {
    box-sizing: border-box;
  }

  .smart {
    font-family: var(--smart-font-family);
	font-size: var(--smart-font-size);
    line-height: 1.15;
  }

  .smart article, 
  .smart aside,
  .smart figcaption,
  .smart figure,
  .smart footer, 
  .smart header, 
  .smart hgroup, 
  .smart main, 
  .smart nav, 
  .smart section {
    display: block;
  }

  body.smart {
    margin: 0;
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--smart-background-color);
    text-align: left;
    background-color: var(--smart-background);
  }

  .smart [tabindex="-1"]:focus {
    outline: 0 !important;
  }

  .smart hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }

  .smart h1,
  .smart h2,
  .smart h3, 
  .smart h4, 
  .smart h5, 
  .smart h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .smart p {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .smart abbr[title],
  .smart abbr[data-original-title] {
    text-decoration: underline;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
  }

  .smart address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
  }

  .smart ol,
  .smart ul,
  .smart dl {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .smart ol ol,
  .smart ul ul,
  .smart ol ul,
  .smart ul ol {
    margin-bottom: 0;
  }

  .smart dt {
    font-weight: 700;
  }

  .smart dd {
    margin-bottom: .5rem;
    margin-left: 0;
  }

  .smart blockquote {
    margin: 0 0 1rem;
  }

  .smart dfn {
    font-style: italic;
  }

  .smart b,
  .smart strong {
    font-weight: bolder;
  }

  .smart small {
    font-size: 80%;
  }

  .smart sub,
  .smart sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }

  .smart sub {
    bottom: -.25em;
  }

  .smart sup {
    top: -.5em;
  }

  .smart a {
    color: rgba(var(--smart-primary_500), 1);
    text-decoration: none;
    background-color: transparent;
  }

  .smart a:hover {
    color: rgba(var(--smart-primary_600), 1);
    text-decoration: underline;
  }

  .smart a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
  }

  .smart a:not([href]):not([tabindex]):hover, 
  .smart a:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none;
  }

  .smart a:not([href]):not([tabindex]):focus {
    outline: 0;
  }

  .smart pre,
  .smart code,
  .smart kbd,
  .smart samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
  }

  .smart pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
  }

  .smart figure {
    margin: 0 0 1rem;
  }

  .smart img {
    vertical-align: middle;
    border-style: none;
  }

  .smart svg {
    overflow: hidden;
    vertical-align: middle;
  }

  .smart table {
    border-collapse: collapse;
  }

  .smart caption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: rgba(var(--smart-secondary_500), 1);
    text-align: left;
    caption-side: bottom;
  }

  .smart th {
    text-align: inherit;
  }

  .smart label {
    display: inline-block;
    margin-bottom: 0.5rem;
  }

  .smart button {
    border-radius: 0;
  }

  .smart button:focus {
    outline: 1px dotted;
  }

  .smart input,
  .smart button,
  .smart select,
  .smart optgroup,
  .smart textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  .smart button,
  .smart input {
    overflow: visible;
  }

  .smart button,
  .smart select {
    text-transform: none;
  }

  .smart input[type="radio"],
  .smart input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
  }

  .smart input[type="date"],
  .smart input[type="time"],
  .smart input[type="datetime-local"],
  .smart input[type="month"] {
    -webkit-appearance: listbox;
  }

  .smart textarea {
    overflow: auto;
    resize: vertical;
  }

  .smart fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .smart legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
  }

  .smart progress {
    vertical-align: baseline;
  }

  .smart [type="number"]::-webkit-inner-spin-button,
  .smart [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  .smart [type="search"] {
    outline-offset: -2px;
  }

  .smart [type="search"]::-webkit-search-cancel-button,
  .smart [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  .smart ::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
  }

  .smart output {
    display: inline-block;
  }

  .smart summary {
    display: list-item;
    cursor: pointer;
  }

  .smart template {
    display: none;
  }

  .smart [hidden] {
    display: none !important;
  }

   /* Headings */
  .smart h1, 
  .smart h2, 
  .smart h3, 
  .smart h4, 
  .smart h5, 
  .smart h6,
  .smart .h1, 
  .smart .h2, 
  .smart .h3, 
  .smart .h4, 
  .smart .h5, 
  .smart .h6 {
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
  }

  .smart h1, 
  .smart .h1 {
    font-size: 2.5rem;
  }

  .smart h2, 
  .smart .h2 {
    font-size: 2rem;
  }

  .smart h3, 
  .smart .h3 {
    font-size: 1.75rem;
  }

  .smart h4, 
  .smart .h4 {
    font-size: 1.5rem;
  }

  .smart h5, 
  .smart .h5 {
    font-size: 1.25rem;
  }

  .smart h6, 
  .smart .h6 {
    font-size: 1rem;
  }

  .smart .lead {
    font-size: 1.25rem;
    font-weight: 300;
  }
  
  /*End of Headings*/
  
  .smart .display-1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2;
  }

  .smart .display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2;
  }

  .smart .display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
  }

  .smart .display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
  }

  .smart hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(var(--smart-gray_1000), 0.1);
  }

  .smart small,
  .smart .small {
    font-size: 80%;
    font-weight: 400;
  }

  .smart mark,
  .smart .mark {
    padding: 0.2em;
    background-color: rgba(var(--smart-warning_50), 1);
  }

  .smart .list-unstyled {
    padding-left: 0;
    list-style: none;
  }

  .smart .list-inline {
    padding-left: 0;
    list-style: none;
  }

  .smart .list-inline-item {
    display: inline-block;
  }

  .smart .list-inline-item:not(:last-child) {
    margin-right: 0.5rem;
  }

  .smart .initialism {
    font-size: 90%;
    text-transform: uppercase;
  }

  .smart .blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }

  .smart .blockquote-footer {
    display: block;
    font-size: 80%;
    color: rgba(var(--smart-secondary_500), 1);
  }

  .smart .blockquote-footer::before {
    content: "\\2014 \\00A0";
  }

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

  .smart .img-thumbnail {
    padding: 0.25rem;
    background-color: var(--smart-light);
    border: 1px solid rgba(var(--smart-secondary_100), 1);
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
  }

  .smart .figure {
    display: inline-block;
  }

  .smart .figure-img {
    margin-bottom: 0.5rem;
    line-height: 1;
  }

  .smart .figure-caption {
    font-size: 90%;
    color: rgba(var(--smart-secondary_500), 1);
  }

  .smart code {
    font-size: 87.5%;
    color: rgba(var(--smart-pink_400), 1);
    word-break: break-word;
  }

  .smart a > code {
    color: inherit;
  }

  .smart kbd {
    padding: 0.2rem 0.4rem;
    font-size: 87.5%;
    color: var(--smart-light);
    background-color: var(--smart-dark);
    border-radius: 0.2rem;
  }

  .smart kbd kbd {
    padding: 0;
    font-size: 100%;
    font-weight: 700;
  }

  .smart pre {
    display: block;
    font-size: 87.5%;
	background: var(--smart-light);
    color: var(--smart-dark);
  }

  .smart pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
  }

  .smart .pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
  }

  .smart .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  @media (min-width: 576px) {
    .smart .container {
      max-width: 540px;
    }
  }

  @media (min-width: 768px) {
    .smart .container {
      max-width: 720px;
    }
  }

  @media (min-width: 992px) {
    .smart .container {
      max-width: 960px;
    }
  }

  @media (min-width: 1200px) {
    .smart .container {
      max-width: 1140px;
    }
  }

  .smart .container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  .smart .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .smart .no-gutters {
    margin-right: 0;
    margin-left: 0;
  }

  .smart .no-gutters > .col,
  .smart .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  .smart .col-1,
  .smart .col-2, 
  .smart .col-3, 
  .smart .col-4, 
  .smart .col-5, 
  .smart .col-6, 
  .smart .col-7, 
  .smart .col-8, 
  .smart .col-9, 
  .smart .col-10, 
  .smart .col-11, 
  .smart .col-12, 
  .smart .col,
  .smart .col-auto, 
  .smart .col-sm-1, 
  .smart .col-sm-2, 
  .smart .col-sm-3, 
  .smart .col-sm-4, 
  .smart .col-sm-5, 
  .smart .col-sm-6, 
  .smart .col-sm-7, 
  .smart .col-sm-8, 
  .smart .col-sm-9, 
  .smart .col-sm-10, 
  .smart .col-sm-11, 
  .smart .col-sm-12, 
  .smart .col-sm,
  .smart .col-sm-auto, 
  .smart .col-md-1, 
  .smart .col-md-2, 
  .smart .col-md-3, 
  .smart .col-md-4, 
  .smart .col-md-5, 
  .smart .col-md-6, 
  .smart .col-md-7, 
  .smart .col-md-8, 
  .smart .col-md-9, 
  .smart .col-md-10, 
  .smart .col-md-11, 
  .smart .col-md-12, 
  .smart .col-md,
  .smart .col-md-auto, 
  .smart .col-lg-1, 
  .smart .col-lg-2, 
  .smart .col-lg-3, 
  .smart .col-lg-4, 
  .smart .col-lg-5, 
  .smart .col-lg-6, 
  .smart .col-lg-7, 
  .smart .col-lg-8, 
  .smart .col-lg-9, 
  .smart .col-lg-10, 
  .smart .col-lg-11, 
  .smart .col-lg-12, 
  .smart .col-lg,
  .smart .col-lg-auto, 
  .smart .col-xl-1, 
  .smart .col-xl-2, 
  .smart .col-xl-3, 
  .smart .col-xl-4, 
  .smart .col-xl-5, 
  .smart .col-xl-6, 
  .smart .col-xl-7, 
  .smart .col-xl-8, 
  .smart .col-xl-9, 
  .smart .col-xl-10, 
  .smart .col-xl-11, 
  .smart .col-xl-12, 
  .smart .col-xl,
  .smart .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .smart .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .smart .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .smart .col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .smart .col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .smart .col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .smart .col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .smart .col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }

  .smart .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .smart .col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }

  .smart .col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }

  .smart .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .smart .col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }

  .smart .col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }

  .smart .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .smart .order-first {
    order: -1;
  }

  .smart .order-last {
    order: 13;
  }

  .smart .order-0 {
    order: 0;
  }

  .smart .order-1 {
    order: 1;
  }

  .smart .order-2 {
    order: 2;
  }

  .smart .order-3 {
    order: 3;
  }

  .smart .order-4 {
    order: 4;
  }

  .smart .order-5 {
    order: 5;
  }

  .smart .order-6 {
    order: 6;
  }

  .smart .order-7 {
    order: 7;
  }

  .smart .order-8 {
    order: 8;
  }

  .smart .order-9 {
    order: 9;
  }

  .smart .order-10 {
    order: 10;
  }

  .smart .order-11 {
    order: 11;
  }

  .smart .order-12 {
    order: 12;
  }

  .smart .offset-1 {
    margin-left: 8.333333%;
  }

  .smart .offset-2 {
    margin-left: 16.666667%;
  }

  .smart .offset-3 {
    margin-left: 25%;
  }

  .smart .offset-4 {
    margin-left: 33.333333%;
  }

  .smart .offset-5 {
    margin-left: 41.666667%;
  }

  .smart .offset-6 {
    margin-left: 50%;
  }

  .smart .offset-7 {
    margin-left: 58.333333%;
  }

  .smart .offset-8 {
    margin-left: 66.666667%;
  }

  .smart .offset-9 {
    margin-left: 75%;
  }

  .smart .offset-10 {
    margin-left: 83.333333%;
  }

  .smart .offset-11 {
    margin-left: 91.666667%;
  }

  @media (min-width: 576px) {
    .smart .col-sm {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }
    .smart .col-sm-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .smart .col-sm-1 {
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .smart .col-sm-2 {
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .smart .col-sm-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .smart .col-sm-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .smart .col-sm-5 {
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .smart .col-sm-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .smart .col-sm-7 {
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .smart .col-sm-8 {
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .smart .col-sm-9 {
      flex: 0 0 75%;
      max-width: 75%;
    }
    .smart .col-sm-10 {
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .smart .col-sm-11 {
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .smart .col-sm-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .smart .order-sm-first {
      order: -1;
    }
    .smart .order-sm-last {
      order: 13;
    }
    .smart .order-sm-0 {
      order: 0;
    }
    .smart .order-sm-1 {
      order: 1;
    }
    .smart .order-sm-2 {
      order: 2;
    }
    .smart .order-sm-3 {
      order: 3;
    }
    .smart .order-sm-4 {
      order: 4;
    }
    .smart .order-sm-5 {
      order: 5;
    }
    .smart .order-sm-6 {
      order: 6;
    }
    .smart .order-sm-7 {
      order: 7;
    }
    .smart .order-sm-8 {
      order: 8;
    }
    .smart .order-sm-9 {
      order: 9;
    }
    .smart .order-sm-10 {
      order: 10;
    }
    .smart .order-sm-11 {
      order: 11;
    }
    .smart .order-sm-12 {
      order: 12;
    }
    .smart .offset-sm-0 {
      margin-left: 0;
    }
    .smart .offset-sm-1 {
      margin-left: 8.333333%;
    }
    .smart .offset-sm-2 {
      margin-left: 16.666667%;
    }
    .smart .offset-sm-3 {
      margin-left: 25%;
    }
    .smart .offset-sm-4 {
      margin-left: 33.333333%;
    }
    .smart .offset-sm-5 {
      margin-left: 41.666667%;
    }
    .smart .offset-sm-6 {
      margin-left: 50%;
    }
    .smart .offset-sm-7 {
      margin-left: 58.333333%;
    }
    .smart .offset-sm-8 {
      margin-left: 66.666667%;
    }
    .smart .offset-sm-9 {
      margin-left: 75%;
    }
    .smart .offset-sm-10 {
      margin-left: 83.333333%;
    }
    .smart .offset-sm-11 {
      margin-left: 91.666667%;
    }
  }

  @media (min-width: 768px) {
    .smart .col-md {
      
      flex-basis: 0;
      
      flex-grow: 1;
      max-width: 100%;
    }
    .smart .col-md-auto {
     
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .smart .col-md-1 {
     
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .smart .col-md-2 {
     
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .smart .col-md-3 {
     
      flex: 0 0 25%;
      max-width: 25%;
    }
    .smart .col-md-4 {
     
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .smart .col-md-5 {
     
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .smart .col-md-6 {
     
      flex: 0 0 50%;
      max-width: 50%;
    }
    .smart .col-md-7 {
      
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .smart .col-md-8 {
     
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .smart .col-md-9 {
      
      flex: 0 0 75%;
      max-width: 75%;
    }
    .smart .col-md-10 {
     
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .smart .col-md-11 {
      
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .smart .col-md-12 {
      
      flex: 0 0 100%;
      max-width: 100%;
    }
    .smart .order-md-first {
     
      order: -1;
    }
    .smart .order-md-last {
     
      order: 13;
    }
    .smart .order-md-0 {
     
      order: 0;
    }
    .smart .order-md-1 {
     
      order: 1;
    }
    .smart .order-md-2 {
     
      order: 2;
    }
    .smart .order-md-3 {
     
      order: 3;
    }
    .smart .order-md-4 {
     
      order: 4;
    }
    .smart .order-md-5 {
     
      order: 5;
    }
    .smart .order-md-6 {
     
      order: 6;
    }
    .smart .order-md-7 {
     
      order: 7;
    }
    .smart .order-md-8 {
     
      order: 8;
    }
    .smart .order-md-9 {
     
      order: 9;
    }
    .smart .order-md-10 {
     
      order: 10;
    }
    .smart .order-md-11 {
     
      order: 11;
    }
    .smart .order-md-12 {
     
      order: 12;
    }
    .smart .offset-md-0 {
      margin-left: 0;
    }
    .smart .offset-md-1 {
      margin-left: 8.333333%;
    }
    .smart .offset-md-2 {
      margin-left: 16.666667%;
    }
    .smart .offset-md-3 {
      margin-left: 25%;
    }
    .smart .offset-md-4 {
      margin-left: 33.333333%;
    }
    .smart .offset-md-5 {
      margin-left: 41.666667%;
    }
    .smart .offset-md-6 {
      margin-left: 50%;
    }
    .smart .offset-md-7 {
      margin-left: 58.333333%;
    }
    .smart .offset-md-8 {
      margin-left: 66.666667%;
    }
    .smart .offset-md-9 {
      margin-left: 75%;
    }
    .smart .offset-md-10 {
      margin-left: 83.333333%;
    }
    .smart .offset-md-11 {
      margin-left: 91.666667%;
    }
  }

  @media (min-width: 992px) {
    .smart .col-lg {
      
      flex-basis: 0;
      
      flex-grow: 1;
      max-width: 100%;
    }
    .smart .col-lg-auto {
     
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .smart .col-lg-1 {
     
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .smart .col-lg-2 {
     
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .smart .col-lg-3 {
     
      flex: 0 0 25%;
      max-width: 25%;
    }
    .smart .col-lg-4 {
     
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .smart .col-lg-5 {
     
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .smart .col-lg-6 {
     
      flex: 0 0 50%;
      max-width: 50%;
    }
    .smart .col-lg-7 {
      
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .smart .col-lg-8 {
     
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .smart .col-lg-9 {
      
      flex: 0 0 75%;
      max-width: 75%;
    }
    .smart .col-lg-10 {
     
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .smart .col-lg-11 {
      
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .smart .col-lg-12 {
      
      flex: 0 0 100%;
      max-width: 100%;
    }
    .smart .order-lg-first {
     
      order: -1;
    }
    .smart .order-lg-last {
     
      order: 13;
    }
    .smart .order-lg-0 {
     
      order: 0;
    }
    .smart .order-lg-1 {
     
      order: 1;
    }
    .smart .order-lg-2 {
     
      order: 2;
    }
    .smart .order-lg-3 {
     
      order: 3;
    }
    .smart .order-lg-4 {
     
      order: 4;
    }
    .smart .order-lg-5 {
     
      order: 5;
    }
    .smart .order-lg-6 {
     
      order: 6;
    }
    .smart .order-lg-7 {
     
      order: 7;
    }
    .smart .order-lg-8 {     
      order: 8;
    }
    .smart .order-lg-9 {     
      order: 9;
    }
    .smart .order-lg-10 {     
      order: 10;
    }
    .smart .order-lg-11 {     
      order: 11;
    }
    .smart .order-lg-12 {     
      order: 12;
    }
    .smart .offset-lg-0 {
      margin-left: 0;
    }
    .smart .offset-lg-1 {
      margin-left: 8.333333%;
    }
    .smart .offset-lg-2 {
      margin-left: 16.666667%;
    }
    .smart .offset-lg-3 {
      margin-left: 25%;
    }
    .smart .offset-lg-4 {
      margin-left: 33.333333%;
    }
    .smart .offset-lg-5 {
      margin-left: 41.666667%;
    }
    .smart .offset-lg-6 {
      margin-left: 50%;
    }
    .smart .offset-lg-7 {
      margin-left: 58.333333%;
    }
    .smart .offset-lg-8 {
      margin-left: 66.666667%;
    }
    .smart .offset-lg-9 {
      margin-left: 75%;
    }
    .smart .offset-lg-10 {
      margin-left: 83.333333%;
    }
    .smart .offset-lg-11 {
      margin-left: 91.666667%;
    }
  }

  @media (min-width: 1200px) {
    .smart .col-xl {
      
      flex-basis: 0;
      
      flex-grow: 1;
      max-width: 100%;
    }
    .smart .col-xl-auto {
     
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
    .smart .col-xl-1 {
     
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .smart .col-xl-2 {
     
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .smart .col-xl-3 {
     
      flex: 0 0 25%;
      max-width: 25%;
    }
    .smart .col-xl-4 {
     
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .smart .col-xl-5 {
     
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .smart .col-xl-6 {
     
      flex: 0 0 50%;
      max-width: 50%;
    }
    .smart .col-xl-7 {
      
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .smart .col-xl-8 {
     
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .smart .col-xl-9 {
      
      flex: 0 0 75%;
      max-width: 75%;
    }
    .smart .col-xl-10 {
     
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .smart .col-xl-11 {
      
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .smart .col-xl-12 {
      
      flex: 0 0 100%;
      max-width: 100%;
    }
    .smart .order-xl-first {
     
      order: -1;
    }
    .smart .order-xl-last {
     
      order: 13;
    }
    .smart .order-xl-0 {
     
      order: 0;
    }
    .smart .order-xl-1 {
     
      order: 1;
    }
    .smart .order-xl-2 {
     
      order: 2;
    }
    .smart .order-xl-3 {
     
      order: 3;
    }
    .smart .order-xl-4 {
     
      order: 4;
    }
    .smart .order-xl-5 {
     
      order: 5;
    }
    .smart .order-xl-6 {
     
      order: 6;
    }
    .smart .order-xl-7 {
     
      order: 7;
    }
    .smart .order-xl-8 {
     
      order: 8;
    }
    .smart .order-xl-9 {
      order: 9;
    }
    .smart .order-xl-10 {
      order: 10;
    }
    .smart .order-xl-11 {
      order: 11;
    }
    .smart .order-xl-12 {
      order: 12;
    }
    .smart .offset-xl-0 {
      margin-left: 0;
    }
    .smart .offset-xl-1 {
      margin-left: 8.333333%;
    }
    .smart .offset-xl-2 {
      margin-left: 16.666667%;
    }
    .smart .offset-xl-3 {
      margin-left: 25%;
    }
    .smart .offset-xl-4 {
      margin-left: 33.333333%;
    }
    .smart .offset-xl-5 {
      margin-left: 41.666667%;
    }
    .smart .offset-xl-6 {
      margin-left: 50%;
    }
    .smart .offset-xl-7 {
      margin-left: 58.333333%;
    }
    .smart .offset-xl-8 {
      margin-left: 66.666667%;
    }
    .smart .offset-xl-9 {
      margin-left: 75%;
    }
    .smart .offset-xl-10 {
      margin-left: 83.333333%;
    }
    .smart .offset-xl-11 {
      margin-left: 91.666667%;
    }
  }

  .smart .table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
  }

  .smart .table th,
  .smart .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--smart-border);
  }

  .smart .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--smart-border);
  }

  .smart .table tbody + tbody {
    border-top: 2px solid var(--smart-border);
  }

  .smart .table .table {
    background-color: var(--smart-background);
  }

  .smart .table-sm th,
  .smart .table-sm td {
    padding: 0.3rem;
  }

  .smart .table-bordered {
    border: 1px solid var(--smart-border);
  }

  .smart .table-bordered th,
  .smart .table-bordered td {
    border: 1px solid var(--smart-border);
  }

 .smart .table-bordered thead th,
 .smart .table-bordered thead td {
    border-bottom-width: 2px;
  }

  .smart .table-borderless th,
  .smart .table-borderless td,
  .smart .table-borderless thead th,
  .smart .table-borderless tbody + tbody {
    border: 0;
  }

  .smart .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(var(--smart-gray_1000), 0.05);
  }

  .smart .table-hover tbody tr:hover {
    background-color: rgba(var(--smart-gray_1000), 0.075);
  }

  .smart .table-primary,
  .smart .table-primary > th,
  .smart .table-primary > td {
    background-color: rgba(var(--smart-primary_100), 1);
  }

  .smart .table-hover .table-primary:hover {
    background-color: rgba(var(--smart-primary_200), 1);
  }

  .smart .table-hover .table-primary:hover > td,
  .smart .table-hover .table-primary:hover > th {
    background-color: rgba(var(--smart-primary_200), 1);
  }

  .smart .table-secondary,
  .smart .table-secondary > th,
  .smart .table-secondary > td {
    background-color: rgba(var(--smart-secondary_200), 1);
  }

  .smart .table-hover .table-secondary:hover {
    background-color: rgba(var(--smart-secondary_200), 1);
  }

  .smart .table-hover .table-secondary:hover > td,
  .smart .table-hover .table-secondary:hover > th {
    background-color: rgba(var(--smart-secondary_200), 1);
  }

  .smart .table-success,
  .smart .table-success > th,
  .smart .table-success > td {
    background-color: rgba(var(--smart-success_200), 1);
  }

  .smart .table-hover .table-success:hover {
    background-color: rgba(var(--smart-success_200), 1);
  }

  .smart .table-hover .table-success:hover > td,
  .smart .table-hover .table-success:hover > th {
    background-color: rgba(var(--smart-success_200), 1);
  }

  .smart .table-info,
  .smart .table-info > th,
  .smart .table-info > td {
    background-color: rgba(var(--smart-cyan_200), 1);
  }

  .smart .table-hover .table-info:hover {
    background-color: rgba(var(--smart-cyan_200), 1);
  }

  .smart .table-hover .table-info:hover > td,
  .smart .table-hover .table-info:hover > th {
    background-color: rgba(var(--smart-cyan_200), 1);
  }

  .smart .table-warning,
  .smart .table-warning > th,
  .smart .table-warning > td {
    background-color: rgba(var(--smart-warning_100), 1);
  }

  .smart .table-hover .table-warning:hover {
    background-color: rgba(var(--smart-warning_200), 1);
  }

  .smart .table-hover .table-warning:hover > td,
  .smart .table-hover .table-warning:hover > th {
    background-color: rgba(var(--smart-warning_200), 1);
  }

  .smart .table-danger,
  .smart .table-danger > th,
  .smart .table-danger > td {
    background-color: rgba(var(--smart-danger_100), 1);
  }

  .smart .table-hover .table-danger:hover {
    background-color: rgba(var(--smart-danger_200), 1);
  }

  .smart .table-hover .table-danger:hover > td,
  .smart .table-hover .table-danger:hover > th {
    background-color: rgba(var(--smart-danger_200), 1);
  }

  .smart .table-light,
  .smart .table-light > th,
  .smart .table-light > td {
    background-color: var(--smart-light);
  }

  .smart .table-hover .table-light:hover {
    background-color: rgba(var(--smart-purple_50), 1);
  }

  .smart .table-hover .table-light:hover > td,
  .smart .table-hover .table-light:hover > th {
    background-color: rgba(var(--smart-purple_50), 1);
  }

  .smart .table-dark,
  .smart .table-dark > th,
  .smart .table-dark > td {
    background-color: rgba(var(--smart-gray_200), 1);
  }

  .smart .table-hover .table-dark:hover {
    background-color: rgba(var(--smart-gray_300), 1);
  }

  .smart .table-hover .table-dark:hover > td,
  .smart .table-hover .table-dark:hover > th {
    background-color: rgba(var(--smart-gray_300), 1);
  }

  .smart .table-active,
  .smart .table-active > th,
  .smart .table-active > td {
    background-color: rgba(var(--smart-gray_1000), 0.075);
  }

  .smart .table-hover .table-active:hover {
    background-color: rgba(var(--smart-gray_1000), 0.075);
  }

  .smart .table-hover .table-active:hover > td,
  .smart .table-hover .table-active:hover > th {
    background-color: rgba(var(--smart-gray_1000), 0.075);
  }

  .smart .table .thead-dark th {
    color: var(--smart-light);
    background-color: rgba(var(--smart-secondary_900), 1);
    border-color: rgba(var(--smart-secondary_800), 1);
  }

  .smart .table .thead-light th {
    color: rgba(var(--smart-secondary_700), 1);
    background-color: rgba(var(--smart-secondary_50), 1);
    border-color: rgba(var(--smart-secondary_100), 1);
  }

  .smart .table-dark {
    color: var(--smart-light);
    background-color: rgba(var(--smart-secondary_900), 1);
  }

  .smart .table-dark th,
  .smart .table-dark td,
  .smart .table-dark thead th {
    border-color: rgba(var(--smart-secondary_800), 1);
  }

  .smart .table-dark.table-bordered {
    border: 0;
  }

  .smart .table-dark.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(var(--smart-gray_0), 0.05);
  }

  .smart .table-dark.table-hover tbody tr:hover {
    background-color: rgba(var(--smart-gray_0), 0.075);
  }

  @media (max-width: 575.98px) {
    .smart .table-responsive-sm {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .smart .table-responsive-sm > .table-bordered {
      border: 0;
    }
  }

  @media (max-width: 767.98px) {
    .smart .table-responsive-md {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
     
    }
    .smart .table-responsive-md > .table-bordered {
      border: 0;
    }
  }

  @media (max-width: 991.98px) {
    .smart .table-responsive-lg {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
     
    }
    .smart .table-responsive-lg > .table-bordered {
      border: 0;
    }
  }

  @media (max-width: 1199.98px) {
    .smart .table-responsive-xl {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
     
    }
    .smart .table-responsive-xl > .table-bordered {
      border: 0;
    }
  }

  .smart .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
   
  }

  .smart .table-responsive > .table-bordered {
    border: 0;
  }

  .smart .form-component {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    background-clip: padding-box;
    border: 1px solid var(--smart-border);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .smart .form-component:focus {
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    border-color: var(--smart-outline);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--smart-primary_200), 0.5);	
  }
  
  .smart .success .form-component:focus {
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    border-color: var(--smart-success);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--smart-success_200), 0.5);	
  } 

  .smart .info .form-component:focus {
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    border-color: var(--smart-info);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--smart-info_200), 0.5);	
  } 
  
  .smart .warning .form-component:focus {
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    border-color: var(--smart-warning);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--smart-warning_200), 0.5);	
  } 
  
 .smart .secondary .form-component:focus {
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    border-color: var(--smart-secondary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--smart-secondary_200), 0.5);	
  } 
  
  .smart .danger .form-component:focus {
    color: var(--smart-background-color);
    background-color: var(--smart-background);
    border-color: var(--smart-danger);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--smart-danger_200), 0.5);	
  } 
  
  .smart .form-component::placeholder {
    color: var(--smart-border);
    opacity: 1;
  }

  .smart .form-component:disabled,
  .smart .form-component[readonly] {
    background-color: rgba(var(--smart-secondary_50), 1);
    opacity: 1;
  }

  .smart .form-component-file,
  .smart .form-component-range {
    display: block;
    width: 100%;
  }

  .smart .col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
  }

  .smart .col-form-label-lg {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
    font-size: 1.25rem;
    line-height: 1.5;
  }

  .smart .col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
    padding-bottom: calc(0.25rem + 1px);
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .smart .form-component-plaintext {
    display: block;
    width: 100%;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    margin-bottom: 0;
    line-height: 1.5;
    color: rgba(var(--smart-secondary_900), 1);
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
  }

  .smart .form-component-plaintext.form-component-sm, 
  .smart .form-component-plaintext.form-component-lg {
    padding-right: 0;
    padding-left: 0;
  }

  .smart .form-component-sm {
    height: calc(1.8125rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }

  .smart .form-component-lg {
    height: calc(2.875rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
  }

  .smart select.form-component[size],
  .smart select.form-component[multiple] {
    height: auto;
  }

  .smart textarea.form-component {
    height: auto;
  }

  .smart .form-group {
    margin-bottom: 1rem;
  }

  .smart .form-text {
    display: block;
    margin-top: 0.25rem;
  }

  .smart .form-row { 
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
  }

  .smart .form-row > .col,
  .smart .form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }

  .smart .form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
  }

  .smart .form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
  }

  .smart .form-check-input:disabled ~ .form-check-label {
    color: rgba(var(--smart-secondary_500), 1);
  }

  .smart .form-check-label {
    margin-bottom: 0;
  }

  .smart .form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
  }

  .smart .form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: 0.3125rem;
    margin-left: 0;
  }

  .smart .valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: rgba(var(--smart-success_600), 1);
  }

  .smart .valid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    margin-top: .1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--smart-light);
    background-color: rgba(var(--smart-success_600), 0.9);
    border-radius: 0.25rem;
  }

  .smart .was-validated .form-component:valid,
  .smart .form-component.is-valid, 
  .smart .was-validated .select:valid,
  .smart .select.is-valid {
    border-color: rgba(var(--smart-success_600), 1);
  }

  .smart .was-validated .form-component:valid:focus, 
  .smart .form-component.is-valid:focus, 
  .smart .was-validated .select:valid:focus,
  .smart .select.is-valid:focus {
    border-color: rgba(var(--smart-success_600), 1);
    box-shadow: 0 0 0 0.2rem rgba(var(--smart-success_600), 0.25);
  }

  .smart .was-validated .form-component:valid ~ .valid-feedback,
  .smart .was-validated .form-component:valid ~ .valid-tooltip, 
  .smart .form-component.is-valid ~ .valid-feedback,
  .smart .form-component.is-valid ~ .valid-tooltip, 
  .smart .was-validated .select:valid ~ .valid-feedback,
  .smart .was-validated .select:valid ~ .valid-tooltip,
  .smart .select.is-valid ~ .valid-feedback,
  .smart .select.is-valid ~ .valid-tooltip {
    display: block;
  }

  .smart .was-validated .form-component-file:valid ~ .valid-feedback,
  .smart .was-validated .form-component-file:valid ~ .valid-tooltip, 
  .smart .form-component-file.is-valid ~ .valid-feedback,
  .smart .form-component-file.is-valid ~ .valid-tooltip {
    display: block;
  }

  .smart .was-validated .form-check-input:valid ~ .form-check-label, 
  .smart .form-check-input.is-valid ~ .form-check-label {
    color: rgba(var(--smart-success_600), 1);
  }

  .smart .was-validated .form-check-input:valid ~ .valid-feedback,
  .smart .was-validated .form-check-input:valid ~ .valid-tooltip, 
  .smart .form-check-input.is-valid ~ .valid-feedback,
  .smart .form-check-input.is-valid ~ .valid-tooltip {
    display: block;
  }

  .smart .was-validated .component-input:valid ~ .component-label, 
  .smart .component-input.is-valid ~ .component-label {
    color: rgba(var(--smart-success_600), 1);
  }

  .smart .was-validated .component-input:valid ~ .component-label::before, 
  .smart .component-input.is-vali