/* dropdown button */
.div-dropdown {
    position: relative;
    display: inline-block;
    padding: 2px;
}

.drop-btn, #role {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-14);
    font-weight: 500 !important;
}

.drop-btn::before {
    display: inline-block;
    vertical-align: .255em;
    content: "";
    width: 0; 
    height: 0; 
    border-left: .4em solid transparent;
    border-right: .4em solid transparent;
    border-top:.4em solid var(--text-color);
}

.div-dropdown:hover .drop-btn::before {
    content: "";
    border-left: .4em solid transparent;
    border-right: .4em solid transparent;
    border-top:.4em solid var(--text-color-btn);
}

.dropdown-content {
    display: none;
    position: absolute;
    /* background-color: var(--background-color); */
    background-color: #FFFFFF;
    min-width: var(--width-btn);
    border: solid var(--border) var(--text-color-discard);
    z-index: 1;
    font-size: var(--font-size-14px) !important;
}

.dropdown-content a {
    color: black;
    padding: .375rem .75rem;
    text-decoration: none;
    display: block;
}

.div-dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a:hover {
    color: var(--text-color-btn) !important;
}


.div-dropdown:hover .drop-btn {
    background-color: transparent;
}

.dropdown-content {
    right: 0;
}



/* button */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--height-btn);
    width: var(--width-btn);
    height: auto;
    font-size: var(--font-size-15px);
    border-radius: 0;
    font-weight: 500 !important;
    border-radius: var(--border-radius-btn);
}

/* .btn:hover  {
    background-color: var(--text-color-btn) !important;
    color: #FFFFFF !important;
} */

.btn-red, .btn-inverted-red.active, .btn-inverted-red:hover  {
    border: var(--border) solid var(--text-color-btn) !important;
    background-color: #FFFFFF !important;
    color: var(--text-color-btn) !important;
}

.btn-red:hover, .btn-inverted-red , .btn-red.active {
    border: var(--border) solid var(--text-color-btn) !important;
    background-color: var(--text-color-btn) !important;
    color: #FFFFFF  !important;
}

.btn-grey {
    border: var(--border) solid var(--text-color-discard) !important;
    background-color: #FFFFFF !important;
    color: var(--text-color-discard) !important;
}

.btn-grey:hover {
    background-color: var(--text-color-discard) !important;
    color: #FFFFFF !important;
}

a:hover {
    color: var(--text-color-btn);
}

.btn-add {
    margin-left: auto;
    width: var(--width-btn);
}

.btn-save, .btn-password-lost, .btn-discard {
    min-width: 110px;
}

.btn-save {
    border-color: var(--text-color-btn) !important;
    background-color: var(--text-color-btn) !important;
    color: #FFFFFF !important;
}

.btn-save:hover {
    border-color: var(--text-color-btn) !important;
    background-color: #FFFFFF !important;
    color: var(--text-color-btn) !important;
}

.btn-discard {
    margin-left: 20px;
    border-color: var(--text-color-discard) !important;
    color: var(--text-color-discard) !important;
}

.btn-discard:hover {
    background-color: var(--text-color-discard) !important;
    color: #FFFFFF !important;
}

.btn-markets {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    cursor: pointer;
    border-radius: var(--border-radius-btn);
}

.btn-icon {
    border: none !important;
    height: 32px;
    width: 32px;
    min-height: 32px;
    min-width: 32px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 6px;
    padding: 0;
}

.btn-icon:hover {
    background-color: white !important;
}

.btn-icon-edit {
    background:url(/pictures/icons/edit_64px.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    
}

.btn-icon-edit:hover {
    background:url(/pictures/icons/edit_64px_hover.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-trash {
    background:url(/pictures/icons/trash_64px.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-trash:hover {
    background:url(/pictures/icons/trash_64px_hover.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-trash-imp {
    background:url(/pictures/icons/trash_64px_imp.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-add {
    background:url(/pictures/icons/plus_64px.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-add:hover {
    background:url(/pictures/icons/plus_64px_hover.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-link {
    background:url(/pictures/icons/link_64px.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-link:hover {
    background:url(/pictures/icons/link_64px_hover.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-clear {
    background:url(/pictures/icons/erase_64px.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-icon-clear:hover {
    background:url(/pictures/icons/erase_64px_hover.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}



/* -------------  */

 /* X-Small devices (portrait phones, less than 576px) */
 @media (max-width: 575.94px) {

    .div-dropdown {
        position: relative;
        display: inline-block;
        margin-right: 0px !important;
        padding: 2px;
    }
 }