svg{
    width: 20px;
}

nav[role="navigation"]{
    width: 70%;
    position: absolute;
}

nav[role="navigation"] .justify-between{
    display: none;
}

.shadow-sm.rounded-md{
    top: 0;
    right: 0;
    position: absolute;
}

.price-info{
    position: absolute;
    top: 5px;
    right: 24px;
    color: rgb(255, 255, 255);
    mix-blend-mode: difference;
}



.parent-main{
	display: flex;
	justify-content: center;
	align-items: center;

}

.main{
	width: 350px;
	height: 550px;
	background: red;
	overflow: hidden;
	background: linear-gradient(to bottom, #4a84f4, #527fd5, #124fc3);
	border-radius: 10px;
	box-shadow: 5px 20px 50px #000;
}
#chk{
	display: none;
}
.signup{
	position: relative;
	width:100%;
	height: 100%;
}
.signup label{
	color: #fff;
	font-size: 2.3em;
	justify-content: center;
	display: flex;
	margin: 60px;
	font-weight: bold;
	cursor: pointer;
	transition: .5s ease-in-out;
}

.login label{
	font-size: 2.3em;
	justify-content: center;
	display: flex;
	margin: 60px;
	font-weight: bold;
	cursor: pointer;
	transition: .5s ease-in-out;
}

.modal-content input{
	background: #e0dede;
	justify-content: center;
	display: flex;
	margin: 20px auto;
	padding: 10px;
	border: none;
	outline: none;
	border-radius: 5px;
}
.login-button{
	width: 60%;
	height: 40px;
	margin: 10px auto;
	justify-content: center;
	display: block;
	color: #fff;
	background: #4a84f4;
	font-size: 1em;
	font-weight: bold;
	margin-top: 20px;
	outline: none;
	border: none;
	border-radius: 5px;
	transition: .2s ease-in;
	cursor: pointer;
}
button:hover{
	background: #6d44b8;
}
.login{
	height: 460px;
	background: #eee;
	border-radius: 60% / 10%;
	transform: translateY(-180px);
	transition: .8s ease-in-out;
}
.login label{
	color: #4a84f4;
	transform: scale(.6);
}

#chk:checked ~ .login{
	transform: translateY(-550px);
}
#chk:checked ~ .login label{
	transform: scale(1);
}
#chk:checked ~ .signup label{
	transform: scale(.6);
}
.modal-body{
    padding: 0;
}

  /* (B) QUESTION */
  #quizQn {
    padding: 20px;
    background: #4c93ba;
    color: #fff;
    font-size: 24px;
    border-radius: 10px;
    margin-bottom: 50px;
  }

  /* (C) ANSWERS */
  #quizAns {
    margin: 10px 0;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
  }
  #quizAns input[type=radio] { display: none; }
  #quizAns label {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
  }
  #quizAns label.selected-value {
    background: #4a84f4;
    border: 1px solid #4a84f4;
    color:rgb(255, 255, 255)
  }

  #quizWrap {
    align-items: center; justify-content: center;
    background-image: url(https://images.unsplash.com/photo-1554034483-04fda0d3507b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0ODAwMTA1MQ&ixlib=rb-1.2.1&q=85);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 50px;
  }

  /* WIDGET */
  .widget-wrap {
    width: 600px;
    padding: 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.4);
  }

  /* FOOTER */
  #code-boxx {
    font-weight: 600;
    margin-top: 30px;
  }
  #code-boxx a {
    display: inline-block;
    border: 0;
    padding: 5px;
    text-decoration: none;
    background: #b90a0a;
    color: #fff;
  }

  .dropdown-height{
    max-height: 335px;
    overflow: auto;
  }

  /* width */
.dropdown-height::-webkit-scrollbar {
  width: 3px;
}

/* Track */
.dropdown-height::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.dropdown-height::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.dropdown-height::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.footer-contain a {
    text-decoration: none;
    background-color: transparent;
}

.footer-contain a:hover {
    color: #4a84f4;
    text-decoration: underline;
}
.footer-contain .form-control{
    width: 70%;
    border-radius: unset;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.footer-contain .btn{
    border-radius: unset;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}
.audioPlayer {
    width: 100%;
    height: 500px;
    background-size: cover;
    position: relative;
}

.audioPlayer audio{
  position: absolute;
  bottom: 0;
  width: 100%
}

#quizWrap{
    position: relative;
}

#quizNo{
    position: absolute;
    top: 15px;
    color: #fff;
}

#totalquizNo{
    position: absolute;
    top: 15px;
    color: #fff;
    right: 55px;
}

@media (max-width: 767px) {
    .question_image{
        width: 100%;
    }
}


.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 2;
    display: none;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.w-70{
  width: 70% !important;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

/* .dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
} */

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

@media (min-width: 992px){
	.dropdown-menu .dropdown-toggle:after{
		border-top: .3em solid transparent;
	    border-right: 0;
	    border-bottom: .3em solid transparent;
	    border-left: .3em solid;
	}
	.dropdown-menu .dropdown-menu{
		margin-left:0; margin-right: 0;
	}
	.dropdown-menu li{
		position: relative;
	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}

@media (max-width: 767px){
 #quizAns{
     grid-template-columns: auto !important;
 } 
 #quizAns img{
  width: 100%;   
 }
}