﻿
:root {
    --color-gray: #15212F;
    --color-blue: #25374f;
    --color-camel: #AF8C55;
    --color-camel-shl: #D8C7AC;
    --color-camel-shd: #534227;
    --color-light-brown: rgb(217,177,146);
    --color-yellow: #f0a71c;
    --color-ghostwhite: #f7f7f7;
}

.div-radius {
    border-radius: 0px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    background-color: white;
}

.div-banner-subseccion {
    background: var(--color-blue);
    height: 5px;
}

.div-seccion-pasos {
    /*border: 1px solid var(--color-gray);*/

    background-color: var(--color-gray);
    color: var(--color-ghostwhite);
}

.texto-encabezado-subseccion {
    color: var(--color-gray);
    font-family: BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-weight: 300;
    text-align: left;
}

    .texto-encabezado-subseccion span {
        font-weight: bold;
    }

.event {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 150px;
    bottom: 3px;
    left: calc(50% - 1.5px);
    content: " ";
    display: block;
    background: #3d8eb9;
}

.event.busy {
    background: #f64747;
}

.myFancyDateClassRed {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 150px;
    bottom: 3px;
    left: calc(50% - 1.5px);
    content: " ";
    display: block;
    background: red;
}

.myFancyDateClassGreen {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 150px;
    bottom: 3px;
    left: calc(50% - 1.5px);
    content: " ";
    display: block;
    background: green;
}


.myFancyDateClassYellow {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 150px;
    bottom: 3px;
    left: calc(50% - 1.5px);
    content: " ";
    display: block;
    background: yellow;
}

.myDateContainerClassRed {
    color: black !important;
    background-color: #FFC2C2 !important;
}

.myDateContainerClassGreen {
    color: black !important;
    background-color: #ADFFAD !important;
}

.myDateContainerClassYellow {
    color: black !important;
    background-color: #FFFFC2 !important;
}

/* DIV contenido de seccion */
.nota {
    border-left: .9rem solid var(--color-gray);
    border-right: 1px solid var(--color-gray);
    border-bottom: 1px solid var(--color-gray);
}


.display-custom {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2
}


/* DIV como comentario: */
div.allow {
    font-size: 18px;
    background-color: var(--color-yellow);
    padding: 20px;
    color: darkred;
    position: relative;
}

.margin {
    margin: 10px auto;
}

div::after {
    content: "";
    position: absolute;
}

div.left::after {
    border-width: 10px;
    border-color: transparent var(--color-yellow) transparent transparent;
    border-style: solid;
    top: 50%;
    left: -4.5%;
    transform: translateY(-50%);
}

div.bottom::after {
    border-width: 10px;
    border-style: solid;
    border-color: var(--color-yellow) transparent transparent transparent;
    right: 50%;
    bottom: -13%;
}

.border-radius {
    border-radius: 5px;
}

.text-align {
    text-align: center;
}

/*Checkbox*/
input[type="checkbox"] {
    zoom: 2;
}

.card-header-gray {
    background-color: #C8CCD0 !important;
    color: #687078;
}

.card-note--camel {
    max-width: 18rem;
    border-left: .9rem solid var(--color-camel) !important;
    border-right: 1px solid var(--color-camel) !important;
    border-bottom: 1px solid var(--color-camel) !important;
    border-top: 1px solid var(--color-camel) !important;
}
.card-header-camel-sh {
    background-color: var(--color-camel-shl) !important;
    color: var(--color-camel-shd);
}

.text-camel {
    color: var(--color-camel-shd) !important;
}


.module .collapse, .module .collapsing {
    height: 40px; /* [NUM_OF_LINES] x [LINE_HEIGHT] */
}

.module .collapse {
    position: relative; /* For ...'s content absolute positioning */
    display: block;
    overflow: hidden;
}

    .module .collapse:before {
        content: ' ...';
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .module .collapse.show {
        height: 20px; /* You need to reset the height when not collapsed */
    }

        .module .collapse.show:before {
            display: none; /* Of course you don't want to display ... */
        }

.module a.collapsed:after {
    content: '+ Ver más';
}

.module a:not(.collapsed):after {
    content: '- Ocultar';
}

/*ESTILO LISTA : PAPELERIA*/
.bullet-list ul {
    counter-reset: p;
    list-style: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.bullet-list p {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    margin: .5em 0;
    background: #DAD2CA;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: .3s ease-out;
}

.bullet-list p:hover {
    background: #E9E4E0;
}

.bullet-list p:hover:before {
    transform: rotate(360deg);
}

.bullet-list p:before {
    content: "";
    counter-increment: p;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: var(--color-camel);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}


.bullet-list li {
    display: block;
    position: relative;
}

.alert-nl {
    padding: 10px 10px 10px 10px;
    color: var(--color-blue);
    background-color: #959eab;
}

    .alert-nl div {
        display: block;
        padding: 10px 10px 10px 10px;
        color: var(--color-yellow);
        background-color: var(--color-blue);
        text-align:right;
    }

    .alert-nl p {
        padding: 10px 10px 10px 10px;
    }

    .alert-nl hr {
        border-top-color: #263C54
    }

    .alert-nl .alert-link {
        color: var(--color-camel-shd);
    }



