* {
margin:0;padding:0;
box-sizing:border-box;
}
a{
    text-decoration:none !important;
}
body {
     font-family: "Hind", sans-serif !important;
     font-size:16px;
}
div:after {
    content:'';
    display:block;
    clear:both;
}
.gwaliormela-preheader-home {
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
}
.loginhome-btn {
  background-color: #3656a1;
  padding: 10px 50px;
  display: inline-block;
  border-radius: 50px;
  color: #fff;
  margin: 5px 0 0 0;
}
.gwaliorMela-banner {
    padding:20px 0;
    height: 100vh;
  
    background-image: url('../images/51720.jpg');
    background-size:cover;
    background-position:center bottom;
    position:relative;
    z-index:0; overflow:hidden;
}
.gwaliorMela-banner:after {
    content:'';
    position:absolute;left:0;right:0;
    top:0;width:100%;height:100%;
    z-index:-1;  background-color: #ffeee7;
    opacity:.9;
}
.logodept {
    display:block;
    margin-bottom:10px;height: 93px;

}
.gwaliorMela-banner h1 {
   font-size: 60px;
  font-weight: 800;color:#6f69cd;

}
.gwaliorMela-banner h1 span {
font-size:40px;
    color:#000;
}
.gwaliorMela-banner p {
    margin:0;padding:0;
    text-align:justify;
    font-size: 15px;
}
.mela-slider {
    padding:80px 0 0 0;position:relative;
    
}
.mela-slider .carousel  {
    height:400px;
   width:100%;
    position: absolute;
  right:-85px;
}
.mela-slider .carousel img {
    height:400px;border-radius:50px 0 0 50px;
    object-fit:cover;
}
.carousel-inner {
    border-radius: 50px 0 0 50px;
 /*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
/*box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;*/
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.mela-home-footer {
    position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

/* Inner page design */
.preheader-mela {
    width: 100%;
  padding: 6px 0;
  background: rgb(173, 232, 244);
    background-color: rgb(173, 232, 244);
  background-color: #09265b;
  color: #fff;
  font-size: 13px;
}
.preheader-mela a {padding: 5px;
  transition: 0.5s all;
  color: #fff;}
.preheader-mela a img {height:18px;}
.heighlight {
  background-color: #000;
  padding: 0px 3px !important;
  font-size: 12px;
  color: #fff !important;
}
.header-mela {
    background-color: #fff;
  box-shadow: 0px 13px 25px -12px rgba(0, 0, 0, 0.25);
  position:relative;
}
.mela-wrapper {
    height: 100%;
   min-height: 80vh;position:relative;
    z-index:0;
    background-color:#fff;

}
.mela-wrapper:after {
    content:'';
    position:absolute;left:0;top:0;
    width:100%;height:100%;
    z-index:-1;
        background-image: url('../images/morocco.png');
        opacity:.1;

}
.header-banner-mela {
    height: 100px;
    background-image: url('../images/headerbanner.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    padding: 40px 0;
    text-align: center;
    position:relative;z-index:0;
    margin-bottom:20px;
}
.header-banner-mela:after {
    content:'';position:absolute;left:0;top:0;
    width:100%;height:100%;
    z-index:-1;
   background-color: rgb(9, 38, 91);
  opacity: 0.5;
}
.header-banner-mela h4 {
    font-weight:600;font-size:30px;color:#fff;
}
.mpo-logo {

  margin: 25px 0 0 0;
}
.mpo-logo img {height:44px;}
/*table css start*/
.custom-table {
  min-width: 900px;
}
.custom-table thead tr, .custom-table thead th {
  padding-bottom: 14px;
  border-top: none;
  border-bottom: none !important;
  color: #000;
  /* background: linear-gradient(90deg, rgb(182 191 210) 0%, rgba(204, 222, 255, 1) 100%);*/
}
.custom-table tr th {
 background-color: #ffecc5;
  color: #0d0d0d !important;
  vertical-align: middle;
  padding: 10px !important;
}
 .custom-table tbody td {
     padding: 5px 10px !important;
  color: #000;
  font-weight: 400;
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  vertical-align: middle;
}
.custom-table tbody th small, .custom-table tbody td small {
  color: #b3b3b3;
  font-weight: 300;
}
.custom-table tbody tr {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
}
.custom-table .td-box-wrap {
  padding: 0;
}
.custom-table input[type=password], .custom-table input[type=text], .custom-table select {
padding:4px 10px;
  border-radius: 4px;
  background-color: #fff;
  border: #e7e7e7 1px solid;
  width: 100%;
}
.custom-table input[type=password]:focus, .custom-table input[type=text]:focus, .custom-table input[type=select]:focus {
  outline: 0;
box-shadow: 0 0 6px #ddd;
  border: #ddd 1px solid;
}
.custom-table input[type=password]:focus, .custom-table input[type=text]:focus, .custom-table input[type=select]:focus {
  border-radius: 5px;
}
.custom-table select {
  width: 100%;
}
.custom-table select:focus {
  outline: 0;
  box-shadow: 0 0 10px #c3dbff;
  border: #deedff 1px solid;
}
.custom-table select:hover {
  border: #ddd 1px solid;
  border-radius: 5px;
}
.custom-table input[type="radio"] {
  display: inline-block !important;
}
.custom-table textarea {
  padding: 7px;
  border-radius: 4px;
  background-color: #fff;
  border: #ddd 1px solid;
  width: 100%;
  resize: vertical;
}
.custom-table textarea:focus {
  outline: 0;
  box-shadow: 0 0 10px #c3dbff;
  border: #ddd 1px solid;
}
.custom-table4 td {
    width:25%;
}
.btn_custom-table {
  margin: 0;
  padding: 10px;
  background: linear-gradient(45deg, rgb(46 143 164) 0%, rgb(99 105 201) 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  transition: 0.5s ease all;
}
.btn_custom-table:hover {
  left: 0;
}
.footer-mela-in {
background-color: #09265b;
  color: #fff;
  padding: 5px 0;text-align:center;
}
/* Login page design */
/* Login page designs */
/* =========================================
   Login Screen Box
========================================= */

.login-container {
    width: 100%;
    max-width: 400px;
    margin:0 auto 0;
    padding:40px 0 40px 0;
}

.login-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.login-header p {
    color: #64748b;
    font-size: 0.875rem;
}

/* Form Styles */

.input-wrapper-mela {
    position: relative;
/*    display: flex;
    flex-direction: column;*/
}

.input-wrapper-mela input, .input-wrapper-mela select {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px 8px 16px;
    color: #1e293b;
    font-size: 16px;
    transition: all 0.2s ease;
    width: 100%;
    outline: none;
}
.input-wrapper-mela select {
    appearance:auto !important;
}
.input-wrapper-mela input:focus, .input-wrapper-mela select:focus {
     box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;border: 2px solid #5f7fa9;
}


 .input-wrapper-mela label {
 
    color: #64748b;
    font-size: 16px;
    transition: all 0.2s ease;
    pointer-events: none;
    transform-origin: left top;
} 


.input-wrapper-mela input:focus + label,
.input-wrapper-mela input:valid + label,
.input-wrapper-mela input.has-value + label {
    transform: translateY(-8px) scale(0.875);
    color: #6366f1;
    font-weight: 500;
}
    .input-wrapper-mela span {
        display:inline-block;
    }
    /* Password Toggle */
    .password-wrapper {
        position: relative;
    }

.password-wrapper input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 66%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #64748b;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #1e293b;
}

.eye-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.2s ease;
}

.eye-icon.show-password {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='1.5'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 11-4.243-4.243m4.242 4.242L9.88 9.88'/%3e%3c/svg%3e");
}
  /* Login */
.loginfields h3 {
    margin:0;
}

.help_popup {
    position: relative;
    display: inline-block;
}




    /* Tooltip text */
    .help_popup .help_popuptext {
        visibility: hidden;
        width: 350px;
        background-color: #fff;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        right: 18px;
        top: -100px;
        box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .help_popup:hover .help_popuptext {
        visibility: visible;
        padding: 10px;
    }

    .help_popup ul {
        margin: 0;
        padding: 0;
    }

        .help_popup ul li {
            padding: 8px 8px 8px 34px;
            border-bottom: 1px solid #A3E0E6;
            text-align: left;
            line-height: 19px;
            color: #484848;
            font-size: 14px;
            text-indent: -21px;
            list-style-position: inside;
        }

            .help_popup ul li:last-child {
                border: none;
            }

    .help_popup h2 {
        padding: 10px;
        color: #000;
        font-size: 18px;
        text-align: left;
        border-bottom: 2px solid #ccc;
        margin: 0;
    }

.login_captcha_area {
    background-color: #fff;
    padding: 10px;
    margin: 22px 0 0 !important;
    border: 2px solid #e2e8f0;
  border-radius: 8px;
}

.login_c-img {
    width: 33%;
}

    .login_c-img img {
        margin-top: 0 !important;
        vertical-align: middle;
    }

.login_c-img_input {
    width: 37% !important;
}

    .login_c-img_input input {
        width: 100% !important;
        outline: none;
      
    }

        .login_c-img_input input:visible {
            border: 1px solid #1d82ae !important;
        }

.login_captcha_area input[type="text"] {
    /*width: 45%;*/
    padding: 8px;border: 2px solid #e2e8f0;
  border-radius: 8px;
    /*border: 1px solid #95dede;*/transition: all 0.2s ease;
}


.login_captha_icn input[type="image"] {
    height: 20px !important;
    margin: 9px 5px;
}
.login_captcha_area input[type="text"]:focus {
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  border: 2px solid #5f7fa9;
}
.login_captha_icn img {
  height: 20px;
  margin: 9px 5px;
}
/* Form Options */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.remember-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.remember-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-label {
    color: #64748b;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: white;
}

.remember-wrapper input[type="checkbox"]:checked ~ .checkbox-label .checkmark {
    background: #6366f1;
    border-color: #6366f1;
}

.remember-wrapper input[type="checkbox"]:checked ~ .checkbox-label .checkmark::after {
    content: '✓';
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.forgot-password {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.forgot-password:hover {
    color: #4f46e5;
}

/* Button */
.login-btn {
    width: 100%;
    background: #6366f1;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 24px;
}

.login-btn:hover {
    background: #4f46e5;
}

.login-btn:active {
    transform: translateY(1px);
}
/* Forgot password */
.forgotpass-title-content {
    background-color: #142a5e;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  color:#fff;
    position: relative;
    z-index: 1;
}
.forgot__image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    background-image: url('../images/6195699.png');
}
.forgotpass-title-content h4 {
    margin:0;
    padding:0;
}
.forgotFields {
 padding: 30px 30px;
  background-color: rgba(255,255,255,.5);
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  position: relative;border-radius:0 0 10px 10px;

 margin-top: -13px;
}
.forgotbox {
    padding:0 80px;margin: 0 0 20px;
    
}
.forgotpass-image {
    padding:50px 0 0 0;
}
/* Logoff page */
.logofficn-image {
    width:400px;
    margin:0 auto;
}
.instruction-page p {font-size:20px;
                     text-align:center;
                     margin-top:20px;
}
/* Signup page design */
.signup-image {
    margin:-20px 0 0 -100px;
    width:100%;height:100%;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
.signupbox {
    padding:20px 37px;width:100%;
}
@media (max-width: 999px) {
   .gwaliormela-preheader-home.position-absolute {
        position:static !important;padding: 0 0 5px;
    }
.gwaliorMela-banner {
  height: 100%;
}
 .mela-slider .carousel {
  height: 400px;
  width: 100%;
  position: static;

}
 .mela-home-footer {
  position: static;
 
}
 .forgotpass-image {
     display:none;
 }
    .forgotbox {
        padding: 0 20px;
    }
    .signup-image {display:none;}
    .signupbox {
  padding: 20px 17px;
}
}
/* Extra small devices (phones, portrait, less than 576px) */
@media (max-width: 575.98px) {
     .login_c-img_input {
  width: 100% !important;
}
     .mpo-logo {display:none;}
}

/* Small devices (phones landscape, ≥576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* CSS for landscape phones */
}

/* Medium devices (tablets, ≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* CSS for tablets */
}

/* Large devices (desktops, ≥992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* CSS for small desktops/laptops */
}

/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* CSS for large desktops */
}

/* Extra extra large devices (≥1400px) */
@media (min-width: 1400px) {
  /* CSS for very large screens */
}

/* Portrait */
@media (orientation: portrait) {
  /* CSS for vertical screen */
}

/* Landscape */
@media (orientation: landscape) {
 
}

/*Server Name*/

 

.server_name {
    /* width: 50px; */
    width: auto;
    padding: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background-color: #ff4b4b;
    position: fixed;
    border-radius: 8px 8px 0 0;
    right: 0;
    bottom: 0;
    text-transform: uppercase;
    z-index: 1;
}