@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body {
margin:0;
padding:0;
}

/*Login Page  */
.border-bm{height:4px; background:#1369A6; width:100%;}
.logo-bg{min-height:647px; background: url('static/images/shriconnect-logo.png'), #F6FAFC; background-position: bottom right;
background-repeat: no-repeat; display: flex;
    justify-content: center;
    align-items: center;}
.slic-logo{
    display: flex;
    justify-content: center;
    margin-top: 50px;}
.slic-logo img{width:220px;}    
    
.login-tl{font-size:15px; color:#131A22; font-family: 'Inter', sans-serif; font-weight:600; margin-top: 0px;
    display: inline-block;}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

input + .form-control-placeholder {
  position: absolute;
  transition: all 200ms;
  top: -8px;
    bottom: 10px;
    font-size: 12px;
    opacity: 1;
    color: #6E6E6E;
}

input:placeholder-shown + .form-control-placeholder {
      position: absolute;
    pointer-events: none;
    left: 20px;
    top:0px;
    transition: 0.2s ease all;
    color: #1F252A;
    font-size: 15px;}

.form-control:focus + .form-control-placeholder {
  position: absolute;
  transition: all 200ms;
    top: -10px;
    bottom: 10px;
    font-size: 12px;
    opacity: 1;
    color: #6E6E6E;}
    
.userId, .passWord{
    width: 100%;
    padding: 20px 20px 20px 20px;
    height:56px;   
    font-size: 14px;
    color: #000;
    border:solid 1px #9B9EA0;
}

.email, .passWord {
    width: 100%;
    padding: 20px 20px 20px 20px;
    height:56px;   
    font-size: 14px;
    color: #000;
    border:solid 1px #9B9EA0;
} 
 

.form-control-placeholder {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 14px; font-family: 'Inter', sans-serif;
}
/* label{
    position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 14px; font-family: 'Inter', sans-serif;
} */
.form-control-placeholder{line-height:3.5;}
.forgot-ps-btn a{color:#2A251C; text-decoration: none; font-size: 14px; opacity: 0.8; font-family: 'Inter', sans-serif;}
.forgot-ps-btn a:hover{color:#000;}

.login-btn{background:#2B95D5; color:#fff; font-family: 'Inter', sans-serif; position:relative;}
.login-btn:hover{background:#2B95D5; color:#fff;}

.form-control:focus {
    color: #8595a6;
    background-color: var(--bs-body-bg); 
    border:solid 2px #2B95D5; 
    outline: 0;
    box-shadow:none;}
    
    
.user-icon{position: absolute;
    right: 20px;
    font-size: 13px;
    width: 18px;
    top: 15px;
    color: #2F353A;}
.login-icon{font-size:14px; width:16px; float:right; right:15px; position:absolute; top:10px;}
/* .shriconnet-logo{margin-top: -111px;} */
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {background: #2B95D5; color:#fff; border:none;}
/* End Login Page */



#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0px 0px;
border: 0;
list-style: none;
line-height: 3;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family:'Open Sans', Arial, sans-serif;
background: #f9b83d;
width: 100%;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 10px;
font-size: 11px;
letter-spacing: 0px;
text-decoration: none;
color: #383737;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
background: #3DA1E8; /*new */
}
#cssmenu > ul > li.has-sub > a {
/* padding-right: 30px; */  
padding-right: 10px;
padding-left: 10px;
}
/*#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}*/
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 10000;/*new*/
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 0px 15px;
/*width: 170px;*/
width: 200px;
font-size: 11px;
text-decoration: none;
color: #ffffff;
font-weight: 400;
background:#3DA1E8;/*NEW*/
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
} 
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: rgb(12, 0, 0);
background: #fff;

}
/*#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}*/
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
/*#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}*/
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
/*background: #262626;*/
background: #3DA1E8;'
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
.cover {
    position: absolute;
    border: none;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -2;
    height:100%;
}
.d-md-block {
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
color: #766f6f;
text-align: left;
top: 100px;
right: 0%;
left: 0%;
}
.carousel-item h5 {
    padding: 6px 10px;
    background-color: white;
    color: #087DCD;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px;
    width: 15%;
}
.section-1 {
    padding: 2vmin 0vmin;
}
.section-1 .row .col-md-6 .pray img {
    opacity: 0.8;
width: 80%;
border-radius: 0.2em;
}
.section-1 .row .col-md-6 .panel {
top: 49vmin;
left: -18vmin;
background: white;
border-radius: 3px;
text-align: left;
padding: 13vmin 5vmin 20vmin 10vmin;
box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.callout.callout-warning {
border-left-color: #d39e00;
}
.callout {
border-radius: .25rem;
background-color: #fff;
border-left: 5px solid #e9ecef;
border-left-color: rgb(233, 236, 239);
margin-bottom: 1rem;
padding: 10px;
height: 65px;
}
.section-1 .row .col-md-6 .panel {
    position: absolute;
    top: 7vmin;
    left: -18vmin;
    background: white;
    border-radius: 3px;
    text-align: left;
    padding: 13vmin 5vmin 20vmin 10vmin;
    box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
 .dash_blog {
    min-height: 450px;
    background-color: #f2f5f9;
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    float: left;
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #e5dfdf;
  }
  .dash_blog_inner {
    float: left;
    width: 100%;
  }
  .dash_head {
    background-image: url("static/images/pattern_h.png");
    font-weight: normal;
    height: auto;
    border-radius: 5px 5px 0 0;
    padding: 15px 20px 5px;
    background-size: cover;
    /*background-color: #3DA1E8;*/
    background-color: #6884cf;
    position: relative;
    text-align: center;
  }
  .dash_blog_inner .list_cont {
    border-bottom: 0px solid #f2f2f2;
    padding: 5px 0px;
  }
  .msg_list_main {
    float: left;
    width: 100%;
  }
  .msg_list_main ul {
    list-style: none;
    /* float: left; */
    width: 100%;
    padding: 0px 14px;
  }
  .msg_list li:nth-child(1) {
    border-left-color: #ff9800;
  }
  .msg_list_main ul li {
    padding: 10px 0px;
    border-bottom: solid #ddd 1px;
    line-height: normal;
    font-size: 14px;
    /* float: left; */
    width: 100%;
    /* display: flex; */
    position: relative;
  }
  .msg_list li:nth-child(2) {
    border-left-color: #2196f3;
  }
  .msg_list li:nth-child(3) {
    border-left-color: #673ab7;
  }
  .msg_list li:nth-child(4) {
    border-bottom: none;
  }
  
  .read_more {
    float: left;
    width: 100%;
    margin: 30px 0;
  }
  .center {
    display: flex;
    justify-content: center;
  }
  .main_bt {
    min-width: 125px;
    height: auto;
    float: left;
    background: #1ed085;
    text-align: center;
    color: #fff;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    transition: ease all 0.5s;
    cursor: pointer;
    font-weight: 300;
  }
 
  .msg_list_main ul li span .name_user {
    font-size: 16px;
    font-weight: 500;
    color: #455a64;
    float: left;
    width: 100%;
    margin-bottom: 0;
    margin-top: 5px;
  }
  .msg_list_main ul li .msg_user {
    font-size: 15px;
    color: #087DCD;
    font-weight: 600;
}
  .msg_list_main ul li .time_ago {
   white-space: nowrap;
    color: #898989;
    font-size: 12px;
    margin-left: 13px;
    margin-top: 6px;
  } 
  ol, ul {
    padding-left: 1rem;
}
.msg_list .far {
    font-weight: 500; */
    font-size: 12px;
    /* position: sticky; */
    margin-right: 6px;
    margin-top: 5px;

}
.blink {
    animation: blinker 1s step-start infinite;
    color:white; 
  }
  
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

  .footer-end-row {
    background: #131A22;
    height: 50px;
}
.copyright {
  color: #fff;
  margin-left: 10px;
  font-size: 11px;
}

.carousel-caption {
    position: absolute;
    left: 0;
    color: #fff;
    text-align: center;
    width: 100%;
    float: left;
    top: 15px
}

/* .header {
  padding: 0 0;
  background: #fff;
  top: 0;
  z-index: 99;
} */
.main-wrapper .container-fluid {
  padding-left: 40px;
  padding-right: 40px;
}
.align-items-center {
  align-items: center !important;
}
.d-flex {
  display: flex !important;
}
.mr-15 {
  margin-right: 15px;
}
.header .header-left .menu-toggle-btn .main-btn {
  padding: 10px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-btn i {
  font-size: 17px;
}
.header .header-right {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}
.header .header-right .notification-box, .header .header-right .header-message-box {
  position: relative;
}
.ml-15 {
  margin-left: 15px;
}
.header .header-right button {
  border: 1px solid #F6F6F6;
  background: #F6F6F6;
  border-radius: 50%;
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #1A2142;
}
.header .header-right button svg {
  fill: currentColor;
}
.header .header-right button span {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #29a2f5;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
}
.header .header-right .notification-box, .header .header-right .header-message-box {
  position: relative;
}
.ml-15 {
  margin-left: 15px;
}

.header .header-right button svg {
  fill: currentColor;
}
.header .header-right .profile-box {
  display: flex;
  position: relative;
}
.ml-15 {
  margin-left: 15px;
}
.header .header-right .profile-box button {
  width: auto;
}
.header .header-right button {
  border: 1px solid #F6F6F6;
  background: #F6F6F6;
    background-color: rgb(246, 246, 246);
  border-radius: 50%;
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #1A2142;
}
.header .header-right .profile-box .profile-info {
  margin: 0 5px;
}
.header .header-right .profile-box .profile-info .info {
  display: flex;
  align-items: center;
}
.header .header-right .profile-box .profile-info .info .image {
  border: 1px solid #DFE5EF;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin-right: 14px;
  position: relative;
}
.header .header-right .profile-box .profile-info .info .image img {
  width: 100%;
  border-radius: 50%;
}
.fw-500 {
  font-weight: 500;
  line-height: 0.2;
}
.header .header-right .profile-box .profile-info .info p {
  font-size: 12px;
  text-align: left;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255emem;
  content: none;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.ProAdmin {
  margin-top: 25px;
  color: #8b8787;
}
/* Text Animation */

.text{
    font-family: 'arial black';
    text-align: center;
    margin: 0;
    margin-left: 50%;
    transform: translateX(1000%);
    opacity: 0;
    animation: slide-in-anim 1.5s ease-out forwards;
}

@keyframes slide-in-anim {
    20% {
        opacity: 0;
    }
    60% {
        transform: translateX(-45%);
    }
    75% {
        transform: translateX(-52%);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* Text Animation End */

.carousel .carousel-item {
    /* height: 450px; */
    min-height: 550px;
}

.carousel-item img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 450px;
}

/* Search Bar */
.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  transform: translate(-95%, -50%);
  padding: 0px;
  border-radius: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #bbb7b7;
}
.search-box:hover .search-txt {
  width: 240px;
  padding: 0 10px;
}
.search-box:hover .search-btn {
  background: #087DCD;
}
.search-txt {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  color: #838080;
  transition: 0.5s;
  font-size: 1rem;
  width: 0px;
}
.search-btn {
  color: #fda600;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.5s;
}
/* Search bar end */


p .username-error {
    color: #e92222;
    font-weight: 400;
    font-size: 14px;
}
.username-error {
    color: #f01515;
    font-weight: 400;
    font-size: 12px;
}


.contact-addrees-bg{background-image:linear-gradient(0deg,#0b94b3,#025d96); margin-top: 30px;
    padding: 40px;
    border-radius: 6px;}
.contact-addrees-bg ul{list-style:none;}
.contact-addrees-bg ul li{}

.search-form button i {
    color: #012970;
}

.search-form input {
    border: 0;
    
    color: #012970;
    border: 1px solid rgba(1, 41, 112, 0.2);
    padding: 5px 38px 7px 8px;
    border-radius: 5px;
    transition: 0.3s;
    width: 100%;
    font-size:14px;
    font-weight:500;
}

.search-form button {
    border: 0;
    padding: 0;
    margin-left: -30px;
    background: none;
}

.contact-addrees-bg{}
.contact-addrees-bg ul{list-style:none;}
.contact-addrees-bg ul li{}
.contact-addrees-bg ul li i{color:#fff;}


.eocjs-newsticker {
  padding: 10px 0;
  background-color: #eee;
}

.eocjs-newsticker .eocjs-newsticker-container {
  position: relative;
  height: 24px;
  overflow: hidden;
}

.eocjs-newsticker .eocjs-newsticker-one,
.eocjs-newsticker .eocjs-newsticker-two {
  position: absolute;
  left: 0;
  top: 0;
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
}

.eocjs-newsticker-loader {
  position: absolute;
  left: calc(50% - 10px);
  top: 2px;
  width: 20px;
  height: 20px;
  display: block;
  border: 3px solid #555555;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: eocjs-newsticker-spin .75s linear infinite;
}

.slic-card-tl{font-size:18px !important; color:#0077B6 !important; font-family: 'Inter', sans-serif !important; }

.helpdesk-btn{background: #0d6efd;
    color: #fff;

    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    
    position: fixed;
    right: 46px;
    bottom: 44px;
    display:flex;
    justify-content: center;
    align-items: center;
    
    transition:transform 2s;
    cursor: pointer;
    box-shadow: rgba(2, 6, 16, 0.2) 0px 2px 16px;}
 /* .helpdesk-btn:hover{width: 60px; height: 60px;} */
.helpdesk-btn svg:hover{}

.helpdesk-btn:hover{color:#fff;}
.custom-tooltip {
  --bs-tooltip-bg: var(--bd-violet-bg);
  --bs-tooltip-color: var(--bs-white);
}

@keyframes eocjs-newsticker-spin {
  to {
    transform: rotate(360deg);
  }
}

.helpdesk-btn svg:hover {
    -webkit-animation: toTopFromBottom 0.3s forwards;
    -moz-animation: toTopFromBottom 0.3s forwards;
    animation: toTopFromBottom 0.3s forwards;
}

@-webkit-keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toTopFromBottom {
    49% {
        -moz-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toTopFromBottom {
    49% {
        transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}


@media (min-width: 992px)
.modal-lg, .modal-xl {
    max-width: 500px !important;
}

#myInput {
    border: 1px solid #c9c9c9;
    border-radius: 4px;
}

.search-icon{
    border: none !important;
  background: none !important;
  background-color: unset !important;
  border-radius: 50%;
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #1A2142;
}


/* Login Page */
/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* PopUp style.css */
/* .container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    display: none;
} */

.input {
    width: 40px;
    border: none;
    border-bottom: 3px solid rgba(0, 0, 0, 0.5);
    margin: 0 10px;
    text-align: center;
    font-size: 36px;
    /* cursor: not-allowed; 
    pointer-events: none;  */
}

.input:focus {
    border-bottom: 3px solid orange;
    outline: none;
}

/* Container and grid setup */
/* .container-fluid {
    padding-left: 0;
    padding-right: 0;
} */

/* Logo background section */
.logo-bg {
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    text-align: center;
}

.shriconnet-logo img {
    max-width: 100%;
    height: auto;
}

/* Column Adjustments */
.col-md-6 {
    padding-left: 0;
    padding-right: 0;
}

/* OTP Popup */
#otppopup1 {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#otpEnter {
    font-size: 20px;
    font-weight: bold;
}

.inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.inputs input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* #otpsubmit {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background-color: #0ac10a;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
} */

/* #otpsubmit:hover {
    background-color: #098c07;
}
 */
/* Form styles */
.form-horizontal {
    margin-top: 15px;
    margin-bottom: 40px;
}

h5.login-tl {
    font-size: 18px;
}

.select-channel {
    margin-bottom: 20px;
}

.form-group input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.form-control-placeholder {
    position: absolute;
    top: 12px;
    left: 15px;
    color: #aaa;
    font-size: 14px;
}

/* Button Styles */
.btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background: linear-gradient(45deg, #3399ff, #214e7c);
    /* background-color: #007bff; */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background-color: #0056b3;
}

/* Media Queries for Mobile Responsiveness */
@media screen and (max-width: 768px) {
    /* Make the OTP inputs stack vertically */
    body {
        background: #dedada;
    }
    .loginform {
        background-color: #fff;
        padding: 2rem 0;
        border-radius: 1rem;
        margin: 10px 10px 10px 10px;
    }
    .px-5 {
        padding-right: 0rem !important;
        padding-left: 0rem !important;
    }
    .captcha {
        background: #f2f5f9;
        position: relative;
        border: solid 1px #eee;
        border-radius: 4px;
        padding: 14px 0px 0px 0px;
    }
    #image {
        width: 100px;
        font-weight: 400;
        height: 40px;
        user-select: none;
        font-style: italic;
        font-size: x-large;
        border: #ddd 1px solid;
        margin-left: 0px;
        margin-right: 0px;
        border-radius: 4px;
        text-align: center;
        background: #ffffff;
        position: absolute;
    }
    #user-input {
        width: auto;
        margin-right: 0px;
    }
    .inputs {
        flex-direction: column;
        gap: 15px;
    }

    /* Reduce form margins and paddings */
    .col-md-6 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .slic-logo img, .shriconnet-logo img {
        max-width: 80%;
    }

    /*  .shriconnet-logo {
      display: flex;
      max-width: 100%;
      margin-bottom: 75px;
    } */

    /* Resize inputs and labels for smaller screens */
    .form-group input {
        font-size: 14px;
        padding: 8px;
    }
    .login-tl {
        font-size: 16px;
        margin-bottom: 15px;
    }

    /* Reduce size of buttons */
    .btn {
        font-size: 14px;
        padding: 10px;
    }

    /* Hide captcha image and input on small screens */
    .captcha {
        display: none;
    }

    /* Adjust the size of the select dropdown */
    #selectChannel {
        font-size: 14px;
        padding: 10px;
    }
    .logo-bg {
        min-height: 30% !important;
        border-radius: 1rem;
        margin: 20px 10px 0px 10px;
        display: flex;
    }
    .border-bm {
    display: none;
    }
}

@media screen and (max-width: 480px) {
    /* Further adjustments for very small screens */
    body {
        background: #dedada;
    }
    .slic-logo img, .shriconnet-logo img {
        max-width: 80%;
    }
    .px-5 {
        padding-right: 0rem !important;
        padding-left: 0rem !important;
    }
    .captcha {
        background: #f2f5f9;
        position: relative;
        border: solid 1px #eee;
        border-radius: 4px;
        padding: 14px 0px 0px 0px;
    }
    #image {
        width: 30%;
        font-weight: 400;
        height: 40px;
        user-select: none;
        font-style: italic;
        font-size: x-large;
        border: #ddd 1px solid;
        margin-left: 0px;
        margin-right: 0px;
        border-radius: 4px;
        text-align: center;
        background: #ffffff;
        position: absolute;
    }
    #user-input {
        width: 55%;
        margin-right: 0px;
    }
    .fa-sync:before {
        content: "\f021";
        color: green;
        float: right;
        margin-right:-25px;
    }
    .loginform {
        background-color: #fff;
        padding: 2rem 0;
        border-radius: 10px;
        margin: 10px 10px 10px 10px;
    }
    .logo-bg {
        min-height: 30% !important;
        border-radius: 10px;
        margin: 10px 10px 0px 10px;
        display: flex;
    }
    .border-bm {
    display: none;
    }
}
/* Login page end */


/* DCEEEditProfile css start... */

.editmain{
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 0px 30px; 
    width: 50%; 
    margin: 40px auto; 
}

.saveBtn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.saveBtn .btn{
    width:30%
}

@media screen and (max-width: 768px) {
        .editmain{
            grid-template-columns: repeat(2, 1fr);
            margin: 30px 25px;
            width: 90%;
        }
        .saveBtn .btn{
            /* width:90%; */
            margin: 0px 2% 15% 3%;
        }
    }


@media screen and (max-width: 500px) {
        .editmain{
            grid-template-columns: repeat(1, 1fr);
            margin: 30px 15px;
            width: 90%;
        }
        .saveBtn .btn{
            /* width:90%; */
            margin: 0px 2% 15% 3%;
        }
    }

/* DCEEEditProfile css end... */



/* DAECProfileDetails.jsp css start */

#delCloseBtns{
    display:flex;
    justify-content:center;
}

#delCloseBtns button{
    width:20%;
    height:40px;
    display:flex;
    text-align:center;
    justify-content:center;
    align-items:center;
}

.modal-body{
    padding: 12px 0px 0px 125px;
    font-weight: bold;
}

.modal-body, .modal-footer {
  border: none !important;
}


/* DAECProfileDetails.jsp css end */