@import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/*Mobile*/
@media only screen and (max-width: 768px) {
  .dissatisfied-icon, .satisfied-icon{
    font-size: 18pt;
  }
  #provide-feedback {
    font-size: 16pt;
  }
  .rating-title{
    font-size: 14pt;
  }
  .rating-number {
    font-size: 24pt;
    position: relative;
    bottom: 3px;
  }
  .star {
    font-size: 6.65vw;
    padding: 10px 0;
  }
  #ignite-logo {
    margin-top: 5px;
  }
}

/*Large Screen*/
@media only screen and (min-width: 768px) {
  .dissatisfied-icon, .satisfied-icon{
    font-size: 22pt;
  }
   #provide-feedback {
    font-size: 20pt;
  }
  .rating-title{
    font-size: 16pt;
  }
  .rating-number {
    font-size: 30pt;
  } 
  .star {
    font-size: 20pt;
  }
  #ignite-logo {
    margin-top: 10px;
  }
  .satisfaction-icon {   
    position: relative;
    top: 27px;
    margin: 0 -10px;
  }
}

body {
  font-family: 'Georama', sans-serif;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer, nav {
  background-color: #f89729 !important;
}

.star-container {
  color: #cfd8dc;
  cursor: pointer;
}

.star-selected {
  color: #ff9800;
}

.dissatisfied-icon {
  color: #f44336;
}

.satisfied-icon {
  color: #00c853;
}

.star-container {
  margin-bottom: 40px;
  height: 170px;
}

.detractor {
  color: #f44336;
}

.passive {
  color: #ff9800;
}

.promoter {
  color: #00c853;
}

#logos {
  margin-top: 20px;
}

.small-logo {
  padding: 0 10px;
}

.logo-divider {  
  border-right: 1px solid #cfd8dc;
  height: 30px; 
  display: inline-block;
}

.stars-invalid {
  border: 1px dashed red;
}

.rating-number {
  display: block;
  min-height: 50px;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
  overflow: hidden;
}

.jconfirm .jconfirm-box.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c {
  color: #E98F2A !important;
}

.jconfirm .jconfirm-box.jconfirm-type-orange {
  border-top: solid 7px #E98F2A !important;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
  font-size: 20px;
}

.spinner {
	z-index: 999999;
	font-size: 40pt;
	position: fixed;
	top: 40vh;
	transform: translateY(-50%);
	left: 50%;
	transform: translateX(-50%);
	color: white;
}

.blackBackground {
	z-index: 999998;
	height: 100vh;
	width: 100%;
	background-color: black;
	opacity: 0.6;
	position: fixed;
	top: 0;
	left: 0;
}