.flash-number-screen-1{
    display: flex;
    width: 100%;
}
.flash-number-screen-1 .left-sec-form-fields{
    width: 60%;
}
.flash-number-screen-1 .left-sec-form-fields .form-group, .flash-number-screen-1 .left-sec-form-fields .fg-one .form-group, .flash-number-screen-1 .left-sec-form-fields .fg-two .form-group{
    display: flex;
    justify-content: space-around;
    margin: 25px 0px;
}
.flash-number-screen-1 .left-sec-form-fields .form-group .input-group, .flash-number-screen-1 .left-sec-form-fields .form-group select,
.flash-number-screen-1 .left-sec-form-fields .fg-one .form-group .input-group, .flash-number-screen-1 .left-sec-form-fields .fg-one .form-group select,
.flash-number-screen-1 .left-sec-form-fields .fg-two .form-group .input-group, .flash-number-screen-1 .left-sec-form-fields .fg-two .form-group select {
    width: 40%;
}
.flash-number-screen-1 .left-sec-form-fields .form-group label, .flash-number-screen-1 .left-sec-form-fields .fg-two .form-group label, .flash-number-screen-1 .left-sec-form-fields .fg-one .form-group label{
    width: 40%;
    text-align: right;
    font-size: 20px;
    font-weight: 500;
}
.flash-number-screen-1 .left-sec-form-fields .form-group select, .flash-number-screen-1 .left-sec-form-fields .fg-one .form-group select, .flash-number-screen-1 .left-sec-form-fields .fg-two .form-group select{
    background: #e6e5e5;
    border: 1px solid #808080;
    font-size: 18px;
    font-weight: 700;
    color: #22395e;
}
select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Ensure the arrow is not clickable */
    width: 10px;
    height: 10px;
    background: url('https://cdn-icons-png.flaticon.com/512/32/32195.png') no-repeat center;
    background-size: 10px;
}
.flash-number-screen-1 > .left-sec-form-fields .form-group input[type="number"], .flash-number-screen-1  .left-sec-form-fields .number {
    width: 70px !important;
    flex: none  !important;
    padding: 0px 8px;
    text-align: center;
    background: #e6e5e5;
    font-weight: 800;
    font-size: 22px;
    color: #22395e;
    height: 35px;
    border-radius: 6px !important;
    margin-right: 12px;
    margin-left: 12px !important;
    border: 1px solid #808080;
}
.flash-number-screen-1 > .left-sec-form-fields button.btn.btn-outline-secondary.decrement-btn, 
.flash-number-screen-1 > .left-sec-form-fields button.btn.btn-outline-secondary.increment-btn {
    background: #4472c4;
    border: 1px solid #325490;
    width: 43px;
    color: white;
    font-weight: 500;
    font-size: 30px;
    height: 35px;
    justify-content: center;
    display: flex;
    align-items: center;
}

button.btn.btn-outline-secondary.decrement-btn {}
.flash-number-screen-1 > .right-sec-form-fields{
    width: 40%;
}
/* Remove arrows in Chrome, Safari, Edge, and Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}
/* Custom styling for input */
input[type="number"] {
    appearance: none;  /* Remove the default number field styling */
    padding: 0;        /* Remove default padding */
    margin: 0;         /* Remove default margin */
    border: none;      /* Remove default border */
    width: 100%;       /* Set full width or any desired width */
    box-sizing: border-box; /* Ensure padding and borders are included in the element's width */
}
.all-activities{
    display: flex;
    flex-wrap: wrap;
    margin: 0px 40px;
}
.all-activities .activity {
    width: calc(calc(100%/6) - 80px );
    margin: 0px 40px;
}
.all-activities .activity p{
    text-align: center;
    margin-top: 14px;
    font-size: 18px;
}
.activities-screen img {
    width: 100px;
}
.main-heading {
    display: flex;
    justify-content: space-between;
    margin: 15px 0px;
}
.main-footer {
    display: flex;
    justify-content: space-between;
    margin: 15px 0px;
}
table.custom-table {
    width: 100%;
}

table.custom-table th, table.custom-table td {
    border: none; /* Remove default borders */
    padding: 8px;
    text-align: left;
}

table.custom-table th {
    font-weight: bold;
    background-color: #e6e5e5; /* Add a light background to the header */
}

table.custom-table td {
    background-color: transparent;
}

/* Optional: Add a hover effect */
table.custom-table tr {
    background-color: #e6e5e5;
}
.add-question{
    text-align: center;
    margin-right: 130px;
}
div#total-questions {
    background: #fbbd00;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border: 2px solid #726c6c;
    border-radius: 7px;
    margin: 4px 0px;
}
div#total-questions p{
    margin-bottom: 0px;
}
div#added-questions-box {
    height: 300px;
    background: #e6e5e5;
    border-radius: 14px;
    padding: 6px;
    border: 1px solid;
}
button.btn.btn-danger.remove-question-btn {
    background: #4472c4;
    border: 1px solid #325490;
    font-size: 19px;
    font-weight: 900;
    padding: 5px 12px;
}
.add-question .question-label {
    cursor: pointer;
    border: 4px solid #325490;
    background: #e6e5e5;
    border-radius: 14px;
    padding: 4px;
    display: inline-block;
    width: 120px;
    height: 120px;
}
.add-question .question-label p{
    font-weight: 800;
    font-size: 18px;
}
.labels{
    text-align: center;
    margin-top: 5px ;
}
.custom-select-wrapper {
    position: relative;
}

.custom-select {
    width: 100%;
    height: 40px; /* Adjust height as needed */
    padding-right: 30px; /* Make room for the icon */
    appearance: none; /* Remove default system dropdown arrow */
    -webkit-appearance: none; /* For older versions of Safari */
    -moz-appearance: none; /* For Firefox */
    border: 1px solid #ccc; /* Style the border as needed */
    background-color: white;
    border-radius: 5px; /* Optional: for rounded corners */
}

.custom-select-wrapper .after {
    content: '';
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; 
    height: 0; 
}
.custom-select-wrapper .after::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fffcfc; /* Change color as needed */
    pointer-events: none; /* Make the icon non-interactive */
}

/* Add focus style */
.custom-select:focus {
    outline: none;
    border-color: #666; /* Change focus color as needed */
}
.form-group.activity-title{
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 16px;
}
.form-group.activity-title input{
    width: inherit;
    background-color: #e6e5e5;
    border: 1px solid;
}
.form-group.custom-select-wrapper.individuals-select {
    text-align: center;
}
.form-group.custom-select-wrapper.individuals-select select{
    background: #e6e5e5;
    border: 1px solid #808080;
    font-size: 18px;
    font-weight: 700;
    color: #22395e;
    width: 25%;
    margin: 0 auto;
}
.success-message{
    text-align: center;
    width: 100%;
}
.success-dasboard{
    text-align: center;
    width: 100%;
}
.success-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
}
#activity-area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 250px;
    
}
#answer-area input{
    background: #e7e6e6;
    border: 3px solid #325490;
    height: 90px;
    font-size: 50px;
    padding: 30px 30px;
    width: 46%;
    margin: 0 auto;
}
#flash-numbers-area{
    font-size: 120px; 
    color:red; 
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#activity-title{
    text-align:center; 
    margin-bottom: 20px;
    width: 100%;
}
#countdown-image-container{
    position: absolute;
    bottom: 0;
    margin-bottom: 82px;
    margin-left: 20px;
}

.result-body {
    display: flex;
    justify-content: x;
    justify-content: space-around;
  }
  .scored p {
    color: red;
    font-size: 80px;
    text-align: center;
  }
  .out-of p {
    color: gray;
    text-align: center;
    font-size: 30px;
  }
  .you-scored p {
    color: gray;
    text-align: center;
    font-size: 20px;
  }
  .trophy{
    height: 300px;
  }