.add_class_box {
float: left;
width: 100%;
padding: 8%;
    border: solid 1px #918b8b;
margin-bottom:20px;
	    overflow: hidden;
    -webkit-transition: box-shadow 200ms ease,-webkit-transform 200ms ease;
    transition: box-shadow 200ms ease,transform 200ms ease;    position: relative;
}
.add_class_box:hover {
    -webkit-transform: translate(4px, -4px);
    -moz-transform: translate(4px, -4px);
    -ms-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
    box-shadow: -5px 5px 0 rgb(137 84 186 / 10%);
}
.class-name-subject {float:left}
.class_over_elispe {
    position: absolute;
    right: 4%;
}
.class-name a {
    color: #444;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

.class-name {
    font-size: 18px;
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

.class-name-section {
    float: left;
    width: 100%;
    line-height: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #555;
}

.class-total-student {
    float: right;
}

.class-total-student a {
    font-size: 14px;
    text-decoration: none;
    color: #c657a0;
    font-weight: 600
}

.classes_main_student {
    float: left;
    width: 100%;
    margin-top: 0%;
}

.classes_main_student h2 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 20px;
    padding-top: 20px;
}
.meterial_container {
    float: left;
    width: 100%;
}

.meterial_sidebar {
    float: left;
    width: calc(20% - 10px);
    /* padding: 0 10px;*/
}

.meterial_sidebar_inner {
    float: left;
    width: 100%;
}

.meterial_sidebar_inner ul {
    list-style: none;
    padding: 0;
    margin: 0px;
    float: left;
    width: 100%
}

.meterial_sidebar_inner ul li {
    float: left;
    width: 100%;
    padding: 0 5px;
}

.meterial_sidebar_inner ul li a {
    color: #888;
    text-decoration: none;
    line-height: 30px;
    font-size: 14px;
}

.meterial_sidebar_inner ul li:hover {
    background: #eef3f9;
    width: 100%;
    float: left;
    border-radius: 4px;
    line-height: 30px
}

.meterial_sidebar_inner ul li:first-child a {
    color: #00439d;
    text-decoration: none;
    padding: 3px;
    font-weight: 600;
}

.meterial_body_inner {
    float: left;
    width: calc(80% - 0px);
    padding-left:0px;
}

.meterial_body_inner .panel {
    background: none;
    box-shadow: none;
    border-bottom: solid 1px #ddd;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0!important;
    float: left;
    width: 100%
}

.meterial_body_inner .panel .panel-heading {
    background: none;
    float: left;
    width: 100%;
}
.panel.panel-default.panel-active {
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 2px 6px 2px rgba(60,64,67,0.149);
    border-radius: 0.5rem;
    overflow: hidden;
    border-bottom: 0px;
    border-radius: 4px!important;
    margin-bottom: 15px
}
.panel.panel-default.panel-active:last-child{ margin-bottom:50px}
.breadcrumb-item a{    color: #8954ba; text-decoration: none!important}
.panel.panel-default.panel-active .panel-heading {
    background: #fbfbfb;
    float: left;
    width: 100%;
    padding: 4px 10px;
}

.panel_meterial_name span {
    color: #3c4043!important;
    line-height: 40px;
	font-size: 1.3rem;
}

.meterial-n {
    font-weight: 600!important;
}
.merial_posted_right {
    float: left;
    line-height: 46px;
    font-size: 12px;
}
.panel_meterial_name {
    float: left;
}

.meterial_body_inner .panel-group {
    margin-bottom: 0px;
    float: left;
    width: 100%;
}

.merial_posted_date {
    color: #888;
    margin-bottom: 9px;
    float: left;
}

.meterial_add_topic h3 a {
    color: #c14998;
    text-decoration: none
}
.panel.panel-default.panel-active .panel-heading .panel-title {
    float: left;
    width: 100%;    margin-bottom: 0;
}

.merial_panel_body {
    float: left;
    width: 100%;
    margin-top: 0px;    padding-left: 10px;
    padding-right: 10px;
}
.view_meterial-btn a {
    font-size: 16px;
    color: #c4519c;
    text-decoration: none;
    font-weight: 600;
    padding-left: 15px;
}

.panel.panel-default.panel-active .panel-footer {
    background: none;
    border-top: solid 1px #ddd
}

.meterial_body_topic {
    float: left;
    width: 100%;
    margin-top: 3%;
}

.meterial_body_topic h3 {
    color: #c3509c
}

.meterial_body_topic_inner, .meterial_add_topic {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

/*.meterial_add_topic:hover {
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 2px 6px 2px rgba(60,64,67,0.149);
    border-radius: 0.5rem;
    border-bottom: 0px;
    border-radius: 4px!important;
    cursor: pointer;
}*/

.meterial_add_topic h3 {
    border-bottom: 1px solid #4285f4;
    float: left;
    width: 100%;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    font-size: 18px;
}
.panel_meterial_name img {
    float: left;
    margin-right: 10px;
}

.panel_meterial_name {
    float: left;
    width: 78%;
}
.meterial_body_inner .panel-collapse .panel-footer {
    overflow: hidden;
    float: left;
    width: 100%;
    background: none;
}
.meterial_body_topic_inner p {
    line-height: 18px;
    color: #333;
    padding-bottom:0px
}
.class-r0om_left-icon {
float: left;
width: 6%;
}
.class-r0om_right-container {
float: left;
width: 92%;
}
.meterial_title h1{ margin-top:0px}
.meterial_title h1 {
margin-top: 0px;
font-size: 26px;
font-weight: 600;
color: #0e5bbb;    float: left;margin-bottom: 15px;}
.meterial_title {
width: 100%;
float: left;
}

.meterial_title .dropdown {
float: right;
}
.meterial_title .dropdown.dropdown-toggle.open .dropdown-menu{left: -152px!important;
width: 80px;}
.user_meterial_post {
float: left;
width: 100%;
margin-bottom: 15px;
border-bottom: solid 1px #ddd;
padding-bottom: 10px;
}
.meterial_post_name span{ margin-left:2%}
.meterial_post_name i{    background: #f4f4f4;
padding: 8px 10px;
border-radius: 50%;
margin-right: 6px;}
.meterial_post_discription p{ color: #5f6368;
padding-bottom: 0px;
line-height: 18px;}
.meterial_upload_file {
float: left;
width:29%;
border-radius: 5px;
position: relative;
margin-top: 10px;
margin-right: 10px;
}
.student_comment_wrapper {
float: left;
width: 100%; margin-top:4%
}
.student_comment_wrapper h4{margin-bottom: 4%;
font-weight: 600;
color: #888;}
.left-side_user-comment {
float: left;
width: 100%;    margin-bottom: 15px;
}
.student_comment_wrapper .nav.nav-tabs li a{    border-left: solid 1px #ddd;
    border-top: solid 1px #ddd;
    border-radius: 4px;
    border-right: solid 1px #ddd;
    padding: 7px 15px;
    color: #333;
    text-decoration: none;
    float: left;}
.student_comment_wrapper  .nav-tabs {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}
.upload-btn-wrapper input[type=file] {
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.class_share_wrap {
    float: left;
    width: 100%;
    margin-bottom: 6%;
}
.pull-right {
    float: right;
    margin-top: 0px;
}
.upload-btn-wrapper {
    float: left;
}
.meterial_title .mouse_over_ellipsis01 { display:none}
.class-r0om_right-container .meterial_title h1{color: #3c4043!important;
    line-height: 40px;
    font-size: 1.3rem;}
.fixed_ellipsis a{     padding: 0px;
    background: none;}
.fixed_ellipsis a:hover{ background-color:none!important}
.class_share_box {
    float: left;
    width: 100%;
    margin-top: 35px;
}
.fixed_ellipsis .dropdown-toggle::after{ display:none}
.class_share_box .panel_meterial_name span {
    color: #3c4043!important;
    line-height: 14px;
    font-size: 1rem;
    font-weight: 400!important;
}
.student_comment_wrapper h4 {
    margin-bottom: 4%;
    font-weight: normal;
    color: #888;
	font-size: 16px
}
.user_currnt_icon {
    float: left;
    width: 6%;
    margin-right: 10px;
}
.user_currnt_icon img{width:100%}
.user_curren_right {
    float: left;
    width: 85%;
}
.user_post_discriptions-r {
    text-align: right;
}
.panel.panel-default.panel-active .panel-footer {
    background: none;
    border-top: solid 1px #ddd;
}
.footer_comment-chat {
float: left;
    width: 100%;
    padding-left: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.post_iser_icon {
    float: left;
    width: 40px;
}
.post_iser_icon img{width:100%}
.user_comment_fld {
    float: left;
    width: 88%;
    position: relative;
    margin-left: 10px;
}
.user_comment_fld button {
    position: absolute;
    background: none;
    border: none;
    font-size: 22px;
    color: #888;
    transform: rotate(
44deg);
}
.user_comment_fld input {
    border-radius: 20px;
    float: left;
    width: 93%;
    margin-right: 15px;
}
.fixed_ellipsis i{    font-size: 18px;
    padding-right: 5px;
    padding-top: 12px;
    float: left;}
.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: pointer!important;
}
.upload_meterial_img {
    text-align: center;
    width: 54%;
    margin: 0 auto;
}
.upload_meterial_img img{width:100%}
.meterial_upload_name {
    float: left;
    width: 100%;
    font-size: 14px;
    text-align: center;
}
.mouse_over_ellipsis .dropdown-toggle::after{ display:none}
.user_curren_right p{ margin-bottom: 0px}
p#selectedFile {
    float: left;
    padding-left: 15px;
}
.class_share_main textarea{ margin-bottom:15px}
.meterial_mobile{display:none}
@media (min-width:320px)  and  (max-width:767px) {
	.meterial_mobile{display:block;    margin-bottom: 30px;}
	.meterial_sidebar{display: none;}
	.meterial_body_inner{width:100%;padding-right: 0;}
.merial_panel_body iframe, .meterial_body_inner iframe{
    width: 98%!important;
    height: 100%;}	
	.class-r0om_left-icon{display: none}	
	.class-r0om_right-container {
    float: left;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;}
	.footer_comment-chat{ padding-left:10px}
	.post_iser_icon{display: none;}
	.panel.panel-default.panel-active:last-child {
    margin-bottom: 20px;
}
	.classes_main nav{ margin-top: 0px}
	.merial_panel_body .ps-3 {
    padding-left: 0.5rem!important;
}
	.user_curren_right p{    font-size: 13px;}
	.user_post_discriptions-r{font-size: 13px;}
	.panel_meterial_name{ width:100%}
	.merial_posted_right{    line-height: 12px;
    font-size: 9px;}
	.panel_meterial_name span{font-size: 1rem;}
	.meterial_mobile .dropdown-menu.show {
    width: 99.8%;
}
}