/*-----------------------
    BUTTONS
-----------------------*/

/* ms circle button */
.ms-circle-button-small {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    padding: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ms-circle-button {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    padding: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ms-circle-button-xl {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    padding: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ms-circle-button-2xl {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    padding: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ms mangofit button */
.btn-mangofit {
    color: #fff !important;
    border-color: var(--mangofit-color) !important;
    background-color: var(--mangofit-color) !important;
}

.btn-outline-mangofit {
    color: var(--contrast-theme-color) !important;
    border-color: var(--mangofit-color) !important;
}

.btn-outline-mangofit:hover {
    color: var(--contrast-theme-color) !important;
    background-color: var(--mangofit-color) !important;
    border-color: var(--mangofit-color) !important;
}

.btn-check:checked + .btn-outline-mangofit {
    color: #fff !important;
    background-color: var(--mangofit-color) !important;
    border-color: var(--contrast-theme-color) !important;
}

/* ms theme button */
.btn-outline-contrast-theme {
    color: var(--contrast-theme-color) !important;
    border-color: rgba(var(--contrast-theme-color-rgb), 0.2) !important;
}

.btn-outline-contrast-theme:hover {
    background-color: rgba(var(--contrast-theme-color-rgb), 0.1) !important;
}

.btn-check:checked + .btn-outline-contrast-theme {
    background-color: rgba(var(--contrast-theme-color-rgb), 0.1) !important;
}

/*-----------------------
    BORDERS
-----------------------*/
*.border-mangofit-color {
    border: var(--bs-border-width) var(--bs-border-style) var(--mangofit-color) !important;
}

.dotted-border-bottom {
    background: linear-gradient(to right, black 50%, transparent 50%);
    background-size: 3px 1px;
    background-repeat: repeat-x;
    background-position: bottom;
}

.border-contrast-theme-color {
    --bs-border-width: 1px;
    border: var(--bs-border-width) solid var(--contrast-theme-color) !important
}

/*-----------------------
    INPUT FILE PREVIEW
-----------------------*/
.input-file-preview-container {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23333' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
    border-radius: .625rem;
    --bs-bg-opacity: 0.1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
    padding: .3125rem;
    min-height: 12rem;
}

/*-----------------------
    BACKGROUND COLORS
-----------------------*/
.bg-mangofit-color {
    background-color: var(--mangofit-color) !important;
}

.bg-mangofit-color-subtle {
    background-color: rgb(var(--current-company-color-rgb), 0.5) !important;
}

.bg-gradient-color {
    background: var(--gray-gradient) !important;
}

.bg-company-color {
    background-color: rgb(var(--current-company-color-rgb)) !important;
}

.bg-current-theme-color {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--current-theme-color-rgb), var(--bs-bg-opacity)) !important;
}

.bg-current-theme-secondary-color {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--current-theme-secondary-color-rgb), var(--bs-bg-opacity)) !important;
}

.bg-contrast-theme-color {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--contrast-theme-color-rgb), var(--bs-bg-opacity)) !important;
}

/*-----------
    TEXT
------------*/
.text-mangofit-color {
    color: var(--mangofit-color) !important;
}

.text-contrast-theme-color {
    color: var(--contrast-theme-color) !important;
}

.text-current-theme-color {
    color: var(--current-theme-color) !important;
}

.truncate-text {
    max-width: 200px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.two-line-text {
    display: inline-block;
    white-space: pre-wrap;
    width: min-content;
}

/*-----------------------
    PROFILE IMAGE
-----------------------*/
.profile_image {
    object-position: center;
    object-fit: cover;
    border-radius: var(--bs-border-radius-xxl) !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.profile_image.size-150 {
    width: 150px;
    height: 150px;
}

.profile_image.size-60 {
    width: 60px;
    height: 60px;
}

/*-----------------------
    AUTOMATIC LINKS
-----------------------*/
.auto-links {
    word-break: break-word;
}

/*-----------------------
    HEIGHT SIZES
-----------------------*/
.h-30-px {
    height: 30px !important;
}

.h-50-px {
    height: 50px !important;
}

.h-75-px {
    height: 75px !important;
}

.max-h-250-px {
    max-height: 250px !important;
}

.max-h-350-px {
    max-height: 350px !important;
}

.h-450-px {
    height: 450px !important
}

.max-h-450-px {
    max-height: 450px !important;
}

/*-----------------------
    WIDTH SIZES
-----------------------*/
.w-30-px {
    width: 30px !important;
}

.w-50-px {
    width: 50px !important;
}

.w-75-px {
    width: 75px !important;
}

.max-w-200-px {
    max-width: 200px !important;
}

/*-----------------------
    MARGIN
-----------------------*/
.mt-40p {
    margin-top: 40%;
}

/*-----------------------
    LAYOUT
-----------------------*/
.layout-container {
    position: absolute;
    top: 0;
    left: 0;
    border-end-end-radius: 0;
    height: 100%;
    width: 100%;
}

/*-----------------------
    Z-INDEX
-----------------------*/
.z-1100 {
    z-index: 1100 !important;
}

.z-1056 {
    z-index: 1056 !important;
}

/*-----------------------
    CURSORS
-----------------------*/
.cursor-pointer {
    cursor: pointer;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

/*-----------------------
    IMAGE
-----------------------*/
[data-bs-theme="light"] img[data-img-color-light-theme="dark"],
[data-bs-theme="dark"] img[data-img-color-dark-theme="light"] {
    filter: invert(1);
}

/*-----------------------------------
    OL/UL LIST STYLES
------------------------------------*/
.list-style-type-disclosure-closed {
    list-style-type: disclosure-closed;
}
.list-style-type-disclosure-closed li::marker {
    color: var(--mangofit-color) !important;
}

/*-----------------------------------
    FLEXBOX LAYOUT
------------------------------------*/
.flex-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/*-----------------------------------
    HOVER
------------------------------------*/
.stateless-hoverable-item:hover,
.hoverable-container > .hoverable-item:hover,
.hoverable-container > .hoverable-item.hoverable-active,
.hoverable-container > .hoverable-item.active {
    background-color: rgba(var(--current-theme-secondary-color-rgb), var(--bs-bg-opacity)) !important;
}
[data-bs-theme="dark"] .stateless-hoverable-item:hover,
[data-bs-theme="dark"] .hoverable-container > .hoverable-item:hover,
[data-bs-theme="dark"] .hoverable-container > .hoverable-item.hoverable-active,
[data-bs-theme="dark"] .hoverable-container > .hoverable-item.active {
    --bs-bg-opacity: 0.9 !important;
}
[data-bs-theme="light"] .stateless-hoverable-item:hover,
[data-bs-theme="light"] .hoverable-container > .hoverable-item:hover,
[data-bs-theme="light"] .hoverable-container > .hoverable-item.hoverable-active,
[data-bs-theme="light"] .hoverable-container > .hoverable-item.active {
    --bs-bg-opacity: 0.5 !important;
}