/* =========================
   Base, Typography
   ========================= */
body {font-family:'Poppins','Noto Sans Malayalam',sans-serif;font-size:14px;line-height:1.5rem; background: #f3f5f7;}
.font-weight-bold {font-weight:600!important;}
h1,h2,h3,h4,h5 {font-family:'Poppins','Noto Sans Malayalam',sans-serif;font-weight:600;}
small {font-size:13px;}
a:hover {text-decoration:none;}
nav {box-shadow:0 .2rem 1rem rgba(0,0,0,.1)!important;}
nav .nav-link {font-weight:500;color:rgba(0,0,0,.75)!important;line-height:35px!important;padding-left:.75rem!important;padding-right:.75rem!important;}
nav .nav-item {border-right:1px solid #eee;}
nav .active .nav-link {background:#5d77f7;color:#fff!important;}
nav .nav-link:hover {background:#efefef;}
nav .active .nav-link:hover {background:#4963e5;color:#fff!important;}
nav .dropdown-item {font-size:14px;}
strong{font-weight: 600}
.fw-semibold{font-weight: 500 !important}

/* =========================
   Menu, Navigation
   ========================= */
.logo { max-height:38px;}
.menu {cursor:pointer; width: 100%}
.menu-div{background-color: #fff;}
.menu-btn{font-size: 24px; cursor: pointer;}
.menu .bi{float: left; margin-right: 1rem; font-size: 15px;}
.menu .nav-link{color: #333; font-weight: 400; font-size: 14px}
.menu .nav-item:hover{color: #000; background: #f8f8f8; border-top-right-radius: 16px; border-bottom-right-radius: 16px;}
.menu .active{background-color: #eff2ff !important; color: #314baa; border-left :4px solid #314baa;border-top-right-radius: 16px; border-bottom-right-radius: 16px;}
.menu .active a{color: #314baa !important;}
.menu .arrow{font-size: 12px; margin-top: 10px}

.submenu .nav-link{border-color: #eee; color: #636363; font-size: 13px; line-height: 1rem}
.submenu .nav-link:hover{border-color: #ccc; background: #fff; color: #000 !important}
.menu .submenu a{color: #636363 !important; border-left: none !important; border-radius: 14px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.menu .submenu a:hover{color: #636363 !important; background: #f5f5f5}
.submenu .active{color: #314baa !important; background: #fff !important; font-weight: 600 !important}

.nav-tabs .active {color:#000 !important;}
.nav-tabs .nav-item small {font-size:16px;}
.nav-pills a {cursor:pointer;}
.nav-pills .nav-item {position:relative;}
.nav-pills .nav-item hr {position:static; margin-top:15%;}
.nav-pills .nav-item small {font-size:18px !important; font-weight:bold;}
.nav-pills .nav-link {border-radius:20px; background:#fafafa; border:1px solid #ccc; padding:.3rem .75rem; margin-right:5px; color:#333;}
.nav-pills .nav-link:hover {box-shadow:0 .2rem .8rem rgba(0,0,0,.1)!important;}
.nav-pills .active{background: #ffce57 !important; border:1px solid #f1bb38; color: #252525 !important}
.nav-justified .nav-item .material-icons {font-size:27px; border-radius:50%; right:20%; top:7px;}
.nav-justified .nav-link {background:#fff !important; margin-bottom:8px; position:absolute; left:0; right:0; top:0; margin-left:30px; margin-right:30px; color:#888;}
.nav-justified .nav-item .active {color:#000 !important;}
.link {color:#666;}
.link:hover {color:#333;}
.sub-links a {display:block; margin-bottom:10px; padding-left:25px; color:#444;}
.sub-links a:hover {text-decoration:none; background-image:url("../img/side-drop-bg.png"); background-repeat:no-repeat;}
.sub-links .active {color:#000; font-weight:bold; background-image:url("../img/side-drop-active-bg.png"); background-repeat:no-repeat;}


/* =========================
   Tables
   ========================= */
.border-bottom, .border-top {border-color:#efefef!important;}
.table th, .table td {vertical-align:middle; color: #666; border-color: #ededed!important;}
.table .text-body{color: #666 !important}
.data-folders .table td, .data-folders .table th {vertical-align:middle!important; line-height:36px; font-size:15px;}
.data-folders .folder {font-size:36px;}
.data-folders .edit {font-size:20px;}
.action-table td, .action-table th {vertical-align:middle;}
.table-gap-left {border-collapse:separate; border-spacing:1em;}
.table thead th {background-color: #fafafa; font-weight: 600 !important; border:none; color: #333; font-size: 13px}
.table tbody tr:hover {background-color:#fafafa; cursor:pointer;}
.table-responsive .border-bottom {border-color:#f2f2f2!important;}
.table-responsive::-webkit-scrollbar {height:6px;}
::-webkit-scrollbar-track {background:#f1f1f1;}
::-webkit-scrollbar-thumb {background:#888;}
::-webkit-scrollbar-thumb:hover {background:#666;}


/* =========================
   Buttons, Pills & Side Menu
   ========================= */
.btn {height:48px;line-height:30px; font-weight: 500}
.btn-lg {font-size:14px!important;}
.btn-primary {background-color:#5d77f7;border-color:#5d77f7;font-size:16px!important;}
.btn-primary:hover {background-color:#4963e5;border-color:#4963e5;}
.bg-primary {background:#5d77f7!important;}
.border-primary {border-color:#26a3db!important;}
.text-primary {color:#148fcc!important;}
.btn-success {background-color:#07d372;border-color:#07d372;}
.add-option-btn:hover {background-color:#d6f1ff!important;}
.btn-sm {height: 32px; line-height: 24px; font-size: 14px !important; white-space: nowrap;}
.card-link{padding-left:10px; color:#444; background-color: #fafafa}
.card-link:hover{color:#444; background-image:url("../img/side-drop-bg.png"); background-repeat:no-repeat;}
.card-scroll .card {border-radius:20px;}
.side-btn {min-height:92.5vh;border-right:1px solid #ddd;}
.side-btn .card {font-size:14px;line-height:.9rem;color:#444;border:none;margin-top:10px;padding:0;text-align:center;}
.side-btn .card:hover {text-decoration:none;}
.side-btn .card .material-icons {background-color:#7250a1;color:#fff;display:block;height:56px;width:56px;line-height:56px;border-radius:12px;margin-bottom:7px;font-size:30px;margin-left:auto;margin-right:auto;}
.side-btn .card .active {background-color:#28a745;}
.summery .list-group-item {padding-left:7px;padding-right:7px;color:#444;border-color:rgba(0,0,0,.06);}
.summery .list-group-item .material-icons {color:#bbb;font-size:22px;}


/* =========================
   Forms, Inputs & Controls
   ========================= */
.form .input-group {border-radius:0;}
.form .input-group-prepend {min-width:280px;width:25%;display:block;}
.form .input-group-prepend .input-group-text {font-size:17px!important;font-weight:bold!important;line-height:1.5rem;padding-top:12px;border-bottom:none;border-radius:0;height:100%;display:block;text-align:left;background-color:#f2f2f2;color:#1a1a1a;white-space:break-spaces;}
.three-row .input-group-prepend {min-width:110px;max-width:120px;}
.three-row .input-group-prepend .input-group-text {line-height:2rem!important;}
.three-row .input-group-prepend:first-child {width:25%;min-width:200px!important;display:block;}
.form-group {border-bottom:1px solid #ddd;border-right:1px solid #ddd;}
.form-control {color:#000;}
.form-control:active,
.form-control:focus {box-shadow:none;}
.form .form-control:active,
.form .form-control:focus {box-shadow:inset 0 -1px 0 #26a3db;}
.form-group input,
.form-group select {border-bottom:none;border-right:none;height:inherit;font-size:17px;border-color:#ddd!important;border-radius:0;height:100%!important;min-height:48px;}
.form-group textarea {border-bottom:none;border-right:none;font-size:17px;border-color:#ddd!important;border-radius:0;resize:none;}
.three-row .form-control {height:inherit;}
.form h5 {font-size:18px;}
.form .form-control, .form .form-select {min-height: 48px; font-size: 14px; border-color: #ccc !important; border-radius: 8px}
.form .form-control-sm, .form .form-select-sm {max-height: 40px !important; min-height: 40px !important;}
.form .form-check-input {border-color: #999 !important; margin-right: .5rem !important;}
.form .btn{min-height: 48px;}
.form .btn-sm{min-height: 28px; font-size: 13px}
.form .input-group-prepend {border-color: #ccc !important; border-radius: 8px !important}
.input-group-append{font-size: 13px; }
.form label{width: 100%; position: relative;}
.form label input:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); border-radius: 8px}
.form label select:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); border-radius: 8px}
.form label textarea:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); border-radius: 8px}
label span:first-child{font-size: 12px; font-weight: 500; background: #fff; padding: 0 5px; position: absolute; left:13px; top: -4px; z-index: 1000; text-transform: uppercase; color: #666}
.input-group-append label:hover{color: #5878eb; cursor: pointer; font-weight: 500}
.input-group-append label:hover input{border-color: #5878eb !important}
.input-group .input-group-text{font-size: 16px; line-height: 48px; min-height: 48px; border-right: none;}
.rounded-3{border-color: #ccc !important; border-radius: 8px !important}
.active-field {background-color:#d6f1ff!important;box-shadow:inset 0 -1px 0 #26a3db;}
.search-form input{border:1px solid #b3b3b3;}
.search-form .input-group-text{border-color:#b3b3b3; padding-left:8px !important;}
input:disabled, textarea:disabled, select:disabled, input:read-only{background-image:url('../img/disable-bg.png'); background-repeat:repeat; background-color:transparent;}
.disable-bg{background-image:url('../img/disable-bg.png'); background-repeat:repeat; background-color:transparent; margin-bottom:0 !important; padding-bottom:5px;}
.disable-bg label{color:#ccc !important;}
.modal .btn{font-size:14px; font-weight:600;}
.toggle{font-size:46px !important; color:#bbb; cursor:pointer; line-height:1.5rem !important;}
.rural{min-width:75% !important; display:block;}
.user-form .rural{min-width:70% !important; display:block;}
.active-border{border-right:4px solid #26a3db;}
.image-holder {width:182px;height:auto;background-color:#f2f2f2;font-size:14px;font-weight:bold;padding:15px;}
.check-group {margin-top:4px;}
.check-group .form-check-label {position:relative;padding-top:8px;font-size:15px!important;font-weight:500;color:#555;}

.check-group input[type="radio"]:checked+span,
.check-group input[type="checkbox"]:checked+span {color:#007bff;}
.num-plus1{color:#333; font-size:24px; line-height:31px; width:30px; text-align:center; right:133px; top:0; cursor:pointer; display:inline-block;}
.num-min1{color:#333; font-size:24px; line-height:31px; width:30px; text-align:center; right:163px; top:0; cursor:pointer; display:inline-block;}
.num-plus{color:#333; font-size:24px; line-height:31px; width:30px; text-align:center; right:0; top:0; cursor:pointer; display:block;}
.num-min{color:#333; font-size:24px; line-height:31px; width:30px; text-align:center; right:30px; top:0; cursor:pointer; display:block;}
.pwd-toggle{cursor:pointer;}
.i-mode-data {border:solid #eee; border-width:0 1px 1px 0; font-size:14px;}
.i-mode-data .col-sm-6:nth-child(odd) {background:#fff !important; padding:15px; border:solid #eee; border-width:1px 0 0 1px;}
.i-mode-data .col-sm-6:nth-child(even) {padding:15px; border:solid #eee; border-width:1px 0 0 1px; font-weight:600; background:#fff !important;}

.form .input-group-text {height:100%; line-height:30px; font-size:14px; background:transparent !important;}
.form-group .row {border:1px solid #ddd; border-bottom:none;}
.form-group .row:last-child {border:1px solid #ddd;}
.form-group .text-primary {color:#148fcc !important;}
.select2-container {width:100%; margin-top:.25rem; margin-bottom:.25rem;}
.select2-selection--single {height:calc(1.5em + .75rem + 2px); padding:.375rem .75rem; font-size:1rem; font-weight:400; line-height:1.5 !important;}
.select2-container--default .select2-selection--single {border:1px solid #d2d2d2 !important;}
.select2-container--default .select2-selection--single .select2-selection__placeholder {color:#000;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top:5px;}
#example_filter label, #example1_filter label, #example2_filter label {width:100%;}
.form .form-check-inline { white-space: normal !important; margin-right: 1rem !important;}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
  -webkit-appearance: textfield; /* Chrome/Edge */
  appearance: textfield;
}

/* =========================
   Custom
   ========================= */
.alert-primary {background-color:#d6f1ff!important;color:#000!important;font-size:14px;}
.alert-primary .material-icons {font-size:21px;}
.bg-light-blue {background-color:#d6f1ff!important;}

.centered {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#loading {-webkit-animation:rotation 2s infinite linear;}
@-webkit-keyframes rotation {from{-webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(359deg);}}
.spinner-grow {width:1.5rem; height:1.5rem;}

.back-drop {background-color:rgba(0,0,0,0.5); position:fixed; width:100%; height:100vh; z-index:12;}
.hide-lg {display:none !important;}
.pointer {cursor:pointer;}
.w-auto {min-width:0 !important;}
.w-big {min-width:47% !important;}
.w-small-input {max-width:100px;}
.folder {color:#f5d66c;}
.rounded-medium {border-radius:12px;}
.round-more {border-radius:20px; overflow: hidden;}
.revenue {background-image:url('../img/icon1.png');background-size:120%;background-position:bottom right;background-repeat:no-repeat;}
.orders {background-image:url('../img/icon2.png');background-size:120%;background-position:bottom right;background-repeat:no-repeat;}
.line {background-image:url('line.jpg'); background-position:center center; background-repeat:no-repeat;}
.line-blue {background-image:url('line-blue.jpg'); background-position:center center; background-repeat:no-repeat;}

.sub {display:none;}
.folders a {font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px;}
.border-lg-left {border-left:1px solid #ddd;}
.blur-text {filter:blur(3px); -webkit-filter:blur(3px);}
.parish-head {cursor:pointer;}

.options .alert-primary {font-size:16px;}
.options .bg-primary {background:#256cb5 !important;}
.options td {vertical-align:middle;}
.options td h4 {background:#d6f1ff; color:#046ad4; padding:4px; border-radius:4px; max-width:120px; min-width:120px; margin:0; text-align:center; display:inline-block; border:1px solid #26a3db !important;}
.sect h2 {font-size:30px;}
.options .alert-pink {background:#ffddee !important; color:#bf3279;}
.options .alert-men {background:#d6f1ff !important; color:#046ad4;}

.side-tabs {top:70px; left:0; max-width:120px; z-index:9900; background:#002b8c !important; color:#fff;}
.side-website {border-top-right-radius:16px; border-bottom-right-radius:16px; overflow:hidden !important;}
.side-website img {max-height:50px;}
.side-website p {margin:0 !important; line-height:1rem;}
.side-website p:first-child {border-top-right-radius:16px;}
.side-website p:last-child {border-bottom-right-radius:16px;}

#pagination a {border:1px solid #ddd; padding:4px 8px; float:left;}
#pagination b {border:1px solid #007bff; padding:4px 8px; float:left; background:#007bff; color:#fff;}

.char-limit {max-width:250px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}
.one-line {display:block; padding-right:15px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.one-line-td {display:block; padding-right:15px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; max-width: 220px}
.word-break {word-break:break-all;}
.top-parish{font-size: 12px !important}
.edit {width: 30px; min-width: 30px; height: 30px; line-height: 22px; font-size: 14px; border-radius: 50%; overflow: hidden;}
.lg-show{display: none;}

.stats img{max-height: 40px}
.stat-pink{background-color: #ffdef1 !important; border-radius: 20%; border:1px solid #f9a7d5 !important; padding: 10px}
.stat-vio{background-color: #e7eaff !important; border-radius: 20%; border:1px solid #b1bafc !important; padding: 10px}
.stat-green{background-color: #e8ffc6 !important; border-radius: 20%; border:1px solid #baeb6f !important; padding: 10px}
.stat-yellow{background-color: #fff3c8 !important; border-radius: 20%; border:1px solid #f5e19c !important; padding: 10px}

.stat-pink-text{color: #ff3ba0 !important;}
.stat-danger-text{color: #e74040 !important;}
.stat-vio-text{color: #6874cf !important}
.stat-green-text{color: #2ec828 !important;}
.stat-yellow-text{color: #fe9449 !important;}

.bg-vio{background-color: #e7eaff !important;}
.bg-pink{background-color: #ffdef1 !important;}
.bg-green{background-color: #e8ffc6 !important;}
.bg-yellow{background-color: #fff3c8 !important;}
.bg-info{background-color: #d1ecf1 !important;}


.content-div{min-height: 100vh}
.rounded-4{border-radius: 12px}

#pInfo .rounded-4 {font-size: 13px}
#pInfo .rounded-4 strong {font-size: 16px;}

.custom-tab .nav-link{color: #252525 !important; padding: 5px 12px; border:none;  border-radius:0px; font-size: 14px !important; font-weight: 500;}
.custom-tab .active{color: #5878eb !important; border-bottom: 4px solid #5878eb !important; background: transparent !important; font-weight: 600;}

.class-select{padding: 0px; overflow: hidden; margin-top: 5px;}  
.class-select li a{line-height: 1.5rem !important; border:1px solid #eee;}

 #cropModal .modal-body {
    max-height: 80vh;  /* 80% of viewport height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cropImage {
    max-width: 100%;
    max-height: 70vh; /* Keep within 70% of the viewport */
    object-fit: contain;
  }

  .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1051; /* above modal content */
}

.loading-overlay .overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
}

.loading-overlay .overlay-icon {
  position: relative;
  z-index: 1;
  font-size: 3rem;
  color: #333;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.id-bg {
    background-image: url(https://mananthavadydiocese.com/databank/assets/admin/img/inst/cml-id-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 770px;
    min-height: 770px;
    background-position: bottom center;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    padding: 20px 0;
}


/* =========================
   BS5
   ========================= */

.ms-0  { margin-left: 0    !important; }
.ms-1  { margin-left: 0.25rem !important; }
.ms-2  { margin-left: 0.5rem  !important; }
.ms-3  { margin-left: 1rem    !important; }
.ms-4  { margin-left: 1.5rem  !important; }
.ms-5  { margin-left: 3rem    !important; }
.ms-auto { margin-left: auto !important; }

/* Margin End (right in LTR) */
.me-0  { margin-right: 0    !important; }
.me-1  { margin-right: 0.25rem !important; }
.me-2  { margin-right: 0.5rem  !important; }
.me-3  { margin-right: 1rem    !important; }
.me-4  { margin-right: 1.5rem  !important; }
.me-5  { margin-right: 3rem    !important; }
.me-auto { margin-right: auto !important; }

/* Padding Start (left in LTR) */
.ps-0  { padding-left: 0    !important; }
.ps-1  { padding-left: 0.25rem !important; }
.ps-2  { padding-left: 0.5rem  !important; }
.ps-3  { padding-left: 1rem    !important; }
.ps-4  { padding-left: 1.5rem  !important; }
.ps-5  { padding-left: 3rem    !important; }

/* Padding End (right in LTR) */
.pe-0  { padding-right: 0    !important; }
.pe-1  { padding-right: 0.25rem !important; }
.pe-2  { padding-right: 0.5rem  !important; }
.pe-3  { padding-right: 1rem    !important; }
.pe-4  { padding-right: 1.5rem  !important; }
.pe-5  { padding-right: 3rem    !important; }

.float-start {float: left !important;}
.float-end {float: right !important;}
.fw-bold{font-weight: 600}

/* =========================
   #templateList
   ========================= */
#templateList{margin-bottom:45px;}
#templateList ul{margin:0; margin-bottom:6px; list-style:none; line-height:2.5rem; padding-left:15px;}
#templateList li{font-size:16px; position:relative;}
#templateList li:before{position:absolute; left:-15px; top:0; content:''; display:block; border-left:1px solid #ddd; height:1em; border-bottom:1px solid #ddd; width:10px;}
#templateList li:after{position:absolute; left:-15px; bottom:-7px; content:''; display:block; border-left:1px solid #ddd; height:100%;}
#templateList li .root{margin:0 0 0 -20px;}
#templateList li .root:before{display:none;}
#templateList li .root:after{display:none;}


/* =========================
   MultiCheckBox
   ========================= */
.MultiCheckBox{width:100%!important; height:calc(1.5em + .75rem + 2px); min-height:48px; padding:.375rem .75rem; font-size:17px; font-weight:400; line-height:42px; color:#495057; background-color:#fff; background-clip:padding-box; margin-left:1px; border-radius:.25rem; transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out; cursor:pointer;}
.MultiCheckBox .k-icon{font-size:12px; float:right; font-weight:bolder; margin-top:-7px; height:10px; width:10px; color:#787878;}
.MultiCheckBoxDetail{display:none; position:absolute; border:1px solid #e2e2e2; overflow-y:hidden; background-color:#fff; z-index:10; padding:.375rem .75rem; line-height:1.5rem; width:100%!important; cursor:pointer;}
.MultiCheckBoxDetailBody{overflow-y:scroll;}
.MultiCheckBoxDetail .cont{clear:both; overflow:hidden; padding-top:12px;}
.MultiCheckBoxDetail .cont input{min-height:19px; margin-right:12px;}
.MultiCheckBoxDetail .cont:hover{background-color:#cfcfcf;}
.MultiCheckBoxDetailBody>div>div{float:left;}
.MultiCheckBoxDetail>div>div:nth-child(1){}
.MultiCheckBoxDetailHeader{overflow:hidden; position:relative;}
.MultiCheckBoxDetailHeader>input{position:absolute; top:4px; left:3px; min-height:28px;}
.MultiCheckBoxDetailHeader>div{position:absolute; top:5px; left:24px; color:#fff;}



@media (min-width: 1280px) and (max-width: 3000px) {
.lg-show{display: inline-block;}
}

/* =========================
   Large Screen
   ========================= */
@media (min-width: 1600px) and (max-width: 2000px) {
  nav .nav-link {padding-left:.6rem!important;padding-right:.6rem!important; font-size: 14px !important}
    .modal-lg {max-width: 600px;}
    .manpower-table {max-width: 766px;}
    .equipment-table {max-width: 766px;}
    .modal-xl {max-width: 1250px !important; min-width: 1250px !important;}
    .lg-show{display: inline-block;}
    .menu-div{background-color: #fff; min-height: 100vh}
    .menu-btn{display: none;}
    .custom-tab .nav-link{ font-size: 15px; padding-bottom: 10px}
}

@media (min-width: 1300px) and (max-width: 1500px) {
  nav .nav-link {padding-left:.6rem!important;padding-right:.6rem!important; font-size: 13px !important}
    .form .input-group-prepend {min-width: 200px; width: 25%; display: block;}
    .three-row .input-group-prepend {min-width: 150px; width: 25%; display: block;}
    .three-row .input-group-prepend:first-child {width: 25%; min-width: 200px !important; display: block;}
    .rural {min-width: 72% !important;}
    .user-form .rural {min-width: 66.8% !important; display: block;}
    .form .input-group-prepend .input-group-text {font-size: 15px !important; padding-left: 12px;}
    .form-group input, .form-group select {border-bottom: none; border-right: none; height: 48px; font-size: 15px; color: #555; border-color: #ddd !important; border-radius: 0; font-weight: bold;}
    .manpower-table {max-width: 585px;}
    .equipment-table {max-width: 585px;}
    .lg-show{display: inline-block;}
    .menu-div{background-color: #fff; min-height: 100vh}
    .menu-btn{display: none;}
    .custom-tab .nav-link{ font-size: 15px; padding-bottom: 10px}
}


/* =========================
   Medium Screen
   ========================= */
@media (min-width: 1000px) and (max-width: 1024px) {
   .menu{height: 98vh; overflow: auto;}
    .manpower-table {max-width: 300px;}
    .equipment-table {max-width: 300px;}
    .form-group {border-left: 1px solid #ddd;}
    .form .input-group-prepend {width: 100%;}
    .form .input-group-prepend .input-group-text {background-color: transparent; font-size: 15px !important; border-left: none; border-right: none; padding: 20px; padding-bottom: 0;}
    .form-group input, .form-group select {border-top: none; border-left: none; font-size: 15px; padding: 20px; padding-top: 0;}
    .form-group textarea {border-top: none; border-left: none; font-size: 15px; padding: 20px; padding-top: 0;}
}
@media (min-width: 900px) and (max-width: 1180px) {
    .form .input-group-prepend {width: 25%; min-width: 200px;}
    .form .input-group-prepend .input-group-text {font-size: 12px !important;}
    .form-group input {font-size: 12px !important;}
    .form-group select {font-size: 12px;}
    .form-group textarea {font-size: 12px;}
}
@media (min-width: 820px) and (max-width: 1000px) {
    .side-website img {max-height: 30px;}
    .side-website a {text-align: center;}
    .side-website a small {font-size: 10px; font-weight: 500;}
    .side-website .alert-primary {padding: 4px 2px;}
}
@media (min-width: 800px) and (max-width: 900px) {
    .form .input-group-prepend {width: 50% !important;}
}


/* =========================
   Small Screen
   ========================= */
@media (min-width: 320px) and (max-width: 780px) {
   .menu{height: 98vh; overflow: auto;}
  .navbar-nav {min-height: 98vh; padding-top: 25px; border: none;}
  nav .nav-item {border-right: none !important; border-bottom: 1px solid #eee; font-size: 16px;}
  .navbar-nav .dropdown-menu {margin-bottom: 10px; border: none;}
  .navbar-nav .dropdown-item {font-size: 15px; color: #666;}
  .card-scroll {width: 100%; overflow: auto;}
  .card-scroll .card-deck {width: 800px;}
  .card-scroll .card {width: 24%; margin-right: 1%; float: left;}
  .hide-sm {display: none !important;}
  .hide-lg {display: inline-block !important;}
  .side-btn {border-right: none;}
  .side-btn .card {width: 33.33%; float: left;}
  .form .input-group-prepend {width: 100% !important; border: none !important;}
  .form .input-group-prepend .input-group-text {background-color: transparent; font-size: 16px !important; border-left: none; border-right: none; padding: 10px 20px 20px 15px; padding-bottom: 0;}
  .form-group {border-left: 1px solid #ddd;}
  .active-field {background-color: transparent !important; box-shadow: none;}
  .sticky-top h4 {font-size: 16.5px;}
  .action-bottom {background-color: #fff; display: none; position: fixed !important; bottom: 0; top: auto; left: 0; width: 100%; border-top: 2px solid #ddd; padding: 15px; box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;}
  .action-bottom .btn {width: 48%;}
  .action-btn {width: 100%;}
  .side-small {position: fixed !important; bottom: 0; top: auto; left: 0; width: 100%; height: 91vh; z-index: 99999; background-color: #fff;}
  .menu-rest {max-width: 100%; z-index: 100000; left: 0; padding-left: 0px !important; min-height: 100vh; position: fixed;}
  .w-auto, .w-big {min-width: 100% !important;}
  .three-row .input-group-prepend {min-width: 100% !important; max-width: 100%;}
  .three-row .input-group-prepend .input-group-text {min-width: 100% !important;}
  .w-small-input {max-width: 100%;}
  .check-group .form-check-label {position: relative; padding-top: 8px; padding-left: 4px; font-size: 16px !important; font-weight: 500; color: #555;}
  .check-group .form-check-input {position: absolute; left: 0px; top: -6px;}
  .folders a {font-size: 14px;}
  .data-folders .table td, .data-folders .table th {vertical-align: middle !important;}
  .user-form .rural {min-width: 100% !important; display: block;}
  .user-form .form-check-input {position: absolute; left: 0px; top: -8px;}
  .nav-justified .nav-item .material-icons {font-size: 16px;}
  .non-survey {width: 100%; display: block !important; padding: 0 15px; background-color: #e1eefd !important; color: #148fcc; border-top: 1px solid #b6d6fb !important; border-bottom: 1px solid #b6d6fb !important;}
  .non-survey .btn {width: 100%;}
  .non-survey .dropdown .btn {border: none; background: none !important;}
  .non-survey .dropdown .material-icons {color: #148fcc !important;}
  .non-survey-pad {padding-bottom: 80px;}
  .MultiCheckBox {border-right: 1px solid #ddd;}
  .nav-pills .nav-link {margin-bottom: 8px; position: static; left: 0; right: 0; top: 0; margin-left: 4px; margin-right: 4px; border: 1px solid #eee !important;}
  .nav-pills .nav-item hr {display: none;}
  .nav-pills .nav-item small {font-size: 16px !important; font-weight: bold;}
  .side-tabs {top: 5px; left: 0; max-width: 120px; z-index: 9900; position: relative;}
  .side-tabs .list-group-item {padding: .5rem 1.25rem;}
  .close-tabs {position: absolute; right: -30px; top: 1px; z-index: 9909;}
  .side-tabs-backdrop {position: fixed; z-index: 9800; top: 0; left: 0; height: 100vh; width: 100%; background: rgba(0,0,0,0.7);}
  .sect h2 {font-size: 28px; margin-bottom: 0px !important;}
  .border-lg-left {border-left: none;}
  .i-mode-data .col-sm-6:nth-child(odd) {padding: 15px 15px 4px 15px; background: #fff !important; border: solid #dfdfdf; border-width: 1px 0 0 1px; color: #777;}
  .i-mode-data .col-sm-6:nth-child(even) {padding: 0 15px 15px 15px; border: solid #dfdfdf; border-width: 0 0 0 1px; font-weight: bold;}

  .form-applications{position: fixed !important; z-index: 9999; width: 100% !important; margin: 0 !important; left: 0 !important; bottom: 0 !important;}
  .form-applications li{padding: 0 !important; margin: 0 !important; min-width: 19% !important;}
  .form-applications li:first-child{padding: 0 !important; margin: 0 !important; min-width: 23% !important;}
  .form-applications a{display:block !important;  padding-left: 0 !important; padding-right: 0 !important; 
   text-align: center !important; border-left: 1px solid #ddd; border-radius: 0 !important; margin-bottom: 0; font-size: 12px; margin: 0 !important}

  .profile-head{height:90px; margin-bottom:370px;}
  .profile-name{padding-top: 20px}
  .profile-tabs a {max-width: 33%; min-width: 18%; margin-bottom: 1rem !important; font-size: 12.5px !important; overflow: hidden; text-align: center; 
    margin-left: 0 !important}
  .profile-tabs .nav-link {font-size: 13px !important; padding-left: 0 !important; padding-right: 0 !important}
   
}

















.croppie-container {
    width: 100%;
    height: 100%;
}

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}

.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: 2px solid #fff;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    touch-action: none;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
    -webkit-appearance: none;
/*removes default webkit styles*/
	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
/*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
	border-width: 6px 0;
	color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ddd;
	margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}
.cr-rotate-controls button {
	border: 0;
	background: none;
}
.cr-rotate-controls i:before {
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	font-size: 22px;
}
.cr-rotate-l i:before {
	content: '↺';
}
.cr-rotate-r i:before {
	content: '↻';
}

.modal { overflow: auto !important; }
.bg-darkblue {
    background-color: #0d0d5a;
}
/*
.line{background-image: url('line.jpg'); background-position: center center; background-repeat: no-repeat;}
.line-blue{background-image: url('line-blue.jpg'); background-position: center center; background-repeat: no-repeat;}*/


.one-line{display: block; padding-right: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.word-break{word-break: break-all;}
#example_filter label {
    width: 100%;
}
#example1_filter label {
    width: 100%;
}
#example2_filter label {
    width: 100%;
}
.btn-sm{height: 32px; line-height: 23px;white-space: nowrap;}




.select2-container{width:100%; margin-top: .25rem; margin-bottom: .25rem;}.select2-selection--single { height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5 !important;}
.select2-container--default .select2-selection--single {border: 1px solid #d2d2d2 !important;}.select2-container--default .select2-selection--single .select2-selection__placeholder {color: #000;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 5px;}