body {
    background-color: #fafafa;
}

.logo img {
    widows: 100%;
    height: 100%;
}

.logo {
    width: auto;
    height: 70px;
    float: left;
}


.logo_name {
    font-size: 14px;
    font-weight: bold;
    color: #111111;
    padding-top: 6px;
    float: left;
}

.head {
    background-color: #3c3c3c;
}

.content_area {
    padding: 70px 0px 70px 0px;
}

.ibtn {
    background-color: #3dba6f;
    text-align: center;
    border: 1px solid #cccc;
    color: #fff;
}

.free_space_20 {
    height: 20px;
}

.TC {
    margin-top: 30px;
    font-size: 10px;
    text-align: center;
}

.opn{
    opacity: 0;   
}

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

/* media area*/

@media (min-width: 320px) {
    .logo {
        width: auto;
        height: 54px;
        float: left;
    }
    .logo_name {
        font-size: 14px;
        font-weight: bold;
        color: #111111;
        padding-top: 6px;
        float: left;
    }
    .align_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .extra_padding {
        padding: 10px 40px;
        justify-content: center;
    }
    .row {
        margin: 0%;
    }
    .heigth_1 {
        height: 70px;
    }
    .btn {
        padding: 7px 57px;
    }
    .head label {
        color: #fff;
    }
    .mobile_001 {
        height: 100px;
    }
    label {
        font-size: 13px;
        margin-bottom: 2px;
        color: gary;
    }
    .content_input {
        padding: 5px 10px;
    }
    select {
        font-size: 12px !important;
    }
    input {
        font-size: 12px !important;
    }
    .video {

    }
    .only_mobile{
        margin-top: 40px;
    }
}

@media (min-width: 576px) {
    .logo {
        width: auto;
        height: 70px;
        float: left;
    }
    .logo_name {
        font-size: 14px;
        font-weight: bold;
        color: #111111;
        padding-top: 6px;
        float: left;
    }
    .align_center {
        padding: 0px 130px;
    }
    .align_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .row {
        margin: 0%;
    }
    .head label {
        color: #fff;
    }
    .mobile_001 {
        height: 100px;
    }
    label {
        font-size: 13px;
        margin-bottom: 2px;
        color: gray;
    }
    .content_input {
        padding: 5px 10px;
    }
    select {
        font-size: 12px !important;
    }
    input {
        font-size: 12px !important;
    }
    .video {

    }
    .only_mobile{
        margin-top: 40px;
    }
}

@media (min-width: 768px) {
    .logo {
        width: auto;
        height: 50px;
        float: left;
    }
    .logo_name {
        font-size: 33px;
        font-weight: bold;
        color: white;
    }
    .form-control {
        width: 100%;
    }
    .col-lg.col-md.col-sm-12.col-xs-12.extra_padding.B {
        padding: 10px 10px;
    }
    .btn {
        padding: 5px 31px;
    }
    .extra_padding {
        padding: 10px 40px;
        justify-content: center;
    }
    .align_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }s
    .head label {
        font-size: 13px;
        margin-bottom: 2px;
        color: white;
    }
    label {
        font-size: 13px;
        margin-bottom: 2px;
        color: gray;
    }
    .content_input {
        padding: 5px 10px;
    }
    select {
        font-size: 12px !important;
    }
    input {
        font-size: 12px !important;
    }
    .video {
        height: 280px;
        width: 441px;
    }
    .only_mobile{
        margin-top: 40px;
    }
}
@media (min-width: 992px) {
    .logo {
        width: auto;
        height: 55px;
        float: left;
    }
    .logo_name {
        font-size: 24px;
        font-weight: normal;
        color: #25e371;
    }
    .align_center {
        padding: 0px 0px;
    }
    .align_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .form-control {
        width: 100%;
    }
    .col-lg.col-md.col-sm-12.col-xs-12.extra_padding.B {
        padding: 10px 10px;
    }
    .abtn {
        padding: 7px 74px;
    }
    .head label {
        font-size: 13px;
        margin-bottom: 2px;
        color: white;
    }
    input {
        font-size: 14px !important;
    }
    select {
        font-size: 12px !important;
    }
    label {
        font-size: 13px;
        margin-bottom: 2px;
        color: gray;
    }
    .content_input {
        padding: 5px 10px;
    }
    .video {
        height: 280px;
        width: 441px;
    }
    .col-lg-6 .col-md-6 .content_input_width {
        width: 200px;
    }
    .only_mobile{
        margin-top: 40px;
    }
}

@media (min-width: 1200px) {
    .logo {
        width: auto;
        height: 46px;
        float: left;
    }
    .logo_name {
        font-size: 22px;
        font-weight: normal;
        color: #25e371;
    }
    .form-control {
        width: 100%;
    }
    .col-lg.col-md.col-sm-12.col-xs-12.extra_padding.B {
        padding: 10px 10px;
    }
    .abtn {
        padding: 11px 74px;
    }
    .head label {
        font-size: 13px;
        margin-bottom: 2px;
        color: white;
    }
    input {
        font-size: 14px !important;
    }
    select {
        font-size: 12px !important;
    }
    label {
        font-size: 13px;
        margin-bottom: 2px;
        color: gray;
    }
    .content_input {
        padding: 5px 10px;
    }
    .col-lg-6 .col-md-6 .content_input_width {
        width: 200px;
    }
    .video {
        width: 375px;
        height: 280px;
    }
}

@media (min-width: 1920px) {
    .logo {
        width: auto;
        height: 55px;
        float: left;
    }
    .logo_name {
        font-size: 25px;
        font-weight: bold;
        color: white
    }
    .form-control {
        width: 100%;
    }
    .col-lg.col-md.col-sm-12.col-xs-12.extra_padding.B {
        padding: 10px 10px;
    }
    .abtn {
        padding: 11px 100px;
    }
    .align_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .head label {
        font-size: 13px;
        margin-bottom: 2px;
        color: white;
    }
    .video {
        width: 540px;
        height: 380px;       
    }
    input {
        font-size: 14px !important;
    }
    select {
        font-size: 12px !important;
    }
    label {
        font-size: 13px;
        margin-bottom: 2px;
        color: gray;
    }
    .content_input {
        padding: 5px 10px;
    }
    .col-lg-6 .col-md-6 .content_input_width {
        width: 250px;
    }
}


/*primary_settings*/


/*bichu custom css*/
.content-area {
    height: 373px;
    padding: 10px;
}
.os-y{
    overflow-y: scroll;
    border: 1px solid #e8e8e8;
}
.os-x{
    overflow-x: scroll;
    border: 1px solid #e8e8e8;
}
.borderx{
    border: 1px solid #e8e8e8;
}


/*bichu end custom css*/

.border-right-1px-light-gray{
    border-right: 1px solid #e8e8e8
}

.border-1px-light-gray{
    border: 1px solid #e8e8e8
}
.indication-boll {
    height: 30px;
    width: 30px;
    background: #a6dcbc;
    border-radius: 200px;
}
.indication-boll1 {
    height: 30px;
    width: 30px;
    background: #e8e8e8;
    border-radius: 200px;
}
.indication-boll::after {
    content: '';
    width: 1px;
    height: 100px;
    background-color: #a6dcbc;
    display: block;
    position: absolute;
    left: 50px;
    top: 100%;
}
.indication-boll-bottom {
    height: 30px;
    width: 30px;
    background: #a6dcbc;
    border-radius: 200px;
}
.indication-boll-bottom::after {
    background-color: #a6dcbc;
    content: '';
    width: 1px;
    height: 100px;
    display: block;
    position: absolute;
    left: 50px;
    bottom: 0%;
}
.indication-boll-active {
    height: 75px;
    width: 75px;
    border: 2px solid #3dba6f;
    border-radius: 200px;
    z-index: 3;
    background: #fff;
    position: absolute;
    padding: 16px 20px;
    
}
.indication-boll-active1 {
    height: 75px;
    width: 75px;
    border: 2px solid #e8e8e8;
    border-radius: 200px;
    z-index: 3;
    background: #e8e8e8;
    position: absolute;
    padding: 16px 20px;
    
}

.indication-boll-inactive{
    height: 30px;
    width: 30px;
    background: #e8e8e8;
    border-radius: 200px;
}
.indication-boll-inactive::before {
    content: '';
    width: 1px;
    height: 100px;
    background-color: #e8e8e8;
    display: block;
    position: absolute;
    left: 50px;
    bottom: 0%;
}
.indication-boll-inactive-top{
    height: 30px;
    width: 30px;
    background: #e8e8e8;
    border-radius: 200px;
}
.indication-boll-inactive-top::before {
    content: '';
    width: 1px;
    height: 100px;
    background-color: #e8e8e8;
    display: block;
    position: absolute;
    left: 50px;
    top: 44%;
}
.pt-100 {
    padding-top: 108px;
}

.border-2px-nice-green {
    border: 2px solid #3dba6f;
}

.hilighted{
/*    background-color: #22d0b8 !important;*/
    position: relative;
    border-left: 3px solid #22d0b8 !important;
}

.hilighted:after{
    font-family: "lindo-fonts" !important;
    content: "\e88f";
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 10px;
    /* top: 10px; */
    padding-top: 20px;
    font-size: 40px;
    opacity: 0.08;
}
.hilighted_student{
/*    background-color: #22d0b8 !important;*/
    position: relative;
    border-left: 3px solid #22d0b8 !important;
}

#table_grid table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
}

#table_grid table thead tr th { 
    background: #bfbfbf;
    color: white;
    font-weight: bold;
    color: #000000;
    padding: 5px 10px;
    border: 1px solid #a7a7a7;
}

#table_grid table tr:nth-of-type(odd) { 
    background: #f7f7f7; 
}

#table_grid table tr:nth-of-type(even) { 
    background: #ffffff; 
}

#table_grid table tbody tr td{
    width: auto;
    color: #111111;
    padding: 5px 10px;
    border: 1px solid #f3f3f3;
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {


    #table_grid table, thead, tbody, th, td, tr { 
        display: block; 
    }

    #table_grid thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #table_grid tbody tr { border: 1px solid #f3f3f3; }

    #table_grid table tbody tr td { 
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    #table_grid table tbody tr td:before { 
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }	
    
    .table-condensed thead tr th, .table-condensed tbody tr td{
        display: revert;   
    }
}