.challenge_pricing_label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
}

.challenge_pricing_free_div{
    margin-bottom: 10px;
}
#paid_field_container{
    margin-top: 10px;
}
#product_select{
    margin-bottom: 10px;
}

.challenge_details_box {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 8px;
    max-width: 100%;
    margin: 20px auto;
    
}

.challenge_details_sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.start_div,
.end_div {
    flex: 1;
    
}

.start_box,
.end_box {
    display: flex;
    align-items: center;
}

.challenge_details_sub label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
    font-family: 'Poppins';
}

.challenge_details_sub input[type="datetime-local"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: 'Poppins';
    font-weight: 600;
}

.show_instruction_msg {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    font-family: 'Poppins';
    font-weight: 600;
}

.step_by_step_box label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
    padding-right: 10px;
    font-family: 'Poppins';
}

.step_by_step_box {
    display: flex;
    align-items: center;
    margin-top: 25px;
}

.step_by_step_box input[type="checkbox"] {
    margin-right: 5px;
}




.challenge_details_box .checkpoints_container {
    width: auto; /* Adjust width as needed */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    background-color: #f5f5f5;
    margin: 40px auto;
}

.header {
    margin-bottom: 20px;
}

.header h1 {
    font-size: 22px;
    margin-bottom: 5px;
    font-family: 'Poppins';
    font-weight: 600;
}

.header p {
    color: #7c7878;
    font-size: 13px;
    font-family: 'Poppins';
    font-weight: 600;
}



.checkpoints {
    margin-bottom: 20px;
}

.checkpoints h2 {
    text-align: center;
    margin-bottom: 10px;
}

.checkpoint {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 40px;
    padding: 15px;
    width: auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 40px;
}

.checkpoint_left {
    width: 15%;
}
.checkpoint_left input {
    width: 100%;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin: 0px 0px 10px 0px;
    font-family: 'Poppins';
    color: #555;
}

.checkpoint_left .checkpoint_end_time{
    margin-top: 5px !important;
}
.checkpoint_left span {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins';
}
.checkpoint_right {
    width: 80%;
}
.for_title{
    margin-bottom: 10px;
}
.for_title  label{
    font-size: 14px ;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: 'Poppins';
}
.for_title input{
    width: 100%;
    padding: 5px;
    font-weight: 600;
    font-size: 16px !important;
}
.for_description  label{
    font-size: 14px ;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: 'Poppins';
}
.for_description textarea{
    width: 100%;
    height: 100px !important;
    padding: 5px;
    font-weight: 600;
    font-size: 16px !important;
}
.checkpoint h3 {
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'Poppins';
}

.checkpoint p {
    margin-bottom: 5px;
}

.appendBtn {
    padding:10px;
    background-color: #333;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: "poppins";
    border: none;
    outline: none;
    border-radius: 3px; ;
    cursor: pointer;
}
.duplicateBtn {
    padding:6px;
    background-color: #333;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-family: "poppins";
    border: none;
    outline: none;
    border-radius: 3px; ;
    cursor: pointer;
    margin-left:20px;
    position: absolute;
    right: 0;
    bottom: 0px;
}


span.close_checkpoint_button {
    display: block;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    font-size: 18px;
    cursor: pointer;
}

.not_started_challenge{
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-weight: 500;
    font-family: "Poppins";
}
.started_challenge{
    background-color: green;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-weight: 500;
    font-family: "Poppins";
}
.end_challenge{
    background-color: red;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-weight: 500;
    font-family: "Poppins";
}


 .challenge_table { 
	width: 90%; 
	border-collapse: collapse; 
	margin:50px auto;
	}
.challenge_table th{
    padding: 10px;
}
/* Zebra striping */
 .challenge_table tr:nth-of-type(odd) { 
	background: #eee; 
	}

.challenge_table th { 
	background: #333; 
	color: white; 
	font-weight: bold; 
	}

 .challenge_table td { 
	padding: 10px;  
	text-align: left; 
	font-size: 18px;
    border: 1px solid #000;
	}

    a.challenge_participants {
        padding: 6px 10px;
        background: #3e3b3b;
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
    }

    
    .content-table {
        border-collapse: collapse;
        margin: 25px 0;
        font-size: 0.9em;
        min-width: 400px;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        width: 98%;
      }
      
      .content-table thead tr {
        background-color: #009879;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
      }
      
      .content-table th,
      .content-table td {
        padding: 12px 15px;
      }
      
      .content-table tbody tr {
        border-bottom: 1px solid #dddddd;
        text-align: center;
      }
      
      .content-table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
      }
      
      .content-table tbody tr:last-of-type {
        border-bottom: 2px solid #009879;
      }
      
      .content-table tbody tr.active-row {
        font-weight: bold;
        color: #009879;
      }
      
/* 
Max width before this PARTICULAR gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

.challenge_table { 
	  	width: 100%; 
}

	/* Force to not be like tables anymore */
.challenge_table, thead, tbody, th, td, tr { 
		display: block; 
}
	
	/* Hide table headers (but not display: none;, for accessibility) */
.challenge_table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
}
	
.challenge_table tr { border: 1px solid #ccc; }
	
 .challenge_table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}

 .challenge_table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

		color: #000;
		font-weight: bold;
	}

}


.checkpoint_and_proof_status {
    display: flex;
    justify-content: center;
    align-items: center;
}
span.required_icon {
    color: red;
    font-size: 18px;
}
.pass_fail_div button {
    padding: 2px 4px;
    color: #000;
    font-weight: 500;
}
input#upload_image_button {
    display: block;
    background: #0e7b4a;
    color: #fff;
    border: none;
    outline: none;
    padding: 6px;
    margin-bottom: 15px;
    cursor: pointer;
}
img#image_preview {
    width: 200px;
    display: block;
    margin-bottom: 20px;
}

input.certificate_upload_button {
    padding: 4px 10px;
    background: #000000;
    color: #fff;
    border: none;
    outline: none;
    font-weight: 600;
    cursor: pointer;
}