.gauge-logo {
    padding-right: 6px;
    padding-bottom: 6px;
    height: 45px;
}

.ssIcon {
    font-size: 1.3rem;
    cursor: pointer;
}

.ssModalMain {
    padding:10px; 
    text-align: center;
}

.ssTable {
    background-color: white;
    border-radius: 7px;
    white-space: nowrap;
}

.ssBtn {
    --bs-btn-border-color: #7fb842 !important;
    background-color: #7fb842 !important;
    vertical-align: middle !important;
}
    .ssBtn:hover {
        background-color: #449d44 !important;
        border-color: transparent !important;
    }
    .ssBtn:disabled {
        border-color: transparent !important;
    }

.btn {
    border-radius: 0px !important;
}

.ssSiteTitle {
    font-size: large;
    font-weight: 500
}

.ssSiteTitleContainer {
    margin-left: 5px;
    margin-right: 5px;
    border-bottom-style: double;
    border-bottom-width: medium;
    font-size: large;
    font-weight: 500
}

.ssSelect {
    max-height: 35px;
    font-size:medium; 
}
.ssHeaderRight {
    padding:5px; 
    float:right
}
.ssPanelRow {
    width: stretch;
    border-style: solid;
    border-color: black;
    border-width: 0px 0px 1px 1px;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.ssPanel {
    font-size: small;
    width: 180px;
}
.noDataPanel {
    background-color: black;
    color: white;
    height: 104px;
}

.DataPanel {
    border: 1px solid black;
    min-height: 104px;
}

.custom-panelbar-colors.k-panelbar .k-group > .k-panelbar-header > .k-link:hover .k-icon {
    color: green !important;
    transform: scale(1.5) !important;
}

.ssTopBanner {
    background-color: rgb(129,183,26);
    padding: 10px;
    color: whitesmoke;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.ssForm {
    padding: 25px 25px;
    background-color: #f7f7f7;
    color: black;
}

.ssHeader {
    padding-top:10px;
    font-size:20px;
}

.seperator {
    background-color: #6b9816;
    height: 10px;
}

.ssBottomBanner {
    background-color: rgb(129,183,26);
    padding: 10px 30px 10px 30px;
    color: white;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.ssButton {
    height: 45px;
    margin-bottom: 10px;
    color: white !important;
    background-color: rgb(113,161,23) !important;
}

.ssCheckBox {
    cursor: pointer !important;
}
    .ssCheckBox:checked {
        background-color: rgb(129,183,26) !important;
        border-color: #6b9816 !important;
    }

.ssButtonClear {
    border-style: none;
    background-color: transparent;
}

.accountPanel {
    margin-top: 20px;
    text-align: center;
}

.accountWindow {
    margin: 20px;
    width: 450px;
}

.controlArea {
    background-color: #f7f7f7;
    color: black;
    padding: 0px 30px 20px 30px;
}

.userInput {
    margin: 0px 0px 20px 0px;
}

.iconArea {
    width: 30px;
    height: 30px;
    overflow: hidden;
}

.icon {
    position: relative;
}

.iconEnabled {
    top: -30px;
}

.iconDisabled {
    top: 0px;
}

.click-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.cell:hover {
    background-color: rgb(245, 245, 245);
}

.ssIcon {
    padding-right: 10px; 
    height:32px;
}

.table-user {
    background-color: white;
    border-radius: 7px;
    white-space: nowrap;
}

.wrapper {
    height: 70px;
    width:  70px;
    position: relative;
    padding: 5px;
}

.spinner3 {
    position: absolute;
    color: white;
    border: 3px solid white;
    border-radius: 70px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    transition: all 1s;
    width: 70px;
    height: 70px;
    left: 50%;
    top: 50%;
    margin-top: 70px auto;
}

    .spinner3:before {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border-radius: 64px;
        background-color: var(--color, red);
        top: var(--top, 30px);
        transform: translate(-50%);
        animation: wave 6s infinite linear;
        animation-play-state: var(--playState,running);
        transition: all 4s;
        left: 50%;
    }


@keyframes wave {
    0% {
        transform: translate(-50%) rotate(-180deg);
    }

    100% {
        transform: translate(-50%) rotate(360deg);
    }
}

.circle {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border: 5px solid #FFFFFF;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow, 0 0 0 5px none);
}

.wave {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color, red);
    border-radius: 50%;
}

    .wave:before,
    .wave:after {
        content: '';
        position: absolute;
        top: var(--top, -60px);
        left: 50%;
        width: 200%;
        height: 200%;
        transform: translate(-50%);
    }

    .wave:before {
        border-radius: 45%;
        animation: animate 5s linear infinite;
        background: rgba(255, 255, 255, 1);
    }

    .wave:after {
        border-radius: 40%;
        animation: animate 10s linear infinite;
        background: rgba(255, 255, 255, 0.5);
    }

@keyframes animate {
    0% {
        transform: translate(-50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%) rotate(360deg);
    }
}

.wave-flat {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color, red);
    border-radius: 50%;
}

    .wave-flat:before {
        content: '';
        position: absolute;
        top: var(--top, -60px);
        left: 50%;
        width: 200%;
        height: 200%;
        transform: translate(-50%);
        background: rgba(255, 255, 255, 1);
    }