html {
    height: 100%;
}
body {
    /* background: radial-gradient(circle at top center, #888, #555); */
    background-image: radial-gradient(circle at top center, #fff7, #fff0), url("./linen.png");
    background-size: 100% 100%, 128px 128px;
    height: 100%;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    font: 10pt Helvetica, sans-serif;
}
a {
    color: #569;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
a>div {
    display: contents !important;
}
#root {
    max-width: 540px;
    margin-inline: auto;
    background: radial-gradient(circle at top center, #fefefe, #eaeaea);
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 0 8px #fff8 inset, 0 1px 6px #0004;
    border: 1px solid #ddd;
    box-sizing: border-box;
    position: relative;
}
#kc-header {
    font-weight: bold;
    font-size: 14pt;
    color: #555;
    text-align: center;
    margin: 0 0 12px;
}
#kc-header::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, #999, transparent);
    filter: drop-shadow(0 1px 0 #fff8);
}
#kc-info {
    margin: 12px 0 0;
    text-align: center;
}
#kc-info::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, #999, transparent);
    filter: drop-shadow(0 1px 0 #fff8);
}
#kc-info-wrapper {
    margin-top: 6px;
}
#kc-locale {
    position: absolute;
    right: 12px;
    top: 6px;
}
#kc-locale-dropdown {
    position: relative;
}
#language-switch1 {
    position: absolute;
    right: 0;
    top: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #999;
    background: #ddd;
    display: none;
    box-shadow: 2px 2px 2px #0004;
}
.kcLocaleListItemClass {
    display: contents;
}
.kcLocaleItemClass {
    display: block;
    text-decoration: none;
    padding: 2px 10px;
    color: black;
}
.kcLocaleItemClass:hover {
    background-image: linear-gradient(to right, #fff, transparent);
    color: #569;
}
#kc-current-locale-link {
    appearance: none;
    border: none;
    padding: 0;
    color: #555;
    text-decoration: underline;
    cursor: pointer;
    display: inline;
    background: none;
    border-radius: 0;
    margin: 0;
}
#kc-current-locale-link:hover {
    color: #569;
    text-decoration: none;
}
.kcFormGroupClass {
    display: flex;
    flex-direction: column;
    margin-block: 4px;
}
.kcFormGroupClass.kcFormSettingClass,
.kcFormGroupClass:has(>.kcFormOptionsClass) {
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}
.kcLabelClass {
    font-weight: bold;
    font-size: 8pt;
    align-self: start;
}
.kcInputGroup {
    display: flex;
}
.kcInputGroup > .kcInputClass {
    flex: 1;
}
#kc-form-wrapper,
.kcFormClass {
    max-width: 300px;
    margin: 0 auto 24px;
}
.kcInputClass {
    appearance: none;
    background: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    font: inherit;
    line-height: 1;
    padding: 4px;
    box-shadow: 1px 2px 4px #0002 inset;
}
#kc-page-title {
    font-weight: normal;
    font-size: 14pt;
    text-align: center;
    color: #555;
    margin: 0 0 12px;
}
.kcButtonClass,
.kcFormPasswordVisibilityButtonClass,
.kcSelectAuthListItemClass {
    appearance: none;
    background: linear-gradient(#ddd, #bbb);
    border: 1px solid #999;
    color: #000;
    border-radius: 6px;
    font: inherit;
    line-height: 1;
    padding: 4px 10px;
    box-shadow: 0 0 3px #fff8 inset, 0 1px 3px #0004, 0 1px 0 #fff8 inset;
    cursor: pointer;
    margin: 0;
    text-shadow: 0 1px 0 #fff8;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.kcFormPasswordVisibilityButtonClass {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
}
.kcButtonClass:hover,
.kcFormPasswordVisibilityButtonClass:hover {
    filter: brightness(125%);
}
.kcButtonPrimaryClass {
    background: linear-gradient(#78b, #569);
    border-color: #347;
    color: #fff;
    text-shadow: 0 -1px 0 #0004;
}
.kcInputErrorMessageClass {
    color: #c35;
    font-weight: bold;
    font-size: 8pt;
    margin: 4px;
}
.kcFormPasswordVisibilityIconShow,
.kcFormPasswordVisibilityIconHide {
    display: contents;
}
.kcFormPasswordVisibilityIconShow::after,
.kcFormPasswordVisibilityIconHide::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 0 #fff8);
}
.kcFormPasswordVisibilityIconShow::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1152'%3E%3Cpath d='M1664,576c-95-147-225-273-381-353,40,68,61,146,61,225,0,247-201,448-448,448s-448-201-448-448c0-79,21-157,61-225-156,80-286,206-381,353,171,264,447,448,768,448s597-184,768-448ZM944,192c0-26-22-48-48-48-167,0-304,137-304,304,0,26,22,48,48,48s48-22,48-48c0-114,94-208,208-208,26,0,48-22,48-48ZM1792,576c0,25-8,48-20,69-184,303-521,507-876,507S204,947,20,645c-12-21-20-44-20-69s8-48,20-69C204,205,541,0,896,0s692,205,876,507c12,21,20,44,20,69Z'/%3E%3C/svg%3E");
}
.kcFormPasswordVisibilityIconHide::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1344'%3E%3Cpath d='M555,1047l78-141c-116-84-185-219-185-362,0-79,21-157,61-225-156,80-286,206-381,353,104,161,251,296,427,375ZM944,288c0-26-22-48-48-48-167,0-304,137-304,304,0,26,22,48,48,48s48-22,48-48c0-115,94-208,208-208,26,0,48-22,48-48ZM1307,97c0,2,0,7-1,9-211,377-420,756-631,1133l-49,89c-6,10-17,16-28,16-18,0-113-58-134-70-10-6-16-16-16-28,0-16,34-70,44-87-194-88-357-238-472-418-13-20-20-44-20-69,0-24,7-49,20-69C218,299,527,96,896,96c60,0,121,6,180,17l54-97c6-10,16-16,28-16,18,0,112,58,133,70,10,6,16,16,16,27ZM1344,544c0,186-115,352-288,418l280-502c5,28,8,56,8,84ZM1792,672c0,26-7,47-20,69-31,51-70,100-109,145-196,225-466,362-767,362l74-132c291-25,538-202,694-444-74-115-169-216-282-294l63-112c124,83,249,208,327,337,13,22,20,43,20,69Z'/%3E%3C/svg%3E");
}
.kcInputClass:has(+ .kcFormPasswordVisibilityButtonClass),
.kcInputClass:has(+ .kcButtonClass) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.kcInputClass + .kcFormPasswordVisibilityButtonClass,
.kcInputClass + .kcButtonClass {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.kcInputWrapperClass {
    display: flex;
    flex-direction: column;
}
#kc-info.kcSignUpClass {
    text-align: left;
}
#kc-registration {
    text-align: center;
}
.required {
    color: #c35;
}
.kcAlertClass {
    text-align: center;
    width: max-content;
    margin: 12px auto;
    padding: 12px;
    background: linear-gradient(#ddd, #bbb);
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 0 3px #fff8 inset,0 1px 3px #0004,0 1px #fff8 inset;
    text-shadow: 0 1px 0 #fff8;
    font-weight: bold;
}
.kcAlertClass.alert-error {
    border: 1px solid #c35;
    background: linear-gradient(#ffe0e7, #ffc8d4);
}
.kcFormHeaderClass>.kcFormGroupClass {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
.kcFormHeaderClass {
    max-width: 300px;
    margin-inline: auto;
    margin-bottom: 12px;
}
#kc-attempted-username {
    font-weight: bold;
}
hr {
    align-self: stretch;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    height: 1px;
    background: linear-gradient(to right,transparent,#999,transparent);
    filter: drop-shadow(0 1px 0 #fff8);
}
.kcSelectAuthListClass {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kcSelectAuthListItemClass {
    text-align: left;
    text-wrap: balance;
}
.kcSelectAuthListItemHeadingClass {
    font-weight: bold;
}

/** KOHL */
:root {
    accent-color: #fcd568;
}
body {
    background: radial-gradient(circle at top center, #694e03, #181613);
    align-content: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.kcButtonPrimaryClass {
    background-image: linear-gradient(#fcd568, #fcc11e);
    border-color: #af8000;
    color: #000;
    text-shadow: 0 1px 0 #fff8;
}
a,
.kcLocaleItemClass:hover,
#kc-current-locale-link:hover {
    color: #af8000;
}
#kc-header-wrapper>[data-kc-msg] {
    display: contents;
}
.kc-logo-text {
    width: 100%;
    height: 32px;
    background: url("./logo.svg") center center/contain no-repeat;
}
.kc-logo-text span {
    display: none;
}