/* ------------------Common Css--------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 margin:0;
 padding:0;
}

table#container {
	margin: 0;
}

th#container, td#container {
	padding: 0;
}

html {
 height: 100%;
 background-image:url(../images/main-bg.png);
 background-position:bottom left;
 background-attachment:fixed;
 background-repeat: repeat-x;
}

body {
  background: var(--primary-color);
            min-height: 100vh;
            display: flex;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            animation: gradientShift 15s ease infinite;
}

.user-name {
 position:absolute;
 font-size:18px;
 color:#ffffff;
 text-transform:uppercase;
 top:94px;
 right:30px;
}

h1,h2,h3,h4,h5,h6 {
 font-size:100%;
 font-weight:normal;
}

h1 {
 color:#ffffff;
 font-size:24px;
 text-transform:uppercase;
 width:600px;
}

h3 {
 color:#666666;
 font-size:18px;
 text-transform:uppercase;
 font-weight:600;
}
h2 {
 color:#666666;
 font-size:18px;
 text-transform:uppercase;
 font-weight:600;
 float: left;
}
h6{
 color:#ffffff;
 padding:10px 20px;
 font-size:12px;
 background:#666666;
 text-transform:uppercase;
}

.footerSpectrum {
    height: 3px;
    width: 100%;
}

.table-style{
	border: 0px;
	padding: 0px !important;
	margin: 0px !important;
}

/* -----------------Login Page-----------------------*/

#container {
}

#login-header {
 background:#000;
 height:80px;
 padding-top:20px;
}

.home-header-main {
 background:#000;
 width:980px;
 margin:0 auto;
}

.logo {
 float:left;
 padding:20px
}

#wrapper{

 margin:0 auto;
}

.body_text{
 float:left;
 width:430px;
 padding:60px 20px;
}

.login{
 float:left;
 margin:60px 20px;
 padding:25px;
 width:430px;
 height:250px;
 background:#fff;
 border:1px solid #c8c8c8;
}

.login p{
 font-size:12px;
 font-weight:600;
 color:#666666;
}

.login p a{
 font-size:12px;
 font-weight:600;
 color:#666666;
}

.login-list {
 color:#666666;
 font-size:14px;
 margin-left:40px;
 margin-top:20px;
}

.input_signin{
 border: medium;
 width:250px;
 padding-left:7px;
 font-family: "Segoe UI",Tahoma,Arial,Verdana,sans-serif;
 font-size:12px;
 height:25px;
 color:#666666;
 background:#f2f2f2;
 margin:4px 0px 0px 4px;
 border:#cdcdcd 1px solid;
}

.buttonRed{
 float:left;
 padding:7px 30px;
 min-width:80px;
 width:auto;
 text-align:center;
 text-transform:uppercase;
 font-family: "Segoe UI",Tahoma,Arial,Verdana,sans-serif;
 background: #A11D21;
 background: -moz-linear-gradient(top, #CA000D 0%, #A11D21 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CA000D), color-stop(100%,#A11D21));
 background: -webkit-linear-gradient(top, #CA000D 0%,#A11D21 100%);
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px; 
 border-radius: 3px; 
 color: #ffffff; 
 border: solid 1px #690C0E; 
 font-size: 14px; 
 font-weight: normal; 
 text-decoration: none; 
 display: block;
}

.buttonRed:hover{
 background: -moz-linear-gradient(top, #A11D21 0%, #CA000D 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A11D21), color-stop(100%,#CA000D));
 background: -webkit-linear-gradient(top, #A11D21 0%,#CA000D 100%);
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px; 
 border-radius: 3px; 
 color: #ffffff; 
 border: solid 1px #690C0E; 
 font-size: 14px; 
 font-weight: normal; 
 text-decoration: none; 
 display: block;
}

.buttonTop{
 float:right;
 margin-right:3px;
 padding:7px 30px;
 min-width:80px;
 width:auto;
 text-align:center;
 font-family: "Segoe UI",Tahoma,Arial,Verdana,sans-serif;
 background: #d35400;
 background: #d35400; background: -moz-linear-gradient(top, #d35400 0%, #d35400 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d35400), color-stop(100%,#d35400));
 background: -webkit-linear-gradient(top, #d35400 0%,#d35400 100%);
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px; 
 border-radius: 6px; 
 color: #ffffff; 
 border: solid 1px #d35400; 
 font-size: 14px; 
 font-weight: normal; 
 text-decoration: none; 
 display: block;
}

.buttonLeft{
 float:left;
 margin-right:3px;
 padding:7px 30px;
 min-width:80px;
 width:auto;
 text-align:center;
 font-family: "Segoe UI",Tahoma,Arial,Verdana,sans-serif;
 background: #981a1e;
 background: #666666; background: -moz-linear-gradient(top, #777777 0%, #555555 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#777777), color-stop(100%,#555555));
 background: -webkit-linear-gradient(top, #777777 0%,#555555 100%);
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px; 
 border-radius: 6px; 
 color: #ffffff; 
 border: solid 1px #444444; 
 font-size: 14px; 
 font-weight: normal; 
 text-decoration: none; 
 display: block;
}


#footer {
 width:980px;
 margin:0 auto;
}

#footer p{
 margin:30px;
 font-size:10px;
 color:#666666;
}


/*------------------------other pages-----------------------------*/

.auto-height {
 	min-height: 100%;
    width: 100%; 
    margin: 0px !important;
    padding: 0px !important;
}

#header {
 background:#fff;
 height:80px;
}

#header-main {
 width:auto;
}

.side-menu {
 margin:0;
 width:100%;
 min-height:480px;
 background:#f1f1f1;
 border-right:1px solid #999999;
}

.side-menu h3 {
 padding:10px 20px;
 background:#a11e22;
 color: #fff !important;
}

.menu-list {
 list-style:none;
 font-size:12px;
 line-height:180%;
 background:#f1f1f1;
}

.menu-list li {
 height:28px;
 padding:2px 20px 0px 20px;
 border-left:16px solid #959595;
 border-bottom:1px solid #999999;
}

.menu-list a{
 color:#444444;
 text-decoration:none;
}

.menu-list :hover{
 background:#444444;
 color:#ffffff;
}

.text-area{
 margin:20px;
 padding:20px;
 width:90%;
 min-height:250px;
 background:#fff;
 border:1px solid #c8c8c8;
}

.text-area p{
 font-size:12px;
 color:#666666;
}

.text-area td{
 padding:4px;

}

.input_signin{
 border: medium;
 width:200px;
 min-width:160px;
 padding-left:7px;
 font-family: "Segoe UI",Tahoma,Arial,Verdana,sans-serif;
 font-size:12px;
 height:25px;
 color:#666666;
 background:#f2f2f2;
 margin:4px 0px 0px 4px;
 border:#cdcdcd 1px solid;
 float: right;
} 

.main-contant h3 {
 padding:10px 20px;
 background:#959595;
color: #fff !important;
}

/*-------------------------------footer-----------------------------*/

#footer {
 float:left;
 width:100%;
 height:76px;
 background:#959595;
 margin: 0 auto;
}

.center-footer{
	width:1000px;
	margin:0 auto;
}

.center-footer p{
	color:#fff !important;
	float:left;
	width:500px;
}

.devTeam {
	color:#fff;
	float:right;
	margin-top:25px;
	text-transform:uppercase;
}

.devTeam a {
	color:#fff;
	text-decoration:none;
	padding:15px 36px;
}

.devTeam a:hover {
	background:#333;
	color:#fff;
}

#footer {
	position:absolute;
	bottom:0px;
	float:left;
	width:100%;
	height:76px;
	background:#959595;
	margin: 0 auto;
}

div.htmltooltip{
	position: absolute; /*leave this and next 3 values alone*/
	z-index: 1000;
	left: -1000px;
	top: -1000px;
	background: #666666;
	border: 3px solid #333333;
	font-size:12px;
	padding: 10px;
	width: 236px; /*width of tooltip*/
}

.htmltooltip li{
	margin:4px;
	padding:5px;
	list-style:none;
	background:#f1f1f1;
}

.htmltooltip li img{
	float:left;
	padding-right:5px;
}

.clearfooter{
 height: 76px;
 clear: both;
}

/*--------------------------agant page---------------------------------------*/

.agent-body-text{
 float:left;
 width:980px;
 min-height:500px;
 padding:30px 10px;
}

#agent-box {
 float:left;
 margin:40px;
 width:240px;
 height:100px;
 padding:20px 20px 10px 20px;
 font-family: "Segoe UI",Tahoma,Arial,Verdana,sans-serif;
 background: #981a1e;
 background: #cccccc; background: -moz-linear-gradient(top, #f1f1f1 0%, #d5d5d5 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#d5d5d5));
 background: -webkit-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%);
 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px; 
 border-radius: 6px; 
 color: #666666; 
 border: solid 1px #d1d1d1; 
 font-weight: normal; 
 text-decoration: none; 
 display: block;
}

#agent-box p{
 font-size:18px;
 margin-left:20px;
 text-transform:uppercase;
}

#leftContentContainer {
	margin: 0;
	padding: 0;
	float: left;
	width: 690px;
}
#pageBody {
    float: left;
    margin: 0 15px 10px 15px;
}
/* grid.css */
.container {width:1200px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;margin-right:0;}

/* td {
	border-style: hidden !important;
}

tr {
	border-style: hidden !important;
} */
.panel-body a{
	color: #000;
    text-decoration: none;
}
.errorMessages {
    list-style-type: disc;
    margin: 0 10px 15px 10px;
    padding: 8px 35px 8px 30px;
    color: #B94A48;
    background-color: #F2DEDE;
    border: 2px solid #EED3D7;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.errorMessages span {
    font-weight: bold;
}

.login-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 450px;
            margin: auto;
            transform: translateY(0);
            transition: transform 0.3s ease;
            overflow: hidden;
        }
        
        .login-container:hover {
            transform: translateY(-5px);
        }
        
        .logo-container {
            background: #ffff;
            padding: 2rem;
            text-align: center;
            animation: logoEntrance 1s ease;
        }
        
        .logo {
            width: 180px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }
        
        .form-section {
            padding: 2.5rem;
        }
        
        .form-control {
            border-radius: 8px;
            padding: 1rem;
            transition: all 0.3s ease;
            border: 2px solid #e0e0e0;
        }
        
        .form-control:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.1);
        }
        
        .btn-primary {
            background: var(--primary-color);
            border: none;
            padding: 1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: var(--accent-color);
            transform: translateY(-2px);
        }
        
        .animated-text {
            animation: textFocus 1s ease;
        }