/*
  ==============================================================
        TAILWIND OUTLINE
  ==============================================================
*/


.tw-outline-0 {
    outline-width: 0px;
}

.tw-outline-1 {
    outline-width: 1px;
}

.tw-outline-2 {
    outline-width: 2px;
}

.tw-outline-4 {
    outline-width: 4px;
}

.tw-outline-8 {
    outline-width: 8px;
}
/*  
    ------------------------------------------------------
    OUTLINE HOVER
    ------------------------------------------------------
*/
.hover\:tw-outline-0:hover {
    outline-width: 0px;
}

.hover\:tw-outline-1:hover {
    outline-width: 1px;
}

.hover\:tw-outline-2:hover {
    outline-width: 2px;
}

.hover\:tw-outline-4:hover {
    outline-width: 4px;
}

.hover\:tw-outline-8:hover {
    outline-width: 8px;
}
/*  
    ------------------------------------------------------
    OUTLINE FOCUS
    ------------------------------------------------------
*/
.focus\:tw-outline-0:focus {
    outline-width: 0px;
}

.focus\:tw-outline-1:focus {
    outline-width: 1px;
}

.focus\:tw-outline-2:focus {
    outline-width: 2px;
}

.focus\:tw-outline-4:focus {
    outline-width: 4px;
}

.focus\:tw-outline-8:focus {
    outline-width: 8px;
}
/*  
    ------------------------------------------------------
    OUTLINE FOCUS-VISIBLE
    ------------------------------------------------------
*/
.focus-visible\:tw-outline-0:focus-visible {
    outline-width: 0px;
}

.focus-visible\:tw-outline-1:focus-visible {
    outline-width: 1px;
}

.focus-visible\:tw-outline-2:focus-visible {
    outline-width: 2px;
}

.focus-visible\:tw-outline-4:focus-visible {
    outline-width: 4px;
}

.focus-visible\:tw-outline-8:focus-visible {
    outline-width: 8px;
}
/*
  ==============================================================
        TAILWIND OUTLINE STYLE
  ==============================================================
*/

.tw-outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.tw-outline {
    outline-style: solid;
}

.tw-outline-dashed {
    outline-style: dashed;
}

.tw-outline-dotted {
    outline-style: dotted;
}

.tw-outline-double {
    outline-style: double;
}
/*  
    ------------------------------------------------------
    OUTLINE STYLE HOVER
    ------------------------------------------------------
*/
.hover\:tw-outline-none:hover {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.hover\:tw-outline:hover {
    outline-style: solid;
}

.hover\:tw-outline-dashed:hover {
    outline-style: dashed;
}

.hover\:tw-outline-dotted:hover {
    outline-style: dotted;
}

.hover\:tw-outline-double:hover {
    outline-style: double;
}
/*  
    ------------------------------------------------------
    OUTLINE STYLE FOCUS
    ------------------------------------------------------
*/
.focus\:tw-outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:tw-outline:focus {
    outline-style: solid;
}

.focus\:tw-outline-dashed:focus {
    outline-style: dashed;
}

.focus\:tw-outline-dotted:focus {
    outline-style: dotted;
}

.focus\:tw-outline-double:focus {
    outline-style: double;
}
/*  
    ------------------------------------------------------
    OUTLINE STYLE FOCUS-VISIBLE
    ------------------------------------------------------
*/
.focus-visible\:tw-outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-visible\:tw-outline:focus-visible {
    outline-style: solid;
}

.focus-visible\:tw-outline-dashed:focus-visible {
    outline-style: dashed;
}

.focus-visible\:tw-outline-dotted:focus-visible {
    outline-style: dotted;
}

.focus-visible\:tw-outline-double:focus-visible {
    outline-style: double;
}
/*
  ==============================================================
        TAILWIND OUTLINE COLOR
  ==============================================================
*/
/*
  ==============================================================
        TAILWIND OUTLINE COLOR
  ==============================================================
*/
/*  
    ------------------------------------------------------
    OUTLINE TAILWIND BASE
    ------------------------------------------------------
*/
.tw-outline-inherit {
    outline-color: inherit;
}

.tw-outline-current {
    outline-color: currentColor;
}

.tw-outline-transparent {
    outline-color: transparent;
}

.tw-outline-black {
    outline-color: #000;
}

.tw-outline-white {
    outline-color: #fff;
}
/*  
    ------------------------------------------------------
    OUTLINE TAILWIND SLATE
    ------------------------------------------------------
*/
/*
  ==============================================================
        SHADOW TAILWIND SLATE 
  ==============================================================
*/

.outline-tailwind-slate-050 {
    outline-color: var(--tailwind-slate-050);
}

.outline-tailwind-slate-100 {
    outline-color: var(--tailwind-slate-100);
}

.outline-tailwind-slate-200 {
    outline-color: var(--tailwind-slate-200);
}

.outline-tailwind-slate-300 {
    outline-color: var(--tailwind-slate-300);
}

.outline-tailwind-slate-400 {
    outline-color: var(--tailwind-slate-400);
}

.outline-tailwind-slate-500 {
    outline-color: var(--tailwind-slate-500);
}

.outline-tailwind-slate-600 {
    outline-color: var(--tailwind-slate-600);
}

.outline-tailwind-slate-700 {
    outline-color: var(--tailwind-slate-700);
}

.outline-tailwind-slate-800 {
    outline-color: var(--tailwind-slate-800);
}

.outline-tailwind-slate-900 {
    outline-color: var(--tailwind-slate-900);
}
/*  
    ------------------------------------------------------
    outline TAILWIND SLATE HOVER
    ------------------------------------------------------
*/

.hover\:outline-tailwind-slate-050:hover {
    outline-color: var(--tailwind-slate-050);
}

.hover\:outline-tailwind-slate-100:hover {
    outline-color: var(--tailwind-slate-100);
}

.hover\:outline-tailwind-slate-200:hover {
    outline-color: var(--tailwind-slate-200);
}

.hover\:outline-tailwind-slate-300:hover {
    outline-color: var(--tailwind-slate-300);
}

.hover\:outline-tailwind-slate-400:hover {
    outline-color: var(--tailwind-slate-400);
}

.hover\:outline-tailwind-slate-500:hover {
    outline-color: var(--tailwind-slate-500);
}

.hover\:outline-tailwind-slate-600:hover {
    outline-color: var(--tailwind-slate-600);
}

.hover\:outline-tailwind-slate-700:hover {
    outline-color: var(--tailwind-slate-700);
}

.hover\:outline-tailwind-slate-800:hover {
    outline-color: var(--tailwind-slate-800);
}

.hover\:outline-tailwind-slate-900:hover {
    outline-color: var(--tailwind-slate-900);
}
/*
    ------------------------------------------------------
    outline TAILWIND SLATE FOCUS
    ------------------------------------------------------
*/

.focus\:outline-tailwind-slate-050:focus {
    outline-color: var(--tailwind-slate-050);
}

.focus\:outline-tailwind-slate-100:focus {
    outline-color: var(--tailwind-slate-100);
}

.focus\:outline-tailwind-slate-200:focus {
    outline-color: var(--tailwind-slate-200);
}

.focus\:outline-tailwind-slate-300:focus {
    outline-color: var(--tailwind-slate-300);
}

.focus\:outline-tailwind-slate-400:focus {
    outline-color: var(--tailwind-slate-400);
}

.focus\:outline-tailwind-slate-500:focus {
    outline-color: var(--tailwind-slate-500);
}

.focus\:outline-tailwind-slate-600:focus {
    outline-color: var(--tailwind-slate-600);
}

.focus\:outline-tailwind-slate-700:focus {
    outline-color: var(--tailwind-slate-700);
}

.focus\:outline-tailwind-slate-800:focus {
    outline-color: var(--tailwind-slate-800);
}

.focus\:outline-tailwind-slate-900:focus {
    outline-color: var(--tailwind-slate-900);
}