@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

html, body {height:100%; margin:0px; font-family:Roboto, Arial, Helvetica, sans-serif; font-weight:300; font-size:14px;	}

.home { background-image:url(../images/bg.jpg); background-size:cover; background-position:center top;}

.inside-content-area { width:100%; max-width:1280px; margin:0; padding:0px;}

a{transition: all 0.5s ease-in 0s; text-decoration:none; color:#073952;}

.clear{clear:both;}

p{margin-top:0px;  	font-size:14px;	line-height:22px; font-weight:300;}

img {border:0px;}

form{margin:0px;}

* {box-sizing:border-box;}

.login-area {
	width:550px;
	height: 550px;
	padding:135px 145px 100px 165px;
	border-radius:7px;
	background-image: url("../images/logo-bg.png");
	background-position: center center;
	margin: auto;
}

.login-area img {width:200px;}

.login-area-text {margin:10px 0px;}

.login-id, .password {padding:10px; border-radius:3px; border:1px solid #ddd; background-color:#f5f5f5; margin:5px 0px; width:100%; box-sizing:border-box; font-family:Roboto, Arial, Helvetica, sans-serif; font-size:15px; color:#666; outline:0px;}

.submit {    border-radius: 3px;    transition: all 0.5s ease-in 0s;    border: 0px;    background: #fe6654; padding: 12px 15px;width: 100%;color:    #fff;   text-transform: uppercase;    font-family: Roboto, Arial, Helvetica, sans-serif;    font-size: 14px;    margin-top: 0px; outline:0px;}
.submit:hover {background:#54af76;}

.copyright { position:absolute; bottom:0px; padding:20px 0px; text-align:center; width:100%; color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:2px;	}

.copyright2 {text-align:left; text-indent:20px;  background-color:#ffda3a; position:absolute; bottom:0px; padding:20px 0px;  width:100%; color:#000; font-size:10px; text-transform:uppercase; letter-spacing:2px;	}

header {width:100%; display:table; background-color:#ffda3a;}

.inside-logo { float:left; width:200px; margin:10px 20px;}

.logout { display:inline-block; float:right; padding:5px 20px 0px 25px;  background:#fe6654; line-height:75px; text-transform:uppercase; font-size:14px; color:#fff!important; font-weight:500; letter-spacing:1px;}

.inside-content-area {padding:0px; width:100%; display:table; box-sizing:border-box; height:86.5%; } 

.left-menu  {width:280px; float:left; margin-right:20px;}

.left-menu  a {display:block; font-weight:700; text-transform:uppercase; line-height:50px; font-size:14px; letter-spacing:1px; border-bottom:1px solid #ddd; background-image:url(../images/menu-arrow.png); background-repeat:no-repeat; background-position:95% center; color:#666!important; 	}

.left-menu  a:hover { background-color:#f1f1f1; font-weight:700; color:#fff; text-indent:10px;}

.left-menu .active, .left-menu .active:hover {color:#ffda3a!important; background-color:transparent; text-indent:0px;}

.right-content-area {margin-left:40px;  float:left; width:72%; display:table;}

h1 {font-weight:300; font-size:30px; margin:20px 0px 20px 0px; color:#000; display:inline-block;}

.item-box {  width:31%; float:left; border:1px solid #ddd; text-align:center; margin:0px 20px 20px 0px; padding:20px 0px 30px 0px; box-sizing:border-box; text-align:center; transition: all 0.5s ease-in 0s;}

.item-box img {display:block; margin:auto;}

.item-box  span {font-size:30px; display:block; border-bottom:1px solid #999;  width:100px; margin:10px auto 20px auto; padding-bottom:10px; }

.item-box:hover { box-shadow:5px 5px 5px #ccc; }

.data-table th {background:#54af76; color:#fff; padding:10px;	font-size:14px; border-bottom: 2px solid #000; } 

.data-table tr:nth-child(odd) {    background: #e5e5e5;}

.data-table tr { background-color:#f2f2f2; }

.data-table td {border-bottom:1px solid #ccc; padding:2px 5px; font-size:14px;	} 


.data-table a {  margin: 0px 2px;  display: inline-block;  float: left;}
 
.data-table  a  img {width:25px;  transition: all 0.5s ease-in 0s; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */    filter: grayscale(100%); opacity:0.5;	 display:block;}

.data-table  a  img:hover {filter: none; opacity:1.0;}

.paging  {color:#ccc; margin:25px 0;}

.paging a {display:inline-table; width:auto; text-align:center;  color:#000; margin:0px 5px;}

.off-color {color:#999!important; cursor:default; border-bottom:1px solid #999;}

.text-buttton { display:inline-block; float:right; margin-top:10px; background-color:#ffda3a; padding:10px 0px; border-radius:3px; color:#000;  font-weight:600;   color:#fff;  width:150px; display:inline-block; text-align:center;}

.filter-table {width:550px; float:right; margin: 21px 0 20px;}

.filter-table .submit {cursor: pointer; margin-left:10px;}

.jquery-datepicker__input {  outline: 0px;  font-family: poppins;  font-size: 13px;  padding: 9px;  border-radius: 4px;}

.add-div {border-top:1px solid #ddd; border-bottomm:1px solid #ddd;  padding:10px 0px;}

.textbox1  {padding:9px; border-radius:3px	0px	0px	3px; border:1px solid #ddd; background-color:#f7f7f7; outline:0px; margin:10px 0px; width:100%; box-sizing:border-box; font-family:Poppins, Arial, Helvetica, sans-serif; font-size:14px; color:#666;   border-radius: 5px;}

.submit-button1 {border-radius:0px	3px	3px	0px; transition: all 0.5s ease-in 0s;  border:0px; background:#ffda3a; outline:0px; padding:9px 8px 9px  8px; width:10%; color:#fff;	font-family:Poppins, Arial, Helvetica, sans-serif; font-size:14px; margin-top:10px;}

.submit-button1:hover {background:#222; }


.submit-button {border-radius:3px; transition: all 0.5s ease-in 0s;  border:0px; background:#000; outline:0px; padding:9px 8px 9px  8px; width:200px; color:#fff;	font-family:Poppins, Arial, Helvetica, sans-serif; font-size:14px; margin-top:10px;}

.submit-button:hover {background:#222; }


#add-div {display:none;}

.docs-date {width:400px; display:block; padding:12px; border-radius:4px; border:1px solid #ddd; background-color:#fff; margin:15px 0px;  box-sizing:border-box; font-family:Roboto, Arial, Helvetica, sans-serif; font-size:15px; color:#666;
background-image:url(../images/calendar.png); background-position:97% center; background-repeat:no-repeat;  background-size:25px auto 	} 	

.textbox2 {width:400px; display:block; padding:12px; border-radius:4px; border:1px solid #ddd; background-color:#fff; margin:15px 0px;  box-sizing:border-box; font-family:Roboto, Arial, Helvetica, sans-serif; font-size:15px; color:#666;
 	} 	

.textbox1.small {  width: 20%;  float: left;  margin-right: 2%;}

.textbox11 {
  width: 78%;
  padding: 10px;
  font-family: poppins;
  font-size: 14px;
  color: #666;
  border-radius: 5px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  margin: 10px 0px;
}


.tab-area {width:100%; display:block; height:50px; border-bottom:1px solid #ccc; margin-bottom:20px;}

.tab-area  a {display:inline-table; line-height:49px; border:1px solid #ccc; width:200px; text-align:center; background-color:#666; color:#fff; font-weight:600;}

.tab-area  .active {display:inline-table; line-height:49px; border:1px solid #ccc; width:200px; text-align:center; background-color:#fff; color:#000; font-weight:600; border-bottom:1px solid #fff;}


.left-panel {float:left; width:220px; background-color:#eee; margin-right:20px; padding:20px; height:100%; display:table;}

.left-panel a {display:block; background-color:#54af76; padding:12px 10px 10px 10px; color:#fff; text-transform:uppercase; font-weight:800; font-size:13px; line-height:16px; margin-bottom:10px; border-radius:4px;}

.left-panel .active {background-color:#fe6654;}

.right-panel {float:left; width:78%;}



.col-1-of-1 {width:100%; display:block; padding:0px 15px;}

.col-1-of-3 {width:33.33%; float:left; display:inline-block; padding:0px 15px;}

.col-1-of-2 {width:50%; float:left; display:inline-block; padding:0px 15px;}

label {font-size:12px; font-weight:500;}

.small-title {
  display: inline-block;
  float: left;
  width: 22%;
}

.small-title2 {
  display: inline-block;
  float: left;
  width: 78%;
}


.thumbnail {width:150px; height:150px; margin:10px 0px; display:block; overflow:hidden; clear:both; border-radius:5px;}

.thumbnail img {width:100%; border-radius:5px;}

.blue-link { color:#0099FF; border-bottom:1px solid #0099FF; display:inline-block; margin-right:10px; margin-bottom:20px;}

.subheading-band {background-color:#54af76; padding:10px; color:#fff; border-radius:4px;}


.add-blog-button {  float: right;  padding: 10px 30px;  background-color:#fe6654;  color: #fff;  font-weight: 500;  margin-top: 24px;}














.drop { background-color: #fff; }

.drop:after { border: dashed 0.3rem rgba(0, 0, 0, 0.0875); }

.drop .drop-label { color: rgba(0, 0, 0, 0.0875); }

.drop:hover:after { border-color: rgba(0, 0, 0, 0.125); }

.drop:hover .drop-label { color: rgba(0, 0, 0, 0.125); }

#image-preview, .image-preview { background-color: #000; }

.drop {
  min-width: 200px;
  min-height: 20rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
}

.drop:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.drop.file-focus { border: 0; }

.drop:hover { cursor: pointer; }

.drop .drop-label {
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 4rem;
  width: 32rem;
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -1.5rem;
  left: 50%;
  margin-left: -16rem;
}

.drop input[type=file] {
  line-height: 50rem;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

#image-preview, .image-preview {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

#image-preview:empty, .image-preview:empty { display: none; }

#image-preview img, .image-preview img {
  display: block;
  margin: 0 auto;
  width: 100%
}

#image-preview:after, .image-preview:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: solid 0.1rem rgba(0, 0, 0, 0.08);
  background: bottom center repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABfCAMAAAAeT108AAABEVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoX7lMAAAAW3RSTlMBCHwGAwQFCgIMCw4PERITFBYXGRoNHR4gISIlJicpKiwuLzEzNDY3OTs8G0BBQ0VGSEpLTU9QUVRVVlhZW11eX2FiZGVmaGlrbG1ucHFyc3R1dnd4eXp7Pn1+eLXrxAAAADRJREFUCFtjYAACDmYGJkYmRiDJAMJMbEzMTP+ZeJgZmTChOFZR7FAPYi71IQMT0JXhTIwAN8YCxDyw89IAAAAASUVORK5CYII=);
}


label {display:block;}


















/*  1366px  */
@media all and (max-width: 1479px) {

.inside-content-area { height:82%; } 

.copyright2  {position:relative; margin-top:0px;}
}

/*  360px  */
@media all and (max-width: 479px) {
	
.login-area {width:270px; padding:15px;}

}

/*  320px  */
@media all and (max-width: 359px) {
	
.login-area {width:250px; padding:15px; margin: 10px 10px 100px 10px;}

}