body {
   font-family: 'Righteous';
}
.jumbotron {
   position: relative;
   background-color: white !important; /* Background color for the right half */
   padding: 2rem 1rem;
}
.jumbotron::before {
   content: '';
   position: absolute !important;
   top: 0;
   left: 0;
   width: 50% !important;
   height: 100% !important;
   background-color: #48296d  !important; /* Background color for the left half */
   z-index: 0;
}
.form-container {
   z-index: 1;
}
.badge{
   font-weight: 100 !important;
}

.form-form .form-form-wrap form .field-wrapper input {
   display: inline-block;
   vertical-align: middle;
   border-radius: 0;
   min-width: 50px;
   max-width: 635px;
   width: 100%;
   min-height: 36px;
   background-color: #ffffff;
   border: none;
   -ms-transition: all 0.2s ease-in-out 0s;
   transition: all 0.2s ease-in-out 0s;
   color: #3b3f5c;
   font-weight: 600;
   font-size: 20px;
   font-weight: 400;
   border-bottom: 2px solid #000000 !important;
   padding: 0px !important;
}

.loginbtn{
   background-color: #48296d  !important;
   border-color: black;
   border-radius: 25px;
}
.ListBtn{
   background-color: #2c81ff;
   padding: 5px 8px;
   border-radius: 10px;
   color: white;
   font-weight: 100;
   font-size: 18px;
   margin: 1px;
}
.ListBtn:hover{
   color: white;
}
.page-title {
   float: none;
   margin-top: 0;
   margin-bottom: 0;
   align-self: center;
   padding-right:0px;
   border-right: 0px solid #bfc9d4;
   margin-right: 0px;
}

.input-group-addon {
   z-index: 3;
   cursor: pointer;
   display: block; /* Initially hide the eye icon */
}
.svg-eye-on {
   display: none; /* Initially hide the eyes on icon */
}
.form-form .form-form-wrap form .field-wrapper svg {
   position: absolute !important;
   top: 20px !important;
   color: #000000 !important;
   fill: rgba(27, 85, 226, 0.239216) !important;
   right: 1px !important;
}
.form-form .form-container {
   align-items: center;
   display: flex;
   flex-grow: 1;
   padding:0px;
   width: 100%;
   min-height: 100%;
}

#sidebar ul.menu-categories.ps {
   height: calc(100vh - 71px) !important;
   background-color: #28a8e9  !important;
}
.exportBnt{
   float: right;
   background-color: #2C81FF;
   color: white;
   font-weight: 200 !important;
   border-radius: 12px;
}
.exportBntblk{
   float: right;
   background-color: #28a745;
   border-color: #28a745;
   color: #fff;
   font-weight: 200 !important;
   border-radius: 12px;
}
.exportBntblk:hover{
   float: right;
   background-color: #28a745 !important;
   border-color: #28a745 !important;
   color: #fff;
   font-weight: 200 !important;
   border-radius: 12px;
}
.dataTables_wrapper {
   padding: 5px;
   border: 2px solid #f1f2f3;
   border-radius: 8px;
   margin-top: 10px;
   background-color: #fefefe;
   box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06) !important;
   /* margin-top: 45px; */
}

.btn-lg {
   padding: 7px 40px;
   font-size: 16px;
   font-weight: 200 !important;
   margin-top: 8px;
}

.btn-import-cancel {
   color: #fff !important;
   background-color: #2c81ff !important;
   border-color: #2c81ff;
   box-shadow: 0 10px 20px -10px #2c81ff;
   border-radius: 10px;
}

.table > thead > tr > th {
   text-transform: initial;
   font-weight: 500 !important;
   border-top: none;
   background: #fff;
   border-right: none;
   border-left: none;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 0;
   transition: all 0.1s ease;
   padding: 10px 21px 10px 21px;
   color: #515365;
   font-weight: 600;
   font-size: 14px;
}
div.dataTables_wrapper div.dataTables_length label {
   text-align: left;
   white-space: nowrap;
   color: #0e1726;
   font-weight: 200;
}
.page-item.active .page-link {
   z-index: 3;
   color: #fff;
   background-color: #2c80fe !important;
   border-color: #007bff;
}

.widget-content-area {
   /* padding: 20px !important; */
   position: relative;
   background-color: #fafafa;
}
.widget-content-area {
   border:none;
   box-shadow:none;
   padding: 0;
}

.search-container {
   position: relative;
   display: flex;
   align-items: center;
}

.searchInput {
   padding-left: 30px; /* Add some left padding to make space for the icon */
}

.search-icon {
   position: absolute;
   left: 10px; /* Adjust this value as needed */
   pointer-events: none; /* Ensure the icon doesn't block input clicks */
}
.search-container {
   position: relative;
}

.search-container input {
   padding-left: 35px; /* Adjust based on the icon size */
}

.search-container .search-icon {
   position: absolute;
   left: 10px; /* Adjust based on the padding */
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
}


.search_field .form-control {
   border: 2px solid #eaf1ff;
   color: #3b3f5c;
   font-size: 15px;
   height: calc(1.4em + 1.4rem + 4px);
   border-radius: 20px;
   background-color: #fff;
}

.page-item:first-child .page-link, .page-item:last-child .page-link {
   border-radius: 15%;
   padding: 5px 9px;
   background-color: #2c81ff !important;
}

div.dataTables_wrapper div.dataTables_info {
   padding-top: 0.85em;
   white-space: normal;
   color: #fff;
   font-weight: 200;
   border: 1px solid #2c81ff;
   display: inline-block;
   padding: 10px 16px;
   border-radius: 6px;
   font-size: 13px;
   background-color: #2c81ff;
}

.btn:hover, .btn:focus {
   color: #fff;
   background-color: #2c81ff;
   border-color: #2c81ff;
   box-shadow: 0 2px 5px 0 #e0e6ed, 0 2px 10px 0 #e0e6ed;
   transform: translateY(-3px);
}
.btnBgTop{
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   flex-direction: column;
   box-shadow: 0px 4px 4px 0px #00000040;
   background-color: #F5F8FA;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}

.btnBgBottom{
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   flex-direction: column;
   box-shadow: 0px 4px 4px 0px #00000040;
   background-color: #F5F8FA;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
}
.upload-container {
   position: relative;
   width: 100%;
   height: auto;
   /* border: 1px solid #ccc; */
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   flex-direction: column;
   /* box-shadow: 0px 4px 4px 0px #00000040; */
   background-color: #F5F8FA;
 }

 .upload-container img {
   max-width: 100%;
   max-height: 80%;
 }

 .upload-container input[type="file"] {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
 }

 .upload-text {
   position: absolute;
   bottom: 10px;
   text-align: center;
   font-size: 14px;
   color: #333;
 }
 .btn_search .btn-warning{
   color: #fff !important;
   background-color: #2c81ff;
   border-color: #2c81ff;
   box-shadow: 0 10px 20px -10px #2c81ff;
   border-radius: 10px;
 }

 .btn_search .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active {
   color: #0e1726;
   background-color: #2c81ff;
   border-color: #2c81ff;
}
.contact .info label {
   color: #19191a;
   font-size: 13px;
   letter-spacing: 1px !important;
   margin-bottom: 0px !important;
}

/* Mobile Devices */
@media (max-width: 480px) {
   .jumbotron::before {
      content: '';
      position: absolute !important;
      top: 0;
      left: 0;
      width: 50% !important;
      height: 100% !important;
      background-color: white !important; /* Background color for the left half */
      z-index: 0;
   }
}
@media (min-width: 481px) and (max-width: 767px) {
   .jumbotron::before {
      content: '';
      position: absolute !important;
      top: 0;
      left: 0;
      width: 50% !important;
      height: 100% !important;
      background-color: white !important; /* Background color for the left half */
      z-index: 0;
   }
}