@charset "UTF-8";
/* CSS Document */

/* UNIVERSAL */

/* UNIVERSAL */



/* CROPPIE */
.cr-image{ display: block; opacity: 1.0; position: fixed; z-index: 3452345125; }
.cr-boundary{ display: block; opacity: 1.0; position: relative; }
#create_new_pp{display: none; background-color: #ffffff; position: fixed; z-index: 5; height: 800px; width: 800px;}
.save-profile-picture, .cancel-profile-picture{font-size: 80px;}
div#croppiebackgrounddiv{background-color: #000000; position: fixed; z-index: 0; width: 100%; height: 100%; opacity: 0.7;}

/* CROPPIE */

/* CREATE BASIC */









.card {
    width: 500px;
    margin: 50px auto;
    clear: both;
    display: block;
    padding: 0px 0px;
    background-color: #009BFF;
    border-radius: 4px;
}
.card::after {
    clear: both;
    display: block;
    content: "";
}
.card .checkbox-container {
    float: left;
    width: 50%;
    box-sizing: border-box;
    text-align:center;
  padding: 40px 0px;
}
.card .circular-container {
  background-color:#0067FF;
}

.input-title {
    clear: both;
    padding: 22px 0px 0px 0px;
    font-size: 16px;
    color: rgba(255,255,255,.6);
    font-weight: 300;
}




/* Styling Checkbox Starts */
.checkbox-label {
    display: block;
    position: relative;
    margin: auto;
    cursor: pointer;
    font-size: 22px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    clear: both;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .checkbox-custom {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 44px;
    width: 44px;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border: 2px solid #3986b0;
}


.checkbox-label input:checked ~ .checkbox-custom {
    background-color: #FFFFFF;
    border-radius: 5px;
    -webkit-transform: rotate(0deg) scale(1.5);
    -ms-transform: rotate(0deg) scale(1.5);
    transform: rotate(0deg) scale(1.5);
    opacity:1;
    border: 2px solid #FFFFFF;
}


.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 12px;
    top: 12px;
    height: 0px;
    width: 0px;
    border-radius: 5px;
    border: solid #009BFF;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity:1;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}


.checkbox-label input:checked ~ .checkbox-custom::after {
  -webkit-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  opacity:1;
  left: 8px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #009BFF;
  border-width: 0 2px 2px 0;
  background-color: transparent;
  border-radius: 0;
}



/* For Ripple Effect */
.checkbox-label .checkbox-custom::before {
    position: absolute;
    content: "";
    left: 10px;
    top: 10px;
    width: 0px;
    height: 0px;
    border-radius: 5px;
    border: 2px solid #FFFFFF;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);    
}

.checkbox-label input:checked ~ .checkbox-custom::before {
    left: -3px;
    top: -3px;
    width: 44px;
    height: 44px;
    border-radius: 5px;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    opacity:0;
    z-index: 999;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}




/* Style for Circular Checkbox */
.checkbox-label .checkbox-custom.circular {
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

.checkbox-label input:checked ~ .checkbox-custom.circular {
    background-color: #FFFFFF;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}
.checkbox-label input:checked ~ .checkbox-custom.circular::after {
    border: solid #0067FF;
    border-width: 0 2px 2px 0;
}
.checkbox-label .checkbox-custom.circular::after {
    border-radius: 50%;
}

.checkbox-label .checkbox-custom.circular::before {
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

.checkbox-label input:checked ~ .checkbox-custom.circular::before {
    border-radius: 50%;
}



.judgingloginbutton{background: transparent; border: 1px solid #999999; cursor: pointer; font-size: 40px; color: #5D6CF4; margin: 5px; } 

#quickuploadimagetemplate{ width: 300px; height: 300px; }

#quickprofilepictureicon{ width: 250px; height: 250px; margin: 150px 0px 0px 0px;}

.quickcreateprofilebutton{ font-size: 30px; padding: 5px 15px; cursor: pointer;  }

#quickmsmibutton{font-family: 'Trebuchet MS', arial; color: #000000; cursor: pointer; font-size: 70px; border: 0px solid #000; background: transparent;}
.qdobselect{ font-size: 20px;} 
.quicklogintextfields{width: 100%; height: 50px; font-size: 25px; padding: 25px;}

#basicdot, #musicdot, #profilepicturedot{}
.dot{border: 9px solid #ffffff; border-radius: 50%;}
.chosendot{border: 9px solid #384af2; border-radius: 50%;}

table#chosen_mi_table{ width: 75%;}

#duplicateentrydiv{background-color: #ffffff; 
				   width: 80%;
				   height: 80%;
				   padding: 50px;}	
				   
.chosen_music_interest_spans{font-size: 45px; }
				  
.chosen_mi_choice{border: 2px solid #000000; padding: 35px; text-align: center;}

.basiccreatebuttons{display: none;}	

span.createerror{color: #dd0000; fonts-size: 35px;}

.genderspan{font-size: 30px;}

.centerscreen{ position: fixed; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); z-index: 5; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) }

#selectmonths {margin: 0px 20px 0px 20px;}

#selectdays {margin: 0px 20px 0px 20px;}

#selectyears {margin: 0px 20px 0px 20px;}

#whymydateofbirth{font-size: "Trebuchet MS", serif; color: #999999; font-size: 25px; cursor: pointer;}

.createtitle{font-size: 50px; color: #fff;}

.dobselect{font-size: 30px;}

.createheader{padding: 20px; background-color: #384af2;}

#termsparagrahph{color: #666; font-size: 30px;}

.createbody{background-color: #f9f9f9; width: 100%; height: 100%;}

.termslabels{font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #ffffff; font-size: 70px;}

td.termstab{background-color: #384af2; text-align: center; padding: 20px; cursor: pointer;}

td#termgeneraltab{background-color: #ffffff;}

#termsbody{background-color: #f9f9f9; padding: 30px; overflow-y: scroll;}

.termstable{width: 100%;}

#generaltermlabel{color: #000000;}

#createbasicbody{background-color: #eeeeee; height: 100%;}

#createbasictable{width: 100%;}

div.createbasicinputdiv{text-align: center;}

input.createbasicinput{width: 50%; font-size: 30px; padding: 10px;}

select#selectchosenlocation{width: 100%; font-size: 30px;}

/* CREATE BASIC */

/* CREATE MUSIC */

#createmusicbody{background-color: #eeeeee; height: 100%; padding-top: 0px;}

#msmibutton{font-family: 'Trebuchet MS', arial; color: #000000; cursor: pointer; font-size: 100px; border: 0px solid #000; background: transparent;}

#msmiselection{list-style: none;}

p#explainmusicalinterest{font-size: 40px;}

#suggestminow{font-size: 35px; border: 1px solid #000000; padding: 15px; background: transparent; background-color:#3986b0; color: #ffffff;}

#suggestmi{display: none; background-color: #fff; padding: 50px; border: 1px solid #000000;}

#welcomemessage{display: none;} 

#welcomemessageborder{margin: 40px; padding: 25px; border: 1px solid #3986b0; width: inherit; height: inherit;}

#createprofilepictureborder{border: 1px solid #3986b0; margin: 40px; padding: 25px; width: inherit; height: inherit;}

#descriptionTextarea{width: 80%;
					 height: 50%;
					 font-size: 50px;
					 padding: 15px;
					 resize: none;
					 border-top: 0px solid #bbb;
					 border-left: 0px solid #bbb;
					 border-right: 0px solid #bbb;
					 border: 1px solid #999999;
					 }
					 
#chooseanothermi{color: #fff; background-color:#3986b0; width: 300px; font-size: 30px; padding: 20px; margin: 30px 0px;}			

#uploadproimage{color: #fff; background-color:#3986b0; width: 100%; font-size: 30px; padding: 20px; margin: 30px 0px;}

#noppstartcollaborating{color: #fff; background-color:#3986b0; width: 100%; font-size: 60px; padding: 45px; margin: 30px 0px;}		 

/* CREATE MUSIC */

/* CREATE PROFILE PICTURE*/

#profilepicturebutton{text-align: center; pading: 40px;}

#uploadimagetemplate{width: 500px; height: 500px;}

#uplpropic{display: none;}

#orsplitter{margin: 60px 20px; font-size: 45px; color: #999999;}
/* CREATE PROFILE PICTURE*/