/* CSS Document */
.spinner {
  width: 20px;
  height: 20px;
  border: 4px #2e93e6 solid;
  border-top: 4px #41B655 solid;
  border-radius: 50%;
  animation: rotate 0.8s infinite linear;
vertical-align: text-top;
margin-left: 10px;
	
}
@keyframes rotate {
  from { 
    transform: rotate(-360deg); 
  }to{
    transform: rotate(360deg); 
}}
.is-hide{
  display:none;
}

.error {
	display: none; 
	position: absolute; 
	width: 25%; 
	margin-left: 50%;
	margin-right: 50%;
	background-color: #1C75BC;
	box-shadow:0 0 0 100vmax rgba(0, 0, 0, .5);
	border:solid;
	border-radius: 6px; 
	padding: 20px 0px 20px 0px;
	font-size: 24px;
}

#errorBox, #prizeBox {
    justify-content: center;
    align-items: center;
    border-radius: 4px;
	flex-wrap: wrap;
    text-align: center;
    font-size: small;
    font-weight: bold;
    width:100vw; 
    height: 100vh; 
    display: none; 
    position: absolute; 
    background-color:transparent;
}

#options{
	display: flex; 
	justify-content: center; 
	margin:5px; 
	padding:5px; 
	text-align:center; 
	border: solid; 
	border-color: #1C75BC; 
	border-radius: 5px;
}

#wheelItem{
	padding:0px;
}

.optionH{
	border-bottom:solid; 
	border-color: #1C75BC; 
	border-radius:15px; 
	font-weight: bold; 
	font-size: 20px; 
	margin-bottom:5px;
}

.option{
	margin-bottom:5px;
	display: flex;
	justify-content:center;
	align-items: center;
}

.option div{
	margin-bottom:5px;
	display: flex; 
	justify-content:center;
	align-items: center;
}

.option input[type=text]{
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
	
.option input[type=color]{
	vertical-align: middle;
	width: 40px; 
	height: 40px; 
	border-radius: 6px; 
	border: solid;
	border-color: #1C75BC;
}

.percent, .text-size{
	text-align: center;
    width:40px;
}
	
#tRow{
	display: none; 
	color:#00399C; 
	align-self: end;
}
#tRow #bRow div{
	margin-bottom:5px;
	display: flex; 
	vertical-align:middle;
	justify-content:end;
}

@media screen and (min-width:768px){
    .col2{
        width:16.66%;
    }
    .col4{
        width:33.33%;
    }
    .col5{
        width:41.66%;
    }
    .col6{
        width:50%;
    }
    .col7{
        width:58.33%;
    }
    .col8{
        width:66.66%;
    }
    .col10{
        width:83.33%;
    }
    .exI{
        width:initial;
    }
    .error{
        width: 25%;
    }
    .cContainer{
        flex-wrap: wrap;
        flex-direction: row;
    }
    .cOptions{
        flex-direction: row;
    }
    #streamMode{
        width:initial;
    }
    #spinner{
        align-self:flex-start;
    }
    
}
@media screen and (max-width:768px){
    .mobile{
        width:100%;
    }
    .exI{
        width:10%;
    }
    .error{
        width:80%;
    }
    .cContainer{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .cOptions{
        flex-direction: column;
    }
    #streamMode{
        width:100%;
    }
    #spinner{
        align-self:center;
    }
}