@font-face {
	font-family: 'Open Sans';
	src: url('./fonts/OpenSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('./fonts/OpenSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('./fonts/OpenSans-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'FontAwesome';
	src: url('./fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
		url('./fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
		url('./fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
	font-weight: normal;
	font-style: normal
}

@font-face {
	font-family: 'Glyphicons Halflings';
	src: url('./fonts/glyphicons-halflings-regular.eot');
	src: url('./fonts/glyphicons-halflings-regular.eot?#iefix')
		format('embedded- opentype'),
		url('./fonts/glyphicons-halflings-regular.woff') format('woff'),
		url('./fonts/glyphicons-halflings-regular.ttf') format('truetype'),
		url('./fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')
		format('svg');
}

.login-container {
	margin-top: -53px;
}

body {
	background: #ece5db;
	font-family: "Open Sans", sans-serif !important;
	color: #333;
}

label {
	color: #333;
}

.login-box {
	min-height: 16px;
    padding: 24px;
    margin-bottom: 63px;
    margin-top: 63px;
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    width: 440px;
}


.login-container1 {
	margin-top: -53px;
}
.login-box1 {
	min-height: 16px;
    padding: 49px;
    margin-bottom: 63px;
    margin-top: 63px;
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    width: 490px;
}
form[role=login] img {
    display: block;
    margin: 34px 84px;
    margin-bottom: 103px;
    height: 86px;
}

form[role=login] .btn-login-submit {
	background: #ff9a00;
	height: 53px;
	color: #fff;
	font-size: 16px;
	border-radius: 25px;
	margin: 0px;
}

form[role=login] .btn-login-submit1 {
	background: #ff9a00;
    height: 40px;
    color: #fff;
    font-size: 14px;
    border-radius: 25px;
    margin: 5px;

}
form[role=login] .btn-login-submit2 {
	background: #ff9a00;
    height: 40px;
    color: #fff;
    font-size: 14px;
    border-radius: 25px;
    margin: 13px;

}

form[role=login] .btn-login-submit3 {
	background: #ff9a00;
    height: 40px;
    color: #fff;
    font-size: 14px;
    border-radius: 25px;
    margin: 13px;

}

form[role=login] .form-control {
	border-radius: 0px;
	height: 53px;
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid black;
}

.form-control {
	cursor: pointer;
}

form[role=login] .btn-login-submit:hover {
	background: #ff9a00;
	height: 53px;
	color: #fff;
	font-size: 16px;
}

form[role=login] .text-center {
	text-align: center;
	display: block;
	color: #056325;
}

form[role=login] .text-left {
	float: left;
	display: inline-block;
	color: #056325;
	width: 50%;
}

form[role=login] .text-right {
	float: right;
	color: #056325;
	width: 50%;
	display: inline-block;
	min-height: 20px;
	padding-right: 20px;
	margin-top: 10px;
	margin-bottom: 75px;
	vertical-align: middle;
}

form[role=login] .input-group {
	margin-bottom: -38px;
	width: 75%;
}

.footer {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #fff;
	text-align: center;
	float: left;
	position: fixed;
	bottom: 0;
	z-index: 1000;
}

.footer .text-muted {
	color: #0c0c0c;
}

/* header css styles */
header {
	height: 80px;
	/* background: #066426;*/
	background: #fff;
	width: 100%;
	float: right;
	position: fixed;
	z-index: 1000;
	top: 0;
}

.logout {
	width: 100%;
	height: 78px;
	float: left;
	border-left: 2px solid #014418;
}

.logout a {
	color: #fff;
	position: absolute;
	left: 50%;
	top: 30%;
}

.logout .tooltiptext {
	position: absolute;
	left: 41%;
	top: 68%;
	color: #fff;
	font-size: 11px;
}

.bodycontent {
	margin-top: 65px;
	float: left;
	width: 100%;
	height: 100%;
}

.side-navbar {
	background: #134d49;
	max-height: 100%;
	min-height: 793px;
	width: 17%;
	box-shadow: none;
	border: 0;
	position: fixed;
	float: left;
	height: 100%;
	overflow: auto;
	
}

.side-navbar a {
	display: block;
	padding: 12px;
	text-decoration:none;
	margin-top:20px;
	text-align: left;
	
}
.side-navbar a.active{
	background-color:#1da79d;
	color: white;
}
/* Active/current link */
.sidebar a.active {
	background-color: #1da79d;
	color: white;
}

.side-navbar a:hover {
	background-color:#1da79d;
	
}
/* Links on mouse-over */
.sidebar a:hover:not .active  {
	background-color: #555;
	color: white;
}

/* .side-navbar  {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 260px;
  	 background:#134d49;
	max-height: 100%;
	min-height: 793px;
    box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
} */
.user-data {
	width: 100%;
	height: 78px;
	float: left;
	border-left: 2px solid #014418;
}

.username {
	padding: 20px 15px 15px;
	width: 99%;
	height: 100%;
	color: #1a0f0f;
	float: left;
}

.username h1 {
	margin: 0px;
	padding: 0px;
	font-size: 15px;
}

.username p {
	font-size: 12px;
	margin-bottom: 0px;
	word-wrap: break-word;
}

.side-navbar ul {
	margin: 0px;
	padding: 0px;
	padding-top: 15px;
}

.side-navbar ul li:hover {
	background-color: #30a77a;
}

.side-navbar ul li {
	margin: 0px;
	list-style-type: none;
	font-size: 16px;
	width: 100%;
	float: left;
	border-top: 1px solid #ededed;
}

.side-navbar ul li:last-child {
	border-bottom: 1px solid #ededed;
}

.side-navbar ul li a {
	font-size: 13px;
	color: #333;
	width: 100%;
	float: left;
	padding: 9px 0 14px 2px;
}

.side-navbar .active {
	color: #fff !important;
	background:#134d49;
}

.side-navbar ul li.active:hover {
	background: #64390f;
}

.side-navbar ul li.active a {
	color: #fff !important;
	font-size: 16px;
}

.side-navbar ul li a:hover {
	color: #64390f
}

.side-navbar ul li.active::after {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	content: "";
	border-right: 10px solid #ece5db;
	position: absolute;
	right: -3px;
	margin-top: 20px;
}

.side-navbar ul li span {
	height: 32px;
	display: inline-block;
	padding-left: 40px;
	line-height: 23px;
}

.side-navbar ul li .announcement {
	background: url("../images/Announcements_B.png") no-repeat;
}

.side-navbar ul li .review-content {
	background: url("../images/ReviewContent.png") no-repeat;
}

.side-navbar ul li .review-student {
	background: url("../images/RiviewStudent_B.png") no-repeat;
}

.side-navbar ul li .upload-content {
	background: url("../images/Upload_B.png") no-repeat;
}

.side-navbar ul li .view-reports {
	background: url("../images/Reports_B.png") no-repeat;
}

.side-navbar ul li .manage-block {
	background: url("../images/ManageBlock_B.png") no-repeat;
}

.side-navbar ul li .manage-content {
	background: url("../images/ManageContent_B.png") no-repeat;
}

.side-navbar ul li .change-password {
	background: url("../images/Password_B.png") no-repeat;
}

.side-navbar ul li .manage-registration {
	background: url("../images/self_registration_inactive.png") no-repeat;
}

.side-navbar ul li .manage-registration {
	background: url("../images/self_registration_inactive.png") no-repeat;
}

.side-navbar ul li .games {
	background: url("../images/games_inactive.png") no-repeat;
}

.side-navbar ul li .manage-scores {
	background: url("../images/ManageMaxScore_B.PNG") no-repeat;
}

.side-navbar ul li .manage-personal {
	background: url("../images/ManagePersonnel_B.PNG") no-repeat;
}

.side-navbar ul li.active .announcement {
	background: url("../images/Announcements_W.png") no-repeat;
}

.side-navbar ul li.active .review-content {
	background: url("../images/ReviewContent_W.png") no-repeat;
}

.side-navbar ul li.active .review-student {
	background: url("../images/RiviewStudent_W.png") no-repeat;
}

.side-navbar ul li.active .upload-content {
	background: url("../images/Upload_W.png") no-repeat;
}

.side-navbar ul li.active .view-reports {
	background: url("../images/Reports_W.png") no-repeat;
}

.side-navbar ul li.active .manage-block {
	background: url("../images/ManageBlock_W.png") no-repeat;
}

.side-navbar ul li.active .manage-content {
	background: url("../images/ManageContent_W.png") no-repeat;
}

.side-navbar ul li.active .logout {
	background: url("../images/Logout_W.png") no-repeat;
}

.side-navbar ul li.active .change-password {
	background: url("../images/Password_W.png") no-repeat;
}

.side-navbar ul li.active .manage-registration {
	background: url("../images/self_registration_active.png") no-repeat;
}

.side-navbar ul li.active .games {
	background: url("../images/games_active.png") no-repeat;
}

.side-navbar ul li.active .manage-scores {
	background: url("../images/ManageMaxScore_W.PNG") no-repeat;
}

.side-navbar ul li.active .manage-personal {
	background: url("../images/ManagePersonnel_W.PNG") no-repeat;
}

.content-wrapper {
	background: #fff;
	margin: 20px 0 50px 0;
	padding: 15px;
	width: 100%;
	float: left;
}

.create-announcement {
	background: #f8f7f7;
	border: solid 1px #bcc0c7
}

.create-announcement h2, .create-announcement h3 {
	padding: 10px 0 10px 10px;
	color: #fff;
	font-size: 18px;
	margin: 0px;
	background: #525252;
}

.announcementtable td:first-child {
	width: 50%;
	/* word-break: break-all; */
}

.announcement-inner {
	padding: 10px 15px;
	overflow: hidden
}

.announcement-inner .left-col {
	float: left;
	padding-top: 10px;
}

.announcement-inner .right-col {
	float: right;
	padding-top: 10px;
}

.upload-inner .left-col {
	float: left;
	padding-top: 10px;
}

.upload-inner .right-col {
	float: right;
	padding-top: 10px;
}

.left-col label {
	font-weight: normal;
	margin-right: 15px;
}

input[type=submit], input[type=button], .button {
	background: #ff9a00;
	font-size: 14px;
	color: #fff;
	border: 0px;
	padding: 11px 26px;
	margin: 1px;
	border-radius: 38px;
}

input[type=button]:disabled, input[type="submit"]:disabled {
	background: #ccc;
	color: #000;
}

.grid-container {
	border-top: 0px;
	overflow: hidden;
	padding-top: 10px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus {
	border-bottom: solid 5px #64390f;
	border-radius: 0px;
	color: #64390f;
	background: transparent;
}

.nav-pills {
	border-bottom: solid 1px #bcc0c7
}

.nav-pills>li.active>a:hover {
	background: transparent;
	color: #64390f;
}

.nav>li>a:hover {
	background: transparent;
	color: #64390f;
	border-bottom: solid 5px #64390f;
}

.nav>li>a {
	color: #696969;
	border-radius: 0px;
}

.nav-pills {
	border-bottom: solid 1px #bcc0c7
}

.nav-pills>li.active>a:hover {
	background: transparent;
	color: #64390f;
}

.nav>li>a:hover {
	background: transparent;
	color: #64390f;
	border-bottom: solid 5px #64390f;
}

.nav>li>a {
	color: #696969;
	border-radius: 0px;
}

.table tr:nth-child(even).thead-inverse {
	background: #5a5a5a;
	color: #fff;
	font-size: 16px;
	padding: 5px;
	font-weight: normal
}

table {
	font-size: 15px;
	font-weight: normal;
	margin-top: 20px;
}

.angular-table.table>tbody>tr>td, .angular-table.table>tfoot>tr>td,
	.angular-table.table>thead>tr>td {
	font-weight: normal;
	font-size: 14px;
}

.headg.thead-inverse tr {
	background: #5a5a5a;
	color: #fff;
}

.angular-table.table tr:nth-child(even) {
	background: #dcdcdc
}

.angular-table.table tbody tr:nth-child(odd) {
	background: #f1f1f1
}

.forgot-password-container {
	width: 420px;
	margin: 150px auto 0;
	background: #fff;
	padding: 20px;
	border: solid 1px #ccc;
	height: 140px;
}

.m0 {
	margin: 0px !important;
}

.mr10 {
	margin-right: 10px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mt5 {
	margin-top: 5px !important;
}

.mrg-top20 {
	margin-top: 20px;
}

.upload-inner .right-col.btn-circle {
	width: 30px;
	height: 30px;
	text-align: center;
	padding: 6px 0;
	font-size: 12px;
	line-height: 1.428571429;
	border-radius: 15px;
}

.panel-body {
	padding: 0;
}

.nav.nav-pills>li>a {
	font-weight: bold !important;
	cursor: pointer;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus
	{
	color: #64390f !important;
	background-color: #fff !important;
	font-size: 13px;
	font-weight: bold;
}

.ngViewport {
	height: 200px !important;
}

.textarea-title {
	padding-top: 10px;
}

.textarea-title label {
	font-size: 14px;
	color: #333;
}

.textarea-title input[type="text"] {
	width: 100%;
	float: left;
	height: 30px;
	border: 1px solid #ccc;
	text-indent: 4px;
}

.ta-editor {
	padding-top: 35px !important;
}

.ta-toolbar {
	width: 100% !important;
}

.date-content label {
	font-size: 14px;
	width: 100%;
	margin-top: 5px;
	text-align: right;
}

.announcement-inner .k-editor {
	margin-top: 0px !important;
}

.pagination {
	float: right;
}

.pagination>li a {
	margin: 0 5px;
	border: 1px solid #8f8f8f;
	color: #8f8f8f;
	border-radius: 3px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover,
	.pagination>.active>span:hover, .pagination>.active>a:focus,
	.pagination>.active>span:focus {
	background-color: #ff9a00!important;
	border: none;
}

input[type="date"]::-webkit-inner-spin-button {
	display: none;
}

input[type="date"] {
	position: relative;
	padding: 4px;
	cursor: pointer;
	width: 100%;
	border: 1px solid #ccc;
	margin-bottom: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	color: transparent;
	background: none;
	z-index: 1;
}

input[type="date"]:before {
	background: none;
	display: block;
	font-family: 'FontAwesome';
	content: '\f073';
	width: 15px;
	height: 20px;
	position: absolute;
	top: 5px;
	right: 6px;
	color: #000;
}

.btn:hover, .btn:focus {
	color: #fff;
	text-decoration: none;
}

#grid1 {
	padding: 10px 0;
}

.ngdialog-content p span, .ngdialog-content p strong {
	background-color: transparent !important;
}

.reviewcontentpopup .modal-footer, .reviewstudentcontentpopup .modal-footer
	{
	background: #eeeeee;
}

.reviewcontentpopup .modal-footer a {
	color: #65380f;
	float: left;
}

.reviewcontentpopup .modal-footer a .fa {
	padding-right: 5px;
}

.reviewcontentpopup .modal-footer .download-file:after {
	content: "|";
	position: absolute;
	right: 0px;
}

.reviewcontentpopup .modal-body ul li label:after {
	content: ":";
	position: absolute;
	left: 30%;
}

.reviewcontentpopup .modal-body ul {
	padding-left: 15px;
}

.reviewstudentcontentpopup .modal-body ul {
	padding-left: 0px;
}

.reviewstudentcontentpopup .modal-header .close, .reviewcontentpopup .modal-header .close
	{
	margin-top: -2px;
	border: 1px solid #fff;
	width: 24px;
	border-radius: 50%;
	height: 23px;
	opacity: 1;
	color: #717171;
	font-size: 20px;
}

.reviewcontentpopup .modal-content {
	border: 2px solid #321c07;
	border-radius: 0px;
}

.reviewstudentcontentpopup .modal-body ul li, .reviewcontentpopup .modal-body ul li
	{
	list-style: none;
	width: 100%;
	padding: 5px 0;
	height: 50px;
	list-style: none;
}

.reviewstudentcontentpopup .modal-dialog {
	width: 75%;
}

.maxscorepopupcontent .modal-dialog {
	width: 60%;
}

.modal-header {
	background: #ff9a00;
	color: #fff;
	padding: 23px;
}

.modal-footer {
	background: #eee;
	padding: 9px !important;
}

.close {
	border: 1px solid #fff !important;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	opacity: 1;
}

.close>span {
	color: #fff;
}

.reviewstudentcontentpopup .modal-body ul li label:after {
	content: ':';
	position: absolute;
	right: 0;
}

.reviewstudentcontentpopup .modal-body ul li label {
	float: left;
}

.reviewcontentpopup .modal-body ul li label {
	width: 30%;
	float: left;
}

.reviewcontentpopup .modal-body ul li span {
	padding-left: 15px;
	float: left;
	width: 69%;
	word-wrap: break-word;
}

.reviewcontentpopup .modal-body ul li:last-child {
	border-bottom: 0px solid #ccc;
}

.angular-table.table-bordered>thead>tr>th, .angular-table.table-bordered>tbody>tr>th,
	.angular-table.table-bordered>tfoot>tr>th, .angular-table.table-bordered>thead>tr>td,
	.angular-table.table-bordered>tbody>tr>td, .angular-table.table-bordered>tfoot>tr>td
	{
	border: 1px solid #fff;
	cursor: pointer;
}

.angular-table .fa.fa-filter {
	float: right;
}

.angular-table a {
	color: #64390f;
	text-decoration: none;
}

.note-content p {
	width: 100%;
	float: left;
	height: 100%;
	color: #333;
}

.note-content span {
	color: #666666;
}

.uploadcontentarea {
	width: 100%;
	float: left;
	height: 100%;
	padding: 10px 0;
	background-color: #ededed;
}

.uploadcontent {
	margin: 10px 0;
}

.uploadcontentspopup {
	width: 75% !important;
}

.uploadcontentpopup {
	width: auto !important;
	min-width: 30%;
	max-width: 70%;
	top: 20%;
}

.modal-body table {
	width: 99% !important;
}

.modal-body .thumb {
	float: none !important;
}

.table-withfilter th, .table-withfilter td {
	width: calc(100%/ 5);
}

.tablerowheading {
	width: 100%;
	height: 100%;
}

.tablerowheading ul {
	padding-left: 15px;
	margin-bottom: 0px;
}

.tablerowheading ul li, .dbselectedvalue.ng-binding {
	list-style: none;
	width: auto;
	display: inline-block;
	color: #64390f;
	margin-right: 10px;
}

.tablerowheading ul li:after {
	content: ">";
	padding-left: 5px;
}

.tablerowheading ul li:last-child:after {
	content: "";
}

.uplaoddatatable th, .uplaoddatatable td {
	width: calc(100%/ 6);
}

.uploadtable th, .uploadtable td {
	width: calc(100%/ 4);
}

.managetreecontent {
	border: 1px solid #ccc;
	min-height: 655px;
	max-height: 655px;
	float: left;
	overflow-y: scroll;
	background: #f9f9f9;
	width: 100%;
}

.managetreecontent ul {
	padding-left: 25px;
	margin-top: 10px;
}

.managetreecontent ul li {
	list-style: none;
	width: auto;
	color: #64390f;
	margin-right: 5px;
	position: relative;
	display: block;
	margin: 10px 0;
}

.managetree {
	float: left;
	width: 100%;
	height: 100%;
}

.managetree li a {
	list-style: none;
	min-width: 120px;
	display: inline-block;
	color: #64390f;
	margin-right: 5px;
	background: #fff;
	border: 1px solid #b6b6b6;
	padding: 4px 5px;
}

.managetree li a .fa {
	margin: 0 10px;
}

.block-content {
	min-width: 120px;
	min-height: 30px;
	float: left;
	background: #64390f;
	color: #fff;
	padding: 5px 15px;
	margin-left: 15px;
	max-width: 100%;
	font-size: 16px;
	margin-bottom: 10px;
}

.block-content span .fa.fa-folder-open-o {
	padding-right: 10px;
}

.confirmation h2 {
	font-size: 16px;
	font-family: 'Open Sans', sans-serif !important;
	margin: 0px;
}

img[src=""] {
	display: none;
}

iframe {
	border: 0;
	width: 540px;
}

iframe[src=""] {
	display: none;
}

#result {
	color: green;
	font-size: 14px;
	font-style: italic;
	margin: 5px 0;
}

.fa.fa-plus-circle, .fa.fa-trash-o,.fa.fa-share-square-o,
	.fa.fa-ban, .fa.fa-unlock, .fa.fa-lock {
	font-size: 20px;
	padding: 0px;
}

.fa.fa-eye{
	font-size: 18px;
	padding: 22px;
}

.btn {
	padding: 5px 8px 4px 8px !important;
}

.btn:hover, .btn:focus {
	color: #fff !important;
	text-decoration: none;
	background: #066426;
}

.logout-content {
	font-size: 14px;
	width: 100%;
	float: left;
	height: 100%;
	margin-top: -80px;
}

.logout-content h2, .logout-content a {
	font-size: 16px;
	font-family: 'Open Sans', sans-serif !important;
}

.inputcontainer .textbox, .inputcontent .textbox, .textbox {
	width: 100%;
	height: 34px;
	float: left;
	text-indent: 5px;
	border: 1px solid #bebebe;
	border-radius: 3px;
}

.inputcontent .textbox:read-only {
	background: #f2f2f2;
	color: #999;
}

.statecontent {
	margin: 10px 0;
	float: left;
	width: 100%;
}

.inputcontent .buttons-group {
	border: 1px solid #64390f;
	border-radius: 5px;
	height: 34px;
	float: left;
	background: #f9e9dc;
}

.inputcontent .edit-delete {
	width: 68px;
	float: right;
}

.inputcontent .buttons-group div {
	width: 32px;
	float: left;
}

.inputcontent .buttons-group button {
	background: transparent;
	border: 0;
	float: left;
	height: 32px;
	width: 32px;
}

.inputcontent .buttons-group  button .fa {
	font-size: 20px;
	position: relative;
	top: 2px;
	color: #64390f;
	cursor: pointer;
}

.inputcontent .buttons-group div:first-child {
	border-right: 1px solid #64390f;
}

.ngdialog-overlay {
	background: rgba(0, 0, 0, 0.25);
}

.modal-body .vc_row-fluid .vc_col-sm-12 {
	width: 100% !important;
	float: none !important;
}

.modal-body .vc_row-fluid .vc_col-sm-12 .vc_column-inner {
	width: 100% !important;
}

body.modal-open {
	overflow: hidden;
}

input[type="file"] {
	width: 34%;
	border: 1px solid #ccc;
	padding: 15px;
}

.savecontent button {
	display: none;
}

textarea {
	resize: none;
}

.addperson {
	float: right;
	color: #64390f;
}

.addperson a {
	color: #64390f;
}

.addperson i {
	border: 1px solid #64390f;
	width: 22px;
	height: 22px;
	float: left;
	margin-right: 5px;
	border-radius: 50%;
	text-align: center;
	line-height: 21px;
	color: #64390f;
}

.addcrccontent .modal-dialog, .editcrccontent .modal-dialog,
	.addteachercontent .modal-dialog, .editteachercontent .modal-dialog,
	.addbrccontent .modal-dialog, .editbrccontent .modal-dialog,
	.addadmincontent .modal-dialog, .editadmincontent .modal-dialog {
	width: 30%;
}

.addcrccontent .modal-footer, .editcrccontent .modal-footer,
	.addteachercontent .modal-footer, .editteachercontent .modal-footer,
	.addbrccontent .modal-footer, .editbrccontent .modal-footer,
	.addadmincontent .modal-footer, .editadmincontent .modal-footer {
	text-align: center;
}

.attandencetable {
	width: 100%;
	float: left;
	height: 250px;
	overflow: scroll;
}

.generalstatustable {
	width: 100%;
	min-height: 50px;
	float: left;
	background: #eed6bd;
	margin: 10px 0;
}

.generalstatustable .statustitle {
	width: 100%;
	height: 36px;
	background: #64390f;
	color: #fff;
	line-height: 18px;
	padding: 10px;
}

.generalstatustable .statustitle label {
	font-weight: normal;
	color: #fff;
}

.generalstatustable .statuscontent {
	padding: 0 15px;
	float: left;
	width: 100%;
}

.modal-body {
	position: relative;
	padding: 20px;
	min-height: 100px;
	max-height: 510px;
	overflow-y: auto;
}


pdf content
.pdf_container {
	width: 100%;
	height: 100%;
	float: left;
	color: #000;
}

.pdf_container .table td {
	color: #000;
	background: #fff !important;
	border: 1px solid #000 !important;
}

.pdf_container .table td:first-child {
	background: #dcdcdc !important;
	font-weight: bold;
}

.pdf_header, .pdf_footer, .pdf_content, .pdf_container {
	width: 100%;
	height: 100%;
	float: left;
	background: #333333;
}

.pdf_content {
	margin-bottom: 20px;
}

.pdf_content, .pdf_container {
	background: #fff;
}

.pdf_data {
	opacity: 0;
	position: absolute;
	width: 100%;
	float: left;
	left: 0;
	z-index: 0;
	top: 300px;
}

.attendancepdf {
	opacity: 0;
	position: absolute;
	width: 98%;
	float: left;
	left: 0;
	z-index: 0;
	margin-top: 20px;
}

.tableinfo {
	margin: 5px 0;
	float: left;
	width: 100%;
}

.tblheader {
	width: 95% !important;
	padding: 0px !important;
	text-align: center;
	font-size: 10px !important;
}

.tblheader h4, .tblheader h5, .tblheader h6 {
	margin: 2px !important;
}

.attendpdf_header {
	margin: 0;
	width: 100%;
}

.attendpdf_header.pdf_header .logo img {
	width: 50px;
	height: 50px;
	float: left;
}

#exportattendancetable {
	width: 575px !important;
	font-size: 10px !important;
}

#exportattendancetable .pdf_content .schoolinfo, #exportattendancetable .pdf_content .schoolinfo tr
	{
	width: 100%;
	border: 0px !important;
	background: #f1f1f1 !important;
	padding: 0px !important;
	float: left;
	font-size: 10px !important;
}

#exportattendancetable .pdf_content .schoolinfo>tr>td {
	width: 27%;
	float: left;
	border: 0px !important;
	background: none !important;
	font-size: 10px !important;
	padding: 2px 5px !important;
}
/*--rakshita --*/

#errorlang{
	margin-left:1.5rem;
}
#error{
	margin-left:1.5rem;
}
#errorsub{
	margin-left:1.5rem;
}
#errorgrade{
	margin-left:1.5rem;
}
#errorstat{
	margin-left:1.5rem;
}


.change::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #000000;
}
.change:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #000000;
    opacity: 1;
}
.change::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #000000;
    opacity: 1;
}
.change:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #000000;
}

.attendancetable .table>thead>tr>th, .attendancetable .table>tbody>tr>th,
	.attendancetable .table>tfoot>tr>th, .attendancetable .table>thead>tr>td,
	.attendancetable .table>tbody>tr>td, .attendancetable .table>tfoot>tr>td
	{
	padding: 3px !important;
	font-size: 10px !important;
}

#exportattendancetable .schtble>.schoolinfo>tr>td:nth-child(1),
	#exportattendancetable .schtble>.schoolinfo>tr>td:nth-child(3) {
	font-weight: bold !important;
	font-size: 10px !important;
	width: 23% !important;
}

.pdf_header .header {
	text-align: center;
	width: 91%;
	color: #fff;
	float: left;
}

.pdf_header .logo img {
	width: 75px;
	height: 75px;
	float: left;
}

.schoolinfo {
	width: 100%;
	height: 100%;
	float: left;
	background: #f1f1f1;
	padding: 5px 0;
	color: #000;
}

.schoolinfo span {
	font-weight: semi-bold;
}

.schoolinfo label:after {
	content: ':';
	position: absolute;
	right: 0px;
}

.teachersdetails, .studenterollment, .generalinformation, .generalinfo {
	float: left;
	width: 100%;
	height: 100%;
}

.generalinfo p {
	color: #000;
}

.generalinfo p span {
	font-weight: bold;
	position: absolute;
	left: 50%;
}

.pdf_content .table {
	margin: 0px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.date-content label {
		text-align: left;
	}
}

.myStyle {
	font-weight: bold !important;
}

.fixedtable {
	overflow-x: auto;
	margin-left: 120px;
	margin-right: 350px;
	min-height: 90px;
}

.fixedtable .table {
	margin: 0px;
}

.fixedtable .table tbody {
	text-align: center;
}

.fixedtable th {
	font-size: 12px;
}

.headcol {
	position: absolute;
	width: 137px;
	left: 0;
	background: #5a5a5a;
	color: #fff;
}

.headcol1 {
	position: absolute;
	width: 368px;
	right: 0;
	background: #5a5a5a;
	color: #fff;
}

.headcol2 {
	right: 160px !important;
	width: 208px !important;
}

.headcol3 {
	right: 80px !important;
}

.headcol4, .headcol3, .headcol2 {
	position: absolute;
	width: 80px;
	right: 0;
	background: #5a5a5a;
	color: #fff;
}

.notecontent {
	width: 100%;
	float: left;
	font-size: 12px;
	font-style: italic;
	color: #033213;
}

.gradingformulae label {
	font-weight: bold;
}

.gradingformulae span {
	font-weight: normal;
	padding-left: 5px;
}

ul.pagination {
	margin: 10px 0 !important;
}

.pagination>li>a, .pagination>li>span {
	padding: 4px 10px !important;
}

span.multiselect-native-select {
	position: relative
}

span.multiselect-native-select select {
	border: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	height: 1px !important;
	margin: -1px -1px -1px -3px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	left: 50%;
	top: 30px
}

.multiselect-container {
	position: absolute;
	list-style-type: none;
	margin: 0;
	padding: 0
}

.multiselect-container .input-group {
	margin: 5px
}

.multiselect-container>li {
	padding: 0
}

.multiselect-container>li>a.multiselect-all label {
	font-weight: 700
}

.multiselect-container>li.multiselect-group label {
	margin: 0;
	padding: 3px 20px 3px 20px;
	height: 100%;
	font-weight: 700
}

.multiselect-container>li.multiselect-group-clickable label {
	cursor: pointer
}

.multiselect-container>li>a {
	padding: 0
}

.multiselect-container>li>a>label {
	margin: 0;
	height: 100%;
	cursor: pointer;
	font-weight: 400;
	padding: 3px 0 3px 30px
}

.multiselect-container>li>a>label.radio, .multiselect-container>li>a>label.checkbox
	{
	margin: 0
}

.multiselect-container>li>a>label>input[type=checkbox] {
	margin-bottom: 5px
}

.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px
}

.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio
	{
	padding: 3px 20px 3px 40px
}

.form-inline .multiselect-container li a label.checkbox input[type=checkbox],
	.form-inline .multiselect-container li a label.radio input[type=radio]
	{
	margin-left: -20px;
	margin-right: 0
}

::-webkit-input-placeholder {
	color: #c7c2c2;
}

#notify {
	display: none;
	background: #f3f3f3;
	width: 40%;
	min-height: 40px;
	padding: 20px 10px 10px;
	float: left;
	position: absolute;
	top: 20%;
	left: 30%;
}

#notify p {
	font-weight: bold;
	color: #000;
}

.fixedtable .table>thead>tr>th {
	min-height: 52px;
	padding: 4px !important;
	text-align: center;
}

.fixedtable .table>thead+thead>tr>th {
	min-height: 52px;
	padding: 5px 4px 16px !important;
	text-align: center;
	vertical-align: middle;
	line-height: 14px;
}

.download-panel {
	width: 100%;
	float: left;
	padding: 15px 0 10px;
	background: #ede4db;
}

.download-panel ul {
	width: 100%;
	float: left;
	height: 100%;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
}

.download-panel ul li {
	display: inline-block;
	color: #694626;
	margin-right: 15px;
}

.download-panel ul li:after {
	content: "|";
	margin-left: 10px;
}

.download-panel ul li:last-child:after {
	content: "";
}

.download-panel ul li>a {
	color: #694626 !important;
	cursor: pointer;
}

.download-panel ul li>a>span .fa-file-pdf-o {
	margin-right: 15px;
}

.content-wrapper .nav>li {
	min-width: 130px;
}

.content-wrapper .nav>li>a {
	padding: 10px 5px !important;
	text-align: center;
	font-size: 13px;
}

.no-content {
	position: absolute;
	width: 100%;
	left: 0;
	height: 38px;
	display: table;
}

.typeoffile {
	min-height: 350px;
}

.uploadFiles {
	padding-bottom: 11px !important;
}

.uploadField {
	margin-top: 20px;
}

.announcementtable {
	margin-bottom: 0px;
}

.downloadIcon {
	font-size: 20px !important;
}

.announcementtable th td {
	vertical-align: middle !important;
	color: red !important;
	background: yellow !important;
}

.banner {
	position: relative;
	top: 27px;
	/* left: 17px; */
}

.mandatory:before {
	content: " * " !important;
	color: red !important;
}

.select_category {
	float: right;
	padding-top: 7px;
}

.fa.fa-unlock {
	padding-left: 11px !important;
}

.mainSubHeader {
	padding-top: 13px;
}

.gBtn {
	background: #64390f;
	color: #fff;
	outline: none;
	border-radius: 0px;
}

.subHeader {
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #c5c5c5;
	height: 74px;
	width: 100%;
	padding-bottom: 23px;
	padding-top: 20px;
}

.gViewlist {
	padding-top: 20px;
}

.gHeader {
	border-bottom: 1px solid #dac7a6;
	padding: 9px 2px 2px 4px;
}

.gSubheader {
	padding-left: 11px;
}

.gDropdown {
	width: 258px;
}

.mGrid {
	background: #fff;
	padding-bottom: 18px;
	padding-left: 2px;
}

.gamesGrid {
	background-color: #FDF0DD;
}

.gDes {
	padding: 2px 0px 3px 11px;
}

.gBody {
	padding: 2px 2px 2px 2px;
	/* height: 135px; */
	max-height: 135px;
}

.gDesBody {
	font-size: 13px;
	text-align: justify;
	padding: 6px 11px 9px 11px;
}

.edit, .delete {
	float: right !important;
	padding-left: 29px;
	padding-right: 13px;
	font-size: 20px !important;
	color: #d28c46;
	cursor: pointer;
}

.gameFields {
	border-right: none;
	border-left: none;
	border-top: none;
	border-bottom: 1px solid #c7c7c7;
	outline: none;
	width: 300px;
}

.gamesbtn {
	padding-top: 200px;
}

.gamelabel:after {
	content: "*" !important;
	color: red !important;
	padding: 7px;
}

.gamelabel {
	color: #646464;
	padding: 23px 2px 4px 2px;
}

.resetbtn {
	background: #64390f;
	color: #fff;
	width: 100px;
	outline: none;
	border-radius: 0px;
}

/* Panel css start */
.panel-heading .accordion-toggle:after {
	/* symbol for "opening" panels */
	font-family: 'Glyphicons Halflings';
	/* essential for enabling glyphicon */
	content: "\e114"; /* adjust as needed, taken from bootstrap.css */
	float: right; /* adjust as needed */
	color: #d28c46; /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
	/* symbol for "collapsed" panels */
	content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

.accordion-toggle:hover, .gdelete:hover {
	text-decoration: none !important;
}

/* Panel css End */
.editDeleteBtn {
	float: right;
	/* padding-left: 762px; */
	/* padding-right: 10px; */
}

.gedit, .gdelete {
	font-size: 22px !important;
	color: #d28c46;
	cursor: pointer;
	vertical-align: middle;
}

.gamesP_Body {
	padding: 10px;
}

input:checked ~ .questionRadio {
	background-color: #2196F3;
}

.questionRadio:after {
	background-color: #2196F3;
}

span.k-widget.k-datepicker.k-header {
	border: 1px solid #BEBEBE !important;
}

.special-img {
	border-radius: 53%;
	width: 78%;
	height: 90%;
	margin-top: 15px;
}

.profileDrop {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 126px;
	padding: 3px 0;
	margin: 11px 7px -1px -92px;
	font-size: 14px;
	list-style: none;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;
}

.caret {
	display: inline-block;
	width: 0;
	height: 30px;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px solid #000;
	border-right: 4px solid transparent;
	border-bottom: 0 dotted;
	border-left: 4px solid transparent;
}

.input-icons i {
	position: right;
}

.input-icons {
	width: 100%;
	margin-bottom: 10px;
}

.icon {
	padding: 10px;
	color: black;
	min-width: 50px;
	text-align: right;
}

.input-field {
	width: 100%;
	padding: 10px;
	text-align: left;
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid black;
}

.eye {
	position: relative;
	color: black;
	font-size: 16px;
}

.eye .fa-eye {
	position: relative;
	top: 8px;
	left: -2px;
}

.eye input {
	width: 100%;
	padding: 10px;
	text-align: left;
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid black;
}

 .p-viewer, .p-viewer2 {
	float: right;
	margin-top: -55px;
	position: relative;
	z-index: 1;
	cursor: pointer;
} 
.login-left {
	width: 44%;
	margin: 0 0 0 5%;
	display: inline-block;
	float: left;
}

 input[type=submit], input[type=button],.Content-button {
     background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 6px 13px;
    margin: 52px;
    border-radius: 38px;
   
}
/*   input[type=button],.delete-Content-button {
     background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 6px 13px;
    margin: 52px;
    border-radius: 38px;
   float: right;
} */
.wrapper-dropdown-4 {
    /* Size and position */
    position: relative;
    width: 220px;
    margin: 15px auto;
    padding: 10px 10px 10px 10px;
    padding-right: 29px;

   	border-radius: 0px;
	height: 53px;
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid black;
    cursor: pointer;
    
}

.wrapper-dropdown-4 .dropdown {
	/* Size & position */
	position: absolute;
	top: 100%;
	margin-top: 1px; /* border of wrapper */
	left: -1px;
	right: -1px; outline : none; 
	border : none; 
	box-shadow : none;
	background-image : none;
	background-color : transparent; 
	background : transparent;
	border-color : transparent;
	
	/* Styles */
	background: white;
	border-top: none;
	list-style: none;
	transition: all 0.3s ease-out;
}

/* .content-div{
     border: transparent;
    padding: 29px 285px 27px 279px;
    
} */

.content-div{
     border: transparent;
    padding: 29px 255px 27px 245px;
    
}

/* .content-div-right{
     border: transparent;
    padding: 23px 327px 5px 57px;

} */

.content-div-right{
     border: transparent;
    padding: 23px 307px 5px 57px;
}
 .top-right{
   position:absolute;
   top:71px;
   right:0;
  }
  
  input[type=submit], input[type=button],.Back-button {
    background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 6px 32px;
    margin: 50px;
    border-radius: 38px;
    top:80px;
   	right:0;
}
 input[type=submit], input[type=button],.Add-button {
      background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 6px 32px;
    margin: 33px;
    border-radius: 38px;
    top: 80px;
    right: 0;
}

  
  input[type=submit], input[type=button],.Teacher-button {
    background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 8px 45px;
    margin: -20px;
    border-radius: 38px;
    top:80px;
   	
}

  
  input[type=submit], input[type=button],.Student-button {
    background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 8px 45px;
    margin: -20px;
    border-radius: 38px;
    top:80px;
   	
}

h4, h5, h6 {
    margin-top: 16px;
    margin-bottom: 10px;
}

div.ex1 {
border: transparent;
    padding: 29px 15px 30px 30px;
}

div.ex2 {
border: transparent;
padding:31px 9px 40px 12px;
}

div.ex3 {
border: transparent;
padding: 40px 121px 8px 21px;
}

div.ex4 {
border: transparent;
    padding: 29px 20px 2px 4px;
}
div.ex5 {
border: transparent;
    padding: 23px 4px 35px 6px;
}

div.ex8 {
border: transparent;
    padding: 67px 51px 63px 261px;
}
div.ex6 {
border: transparent;
    padding: 29px 16px 44px 242px;
}

div.ex7 {
    border: transparent;
    padding: 67px 35px 63px 231px;
}
div.hamicon {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
.row-header{
    margin-right: -22px;
    margin-left: -30px;
}


/* input[type=submit], input[type=button],.topic {
    background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 2px 16px;
    margin: 50px;
    border-radius: 38px;
    top:80px;
   	left:0;
} */

.addfield {
	float: right;
    color: #ff9a00;
    margin-right: 408px;
    margin-top: 39px;
    
}
.addfield a {
	color: #ff9a00;
	text-decoration: none;
}

.addfieldLoc {
	float: right;
    color: #ff9a00;
    margin-right: 33rem;
    margin-top: 39px;
    
}
.addfieldLoc a {
	color: #ff9a00;
	text-decoration: none;
}

.addsubject {
    float: right;
    color: #ff9a00;
    margin-right: -160px;
    margin-top: 40px;

}
.addsubject a {
	color: #ff9a00;
		text-decoration: none;
}

.Add-button {
    background: #ff9a00;
    font-size: 14px;
    float: right;
    color: #fff;
    border: 0px;
    padding: 6px 32px;
    margin: 10px;
    border-radius: 38px;
    top:80px;
   	right:0;
}

.Save-button {
    background: #ff9a00;
    font-size: 14px;
    float: right;
    color: #fff;
    border: 0px;
    padding: 4px 23px;
    margin: -6px;
    border-radius: 38px;
    top:80px;
   	right:0;
}


input[type=submit].Aproval-button{
    background: #ff9a00;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 4px 10px;
    margin: 15px;
    border-radius: 38px;
    top: 80px;
    right: 0;
    text-align: center;
}
input[type=submit], input[type=button], .Delete-button {
    background: #ff9a00;
    height:32px;
    font-size: 14px;
    color: #fff;
    border: 0px;
    padding: 6px 32px;
    margin: 21px;
    border-radius: 38px;
    top: 80px;
    right: 0;
}
input[type="file"],.choose {
	width: 34%;
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid black;
	padding: 15px;
}

form[role=login] .topic-name {
	width: 34%;
	border-radius: 0px;
	height: 46px;
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid black;
}
form[role=login] .text-name {
	width: 30%;
	border-radius: 0px;
	height: 27px;
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid black;
}
th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	background-color: #ff9a00;
	color: white;
	border: 0;
	outline: 0;
	border-bottom: 1px solid black;
}

#myProgress {
  width: 100%;
  background-color: #ff9a00;
}

#myBar {
  width: 50%;
  height: 30px;
  background-color: #4CAF50;
}

.progress {
	width: 34%;
    height: 16px;
    margin-bottom: 33px;
    overflow: hidden;
   /*  background-color: #b4b2b0; */
   background-color: #fff;
    border-radius: 7px;
    
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #ff9a00;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -webkit-transition: width .6s ease;
    transition: width .6s ease;
}

table.table td a.edit {
        color: #ff9a00;
    }
    table.table td a.delete {
        color: #ff9a00;
    }
    
    .modal-header .close {
    margin-top: -10px;
}

@media ( max-width :1400)and(min-width:1280) {
	background-image:url( "./images /1280_Screen.png ") 
	
	.content-div {
		border: transparent;
		padding: 29px 285px 42px 221px;
	}
}

@media ( max-width :1400)and(min-width:1280){
	.side-navbar {
	width:17%;
	}
}
.inputcontainer .textbox, .inputcontent .textbox, .textbox1 {
	width: 50%;
	height: 34px;
	float: left;
	text-indent: 5px;
	border: 1px solid #bebebe;
	border-radius: 3px;
	margin-bottom:10px;
	margin-left: -13px;
}
.addcc {
    float: right;
    color: #ff9a00;
    margin-right: -139px;
    margin-top: 40px;

}

.addcc a {
	color: #ff9a00;
		text-decoration: none;
}

/* media queries for high resolution */

 
/* @media�only�screen�and�(min-device-width:�1200px)�and�(max-device-width:�1366px) { 
	

} */
@media  screen and (max-width: 1366px) {
    .content-div {
    border: transparent;
    padding: 22px 200px 43px 235px
	
	}
	
	.content-div-right{
     border: transparent;
    /* padding: 21px 307px 5px 57px; */
    padding: 19px 238px 43px 75px
}
}
 form .progress {
            line-height: 15px;
        }
 
        .progress {
                display: inline-block;
    width: 251px;
    border: 3px groove #ccc;
    height: 17px;
        }
 
        .progress > div {
            font-size: smaller;
            background-color: #ff9a00;
            width: 0%;
        } 
        
         .sidebar {
     position: fixed;
     width: 200px;
     height: 400px;
     background: #000;
 }
        
/* .loader {
    border: 16px solid #f3f3f3; Light grey
    border-top: 16px solid #3498db; Blue
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
 }

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

.hide-loader{
display:none;
} */