html:focus-within {
  scroll-behavior: smooth;
}

.v1-forms{
	padding: 30px;
	transition: all 200ms ease-out;
	box-shadow: 0px 2px 12px #3D249F40;
	border: 1px solid #3D249F40;
	border-radius: 20px;
	/*background: url(../img/form-bg.svg) top right #fff no-repeat;*/
	background-color: #fff;
}

.remaining-lesson-count-container{
	position: relative;
}

#login-page-main-container{
	padding: 30px;
	transition: all 200ms ease-out;
	box-shadow: 0px 2px 12px #3D249F40;
	border: 1px solid #3D249F40;
	border-radius: 20px;
	background-color: #fff;
}

#static-image-container {
    padding: 20px;
    box-shadow: 0px 0px 99px #3D249F40;
    border-radius: 20px;
    background-color: #fff;
}

#menu-username{
	max-width: 185px;
    white-space: nowrap;
    display: inline-flex;
}

#menu-username-ellipsis{
	text-overflow: ellipsis;
    overflow: hidden;
}

.with-arrows{
	background: url(../img/form-bg.svg) top right #fff no-repeat !important;
}

.btn.disabled {
    opacity: 1;
    background: #efefef;
    border-color: #efefef;
    cursor: not-allowed;
    color: #aaa;
}

#user-name-surname{
	max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

#preloaderGlass{
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: rgba(255,255,255,0.4);
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-page-placeholder-img{
    box-shadow: 0px 2px 12px #3D249F40;
    border: 1px solid #3D249F40;
    border-radius: 20px;
}

body{
	background-repeat: repeat, no-repeat, no-repeat;
	background-color: #f5f5fe;
	background-position: left, right -100px, 100px 300px;
	background-size: auto, 600px, 300px; 
	color: #000;
	font-family: "Poppins", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}


html, body{
	overflow-x: hidden;
}

.footer-bg{
	background-color: #f0eef7;
}

#captcha {
	width: calc(100% - 182px);
}

.show-on-mobile p{
	color: #1b419a;
}

#captcha-refresh {
	cursor: pointer;
	width: 56px;
	height: 56px;
	position: absolute;
	right: 0px;
	top: 1px;
	border-radius: .25rem;
	background-color: #f0eef7;
	display: flex;
	align-items: center;
	justify-content: center
}

#captcha-refresh:after{
	content: url(../img/refresh-captcha.svg);
}

#captcha-img {
	width: 120px;
	position: absolute;
	right: 60px;
	top: 1px;
    height: 56px;
	border-radius: .25rem;
}

.new-form-header{
	color: #3D249F;
	font-size: 24px;
	font-weight: 600
}

.new-form-sub-header{
	color: #3D249F;
	font-size: 22px;
	font-weight: 600
}

.text-primary, b{
	color: #3D249F !important;
}

#menu-logout:hover, .dropdown-item:active, #menu-profile{
	background-color: transparent !important;
}

.text-tt-red{
	color: #dc3434 !important;
}

.text-tt-green{
	color: #27C795 !important;
}

.modal-header{
	color: #3D249F;
	font-weight: 600;
}

.modal-header, .modal-footer{
	border: none;
}

a.activaton-start-link{
	font-size: 18px;
    font-weight: 600;
    color: #18209C;
	border: 1px solid #18209C;
	padding: 10px 30px;
    border-radius: 25px;
    margin-right: 10px;
    width: 165px;
    text-align: center;
}

a.activaton-start-link:hover{
	background-color: #18209C;
	color: #fff !important;
}

footer a.nav-link{
	font-size: 14px;
	font-weight: 600;
    color: #18209C;
}

.text-body-secondary{
	font-size: 14px;
}

#navbar-login-button{
	color: #fff;
	font-size: 18px;
    font-weight: 600;
    background-color: #18209C;
	padding: 11px 30px;
    border-radius: 25px;
    text-align: center;
    width: 165px;
}

.custom-toggle{
	color: #18209C;
	font-size: 20px;
	font-weight: 600;
	border-radius: 12px;
	border: 1px solid #3D249F66;
	background-color: #3D249F0D;
}

.navbar-toggler{
	border: none;
}

.navbar{
	border-bottom: 1px solid #3D249F;
    padding: 20px;
    background-color: #fff;
}

.course-metadata-pill{
	background-color: #18209C1A;
	border-radius: 20px;
	padding: 12px 24px;
	color: #18209C;
	font-size: 14px;
	font-weight: 600;
}

.student-filter-pill{
	background-color: #fff;
	box-shadow: 0px 1px 4px 0px rgba(37, 51, 66, 0.2);
	border-radius: 20px;
	padding: 12px 24px;
	color: rgba(34, 41, 67, 1);
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	cursor: pointer;
}

.selected-student-filter-pill{
	background-color: rgba(39, 199, 149, 1);
	box-shadow: none;
	color: #fff;
}

.form-control, .form-select{
    background-color: rgba(61, 36, 159, 0.1);
    color: rgba(61, 36, 159, 1);
}

.custom-border-radius{
	border-radius: 20px;
}

.inner-pages{
	padding: 30px;
	transition: all 200ms ease-out;
	border-radius: 20px;
}

.purple-bg{
	background-color: rgba(24, 32, 156, 0.05);
}


.white-bg{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 0px 99px #3D249F40;
	border-radius: 20px;
	padding-right: 20px;
	padding-left: 20px;
}

.form-outline{
	position: relative;
}

input.invalid, .form-select.invalid{
	border-color: #dc3545;
}
  
em.error{
	width: 100%;
	font-size: 12px;
	color: #dc3545;    
	position: absolute;
    left: 0;
    text-align: left;
}

.modal-footer .btn-primary{
    padding: 15px 40px;
    font-weight: 600;
}

.btn-primary{
	background-color: rgba(24, 32, 156, 1);
    border: 2px solid rgba(24, 32, 156, 0);
	border-radius: 27px;
    padding: 15px 40px;
}

.btn-primary:hover{
	background-color: #6300c6;
}

.btn-outline-primary {
    background-color: #fff;
    border: 2px solid rgba(24, 32, 156, 1);
    border-radius: 27px;
    padding: 15px 40px;
    color: rgba(24, 32, 156, 1);
}

.btn-outline-primary:hover {
    background-color: #3D249F;
    border: 2px solid #3D249F;
    color: #fff !important;
}

.btn-kolay-giris{
	background-color: #003865;
	border: none;
    border-radius: 35px;
    padding: 19px 40px;
}

.btn-kolay-giris:hover, .btn-kolay-giris:active {
	background-color: #0a4676 !important;
}
.form-check-label{
	line-height: 1.2;
}

.hidden{
	display: none;
}

#jetders-logo{
	max-width: 200px;
}

#sad-face{
	width: 100px;
}

.swiper-container { 
	width: 100%; 
}

.vh-100{
	min-height: 100vh !important;
	height: auto !important;
}

.btn:disabled, fieldset:disabled .btn {

	opacity: 1;    
    background: #efefef;
    border-color: #efefef;
	cursor: not-allowed;
	color: #aaa;
}

.slider-img{
	width: 100%;
}

.form-check a{
	color: #3D249F;
}

.alert-warning{
	border-radius: 10px;
}

.contact-icon{
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	max-width: 20px;
}

#toggle-password{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0.6;
}

input#password{
	padding-right: 50px;
}

.form-check-input:checked {
    background-color: #18209C;
    border-color: #18209C;
}