@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    padding:0 ;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
body{
    background-color: #e4e9f7;
}
.top h1{
    text-align: center;
    color: blue;
    font-size: 50px;
    margin-top: 40px;
}
.iqac{
    background-color: #0056b3;
    color: rgb(255, 255, 255);
}
.mar{
    display: flex;
    align-items: center;
}
.mar #changeMarqueeBtn{
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px 0px 0px 5px;
    cursor: pointer;
}
.marquee{
    margin-right: 10px;
}


.container{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}
.box{
    background-color: #fdfdfd;
    display: flex;
    flex-direction: column;
    padding: 25px 25px;
    border-radius: 0px 20px 20px 0px;
    box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
                0 32px 64px -48px rgba(0,0,0,0.5);
}
label
{
    display:inline-block;
	align-items:center;
}

.form-box{
    width: 350px;
    /*height: 365px;*/
}
.form-box img{
    margin-left: 43%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.form-box h2{
    margin-bottom: 10px;
    text-align: center;
    font-size: 15px;
}
.form-box header{
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 10px;
}
.form-box .field{
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
}
.form-box label{
    font-size: 13px;
}
.form-box form .input input,
.form-box form .input select{
    height: 30px;
    width: 100%;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    outline: none;
}
.btn{
    height: 35px;
	width: 150px;
    background: rgba(76,6,182,0.808);
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s;
    margin-top: 10px;
    padding: 0px;
    font-size: 13px;
}
.btn:hover{
    opacity: 0.82;
}
.submit{
    width: 100%;
}
.table-container{

    width:100%;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing:border-box;

}

table{
	
    width:100%;
	border-collapse:collapse;
}

/* Remove button style from pagination numbers */

.dataTables_paginate .paginate_button{

    border:none !important;
    background:none !important;

    padding:5px 8px !important;

    margin:2px;

    color:#333 !important;

    cursor:pointer;

}


.dataTables_paginate .paginate_button:hover{

    background:none !important;

    color:#007bff !important;

}


/* Active page number */

.dataTables_paginate .paginate_button.current{

    background:none !important;

    border:none !important;

    color:#0056b3 !important;

    font-weight:bold;

}

/*Table Links*/

.page-container{

display:flex;
gap:30px;
padding:30px;

}


.form-box-user{

background:white;
padding:25px;
border-radius:15px;
width:35%;

}


.list-box-user{

background:white;
padding:25px;
border-radius:15px;
width:65%;

}


input,select{

width:auto;
height:35px;
margin-bottom:15px;
padding:5px;

}


.icon-btn{

border:none;
background:none;
font-size:18px;
cursor:pointer;

}


.fa-pen{

color:green;

}


.fa-trash{

color:red;

}



@media(max-width:900px){


.page-container{

flex-direction:column;

}


.form-box-user,
.list-box-user{

width:100%;

}


}

//////*Page Style*//////////////////////
/* =========================
   IQAC ERP BUTTON STYLES
   ========================= */

.btn {
    
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
	text-align: center;
	line-height: 45px;
	height: 45px;
    min-width: 120px;
    box-shadow: 0 8px 20px rgba(0,200,83,.3);
}


/* Submit Button - Green */
.btn-submit {
    background: #198754;
}

.btn-submit:hover {
    background: #146c43;
}


/* Reset Button - Red */
.btn-reset {
    background: #dc3545;
}

.btn-reset:hover {
    background: #bb2d3b;
}


/* Save Button - Blue */
.btn-save {
    background: #0d6efd;
}

.btn-save:hover {
    background: #084298;
}


/* Edit Button - Orange */
.btn-edit {
    background: #fd7e14;
}

.btn-edit:hover {
    background: #ca6510;
}


/* Delete Button - Dark Red */
.btn-delete {
    background: #b02a37;
}

.btn-delete:hover {
    background: #842029;
}


/* View Button - Cyan */
.btn-view {
    background: #0dcaf0;
    color:#000;
}

.btn-view:hover {
    background:#31d2f2;
}


/* Download Button - Purple */
.btn-download {
    background:#6f42c1;
}

.btn-download:hover {
    background:#59359a;
}


/* Login Button */
.btn-login {
    background:#20c997;
}

.btn-login:hover {
    background:#159a72;
}


/* Cancel Button */
.btn-cancel {
    background:#6c757d;
}

.btn-cancel:hover {
    background:#565e64;
}


/* =========================
   ALERT MESSAGE BOXES
   ========================= */

.alert {
    padding:15px 20px;
    border-radius:8px;
    margin:15px 20%;
    font-size:16px;
}


/* Success Message 
.alert-success {
    background:#d1e7dd;
    color:#0f5132;
    border-left:5px solid #198754;
}
*/
.alert-success
{
    background:#d4edda;
    color:#0f5132;
    padding:12px;
    border-radius:5px;
    position:absolute;
	width:500px;
	border-left:5px solid #198754;
	top:0px;
	right:25px;
	
}


.progress-bar
{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:#eee;
	border-radius:5px;
}


.progress
{
    height:100%;
    width:100%;
    background:#28a745;
    transition:width .1s linear;
}

/* Warning Message */
.alert-warning {
    background:#fff3cd;
    color:#664d03;
    border-left:5px solid #ffc107;
}


/* Information Message */
.alert-info {
    background:#cff4fc;
    color:#055160;
    border-left:5px solid #0dcaf0;
}


/* Error Message */
.alert-error {
    background:#f8d7da;
    color:#842029;
    border-left:5px solid #dc3545;
}


/* Danger Alert */
.alert-danger {
    background:#ffcccc;
    color:#990000;
    border-left:5px solid red;
}


/* Normal Message */
.alert-message {
    background:#e2e3e5;
    color:#41464b;
    border-left:5px solid #6c757d;
}


/* =========================
   BUTTON SIZE OPTIONS
   ========================= */

.btn-small {
    padding:6px 12px;
    font-size:13px;
}


.btn-large {
    padding:14px 30px;
    font-size:18px;
}


/*Tab Style*/
.tab-container{
    width:100%;
}


/* tab buttons */

.tab-buttons{
    display:flex;
    gap:5px;
}


.tab-buttons button{

    padding:10px 20px;
    border:none;
    cursor:pointer;
    background:#ddd;
	border-radius:10px 10px 0px 0px;   /* top rounded corners */

}


.tab-buttons button.active{

    background:#0056b3;
    color:white;

}



/* tab content */

.tab-content{

    display:none;
    padding:20px;
    border:1px solid #ccc;

}

.tab-content.active{
    display:block;
}

.highlight-green {
    background:#198754;
    color:white;
    padding:5px 12px;
    border-radius:1px;
	font-size:10px;
}

.highlight-orange {
    background:#fd7e14;
    color:white;
    padding:5px 12px;
    border-radius:1px;
	font-size:10px;
}

.highlight-red {
    background:#dc3545;
    color:white;
    padding:5px 12px;
    border-radius:1px;
	font-size:10px;
}

.highlight-text {
    display: inline-block;
    background-color: #0056b3;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 500;
}


/******CardStyle*********/

.dashboard-cards{

display:flex;
gap:20px;
}


.card{

background:white;
padding:20px;
width:200px;
border-radius:15px;
text-align:center;
box-shadow:0 3px 10px #ccc;

}


.card i{

font-size:35px;
color:#0056b3;

}


.card h2{

font-size:35px;

}


.item-card{

background:white;
padding:15px;
margin:10px;
border-radius:10px;
box-shadow:0 2px 8px #ddd;

display:flex;
justify-content:space-between;

}


.item-card a{

color:#0056b3;
font-size:20px;

}




.dashboard{

display:flex;
gap:20px;
flex-wrap:wrap;

}


.summary-card{


background:white;
width:200px;

padding:20px;

border-radius:15px;

text-align:center;

box-shadow:0 3px 10px #ccc;


}



.summary-card i{

font-size:35px;
color:#0056b3;

}


.summary-card h2{

font-size:35px;

}





.aqar-container{

padding:20px;

}





.criterion{


background:#0056b3;

color:white;

padding:12px;

border-radius:10px;

font-size:18px;

margin-top:20px;


}





.indicator{


background:#e4e9f7;

padding:12px;

border-radius:10px;

margin-top:15px;

font-weight:600;


}




.metric{


background:white;

padding:20px;

margin-top:15px;

border-radius:12px;

box-shadow:0 3px 10px #ccc;


}

.metric-title
{
    display:flex;
    gap:15px;
    align-items:flex-start;
    line-height:1.6;
}
.metric-text
{
    flex:1;
    text-align:justify;
}
.metric-code{

background:#198754;

color:white;

padding:5px 15px;
    min-width:55px;
    font-weight:600;
border-radius:20px;


}

.metric-header{

display:flex;

align-items:center;

gap:15px;


}



.metric-no{

background:#198754;

color:white;

padding:5px 15px;

border-radius:20px;


}





textarea{


width:100%;

height:120px;

border-radius:8px;

padding:10px;

}



.save-btn{


background:#0056b3;

color:white;

border:none;

padding:8px 20px;

border-radius:8px;

cursor:pointer;


}

/***Responsive styles*/
/* ================================
   CLEAN RESPONSIVE IQAC STYLE
   ================================ */


/* Prevent page horizontal overflow */

html,
body{

    width:100%;
    max-width:100%;
    overflow-x:hidden;

}



/* Main upper section */

.undernav{

    display:flex;
    flex-wrap:wrap;
    gap:20px;
    width:100%;

}



/* Selection box */
/* ============================
      TOP TWO COLUMN SECTION
   ============================ */


.undernav{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    width:100%;

    align-items:flex-start;

}



/* Left div */

.left-top{

    flex:1 1 500px;

    min-width:0;

    margin:10px;

    padding:20px;

    box-sizing:border-box;

}



/* Right div */

.right-top{

    flex:1 1 500px;

    min-width:0;

    margin:10px;

    padding:20px;

    box-sizing:border-box;

}
/* Content inside left */
.left-top .content{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.left-top .selectadmin{
    flex:1;
}

.left-right{
    flex:1;
}
.left-right input{
   width:100%;
    max-width:300px;
}
/* =====================
      Tablet
   ===================== */
@media(max-width:900px){
.undernav{
    flex-direction:column;
}
.left-top,
.right-top{
    width:95%;
    margin:auto;
}
}
/* =====================
       Mobile
   ===================== */
@media(max-width:600px){
.left-top,
.right-top{
    width:100%;
    padding:15px;
}
.left-top select,
.left-right input{
    max-width:100%;
}
}

/* Report */

.status{

    flex:1 1 500px;

    width:100%;
    min-width:0;

    margin:10px;
    padding:20px;

    box-sizing:border-box;

}



.status-content{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;

}



.satisfaction,
.completion{

    width:200px;
    height:200px;

}



/* ================================
       TABLE FIX
   ================================ */


.table-container{

    width:100%;

    max-width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    box-sizing:border-box;

    padding:10px;

}



.table-container table{


    width:100%;

    max-width:100%;

    border-collapse:collapse;

    table-layout:fixed;


}



.table-container th,
.table-container td{


    padding:6px;

    font-size:12px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;


}


/* Keep header visible */

.table-container th{

    background:#0056b3;
    color:white;

}



/* ================================
          Tablet
   ================================ */


@media(max-width:900px){


.undernav{

    flex-direction:column;

}

.table-container table{

    width:max-content;

    min-width:700px;

}



}




/* ================================
          Mobile
   ================================ */


@media(max-width:600px){

.status-content{

    flex-direction:column;

    align-items:center;

}



.satisfaction,
.completion{

    width:180px;

    height:180px;

}



.table-container{

    padding:5px;

}



.table-container table{

    min-width:650px;

}



.table-container th,
.table-container td{

    font-size:11px;

    padding:5px;

}


}

/***Input elements alignment**/

/* ===========================
   ALIGN LABEL AND INPUT FIELDS
   =========================== */


.selectadmin,
.search-box{

    display:flex;

    flex-direction:column;

    gap:8px;

}



.selectadmin label,
.search-box label{

    width:180px;

    font-weight:500;

    display:inline-block;

}



/* Keep label and input aligned */

.selectadmin select,
.search-box input{

    width:300px;

    height:40px;

    padding:6px 10px;

    border-radius:8px;

    border:1px solid #ccc;

}



/* For label input same row */

.field-row{

    display:flex;

    align-items:center;

    margin-bottom:12px;

}



.field-row label{

    width:180px;

}



.field-row input,
.field-row select{

    flex:1;

}



/* Mobile */

@media(max-width:600px){


.field-row{

    flex-direction:column;

    align-items:flex-start;

}


.field-row label{

    width:100%;

}


.field-row input,
.field-row select{

    width:100%;

}


}

/***Login page css****/
/* ===========================
       LOGIN IMAGE FIX
   =========================== */


.container{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    overflow:hidden;

}



/* Image area */

.left{

    width:650px;

    height:465px;

    overflow:hidden;

    flex-shrink:1;

}



.left img{

    width:650px !important;

    height:465px !important;

    object-fit:cover;

    display:block;

    border-radius:20px 0 0 20px;

}



/* Login box */

.form-box{

    width:350px;

    /*height:465px !important;*/

    flex-shrink:0;

}



/* =====================
       Tablet
   ===================== */


@media(max-width:900px){


.left{

    width:40vw;

    height:465px;

}


.left img{

    width:650px !important;

    height:465px !important;

}



/* keep login same */

.form-box{

    width:330px;

}


}



/* =====================
       Mobile
   ===================== */


@media(max-width:600px){


.container{

    justify-content:flex-start;

}


.left{

    width:120px;

    height:465px;

    overflow:hidden;

}



.left img{

    height:465px !important;

    width:650px !important;

    max-width:none;

}



/* Login moves left */

.form-box{

    margin-left:0;

    width:300px;

}



}



/* =====================
       Very small
   ===================== */


@media(max-width:450px){


.left{

    display:none;

}


.container{

    justify-content:center;

}


.form-box{

    width:100%;

    max-width:320px;

}


}