@import url("invitation_general.css");

.floating-label.price{
    position: absolute;
    top: -10px;
    left: -18px;
    background-color: #f54195;
    color: white;
    padding: 5px 10px;
    font-weight: bolder;
    border-radius: 20px;
    z-index: 1;
}

#invitation-preview {


    position: relative;
    overflow: hidden; /* Opcional: evita que la imagen se salga del contenedor */

    padding: 20px;
    /*border: 1px solid #ccc; */
    margin-top: 20px;
}

#generalBackgroundImageConfig_Stage_DataSection .swiper, #EventLocations_section .swiper,
.popup-HTML_detail .swiper{ padding: 16px; }

#EventLocations_section .mapTypeSelector_container{ background-color: white; }

#InvitationTemplateSelector_Wrapper .swiper-slide{ box-shadow: none !important;}

#InvitationTemplateSelector_Wrapper .actions { padding-top: 10px; }

#InvitationTemplateSelector_Wrapper .btnSelectTemplate_container{
    border-left: 2px solid #c7c7c7;
}

img.viewTemplateDetail, img.selectTemplate{ width: 24px; }

#InvitationTemplateSelector_Container .swiper-button-next, #ProposalHotels_Container .swiper-button-prev{

    top: var(--swiper-navigation-top-offset, 60%);
}

#InvitationTemplateSelector_Container .swiper-button-next{

    top: var(--swiper-navigation-top-offset, 60%);
    right: var(--swiper-navigation-left-offset, 0%);
}

#InvitationTemplateSelector_Container .swiper-button-prev{

    top: var(--swiper-navigation-top-offset, 60%);
    left: var(--swiper-navigation-left-offset, 0%);
}

.serviceDetail p{
    height: 60px; /* Cambia 60px por el máximo de altura deseado */
    overflow: hidden; /* Oculta el contenido que exceda el área */
    text-overflow: ellipsis; /* Agrega puntos suspensivos al contenido recortado */
    text-align: justify;
    display: -webkit-box; /* Necesario para usar -webkit-line-clamp */
    -webkit-line-clamp: 3; /* Número de líneas que se mostrarán */
    -webkit-box-orient: vertical; /* Orientación del recorte */
    white-space: normal; /* Asegúrate de que el texto pueda hacer saltos de línea */
}

#template-content input:not([type=checkbox]), #template-content textarea {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit;
    width: 100% !important;
    /*text-align: center; */
    /*margin-left: 20px !important; */
}

#template-content input.clasicInput, #template-content textarea.clasicInput {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    padding: 5px;
    box-sizing: border-box;
    margin-top: 10px;
  }

#template-content img.editableItem, #template-content svg.editableItem{
    border: 2px dashed #ccc;
    padding: 10px;
}

.popup-content .swiper-slide svg{
    width: 100%;
    height: auto;
    display: block;
    max-height: 160px; /* 100%; */
}

#template-content img.decoration-frame{
    border-radius: 100%;
}

#template-content .selectedItem{ border-color: var(--main-tertiary-color); }

#template-content p.editableItem, #template-content h1.editableItem, #template-content h2.editableItem,
#template-content h3.editableItem, #template-content h4.editableItem, #template-content h5.editableItem,
#template-content h6.editableItem,
#template-content input.modernInput, #template-content textarea.modernInput {
border: 2px dashed #ccc !important; /*     border: 3px dotted #ccc; */
/*background: rgba(255, 255, 255, 0.8) !important; */
padding: 5px !important;
box-sizing: border-box !important;
margin-top: 10px !important;
height: inherit !important;
}
  

#stickyHeaderBar_GeneralConfig {
    position: fixed;
    z-index: 3;
    top: 60px; /* Justo debajo del header */
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #291d23;
    color: white;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    gap: 20px;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

#stickyHeaderBar_GeneralConfig.st_1 {
    background-color: #fec4e1;
    color: #140e0e;
}

#stickyHeaderBar_GeneralConfig.st_2 {
    background-color: #291d23;
    color: white;
}

#stickyHeaderBar_GeneralConfig.st_3 {
    background-color: #f754a5;
    color: #ffffff;
}

#stickyHeaderBar_GeneralConfig.visible {
    transform: translateY(0);
}

#stickyHeaderBar_GeneralConfig #previewInvitation, #stickyHeaderBar_GeneralConfig #publishInvitation{
    border-left: 2px solid rgb(0, 0, 0);
    padding-left: 6px;
}

#clr-picker {
    z-index: 9999 !important;
} 

#GeneralTitleTextColorPicker_inputSection .clr-field, 
#GeneralParagaphTextColorPicker_inputSection .clr-field, 
#GeneralBackgroundColorPicker_inputSection .clr-field{
    margin-left: -10px;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el texto y el input */
}

.custom-label {
    font-weight: bold; 
    color: #333; /* Color del texto personalizado */
}

.ColorPicker_input {
    width: 40px; /* Hacer el input más pequeño */
    height: 40px;
    border: none;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    opacity: 0; /* Lo oculta sin afectar el rendimiento */
}

.colorPickerInput_container{
    margin-left: -19px;
    margin-top: 0px !important;
}

.ColorPicker_container{
    /*background-color: #6ccf6c;
    border-radius: 20px; */
    padding-bottom: 20px;
}



.representativeStageIcon{

    border: 1px dashed black;
    border-radius: 50%;
    width: 40px;
}

  /* /////////////////////////////////////////////////// */

  .btnRemoveTimelineStage .remove-icon {
    font-size: 18px; /* Tamaño de la X */
    color: #fc5151; /* Color de la X */
    cursor: pointer;
    margin-right: 5px; /* Espacio entre la X y la imagen */

    /*
        font-size: 18px;
    color: white;
    background-color: red;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 50%;
    padding: 3px;
    /* margin-top: -10px !important; */
}

.btnRemoveTimelineStage .remove-icon:hover {
    color: red; /* Cambia el color al pasar el mouse */
}

.nav-tabs-custom {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd; /* Línea general debajo del tab panel */
}

.nav-tabs {
    display: flex;
    width: 100%;
    border-radius: 30px; /* Bordes redondeados del contenedor general */
}

.nav-tabs > li {
    flex: 1; /* Cada pestaña ocupará el mismo espacio horizontal */
    text-align: center;
}

.nav-tabs > li > a {
    display: block;
    padding: 10px;
    border: none;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 20px; /* Aplicar bordes redondeados a cada pestaña */
    transition: background-color 0.3s ease;
}

/* Fondo para la pestaña activa */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: #f3c4c4 !important;  /* Color de fondo para el tab activo */
    color: #000;
    border-radius: 20px; /* Borde redondeado para el tab activo */
}

/* Al pasar el ratón */
.nav-tabs > li > a:hover {
    color: #000;
    border-bottom: none; /* Eliminar borde inferior en hover */
    background-color: #e0e0e0; /* Color de fondo al hacer hover */
    border-radius: 20px; /* Mantener bordes redondeados en hover */
}


.tab-content {
    margin-top: 20px;
}



#itemsViewModeSection i.active{

    color: var(--main-primary-color);
}

#itemsViewModeSection i:hover{

    color: var(--main-primary-color);
}


.selectionItemSection_custom1 label {
    padding: 12px 30px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3C454C;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
    font-weight: bolder;
}

.selectionItemSection_custom1 label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: '';
    background-color: var(--main-tertiary-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}

.selectionItemSection_custom1 label:after {
    width: 32px;
    height: 32px;
    content: "";
    border: 2px solid #d1d7dc;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
  }
  .selectionItemSection_custom1 input:checked ~ label {
    color: #fff;
    font-weight: bolder;
  }
  .selectionItemSection_custom1 input:checked ~ label:before {
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
  }
  .selectionItemSection_custom1 input:checked ~ label:after {
    background-color: var(--yellow-color); 
    border-color: var(--yellow-color);
  }
  .selectionItemSection_custom1 input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
  }

  .floating-image {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
    border: 2px solid pink;
    padding: 5px;
    background-color: white;
}

.floating-image img {
    width: 100%; /* Aseguramos que la imagen ocupe todo el espacio disponible */
    height: 100%;
    border-radius: 50%; /* Hacemos que la imagen también sea redonda */
}



/* //////////////////////////////////////////////////////////////// */

.floating-price-circle{
    position: absolute;
    top: -20px;
    width: 50px;
    height: 50px;
    background-color: pink;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

.floating-price-circle.right{ left: 87%; }

.floating-price-circle.left{ right: 87%; }



.floating-price-tag {
    z-index: 1;
    position: absolute;
    top: -10px; 
    left: -20px;
    width: 100px;
    height: 100px
    /* Cordel agregado como pseudo-elemento */
}


.actualPrice {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: 24px;
    margin-left: 5px;
}

.oldPrice {
    z-index: 2;
    position: absolute;
    color: #95919191;
    text-decoration: line-through;
    font-size: 14px;
    text-decoration-color: #ee3939;
    margin-left: 5px;
    top: 46px;
    left: 24px;
}

.tag-hole {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: white;
    border: 2px solid black;
    border-radius: 50%;
    z-index: 2; /* Para asegurarse de que el agujero esté sobre el cordel */
}

.service-block{

    border-bottom: 2px solid #cbb4c0;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.serviceList_container p{ text-align: left; font-size: 12px !important; }

.servicePlanItem .panel-body p{ text-align: left; }

.love-heart { margin-top:20px }

.love input[type="checkbox"] {
    display: none; /* Oculta completamente el checkbox original */
}

.btnViewTemplateDetail, .btnSelectTemplate { width: 40px; }

/* Contenedor de la barra de herramientas */
#InvitationToolbar {

    position: fixed;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 6px;
    background-color: #fff;
    padding: 10px;
    border-radius: 100px;
    box-shadow: 0 4px 6px rgb(0 0 0 / 70%);
    border: 2px solid #a8658d;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    /*white-space: nowrap; */
    z-index: 1000;
    text-align: center;
    touch-action: none;
}

#InvitationImageToolbar_inputs{
    padding-left: 0px;
    padding-right: 0px;
}

#InvitationToolbar.top_position{ top:108px !important}
#InvitationToolbar.bottom_position{ bottom:0px !important}

.toolbar p { margin-bottom: 0px !important; }

/* Estilo de cada item de la toolbar */
.toolbar-item {
    display: inline-block; /* Mostrar los elementos en línea uno al lado del otro */
    text-align: center; /* Centrar los íconos y el texto dentro de cada elemento */
    cursor: pointer;
    padding-left: 4px;
    padding-right: 4px;
}

.toolbar-item img {
    width: 24px;
    height: 24px;
}

.toolbar-item p {
    font-size: 12px;
    margin-top: 5px;
    color: #333;
}

/* Más opciones */
.more-options-list {
    display: inline-block;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    white-space: nowrap;
}


/* Estilo del botón de más opciones */
.more-options {
    position: relative;
}


#template-content .control-label.for_editableItem{ display: none !important;}

.management-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 20px;
    background-color: #ffdee4;
}

.management-bar .section-name {
    /* margin-left: 10px; 
        padding-left: 10px;
    */
    font-weight: bold;
}

.management-bar button {
    margin-left: 10px;
    cursor: pointer;
}

#template-content .management-bar img{ 
    width: 34px;
    height: 34px;
    padding: 0px;
    border-radius: 20px;
    border: none;
    display: none;
}

#template-content .management-bar .actionButton, .moveHTMLItemButton{ 

    border: 2px solid #fbbdf4;
    border-radius: 20px;
    margin-left: 10px;

    font-size: 20px;
    padding-left: 6px;
    padding-right: 6px;
    color: #7f7f7f;
}


.payment-methods {
    
    margin-bottom: 16px;
}

.payment-option {
    /*width: 80px;
    height: 100px; */
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
}

.payment-option.selected{

    border-color: #ef8e9f;
    font-weight: bolder;
    background-color: #ffe0e5;
}

.payment-option img {
    width: 30px;
    height: auto;
    margin-bottom: 5px;
}


/* Card Preview Styling */
.card-preview {
    text-align: left;
    background: linear-gradient(135deg, #ff85b8, #ffbedf);
    width: 320px;
    height: 180px;
    border-radius: 15px;
    padding: 20px;
    color: white;
    font-family: 'Arial', sans-serif;
    position: relative;
    margin: 0 auto 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Card Header Styling */
.card-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-top: 4px;
}

.mastercard-icon, .card-chip img {
    width: 40px;
    height: auto;
}

.card-chip img{ margin-top: -6px; }

.mastercard-icon{ margin-top: -14px;}

.card-number {
    font-size: 15px;
    letter-spacing: 2px;
    padding-top: 10px;
}

.card-expiry {
    display: flex;
    margin-top: 10px;
}

.card-holder-info {
    display: flex;
    justify-content: space-between;
}

/* Input Styles */
#card-details input {
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    /*border: 1px solid #ddd; */
    border-radius: 5px;
    font-size: 1em;
}

#BankCard-preview{

    text-align: left !important;
    margin-bottom: 20px;
}

#BankCard-preview .brand-name{
    font-size: 16px;
    font-weight: bolder;
    margin-top: -12px;
    padding-bottom: 10px;
}

#Contactless-icon{
    width: 30px; 
    height: 30px;
    margin-top: -10px;
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

#UserBankCard_form label{

    margin-bottom: 0px;
    margin-top: 0px;
}

#UserBankCard_form label.control-label.animate{
    display: none;
}

#UserBankCard_form label.control-label.animate.is-visible{
    display: inherit ;
}

#UserBankCard_form .form-group{
    margin-bottom: 0px !important;
}

#invitation-preview .unactiveInvitationSection{

    height: 40px;
    opacity: 0.5;
    overflow: hidden;
}

#invitation-preview .management-bar-icon {
    width: 20px;
    height: 20px;
    /*margin-right: 5px; *//* Espacio entre la imagen y el texto */
    vertical-align: middle;
}

#invitation-preview .editableItem.selectedContent,
#invitation-preview .editableItem.selectedContent:focus,
#invitation-preview .editableItem.selectedContent[contenteditable="true"]:focus,
#invitation-preview .editableItem.selectedContent:focus-visible {
    outline: none !important; /* Evita el contorno azul/amarillo */
    border: 2px solid pink !important;
    box-shadow: 0 0 5px rgba(245, 104, 182, 0.5) !important;
}


#FontFamily_selectContainer .selected, #TextAlign_inputSection .selected{
    background-color: #f2cfcf;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 100%;
}

input[type="color"] {
    border-radius: 100px; /* Cambia 12px por el valor que prefieras */
    border: 1px solid #ccc; /* Opcional, para definir un borde */
    /* padding: 2px; */ /* Ajusta el padding si es necesario */
    width: 40px; /* Ajusta el ancho */
    height: 40px; /* Ajusta la altura */
    -webkit-appearance: none; /* Elimina el estilo predeterminado del navegador */
    appearance: none; /* Elimina el estilo predeterminado del navegador */
    cursor: pointer; /* Cambia el cursor al pasar sobre el input */
}

.selectedContent.effect-sepia {
    filter: sepia(1);
}

.selectedContent.effect-grayscale {
    filter: grayscale(1);
}

.selectedContent.effect-brightness {
    filter: brightness(1.5);
}

.selectedContent.effect-contrast {
    filter: contrast(2);
}

.selectedContent.effect-invert {
    filter: invert(1);
}

.selectedContent.effect-blur {
    filter: blur(5px);
}

.dashedLine{

    position: absolute;
    top: 50%;
    width: 44%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #929191, #929191 5px, transparent 5px, transparent 10px);
    transform: translateY(-50%);
}

.dashedLine.left{  left: 0; width: 22%; }

.dashedLine.right{  right: 0; width: 21%; }

#ApplyCopyAndPaste.selected{

    background-color: #ffe1e6;
    border-radius: 6px;
}
#EventLocations_section .mapTypeSelector_text{

    font-size: 16px;
    font-weight: bolder;
    padding-top: 10px;
    padding-bottom: 10px;
}
.selectableImage .checkbox-label {
    position: absolute;
    top: -15px; /* Ajustado para centrar el checkbox con el nuevo tamaño */
    left: -15px; /* Ajustado para centrar el checkbox con el nuevo tamaño */
    width: 50px; /* Nuevo tamaño más grande */
    height: 50px; /* Nuevo tamaño más grande */
    border-radius: 50%; /* Forma circular */
    background-color: #f6f6f6a3;
    border: 3px solid #ff0186; /* Ajustamos el grosor del borde para mayor equilibrio */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 1;
}

.swiper .checkbox-label .checkmark {

    width: 40px; /* Tamaño interno ajustado */
    height: 40px; /* Tamaño interno ajustado */
    background-color: transparent;
    border-radius: 50%; /* Mantener redondeado */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.result_image_title_container{

    margin-bottom: 10px;
    border-bottom: 1px solid black;
    font-weight: bolder;
    text-align: center;
}

.labeledTextImage{
    position: absolute;
    left: 20%;
    top: 100%;
    display: inline-block;
    min-width: 60px;
    cursor: grab; /* Indicador de arrastre */
    margin-top: -40px;
    margin-left: 20px;
    background-color: #f1d2d2;
    padding: 6px;
    border-radius: 20px;
    font-size: 16px;
    padding-left: 14px;

    padding-right: 20px; /* Espacio para el botón */
    word-break: break-word; /* Permitir saltos si el texto es largo */
    white-space: nowrap;
    font-weight: bolder;
}


.labeledTextImage_text {
    display: inline-block;
    line-height: 1.5;
}

.dragAndDropLabel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
}


.labeledTextImage:active {
    cursor: grabbing; /* Indicador mientras se arrastra */
}

.result_image_container img {
    user-select: none; /* Evita la selección del texto o imágenes */
    pointer-events: none; /* Desactiva el arrastre nativo de la imagen */
}

.swiper .select-image-checkbox:checked + .checkbox-label .checkmark {
    background-color: #f62276; /* Color rosa cuando está seleccionado */
    border: 3px solid #f62276; /* Ajustado el grosor del borde */
}

.swiper .select-image-checkbox:checked + .checkbox-label .checkmark::after {
    content: '✔'; /* Icono de verificación */
    color: white;
    font-size: 22px; /* Tamaño del icono ajustado */
}



.management_content_button{

    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
}

.management_content_button.add_action{
    background-color: #28a745;
}

.management_content_button.delete_action{
    background-color: rgb(226, 27, 27);
    top: -16px;
    right: -14px;
    z-index: 10;
    position: absolute;
}

.management_content_button.return_action{
    position: absolute;
    background-color: rgb(67 228 59);
    top: -10px;
    right: -12px;
    z-index: 10;
}

.management_content_button.dragAndDropLabel{
    position: absolute;
    top: -16px;
    right: -14px;
}


.deleted{ opacity: 0.4; }

.clr-field button { border-radius: 50%; }

/* //////////////////////////////////// Maps ///////////////////////////////////  */

.mapTypeSelector .mapTypeSelectorOption{
    border: 2px solid #9f9f9f;
    text-align: center;
    padding-bottom: 6px;
    border-style: dashed;
}

.mapTypeSelector .mapTypeSelectorOption.selected{
     background-color: #fee6ea;
     font-weight: bolder;
}

.mapImageTypeSelectorOption.selected{
    background-color: #ffdbe1;
    padding-top: 6px;
    padding-bottom: 6px;
    border: #c9c9c9 2px solid;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bolder;
}

.goToGoogleMapButton[data-valid="false"] { opacity: 0.7; }

#EventLocations_section .showExtenalGoogleMapButton_tooltip{
    color: #f84e4e;
    font-weight: bolder;
}

#EventLocations_section .wedding-map-section {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
  }
  
#EventLocations_section .map-container {
    position: relative;
}

  
.no-unified-color {
    background: repeating-linear-gradient(
        45deg,
        #cccccc 0px,
        #cccccc 10px,
        #ffffff 10px,
        #ffffff 20px
    ); /* Patrón de cuadros */
}
 
/****************************************** music css  */

#BackgroundMusic_section .music-container {
    text-align: center;
    padding: 15px;
    border-radius: 10px;
}

#BackgroundMusic_section .music-placeholder {
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border: 1.8px dashed grey;
}

#BackgroundMusic_section .music-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: #ff80ab;
    border-radius: 50%;
    position: relative;
}

#BackgroundMusic_section .music-icon i {
    color: white;
}

#BackgroundMusic_section .music-icon.playing {
    animation: pulse 1.5s infinite;
}

#BackgroundMusic_section .music-player.playing .wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 128, 171, 0.5);
    border-radius: 50%;
    animation: wave-animation 2s infinite;
}

#BackgroundMusic_section .wave:nth-child(2) {
    animation-delay: 0.5s;
}

#BackgroundMusic_section .wave:nth-child(3) {
    animation-delay: 1s;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes wave-animation {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}


#BackgroundMusic_section .bar {
    width: 100%;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    margin: 0 10px;
    position: relative;
}

#BackgroundMusic_section .progress {
    height: 100%;
    background: #ff80ab;
    width: 0;
    border-radius: 5px;
    transition: width 0.2s ease-in-out;
}

#BackgroundMusic_section .progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    margin-top: 10px;
    color: black;
    font-size: 14px;
    background-color: inherit;
    padding-bottom: 16px;
}

#BackgroundMusic_section .bar {
    position: relative;
    width: 70%;
    height: 4px;
    background: black;
    border-radius: 2px;
    /*overflow: hidden; */
}

#BackgroundMusic_section .progress {
    height: 100%;
    background: pink;
    width: 0;
    transition: width 0.1s linear;
}

#BackgroundMusic_section .progress-ball {
    position: absolute;
    top: -4px;
    left: 0;
    width: 12px;
    height: 12px;
    background: rgb(223, 81, 105);
    border-radius: 50%;
    transform: translateX(-50%);
    transition: left 0.1s linear;
}


#BackgroundMusic_section .song-info {
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}

#BackgroundMusic_section .song-info button {
    margin-right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

#BackgroundMusic_section .song-info span {
    font-size: 16px;
    font-weight: bold;
}


#BackgroundMusic_section #songTitle {
    display: block; /* Asegura que el elemento respete el ancho */
    width: 100%; /* Ajusta según el diseño */
    max-width: 200px; /* O el tamaño que necesites */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta el texto que desborda */
    text-overflow: ellipsis; /* Muestra los puntos suspensivos */
}

#BackgroundMusic_section{
    background-color: #ffe0e6;
}

#EventLocations_section .generalBackgroundImage_opacity_title { display: none; }

/*#rotationDial{

    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #ccc;
    position: relative;
    touch-action: none;
    user-select: none;
} */

#rotationDial {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #ccc;
  }

/*#rotationDialPunter{
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 45px;
} */

#rotationDialPunter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 40%;
    background-color: red;
    transform-origin: bottom center;
    transform: rotate(0deg);
  }

.selectedContent {

    animation: selectZoom 0.4s ease-out;
    /*  animation: bounceSelect 0.5s ease; */
    display: block !important;
    max-width: 100% !important;
    /*margin: 1rem auto !important; */
    cursor: move; /* útil en escritorio para ver que se puede arrastrar */

    touch-action: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: auto !important;          /* Asegura que reciba eventos táctiles */
    /*position: absolute !important;  */          /* Recomendado para poder mover la imagen */
    z-index: 10 !important;                   /* Asegura visibilidad si hay otros elementos */
  }

  img.selectedContent.reset {
    transition: transform 0.3s ease-in-out !important;
  }

  #template-content .decoration-image {
    position: absolute;
    width: 50%; /* Ajusta según el tamaño deseado */
    z-index: 2;
    opacity: 1;
    animation: none;
    /*opacity: 0; /* Inicialmente oculta */
    /*animation: fadeIn 2s forwards; /* Animación para el efecto de aparición */
}


@keyframes selectZoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }

  @keyframes bounceSelect {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-10px); }
    60%  { transform: translateY(5px); }
    100% { transform: translateY(0); }
  }


  /* New Radial */

  @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

:root {
  --light1: rgb(255 255 255 / 6.25%);
  --light2: rgb(255 255 255 / 12.5%);
  --light3: rgb(255 255 255 / 25%);
  --dark1: rgb(0 0 0 / 25%);
  --dark2: rgb(0 0 0 / 50%);
  --dark3: rgb(0 0 0 / 75%);
  --led: #fc8553;
  --led2: #ff4576;
  --bg: #242327;
}

#rotationDial_container_new{
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
 
}

.base-parent {
  width: 100px;
  height: 100px;
  background-color: var(--bg);
    border-radius: 100%;
}

.base {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid var(--light1);
  border-radius: 50%;
  box-shadow: inset 0 -10px 20px var(--dark3), inset 0 10px 20px var(--light2);
}

.base-notch {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 4%;
  height: 4%;
  background-color: var(--light3);
  border-radius: 999px;
  transition: all .2s ease-in;
}

.base-notch:nth-of-type(1) {
  top: 80.052%;
  left: 19.948%;
}

.base-notch:nth-of-type(2) {
  top: 63.1332%;
  left: 9.5801%;
}

.base-notch:nth-of-type(3) {
  top: 43.3515%;
  left: 8.02325%;
}

.base-notch:nth-of-type(4) {
  top: 25.0191%;
  left: 15.6168%;
}

.base-notch:nth-of-type(5) {
  top: 12.1322%;
  left: 30.7054%;
}

.base-notch:nth-of-type(6) {
  top: 7.5%;
  left: 50%;
}

.base-notch:nth-of-type(7) {
  top: 12.1322%;
  left: 69.2946%;
}

.base-notch:nth-of-type(8) {
  top: 25.0191%;
  left: 84.3832%;
}

.base-notch:nth-of-type(9) {
  top: 43.3515%;
  left: 91.9768%;
}

.base-notch:nth-of-type(10) {
  top: 63.1332%;
  left: 90.4199%;
}

.base-notch:nth-of-type(11) {
  top: 80.052%;
  left: 80.052%;
}

.knob {
  position: absolute;
  top: 15%;
  left: 15%;
  transform: rotate(-135deg);
  width: 70%;
  height: 70%;
  background-color: var(--light3);
  border-radius: 50%;
  transition: box-shadow .4s ease-in;
}

.knob-shadow {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background-image: linear-gradient(0deg, var(--dark2), var(--light3));
  box-shadow: 0 10px 20px var(--dark3), 0 -10px 20px var(--light2);
}

.knob-notch {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 6%;
  height: 15%;
  background-color: var(--light3);
  border-radius: 20px;
  transition: all .4s ease-in;
}

.knob-active {
  box-shadow: 0 0 20px -8px var(--led2);
}

.notch-active {
  background-color: var(--main-tertiary-color);
  box-shadow: 0 0 8px var(--led2);
}

.value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  text-align: center;
  color: var(--dark2);
  text-shadow: 0 0 20px var(--dark3);
  transition: all .6s ease-in;
}

.value-active {
  color: var(--main-tertiary-color);
  text-shadow: 0 0 20px var(--led2);
}

.align_option{
    height: 30px;
    width: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

.changeToSolidColor, .changeToGradientColor{
    width: 0px;
    height: 0px;
}


#Toolbar_textColorPickerInput_container {
    margin-top: -10px !important;
}

.iframeHTML_guide li{ text-align: center; }

#TextToolbarColor_showMoreOptions_container{

    margin-top: 22px;
    margin-left: 10px;
}

#TextToolbarColor_showMoreOptions_container img{
    width: 40px;
}


.other_options_Tooolbar-item_text{
    
    margin-left: -28px;
}

#AddBKSong_title {
    color: black;
}