/* common css */
* {
    margin: 0;
    padding: 0;
   }
   
   /* Custom color */
   
   :root {
    --black: #000000;
    --gray-black: #373435;
    --white: #FFFFFF;
    --red: #213366;
    --red-new: #ED0058;
    --red-gradient: #213366;
    --red-gradient-hover: #121F43;
    --yellow-gradient: #ED0058;
    --body-text: #ED0058;
    --body-font: "Roboto", sans-serif;
   }
   
   /* common css */
   body {
    background-color: #eeeeeebf !important;
    font-family: var(--body-font);
    font-size: .875rem !important;
    border: 0;
    margin: 0;
    padding: 0;
    top: 0 !important;
   }
   
   a,
   a:hover,
   a:link,
   a:visited {
    color: inherit;
    transition: .2s ease;
    text-decoration: none;
   }
   
   
   ol,
   ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
   }
   
   aside input::placeholder {
    color: var(--white) !important;
   }
   
   #countryList li {
    border-bottom: 2px solid #eeeeee;
    padding: 0 10px;
   }
   
   .start-20 {
    left: 20%;
   }
   
   /* end */
   /* typography */
   .heading-title {
    color: var(--red);
   }
   
   .small-text {
    font-size: .7rem;
    color: var(--body-text)
   }
   
   p {
    text-align: justify;
   }
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
    color: var(--red) !important;
   }
   
   /* custom css start */
   .header {
    transition: margin-left .3s ease-in-out;
    margin-left: 200px;
   }
   
   .header .top-nav,
   .header nav {
    padding-right: 16%;
   }
   
   .navbar .nav-link.active {
    background-color: #ed00589e;
    border-bottom: 5px solid #ed0058;
   }
   
   .sidebar-footer {
    border-top: 5px solid #ed0058 !important;
   }
   
   .offcanvas .card-header {
    background-color: #ed0058 !important;
   }
   
   .header-form input {
    width: 130px;
    height: 36px;
    font-size: 12px;
   }
   
   .btn-red-gradient {
    background: var(--red-gradient);
   }
   
   .btn-red-gradient:hover,  .btn-red-gradient:active, .btn-red-gradient:focus, .btn-red-gradient:disabled {
    background: #16244c !important;
   }
   
   .btn-green-gradient {
    background: linear-gradient(#1c7401, #017a1c);
   }
   
   .btn-green-gradient:hover {
    background: linear-gradient(#017a1c, #1c7401);
   }
   
   .text-danger {
    color: var(--red) !important;
   }
   
   .text-pink {
    color: #ed0058 !important;
   }
   
   .bg-red-color {
    background-color: var(--red);
   }
   
   .bg-pink {
    background-color: var(--red-new);
   }
   
   .contact-list {
    list-style: disc;
   }
   
   /* sidebar */
   aside {
    height: 100vh;
    overflow-y: hidden;
    z-index: 1038;
    position: fixed;
   }
   
   .offcanvas {
    visibility: visible !important;
   }
   
   aside .offcanvas.offcanvas-start {
    transform: translateX(0%);
    width: 200px;
    overflow-y: scroll;
   }
   
   .logo {
    width: 100%;
    height: 8rem;
   }
   
   aside .offcanvas.offcanvas-start::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
   }
   
   aside .offcanvas.offcanvas-start::-webkit-scrollbar-button {
    background: #ccc
   }
   
   aside .offcanvas.offcanvas-start::-webkit-scrollbar-track-piece {
    background: #d3d3d3
   }
   
   aside .offcanvas.offcanvas-start::-webkit-scrollbar-thumb {
    background: #9f9d9d
   }
   
   .footer-logo {
    width: 100%;
    height: 200px;
   }
   
   /* main */
   .main-container {
    transition: margin-left .3s ease-in-out;
    margin-left: 200px;
   }
   
   .main-container .img-box {
    width: 30%;
    height: 200px;
   }
   
   .main-container .form-check-input {
    background-color: #bfc0c6;
    height: 16px;
    width: 16px;
    box-shadow: none;
   }
   
   .main-container .form-check-input:checked {
    background-color: #031474;
   }
   
   a.yellow-gradient {
    background: var(--red-new);
    color: #fff;
   }
   a.yellow-gradient:hover {
    background: #ba0145;
    color: #fff;
   }
   .yellow-gradient {
    background: linear-gradient(#FDB931, #FEDB37, #FDB931);
   }
   
   .red-gradient {
    background: var(--red-gradient);
   }
   .red-gradient {
    background: var(--red-gradient);
   }
   
   .bg-yellow-graident {
    background: var(--yellow-gradient);
   }
   
   
   .main-container .dropdown-menu {
    min-width: 500px;
   }
   
   /* image section */
   .card-img-top {
    height: 340px;
   }
   
   .top-badge {
    width: 3.55rem;
    height: 3.55rem;
    font-size: .75rem;
    color: var(--white);
    background: linear-gradient(#531160, #6b2485, #9051b2);
   }
   
   .bottom-badge {
    width: 6.5rem;
    height: 4.55rem;
    font-size: .75rem;
    color: var(--white);
    background: linear-gradient(#0856aa, #0570c9, #047dd9);
    transform: rotate(45deg);
    margin: 0 0 -25px -44px;
   }
   
   .page-item:hover .page-link,
   .page-item.active .page-link,
   .page-item:focus .page-link {
    background-color: var(--red);
    color: var(--white);
    box-shadow: none;
   }
   
   .page-item.disabled .page-link {
    background-color: #fecdd2;
   }
   
   /* links*/
   .links {
    color: var(--red) !important;
   }
   
   /* right sidebar */
   .negative-margin {
    margin-top: -48%;
    position: relative;
   }
   
   .right-img-box {
    height: 150px;
   }
   
   /* footer */
   footer {
    border-top: 6px solid var(--red);
    margin-left: 200px;
   }
   
   .footer-list li {
    color: white;
   }
   
   .text-area {
    width: 60%
   }
   
   /* wizard form  */
   .w-80 {
    width: 80%;
   }
   
   .input-validation.invalid {
    background-color: #ffdddd !important;
   }
   
   .tab {
    display: none
   }
   
   #nextBtn {
    background: linear-gradient(#1c7401, #017a1c);
   }
   
   #nextBtn:hover {
    background: linear-gradient(#017a1c, #1c7401);
   }
   
   #prevBtn {
    background-color: #bbbbbb
   }
   
   .step {
    height: 15px;
    width: 15px;
    background-color: #f0f0f0;
    opacity: 0.5
   }
   
   .step.active {
    opacity: 1;
    background: var(--red-new);
   }
   
   .step.finish {
    background: var(--red);
    opacity: 1
   }
   
   .step-bar {
    background-color: #f0f0f0;
    padding-left: 40px !important;
    color: #000000 !important;
   }
   
   .step-bar.active {
    background-color: var(--red-new);
    color: #fff !important;
   }
   
   .step-bar.finish {
    background: var(--red);
    color: #fff !important;
   }
   
   .step-bar:hover {
    background-color: var(--red-new);
    color: #fff !important;
   }
   
   .step-bar:first-child::before {
    display: none;
   }
   
   .step-bar:first-child {
    padding-left: 18px !important;
   }
   
   .step-bar::after {
    content: "";
    position: absolute;
    left: 99%;
    top: 0px;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 22px solid #f0f0f0;
    z-index: 9;
   }
   
   .step-bar.active::after {
    border-left: 22px solid var(--red-new);
   }
   
   .step-bar.finish::after {
    border-left: 22px solid var(--red);
   }
   
   .step-bar:hover::after {
    border-left: 22px solid var(--red-new);
   }
   
   /* upload image */
   .pip {
    width: 180px;
    height: 120px;
   }
   
   /* custom */
   .input-img-field {
    border: 1px dashed #444;
   }
   
   .file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
   }
   
   /* profile page */
   .profile-card .card-img-top {
    height: 330px;
   }
   
   .top-ribbon {
    width: 60px;
    padding: 4px;
    text-align: center;
    transform: rotate(20deg);
    background-color: #ff9800;
    color: white;
   }
   
   .review-badge {
    width: 3.55rem;
    height: 3.55rem;
    top: 30%;
    left: 5%;
    font-size: .75rem;
    background: linear-gradient(to bottom, #09a92b, #1c7401);
   }
   
   .cover-ribbon {
    height: 10rem;
    width: 10rem;
    right: -1%;
    top: -1%;
   }
   
   .cover-ribbon-inside {
    transform: rotate(45deg);
    right: -38px;
    top: 22px;
    width: 160px;
   }
   
   .cover-ribbon-inside:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #7f5a03;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #7f5a03;
   }
   
   .cover-ribbon-inside:after {
    content: '';
    position: absolute;
    right: 0%;
    top: 100%;
    z-index: -1;
    border-right: 3px solid #7f5a03;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #7f5a03;
   }
   
   .profile-imgs-box {
    width: 32.67%;
    height: 6.25rem;
   }
   
   .profile-btn {
    width: 32.5%;
   }
   
   table td {
    vertical-align: middle;
   }
   
   thead tr td {
    background-color: var(--red) !important;
   }
   
   .blur {
    filter: blur(3px);
   }
   
   /* new page */
   .w-70 {
    width: 70%;
   }
   
   .account-type-card {
    min-height: 15rem !important;
   }
   
   .account-type-card img {
    max-height: 14rem;
   }
   
   .side-imge-box {
    width: 35%;
   }
   
   /* days */
   .day-container input[type='checkbox'] {
    width: 1.6rem;
    height: 1.6rem;
   }
   .title-dropdown .dropdown{
    border-bottom: 5px solid transparent !important;
   }
   .title-dropdown .dropdown:hover{
    background-color: #ddd;
    border-bottom: 5px solid var(--red-new) !important;
   }
   .title-dropdown .dropdown:hover .dropdown-menu{
    display: block !important;
    top: 100%;
   }
   .title-dropdown .dropdown:hover .dropdown-menu.show{
    top: 100% !important;
   }
   .check-box-ul .form-check{
    border-bottom: 5px solid transparent !important;
   }
   .check-box-ul .form-check:hover{
    border-bottom: 5px solid var(--red-new) !important;
   }
   /* mobile media query */
   @media (max-width:767px) {
   
    .header,
    .main-container,
    footer {
     margin: 0px;
    }
   
    .header .top-nav,
    .header nav {
     padding-right: 0%;
    }
   
    .top-nav {
     justify-content: space-between !important;
     padding-right: 5px !important;
     padding-left: 5px;
    }
   
    .top-nav ul {
     order: 3;
     width: 100%;
    }
   
    .header-form {
     justify-content: end !important;
     order: 3;
    }
   
    .dropdown-center {
     display: flex;
     order: 1 !important;
    }
  
    .logo {
     height: 13rem;
    }
   
    .navbar,
    .navbar .collapse {
     z-index: 9999;
    }
   
    .navbar .collapse.show {
     position: absolute;
     top: 0px;
     left: 0px;
     right: 0px;
     width: 100vw;
     background: black;
     z-index: 9999;
     height: 500px;
     overflow-y: scroll;
     padding: 10px;
    }
   
    /* aside */
    aside {
     position: static !important;
     height: 100% !important;
     top: auto;
    }
   
    .btn-aside {
     position: absolute;
     top: 20%;
     left: 0;
     background-color: #031474;
     z-index: 999;
    }
   
    aside .offcanvas.offcanvas-start {
     transform: translateX(-100%);
    }
   
    div#sidebar {
     width: 75%;
    }
   
    /* main */
    .negative-margin {
     margin-top: 0;
    }
   
    .main-container .dropdown-menu {
     min-width: 330px;
     left: auto !important;
     right: auto !important;
    }
   
    footer {
     margin-top: 10px;
    }
   
    .footer-list {
     border-bottom: 1px solid #ddd;
    }
   
    .text-area {
     width: 100%;
    }
   
    .hstack {
     flex-wrap: wrap;
    }
   
    /* profile page */
    .profile-imgs-box {
     width: 49.4%;
    }
   
    .contact-card .w-25 {
     width: 36% !important;
    }
   
    .contact-card .start-20 {
     left: 36%;
    }
   
    .contact-card .contact-button.w-50 {
     width: 100% !important;
    }
   }
   
   @media (min-width:768px) and (max-width: 1023px) {
    .profile-imgs-box {
     width: 48.4%;
    }
   
    .contact-card .contact-button.w-50 {
     width: 100% !important;
    }
   }
   
   @media (min-width:1200px) and (max-width: 1920) {
    .negative-margin {
     top: 36%;
    }
   }
   
   /* for theme css */
   
   .header nav.navbar {
    background-color: #213366 !important;
   }
   
   .header .top-nav,
   .header nav {
    padding-right: 16%;
    background-color: rgb(7 26 79) !important;
   }
   
   header.border-danger {
    border-top: 5px solid #ed0058 !important;
   }
   
   .btn-danger {
    background: #ed0058 !important;
   }
   
   footer.bg-black {
    background-color: rgb(7 26 79) !important;
   }
   
   footer .footer-list li a,
   footer p.text-white {
    color: #fff !important;
   }
   
   footer .footer-list li a:hover,
   footer p.text-white:hover {
    color: #ed0058 !important;
   }
   
   footer .row {
    border-bottom: 1px solid #ed002554;
    padding-bottom: 5px;
    justify-content: space-around;
   }
   
   header input::placeholder {
    color: #ffffff !important;
   }
   
   body div.bg-white {
    background-color: #fefcfb !important;
   }
   
   td.text-danger svg {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
   }
   
   td.text-danger svg.text-success {
    color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
   }
   
   svg.text-danger {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
   }