:root {
    --t3n-bg-dark: #D9BFFA;
    --t3n-bg-mid: #0000FF;
    --t3n-bg-selected: #FF2AFA;
    --t3n-bg-disabled: #808080;
    --t3n-fc-tab-notselected: #4D0076;
    --t3n-fc-tab-selected: #0000FF;
    --t3n-bg-alt-button: #E93D86;
    --t3n-sys-logo: url(../images/ampLogo.png);
}

@font-face {
    font-family: "Proxima Nova Regular";
    src: url('../fonts/"Proxima Nova Regular"-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/"Proxima Nova Regular"-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/"Proxima Nova Regular"-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/"Proxima Nova Regular"-regular.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/"Proxima Nova Regular"-regular.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: "Proxima Nova Regular";
    src: url('../fonts/"Proxima Nova Regular"-bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/"Proxima Nova Regular"-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/"Proxima Nova Regular"-bold.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/"Proxima Nova Regular"-bold.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/"Proxima Nova Regular"-bold.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: bold;
}

/* All pages */
html {
    height: 100%;
    background-color: #FFFFFF;
}

body {
    height: 100%;
    margin: 0px 0px 0px 200px;
    padding: 0px;
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    background-color: #FFFFFF;
    font-size: 12px;
    color: #2B3B43;
}

div.ajax__calendar_days table tr td {
    padding: 0px;
}

body, td, p {
    font-size: 14px;
}


td {
    font-size: 14px;
}

img {
    border: none;
}

input {
    border-color: #CED1ED;
}

    input:focus {
        border-color: var(--t3n-bg-mid);
    }

.body-main {
    height: 100%;
    margin: 5px 5px 5px 5px;
    padding: 0px;
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    background-color: #FFFFFF;
}

.body-content {
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    background-color: #FFFFFF;
    position: relative;
}

.footer {
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    background-color: #D9BFFA;
}


.h2-spaced {
    padding-left: 10px;
    padding-top: 10px;
}

.title {
    font-size: 30px;
}


.tertiary-tab {

}

/* Top Nav */
#TopNavigation {
    border-top: 0px solid #fff;
    border-bottom: 0px solid #fff;
    z-index: 10;
    position:relative;
}

.message {
    font-weight: bold;
    font-size: 14px;
    color: var(--t3n-bg-selected);
    padding-left: 10px;
    padding-top: 10px;
}

.ProgressContainer {
    width: 50px;
    height: 14px;
    border: solid 1px var(--t3n-bg-mid);
    background-color: White;
    text-align: left;
    color: #aaa;
    font-size: 0.8em;
    position: relative;
}

.ProgressHours, .ProgressCosts, .ProgressMilestones {
    height: 14px;
    position: absolute;
}

.ProgressText {
    width: 48px;
    text-align: right;
    padding: 1px;
    cursor: pointer;
    position: absolute;
}

.mthdGrid {
    border: 1px solid #D9BFFA;
    border-radius: 8px;
}

    .mthdGrid a /** FOR THE PAGING ICONS **/ {
        background-color: Transparent;
        padding: 5px 5px 5px 5px;
        color: var(--t3n-bg-mid);
        text-decoration: none;
        font-weight: bold;
        vertical-align: middle;
        cursor: pointer;
    }

        .mthdGrid a:hover /** FOR THE PAGING ICONS HOVER STYLES**/ {
            font-weight: bold;
            padding: 5px 5px 5px 5px;
        }

    .mthdGrid span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
        background-color: #F6F3F3;
        color: #000;
        padding: 5px 5px 5px 5px;
    }

.mthdGrid-Header {
    background-color: var(--t3n-bg-mid);
    border: none 0px transparent;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 14px;
    text-align: left;
    height: 30px;
}

    .mthdGrid-Header a {
        background-color: transparent;
        padding: 5px 5px 5px 5px;
        color: #FFFFFF;
        text-decoration: none;
        font-weight: bold;
    }

.mthdGrid-Header-Padding {
    padding-left: 15px;
}

.mthdGrid-Header-Label {
    color: white;
    font-size: 14px;
}

.mthdGrid-SubHeader {
    background-color: white;
    border-top-color: #F2F4FB;
    border-bottom-color: #F2F4FB;
    border-left-color: white;
    border-right-color: white;
    border-style: solid;
    border-bottom-width: 5px;
    border-top-width: 5px;
    border-radius: 15px;
    font-weight: bold;
}

.mthdGrid-Row {
    background-color: #FFFFFF;
    border-top-color: #D9BFFA;
    border-bottom-color: #D9BFFA;
    border-left-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-style: solid;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-radius: 5px;
    font-size: 14px;
    height: 32px;
    vertical-align: middle;
    cursor: pointer;
    color: #2B3B43;
}

    .mthdGrid-Row:hover {
        /*background-color: var(--t3n-bg-selected);*/
        color: var(--t3n-bg-selected);
        font-weight: normal;
    }

    .mthdGrid-Row a {
        color: #2B3B43;
        font-weight: normal;
        height: 32px;
        border-style: none;
    }

        .mthdGrid-Row a:hover {
            color: var(--t3n-bg-selected);
            font-weight: normal;
        }

.mthdGrid-Row-NoGap {
    background-color: white;
    border-top-color: white;
    border-bottom-color: white;
    border-left-color: white;
    border-right-color: white;
    border-style: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-radius: 15px;
    height: 32px;
}

.mthdGrid-Row-RoundedCell {
    border-top-color: white;
    border-bottom-color: white;
    border-left-color: white;
    border-right-color: white;
    border-style: none;
    border-radius: 5px;
    text-align: center;
    width: 25px;
}

.mthdGrid-Row-Selected {
    background-color: white;
    border-top-color: #F2F4FB;
    border-bottom-color: #F2F4FB;
    border-left-color: white;
    border-right-color: white;
    border-style: none;
    color: var(--t3n-bg-selected);
    font-size: 14px;
    vertical-align: middle;
    height: 32px;
    border-collapse: collapse;
}

.mthdGrid-Footer {
    background-color: white;
    border-top-color: #F2F4FB;
    border-bottom-color: #F2F4FB;
    border-left-color: white;
    border-right-color: white;
    border-style: solid;
    border-bottom-width: 5px;
    border-top-width: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-radius: 15px;
    font-size: 14px;
    height: 32px;
    vertical-align: middle;
    border-collapse: collapse;
}

.mthdGrid-Pager {
    border: none 0px transparent;
    background-color: #FFFFFF;
    font-family: "Proxima Nova Regular", Arial;
    color: Black;
    height: 30px;
    text-align: center;
}

.mthdGrid-Label {
    background-color: white;
    border-top-color: #F2F4FB;
    border-bottom-color: #F2F4FB;
    border-left-color: white;
    border-right-color: white;
    border-style: solid;
    border-bottom-width: 5px;
    border-top-width: 5px;
    display: block;
}

.mthdGrid-Empty {
    background-color: white;
    border-color: white;
    border-style: none;
    display: block;
    font-size: 14px;
}

.mthdGridAdmin {
    border: none;

}

    .mthdGridAdmin a /** FOR THE PAGING ICONS **/ {
        background-color: Transparent;
        padding: 5px 5px 5px 5px;
        color: white; /*var(--t3n-bg-mid);*/
        text-decoration: none;
        font-weight: normal;
        vertical-align: middle;
        cursor: pointer;
    }

        .mthdGridAdmin a:hover /** FOR THE PAGING ICONS HOVER STYLES**/ {
            color: white;
            font-weight: normal;
            padding: 5px 5px 5px 5px;
        }

    .mthdGridAdmin span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
        background-color: #F6F3F3;
        color: #000;
        padding: 5px 5px 5px 5px;
    }

.mthdGridAdmin-Header {
    background-color: transparent; /** var(--t3n-bg-mid); */
    border: none 0px transparent;
    color: black;
    border-top-left-radius: 5px;
    font-size: 14px;
    text-align: left;
    height: 30px;
}

    .mthdGridAdmin-Header a {
        background-color: transparent;
        padding: 5px 5px 5px 5px;
        color: black;
        text-decoration: none;
        font-weight: bold;
    }

.mthdGridAdmin-Header-Padding {
    padding-left: 15px;
}
.mthdGridAdmin-Header-Label {
    color: white;
    font-size: 14px;
}

.mthdGridAdmin-SubHeader {
    background-color: white;
    border-top-color: #F2F4FB;
    border-bottom-color: #F2F4FB;
    border-left-color: white;
    border-right-color: white;
    border-style: solid;
    border-bottom-width: 5px;
    border-top-width: 5px;
    border-radius: 15px;
    font-weight: bold;
}

.mthdGridAdmin-Row {
    background-color: #F6F6F6;
    border-top-color: white;
    border-bottom-color: white;
    border-left-color: transparent;
    border-right-color: transparent;
    border-style: solid;
    border-bottom-width: 5px;
    border-top-width: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-radius: 15px;
    font-size: 14px;
    height: 32px;
    vertical-align: middle;
    border-collapse: collapse;
    cursor: pointer;
}


    .mthdGridAdmin-Row:hover {
        color: var(--t3n-bg-selected);
        font-weight: normal;
    }

    .mthdGridAdmin-Row a {
        color: black;
        font-weight: normal;
        height: 32px;
        border-style: none;
    }

        .mthdGridAdmin-Row a:hover {
            color: var(--t3n-bg-selected);
            font-weight: normal;
        }

.mthdGridAdmin-Row-NoGap {
    background-color: white;
    border-top-color: white;
    border-bottom-color: white;
    border-left-color: white;
    border-right-color: white;
    border-style: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-radius: 15px;
    height: 32px;
}

.mthdGridAdmin-Row-RoundedCell {
    border-top-color: white;
    border-bottom-color: white;
    border-left-color: white;
    border-right-color: white;
    border-style: none;
    border-radius: 5px;
    text-align: center;
    width: 25px;
}

.mthdGridAdmin-Row-Selected {
    background-color: #E93D86;
    border-top-color: white;
    border-bottom-color: white;
    border-left-color: white;
    border-right-color: #E93D86;
    border-style: none;
    color: white;
    font-size: 14px;
    vertical-align: middle;
    height: 32px;
    border-collapse: collapse;
}

.mthdGridAdmin-Footer {
    background-color: #F6F6F6;
    border-top-color: white;
    border-bottom-color: white;
    border-left-color: transparent;
    border-right-color: transparent;
    border-style: solid;
    border-bottom-width: 5px;
    border-top-width: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-radius: 15px;
    font-size: 14px;
    height: 32px;
    vertical-align: middle;
    border-collapse: collapse;
}

.mthdGridAdmin-Pager {
    border: none 0px transparent;
    background-color: #F2F4FB;
    font-family: "Proxima Nova Regular", Arial;
    color: Black;
    height: 30px;
    text-align: center;
}

.mthdGridAdmin-Label {
    background-color: white;
    border-top-color: #F2F4FB;
    border-bottom-color: #F2F4FB;
    border-left-color: white;
    border-right-color: white;
    border-style: solid;
    border-bottom-width: 5px;
    border-top-width: 5px;
    display: block;
}

.mthdGridAdmin-Empty {
    background-color: white;
    border-color: white;
    border-style: none;
    display: block;
    font-size: 14px;
}


.input-table tr td {
    padding-left: 10px;
}

    .input-table tr td:nth-child(1) {
        width: 100px;
    }

    .input-table tr td:nth-child(2) {
        width: 300px;
    }

    .input-table tr td:nth-child(3) {
        width: 100px;
    }

    .input-table tr td:nth-child(4) {
        width: 300px;
    }

    .input-table tr td input[type=text] {
        width: 285px;
    }

    .input-table tr td select {
        width: 290px;
    }

.input-table-entry {
    font-size:14px;
    padding-bottom: 1em;
}

.input-table-entry-header {
    font-size: 14px;
}

.input-table-entry-header-mandatory {
    font-size: 14px;
    font-weight: bold;
}

.projectFilters {
    background-color: #FFFFFF;
    color: #2B3B43;
    width: 350px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #D9BFFA;
}

.projectFiltersPopup {
    background-color: white;
    color: grey;
    box-shadow: 4px 4px 20px #808080;
}

.projectFiltersLabel {
    background-color: #F5F5F5;
    border: none;
    border-radius: 5px;
    color: black;
    max-height: 20px;
    max-height: 20px;
}

.projectFiltersButton {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    background-color: white;
    border-color: var(--t3n-bg-selected);
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    font-size: 15px;
    color: black;
    display: inline-block;
    height: 25px;
    line-height: 23px;
    text-align: center;
    vertical-align: central;
    width: 85px;
}

.projectFiltersButtonLabel {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    width: 85px;
    height: 25px;
    border-radius: 4px;
    border-style: none;
    color: white;
    background-color: var(--t3n-bg-selected);
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    vertical-align: central;
 }

.projectFiltersButtonLabelDisplayed {
    background-color: var(--t3n-bg-selected);
    border-color: var(--t3n-bg-selected);
    border-style: solid;
    border-width: 1px;
    border-radius: 1px;
    color: white;
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: central;
}

.intable {
    border: none;
    background-color: #E5F0F8;
    color: var(--t3n-bg-mid);
}

.alignright {
    text-align: right;
}

/* Input boxes */
.boxed, .boxednar, .boxedvnar, .boxedvvnar, .boxednow, .boxedpink, .boxed2, .boxed4, textarea, .boxed150, .boxed20, .boxed40, .boxed100, .boxed80, .boxed120, .boxed200, select /*,input[type=text]*/ {
    color: #333333;
    padding: 0.2em;
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 1em;
    background-color: transparent;
    border-radius: 8px;
    border: 1px solid var(--t3n-bg-mid);
}

/* Input boxes different widths */
.boxed20 {
    width: 20px;
}

.boxed40 {
    width: 40px;
}

.boxedvvnar, .boxed80 {
    width: 80px;
}

.boxedvnar, .boxed100 {
    width: 100px;
}

.boxed120 {
    width: 120px;
}

.boxed150 {
    width: 150px;
}

.boxednar, .boxed200 {
    width: 200px;
}

.boxed {
    width: 380px;
}

.boxedpink {
    background-color: #FF9999;
    width: 400px;
    color: #fff;
}

.watermarked {
    color: pink;
    font-weight:300;
}

.SearchBox {
    border: none;
}



/* Buttons */
.button-small {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 20px;
    border-style: none;
    color: var(--t3n-bg-mid);
}

.button-medium {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 25px;
    border-style: none;
    color: var(--t3n-bg-mid);
}

.button-large {
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    font-size: 30px;
    border-style: none;
    color: #2B3B43;
}

.button-alt-small {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 20px;
    border-style: none;
    color: var(--t3n-bg-selected);
}

.button-alt-medium {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 25px;
    border-style: none;
    color: var(--t3n-bg-selected);
}

.button-alt-large {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 30px;
    border-style: none;
    color: var(--t3n-bg-selected);
}

.button-small-disabled {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 20px;
    border-style: none;
    color: var(--t3n-bg-disabled);
}

.button-medium-disabled {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 25px;
    border-style: none;
    color: var(--t3n-bg-disabled);
}

.button-large-disabled {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    font-size: 30px;
    border-style: none;
    color: var(--t3n-bg-disabled);
}

.normal-button {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    background-color: var(--t3n-bg-mid);
    width: 100px;
    height: 38px;
    border-radius: 5px;
    border-style: none;
    color: #2B3B43;
    font-size: 16px;
    cursor: pointer;
}

    .normal-button:disabled {
        background-color: var(--t3n-bg-disabled);
    }

.normal-alt-button {
    font-family: "Proxima Nova Regular",  Arial, sans-serif;
    background-color: var(--t3n-bg-alt-button);
    width: 100px;
    height: 30px;
    border-radius: 6px;
    border-style: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

    .normal-alt-button:disabled {
        background-color: var(--t3n-bg-disabled);
    }


.addressRolesPopup {
    background-color: white;
    color: grey;
    box-shadow: 4px 4px 20px #808080;
    padding: 5px 5px;
}

#CentreBox a.buttons, .buttons {
    background-color: var(--t3n-bg-mid);
    color: White;
    padding: 2px 4px;
    border: 1px solid var(--t3n-bg-mid);
    margin: 0px;
    text-decoration: none;
    -moz-box-shadow: 1px 1px 2px #888;
    -webkit-box-shadow: 1px 1px 2px #888;
    box-shadow: 1px 1px 2px #888;
    padding: 0.2em 0.5em;
}

    #CentreBox a.buttons:hover, #CentreBox a.selected, .buttons:hover {
        background-color: var(--t3n-bg-dark);
        color: #fff;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: var(--t3n-bg-dark);
    }

.accordian-header {
    background-color: var(--t3n-bg-mid);
    color: white;
    text-decoration: none;
    border: 2px solid #F2F4FA;
    padding: 4px;
    font-size: 16px;
    height: 20px;
    cursor: pointer;
}

.accordian-content {
    background-color: white;
    color: black;
    border: 2px solid #F2F4FA;
    padding: 10px 20px 20px 20px;
}

.accordian-header-selected {
    background-color: var(--t3n-bg-selected);
    color: white;
    border: 2px solid #F2F4FA;
    padding: 4px;
    font-size: 16px;
    height: 20px;
}

.accordian-header-text {
    color: white;
    text-decoration: none;
}

.accordian-header-text a:link {
    color: white;
    text-decoration: none;
}

.accordian-header-text:visited {
    color: white;
    text-decoration: none;
}

.accordian-header-text:hover {
    color: white;
    text-decoration: none;
}

.accordian-header-text:active {
    color: white;
    text-decoration: none;
}

.InfoBoxSmall {
    padding: 10px;
    width: 200px;
    float: left;
    margin: 10px 10px 0px 0px;
    background-color: #FAFAFD;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

    .InfoBoxSmall h2 {
        margin: 0px 0px 0px 0px;
        padding: 10px;
        font-size: 18px;
    }

.InfoBox {
    padding: 10px;
    width: 340px;
    min-height: 150px;
    float: left;
    margin: 10px 10px 0px 0px;
    background-color: #FAFAFD;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

    .InfoBox h2 {
        margin: 0px 0px 0px 0px;
        padding: 10px;
        font-size: 18px;
    }

.InfoBoxWide {
    padding: 10px;
    width: 712px;
    min-height: 150px;
    float: left;
    margin: 10px 0px 0px 0px;
    background-color: #FAFAFD;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

.InfoBoxUltraWide {
    padding: 10px;
    width: 1050px;
    min-height: 150px;
    float: left;
    margin: 10px 0px 0px 0px;
    background-color: #FAFAFD;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

.InfoBoxWide h2 {
    margin: 0px 0px 0px 0px;
    padding: 10px;
    font-size: 18px;
}

.InfoContainer {
    width: 760px;
    min-height: 200px;
}

.hidden-input {
    border: none;
    background-color: #FAFAFD;
    color: #FAFAFD;
    width: 2px;
}

.checkbox {
    border-color: var(--t3n-bg-mid);
    background-color:white;
    border-radius: 3px;
}

.dropdownlist {
    background: url("../images/tempo_dropdown-arrow.svg") no-repeat right #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.divrightaligned {
    float: right;
}

.prompt-with-margin {
    margin-right: 20px;
}
.listbox {
    border: 1px solid #D9BFFA;
    overflow: auto;
    font-family: "Proxima Nova Regular", Arial;
    font-size: 16px;
}
    .listbox option:hover {
        background-color: var(--t3n-bg-selected);
        border: none;
        font-size: 16px;
        color: white;
    }
    .listbox option[selected] {
        background: var(--t3n-bg-selected) !important;
        border: none;
        font-size: 16px;
        color:white;
    }

.tab-notselected {
    color: var(--t3n-fc-tab-notselected);
    opacity:0.5;
    text-decoration: none;
    font-size: 25px;
}
.tab-notselected:hover {
    opacity: 1;
}

.tab-selected {
    color: var(--t3n-fc-tab-selected);
    text-decoration: underline;
    font-size: 25px;
}

.tab-secondary-notselected {
    color: var(--t3n-fc-tab-notselected);
    opacity:0.5;
    text-decoration: none;
    font-size: 16px;
}

.tab-secondary-notselected:hover {
    opacity: 1;
}

.tab-secondary-selected {
    color: var(--t3n-fc-tab-selected);
    text-decoration: underline;
    font-size: 16px;
}

.timesheetLegend {
    width: 15px;
    border-radius: 5px;
}

.timesheetZero {
    background-color: Red;
}

.timesheetLessThanFullDay {
    background-color: Orange;
}

.timesheetWeekend {
    background-color: Silver;
}

.timesheetFullDay {
    background-color: Green;
}

.pagination {
    border: none;
}
    .pagination current {
        background: var(--t3n-bg-selected);
        color: #fff;
    }

#btnTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: white; /* Set a background color */
    color: var(--t3n-bg-selected); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 0px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 50px; /* Increase font size */
    box-shadow: 4px 4px 4px #808080;
}

    #btnTop:hover {
        background-color: var(--t3n-bg-selected); /* Add a dark-grey background on hover */
        color: white;
    }