.video-block-container {
	width: 85vw;
	height: 80vh;
	margin: auto;
	margin-top: 5vh;
	border-radius: 40px 0 40px 0;
	background-color: #f5f5f5;
	display: flex;
	overflow: hidden;

	-webkit-box-shadow: 2px 4px 15px 0px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 2px 4px 15px 0px rgba(34, 60, 80, 0.2);
	box-shadow: 2px 4px 15px 0px rgba(34, 60, 80, 0.2);
}

.course-audio {
    width: 100%;
}

.content-type-controls-span {
    display: flex;
}

.content-type-icons-span {
    margin-left: 5px;
}

.video-block-mobile {
	    display: none;
	}

audio::-webkit-media-controls-panel {
    background-color: #e9e9e9;
}

.video-confirm {
    display: none;
}

.audio-confirm {
    display: none;
}

.text-confirm {
    display: none;
}

.Text .text-confirm{
    display: inline-block;
}

.Video .video-confirm{
    display: inline-block;
}

.Audio .audio-confirm{
    display: inline-block;
}

.video-format .format-Text, .video-format .format-Audio {
    display: none;
}

.text-format .format-Video, .text-format .format-Audio {
    display: none;
}

.audio-format .format-Text, .audio-format .format-Video {
    display: none;
}


.video-block-content-inner {
	width: 73%;
	padding: 3vh 3vw;
	padding-right: 0;
}

.video-block-nav {
	width: 27%;
	background-color: #ededed;
	padding: 3vh 2vw;
}
.video-block-nav h3 {
	font-size: 25px;
	color: #333;
}

.video-block-lessons {
	height: 85%;
	margin-top: 20px;
	padding-right: 10px;
	overflow-y: scroll;
}

.video-block-lesson {
	display: flex;
	position: relative;
	margin-bottom: 10px;
	transition: 0.2s ease;
}

.video-block-lesson:hover {
	padding: 5px;
}

.video-block-lesson.active {
	padding: 5px;
	border-radius: 10px;
	/*border: 1px solid #0c738c;*/
	-webkit-box-shadow: 5px 5px 8px -5px rgba(44, 125, 148, 0.9);
	-moz-box-shadow: 5px 5px 8px -5px rgba(44, 125, 148, 0.9);
	box-shadow: 5px 5px 8px -5px rgba(44, 125, 148, 0.9);
}

.video-block-lesson.active .lesson-name h3, .video-block-lesson.active .lesson-name p {
	font-weight: 700;
	font-size: 16px;
	color: #5cc2b9;
}

.video-block-lesson.done .play-icon {
	border-left: 16px solid #fff;
}

.video-block-lesson.done .lesson-play-icon {
	background-color: #a5d5d1;
}

.lesson-play-icon {
	padding: 14px;
	background-color: #e3e3e3;
	border-radius: 7px;
	margin-right: 10px;
	width: 44px;
	height: 42px;
}


.lesson-play-icon.visited {
	background-color: #5cc2b9;
}

.play-icon {
	display: block;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-left: 16px solid #b9b9b9;
	border-bottom: 7px solid transparent;
}

.play-icon.visited {
	border-left: 16px solid #fff;
}


.lesson-name h3 {
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	font-size: 15px;
	color: #0c738c;
}

.lesson-name p {
	padding: 0;
	margin: 0;
	color: #0c738c;
	font-size: 15px;
}

.video-block-title {
	font-size: 25px;
	color: #333;
	text-transform: uppercase;
	display: flex;
    justify-content: space-between;
    padding-right: 3vw;
}

.format-buttons{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.format-buttons.active{
    box-shadow: 0px 0px 6px var(--primary_color);
}

.video-block-lesson-title {
	font-weight: 500;
}

.video-block-block-title {
	font-weight: 600;
	margin-left: 20px;
}

.video-block-content {
	overflow-y: scroll;
	padding-right: 3vh;
	height: 85%;
}

.video-block-controls {
	width: 20%;
	margin: auto;
	margin-top: 3vh;
	display: flex;
	justify-content: space-between;
}

.vb-prev, .vb-next {
	border-radius: 5px;
	background-color: #2c7d94;
	padding: 0.6vh 2vw;
	opacity: 0.8;

	transition: 0.2s ease;
}

.vb-prev:hover, .vb-next:hover {
	opacity: 1;
}

.vb-prev img, .vb-next img{
	width: 15px;
	height: 15px;
	filter: invert(100%);

}

.vb-prev img{
	transform: rotate(-90deg);
}

.vb-next img{
	transform: rotate(90deg);
}

.disable {
	pointer-events: none;
	
}

.disable:hover {
	cursor: not-allowed;
}

.disable span {
	opacity: 0.5;
}

.new-video-iframe {
    height: 60vh;
    width: 100%;
}

.my-item {
	margin-top: 20px;
	position: relative;
}

.my-text {
	color: #9c9c9c;
}

.my-image {
	width: 100%;
}

.quote{
    padding: 20px;
    background-color: #e1dede;
    border-radius: 5px;
}

.quote-img {
    width: 50px;
    height: 40px;
    margin-bottom: 20px;
}

.quote-text {
    font-size: 17px;
    font-weight: 600;
    color: #5b5b5b;
    margin-bottom: 20px;
}

.quote-author {
    font-size: 21px;
    color: #5b5b5b;
    text-transform: uppercase;
}

blockquote {
  margin-left: 0px;
  border-left: 5px solid rgba(12,115,140,1);
  padding: 20px;
  padding-bottom: 20px;
  padding-bottom: 15px;
  color: #9c9c9c;
  font-weight: 600;
}

.show-lessons {
	display: none;
}

.my-chat {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.my-chat p {
	font-size: 25px;
	font-weight: 600;
	color: #2c7d94;
	text-transform: uppercase;
	margin: 0;
}

.my-chat img {
	width: 20px;
	height: 20px;
	margin-left: 10px;
}

.lesson-create {
	padding: 0px;
	text-align: center;
	background-color: #ccc;
	color: white;
	font-size: 20px;
	font-weight: 700;
	border-radius: 10px;
	opacity: 0.5;
	transition: 0.2s ease;
}

.lesson-create:hover {
	opacity: 1;
}

.lesson-create-name{
	max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    z-index: 999;
}

.lesson-create-name-form {
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.lesson-create-name-form input {
	width: 100%;
	border: 0;
	border-bottom: 2px solid #ccc;
	margin-top: 5px;
	background: transparent;
}

.lesson-create-name-form button {
	margin-top: 5px;
	opacity: 0.7;
}

.content-create-inner {
	min-height: 200px;
	margin-top: 20px;
}

.content-create {
	padding: 0px;
	text-align: center;
	background-color: #ccc;
	color: white;
	font-size: 30px;
	font-weight: 700;
	border-radius: 3px;
	opacity: 0.5;
	transition: 0.2s ease;
}

.content-create:hover {
	opacity: 1;
}


.content-create-items{
	max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    z-index: 999;

    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

.content-create-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px 0px;
	width: 15%;
	cursor: pointer;

	transition: 0.2s ease;
}

.content-create-item:hover {
	-webkit-box-shadow: 0px -1px 8px 0px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 0px -1px 8px 0px rgba(34, 60, 80, 0.2);
box-shadow: 0px -1px 8px 0px rgba(34, 60, 80, 0.2);
}

.content-create-item img {
	width: 50px;
	height: 50px;
	filter: invert(50%);
}

.content-create-item p {
	color: #7f7f7f;
}

.modal-wrapper {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	background-color: rgba(0,0,0,0.3);
}



.modal-item {
	background-color: white;
	border-radius: 30px 0 30px 0;
	padding: 20px;
	position: relative;
	min-width: 50%;
}

.modal-close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
}

.modal-close img {
	width: 35px;
	height: 30px;
	background-color: transparent;
	cursor: pointer;
}

.label {
	margin-bottom: 10px;
	font-size: 19px;
	font-weight: 600;
}

.save-btn {
	padding: 10px 20px;
	background-color: #2c7d94;
	color: white;
	font-size: 12px;
	font-weight: 600;
	border: 0;
	border-radius: 10px 0 10px 0;
	margin-top: 10px;
}

.video-url-field input {
	width: 100%;
	font-size: 20px;
}

.question-btn {
	background-color: #7f7f7f;
	color: white;
	padding: 10px 20px;
	margin-right: 15px;
	cursor: pointer;

	transition: 0.2s ease;
}

.question-btn:hover {
	background-color: #ccc;
	color: white;
}

.item-settings {
	position: absolute;
	right: 0;
	padding: 1px;
	opacity: 0.5;
	
	cursor: pointer;
	display: flex;
	transition: 0.2s linear;
	z-index: 9999;
}

.item-settings:hover {
	background-color: #f5f5f5;
	border-radius: 5px;
	opacity: 1;

}

.item-settings:hover .item-settings-menu{
	display: flex;
}


.item-settings-btn img {
	width: 20px;
	height: 20px;
	transition: 0.2s linear;
}

.item-settings-btn img:hover {
	transform: rotate(180deg);
}

.item-settings-menu {
	padding: 5px;
	background-color: #fff;
	display: none;
	/*flex-direction: column;*/
	align-items: center;
	justify-content: center;
	/*z-index: 9999;*/
}

.item-settings-menu img {
	width: 15px;
	height: 15px;
	opacity: 0.5;
	transition: 0.2s linear;
}

.item-settings-menu img:hover {
	opacity: 1;
}

.video-block-lesson-update img{
	width: 20px;
	height: 20px;
	opacity: 0.5;
	cursor: pointer;
	transition: 0.2s linear;
}

.video-block-lesson-update img:hover {
	opacity: 1;
}

.lesson-updade-confirm {
	width: 20px;
	height: 20px;
}

.lesson-update-name-form {
	display: inline-block;
}

.lesson-update-name-form input {
	border: 0;
	background-color: #f5f5f5;
	border-bottom: 2px solid black;
}



.hide {
	display: none;
}

@media (max-width: 991px) {
	.video-block-container {
		width: 97vw;
		margin-top: 2vh;
	}

	.video-block-title, .video-block-nav h3 {
		font-size: 20px;
	}

	.lesson-play-icon {
		width: 32px;
		height: 30px;
		padding: 10px;
	}

	.video-block-lesson.active .lesson-name h3, .video-block-lesson.active .lesson-name p {
		font-size: 12px;
	}

	.lesson-name h3 {
		font-size: 11px;
	}

	.lesson-name p {
		font-size: 11px;
	}

	.vb-prev, .vb-next {
		padding: 0.6vh 4vw;
	}

	.video-block-controls {
		width: 30%;
	}
}

@media (max-width: 660px) {
	

	.show-lessons {
		//display: flex;
		position: absolute;
		right: 0;
		margin-right: 3vh;
		margin-top: 3vh;
		justify-content: space-between;
		width: 10%;
		padding: 5px;

		-webkit-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.2);
		-moz-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.2);
		box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.2);
	}

	.show-lessons span {
		width: 15px;
		height: 15px;
		background-color: #2c7d94;
		padding: 4px;
		border-radius: 25%;
	}

	.show-lessons span div {
		display: block;
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-left: 9px solid #b9b9b9;
		border-bottom: 4px solid transparent;
	}

	.video-block-nav {
		display: none;
	}

	.video-block-container {
		display: none;
		background-color: #f9f9f9;
		height: unset;
		margin-bottom: 20px;
		border-radius: 0;
	}

	.video-block-nav.my-show {
		display: block;
		position: absolute;
		width: 50%;
		height: 80vh;
		right: 0;
		border-radius: 0 0 40px 0;
		cursor: pointer;
	}

	.video-block-content-inner {
		width: 100%;
		padding: 3vh 3vw;
	}

	.video-block-content {
	    padding: 0;
	}

	.new-video-iframe {
        height: 25vh;
    }

	.my-item {
	    margin-top: 10px;
	}

	.video-block-mobile {
	    display: block;
        background-color: #fff;
	}

	.video-block-mobile-content-types {
        padding: 5px 10px;
        display: flex;
        justify-content: end;
	}

	.video-block-mobile-img {
	    width: 100%;
	    height: 150px;
        object-fit: cover;
	}

	.video-block-mobile-inner {
        padding: 10px 20px 80px 20px;

	}

	.video-block-mobile-title {
        color: black;

	}

	.video-block-mobile-content {

	}

	.video-block-mobile-controls {
        position: fixed;
        bottom: 50px;
        height: 30px;
        width: 100%;
        display: flex;
        background-color: #f3f3f3;
        padding: 0 20px;
        border-top: 1px solid black;
	}

	.video-block-mobile-controls-prev, .video-block-mobile-controls-next{
        width: 50%;
        color: #000;
        display:flex;
        align-items: center;
        text-transform: uppercase;

	}

	.video-block-mobile-controls-icon {
        display: block;
        background-image: url("/media/img/icons8-left-48.png");
        background-size: cover;
        width: 20px;
        height:20px;
        //margin-left: 20px;
    }

	.video-block-mobile-controls-prev {
        border-right: 1px solid black;
	}

	.video-block-mobile-controls-next {
        justify-content: end;
	}

}

@media (max-width: 514px) {
	.video-block-title {
		display: flex;
		flex-direction: column;
	}

	.video-block-block-title {
		margin-left: 0;
	}

	.video-block-nav.my-show {
		width: 70%;
	}

	.show-lessons {
		width: 15%;
	}



	.videoblock-title-extra {
	    display: flex;
	    flex-direction: column
	}
}