/*******************************
    Btn + modal
*******************************/

.modal-373.modal-flex.show {
    display: flex!important;
}

.modal-373.fixed-bot-right-340 {
    
    width: 358px;
    padding: 5px 9px;
    height: auto;
    left: auto;
    top: auto;
    right: 0;
    bottom: 55px;
}

body.backdrop-hidden {
    overflow: auto;
    padding-right: 0 !important;
}

body.backdrop-hidden .modal-backdrop {
    display: none;
}

/* disable pointer events and user select for all elements outside of active modal */

body:has(.modal-373.modal-373--disabled-background.show) * {
    pointer-events: none;
    user-select: none;
}

.modal-373.modal-373--disabled-background.show * {
    pointer-events: auto !important;
    user-select: all !important;
}

/* modal position top right */

.modal-373 .modal-dialog.modal-dialog-top-right {
    margin: 1rem 0rem 1rem 2rem;
}

@media (min-width: 575.92px) {
    
    .modal-373 .modal-dialog.modal-dialog-top-right {
        margin: 1rem 0rem 1rem auto;
    }
}

/* modal max-width - 600px */

.modal-373 .modal-dialog.modal-dialog-max-width-600 {
    max-width: 600px;
}

/* modal max-width - 900px */

.modal-373 .modal-dialog.modal-dialog-max-width-900 {
    max-width: 900px;
}

/* modal max-width - 767px */

.modal-373 .modal-dialog.modal-dialog-max-width-767 {
    max-width: 767px;
} 

/* btn styles for arrow that rotates */

.btn-modal-373.btn-arrow,
.btn-modal-373.btn-arrow svg path,
.btn-modal-373.btn-arrow-2 svg,
.btn-modal-373.btn-arrow-2 svg path{
    transition: 0.3s;
}

.btn-modal-373.btn-arrow,
.btn-modal-373.btn-arrow-2 svg{
    display: inline-block;
    transform: rotate(315deg);
}
.btn-modal-373.btn-arrow:hover,
.btn-modal-373.btn-arrow-2:hover svg{
    transform: rotate(360deg);
}

.btn-modal-373.btn-arrow:hover svg path {
    fill: var(--color-3);
}

/* btn-arrow 2 */

.btn-modal-373.btn-arrow-2 svg path {
    fill: var(--color-3);
}

.btn-modal-373.btn-arrow-2:hover svg path {
    fill: var(--color-2);
}

/* btn-arrow 2 alternative version with inverted colors */

.btn-modal-373.btn-arrow-2.btn-arrow-2--alt svg path {
    fill: var(--color-2);
}

.btn-modal-373.btn-arrow-2.btn-arrow-2--alt:hover svg path {
    fill: var(--color-3);
}