body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #eae7dc;
  }
  .container {
    height: 120vh;
    max-width: 75vw;
}

.bg-light {
    background-color: #f0f0f0!important;
}

.navbar {
    background-color: #d8c3a5 !important;
   }

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #564e42;
    border-color: #ccc9c6;
}
    .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(86 ,78 ,66, 0.5);
    }
    .btn.focus, .btn:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(86 ,78, 66 ,0.25);
    }
    .btn-outline-primary:focus {
        box-shadow: 0 0 0 0.2rem rgba(86 ,78 ,66, 0.5);
    }
    .btn-outline-primary {
        color: rgb(10, 10, 10);
        border-color: #ac9c84;
    }
    .btn-outline-primary:hover {
        color: #fff;
        background-color:#564e42;
        border-color: #fbf9f6;
    }
    .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color:#564e42;
        border-color: #fbf9f6;
    }
    .btn-primary {
        color: #fff;
        background-color: #d8c3a5;
        border-color: #d8c3a5;
    }
    .btn-secondary {
        color: #fff;
        background-color: #564e42;
        border-color: #fbf9f6;
    }
    .btn-primary:hover {
        color: #fff;
        background-color: #564e42;
        border-color: #fbf9f6;
    }
    .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(86, 78 ,66, 0.5);
    }
    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #564e42;
        border-color: #fbf9f6;
    }
    .btn-primary.focus, .btn-primary:focus {
        color: #fff;
        background-color: #564e42;
        border-color: #fbf9f6;
        box-shadow: 0 0 0 0.2rem rgba(86 ,78, 66, 0.5);
    }
    .list-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        border-radius: 0;
    }
    .list-group-item-action:focus, .list-group-item-action:hover {
        z-index: 1;
        color: #fff;
        text-decoration: none;
        background-color: #564e42;
        border-color: #ccc9c6;
    }
    #ques{
        min-height: 433px;
         }
    
    .list-group-item {
            position: relative;
            display: block;
            padding: .75rem 1.25rem;
            background-color: #d8c3a5;
            border: 1px solid rgba(0,0,0,.125);
        }

    .lightcoral {
            background-color: #ff7f7f !important;
          }
    .lightsalmon {
            background-color: #ffcccc !important;
          }
    .lightgreen {
            background-color: lightgreen !important;
          }
    .whitesmoke {
            background-color: #f3ede4 !important;
          }
    
    table#myTable.dataTable tbody tr:hover {
            background-color: #c9e3f4 !important;
          }
          
    table#myTable.dataTable tbody tr:hover > .sorting_1 {
            background-color: #c9e3f4 !important;
          }
          
    table#myTable.dataTable thead:hover {
            background-color: #c9e3f4 !important;
          }

    .bg-dark {
            background-color: #564e42!important;
        }

    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        background-color: #564e42;
        }
    table.dataTable tbody th, table.dataTable tbody td {
            padding: 2px 3px;
            font-size: medium;
            text-align: center;
        }
    table.dataTable thead th,
    table.dataTable thead td {
            padding: 2px 3px;
            font-size: medium;
            text-align: center;
            border-bottom: 1px solid #111;
    
        }

        table.dataTable thead .sorting,
        table.dataTable thead .sorting_asc,
        table.dataTable thead .sorting_desc,
        table.dataTable thead .sorting_asc_disabled,
        table.dataTable thead .sorting_desc_disabled {
            cursor: pointer;
            *cursor: hand;
            background-repeat: no-repeat;
            background-position: center right;
        }
        a {
            color: #ffffff;
            text-decoration: none;
            background-color: transparent;
           }
            a:hover {
            color: #ffffff;
            text-decoration:none;
            }
            @media only screen and (max-width: 784px){
                    .box{
                        display: none;
                        width:100vw;
                    }
        
                }
        
                @media only screen and (min-width: 784px ) {
                    .box{
                        display: block;
                    }
        
                }
                .form-control:focus {
                    color: #495057;
                    background-color: #fff;
                    border-color: #4e555b;
                    outline: 0;
                    box-shadow: 0 0 0 0.2rem rgba(127, 127, 128, 0.5);
                }