button {
    padding: 0;
}

.modal-container {
    position: relative; /* Ensure child elements are positioned relative to this container */
}

.modal-custom {
    position: absolute; /* Position the modal absolutely within the container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050; /* Ensure the modal is on top */
    display: none; /* Initially hidden */
}

    .modal-custom.show {
        display: block; /* Show the modal when active */
    }

.modal-backdrop-custom {
    position: absolute; /* Position the backdrop absolutely within the container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1040; /* Backdrop should be behind the modal but above other content */
    display: none; /* Initially hidden */
    height:100%;
    width:100%;
}

    .modal-backdrop-custom.show {
        display: block; /* Show the backdrop when active */
    }

.custom-span {
    min-width: 5px;
    word-wrap: break-word;
    max-width: 100%;
    display: inline-block;
    white-space: pre;
}

.custom-span-cursor {
    min-width: 5px;
    cursor: pointer;
    word-wrap: break-word;
    max-width: 100%;
    display: inline-block;
    white-space: pre;
}

.media-body {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    width:100%;
}

@media (min-width: 421px) {
    .media-body {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative;
        width: 500px;
    }
}

.lyric-display {
    
}

@media (min-width: 421px) {
    .lyric-display {
        width: 380px;
    }
}

.icon-size {
    width: 74px;
}

@media (min-width: 421px) {
    .icon-size {
        width: 95px;
    }
}

.media-controls {
    align-items: center;
    /*background: #fffaee;*/
    background: #f1f1f1;
    border: 1px solid #DCDCDC;
    border-radius: 24px;
    color: #565656;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*margin: 24px;*/
    max-width: calc(100% - 24px * 2);
    padding: 24px;
    position: relative;
}

    .media-controls:after {
        border-radius: 24px;
        box-shadow: 0 2px 2px rgba(241,241,241, 0.25), 0 4px 4px rgba(241,241,241, 0.2), 0 8px 8px rgba(241,241,241, 0.15), 0 16px 16px rgba(241,241,241, 0.1), 0 24px 24px rgba(241,241,241, 0.05);
        content: '';
        height: 100%;
        left: 0;
        mix-blend-mode: multiply;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }

.media-buttons {
    display: flex;
    flex-wrap: nowrap;
}

.media-button {
    background-color: transparent;
    border: none;
    align-items: center;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@media (min-width: 421px) {
    .media-button {
        padding: 12px;
    }
}

.button-icons {
    /*background-color: #ffc399;*/
    background-color: #fff;
    border-radius: 100%;
    margin-bottom: 4px;
    margin-top: auto;
    padding: 16px;
}

.back-button .button-icons,
.skip-button .button-icons {
    background-color: #fff;
    color: #919191;
}

.rewind-button .button-icons,
.fast-forward-button .button-icons {
    background: #fff;
    color: #838383;
}

.play-button .button-icons {
    background: #fff;
    border: 1px solid #fff3eb;
    /*box-shadow: -1px 1px 1px rgba(255, 195, 153, 0.25), 1px -1px 1px rgba(255, 255, 255, 0.25), -2px 2px 2px rgba(255, 195, 153, 0.2), 2px -2px 2px rgba(255, 255, 255, 0.2), -4px 4px 4px rgba(255, 195, 153, 0.15), 4px -4px 4px rgba(255, 255, 255, 0.15), -8px 8px 8px rgba(255, 195, 153, 0.1), 8px -8px 8px rgba(255, 255, 255, 0.1), -16px 16px 16px rgba(255, 195, 153, 0.05), 16px -16px 16px rgba(255, 255, 255, 0.05);*/
    color: #f26600;
    margin-bottom: 8px;
    padding: 24px;
}

.button-text {
    margin-top: auto;
}

.media-progress {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.progress-bar-wrapper {
    background: #e0e0e0;
    border-radius: 12px;
    height: 12px;
    width: 100%;
}

.progress-bar {
    background: linear-gradient(to right, #fdd25f, #ff6b00);
    border-radius: 12px;
    box-shadow: none;
    height: 12px;
    width: 0; 
    transition: width 0.2s; 
}