:root {
    --body-bg-color: #f1f5f9 ;/* body */
    --body-text-color: #212b36;/* body */
    --body-image: '';/* body */
    /* Page*/
    --page-background-color: #fdfaf7;
    --page-text-color: #785e3a;
    --page-border-color: #c2b5a3;
    /*Página contra-portada (page-back-cover)*/
    --page-back-cover-image: none;
    --page-back-cover-bg-color: #e3d0b5;
    --page-back-cover-border-color: #998466;
    --page-back-cover-text-color: #785e3a;
    --page-back-cover-text-size: 20px;
    --page-back-cover-text-font-family: 'Roboto';
    /* ./ Página contra-portada*/
    /* Página de la portada (page-cover) */
    --page-cover-image: none;
    --page-cover-bg-color: #e3d0b5;
    --page-cover-text-color: #785e3a;
    --page-cover-border-color: #998466;
    --page-cover-vertical-aling: space-between;
    /* Página de la portada - imagen */
    --page-cover-image-display: block;
    --page-cover-image-aling: center;
    /* Página de la portada - titulo */
    --page-cover-title-display: block;
    --page-cover-title-aling: center;
    --page-cover-title-color: #5e5440;
    --page-cover-title-size: 32px;
    --page-cover-title-font-family: 'Roboto';
    /* Página de la portada - autor */
    --page-cover-author-display: block;
    --page-cover-author-aling: center;
    --page-cover-author-color: #5e5440;
    --page-cover-author-size: 20px;
    --page-cover-author-font-family: 'Roboto';
    /* ./ Página de la portada */
    /* Página de la portada - autor */
    --page-cover-date-display: block;
    --page-cover-date-aling: center;
    --page-cover-date-color: #5e5440;
    --page-cover-date-size: 20px;
    --page-cover-date-font-family: 'Roboto';
    /* ./ Página de la portada */
    /* Página interna */
    --page-int-bg-image: none;
    --page-int-bg-color: #fefaf2;
    --page-int-border-color: #988d79;
    /* Página interna - imagen */
    --page-int-image-aling: center;
    /* Página interna - texto */
    --page-int-text-aling: left;
    --page-int-text-color: #5e5440;
    --page-int-text-font-size: 18px;
    --page-int-text-font-family: 'Roboto';
    /* Página interna - pie */
    --page-int-footer-display: block;
    --page-int-footer-aling: right;
    --page-int-footer-color: #5e5440;
    --page-int-footer-border-top: #988d79;
    --page-int-footer-size: 16px;
    --page-int-footer-font-family: 'Roboto';
    /* ./ Página interna */
 
}

body {
    background-color: var(--body-bg-color);
    color: var(--body-text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 18px;
    padding: 1.5rem;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-image: var(--body-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page img, .page video {
    max-height: 300px;
    max-width: 100%;
    margin-bottom: 1rem;
}

.flip-book {
    display: none;
    background-size: cover;
    
}
/* Cover */
.page {
    padding: 20px;
    background-color: var(--page-background-color);
    color: var(--page-text-color);
    border: solid 1px var(--page-border-color);
    overflow: hidden;
}

.page.page-cover {
    background-color: var(--page-cover-bg-color);
    color: var(--page-cover-text-color);
    border: solid 1px var(--page-cover-border-color);
    background-image: var(--page-cover-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.page-content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: var( --page-cover-vertical-aling);
}
.cover-image{
    display: var(--page-cover-image-display);
    text-align: var(--page-cover-image-aling);
}
.cover-title{
    font-size: var(--page-cover-title-size);
    color: var(--page-cover-title-color);
    font-family: var(--page-cover-title-font-family);
    text-align: var(--page-cover-title-aling);
    display: var(--page-cover-title-display);
}
.cover-author{
    font-size: var(--page-cover-author-size);
    color: var(--page-cover-author-color);
    font-family: var(--page-cover-author-font-family);
    text-align: var(--page-cover-author-aling);
    display: var(--page-cover-author-display);
}

.cover-date{
    font-size: var(--page-cover-date-size);
    color: var(--page-cover-date-color);
    font-family: var(--page-cover-date-font-family);
    text-align: var(--page-cover-date-aling);
    display: var(--page-cover-date-display);
}

/* /. Cover */

/* Page Int */
.page.page-int{
    background-color: var(--page-int-bg-color);
    border: solid 1px var(--page-int-border-color);
    background-image: var(--page-int-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-int .page-text h1, .page-int .page-content .page-text h2, .page-int .page-content .page-text h3, .page-int .page-content .page-text h4, .page-int .page-content .page-text h5 {
    color: var(--page-int-text-color);
}

/* ./ Page Int */

/* Header*/
.page .page-content .page-footer {
    height: 30px;
}
/* ./ Header */

/* Image */
.page .page-content .page-image{
    height: 100%;
    text-align: var(--page-int-image-aling);
}
/* ./ Image */
/* Text */
.page .page-content .page-text{
    height: 100%;
    flex-grow: 1;
    font-size: var(--page-int-text-font-size);
    color: var(--page-int-text-color);
    text-align: var(--page-int-text-aling);
    font-family: var(--page-int-text-font-family);
    margin-top: 10px;
    padding-top: 10px;
    box-sizing: border-box;
    
}
/* ./ Text */
/* Footer*/
.page .page-content .page-footer {
    height: 30px;
    border-top: solid 1px var(--page-int-footer-border-top);
    font-size: var(--page-int-footer-size);
    color: var(--page-int-footer-color);
    text-align: var(--page-int-footer-aling);
    display: var(--page-int-footer-display);
}
/* ./ Footer */

/* Last cover */
.page.page-cover.page-back-cover {
    background-color: var(--page-back-cover-bg-color);
    color: var(--page-back-cover-text-color);
    border: solid 1px var(--page-back-cover-border-color);
    background-image: var(--page-back-cover-image);
    
}

.page.page-cover.page-back-cover .page-back-text {
    font-size: var(--page-back-cover-text-size);
    color: var(--page-back-cover-text-color);
    text-align: center;
    font-family: var(--page-back-cover-text-font-family);
}

/* ./ last cover */

.page .page-content .page-vertical-center {
    height: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;     
    
}

.col-form-label{
    color: inherit!important;
}

.page.--left {
    border-right: 0;
    box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.2);
}

.page.--right {
    border-left: 0;
    box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.2);
}

.page.page-cover.page-cover-top {
    box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.3),
            -2px 0 5px 2px rgba(0, 0, 0, 0.2);
}

.page.page-cover.page-cover-bottom {
    box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.3),
            10px 0 8px 0px rgba(0, 0, 0, 0.2);
}