* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    /* font-family: 'Noto Sans', sans-serif; */
    font-family: Arial, Helvetica, sans-serif;
    color: #222222;
}

body {
    display: flex;
    grid-auto-columns: minmax(400px, 1fr);
    /* grid-auto-rows: minmax(650px, 100vh); */
    grid-auto-rows: 250px;
    justify-items: center;
    align-items: start;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

/* 6°, 97%, 64% */

.zn-dsgn {
    /* width: 350px; */
    /* height: 100px; */
    transition: width 0.3s, height 0.3s;
    
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
    
    /* background-color: hsl(180, 50%, 50%); */
    background-color: rgba(228, 228, 228, 0.1);
    border: 0.5px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    box-shadow: 0 0 30px -5px rgb(136,136,136,0.1);
}

/* .zn-dsgn:active {
    width: 100%;
    z-index: 1;
    align-self: flex-start;
    justify-self: left;
    grid-row: 1 / -1;
} */



.inpt_frmt {
    /* line-height: 25px; */
    padding: 3px 5px;
    outline: 0;
    font-size: 14px;
    /* font-weight: 600; */
    width: 80%;
    border: 0.5px solid rgba(0,0,0,0.2);
}
.inpt_frmt:focus {
    border: 0.5px solid rgba(0,0,0,0.4);
}

.inpt_frmt::placeholder {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    color: rgba(0,0,0,0.6);
    opacity: 0.9;
}


/* ---- */

.bg_calendar {
    position: absolute;
    display: flex;
    background-color: #e1e1e1;
    padding: 1px;
    border-radius: 2px;

    top: 140px;
    left: 20px;

    user-select: none;

    --activ-clr: #0923C4;

    box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.12);
}
    .bg_calendar select {
        font-size: 1.1rem;
        background: transparent;
        border: 0px;
        outline: none;
    }

    .date_zone {
        display: flex;
        flex-direction: column;
        background-color: #fdfdfd;
        padding: 3px;

        /* box-shadow: 2px 0px 5px -2px rgba(0,0,0,0.3); */
        /* z-index: 100; */
    }


        /* (Year | Month) Zone */
        /* .dv_select {
            position: relative;
        } */
            .dv_select_text {
                /* max-width: 60px; */
                padding: 2px;
                font-size: 1.5rem;
            }
            .dv_select_text:hover {
                cursor: pointer; color: var(--activ-clr); box-shadow: inset 0px -2px 0px 0px var(--activ-clr); 
            }

            .dv_select_options {
                display: none;
                flex-direction: column;
                position: absolute;
                padding: 4px 4px 3px 3px;
                background-color: #ffffff;
                border: 0.5px solid rgba(0,0,0,0.2);
                outline: none;
                max-height: 80%;
                min-height: 100px;
            }

            .dv_select_input {
                padding: 1px 4px;
                outline: none;
                font-size: 1.4rem;
                text-transform: capitalize;
                width: max(100px, 100%);
            }
            #dv_select_months > .dv_select_options, #dv_select_years > .dv_select_options { width: min-content; }

            .dv_select_items {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                /* position: absolute; */

                font-size: 1.2rem;

                background-color: white;

                max-height: 50vh;

                margin: 2px 0px;
            }

                /* Scroll Style - select_item */
                    /* width */  .dv_select_items::-webkit-scrollbar { width: 6px; }
                    /* Track */  .dv_select_items::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.9); }
                    /* Handle */ .dv_select_items::-webkit-scrollbar-thumb { background: rgba(136, 136, 136, 0.8); }
                    /* Handle on hover */ .dv_select_items::-webkit-scrollbar-thumb:hover { background-color: rgba(85, 85, 85 ,0.4); }

            .select_item {
                display: none;
                padding: 2px 5px;
                border-bottom: 1px solid rgba(0,0,0,0.1);
            }
            .select_item:hover {
                cursor: pointer;
                color: var(--activ-clr);
                text-decoration: underline var(--activ-clr);
            }

            .select_item.selected {
                color: var(--activ-clr);
                font-weight: 600;
            }

            .date_picker {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 3px;
            }
                .ym_picker {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .dv_select_date_move { display: flex; }
                .dv_select_date_move:hover { cursor: pointer; color: var(--activ-clr); box-shadow: inset 0px -2px 0px 0px var(--activ-clr); }
                    /* .dv_select_date_move.date_move_before:hover { box-shadow: inset 0px -2px 0px 0px var(--activ-clr), inset 0px 2px 0px 0px var(--activ-clr), inset 2px 0px 0px 0px var(--activ-clr);}
                    .dv_select_date_move.date_move_next:hover { box-shadow: inset 0px -2px 0px 0px var(--activ-clr), inset 0px 2px 0px 0px var(--activ-clr), inset -2px 0px 0px 0px var(--activ-clr);} */

            #dv_select_months > .dv_select_input {
                text-align: right;
            }
            #dv_select_months > .dv_select_items { 
                top: 100%;
                right: 0;
            }


        /* Day Zone */
        .day_picker {
            background-color: #ffffff;
            padding: 2px;
            border: 0.5px solid rgba(0,0,0,0.2);
            border-radius: 2px;

            display: grid;
            grid-gap: 1px;
            grid-template-columns: repeat(7, 1fr);

            justify-items: center;
            align-items: center;

            font-size: 0.9rem;
        }
        .day_picker > div {
            padding: 3px;
        }
        
            .nDay_reference {
                font-weight: 600;
            }

            .nDay {
                width: 85%;
                display: flex;
                justify-content: center;
            }

            .nDay:hover {
                cursor: pointer;
                color: var(--activ-clr);
                box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
            }
        
            .nDay_difMonth {
                color: rgba(34, 34, 34, 0.5); /* #222 al 0.5 */
            }
        
        
            .nDay.selected {
                box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
                color: var(--activ-clr);
                text-decoration: underline var(--activ-clr);
            }

            .nDay.inactive {
                color: transparent;
                cursor: default;
            }.nDay.inactive:hover { box-shadow: none; }


            .dv_nowDateTime_refresh {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 3px;
                font-size: 1.5rem;
                width: 100%;
            }

            .dv_nowDateTime_refresh:hover { cursor: pointer; box-shadow: inset 0px -2px 0px 0px var(--activ-clr); }
            .dv_nowDateTime_refresh:active { box-shadow: inset 0px 0px 3px 2px rgba(0,0,0,0.2); } 

    .dv_select_date_move > i, .dv_select_time_move > i {
        font-size: 2.4rem;
    }





    /* Css Attributes */
    /* https://css-tricks.com/almanac/selectors/a/attribute/ */
    /* .bg_calendar[data-ctx_type="date-time"] */
    /* .bg_calendar[data-ctx_type="date-time" i]  ->> Insensitive*/

    /* img[alt~="person"][src*="lorem"] */
    /* [data-value]  Attribute exists */
    
    /* [data-value="foo"]  Attribute has this exact value */
    
    /* [data-value*="foo"]  Attribute value contains this value somewhere in it */
    
    /* [data-value~="foo"]  Attribute has this value in a space-separated list somewhere */
    
    /* [data-value^="foo"]  Attribute value starts with this */
    
    /* [data-value|="foo"]  Attribute value starts with this in a dash-separated list */
    
    /* [data-value$="foo"]        Attribute value ends with this */
    /* a[href$="pdf"] selects every link that ends with .pdf. */

    
    .time_zone {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fdfdfd;
        box-sizing: border-box;
        padding: 5px 6px;
        padding-bottom: 3px;
        position: relative;
    }
    /* .time_zone.date_time { box-shadow: inset 5px 0px 5px -5px rgba(0,0,0,0.3); } */
    .bg_calendar[data-ctx_type="date-time" i] > .time_zone { box-shadow: inset 5px 0px 5px -5px rgba(0,0,0,0.3); }
    

    .time_picker {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        background-color: #ffffff;
        border: 0.5px solid rgba(0,0,0,0.2);
    }

            .dv_select_time_move { display: flex; justify-content: center; width: 100%; }
            .dv_select_time_move:hover { cursor: pointer; color: var(--activ-clr); box-shadow: inset 0px -2px 0px 0px var(--activ-clr); }
                /* .dv_select_date_move.date_move_before:hover { box-shadow: inset 0px -2px 0px 0px var(--activ-clr), inset 0px 2px 0px 0px var(--activ-clr), inset 2px 0px 0px 0px var(--activ-clr);}
                .dv_select_date_move.date_move_next:hover { box-shadow: inset 0px -2px 0px 0px var(--activ-clr), inset 0px 2px 0px 0px var(--activ-clr), inset -2px 0px 0px 0px var(--activ-clr);} */
            .dv_select_time_move.date_move_before:hover { box-shadow: inset 0px 2px 0px 0px var(--activ-clr); }

            .dv_select_datetime_move > i { pointer-events: none; }
            .dv_select_datetime_move:active { box-shadow: inset 0px 0px 3px 2px rgba(0,0,0,0.2); }
            .dv_select_datetime_move.date_move_before:active { box-shadow: inset 0px 0px 3px 2px rgba(0,0,0,0.2); } 

            .dv_select_text.dv_select_time_text {
                display: flex;
                /* width: 100%; */
                justify-items: center;
                margin: 0px 3px;
            }
            
            .dv_select_text.dv_select_time_text > div:nth-child(1) {
                width: 100%;
                padding-right: 4px;
            }
            .dv_select_text.dv_select_time_text > div:nth-child(2) {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.9rem;
                box-shadow: inset 0.5px 0px 0px 0px rgba(0,0,0,0.2);
                padding: 0px 5px;
                width: 100%;
            }

        /* --- */

        .dv_select_options_spcl {
            display: none;

            box-sizing: content-box;
            width: calc(100% - 3px);
            height: 100%;
            position: absolute;
            top: 0;
            left: 3px;
            /* overflow-y: auto; */

            background-color: #f1f1f1;

        }

        /* pointer-events ->> Evita que los elementos con este estilo implementado apliquen para se objetivo de cualquier click o hover, lo que permite, en este caso, utilizar los pseudoelementos before y after para uso meramente estético y de estilo sin que interfieran con el funcionamiento direcro de los demás elementos*/
        .dv_select_options_spcl::before, .dv_select_options_spcl::after {
            content: "";
            /* background-image: linear-gradient(to bottom, rgba(255,255,255,1), transparent); */
            background-image: linear-gradient(to top, transparent, rgba(255,255,255,0.7) 65%, rgba(255,255,255,1) 100%);
            display: flex;
            height: 50%;
            width: 100%;
            top: 0;
            position: absolute;
            z-index: 100;
            pointer-events: none; 
        }
        .dv_select_options_spcl::after {
            /* background-image: linear-gradient(to top, rgba(255,255,255,1), transparent); */
            background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,0.7) 65%, rgba(255,255,255,1) 100%);
            top: auto;
            bottom: 0;
        }

        .dv_options_container {
            height: 100%;
            overflow: auto;
        }

        .dv_options {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.5rem;
            font-weight: 600;
            padding: 20px 0px;
        }

        .dv_options > .option {
            /* height: 50px; */
            flex-shrink: 0;
            display: none;
            justify-content: center;
            align-items: center;
            width: 100%;
            user-select: none;
            cursor: pointer;
            padding: 15px 0px;
        }

        .dv_options > .option:hover {
            cursor: pointer;
            color: var(--activ-clr);
            box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
        }

        .dv_options > .option.selected {
            box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
            color: var(--activ-clr);
            text-decoration: underline var(--activ-clr);
        }

        .dv_options > .option:active {
            background-color: white;
        }

            /* Scroll Style - dv_options_container */
                /* width */  .dv_options_container::-webkit-scrollbar { width: 8px; }
                /* Track */  .dv_options_container::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.9); }
                /* Handle */ .dv_options_container::-webkit-scrollbar-thumb { background: rgba(136, 136, 136, 0.8); }
                /* Handle on hover */ .dv_options_container::-webkit-scrollbar-thumb:hover { background-color: rgba(85, 85, 85 ,0.4); }



    .shwElm {
        display: flex;
    }
    .dv_options > .option.shwElm { display: flex; }