/*
=========================================================
EXAM-GATE ENTERPRISE
---------------------------------------------------------
File:
assets/css/examgate.css

Version:
3.0.0

Description:
Global Enterprise Stylesheet

Compatible:
JSON Edition
MySQL Edition

Author:
Zamex Link Limited

=========================================================
*/

/*=======================================================
ROOT COLORS
=======================================================*/

:root{

--primary:#0B5D3B;

--secondary:#008751;

--accent:#A52A2A;

--background:#F4F6F9;

--white:#FFFFFF;

--black:#222222;

--grey:#666666;

--border:#DDDDDD;

--success:#0A8F4D;

--danger:#C62828;

--warning:#FF9800;

--info:#1565C0;

--shadow:0 10px 25px rgba(0,0,0,.12);

--radius:18px;

}

/*=======================================================
RESET
=======================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

/*=======================================================
BODY
=======================================================*/

body{
background:var(--background);
font-family:
Arial,
Helvetica,
sans-serif;
font-size:18px;
color:var(--black);
line-height:1.5;

}


span7 {
  font-size: 26px;
  font-weight: bold;
  color: #191970 ;
  line-height: 35px;
 
}


span8 {
  font-size: 22px;
  font-weight: bold;
  color: green;
  line-height: 35px;
 
}


.navi a {
     text-decoration: none;
     font-size: 20px;
     font-weight: bold;
     color: brown ;
}

.navi a:hover {
     color: green;
}

.navi a.active  {
	color: green;
	background: none;
}



.btn-orange{
  background: #008751 ;
  color:#ffffff;
  border:none;
  border-radius:10px;
  font-weight: bold;
  font-size: 25px;
  width: 200px;
  padding: ;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.btn-orange:hover,
.btn-orange:focus{
  background: var(--orange-dark);
  color:#fff;
}

.bg-soft{ background: var(--soft); }


/*=======================================================
LINKS
=======================================================*/

a{
text-decoration:none;
transition:.30s;

}

/*=======================================================
IMAGES
=======================================================*/

img{
max-width:100%;
height:auto;
display:block;
border-radius: 20px
}


.dashboard-tile img{
max-width:100%;
height:auto;
display:block;
border-radius: 20px
}

/*=======================================================
CONTAINER
=======================================================*/

.container{
width:100%;
max-width:900px;
margin:auto;
padding:10px;

}


span1{
margin:auto;
font-size: 23px;
font-weight:bold;
color:green;

}

span2{
margin:auto;
font-size: 24px;
font-weight:bold;
color:green;
display:block;

}

span3{
margin:auto;
font-size: ;
color: gold;

}

span3 a{
margin:auto;
font-size: ;
color: gold;

}

span3 a:hover{
margin:auto;
font-size: ;
color: #ffffff;

}

span4{
margin:auto;
font-size: ;
color: #ffffff;

}

span4 a{
margin:auto;
font-size: ;
color: #ffffff;

}

span4 a:hover{
margin:auto;
font-size: ;
color: #ffffff;

}


span5{
margin:auto;
font-size: 22px;

}

/*=======================================================
PAGE WRAPPER
=======================================================*/

.wrapper{
width:100%;
min-height:100vh;

}

/*=======================================================
HEADER
=======================================================*/

.header{
background:linear-gradient(135deg, var(--primary), var(--secondary)
);

padding:30px;
color:white;
text-align:center;
box-shadow:var(--shadow);
border-radius:0 0 30px 30px;

}

.header h1{
font-size:40px;
letter-spacing:1px;

}

.header p{
margin-top:8px;
font-size:20px;

}

/*=======================================================
FOOTER
=======================================================*/

.footer{
margin-top:40px;
padding:25px;
text-align:center;
color:#fff;
background:linear-gradient(135deg,var(--primary),var(--secondary));
border-radius:20px 20px 0 0;
box-shadow:var(--shadow);
}

.footer p{
margin:8px 0;
}

.footer a{
color: ;
font-weight: bold;
}

.footer a:hover{
color: #ffffff;
}

/*=======================================================
PAGE TITLE
=======================================================*/

.page-title{
font-size:30px;
font-weight:bold;
color:var(--primary);
margin-bottom:20px;

}

/*=======================================================
SUBTITLE
=======================================================*/

.subtitle{
color:var(--grey);
margin-top:8px;

}

/*=======================================================
CARD
=======================================================*/

.card{
background:white;
border-radius:var(--radius);
padding:25px;
box-shadow:var(--shadow);
border-left: 8px solid
var(--accent);
margin-bottom:25px;
transition:.30s;
width:100%;

}

.card:hover{
transform:
translateY(-3px);

}

/*=======================================================
CARD TITLE
=======================================================*/

.card-title{
font-size:22px;
font-weight:bold;
color:var(--primary);
margin-bottom:15px;
width:100%;
}

/*=======================================================
GRID
=======================================================*/

.grid{
display:grid;
gap:20px;
width:100%;

}

.grid-2{
grid-template-columns:
repeat(
auto-fit,
minmax(350px,1fr)
width:100%;

);

}

.grid-3{
grid-template-columns:
repeat(auto-fit,
minmax(280px,1fr)
width:100%;

);

}

.grid-4{
grid-template-columns:
repeat(
auto-fit,
minmax(220px,1fr)
width:100%;

);

}


/*=======================================================
ENTERPRISE BUTTONS
=======================================================*/

.btn{
display:inline-block;
padding:14px 28px;
border:none;
border-radius:12px;
font-size:16px;
font-weight:bold;
cursor:pointer;
transition:.30s;
text-align:center;
text-decoration:none;
box-shadow:var(--shadow);

}

.btn:hover{
transform:translateY(-3px);

}

.btn-primary{
background:var(--primary);
color:white;

}

.btn-primary:hover{
background:#09482f;

}

.btn-success{
background:var(--success);
color:white;

}

.btn-success:hover{

background:#08753f;

}

.btn-danger{

background:var(--danger);

color:white;

}

.btn-danger:hover{

background:#b71c1c;

}

.btn-warning{

background:var(--warning);

color:white;

}

.btn-warning:hover{

background:#ef6c00;

}

.btn-info{

background:var(--info);

color:white;

}

.btn-info:hover{

background:#0d47a1;

}

.btn-secondary{

background:#555;

color:white;

}

.btn-secondary:hover{

background:#333;

}

/*=======================================================
FORM ELEMENTS
=======================================================*/

.form-group{

margin-bottom:22px;

}

label{

display:block;

margin-bottom:8px;

font-weight:bold;

color:var(--primary);

}

input,
select,
textarea{

width:100%;

padding:14px;

font-size:16px;

border:2px solid #cccccc;

border-radius:12px;

background:white;

transition:.30s;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--secondary);

outline:none;

box-shadow:

0 0 10px

rgba(0,135,81,.20);

}

textarea{

resize:vertical;

min-height:140px;

}

/*=======================================================
CHECKBOX
=======================================================*/

.checkbox{

display:flex;

align-items:center;

gap:10px;

margin-top:10px;

}

/*=======================================================
TABLES
=======================================================*/

.table{

width:100%;

border-collapse:collapse;

background:white;

box-shadow:var(--shadow);

border-radius:var(--radius);

overflow:hidden;

}

.table thead{

background:var(--primary);

color:white;

}

.table th{

padding:18px;

text-align:left;

}

.table td{

padding:16px;

border-bottom:1px solid #eeeeee;

}

.table tr:hover{

background:#f8f8f8;

}

/*=======================================================
STATUS BADGES
=======================================================*/

.badge{

display:inline-block;

padding:8px 16px;

border-radius:30px;

font-size:14px;

font-weight:bold;

color:white;

}

.badge-success{

background:var(--success);

}

.badge-warning{

background:var(--warning);

}

.badge-danger{

background:var(--danger);

}

.badge-info{

background:var(--info);

}

.badge-secondary{

background:#666666;

}

/*=======================================================
STATISTICS CARDS
=======================================================*/

.stat-card{

background:white;

padding:25px;

border-radius:18px;

text-align:center;

box-shadow:var(--shadow);

border-top:

8px solid

var(--primary);

transition:.30s;

}

.stat-card:hover{

transform:translateY(-5px);

}

.stat-number{

font-size:42px;

font-weight:bold;

color:var(--primary);

margin-top:10px;

}

.stat-title{

font-size:18px;

margin-top:12px;

font-weight:bold;

}

/*=======================================================
PROGRESS BAR
=======================================================*/

.progress{

height:28px;

background:#dddddd;

border-radius:30px;

overflow:hidden;

}

.progress-fill{

height:100%;

background:

linear-gradient(

90deg,

var(--secondary),

var(--primary)

);

width:0%;

transition:width .60s;

}

/*=======================================================
COUNTDOWN TIMER
=======================================================*/

.countdown-box{

background:#ffffff;

text-align:center;

font-size:30px;

font-weight:bold;

padding:12px;

color:green;

border-color:#A52A2A;

border-style:solid;

border-width:7px;

border-radius:30px;

width:40%;

max-width:220px;

margin:auto;

box-shadow:var(--shadow);

}

.countdown-title{

font-size:18px;

margin-bottom:8px;

color:var(--primary);

}

/*=======================================================
SUCCESS MESSAGE
=======================================================*/

.message-success{

background:#e8fff2;

border-left:8px solid var(--success);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}

.message-success h2{

color:var(--success);

margin-bottom:15px;

}

/*=======================================================
ERROR MESSAGE
=======================================================*/

.message-error{

background:#fff1f1;

border-left:8px solid var(--danger);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}

.message-error h2{

color:var(--danger);

margin-bottom:15px;

}

/*=======================================================
WARNING MESSAGE
=======================================================*/

.message-warning{

background:#fff9eb;

border-left:8px solid var(--warning);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}

/*=======================================================
INFO MESSAGE
=======================================================*/

.message-info{

background:#eef6ff;

border-left:8px solid var(--info);

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

}


/*=======================================================
DASHBOARD TILES
=======================================================*/

.dashboard-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:25px;

margin:25px 0;

}

.dashboard-tile{

background:#ffffff;

border-radius:20px;

padding:25px;

box-shadow:var(--shadow);

border-top:8px solid var(--secondary);

transition:.30s;

cursor:pointer;

}

.dashboard-tile:hover{

transform:translateY(-6px);

}

.dashboard-icon{

font-size:42px;

margin-bottom:12px;

}

.dashboard-value{

font-size:38px;

font-weight:bold;

color:var(--primary);

}

.dashboard-title{

font-size:18px;

margin-top:8px;

font-weight:bold;

color:#444;

}

/*=======================================================
QUICK ACTION CARDS
=======================================================*/

.action-grid{
display:grid; grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;

}

.action-card{
background:linear-gradient(135deg,var(--primary),var(--secondary));
border-radius:18px;
padding:22px;
text-align:center;
border:3px solid var(--accent);
box-shadow:var(--shadow);
transition:.30s;
cursor:pointer;
color: #ffffff ;
}

.action-card:hover{
background: #ffffff;
color: green ;
transform:scale(1.03);

}


.action-card p{
font-size: 23px;

}


/*=======================================================
QUESTION BUILDER LAYOUT
=======================================================*/

.builder-layout{

display:grid;

grid-template-columns:
260px 1fr 260px;

gap:25px;

margin-top:25px;

}

.left-panel,
.center-panel,
.right-panel{

background:#fff;

border-radius:20px;

padding:20px;

box-shadow:var(--shadow);

}

/*=======================================================
QUESTION NAVIGATOR
=======================================================*/

.question-list{

max-height:650px;

overflow-y:auto;

}

.question-item{

padding:12px;

margin-bottom:8px;

border-radius:10px;

font-weight:bold;

cursor:pointer;

transition:.25s;

border:2px solid transparent;

}

.question-item:hover{

background:#eef7f2;

border-color:var(--secondary);

}

.question-complete{

background:#e8fff2;

color:#0b5d3b;

}

.question-draft{

background:#fff8e5;

color:#b36b00;

}

.question-empty{

background:#f5f5f5;

color:#666;

}

/*=======================================================
STICKY ACTION PANEL
=======================================================*/

.sticky{

position:sticky;

top:20px;

}

/*=======================================================
LOGIN CARD
=======================================================*/

.login-wrapper{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:20px;

}

.login-card{

width:100%;

max-width:500px;

background:#fff;

padding:35px;

border-radius:25px;

box-shadow:var(--shadow);

border-top:10px solid var(--primary);

}

/*=======================================================
RESPONSIVE
=======================================================*/

@media(max-width:1100px){

.builder-layout{

grid-template-columns:1fr;

}

.left-panel,
.center-panel,
.right-panel{

width:100%;

}

}

@media(max-width:768px){

.container{

width:98%;

padding:15px;

}

.header h1{

font-size:26px;

}

.page-title{

font-size:24px;

}

.dashboard-value{

font-size:30px;

}

.stat-number{

font-size:30px;

}

.countdown-box{

width:90%;

max-width:320px;

font-size:24px;

}

.btn{

display:block;

width:100%;

margin-bottom:12px;

}

.table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

@media(max-width:480px){

.header{

padding:20px;

}

.card{

padding:18px;

}

.login-card{

padding:25px;

}

}

/*=======================================================
PRINT STYLES
=======================================================*/

@media print{

body{

background:#fff;

}

.header,
.footer,
.btn{

display:none;

}

.card{

box-shadow:none;

border:1px solid #000;

}

.table{

box-shadow:none;

}

}