:root {
    --black-color: #000;
    --white-color: #fff;
    /* --first-color: #fcc212; */
    --dark-gray-color: #23292e;
    /* --second-color: #CAE4DB; */
    --dark-blue-color: #00303f;
    --pink-color: #dfb3ae; 
    --pink-light-color: #fff8f9;
    --dark-pink-color: #D94585;

    --white-color-10-percent: rgba(255,255,255, 0.4);
    --white-color-05-percent: rgba(255,255,255, 0.1);

    --first-color: #b0c9d2;
    --second-color: #e9e8e6;
    --third-color: #f5d1ca;
    --fourth-color: #534a3c;


    --web-work-area: 950px;
    --form-width: 650px;
    --mobile-work-area: 100%;
    --mobile-form-with: 320px;
}

@font-face {
	font-family: 'Assistant';
	src: 
		url('fonts/Assistant-Light.ttf') 
        format('opentype')
        ;
}

@font-face {
	font-family: 'Assistant';
	src: 
		url('fonts/Assistant-ExtraLight.ttf') 
        format('opentype')
        ;
    font-weight: 100;
}

@font-face {
	font-family: 'Assistant';
	src: 
		url('fonts/Assistant-Regular.ttf') 
        format('opentype')
        ;
    font-weight: 400;
}

@font-face {
	font-family: 'Assistant';
	src: 
		url('fonts/Assistant-Bold.ttf') 
        format('opentype')
        ;
    font-weight: 800;
}

@font-face {
	font-family: 'Euphoria';
	src: 
		url('fonts/EuphoriaScript-Regular.ttf') 
        format('opentype')
        ;
}

@font-face {
	font-family: 'Prata';
	src: 
		url('fonts/Prata-Regular.ttf') 
        format('opentype')
        ;
}

@font-face {
	font-family: 'RedHat';
	src: 
		url('fonts/RedHatDisplay-VariableFont_wght.ttf') 
        format('opentype')
        ;
}
@font-face {
	font-family: 'Style';
	src: 
		url('fonts/StyleScript-Regular.ttf') 
        format('opentype')
        ;
}


@font-face {
	font-family: 'Monserrat';
	src: 
		url('fonts/Montserrat-VariableFont_wght.ttf') 
        format('opentype')
        ;
}

@font-face {
	font-family: 'GreatVibes';
	src: 
		url('fonts/GreatVibes-Regular.ttf') 
        format('opentype')
        ;
}

@font-face {
	font-family: 'Parisienne';
	src: 
		url('fonts/Parisienne-Regular.ttf') 
        format('opentype')
        ;
}

html, body {
    /* overscroll-behavior-y: contain; */
    --webkit-user-select: none;
    --webkit-tap-highlight-color: transparent;
    --webkit-touch-callout: none;
}

body {
    width: 100%;
    margin: 0px;
    font-family: Assistant, Verdana;
    height: 100%;
    background: var(--white-color);
    color: var(--black-color);
}

/* NOTIFICACIONES FIJAS */

.fix-message {
	width: 500px;
	min-height: 65px;
	color: var(--black-color);
	background: var(--white-color);
	right: -500px;
	border-radius: 10px 0px 0px 10px;
    text-align: justify;
    position: fixed;
    z-index: 11;
    margin-top: 0px;
    transition: all 300ms linear;
    display: grid;
    grid-template-columns: 10% 90%;
    box-shadow: 0.5px 0.5px 2px var(--dark-gray-color);
    top: 150px;
}

.active-notif {
	right: 0px;
}

.f-icon {
	display: inline-block;
	font-size: 25px;
	color: var(--white-color);
	padding: 50% 30%;
	border-radius: 10px 0px 0px 10px;
}

.f-msg { 
	display: inline-block;
	border-left: solid 1px var(--white);
    padding: 10px;
    margin: auto 10px;
}

.f-msg div {
	display: inline-block;
}

.alert {
    background: rgba(226, 252, 83, 0.99);
}

.info {
    background: rgba(83, 183, 250, 0.99);
}

.success {
    background: rgba(58, 238, 42, 0.99);
}

.error {
    background: rgba(209, 24, 0, 0.99);
}

/* <--NOTIFICACIONES FIJAS */

/* LOADING */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

.modal-content {
    width: 100%;
    text-align: center;
    height: 100%;
    margin-top: 49vh;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      opacity: 0;
    }
}
  
/* <-- LOADING */


a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: inherit;
}

/* FORM FIELDS */

input[type=text], input[type="password"], 
input[type="date"], input[type="email"],
input[type="number"], input[type="tel"],
input[type="datetime-local"], input[type="time"],
select, textarea {
    font-size: 20px;
    font-weight: lighter;
    border: solid 1px var(--second-color);
    background: transparent;
    padding: 10px 10px;
    width: 90%; 
    color: var(--dark-gray-color);
    font-family: 'Assistant', sans-serif;  
    text-align: center;
    outline: none;
    border-radius: 5px;

}

input[type=text]:focus, input[type="password"]:focus, 
input[type="date"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="tel"]:focus,
input[type="datetime-local"]:focus,  input[type="time"]:focus,
textarea:focus {
    outline: none;
}

select {
    color: var(--black-color);
    font-weight: 400;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--dark-gray-color);
    opacity: 1; /* Firefox */
    font-weight: 100;
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--dark-gray-color);
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--dark-gray-color);
}

/* EVITA EL COLOR AZUL DEL PRELLENADO */
input:-webkit-autofill, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px var(--white-color) inset !important; 
    background-color: var(--white-color) !important;
    background-clip: content-box !important;
}

#email {
    text-transform: lowercase;
}

input[type=text]:invalid {
    font-weight: 100;
}

input[type=text]:valid {
    color: var(--black-color);
    font-weight: 400;
}

/*  <--  FORM FIELDS */

/* .main-container {
    width: 100%;
} */

.full-container {
    width: 100%;
}

.container {
    width: 100%;
    margin: 90px 0px 0px 0px;
}

.container.active {
    margin: 150px 0px 0px 0px;
}

.top-menu-container {
    width: 100%;
    height: 70px;
    position: fixed;
    padding: 20px 0px 0px 0px;
    font-weight: 100;
    font-size: 20px;
    top: 0px;
    z-index: 10;
    background: var(--first-color);
}

.main-logo {
    width: 100%;
    padding: 0px;
    text-align: center;
    cursor: pointer;
}

.main-logo img {
    width: 240px;
}

.user-menu-container {
    display: block;
    width: 100%;
    position: fixed;
    height: 0px;
    top: 90px;
    background: var(--white-color);
    color: var(--fourth-color);
} 

.user-menu-container.active {
    height: 60px;
}

.user-menu {
    width: 600px;
    display: grid;
    grid-template-columns: 33% 34% 33%;
    margin: 0px auto;
    height: 100%;
    align-content: center;
    font-size: 20px;
    box-shadow: 1px 1px 5px var(--first-color);
}

.user-element {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
}


.section-center {
    display: grid;
    grid-template-columns: 1fr;
    padding: 30px 0px;
    min-height: 450px;
}

.section-center.thin {
    min-height: 250px;
}

.section-text {
    font-size: 35px;
    padding: 10px 20px;
    align-self: center;
    font-weight: 100;
}

.section-text-container {
    /* max-width: 550px; */
    width: var(--web-work-area);
    margin: 0px auto;
}

.section-text-container.hide {
    visibility: hidden;
    opacity: 0;
    left: -1000px;
}

.section-text-container.show {
    visibility: visible;
    opacity: 1; 
    -webkit-transition: 0.5s;
    -moz-transition:  0.5.s;
    -ms-transition:  0.5.s;
    -o-transition:  0.5.s;
    transition:  0.5.s;
    /* transition: height: 1000ms ease-in-out, opacity 2500ms ease-in-out; */
    left: 0px;
}

.section-slider {
    background-color: var(--white-color-10-percent);
}

.section-image {
    padding: 10px 20px;
    align-self: center;
}
.section-image img {
    /* width: 200px; */
    max-height: 430px;
}

.section-three {
    display: grid;
    grid-template-columns: 33% 34% 33%;    
    padding: 30px 0px;
    min-height: 450px;
    margin: 0px auto;
}

.section-full {
    display: grid;
    grid-template-columns: 100%;
    padding: 30px 0px;
    text-align: center;
}

.bg-image {
    width: 100%; 
    margin: 0px;     
    background-repeat: no-repeat;
    background-size: cover;   
    /* opacity: 0.6;  */
}

.bg-init {
    background-image: url(../assets/images/boda_03.jpg);
    background-position: center center;
}

.bg-second {
    background-image: url(../assets/images/img_01.jpg);
    background-position: center center;
}

.bg-third {
    background-image: url(../assets/images/back_16.jpg);
    background-position: center center;
}


.list-steps {
    padding: 0px 0px 0px 20px;
}

.list-steps > li {
    list-style: none;
    text-align: justify;
    font-size: 30px;
    display: grid;
    grid-template-columns: 55px auto;
    width: 650px;
    margin: 0px auto;
}

.list-icon {
    text-align: center;
    font-size: 25px;
    display: flex;
    align-items: center;
    color: var(--first-color);
}

.list-text {
    padding: 0px;
}


.btn-container {
    padding: 60px 0px 60px 0px;
    text-align: center;
}

.btn-container.examples {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.btn {
    background: var(--second-color);
    padding: 15px 25px;
    border-radius: 5px;
    margin: 0px 10px;
    min-width: 180px;
    color: var(--black-color);
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
    text-align: center;
}
.btn:hover {
    background-color: transparent;
    color: var(--second-color);
    border: solid 1px var(--second-color);
}

.events-list-container {
    width: 100%;
}

.event-list-title {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
}

.event-list-table {
    /* width: 100%; */
    display: grid;
    grid-template-columns: 20% 30% 30% 20%;
    margin: 0px auto 30px auto;;
    border: solid 1px var(--first-color);
    border-radius: 10px;
    padding: 20px 10px 10px 10px;
}

.event-table-title {
    text-align: center;
    border-bottom: solid 1px var(--first-color);
    padding: 0px 0px 5px 0px;
    margin: 0px 0px 5px 0px;
}

.event-table-data {
    text-align: center;
    font-weight: 100;
}

.event-table-link {
    grid-column: 1 / span 4;
    text-align: center;
    font-weight: 100;
    padding: 5px 0px;

}

.show-event {
    font-weight: 400;
    cursor: pointer;
}

.edit-event {
    font-weight: 400;
    cursor: pointer;
}

.generic-form {
    width: var(--form-width);
    margin: 170px auto 0px auto;
    border: solid 1px var(--first-color);
    padding: 20px 0px 40px 0px;
    font-size: 20px;
    font-weight: 100;
}

.form-title {
    font-size: 40px;
    color: var(--dark-gray-color);
    font-weight: 800;
    text-align: center;
    padding: 0px 0px 15px 0px;
}

.form-subtitle {
    font-size: 30px;
    color: var(--dark-gray-color);
    text-align: center;
    font-weight: 400;
    padding: 0px 0px 10px 0px;
}

.row {
    padding: 10px;
    width: 100%;
}

.form-buttons {
    width: 100%;
    padding: 15px 0px;
    text-align: center;
}

#btn-new-acount {
    font-weight: 100;
}

.checkbox {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 10px;
    cursor: pointer;
}

.checkbox-icon {
    text-align: right;
    color: var(--dark-gray-color);    
}

.checkbox-icon.active {
    color: var(--first-color);
}

.checkbox-text {
    text-align: left;
}

.events-container {
    width: var(--web-work-area);
    margin: 0px auto;
}

.events-list-container {
    width: var(--web-work-area);
}

.event-table-link .btn {
    font-weight: 400;
}

.btn-add-new-event, .btn-show-gallery-form {
    font-size: 20px;
}

.btn-add-new-event.inactive {
    display: none;
}

.event-form.inactive {
    display: none;
}

.event-group {
    border: solid 1px var(--first-color);
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0px;
}

.firstGuest, .secondGuest {
    display: none;
}

.firstGuest.active, .secondGuest.active {
    display: block;
}

.event-section-title {
    text-align: center;
    font-size: 30px;
}

.gift-table-container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.gift-table-container.account {
    grid-template-columns: 33% auto 33%;
}

.address-container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.address-container.border-b {
    border-bottom: solid 1px var(--first-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

input#addressType, input#addressType_1 {
    font-weight: 400;
    border: none;
}

.people-container {
    width: 100%;
}

.personType, .personType_1, .personType_2 {
    display: none;
}

.personType.active, .personType_1.active, .personType_2.active {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0px;
}

input#personType, input#personType_1, input#personType_2 {
    font-weight: 400;
    border: none;
}

.confirm-container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.scheduled-container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.event-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0px;
}

.event-gallery-container {
    width: 430px;
    background: #fff;
    border-radius: 5px;
    padding: 30px;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 5%);
}

/* .event-gallery-header {

} */

.gallery-form {
    height: 167px;
    display: flex;
    cursor: pointer;
    margin: 30px 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 5px;
    border: 2px dashed var(--first-color);
}

.gallery-form i {
    font-size: 50px;
}

.gallery-row {
    margin-bottom: 10px;
    background: var(--second-color);
    list-style: none;
    padding: 15px 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gallery-row i {
    color: #6990F2;
    font-size: 30px;
}

.details span{
    font-size: 14px;
}

.content {
    width: 100%;
    margin-left: 15px;
}

.progress-area .details{
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    justify-content: space-between;
}

.progress-area .content .progress-bar{
    height: 6px;
    width: 100%;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 30px;
  }
  .content .progress-bar .progress{
    height: 100%;
    width: 0%;
    background: #6990F2;
    border-radius: inherit;
  }
  .uploaded-area{
    max-height: 232px;
    overflow-y: scroll;
  }
  .uploaded-area.onprogress{
    max-height: 150px;
  }
  .uploaded-area::-webkit-scrollbar{
    width: 0px;
  }
  .uploaded-area .content{
    display: flex;
    align-items: center;
  }
  .uploaded-area .details{
    display: flex;
    margin-left: 15px;
    flex-direction: column;
  }
  .uploaded-area .details .size{
    color: #404040;
    font-size: 11px;
  }
  .uploaded-area i.fa-check{
    font-size: 16px;
  }

  .bye-text {
    text-align: center;

  }

  .footer-event {
    font-size: 12px;
    background: var(--pink-color);
    color: var(--white-color);
    padding: 10px 0px;
  }

  .footer-text {
    font-size: 20px;
    text-align: center;
    margin: 150px 0px 0px 0px;
    color: var(--dark-gray-color);
  }

  .footer-wa {
    font-size: 20px;
    text-align: center;
    color: var(--dark-gray-color);
  }


/* GENERICOS */
.t-center {
    text-align: center;
}

.t-right {
    text-align: right;
}

.t-left {
    text-align: left;
}

.t-justify {
    text-align: justify;
}

.back-white {
    background: var(--white-color);
}

.back-black {
    background: var(--black-color);
}

.back-first {
    background: var(--first-color);
}

.back-light-gray {
    background: var(--second-color);
}

.back-dark-gray {
    background: var(--dark-gray-color);
}

.color-white {
    color: var(--white-color);
}

.color-black {
    color: var(--black-color) !important;
}

.color-yellow {
    color: var(--first-color);
}

.color-light-gray {
    color: var(--second-color);
}

.color-dark-gray {
    color: var(--dark-gray-color);
}


.f-right {
    float: right;
}

.f-left {
    float: left;
}

.margin-center {
    margin: 0px auto;
}

.f-semibold {
    font-weight: 400;
}

.f-bold {
    font-weight: 800;
}


@media only screen and (max-width:850px) { 

    .fix-message {
        width: 100vw;
    }

    .top-menu-container {
        width: 100vw;
    }

    .main-logo img { 
        width: 180px;
    }

    .container {
        width: 100%;
        margin: 90px 0px 0px 0px;
    }

    .user-menu-container {
        max-width: 100vw;
    }

    .user-menu {
        width: 100%;
    }

    .section-center {
        grid-template-columns: 100%;
    }

    .setcion-three {
        grid-template-columns: 100%;
    }

    .section-image img {
        max-height: 230px;
    }

    .section-text {
        font-size: 25px;
    }

    .list-steps {
        padding: 0px;
    }

    .list-steps > li {
        font-size: 20px;
        grid-template-columns: 40px auto;
        width: 100%;
    }
    
    .list-icon {
        font-size: 18px;
    }

    .btn {
        min-width: 150px;
        font-size: 20px;
    }

    .row {
        width: auto;
    }    

    input[type=text], input[type="password"], input[type="date"], input[type="email"], input[type="number"], 
    input[type="tel"], input[type="datetime-local"], input[type="time"], select, textarea {
        max-width: 80%;
        font-size: 18px;
    }

    .checkbox {
        grid-template-columns: 40% 60%;
    }

    .generic-form {
        width: var(--mobile-form-with);
        font-size: 18px;
    }

    .section-text-container {
        width: 100%;
    }

    .btn-container.examples {
        grid-template-columns: 50% 50%;
    }

    .btn-show-demos {
        min-width: 100px;
        font-size: 16px;
        padding: 10px 15px;
        margin: 5px;
    }


}