/* #breadcrumb section hidden on homepage */
.breadcrumbrow{
   display: none;
}

 /* height must be fixed */
.banner {
    height: 330px; 
 }
 
 /* top must be fixed according to banner geight bcz of relative position */
 .bank-top-fe {
    position: relative;
    top: -235px;
 }
 
 .top-key {
    padding-left: 1.875em;
    padding-right: 1.875em;
 }
 
 .intro {
    background: #ff8e2b;
    padding: 0.875em;
    color: white;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
    border-radius: 0.313rem;
 }
 .intro:hover{
   color: white;
 }

/* box-shadow must be fix for all  screen */

 .key-fe-card {
    background: white;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
       rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
       rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    padding-top: 1.25em;
    border-radius: 2rem;
    cursor: pointer;
 }
 .key-fe-card:hover{
    box-shadow: #ff8e2b 0px 0px 0px 2px,
    #ff8e2b 0px 4px 6px -1px,
    #ff8e2b 0px 1px 0px inset;
 }
 .d-flex {
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
 }


.key-fe-img {
    border-width: 0.063rem;
    border-color: #4aa4d8;
    width: 28%;
    
 }

 
 div.card-body1 {
    flex: 1 1 auto;
    color: var(--bs-card-color);
 }
 
 div.card-body2 {
    flex: 1 1 auto;
    padding-top: 1.563em;
    padding-bottom: 1.563em;
    padding-right: 1.063em;
    padding-left: 1.063em;
    color: var(--bs-card-color);
 }
 
 .card {
    border: none;
 }
 /* box-shadow must be same for all  screen */
 .card1 {
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
       rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
       rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    border: none;
 }
 .key-text {
    color: #00229b;
    font-size: 0.938rem;
    margin-bottom: 0px;
    text-decoration: none;
 }
 
  
 .key-text-main {
    font-size: 1.005vw;
    color: black;
 }
 
 .card {
    border: none;
 } 
 .card-text {
    margin: 0.313em;   
 }
 .card-text-mobile {
   margin: 0.313em; 
   padding-bottom: 0.3em;  
}
 .sr-rate{
   position: relative;
 }
 .bank-card {
    color: #000;
    border-radius: 2.1875rem;
 }
 
 .bank-card .card-text p {
    margin-bottom: 0.3rem;
 }
 
 .borderless {
    background: #fff;
    border: 0px solid #ffffff;
    position: relative;
    /* top: -6%; */
 }
 
 .borderless td,
 .borderless th {
    border: none;
    padding: 0rem 0rem;
 }
 
 .borderless tr td img {
    max-width: 1.375rem;
    float: left;
    margin-right: 0.6875rem;
    margin-top: 0.063rem;
 }
 
 .borderless tr  {
    border-bottom: 0.063rem solid #dddddd;
 }
 
 .clickable-row a {
    color: #141414;
    text-decoration: none;
 }
 
 .clickable-row a:hover {
    cursor: pointer;
    color: #ff8e2b;
 }
 .a.btn.banner-btn:active{
   color: #ff8e2b;
 }
 .bankname {
    text-align: center;
    width: 90%;
    margin-top: 0.625em;
    margin-bottom: 0.625em;
    display: flex;
    
 }

 
 .bankname1 {
    text-align: center;
    width: 90%;
    margin-top: 0.625em;
    margin-bottom: 0.625em;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
 }

 .banner-btn {
    width: 65%;
    border-radius: 1.25rem;
    background-color:#ff8e2b ;
    position: absolute;
    color: white;
    right: 18%;
    padding: 0.563em;
    text-decoration: none;
 }
 
 .banner-btn:hover {
    background-color: #fc7500;
    color: white;
 }
 .pointy{
   padding-left: 3px;
    position: relative;
    background-color: orange;
    margin: 0 1.25em;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    font-size: 0.938rem;
    line-height: 1.25rem;
    color: white;
    
  }
    
    
    .pointy:after{
        position: absolute;
        content: "";
        height: 0;
        width: 0;
        font-size: 0;
        line-height: 0;
        border-top: 0.625rem solid transparent;
        border-bottom: 0.625rem solid transparent;
        border-left: 0.625rem solid orange;
     }
      
       .pointy:before{
        position: absolute;
        content: "";
        left: -1.05rem;
        height: 0;
        width: 0;
        font-size: 0;
        line-height: 0;
        border-top: 0.625rem solid orange;
        border-bottom: 0.625rem solid orange;
        border-right: 0.625rem solid orange;
        border-left: 0.625rem solid transparent;
     }
  .strip{
    font-size: 0.875rem;
  }
  .accordion-button{
     font-family: 'Open Sans';
  }
   .dataTables_length{
     display: none;
  }
  .border-0 th{
     border-top: none;
   }
   .break-point{
      display: none;
   }
   .anim-text{
     background-image: linear-gradient(
       -225deg,
       #231557 0%,
       #44107a 29%,
       #ff1361 67%,
       #fff800 100%
     );
     background-size: auto auto;
     background-clip: border-box;
     background-size: 200% auto;
     color: #fff;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: textclip 2s linear infinite;
     display: inline-block;
  }
  @keyframes textclip {
     to {
       background-position: 200% center;
     }
   }
   .BankTypeButton {
    background: #1252ae;
    padding: 0.875em;
    color: white;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
    border-radius: 0.313rem;
    border: 0.063rem solid #f8f9fa;
    font-size: 1.125rem;
  }
 
  .BankTypeButton:hover{
    color: white;
  }
  .public-card{
  
    z-index: 1;
  }
  .bb{
    font-size: 1.125rem;
  } 
 .loader {
   background-color: #ededed;
   height: 1.5rem;
   border-radius: 0.438rem;
   width: 100%;
}
.loading-tr {
   border-bottom: 0.063rem solid #ddd;
}
.loading-td {
   padding: 0.625rem;
   border-bottom: 0.063rem solid #ddd;
}
td .loader {
   background-color: #ededed;
   background: linear-gradient(100deg,
   rgba(255, 255, 255, 0) 40%,
   rgba(255, 255, 255, .5) 50%,
   rgba(255, 255, 255, 0) 60%) #ededed;
   background-size: 200% 100%;
   background-position-x: 180%;
   animation: 1s loading ease-in-out infinite;
}

/* Feedback Widget Button*/

.feedback-label {
   position: fixed;
   display: none;
   top: 50%;
   right: 0;
   backface-visibility: hidden;
   transform-origin: top right;
   transform: rotate(-90deg) translate(50%, -100%);
   z-index: 2;
   border: none;
   padding: 0.313rem 0.625rem;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   background: var(--gradient);
}

.feedback-label.show {
   display: block;
}


[type="checkbox"]:checked + .feedback-label {
   /*EDGE is buggy with calc + variables + transform - use a hardcoded value instead of variables*/
   transform: rotate(-90deg)
      translate(50%, calc((var(--bs-offcanvas-width) + 100%) * -1));
   /*uncomment this if you want to reverse the order of the characters*/
   /*transform: rotate(90deg) translate(50%, var(--form-width));*/
}

:root {
   --white: white;
   --gradient: linear-gradient(-45deg, #ffd000 0%, #fa6b0b 50%);
   --border-radius: 0.25rem;
}

/* Latest Articles Carousel  */
.MultiCarousel {
   float: left;
   overflow: hidden;
   padding: 0.9375rem;
   width: 100%;
   position: relative;
}

.MultiCarousel .MultiCarousel-inner {
   transition: 1s ease all;
   float: left;
}

.MultiCarousel .MultiCarousel-inner .item {
   float: left;
}


.MultiCarousel .MultiCarousel-inner .item > div {
   text-align: justify;
   margin: 0.625rem;
   min-height: 20rem;
   border: solid 0.9px cornflowerblue;
}

.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
   position: absolute;
   top: calc(50% - 20px);
   border: none;
}

.MultiCarousel .leftLst {
   left: 0;
}

.MultiCarousel .rightLst {
   right: 0;
}

.leftLst:hover,.rightLst:hover {
   background-color: #FF8E2B !important;
 }

.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
   pointer-events: none;
   background: #ccc;
}

.offcanvas-sizing {
   height: 38rem;
   border-radius: 0.625rem 0px 0px 0.625rem;
}
.read-more {
   width: 13em;
   padding: 0.25rem;
   background-color: #1252ae;
   border: none;
 }
 
 .read-more:hover {
   background-color: #FF8E2B;
 }
 .article {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
 }  

.card img {
   max-height: 100%;
}
@keyframes loading {
   to {
       background-position-x: -30%;
   }
}
 /* Safari */
 @-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(360deg); }
 }
 
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }


 .top-bank-table {
   margin-top: -225px;
}

.About_heading {
   margin-bottom: 4%;
   padding-top: 1.25rem;
}

.nav-tabs {
   display: flex;
   flex-wrap: nowrap;

}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  color: white;
  background:#1252ae;
  border-color:#cfdede;
  border-bottom-color: #1252ae
  ;
}
/* tab background color for table */
.nav-tabs .nav-link {
  background-color: whitesmoke;
      border-color: #cfdede; 
}
.nav-link {
  color: black;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current{
   color: #f8f9fa !important;
   background: linear-gradient(to bottom, #1252ae 0%, #1252ae 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
   color: #f8f9fa !important;
   background: linear-gradient(to bottom, #1252ae 0%, #1252ae 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
   background: linear-gradient(to bottom, #1252ae 0%, #1252ae 100%);
}

table.dataTable{
   border-collapse: collapse;
}
table {
   width: 100%;
   background: #fff;
   border: 0.063rem solid #dedede;
   border-top: none;
}

 table tr td img {
    max-width: 2rem;
    float: left;
    margin-right: 0.688rem;
    margin-top: 0.063rem;
 }
 
 .table-btn {
    width: 100%;
    color: rgb(38, 27, 187);
    text-decoration: underline;
 }
 table.dataTable thead th, table.dataTable thead td {
   border-bottom:0.063rem solid #dddddd;
 }

 .fdpage-table td,
 th {
    border: 0.063rem solid #dddddd;
    text-align: center;
    padding: 0.5rem;
 }
 #home table tr td:nth-child(1){
   text-align: left;
}
#profile table tr td:nth-child(1){
   text-align: left;
}
#contact table tr td:nth-child(1){
   text-align: left;
}
 .bank-col {
    display: flex;
    flex-direction: row;
 }
 
 .bank-col-flex {
    display: inline-flex;
    padding-left: 10%;
 }
 
 .bank-col-flex-img {
    margin: 0.188rem;
 }
 
 .bank-col-flex-p {
    margin: 0.25rem;
 }
 
 .bank-col-flex-p a {
    text-decoration: none;
    color: black;
 }
 .bank-col-flex-p a:hover{
    color: #ff8e2b;
 }
 .fdtable-header {
    color: white;
    background-color: #1252ae;
 }
 .bankmob{
   display: none;
 }
 table.dataTable thead .sorting_desc {
   background-image: url(/assets/images/Other/down.png);
}
table.dataTable thead .sorting_asc {
   background-image: url(/assets/images/Other/up.png);
}


.dataTables_wrapper .dataTables_paginate .paginate_button{
   color: #00229b !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button i{
   color: #1252ae;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover i{
   color: white;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled i{
   color: #000;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
   padding: 0.3em 0.8em;
 }
 .accordion {
   --bs-accordion-transition: none !important;
   --bs-accordion-btn-focus-box-shadow: none !important;
}
.mobile-key-btn{
   border-radius: 1.5em;
   background-color: #1252AE;
   color: #f8f9fa;
    border-color: #1252AE;
    font-size: 0.875rem;
    padding-bottom: 0.125rem;
    padding-top: 0.125rem;
}
.card-body1 .btn:hover{
   background-color: #ff8e2b;
   border-color: #ff8e2b;
}
.card-body1 .btn:active{
   background-color: #1252AE;
   color: #f8f9fa;
    border-color: #1252AE;
}
.mobile-card-fe{
   display: none;
}

/* CSS for modal */
.HomeModal {
   display: none; /* hide the modal by default */
   /* position: fixed; */
   z-index: 8;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: #040404bf;
 }
 
 .modal-content {
   background-color: #fefefe;
   margin: auto;
   margin-top: 6% ;
   padding: 0.5rem;
   width: 55%;
   text-align: center;
 }
 
 
 /* CSS for overlay */
 #overlay {
   display: none;
   position: fixed;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #040404bf; /* translucent black background */
 }
 .errorMsg{
   margin: auto;
   width: 70%;
   text-align: center;
   }
   .errorMsg  a{
      padding-left: 0.313rem;
    
  }
 .logo{
   width: 33%;
 }
 accordion-button:hover {
   z-index: 1;
}
.accordion-button:focus{
   z-index: 1;
}
  @media (max-width: 992px) {
   .modal-content {
      margin-top: 10% ;     
      width: 60%;  
    }
    .logo{
      width: 38%;
    }
   div.card-body2 {
      padding-left: 0.625em;
      padding-right: 0.625em;
  }
    .fdpage-table {
       font-size: 0.75em;
    }

    .d-flex {
       margin-bottom: 1.625em;
    }
   .mobile-card-fe .d-flex {
      margin-bottom: 0em;
   }
 
    div.row.mt-4 {
       --bs-gutter-x: 1.5rem;
       --bs-gutter-y: 0;
       display: flex;
       flex-wrap: wrap;
       margin-right: calc(-0.5 * var(--bs-gutter-x));
       margin-left: calc(-0.5 * var(--bs-gutter-x));
       justify-content: center;
    }
    .top-key {
       width: 70%;
       padding-left: 0px;
       padding-right: 0px;
       margin-top: 0px;
    }
    .bank-fe {
       padding-top: 3.75em;
       width: 100%;
    }
    .key-text-main {
      font-size: 0.75em;
      color: black;
   }
   /*  top should be fix bcz of relative position */
    .top-bank-table {
       margin-top: -267px;
    }
     /*  top should be fix bcz of relative position */
    .bank-top-fe {
       position: relative;
       top: -273px;
    }
     /*  banner height should be fix */
    .banner {
       height: 370px;
    }
    .key-fe-img {
       width: 29%;
    }
    .banner-btn {
       width: 65%;
       right: 18%;
    }
    .intro {
      padding: 0.875em;
  }
  .BankTypeButton {
   font-size: 1em;
   padding: 0.75em;
}
.banner-heading h1{
   font-size: 3vw;
   font-weight: 800;
}
 }
 @media (max-width: 576px) {
   .modal-content {
      margin-top: 20%;
      width: 84%;
  }
  .logo{
   width: 48%;
 }
   .key-fe-card {
     
      cursor:default;
   }
   .key-fe-card:hover{
      box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
      rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
      rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
   }

    /*  banner height  should be fix */
   .banner{
      height: 310px;
   }
   .key-fe-desktop{
      display: none;
   }
   .mobile-card-fe{
      display: block;
   }
   .key-fe-img-mobile{
      width: 70%;
      width: 400;
      height: 200;
   }
   .banner-heading h1{
      font-weight: 400;
   }
   div.card-body2 {
      flex: 1 1 auto;
      padding: 1rem 2rem;
      color: var(--bs-card-color);
   }
   .top-bank-card {
      padding: 0px;
      width: 100%;
      margin-bottom: 4.688em;
   }

   .bank-card {
      width: 70%;
   }
   h5.card-title {
      font-size: 1.25em;
   }
   .card-text {   
     font-size: 1.063em
 }
 .sr-rate{
  margin: 0.313rem;

 }
   .clickable-row {
      font-size: 1em;
   }
   .rate-row {
      font-size: 1em;
   }
   a.btn.banner-btn {
      font-size: 1.125em;
   }

   .top-bank-table {
      margin-top: -295px;
   }
   .bank-fe {
      padding-top: 0px;
   }
   .key-fe-card {
      margin-bottom: 2.813em;
   }
   
    /*  top should be fix bcz of relative position */
   .bank-top-fe {
      position: relative;
      top: -233px;
   }
   .borderless tr td img {
      max-width: 1.375em;
      float: left;
      margin-right: 0.938em;
      margin-left: 0.938em;
      margin-top: 0.063rem;
   }

   .BankTypeButton{
     padding-left: 1.875em;
     padding-right: 1.875em;
     padding-top: 0.75em;
     padding-bottom: 0.75em;
   }
      #home table tr th:nth-child(5), #home table tr td:nth-child(5){
      display: none;
   }
   #profile table tr th:nth-child(5), #profile table tr td:nth-child(5){
      display: none;
   }
   #contact table tr th:nth-child(5), #contact table tr td:nth-child(5){
      display: none;
   }
   .banktab{
      display: none;
    }
    .bankmob{
      display: block;
    }
}
@media (max-width: 435px) {

   #offcanvasRight{
      width: 20rem;
   }
   .modal-content {
      margin-top: 28%;
      width: 90%;
  }
.card-text-mobile {
   margin: 0.36em;
   padding-bottom: 0.3em;
}
   .key-fe-img-mobile {
      width: 75%;
      width: 400;
      height: 200;
  }
   .banner-heading {
      padding-left: 0px;
      padding-right: 0px;
   }
   .banner-heading h1{
      font-size: 2.8vmax;
   }
   .break-point{
      display: none;
   }
   .banner{
      height: 318px;
   }
   .top-key {
      width: 80%;
   }
   .bank-card{
      width: 80%;
   }
   .bankname{
      margin-left: 0px;
   }
   .borderless tr td img {
      max-width: 1.375em;
      float: left;
      margin-right: 0.938em;
      margin-left: 0.313em;
      margin-top: 0.063em;
  }
  .bank-col-flex {
   display: inline-flex;
   padding-left: 4%;
}
 table.dataTable thead th, table.dataTable tbody td {
   padding: 0.5em;
   font-size: 0.75rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
   padding: 0.3em 0.6em;
}
}