@import url('../fonts/font.css');


.user_box_login{width: 700px; max-width: 100%; padding: 60px 0 50px 0; margin: 0 auto;}
.user_box_login .box_title{font-size: 24px; font-weight: 500; margin-bottom: 15px;}
.user_box_login .box_link{margin-bottom: 15px;}
.user_box_login .btn_submit{background-color: #d52327; border: none; color: #fff !important; display: block; width: 100%; min-height: 50px; font-size: 18px;}
.user_box_login .box_text{ color: #071831; font-size: 17px; padding-bottom: 30px;}
.user_box_login .control-label{ display: none;}
.user_box_login .multicheck .control-label{ display: block;}
.user_box_login .multicheck .checkbox-inline{ margin: 0 15px 5px 0;}
.user_box_login .form-control{ border-radius: 0; height: 50px; color: #333; font-size: 17px; border: 1px solid #ccc; padding-left: 40px; }
.user_box_login select.form-control{ padding-left: 36px; }
.user_box_login .remember{ color: #464646; font-weight: normal; vertical-align: top; padding-top: 4px; font-size: 17px; display: inline-block; margin-right: 50px;}
.user_box_login .remember input{ vertical-align: top; margin: 6px 2px 0 0;}
.user_box_login .forgot{ color: #d52327; padding-top: 4px; font-size: 17px; display: inline-block; font-weight: 400;}
.user_box_login .forgot:HOVER{ color: #111;}

.user_box_menu{ margin-bottom: 30px; border: 1px solid #EEE;}
.user_box_menu .box_title{ height: 40px; line-height: 40px; padding: 0 15px; border-bottom: 1px solid #EEE; text-transform: uppercase; font-weight: bold;}
.user_box_menu .box_content{ padding: 15px;}
.user_box_menu .box_content ul{ margin: 0; padding: 0; list-style: none;}
.user_box_menu .box_content ul>li{ border-bottom: 1px solid #EEE;}
.user_box_menu .box_content ul>li:LAST-CHILD{ border: 0;}
.user_box_menu .box_content ul>li>a{ display: block; padding: 10px 0;}
.user_box_menu .box_content ul>li>a.active{ color: #d52327;}
.user_box_menu .box_content ul>li>a i{ font-size: 10px; color: #999; vertical-align: top; margin: 4px 3px 0 0;}

.user_box_content{ margin-bottom: 30px; border: 1px solid #EEE;}
.user_box_content .box_title{ height: 40px; line-height: 40px; padding: 0 15px; border-bottom: 1px solid #EEE; text-transform: uppercase; font-weight: bold;}
.user_box_content .box_content{ padding: 15px;}
.user_box_content .box_content:AFTER{ content: ""; display: block; clear: both;}
.user_box_content .box_title{ height: 40px; line-height: 40px; padding: 0 15px; border-bottom: 1px solid #EEE; text-transform: uppercase; font-weight: bold;}
.user_box_content .box_content{ padding: 15px;}
.user_box_content .box_content .info_description{ margin-bottom: 10px;}
.user_box_content .box_content .info_content{ margin-bottom: 20px;}
.user_box_content .box_content .info_video{ margin-bottom: 30px; width: 70%; float: left;}

.user_box_form .form-control{ border-radius: 0; height: 60px; color: #111111; font-size: 17px; border: 1px solid #475057; padding-left: 42px;}
.user_box_form .form-control::placeholder{ color: #111111; font-size: 17px;}
.user_box_form .form-control.btn_submit{ background: #d52327; font-family: "DP-Bold"; font-size: 20px; line-height: 20px; color: #fff; border: none; text-transform: uppercase;}
.user_box_form .form-control.btn_submit:HOVER{ background: #071831;}

.user_box_page_list{ padding: 0 0 50px;}
.user_box_page_list .course-title{ height: 50px; line-height: 50px; font-size: 20px; color: #222; background-color: #DDD; padding: 0 30px;}


.page_user{ padding: 50px 0 0;}
.page_user .box_wrapper{ min-height: 600px;}
.page_user .box_menu{ background: #0178b2; color: #FFF; box-shadow: 0 0 0; width: 100%; z-index: 9999;}
.page_user .box_menu a{ color: #FFF;}
.page_user .profile-detail{ margin-bottom: 50px;}
.page_user .profile-detail .avatar {  text-align: center;}
.page_user .profile-detail .avatar img{ max-width: 100%; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important;}
.page_user .profile-detail .name{ text-transform: uppercase; font-size: 20px; padding-bottom: 10px; font-weight: 600;}
.page_user .profile-detail .email{ font-size: 16px; padding-bottom: 8px;}
.page_user .profile-detail .phone{ font-size: 16px; padding-bottom: 8px;}
.page_user .profile-detail .address{ font-size: 16px; padding-bottom: 12px;}
.page_user .profile-detail .config .btn{ background-color: #e9e9e9; -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; border-radius: 3px !important; margin-top: 5px;}
.page_user .profile-detail .info span{ font-weight: 600;}
.page_user .course{ margin-bottom: 50px;}
.page_user .course ul{background: #ddd;}
.page_user .course ul li.active div{background: #a2a2a2;}
.page_user .course ul li:hover div{cursor: pointer; background: #a2a2a2;}
.page_user .course .course-title{ height: 50px; line-height: 50px; font-size: 20px; color: #222; background-color: #DDD; padding: 0 30px;}
.page_user .course .course-content{ padding: 15px 0;}
.page_user .payment .payment-title{ height: 50px; line-height: 50px; font-size: 20px; color: #222; background-color: #DDD; padding: 0 30px;}
.page_user .payment .payment-content{ padding: 15px 0;}
.page_user .payment .payment-content .table th{ padding: 15px 10px;}
.page_user .payment .payment-content .table td{ padding: 15px 10px;}

.box_intro{ border: 1px solid #CCC; padding: 20px 15px; background-color: #FFF; text-align: center; margin-top: -40px; position: relative; z-index: 999;}
.box_intro .item{ display: inline-block; text-align: left; padding-left: 50px; line-height: 18px;}
.box_intro .item.item_1{ background: url("../img/icon_3.png") no-repeat top left;}
.box_intro .item.item_2{ background: url("../img/icon_4.png") no-repeat top left;}
.box_intro .item.item_3{ background: url("../img/icon_5.png") no-repeat top left;}

.gridCourse .row{-js-display: flex; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; width: 100%;}
.gridCourse .row>div{display: flex;}
.gridCourse .item{ margin-bottom: 30px; background-color: #fff; position: relative; padding: 10px; border: 1px solid #eee;}
.gridCourse .item .info{padding-bottom: 20px; border: 1px solid #e1e1e1; border-top: 0;}
.gridCourse .item:after{content: ""; display: block; clear: both;}
.gridCourse .item .image a{ display: block;}
.gridCourse .item .image img{ width: 100%;}
.gridCourse .item .name{ padding: 10px 0; font-weight: 600; overflow: hidden;}
.gridCourse .item .name a{ color: #111;}
.gridCourse .item .name a:hover{ color: #000;}
.gridCourse .item .teacher{ padding: 0 0 10px 0; overflow: hidden; font-size: 13px; color: #111;}
.gridCourse .item .vote{ margin: 5px 10px 5px; height: 20px; overflow: hidden;}
.gridCourse .item .vote .star-vote{ color: #111; font-weight: 700; padding: 0 5px;}
.gridCourse .item .vote .rated{ color: #f8bc3c;}
.gridCourse .item .vote .rated.percent{ color: #999; position: relative;}
.gridCourse .item .vote .rated.percent:BEFORE{ color: #999;}
.gridCourse .item .vote .rated.percent:AFTER{ content: "\f005"; font-family: "FontAwesome"; position: absolute; top: 0; left: 0; z-index: 2; color: #f8bc3c; overflow: hidden;}
.gridCourse .item .vote .rated.percent.percent_1:AFTER{ width: 10%;}
.gridCourse .item .vote .rated.percent.percent_2:AFTER{ width: 20%;}
.gridCourse .item .vote .rated.percent.percent_3:AFTER{ width: 30%;}
.gridCourse .item .vote .rated.percent.percent_4:AFTER{ width: 40%;}
.gridCourse .item .vote .rated.percent.percent_5:AFTER{ width: 50%;}
.gridCourse .item .vote .rated.percent.percent_6:AFTER{ width: 60%;}
.gridCourse .item .vote .rated.percent.percent_7:AFTER{ width: 70%;}
.gridCourse .item .vote .rated.percent.percent_8:AFTER{ width: 80%;}
.gridCourse .item .vote .rated.percent.percent_9:AFTER{ width: 90%;}
.gridCourse .item .vote .rated.percent.percent_0:AFTER{ width: 100%;}
.gridCourse .item .vote .rating{ color: #424e53; font-size: 13px;}
.gridCourse .item .price{ margin: 5px 10px 0; font-size: 17px; color: #FF0000; font-family: "Roboto-Bold";}
.gridCourse .item .price .value{ font-weight: 600;}
.gridCourse .item .price .old{text-decoration: line-through; padding-left: 20px; font-family: "Roboto-Regular";}
.gridCourse .item .like{ bottom: 15px; right: 15px; cursor: pointer; float: right;}
.gridCourse .item .like .fa{color: #ed273d; padding-right: 5px;}
.gridCourse .item .pay, .gridCourse .item .activated{width: 50%; float: left;}
.gridCourse .item .activated{text-align: right;}

.courseGrid{ }
.courseGrid .item{ margin-bottom: 30px; border: 1px solid #EEE;}
.courseGrid .item .image{}
.courseGrid .item .image a{ display: block; position: relative;}
.courseGrid .item .image img{ width: 100%;}
.courseGrid .item .image .view{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/icon_zoom_product.png") no-repeat center 60% rgba(15, 42, 81, 0.5); visibility: hidden; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out 0s; -moz-transition: opacity 0.15s ease-in-out 0s; transition: opacity 0.15s ease-in-out 0s;}
.courseGrid .item .image .view .text{ width: 106px; height: 31px; text-align: center; line-height: 31px; color: #FFF; border: 1px solid #FFF; border-radius: 5px; position: absolute; bottom: 0;}
.courseGrid .item .image a:HOVER .view{ visibility:visible; opacity:1;}
.courseGrid .item .info{ padding: 15px; }
.courseGrid .item .info .title{ font-size: 14px; font-weight: bold; line-height: 22px; margin: 0;}
.courseGrid .item .info .title a{ color: #111;}
.courseGrid .item .info .title a:HOVER{ color: #d52327;}

.courseList{ margin-bottom: 30px; width: 30%; height: 339px; overflow: auto; background-color: #f5f5f5; float: left;}
.courseList .item{ padding: 10px; border-bottom: 1px solid #EEE; display: table; width: 100%;}
.courseList .item .info{ display: table-cell; width: auto;}
.courseList .item .info .title{ font-size: 12px; padding: 0}
.courseList .item .control{ display: table-cell; width: 100px; text-align: center;}
.courseList .item .control a{ display: inline-block; padding: 5px 10px; background-color: #EEE; border-radius: 3px;}
.courseList .item.active a{ color: #d52327;}
.courseList .item.active .control{ display: none;}

/*Responsive*/
@media screen and (min-width: 1200px) {
	.user_box_page_list .col-sm-3:nth-child(4n + 1){clear: left;}
}

@media all and (max-width: 992px){
}

@media all and (max-width: 768px){
}

@media all and (max-width: 767px){
	
}

@media (max-width: 480px){
} 

@media all and (max-width: 380px){}