/*Primary Font*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@100..900&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');
* {  font-family: "Poppins", serif; font-weight: 400; }

/*conpany logo*/
.company-logo { position:absolute; left:20px; top:20px; cursor:pointer; z-index:999l }
.company-logo img{ width:120px; }
/*end of company logo*/
.text-cetner { text-align:center; }
.text-left { text-align:left; }

.ceylinco-image { background:url(../img/side-banner.jpg); height:700px; background-size:cover; }
.ceylinco-online-pay { min-height:700px; position:relative; width:100%; /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/ overflow: scroll;  }

.ceylinco-online-pay h2 { font-size:24px; color:#000; margin-bottom:15px; }
.ceylinco-online-pay h4 { font-size:16px; margin-bottom:50px; color: #8c8d8b; font-weight:400; }

/**/
.user-title-name { padding:0 0 0 0px; text-align:center; }
.policy-number-echo {  padding:0 0 0px 0px;  text-align:center;  }
/**/

/*Form styles*/
.ceylinco-online-pay form {}
.ceylinco-online-pay form .form-group { margin-bottom:20px; }
.ceylinco-online-pay form label { font-size:14px; }
.ceylinco-online-pay form label a { color:#000; }
.ceylinco-online-pay form input{ height:53px; border-color:#ddd; color:#ddd; }
.ceylinco-online-pay form input::placeholder { color: #aaaaaa; font-size: 13px; }

.ceylinco-online-pay form select{ height:53px; border-color:#ddd; color:#aaaaaa; font-size: 13px;}
.ceylinco-online-pay form select option { color: #aaaaaa; font-size: 13px; }
.ceylinco-online-pay form .form-check-input { height:15px; width:15px; margin-right:10px; }

/*Btn Styles*/
.ceylinco-btn { width:100%; background: #000; border-color: #000; color: #fff; padding:15px 25px; }
.ceylinco-btn:hover { background:#fdd900; color:#000; }
.continue-btn { width:100%; background: #fdd900; border-color: #fdd900; color: #000; padding:15px 25px; }

.ceylinco-btn:disabled, .ceylinco-btn[disabled]{   border: 1px solid #aaaaaa;   background-color: #aaaaaa;   color: #666666; }

/*Status Card and Final Payment Card*/
.ceylinco-online-pay .card {  padding: 15px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border:0; margin-bottom:15px; }
.ceylinco-online-pay .card  svg { margin-bottom:15px; } 
.ceylinco-online-pay .card .card-body h1 { font-size:26px; color:#539512; }
.ceylinco-online-pay .card .card-body .card-title { margin-bottom:15px; text-align:center; }
.ceylinco-online-pay .card .card-body .card-title span {font-size:30px; font-weight:600;  }
.ceylinco-online-pay .card .card-body p {  text-align:center; }

.ceylinco-online-pay .card .card-body table tbody { font-size:13px;  }
.ceylinco-online-pay .card .card-body .date{ color: #aaaaaa; font-size: 13px; text-align:center;  }
.back-link { text-align:center; margin-top:15px; float:left; width:100%; color:#000; text-decoration:none; font-size:13px; }
/* end of Status Card and Final Payment Card*/

/* Lfet Area */
.ceylinco-left-area { width:100%; height:100vh; position:relative; }

/*Footer*/
.ceylinco-footer { position:absolute; z-index:22; bottom:0px; padding: 15px 0; font-size:12px; color:#fff; text-align:center; background:#000; width:100%; color: #939393;  }
.ceylinco-footer p { margin-bottom:0; }
.ceylinco-footer a { color: #939393; text-decoration: none;}
.ceylinco-footer a:hover {color:#fdd900; }

.side-bar-footer { position:absolute; bottom:0; padding:15px;  color: #939393;  font-size:12px; text-align:center; }
.side-bar-footer  p { margin-bottom:0; }
.side-bar-footer  a { color: #939393; text-decoration: none;}
.side-bar-footer  a:hover {color:#fdd900; }

/*side-menu*/
.sidebar { position: fixed; top: 0; right: -300px; /* Hidden off-screen */ width: 280px; height: 100%; background-color: #1c1c1c; color: white; transition: 0.3s ease; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); padding: 0px; z-index:9999; }
.sidebar.active { right: 0; /* Slide in */}
.sidebar h2 { margin: 50px 0 0 0; font-size: 14px; margin-left: 15px; }
.sidebar .contact-details { margin: 0px 0 0 0; padding: 15px 15px 15px 20px;  font-size: 18px;   color: #939393;}
.sidebar .contact-details h3{ font-size:14px; color:#fff; }
.sidebar .contact-details p { font-size:13px; }
.sidebar .contact-details a { color:#939393; text-decoration:none; } 
.sidebar .contact-details a:hover { color:#fdd900; } 
.sidebar ul { list-style-type: none; padding: 0; font-size: 13px; }
.sidebar ul li { margin: 0px 0; padding: 15px 15px 15px 20px; border-bottom: #363636 solid 1px;  }
.sidebar ul li a { color: #939393; text-decoration: none; font-size: 14px; }
.sidebar ul li:hover { background:#fdd900; color:#000; }
.sidebar ul li:hover a { color:#000; }
.close-btn { position: absolute; top: 15px; right: 15px; background-color: transparent; color: white; border: none; padding: 0px; cursor: pointer; border-radius: 3px; height: 30px; width: 30px; }
.close-btn img {  height: 30px; width: 30px;}
.close-btn:hover { background-color: transparent;}
.toggle-btn { position: fixed; top: 25px; right: 25px; background-color: transparent; color: white; border: none; padding: 0; cursor: pointer; border-radius: 5px; z-index: 1000; width:30px; height:30px;}
.toggle-btn img { width:30px; height:30px; }
.toggle-btn:hover { background-color: transparent;}
/*end of side menu  */

.unsuccess-text{ color:#ed1b24!important; }
/*Steps*/
.steps {            display: none; margin-top: 5px; }
.steps .active {            display: block;}
.steps .unsuccess .step-number{ background:#ed1b24; }
/* Step indicator styles */        
.steps {display: flex; justify-content: space-between; margin-bottom: 25px; }
.step-indicator { position: relative; text-align: center; flex: 1; }
.step-indicator p { font-size:13px; }
.step-indicator:before { content: ''; position: absolute; top: 20%; left: -50%; right: -50%; transform: translateY(-50%); height: 2px; background-color: #ddd; z-index: 1; }
.step-indicator:first-child:before { left: 50%; }
.step-indicator:last-child:before { right: 50%; }
.step-number { background: #ddd; color: #fff; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin: 0 auto 10px; font-size: 16px; font-weight: bold; position: relative; z-index: 33; }
.step-indicator.active .step-number { background: #539512; }
.step-indicator.completed .step-number { background: #28a745;}
/*End of Steps*/

/* Buttons */        
.form-navigation { display: flex; justify-content: space-between; }
.form-navigation button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.btn-next { background: #007bff; color: #fff; }
.btn-prev { background: #6c757d; color: white; }
.btn-submit { background: #28a745; color: white; }

.terms-and-Conditions-lable{text-decoration:underline; cursor:pointer;}

/*Modal*/
#terms-and-Conditions {  }
#terms-and-Conditions p{ font-size:13px; margin-bottom:10px;  }
#terms-and-Conditions ol { font-size:13px; padding:0; margin:15px; }
#terms-and-Conditions ol li { margin-bottom:10px; }
#terms-and-Conditions {  }
.d-none {  }
.m-none {  }

@media only screen and (max-width: 768px) {
.ceylinco-online-pay { padding:25px!important; margin-top:50px!important; }
.ceylinco-online-pay .card .card-body table tbody tr td { font-size:12px;  }

}