/* STANDARDS ELEMENTS */


           html{font-family: sans-serif; font-size: 16px;}

           :root{--white-gh:#FCFAFE;
                --levand-1:#F8F4FD; --levand-2:#F2E6FD; --levand-3:#eed8fc; --levand-4:#E5DBFB; --levand-5:#E6BDFC; --levand-6:#a81cff;--levand: #7e007bff;
                --purple-2:#AEA8F2; --purple-3:#a189f0; --purple-4:#573697;--dark:#311d58;--light-blue: #755dfda8;--majorelle-blue: #724cf9;--dusty-grape: #564592ff;--slate-blue: #735cddff;
                --white-blue: #f6f7ff;--lime-cream: #edf67dff;--rich-mahogany: #37000aff;--periwinkle: #b3c2f2ff;
                --pink-carnation: #f896d8ff;--mauve-magic: #ca7df9ff;--royal-orchid: #9000b3ff;
                }
           *{margin:0; padding:0; box-sizing: border-box; user-select: none;color: var(--dark);}

            .symbol{display:flex; justify-content: center;  align-items: center; color: var(--purple-3); font-size:16px;}
            .menu{text-align:center;}

            .links-container{margin:0; padding:0; align-items:center; justify-content: center;} 

            a{display: inline-flex; line-height: 1.6; padding: 10px; border-radius:3px; text-decoration: none; color: var(--purple-4);}
                a:hover{background-color: var(--levand-1);}
                a:active{color:var(--purple-2);}
             .simple{line-height: 1.0; justify-content: left; }
             .redsimple{color:var(--levand-6);}
             .infoleft{display:flex; line-height: 1.2; text-align: left; }
             .inlinered{display: inline; padding: 0px; line-height: 1.2; color:var(--royal-orchid); }
             a.table{display: inline-flex; line-height: 1.0; padding: 0px; color: var(--dark);}
             .tablewh{display: inline-flex; line-height: 1.0; padding: 0px; color: var(--white-gh);}
             .tablewh:hover{background-color: var(--slate-blue);}
                
            svg{fill:var(--purple-4); padding: 0px 3px;}  
            svg.out{fill:var(--levand-6); padding: 0px 3px;}  

            #main{display:flex;background-color:var(--white-gh);}
            #main div:nth-of-type(1) {flex-grow: 1;}
            #main div:nth-of-type(2) {flex-grow: 1;}
            #main div:nth-of-type(3) {flex-grow: 1;}
            #main div:nth-of-type(4) {flex-grow: 1;}
            #main div:nth-of-type(5) {flex-grow: 6;}
            #main div:nth-of-type(6) {flex-grow: 1;}            

           #sidebar-active{display:none;}
           .open-sidebar-button, .close-sidebar-button{display:none;}

           .open-subguide{padding:10px; display:inline-flex;}
           .guide-drop {  display: none;  position: absolute; margin:35px 0px;  background-color: var(--white-gh); border-radius:3px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 12px 16px;  z-index: 1;}
           .open-subguide:hover .guide-drop{display:grid;}

           .open-profil{padding:10px; display:inline-flex;}
           .profil-drop {  display: none;  position: absolute; margin:35px 0px;  background-color: var(--white-gh); border-radius:3px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 12px 16px;  z-index: 1;}
           .open-profil:hover .profil-drop{display:grid;}

           .open-zone{padding:10px; display:inline-flex; }
           .zone-drop {  display: none;  position: absolute; margin:35px 0px; background-color: var(--white-gh); border-radius:3px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 12px 16px;  z-index: 1;}
           .open-zone:hover .zone-drop{display:grid;}            

            #main2{display: flex; height: 300px; justify-content: center;  align-items: center; background-image:url("images/purplebg.jpg"); background-size: cover; background-position: center;background-repeat: no-repeat;} 
            #logobanner{height: 300px; justify-content: center;  align-items: center; background-image:url("images/logo.png"); background-size: contain; background-position: center;background-repeat: no-repeat;} 
            #ladypinkbanner{height: 300px; justify-content: center;  align-items: center; background-image:url("images/ladypink.png"); background-size: contain; background-position: center; background-repeat: no-repeat;} 
            #ladypurplebanner{height: 300px; justify-content: center;  align-items: center; background-image:url("images/ladypurple.png"); background-size: contain; background-position: center; background-repeat: no-repeat;}
           
            #main2 div:nth-of-type(1) {flex-grow: 1;}
            #main2 div:nth-of-type(2) {flex-grow: 2;}
            #main2 div:nth-of-type(3) {flex-grow: 8;}
            #main2 div:nth-of-type(4) {flex-grow: 2;}
            #main2 div:nth-of-type(5) {flex-grow: 1;}

            #main-content{padding: 0px 100px; justify-content: center;  align-items: center; background-color:white;} 
            .label2{min-height:500px; padding: 10px; text-align: center; align-items: center; background-color:white;background-image:url("images/mumlight.png"); background-size: content; background-position: center; background-repeat: no-repeat;}
            .more {width:100%; height:100%; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block; margin: auto; }
            .less {width:100%; height:200px; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: block; margin: auto; }


            #footer{padding:40px; justify-content: center;  align-items: center; background-color:var(--purple-3);} 
            .label3{min-height:20px; padding: 20px; justify-content: left;  color:#ffffff; background-color:var(--purple-3);}

            .buttondis {background-color:var(--purple-3); border: none;border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; padding: 10px 20px; cursor: pointer;}
            .button {background-color:var(--purple-4); border: none;border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; padding: 10px 20px; cursor: pointer;}
            .buttonsmall {background-color:var(--purple-4); border: none;border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 13px; padding: 5px 10px; cursor: pointer;}
            .delete {background-color:var(--royal-orchid); border: none;border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; padding: 10px 20px; cursor: pointer;}
            .delete:hover{background-color:var(--royal-orchid);}
            .deletesmall {background-color:var(--royal-orchid); border: none;border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 13px; padding: 5px 10px; cursor: pointer;}
            .deletesmall:hover {background-color:var(--royal-orchid);}

           @media(max-width:1000px)
           {
            #main-content{padding:0px 10px;}          
            .links-container{display:block;position:fixed; top:0; right:-100%;z-index:10; width: 100%;height:100%;background-image: url("images/pregnancy.png");background-position: center;background-size: cover;transition:0.75s ease-out;}
            a{display: flex; padding:2px 0px; justify-content:center; } 
            .infoleft{display: flex; line-height: 1.2; justify-content:left;}         
            
                .open-subguide{display:grid; box-sizing: content-box;margin: auto; padding: 2px 0px; justify-content: center;}
                .open-zone{display:grid; box-sizing: content-box;margin: auto; padding: 2px 0px; justify-content: center;}
                .open-profil{display:grid; box-sizing: content-box;margin: auto; padding: 2px 0px; justify-content: center;}
                
                .open-subguide:hover .guide-drop{display:grid; margin: 0px 0px; justify-content: start; position:relative; z-index:0;}
                .open-zone:hover .zone-drop{display:grid; margin: 0px 0px; justify-content: start; position:relative; z-index:0;}        
                .open-profil:hover .profil-drop{display:grid; margin: 0px 0px; justify-content: start; position:relative; z-index:0;}      
                
                .open-sidebar-button{padding:20px;display: flex; justify-content: flex-end;}
                .close-sidebar-button{padding:20px;display: block;}
                #sidebar-active:checked ~ .links-container{right:0;} 

                #date{display:none;}
            
            #main2{height: 100px;}
            #logobanner{height: 100px;}            
            #ladypurplebanner{height: 80px;}  
            #ladypinkbanner{height: 80px;}

            #footer{padding:10px;} 
            .label3{padding: 5px;}

           }

input, select, textarea {font-size: 16px; background-color: white;}
select:not(:focus) {background-color: white; opacity: 1;}
input[type=text] {    width: 100%;     padding: 5px 20px;     margin: 3px 0;     box-sizing: border-box;     border: 3px solid var(--dusty-grape);  -webkit-transition: 0.5s;     transition: 0.5s;     outline: none;  }

input[type=text]:focus {background-color: var(--levand-1); }

input[type=date] {    width: 100%;     padding: 3px 20px;     margin: 3px 0;     box-sizing: border-box;     border: 3px solid var(--dusty-grape);  -webkit-transition: 0.5s;     transition: 0.5s;     outline: none;  }
input[type=date]:focus {background-color: var(--levand-1); }

select, textarea{    width: 100%;     padding: 5px 20px;     margin: 3px 0;     box-sizing: border-box;     border: 3px solid var(--dusty-grape);  -webkit-transition: 0.5s;     transition: 0.5s;     outline: none;  }
select:focus, textarea:focus {background-color: var(--levand-1); }

/* The container */
.con { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default radio button */
.con input {     position: absolute;     opacity: 0; }
/* Create a custom radio button */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: var(--white-gh); border-radius: 50%; }
/* On mouse-over, add a grey background color */
.con:hover input ~ .checkmark {     background-color: var(--purple-2);  }
/* When the radio button is checked, add a blue background */
.con input:checked ~ .checkmark {      background-color: var(--purple-2);  }
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {       content: "";     position: absolute;      display: none;  }
/* Show the indicator (dot/circle) when checked */
.con input:checked ~ .checkmark:after {     display: block; }
/* Style the indicator (dot/circle) */
.con .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--white-gh); }

table {color: var(--dark); width: 90%; margin: 0 auto; border-collapse: separate; border-spacing: 7px;}

td{height: 30px; font-size: 13px; padding: 2px; text-align: center; background-color: var(--white-gh); box-shadow: 3px 3px 3px rgba(0,0,0,0.2);}
td.none{height: 30px; font-size: 13px; padding: 2px; text-align: center;box-shadow: none;}

td.light{color: var(--white-gh); text-align: center; background-color: var(--light-blue); box-shadow: 3px 3px 3px var(--dusty-grape);}
td.lightblue{color: var(--white-gh); text-align: center; background-color: var(--majorelle-blue); box-shadow: 3px 3px 3px var(--dusty-grape);}
td.blue{color: var(--white-gh);text-align: center; background-color: var(--slate-blue); box-shadow: 3px 3px 3px var(--dusty-grape);}
td.bluecal{width:15%; color: var(--white-gh);text-align: center; background-color: var(--slate-blue); box-shadow: 3px 3px 3px var(--dusty-grape);}
td.red{color: var(--white-gh); text-align: center; background-color: var(--royal-orchid); box-shadow: 3px 3px 3px var(--levand);}
td.lightred{text-align: center; background-color: var(--levand-3); box-shadow: 3px 3px 3px var(--levand-5);}
td.levand{text-align: center; background-color: var(--mauve-magic); box-shadow: 3px 3px 3px var(--levand-6);}

ul.home li {list-style-image: url('images/li.gif');text-align:left;}

.small {text-align:center; color:var(--dark); font-size: 11px;}
.med {text-align:center; color:var(--dark); font-size: 13px;}
.medleft {text-align:left; line-height: 1.2; color:var(--dark); font-size: 13px;}
.big {text-align:center; color:var(--dark); font-size: 16px;}
.bigleft {text-align:left; color:var(--dark); font-size: 16px;}
.max {text-align:center; color:var(--dark); font-size: 24px;}
.black {text-align:center; color:var(--rich-mahogany); font-size: 13px;}
.blackleft {text-align:left; color:var(--rich-mahogany); font-size: 13px;}
.blackright {text-align:right; color:var(--rich-mahogany); font-size: 13px;}
.blackbig {text-align:center; color:var(--rich-mahogany); font-size: 16px;}
.redleft {text-align:left; color:var(--levand-6); font-size: 13px;}
.red {text-align:center; color:var(--levand-6); font-size: 13px;}
.redbig {text-align:center; color:var(--levand-6); font-size: 16px;}
.whiteright {text-align:right; vertical-align:top; color:#FFFFFF; font-size: 13px; }
.whitebig {text-align:center; vertical-align:center; color:#FFFFFF; font-size: 16px; }
.whiteleft {text-align:left; vertical-align:top; color:#FFFFFF; font-size: 13px; }
.green {text-align:center; color:var(--majorelle-blue); font-size: 13px;}
.greenleft {text-align:left; color:var(--majorelle-blue); font-size: 13px;}
.greenbig {text-align:center; color:var(--majorelle-blue); font-size: 16px;}
.blue {text-align:center; color:var(--dusty-grape); font-size: 13px;}
.bluebig {text-align:center; color:var(--dusty-grape); font-size: 16px;}
.bluebigleft {text-align:left; color:var(--dusty-grape); font-size: 16px;}
.bluemax {text-align:center; color:var(--dusty-grape); font-size: 24px;}
.darkblue {text-align:center; color:var(--purple-4); font-size: 13px;}
.darkbluebig {text-align:center; color:var(--purple-4); font-size: 16px;}
.darkbluemax {text-align:center; color:var(--purple-4); font-size: 24px;}
.light {text-align:center; color:var(--levand-1); font-size: 13px;}
.lightbig {text-align:center; color:var(--levand-1); font-size: 16px;}
.violin {text-align:center; color:var(--purple-3); font-size: 13px;}
.violinleft {text-align:left; line-height: 1.2; color:var(--purple-3); font-size: 13px;}
.violinbig {text-align:center; color:var(--purple-3); font-size: 16px;}
.pink {text-align:center; color:var(--levand-3); font-size: 13px;}
.pinkbig {text-align:center; color:var(--levand-3); font-size: 16px;}
.bordo {text-align:center; color:var(--levand); font-size: 13px;}
.bordobig {text-align:center; color:var(--levand); font-size: 16px;}
.bordohead {text-align:center; color:var(--levand); font-size: 24px;}