:root {
/* --text: hsl(from var(--main) h s 60%)!important;
--border:hsl(from var(--main) h s 60%)!important;
--border-table:hsl(from var(--main) h s 50%)!important;
--table:hsl(from var(--main) h s 45%)!important;
--background:#5cbdd8;
--icons:#b6d2e2;
--top-bottom:#69aac5;
--main:#649fc0;
--school_bar: var(--act-icon);
--green-icon:hsl(from var(--main) h s 26%);
--prog-bar: hsl(from var(--main) h s 40%);
--hr-bar: hsl(from var(--maim) h s 50%);
--placeholder:gray !important;
--bs-border-radius:10px; */
--activated:#1ad4df;
--color-1:#5c8aa3;
--color-2:#b6d2e2;
--color-3:aliceblue;
text-underline-offset: 5px;
}

h1,h2,h3,h4,h5,h6{
    margin:0px!important;
}



/*Background & Text Color*/
html,body,card-top,car-bottom,table,input,.btn{
line-height: 2 !important;
}

/* html{
background-color:black;
}

body{
    background-color: white;
    border-radius: 20px 20px 0 0;
}
 */

*,.text-muted{
color:var(--color-1) !important;
}


html{
overflow-y: scroll;
-ms-overflow-style: none;  /* Internet Explorer and Edge */
scrollbar-width: none;  /* Firefox */
}
::-webkit-scrollbar {
    display: none;
}



#stretcher {
height: 600px;
background: #dedede;
}

@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}


html,body,main,.form-control {
/* This is for Footer taking space */
/* font-family: 'Indie Flower', cursive; */
/* font-family: 'Mulish', sans-serif !important; */
/*text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); */
/* font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; */
/* font-family: "Magnetic Pro","HeiTi SC Light","Microsoft YaHei",sans-serif; */
scroll-behavior: smooth;
font-size: clamp( 16px, 3vw + 0.5rem, 18px )!important;
font-family: 'Mali', cursive;
font-weight: 500;
height: auto;
margin:0;
}

/* .datepicker-input{
    font-size: clamp( 10px, 3vw + 0.5rem, 12px )!important;
    } */
    
.memo{
        
font-size: clamp( 14px, 3vw + 0.5rem, 14px )!important;
}


/* h1{
    font-size: clamp( 38px, 3vw + 0.5rem, 40px );
} */

#motto{
font-size: 14px;
}
#faq button{
font-size:16px;

}
#faq a{
text-decoration:underline;
}
#faq p{
margin-bottom: 2px;
}
#faq .accordion-button{
padding-top: 5px;
padding-bottom: 5px;
}

#faq li{
padding-bottom: 10px;
padding-inline-start: 10px;
}



.table>:not(caption)>*>*{
background-color: inherit;
}

/* HTMLCALENDAR */
.sab,.dom{
display:none;
}
/* #datenow>span,#searchBarDiv>span{
background-color:aliceblue;
} */

#searchBarDiv,#datenow{
position: relative;
/* background-color: var(--background); */
}



/* div:has(> input):not(.dbdp) {
padding-left: 20px;
padding-right: 20px;
} */

.horizontal>div{

padding: 0px !important;

}





.table>:not(caption)>*>* {
border:none;
}



#table-activity{
border:2px solid blue;
}


/* Reset Bootstrap .progress class border */
.progress{
border-radius:0px;
}

.progress_bar{
transition: width 0.6s ease;
-moz-transition:width 0.6s ease;
-ms-transition:width 0.6s ease;
-webkit-transition:width 0.6s ease;
line-height:35px;
width:0px;
}


[id*="asknappy"]{
color:red!important;
}


[id*="_memo_"] span::before{
content:'outgoing_mail'
}

.activated[id*="_memo_"] span::before{
content:'notifications_active';
color: var(--activated);
}

.activated[id*="asknappy"] span{
/* background-color: white !important; */
color:var(--activated)!important;
}

[id*="calendar"] , td[id*="asknappy"] span, a[id*="memo"] span{
/* background-color: #cc306e; */

padding:8px;
}

.calendar_month_btn {
border-bottom-right-radius: 10px;
/* background-color: var(--border-table); *//* var(--prog-bar); *//* hsl(from var(--main) h s 30%)!important; */
}
.memo-btn {
border-bottom-left-radius: 10px;
/* background-color: var(--border-table) *//* var(--prog-bar); *//* hsl(from var(--main) h s 30%)!important; */

}



.monthly.activated{
background-color:hsl(from var(--main) h s 40%)!important;
}
.activated span{
color: var(--activated)!important;
}

/* td:has( div >.activated){
    background-color: #20c997;
} */

.toast-header strong{
color:grey!important;
}

.act_space:not([id*="asknappy"],[id*="absence"],.monthly){
 /*border:1px solid var(--border); */
    /*border-radius: 10px;*/
overflow: hidden;
}


a,
a:focus,
a:hover {
/*font-weight: 600;*/
text-decoration: none;
cursor: pointer;
}
form.language a{
color: var(--text);

}

input{
font-family: 'Raleway', sans-serif !important;
}


.datepicker-cell.today:not(.selected){
background-color: initial !important;
border:2px solid#20c997;
}

.today-button {
background-color: #20c997!important;
border-color: hsl(from var(--act-icon) h s 80%)!important;
;

}

.selected{
background-color: #20c997!important;
}

.datepicker-controls .btn{
border:0px!important;
}
.datepicker-picker,.datepicker-footer,.datepicker-controls button:not(.today-button){
border-radius:10px;
}
.datepicker{
z-index:4000;
font-size: 14px;
font-family: 'Mali', cursive;

}
.datepicker-dropdown{
left: 50% !important;
transform: translate(-50%, 0%);
}

.datepicker.dow, .datepicker-cell{
color:black !important;
}

.datepicker-cell.disabled{
color:red !important;
}

.datepicker-cell.outofdate,.datepicker-cell.disabled.weekend{
color:#bababa !important;
}

.days-of-week{

color:black;

}

.day.disabled{
position:relative ;
}


/* Striketrough line */ 
.day.disabled:not(.outofdate):before{

position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;

-webkit-transform:rotate(-0deg);
-moz-transform:rotate(-0deg);
-ms-transform:rotate(-0deg);
-o-transform:rotate(-0deg);
transform:rotate(-0deg);
}



.accordion-button,.accordion-button:not(.collapsed),.accordion-button:focus, .accordion-body,.accordion-item{

background-color: inherit; /* var(--bottomtopcard)!important; */
box-shadow:none;
/* color:var(--text); */
/*fill:red;
 */
} 




.accordion-item{
border:0;
}


.bar{

background-color: var(--bar);
}



.navbar-nav{
padding-right:20px;
flex-direction: row;
}



.dbdp{

cursor:pointer;

}


.navbar-toggler{
position:absolute;
top:42px; 
left: 50%;
transform: translateX(-50%);
}

.navbar-brand,.navbar-brand:focus,.navbar-brand:hover
{

padding-left: 1em;
font-family: "Cherry Bomb One", system-ui;/* 'Indie Flower', cursive; */
color:var(--act);
font-size:28px;
font-weight: 400;
letter-spacing:5px;
margin-right: -5px;/*FIX THE ISSUE OF ADDING EXTRA SPACE ON THE RIGHT BECAUSE OF LETTER-SPACING*/
line-height: 40px;
z-index:1023;
/* font-size:10px; */
/* text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); */
}


.form-text{
color:inherit !important;
text-align:left !important;
}
/* reserve some space for the embedded invalid-form */
.form-feedback {
margin-top: 0.25rem;
min-height: 1.25em;
}

/* margin-top is applied by .form-feedback, don' add it again */
.form-feedback .invalid-feedback {
margin-top:0px;
}


.collapse.show,.collapsing{
position:absolute;
width:100%;
top:75px;
 /*height: 2000px!important; */
background-color:#333;

}


/* Form fix misalignment */
*,
*::before,
*::after {
box-sizing: border-box;
}


#qr_code{
border-radius: 25px !important;

}


h1 {
font-weight: 900;
}


/*DROPDOWN ICON */
.dropdown-toggle::after {
position:absolute;
color:red;
margin-top: 1.2em;
margin-right:0.2em
/* display:none; */
}
.dropdown-menu{
    z-index:2000;
    min-width: 280px;
    transform: translate3d(0px, 38px, 0px)!important;
}
.transform-1{
transform: translate3d(-28px, 38px, 0px)!important;
}
.transform-2{
transform: translate3d(-28px, 38px, 0px)!important;
}


.dropdown-divider{
background-color: var(--color-1);
margin:0;
}

.dropdown-item.active,a.active {
border-radius:20px;
background-color:var(--color-2)!important;
}


.dropdown-menu>li.dropdown-item{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.dropdown-item,.dropdown-header,.dropdown-item:hover{
color:inherit;
background-color: inherit;
cursor: pointer;
margin:0px 0px;
}


.form-check-input.activate{
cursor: pointer !important;
font-size: 20px;
}

.form-check-input:checked,.form-check-input:focus{
background-color: var(--background);
border-color:var(--background);
box-shadow: none;

}


.nav-item .nav-link,#webpush-icon,#dropdownMenuButton1 {
/* font-weight: 400; */
letter-spacing: 1px;
/* font-size: 16px !important; */

}


.nav-link.active::after{
content:"*";
}


#school-bar ~ a{
width:50px;

}


.nav-link.active{
color: white !important;
}


.table{
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
color:var(--text);
background: none;
}

tr{
    border:none;
}

.haselement{
    display: table-row;
}

.hasnoelement{
    display: none;
}


.table-memo{
    border:0px dashed;
    border-radius: 20px;
    border-collapse: separate;
}

.table-memo td{
    border:1px dashed;
    border-radius: 8px;
}
.table-memo thead{
    border:1px solid;
}
table.month{

border-collapse: separate !important; 
border-spacing:0px 0px !important;
/* background-color: var(--background); */

}
table.month td {
/* font-size :12px !important; */
/*min-width: 50px !important;
width: 100px !important;
height: 120px !important;
 */
border-radius: 25px !important;
border:1px dashed var(--color-1);
padding: 10px 0px;

}

.monthly{
width:10px;
min-width:45px;
border:1px solid white;
border-radius: 10px;
/* font-size: 18px; */


}

th.month{
font-size:large;
padding-bottom:0px;
}

.monthly.activated{

background-color: white;

}


/* 
.new_student,.tbackground--background{
background-color: #414172 !important;
/* color:white; */
.new_student{
    /* border:1px solid black; */
    border-radius: 10px;
    background-color: aliceblue;
    border:1px dashed;
}


.activator,.edit,.delete{
background-color:var(--color-2);
}

.new_student tbody,.new_student th{

border-bottom-color:#b6b6b8;
letter-spacing: 1px;
font-weight: 600;
}

.new_student th{

color:var(--text)

}
.card-image{
position:absolute!important;
margin-bottom:12px;
}

.card-name{
height:50px;
/* margin-right:20px; */
border-radius:0px 0px 0px 0px;
border-width:0px 0px 0px 0px;
border-color:#8f8aa5;
border-style:solid;
background-color: var(--card);
color:#c1bebe;
/* border-radius: 20px; */

}


/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
display: none !important;
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
 /* -ms-overflow-style: none;*/ /* IE and Edge */
scrollbar-width: none;/* Firefox */
}



ul.nav.navbar-nav li a:link {
line-height: 32px; 
}



#main_bar .dropdown-menu {
position: absolute;
}




/* .profile::before{
content:'';
background-image:url('https://8000-thebiondgithub-schoolly-ff630s7o7d6.ws-eu118.gitpod.io/static/core/black&white/children-1941336_640.png');
background-repeat:repeat-x;
background-size:cover;
position: absolute;
overflow: hidden;
margin-left: 0px;
margin-right:0px;
height:340px;
top:0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
} */

.bar-tip{
color:var(--card-text);
font-size: 0.9rem;
}

.rounded-circle{
 /*border-radius:6px !important; */
height:calc(70px + 0.390625vw);
width:calc(75px + 0.390625vw);
/*filter: blur(6px);
-webkit-filter: blur(6px); */
background:var(--color-3);
/* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

.profile-img{
border-radius: 20px;
width: 30px;
}

label[for='id_date']{
display: none;
}

#id_date{
display:none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color:var(--color-1)!important;
}

::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--color-1)!important;
}

/* Internet Explorer 10-11 */
::-ms-input-placeholder {
color: var(--color-1)!important;
}

/* Mozzilla */
::state(--moz-placeholder) { 
color: var(--color-1)!important;
}

textarea.form-control {
outline:var(--background) 1px solid !important;
text-align: start;
padding:0;
border:0px;
}



#id_img_label{ /*this to style all buttons for filefiled / imagefield */
display:none;
}


/*form field errors*/
.invalid-feedback{
position:relative;
text-align: center;
color:var(--brand-text)!important;
margin-top: -0px;
/* z-index:-1 !important; */
}


.btn{
background-color: var(--color-1) !important;
color:var(--color-2)!important;
}
.btn-third{
border: 1px solid !important;
background-color: transparent !important;
border-radius:200px;
}
.btn-secondary{
border: 1px solid !important;
background-color: transparent !important;
}
.btn-primary{
border: none!important;
border-radius: 10px !important;
}

.crispy_border_wrapper{
    border:1px solid var(--color-1)!important;
    border-radius: 10px;
}
.cripsy_submit_background{

    background-color: aliceblue!important;

}

.bg-primary{

background-color: var(--text)!important;
color:white;

}


/* .form-group {

/*margin:0px 10px !important ;
} */

#div_id_date{
margin-bottom:0px !important;

}

svg, .material-symbols-outlined {
pointer-events: none;
}

#spinner{
display:none;
}

legend{
color:var(--text);
}



/* Goolge Rules for sizing the icon. */
.material-symbols-outlined{
font-size:24px;
font-weight: 100;
justify-content: center;
vertical-align: middle;
color:var(--color-1)!important;
}
/* Font Awesome */
.svg-inline--fa{
font-size:20px;
font-weight: 100;
color:white;
justify-content: center;
}


.form-control:focus {
box-shadow: none;
/* color:#ffffff8c !important; */
}



.bar_links{

font-size: 30px !important;
/* color:hsl(from var(--act-icon) h s 80%); */

}


.act-bottom{
font-size:10px;
/* color:#d7dadd!important; */
}

[id^="icon"]{
/* font-size: large; */
font-weight: 900;
/* color:#d7dadd !important; */
}

#icon_1::after {
font-family: "Font Awesome 5 Free";
content: "\e2eb";
}

#icon_2::before {
font-family: "Font Awesome 5 Free";
content: "\e4c6";
}

#icon_3::before {
font-family: "Font Awesome 5 Free";
content: "\f236";
} 

#icon_4::before {
font-family: "Font Awesome 5 Free";
content: "\f2fe";
}

#icon_5::before{
content:"baby_changing_station";
}


#icon_6::before{
content:"block";
}

#icon_7::before{
content:"front_hand";
}


.dropdown-menu[data-bs-popper] {
left:inherit;

}

.act_last{ 
cursor:pointer;
color: rgb(113, 112, 112);
background-color: transparent !important;
width:100%;
}

.act{
color:var(--text);
pointer-events: none;
}

.act_space, .cal_space{
cursor:pointer;
}





[class*="act_space"]:active{
/*animation-name: rotate;*/
animation-duration: 1s; 
animation-iteration-count: 1;
animation-timing-function: linear;


}

@keyframes rotate {
from {transform:rotate(0deg)}
to {transform: rotate(360deg)}
}

@keyframes rotate_ {
0% { transform: scale(1,1)translateY(0); }
10%{ transform: scale(1.1,.9) translateY(0); }
30%{ transform: scale(.9,1.1) translateY(-20px); }
50%{ transform: scale(1.05,.95) translateY(0); }
57%{ transform: scale(1,1)translateY(-7px); }
64%{ transform: scale(1,1)translateY(0); }
100% { transform: scale(1,1)translateY(0); }
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
border: none;
box-shadow: none;
}

.success,.error{
margin-bottom: 0px !important;
position: relative !important;
display:inline-flex !important;
align-items: center;
justify-content:center;
margin-top: 5px;
/* margin:30px !important; */
width:100%;
height:40px;
border-radius: 25px !important;
text-align: center;
/* background-color: var(--text); */
color:white;
z-index:20;
}

#row_messages{
position:absolute;
top:-19px;
left:0px;
width:90%!important;
left :45%;
transform: translate(-45%,0%);
border-radius: 20px;
z-index:4000;
}

.dark_mask{
    border-radius:20px;
    background-color:var(--color-2)!important;
    padding:30px;
    margin-bottom: 20px;
}

/* Bootstrap reset for Row margin and Column padding*/

.horizontal> div > input{
    background-color: var(--color-3) !important;
    padding: 5px 0px;
    border-radius: 10px;
}

input:not([type='submit'],[type='checkbox']), .input-group-text {
    padding:0rem .375rem;
    text-align: center;
    background-color:inherit;
    border:0px !important;
    }

form{
padding: 0px !important;
border-radius: 10px;
border-width:0px 0px;
border-style:solid;
}

div:not(.horizontal) > [id^="div_id_"]:not(#div_id_image) > input{
    border-bottom:1px dashed !important;
    padding:0px 10px;
}

#div_id_memo{
    border:1px dashed !important;
    border-radius: 10px;
    padding:0px !important;
}

#div_id_memo > textarea{
    margin-top:-10px;
    padding:0px 15px;
}

.col,.container{
    padding:0px;
}


.form-control,.form-control:focus{
    color:var(--color-1) !important;
    border-radius: 10px !important;
    border:0px!important;
    border-bottom:1px solid;
    /* border:0px !important;
    border-bottom: 1px solid #d9edff!important; */
    /* background-color:#92ec6e!important; */
    
    }

th{
font-weight: 500;
}

.btn-check:focus+.btn-primary, .btn-primary:focus {
box-shadow: none !important;
}


[class^="row"]{
margin: 0px;
}



/* [class^="col"]{
padding:0px;
} */


/*End-Bootstrap reset for Row margin and Column padding*/


.collapse.show, .collapsing{
background-color: inherit;
position: relative;
top:0px;

} 



.a-bottom{
display:none !important;
}


table[data-sortable] th:not([data-sortable="false"]) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
cursor: pointer;
}


#main_bar{

background-color: var(--bar);

}







/* [id^="right_link"]span{
font-size:35px;
} */

[id^=sec] > img {

max-width:260px;

}
.activity_bar{
font-size:30px;
color:var(--icons)!important;
}

html{
    background-color: black;
}

/* .container-fluid >*{
    z-index:1021
} */
.container-fluid{
justify-content: center;
text-align: center;
position:relative;
margin-top:0px;
padding: 0px;
display:grid;
grid-template-columns:5fr 16fr 5fr;
grid-template-rows:auto min(65px) minmax(82svh,auto) 10svh;
grid-template-areas:
'. top_row .'
'. header  .'
'left_menu  main .'
'. footer .';
min-height: 100svh;
margin-top:0px;
z-index:1021;
padding:0px 0px;
}


#top_hr,#bottom_hr::before{
content:'';
position:absolute;
height:45px;
width:92%;
left:41%;
transform: translate(-41%, 0%);
top:0px;
border-radius: 200px;
background-image:url('https://8000-thebiondgithub-schoolly-ff630s7o7d6.ws-eu118.gitpod.io/static/core/kitty-151949_640.png');
background-position: 0px 500px;
background-size:200px;
opacity:0.1;
}

#top_menu{
    grid-area: top_row;
    top:0;
    /*   position: sticky;
    position:-webkit-sticky; */
    display: inline-flex;
}


#top_menu > div > a{
padding:5px 10px;
}

.list-group-item{
    border:0px  !important;
    border-radius: 0;    
}

header{
grid-area: header;
background-size:cover;
}


#left_menu{
    grid-area:left_menu;
}

main{
grid-area:main;
padding-top: 20px;
/* border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; */
}

footer{
width:100%;
bottom:0px;
gap:0px;
grid-area: footer;
border-radius: 200px;
}

/* #home{
grid-area:main;
display: grid;
grid-row-gap:1svh;
grid-template-areas: 
'sec1 sec1 sec1 sec1 sec1'
'sec2 sec2 sec2 sec2 sec2'
'sec3 sec3 sec3 sec3 sec3'
;
} */

/* #left_links{
grid-area: left_links;
padding-top:2px;
}

#logo{
grid-area: logo;
position: absolute;
left:50%;
transform: translate(-50%, 0%);
}



#right_links{
grid-area: right_links;
} */


#sec1{
grid-area:sec1;
height:30svh;
border-radius: 50px;
overflow:hidden;
padding-bottom:10px;
}

#sec2{
grid-area:sec2;
height:30svh;
}

#sec3{
grid-area:sec3;
height:30svh;
}


#motto{
grid-area: motto;
}




/* GRID - SearchKid*/
/* #school_main{
display: grid;
grid-template-areas:
'. cards_holder .'
;
grid-template-columns: 0fr 1fr 0fr;
}

#cards_holder{
grid-area: cards_holder;
} */

/*GRID - End SearchKId */

/* //BOOTSTRAP CLASS: X-Small	None	<576px - X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
        /* THIS IS FOR ROUND EDGES EFFECT CREATION */    
        /* html,body,header,card-top,car-bottom,table{
            background-color: black;
            } */
            #left_menu{
                display:none;
            }


        main{
            border-radius:0px;
        }    
        #column_view{
        display: none;
        }
        /* #top_hr,#top_menu{
            display: none;
        } */
        .container-fluid{
        grid-template-rows:auto min(65px) minmax(82svh,auto) 10svh;
        grid-template-areas:
        'top_row top_row top_row'
        'header header header'
        'main main main'
        'footer footer footer';
        margin-top:0px;
        }

        #home{
        grid-area:main;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        'sec1'
        'sec2'
        'sec3'
        ;

        }


        main{
        grid-gap:0px;
        }

        .a-bottom{
        display:inline-flex!important;
        }

        .a-start{
        display: none!important;
        }
}

/* //BOOTSTRAP CLASS:Small	sm	≥576px - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
        .kid_name{
        font-size:18px;
        }
}
/* //BOOSTRAP CLASS: Medium	md	≥768px - Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
        .stud_name{
        font-size:14px;
        }
}
/* //BOOTSTRAP CLASS: Large	lg	≥992px - Large devices (desktops, 992px and up) */
@media(min-width: 992px) and (max-width: 1199.98px) { 
        .stud_name{
        font-size:14px;
        }
}
/* //BOOTSTRAP CLASS: Extra large	xl	≥1200px - Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
        .container-fluid{
            grid-template-columns:6fr 24fr 6fr;
        }
}
/* BootStrap extraLarge XXL */
@media (min-width: 1400px) {
        .container-fluid{
            grid-template-columns:10fr 20fr 10fr;
        }
}