﻿
* { margin:0; padding:0; border:0; text-decoration:none;}
body {font-size:.80em; font-family: Arial, Helvetica, Verdana, sans-serif; line-height:18px; color:#000; background:#42b2b2 }

/*------Structure Css-----*/
#header_bg { height:100px; background:#fff; -webkit-box-shadow:0 0 10px 0 transparent; -moz-box-shadow:0 0 10px 0 transparent; box-shadow:0 0 10px 0 transparent;}
#header {margin:0 auto; width:80%; height:90px; padding:5px 10px 0 0; color:#fff}
#header .logo { float:left; margin:10px 40px 0 0; height: 70px;}
#header h2 {color:#42b2b2; font-size:3.7em; font-weight:bold; margin:0; padding:12px 10px 0 25px;line-height:1em; text-align:right }
#header p {color:#238484; padding:0; font-weight:bold; text-align:right}
.triballogo { float:right; margin-left:25px;}
.container { width:80%; margin:0 auto;}

.nav {margin:8px auto; width:980px; background:#fb6b5b; padding:0px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 10px 0 #316607; -moz-box-shadow:0 0 10px 0 #316607; box-shadow:0 0 10px 0 #316607;}
.nav ul li a, .nav ul li a:visited {padding:8px 10px; color:#fff; display:inline-block; font-size:1.1em; font-weight:bold;  border-right:1px dotted #5b5a5a}
.nav ul li a:hover { background:#65bd77; color:#fff}
#section {margin:10px; display:flex;  color:#333;}
.section {margin:10px auto 0; width:80%; color:#333; padding:25px 15px; background:#fff; -webkit-box-shadow:0 0 10px 0 #000; -moz-box-shadow:0 0 10px 0 #000; box-shadow:0 0 10px 0 #000;}
.section-complaint {margin:10px auto 0; min-height:450px; background:#fff; width:80%; color:#333; padding:25px 15px; background:#fff; -webkit-box-shadow:0 0 10px 0 #000; -moz-box-shadow:0 0 10px 0 #000; box-shadow:0 0 10px 0 #000;}
.section-complaint h1 { margin:0 0 15px;}
#aside {width:250px; float:left; margin-right:1%; background:#fff; -webkit-box-shadow:0 0 10px 0 #076363; -moz-box-shadow:0 0 10px 0 #076363; box-shadow:0 0 10px 0 #076363;}
#article {width:100%; padding:15px 1%; float:left; background:#fff; min-height:642px; border:1px solid #e5e5e5;  -webkit-box-shadow:0 0 10px 0 #076363; -moz-box-shadow:0 0 10px 0 #076363; box-shadow:0 0 10px 0 #076363;}
.icon-center {width:25px; height:25px; display:block; margin:0 auto; padding:3px;}
.mg-t-30 {margin-top:30px!important;}
/*-------- Global CSS -------*/
table.t_view {border:0px solid #ebebeb; margin:0px;}
.t_view th {background:#5f8181; color:#fff; text-align:center; border-right:0px solid #ebebeb;  padding:8px 4px; font-size:0.95em}
.t_view td {vertical-align:top; background-color:#fff; border-bottom:0px solid #ebebeb; border-left:0px solid #ebebeb; padding:4px 5px;}
.t_view td:first-child { width:160px !important; }
.hide {position:absolute; left: -9999px; color:#fff; background:#000}
p {margin-bottom:15px; text-align:justify;}
h1 {font-size: 1.8em;color: #0A8E8E; margin: 5px 0 22px; background: url(../Images/h1_bg.png) repeat-x bottom; padding-bottom: 5px; clear: both; border-bottom: 1px solid #0A8E8E; padding-bottom: 10px;}
h2 {font-size:1.3em; color:#3eb2b2; margin:0px 0 10px; font-weight: normal}
h3 {font-size:1.1em; margin-bottom:10px; color:#895900; background: url(../Graphics/images/h1_bg.png) repeat-x bottom left}
h4 {font-size:0.95em; color:#ce8a07; clear:both; margin:20px 0 10px}
blockquote { background:#F0EAE3; border-left: 10px solid #084B96; margin:0 0 1.5em; padding: 0.5em 10px; clear:both;}
.clear {clear:both; height:0;}
a, a:visited {color:#43a857;}
a:hover {color: #43a857;}

ul {list-style:none}
.ul {list-style-type:none;	margin:0px 0px 20px 15px; line-height:20px;	}
.ul li {background:url(../Images/bullet_blue.gif) no-repeat 0 3px; padding-left:25px; margin-bottom:8px;}
.ol {line-height:24px; margin:0px 0px 20px 30px;}
.ol li {margin:0px 0px 0px 20px;}
.radio-panel {clear:both; display:flex}
.radio-panel label {display:inline-block; float:left; font-weight:normal}
.radio-panel input {margin-right:15px;display:inline-block;float:left;margin-top:5px;margin-left: 8px;margin-right: 21px;}

.note-1 {
    padding:5px 0px;
    font-size: 13px;
    color: var(--ink-soft);
}

label {float:left;  margin:5px 0 0; padding:0; font-weight:bold;}
.button, .button:visited {background:#4cc0c1; display: inline-block; margin:0 5px 15px 0; text-align:center; padding:5px 15px; color:#fff!important; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
.button:hover, .button:focus {background:#3eb2b2; color:#fff;}
.mandatory {position:relative}
.mandatory:before{content:'*'; color:red; position:absolute; right:-8px; top:-4px; font-size:15px;}
.btn-outline-dark {}
.font-size-14{font-size:13px!important;} 

/*------ Other Css ------*/
#article .toplinks {position:relative; margin:90px 0 0 34%; height: 135px;  width: 222px;}
#article .toplinks li {margin:15px; display:block; padding:12px 8px 0; width:190px; background:url(../Images/toplink.jpg) repeat-x; border:1px solid #d2d2d2; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius: 3px;}
#article .toplinks li img {float:left}
#article .toplinks li a, .toplinks li a:visited {display: inline-block; font-size:1.7em; height:37px; padding:10px 5px 0 15px; color:#333;}
#article .toplinks li a:hover {color:#53b567}

.thumb {width:48%;float:left;margin-right:2%; margin-bottom:25px; padding:20px 15px; border:1px solid; box-sizing: border-box; color:#fff; min-height:149px; font-family: 'Open Sans', sans-serif; position:relative;box-shadow: 0 3px 4px -4px rgba(0,0,0,.1),0 6px 8px 1px rgba(0,0,0,.1),0 2px 10px 2px rgba(0,0,0,.1);}
.thumb .heading {font-weight:bold; color:#fff; font-size:14px; display:inline-block; padding-top:7px;}
.thumb .count {font-size:30px; float:right; display:inline-block; font-weight:normal; line-height:40px; margin-bottom:10px;}
.thumb .headingg {font-weight: bold; color: #fff;font-size: 17px;display: block; padding-top: 7px;text-align: center; color: #A6F3EC; padding-top: 12px;}
.thumb .countg {font-size: 40px;display: block;font-weight: normal;line-height: 40px; text-align: center; border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 5px;color: #A6F3EC;}

.border-thum {border-bottom:2px solid rgba(0,0,0,0.1); clear:both; margin-bottom:5px;}
.bg-orange {background-color:rgb(255, 87, 34); border-color:rgb(255, 87, 34);}
.bg-sky {background-color:rgb(0, 188, 212);border-color:rgb(0, 188, 212);}
.bg-purple {background-color:rgb(63, 81, 181);border-color:rgb(63, 81, 181);}
.bg-green {background-color:rgb(0, 150, 136);border-color:rgb(0, 150, 136);}
.bg-pink {background-color:rgb(201, 28, 80);border-color:rgb(201, 28, 80);}
.bg-yellow {background-color:rgb(234, 170, 16);border-color:rgb(234, 170, 16)}

.otherlink h2 {background:#25313e;  border-bottom:1px solid #ccc; color:#fff; font-size:1.4em; font-weight:normal; padding:10px 0 10px 8px; margin:0}
.otherlink ul {margin:5px; padding:0; list-style:none}
.otherlink ul li { margin:0 0 0 8px; padding:7px 0 7px 12px; list-style:none; border-bottom:1px dotted #ccc; background:url(../Images/bullet.jpg) no-repeat 0 11px;}
.otherlink ul li a, .otherlink ul li a:visited { color:#25313e}
.seprator {height:18px!important;}
.login {width:380px; margin:0 auto; padding:0; border:1px solid #e0e0e0; overflow:auto; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.login h2 {background:url(../Images/heading.jpg) repeat-x; border-bottom:1px solid #e0e0e0; color:#303641; font-size:1.5em; font-weight:normal; padding:10px 0 10px 8px; margin:0 0 25px}
.login label {display:block; padding:5px 0 0 25px; width:90px;}
.login input[type="text"] {margin-bottom:15px; display:block; padding:8px 5px; width:220px;}
.login input[type="password"] {margin-bottom:15px; display:block; padding:7px 5px; width:220px;}
.login .button { width:80px; margin:0 0 15px 150px}

.require {color:Red;}
.welcom { background:#fff url(../../Images/suvidha.png) no-repeat right bottom!important;}
.complaint-reg {width:450px; margin:15px auto}
.complaint-reg>.button {margin-right:25px;}
.token-number { display: inline}
.token-number input { margin-left:15px;}


.user-login { display:block; float:right; padding:5px 5px 0px 25px;   font-weight:bold;}
.scroll{overflow-x:auto}
.frm{display:block}
.mbtm20{margin-bottom:20px}

@media only screen and (min-width:300px) and (max-width:1315px) 
{
#section { width:90%;}
.section { width:90%;}
    }

/*------ New: Left Menu Toggle Button (added only, nothing above this changed) ------*/
.menu-toggle-btn { position:fixed; top:35px; left:270px; width:34px; height:28px; cursor:pointer; z-index:1001; display:inline-block; }
.menu-toggle-btn span { display:block; width:100%; height:4px; margin-bottom:6px; background:#42b2b2; border-radius:2px; transition:all 0.3s ease; }
.menu-toggle-btn span:last-child { margin-bottom:0; }
.menu-toggle-btn:hover span { background:#238484; }
.menu-toggle-btn.active span:nth-child(1) { transform:translateY(10px) rotate(45deg); }
.menu-toggle-btn.active span:nth-child(2) { opacity:0; }
.menu-toggle-btn.active span:nth-child(3) { transform:translateY(-10px) rotate(-45deg); }

/* When menu is collapsed: hide #aside and let #article use the full container width */
#section.menu-collapsed #aside { display:none; }
#section.menu-collapsed #article { width:98%; float:none; margin:0 auto; }

@media only screen and (min-width:300px) and (max-width:1315px)
{
.menu-toggle-btn { left:15px; top:10px; }
}