EVOLUTION-NINJA

Edit File: main.css

/*---------------------- dashboard ---------------------*/
   .Number-of-students {
	padding: 10px 15px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
        /* grid-template-rows: 200px; 
        margin-inline: auto; */

} 
     .charts>img {
        width: 74%;
        margin: 20px 0px 0px 21px;
    }

.chart>img {
        width: 40%;
        margin: 20px;
    }  
    .students {
        
        height: 100%;
        border-radius: 18px;
        padding: 5px 7px;
    }

.students>p {
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 500; 
        text-align: center;
        margin: 1px;
	padding: 0px 50px;
    }

#student-1 {
        background-color: #8E44AD;
    }

#student-2 {
        background-color: #DC3545;
    }

#student-3 {
        background-color: #3598DC;
    }

#student-4 {
        background-color: #8E44AD;
    }

.num-student {
        text-align: end;
        padding-inline: 6px;
    }

.num-student>span {
        color: white;
        font-size: 16px;
        font-weight: 500;
        padding-inline: 4px;

}

.income-expense-box {

padding: 10px 15px;
        margin: auto;
        width: 90%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        background-color:
            #FFFFFF;
        justify-content: space-between;
    }

.income-report {

padding: 8px;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0px 0px 7px 1px #ccc;
    }

/*------------- task assigned block ------------- */
    .task-assign {
        height: auto;
        padding: 10px 15px;
        margin: auto;
        width: 90%;
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 30px;
        background-color: #FFFFFF;
        justify-content: space-between;
    }

.assigned-to {
        border-radius: 15px;
        padding: 10px;
        height: 100%;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 7px 1px #ccc;

}

.task-title {
        padding-block: 6px;
        padding-inline: 17px;
        font: 500 21px black, 'Poppins';
        border-bottom: 0.8px solid #999;

}

.task-butt {
        color: white;
        background-color: #F61164;
        opacity: 1;

}

.task-butt:hover {
        background-color: #F61164;
        opacity: 0.8;

}

.task-data>td {
        text-align: center;
        align-content: center;

}

.task-messages {
        height: auto;
        padding: 7px 2px;
        display: grid;
        grid-template-columns: 1.7fr 1fr;
    }

.mess {
        padding: 10px 3px;
    }

.mess1 {
        border-left: 2px solid #ccc;
        ;
    }

.task-detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.t-message {
        padding: 2px 3px;
        margin: 0;
        font-size: 16px;
        font-weight: 400;

& span {
            color: rgb(31, 134, 230)
        }
    }

.img-detail {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.income-report>h6 {
        padding: 6px;
        font: 500 21px black, 'Poppins,';
    }

#inc-chart {
        width: 100% !important;
    }

.task-body {
        overflow-y: scroll;
    }

@media only screen and (max-width:998px) {
        .Number-of-students {
            width: 85%;
            margin-inline: auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            grid-auto-rows: auto;
        }

.income-expense-box {
            width: 90%;
        }

.task-assign {
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(2, 1fr);

}
    }

@media only screen and (max-width:765px) {
        .Number-of-students {
            width: 90%;
            grid-template-columns: repeat(1, 1fr);

}
    }

@media only screen and (max-width:624px) {
        .Number-of-students {
            width: 98vw;
            margin-inline: auto;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 10px;  
        }

.students {
            margin: initial;
        }

.income-expense-box {
            grid-template-columns: repeat(1, 1fr);
            width: 98vw;
        }

.task-assign {
            width: 98vw;
            margin: auto;
            grid-template-columns: 100%;
            grid-template-rows: auto;

}

.table>:not(caption)>*>* {
            padding: 1px;
        }
    }

/*------------end---------- dashboard ---------------------*/

/*-------------start--------- add-header---------------------*/
/* -------FEE STRUCTURE AND BACK BUTTON----------  */

.fee-structure {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 3px solid #8D8D8D;
    }

.add-header-btn {
        background-color: #0065A3;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
    }

.add-header-btn:hover {
        background-color: #0065A3;
        opacity: 0.9;
    }

.back-butt {
        color: #606060;
        font-size: 21px;
        font-weight: 500;
        outline: none;
        border: none
    }

.addHeader-details {
        margin-top: 10px;
        padding: 15px 25px;
        height: auto;
        background-color: #EFF3FC;
        display: grid;
        gap: 8px 24px;
        grid-template-columns: repeat(3, 1fr);
    }

.addHeader-detail{
        font-size: 15px;
        margin-block: 4px;
        font-weight: 500;
        color: #606060;
    }

.inp-boxes-addHeader {
        border: none;
        box-shadow: 0px 0px 3px #ccc;

background-color: white !important;
    }

.addHeader-submit {
        color: white;
        width: 50%;
        background-color: #123053;
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;
        border-radius:5px;

}

.subm {

display: flex;
        align-items: end;
    }

#add-header {
        display: none;
    }

@media only screen and (max-width:728px) {

/*  */

.fee-structure {
            width: 100vw;
        }

.add-header-btn {
            background-color: #0065A3;
            color: #ffffff;
            font-size: 12px;
            font-weight: 400;
            width: 59%;
        }

}
   
    @media only screen and (max-width:628px) {
        .addHeader-details{
            width: 95vw;
            grid-template-columns: 100%;
        }
    }
/*--------------end-------- add-header---------------------*/

/*-------------start--------- student application form --------------------*/

/* -------ADDSTUDENT AND BACK BUTTON---------- */

.Add-student {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 3px solid #8D8D8D;
}

.add-stud {
    background-color: #0065A3;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;

}

.add-stud:hover {
    background-color: #0065A3;
    opacity: 0.9;
}

.back-butt {
    color: #606060;
    font-size: 21px;
    font-weight: 500;
    outline: none;
    border: none
}

/* -- ----------FORM SECTION-----------  */
.student-education-detail {
    background-color: #ABC0F1;
    padding: 10px 25px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}

.form-select {
    height: 40px;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
}

.detail-names>h6 {
    color: #444;
}

.student-form-detail-entry {
    margin-top: 10px;
    padding: 15px 25px;
    height: auto;
    background-color: #EFF3FC;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: 5px;
    grid-template-areas:
        "a1 a2 a3 a4"
        "a5 a6 a7 a4"
        "a8 a9 a10 a4"
        "a11 a11 a12 a22"
        "a13 a14 a15 a22"
        "a16 a17 a18 a22"
        "a19 a19 a20 a21"
    ;
}

.student-form-detail-entry>div {
    padding: 5px 10px;
    font-size: 15px;
    margin-block: 4px;
    font-weight: 500;
    color: #606060;
}

.a1 {
    grid-area: a1;
}

.a2 {
    grid-area: a2;
}

.a3 {
    grid-area: a3;
}

.a4 {
    grid-area: a4;
    /* 
    & input {
        height: 70px;
    } */
}

.a5 {
    grid-area: a5;
}

.a6 {
    grid-area: a6;
}

.a7 {
    grid-area: a7;
}

.a8 {
    grid-area: a8;
}

.a9 {
    grid-area: a9;
}

.a10 {
    grid-area: a10;
}

.a11 {
    grid-area: a11;
}

.a12 {
    grid-area: a12;
}

.a13 {
    grid-area: a13;
}

.a14 {
    grid-area: a14;
}

.a15 {
    grid-area: a15;
}

.a16 {
    grid-area: a16;
}

.a17 {
    grid-area: a17;
}

.a18 {
    grid-area: a18;
}

.a19 {
    grid-area: a19;
}

.a20 {
    grid-area: a20;

}

.a21 {
    grid-area: a21;
    display: flex;
    align-items: end;
}

.a22 {
    grid-area: a22;

}

.submit-student-form {
    color: white;
    width: 100%;
    background: linear-gradient(#4E79FF, #71ACFF);
    border: none;
    outline: none;
    font-size: 18px;
    padding: 5px 4px;
    font-weight: 500;

}

.inp-boxes {
    border: none;
    box-shadow: 0px 0px 3px #ccc;
    background-color: white !important;
}

#more-file-div {
    position: relative;
}

#add-more-file {
    position: absolute;
    right: -13px;
    top: 187px !important;
    font-size: 24px;
}

#file-add-div{
    height: 200px;
    overflow-y: auto;
}

@media only screen and (max-width:728px) {
    .Add-student {
        width: 100vw;
    }

.add-stud {
        background-color: #0065A3;
        color: #ffffff;
        font-size: 12px;
        font-weight: 400;
        width: 59%
    }

.student-education-detail {
        width: 95vw;
        margin: auto;
        padding: 9px 7px;
        gap: 15px;
        grid-template-columns: repeat(1, 1fr);
    }

.student-form-detail-entry {
        width: 95vw;
        display: inherit;
    }
    .div-img--contents {
        width: 157px;
        height: 157px;
        margin-bottom: 57PX;
    }

#file-add-div {
        height: auto;
        overflow-y: initial;
    }

}

@media only screen and(max-width:992px){
       
        .student-form-detail-entry {
            margin-top: 10px;
            padding: 10px ;
            height: auto;
            background-color: #EFF3FC;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            gap: 5px;
            grid-template-areas:
                "a1 a2"
                "a3 a4"
                "a5 a6"
                "a7 a8"
                "a9 a10"
                "a11 a12"
                "a13 a14"
                "a15 a16"
                "a17 a18"
                "a19 a20";
        }
    }

/*-------------end-------- student application form --------------------*/

/*-------------start--------- create fee structure --------------------*/
/* -------FEE STRUCTURE AND BACK BUTTON----------  */

.fee-structure {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 3px solid #8D8D8D;
    }

.fee-structure-btn {
        background-color: #0065A3;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
    }

.fee-structure-btn:hover {
        background-color: #0065A3;
        opacity: 0.9;
    }

.back-butt {
        color: #606060;
        font-size: 21px;
        font-weight: 500;
        outline: none;
        border: none
    }

.fee-details {
        margin-top: 10px;
        padding: 15px 25px;
        height: auto;
        background-color: #EFF3FC;
        display: grid;
        gap: 8px 24px;
        grid-template-columns: repeat(4, 1fr);
    }

.fee-require-detail {
        font-size: 15px;
        margin-block: 4px;
        font-weight: 500;
        color: #606060;
    }

.inp-boxes-fee {
        border: none;
        box-shadow: 0px 0px 3px #ccc;

background-color: white !important;
    }

.submit-student-form {
        color: white;
        width: 100%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;

}

.subm {

display: flex;
        align-items: end;
    }

#feez-structure-application {
        display: none;
    }

@media only screen and (max-width:728px) {

/*  */

.fee-structure {
            width: 100vw;
        }

.fee-structure-btn {
            background-color: #0065A3;
            color: #ffffff;
            font-size: 12px;
            font-weight: 400;
            width: 59%
        }

.fee-details {
            width: 95vw;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
    }

@media only screen and (max-width:628px) {
        .fee-details {
            width: 95vw;
            grid-template-columns: 100%;
        }
    }

/*-------------end------------  create fee structure --------------------*/

/*-------------start------------   fee collection --------------------*/

/*  -------FEE COLLECTION AND BACK BUTTON---------- */

.fee-collection {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border-bottom: 3px solid #8D8D8D;
    }

.fee-col-heading {
        margin: 0;
        padding: 3px;
        align-self: center;
        color: #003352;
        font-size: 20px;
        font-weight: 600;

}

.back-butt {
        color: #606060;
        font-size: 21px;
        font-weight: 500;
        outline: none;
        border: none
    }

/* ----------fee-collection-details-----------  */

.fee-collection-detail {
        margin-top: 10px;
        padding: 15px 25px;
        height: auto;
        background-color: #EFF3FC;
        display: grid;
        gap: 8px 24px;
        grid-template-columns: repeat(4, 1fr);
    }

.b1 {
        grid-column: span 2;
    }

.fee-collection-submit,
    .fc {
        color: white;
        width: 15%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;   
        font-weight: 500;
        border-radius: 4px;

}

.subm {
        display: flex;
        justify-content: end;
        align-items: end;
    }

.fc {
        background: #0065A3;
    }

/* -----------STUDENT OVERALL DETAILS-------------- */
    .overall-details {
        padding: 6px;
        display: grid;
        grid-template-columns: 1.7fr 1fr;
        grid-auto-rows: auto;
        height: auto;
        gap: 15px;
    }

.overall-details>div {
        padding: 4px 7px;

& h5 {
            color: #123053;
            font-size: 17px;
            font-weight: 600;
        }

}

/* ------------STUDENT INFORMATION---------- */
    .student--information {
        height: auto;
        background-color: #219F94;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 7px 4px;
        position: relative;
        padding: 7px;
        border-radius: 4px;
    }

.stud-detail {
        padding: 3px 8px;
        color: white;
        font-size: 15px;
        font-weight: 400;

}

.stud-detail:last-child {
        position: absolute;
        top: 7;
        right: 3;
    }

/*-------------------- PAYMENT BLOCK------------ */
    .payment-head {
        border-bottom: 2px solid #B5C9F2;
    }

.payment-head th {
        color: #0065A3;
        font-size: 15px;
    }

.payment-head .payment-table-body {
        border-radius: 10px;
    }

.payment-total {
        background:
            #1C8BCF !important;
        color: white !important;
        align-items: self-start;
        font-weight: 500;
    }

/*------ COLLECT FEEZ BUTTON ------ */
    .collect-feez-btn {
        color: white;
        border: none;
        background-color: #E44A24;
        border-radius: 4px;
        outline: none;
        padding: 5px 10px;
        float: right;
    }

.FEEZ-BUTTON {
        height: 50px;
        align-content: center;
    }

@media only screen and (max-width:1024px) {
        .overall-details {
            width: 90vw;
            padding: 6px;
            display: grid;
            grid-template-columns: 100%;

}

.fee-collection-submit,
        .fc {
            color: white;
            width: 86%;
            margin: auto;
        }
    }

@media only screen and (max-width:728px) {

/*   -------fee-collection AND BACK BUTTON----------   */

.fee-collection {
            width: 100vw;
        }

.fee-collection-btn {
            background-color: #0065A3;
            color: #ffffff;
            font-size: 12px;
            font-weight: 400;

}

.fee-collection-submit,
        .fc {
            color: white;
            width: 80%;
            margin: auto;
        }

.fee-collection-submit {
            width: 80%;
            margin-top: 5px;
        }

.overall-details {
            width: 95vw;
            padding: 6px;
            display: grid;
            grid-template-columns: 100%;

}

.FEEZ-BUTTON {
            width: 96vw;
        }
    }

@media only screen and (max-width:628px) {
        .fee-collection-detail {
            width: 96vw;
            grid-template-columns: repeat(1, 1fr);
        }

.overall-details {
            width: 96vw;
            padding: 6px;
            display: grid;
            grid-template-columns: 100%;

}

/* ------------STUDENT INFORMATION---------- */
        .student--information {
            height: auto;
            background-color: #219F94;
            display: grid;
            grid-template-columns: 1fr;
            gap: 7px 4px;
            position: relative;
            padding: 7px;
            border-radius: 4px;
        }

.FEEZ-BUTTON { 
            width: 96vw;
            border: 2px solid;
            height: 50px
        }
    }

/*-------------end------------- fee collection --------------------*/
/* -----------  mobile  ---------------- */
.country-select.inside input, .country-select.inside input[type=text] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0;
}
.country-select input, .country-select input[type=text] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0;
}
.iti--allow-dropdown {  
    width: 100% !important;
}
.country-select {    
    width: 100% !important;
}
/* ---------- end  -  mobile  ---------------- */