/* CSS Document */
body{width:min(98%, var(--fullwidth));}
input[type="number"], .colright{text-align: right;}
.aligner{float:left}
.nextline{clear:both}
.submitBtn{margin-top:0.5em; color:white; background:teal; border:solid 1px tomato; border-radius: 5px;}
.submitBtn:hover{color:teal; background: white; cursor:pointer}
.new :before{content:'\25EF'; font-weight: bold; font-size:0.7em; font-family:sans-serif;
    position: absolute; left: 0.25em; top:0.4em; padding: 2px 2px 0 2px; }
.new:hover :before{content: ' NEW '; padding-bottom: 2px; animation: changecolor 1s infinite;}
.new:hover :after{content:''; position:absolute; right:2px; 
	border:0.5em solid; border-color: hsl(var(--hval), var(--sval), 30%) hsl(var(--hval), var(--sval), 30%)
    transparent transparent;}
/* */
.znew:hover:before{content:'*NEW*'; font-size:0.8em; position:absolute; opacity:0.7; left: 1em;
    border-radius:8px}
.znew:hover:after{content:''; font-size:1em; border:1px solid; border-color: transparent transparent transparent grey}
@keyframes changecolor
{
    0% {background: linear-gradient(to right, hsl(var(--hval), var(--sval), 70%) 0%, 
        hsl(var(--hval), var(--sval), 30%));}
    20% {background: linear-gradient(to right, hsl(var(--hval), var(--sval), 70%) 20%, 
        hsl(var(--hval), var(--sval), 30%));}
    40% {background: linear-gradient(to right, hsl(var(--hval), var(--sval), 70%) 40%, 
        hsl(var(--hval), var(--sval), 30%));}  
    60% {background: linear-gradient(to right, hsl(var(--hval), var(--sval), 70%) 60%, 
        hsl(var(--hval), var(--sval), 30%));}
    80% {background: linear-gradient(to right, hsl(var(--hval), var(--sval), 70%) 80%, 
        hsl(var(--hval), var(--sval), 30%));}
    100% {background: linear-gradient(to right, hsl(var(--hval), var(--sval), 70%) 100%, 
        hsl(var(--hval), var(--sval), 30%));}  
}
        
@keyframes changecolor3
{
    0% {background: linear-gradient(to right top, hsl(var(--hval), var(--sval), 70%) 50%, 
        hsl(var(--hval), var(--sval), 30%) 50%);}
    50% {background: linear-gradient(to right top, hsl(var(--hval), var(--sval), 30%) 50%, 
        hsl(var(--hval), var(--sval), 70%) 50%);}
    100% {background: linear-gradient(to right top, hsl(var(--hval), var(--sval), 70%) 50%, 
        hsl(var(--hval), var(--sval), 30%) 50%);}  
}
@keyframes changecolor2
{
    0% {background-color: white;} 10% {background-color:silver;}  
    15% {background-color:darkslategrey;} 20% {background-color:black;}
    25% {background-color:coral;}   30% {background-color:orangered;}     35% {background-color:crimson;}
    40% {background-color:darkred;} 45% {background-color:red;}           50% {background-color: brown;}
    55% {background-color:orange;}  60% {background-color:gold;}          65% {background-color:yellowgreen;}
    70% {background-color:green;}   75% {background-color: seagreen;}     80% {background-color:turquoise;}
    85% {background-color:royalblue;} 90% {background-color:blue;}       100% {background-color:navy;}
}
.loginbox{text-align: center; border-radius:8px; 
    margin:0 auto; position:relative; background:azure; color:teal;
    box-shadow: -2px -2px 25px grey;}
.loginhead{float:left; width:100%; text-align: center; border-radius: 8px 8px 0 0;
    background:azure; color:teal; border-bottom: 2px solid teal; padding:3px 0}
.loginhead:before{content:var(--logoimg);}
.loginhead:hover{text-shadow: 2px 2px 4px cyan; cursor:default}
.logintag{color:tomato}
.logintag:before{content:'Soft Media Internal Log Entries'}
.loginuspa{padding:1% 0 6% 0; width:75%;}
.loginuspa div{line-height: 110%; width:100%; margin-left:14%;text-align: left;}
.loginuspa input{border-radius:5px; font-size:1em; line-height:160%; width:100%; border: 1px solid silver}
.btn{border-radius:9px; margin-left:0.5%; width:48%; background:teal; color:white; padding: 1% 5%;
    font-family: 'Times New Roman', Times, serif;}
.btns:hover{background:white; color:green; border-color:green}
.btnc:hover{background:white; color:firebrick; border-color:firebrick}

.homeheader{background: linear-gradient(var(--teaOrWaterColor), var(--todayclr));}
.menuheader{background: linear-gradient(to right, var(--teaColor), var(--waterColor)); font-size: 1.5em}
.menugroup{clear:both;}
.menuitem{
    margin:.25em; border-radius:8px; border:1px solid teal; float:left; width:7.3em; opacity:0.9;
    padding: .5em; background:linear-gradient(to right, white, skyblue); color:black;
}
.menuitem:hover :has(.submenuitem) {font-size:60%;}
.menuitem:hover{ transform:scale(1.05);opacity:1.0; box-shadow:2px -2px 4px black;
    background:lightblue; color: maroon;}
.submenu{}
.submenu:hover .submenuitem{display:inline-block}
.submenuitem{display:none; width:; font-size:100%; margin-left:0.25em; color: teal; padding:3px; border-radius: 4px}
.submenuitem:hover{background: white; border: 1px solid brown;}
.w{background:linear-gradient(var(--tophalfcolor), var(--waterColor))}
.t{background:linear-gradient(var(--tophalfcolor), var(--teaColor))}
.w:hover{background:linear-gradient(var(--tophalfcolor) 0%, var(--tophalfcolor) 50%, var(--waterColor) 50%)}
.t:hover{background:linear-gradient(var(--tophalfcolor) 0%, var(--tophalfcolor) 50%, var(--teaColor) 50%)}

.heading{color:rgb(255,255,255,0.8); margin-left:0.25em;}
.heading:hover{text-shadow:none; cursor:default;}
.heading:before{content:var(--logoimg);border-radius: 50%; background:snow;margin-left:0.1em; margin-top:0.1em}
.logo{background:rgb(255,255,255,0.8); border-radius:6px; padding:.2em; margin:.3em .3em 0 0; 
    box-shadow:-2px -2px 2px black; float: right;}
.logo:hover{background:white;}
.tagline{clear:both; color:snow; font-size:var(--tagfontsize); margin:0 0.5em 0 0.5em;}
.tagline:before{content: 'Soft Mediaerp Internal Log Entries'}
.userinfo{float: right; margin-right: 15px; font-size:0.5em; color: white}
.userline{width:100%;  color:grey;}
.userline--menu{display:inline-block; background:snow; color:indianred; padding:0 4px;
    border:1px solid crimson;}
.userline--menu:hover{text-decoration: none; cursor: default; background:indianred; color:white;}
.userline--menu:nth-child(odd){border-bottom:none}
.userline--menu:nth-child(even){border-top: none;}

.mainform{max-height:76vh; overflow:auto;}
.hometext{margin:1em 1em 0 1em; background: rgb(242,242,242); color:var(--todayclr); 
    border-radius:8px; padding:.5em; box-shadow:0 0 12px var(--todayclr); text-align: center;}
.mainheader{font-size:1.4em; position:sticky; top:0; z-index:10;
    background: var(--fullcolor); border: 1px solid var(--fullcolor);}
.dyn{background: var(--fullcolor);}
details:nth-child(n+2){margin-top:0.5em}
.summery{background: rgb(255,255,255,0.4); padding:0 1em; border-radius:8px 8px 0 0;
    width:6em; border:1px solid rgb(255,255,255,0.5);margin-left:2px;}
.colcenter{text-align:center;}
.hdr > *{background:rgb(255,255,255,0.5); margin-bottom:2px}
.dtl > *{background:rgb(255,255,255,0.7); border-bottom:1px solid var(--fullcolorhover)}
.dtl:hover{background: var(--fullcolorhover); cursor:default; font-weight:}
.remarkstag{background:none; border:none; font-size:60%; color:grey; font-style: italic; }
.tot *{background:rgb(255,255,255,0.4); border-bottom:1px solid var(--fullcolorhover);}
.dynumber{text-align:right; padding-right:0.5em;}
.dyremarks{padding-left:5px}
.button{margin-top:.25em; border:2px solid grey; padding:.25em .5em; display: inline-block;
    border-radius:8px;}
.button:hover{background:white; cursor:pointer}
.btngreen{background: lightgreen; color:green; border-color: green}
.btnexit{background:burlywood; color:brown; border-color:brown}
.btnexit:after{content:' to Menu'}
.btnred{background: lightpink; color: crimson; border-color: crimson;}
.strike {position: relative;}
.strike:before {content: ""; position: absolute; transform: rotate(-0.8deg);
    border-bottom: 1px solid red; top:40%; left:2%; width:96%;}
.strike:after {content: "\1F4B4"; position: absolute; right:2px; bottom:2px;}
.strike:hover:after{content:"\1F4B4" attr(data-strikemsg); font-size: 80%; border-radius:5px 5px 0 0;
    font-weight: normal; color:black; background:rgb(255,255,255,0.6)}
.unlocked{position:relative}
.unlocked:after {position:absolute; right:2px; bottom:2px;}
.unlocked:hover:after {content: "One time edit allowed"; font-size:70%; font-style: italic;
    color:green; background: rgb(255,255,255,0.8); padding:0 0.5em; border-radius:1em}
.locked {position: relative; color:firebrick;}
.locked:before {}
.locked:after {content: "\1F512"; position: absolute; right:2px; bottom:2px;
    background:black; border-radius:50%; font-size:75%} /* \2611 */
.locked:hover:after{content:'Cannot edit, ' attr(data-strikemsg); font-size: 70%; padding:0 5px;
    font-weight: normal; color:maroon; background:rgb(255,255,255,0.5); border-radius:5px}

.approved, .rejected {position: relative; color:firebrick;}
.approved:before {content: "\1F512"; position:absolute; left:2px; bottom:2px; background: black;
    border-radius: 50%; font-size: 75%}
.approved:after {content: "\1F512"; position: absolute; right:2px; bottom:2px; background:black;
    border-radius:50%; font-size:75%} /* \2611 */
.approved:hover:after{content:'Cannot alter, ' attr(data-strikemsg); font-size: 70%; padding:0 5px;
    color:red; background:rgb(255,255,255,0.8); border-radius:5px}

.teagrid{display:grid; grid-gap:1px; grid-template-columns: 6em 2em 2em auto; 
    border:1px solid var(--fullcolor)}
.paygrid{display:grid; grid-gap:1px; grid-template-columns: 6em 2em 2em 3em auto; 
    border:1px solid var(--fullcolor)}
.leavegrid{display:grid; grid-gap:1px; grid-template-columns: 6em 1.8em 1.8em 2.7em auto 6em}
.lapprovegrid{display:grid; grid-gap:1px; grid-template-columns: 1.8em 10em 6em 2em auto 1.8em}

.leave_emplist{counter-reset: sno; margin:0; padding:0; width: 50%; border:2px solid grey;
    border-radius: 3px; background: rgb(250,200,200,0.7)}
.leave_empgrid{display:grid; grid-template-columns: 8em auto;}
.leave_exemp{color: silver}
.leave_sno{position: relative}
.leave_sno:before{display:inline-block; width:2em; text-align:right; padding-right:8px;
    counter-increment: sno; content: " " counter(sno) "."}
li:hover{background: rgb(255, 127, 80, 0.5)}

.holidays_maingrid{display:grid; grid-template-columns:repeat(31, 1.95em); margin-left:1.15em;
    text-align: center; margin-top:2px;  font-size:0.73em}
.holidays_eachdaygrid{display:grid; grid-template-columns: auto; grid-gap:0.1em;}
.holidays_reason{text-align:left; display: none}
.eachdateHdr{background: lightgreen; margin:0 1px 1px 0;}
.eachdate{box-shadow: none; border:1px solid rgb(0,0,0,0); margin:-0.1em 1px 1px 0;
    background:lightgreen; opacity:0.9; position:relative}
.reasoncss{margin:0 auto; color:white; display:inline-block; padding:0 0.5em}

.att_maingrid{display:grid; grid-template-columns:1.4em auto repeat(31, 1.08em) 1.2em; margin:1px 1px;
    font-size:0.9em; grid-gap:0.1em; }

:root
{
    --clr-blue-to-purple: linear-gradient(135deg,rgba(6, 147, 227, 1) 0%,rgb(155, 81, 224) 100%);
    --clr-green-to-cyan: linear-gradient(135deg,rgb(122, 220, 180) 0%,rgb(0, 208, 130) 100%);
    --clr-amber-to-orange: linear-gradient(135deg,rgba(252, 185, 0, 1) 0%,rgba(255, 105, 0, 1) 100%);
    --clr-orange-to-red: linear-gradient(-35deg,rgba(255, 105, 0, 1) 0%,rgb(207, 46, 46) 100%);
    --clr-light-gray-to-bluish-gray: linear-gradient(135deg,rgb(238, 238, 238) 0%,rgb(169, 184, 195) 100%);
    --clr-cool-to-warm-spectrum: linear-gradient(135deg,rgb(74, 234, 220) 0%,rgb(151, 120, 209) 20%,rgb(207, 42, 186) 40%,rgb(238, 44, 130) 60%,rgb(251, 105, 98) 80%,rgb(254, 248, 76) 100%);
    --clr-blush-light-purple: linear-gradient(135deg,rgb(255, 206, 236) 0%,rgb(152, 150, 240) 100%);
    --clr-blush-bordeaux: linear-gradient(135deg,rgb(254, 205, 165) 0%,rgb(254, 45, 45) 50%,rgb(107, 0, 62) 100%);
    --clr-luminous-dusk: linear-gradient(135deg,rgb(255, 203, 112) 0%,rgb(199, 81, 192) 50%,rgb(65, 88, 208) 100%);
    --clr-pale-ocean: linear-gradient(-35deg,rgb(255, 245, 203) 0%,rgb(182, 227, 212) 50%,rgb(51, 167, 181) 100%);
    --clr-electric-grass: linear-gradient(135deg,rgb(202, 248, 128) 0%,rgb(113, 206, 126) 100%);
    --clr-midnight: linear-gradient(-35deg,rgb(40, 40, 202) 0%,rgb(40, 116, 252) 100%);
}

:root
{
    --logoimg: '\1F60A';
    --tophalfcolor: snow;
    --waterColor: #a1ffce;
    --teaColor: darksalmon;
    --hval: 120;
    --sval: 30%;
}
@media screen and (max-device-aspect-ratio: 1/1), (max-aspect-ratio: 1/1),
    all and (orientation:portrait), handheld 
{
    :root
    {
        --fullwidth:96%;  --fullcolor: var(--clr-luminous-dusk);
        --fullcolorhover: magenta; --userline_font: 85%; --tagfontsize: 80%;
        font-size:1.1em;
    }
    .loginbox{width:96%;font-size:1em; border-bottom:3px solid magenta}
    .loginhead{font-size:1.5em;  line-height:150%;}
    .logintag{font-size:70%;}
    .loginuspa{padding:1% 0 2% 0; width:82%;}
    .loginuspa div{line-height: 160%; width:100%; margin-left:14%; margin-top:7%; text-align: left;}
    .btn{font-size: 1.2em;}
    .homeheader{font-size:1.6em;}
    .hometext{font-size:2.4em;}
    .menuheader{font-size: 2em}
    .menuitem{border-radius:5px; font-size:1.2em;}
    .heading{font-size: 70%;}
    .tagline{font-size:70%;}
    .logo{width:18%;}
    .watergrid{display:grid; grid-gap:1px; grid-template-columns: 6em 2em 2em 2em auto; 
        border:1px solid var(--fullcolor)}
    .watergridinp{display:grid; gap:2px; grid-template-columns: 6em 2em 2em 2em 10em auto}
    .leavegrid{display:grid; grid-gap:1px; grid-template-columns: 6em 1.8em 1.8em 2.7em auto 5em}
    .lapprovegrid{display:grid; grid-gap:1px; grid-template-columns: 1.8em 6em 6em 2em auto 1.8em}
    #hdrreceived:before{content:'In'}
    #hdrreturned:before{content:'Out'}
    #hdrbalance:before{content:'Bal'}

    .holidays_maingrid{display:grid; grid-template-columns:auto; margin-left:1em;
        margin-top:2px; width:95%;}
    .holidays_eachdaygrid{display:none; grid-template-columns: auto 1.35em; grid-gap:0.1em; font-size:0.8em}
    .holidays_reason{display: block}
    .eachdateHdr{background: lightgreen;}
    .eachdate{box-shadow: none; border:1px solid rgb(0,0,0,0);
        background:lightgreen; opacity:0.9; position:relative}
    .reasoncss{display:none}
    .leave_emplist{counter-reset: sno; margin:0; padding:0; width: 100%; border:2px solid grey;
        border-radius: 8px; background: rgb(250,200,200,0.7)}
    .leave_empgrid{display:grid; grid-template-columns: 8em auto;}
}
@media (max-width:1920px) and (orientation:landscape)
{
    :root
    {
        --fullwidth:45em; --fullcolor: var(--clr-blue-to-purple);
        --fullcolorhover:blue; font-size: 1.3em; --tagfontsize: 90%;
    }
    .loginbox{width:40%;margin-top:15%; border-bottom:3px solid teal}
    .loginhead{font-size:1.8em;  line-height:110%;}
    .logintag{font-size:1.2em;}
    .loginuspa{padding:1% 0 2% 0; width:82%;}
    .loginuspa div{line-height: 160%; width:100%; margin-left:14%; margin-top:7%; text-align: left;}
    .btn{font-size: 1.4em;}
    .logo{width:10%;}
    .homeheader{font-size:1.5em;}
    .hometext{font-size:1em;}
    .menuheader{font-size: 2em}
    .watergrid{display:grid; grid-gap:1px; grid-template-columns: 5em 4.2em 4.2em 4em auto;
        border:1px solid var(--fullcolor)}
    .watergridinp{display:grid; gap:1px; grid-template-columns:5em 4.2em 4.2em 4em 10em auto}
    #hdrreceived:before{content:'Received'}
    #hdrreturned:before{content:'Returned'}
    #hdrbalance:before{content:'Balance'}
}
/* For Mobile Landscape View */
@media (max-device-width: 1000px) and (orientation: landscape)
{
    :root
    {
        --fullwidth:99%; --fullcolor: var(--clr-blue-to-purple);
        --fullcolorhover:blue; --userline_font: 100%; --tagfontsize: 60%;
        font-size: 1.2em;
    }
    .loginbox{width:60%; margin-top:5%; border-bottom:5px solid skyblue;}
    .loginhead{font-size:1.5em; line-height:100%;}
    .loginuspa{padding:5% 0 2% 0; width:80%;}
    .loginuspa div{width:100%; margin-left:14%; margin-top:4%; text-align: left;}
    .homeheader{font-size:2em;}
    .hometext{font-size:1.6em;}
    .menuheader{font-size: 1.5em}
    .menuitem{border-radius:8px; font-size:1.1em;}
    .watergrid{display:grid; grid-gap:1px; grid-template-columns: 5em 3em 3em 4em auto;
        border:1px solid var(--fullcolor)}
    .watergridinp{display:grid; gap:1px; grid-template-columns:5em 3em 3em 4em 20em auto}
    #hdrreceived:before{content:'IN'}
    #hdrreturned:before{content:'OUT'}
    #hdrbalance:before{content:'Balance'}

    .holidays_maingrid{display:grid; grid-template-columns:repeat(31, 1.5em); margin-left:1em;
        text-align: center; margin-top:2px;  font-size:0.8em}
    .holidays_eachdaygrid{display:grid; grid-template-columns: auto; grid-gap:0.1em;}
    .holidays_reason{text-align:left; display: none}
    .eachdateHdr{background: lightgreen; margin:0 1px 1px 0; font-size:0.8em}
    .eachdate{box-shadow: none; border:1px solid rgb(0,0,0,0); margin:-0.1em 1px 1px 0;
        background:lightgreen; opacity:0.9; position:relative}
    .att_maingrid{display:grid; grid-template-columns:1.5em auto repeat(31, 1em) 1.4em;
        font-size:0.8em; grid-gap:0.1em; margin: 1px;}
    .leave_emplist{counter-reset: sno; margin:0; padding:0; width: 70%; border:2px solid grey;
        border-radius: 8px; background: rgb(250,200,200,0.7)}
    .leave_empgrid{display:grid; grid-template-columns: 8em auto;}
}