/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* Style the tab */
#hometab {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
}   

/* Style the buttons inside the tab */
#hometab button {
    background-color: transparent;
    float: left;
    border: none;
    border-radius: 0%;
    color: #4a4b4b;
    outline: none;
    cursor: pointer;
    padding: 0.5em 1em;
    transition: 0.3s;
    font-size: 18px;
    font-weight: 500;
}

/* Change background color of buttons on hover */
#hometab button:hover {
    color: #fc7a00;
}

/* Create an active/current tablink class */
#hometab button.active {
    color: #fc7a00;
}

/* Style the tab content */
#hometab .tabcontent {
    display: none;
    margin: 1em 0 0 0;
    padding: 1em;
}

/* Student & Teacher Responses */

#nma_student_teacher_responses {
margin-top: 20px;

}

.activity-item {
padding: 20px 30px !important;
    background: white;
    margin: 20px 10px;
    border-radius: 10px;
}

.wdm-post-header {
  display : flex;
  align-items: center;
}

.nma_student_grade_system  {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nma_student_grade_system  p{
  margin: 0 8px;
}

#nma_quiz_audio_video_post {
    display: flex;
    align-items: center;
    justify-content: center;
}

  /* Remove default appearance for checkboxes with the class nma_answered_check */
    .nma_answered_check {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 16px;
        height: 16px;
        border: 1px solid #ccc;
        border-radius: 3px;
        outline: none;
        background-color: white;
    }

    /* Style for a checked checkbox */
    .nma_answered_check:checked {
        background-color: #007bff; /* Blue background */
        border-color: #007bff; /* Blue border */
    }

    /* Add the checkmark */
    .nma_answered_check:checked:before {
        content: '\2714'; /* Unicode checkmark */
        color: white;
        font-size: 14px;
        display: block;
        text-align: center;
        line-height: 14px;
    }

    /* Disabled style */
    .nma_answered_check:disabled {
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

    /* Disabled and checked style */
    .nma_answered_check:disabled:checked {
        background-color: #007bff; /* Blue background for checked and disabled */
        border-color: #007bff; /* Blue border */
    }
    
/*hide and show tabs for #tab*/
.hideTabs {
  display: none !important;
}

.showTabs {
  display: block !important;
}

/*Adpipe PlayBack CSS Rules*/
.addpipe-playback {
    width: 100% !important;
}

.groups.activity_update .addpipe-playback video {
    width: 100% !important;
}

.addpipe-playback video {
    width: 100%;
}

.nma-activity-video {
    width: 100%;
}
.groups.activity_update .addpipe-playback video[poster="audio_file"] {
    height: 100px;
}

.nma_recorder_container piperecorder {
    display: flex !important;
    justify-content: center !important;
}
.nma_recorder_container
{
    width: 100% !important;
}
.nma_update_button_wrap
{
    margin-bottom: 1rem !important;
}