.onlinetest-wrapper {
max-width: 900px;
margin: 20px auto;
background: #ffffff;
padding: 30px;
border-radius: 14px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
font-family: "Segoe UI", Arial, sans-serif;
} .onlinetest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.onlinetest-grid {
grid-template-columns: 1fr;
}
} .onlinetest-wrapper label {
font-weight: 600;
font-size: 13px;
margin-bottom: 6px;
display: block;
}
.onlinetest-wrapper input,
.onlinetest-wrapper select,
.onlinetest-wrapper textarea {
width: 100%;
height: 36px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 13px;
box-sizing: border-box;
}
.onlinetest-wrapper textarea {
height: 80px;
resize: vertical;
} .onlinetest-radio-group {
display: flex;
gap: 20px;
margin-top: 6px;
}
.onlinetest-radio-group label {
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
} .onlinetest-total {
background: #0047A0;
color: #fff;
font-weight: 700;
border: none;
letter-spacing: 0.5px;
} .onlinetest-submit {
margin-top: 30px;
}
.onlinetest-submit button {
width: 100%;
height: 42px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #0047A0, #0066cc);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.onlinetest-submit button:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 71, 160, 0.35);
}
.onlinetest-submit button:disabled {
opacity: 0.6;
cursor: not-allowed;
} .onlinetest-info {
background: #f5f8ff;
border-left: 4px solid #0047A0;
padding: 12px 16px;
font-size: 13px;
margin-bottom: 20px;
border-radius: 6px;
} .admin-tabs {
display: flex;
background: transparent !important;
border-bottom: 2px solid #f0f0f1 !important;
margin-bottom: 30px !important;
flex-wrap: wrap;
gap: 5px;
}
.admin-tab {
padding: 12px 20px !important;
cursor: pointer;
font-weight: 600;
color: #a9aabc !important; border: none !important;
background: transparent !important;
transition: all 0.3s ease;
font-size: 14px;
border-radius: 6px 6px 0 0;
flex-grow: 0 !important;
}
.admin-tab:hover {
color: #0047A0 !important;
background: #f0f6fc !important;
}
.admin-tab.active {
background: rgba(0, 71, 160, 0.05) !important;
color: #0047A0 !important; border-bottom: 3px solid #0047A0 !important;
} .styled-table th {
background-color: #0047A0 !important; color: #fff !important;
text-transform: uppercase;
font-weight: 700;
border-bottom: 2px solid #00337a;
padding: 16px;
} .btn-add {
background: #00627a !important; color: #fff !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-weight: 600;
border: none;
font-size: 13px !important;
height: 36px !important;
line-height: 20px !important;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 !important;
}
.btn-add:hover {
background: #004e61 !important;
}
.btn-delete-toolbar {
background: #dc3545 !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-weight: 600;
border: none;
font-size: 13px !important;
height: 36px !important;
line-height: 20px !important;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 !important;
}
.btn-delete-toolbar:hover {
background: #c82333 !important;
}
.btn-refresh {
background: #d1a617 !important; color: #fff !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-weight: 600;
border: none;
cursor: pointer;
font-size: 13px !important;
height: 36px !important;
line-height: 20px !important;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 !important;
}
.btn-refresh:hover {
background: #b58f14 !important;
}
.btn-check {
background: #9c27b0 !important; color: #fff !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-weight: 600;
border: none;
cursor: pointer;
font-size: 13px !important;
height: 36px !important;
line-height: 20px !important;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 !important;
}
.btn-check:hover {
background: #7b1fa2 !important;
}
.btn-download {
background: #006032 !important; color: #fff !important;
padding: 8px 16px !important;
border-radius: 6px !important;
font-weight: 600;
border: none;
cursor: pointer;
font-size: 13px !important;
height: 36px !important;
line-height: 20px !important;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 !important;
}
.btn-download:hover {
background: #004d28 !important;
}
.btn-view {
background: #76b0ad !important; color: #fff !important;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.btn-view:hover {
background: #5f9e9b !important;
opacity: 1;
}
.btn-edit {
background: #931e00 !important; color: #fff !important;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.btn-edit:hover {
background: #7a1900 !important;
opacity: 1;
}
.onlinetest-search-input {
padding: 0 12px !important;
border: 1px solid #ccc !important;
border-radius: 6px !important;
height: 36px !important;
font-size: 13px !important;
width: 200px !important;
box-sizing: border-box !important;
margin: 0 !important;
vertical-align: middle !important;
}