@charset "utf-8";
/* CSS Document */

@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');

.clr   { clear: both;}


.fullwidth                { display: flex; width: 100%; height: 100vh; /* Full viewport height */}
.left                     { width: 18%; background-color: #273048; height: 100vh;}


/* Sidebar Css */
.logo                                   { text-align: center; padding: 0; background-color: #ffff; margin: 0 0 10px 0; height: 70px; align-items: center; justify-content: center; display: flex;}
.logo img                               { width: 100%;}
.accordion-item                         { border: none !important; box-shadow: none !important;}
.accordion-button:not(.collapsed){ box-shadow: none !important;}
.accordion-button                       { font-family: "Poppins", sans-serif; background-color: #273048 !important; color: #fff !important; font-weight: 600 !important; padding: 12px 20px !important; font-size: 20px !important; border: none !important; position: relative !important;}
.accordion-button:not(.collapsed)       { background-color: #273048 !important; color: #fff !important; }
.accordion-button:focus                 { box-shadow: none !important;}
.accordion-item                         { background-color: transparent !important;  border: none; }
.submenu .nav-link                      { color: #ccc !important; padding: 10px 20px !important; font-size: 16px !important;}
.space                                  { margin: 0 10px 0 0px;}
.submenu                                { padding: 10px 0 30px 0 !important; margin: 0; background-color: #273048;}
.submenu .nav-link:hover:not(.disabled) { background-color: #3A4769 !important; color: #fff !important;}
.submenu .nav-link.selected             { background-color: #3A4769 !important; color: #fff !important;}
.submenu .nav-link.disabled             { opacity: 0.5 !important; pointer-events: none !important;}
.logout                                 { padding: 10px 40px !important; font-size: 14px !important; color: #ccc !important; display: block !important;}
.logout:hover                           { background-color: #2e3a5e !important; color: #fff !important;}
/* Caret icon styles */
.accordion-button::after                { font-family: "Bootstrap-icons" !important; content: "\F232"!important; position: absolute !important; right: 20px!important; font-size: 1rem !important; transition: transform 0.2s ease-in-out !important;}
.accordion-button:not(.collapsed)::after{ content: "\F236" !important;/* bi-caret-down-fill */ }
/* Sidebar Css */



.right                    { flex: 1; /* optional */}
.gridpage-title           { font-family: "Poppins", sans-serif; font-size: 18px; margin: 0px 20px; line-height: 80px; font-weight: 500; font-style: normal; color: #000; height: 70px;}
.grey-strip               { font-family: "Poppins", sans-serif; background-color: #F8F8F8; padding: 10px 20px;}
.info-box                 { display: flex; align-items: center;}
.info-box a               { color: #01499D; text-decoration: none; font-weight: 400; font-size: 13px; margin-right: 10px;}
.icon-circle              { background-color: #01499D; color: #fff; width: 15px; height: 15px; display: flex ; border-radius: 50%; font-size: 18px; margin-right: 8px; line-height: 13px; justify-content: center;}
.info-text                { font-weight: 600; font-size: 13px; color: #273048;}

.midcontent               { padding: 20px;}
.topbox                   { font-family: "Poppins", sans-serif; margin: 15px 0;}
.topbox .form-group       { display: flex; align-items: center; margin-bottom: 15px;}
.topbox .form-label       { text-align: right;  color: #6C7278; width: 80px; margin-right: 8px; margin-bottom: 0; font-size: 14px;}
.topbox .form-control     { font-size: 14px; flex: 1;}
 



 

.blueborder               { border: 1px solid #C4C4C4;}
.bluehead                 { background-color: #01499D; color: #ffffff;}
.bluehead th              { background-color: transparent !important; color: #fff !important; font-size: 15px !important; font-family: 'Poppins', sans-serif !important; font-weight: 300 !important;}
.blueborder td, .blueborder th { font-size: 13px; font-family: 'Poppins', sans-serif; font-weight: normal;}

 


.mainwrap                 { font-family: "Poppins", sans-serif; width: 100%; margin: 0; padding: 0;}
.toptxt                   { font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 400; font-style: normal;  color: #3A4769; line-height: normal; margin: 0; padding: 0;}
.bluetitle                { background-color: #01499D; font-size: 18px; font-weight: 600; font-style: normal; color: #fff; line-height: normal; margin: 0 0 10px 0; padding: 10px 20px;}
.norbluetxt               { font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; font-style: normal;  color: #3A4769; line-height: normal; margin: 0 0 15px 0; padding: 0;}
.leftcol                  { width: 49%; float: left; margin: 0; padding: 0;}
.rightcol                 { width: 49%; float: right; margin: 0; padding: 0;}
.bluebox                  { background-color: #EEF3F9; padding: 20px; margin: 50px 0 30px 0;}
.bluebox h1               { font-family: "Poppins", sans-serif; font-size: 18px; margin: 5px 5px 20px 5px; line-height: normal; font-weight: 500; font-style: normal; color: #01499D;}
.bluebox p                { font-family: "Poppins", sans-serif; font-size: 10px; margin: 5px 5px 5px 30px; font-weight: 400; font-style: normal; line-height: normal; color: #6C7278;}
.bluebox ul               { margin: 5px 5px 5px 50px; padding: 0;}
.bluebox ul li            { font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 400; font-style: normal; color: #6C7278; line-height: normal; margin: 0; padding: 0;}
.bluebox a                { color: #6C7278; text-decoration: underline;}
.bluebox a:hover          { color: #000; text-decoration:none;}
.bluebox .checktxt        { margin: 30px 0 0 0;}

.bluebox-radius           { background-color: #EEF3F9; padding: 30px; margin: 20px 0 30px 0; border-radius: 20px;}
.bluebox-radius h4        { font-family: "Poppins", sans-serif; font-size: 15px; margin: 5px 5px 20px 5px; line-height: normal; font-weight: 700; font-style: normal; color: #273048;}
.bluebox-radius ul        { list-style: none; margin: 5px; padding: 0;}
.bluebox-radius ul li     { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; font-style: normal; color: #273048; line-height: normal; margin: 0 0 5px 0; padding: 0 0 0 20px; position: relative;}
.bluebox-radius ul li i   { position: absolute; left: 0; top: 2px; color: #273048; /* Bootstrap blue or change as needed */  font-size: 13px;}

.greybox                  { background-color: #F5F5F5; padding: 20px; margin: 20px 0 30px 0;}
.greybox h1               { font-family: "Poppins", sans-serif; font-size: 18px; margin: 5px 5px 20px 5px; line-height: normal; font-weight: 500; font-style: normal; color: #01499D;}
.greybox p                { font-family: "Poppins", sans-serif; font-size: 11px; margin: 5px 5px 10px 5px; font-weight: 400; font-style: normal; line-height: normal; color: #6C7278;}

.greybox-padd                  { background-color: #f5f5f5; padding: 20px; margin: 50px 0 30px 0;}
.greybox-padd h1               { font-family: "Poppins", sans-serif; font-size: 18px; margin: 5px 5px 20px 5px; line-height: normal; font-weight: 500; font-style: normal; color: #01499D;}
.greybox-padd p                { font-family: "Poppins", sans-serif; font-size: 11px; margin: 5px 5px 5px 30px; font-weight: 400; font-style: normal; line-height: normal; color: #6C7278;}
.greybox-padd ul               { margin: 5px 5px 5px 50px; padding: 0;}
.greybox-padd ul li            { font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 400; font-style: normal; color: #6C7278; line-height: normal; margin: 0; padding: 0;}
.greybox-padd a                { color: #6C7278; text-decoration: underline;}
.greybox-padd a:hover          { color: #000; text-decoration:none;} 
.grey-checktxt                 { font-family: "Poppins", sans-serif; font-size: 11px; margin: 5px; font-weight: 400; font-style: normal; line-height: normal; color: #7E8489;}


.greybox-centertxt             { background-color: #f5f5f5; padding: 20px; margin: 50px 0 30px 0;} 
.greybox-centertxt p           { font-family: "Poppins", sans-serif; font-size: 11px; margin: 5px 5px 5px 30px; font-weight: 400; font-style: normal; line-height: normal; color: #6C7278; text-align: center;} 
.greybox-centertxt a           { color: #01499D; text-decoration: underline;}
.greybox-centertxt a:hover     { color: #000; text-decoration:none;} 
 


.circleicon-txt           { display: flex; align-items: center; font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 400; font-style: normal; color: #3A4769; line-height: normal; gap: 15px; margin: 0; padding: 0;}
.bluecircle               { font-size: 40px; font-weight: 400; color: #01499D; margin: 0; padding: 0;} 
.mail-box                 { font-family: "Poppins", sans-serif; display: flex; align-items: center; background-color: #01499D; color: white; border-radius: 10px; padding: 20px; gap: 20px; max-width: 700px; margin: 20px auto 20px 0; /* align to left */ flex-wrap: wrap; }
.mail-icon                { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center;}
.mail-icon img            { width: 30px; height: 30px;}
.mail-content             { display: flex; flex: 1; align-items: center; flex-wrap: wrap; gap: 20px;}
.mail-title               { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.2em; white-space: nowrap;}
.divider                  { height: 40px; width: 4px; background-color: white; }
.mail-details             { font-family: "Poppins", sans-serif;font-size: 12px; line-height: 1.5; flex: 1;}
.mail-details a           { color: #fff; text-decoration:none;}
.mail-details a:hover { color: #ffcc00; }
 @media (max-width: 600px) {
.mail-box                 { flex-direction: column; text-align: center; align-items: center;gap:5px;}
.mail-content             { flex-direction: column; align-items: center; gap:5px;}
.divider                  { display: none;}
.mail-details             { text-align: center;}
}


/* pagination css */

.pagination-wrapper       { font-family: "Poppins", sans-serif; padding: 20px;}
.btn-pagination           { background-color: #363853; border: none; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%;}
.btn-pagination:hover     { background-color: #000;}
.btn-pagination i         { font-family: "Poppins", sans-serif; font-size: 1rem; color: white;}
.record-text              { font-family: "Poppins", sans-serif; font-weight: bold; margin-right: 5px;}
.pagination-info          { font-family: "Poppins", sans-serif; font-size: 16px;}
     

/* Bootstrap overwright css  */
.row                      { margin: 0 0 10px 0 !important;}
.form-control             { border-color: #C4C4C4 !important;}
.grey                     { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; color: #6C7278;}
.smallgreytxt             { font-family: "Poppins", sans-serif; font-size: 11px; margin: 5px 0; font-weight: 400; font-style: italic; color: #A0A8B3;}
.alignright               { text-align: right;}

input::placeholder {
      color: #A0A8B3 !important; /* Example: grey color */
      opacity: 1 !important; /* Ensure full opacity in Firefox */
}

.borderbox                { border: 1px solid #C4C4C4; padding: 20px; border-radius: 20px;}


/* login box style */
.loginbox             { border: 1px solid #e3eaf5; border-radius: 10px; background-color: #f3f8ff; padding: 30px 0 10px 0;} 
@media only screen and (max-width : 800px)   
{
 .loginbox .col-6      { flex: 0 0 auto; width: auto !important;}
}
/* login box style */



/* ipad Landscape [HORIZONTAL] CSS Start here */
@media only screen and (max-width : 1024px)   
{
.container, .container-md, .container-sm {
        max-width: 100% !important;
    } 
}

/* ipad Landscape [HORIZONTAL] CSS Start here */
@media only screen and (max-width : 900px)   
{
.logobox                                       { text-align: center;}
.toptxt                                        { font-size: 11px; text-align: center;}
.leftcol                                       { width: auto; float: none;}
.rightcol                                      { width: auto; float: none;}
.alignright                                    { text-align: left;}
.leftcol, .rightcol, .col-sm-4, .col-sm-8      { flex: 0 0 auto; width: 100% !important;} 
	
}

 
@media only screen and (max-width : 450px)   
{
.bluetitle                                     { font-size: 16px; padding: 10px;}
.bluebox h1                                    { font-size: 15px;}
.bluebox p                                     { margin: 5px;}
.bluebox ul                                    { margin: 5px 5px 5px 20px;}
.gap                                           { margin: 0;}
.dwlbutton                                     { font-size: smaller !important;}
.circleicon-txt                                { font-size: 13px;}
.bluebox-radius                                { padding: 20px;}
.bluebox-radius ul li                          { margin: 0 0 15px 0;}
}