body, html {
	height: 100%;
	margin: 0;
	font-family: Poppins! important;
	text-align: center;
	padding: 16px;
	color: black;
}

.copytweaktext{
	font-family: Pacifico! important;
	font-size: 30px;
	cursor: pointer;
}

.copytweaktextmed{
	font-family: Pacifico! important;
	font-size: 20px;
	cursor: pointer;
}

.copytweaktexttiny{
	font-family: Pacifico! important;
	font-size: 15px;
	cursor: pointer;
}

.resetCopyScore{
	
}

.reset-button{
	cursor: pointer;
	float: right;
}

.flex-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.content {
	flex: 1 0 auto; /* This will allow the content to grow and push the footer down */
}

.sticky-footer {
	flex-shrink: 0; /* This will prevent the footer from shrinking */
	margin-bottom:20px;
}

#tabs{
	background-color: #e5eff1
}

.loading-gif {
	border-radius:100px;
}

.ui-tabs-anchor {
	cursor: pointer! important;
}

.fp-description{
	margin: 1px;
	margin-bottom: 28px;
	padding:18px;
	border: 4px solid darkblue;
	border-radius: 18px;
}

.copies-div{
	border: 4px solid gold;
	border-radius: 18px;
}


.flexcopy-div{
	overflow:hidden;
	min-height: 100px;
}
.flexscore-div{
	overflow:hidden;
	min-height: 100px;
	text-align: center;
}

.input-wrapper {
    position: relative;
    margin-top: 10px; /* To give space for the label to intersect */
	margin-right:10px;
}

.input-wrapper label {
    
}

.form-label{
	min-width: 150px;
}

.copyButton{
	float: right;
}

.resetButton{
	float: right;
	
}

.ui-button{
	border-radius: 18px;
}

.add-copy-div{
	border: 4px solid green;
    margin-top: 30px;
    margin-bottom: 200px;
	padding: 20px;
	border-radius: 18px;
	max-width: 600px;
    margin: auto;
    margin-top: 28px;
}



.ui-checkboxradio-label{
	margin-left:30px;
	background-color: lightblue! important;
	color: black! important;
}

input{
	border-radius: 8px;
}

textarea{
	border-radius: 8px;
}



/*  signup css */

/* Disable Zooming */
		:root {
		  touch-action: pan-x pan-y;
		  height: 100% 
		}

		.flex-container {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		.content {
			flex: 1 0 auto; /* This will allow the content to grow and push the footer down */
		}

		.sticky-footer {
			flex-shrink: 0; /* This will prevent the footer from shrinking */
			margin-bottom:20px;
		}

		
		.responsive-container {
			max-width: 1600px; /* Or whatever maximum width you prefer */
			left: 50%; /* Move the left edge to the center of the viewport */
			transform: translateX(-50%); /* Shift it back by half of its width to truly center */
			position: relative;
			top: 0; 
			width: 100%;
			z-index: 1000; /* This ensures the div stays on top of other content. Adjust as necessary. */
			margin-bottom:10px;
			text-align:center;
			padding-bottom:15px;
		}
		

		
		label {
			display: block;
			margin-bottom: 8px;
			font-weight: bold;
			text-align: left;
		}

		
		.sample-flexcopy{
			
		}
		
		#header{
			margin-bottom:100px;
			font-size: 60px;
		}
		
		.copytweaktext{
			font-family: Pacifico! important;
			cursor:pointer;
		}
		
		.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
	  
	  .hidden {
		display: none;
	}
	
	@media (max-width: 999px) {
		.copyButton {
			display: none !important;
		}
	}
	@media (max-width: 600px) {
		.datatable{
			padding: 5px !important;
			margin: 1px !important;
		}
		.fp-description{
			margin: 1px !important;
			margin-bottom: 28px !important;
		}
		.ui-tabs .ui-tabs-panel{
			padding:0px !important;
		}
		.new-copy-text{
			max-width:300px;
			min-width:300px;
			min-height:300px;
		}
		.new-copy-name{
			max-width:300px;
		}
		
	}
	@media (min-width: 1000px) {
		.copyButton {
			display: inline !important;
		}
		.new-copy-text{
			min-width:500px;
			min-height:300px;
		}
	}


/* ******   */
/*index.html css */


/* Disable Zooming */
		:root {
		  touch-action: pan-x pan-y;
		  height: 100% 
		}

		.flex-container {
			display: flex;
			flex-direction: column;
			min-height: 90vh;
		}

		.content {
			flex: 1 0 auto; /* This will allow the content to grow and push the footer down */
		}

		.sticky-footer {
			flex-shrink: 0; /* This will prevent the footer from shrinking */
			margin-bottom:20px;
			padding-bottom:2px;
		}
        

		
		.responsive-container {
			max-width: 1600px; /* Or whatever maximum width you prefer */
			left: 50%; /* Move the left edge to the center of the viewport */
			transform: translateX(-50%); /* Shift it back by half of its width to truly center */
			position: relative;
			top: 0; 
			width: 100%;
			z-index: 1000; /* This ensures the div stays on top of other content. Adjust as necessary. */
			margin-bottom:10px;
			text-align:center;
			padding-bottom:15px;
		}
		

		
		label {
			display: block;
			margin-bottom: 8px;
			font-weight: bold;
			text-align: left;
		}

		
		.sample-flexcopy{
			
		}
		
		#header{
			margin-bottom:50px;
			font-size: 60px;
		}
		
		.copytweaktext{
			font-family: Pacifico! important;
			cursor: pointer;
		}
		
		.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }

      .bd-mode-toggle {
        z-index: 1500;
      }

      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
	  
	  .login{
			border: 4px solid white;
			border-radius: 18px;
			padding:18px;
			max-width:500px;
			text-align: left;
			margin-left:auto;
			margin-right:auto;
	  }
	  
	  .dashboard-icon {
		  position: absolute;
		  top: 10px;
		  right: 10px;
		  font-size: 44px; /* Adjust the size of the icon as needed */
		  cursor: pointer; /* Change the cursor to a pointer when hovering over the icon */
		  margin-right:18px;
		}
		#advert-text{
			min-height:28px;
		}
		
		#contactForm {
			min-width: 304px;
			width: 300px;
			color: rgb(255, 255, 255);
			border: 2px solid white;
			border-radius: 15px;
			padding: 20px;
			margin: auto;
			text-align: left;
			color:black;
		}
		
		#contactFormSubmitButton{
			background-color: #a133ff;
		}

		#contactForm header h1 {
			font-size: 24px;
			margin-bottom: 10px;
		}
		
		#contactForm header p {
			font-size: 16px;
			margin-bottom: 20px;
		}
		label {
			display: block;
			margin-bottom: 8px;
			font-weight: bold;
			text-align: left;
		}

		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="tel"] {
			width: 90%;
			padding: 10px;
			margin-bottom: 20px;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 16px;
		}

		input[type="submit"] {
			background-color: rgb(0, 115, 168);
			color: #ffffff;
			padding: 10px 15px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
			transition: background-color 0.3s;
		}

		input[type="submit"]:hover {
			background-color: rgb(4 176 255);
		}
		
		#interest-signup{
			margin: 18px;
			margin-bottom: 50px;
			margin-top:50px;
		}
		
		.spotify-listen{
			margin-top: 40px;
			max-width: 500px;
			margin: auto;
		}
		
		.sample-flexcopy ul {
			text-align: center;
			list-style-position: inside;
		}
		
		.flexcopy-div ul {
			text-align: center;
			list-style-position: inside;
		}
/* ******** */

/* blocks */

#tweak-youtube{

}

.tweak-youtubeFramework{
	margin:18px;
}

.youtube-iframe{
	min-width: 370px;
    min-height: 300px;
}

/* ****** */