/*
| - CSS
| -- Colors
| -- All screen
*/

.text-blue {
	color: #007bff !important;
}    
.text-indigo {
	color: #6610f2 !important;
}
.text-purple {
	color: #6f42c1 !important;
}
.text-pink {
	color: #e83e8c !important;
}   
.text-red {
	color: #dc3545 !important;
}     
.text-orange {
	color: #fd7e14 !important;
}  
.text-yellow {
	color: #ffc107 !important;
}  
.text-green {
	color: #28a745 !important;
}   
.text-teal {
	color: #20c997 !important;
}    
.text-cyan {
	color: #17a2b8 !important;
}
.text-grey-1 {
	color: #ffffff !important;
}
.text-grey-2 {
	color: #f8f9fa !important;
}
.text-grey-3 {
	color: #e9ecef !important;
}
.text-grey-4 {
	color: #dee2e6 !important;
}
.text-grey-5 {
	color: #ced4da !important;
}
.text-grey-6 {
	color: #adb5bd !important;
}
.text-grey-7 {
	color: #868e96 !important;
}
.text-grey-8 {
	color: #495057 !important;
}
.text-grey-9 {
	color: #343a40 !important;
}
.text-grey-10 {
	color: #212529 !important;
}
.text-black {
	color: #000000 !important;
}

.bg-blue {
	background: #007bff !important;
}    
.bg-indigo {
	background: #6610f2 !important;
}
.bg-purple {
	background: #6f42c1 !important;
}
.bg-pink {
	background: #e83e8c !important;
}   
.bg-red {
	background: #dc3545 !important;
}     
.bg-orange {
	background: #fd7e14 !important;
}  
.bg-yellow {
	background: #ffc107 !important;
}  
.bg-green {
	background: #28a745 !important;
}   
.bg-teal {
	background: #20c997 !important;
}    
.bg-cyan {
	background: #17a2b8 !important;
}
.bg-grey-1 {
	background: #ffffff !important;
}
.bg-grey-2 {
	background: #f8f9fa !important;
}
.bg-grey-3 {
	background: #e9ecef !important;
}
.bg-grey-4 {
	background: #dee2e6 !important;
}
.bg-grey-5 {
	background: #ced4da !important;
}
.bg-grey-6 {
	background: #adb5bd !important;
}
.bg-grey-7 {
	background: #868e96 !important;
}
.bg-grey-8 {
	background: #495057 !important;
}
.bg-grey-9 {
	background: #343a40 !important;
}
.bg-grey-10 {
	background: #212529 !important;
}
.bg-black {
	background: #000000 !important;
}
.card-green {
	background: rgba(204, 255, 204, .2) !important;
}

/*
| Costumize
|
*/


.table a {
	text-decoration: none !important;
	color: inherit !important;
}
.table a:hover {
	text-decoration: none !important;
	color: #ced4da !important;
}

.hiddeninput {
	display: none;
}
:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }


/* Customizing */
#product-list thead th {
	text-align: center;
	vertical-align: middle;
	padding: 5px;
}
#product-list tbody td:nth-child(1) {
	text-align: center;
}
.card-header .featured {
  font-weight: 500;
}
h4.details {
  font-weight: 500;
  padding-bottom: 8px;
}
.app-btn {
	margin-top: 0px;
	position: absolute;
	right: 20px;
}
.btn-link {
	color: #999;
}

input[type=checkbox] {
    visibility: hidden;
}

.checkbox {
	float: right;
	width: 80px;
	height: 26px;
	background: #fff;
	border: 1px dashed #999;
	border-radius: 0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

.checkbox:after {
   content: 'No';
   font: 12px/26px Arial, sans-serif;
   color: #b50000;
   position: absolute;
   right: 10px;
   z-index: 0;
   font-weight: bold;
}

.checkbox:before {
   content: 'Yes';
   font: 12px/26px Arial, sans-serif;
   color: #00bf00;
   position: absolute;
   left: 10px;
   z-index: 0;
   font-weight: bold;
}

.checkbox label {
   display: block;
   width: 34px;
   height: 20px;
   position: absolute;
   top: 2px;
   left: 3px;
   z-index: 1;
   background: #ff0000;
   -o-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -khtml-transition: all 0.5s linear;
   -webkit-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   cursor: pointer;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
}
input[type="checkbox"]:disabled + label {
  background: #e9ecef;
}
.checkbox input[type=checkbox]:checked + label {
   left: 43px;
   background: #009933;
}
.checkbox-label {
	float: right;
	vertical-align: middle;
	margin-top: 8px;
	font-weight: normal;
	font-style: italic;
	font-size: 12px;
}
main .album {
	min-height: 450px;
}
table thead {
	text-align: center;
	vertical-align: middle;
}
.tblalign tbody td:last-child {
	text-align: center;
}
.tblalign tbody td:first-child {
	text-align: center;
}
.modal-footer {
	background: #fafafa;
}



/* Alert style
================ */
.alert {
	position: fixed;
	bottom: 5px;
	right: 0;
	-webkit-border-radius: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.11);
	display: table;
	width: 26%;
	color: #fff;
	font-size: 95%;
	z-index: 100;
}

.alert strong {
	display: block;
	font-size: 100%;
	text-transform: uppercase;
}

.alert-background {
	background-image: linear-gradient(to bottom, #222, #333);
	border-top-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	border-right-color: #333;
	padding-left: 60px;
}

.alert-background .icon {
	text-align: center;
	width: 45px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 15px;
}

.alert-background .icon:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	display: block;
	content: '';
	width: 10px;
	height: 10px;
	position: absolute;
	border-left: 0;
	border-bottom: 0;
	top: 50%;
	right: -6px;
	margin-top: -3px;
	background: #fff;
}

.alert-background .icon i {
	font-size: 20px;
	color: #fff;
	left: 12px;
	margin-top: -10px;
	position: absolute;
	top: 50%;
}


/*============ colors ========*/

.alert-background.alert-success .icon, 
.alert-background.alert-success .icon:after {
	border-color: #54a754;
	background: #60c060;
}

.alert-background.alert-info .icon, 
.alert-background.alert-info .icon:after {
	border-color: #3a8ace;
	background: #4d90fd;
}

.alert-background.alert-warning .icon, 
.alert-background.alert-warning .icon:after {
	border-color: #d68000;
	background: #fc9700;
}

.alert-background.alert-danger .icon, 
.alert-background.alert-danger .icon:after {
	border-color: #ca452e;
	background: #da4932;
}


/* Timeline Stylesheet
================ */

:root {
	--box-shadow1:0px 0px 18px 2px rgba(10, 55, 90, 0.15);
	
	/* Contrast */
	--white: #ffffff;
	--black: #000000;
	--blue: #0288d1;
	--grey: #ebebeb;
	--pink: #ff0066;
	
	/* Default */
	--blue:    #007bff !important; // primary
	--indigo:  #6610f2 !important;
	--purple:  #6f42c1 !important;
	--pink:    #e83e8c !important;
	--red:     #dc3545 !important; // danger
	--orange:  #fd7e14 !important;
	--yellow:  #ffc107 !important; // warning
	--green:   #28a745 !important; // success
	--teal:    #20c997 !important;
	--cyan:    #17a2b8 !important; // info

	/* Grays */
	--white:    #fff !important;
	--gray-100: #f8f9fa !important; // light
	--gray-200: #e9ecef !important;
	--gray-300: #dee2e6 !important;
	--gray-400: #ced4da !important;
	--gray-500: #adb5bd !important;
	--gray-600: #868e96 !important; // secondary
	--gray-700: #495057 !important;
	--gray-800: #343a40 !important; // dark
	--gray-900: #212529 !important;
	--black:    #000 !important;
	
	
}
.timeline{
	font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    color: #637280;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.timeline {
    padding: 50px 0;
    position: relative;
}
:focus{
    outline: 0px solid transparent !important;
}

.timeline-nodes {
        padding-bottom: 25px;
        position: relative;
    }
.timeline-nodes:nth-child(even) {
    flex-direction: row-reverse;
}
.timeline h3, .timeline p {
    padding: 5px 15px;
} 
.timeline h3 {
    font-weight: lighter;
    background: var(--purple);
	font-size: 20px;
	padding: 15px;
}
.timeline time {
    color: var(--pink);
	font-size: 22px;
	font-weight: 500;
}
.timeline .event-details {
	margin: 10px;
}
.timeline::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    border-left: 2px dashed var(--blue);
    height: 100%;
    z-index: 1;
    transform: translateX(-50%);
}
.timeline-content {
    border: 1px solid var(--gray-400);
    position: relative;
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 3px 25px 0px rgba(10, 55, 90, 0.2)
}
.timeline-nodes:nth-child(odd) h3,
.timeline-nodes:nth-child(odd) p {
    text-align: right;
}
.timeline-nodes:nth-child(odd) .timeline-date {
    text-align: left;
}
 
.timeline-nodes:nth-child(even) .timeline-date {
    text-align: right;
}
.timeline-nodes:nth-child(odd) .timeline-content::after {
    content: "";
    position: absolute;
    top: 5%;
    left: 100%;
    width: 0;
    border-left: 10px solid var(--purple);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.timeline-nodes:nth-child(even) .timeline-content::after {
    content: "";
    position: absolute;
    top: 5%;
    right: 100%;
    width: 0;
    border-right: 10px solid var(--purple);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.timeline-image {
    position: relative;
    z-index: 100;
}
.timeline-image::before {
    content: "";
    width: 80px;
    height: 80px;
    border: 2px dashed var(--blue);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 1;
}
.timeline-image img {
    position: relative;
    z-index: 100;
}

/*small device style*/
@media (max-width: 767px) {
    .timeline-nodes:nth-child(odd) h3,
    .timeline-nodes:nth-child(odd) p {
    text-align: left
	}
	.timeline-nodes:nth-child(even) {
		flex-direction: row;
	}
    .timeline::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 4%;
    width: 0;
    border-left: 2px dashed var(--blue);
    height: 100%;
    z-index: 1;
    transform: translateX(-50%);
	}
	.timeline h3 {
		font-size: 1.7rem;
	}
	.timeline p {
		font-size: 14px;
	}
	.timeline-image {
		position: absolute;
		left: 0%;
		top: 60px;
		/*transform: translateX(-50%;);*/
	}
	.timeline-nodes:nth-child(odd) .timeline-content::after {
		content: "";
		position: absolute;
		top: 5%;
		left: auto;
		right: 100%;
		width: 0;
		border-left: 0;
		border-right: 10px solid var(--blue);
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}
	.timeline-nodes:nth-child(even) .timeline-content::after {
		content: "";
		position: absolute;
		top: 5%;
		right: 100%;
		width: 0;
		border-right: 10px solid var(--blue);
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
	}
	.timeline-nodes:nth-child(even) .timeline-date {
		text-align: left;
	}
	.timeline-image::before {
		width: 65px;
		height: 65px;
	}
}

/*extra small device style */
@media (max-width: 575px) {
    .timeline::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 3%;
	}
	.timeline-image {
		position: absolute;
		left: -5%;
		}
	.timeline-image::before {
		width: 60px;
		height: 60px;
	}
}


/* Table Stylesheet
================ */
.card-body thead tr {
	text-transform: uppercase !important;
}

.card-body table-center tbody td:nth-child(1) {
	text-align: center !important;
}
.card-body tbody tr td span {
	font-size: 100% !important;
}


/* Button Stylesheet
================ */

.btn-sq {
	display: inline-block;
	width: 22% !important;
	height: auto !important;
	font-size: 75%;
	padding: 10px;
}

.posting-frame {
	margin-top: 12px;
	padding: 10px 0;
	border-top: 1px dashed #dadada;
	border-bottom: 1px dashed #dadada;
}

.tbl-academic-schedule td {
	vertical-align: middle;
}

.tbl-academic-schedule tbody tr:nth-child(1) td:nth-child(3),
.tbl-academic-schedule tbody tr:nth-child(1) td:nth-child(4),
.tbl-academic-schedule tbody tr:nth-child(1) td:nth-child(5),
.tbl-academic-schedule tbody tr:nth-child(1) td:nth-child(6),
.tbl-academic-schedule tbody tr:nth-child(1) td:nth-child(7) {
	color: #ced4da;
}
.tbl-academic-schedule tbody tr:nth-child(6) td:nth-child(3),
.tbl-academic-schedule tbody tr:nth-child(6) td:nth-child(4),
.tbl-academic-schedule tbody tr:nth-child(6) td:nth-child(5),
.tbl-academic-schedule tbody tr:nth-child(6) td:nth-child(6),
.tbl-academic-schedule tbody tr:nth-child(6) td:nth-child(7) {
	color: #ced4da;
}
.tbl-academic-schedule tbody tr:nth-child(10) td:nth-child(3),
.tbl-academic-schedule tbody tr:nth-child(10) td:nth-child(4),
.tbl-academic-schedule tbody tr:nth-child(10) td:nth-child(5),
.tbl-academic-schedule tbody tr:nth-child(10) td:nth-child(6),
.tbl-academic-schedule tbody tr:nth-child(10) td:nth-child(7) {
	color: #ced4da;
}

#loading-image {
	position: fixed;
	width: auto;
	height: 25%;
	top: 30%;
	left: 10%;
	margin-top: 10%;
	margin-left: 35%;
	z-index: 9999;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
  color: #999;
}

.btn-group-xs>.btn.custom, .btn-xs.custom, .btn-xs {
	font-size: 10px;
	padding: 1px 5px;
}



#image {
	top: 150px;
	width: 100%;
	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px dashed #BBB;
	text-align: center;
	background-color: #fafafa;
	cursor: pointer;
}



/* Sweet Alert Stylesheet
================ */
.swal-title {
	margin: 0px;
	font-size: 20px;
	margin-bottom: 20px;
}

.swal-popup {
	font-size: 1rem;
}
.swal-button--confirm {
    background: #0a0;
	margin:0 auto;
	display: inline-block !important; 
}

.swal-button--cancel {
    background: #aaa;
}

.swal-button--danger {
    background: #a00;
}

/* the button wont flash when it clicked */
.swal-button--confirm:active {
    background: #0a0;
}

.swal-button--cancel:active {
    background: #aaa;
}

.swal-button--danger:active {
    background: #a00;
}


/* Custom Admin Dashboard Counter
================ */
.dashcounts1 .icon {
	background: #6610f2 !important;
	color: #fff;
}
.dashcounts1 .progress-bar {
	background: #e83e8c !important;
}
.dashcounts2 .icon {
	background: #e83e8c !important;
	color: #fff;
}
.dashcounts2 .progress-bar {
	background: #fd7e14 !important;
}
.dashcounts3 .icon {
	background: #fd7e14 !important;
	color: #fff;
}
.dashcounts3 .progress-bar {
	background: #28a745 !important;
}
.dashcounts4 .icon {
	background: #20c997 !important;
	color: #fff;
}
.dashcounts4 .progress-bar {
	background: #17a2b8 !important;
}

/* Custom Admin Dashboard
================ */
.agenda .fa {
	color: #dadada;
}
.agenda .fa:hover {
	color: #dc3545;
}
.agenda:not(:first-child) .fa {
	display: none;
}


.table-responsive td small {
	color: #999;
	text-transform: capitalize !important;
	text-align: right !important;
}
.table-responsive th small {
	color: #999;
	text-transform: capitalize !important;
	float: right !important;
}
.modal-admin {
	max-width: 500px !important;	
}
.modal-rombel {
	max-width: 675px !important;
}
.profile-card .form-label {
	color: #999;
}
a.active.nav-link{
	color: #333 !important;
}
#rombel-list td:not(:first-child) {
	text-align: left !important;
}


/* Staff List */
.teachers-list .card-body {
	background: #fafafa;
	padding: 12px 15px;
}
.card .teacher-name,
.card .staff-name {
	padding: 12px;
	height: 50px !important;
	overflow: hidden;
	font-size: 90%;
}
.administrator-list .card-body {
	background: #fafafa;
	padding: 12px 15px;
}
.administrator-list .staff-name {
	padding: 12px;
	height: 60px !important;
	overflow: hidden;
	font-size: 90%;
}
.student-list .student-name {
	padding: 12px;
	height: 60px !important;
	overflow: hidden !important;
	font-size: 90%;
}

.student-list .section-body {
	background: rgba(255,255,255,.5);
	padding: 25px 25px;
}
.student-list h6 {
	font-size: 100% !important;
	font-weight: 700;
}

.media .media-footer {
	right: 15px;
	position: absolute;
	top: 70%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* Controlling Attachment Images */
.thumb{
	margin: 2px 2px 2px 2px;
	width: auto;
	height: 45px;
	float: left;
}
.preview-box {
	min-height: auto;
	background: #999;
	display: table-cell;
}
.preview-box img {
	margin: 2px;
}

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

.card-columns .card{
	margin-bottom:.25rem
}
.school-wall .card-columns,
.class-wall .card-columns {
    column-gap: 0.25rem;
}
@media (max-width: 576px) {
	.school-wall .card-columns,
	.class-wall .card-columns {
		-webkit-column-count:2;
		-moz-column-count:2;
		column-count:2;
		orphans:1;
		widows:1
    }
	.card-columns .card {
		display:inline-block;
		width:100%
	}
}
@media (min-width:576px){
	.card-columns {
		-webkit-column-count:4;
		-moz-column-count:4;
		column-count:4;
		-webkit-column-gap:1rem;
		-moz-column-gap:1rem;
		column-gap:1rem;
		orphans:1;
		widows:1
	}
	.card-columns .card {
		display:inline-block;
		width:100%
	}
}
@media (min-width: 768px) {
	.school-wall .card-columns,
	.class-wall .card-columns {
        column-count: 3;
    }
}

@media (min-width: 992px) {
	.school-wall .card-columns,
	.class-wall .card-columns {
        column-count: 4;
    }
}
@media (min-width: 1200px) {
	.school-wall .card-columns,
	.class-wall .card-columns {
        column-count: 5;
    }
}

.primary-post {
	background: #fff;
}
.secondary-post {
	background: #fff;	
}

.card .card-header h4 {
	font-weight: normal !important;
}

/* Student Profile */
/* @ viewstudents.php */
.student-profile .form-translate {
	display: block;
	float: right;
	color: #999999;
	font-style: italic;
	
}
.note-group-select-from-files {
  display: none;
}

.required-input {
	background-color: #ffffcc;
}

.message-area {
	font-size: 110% !important;
	font-family: Cambria, Georgia, serif;
}
.mail-sender .message-detail {
	border-left: 6px solid #dadada;
	padding-left: 20px;
}
.mail-receiver .message-detail {
	border-right: 6px solid #d0d0d0;
	padding-right: 20px;
}
.btn-white {
	background: #fff !important;
	border-radius: 0 !important;
	color: #333;
}

.btn-white:active {
	background: #fff !important;
	color: #ffffcc !important;
}
message-area dl {
	padding-top: 0 !important;
}
.message-original {
	color: #777;
	padding: 10px 10px;
	font-family: Consolas, monospace !important;
	border-radius: 5px;
	border: 1px dashed #dadada !important;
}
.note-editable {
	background-color: #fff !important;
}
.message-area dl {
	padding-bottom: 10px;
}
.message-area dt,
.message-area dd {
	margin-bottom: 0;
}
.sender-details {
	background: #fff;
	padding: 10px 10px;
	margin-top: 10px;
	border: 1px dashed #dadada;
}
.btn-respond {
	margin-top: 15px;
	text-align: center;
}
.message-detail {
	margin: 10px 15px;
}
summernote-container {
	border: none;
}
.message-area {
	border: 1px dashed #dadada;
	border-radius: 5px;
	background: #fafafa;
}
.message-reply {
	border: 1px dashed #cacaca;
	border-radius: 5px;
	background: #fafafa;
}

.message-header {
	padding-top: 10px;
	color: #fff;
}
.msg-profile {
	width: 100%;
	height: 100%;
	font-size: 16px !important;
}

.btn-group .btn {
   border-radius: 0 0 0 0 !important;
}
.reload-button .fa {
	color: #ff0000;
	-webkit-animation: fa-spin 5s infinite linear;
	animation: fa-spin 5s infinite linear;
}
.teaching-session table tr td {
	vertical-align: middle !important;
}
.card-header-title .lead {
	vertical-align: middle !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	color: #999;
}
.dashboard-counts .number .tardiness {
	font-size: 12px !important;
	vertical-align: top;
	color: #999;
}
.dashboard-counts .number .teachhour {
	font-size: 12px !important;
	display: block;
	margin-top: -10px;
	color: #999;
}
.rombel-group dl dt {
	color: #999;
	font-weight: 400;
}

#preloader_a,
#preloader_b,
#preloader_c,
#preloader_d,
#preloader_e,
#preloader_f,
#preloader_g,
#preloader_h,
#preloader_i,
#preloader_j,
#preloader_k {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	z-index: 9999;
}
.table-sm td {
	height: 42px !important;
	vertical-align: middle;
	color: inherit;
}

.cal_det_a {
	display:inline-block;
	width:18%;
}

.teacher-dash-id .card-footer .fa-star,
.teacher-dash-id .card-footer .fa-star-o,
.teacher-dash-id .card-footer .fa-star-half-full {
	padding: 8px 2px;
	font-size: 24px !important;
}
.teacher-dash-id .card-footer .fa-star-o {
	color: #999;
}
.teacher-dash-id .card-footer .fa-star-half-full,
.teacher-dash-id .card-footer .fa-star {
	color: #666;
}

.teacher-dash-id .card-footer .btn-posting {
	border-radius: 0;
}
.grade-wall {
	font-size: 12px;
	text-decoration: none !important;
}
.grade-wall:hover {
	color: #ff0000 !important;
}

.schoolwall-posted,
.classwall-posted {
	color: #555;
	font-size: 90%;
	margin-top: 10px !important;
}
.schoolwall-posted .note-video-clip {
	max-width: 100%;
	display: block;
	margin-bottom: -20px !important;
}
.classwall-posted .note-video-clip {
	max-width: 100%;
	display: block;
	margin-bottom: -60px !important;
}
.btn-droppost {
	color: #999;
}
.modal-postedwall {
	max-width: 48% !important;
}
.posting-time {
	float: right;
	color: #999 !important;
	font-size: 80% !important;
}
.border-female {
	border: 2px solid #ff1f88;
}
.border-male {
	border: 2px solid #1f3bff;
}