.glowie-box {
    font-size:      5vmin;
    width:          65%;
}

.glowie {
    text-align:center;
    margin: 0px;
    padding: 5px;

    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;

    border-image-source: linear-gradient(to right, #fff, #a5c9b4);


    user-select: none;
}



.glowie-button {
    color:              #00ffff;

    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(to left, #fff, #a5c9b4);

    cursor:             pointer;
    margin: 10px;
    padding: 10px;

    font-size:inherit;
    flex: 1;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    user-select: none;
}

.glowie-button:hover {
    background-image: linear-gradient(45deg, #fff44, #ff7f5044);

}


.glowie-border {
    border: 5px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #fff, #a5c9b4);
}


.shimmer-border {
    position: relative;
    border: 5px solid transparent;
    overflow: hidden;
    background-color: black;
}

.shimmer-border::before {
    content: "";
    position: absolute;
    top: -200px; /* Adjust based on border width and desired effect */
    right: -200px;
    bottom: -200px;
    left: -200px;
    background: linear-gradient(0deg, #fff, #a5c9b4);
    z-index: -2;
    animation: rotateGradient 2s infinite linear;
    /* Ensure the gradient covers the area during rotation */
    transform-origin: center;
}

.shimmer-border::after {
    content: "";
    position: absolute;
    top: 5px;    /* These values should match the intended border width */
    right: 5px;
    bottom: 5px;
    left: 5px;
    background-color: black;  /* Masks the middle portion */
    z-index: -1;
    pointer-events: none;
}

.gradient-border-fallback {
    position: relative;
    padding: 5px; /* This acts as the border width */
    background: linear-gradient(45deg, #a5c9b4, #fff); /* Example gradient */
    -webkit-background-clip: padding-box; /* For Safari */
    background-clip: padding-box; /* For other browsers */
    border: 5px solid transparent; /* Maintains layout with padding acting as border */

    /* Your content styling here */
    overflow: hidden;
    background-color: black; /* Content background color */
}

/* Inner content to ensure background-color and other content styles do not interfere with the border */
.gradient-border-fallback .content {
    background-color: black; /* Matches the .gradient-border-fallback background-color if needed */
    /* Other styling for your content */
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}




.glowie-nordie {
    border-image-source: linear-gradient(45deg,  #00aaaa, #0000aa );
}

.glowie-nordie:hover {
    background-image: linear-gradient(45deg, #00000044, #00ffff44);
}


.glowie-legend {

    letter-spacing:     2px;
    padding-left:       1ch;
    padding-right:      1ch;
    color:              #00ffff;
}


.glowie-input {
    font-family: inherit;
    font-size: inherit;

    color:#fff;
    caret-color: #fff;
    background-color:inherit;
    border: none;
    outline: none;
    text-shadow: none;

    padding: 5px;
}





:root {
    --widget-padding: 0 0 0 0;
    --widget-border: #fff;
    --widget-background: #000;
    --widget-disabled: #444;
    --widget-font-size: 10pt;
}


:root {
    --select-arrow: var(--widget-border);
    --form-control-disabled: #959495;
    --input-border: var(--widget-border);
    --input-focus-h: 245;
    --input-focus-s: 100%;
    --input-focus-l: 42%;
}

.select {
    font-size: var(--widget-font-size);
    font-family: inherit;
    color: var(--widget-border);
    background: var(--widget-background);

    border: 1px solid var(--widget-border);

    display: grid;
    grid-template-areas: "select";
    align-items: center;

    line-height: 1em;

    cursor: pointer;

    padding: var(--widget-padding);
}

/* hide default select */
select {
    font-family: inherit;
    font-size: inherit;
    background-color: var(--widget-background);
    color: var(--widget-border);

    appearance: none;
    border: none;
    padding-left: 5px;  /* for the arrow */
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px;
    width: 100%;
    cursor: inherit;
    line-height: inherit;
    grid-area: select;
    outline: none;
}




.select2::after {

    width: 0.8em;  /* for the arrow */
    height: 0.5em;
    background-color: var(--select-arrow);

    grid-area: select;
    justify-self: start;
    content: "";
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.select--disabled {
    background-color: var(--widget-background);
    color: var(--widget-disabled);
    cursor: not-allowed;
}

input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    background-color: var(--widget-background);
    color: var(--widget-border);
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;
  }

  input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--widget-border);
    background-color: var(--widget-background);
  }

  input[type="checkbox"]:checked::before {
    transform: scale(1);
  }

  input[type="checkbox"]:focus {
    /*outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);*/
  }

  input[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);

    color: var(--form-control-disabled);
    cursor: not-allowed;
  }




.input {
    font-size: var(--widget-font-size);
    font-family: inherit;
    background-color: var(--widget-background);
    color: var(--widget-border);

    border: 1px solid var(--input-border);

    line-height: 1.1;


}

.field_input {
    font-family: inherit;
    background-color: var(--widget-background);
    color: var(--widget-border);
    border: none;

    padding: var(--widget-padding);

}

input[type="text"] {
    font-size: inherit;
    font-family: inherit;

    padding: 5px;
}

input[type=password] {

}

textarea:hover, input:hover{
    outline: 1px solid var(--input-border);
}

.linkbutton {
    font-size: var(--widget-font-size);
    font-family: inherit;
    background-color: var(--widget-background);
    color: var(--widget-border);

    border: 1px solid var(--input-border);

    line-height: 1.1;

    padding: var(--widget-padding);

}