@font-face {font-family: 'Mallanna'; src: url('fonts/Mallanna.ttf'), format('truetype'), url('fonts/Mallanna.woff'), format('woff'), url('fonts/Mallanna.woff2'), format('woff2');}
@font-face {font-family: 'Suranna'; src: url('fonts/Suranna.ttf'), format('truetype'), url('fonts/Suranna.woff'), format('woff'), url('fonts/Suranna.woff2'), format('woff2');}
@font-face {font-family: 'SreeKrushnadevaraya'; src: url('fonts/SreeKrushnadevaraya.ttf'), format('truetype'), url('fonts/SreeKrushnadevaraya.woff'), format('woff'), url('fonts/Suranna.woff2'), format('woff2');}
#page_wrap{background-color:powderblue; text-align:left; width:100%; margin:0 auto; padding:0 30px 30px 30px;}
#heading { text-align:center; margin: 0px 0px 0px 0px; padding:0px 0 0 20px; color: black; font: 5px Arial; /* background:url("./png_notebook.png");*/ font-family:'sree_krushnadevarayaregular';}
#show_on_ajax_send { position: absolute; top: 50%; left: 50%; height: 500px; width: 500px; overflow: hidden; margin:-250px 0 0 -250px; z-index: 99999; display: none;}
/* #heading { text-align:center; margin: 0px 0px 0px 0px; padding-top:40px; padding-bottom:0px; color: black; font: 40px Arial; line-height:10px; height:60px;} */
.tophead { text-decoration:none; text-decoration:none; color:black;font-family:'sree_krushnadevarayaregular';}
.tophead_byline { text-decoration:none; text-decoration:none; color:black; font:15px Arial;}

/*body { margin: 0px 2% 40px 0%; width:100%; color: black; font:14px Arial, Helvetica, Times, sans-serif; background-color:white; line-height:25px; } */

#canvas { position: relative; background-color: #ccddcc; margin: 1em auto; }
.ball { background-color: black; position: absolute; display: inline-block; border-radius: 50%; }


.menu_block {background: linear-gradient(to top,rgba(200,200,200,1.0),white); padding:10px;} 

.abs { display: inline; }
.subtitle { margin:0 5px 5px 5px; color: black; /* background-color:#9abcde; background-image:url("./o/green_gradient.png");*/ /*background-repeat:repeat;*/ /*width:100%; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 18px; font-weight: bold; display:inline; }
.firstsechead { margin:10px 0 5px 0; color: black; /* background-color:#9abcde; background-image:url("./o/green_gradient.png");*/ background-repeat:repeat; width:100%; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 18px; font-weight: bold; }
.sechead { margin:30px 0 5px ; color: black; /* background-color:#9abcde; background-image:url("./o/green_gradient.png");*/ background-repeat:repeat; width:100%; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 18px; font-weight: bold; }
.subsechead { margin:10px 0 5px 20px; color: black; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px; font-weight: bold; padding-top:5px; padding-left:10px; background: linear-gradient(to right,rgba(240,240,240,1.0),white); }
.audio { display:inline; /*height:15px; background-color: white;*/ }
.padyam { margin:5px 0 5px 60px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.padyam_audio { /* display:inline;*/ margin-top:1.0rem; margin-left:2.0rem; line-height:inherit; /*margin:5px 0 5px 35px; */ color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 14px;}
.tatparyam_audio { /* display:inline;*/  margin-top:1.0rem; margin-left:2.0rem; line-height:inherit; /*margin:5px 0 5px 35px; */ color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 14px;}
.padyam table, th, td { margin:5px 0 5px 20px; border-collapse:collapse; border:0px solid white; background-color:white; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 14px;}
.padyam td{ border:none; background-color:white; }
.padyalu_heading { margin:10px 0 5px 30px; color: black; /* background-color:#9abcde; background-image:url("./o/green_gradient.png");*/ background-repeat:repeat; width:100%; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 18px; font-weight: bold; }
.padyam_name { margin:10px 0 5px 40px; color: black; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px; font-weight: bold; padding-top:5px; padding-left:10px; background: linear-gradient(to right,rgba(240,240,240,1.0),white); }
.btn{ line-height:15px; }
.meta { margin:5px 0 5px 35px; color: black; /* min-width: 200px; */ line-height:14px; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 10px;} 
.practice { display:none; margin:20px 0 5px 35px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.practice_tel { /*display:none;*/ margin:20px 0 5px 70px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.practice_song { /*display:none;*/ margin:20px 0 5px 35px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 14px;}
.practice_eng { /* display:none;*/ margin:20px 0 5px 70px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.practice_env { display:none; margin:20px 0 5px 35px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.practice_env_control { /* display:none;*/ margin:20px 0 5px 35px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;} 
.padyam_control { /* display:none;*/ margin-left:2.0rem; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.tatparyam_control { /* display:none;*/ margin:20px 0 5px 35px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.comment_control { /* display:none;*/ margin:20px 0 5px 35px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.slok { margin:20px 0 5px 35px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;} 
.comment { /* display:none;*/ margin:20px 0 5px 70px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.tatparyam { /* display:none;*/ margin:20px 0 5px 70px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.katha  { margin:5px 0 5px 35px; color: black; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 14px;} 
.hide {display: none; } 
/*
h1 { font:14px Arial, Helvetica, Times, sans-serif; line-height:15px; text-align:left; margin-bottom:-20px; } 
h2  { font:13px Arial, Helvetica, Times, sans-serif; line-height:15px; text-align:left; margin-bottom:-18px; font-weight:bold; margin-top:0; }
*/
ul.inlinelist {margin-top:0;} 
ul.inlinelist li {float:left;} 
p {text-indent:40px; margin: 0 0 5px 0;} 
li {margin:5px 0 5px 0;}
.show {font-size:12px; display: inline;}
.disp_diag { color:black; margin-left:1.5cm; line-height:20px; /*font-size:14px; */ /* max-width:600px;*/ margin-top:0; /*background-color:#f5f5f5;*/ }
.margin_in { margin:5px 0 0 50px; /*max-width:800px; */ }
.tightpar { line-height: 1.7; background-color:#eaebec; border-radius: 10px; /* max-width:600px; */ margin:10px 0 5px 20px; padding-left:10px; }



.imtipani_heading { margin:30px 0 5px 30px; color: black; background-repeat:repeat; width:100%; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 18px; font-weight: bold; }
.imtipani {margin:5px 0 5px 60px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;}
.imtipani_slide_text_small {margin:5px 0 5px 0px; font-size: 14px;}





A.tophead:link {color:black;}
A.tophead:visited{color:black;}
A[href].tophead:hover{background:none; color:black;}
.hdrbox2 { line-height: 1.2; background-color:#faebac; /*border-radius: 40px;*/ font-size:14px; text-align:center; /*max-width:900px;*/ }
.disp_patralu { color:black; margin-left:10px; line-height:20px; /* max-width:300px;*/ margin-top:0; } 
.column { float:left; padding:10px; } 
.left { width: 25%}
.right { width: 75%}
.row:after { content: ""; display:table; clear:both; }
.submenu{ }
.navClass{ background-color: #333; background-image:url("nasa_clip3.png"); background-size:100% 100%; font-family: 'sree_krushnadevarayaregular', Arial, Helvetica, sans-serif; font-size: 16px; text-decoration:none; float:left; }
.navClass > ul > li { list-style-type:none; display:inline-block; text-align:center; text-decoration:none; float:left; padding:5px; }
/*
.navbar {margin-left:auto; margin-right:auto; padding-top:0.6rem; width:100%; background-color: #333; background-image:url("nasa_clip3.png"); background-size:100% 100%; font-family:'sree_krushnadevarayaregular';}
*/
.wrap {margin:auto; display:inline;}
.navbar .navitem { float:left; padding:0px 0px; font-weight: bold; }
.navbar .navitem a:hover{ color:black; background-color: #f5f5f5; }
.navbar a { float: left; font-size: 16px; color: black; text-align: center; text-decoration: none; }

/* .navbar a:hover, .dropdown:hover .dropbtn { background-color: #cc3300; color:white; }*/
/*
.dropdown { float: left; overflow: hidden; color: black; margin:1px 2px 0px 10px; } 
.dropdown .dropbtn { font-size: 16px; padding-left:10px; padding-right:10px;   border: 0px; outline: none; color: black; background-color: inherit; font-family: inherit; }
*/

/* Bootstrap like */
.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 0.0rem 0.0rem; background-color: #eceeef; border: 1px solid #dee2e6; border-radius: 0.25rem;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
.navbar-brand { display: inline-block; padding-top: 0.3rem; padding-bottom: 0.3rem; margin-left: 1rem;
  font-size: 1.125rem; line-height: 1.75; white-space: nowrap; text-decoration: none; transition: color 0.3s ease-in-out; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; list-style: none; margin-bottom: 0; }
.nav-link { padding: 0.5rem 1rem; color: #0d6efd; text-decoration: none; transition: color 0.3s ease-in-out; }
.nav-item .nav-link {text-decoration:none;}
.nav-link:hover { color: #0a58ca; color:darkgreen;}
.nav-item {margin-left:1rem;}
.nav-link.active { color:#007bff; font-weight: bolder; }
.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.0rem; line-height: 1; background-color: transparent;
  border: 1px solid transparent; border-radius: 0.25rem; transition: box-shadow 0.3s ease-in-out; }
.navbar-toggler:hover { background-color: #eceeef; }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 10rem;
  padding: 0.5rem 0; margin: 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff;
  background-clip: border-box; border: 1px solid rgba(200, 200, 200, 0.15); border-radius: 0.25rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.dropdown-item { display: block; width: 100%; padding: 0.25rem 1rem; clear: both; font-weight: normal;
  color: #212529; text-align: left !important; white-space: nowrap; background-color: transparent; border: 0;
  transition: color 0.3s ease-in-out; }
.dropdown-item:hover { color: #007bff; }
.dropdown-item.active { color: #fff; background-color: #007bff; }
.dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #eceeef; }


/*
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; z-index: 1; }
.dropdown-content a { float: none; color: black; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: #ddd; } 
.dropdown:hover .dropdown-content { display: block; }
*/


.prev_next { display:inline; line-height: 1.2; background-color:#faebac; font-size:14px; text-align:left; margin-left:20px; background:linear-gradient(to right, rgba(240,240,240,1.0), white); }
.show { display: block; }
.listall { margin:30px 0 5px 30px; border-top: 4px blue; color: black; background-repeat:repeat; width:100%; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 14px; }
.zoom { /*padding: 50px;*/ /*background-color: green;*/ /*transition: transform .2s;*/ /* Animation */ /*width: 200px; height: 200px; margin: 0 auto;*/ display: inline; }
.zoom:hover { font-size:30px; /*transform: scale(3.0);*/ /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ }
.fpsubsec{ margin:10px 0 5px 20px; color: black; font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px; font-weight: bold; padding-top:5px; padding-left:10px; background: linear-gradient(to right, rgba(240,240,240,1.0), white); }
.fplist { margin:5px 0 5px 25px; color: black; /* min-width: 200px; */ font-family:'sree_krushnadevarayaregular', Helvetica; font-size: 16px;} 
.box{ display: none; width: 100%; }
a:hover + .box,.box:hover{ display: block; position: relative; z-index: 100; } 
.fplist li { list-style:none; } 
.note { margin:5px 0 5px 20px; }
.resources{ margin:5px 0 5px 20px; }
.resources_head{ margin:5px 0 5px 20px; font-weight:bold; }

/* Homework */
.box_hw { color:black; margin:5px 0 5px 50px; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; } 
.hw_wrapperr { margin:0 0 0 20px; border:1px solid #bbb; padding:0; float:left; }
.hw_wrapper { margin:0 0 0 20px; border:0 solid #bbb; padding:0;}
.hw_header { border:1px solid #bbb; /*height:50px;*/ /* Height of the div */ /* padding:30px;*/ /* Inside the border */ }
.hw_titles { margin-top:0; padding-bottom:0; }
.hw_titless div { padding:0; border:1px solid #bbb; float:left; }
.hw_titles div { padding:0; border:0 solid #bbb; float:left; }
.hw_titles div::after{ content:""; background:black; position:absolute; bottom:0; left:0; width:80%; height:1px;}
.hw_titles-left { width:250px; padding-left:5px; }
.hw_titles-center { margin-left:0; width:200px; padding-left:5px; }
.hw_titles-right { margin-left:0; width:250px; padding-left:5px; }
.hw_content div { padding:0; margin-left:5px; border-bottom:0 solid #bbb; float:left; }
.hw_content-left { width:250px; padding-left:0px; }
.hw_content-center { margin-left:0; width:200px; padding-left:0px; }
.hw_content-right { margin-left:0; width:250px; padding-left:0px; }
.hw_content-pravesam-left { width:650px; padding-left:0px; }
.hw_content-pravesam { padding-left:0px; }
.hw_content-prabhasam { padding-left:0px; }



.pa_wrapper {padding:10px 0px 0px 0px; margin:10px 0 0 20px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.pa_content-bharatam {width:100%; margin:0 0 0 0; padding:0 0 0 5px; background-color:#f5f5f5; background-image:linear-gradient(to right, #fff9c6, #ffffff);}
.pa_content-pravesam {width:100%; margin:0 0 0 0; padding:0 0 0 5px; background-color:#f5f5f5; background-image:linear-gradient(to right, #75fab6, #ffffff);}
.pa_content-prasunam {width:100%; margin:0 0 0 0; padding:0 0 0 5px; background-color:#f5f5f5; background-image:linear-gradient(to right, #95ecfc, #ffffff);}
.pa_content-prakasam {width:100%; margin:0 0 0 0; padding:0 0 0 5px; background-color:#f5f5f5; background-image:linear-gradient(to right, #75abbc, #ffffff);}
.pa_content-pramodam {width:100%; margin:0 0 0 0; padding:0 0 0 5px; background-color:#f5f5f5; background-image:linear-gradient(to right, #cff0f5, #ffffff);}
.pa_content-prabhasam {width:100%; margin:0 0 0 0; padding:0 0 0 5px; background-color:#f5f5f5; background-image:linear-gradient(to right, #e8aa88, #ffffff);}

.pa_content-prasunam a:hover {color:white; background-color:#ff3e3e; font-size:18px;}
.pa_content-prakasam a:hover {color:white; background-color:#68af18; font-size:18px;}
.pa_content-pramodam a:hover {color:white; background-color:#cd68ea; font-size:18px;}
.pa_content-prabhasam a:hover {color:white; background-color:#458ff9;}
.pa_content-bharatam a:hover {color:white; background-color:#94ad18;}
.pa_content-pravesam a:hover {color:white; background-color:#c068ea;}

/* grahaNa Sakti */
.gs_wrapper { margin:0 0 0 20px; padding:0; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.gs_header { border:0 solid #bbb; font-weight:bold; padding:0 0 0 5px;/*height:50px;*/ /* Height of the div */ /* padding:30px;*/ /* Inside the border */ }
.gs_titles { margin-top:0; padding-bottom:0; }
.gs_titles div { padding:0; border:0 solid #bbb; float:left; }
.gs_titles-1 { width:100%; padding-left:5px; }
.gs_titles-2 { margin-left:0; width:200px; padding-left:5px; }
.gs_titles-3 { margin-left:0; width:200px; padding-left:5px; }
.gs_content-1 { width:100%; padding-left:5px; }
.gs_content-2 { margin-left:0; width:100px; padding-left:5px; }
.gs_content-3 { margin-left:0; width:100px; padding-left:5px; }
.gsakti { color:black; margin:5px 0 5px 50px; padding:0 0 10px 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.gsakti .gsakti_title { color:black; margin:20px 0 10px 10px; padding-top:10px; font-weight:bold; line-height:20px; font-size:20px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.gsakti .gsakti_text { color:hsl(0, 40%, 50%); line-height:20px; margin:5px 0 5px 50px; font-size:14px; max-width:700px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.gsakti .gsakti_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.gs_content-list {margin:0 0 0 20px; padding:0 0 0 20px; overflow:hidden; }
.gs_content-list a:hover {background-color:#121134; color:white;}

.gs_content-1 ul {list-style-type:none; margin:0; padding:0 0 0 20px; overflow:hidden; }
.gs_content-1 ul li {display:inline; float:left;}
.gs_content-1 ul li a:hover {background-color:#121134; color:white;}



/* uktalEkhanaM */
.ul_wrapper {margin:10px 0 0 20px; padding:5px 0 0 5px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.ul_header { border:0 solid #bbb; font-weight:bold; /*height:50px;*/ /* Height of the div */ /* padding:30px;*/ /* Inside the border */ }
.ul_titles { margin-top:0; padding-bottom:0; }
.ul_titles div { padding:0; border:0 solid #bbb; float:left; }
.ul_titles-1 { width:200px; padding-left:5px; }
.ul_titles-2 { margin-left:0; width:200px; padding-left:5px; }
.ul_titles-3 { margin-left:0; width:200px; padding-left:5px; }
.ul_titles-4 { margin-left:0; width:200px; padding-left:5px; }
.ul_content-1 { width:100%; padding-left:5px; }
.ul_content-2 { margin-left:0; width:300px; padding-left:5px; }
.ul_content-3 { margin-left:0; width:300px; padding-left:5px; }
.ul_content-4 { margin-left:0; width:300px; padding-left:5px; }

.space {display:inline; margin-left:10px;}
.ul_content-1 ul {list-style-type:none; margin:0; padding:0 0 0 20px; overflow:hidden; }
.ul_content-1 ul li {display:inline; float:left;}
.ul_content-1 ul li a:hover {background-color:#121134; color:white;}

.ul_content-11 { width:500px; padding-left:5px; }
.ul_content-12 { margin-left:0; width:325px; padding-left:5px; }


.ul {color:black; margin:5px 0 5px 50px; padding:0 0 10px 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);} 
.ul .ul_title {color:black; margin:20px 0 10px 10px; padding-top:10px; font-weight:bold; line-height:20px; font-size:20px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.ul .ul_text {color:hsl(0, 40%, 50%); line-height:20px; margin:5px 0 5px 50px; font-size:14px; max-width:700px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.ul .ul_padamulu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.ul_padamulu_list_wrapper { margin:0 0 0 20px; border:0 solid #bbb; padding:0; float:left; }
.ul_padamulu_list_wrapper div { border:0 solid #bbb; padding:0; float:left; }
.ul_padamulu_list-col1 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col2 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col3 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col4 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col5 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col6 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col7 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col8 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col9 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col10 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col11 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col12 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col13 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col14 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col15 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col16 { margin-left:0; width:40px; padding-left:5px; }
.ul_padamulu_list-col17 { margin-left:0; width:40px; padding-left:5px; }


/* vrAyuTa */
.vr_wrapper { margin:0 0 0 20px; border:1px solid #bbb; padding:0; float:left; }
.vr_header { border:1px solid #bbb; /*height:50px;*/ /* Height of the div */ /* padding:30px;*/ /* Inside the border */ }
.vr_titles { margin-top:0; padding-bottom:0; }
.vr_titles div { padding:0; border:1px solid #bbb; float:left; }
.vr_titles-1 { width:200px; padding-left:5px; }
.vr_titles-2 { margin-left:0; width:200px; padding-left:5px; }
.vr_titles-3 { margin-left:0; width:200px; padding-left:5px; }
.vr_content-1 { width:200px; padding-left:5px; }
.vr_content-2 { margin-left:0; width:200px; padding-left:5px; }
.vr_content-3 { margin-left:0; width:200px; padding-left:5px; }
.vrayuta { color:black; margin:5px 0 5px 50px; padding:0 0 10px 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; }
.vrayuta .vrayuta_title { color:black; margin:20px 0 10px 10px; padding-top:10px; font-weight:bold; line-height:20px; font-size:20px; max-width:800px; background-color:#f5f5f5; }
.vrayuta .vrayuta_text { color:hsl(0, 40%, 50%); line-height:20px; margin:5px 0 5px 50px; font-size:14px; max-width:700px; background-color:#f5f5f5; }
.vrayuta .vrayuta_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5; }


/* caduvuTa */
.ca_wrapper { margin:0 0 0 20px; border:1px solid #bbb; padding:0; float:left; }
.ca_header { border:1px solid #bbb; /*height:50px;*/ /* Height of the div */ /* padding:30px;*/ /* Inside the border */ }
.ca_titles { margin-top:0; padding-bottom:0; }
.ca_titles div { padding:0; border:1px solid #bbb; float:left; }
.ca_titles-1 { width:200px; padding-left:5px; }
.ca_titles-2 { margin-left:0; width:200px; padding-left:5px; }
.ca_titles-3 { margin-left:0; width:200px; padding-left:5px; }
.ca_content-1 { width:200px; padding-left:5px; }
.ca_content-2 { margin-left:0; width:200px; padding-left:5px; }
.ca_content-3 { margin-left:0; width:200px; padding-left:5px; }
.caduvuta { color:black; margin:5px 0 5px 50px; padding:0 0 10px 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; }
.caduvuta .caduvuta_title { color:black; margin:20px 0 10px 10px; padding-top:10px; font-weight:bold; line-height:20px; font-size:20px; max-width:800px; background-color:#f5f5f5; }
.caduvuta .caduvuta_text { color:hsl(0, 40%, 50%); line-height:20px; margin:5px 0 5px 50px; font-size:14px; max-width:700px; background-color:#f5f5f5; }
.caduvuta .caduvuta_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5; } 

/* mATlATa */
.ma_wrapper { margin:0 0 0 20px; border:0 solid #bbb; padding:0; float:left; }
.ma_header { border:0px solid #bbb; font-weight:bold; font-size:16px; /*height:50px;*/ /* Height of the div */ /* padding:30px;*/ /* Inside the border */ }
.ma_titles { margin-top:0; padding-bottom:0; }
.ma_titles div { padding:0; border:0px solid #bbb; float:left; }
.ma_titles-1 { width:200px; padding-left:5px; }
.ma_titles-2 { margin-left:0; width:200px; padding-left:5px; }
.ma_titles-3 { margin-left:0; width:200px; padding-left:5px; }
.ma_content-1 { width:250px; padding-left:5px; }
.ma_content-2 { margin-left:0; width:530px; padding-left:5px; }
.ma_content-3 { margin-left:0; width:40px; padding-left:5px; }
.matlata { color:black; margin:5px 0 5px 50px; padding:0 0 10px 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; }
.matlata .matlata_title { color:black; margin:20px 0 10px 10px; padding-top:10px; font-weight:bold; line-height:20px; font-size:20px; max-width:800px; background-color:#f5f5f5; }
.matlata .matlata_text { color:hsl(0, 40%, 50%); line-height:20px; margin:5px 0 5px 50px; font-size:14px; max-width:700px; background-color:#f5f5f5; }
.matlata .matlata_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5; }

.disp_video {margin:5px 0 5px 0;}
.mp3_links {margin:30px 30px 0 20px; padding:5px 0 0 5px; background-color:#fef5e7;}
.mp3_links_title {margin:0 0 0 0; padding:0;}
.mp3_links_content {margin:0 0 0 15px; padding:0;}
.disp_table {margin:5px 0 0 25px;}

.blgr_wrapper {margin:-10px 0 0 40px; border:0 solid #bbb; padding:0; background-color:#eaecee; background-image:linear-gradient(to right, #eaecee, #ffffff);}
.blgr_wrapper .blgr_wrapper_content { padding:5px 0 5px 5px; line-height:16px;}
.blgr_wrapper .blgr_wrapper_content li { list-style-type:none; display:inline;}
.blgr_wrapper .blgr_wrapper_content td { border:none;}
.blgr_wrapper .blgr_wrapper_content table,tr,th,td {background-color:none;}
.blgr_wrapper .blgr_wrapper_content td:hover {background-color:#f5f5f5;}
.blgr_wrapper A:link {text-decoration:none;}

.blgr_item_head {margin:20px 0 0 25px; line-height:20px; font-size:14px; font-weight:normal; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}

/* ************************************************************* */
#blgr_niv { color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_niv .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_niv table, th, td { border: 1px solid black; border-collapse:collapse; }

/* ************************************************************* */
#blgr_rp { color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_rp .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_rp table, th, td { border: 1px solid black; border-collapse:collapse; }

/* ************************************************************* */
#blgr_katha { color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_katha .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_katha table, th, td { border: 1px solid black; border-collapse:collapse; }


/* ************************************************************* */
#blgr_pp2020 { color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_pp2020 .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_pp2020 table, tr, th, td {border-top:none; border-bottom:1px solid #ddd; border-collapse:collapse; }
#blgr_pp2020 table,tr,th, td {padding:4px; background-color:#f5f5f5;}
#blgr_pp2020 table,tr:hover {background-color:#e5e5e5;}

/* ************************************************************* */
#blgr_show1 {color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show1 .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show1 table, th, td { border: 1px solid black; border-collapse:collapse; }

/* ************************************************************* */
#blgr_show2_plan {color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show2_plan .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show2_plan table, th, td { border: 1px solid black; border-collapse:collapse; }


/* ************************************************************* */
#blgr_show2 {color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show2 .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show2 table, th, td { border: 1px solid black; border-collapse:collapse; }


/* ************************************************************* */
#blgr_show3_plan {color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show3_plan .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show3_plan table, th, td { border: 1px solid black; border-collapse:collapse; }


/* ************************************************************* */
#blgr_show3 {color:black; margin:5px 0 20px 50px; padding:5px 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show3 .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show3 table, th, td { border: 1px solid black; border-collapse:collapse; }



/* ************************************************************* */
.blgr_show_pic {color:black; margin:20px 0 20px 100px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}

/* ************************************************************* */
#blgr_show3 {color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show3 .blgr_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5;  background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
#blgr_show3 table, th, td { border: 1px solid black; border-collapse:collapse; }


.small_text {display:inline; font-size:10px; font-weight:normal;}
.hl_yellow {display:inline; background-color:#FFFF00;}

/* .blgr_text {hsl(0, 40%, 50%); line-height:20px; margin:5px 0 5px 50px; font-size:14px; max-width:700px; background-color:#f5f5f5; } */
.blgr_text {line-height:20px; margin:5px 0 5px 50px; padding-left:10px; font-size:12px; max-width:700px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.blgr_title {color:black; margin:5px 0 5px 10px; font-weight:normal; line-height:16px; font-size:16px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}


input[type=text]{ border:none; border-bottom:2px solid red; }
.input_id {width:30px;}
.input_part {width:100px;}
.input_item {width:200px;}
.input_rdy {width:30px;}
.input_note {width:200px;}

.rprog_practice {line-height:20px; margin:5px 0 5px 50px; padding-left:10px; font-size:12px; max-width:700px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.rprog_practice audio {width:600px; height:20px; display:block; margin:0px 0 1px 20px;}


.upload_picture {line-height:20px; margin:5px 0 5px 50px; padding-left:10px; font-size:12px; max-width:1550px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.upload_picture img {display:inline-block; margin: 3px 3px 3px 3px;}

.display_audio {line-height:20px; margin:5px 0 5px 50px; padding-left:10px; font-size:10px; max-width:1550px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.display_audio img {display:inline-block; margin: 3px 3px 3px 3px;}

.display_indented_small_text {line-height:14px; margin:5px 0 5px 50px; padding-left:10px; font-size:10px; max-width:1550px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}


/* Container holding the image and the text */
.container {position: relative; display:inline-block;}
.top-left {position: absolute; bottom: 8px; left: 8px;}

/* Audio file container holding the audio file name */
.audio_container {position: relative; display:inline-block; margin-left:10px; width:150px;}


.feedback_on_audio_uploads {line-height:20px; margin:5px 0 5px 50px; padding-left:10px; font-size:12px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}

.feedback_on_audio_uploads ul {margin:10px;}
.feedback_on_audio_uploads li {font-size:10px; line-height:12px; list-style-type:circle;}

.green{display:inline-block; color:green; font-size:12px;}
.red{display:inline-block; color:red;}
.blue{display:inline-block; color:blue;}
.orange{display:inline-block; color:orange;}


.strk {position: relative; color: red; font-weight: bold; font-size:13px;}
.strk:before {
    position: absolute;
    content: '';
    left: 0;
    top: 45%;
    right: 0;
    border-top: 2px solid;
    border-color: inherit;
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    transform: skewY(-10deg);
  }


#blnndm_flyer {color:black; margin:5px 0 20px 50px; padding:0 0 0 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}


.blgr_item_head_cramp {margin:20px 0 0 25px; line-height:5px; font-size:14px; font-weight:normal; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}

.scratch {
  display:inline-block;
  width: 10px;
  height: 5px;
  background: red;
  position: relative;
  animation: show_draw 10s 2;
  transparent:50%;
  animation-direction: forward;
}


@keyframes show_draw {
  0%   {background: red; left: 0px; top: 0px;}
  25%  {background: red; left: 400px; top: 0px;}
  50%  {background: red; left: 0px; top: 0px;}
  75%  {background: red; left: 400px; top: 0px;}
  100% {background: red; left: 0px; top: 0px;}
}



.blgr_blnndm_text {line-height:20px; margin:5px 0 5px 50px; padding-left:10px; font-size:12px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}

.blgr_blnndm_text table, th, td { border: 1px solid black; border-collapse:collapse; }


.slides_item_head {margin:5px 0 0 25px; line-height:20px; font-size:14px; font-weight:normal;}
.slides_item_head_old {display:inline; margin:5px 0 0 25px; line-height:20px; font-size:14px; font-weight:normal; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.slides_menu_list {display:inline; line-height:20px; margin:5px 0 5px 0px; padding-left:1px; font-size:12px; max-width:700px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.telugubadi_menu_row_head {width:200px; text-align:right; display:inline; color:#c1990d; padding:0px 10px 0px 0px;}

.padyalu_note {font-size:11px; color:gray; margin:5px 0 10px 30px;}

.ipani_slide {
	background-color:#F0DC7D; 
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	font-weight:normal;
	font-style:normal;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_gray_small {
	background-color:#F7F7F7; 
	color:black; height:350px; width:100%; padding:1%; margin-top:1rem;
	border:20px solid lightyellow;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_yellow {
	background-color:#F0DC7D; 
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_yellow2 {
	background-color:#FFDA65; 
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_yellow3 {
	background-color:#F4ED85; 
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}


.ipani_slide_yellow2 {
	background-color:#EDD455; 
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_pink {
	background-color:#F1D0C7; 
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_orange {
	background-color:#FF673E;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_orange2 {
	background-color:#C3755B;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_blue {
	background-color:#73A5C0;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_blue2 {
	background-color:#4D6474;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_blue3 {
	background-color:#202D50;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_blue4 {
	background-color:#6EA0BB;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}


.ipani_slide_purple {
	background-color:#4D287F;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}


.ipani_slide_green {
	background-color:#6AA274;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_green2 {
	background-color:#1E2F20;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_green3 {
	background-color:#4BD4A6;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_gray {
	background-color:#1C1F24;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

.ipani_slide_red {
	background-color:#722D2F;
	color:black; height:510px; width:100%; padding:1%; margin-top:1rem;
	font-family:'Suranna', 'SreeKrushnadevaraya', Helvetica;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}









.ipani_text_middle{
	vertical-align:middle;
	font-size:2.5rem;
	margin-bottom:0px;
}

.ipani_text_block_inline{
	display:inline;
	font-size:2rem;
}

.conf {margin:5px 0 5px 50px;}




@import url(http://fonts.googleapis.com/css?family=Montserrat);
.cssload-loading {
	text-align:center;
	margin: 49px auto;
	color: rgb(0,0,0);
	font-size: 2em;
	font-family: "Montserrat", sans-serif;
	animation: cssload-breathe 8.05s ease infinite;
		-o-animation: cssload-breathe 8.05s ease infinite;
		-ms-animation: cssload-breathe 8.05s ease infinite;
		-webkit-animation: cssload-breathe 8.05s ease infinite;
		-moz-animation: cssload-breathe 8.05s ease infinite;
}
@keyframes cssload-breathe {
	0% { letter-spacing: 0; text-shadow: 0 0 1px white; }
	30% { color: transparent; }
	50% { letter-spacing: 97px; font-size: 0; text-shadow: 0 0 6px white; }
	60% { color: transparent; }
	100% { letter-spacing: 0; text-shadow: 0 0 1px white; }
}
@-o-keyframes cssload-breathe {
	0% { letter-spacing: 0; text-shadow: 0 0 1px white; }
	30% { color: transparent; }
	50% { letter-spacing: 97px; font-size: 0; text-shadow: 0 0 6px white; }
	60% { color: transparent; }
	100% { letter-spacing: 0; text-shadow: 0 0 1px white; }
}
@-ms-keyframes cssload-breathe {
	0% { letter-spacing: 0; text-shadow: 0 0 1px white; }
	30% { color: transparent; }
	50% { letter-spacing: 97px; font-size: 0; text-shadow: 0 0 6px white; }
	60% { color: transparent; }
	100% { letter-spacing: 0; text-shadow: 0 0 1px white; }
}
@-webkit-keyframes cssload-breathe {
	0% { letter-spacing: 0; text-shadow: 0 0 1px white; }
	30% { color: transparent; }
	50% { letter-spacing: 97px; font-size: 0; text-shadow: 0 0 6px white; }
	60% { color: transparent; }
	100% { letter-spacing: 0; text-shadow: 0 0 1px white; }
}
@-moz-keyframes cssload-breathe {
	0% { letter-spacing: 0; text-shadow: 0 0 1px white; }
	30% { color: transparent; }
	50% { letter-spacing: 97px; font-size: 0; text-shadow: 0 0 6px white; }
	60% { color: transparent; }
	100% { letter-spacing: 0; text-shadow: 0 0 1px white; }
}




/*
<div class="cssload-preloader"> <span>Write on pages </span> <span>20</span> <span style="color:magenta;">37</span>,<span style="color:blue;">54</span>,<span style="color:red;">78</span>
*/
.cssload-preloader {
	font-family: 'sree_krushnadevarayaregular', Arial, Tahoma;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10;
	display: box;
		display: -o-box;
		display: -ms-box;
		display: -webkit-box;
		display: -moz-box;
	display: flex;
		display: -o-flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: -moz-flex;
	box-pack: center;
		-o-box-pack: center;
		-ms-box-pack: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
	justify-content: center;
		-o-justify-content: center;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	box-align: center;
		-o-box-align: center;
		-ms-box-align: center;
		-webkit-box-align: center;
		-moz-box-align: center;
	align-items: center;
		-o-align-items: center;
		-ms-align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
	transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
	perspective: 487px;
		-o-perspective: 487px;
		-ms-perspective: 487px;
		-webkit-perspective: 487px;
		-moz-perspective: 487px;
	overflow: hidden;
	animation: wobble 5.75s ease-in-out infinite;
		-o-animation: wobble 5.75s ease-in-out infinite;
		-ms-animation: wobble 5.75s ease-in-out infinite;
		-webkit-animation: wobble 5.75s ease-in-out infinite;
		-moz-animation: wobble 5.75s ease-in-out infinite;
	padding-bottom: 2em;
}
.cssload-preloader > span {
	font-size: 16px;
	animation: 5.75s ease-in-out infinite;
		-o-animation: 5.75s ease-in-out infinite;
		-ms-animation: 5.75s ease-in-out infinite;
		-webkit-animation: 5.75s ease-in-out infinite;
		-moz-animation: 5.75s ease-in-out infinite;
	color: transparent;
	text-shadow: 0 0 0px rgb(0,0,0);
}
span:nth-child(-n+3) {
	animation-delay: -2.88s;
		-o-animation-delay: -2.88s;
		-ms-animation-delay: -2.88s;
		-webkit-animation-delay: -2.88s;
		-moz-animation-delay: -2.88s;
}
span:nth-child(1),
span:nth-last-child(1) {
	animation-name: blur-1;
		-o-animation-name: blur-1;
		-ms-animation-name: blur-1;
		-webkit-animation-name: blur-1;
		-moz-animation-name: blur-1;
}
span:nth-child(2),
span:nth-last-child(2) {
	animation-name: blur-2;
		-o-animation-name: blur-2;
		-ms-animation-name: blur-2;
		-webkit-animation-name: blur-2;
		-moz-animation-name: blur-2;
}
span:nth-child(3),
span:nth-last-child(3) {
	animation-name: blur-3;
		-o-animation-name: blur-3;
		-ms-animation-name: blur-3;
		-webkit-animation-name: blur-3;
		-moz-animation-name: blur-3;
}
@keyframes blur-1 { 50% { text-shadow: 0 0 0.15em rgb(0,0,0); } }
@-o-keyframes blur-1 { 50% { text-shadow: 0 0 0.15em rgb(0,0,0); } } 
@-ms-keyframes blur-1 { 50% { text-shadow: 0 0 0.15em rgb(0,0,0); } } 
@-webkit-keyframes blur-1 { 50% { text-shadow: 0 0 0.15em rgb(0,0,0); } }
@-moz-keyframes blur-1 { 50% { text-shadow: 0 0 0.15em rgb(0,0,0); } } 
@keyframes blur-2 { 50% { text-shadow: 0 0 0.075em rgb(0,0,0); } } 
@-o-keyframes blur-2 { 50% { text-shadow: 0 0 0.075em rgb(0,0,0); } }
@-ms-keyframes blur-2 { 50% { text-shadow: 0 0 0.075em rgb(0,0,0); } }
@-webkit-keyframes blur-2 { 50% { text-shadow: 0 0 0.075em rgb(0,0,0); } } 
@-moz-keyframes blur-2 { 50% { text-shadow: 0 0 0.075em rgb(0,0,0); } } 
@keyframes blur-3 { 50% { text-shadow: 0 0 0.05em rgb(0,0,0); } } 
@-o-keyframes blur-3 { 50% { text-shadow: 0 0 0.05em rgb(0,0,0); } }
@-ms-keyframes blur-3 { 50% { text-shadow: 0 0 0.05em rgb(0,0,0); } } 
@-webkit-keyframes blur-3 { 50% { text-shadow: 0 0 0.05em rgb(0,0,0); } } 
@-moz-keyframes blur-3 { 50% { text-shadow: 0 0 0.05em rgb(0,0,0); } }
@keyframes wobble { from, to { transform: rotateY(-45deg); } 50% { transform: rotateY(45deg); } }
@-o-keyframes wobble { from, to { -o-transform: rotateY(-45deg); } 50% { -o-transform: rotateY(45deg); } }
@-ms-keyframes wobble { from, to { -ms-transform: rotateY(-45deg); } 50% { -ms-transform: rotateY(45deg); } } 
@-webkit-keyframes wobble { from, to { -webkit-transform: rotateY(-45deg); } 50% { -webkit-transform: rotateY(45deg); } }
@-moz-keyframes wobble { from, to { -moz-transform: rotateY(-45deg); } 50% { -moz-transform: rotateY(45deg); } }


/* quiz ****************************************************** */
#nb_quiz {background-color:white;}
.qz_wrapper { margin-left:1.2rem; margin-top:1.0rem; padding:0; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.qz_header { border:0 solid #bbb; font-weight:bold; padding-left:10px;/*height:50px;*/ /* Height of the div */ /* padding:30px;*/ /* Inside the border */ }
.qz_titles { margin-top:0; padding-bottom:0; }
.qz_titles div { padding:0; border:0 solid #bbb; float:left; }
.qz_titles-1 { width:100%; padding-left:5px; }
.qz_titles-2 { margin-left:0; width:200px; padding-left:5px; }
.qz_titles-3 { margin-left:0; width:200px; padding-left:5px; }
.qz_content-1 { width:100%; padding-left:5px; }
.qz_content-2 { margin-left:0; width:100px; padding-left:5px; }
.qz_content-3 { margin-left:0; width:100px; padding-left:5px; }
.quiz { color:black; margin:5px 0 5px 50px; padding:0 0 10px 0; line-height:20px; font-size:14px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
/* .quiz .quiz_title { color:black; margin:20px 0 10px 10px; padding-top:10px; font-weight:bold; line-height:20px; font-size:20px; max-width:800px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}*/
.quiz .quiz_text { color:hsl(0, 40%, 50%); line-height:20px; margin:5px 0 5px 50px; font-size:14px; max-width:700px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.quiz .quiz_prasnalu { color:black; line-height:20px; margin:10px 0 5px 50px; font-size:14px; max-width:500px; background-color:#f5f5f5; background-image:linear-gradient(to right, #f5f5f5, #ffffff);}
.qz_content-list {margin:0 0 0 0.2rem; padding:0 0 0 0.2rem; overflow:hidden; }
.qz_content-list a:hover {background-color:#121134; color:white;}
.qz_content-1 ul {list-style-type:none; margin:0; padding:0 0 0 20px; overflow:hidden; }
.qz_content-1 ul li {display:inline; float:left;}
.qz_content-1 ul li a:hover {background-color:#121134; color:white;}


/* The radiocontainer */
.radiocontainer { background-color:#fff1f1; display: block; position: relative; padding:10px 10px 10px 50px; margin-bottom: 1px; 
			cursor: pointer; /* font-size: 1.5rem; */
			-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; word-wrap: break-word; }
/* Hide the browser's default radio button */
.radiocontainer input { position: absolute; opacity: 0; cursor: pointer; }
/* Create a custom radio button */
.checkmark { position: absolute; top: 1.0rem; left: 1.0rem; height: 1.2rem; width: 1.2rem; background-color: #fff; border-radius: 50%; }
.checkedlabel { background-color:#ddd; }
/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .checkmark { /*nothing*/ }
.radiocontainer:hover { background-color: #ddd; }
/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .checkmark { background-color: #2196F3; }
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none; }
/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .checkmark:after { display: block; }
/* Style the indicator (dot/circle) */
.radiocontainer .checkmark:after { top: 0.5rem; left: 0.5rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; /* background: white; */ }
@media screen and (max-width:600px) { .quizresultbtn { display:block; width:100%; } }


/* The fakeradiocontainer */
.fakeradiocontainer { background-color:#fff1f1; display: block; position: relative; padding:10px 10px 10px 50px; margin-bottom: 1px; 
			cursor: pointer; /*font-size: 18px; */
			-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; word-wrap: break-word; }
/* Hide the browser's default radio button */
.fakeradiocontainer input { position: absolute; opacity: 0; cursor: pointer; }
/* On mouse-over, add a grey background color */
.fakeradiocontainer:hover { background-color: #ddd; }
/* When the radio button is checked, add a blue background */
/* Style the indicator (dot/circle) */
.fakeradiocontainer .checkmark:after { top: 0.5rem; left: 0.5rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; /*background: white;*/ }




/* The checkmarkcontainer */
.checkmarkcontainer { background-color:#fff1f1; display: block; position: relative; padding:10px 10px 10px 50px; margin-bottom: 1px; 
			cursor: pointer; /* font-size: 1.5rem; */
			-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; word-wrap: break-word; }
/* Hide the browser's default radio button */
.checkmarkcontainer input { position: absolute; opacity: 0; cursor: pointer; }
/* Create a custom radio button */
/*.rightmark { position: absolute; top: 15px; left: 15px; height: 19px; width: 19px; background-color: #fff; border-radius: 50%; }*/
.rightmark { position: absolute; top: 1.0rem; left: 1.0rem; height: 1.0rem; width: 1.0rem; background-color: #fff; -webkit-transform: rotate(45deg); transform:rotate(45deg); }
.checkedlabel { background-color:#ddd; }
/* On mouse-over, add a grey background color */
.checkmarkcontainer:hover input ~ .rightmark { /*nothing*/ }
.checkmarkcontainer:hover { background-color: #ddd; }
/* When the radio button is checked, add a blue background */
.checkmarkcontainer input:checked ~ .rightmark { background-color: #2196F3; }
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none; }
/* Show the indicator (dot/circle) when checked */
.checkmarkcontainer input:checked ~ .rightmark:after { display: block; }
/* Style the indicator (dot/circle) */
.checkmarkcontainer .rightmark:after { top: 6px; left: 6px; width: 7px; height: 7px; -webkit-transform: rotate(45deg); transform:rotate(45deg); }
@media screen and (max-width:600px) { .quizresultbtn { display:block; width:100%; } }


/* The fakecheckmarkcontainer */
.fakecheckmarkcontainer { background-color:#fff1f1; display: block; position: relative; padding:10px 10px 10px 50px; margin-bottom: 1px; 
			cursor: pointer; /*font-size: 18px; */
			-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; word-wrap: break-word; }
/* Hide the browser's default radio button */
.fakecheckmarkcontainer input { position: absolute; opacity: 0; cursor: pointer; }
/* On mouse-over, add a grey background color */
.fakecheckmarkcontainer:hover { background-color: #ddd; }
/* When the radio button is checked, add a blue background */
/* Style the indicator (dot/circle) */
.fakecheckmarkcontainer .checkmark:after { top: 0.5rem; left: 0.5rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; /*background: white;*/ }




#submitbuttoncontainer { position:relative; padding:10px 0 10px 0; text-align:center; }
.submitbutton { background-color:#4CAF50; padding:5px 20px 5px 20px !important; font-size:14px; }
.timedisplay{ margin-top:10px; text-align:center; }
.timedisplay input[type=text]{ border:none; width:5.0rem;}
.quiz_results{margin-top:1.0rem; margin-bottom:1.0rem; margin-left:9.0rem; margin-right:3.0rem; text-align:center; padding:0.5rem 0.1rem 0.5rem 0.1rem; border-style:solid; border-color:green; border-width:0.5rem;}

.quiz_results_red{margin-top:1.0rem; margin-bottom:1.0rem; margin-left:3.0rem; margin-right:3.0rem; text-align:center; color:black; padding:0.5rem 0.1rem 0.5rem 0.1rem; border-style:solid; border-color:red; border-width:0.5rem;}

.quiz_questions {margin-left:1.0rem; padding:5px; }
.quiz_questions ol {margin-left:1.5rem; margin-top:1.5rem; margin-bottom:1.0rem;}
.quiz_questions ol li{margin-left:1.0rem; margin-top:1.5rem; margin-bottom:1.5rem;}
.quiz_questions hr {border:0px dashed gray; margin-right:20px;}
.quiz_questions input[type=text] {border:none; border-bottom:2px solid black; text-align:center; autocomplete:off;}
.quiz_questions .timedisplay input[type=text]{ border:none; width:5.0rem;}

.quiz_result_send_email {margin-top:1.0rem; margin-bottom:1.0rem; color:darkgray; text-align:center; line-height:1.0rem;}
.quiz_result_submit_button { background-color:#FFE000; padding:5px 10px 5px 10px !important; font-size:14px; }
.report_score {font-size:1.0rem; color:green; display:inline;}
.report_score_red {font-size:1.0rem; color:red; display:inline;}
.congrats {display:inline; font-size:2.0rem; margin-bottom:0.2rem; color:green; font-family:'SreeKrushnadevaraya';}
.encourage {color:blue; font-family:Suranna; }

.quiz_title{text-align:center; font-size:1.2rem; font-family:'SreeKrushnadevaraya';}
#back_to_list_line {text-align:center; margin-top:1.0rem; margin-bottom:1.0rem;}
#back_to_list_left {float:left; margin-left:1.0rem;}
#back_to_list_right {float:right; margin-right:1.0rem;}
#back_to_list_center {margin:0 auto;}

.padyam_title{text-align:center; font-size:1.2rem; font-family:'SreeKrushnadevaraya';}

.quiz_audio { display:inline; margin-left:0.5rem; margin-right:0.5rem;}
.question_audio { display:inline; margin-left:0.5rem; margin-right:0.5rem;}
.qz_image { margin-left:auto; margin-right:auto; display:block;}
.qz_image img { margin-left:auto; margin-right:auto; display:block;}
.quiz_image { margin-left:0.5rem; margin-right:0.5rem; max-width:70%;}
.quiz_image img { margin-left:0.5rem; margin-right:0.5rem; max-width:70%;}
.quiz_video { margin-left:5.0rem; margin-right:0.5rem; max-width:70%;}
.quiz_video img { margin-left:0.5rem; margin-right:0.5rem; max-width:70%;}
.question_image { display:inline; margin-left:0.5rem; margin-right:0.5rem; max-width:400px;}
.question_image img { display:inline-block; margin-left:0.5rem; margin-right:0.5rem; max-width:200px;}
.image_credits {font-size:0.4rem; line-height:0.4rem; color:gray; width:80%}
.image_credits a { text-decoration:none; color: gray; } 
.image_credits a:link { text-decoration:none; color: gray; } 
.g-recaptcha-container {text-align:center; margin-top:1rem;}
.g-recaptcha{text-align:center; position:relative; display:inline-block;}

.show_login_link{text-align:center; margin-top:3rem; margin-bottom:3rem;}
.user_menu_container{margin-left:2rem; background:linear-gradient(to right, rgba(240,240,240,1.0), white); }
.user_menu_item{display:inline-block; margin-left:0.5rem; margin-right:0.5rem;}
.user_menu_item a {text-decoration:none; color:blue;}
.user_chart_container{margin-left:3rem; margin-top:1rem; }
#user_chart {margin-left:3.5rem; margin-top:1rem; }
.typing_help {font-size:0.8rem; text-align:center}
.typing_help a {text-decoration:none; color:blue;}



#dataframeInput {
    background-image: url('/icons/bhutaddam.png');
    background-position: 1px 1px;
    background-repeat: no-repeat;
    width: 25%;
    font-size: 16px;
    padding: 12px 20px 12px 70px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

#dataframeTable {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 14px;
}

#dataframeTable th, #dataframeTable td {
    text-align: left;
    padding: 5px;
}

#dataframeTable tr {
    border-bottom: 1px solid #ddd;
}

#dataframeTable tr.header, #dataframeTable tr:hover {
    background-color: #f1f1f1;
}


.color_orange{color:orange;}
.color_red{color:red;}
.color_green{color:green;}

/*.logout_bar {background:#E5E8E8; padding-left:1rem; margin-left:1rem; padding-right:1rem;} */
.logout_bar {background:#E5E8E8; display:flex; justify-content:space-between; padding-left:1rem; padding-right:1rem; position:sticky; top:0px;}
.logout_bar left {float:left; border-left:1px;}
.logout_bar right {float:right; border-right:1px;}

.pdf_decor { background: #859866; text-decoration: none; padding: 8px 15px; border-radius: 5px; color: #fff; }
.display_chapters_homework       {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_users                   {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_users_for_action        {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_my_info                 {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_user_stats              {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_qz_list                 {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_qz_results_smry         {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_qz_results_dtl          {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_qz_submission_smry         {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.display_qz_submission_dtl          {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.submit_my_homework_title	 {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; margin-left:1rem; margin-right:1rem;}
.submit_my_homework	         {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem;  margin-right:1rem;}
.submit_my_feedback_title	 {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; margin-left:1rem;}
.submit_my_feedback	         {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }

.display_chapters_homework_title {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.display_users_title             {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; margin-bottom:0.3rem;}
.display_users_for_action_title  {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; color: #E16354;}
.display_my_info_title           {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.display_user_stats_title        {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.display_qz_list_title           {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.display_qz_results_smry_title   {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.display_qz_results_dtl_title    {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.display_qz_submission_smry_title   {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.display_qz_submission_dtl_title    {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }

.display_current_week_info_title{background: #EAF2F8; padding:1rem; border-radius:5px; font-size:2rem; margin-left:1rem; }
.display_current_week_info 	{font-size:1rem; margin-left:1rem; color:gray; margin-bottom:1rem; margin-top:1rem;}

.display_acct_under_review       {padding:0.2rem; font-size:1rem; font-weight:bold; margin:2rem; width:75%;}
.display_acct_under_review_data  {padding:0.2rem; font-size:1.4rem; margin:2rem; width:50%;}



.display_msgs_for_action_title {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:1rem; }
.display_msgs_for_action {padding:1rem; border-radius:5px; font-size:1rem; margin-left:2rem; }

.footer {margin-top:3rem; padding:0.2rem; margin-bottom:2rem; text-align:center; font-size:0.8rem; color:darkgray;}
.slide_footer {margin-top:1rem; padding:0.2rem; margin-bottom:1rem; text-align:center; font-size:0.8rem; color:black;}

.msgs-load-latest {margin: 0 auto; border: 0px gray; margin-left:1rem; padding-left:0.4rem; padding-right:0.4rem; font-size:1.0rem; border-radius:5px; background: #ecf9f2;}
.msgs-load-latest:hover{ cursor: pointer; }

.msgs_title{ padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.msgs_container{ margin: 0 auto; border: 0px gray; margin-left:1rem; padding: 1rem; border-radius:5px;}
.pst_msgs_container{ width: 75%; margin: 0 auto; border: 0px solid black; padding: 10px 0px; }
.pst_msgs_title{ padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }
.msg_area { width: 97%; padding: 5px; border: 1px solid gray; margin-bottom: 10px; }
.msg_area  h2{ letter-spacing: 1px; font-size:1.5rem; font-weight: normal; font-family: sans-serif; }
.msg_area  p{ letter-spacing: 1px; text-overflow: ellipsis; line-height: 1rem; }
.msgs-load-more{ width: 99%; background: #f0f5f5; text-align: center; color: white; padding: 10px 0px; font-family: sans-serif; }
.msgs-load-more:hover{ cursor: pointer; }
.more{ color: blue; text-decoration: none; letter-spacing: 1px; font-size: 16px; }

.msg_ts_last_pull {margin-left: 3rem;}




/* Dropdown Button */
.star_dropbtn { border: none; }
/* The container <div> - needed to position the dropdown content */
.star_dropdown { position: relative; display: inline-block; }
/* Dropdown Content (Hidden by Default) */
.star_dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
/* Links inside the dropdown */
.star_dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
/* Change color of dropdown links on hover */
.star_dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.star_dropdown:hover .star_dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.star_dropdown:hover .star_dropbtn {background-color: #3e8e41;}

.ch_hw_links {line-height:2rem; margin:1.2rem; font-size:1.5rem; background:#effff2; padding:0.3rem;}

.slide_deck_menu {background: #EAF2F8; padding:1rem; border-radius:5px; font-size:1rem; margin-left:1rem; }
.slide_deck_menu_title {padding:0.2rem; font-size:2rem; font-weight:bold; margin-top:2rem; }


.css-serial {counter-reset: serial-number;}
.css-serial td:first-child:before {counter-increment: serial-number;  content: counter(serial-number);}

/*More quiz control*/
/*
* { box-sizing: border-box; }
body { background-color: #f1f1f1; }
#quizform { background-color: #ffffff; margin: 100px auto; font-family: Raleway; padding: 40px; width: 70%; min-width: 300px; }
h1 { text-align: center;  }
input { padding: 10px; width: 100%; font-size: 17px; font-family: Raleway; border: 1px solid #aaaaaa; } 
input.invalid { background-color: #ffdddd; !important} 
.tab { display: none; }
button { background-color: #04AA6D; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; !important}
button:hover { opacity: 0.8; !important}
#prevBtn { background-color: #bbbbbb; !important}
.step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none;  border-radius: 50%; display: inline-block; opacity: 0.5; }
.step.active { opacity: 1; }
.step.finish { background-color: #04AA6D; }
*/

.quiz_question_decor {border:5px solid #abc; border-radius:2%; margin-left:0.5rem; margin-bottom:2rem; padding:1rem;}

a.word:hover { position: relative; }
a.word meaning { display:none; }
a.word:hover meaning { border: #666 2px dotted; padding: 5px 5px 5px 5px; display: block; z-index: 100;
	background: green; color:white; bottom:100%; left:0%; width: 25rem; line-height:1.5rem; position: absolute; text-decoration: none; font-size:1rem; }

table {margin:1rem; padding:1rem;}
th, td {padding:0.2rem; padding-left:0.4rem;}

.ts10 th, .ts10 td { padding-left:10px; padding-top:10px; padding-right:10px;}
.ts9 th, .ts9 td { padding-left:9px; padding-top:9px; padding-right:9px;}
.ts8 th, .ts8 td { padding-left:8px; padding-top:8px; padding-right:8px;}
.ts7 th, .ts7 td { padding-left:7px; padding-top:7px; padding-right:7px;}
.ts6 th, .ts6 td { padding-left:6px; padding-top:6px; padding-right:6px;}
.ts5 th, .ts5 td { padding-left:5px; padding-top:5px; padding-right:5px;}
.ts4 th, .ts4 td { padding-left:4px; padding-top:4px; padding-right:4px;}
.ts3 th, .ts3 td { padding-left:3px; padding-top:3px; padding-right:3px;}
.ts2 th, .ts2 td { padding-left:2px; padding-top:2px; padding-right:2px;}
.ts1 th, .ts1 td { padding-left:1px; padding-top:1px; padding-right:1px;}

.tss4 th, .tss4 td { border-top:none; border-bottom:none; border-right:none; padding-left:4px; padding-top:4px; padding-right:4px;}

.icd {display:inline; cursor:pointer;  margin-left:0.1rem; border-radius:0px; padding:1rem;background-color:lightgreen;}
.icdo {display:inline; cursor:pointer; margin-left:0.1rem; border-radius:0px; padding:1rem;background-color:orange;}
.icd1 {display:inline; cursor:pointer; margin-left:0.1rem; border-radius:0px; padding:1rem;background-color:#FFCE33;}
.icd2 {display:inline; cursor:pointer; margin-left:0.1rem; border-radius:0px; padding:1rem;background-color:#4BBAAB;}
.icd3 {display:inline; cursor:pointer; margin-left:0.1rem; border-radius:0px; padding:1rem;background-color:#836EB4;}
.icd4 {display:inline; cursor:pointer; margin-left:0.1rem; border-radius:0px; padding:1rem;background-color:#D48383;}
.blink {animation: blinker 2s linear infinite;}
@keyframes blinker {50% {opacity: 0;}}
.blinkme {animation: blinkmesplash 1s infinite;}
@keyframes blinkmesplash {50% { opacity: 0;}}

.tm_page { width: 11in; height: 8.5in; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 20px; position: relative; /* Needed for fold effect */ margin-top:3rem; }
.tm_section { display: flex; margin-bottom: 20px; }
.tm_section img { width: 40%; margin-right: 20px; }
.tm_section:nth-child(2) img { /* Swap image position for second section */ margin-left: 20px; margin-right: 0; }
.tm_section .text { flex: 1; /* Fill remaining space */ }
.tm_page:after { content: ""; position: absolute; bottom: 0; right: 0; width: 20px;
	height: 20px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Fold shadow */
	transform: rotate(45deg); /* Fold angle */
	z-index: -1; /* Underneath the page */
}
.tm-page-number {
	position: absolute; top: 30px; right: 20px; font-size: 2em; font-weight: bold;
	background-color: #F1C40F; border-radius: 0% 0% 0% 0%; padding: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	text-align: center; /* Center the page number */
	width: fit-content; /* Adjust width to fit content */
}

/* Notebook holes (choose one method) */
/* Method 1: Using borders and shadows */
.page-holes {
	position: absolute; top: 0; left: 0;
	width: 30px; /* Adjust width as desired */
	height: 100%; background-color: white;
	border-left: 1px solid black; /* Outline of the holes */
	box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2), /* Left shadow */
		1px 0px 0px rgba(0, 0, 0, 0.2); /* Right shadow */
}

/* Method 2: Using a background image (replace with your image path) */
.page-holes-bg {
	position: absolute; top: 0; left: 0;
	width: 5px; /* Adjust width as desired */
	height: 100%;
	background-image: url('path/to/your/hole-pattern.png');
	background-repeat: repeat-y;
}
.tm-title-band {
	position: absolute; top: 0; left: 0; width: 100%; height: 50px;
	background-color: #ff5733; padding: 10px 20px; display: flex;
	justify-content: center; align-items: center;
}
.tm-title-band h1 { font-size: 2em; margin: 0; color: black; }
.text-slider { width: 100%; /* Adjust width if needed */ margin-bottom: 20px;}
.text-slider .slide { display: none; /* Initially hide all slides */ padding: 20px; border: 1px solid #ccc;  border-radius: 5px;}
.text-slider .slide:nth-child(1) { display: block; /* Show first slide initially */ }
.text-slider .navigation { display: flex; justify-content: space-between; margin-top: 10px;}
.text-slider .navigation button { background-color: #ccc; /* Adjust button color */ border: none; padding: 5px 10px; cursor: pointer; }
.text-slider .navigation button:hover { background-color: #ddd; /* Change background on hover */ }
.text-slider .navigation button:disabled { opacity: 0.5; /* Disable button styling */ cursor: default; }
.tm_footnote { position: absolute; bottom: 20px; right: 20px; font-size: 0.8em; color: green; text-align: right; }


#wikiform form {
  display: flex; /* Arrange elements horizontally */
  flex-wrap: wrap; /* Allow elements to wrap on smaller screens */
  width: 95%; /* Adjust form width as needed */
  margin: 0 auto; /* Center the form horizontally */
  padding: 20px; border: 1px solid #ddd; border-radius: 4px; }
#wikiform label { display: block; margin-bottom: 5px; font-weight: bold; }
#wikiform input[type='text'], textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 16px; }
#wikiform textarea { height: 200px; }
#wikiform input[type='file'] { padding: 5px; }
#wikiform button[type='submit'] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
#wikiform button[type='submit']:hover { background-color: #45A049; }

.file-browser { display: flex; background-color: #f5f5f5; min-height: 100vh; }
/* File list container on the left */
.file-list { width: 25%; /* Adjust width as needed */ padding: 15px; border-right: 1px solid #ddd; }
/* Heading for the file list */
.file-list h2 { margin-bottom: 10px; color: #333; /* Dark gray text */ }
/* Individual file links within the list */
.file-link { text-decoration: none; color: #333; display: block; padding: 5px; }
/* Hover effect for file links */
.file-link:hover { background-color: #eee; }
.file-content { flex: 1; /* Take up remaining space */ padding: 15px; }
.file-content h2 { margin-bottom: 10px; color: #333; }
pre {
  white-space: pre-wrap; /* Preserve line breaks */
  overflow-x: auto; /* Enable horizontal scrolling for long lines */
  background-color: #eee; /* Light gray background for code */
  padding: 10px; border: 1px solid #ddd; border-radius: 4px; /* Rounded corners */
  font-family:Arial, Helvetica, Times;
}

#wiki-browser { display: flex; background-color: #f5f5f5; min-height: 100vh; }
/* File list container on the left */
#wiki-list { width: 25%; /* Adjust width as needed */ padding: 15px; border-right: 1px solid #ddd; }
/* Heading for the file list */
#wiki-list h2 { margin-bottom: 10px; color: #333; /* Dark gray text */ }
/* Individual file links within the list */
.wiki-link { text-decoration: none; color: #333; display: block; padding: 5px; }
/* Hover effect for file links */
#wiki-link:hover { background-color: #eee; }
#wiki-content { flex: 1; /* Take up remaining space */ padding: 15px; }
#wiki-content h2 { margin-bottom: 10px; color: #333; }

.click-here-overlay {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 5px 10px;
  opacity: 0; /* Initially hidden */
  z-index: 10; /* Ensure it's on top */
  transition: opacity 0.3s ease-in-out; /* Smooth fade-in/out */
}
.click-here-overlay.show {
  opacity: 1; /* Show the overlay */
}

.custom-tooltip {
    max-width: 400px;
    background-color: lightyellow; /* Set background color */
    border: 1px solid #ccc; /* Optional border */
    padding: 8px; /* Optional padding */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Optional shadow */
    border-radius: 4px; /* Optional rounded corners */
    z-index: 1000; /* Ensure tooltip is above other elements */
    display: none; /* Hidden by default */
    white-space: pre-wrap; /* Allow wrapping of text */
}

.tooltipdropdown {
    display: none;
    position: absolute;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    color: #333;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@keyframes blink { 0% { background-color: yellow; } 50% { background-color: lightgreen; } 100% { background-color: yellow; } }
.blinking-title { animation: blink 1s infinite; }

.lightning-bar {
        position: relative; /* Position relative for absolute child */
        overflow: hidden; /* Hide overflow for animation */
        background-color: yellow; /* Background color of the div */
        padding: 1rem;
        border-radius: 10px;
        font-size: 1.2rem;
        margin: 1rem;
        /* Set the dimensions */
        height: 100px; /* Adjust height as needed */
}

.lightning-bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 200%; /* Double the width for seamless animation */
        background: linear-gradient(270deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
        background-size: 200% 100%; /* Cover the area fully */
        animation: moveLightning 1s linear infinite;
}

@keyframes moveLightning {
        0% { background-position: 100% 0; }
        100% { background-position: 0 0; }
}


/* Base animation for all confetti pieces */
@keyframes confetti-fall {
	0% {
		/* Start from its initial top/left, with initial rotation */
		transform: translate(0, 0) rotate(var(--initial-rot));
		opacity: 1;
	}
	100% {
		/* Fall distance and total rotation */
		transform: translate(var(--end-x), var(--end-y)) rotate(var(--total-rot));
		opacity: 0;
	}
}

/* General style for a single confetti piece */
.confetti-piece {
	position: absolute;
	opacity: 0; /* Start invisible, becomes visible when animation begins */
	animation-name: confetti-fall;
	animation-iteration-count: infinite; /* Keeps falling forever */
	animation-timing-function: linear; /* Consistent speed */
	/* All other properties (size, color, position, specific animation values)
	   will be set via inline styles generated by PHP for randomness */
}

/* audio-player.css */
.audio-player { display: inline-block; margin: 5px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; max-width: 500px; }
.audio-control-btn { background: #3498db; color: white; border: none; padding: 1px 5px; border-radius: 4px; cursor: pointer; margin-right: 10px; font-size: 14px; transition: background-color 0.2s; }
.audio-control-btn:hover { background: #2980b9; }
.audio-control-btn:disabled { background: #bdc3c7; cursor: not-allowed; }
.audio-control-btn.playing { background: #e74c3c; }
.audio-control-btn.playing:hover { background: #c0392b; }
.audio-progress { display: inline-block; margin-left: 10px; font-size: 12px; color: #666; min-width: 120px; }
.audio-title { font-weight: bold; margin-right: 10px; color: #2c3e50; }
.audio-loading { color: #f39c12 !important; background: #f39c12 !important; font-style: italic; }
.audio-file-path { display: block; font-size: 11px; color: #7f8c8d; margin-top: 5px; font-family: monospace; }
/* Optional: Add a global pause all button style */
.audio-global-controls { margin: 10px 0; padding: 10px; background: #ecf0f1; border-radius: 5px; }
.audio-global-btn { background: #95a5a6; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-right: 10px; font-size: 12px; }
.audio-global-btn:hover { background: #7f8c8d; }

.rdmw-wrap { position: relative; }
.rdmw-content { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.rdmw-img { max-width: 100%; height: auto; }
.rdmw-img-left { order: 0; }
.rdmw-img-right { order: 2; margin-left: auto; }
.rdmw-img-center { display: block; margin: 0 auto; order: 0; width: 100%; }
.rdmw-text { flex: 1 1 300px; min-width: 240px; font-family:Mallanna;}

.mw-content { /* optional spacing */ }
.mw-text { font-family: Mallanna; }
.mw-text::after { content: ""; display: block; clear: both; }
.mw-img { max-width: 100%; height: auto; display: block; }
.mw-img-left { float: left; max-width: 100%; margin: 0 .75rem .5rem 0; }
.mw-img-right { float: right; max-width: 100%; margin: 0 0 .5rem .75rem; }
.mw-img-center { float: none; display: block; margin: 0 auto 0.75rem auto; max-width: 60%; }
.mw-img-left.round, .mw-img-right.round { border-radius: 50%; shape-outside: circle(); }
/* Responsive: drop floats on narrow screens */
@media (max-width: 640px) { .mw-img-left, .mw-img-right { float: none; display: block; max-width: 100%; margin: 0 0 .75rem 0; } }

.rdmw-toggle { background: #eee; padding: 0.05rem 0.25rem; border-radius: 0.25rem; cursor: pointer; }
.rdmw-toggle:hover { background: #e4e4e4; }
.rdmw-star { margin-left: 0.2rem; cursor: pointer; font-weight: bold; font-size:1.5rem;}
.rdmw-tooltip {
  position: absolute; z-index: 9999; background: #111; color: #fff;
  border-radius: 8px; padding: 8px 10px; font-size: 0.9rem;
  display: none; max-width: 320px;
}
.rdmw-tooltip img { max-width: 100%; height: auto; margin-top: 6px; border-radius: 6px; }

.rdmw-toggle, .rdmw-star {position: relative;}
.rdmw-tooltip { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 9999; background: #111;
  color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 0.9rem; display: none; max-width: 320px;
  white-space: normal; }

/* Make the trigger elements positioning context for the tooltip */
.mw-toggle, .mw-star { position: relative; display: inline-block; background:#f4f4f4; padding-left:0.3rem; padding-right:0.3rem;}
.mw-star{font-size:1.7rem;}
.mw-tooltip { position: absolute; bottom: 100%; left: 0;
  margin-top: 6px; z-index: 9999; background: lightyellow; color: black; border-radius: 8px;
  padding: 4px 5px; font-size: 0.9rem; display: none;
  white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.mw-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 12px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #111; }
.rdmw-tooltip img { max-width: 100%; height: 100%; margin-top: 6px; border-radius: 6px; }
.mw-tooltip img { }
.mw-tooltip.mw-flip { left: auto; right: 0; }
.mw-tooltip.mw-flip::after { left: auto; right: 12px; }
.mw-toggle.hidden-shown { color: blue; }

.hlme::selection { background: yellow; color: black; }
.hlme::-moz-selection { background: yellow; color: black; }
.hlme li::selection { background: yellow; color: black; }
.hlme li::-moz-selection { background: yellow; color: black; }
.hlme ol::selection { background: yellow; color: black; }
.hlme ol::-moz-selection { background: yellow; color: black; }