@highlight: #c38300;

.glassWidget(@color, @interactive) {
    background-color: @color;
    background-image: linear-gradient(#ffffffcc 0%, #ffffff20 50%, #00000020 51%, #00000000 100%), radial-gradient(#ffffff60 0%, #ffffff00 80%);
    box-shadow: 2px 2px 8px #ffffff50 inset, -2px 2px 8px #ffffff50 inset, 0 5px 5px #00000050;
    border: 1px solid darken(@color, 10%);
    border-bottom: 1px solid darken(@color, 10%) !important;
    border-radius: 8px;
    outline: 1px solid rgba(0,0,0,0.3);
    font-family: Verdana, Geneva, Tahoma, sans-serif, Helvetica, sans-serif;
    color: white;
    text-shadow: 0px 0px 4px #00000080, 0px 2px 2px #000;

    & when (@interactive = true) {
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;

        &:hover {
            background-color: lighten(@color, 10%);
            box-shadow: 2px 4px 8px #ffffff80 inset, -2px 4px 8px #ffffff80 inset, 0 9px 9px #000000aa;
        }

        &:active {
            background-color: darken(@color, 10%);
            box-shadow: 2px 4px 8px #ffffff80 inset, -2px 4px 8px #ffffff80 inset, 0 9px 9px #000000aa;
        }
    }
}

.flatWidget(@color, @interactive) {
    //transparent from top to 50%, then 30% black to bottom
    background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0.3) 100%);
    background-size: 100%;

    & when (@interactive = true) {
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;

        &:hover {
            background-color: lighten(@color, 10%);
            box-shadow: 0 0 8px #ffffff80;
        }

        &:active {
            background-color: darken(@color, 10%);
            box-shadow: 0 0 8px #00000080;
        }
    }
}

.glowTop(@size) {
    background-image: linear-gradient(#ffffffcc 0%, #ffffff20 50%, #00000020 51%, #00000000 100%), radial-gradient(#ffffff60 0%, #ffffff00 80%, #ffffff00 100%);
    background-size: 100% @size;
    background-repeat: no-repeat;
}

.glassBody() {
    backdrop-filter: blur(10px) brightness(133%);
    box-shadow: 2px 2px 8px #ffffff50 inset, -2px 2px 8px #ffffff50 inset, 0 5px 5px #00000050;
}

.tabHeader {
    .glowTop(100%);

    &.active {
        background-color: @highlight !important;
    }
}

.rounded() {
    border-radius: 16px;
}

.textShadow() {
    text-shadow: 0px 0px 4px #00000080, 0px 2px 2px #000;
}

.sideItemList {
    background-color: transparent;
    .glassBody();
    .textShadow();
}

.DisplayMetricHeader {
    .glassBody();
    .glowTop(50%);
    .textShadow();
}

#loginContainer {
    background-color: rgba(0,0,0,0.5);
    .glassBody();
    .glowTop(64px);
    .rounded();
}

.StoreCard > .mat-icon {
    text-shadow: none;
}

.wizardTab .wizardContents, .modalpanel {
    background-color: rgba(255,255,255,0.2);
    .glassBody();
    .rounded();
    .glowTop(64px);
    border-bottom: none;
    .textShadow();

    #modaltitle {
        background-color: transparent;
    }

    h2 {
        background-color: transparent;
    }
}

#AMP_Core_PrimaryTask  {
    .glassBody();
    .glowTop(100%);
    .textShadow();
}

#sideMenuContainer {
    .glowTop(96px);
    .textShadow();

    .menuTitle {
        color: white;
    }
}

#tabTitle, .bodyTab {
    .textShadow();
}

.itemList .item div .desc {
    color: white;
}

#sideMenu a.selected {
    .glowTop(100%);
    background-color: @highlight;
}

.analyticsSection, .ServerGroupHeader {
    .glassBody();
    .glowTop(72px);
    .rounded();
}

.StoreCard {
    background-color: transparent !important;
    .glassBody();
    .glowTop(64px);
    .textShadow();
}

body {
    background-image: url(/Images/Frutiger.webp);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#bgtext {
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}

body, .bodyTab, .tabHeaderContainer {
    background-color: transparent;
}

#mainBody {
    background-color: transparent;
}

button, input[type=button] {
    .glassWidget(rgba(255, 255, 255, 0.2), true);
    font-size: 12pt;
    padding: 4px 12px;
    &.slimButton {
        padding: 2px 6px;
    }
    background-size: 100%;
}

.settingsGroup .groupBody .settingContainer .listEditButton {
    background-color: @highlight;
    .flatWidget(@highlight, true);
}

.scheduleTriggerHeaderItem .scheduleHeader {
    color: white;
    font-size: 14pt;
    margin-bottom: 8px;
}

.iconButton, .toolIconButton {
    .glassBody();
    .glowTop(32px);
    background-position: top center;
}

.bgRed, .bgGreen {
    border: none;
}

#statusActions > div {
    display: block;
    .glassBody();
    .glowTop(64px);
    .rounded();
    padding: 8px 16px;
    .textShadow();
}

#sideMenuContainer {
    background-color: transparent;
    .glassBody();
}

.subMenuWell {
    background-color: transparent;
}

.settingsGroup .groupBody .settingContainer {
    background-color: rgba(0, 0, 0, 0.5);
    .glassBody();
    .glowTop(64px);
    .rounded();

    .settingLabel {
        .settingDescription {
            color: white;
        }

        .textShadow();  

        input[type=text], input[type=password], input[type=url], input[type=number], input[type=email], input[type=search], select, textarea, .popupTrigger {
            .textShadow();
            .rounded();
            padding-left:12px;
        }
    }
}

.scheduleTriggerDescription {
    background-color: transparent;
    border: none;
}

.scheduleTriggerInfo {
    background-color: transparent;
    border: none;
    .glassBody();
    .glowTop(48px);
    .rounded();
    padding: 8px;
    .textShadow();
}

.scheduleTriggerTask {
    border-bottom: 1px solid white;
}