.example {
  padding: 20px;
  color: white;
  z-index: 99;
}




/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .example {
    background: red;
  }

  .login.login-4 .login-aside .login-conteiner {
    background-size: 70%;
    background-position: center;
    background-color: #EAEEFA;
    min-height: 180px !important;
  }

  .login-logo .max-h-100px {
    max-height: 80px !important;
  }

  .login-container .pt-12 {
    padding-top: 0 !important;
  }

  .m-style.text-right {
    text-align: left !important;
  }

  #kt_quick_user .symbol.symbol-100 .symbol-label {
    width: 50px;
    height: 50px;
  }

  #kt_quick_user .align-items-center {
    align-items: unset !important;
  }

  #kt_quick_user.p-10 {
    padding: 2rem !important;
  }

  #kt_datatable_2_filter,
  #kt_datatable_3_filter,
  #kt_datatable_4_filter,
  #kt_datatable_5_filter {
    background-color: #f8f8f8;
  }

  #kt_datatable_2_filter label,
  #kt_datatable_3_filter label,
  #kt_datatable_4_filter label,
  #kt_datatable_5_filter label {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
  }

  .RichEditor-root-createquestion {
    width: 500px;
  }

  .create-assessment-wizard .px-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .create-assessment-wizard .wizard-content .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
    font-size: 1rem !important;
  }

  #kt_header_mobile .brand-logo .logo {
    height: 34px !important;
    width: 106px !important;
    bottom: 100px;
  }

  #kt_wizard .wizard-steps {
    width: 100%;
    display: block !important;
  }

  #kt_wizard .wizard-steps .wizard-step {
    width: 50%;
    float: left;
  }

  .wizard.wizard-6 .wizard-content .wizard-nav .wizard-steps .wizard-step {
    padding: 0 !important;
  }

  .RichEditor-root-createquestion {
    width: 100%;
  }

  .public-DraftStyleDefault-block {
    margin: 0 !important;
  }

  .create-assessment-wizard .wizard-content .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
    font-size: 1rem !important;
  }

  .course-search-wrap .my-questions,
  .course-search-wrap .category,
  .course-search-wrap .type,
  .course-search-wrap .total-marks,
  .course-search-wrap .difficulty {
    /* max-width: 50%;
  flex: 50%;
  padding-top: 10px;
  padding-bottom: 10px; */
    text-align: left !important;
  }

  .course-search-wrap .my-questions .checkbox-inline {
    margin-left: 10px;
  }

  .course-search-wrap .total-marks {
    text-align: center !important;
    margin-top: 10px;
  }

  .course-title-wrap {
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-detail-wrap {
    margin-top: 20px;
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-title-wrap .font-size-h3 {
    font-size: 1.2rem !important;
  }

  .course-title-wrap .scroll-wrap {
    height: 384px;
  }

  .create-btn {
    background-color: #f8f8f8 !important;
  }

  .card.card-custom>.card-body {
    padding: 10px !important;
  }

  .dataTables_pager {
    flex-direction: column;
  }

  .table-tab .nav-item .nav-link {
    padding: 0.75rem 0.8rem;
  }

  .modal-footer {
    padding: 5px 10px !important;
  }

  .modal-body {
    padding: 10px !important;
  }

  .card-header {
    padding: 2rem 1rem !important;
  }

  .card-title {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .breadcrumb.ml-2 {

    margin-left: 0px !important;
  }

  .RichEditor-root-createquestion {
    height: 250px !important;
  }

  .wizard-bottom-btn-wrap {
    flex-direction: column;
  }

  .wizard-bottom-btn-wrap .btn {
    width: 100%;
    margin-bottom: 10px !important;
    margin-top: 0px !important;
  }

  .label.label-lg.label-inline {

    height: auto;
  }

  .card-toolbar .finalize-btn {
    width: 48%;
    margin-right: 2% !important;
    margin-bottom: 5px;
  }

  .m-style {
    margin-bottom: 5px;
  }

  .m-total-marks {
    margin-bottom: 10px;
  }

  #edit-questions .RichEditor-root-createquestion,
  #create-question .RichEditor-root-createquestion {
    width: 100% !important;
  }

}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .example {
    background: green;
  }

  .login.login-4 .login-aside .login-conteiner {
    background-size: 50%;
    background-position: center;
    background-color: #EAEEFA;
  }

  .login-logo .max-h-100px {
    max-height: 50px !important;
  }

  .login-container .pt-12 {
    padding-top: 0 !important;
  }

  .m-style.text-right {
    text-align: left !important;
  }

  #kt_quick_user .symbol.symbol-100 .symbol-label {
    width: 50px;
    height: 50px;
  }

  #kt_quick_user .align-items-center {
    align-items: unset !important;
  }

  #kt_quick_user.p-10 {
    padding: 2rem !important;
  }

  #kt_datatable_2_filter,
  #kt_datatable_3_filter,
  #kt_datatable_4_filter,
  #kt_datatable_5_filter {
    background-color: #f8f8f8;
  }

  #kt_datatable_2_filter label,
  #kt_datatable_3_filter label,
  #kt_datatable_4_filter label,
  #kt_datatable_5_filter label {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
  }

  .RichEditor-root-createquestion {
    width: 500px;
  }

  .create-assessment-wizard .px-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .create-assessment-wizard .wizard-content .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
    font-size: 1rem !important;
  }

  #kt_header_mobile .brand-logo .logo {
    height: 34px !important;
    width: 106px !important;
  }

  #kt_wizard .wizard-steps {
    width: 100%;
    display: block !important;
  }

  #kt_wizard .wizard-steps .wizard-step {
    width: 50%;
    float: left;
  }

  .wizard.wizard-6 .wizard-content .wizard-nav .wizard-steps .wizard-step {
    padding: 0 !important;
  }

  .RichEditor-root-createquestion {
    width: 100%;
  }

  .public-DraftStyleDefault-block {
    margin: 0 !important;
  }

  .create-assessment-wizard .wizard-content .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
    font-size: 1rem !important;
  }

  .course-search-wrap .my-questions,
  .course-search-wrap .category,
  .course-search-wrap .type,
  .course-search-wrap .total-marks,
  .course-search-wrap .difficulty {
    /* max-width: 50%;
  flex: 50%;
  padding-top: 10px;
  padding-bottom: 10px; */
    text-align: left !important;
  }

  .course-search-wrap .my-questions .checkbox-inline {
    margin-left: 10px;
  }

  .course-search-wrap .total-marks {
    text-align: center !important;
    margin-top: 10px;
  }

  .course-title-wrap {
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-detail-wrap {
    margin-top: 20px;
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-title-wrap .font-size-h3 {
    font-size: 1.2rem !important;
  }

  .course-title-wrap .scroll-wrap {
    height: 384px;
  }

  .create-btn {
    background-color: #f8f8f8 !important;
  }

  .card.card-custom>.card-body {
    padding: 10px !important;
  }

  .dataTables_pager {
    flex-direction: column;
  }

  .table-tab .nav-item .nav-link {
    padding: 0.75rem 0.8rem;
  }

  .modal-footer {
    padding: 5px 10px !important;
  }

  .modal-body {
    padding: 10px !important;
  }

  .card-header {
    padding: 2rem 1rem !important;
  }

  .card-title {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .breadcrumb.ml-2 {

    margin-left: 0px !important;
  }

  .RichEditor-root-createquestion {
    height: 250px !important;
  }

  .wizard-bottom-btn-wrap {
    flex-direction: column;
  }

  .wizard-bottom-btn-wrap .btn {
    width: 100%;
    margin-bottom: 10px !important;
    margin-top: 0px !important;
  }

  .label.label-lg.label-inline {

    height: auto;
  }

  .card-toolbar .finalize-btn {
    width: 48%;
    margin-right: 2% !important;
    margin-bottom: 5px;
  }

  .m-style {
    margin-bottom: 5px;
  }

  .m-total-marks {
    margin-bottom: 10px;
  }

  #edit-questions .RichEditor-root-createquestion,
  #create-question .RichEditor-root-createquestion {
    width: 100% !important;
  }

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .example {
    background: blue;
  }

  .login.login-4 .login-aside .login-conteiner {
    background-size: 50%;
    background-position: center;
    background-color: #EAEEFA;
  }

  #kt_quick_user .symbol.symbol-100 .symbol-label {
    width: 50px;
    height: 50px;
  }

  #kt_quick_user .align-items-center {
    align-items: unset !important;
  }

  #kt_quick_user.p-10 {
    padding: 2rem !important;
  }

  #kt_datatable_2_filter,
  #kt_datatable_3_filter,
  #kt_datatable_4_filter,
  #kt_datatable_5_filter {
    background-color: #f8f8f8;
  }

  #kt_datatable_2_filter label,
  #kt_datatable_3_filter label,
  #kt_datatable_4_filter label,
  #kt_datatable_5_filter label {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
  }

  .RichEditor-root-createquestion {
    width: 500px;
  }

  .create-assessment-wizard .px-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .create-assessment-wizard .wizard-content .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
    font-size: 1rem !important;
  }

  #kt_header_mobile .brand-logo .logo {
    height: 34px !important;
    width: 106px !important;
  }

  #kt_wizard .wizard-steps {
    width: 100%;
    display: block !important;
  }

  #kt_wizard .wizard-steps .wizard-step {
    width: 50%;
    float: left;
  }

  .wizard.wizard-6 .wizard-content .wizard-nav .wizard-steps .wizard-step {
    padding: 0 !important;
  }

  .RichEditor-root-createquestion {
    width: 100%;
  }

  .public-DraftStyleDefault-block {
    margin: 0 !important;
  }

  .create-assessment-wizard .wizard-content .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
    font-size: 1rem !important;
  }

  .course-search-wrap .my-questions,
  .course-search-wrap .category,
  .course-search-wrap .type,
  .course-search-wrap .total-marks,
  .course-search-wrap .difficulty {
    /* max-width: 50%;
  flex: 50%;
  padding-top: 10px;
  padding-bottom: 10px; */
    text-align: left !important;
  }

  .course-search-wrap .my-questions .checkbox-inline {
    margin-left: 10px;
  }

  .course-search-wrap .total-marks {
    text-align: center !important;
  }

  .course-title-wrap {
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-detail-wrap {
    margin-top: 20px;
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-title-wrap .font-size-h3 {
    font-size: 1.2rem !important;
  }

  .course-title-wrap .scroll-wrap {
    height: 330px;
  }

  #edit-questions .RichEditor-root-createquestion,
  #create-question .RichEditor-root-createquestion {
    width: 100% !important;
  }

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .example {
    background: orange;
  }

  #kt_quick_user .symbol.symbol-100 .symbol-label {
    width: 50px;
    height: 50px;
  }

  #kt_quick_user .align-items-center {
    align-items: unset !important;
  }

  #kt_quick_user.p-10 {
    padding: 2rem !important;
  }

  #kt_datatable_2_filter,
  #kt_datatable_3_filter,
  #kt_datatable_4_filter,
  #kt_datatable_5_filter {
    background-color: #f8f8f8;
  }

  #kt_datatable_2_filter label,
  #kt_datatable_3_filter label,
  #kt_datatable_4_filter label,
  #kt_datatable_5_filter label {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
  }

  .RichEditor-root-createquestion {
    width: 500px;
  }

  .create-assessment-wizard .px-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .create-assessment-wizard .wizard-content .wizard-nav .wizard-steps .wizard-step .wizard-label .wizard-title {
    font-size: 1rem !important;
  }

  .course-search-wrap .my-questions,
  .course-search-wrap .category,
  .course-search-wrap .type,
  .course-search-wrap .total-marks,
  .course-search-wrap .difficulty {
    max-width: 50%;
    flex: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left !important;
  }

  .course-search-wrap .my-questions,
  .course-search-wrap .category {
    border-bottom: 1px dashed #EBEDF3;
  }

  .course-search-wrap .total-marks {
    text-align: center !important;
  }

  .course-title-wrap {
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-detail-wrap {
    margin-top: 20px;
    max-width: 100%;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .course-title-wrap .font-size-h3 {
    font-size: 1.2rem !important;
  }

  .course-title-wrap .scroll-wrap {
    height: 356px;
  }

  #edit-questions .RichEditor-root-createquestion,
  #create-question .RichEditor-root-createquestion {
    width: 550px;
  }

  .all-questions-wrap .rdw-editor-question {
    width: 66%;
  }

  .rdw-editor-question span {
    font-size: 12px;
  }

  .all-questions-wrap .rdw-editor-question {
    width: 88%;
    margin-bottom: 20px;
  }

  .all-questions-title {
    flex-flow: row wrap;
  }

  .RichEditor-root .public-DraftStyleDefault-block {
    margin: 0.7em 0;
  }

  .RichEditor-root .public-DraftStyleDefault-block {
    margin: 0.6em 0;
  }

  /* .RichEditor-root-descriptive-answer {
  padding: 5px !important;
} */

  .hide-toolbar {
    display: none !important;
  }

  .hide-toolbar-show-border {
    display: none !important;
    border: 1px solid black;
  }

  .hide-toolbar .DraftEditor-root {
    border: 1px solid black !important;
  }

  .vertical-toolbar .DraftEditor-root {
    display: flex !important;
    flex-direction: column !important;
  }

  .vertical-toolbar .DraftEditor-root {
    display: block !important;
  }

  .available-assessments-nav {
    position: relative;
    top: 0;
    right: 0;
  }

  .available-assessments-nav li {
    margin: 0.25rem auto 0.25rem auto !important;
    width: 47%;
  }

  .available-assessments-nav li a {
    text-align: center;
    padding: 5px;
    background-color: #f8f8f8;
  }

  .table tbody tr td .label {
    height: auto !important;
    padding: 0.15rem 0.75rem !important;
  }

  #info-box #clock {
    font-size: 12px;
    width: auto;
    margin-right: 22px;
  }

}








/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .example {
    background: pink;
  }
}