.btn {
    background-color: rgba(10, 216, 210, 0.555) ;
    border: 2px outset ;
    border-radius: 55px;
    user-select: none;
    padding:2px 6px;
    font-size: larger;
    font-weight: bold;
    transition: all .2s;
    max-width: 150px;
    text-align: center;
} 
.btn.close {
    border: 1px outset grey;
    position: fixed;
    border-radius: 50
    5;
    z-index: 9;
    right: -12px; 
    top: -12px;
}
.btn:hover {
    background-color: aqua;
    border: 2px inset ; color: rgb(0, 0, 0);
    cursor: pointer; text-decoration:underline #000;
}.btn.close:hover {
    cursor: auto;
    text-decoration: none;
    border: 1px solid black;
    color: #000;

    background-color: inherit;		
} .btn.close:active, .btn:active {
    transition: none;
    background-color: cadetblue;
}
.btn.out {
    border-radius: 3px;
    font-weight: 500;
}
.btn.normal {
    border: none;
    text-decoration: initial;
}
.btn.normal:hover, .btn.normal:hover {
    border: none;
    text-decoration: none;
}
a.normal {
    text-decoration: none;
    color: inherit;
}

input,textarea {
    max-width: 100%;
}
button[type="submit"] {
    border:1px solid brown;
}

.center {
    text-align: center;
    margin-left:auto;
    margin-right:auto ;
}

a.p p {
    margin: auto;
}

.fit {
    max-width: fit-content;
}


.fixedCenter {
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.res-true {
    color:green;
    text-shadow: 0px 0px 3px aqua;
}
.res-false {
    color: red;
    text-shadow: 0px 0px 3px grey;
}   
.loading-icon {
    animation: loading 3s infinite;
}  
.code {
      font-family: 'Courier New', Courier, monospace;
}

@keyframes loading {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}


.g {
    color: green;
}
.r {
    color: red;
}
.b {
    color:blue ;
}

[class^="fade"] {
    animation: fade 1s ease-in-out;
}
/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade Out */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Fade In and Out (Continuous) */
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Fade In and Out (Pulse Effect) */
@keyframes pulse {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Slide In from Top */
@keyframes slideInTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In from Bottom */
@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In from Left */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide In from Right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/**Hindi web BASICS*/
/*Scrollbar*/
.hwofd {
    /* Set the container to be scrollable */
    overflow: auto;
    min-width: 100px;
    min-height: 100px;
  
    /* Define the scrollbar track and thumb */
    scrollbar-track-color: #f2f2f2;
    scrollbar-face-color: #3498db;
  
    /* Add some padding and border for a sleek look 
    padding: 10px;
    border: 2px solid #3498db;*/
  
    /* Add box-shadow to create depth */
    box-shadow: inset 0 0 7px rgb(255, 0, 230);
  }
  
  /* Hide the browser's default scrollbar */
  .hwofd::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Style the thumb of the scrollbar */
  .hwofd::-webkit-scrollbar-thumb {
    background: rgb(8, 106, 123);
    border-radius: inherit;
    border: .5px solid rgba(0, 128, 0, 0.737);
  
    /* Add hover effect */
    transition: background 0.2s;
  }
  
  .hwofd::-webkit-scrollbar-thumb:hover {
    background: #ff0000; /* Change the color on hover */
  }
  
  /* Style the track of the scrollbar */
  .hwofd::-webkit-scrollbar-track {
    background: #f2f2f2;
  
    /* Add rounded corners to the track */
    border-radius: 0px;
  }
  
  /* Style the scrollbar corner */
  .hwofd::-webkit-scrollbar-corner {
    background: #f2f2f2;
  }

.ui {
    font-weight: normal;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.line {
    margin:10px;
    border-bottom: 1px groove grey;
    position: inherit;
}
.serif {
    font-family:Georgia, 'Times New Roman', Times, serif;
}

  .moving {
    width:250px;
    height: 7px;
    background-color: inherit;
    display:block;
    margin:10px auto;  
    background-repeat: repeat; 
    border-radius: 2px; 
    background-image:  linear-gradient(45deg, rgba(255, 0, 0, 0) 0%, blue 1%,yellow, rgb(0, 255, 0),rgba(255, 0, 0, 0),green,blue,rgba(255, 0, 0, 0) 100%); 
    animation: movein 2s linear infinite;  
} 
@keyframes movein { 
    0% {background-position: -50px 0px;}  
    50% {background-position: 50px 20px;}
    100% {background-position: 200px 40px;} 
   
}
.home {
    
    background-image: linear-gradient( to top, lightgreen,violet, hotpink) !important;

}
.home:hover {
    background-image: linear-gradient( to bottom, lightgreen,violet, hotpink) !important;
  }
.home:active {
    background-image: linear-gradient(  rgba(99, 24, 9, 0.852),violet, rgba(159, 1, 80, 0.779)) !important; ;
  }

.m0p0 {
    margin:0px;
    padding:0px;
}
.o7 {
    opacity: .7;
}

.look1 {
    background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #000 10px, #000 20px);
    background: repeating-linear-gradient(45deg, #f0f0f000, rgba(165, 42, 42, 0.555) 20px, #b33c3c5d 24px, #00ff4c3c 60px, #f0f0f000 100px); 
    color: transparent;
    color:grey;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    border:1px solid grey;
    display: grid;
    text-align: center;
}
#sidebar { position:fixed;
    z-index:99;
    font-family:cursive;
    font-family:mukta;
    text-align:center;
    width:192px;
    height:100%;
    overflow:auto;
    border: 2px inset white;
    transition:all 0.3s ease-in-out;
    background: rgba(236, 275, 180, 0.9);
    background: lightyellow;
    padding-right:2px;padding-left:1px;

 }
.zfs {font-size:small;}
        
        .l0 { left:0;} .r0 {right:0;}
        .t0 {top:0;} .b0 {bottom:0;}
        .p0 {padding: 0 } .m0 {margin:0 }
        div.fix {position: fixed;}
        .hidden {display: none !important;}
        .absolute {position: absolute;}
        .ann {opacity: .7; cursor: pointer; }
        .ann:hover { opacity: 1; }
        .ann.icon { font-size: 120%;}
        div.no-div ,.inline {display: inline-block;}
        p img { max-width: 100%; }
        .cursor-default {cursor: default;}
        .cursor-pointer {cursor: pointer;}
        .w-n {max-width: none;min-width: none;}
        .border {border: 1px solid #999};

        /*Extract from W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
/* html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} */

.col,.half,.third,.twothird,.threequarter,.quarter{float:left;width:100%}
.col.s1{width:8.33333%}.col.s2{width:16.66666%}.col.s3{width:24.99999%}.col.s4{width:33.33333%}
.col.s5{width:41.66666%}.col.s6{width:49.99999%}.col.s7{width:58.33333%}.col.s8{width:66.66666%}
.col.s9{width:74.99999%}.col.s10{width:83.33333%}.col.s11{width:91.66666%}.col.s12{width:99.99999%}

@media (min-width:601px){
    .col.m1{width:8.33333%}.col.m2{width:16.66666%}.col.m3,.quarter{width:24.99999%}.col.m4,.third{width:33.33333%}
    .col.m5{width:41.66666%}.col.m6,.half{width:49.99999%}.col.m7{width:58.33333%}.col.m8,.twothird{width:66.66666%}
    .col.m9,.threequarter{width:74.99999%}.col.m10{width:83.33333%}.col.m11{width:91.66666%}.col.m12{width:99.99999%}
}

@media (min-width:993px){
    .col.l1{width:8.33333%}.col.l2{width:16.66666%}.col.l3{width:24.99999%}.col.l4{width:33.33333%}
    .col.l5{width:41.66666%}.col.l6{width:49.99999%}.col.l7{width:58.33333%}.col.l8{width:66.66666%}
    .col.l9{width:74.99999%}.col.l10{width:83.33333%}.col.l11{width:91.66666%}.col.l12{width:99.99999%}
}

            
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}