/* #global css */
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root {
--primary: #e85222;
--primary-light: #f97316;
--accent: #f97316;
--background: #faf9f7;
--foreground: #1e293b;
--muted: #64748b;
--card: #ffffff;
--border: #e2e8f0;
--success: #22c55e;
--destructive: #dc2626;
  --live: #ef4444;
}

body{
    font-family: "Montserrat", sans-serif!important;
    font-size:14px;
    line-height:1.6;
    color: #757575;
}

.table-responsive{
    clear: both;
}

.btn{
        font-size: 14px;
    line-height: 18px;
}

.w-50{
    width: 50%;
}

.mt-10{
    margin-top: 10px;
}

.mt-15{
    margin-top: 15px;
}


section{
    position:relative;
    padding:35px 0;
    clear: both;
}




.grey-bg{
background-color: #f7f7f7;
}

.btn-orange{
    background-color: #e85222;
    color: #fff!important;
}

.btn-orange:hover,
.btn-orange:active{
 background-color: #d14619!important;
}



.btn-secondary{
    background-color: #4A6FA5;;
}

.btn-secondary:hover{
    background-color: #324a6e;;
}



.btn-edit{
    background-color: transparent;
    color: #00a4f2 !important;
    font-size: 20px;
    padding: 0;
    border: none;
}

.btn-qr{
background-color: #4f7e52;
    color: #ffff;
}


.btn-qr:hover{
    background-color: #275f2a;
      color: #ffff;
}
/* Styles for the disabled state */
button.btn:disabled {
    background-color: #cccccc;
    color: #666666 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

button.btn-edit{
    border:none;
}

button.btn-edit:disabled{
color: #00a4f2 !important;
box-shadow: inherit;
background-color: transparent;
}


.pointer-disable{
    pointer-events: none;
}

p{
    line-height: 1.7em;
    margin-bottom: 15px;
}
p:last-child{
    margin-bottom:0;
}

.form-control{
/* height: 44px;*/
}

textarea.form-control{
    height: auto;
}

.form-title{
    color: #000;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
}


h2.block-title{
        margin: 0 0 15px;
    color: #333;
    font-weight: 600;
    font-size: 24px;
}

.form-group{
    margin-bottom: 15px;
}


        .card {
            background: white;
            border-radius: 15px;
            padding: 16px;
            box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 25px;
        }

        /* FORM DESIGN */
        label {
            font-weight: 600;
            display: block;
            margin-bottom: 6px;
        }

        input, textarea, select {
            width: 100%;
            padding: 10px;
            border-radius: 10px;
            border: 1px solid #ddd;
            outline: none;
            font-size: 14px;
        }

        textarea {
            height: 70px;
            resize: none;
        }

        .btn-submit {
            background: #28a745;
            color: white;
            padding: 10px 18px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 15px;
        }

        .btn-submit:hover {
            background: #218838;
        }

        .success-msg {
            background: #d4edda;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 15px;
            color: #155724;
        }

        /* TABLE DESIGN */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-new th {
            text-align: left;
         padding: 12px!important;
            background: #f1f3f6;
            color: #444;
        }

        .table-new td {
            padding: 12px!important;
        }

        tr:hover {
            background: #f9fbff;
        }

        .badge {
padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
        }

        .badge-draft {
    background: #fff3cd;
    color: #856404;
        }


.badge-draft.success {
background: #e6f4ea;
color: #1e7e34;
}

.badge-draft.danger {
background: #ffe3e3;
color: #d63031;
}     


        .btn-view {
            padding: 8px 15px;
            border-radius: 10px;
            background: #007bff;
            color: white;
            text-decoration: none;
        }

        .btn-view:hover {
            background: #0056b3;
        }

.contentregion {
    padding-bottom: 50px!important;
}






/* #header  css start */

#header-region {
    border: 0 none;
    font-size: 15px;
    margin-bottom: 0;
    padding: 10px 0;
    width: 100%;
    z-index: 111;
    color: #4f4f4f;
    background: #fff;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, .2);
}


.navbar-brand > img {
    max-height: 38px;
}

.navbar-brand{
        display: block;
    height: auto;
    padding: 0;
}

.hostband{
background-color: #fefeff;
    color: #000;
    padding: 10px 0;
    font-size: 16px;
}
/* #header  css close */


/* login-container  css start */

body.quizlogin-page {
background: linear-gradient(135deg, var(--background) 0%, #f0f9ff 50%, #f0fdf4 100%);
min-height: 100vh;
margin: 0;
color: var(--foreground);
}


.login-container .navbar-header{
    width:100%;
    text-align: center;
    margin-bottom: 20px;
}

.login-container .navbar-header .navbar-brand{
    float: none;
}

.login-container .navbar-header .navbar-brand img{
    display: inline-block;
    max-height: 50px;
}



 .login-container {
    min-height: calc(100vh - 102px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
        }
        
        .login-card {
            background: var(--card);
            border-radius: 24px;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.08);
            /* padding: 48px; */
            width: 100%;
            max-width: 420px;
            border: 1px solid var(--border);
        }

  .login-card-inner{
    padding:48px;
  }

        
        .logo-container {
    text-align: center;
    margin-bottom: 20px;
    float: left;
    width: 100%;
    border-radius: 24px 24px 0 0;
    background-color: #efefef;
    padding: 10px;
        }

           .logo-container h1{
            margin-bottom: 0;
           }
        
        .logo-icon {
            width: 64px;
            height: 64px;
            background: var(--primary);
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.3);
        }
        
        .logo-icon i {
            font-size: 28px;
            color: #fff;
        }
        
 .logo-text {
font-size: 28px;
    font-weight: 700;
    color: var(--foreground);
    float: left;
    width: 100%;
        }
        
        .logo-text span {
            color: var(--primary);
        }
        
        .welcome-text {
            text-align: center;
            margin-bottom: 32px;
        }
        
        .welcome-text h2 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--foreground);
        }
        
        .welcome-text p {
            color: var(--muted);
            font-size: 15px;
            margin: 0;
        }
        
        
        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--foreground);
            margin-bottom: 8px;
        }
        
        .form-control {
            width: 100%;
            height: 40px;
            padding: 6px 16px;
            font-size: 15px;
            border: 2px solid var(--border);
            border-radius: 12px;
            background: var(--card);
            transition: all 0.2s ease;
            box-shadow: none;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
            outline: none;
        }
        
        .form-control::placeholder {
            color: #94a3b8;
        }
        
        .input-icon-wrapper {
            position: relative;
        }
        
        .input-icon-wrapper i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted);
        }
        
        .input-icon-wrapper .form-control {
            padding-left: 44px;
        }
        
        .btn-primary-custom {
            width: 100%;
            height: 52px;
            background: var(--primary);
            border: none;
            border-radius: 12px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .btn-primary-custom:hover {
            background: var(--primary-light);
            transform: translateY(-1px);
            box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.3);
        }
        
        .btn-primary-custom:active {
            transform: translateY(0);
        }
        
        .help-text {
            text-align: center;
            margin-top: 24px;
            font-size: 14px;
            color: var(--muted);
        }
        
        .help-text a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
        
        .help-text a:hover {
            text-decoration: underline;
        }
        
        .alert-custom {
            padding: 12px 16px;
            border-radius: 12px;
            margin-bottom: 20px;
            font-size: 14px;
            display: none;
        }
        
        .alert-error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
        }
        
        .decorative-shapes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: -1;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.5;
        }
        
        .shape-1 {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(13, 148, 136, 0.05));
            top: -100px;
            right: -100px;
        }
        
        .shape-2 {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(249, 115, 22, 0.05));
            bottom: -50px;
            left: -50px;
        }
        

/* login-container  css close */



/* addquiz  css start */

body.addquestion{
    background-color: #faf9f7;

}

body.addquestion #header-region .container{
        max-width: 100%;
       
}


       /* Layout */
        .create-layout {
            display: flex;
            /* min-height: calc(100vh - 64px); */

                min-height: calc(100vh - 102px);
        }
        
        /* Sidebar */
        .sidebar {
            width: 280px;
            background: var(--card);
            border-right: 1px solid var(--border);
            padding: 20px;
            flex-shrink: 0;
        }
        
        .sidebar-section {
            margin-bottom: 24px;
        }
        
        .sidebar-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--muted);
            /* text-transform: uppercase; */
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        
        .question-type-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 12px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            color: var(--foreground);
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
            margin-bottom: 8px;
        }

.question-type-btn.active{
border-color: #ebb8ad;
    background-color: #fff6f4;
}

        
        .question-type-btn:hover,
          .question-type-btn:focus {
            /* background: var(--background);
            border-color: var(--primary); */
            border-color: #ebb8ad;
    background-color: #fff6f4;
        }

   .question-type-btn:focus{
    outline: none;
   }     
        
        .question-type-btn i {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        .question-type-btn .icon-mcq {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }
        
        .question-type-btn .icon-tf {
            background: rgba(34, 197, 94, 0.1);
            color: var(--success);
        }
        
        .question-type-btn .icon-poll {
            background: rgba(168, 85, 247, 0.1);
            color: #a855f7;
        }
        
        .question-type-btn .icon-short {
            background: rgba(249, 115, 22, 0.1);
            color: var(--accent);
        }
        
        .btn-add-question {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 12px;
            background: var(--primary);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-add-question:hover {
            background: var(--primary-light);
        }

		.btn-save {
            /* display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 12px;
            background: var(--primary);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s; */
        }
        
        .btn-save:hover {
            /* background: var(--primary-light); */
        }
        
        /* Questions List */
        .questions-list {
            margin-top: 16px;
        }
        
        .question-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--background);
            border-radius: 10px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .question-item:hover,
        .question-item.active {
            background: rgba(13, 148, 136, 0.1);
        }
        
        .question-item.active {
            border: 1px solid var(--primary);
        }
        
        .question-number {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: var(--card);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
        }
        
        .question-item.active .question-number {
            background: var(--primary);
            color: #fff;
        }
        
        .question-preview {
            flex: 1;
            font-size: 13px;
            color: var(--foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Main Editor */
        .main-editor {
/*            flex: 1;
            padding: 32px;
            max-width: 800px;
            margin: 0 auto;*/

    flex: 1;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;


        }
        
        .editor-card {
            background: var(--card);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid var(--border);
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

    .editor-card textarea{
            border-top: none;
        border-left: none;
        border-right: none;
        border-radius: 0;
        border-bottom: 1px solid #ddd;
        font-weight: normal;
    }



        
        .question-input {
            width: 100%;
            border: none;
            font-size: 20px;
            font-weight: 600;
/*            font-family: 'Plus Jakarta Sans', sans-serif;*/
            color: var(--foreground);
            padding: 0;
            margin-bottom: 24px;
            resize: none;
        }
        
        .question-input:focus {
            outline: none;
        }
        
        .question-input::placeholder {
            color: var(--muted);
        }
        
        /* Options */
        .options-container {
        /* margin-bottom: 24px; */
    text-align: right;
        }

 .options-container #optionsBox{
       display: flex;
    gap: 10px;
    flex-wrap: wrap;
 }
        
        .option-item {
display: flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--background);
    border-radius: 12px;
    transition: all 0.2s;
    width: 49%;
    margin-bottom: 10px;
        }
        
        .option-item:hover {
            background: #f1f5f9;
        }
        
      .option-letter {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--card) !important;
            border: 2px solid var(--border);
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 14px;
            font-weight: 600 !important;
            color: var(--muted) !important;
            cursor: pointer;
            transition: all 0.2s;
        } 

        
        .option-letter:hover,
        .option-letter.correct {
            background: var(--success);
            border-color: var(--success);
            color: #fff;
        }
        
        .option-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 15px;
            color: var(--foreground);
        }
        
        .option-input:focus {
            outline: none;
        }
        
        .option-input::placeholder {
            color: var(--muted);
        }
        
        .btn-remove-option {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            border-radius: 8px;
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            opacity: 0;
        }
        
        .option-item:hover .btn-remove-option {
            opacity: 1;
        }
        
        .btn-remove-option:hover {
            background: rgba(239, 68, 68, 0.1);
            color: var(--destructive);
        }
        
        .btn-add-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: transparent;
            border: 2px dashed var(--border);
            border-radius: 12px;
            color: var(--muted);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            width: 100%;
        }
        
        .btn-add-option:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* Settings */
        .settings-section {
            /* border-top: 1px solid var(--border); */
/*            padding-top: 24px;*/
        }
        
        .settings-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--foreground);
            margin-bottom: 5px;
        }
        
        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 0;
        }
        
        .setting-label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 150px;
        }



        
        .setting-label i {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--background);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--muted);
        }

.setting-item input{
    width: auto;
}



        
        .setting-label span {
            font-size: 14px;
            color: var(--foreground);
        }
        
        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            width: 44px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--border);
            border-radius: 24px;
            transition: 0.3s;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }
        
        .toggle-switch input:checked + .toggle-slider {
            background: var(--primary);
        }
        
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }
        


.question-scroll {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.question-scroll a{
color: var(--foreground);
}


.q-no {
/* background: #ffe2dc; */
    color: #fa8d23;
    /* font-size: 12px;
    font-weight: 600;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 5px; */
}

.q-text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}




/* addquiz  css close */


/* quiz-session-analytics  css start */


.quizsession-analytics .wrap{

}
.quizsession-analytics .top{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:12px}
.quizsession-analytics .h h1{margin:0;font-size:20px}
.quizsession-analytics .h .sub{color:var(--muted);font-size:12px;margin-top:4px}
.quizsession-analytics .controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:rgba(255,255,255,.03);
    /* border:1px solid var(--line);
    border-radius:14px;
    padding:10px */
}
.quizsession-analytics input,
.quizsession-analytics select{
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 9px 10px;
    border-radius: 10px;
    min-width: 230px;
    outline: none;
    width: auto;
    }
.quizsession-analytics input::placeholder{color:#93a0c2}
.quizsession-analytics button{
    /* border: none;
    border-radius: 10px;
    padding: 9px 12px;
    background: #e85222;
    color: #fff;
    font-weight: 600;
    cursor: pointer; */
    }
.quizsession-analytics button.secondary{
      /* background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);font-weight:700; */
    }
.quizsession-analytics .chips{display:flex;gap:10px;flex-wrap:wrap;}
.quizsession-analytics .chip{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.03);min-width:170px}
.quizsession-analytics .chip .k{font-size:12px;color:var(--muted)} .chip .v{font-size:16px;font-weight:500;margin-top:2px}
.quizsession-analytics .mono{}
.quizsession-analytics .muted{color:var(--muted)}
.quizsession-analytics .err{
      display:none;margin-top:10px;padding:12px 14px;border-radius:14px;
      border:1px solid rgba(255,91,115,.25);background:rgba(255,91,115,.08);
      color:#ffd2d9;white-space:pre-wrap;
    }

/* .quizsession-analytics .card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);margin:10px 0;overflow:hidden} */
.quizsession-analytics .head{padding:12px 14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.quizsession-analytics .name{font-weight:500;font-size:15px}
.quizsession-analytics .email{font-size:12px;color:var(--muted);word-break:break-all}

.quizsession-analytics .email i{
    font-size: 11px;
    margin-right: 3px;
    color: #e85222;
}
.quizsession-analytics .stats{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.quizsession-analytics .stat{border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .03);
    min-width: 140px;
    min-height: 78px;}
.quizsession-analytics .stat .k{font-size:11px;color:var(--muted)} .stat .v{font-size:14px;font-weight:500;margin-top:2px}
.quizsession-analytics .bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px;border: 1px #ddd solid;position: relative;}
.quizsession-analytics .fill{height:100%;background:linear-gradient(90deg,var(--accent),#e85222);width:0%}

.quizsession-analytics  details{border-top:1px solid var(--line)}
.quizsession-analytics summary{cursor:pointer;list-style:none;padding:10px 14px;color:var(--muted);
    float: left;
    width: 100%;
    /* display:flex;justify-content:space-between;gap:10px */
}
.quizsession-analytics summary::-webkit-details-marker{display:none}
.quizsession-analytics table{width:100%;border-collapse:collapse}
.quizsession-analytics th,
.quizsession-analytics td{padding:10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.quizsession-analytics th{color:#49494a;background: rgb(185 33 33 / 3%);text-align:left;font-size:12px}
.quizsession-analytics tr:last-child td{border-bottom:none}

.quizsession-analytics .badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:500}
.quizsession-analytics .good{color:var(--good);border-color:rgba(47,227,154,.3);background:rgba(47,227,154,.08)}
.quizsession-analytics .bad{color:var(--bad);border-color:rgba(255,91,115,.3);background:rgba(255,91,115,.08)}
.quizsession-analytics .na{color:var(--warn);border-color:rgba(255,204,102,.3);background:rgba(255,204,102,.08)}

.clickexapndbtn{
    color: #e85222!important;
}

.q-details{
    /* background-color: #ffe7df;
    padding: 6px 12px;
    border-radius: 20px;
    color: #000;
    float: left; */

        background: #fff1e6;
    color: #ff6a00;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid #ffd6b3;
}

.q-details .muted{
        color: #ff6a00;
}


.question-dt{
        font-weight: 600;
    margin-bottom: 3px;
}

.question-dt + .muted{
    font-size: 11px;
}

 #qrModal{
        /* display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.55);
        z-index:9999; */
      }
      /* #qrModal .modalCard{
        width:min(920px,96vw);
        height:min(640px,90vh);
        background:#fff;
        border-radius:14px;
        margin:5vh auto;
        overflow:hidden;
        position:relative;
        box-shadow:0 18px 40px rgba(0,0,0,.35);
      }
      #qrModal .modalHead{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:12px 14px;
        border-bottom:1px solid #eee;
        background:#fff;
      }
      #qrModal .modalTitle{ font-weight:800; }
      #qrModal .closeBtn{
        border:none;
        background:#111;
        color:#fff;
        padding:8px 12px;
        border-radius:10px;
        cursor:pointer;
      } */




#qrModal .modal-content{
     height:min(500px,90vh);
}

#qrModal .modal-header{
        background-color: #eee;
    color: #000;
    font-weight: 600;
}

#qrModal .modal-header h1{
    font-weight: 600;
}

      
      #qrFrame{
        width:100%;
        /* height:calc(100% - 52px); */
        height: 100%;
        border:0;
        background:#fff;
      }


      .warn-msg{
        padding:10px 12px;
        background:#fff7ed;
        border:1px solid #fed7aa;
        color:#7c2d12;
        border-radius:10px;
        margin:10px 0;
      }


/* quiz-session-analytics  css close */


/* participant login  css start */
.gap-2 {
    gap: .5rem !important;
}



    .participant-login .auth-card{
      width:100%;
      max-width:980px;
      border:0;
      border-radius:18px;
      overflow:hidden;
      box-shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
      background:#fff;
      padding: 0;
    }

 .participant-login .auth-left{
background: linear-gradient(135deg, #f2f2f2 0%, #f9f9f9 55%, #f9f9f9 100%);
    color: #000;
    padding: 42px 36px;
    height: 100%;
    }

 .participant-login .auth-left h1{
      font-size:30px;
      font-weight:800;
      margin:0 0 10px;
      letter-spacing:0.2px;
    }

 .participant-login .auth-left p{
      opacity:0.9;
      margin:0 0 22px;
      line-height:1.5;
    }

 .participant-login .feature-pill{
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    margin: 6px 8px 0 0;
    font-size: 14px;
    border: 1px solid rgb(216 207 207 / 20%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

 .participant-login .auth-right{
      padding:36px;
    }

 .participant-login .nav-pills .nav-link{
      border-radius:12px;
      font-weight:700;
      border:none;
      color: #000;
    }

 .participant-login .nav-pills .nav-link.active{
         background: #e85222;
         color: #fff;
    }

 .participant-login .form-label{
      font-weight:700;
      color:#111827;
    }

 .participant-login  .form-control{
      border-radius:12px;
      padding:12px 14px;
    }

 .participant-login .btn-main{
      border-radius:12px;
      padding:12px 14px;
      font-weight:800;
    }

    .participant-login .hint{
      font-size:13px;
      color:#6b7280;
      margin-top:6px;
    }

  .participant-login .msg{
      display:none;
      border-radius:12px;
      padding:12px 14px;
      font-weight:600;
     margin-bottom: 10px;
    }

  .participant-login .msg.success{
      background:#ecfdf5;
      border:1px solid #a7f3d0;
      color:#065f46;
    }

   .participant-login .msg.error{
      background:#fef2f2;
      border:1px solid #fecaca;
      color:#7f1d1d;
    }

   .participant-login .spinner{
      width:18px;
      height:18px;
      border:2px solid rgba(255,255,255,0.5);
      border-top-color:#fff;
      border-radius:50%;
      display:inline-block;
      animation: spin 0.8s linear infinite;
      vertical-align:middle;
      margin-right:8px;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .participant-login .form-check{
            line-height: 20px;
    }

 .participant-login .form-check .form-check-input{
    margin-right: 10px;
    margin-top: 0;
 }



/* participant login  css close */


/* Quiz  css start */
/* 
.shell{ max-width: 1180px; margin: 0 auto; } */

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 14px;
      flex-wrap:wrap;
    }

    .brand{ display:flex; align-items:center; gap:12px; min-width: 240px; }
    .brandLogo{
      /* width:46px;height:46px;border-radius:14px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 14px 38px rgba(249,115,22,0.22);
      display:flex;align-items:center;justify-content:center;
      font-weight:900;
      color:#111827; */
    }
    .brandTitle{ line-height:1.15; }
    .brandTitle .h{ font-size:18px; font-weight:900; letter-spacing:0.2px; }
    .brandTitle .s{ font-size:13px; color:var(--muted); margin-top:2px; }

    .statusPill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,0.85);
      box-shadow: var(--shadow2);
      font-size:13px;
      color:var(--muted);
      white-space:nowrap;
    }

    .dot{
      width:10px;height:10px;border-radius:999px;background:var(--warn);
      box-shadow: 0 0 0 4px rgba(245,158,11,0.18);
    }
    .dot.ok{ background: var(--good); box-shadow: 0 0 0 4px rgba(22,163,74,0.14); }
    .dot.bad{ background: var(--bad);  box-shadow: 0 0 0 4px rgba(220,38,38,0.14); }

    .helperRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom: 14px;
    }
    .hintBox{
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(17,24,39,0.10);
      background: rgba(255,255,255,0.85);
      color: var(--muted);
      font-size:13px;
      line-height:1.4;
      box-shadow: 0 10px 26px rgba(17,24,39,0.08);
    }

    .row{
      /* display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom: 0; */
    }

    button{
      /* padding:12px 14px;
      border-radius: 14px;
      border:1px solid rgba(249,115,22,0.35);
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color:#111827;
      font-weight:900;
      cursor:pointer;
      box-shadow: 0 14px 40px rgba(249,115,22,0.18);
      transition: transform .08s ease, filter .12s ease;
      user-select:none; */
    }
    .quiz-page button:hover{ filter: brightness(1.05); }
    .quiz-page button:active{ transform: translateY(1px); }
    #submitBtn:disabled{ opacity:0.55; cursor:not-allowed; filter: grayscale(0.2); box-shadow:none; }

    .card{
      /* border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.98));
      border-radius: var(--radius);
      padding: 14px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative; */
    }
    .card::before{
      /* content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background: radial-gradient(800px 220px at 0% 0%, rgba(249,115,22,0.10), transparent 55%),
                  radial-gradient(800px 220px at 100% 0%, rgba(251,146,60,0.08), transparent 55%); */
    }
    .card > *{ 
        /* position:relative; */
     }


    .cardHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 10px;
      flex-wrap:wrap;
    }
    .cardHeader h3{
      margin:0;
      font-size:16px;
      font-weight:700;
      letter-spacing:0.2px;
    }
    .meta{ color:var(--muted); font-size:13px; margin-top:6px; }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(249,115,22,0.08);
      border:1px solid rgba(249,115,22,0.18);
      margin-right:6px;
      font-size:12px;
      color:#9a3412;
      font-weight:800;
      white-space:nowrap;
    }

    /* ✅ One screen: Question + BOTH leaderboards */
    .liveGrid{
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap:14px;
      align-items:start;
    }

    #questionText{
      margin: 8px 0 10px;
      font-size: 20px;
      line-height:1.35;
/*      font-weight: 950;*/
       letter-spacing: 0.2px;
          color: var(--foreground);
    }

    #options{
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(17,24,39,0.08);

    }



#options.quiz-option{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

}

    .option{
      margin: 10px 0;
      padding: 10px 10px;
      border-radius: 14px;
      border:1px solid rgba(17,24,39,0.10);
      background: rgba(249,115,22,0.05);
      transition: border-color .12s ease, background .12s ease, transform .08s ease;
    }
    .option:hover{
      border-color: rgba(249,115,22,0.40);
      background: rgba(249,115,22,0.10);
      transform: translateY(-1px);
    }


#options.quiz-option .option{
    width: 49%;

}



    .option label{
      display:flex;
      align-items:flex-start;
      gap:10px;
      cursor:pointer;
      margin:0;
      color: var(--text);
      font-weight:700;
    }
    .option input[type="radio"]{
      width:18px; height:18px; margin-top:2px;
      /* accent-color: var(--accent); */
    }

    .sideStack{ display:flex; flex-direction:column; gap:12px; }

    .miniCard{
      border:1px solid rgba(17,24,39,0.10);
      background: rgba(255,255,255,0.78);
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 10px 26px rgba(17,24,39,0.06);
    }
    .miniHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
      font-weight:600;
      color:#111827;
    }

    /* ===========================
       ✅ INFOGRAPHIC BAR (like image)
       =========================== */
    .infRow{
      display:grid;
      grid-template-columns: 56px 1fr;
      gap:12px;
      align-items:center;
      margin: 10px 0;
    }
    .rankNum{
       font-weight: 600;
    font-size: 34px;
    text-align: center;
    color: rgba(17, 24, 39, 0.20);
    }

    .track{
    position: relative;
    height: 54px;
    border-radius: 10px;
    background: rgb(243 236 231);
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }
    .track.sm{ height: 42px; }

    .fill{
      position:absolute;
      left:0; top:0;
      height:100%;
      width:0%;
      /* border-radius: 10px; */
     background: var(--grad); 
      transition: width 520ms ease;
      
    }
    .fill::after{
      /* content:"";
      position:absolute;
      right: -14px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 12px 26px rgba(17,24,39,0.20);
      border: 7px solid rgba(255,255,255,0.92); */
    }

    /* text inside track */
    .barText{
      position:absolute;
      left: 16px;
      right: 86px; /* space for knob + percent pill */
      top: 50%;
      transform: translateY(-50%);
      display:flex;
      flex-direction:column;
      gap:2px;
      pointer-events:none;
    }
    .barTitle{
    font-weight: 600;
    color: #000;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    }
    .barSub{
    font-size: 12px;
    color: #000;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    .pctPill{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 6px;
    /* background: var(--grad); */
    font-weight: bold;
    color: #000;
    min-width: 55px;
    text-align: center;
    pointer-events: none;
    border-radius: 5px 5px 0 0;
    min-height: 55px;
    line-height: 50px;
        border-left: 1px #e1dddd solid;
    }

    /* highlight "You" */
    .youBox{
      border: 1px solid rgba(249,115,22,0.30);
      background: rgba(249,115,22,0.07);
      border-radius: 14px;
      padding: 10px;
    }
    .youTag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgb(74 255 15 / 14%);
    border: 1px solid rgb(229 246 206);
    color: #000000;
    font-size: 12px;
    margin-bottom: 10px;
    }

    .qBlock{
      margin:10px 0 14px;
      padding:10px 10px 6px;
      border:1px solid rgba(17,24,39,0.08);
      border-radius: 14px;
      background: rgba(255,255,255,0.90);
    }
    .qTitle{ font-weight:950; margin:4px 0 6px; color:#111827; }

    pre{
      background:#111827;
      color:#e5e7eb;
      padding:12px;
      border-radius:14px;
      overflow:auto;
      border:1px solid rgba(17,24,39,0.18);
    }

/* Quiz  css close */



/* Host  Quiz Control css start */


.quiz-hostcontrol .shell{
  /* width:min(1200px, 98vw); */
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:18px;
}
@media (max-width: 980px){
.quiz-hostcontrol .shell{ grid-template-columns: 1fr; }
}

/* LEFT */
.quiz-hostcontrol .left{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px;
}

.quiz-hostcontrol .title{
  font-size:18px;
  font-weight:800;
  margin:0 0 8px 0;
}
.quiz-hostcontrol .sub{
  color:var(--muted);
  font-size:13px;
  margin:0 0 14px 0;
}

.quiz-hostcontrol .btn{
  padding:12px 14px;
  margin:10px 0;
  font-size:15px;
  font-weight:600;
  border-radius:10px;
  border:none;
  cursor:pointer;
  transition: transform .05s ease, opacity .15s ease;
}
.quiz-hostcontrol .btn:hover{ opacity:.95; }
.quiz-hostcontrol .btn:active{ transform: translateY(1px); }

.quiz-hostcontrol .start{ background:var(--green)!important; color:#07140d!important; }
.quiz-hostcontrol .prev { background:var(--amber)!important; color:#1a0f00!important; }
.quiz-hostcontrol .next { background:var(--blue)!important; color:#fff!important; }
.quiz-hostcontrol .end  { background:var(--red)!important; color:#fff!important; }

.quiz-hostcontrol .scoreLb{ background: var(--orange)!important;
color:#fff!important;width: 100%; }
.quiz-hostcontrol .pollLb { background: #111827!important; 
color:#fff!important;
width: 100%;
 }

.quiz-hostcontrol .divider{
  margin:14px 0;
  border:0;
      border-top: 1px solid #818dbf;
}
.quiz-hostcontrol #status{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
  min-height:18px;
      padding: 5px;
    text-align: center;
    border-radius: 10px;
    border: 1px #22c55e solid;
}

.quiz-hostcontrol #status:empty{
    display: none;
}

/* RIGHT */
.quiz-hostcontrol .right{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-content:start;
}
@media (max-width: 980px){
 .quiz-hostcontrol  .right{ grid-template-columns: 1fr; }
}

.quiz-hostcontrol .card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px;
}

.quiz-hostcontrol .cardHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}
.quiz-hostcontrol .h{
  font-weight:600;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
}
.quiz-hostcontrol .badge{
  font-size:12px;
  color:var(--muted);
  background:#f3f4f6;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}

.quiz-hostcontrol .box{
  max-height:420px;
  overflow:auto;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fbfbfd;
}

/* Question styles */
.quiz-hostcontrol .qTitle{
  font-weight:900;
  font-size:15px;
  margin-bottom:4px;
}
.quiz-hostcontrol .small{ color:var(--muted); font-size:12px; }

.quiz-hostcontrol .opt{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  display:flex;
  gap:10px;
}
.quiz-hostcontrol .opt.correct{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
}
.quiz-hostcontrol .opt b{ min-width:24px; }

/* Leaderboard like your orange image */
.quiz-hostcontrol .lbItem{
  /* display:grid;
  grid-template-columns: 44px 1fr;
  gap:12px;
  align-items:center;
  margin:12px 0; */

      display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    margin: 10px 0;
}
.quiz-hostcontrol .rankBig{
    font-weight: 600;
    font-size: 34px;
    text-align: center;
    color: rgba(17, 24, 39, 0.20);
}
.quiz-hostcontrol .barCard{
  /* background:#f3f4f6;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  position:relative;
  height:44px;
  display:flex;
  align-items:center;
  padding:0 12px; */
    position: relative;
    height: 54px;
    border-radius: 10px;
    background: rgb(243 236 231);
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);


}
.quiz-hostcontrol .barFill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background: linear-gradient(90deg, var(--orange), var(--orange2));
}
.quiz-hostcontrol .barContent{
  /* position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px; */


    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    width: calc(100% - 5px);

}
.quiz-hostcontrol .nameScore{
  /* display:flex;
  flex-direction:column;
  line-height:1.05; */

    font-weight: 600;
    color: #000;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;


}
.quiz-hostcontrol .nameScore .nm{ 
    
    /* font-weight:900; font-size:13px; */


}
.quiz-hostcontrol .nameScore .sc{
    
        font-size: 12px;
    color: #000;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* font-size:12px; color:#111827; opacity:.85; margin-top:2px; */



}
.quiz-hostcontrol .box .pill{
  /* background:#fff;
  border:1px solid rgba(0,0,0,.06);
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  min-width:58px;
  text-align:center; */

    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 6px;
    background: var(--grad);
    font-weight: bold;
       color: #000;
    min-width: 55px;
    text-align: center;
    pointer-events: none;
    border-radius: 5px 5px 0 0;
    min-height: 55px;
    line-height: 50px;
    margin-right: 0;
    display: block;
    border: none;
    font-size: 13px;
     border-left: 1px #e1dddd solid;
}

/* Poll rows */
.quiz-hostcontrol .pollRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
}
.quiz-hostcontrol .pollRow:last-child{ border-bottom:none; }
.quiz-hostcontrol .pollLeft{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.quiz-hostcontrol .pollLeft .optTxt{ font-weight:800; }
.quiz-hostcontrol .pollLeft .votes{ font-size:12px; color:var(--muted); }

.quiz-hostcontrol .cr-waiting{
    background: #eef2ff;
    color: #4338ca;
}

/* Host  Quiz Control css close */


/* question detail css start */

/* .questiondetails .wrap{ max-width:720px; margin:0 auto; padding:18px 14px 30px; } */
.questiondetails .card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }

.questiondetails .topbar{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.questiondetails .meta{ font-size:12px; color:var(--muted); }
.questiondetails code{ background:#f1f5f9; padding:2px 6px; border-radius:8px; }

.questiondetails .msg{ margin:12px 0; padding:10px 12px; border-radius:12px; font-size:14px; }
.questiondetails .ok{ background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46; }
.questiondetails .fail{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }

.questiondetails .qTitle{
            width:100%;
            border:0;
            border-bottom:1px solid var(--line);
            padding:10px 0;
            font-size:18px;
            font-weight:normal;
            outline:none;
            background:transparent;
        }

.questiondetails label{ font-size:13px; color:var(--muted); display:block; margin:14px 0 8px; }
.questiondetails select, 
.questiondetails input[type="text"], 
.questiondetails input[type="number"]{
            width:100%;
            padding:6px 12px;
            border:1px solid var(--line);
            border-radius:12px;
            font-size:14px;
            outline:none;
            background:#fff;
        }

.questiondetails .rowBetween{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; }
.questiondetails .optionsCard{
            background:#fafafa;
            border:1px solid rgba(17,24,39,.06);
            border-radius:14px;
            padding:10px;
            margin-top:10px;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
                margin-bottom: 15px;
        }
.questiondetails .optRow{
            display:flex;
            gap:10px;
            align-items:center;
            padding:10px;
            border-radius:12px;
            background:#fff;
            border:1px solid rgba(17,24,39,.06);
    width: 49%;
        }
.questiondetails .badge{
            width:28px; height:28px;
            border-radius:10px;
            display:flex; align-items:center; justify-content:center;
            font-weight:700;
            border:1.5px solid rgba(34,197,94,.35);
            color:#16a34a;
            background:#f0fdf4;
            flex:0 0 28px;
        }
.questiondetails .optInput{ flex:1; }
.questiondetails .optRight{ display:flex; align-items:center; gap:10px; }
.questiondetails .iconBtn{
border: 0;
    background: #ffdbdb;
    padding: 2px 10px;
    border-radius: 5px;
    cursor: pointer;
        }
.questiondetails .addBtn{
            /* border:0;
            background:#6b7280;
            color:#fff;
            padding:8px 10px;
            border-radius:10px;
            cursor:pointer;
            font-weight:700;
            font-size:12px; */
        }

.questiondetails .sectionTitle{ margin-top:18px; font-weight:800; font-size:14px; }
.questiondetails .settingRow{
            display:flex; justify-content:space-between; align-items:center;
            gap:10px; padding:10px 0;
            border-bottom:1px solid rgba(17,24,39,.06);
        }

.questiondetails .settingRow input{
    width: auto;
}

.questiondetails .settingLeft{ display:flex; align-items:center; gap:10px; font-size:13px; }
.questiondetails .pillIcon{
            width:28px; height:28px; border-radius:10px;
            background:#f3f4f6;
            display:flex; align-items:center; justify-content:center;
            font-weight:700; color:#6b7280;
        }
.questiondetails .smallInput{
            width:84px;
            padding:10px 10px;
            text-align:center;
            border-radius:12px;
        }

.questiondetails .switch{ position:relative; display:inline-block; width:46px; height:26px; }
.questiondetails .switch input{ opacity:0; width:0; height:0; }
.questiondetails .slider{
            position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
            background:#e5e7eb; transition:.2s; border-radius:999px;
        }
.questiondetails .slider:before{
            position:absolute; content:""; height:20px; width:20px; left:3px; top:3px;
            background:white; transition:.2s; border-radius:999px;
            box-shadow:0 2px 6px rgba(0,0,0,.15);
        }
.questiondetails .switch input:checked + .slider{ background:var(--accent); }
.questiondetails .switch input:checked + .slider:before{ transform: translateX(20px); }

.questiondetails .saveBar{ margin-top:16px; }
.questiondetails .saveBtn{
            /* width:100%;
            background:var(--accent);
            border:0;
            color:#fff;
            font-weight:800;
            padding:14px 14px;
            border-radius:12px;
            cursor:pointer;
            font-size:14px; */
        }

.questiondetails .dangerBtn{
            background:var(--danger);
            border:0;
            color:#fff;
            font-weight:800;
            padding:10px 12px;
            border-radius:12px;
            cursor:pointer;
            font-size:12px;
        }
.questiondetails .ghostBtn{
            /* background:#fff;
            border:1px solid var(--line);
            color:#111827;
            font-weight:700;
            padding:10px 12px;
            border-radius:12px;
            cursor:pointer;
            font-size:12px; */
        }


/* question detail css close */






/* footer  css start */

footer.footer-area.text-center.footer-ad {
    background-color: black;
    color: #fff;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* footer  css close */




        /* Responsive */
        @media (max-width: 992px) {
            .sidebar {
                width: 240px;
            }
        }

    @media (max-width: 980px){
      .liveGrid{ grid-template-columns: 1fr; }
      .statusPill{ width:100%; justify-content:center; }
    }



        
 @media (max-width: 768px) {


.option-item,
.questiondetails .optRow,
#options.quiz-option .option{
    width: 100%;
}

.auth-left .feature-pill{
    display: none;
}

.participant-login .auth-left,
.participant-login .auth-right{
    padding: 15px;
}

.participant-login .auth-right {
padding-bottom: 35px;
}

.participant-login .auth-left p{
    margin-bottom: 0;
}

    .stat.accuracy-sec{
        min-width: 140px !important;
    }

body.addquestion{
padding-bottom: 70px;
}

body.addquestion .create-layout .sidebar{
order: 2;
}


.questiondetails .settingRow{
    display: block;
}

.questiondetails .settingLeft {
    margin-bottom: 10px;
}


            .create-layout {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--border);
                padding: 16px;
            }
            
            .main-editor {
                padding: 20px;
                width: 100%;
            }
            
            .editor-card {
                padding: 20px;
            }
            
            .question-input {
                font-size: 18px;
            }

      .auth-left{ padding:28px 24px; }
      .auth-right{ padding:24px; }


        }


                @media (max-width: 480px) {
            .login-card {
                padding: 32px 24px;
                border-radius: 20px;
            }
            
            .logo-icon {
                width: 56px;
                height: 56px;
            }
            
            .logo-text {
                font-size: 24px;
            }
        }