@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');


html {
    height: 100%;
}

body {
    min-height: 100%;
    min-width: 1288px;
}



body {
    font-family: 'Poppins', sans-serif!important;

}

.nopad .col-4{
    padding:0!important;
}

.tab-content a{
    color: black;
}

.tab-content p{
    font-size: 14px;
}

.square:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

a:hover {
    text-decoration: none!important;
}

a {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}


/* GRID */

.col {
    padding: 0!important;
}

.row .col-4{
    padding:0 48px;
}

/* GRID END */


/* IMGAE */


.imgFill {
    object-fit: fill;
}

/* LOGIN */

.login-sidebar{
    display: none;
}

@media only screen and (min-width: 767px) {
.login-sidebar{
    display: flex; 
    justify-content: center; 
    background: #E5F4FF;
    overflow: hidden;
    height: 100%;
}
}

.loginForm, .registerForm{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}


.login-container form {
    text-align: left;
}


input, textarea {
    background: #FFFFFF;
    border: 1px solid #CDD4D8;
}

input[type=text], input[type=password], input[type=email]{
    width: 100%;
    height: 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding:8px;
}


input[type=checkbox] {
    height: 20px;
}


input[type=file] {
    height:400px;
    cursor: pointer;
}

.custom-file-label{
    height: 400px!important;
    background-image:url('/images/Rockets.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size: 200px 200px;
}

.custom-file-label::after{
    display:none!important;
}

.input-icons i {
    position: absolute;
    right: 48px;
}
         
.input-icons {
}
         
.icon {
    padding: 10px;
    min-width: 40px;
}
         
.input-field {
    width: 100%;
    padding: 10px;
    text-align: center;
}

select {
    border: 1px solid #CDD4D8 !important;
    width: 100%;
    height: 40px;
    font-weight: 400;
    font-size: 14px!important;
    line-height: 20px;
    padding: 8px;

}


textarea[type=text]{
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding:8px;
}

/* LOGIN END */





.tab-content a:hover {
    color: black!important;
}

.tab-content a:hover {
    color: #0060FF!important;
}


label {
    margin-bottom: 4px !important;
    margin-top: 4px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;    
}

#body-container {
    width: 100%;
    height: 100%;
}


/* FONT COLOR */

.Primary-05{
    color: #0060FF;
}

.Core-white{
    color: #FFFFFF;
}

/* FONTS */

.Regular-h6{
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
}

.Regular-body {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.Regular-body-sm {
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
}

.Semibold-h5{
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
}

.Semibold-h6{
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}

.Semibold-subtitle{
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.Semibold-body{
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
}


.Bold-h1 {
    font-weight: 700;
    font-size: 56px;
    line-height: 64px;
}

.Bold-h3{
    font-weight: 700;
    font-size: 38px;
    line-height: 46px;
}

.Bold-h4{
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
}

.Bold-h5{
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

.Bold-h6{
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
}

.Bold-body{
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
}


/* MAIN NAV BAR */


.navbar{
        width: 100%;
    height: 64px;
    box-shadow: 0px 2px 4px #ADB3BE;
    padding: 0 24px !important; 
}

.nav-container {
    display: flex;    
    width: 100%;
}

.navbar-btn {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}


.navbar-nav .nav-link {
    padding: 0!important;
    height: 64px;
}

.nav-item{
    width:100px;
    height: 100%;
    text-align: center;
}

.nav-item a{
    font-weight: 600;
    font-size: 16px;
}



.nav-item-2{
    height: 100%;
    text-align: center;
}

.nav-item-2 a{
    font-weight: 600;
    font-size: 14px;
}

.nav-item-2 a:hover{
    color: black!important;
}

.nav-link {
    line-height: 64px;
    color: #ADB3BE!important;
}

.nav-link:hover {
    color: #000000!important;
    border-bottom: 4px solid #0060FF;
}

.nav-link.active {
    background-color: #E5F4FF;
    color: #000000!important;
    border-bottom: 4px solid #0060FF;
}


.nav-link-2 {
    height:48px;
    line-height: 48px;
    color: #ADB3BE!important;
}

.nav-link-2:hover {
    color: #000000!important;
}

.nav-link-2.active {
    color: #000000!important;
    border-bottom: 4px solid #0060FF;
}

.nav-item-3 a{
    height:48px;
    line-height: 48px;
    color: #ADB3BE!important;
}

.nav-item-3 a{
    font-weight: 600;
}

.nav-link-3:hover {
    color: #0060FF!important;
}

.nav-link-3.active {
    color: #0060FF!important;
}


.gallery-slide {
    display: flex;
      justify-content: space-between;

    margin: 24px 0;
}

.slide{
    width: 100%;
    background: #E5F4FF;
}

.silde-image{
    width: 300px;
    height: 150px;
    background: #E5F4FF;
    border-radius: 4px;
}

.silde-title{
    font-weight: 700;
    font-size: 12px;
    line-height: 36px;
    align-items: center;
    text-align: center;
}

.login-logo{
position: absolute;
top: 48px;
left: 48px;
z-index: 1000;



}

.logo{
    display: flex; 
    align-items: center;
    padding-right: 24px;
}

a:hover {
    text-decoration: none;
}


/* BUTTONS */

button {
    border: none;
}

.Btn-medium {
    width: 140px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    flex-direction: row;
    flex-shrink: 0;
    line-height: 40px;
    text-align: center;
    text-transform: none;
    transition: color .13s ease-in-out,background .13s ease-in-out,opacity .13s ease-in-out,box-shadow .13s ease-in-out;
    user-select: none;
    font-weight: 600;
    font-size: 16px;
}

.Btn-large {
    padding: 0 40px;
    height: 56px;
    border-radius: 8px;
    cursor: pointer;
    flex-direction: row;
    flex-shrink: 0;
    line-height: 40px;
    text-align: center;
    text-transform: none;
    transition: color .13s ease-in-out,background .13s ease-in-out,opacity .13s ease-in-out,box-shadow .13s ease-in-out;
    user-select: none;
    font-weight: 700;
    font-size: 24px;
    line-height: 56px;
}

.Btn-primary{
    background: #0060FF;
    color: white;
}

.Btn-primary:hover {
    background: #003A99;
    color: white!important;
}

.Btn-outlined{
    background: white;
    border: 1px solid #ADB3BE;
}

.Btn-outlined:hover {
    background: #E5F4FF;
}

/* MAIN NAV BAR END */

/* BANNER */

.banner {
    background-color: #E5F4FF;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 64px 80px;
}

.banner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 600px;
}



/* BANNER END */

/* FOOTER */

footer { 
	padding: 24px 24px;
    color: white;
    background-color: #0060FF;
} 


footer ul {
  padding:0;
  margin-bottom:24px;
  list-style:none;
}

footer ul a {
    color: white;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
}

footer ul a:hover {
    /* Light Blue/02 */
    color: #B3DFFF;
}

footer .copyright {
  text-align:center;
  opacity:0.3;
  font-size:14px;
  margin: 0px;
}

/* FOOTER END */

#helpIcon {
    display: block;
    text-decoration: none!important;
    margin: 10px 10px;
    width: auto;
    height: auto;
    line-height: 35px;
    text-align: center;
    color: black;
}
/* MAIN NAV BAR END */



/* MAIN SCREEN BUTTONS */
#submitSampleBtn, #downloadTableBtn, #tableEntrySubmitBtn, #textEntrySubmitBtn, #submitFileBtn{
}

#submitSampleBtn:hover, #downloadTableBtn:hover, #tableEntrySubmitBtn:hover, #textEntrySubmitBtn:hover, #submitFileBtn:hover{
}
/* MAIN SCREEN BUTTONS END */

/* SAMPLES */
#chooseDataTabs li a{
}

.card-deck {
    padding-left: 0%;
    padding-right: 0%;
    justify-content: center;
    gap:24px;
}

.card-deck > .card {
    background-color: whitesmoke;
    min-width: 18rem;
    max-width: 18rem;
    min-height: 22rem;
    max-height:  22rem;
    text-overflow: ellipsis; 
    margin-bottom: 60px!important;
    /*transition: all .1s ease-in-out*/
}

.nav-pills  a{
    font-size: 20px;
}

.nav-pills .nav-link.active {
    background-color: rgb(230, 230, 230) !important;
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
}

.sample-image{
    height: 230px;
    width: 230px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: -1px 9px 20px -12px rgb(0 0 0 / 75%);
}

.overlay {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 15px;
    right: 0;
    height: 230px;
    width: 230px;
    opacity: 0;
    border-radius: 8px;
    transition: .5s ease;
    background: rgba(102, 160, 255, 0.8);
    cursor: pointer
}

.container{
    display: block;
    position: relative;
    max-width: 3000px !important;
}

.container:hover .overlay {
    opacity: 1;
}

.sample-text {
    color: white;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
  }




/* HIDE RADIO */
[type=radio] { 
    position: absolute;
    opacity: 0;
}
  
/* IMAGE STYLES */
[type=radio] + img {
    cursor: pointer
}

[type=radio] + img:hover {
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.1);
    transform: translate(0px, -10px) scale(1.1);
    cursor: pointer;
}

.sample-category-sub-header {
}

.dropdown-item{
    text-align: center !important;
}

.dropdown-item:hover {
    color: #4285f4 !important;
}
/* SAMPLES END */

.col {
    height: auto;
    width: auto;
}


  /*
    -webkit-box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
    perspective: 1000px;
    */


.card-footer {
  background: transparent;
  border-top: 0px;
}

.flip-card {
    background-color: transparent;
    min-width: 18rem;
    max-width: 18rem;
    min-height: 20rem;
    max-height:  20rem;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 230px;
    height: 230px;
    text-align: center;
    
    transition: transform .3s;
    transform-style: preserve-3d;
    background: whitesmoke;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
    perspective: 1000px;
}




/**

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:hover .chart-img {
    visibility: hidden
}
**/

.chart-img {
    width:200px;
}


.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  /* Safari */
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.card-bodyimg{
  display: flex;
  justify-content: center;
      width: 230px;
    height: 230px;
}

.front .card-body {
    width: 230px;
    height: 230px;
}

.card-body ul {
    padding-left: 10px;
}

.card.card-footer {
    align-self: flex-end;
    flex: 1 1 auto;
}

.back {
  transform: rotateY(180deg);
}

form {
    text-align: center;
}

#downloadTeacherReportForm {
    padding-top: 0;
    padding-bottom: 0;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}



#main-content {
    height: 100%;
    width: 100%;
}

.landingPage{
    height: 100%;
    width: 100%;
    opacity: 100%;
}

.getDataScreen {
    display: block;
    height: 100%;
    width: 100%;
}

.modal-body {
    overflow-y: auto;
}
.modal-dialog{
    overflow-y: initial !important
}

#example-chart {
    z-index: 1000;
}

#firstScreenPanel, #secondScreenPanel, #thirdScreenPanel {
   margin-top: .1%; 
}

.text-muted {
    overflow-wrap: break-word;
}

.chooseChartScreen {
    display: none;
    height: 100%;
    width: 100%;
}

.chartScreen {
    display: none;
    height: 100%;
    width: 100%;
}

.chart-container {
    height: 95%;
    width: 100%;
}

#chart-shadow {
    height: 90%;
    width: 95%;
}

.resizable {
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-width: 280px;
    min-height: 280px;
    max-width: 1900px;
    max-height: 1000px; 
}

#contactUsForm, #nSpeakerForm, #speakerFrom{
    padding: 48px;
    position: absolute;
    border: 1px solid #ADB3BE;
    border-radius: 8px;
    width: auto;
    align-content: center;
    background-color: rgb(255, 255, 255);
    left: 50%;
    transform: translate(-50%, 24px);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: -1px 9px 20px -12px rgb(0 0 0 / 75%);}

.contactFormInput, .nSpeakerFormInput, .speakerFromInput{
    border: 1px solid #ADB3BE;
    border-radius:4px;
    width: 100%;
    height: 40px;
    padding-left: 20px;
    margin: 5px;
}

.contactFormInput:focus, .nSpeakerFormInput:focus, .speakerFromInput:focus{
}


/* SPEAKER */
#sendContactBtn, #sendNSpeakerBtn{
    position: relative;
	background-color: #4285f4;
	border-radius: 25px;
	width: 200px;
	font-size: 20px;
	color: #fff;
	border-radius: 9px;
	border-color: #4285f4;
	box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
	cursor: pointer;    
	-webkit-transition: all ease-in-out 300ms;
	transition: all ease-in-out 300ms;
}

#sendContactBtn:hover, #sendNSpeakerBtn:hover{
	background-color: #3146DE;
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.1);
    transform: translate(0px, -10px) scale(1.1);
}

.speaker{
    overflow: hidden;
	position: relative;
    top: 80%;
	height: 100%;
	border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: -1px 9px 20px -12px rgb(0 0 0 / 75%);
}

.speaker .col-5, .speaker .col-7{
    padding:0;
}


.speaker .row{
    width: auto;
}

.speakerRight{
	position: relative;
	background-color: #E5F4FF;
	height: 100%;
	padding: 24px;
	display: flex;
	align-items: center;
}

.speakerLeft{
    position: relative;
    height: 100%;
    padding: 24px;
    display: flex;
    text-align: left;
    align-items: center;
}

#speakerFormCheckbox{
    position: relative;
    justify-content: center;
    margin: 0px;
}

.speakerRight h1{
	color: #000;
	font-size: 30px;
}


.getGuestSpeaker {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
}

#speakerQuestionCard{
    width: auto;
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);     
}

#speakerQuestionCard .card-footer{
    background-color: #ffffff;   
	border: none;
	height:50px;
	text-align: center;
}

#connectSpeakerFormBtn{
	position: relative;
	background-color: #4285f4;
    border-radius: 25px;
    width: 200px;
    color: #fff;
    border-radius: 9px;
    border-color: #4285f4;
    box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
    cursor: pointer;    
    -webkit-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
}

#connectSpeakerFormBtn:hover{
	background-color: #3146DE;
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.1);
    transform: translate(0px, -10px) scale(1.1);
}

.speakerCard {
    height: 240px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: -1px 9px 20px -12px rgb(0 0 0 / 75%);
    
}

.speakerImage {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


#testImage{
    width: 240px;
    height: 240px;

}

#speakerImage{
    display: block;
    height: 250px;
    width: 200px;
    border-radius: 75%;
    border: 10px #4285f4 solid;
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
    transition: all .2s ease;
} 

#connectSpeakerBtn{
    position: absolute;
    left:20%;
    bottom:20px;
    border-radius: 25px;
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
    width: 200px;
    background: #4285f4;
    color: #fff;
    border-radius: 9px;
    border-color: #4285f4;
    box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    align-items: end;
    -webkit-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
    margin-top: 2%;
}

#connectSpeakerBtn:hover {
	background-color: #3146DE;
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.1);
    transform: translate(0px, -10px) scale(1.1);
}

.guestSpeaker{
    padding-bottom: 30px;
}

.getSpeakerOneConnectScreen {
    display: none;
    height: 100%;
    width: 70%;
    text-align: center;
    margin: auto;
}

.guestSpeaker{
    display:block;
}

.getSpeakerTwoConnectScreen {
    display: none;
    height: 100%;
    width: 70%;
    text-align: center;
    margin: auto;
}

.getSpeakerThreeConnectScreen {
    display: none;
    height: 100%;
    width: 100%;
    text-align: center;
}

#sendSpeakerBtn, #speakerLearnMoreBtn{
}


#connectSpeakerForm{
    text-align: left;
    width: 1000px;
}

#connectSpeakerFormCard{
    display: flex;
    margin-left: 50px;
}

#speakerBackBtn{
}


#courseSelection{
    display: block;
    width: 25%;
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
    display: relative;
  }
  
  /* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 25%; /* Full-width */
    height: 16px; /* Specified height */
    display: block;
    background: #d3d3d3; /* Grey background */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border-radius: 10px;
  }
/* SPEAKER END */

/* BECOME SPEAKER */
#becomeSpeakerForm {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
}

#becomeSpeakerCard {
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
}
/* BECOME SPEAKER END */

/* MYCHARTS PAGE */
#main-wrapper{
	border-radius : 10px;
	background-color:  white;
	border:  1px solid #2c3e50;
	width: 1100px;
	margin-top:  18px;
    margin-left: auto;
	margin-right: auto;
	padding: 5px;
}

#delete_btn{
}

#download_btn{
}

#welcome{
    padding-top: 15px;
}

#mycharts_form{
    margin-bottom: 50px;
    padding-bottom: 0px;
}
/* MYCHARTS PAGE END */

/* CUSTOMIZATION AND INTERACTION */
#customizationForm {
    padding-top: 0;
    padding-bottom: 0;
}

#customizationForm > input {
    margin-top: 3%;
    text-overflow: ellipsis;
}

#customizationForm > select {
    text-overflow: ellipsis;
}

#customizationForm > button {
    margin-top: 5%;
}

#resetZoomBtn {
    margin: 0 auto;
    text-align: center !important;
}

#horizontalBarCheck, #stackedBarCheck, #hideLegendCheck {
    margin-top: 5%;
}

#horizontalBar, #stackedBar, #hideLegend {
    width: 1.5rem;
    height: 1.5rem;
}
/* CUSTOMIZATION AND INTERACTION END */

/* RESOURCES */
.about-disclaimers, .gen-info, .additional-info, .teacher-reports, .workshop-info, .auto-graded-activities {
    padding-top: 1%;
    padding-left: 30%;
    padding-right: 30%;
}

.teacher-reports a p, .auto-graded-activities a p, .workshop-info a p, .gen-info p, .about-disclaimers p {
    text-align: left;
    font-size: 25px; 
}

.teacher-reports h2, .teacher-reports h3, .auto-graded-activities h2, .auto-graded-activities h3, .gen-info h2, .about-disclaimers h2, .workshop-info h4, .workshop-info h2 {
    text-align: left;
}

.row {
    height: 100%;
    width: 100%;
    margin: 0!important;
}

ul.dropdown-menu > li {
    min-width: 15rem;
} 

.inner {
    display: inline-block;
}

#textForm {
    padding: 0; 
}

.nav-tabs > li > a.active {
    background-color: whitesmoke !important; 
    border-bottom-color: whitesmoke !important;
}


.form-control {
    border-right-color: white;
    border-right-width: 0 !important;
}

#inputGroupAppend {
    background-color: white;
    border-left-color: white;
    height: inherit;
    width: inherit;
}

#inputGroupAppendDatasetType, #inputGroupAppendChartTypeSelect {
    background-color: whitesmoke;
    border-color: whitesmoke;
}

#inputGroupAppendColorStyle, #inputGroupAppendDatasetType, #inputGroupAppendChartTypeSelect, #inputGroupAppend {
    color: rgb(33,37,41);
}

/* NEWS AND PROJECTS */
#newsCard, #projectsCard{
    display: block;
    width: 300px;
    height: 100%;
	border-radius: 8px;
    box-shadow: -1px 9px 20px -12px rgba(0,0,0,0.75);
    transition: all .2s ease;
}

#newsCard:hover, #projectsCard:hover{
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.1);
    transform: translate(0px, 0px) scale(1.05);
    cursor: pointer;
}

#newsCardImg, #projectsCardImg{
    display: relative;
    height: 200px;
    max-width: 250px;
}

#newsCard .card-title, #projectsCard .card-title{
    color:#3576df;
}

#newsCard .card-body, #proejctsCard .card-body{
	height: 250px;
}


#newsCardBtn, #projectsCardBtn{
    width: 200px;
}


#newsCard .card-footer, #projectsCard .card-footer{
	background-color: #ffffff;
	border: none;
	display: flex;
    justify-content: center;     
}

.card-rateUs {
    position: relative;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

.carousel-item{
    gap:24px;
  justify-content: space-between;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
    
}

.carousel-item img{
    display: block;
    width: auto;
    height: 200px;
    margin: auto;
}

.carousel-control-next, .carousel-control-prev{
    width: 80px !important;
}

#carouselItemDescription{
    background-color: rgba(66, 133, 244, 0.9);
    width:50%;
    margin: auto;
}

#mentorCard{
    margin: auto;
}

.getMentorOneConnectScreen{
    display: none;
}
/* NEWS AND PROJECTS END */

/* WORKSHOP POP UP */
.workshopInfo{
    padding: 50px;
    background-color: white;
    position: absolute;
    z-index: 2;
    width: auto;
    height: auto;
    box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
    border: 2px solid grey;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
}

#exit{
    display: flex;
    justify-content: end;
    position: absolute;
    top: 5px;
    right: 20px;
    background: none;
    border: none;
}

#exit:hover{
    color:#4285f4;
}

#workshopFormBtn{
    background-color: #4285f4;
    border-radius: 25px;
    width: 200px;
	color: #fff;
    border-radius: 9px;
    border-color: #4285f4;
    box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
    cursor: pointer;    
    -webkit-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
}

#workshopFormBtn:hover{
	background-color: #3146DE;
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.1);
    transform: translate(0px, -10px) scale(1.1);
}
/* WORKSHOP POP UP END */

/* RATE US FORM */
#rateUsForm{
    width: 50%;
    margin-top: 10px;
}

#rateUsForm .card, #rateUsForm .card #questionNumber{
    border: 1px solid black;
}

#questionNumber{
    background: #0060FF;
    border-radius: 20px;
    color: #ffffff;
    height: 32px;
    width: 32px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items:center;
    justify-content:center;
    
}

.yesNoRadio input[type="radio"]{
    opacity: 100%;
}

#rateUsFormBorder{
    display:flex;
    justify-content: center;
    border: 2px solid #4285f4;
}

#rateUsFormBorderHeader{
    background-color: #4285f4;
    padding: 30px;
    margin-bottom: 20px;
}

#rateFormSubmitBtn{
    position: relative;
	background-color: #4285f4;
	border-radius: 25px;
	width: 200px;
	font-size: 20px;
	color: #fff;
	border-radius: 9px;
	border-color: #4285f4;
	box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
	cursor: pointer;    
	-webkit-transition: all ease-in-out 300ms;
	transition: all ease-in-out 300ms;
}

#rateFormSubmitBtn:hover{
	background-color: #3146DE;
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.1);
    transform: translate(0px, -10px) scale(1.1);
}

#rateSlider{
    display: flex;
    height: 20px;
    width: 500px;
}

datalist {
    display: flex;
    justify-content: space-between;
    color:#000000;
}
/* RATE US END */

@media (max-width: 767.98px) {
    #body-container {
        touch-action: pan-y !important;
        -webkit-user-drag: element;
        -moz-user-drag: element;
        user-zoom: element;
    }
    
    .card-deck > .card:hover {
        transform: scale(1.00);   
    }
    
    #firstScreenContent, #secondScreenContent, #thirdScreenContent {
        display: none;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    form {
        text-align: center;
        padding-top: 0%;
        padding-bottom: 0%;
        padding-left: 0;
        padding-right: 0;
    }
    
    #chart-shadow {
        height: 100%;
        width: 100%;
    }
    
    #chart-container {
        height: 85%;
        width: 85%;
        margin-top: 4%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #chart {
        max-height: 300px;
    }
}

@media (max-width: 1200px) {
    #firstScreenContent, #secondScreenContent, #thirdScreenContent {
        display: none;
    }
    
    #chart {
        max-height: 400px;
        margin-left: 2%;
    }
    
    #chart-shadow {
       margin-left: 2%; 
    }
    
    .about-disclaimers, .gen-info, .additional-info, .teacher-reports {
        padding-top: 1%;
        padding-left: 0;
        padding-right: 0;
    }
    
    .card-deck {
        padding-left: 15%;
        justify-content: center;
    }
    
    #mobileFirstScreenForward, #mobileSecondScreenForward, #mobileThirdScreenForward {
        margin-top:6%;
        margin-right: 1%;
        float: right;
    }
    
    #mobileFirstScreenBack, #mobileSecondScreenBack, #mobileThirdScreenBack {
        margin-top:8%;
        margin-left:1%;
        float: left;
    } 
}