/*	FONT LIBRARY. 
	SIL Open Font License (OFL)
  	CREDIT where CREDIT is due in line:
 	source: https://www.fontspace.com/ 
*/


/* Montserrat - by Julieta Ulanovsky  https://www.fontspace.com/julieta-ulanovsky */
@font-face {
  font-family: default_font;
  src: url('../img/fonts/default/MontserratLight-ywBvq.ttf');
}

@font-face {
  font-family: content_headline_font;
  src: url('../img/fonts/default/MontserratSemibold-Yz368.ttf');
}

@font-face {
  font-family: default_quote;
  src: url('../img/fonts/default/MontserratMediumItalic-EaqM4.ttf');
}


html {
   margin: 0;
   padding: 0;
   font-family:default_font /* "Helvetica Neue",  Helvetica, Arial,  sans-serif;*/
}

body{
    margin:0px;
    padding:0px;
    background-color:#000;
    background-image: url('/img/ui/logo_bg_tile.jpg');
    background-repeat:repeat;
}


h2, p, ul, li {
    color:#fff;
    padding:16px 16px 0px 16px;
    margin:0px;
}

li {
    padding: 0px 16px 16px 0px;
}

ul {
    margin:16px;
}

h2, h1 {
    color:#79cffb;
    font-family: content_headline_font; /*alumni-sans, sans-serif;*/
    /* font-weight: 300; */
}

.bb {
	font-family: content_headline_font; /*alumni-sans, sans-serif;*/ 
}

.cc {
	font-family: default_font; /*alumni-sans, sans-serif;*/
	vertical-align: super;
    font-size: 0.75em; /* Adjust size as needed */
}

/*********** global **************/

/* COLOR PALETTE
#79cffb;
#333
#000
#fff
*/
.inline_icon{
	vertical-align:middle;
	padding:4px;
	border:1px solid white; 
	border-radius:24px; 
	height:24px;	
}

.inline_edit_icon{
	vertical-align:middle;
	padding:4px; 
	border-radius:32px; 
	height:32px;	
	background-color:red;
	margin-left:8px;
}


.error_msg { 
	color:ff3333;
}

.required_element{
    color: #ff3333;
    font-size: 16px;
    vertical-align: middle;
}

a {
    color:#f66337;
    cursor:pointer;
    text-decoration:none;
}




#wrapper {
    top:0px;
    width:100%;
    max-width:680px;
    min-width:360px;
    height:100%; /* do this at run time  */
    background-color:rgb(0, 0, 0);  
    margin:auto;
}

/****** Header  *******/

#header {
    width: calc(100%);
    min-width:320px;
    max-width:680px;
    height:68px;
    background-color: rgb(0, 0, 0);
    color: #fff;
    background-size:cover;
    position:fixed;
    /** filter: drop-shadow(0px 10px 10px rgb(0, 0, 0)); **/
}


#logo, #mobile_menu {
    position:absolute;
    top:0px;
    display:block;
	cursor:pointer;
}

#call_to_action_desktop {
    display:inline-block;
    margin-top: 16px;
    margin-right: 4px;
}


#call_to_action_mobile {
    display:inline;
}

#mobile_menu {
    right:0px;
}

#menu_icon {
    height:32px;
    width:32px;
}

#logo_img {
   height: 80px;
    margin-left: 16px;
    margin-top: -5px;
}

#drop_menu {
    display:none;
    position: absolute;
    top: 72px;
    right: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0);
}

#desktop_menu {
    display:block;
    position:absolute;
    right:0px;
}

.desktop_menu_item, .mobile_menu_item {
    display:inline-block;
    text-decoration: none;
    text-transform: uppercase;
    color:#ffffff;
    font-size:12px;
    margin:26px 12px 12px 12px;
}

.mobile_menu_item {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    background-color: #333;
    padding: 16px 0px 16px 0px;
    margin-left: 0px;
    margin-top: 16px;
}


#call_to_action_mobile {
    position:absolute;
    margin-top:16px;
    right:76px;
    top:0px;
}

#mobile_menu_icon {
    display:block;
    height:32px;
    width:32px;
    background-image:url('/img/ui/menu.svg');
    background-size:contain;
    background-repeat:no-repeat;
    margin:24px;
	margin-top: 20px;
}




/********* content **********/

#content {
    padding-top: 68px;
    padding-bottom: 60px;
    background-color: #000000;
    width: calc(100%);
    margin: auto;
    max-width: 680px;
    color:#fff;
}

.content_section_title {
    width:80%;
    font-family: content_headline_font; /*alumni-sans, sans-serif;*/
    font-style: normal;
    font-size: 32px;
    color:#fff;
    padding:16px 16px 0px 16px;
}

.content_tile{
    width: calc(100% - 52px);
    color: #fff;
    padding: 24px 26px 26px 26px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    background-blend-mode: overlay;
    border-bottom: 16px solid #000;
    background-position-x: 40%;
}

.content_headline, .faq_Q {
    color:#79cffb;
    width:80%;
    font-family: content_headline_font; /*alumni-sans, sans-serif;*/
    font-style: normal;
    font-size: 24px;
}

.content_copy, .faq_A {
    margin-top:12px;
    font-family: default_font; /* "Helvetica Neue",  Helvetica, Arial,  sans-serif; */
    font-size:14px;
    color:#fff;
	margin-bottom:2px;
	line-height:1.2;
}

.home_content_tile {
    min-height:260px;
}

.artist_tile_copy {
    max-width:50%;
}


.home_tile_copy {
    max-width:80%;
	line-height:1.2;
}

.content_actions {
    margin-top:24px;
    display:inline-block;
}

.quote {
    font-size: 18px;
	font-family: default_quote;
    text-align:center;
	padding:24px 0px;
}

.quote_cite {
    font-size: 14px;
    font-style:normal; 
}

.copy_action_link {
    margin: 0px 16px 0px 0px;

}

.faq {
    width:calc(100% - 32px);
    color:#fff;
    padding:16px;
    background-color:#000000;
}

.faq_Q {
    color:#79cffb;
    width:auto;
    font-size: 24px;
}

.faq_A {
    width:auto;
}

.content_table {
    border:1px solid #999;
    /* table-layout: fixed; */
    width: calc(100% - 64px);
	margin:auto;
}

th, td {
    padding: 8px 16px;
    text-align: left;
}

.caption {
    margin-top:8px;
    font-size:12px;
    color:#aaa;
	margin-left:2px;
}

.sub_label {
    font-size:12px;
    color:#aaa;
    margin-bottom:4px;
}

.caption_link {
    margin-top:8px;
    font-size:12px;
    color:#aaa;
    cursor:pointer;
    text-decoration: none;
}

.artist_tile {
    display:inline-block;
    width:120px;
    border:1px solid #333;
    padding:8px;
}

.artist_avatar {
    display:block;
    height:104px;
    width:104px;
    border-radius:52px;
    background-color:#f66337;
    margin:auto;
	background-repeat: no-repeat;
}

#avatar_image {
	color:#ffcc00;
}

.artist_label {
    font-size:16px;
    color:#fff;
    text-align:center;
    width:100%;
    padding-top:8px;
    margin:auto;
}

#artist_search {
    width: 70%;
    border-radius: 8px;
    background-color: #333;
    border: 1px solid #79cffb;
    font-size: 18px;
    color: #FFF;
    padding: 12px;
}  

#artist_search_icon {
    height: 38px;
    width: 38px;
    margin: 0px 12px 0px 12px;
    vertical-align: text-top;
    cursor:pointer;
}



/****** Performer  *******/

.performer {
    width: calc(100% - 78px);
    min-width:190px;
    padding: 24px;
    padding-bottom: 12px;
    background-color: rgb(0, 0, 0);
    color: #fff;
    border:2px solid white;
    background-size:cover;
    height: 100px;
    margin: 16px;
}

.performer_home {
    position:fixed;
    top:0px;
    z-index:1000;
    width: calc(100% - 48px);
    margin:auto;
    border:auto;
    height:auto;
    min-width:320px;
    min-height:200px;
    max-width: 632px;
    border-bottom: 1px solid #666;
}

.performer_width_adjust{
	width: calc(100% - 52px);
}

.performer_title {
    font-size:24px;
}

#performer_title {
    margin: auto;
    color: #fff;
    text-align: center;
	text-shadow: 0px 0px 12px #000;
    margin-top: 10px;
    width: calc(100% - 24px);
    padding-bottom: 12px;
    border-radius:24px;
    }

#performer_avatar {
    margin:auto;
    margin-top:12px;
    height:140px;
    width:140px;
    border-radius: 74px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;
    box-shadow: 0 0 140px 8px #fff;
    background-color:#000;
}

.performer_avatar_home{
    border: 2px solid #ffffff;
}

.etip_status{
	font-size:18px;
    color:#aaa;
    margin:0px 0px 24px 24px;
}

.etip_status_ok{
	color:#fff;
}

#thank_you_tile {
    display:block;
    color:#fff;
    background-color:#444;
}

#payment_links {
    padding:12px;
    margin:auto;
    width: calc(100% - 24px);
    border-bottom:1px solid #666;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 90%);
}

#social_links {
    padding:12px;
    margin:auto;
    width: calc(100% - 24px);
    background-color:rgb(0, 0, 0);
    border-bottom:1px solid #666;
}

#social_links{
padding-bottom: 100px;
}

.payment_tile {
    font-size:24px;
    border:1px solid #fff;
    border-radius:25px;
    margin:auto;
    margin-left:24px;
    margin-right:24px;
}

#all_cards_row{
    text-align:center;
    margin:auto;
    color:#fff;
    padding-bottom:20px;
    border-bottom:1px solid #666;
}

#all_cards_row_img{
    text-align:center;
    height:36px;
}

.legal_snippet {
    font-size:12px;
    color:#666;
    text-align:center;
}

#one_tap_tipping, #may_require_app, #shared_tipping {
    margin: auto;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 0px;
    font-weight:500;
}

.payment_requirements{
    font-weight:400;
    font-size: 12px;
}

#like_and_follow, #add_performers{
    margin: auto;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 0px;
    font-weight:500;
    margin-bottom:16px;
}


.payment_icon {
    display: inline-block;
    width:50px;
    height:50px;
    border-radius: 25px;
    margin:10px;
}

.payment_name {
    display: inline-block;
    color:#fff;
}

.social_tile {
    color:#ad08e4;
    font-size:24px;
}


#call_to_action, #tj_list_title {
    color: #fff;
    text-align: center;
    margin: 20px;
}

#date_range {
    margin: 12px;
    font-size: 16px;
    text-align: center;
    display:none;
}

/****** TIP JARS  *******/

.tipjar_wrapper{
    display: block;
    overflow: auto;
    min-height: 48px;
    height: auto;
    width: auto;
    margin: auto;
    border: 4px solid rgb(53 182 249);
    background-color: #ffffff;
    border-radius: 24px;
    font-size: 24px;
    margin: 16px;
    padding: 8px;
    text-decoration: none;
    color: #030303;
}

.social_wrapper{
    display: block;
    overflow: auto;
    height: auto;
    width: auto;
    margin: auto;
    margin: 16px;
    margin-top:4px;
    margin-bottom:4px;
    padding: 8px;
    text-decoration: none;
    border-radius:20px;
}

.performer_wrapper{
    display: block;
    overflow: auto;
    height: auto;
    width: auto;
    margin: auto;
    margin: 16px;
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 8px;
    text-decoration: none;
    border: 2px solid #79cffb;
    border-radius: 20px;
    cursor:pointer;
}

.other_payments {
    border:2px solid rgb(53, 183,249);
    border-radius: 18px;
    margin-top: 24px;
}


.tipjar_button {
    font-size: 18px;
    text-decoration: none;
    color: #000000;
    display: inline-block;
    width: 80%;
}

.social_button {
    text-decoration: none;
    color:#000000;
    font-size:16px;
    display:inline-block;
    width:80%;
}

.performer_button {
    text-decoration: none;
    color:#000000;
    font-size:18px;
}

.tipjar_button_other {
    font-size:18px;
}

.tipjar_button_name {
	font-family:content_headline_font;
    font-size: 20px;
    margin:12px;
    margin-top:16px;
    width:98%;
}

.social_button_name {
    margin:12px;
    width:90%;
    color:#ddd;
}

.performer_button_name {
	font-size: 16px;
    margin: 12px;
    width: 90%;
    color: #ffffff;
    margin-top: 16px;
}

.tipjar_button_name_other {
    margin-top:14px;
    font-size: 18px;
}

.tipjar_button_img {
    float: left;
    height: 46px;
    margin-right: 8px;
    border-radius: 12px;
    border: 3px solid #000;
}

.tipjar_button_img_other {
    float: left;
    height: 44px;
    margin-right: 14px;
    border-radius: 12px;
    border: 2px solid #ffffff;
}


.social_button_img {
    float: left;
    width: 42px;
    height: 42px;
    margin-right: 14px;
    border-radius: 12px;
}

.performer_button_img {
    float: left;
    width: 52px;
    height: 52px;
    margin-right: 14px;
    border-radius: 10px;
	background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;
}



/*********  FOOTER  **********/

#footer {
    
    position: fixed;
    bottom: 0px;
    height: 64px;
    width: 100%;
    max-width:680px;
    min-width:360px;
    background-color: black;
    color: #fff;
    text-align: center;
}

#gigtip_logo_img {
    height:72px;
    margin-top: -12px;
}

#made_by_humans{
    position: absolute;
    top:0px;
    left: 0px;
    margin: 14px; 
	cursor:pointer;
}

#qr_code_btn { 
    position: absolute;
    top:0px;
    right: 0px;
    margin: 14px; 
}

#human_logo, #qr_code_img { 
    width:34px;
    opacity:90%;
}


#footer_info, #footer_legal {
    display:block;
    position:absolute;
    margin:16px;
}

#footer_info {
    left:0px;
}

#footer_legal {
    right:0px;
}

.footer_info_item, .footer_legal_item {
    text-decoration: none;
    color:#aaa;
    font-size:12px;
    margin:12px 12px 12px 12px;
}


#display_qr_code_img {
    width: 100%;
    max-width: 600px;
    display: block;
	margin: 48px auto;
}


/****** SPLASH  *******/

#splash {
    position:fixed;
	top:0px;
    z-index:1100;
    display:none;
    width:100%;
	max-width:680px;
    height:100%;
    background-color:rgb(0, 0, 0);
}

#splash_media {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
	background-size:cover;
    background-position: center center;
	background-repeat: no-repeat;
}

#splash_logo {
    width:50%;
    height:50%;
    margin:25% auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/ui/splash_raycaster_logo@2x.png');
}


#splash_title {
    width:100%;
    position: absolute;
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    text-shadow: rgba(0,0,0,.5) 2px 2px -1px -1px;
    margin:auto;
    text-align: center;
}

#wait_for_it {
    position: absolute;
    display:none;
    height: calc(100%);
    top: 0px;
    left: 0px;
    width: calc(100%);
    background-color:black;
	 z-index:1100;
}

#wait_text{
	color:#fff;
	font-size: 24px;
	position:absolute;
	left:0px;
	top:320px;
	width: 100%;
    text-align: center;
}

#wait_anim {
	position:absolute;
	width:100px;
	height:100px;
	left:calc(50% - 50px);
	top:200px;
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/img/GiGTiP_Sticker.png');
	animation: wait_keys 2s linear infinite;
}

@keyframes wait_keys {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
/****** END SPLASH  *******/

/******* SPECIAL FX *********/
.fx_pulse{
    opacity:1.0;
    animation-name: example;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes example {
    from {opacity:1.0}
    to {opacity:0.8}
  }
  

/********  EDIT SUITE  **********/

.edit_item{
    border: dashed 2px rgb(0, 234, 70);
}

.list_item {
	color:#fff;
	margin: 16px 0px;
}

.inline_edit_box{
	display:inline;
	padding: 8px; 
	border-radius:12px;
	border: dashed 2px rgb(0, 234, 70);
}


.update_form {
    position: absolute;
    display:none;
    height: calc(100% - 36px);
    top: 0px;
    left: 0px;
    width: calc(100% - 36px);
    border: solid 2px rgb(0, 0, 0);
    padding:16px;
}

.login_form {
    position: absolute;
    height: calc(100% - 64px);
	display:block;
    width: calc(100% - 64px);
	max-width:584px;
    padding:16px;
}


#edit_save {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 24px);
    height: calc(60px - 20px);
    padding:10px;
    border: solid 2px red;
    background-color:#000;
    cursor:pointer;
}

.copy_action_button {
    min-width:120px;
    padding: 0 16px;
    height:36px;
    background-color:rgba(0,0,0,.5);
    color:#fff;
    border:1px solid #ff7300;
    border-radius:8px;
    font-size:12px;
    text-transform: uppercase;
    margin: 0px 16px 0px 16px;
    cursor:pointer;
}

.preview_cancel_btn{
	min-width:100px;
}

.get_gig_tip, .get_gig_tip_submit {
    min-width:140px;
    margin:0;
    padding: 0 16px;
    height:36px;
    background-color:#ff7300;
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:12px;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 12px; 
}

.preview_preview_btn{
	min-width:100px;
}

.ux_edit_button, .ux_add_button {
    display: block;
    height: 24px;
    border-radius: 28px;
    padding: 12px;
    background-color: red;
    float: right;
	cursor:pointer;
}


.ux_add_button{
    border: 2px solid green;
    background-color:green;
}
.edit_label{
    color:#fff;
    font-size:16px;
    margin-top:16px;
}

.edit_caption{
    color:#ddd;
    font-size:12px;
    margin-top:16px;
}

.edit_title{
    color:#fff;
    font-size:24px;
    margin-top:16px;
}

.edit_avatar_preview {
    margin:auto;
    margin-top:12px;
    height:140px;
    width:140px;
    border-radius: 74px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 0 140px 8px #fff;
    background-color:#fff;
}

.edit_banner_preview {
    margin:auto;
    margin-top:12px;
    height:200px;
    width:100%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 0 140px 8px #fff;
    background-color:#fff;
}

#banner_image_window {
	margin:auto;
    margin-top:12px;
    height:260px;
    width:100%;
    border: 2px solid #ffffff;
    background-color:#fff;
	overflow-y:scroll;
}

#croppable_image{
	width:auto;
	height:auto;
	margin:0;
	padding:0;
}

#scroll_touch {
	display: block;
    position: fixed;
    opacity: .5;
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    top: 260px;
}

.button_row {
    clear:both;
    text-align: center;
    width: calc(100% - 24px);
    height: calc(60px - 20px);
    padding:10px;
    background-color:#000;
    cursor:pointer;
    margin-top:32px;
} 

.preview_button_row{
	display: block;
	position: absolute;
    bottom: 0px;
}

input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="file"],
input[type="url"],
textarea {
    width: calc(100% - 24px);
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top:16px;
    color:#000;
	font-size: 24px;
}

select{
	-webkit-appearance: none;
    width: calc(100% - 24px);
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top:16px;
    color:#000;
	font-size: 24px;
}

#update_venmo_title{
	width: calc(100% - 80px);
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 16px;
    color: #000;
    font-size: 24px;
}

.file_upload{
	color:#ffcc00;
}

textarea {
		font-size: 16px;
}

.preview_link {
    color:#fff;
}

#edit_performer_wrapper, #edit_themes_wrapper {
    overflow:scroll;
    width:calc(100% - 12px);
    height:calc(100% - 166px);
}

.theme_tile_title {
    margin: auto;
    color: #fff;
    text-align: center;
    margin-top: 10px;
    width: calc(100% - 24px);
    padding-bottom: 12px;
    border-radius:24px;
}


.single_Checkbox{
    margin:12px;
    width:24px;
    height:24px;
    color:#fff;
    float:left;
}


/***** CUSTOM HEADER BY MEDIA QUERY ********/

@media screen and (min-width: 640px) {
    #mobile_menu {
        display: none;
    }
    #desktop_menu {
        display:block;
    }
  }

  @media screen and (max-width: 639px) {
    #mobile_menu {
        display: block;
    }
    #desktop_menu {
        display:none;
    }
  }