/* .home_page_links, .home_page_links *
{
    border: 1px solid red;
} */



/* ::-webkit-scrollbar {
    width: 15px;
  }
  
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  ::-webkit-scrollbar-thumb {
    background: #979a9c; 
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #c61914; 
  } */




/* ========= GLOBAL REQUIRED + is_invalid MARKERS ======================================================   */
    /* ==========================
    GLOBAL REQUIRED + is_invalid MARKERS
    (with flashing border for [is_invalid] + empty)
    ========================== */

    :root{
    --inv-color:#dc2626;
    --inv-fs:10px;
    --inv-weight:100;
    --inv-bg:none;
    --inv-pad:0px 0px;
    --inv-radius:4px;
    --inv-z:0;
    --inv-flash-duration:0.9s;
    --inv-display:block;
    }

    /* Painter host */
    *:has(> :is(input,textarea,select)[required]) {
    position:relative;
    }

    /* Painter */
    *:has(> :is(input,textarea,select)[required])::after {
    content:var(--marker-content,"");
    position:absolute;
    left:2px;
    top:50%;
    transform:translateY(-50%);
    color:var(--inv-color);
    font-size:var(--inv-fs);
    font-weight:var(--inv-weight);
    pointer-events:none;
    background:var(--inv-bg);
    padding:var(--inv-pad);
    border-radius:var(--inv-radius);
    line-height:1;
    z-index:var(--inv-z);
    display:var(--inv-display);
    }

    /* ===================================
    1) Base EMPTY → "✱"
    =================================== */
    *:has(> :is(input,textarea,select)[required]:invalid),
    *:has(> :is(input,textarea)[required]:placeholder-shown),
    *:has(> :is(input,textarea)[required][value=""]),
    *:has(> :is(input,textarea)[required][readonly][value=""]),
    *:has(> :is(input,textarea)[required][disabled][value=""]),
    *:has(> select[required][value=""]) {
    --marker-content:"✱";
    }

    /* ===================================
    2) [is_invalid] override when EMPTY → "✱ Required"
    =================================== */

    /* a) [is_invalid] wrapper */
    [is_invalid]:has(> :is(input,textarea,select)[required]:invalid),
    [is_invalid]:has(> :is(input,textarea)[required]:placeholder-shown),
    [is_invalid]:has(> :is(input,textarea)[required][value=""]),
    [is_invalid]:has(> :is(input,textarea)[required][readonly][value=""]),
    [is_invalid]:has(> :is(input,textarea)[required][disabled][value=""]),
    [is_invalid]:has(> select[required][value=""]) {
    /* --marker-content:"✱ Required"; */
    --marker-content:"✱";
    /* --inv-bg: white;
    --inv-pad:3px 3px; */
    --inv-weight:600;
    }

    /* b) [is_invalid] directly on control */
    *:has(> :is(input,textarea,select)[required][is_invalid]:invalid),
    *:has(> :is(input,textarea)[required][is_invalid]:placeholder-shown),
    *:has(> :is(input,textarea)[required][is_invalid][value=""]),
    *:has(> :is(input,textarea)[required][is_invalid][readonly][value=""]),
    *:has(> :is(input,textarea)[required][is_invalid][disabled][value=""]),
    *:has(> select[required][is_invalid][value=""]) {
    /* --marker-content:"✱ Required"; */
    --marker-content:"✱";
    /* --inv-bg: white;
    --inv-pad:3px 3px; */
    --inv-weight:600;
    }

    /* ===================================
    3) Flash border on [is_invalid] + empty
    =================================== */

    /* (optional) ensure duration var exists */

    /* Flash animation for borders */
    @keyframes invalid-flash {
    0%, 100% { outline-color: transparent; box-shadow:none; }
    50% { outline-color: var(--inv-color); box-shadow: inset 0 0 0 2px var(--inv-color); }
    }
    /* When parent has [is_invalid] and the child required field is empty */
    [is_invalid]:has(> :is(input,textarea,select)[required]:where(:placeholder-shown,[value=""],:invalid,[readonly][value=""],[disabled][value=""])) 
    > :is(input,textarea,select) {
    animation: invalid-flash var(--inv-flash-duration) ease-in-out infinite;
    border-color: var(--inv-color);
    outline: 2px solid var(--inv-color);
    border-radius: var(--inv-radius);
    }

    /* Also when [is_invalid] is directly on the control itself */
    :where(input[required][is_invalid]:where(:placeholder-shown,[value=""],:invalid,[readonly][value=""],[disabled][value=""]),
        textarea[required][is_invalid]:where(:placeholder-shown,[value=""],:invalid,[readonly][value=""],[disabled][value=""]),
        select[required][is_invalid]:where(:invalid,[value=""])) {
    animation: invalid-flash var(--inv-flash-duration) ease-in-out infinite;
    border-color: var(--inv-color);
    outline: 2px solid var(--inv-color);
    border-radius: var(--inv-radius);
    }

    /* Stop flash when field filled / valid */
    [is_invalid]:has(> :is(input,textarea,select)[required]:not(:placeholder-shown):not([value=""]):not(:invalid)) 
    > :is(input,textarea,select),
    :where(input[required][is_invalid]:not(:placeholder-shown):not([value=""]):not(:invalid)),
    :where(textarea[required][is_invalid]:not(:placeholder-shown):not([value=""]):not(:invalid)),
    :where(select[required][is_invalid]:not(:invalid):not([value=""])) {
    animation:none;
    outline:none;
    }


    @keyframes invalid-shadow-flash {
    0%, 100% { box-shadow: none; }
    50%      { box-shadow: inset 0 0 0 2px var(--inv-color); }
    }

    /* Inputs & textareas: empty conditions include placeholder-shown, "", invalid, readonly/disabled "" */
    label:has(> :is(input,textarea)[required][is_invalid]:where(
    :placeholder-shown,
    [value=""],
    :invalid,
    [readonly][value=""],
    [disabled][value=""]
    )),
    /* Selects: no placeholder-shown; use :invalid or value="" */
    label:has(> select[required][is_invalid]:where(:invalid, [value=""])) {
    animation: invalid-shadow-flash var(--inv-flash-duration) ease-in-out infinite;
    border-radius: var(--inv-radius);
    }

    /* (Optional explicit stop — not strictly needed because the rule above stops matching when filled) */
    label:has(> :is(input,textarea,select)[required][is_invalid]:where(
    :not(:invalid):not(:placeholder-shown):not([value=""])
    )) {
    animation: none;
    box-shadow: none;
    }


    /* ===================================
    4) HIDE marker when FILLED
    =================================== */
    *:has(> :is(input,textarea,select)[required]):not(
    :has(> :is(input,textarea,select)[required]:invalid),
    :has(> :is(input,textarea)[required]:placeholder-shown),
    :has(> :is(input,textarea)[required][value=""]),
    :has(> :is(input,textarea)[required][readonly][value=""]),
    :has(> :is(input,textarea)[required][disabled][value=""]),
    :has(> select[required][value=""])
    ){
    --marker-content:"";
    --inv-display:none;
    }

    /* ===================================
    5) Optional opt-out
    =================================== */
    [is_invalid="false"],
    *:has(> [is_invalid="false"]) {
    --marker-content:"";
    --inv-display:none;
    }
/* ========= GLOBAL REQUIRED + is_invalid MARKERS ======================================================   */

















































.ib
{
    display: inline-block !important;
}


input[type="text"][password]
{
    -webkit-text-security: disc;
    text-security: disc;
}


.hr_div_inline__wrapper
{
    display:flex;
    flex-direction:row;
    align-items: center;
}
.hr_div_inline__hr
{
    flex-grow:1;
    height: 2px;
    background-color: #9f9f9f;
}
.hr_div_inline__div
{ flex-grow:0; }




/* ========================================= */
/* FILE Upload */
    div[uploaded_file=view]
    {
        text-align:left; 
        cursor: pointer; 
        padding: 5px;
        min-width: 250px;
    }

    div[uploaded_file=view]:hover
    {
        background-color: lightgray;
    }



[file_area]
{
    display: inline-block;
}

[file_area] label 
{
    display: inline-block;
    position: relative;
}

[file_area] label input[type="file"] 
{
    display: none;
    visibility: hidden;
}
    
[file_area] label div 
{
    padding: 4px 40px;
    background-color: lightgray;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    margin: 0px;
}

[file_area] label div:hover,
[file_area] label div.dragover
{
    background-color: gray;
    color: white;
}

[file_area] [upload_info],
[file_area] [files_list]
{
    position: relative;
    display: inline-block;
    padding: 4px 8px;
    cursor: pointer;
    background-color: lightgray;
    border-radius: 4px;
    font-size: 14px;
    margin: 0px;
}

#upload_info_text
{
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: wheat;
    border-radius: 4px;
    padding: 4px;
    width: 400px;
}
#upload_info_text [uit_close]
{
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 4px 6px;
    background-color: gray;
    color: white;
    font-weight: bold;
    cursor: pointer;
}



/* FILE Upload */
/* ========================================= */

.div_prevent_highlight
{
    /* prevent highlight */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */    
    /* prevent highlight */    
}

.home_page_links
{
    display: inline-block;
    margin: 10px;
    box-shadow: var(--box-shadow_1);
    background-color: white;
    vertical-align: middle;

    /* border-radius: 50%; */
}

.home_page_links:hover
{ box-shadow: var(--box-shadow_2); }

.home_page_links > a
{
    display: flex;
    justify-content: center;
    align-items: center; 

    width: 250px;
    height: 250px;
}

.home_page_links_img
{
    width: 130px; 
    height: 130px;
}


/* #groups_info > div
{
    padding: 20px 20px;
} */

/* #groups_info, #groups_info *
{ border: 1px solid red; } */

.div_tr
{
    max-width: 320px;
    border-radius: 50px;
    box-shadow: var(--box-shadow_2);
    display: inline-block;
    white-space: nowrap;
    /* padding: 7px 10px; */
}

.div_tr > div
{ 
    display: inline-block; 
    margin-left: 15px;
    margin-right: 15px;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
}

.multi_dd_select
{
    display: inline-flex; 
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: var(--box-shadow_2);
    white-space: nowrap;
    padding: 0px;
    margin: 0px;
    
    /* max-width: 98%; */
    width: 200px;
    min-width: 200px;
    max-width: 200px;

    align-items: center;
    font-size: 12px;
    overflow: hidden;

    background: white;
}
.multi_dd_select [multi_dd_data]
{
    position: relative;
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
    /* max-width: calc(100% - 70px); */
    overflow: hidden;
}
.multi_dd_select [multi_dd_data]:hover
{
    z-index: 1000;
    position: absolute;
    padding: 5px 15px;
    margin-left: 0px;
    border-radius: 50px;
    background-color: #abbfff;
}

.multi_dd_select [multi_dd_img]
{
    margin-left: auto;
    margin-right: 15px;
    float: right;
}


/* .input_flex_container, .input_flex_container *
{ border: 1px solid red; } */

.input_flex_container
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    width: 90%;
    margin: 0 auto;
}



[call_popup]:hover, [call_edit]:hover
{ color: var(--red_hover); }




.tr_del, [status="delete"]
{ box-shadow: inset 0 0 10px #ffabab; }

.tr_add, [status="insert"]
{ box-shadow: inset 0 0 10px #c6ffab; }

.tr_edit, [status="update"]
{ box-shadow: inset 0 0 10px #abbfff; }


h2
{ 
    text-align: center; 
    color: var(--dark_gray);
}


/* .not_active_a
{ color: #979a9c; } */

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

a 
{ 
    color: black; 
    /* display: inline-block; */
}

a:hover
{ color: var(--red_hover); }

[a_link]:hover, [a_link]:hover a
{ 
    color: var(--red_hover);
    cursor: pointer; 
}



.div_two_columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }



.all_on:hover
{ cursor: pointer; }

.inline
{display: inline-block;}


#logout
{
    width: 150px;
    background-color: lightcoral;
    display: inline-block;
    padding: 10px;
}

#logout:hover
{
    cursor: pointer;
}



.menu_bar
{
	background: #fff;
    box-shadow: var(--box-shadow_1);
    text-align: center;
    margin-bottom: 2px;
}

.menu_bar_pu
{
	background: #fff;
    box-shadow: var(--box-shadow_4);
    text-align: center;
    margin-bottom: 5px;
}


#background_cover
{
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color:rgba(192,192,192,0.5);
    height: 100vh; /* For 100% screen height */
    width:  100vw; /* For 100% screen width */
    /* display: none; */
    visibility: hidden;
    /* visibility: visible; */
}

h1 {
    font-size: 32px;
	color: var(--dark_gray);
	text-align: center;
    font-weight: normal;
}

.padding_margin_0
{
    padding: 0px;
    margin: 0px;
}


input:focus,
select:focus,
textarea:focus,
button:focus,
datalist:focus
{
    outline: 0 none;
    box-shadow: var(--box-shadow_2);

/* 
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none; */
}

input:invalid,
select:invalid,
textarea:invalid,
button:invalid,
datalist:invalid
{
    outline: 0 none;
    box-shadow: none;
}

input,
select,
textarea,
button,
datalist
{
    outline: 0 none;
    padding: 4px;
    border: 1px solid var(--shadow);
    border-radius: 3px;
    font-size: 14px;
}


.input_color
{
    padding: 0px;
    height: 28px !important;
    border: 2px solid var(--shadow);
}


.input_color:hover
{ cursor: pointer; }


.input_block_1
{ 
    /* border: 1px solid red; */

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

.input_block_1,
.input_block_1 label,
.input_block_1 input,
.input_block_1 select
{ 
    display: inline-block; 
}


.input_block_1 input, .input_block_1 select,
.input_block_2 input, .input_block_2 select
{ width: 300px; }


.input_block_1 > label, .input_block_2 > label, .input_block_2 > [label]
{
    font-size: 14px;
    color: var(--light_gray);
    margin-right: 10px;
}

.input_block_2 > [label]
{
    width: 140px; 
    display: inline-block; 
    text-align: right !important;
}

.input_block_2
{
    text-align: left;
}


.input_required
{
   box-shadow: 0 0 5px 1px red !important;
}

.fixed 
{
   position: fixed;
   top: 0;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}



.label_text
{
    color: var(--light_gray);
}

.label_text_2
{
    font-size: 14px;
    color: black;
    font-weight: bolder;
    padding: 3px 0px;
}




.on_hover_bounce
{
 cursor: pointer;
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.on_hover_bounce:hover, .on_hover_bounce:focus, .on_hover_bounce:active
{
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
 -webkit-transition-timing-function: cubic-bezier(0.47, -0.36);
 transition-timing-function: cubic-bezier(0.47, -0.36);
}

.on_hover_bounce_rotate_180
{
 cursor: pointer;
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-transition-duration: 0.5s;
 transition-duration: 0.5s;
 transform: rotate(180deg);
}

.on_hover_bounce_rotate_180:hover, .on_hover_bounce_rotate_180:focus, .on_hover_bounce_rotate_180:active 
{
 -webkit-transform: scale(1.2);
 transform: scale(1.2) rotate(180deg);
 -webkit-transition-timing-function: cubic-bezier(0.47, -0.36);
 transition-timing-function: cubic-bezier(0.47, -0.36);
}







.btn_next_prev
{
    cursor: pointer; 
    position: absolute; 
    top: 50vh; 
    box-shadow: var(--box-shadow_2); 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    transition-duration: 0.2s;
}

.btn_next_prev:hover
{
    box-shadow: var(--box-shadow_3);  
    top: 49.5vh;
    height: 60px; 
    width: 60px; 
}




.button_icon_100
{
	width: 100px;
	height: 100px;
	vertical-align:middle;
}

.button_icon_32
{
	width: 32px;
	height: 32px;
	vertical-align:middle;
}

.button_icon
{
	width: 24px;
	height: 24px;
	vertical-align:middle;
}

.button_icon_absolute
{
	/* position: absolute;
	top: 50%; left: 10%;
    transform: translate(-50%,-50%); */
    
	width: 24px;
	/* height: 24px; */
	vertical-align:middle;
}






.button_gray
{
    background: var(--shadow);
    color: var(--light_gray);
    text-decoration: none;
    padding: 4px 18px;
	margin: 0px 7px 0px 7px;
    border-radius: 3px;
    font-size: 15px/18px;
	font-weight: normal !important;
    text-shadow: 1px 1px rgba(0,0,0,0.2);
    display: inline-block;
    text-align: center;    
    display: inline-block;

}
.button_gray:hover
{ cursor: pointer; }

.button, .button_with_icon
{
    background: #e2211c;
    color: #fff;
    text-decoration: none;
    padding: 4px 18px;
	margin: 0px 7px 0px 7px;
    border-radius: 3px;
    font-size: 15px/18px;
	font-weight: bold;
    text-shadow: 1px 1px rgba(0,0,0,0.2);
    border: 1px solid #e2211c;
    display: inline-block;
    text-align: center;
}

.button_slim
{
    padding: 5px 15px;
	margin: 3px;    
}


.button_with_icon
{
    height: 32px;
}


.button:hover{
    background: #c61914;
}
.button:hover, .button_with_icon:hover 
{
    cursor: pointer;
}


.sub_button 
{
    background: #fff;
    color: #e2211c;
    text-decoration: none;
    padding: 4px 18px;
	margin: 0 7px 0 7px;
    border-radius: 3px;
    font-size: 15px/18px;
	font-weight: bold;
    border: 1px solid #e2211c;
    display: inline-block;
    text-align: center;
}

.sub_button:hover 
{
    color: #c61914;
    border: 1px solid #c61914;
    cursor: pointer;
}

.main_border
{
    border-radius: 3px;
    border: var(--box-border);
}


.pen
{
    pointer-events: none;
}





@media only screen and (max-width:720px), (max-device-width : 720px) /* desktop and mobile orientation: portrait */
{ 

    .home_page_links
    {
        display: inline-block;
        margin: 5px;
        box-shadow: var(--box-shadow_1);
    }
    
    .home_page_links > a
    {
        width: 150px;
        height: 150px;
    }

    .home_page_links_img
    {
        width: 80px; 
        height: 80px;
    }



}

@media (min-width:720px) and (max-width:1200px) and (min-device-width : 720px) /* desktop and mobile orientation: landscape */
{ 
   
}

@media (min-width:1200px) /* all other */
{ 

}