/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 640px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

#addToSoldModal .modal-content {
    /* height: 90%; */
    height: 100%;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
    left: -640px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -640px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}
.modal.right.fade.show .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}
.modal-header h4 {
    font-size: 40px;
    font-weight: 700;
}


#editCollectionModal .modal-footer,
#removeFromWantedModal .modal-footer,
#removeFromSellModal .modal-footer,
#removeCollectionModal .modal-footer,
#removeFromIwatsModal .modal-footer,
#removeFromCollectionModal .modal-footer{
    position: initial;
}

.modal-footer {
    position: fixed;
    bottom: 0;
    z-index: 9999;
    display: flex;
    display: -ms-flexbox;
    width: 100%;
    background: white;
    border: none;
}

#variantsWizard .selectize-input span[data-value] {
    align-items: center;
    max-width: 92%;
}

#variantsWizard .selectize-input span[data-value] .item {
    line-height: 1.5;
}

#variantsWizard .selectize-input span[data-value] .remove  {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
}

#addToImageModal .modal-content > .modal-body {
    overflow-y: auto;
}

#checkVariantsModal .modal-footer{
    position:static;
}
#addToImageModal .modal-footer {
    right: 0;
}
.modal-header .close {
    position: absolute;
    /* top: 36px; */
    left: -55px;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 100%;
    opacity: 1;
}
.modal-header {
    border-bottom: none;
}


.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
    opacity: .75;
}
#addToCollectionModal {
    overflow: visible;
}

.modal.left .modal-content, .modal.right .modal-content {
    overflow: visible;
}
.modal-header {
    border: none;
    background-color: white;
}
.modal.left .modal-body, .modal.right .modal-body {
    padding: 15px 15px 120px;
}

.modal-footer button {
    min-width: 147px;
    height: 64px;
    padding: 10px 20px;
    margin: 0;
    font-size: 20px;
    text-transform: uppercase;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.modal-footer button.save-btn{
    border: 1px #7b22ff solid;
    background: #5D5EDE;
    color: whitesmoke;
    float: right;
}
#cancel_saved_image,
#save_edited_image {
    width: auto;
}

.modal-footer #save_edited_image {
    background-color: #5D5EDE;
    border: 1px solid #7b22ff;
    color: whitesmoke;
    white-space: nowrap;
}

.modal-footer #save_edited_image:hover {
    background-color: #4345c1;
    color: white;
}

.modal-footer button.btn-save, .btn-fetch-ebay-data {
    background: #5D5EDE;
    color: whitesmoke;
    border: 1px #7b22ff solid;
    margin-right: 12px;
}
.modal-footer button.btn-reset {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-right: 12px;
}
.modal-footer button:hover {
    background: #4345c1;
    color: white;
}

.modal form {
    overflow-y: scroll;
}
#checkVariantsModal.modal form{
    overflow:visible;
    /* overflow-y: auto;
    overflow-x: hidden; */
}
/* Share modal */

.share-popup-modal .modal-body {
    padding: 0;
}

.share-popup-modal .modal-content {
    border: 0;
}

.share-popup-modal .modal-header {
    border-bottom: 0;
}

.share-popup-modal .modal-dialog {
    max-width: 516px;
}

.share-popup-modal .modal-title {
    color: #000000;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 21px;
    padding-left: 23px;
}

.error-field {
    border: 1px solid #EC445A!important;
}

.error-text {
    color: #EC445A;
    padding-left: 2px;
}

#addToImageModal form {
    overflow-y: hidden;
}

/* Left sidebar */
@media screen and (max-width: 650px){
    .wrapper::before {
        z-index: 3;
        position: fixed;
    }
    .wrapper.qwerty #sidebar {
        z-index: 4;
        /* min-height: -webkit-fill-available; */
    }
    @supports (height: 100dvh) {
        .wrapper.qwerty #sidebar {
            height: calc(100dvh);
        }
    }
}
/* End Left sidebar */

@media only screen and (max-width : 767px) {
    .modal.left .modal-dialog, .modal.right .modal-dialog {
        width: 100%;
    }
    .sidebar-modal .modal-dialog {
       width: 100% !important;
    }

}

@media (max-width: 576px) {
    .modal-footer {
        padding: 16px 8px;
    }
}