:root {
    /*color palette*/
    --blue: #0079c1;
    --green: #afc42a;
    --burnt-orange: #d06f1a;
    --light-orange: #f3d9c0;
    --soft-blue: #ecf1fe;
    --light-blue: #c7d5ef;
    --dark-blue: #164499;
    --primary-green: #c1d82f;
    --light-green: #dbe791;
    --soft-green: #d0df68;
    --dark-green: #5e7817;
    --dark-brown: #652200;
    --light-grey: #ececec;
    --soft-grey: #e9ecef;
    --mid-grey: #696969;
    --muted-grey: #c5c0c0;
    --dark-grey: #414041;
    --invalid-red: #990000;
    --filter-white: brightness(10) contrast(1.1) sepia(0.1) saturate(0.8);
    --filter-light-blue: brightness(0) saturate(100%) invert(97%) sepia(21%) saturate(5197%) hue-rotate(178deg) brightness(95%) contrast(90%);
    --filter-light-green: brightness(0) saturate(100%) invert(92%) sepia(91%) saturate(674%) hue-rotate(8deg) brightness(88%) contrast(92%);
    --filter-dark-green: brightness(0) saturate(100%) invert(43%) sepia(15%) saturate(1797%) hue-rotate(35deg) brightness(94%) contrast(98%);
    --filter-burnt-orange: brightness(0) saturate(100%) invert(61%) sepia(23%) saturate(4695%) hue-rotate(349deg) brightness(84%) contrast(93%);
    --filter-dark-blue: brightness(0) saturate(100%) invert(24%) sepia(68%) saturate(1575%) hue-rotate(197deg) brightness(85%) contrast(98%);
    --filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%);
    /*font-palette*/
    --font-primary: 'Open Sans', serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}

.loader.green {
    --spinner-color: var(--primary-green);
}

.loader.blue {
    --spinner-color: var(--dark-blue);
}

.loader.white {
    --spinner-color: white;
}

html {
    font-size: 81.5%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    color: var(--dark-grey);
    font-size: 1rem; /*means to be the same as the html font-size 81.5% similar to 13px*/
    font-weight: var(--font-weight-regular);
}
/*this is for entire web app's tab key, when the tab is used and element is focused, the border is primary green*/
*:focus-visible {
    border-radius: 15px;
    outline: 2px solid var(--light-blue);
}

.form-control.section-field.invalid-input {
    border: 1px solid red;
}

#centered-cell {
    display: flex;
    justify-content: center;
}

.user-data {
    position: absolute;
    top: 40%;
    left: 40%;
}

.loading-container {
    margin-top: 50px;
    margin-right: 50px;
}

.container-row {
    display: flex;
    align-items: center;
    padding: 0px;
}


.btn {
    border-radius: 25px;
    color: var(--dark-blue);
}

.button {
    width: fit-content;
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    background-color: transparent;
    color: var(--dark-blue);
}

    .button.previous-button {
        padding: 0.5%;
        border: 2px solid var(--light-grey);
        background-color: var(--muted-grey);
        opacity: 0.8;
        transition: all 0.3s ease;
    }

        .button.previous-button:hover, .button.next-button:hover {
            background-color: var(--primary-green);
            color: snow;
            border: 2px solid var(--primary-green);
            opacity: 1;
        }

    .button.next-button {
        padding: 0.5%;
        border: 2px solid var(--light-grey);
        background-color: var(--muted-grey);
        opacity: 0.8;
        transition: all 0.3s ease;
    }

#save-close {
    width: 18px;
}


.button.next-button:disabled {
    cursor: not-allowed;
    background-color: #d3d3d3;
    border-color: #d3d3d3;
}

.close-btn:hover img {
    filter: var(--filter-white);
}

.button.previous-button.close-btn {
    position: relative;
    background-color: var(--primary-green);
    border: 2px solid var(--primary-green);
}

    .button.previous-button.close-btn:hover, .button.previous-button.close-btn:focus {
        width: fit-content;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--burnt-orange);
        background-color: var(--burnt-orange);
        border-radius: 25px;
        cursor: pointer;
        color: snow;
    }

.button-row {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    padding-inline: 10px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

    .button-row button {
        pointer-events: auto;
    }


    .button-row div {
        display: flex;
        gap: 50px;
        justify-content: space-between;
    }

.tab-button {
    border: 1px solid var(--dark-blue);
    background-color: var(--dark-blue);
    color: snow;
    margin-right: 10px;
}

    .tab-button:hover {
        background-color: var(--dark-blue);
        color: snow;
    }

.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.tab-outline-button {
    position: relative;
    border: none;
    border: 1px solid var(--dark-blue);
    margin-right: 10px;
}

    .tab-outline-button:hover {
        background-color: var(--dark-blue);
        color: snow;
    }
/*for the dropdown menu to show under Quotes*/
.tabs {
    height: 100vh;
}

#tab-canva {
    display: flex;
    margin-top: 5px;
    align-items: center;
}

ul {
    list-style-type: none;
    padding: 0;
}

/*Quote Menu List Layout*/
.quote-menu.show {
    opacity: 1;
    transform: translateY(0);
    min-width: 970px;
}

.quote-menu.hide {
    opacity: 0;
    transform: translateY(-10px);
}

#menu-navigation {
    display: flex;
    justify-content: space-evenly;
    padding-inline: 3rem 5rem;
}

.menu-navigation.client-tab {
    display: flex;
    justify-content: space-around;
    width: 46rem;
    padding-left: 50px;
}

.menu-item-container {
    display: flex;
    align-items: center;
    position: relative;
}

.vertical-decoration.active {
    width: 10px;
    height: 30px;
    background-color: var(--dark-blue);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 93%;
}

.steps-list {
    background-color: var(--light-grey);
    height: 85px;
    width: 85px;
    min-height: 5.5em;
    min-width: 5.5em;
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
    color: var(--dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media(max-width:1350px) {
    .steps-list.quote-menu-list {
        height: 55px;
        width: 55px;
    }
}

.quote-menu-list {
    cursor: default;
    pointer-events: none;
}

.steps-list.active {
    background-color: var(--dark-blue);
    color: snow;
}

.steps-list.completed {
    background-color: #c9dae9;
    color: snow;
}
/*The circle label of steps*/
.menu-text {
    font-size: 1.1rem;
    text-transform: capitalize;
}

@media (max-width: 1350px) {
    .menu-text.quote-menu-list {
        font-size: 95%
    }
}

.step-content {
    height: auto;
    margin-block: 20px;
    position: relative;
    padding-bottom: 5rem;
}

.steps-container {
    overflow-x: visible;
    margin-bottom: 30px;
    padding: 0 20px;
}
/*the style of client step*/
.buttons {
    display: flex;
    justify-content: space-evenly;
}

.button-cancel {
    padding: 2px 10px;
    margin: 0 10px;
    background-color: var(--green);
    color: snow;
    border: 2px solid var(--green);
}

.row-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--dark-blue);
    border-radius: 10rem;
    color: snow;
    height: 40px;
    padding: 0px 10px 0px 20px;
    margin-bottom: 10px;
}

.section-box {
    width: 50%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.top {
    border-radius: 15px 15px 0 0;
    background-color: var(--dark-blue);
    color: snow;
}

    .top span {
        padding-inline: 20px;
        height: 30px;
        display: flex;
        align-items: center;
    }

.bottom {
    border-radius: 0 0 15px 15px;
    border-top: none;
    border: 1px solid var(--dark-blue);
    padding: 12px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.section-field {
    width: 95%;
    border-radius: 25px;
    text-align: center;
    box-shadow: none;
    outline: none;
    border: 2px solid var(--light-blue);
}

    .section-field:disabled {
        font-weight: var(--font-weight-regular);
        border: none;
        color: var(--dark-grey);
        border: 0.1px solid transparent;
    }

.datepicker, .datepicker:focus {
    color: var(--dark-blue);
    box-shadow: none;
    background-color: transparent;
    border: none;
    text-align: center;
}

.switches-set {
    color: #393939;
    padding: 10.5px 0px;
    gap: 0;
}

.switch-button {
    border: none;
    padding: 5px 40px;
    background-color: #c7d8ef;
    color: snow;
}

    .switch-button.selected {
        background-color: var(--dark-blue);
    }

.yes-button {
    border-radius: 15px 0 0 15px;
}

.no-button {
    border-radius: 0 15px 15px 0;
}

.question-set {
    color: #393939;
    padding: 15.5px 10px;
}

.calendar-field {
    width: 28rem;
    border-radius: 25px;
    border: 1px solid #e0e0e0;
}

.calendar-icon:active {
    background-color: var(--soft-grey);
    border-color: transparent;
}

/*Checkbox*/
.form-check-input[type=checkbox] {
    border-radius: 50px
}

.checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    margin-left: 10px;
}

    .checkbox.tbody {
        padding-left: 9px;
    }

.checkbox-style, .checkbox-style:hover, .checkbox-style:focus {
    box-shadow: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--burnt-orange);
    border-radius: 50px;
}


    .checkbox-style:checked {
        background-color: var(--burnt-orange);
        border: none;
        box-shadow: none;
        opacity: 1;
    }

    .checkbox-style.quotes:disabled {
        background-color: #dbdbdb;
        border: 2px solid #dbdbdb;
    }


    .checkbox-style.quotes {
        cursor: pointer;
    }


/*Table*/

.table-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
}


#table-row {
    overflow: visible; /*this is important for making the header not exceed the border*/
    align-content: center;
    border: 1px solid var(--dark-blue);
    border-radius: 18px;
}

.table-section {
    overflow: visible;
    position: relative;
    width: 100%;
}
    /*situationTableComponent*/
    .table-section th {
        text-overflow: ellipsis;
        font-weight: var(--font-weight-regular);
        background-color: var(--dark-blue);
        color: snow;
        text-align: center;
        height: 30px;
    }

        .table-section th:first-child {
            padding-left: 16px;
            border-radius: 15px 0 0 0;
        }

        .table-section th:last-child {
            padding-right: 18px;
            border-radius: 0 15px 0 0;
        }
    /*this area also affects the client table */

    .table-section td {
        padding: 7px 0;
    }

.null-table {
    color: var(--burnt-orange);
    text-align: center;
    width: 100%;
}

.button-add {
    justify-content: flex-end;
    background-color: transparent;
    border: 2px solid snow;
    padding: 1px 3.5px;
    margin-right: 3px;
    transition: 0.3s;
    cursor: pointer;
}

    .button-add:hover {
        transition: 0.3s;
        background-color: var(--burnt-orange);
        color: snow;
        border: 2px solid var(--burnt-orange);
    }

.button-save {
    padding: 2px 10px;
    background-color: var(--burnt-orange);
    color: snow;
    border: 2px solid var(--burnt-orange);
}

    .button-save:hover {
        background-color: var(--primary-green);
        border: 2px solid var(--primary-green);
        color: snow;
    }

.button-edit {
    border-radius: 50%;
    padding: 4px 4.5px;
    background-color: var(--burnt-orange);
    color: snow;
}

    .button-edit:hover {
        background-color: var(--primary-green);
        color: white;
    }

.button-select {
    border-radius: 15px;
    padding: 5px;
    background-color: var(--burnt-orange);
    color: snow;
}

.icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .icon-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/*Cover page and Sections pages's product buttons*/
.flex-row {
    display: flex;
    gap: 10px;
    width: auto;
}

.flex-row-centered {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.cover-section {
    width: 100%;
    min-width: 768px;
}


.top-row {
    display: flex;
    width: 95%;
}

.bottom-row {
    display: flex;
    width: 75%;
}

.coverstep-buttons {
    outline-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    flex: 1;
    border-radius: 25px;
    background-color: var(--light-grey);
    color: var(--dark-blue);
    height: 70px;
    margin: 10px;
    text-align: left;
    transition: all 0.3s ease;
}

#button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#icon-container {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon {
    width: 5rem;
}

.coverstep-buttons:hover {
    border-color: var(--dark-blue);
}

.coverstep-buttons #button-content {
    font-size: 1.1rem;
    width: 60%;
    display: flex;
}

@media (max-width: 1290px) {
    .coverstep-buttons #button-content span {
        font-size: 1rem;
    }

    #icon-container {
        width: 30%;
    }

    .coverstep-buttons #button-content {
        width: 70%;
    }

    .icon {
        width: 3.5rem;
    }
}

.coverstep-buttons.selected {
    background-color: var(--burnt-orange);
    color: snow;
}

    .coverstep-buttons.selected:hover {
        border-color: var(--dark-blue);
    }

    .coverstep-buttons.selected .icon {
        filter: var(--filter-white);
    }
/*Broker Commission*/
.broker-bottom {
    display: flex;
    flex-direction: row;
    padding-right: 10px;
    height: 100%;
}

.label-group {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30%;
}

.label-text {
    border-radius: 15px;
    background-color: var(--dark-blue);
    padding: 5px 0px;
    margin-left: 10px;
    width: 60%;
    text-align: center;
    color: snow;
}

    .label-text.reduce {
        margin: 0;
        width: 65%;
        background-color: transparent;
        color: var(--dark-blue);
        text-align: right;
    }

.label-input {
    text-align: center;
    max-width: 45%;
    margin: 0 5px;
}

.label-text.applied-commission {
    background-color: var(--burnt-orange);
}
/* Small tablets (portrait) */
@media (max-width: 768px) {
    .cover-bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 10px;
        overflow: visible;
    }

    .coverstep-buttons {
        width: 90%;
    }
}
/*search bar*/
.search-wrapper {
    display: flex;
    align-content: center;
    margin: 5px 0;
}

.input-group {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    box-shadow: none;
    padding-right: 30px;
    border-radius: 15px;
    min-width: 30rem;
}

#searchComponent {
    font-weight: var(--font-weight-regular);
}

.input-group .form-control.form-input:focus {
    box-shadow: none;
    border: none;
}

.form-input:disabled {
    cursor: not-allowed;
}

.dropdown-visible {
    border-radius: 15px 15px 0 0;
}

.dropdown-hidden {
    border-radius: 15px;
}

.form-control.form-input {
    border: none;
    outline: none;
    flex-grow: 1;
    font-weight: var(--font-weight-regular);
    background-color: transparent;
}

.search-icon {
    width: 22px;
    height: 22px;
    opacity: 6;
    position: absolute;
    right: 10px;
}

.footer {
    position: absolute;
    bottom: 50px;
}
/*create new client button*/
.createClientbutton {
    max-height: 2.2em;
    display: flex;
    justify-content: end;
    margin-left: 20px;
}

.client-button {
    width: fit-content;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    color: snow;
    margin-left: 10px;
}

.create-quote {
    background-color: var(--burnt-orange);
    padding: 6px 15px;
}

.new-client {
    min-width: 130px;
    background-color: var(--green);
    color: white;
    padding: 6px 15px;
}

    .new-client:disabled {
        color: snow;
        cursor: not-allowed;
    }

    .new-client:disabled {
        background-color: #e1e1e1;
    }

.modal-label {
    margin-top: 0px;
}
/*View Quotes big-circle-label*/
.big-circle-label.quote {
    background-color: var(--primary-green);
}

.quoteIcon {
    width: 5rem;
    margin-bottom: 20px;
    margin-left: 2px;
    filter: var(--filter-dark-blue);
}
/*View Client big-circle-label*/
.big-circle-label {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    background-color: var(--primary-green);
    border-radius: 50%;
    z-index: 1;
    flex-shrink: 0; /*prevent shrinking*/
}

    .big-circle-label.quote p {
        margin-bottom: 30px;
        text-transform: capitalize;
    }

#clientIcon {
    width: 60px;
    margin-bottom: 10px;
    filter: var(--filter-dark-blue);
}

.head-label {
    background-color: var(--light-green);
    border-radius: 0 25px 25px 0;
    color: snow;
    margin-left: -25px;
    margin-top: 18px;
    padding: 5px 35px;
    max-height: 10vh;
    max-width: fit-content;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    flex-wrap: wrap;
    text-align: left;
    text-transform: capitalize;
    font-size: 1.2rem;
    cursor: text;
    color: var(--dark-blue);
}


    .head-label::-webkit-scrollbar {
        display: none;
    }

.alert-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 40%;
    height: 5vh;
    width: 30vw;
    color: snow;
    background-color: var(--green);
    border-radius: 15px;
}
/*ABN Lookup Button*/
.abn-container {
    max-height: 55vh;
    border-collapse: separate;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #96b6df #f5f5f5;
    margin: 0 25px;
}

.table {
    border-collapse: separate;
    border-spacing: 0;
    user-select: text
}

    .table th {
        background-color: snow;
    }

.abn-container thead {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.abnlookup-btn {
    height: 33px;
    border: none;
    border-radius: 20px;
    overflow-wrap: normal;
    width: 7rem;
}
/*radios group*/
.radios-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.radios-group {
    display: flex;
    position: relative;
    padding: 6px 15px;
    gap: 5px;
}

    .radios-group input[type="radio"]:disabled {
        cursor: default;
    }

    .radios-group:disabled label {
        color: var(--soft-grey);
    }

    .radios-group label {
        color: var(--dark-grey)
    }

    .radios-group input[type="radio"] {
        appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #e3e3e3;
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        position: relative;
    }

        .radios-group input[type="radio"]:checked {
            border-color: var(--burnt-orange);
        }

            .radios-group input[type="radio"]:checked::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 10px;
                height: 10px;
                background-color: var(--burnt-orange);
                border-radius: 50%;
                transform: translate(-50%, -50%);
            }
/*Map Expand*/
.expandMap {
    cursor: pointer;
    margin-right: 4px;
}

.disabled-expandMap {
    margin-right: 4px;
    filter: grayscale(100%);
    opacity: 0.5;
    pointer-events: none;
}
/*sort button*/
.sort-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

    .sort-button:hover {
        border-radius: 25px;
        background-color: #aeaeae;
    }

    .sort-button img {
        margin-bottom: 2px;
    }

.form-control::placeholder {
    color: #9d9d9d;
}

.text-center {
    color: var(--burnt-orange);
}

.past-expiry {
    color: red;
}
/*This is to avoid the up and down arrow showing for input type is number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/*bin icon*/
#bin {
    display: block;
    border-radius: 15px;
    justify-content: center;
    padding: 0;
    margin: 0;
    transition: background-color 0.3s ease;
}

    #bin.disabled {
        pointer-events: none;
        opacity: 0.5;
        background-color: transparent;
    }

    #bin.enabled {
        pointer-events: auto;
    }

        #bin.enabled:hover {
            background-color: var(--burnt-orange);
        }

            #bin.enabled:hover #bin-icon:hover {
                border-radius: 15px;
                background-color: var(--burnt-orange);
                transition: 0.3s;
            }

#bin-icon {
    width: 25px;
    cursor: pointer;
}
/*the cancel button show across the create quote steps*/
.cancel {
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    right: 1.5%;
    top: -6rem;
    transition: 0.3s;
    padding: 5px;
    border-radius: 25px;
}

@media (max-width:1352px) {
    .cancel {
        top: -5.3rem;
    }
}

.cancel:hover {
    background-color: var(--burnt-orange);
    border-radius: 25px;
    cursor: pointer;
}

    .cancel:hover img {
        filter: brightness(100);
        z-index: 1;
    }

.validation-message {
    position: absolute;
    z-index: 1;
    padding: 6px;
    color: red;
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
}

.k-list-content {
    overflow: visible !important;
}

.k-popup {
    border-radius: 25px !important;
    border-style: none !important;
    height: fit-content !important;
    max-height: 15rem;
}

.k-animation-container.telerik-blazor {
    height: 0px !important;
}

.k-callout-n {
    top: 7px !important;
}


.k-list-item.k-focus {
    background-color: var(--light-grey);
    box-shadow: none;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel, .k-list-item.k-selected, .k-list-item.k-selected:hover {
    background-color: var(--light-blue) !important;
    color: var(--dark-grey) !important;
    box-shadow: none !important;
}

.k-list {
    border-radius: 0 0 15px 15px !important;
}
/* when browser shrinks, the Rating DatePicker under quote summary will shrink */
@media(max-width:1200px) {
    #quote-summary-datepicker #date-input.k-input-inner {
        font-size: 0.85rem !important;
    }

    #quote-summary-datepicker .k-textbox {
        height: 2.2rem;
    }

    #quote-summary-datepicker .k-button-solid-base {
        width: 2.1rem;
        height: 2.05rem;
    }
}
/*Telerik component background color when Disabled */
.k-disabled [disabled], .k-disabled {
    background-color: var(--light-grey);
    color: var(--mid-grey);
}

.k-list-md .k-list-item {
    padding: 5px 10px !important;
}
/*Animation for expand/collapse  */
.expandable-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s;
}

    .expandable-content.expanded {
        max-height: 1000px;
        opacity: 1;
        overflow: visible;
    }
/* for Alert : ensuring the transparent backdrop sits behind the alert but above the app */
.ra-alert-backdrop {
    position: fixed;
    inset: 0;
    cursor: default;
    background: transparent;
}