@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {box-sizing: border-box; text-decoration: none; list-style: none; padding: 0; margin: 0; margin-bottom: 0px;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .shimmer-main-content, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-family: var( --primary-font);}
h1, h2, h3, h4, h5, h6 {color: #333333; font-weight: 600; line-height: normal;}
h2 {font-size: 22px;}
h3 {font-size: 14px; font-weight: 600;}
h4 {font-size: 25px;}
label {font-size: 12px; font-weight: 500; cursor: pointer;}
::placeholder {color: #888888; font-size: 14px; font-weight: 500;}
a, button {outline: none; text-decoration: none !important; transition: all 0.3s ease-out 0s; font-family: var( --primary-font); cursor: pointer;}
select {outline: none;}
::selection {text-shadow: none; color: var(--text-color-2); background: #F5972C;}
html {scroll-behavior: smooth;}
body {font-family: var( --primary-font);}
button:focus, a:focus {box-shadow: unset;}
/*================
Variable
==================*/
:root {
    --primary-font:"Montserrat", sans-serif;
    --primary-color: #F5E8D8;
    --secondary-color: #E7EBF4;
    --third-color: #f5f5f5;
    --text-color: #283245;
    --text-color-1: #F9FAFB;
    --text-color-2: #ffffff;
    --text-error: #B93815;
    --text-error-bg: #ffeeee;
    --text-error-border: #ffb9b9;
    --text-success: #067647;
    --text-success-bg: #ECFDF3;
    --text-success-border: #ABEFC6;
    --text-yellow: #f18500;
    --text-yellow-border: #ffd096;
    --text-blue: #283245;
    --text-blue-bg: #e3ecff;
    --text-blue-border: #c2cbdd;
    --placeholder-text: #B1B1B2;
    --icon-color: #00072E;
    --button-color: #F5972C;
    --button-border-radius: 8px;
    --button-hover-color: #283245;
    --box-shadow-color: 0px 0px 10px -5px rgb(0 0 0 / 40%);
    --border-radius: 14px;
    --border-color: #D0DBF2;
    --table-border-color:#D4D9E3; 
}

/*================
Scroll Bar
==================*/
::-webkit-scrollbar {width: 3px; height: 3px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 100px;}
::-webkit-scrollbar-thumb {background-color: var(--button-color); border-radius: 100px;}

/*================
Login Page
==================*/
.login-form-wrapper {background-color: var( --secondary-color); width: 100%; height: 100%; position: fixed;}
.login-page {width: 100%; max-width: 520px; height: auto; background: var( --third-color); margin: 0 auto; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; box-shadow: var(--box-shadow-color); border-radius: var(--border-radius); padding: 25px;}
.form > .logo-head {text-align: center;}
.logo-head img { width: 125px; }
.form > h3 { margin-top: 35px; text-align: center; margin-bottom: 25px; font-weight: 600; }
.reporting-form-wrap .form-wrapper label, .form-wraper .form-wrapper label {display: inline-block; color: var( --text-color); font-weight: 500;}
.reporting-form-wrap {display: flex; flex-direction: column; gap: 20px;}
.reporting-form-wrap .form-wrapper > .form-inut, .form-wrapper .form-inut { width: 100%; border: unset; padding: 15px 10px; border-radius: var(--button-border-radius); margin-top: 5px; box-shadow: var( --box-shadow-color); font-size: 14px; font-weight: 500; line-height: normal; }
.reporting-form-wrap .form-wrapper > .form-inut::placeholder, .form-wrapper .form-inut::placeholder {color: var(--placeholder-text);}
.checkbox-wrap {display: flex; justify-content: space-between; align-items: center; margin: 30px 0px;}
.check-btn {box-sizing: border-box; padding: 0px; width: 25px; height: 25px; float: none; position: relative; transition: all 0.4s; appearance: none; vertical-align: middle; background: var( --text-color-2); border-radius: 4px;}
.check-btn[type="checkbox"]:checked::before, .check-btn[type="radio"]:checked::before { border: 1px solid var( --button-color); transform: scale(1); background-color: var( --button-color); color: var(--text-color-2); border-radius: 4px; }
.check-btn::before {content: '\f00c'; font-family: 'Font Awesome 5 Pro'; font-weight: 900; position: absolute; width: 100%; height: 100%; display: inline-flex; justify-content: center; align-items: center; transform: scale(0); transition: all 0.4s; color: var(--primary-color); font-size: 16px;}
.checkbox-wrap .check-box > label {padding-left: 6px; font-weight: 500; color: var(  --text-color);}
.checkbox-wrap  .reset-pass h6 { color: var( --button-color); font-weight: 500; font-size: 14px; }
form.reporting-form button { width: 100%; background: var( --button-color); border: unset; border-radius: var(--button-border-radius); color: var(--text-color-2); padding: 15px; font-size: 16px; font-weight: 600; }
.reporting-form-wrap .form-wrapper > .form-inut:focus-visible, .wrapper input[type="text"]:focus-visible, .task-info-inner > .textarea-inner:focus-visible, .form-wrapper .form-inut:focus-visible {outline: none;}
form.reporting-form button:hover {background: var( --button-hover-color);}
.reset-pass a {  color: var( --text-color);}

/* =><==><==><==><==>
Dashboard
<==><==><==><==><==> */
/*================
Left-sidebar
==================*/
.main-report-outer {background: var(--secondary-color); padding: 80px 20px; position: relative; display: flex; justify-content: center; align-items: center; height: 100vh;}
.main-report-outer .container {max-width: 1550px;}
.content-wrap-inner {background: var( --third-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow-color);flex-wrap: nowrap;}
.left-sidebar-wrapper {max-width: 240px; padding: 16px;}
.left-sidebar-wrapper .navbar.navbar-expand-lg {flex-wrap: nowrap; flex-direction: column; height: 100%;}
.logo-header {display: flex; align-items: center; justify-content: center;}
.navbar-expand-lg .navbar-collapse {position: sticky; top: 0px; left: 0px; width: 100%;  padding-bottom: 0px; flex-wrap: wrap;}
.logo-header, .menu-wrapper-content {width: 100%;}
.logo-header .logo:hover {transform: scale(0.95);}
.logo-header img {width: 120px;}
.bottom-bar {border-top: 1px solid var( --table-border-color ); padding: 20px 0px 16px; position: relative; bottom: 0px; left: 0px;}
.left-sidebar {width: 100%;}
.bottom-bar .bottom-menu-login {position: relative;}
.user-profile-active {width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 0; background: var(--primary-color);}
.user-profile-inner img { border-radius: 50%; aspect-ratio: 1;}
.manu-navbar {height: 528px;}
.user-wrapper-content {display: flex; gap: 8px; align-items: flex-start;}
.bottom-bar .bottom-menu-login a {padding: 0; top: -5px; position: absolute; right: 0; width: auto;}
.navbar ul li a {  padding: 8px 14px;   border-radius: 8px; width: 100%;  margin-bottom: 4px; line-height: normal;display: flex;  align-items: center; position: relative;}
.menu-icon svg { width: 20px;   height: 20px;}
.menu-items span {display: inline-block; margin-right: 8px; color: var( --text-color); font-size: 14px; font-weight: 600;}
.menu-items a.active, .menu-items a:hover {background: var(--primary-color);}
.menu-items {padding: 25px 0px}
.navbar a.active .menu-icon svg path, .navbar a.active span {fill: var( --text-color); font-weight: 700;}
.user-profile-detail h5, .user-profile-detail h6 {color: var(--text-color); font-size: 14px; font-weight: 600;}
.user-profile-detail h6 {font-weight: 400; font-size: 12px; margin-top: 5px;}
.user-profile-detail h5 {text-transform: capitalize;}

/*================
    Right-sidebar
==================*/
.page-title h2, .header-content-area h2 a {font-size: 16px; font-weight: 700;}
.right-sidebar-wrapper {border-radius: var(--border-radius); background: var(--secondary-color); margin: 15px 15px 15px 0px; padding-left: 0px; padding-right: 0;}
.header-content-area {display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px !important}
.rlspace { padding: 10px; overflow: hidden; height: calc(100% - 0px);}
.project-info-wrapper {background: var(--third-color); border-radius: var(--border-radius); margin-bottom: 24px; padding: 24px 40px 20px 20px; box-shadow: var( --box-shadow-color);}
.header-content-area, .header-content-area, .header-content-area ~ .report-table-wrapper { padding: 4px; }
.scrollable {height: 700px; overflow-y: auto; overflow-x: hidden;}

/*================
    Button
==================*/
.dropdown-report-inner, .dropdown-report-inner, .daterangepicker .drp-buttons .btn-primary { cursor: pointer; border: unset; background: var(--button-color); color: var(--text-color-2); padding: 9px 14px 9px 14px; border-radius: var(--button-border-radius); transition: all 0.3s ease; width: auto; display: inline-block; line-height: normal; }
.dropdown-btn-outer .dropdown-report-inner i { font-size: 18px;}
.users_index .dropdown-btn-outer .dropdown-report-inner i, .daily_all_projects .dropdown-report-inner i.fa-solid.fa-plus, .proje_index .dropdown-report-inner i {margin-right: 10px;}
.dropdown-report-inner span, .dropdown-report-inner {font-size: 14px;font-weight: 650;display: flex;align-items: center;gap: 10px;}
.merge-block, .outer-mobile-wrap {display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.outer-mobile-wrap {flex-wrap: nowrap; }
.outer-mobile-wrap:first-child {margin-bottom: 12px;}
.dropdown-report-inner:hover, .daterangepicker .drp-buttons .btn-primary:hover {background-color: var(--button-hover-color); transform: scale(0.95);}
/*================
    Tool-tip
==================*/
.wrapper {width: 35%;}
.wrapper .tooltip { background: var(--button-color); bottom: 100%; color: var(--text-color-2); display: block; left: 50px; margin-bottom: 11px; opacity: 0; padding: 10px 10px; pointer-events: none; position: absolute; width: 100%; transform: scale(0); transition: all 0.4s ease-out; max-width: 165px; font-size: 12px; text-align: center; font-weight: 300; border-radius: var(--button-border-radius); font-family: 'Poppins'; }
.wrapper .tooltip:before {bottom: -20px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%;}
.wrapper .tooltip:after {border-left: solid transparent 10px; border-right: solid transparent 10px; border-top: solid var(--button-color) 15px; bottom: -9px; content: " "; height: 0; left: 26%; margin-left: -13px; position: absolute; width: 0; transform: rotate(254deg);}
.wrapper:hover .tooltip {opacity: 1; transform: scale(1);}

/*================
    Form
==================*/
.control-form, .typeahead__container .typeahead__field input, .typeahead__container .typeahead__field textarea, .typeahead__field textarea {width: 100%; padding: 10px 16px; color: var(--text-color); font-size: 14px; border-radius: var(--button-border-radius); border: 1px solid var(--border-color); line-height: normal; font-weight: 500; outline: none; display: block;}
.typeahead__container .typeahead__field textarea, textarea {max-height: 40px;}
.typeahead__list { max-height: 350px;  overflow-y: auto;  overflow-x: hidden;  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
select option {color: var(--text-color); font-size: 14px;}
.control-form.form-select:focus, .control-form:focus {border-color: #86b7fe; outline: none; box-shadow: none;}
.task-info-inner { background: var(--secondary-color); border-radius: var(--border-radius); padding: 24px 30px 24px 24px; position: relative;}
#fortask {  display: flex;  flex-direction: column; gap: 12px;}
.new_tasks .task-info-inner {margin-top: 16px;}
.time-info {display: flex; width: 100%; gap: 15px;}
.add-new-task, .remove_task {position: absolute; top: 50%; right: -40px; transform: translate(-50%, -50%); cursor: pointer; background: var(--secondary-color); color: #000; width: 40px; height: 40px; display: inline-block; border-radius: var(--button-border-radius);}
.add-new-task i, .remove_task i {display: grid; place-items: center; height: 100%; width: 100%; font-size: 20px;}
.sumbit-btn {margin-top: 16px; text-align: center; display: flex; justify-content: center;}
/* .sumbit-btn .dropdown-report-inner {max-width: 120px; width: 100%;} */
label.error {display: none !important;}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius: 0!important; border-bottom-right-radius: 0!important; }
 .control-form.error, .typeahead__container .typeahead__field textarea.error, .typeahead__container .typeahead__field input .error, .control-form.error ~ .select2-container--default .select2-selection--single   {border: 1px solid var(--text-error)!important;}
 .task-wrap, .des-wrap, .device-wrap { width: 100%;}
 .hrs-wrap, .mints-wrap { min-width: 90px;}
.status-wrap { min-width: 150px;}
.user-wrap { width: 45%;}
.notification-msg {color: var(--text-error); font-weight: 600; padding-top: 10px;}
/*================
    Table
==================*/
.report-table-box {box-shadow: var(--box-shadow-color); width: 100%; margin: auto; }
.report-wrapper-box {box-shadow: var(--box-shadow-color); border-radius: var(--border-radius); position: relative; width: 100%; z-index: 1; margin: auto; overflow: auto;}
.report-table-box thead tr th, .report-table-box tfoot tr th {padding: 14px 0px 14px 20px;}
.report-table-box tr td {padding: 7px 0px 6px 20px; font-size: 12px;}
.report-table-box tr td:last-child, .report-table-box tr th:last-child {padding-right: 20px; width: 90px;}
.report-table-box tbody tr:nth-child(odd) td {background: var(--text-color-1);}
.report-table-box tbody tr:nth-child(even) td {background: var(--third-color);}
.report-table-box tbody tr {border-bottom: 1px solid var(--table-border-color);}
.report-table-box tbody tr:last-child {border-bottom: none;}
.report-table-box thead tr th, .report-table-box tfoot tr th {font-size: 12px; font-weight: 700; line-height: normal;}
.report-table-box tbody tr .table-data {color: var(--text-color);}
.report-table-box tbody tr td span {font-weight: 600;}
.report-table-box tbody tr td.wrap-task {   width: 100%;  max-width: 18px; white-space: normal;}
.atten_index .mix-box, .atten_myattendance .mix-box { width: auto; padding: 3px 8px;}
/* Color Group */
.mix-box {display: inline-block; font-size: 12px; text-align: center; border-radius: var(--border-radius); padding: 0px 2px; width: 80px;}
.green-text {border: 1px solid var( --text-success-border); color: var( --text-success); background: var(--text-success-bg);}
.dark-text {border: 1px solid var(--text-error-border); background: var(--text-error-bg); color: var(--text-error);}
.report-table-box tbody tr td span > .orange-text { border: 1px solid var(--text-yellow); color: var(--text-yellow); background: unset;
}
.yellow-group {border: 1px solid var(--text-yellow-border); background: var(--primary-color); color: var(--text-yellow);}
.blue-group {border: 1px solid var(--text-blue-border); background: var(--text-blue-bg); color: var(---text-blue);}
/* Color End */
.report-table-box tr th, .report-table-box tr td {white-space: nowrap;}
.table-data[data-label="Firstname"], .table-data[dat-label="Lastname"] {text-transform: capitalize;}
.report-table-box thead, .report-table-box tfoot {z-index: 2;}
.report-table-box tr td:first-child, .report-table-box tr th:first-child {z-index: 1;}
.report-table-box thead, .report-table-box tfoot, .report-table-box tr td:first-child, .report-table-box tr th:first-child {position: -webkit-sticky; position: sticky; top: 0; left: 0; background: var(--primary-color); color: var(--text-color);}
.report-table-box tfoot {bottom: 0;}
.report-inner { margin-bottom: 10px;}
.report-inner:last-child { margin-bottom: 0;}
.report-table-wrapper .header-content-area { padding-left: 0; padding-right: 0; margin-top:5px; }
.delete-icon img:nth-child(1) {padding-right: 10px;}
.report-table-box thead tr th:first-child {border-top-left-radius: var(--border-radius);}
.report-table-box thead tr th:last-child {border-top-right-radius: var(--border-radius);}
.report-table-box tfoot tr th:first-child {border-bottom-left-radius: var(--border-radius);}
.report-table-box tfoot tr th:last-child {border-bottom-right-radius: var(--border-radius);}
.report-table-box tbody tr.color_red td .tab-inner-description .dark-text { border: 1px solid #d54949;}
.report-table-box tbody tr.color_orange td .tab-inner-description .green-text {  border: 1px solid #ea9a0d;  color: #ea9a0d; background: unset;}
.users_index .report-wrapper-box {height: 677px;} 
.daily_allreports .report-wrapper-box {height: auto;}
.daily_assigned_work .assign-scroll { height: 700px;}
.daily_userpendings .report-wrapper-box { height: 648px;}
.daily_allreports .scrollable, .atten_index .scrollable {height: 661px;}
.devic_devicesdata .scrollable { height: 486px;}
.daily_assigned_work  .scrollable {  height: 410px;}
.inner-tfoot {  display: inline-flex; width: 100%; justify-content: space-between;  align-items: center; gap: 15px;}
.inner-tfoot span:last-child { font-weight: 600; color: var(--text-yellow);}
.empty-msg {  display: flex; justify-content: center; align-items: center; background: var(--text-color-2); padding: 10px; border-radius: var(--button-border-radius);}
.daterangepicker .drp-buttons .applyBtn { padding: 11px 16px 12px 16px;}
.daily_userSpecificReport .report-wrapper-box h2 { padding: 10px;}
.daily_userSpecificReport .report-wrapper-box {  margin: 10px 0px;}
.for_view_all {  height: 700px;  overflow-x: auto;}
.daily_allreports .check-btn { width: 15px; height: 15px; border: 1px solid  var(--button-color); margin-right: 5px; vertical-align: vertical;}
.daily_allreports .check-btn::before { font-size: 14px;}
.daily_userSpecificReport .user-info h3 { font-size: 22px;}
.daily_userSpecificReport .for_view_all h2 { font-size: 16px; margin-bottom: 7px;}
.daily_index .time-info {   padding-bottom: 0px;  padding-left: 0px;}
.daily_index .task-info-inner.time-info { padding-bottom: 0; padding-top: 0;}
.edit-btn {  display: flex;  gap: 12px; align-items: center;}
.select2 { width: 100%!important;}

/*================
    Switch CheckBox
==================*/
.toggle-switch {display: inline-block; background: var(--placeholder-text); border-radius: 16px; width: 35px; height: 18px; position: relative; vertical-align: middle; transition: background 0.25s;}
.toggle-checkbox {position: absolute; visibility: hidden;}
.toggle-switch:before {display: block; background: var(--secondary-color); border-radius: var(--border-radius); width: 10px; height: 10px; position: absolute; top: 4px; left: 5px; transition: left 0.25s;}
.toggle-switch:before, .toggle-switch:after {content: "";}
.toggle-checkbox:checked + .toggle-switch {background: var(--button-color);}
.toggle-checkbox:checked + .toggle-switch:before {left: 20px;background: var(--text-color-2)}
.toggle-label {margin-left: 5px;  position: relative; top: 2px;}

/*================
    Modal
==================*/
.modal.right.in .modal-dialog {right:0 !important; transform: translateX(-50%);}
.modal.right .modal-content {height:100%; overflow:auto; border-radius:0; padding: 24px; border: unset;}
.modal.right .modal-dialog {position: fixed;  margin: auto; height: 100%; transform: translate3d(100%, 0, 0); width: 100%; max-width: 520px; transition: all 0.5s ease; right: -100%;}
.modal.right.show .modal-dialog {right: 0px; transform: translate3d(0%, 0, 0);}
.modal.right .modal-dialog .modal-header, .modal.right .modal-dialog .modal-body {padding: 0; border-bottom: unset; border-top: 0;}
.modal.right .modal-dialog .modal-body .form-wraper {padding-top: 25px;}
.password-wrap {display: flex; gap: 12px;}
.password-wrap .form-wrapper {width: 100%;}
.modal .outer-mobile-wrap { width: 100%;}
.modal.right .modal-dialog .modal-header {  border-bottom: 1px solid var(--border-color); position: absolute;  top: 0;  right: 0;width: 100%;padding: 12px 24px 12px 24px; background: var(--text-color-2);}
.modal.right .modal-dialog .modal-footer {border-top: 1px solid var(--border-color);  position: absolute; bottom: 0; right: 0;  width: 100%; background: var(--text-color-2);}
.modal-footer .dropdown-btn-outer .cancel-btn {background: unset; color: var(--text-color);  border: 1px solid var(--border-color); box-shadow: var(--box-shadow-color);}
.modal-footer .dropdown-btn-outer .cancel-btn:hover {background: var(--third-color);}
.right .modal-dialog .form-wrapper .form-inut {border: 1px solid var(--border-color); box-shadow: unset; margin-bottom: 10px; margin-top: 6px; padding: 14px 10px; color: var(--placeholder-text); font-weight: 500;}
.modal-header .btn-close, .modal-header .btn-close i { background: unset; font-size: 20px; color: var(--icon-color);}
.modal .outer-mobile-wrap .status-wrap, .modal .outer-mobile-wrap .mints-wrap, .modal .outer-mobile-wrap .hrs-wrap, .modal .outer-mobile-wrap {  width: 100%;  min-width: unset;}
/*--user page css--*/
.user .rlspace {padding: 0px 20px;}
.modal.right .modal-dialog .modal-header .modal-title { font-size: 20px;}
.form-wraper {margin-top: 45px;}
.form-wrapper {margin-bottom: 8px;}
.editbtn {  border: unset;  background: unset;}
.logo-header.mobile-nav { display: none;}
.delete-icon .editbtn i.fa-solid.fa-reply { margin-right: 5px;}
.status-form {  display: flex; gap: 10px;}
.user-profile-inner h5 { color: var(--text-color);}
.name-info {font-weight: 700;}
.field-wrapper h5  { margin: 35px 0px 10px 0px; font-size: 14px; font-weight: 700; } 
.field-wrapper-inner { border: 1px solid #d3d7dd; padding: 13px 20px; border-radius: 5px; -webkit-box-shadow: 0 0 4px #f2f2f2; box-shadow: 0 0 4px #f2f2f2; background: rgb(245 245 245 / 63%); } 
.modal-footer .footer-report-wrap { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 25px; } 
.users_index  .form-wraper { margin-top: 25px; }
 .stats-wtapper { display: inline-block; padding: 20px 0px 0 0; } 
.stats-wtapper .form-wrapper { flex-direction: column; display: flex; gap: 9px; } 
.stats-wtapper .form-wrapper > label { margin: 0; font-size: 16px; font-weight: 600; } 
.status-outer-content label { margin-left: 8px; }
 .status-outer-content 
.status-inner-wrap .check-btn { border: 1px solid var(--border-color); width: 18px; height: 18px; } 
.status-outer-content { display: flex; flex-direction: row; gap: 0px; } 
.users_index .form-wraper { height: calc(100vh - 150px); overflow: auto; padding-right: 10px; } 
.status-inner-wrap { width: 95px; } 
.users_index .modal.right .modal-content { overflow: unset; } 
.role-wrapper.manager { background: #d6e4ee; color: #563d2e; } 
.role-wrapper.admin { background: #f1e1e9; color: #391728; }
 .role-wrapper.user { background: #f5dfcc; color: #644c43; }
/************ 
    Date rang picker
***********************/ 
.daterangepicker .calendar-table table {border-collapse: separate; border-spacing: 0px 8px;}
.daterangepicker .ranges li.active, .daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.in-range {background-color: var(--primary-color); color: var(--text-color);}
.daterangepicker .drp-buttons .btn-primary {width: auto;}
.daterangepicker .drp-buttons .btn-default {border: unset; background: var(--button-hover-color); color: var(--text-color-2); padding: 10px 20px 10px 20px; border-radius: var(--button-border-radius); transition: all 0.3s ease; display: inline-block;}
.daterangepicker .drp-buttons .btn-default:hover {background-color: var(--button-color); transform: scale(0.95);}
.daterangepicker .ranges li {color: var(--text-color); font-weight: 600;}
.daterangepicker .calendar-table th {font-size: 12px; font-weight: 700;}
.daterangepicker .calendar-table td {font-size: 12px; font-weight: 600;}
/*******
new css
*****************/
.header-content-area h2 a { color: #333333; } 
.header-content-area h2 a i.fa-solid.fa-arrow-right-long { padding-left: 5px; opacity: 0; visibility: hidden; transition: all 0.4s ease; transform: scale(1.2); } 
.header-content-area h2 a:hover i.fa-solid.fa-arrow-right-long { opacity: 1; visibility: visible; margin-left: 12px;}
.dropdown-span ~ i.fa-regular.fa-chevron-down {   margin-right: 0; padding-left: 10px;}
.dropdown-btn-outer .dropdown-item {  padding: 0; width: 100%;}
li.dropdown-item:last-child, li.dropdown-item:nth-child(2) {  border-top: 1px solid #EAECF0;}
.dropdown-btn-outer .dropdown-item button {  border: unset; background: unset; width: 100%; padding: 11px;}
.dropdown-btn-outer .dropdown-item button .dropdown-item-export {  display: flex; gap: 8px; align-items: center;}
.dropdown-btn-outer .dropdown-item:active { background: var(--button-color);}
.dropdown-btn-outer .dropdown-item:active p { color: var(--text-color-2);}
.dropdown-btn-outer ul.dropdown-menu {padding: 0;}
.dropdown-btn-outer ul li > .form-check, .form-check {  padding: 6px 14px; width: 100%;border-bottom: 1px solid var(--table-border-color); position: relative; display: flex; align-items: baseline;}
.form-check {  display: block;   min-height: 0px; padding-left: 0px;  margin-bottom: 0px;}
.dropdown-btn-outer .dropdown-item > label > .dropdown-item-inner {  display: flex;justify-content: space-between;  align-items: center; gap: 8px;}
.dropdown-btn-outer .dropdown-item > label > .dropdown-item-inner > input#bp24 {  display: inline-block; width: 20px; height: 20px; position: relative;  transition: all 0.4s; appearance: none;vertical-align: middle;}
.dropdown-btn-outer .dropdown-item > label > .dropdown-item-inner > .drop-text-con > .check-btn { margin-right: 14px;}
.dropdown-btn-outer .dropdown-item button .dropdown-item-export p, .dropdown-btn-outer .dropdown-item > label .dropdown-text { font-size: 14px; white-space: pre-wrap;}
.exclude-list { width: 100%; max-width: 250px;}
.reset-pass .form .reporting-form-wrap { margin-bottom: 60px;}
.dropdown-btn-outer ul.dropdown-menu li:nth-child(2) ul { display: inline-flex; gap: 10px; width: 100%; padding: 0px 10px;}
.dropdown-btn-outer ul.dropdown-menu li:nth-child(2) ul li {  width: 100%;}
.dropdown-btn-outer ul.dropdown-menu li:nth-child(2) ul li > .dropdown-report-inner { text-align: center; display: flex; justify-content: center; align-items: center;}
.dropdown-btn-outer ul.dropdown-menu li:nth-child(2) ul li > .dropdown-report-inner i.fa-solid.fa-caret-down { margin-right: 0;}
.dropdown-btn-outer ul.dropdown-menu li:nth-child(2) ul, .filter-dropdown ul.dropdown-menu li:nth-child(2) ul  { display: inline-flex; gap: 10px; width: 100%; padding: 10px 10px; border-radius: var(--border-radius);  background: var(--text-color-2);}
.dropdown-btn-outer ul.dropdown-menu li:nth-child(2) ul li:nth-child(1) .dropdown-report-inner, .filter-dropdown ul.dropdown-menu li:nth-child(2) ul li:nth-child(1) .dropdown-report-inner  { background: #283144;}
.report-table-box td.empty-report {  text-align: center; height: 50px;}
.dropdown-btn-outer ul.dropdown-menu li:nth-child(1) ul, .filter-dropdown ul li:nth-child(1) ul { max-height: 300px; overflow-y: auto; overflow-x: hidden;}
.exclude-desk { display: flex;  gap: 8px; flex-wrap: wrap;}
.logo-header img + span {display: block; text-align: center;padding-top: 8px; color: var(--text-color); font-weight: 500;}
.search-form > input[type="text"] { border: 1px solid var(--border-color); border-radius: var( --button-border-radius); padding: 5px 30px 5px 12px; } 
.search-form > button { border: 1px solid var(--button-color); background: var(--button-color); color: var(--text-color-2); padding: 5px 16px 5px 16px; border-radius: var(--button-border-radius); margin-left: -20px; border-top-left-radius: 0px; border-bottom-left-radius: 0; } 
.search-form > input[type="text"]:focus-visible { outline: none; } 
.page-title span, .user-info span { padding-right: 15px; text-transform: capitalize;}
.page-title { display: flex; align-items: center; line-height: normal; } 
.user-select-box .check-btn { border: 1px solid var(--border-color); width: 20px; height: 20px; margin-right: 10px; }
.dropdown-btn-outer ul li > .form-check > input, .form-check input { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; } 
.form-check input[type="checkbox"]:checked~.form-check label.check-btn::before { transform: scale(1.2); } 
label.form-check-label { width: 20px; height: 20px; border: 1px solid var(--button-color); margin-right: 5px; color: var(--text-color); border-radius: 4px; display: flex; z-index: 1;} 
span.dropdown-text { padding-left: 15px; width: 180px; } 
.form-check-label::before { content: '\f00c'; font-family: 'Font Awesome 5 Pro'; font-weight: 900; position: relative; width: 100%; height: 100%; display: inline-flex; justify-content: center; align-items: center; transform: scale(0); transition: all 0.4s; color: var(--primary-color); font-size: 14px; border-radius: 5px; } 
.form-check input[type="checkbox"]:checked~.form-check-label::before { transform: scale(1.2); background-color: var(--button-color); } 
.drop-text-con  span.dropdown-text { color: var( --text-color); }
.alert-desk { position: absolute;  top: 20px;  left: auto; width: 100%; max-width: 25%;  margin: 0 auto;  display: flex; justify-content: center; align-items: center;  right: 10%;}
ul.empty-projects { max-height: 40px; text-align: center; padding-top: 10px;}
.user-profile-inner span {  position: absolute; width: 10px; height: 10px; bottom: 0; right: 0;border-radius: 5px; border: 1.5px solid var(--text-color-2); background: #17B26A;}
.user-select-box input[type="checkbox"]:checked { border: unset;}
span#copied {  display: none;  background: var(--text-success);}
.flite-wrapper .dropdown-report-inner { width: 100%; } 
.flite-wrapper .dropdown-report-inner { width: 100%; display: flex; justify-content: space-between; } 
.filter-dropdown .form-check { display: flex; padding: 7px 4px; } 
.report-dropdoze-mobile { display: none; } 
.flite-wrapper { display: none; } 
.hidden { display: block; } 
.flite-wrapper { position: absolute; top: 40px; right: 10px; z-index: 8; width: 200px; background: var(--text-color-2); border-radius: var( --border-radius); padding: 12px; } 
.filter-dropdown { position: relative; } 
.flite-wrapper .filter-list-wrap { display: flex; flex-direction: column; gap: 10px; } 
.filter-icons svg path { fill: var(--text-color-2); } 
.filter-icons svg { margin-left: 8px; } 
.form-check-input:checked { background-color: var(--button-color); border-color: var(--button-color); } 
.select2-container--default .select2-selection--multiple { border: 1px solid var(--border-color)!important; border-radius: var(--button-border-radius)!important; }
.select2-container--default .select2-selection--single .select2-selection__arrow {  top: 7px!important;}
.select2-container--default .select2-selection--single { background-color: var(--text-color-2); width: 100%; border-radius: var(--button-border-radius)!important; padding: 6px 8px; color: var(--text-color)!important; font-size: 14px; border: 1px solid var(--border-color)!important; line-height: normal; font-weight: 500; outline: none; display: block; height: 40px!important; }
#report_form .password-wrap { display: block;}
.select2-results__option { font-size: 14px; padding-left: 14px!important;}
.select2-dropdown, .select2-container--default .select2-search--dropdown .select2-search__field {  border:1px solid var(--border-color)!important;}
.daily_all_projects textarea.control-form { min-height: 300px;}
.daily_all_projects form, #project_search { display: flex;  gap: 12px;}
.daily_all_projects .report-table-box .table-data span { width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; max-width: 300px; } 
ul.sub-menu-wrap { display: none; } 
.nav-sub-menu-container { position: relative; } 
.showoption { position: absolute; top: 50%; right: 0%; transform: translate(25%, -50%); } 
.showoption a i { color: var(--button-hover-color); font-size: 16px; }
ul.sub-menu-wrap {  display: none; ;}
.navbar ul li .suboption li a {  padding-left: 25px;}
.daily_my_tasks .report-table-box tbody tr td.wrap-task { width: auto;}
.dashb_index .des-wrap { width: 80%;}
.proje_index .scrollable {  height: 640px;}
.dashboardchart { display: inline-flex;  flex-direction: column; width: calc(50% - 20%);  height: 350px;}
.dashboardchart.second-chart {  width: calc(50% - 13%);}
.atten_index .sticky-head-name, .daily_allreports .sticky-head-name  {position: sticky; top: -4px; width: 100%; z-index: 2; background: var(--secondary-color); border-radius: 0px; margin-top: 0; padding-left: 5px;}
.report-table-box tbody tr.disable { opacity: 0.5;}
/* ===============
 pagination
==================
*/
.proje_index .report-table-wrapper { position: relative; height: 100%;}
.news_paginations .news_pagination {  display: flex; gap: 10px;}
.news_paginations { list-style: none; gap: 10px; position: absolute; bottom: 0px; left: 0; width: 100%; height: auto; display: flex; justify-content: center; align-items: end; z-index: 1; padding: 6px 0px; }
.page-item a { display: inline-block; padding: 4px 0px; border: 1px solid var(--text-color); border-radius: 10px!important; width: 32px; height: 32px; text-align: center; transition: all 0.2s ease-out 0s; background: var(--text-color); cursor: pointer; } 
li.page-item .active  { background-color: var(--button-color); color: var(--text-color-2); border: 1px solid var(--button-color); } 
.page-item a { color: var(--text-color-2); }
.devic_devicesdata .report-table-box tbody [data-label="status"], .devic_devicesdata .report-table-box tbody [data-label="date"] { width: 200px;}
.devic_devicesdata .report-table-box thead tr th:first-child {  width: 250px;}
.devic_devicesdata .report-table-box tbody [data-label="date"] span { width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal; }
/* .list-chart-wrapper { height: calc(100vh - 400px); overflow: auto;} */
.user-detail-info { display: flex;  align-items: center; gap: 15px;}
.role-wrapper { background: #d6e4ee; padding: 4px 0px;  border-radius: 5px;  display: flex; justify-content: center; align-items: center; color: #405162; font-weight: 600;}
.date-picker-main { position: relative; }
 .date-picker-main span { position: absolute; top: 50%; right: 12px; } /*================ id card css ==================*/ .card-warpper { width: 192px; height: 288px; background: #ffffff; border-radius: 4px; overflow: hidden; }
 .all-card-wrapper {max-height: 750px;overflow: auto;display: flex;flex-wrap: wrap;justify-content: center;} 
 .card-warpper.employee-card { margin: 10px 10px 10px 10px; position: relative; }
 .profile-middle-warpper{ margin-top: 60px; }
 .employee-info{ padding: 10px 10px 0 10px; }
 .info-inner{ display: flex; }
 .info-inner div { font-size: 12px; font-weight: 500; line-height: normal; letter-spacing: 0; font-family: "Poppins", system-ui; }
 .info-inner .lable-name{ color:#F5972C; }
 .info-inner span { font-size: 13px; margin: 0px 3px 0px 5px; font-weight: 600; line-height: normal; }
 .profile-footer-warpper { position: absolute; bottom: 0; width: 100%; max-width: calc(100% - 14px); margin: 0 auto; background: #f5972c; right: 0; border-top-left-radius: 20px; padding: 1px 10px 0; font-size: 12px; color: #fff; text-align: center; }
 .leaving-warpper { text-align: center; font-weight: 600; background: #f5972c; color: white; margin: 0 10px 0 10px; border-radius: 15px; }
 .logo-img-wrap { width: 100%; padding: 10px 0px 0px 10px; max-width: 48%; }
 .logo-img-wrap img { max-width: 100%; }
 .logo-wrapper { position: absolute; top: 0; left: 0; }
 .profile-warpper { width: 192px; height: 100px; background: #212830; position: relative; z-index: 0; }
 .profile-warpper::before { position: absolute; content: ""; top: auto; left: -19px; width: 230px; height: 90px; background: #212830; border-radius: 50%; bottom: -44px; z-index: -1; }
 .merge-blog { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
 .profile-img-wrapper { width: 100%; height: 100%; border: 4px solid #F5972C; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; max-width: 68px; max-height: 68px; margin: 0 auto; min-height: 68px; }
 .profile-img-wrapper img { max-width: 100%; display: flex; align-items: center; justify-content: center; height: 100%!important; width: 100%!important; background: #212830; }
 .profile-imge-wrapper h6 { font-size: 14px; color: #fff; text-align: center; padding-top: 5px; font-weight: 500; }
 .profile-imge-wrapper h6 span { color: #F5972C; }
 .profile-imge-wrapper { padding-top: 12px; }
 .merges-block { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
 .svg-wrapper span { position: absolute; top: auto; bottom: -60px; left: 0; z-index: 9999999; display: inline-block; }
 .svg-wrapper span:nth-child(2) { transform: rotate(0deg); bottom: -55px; left: 10px; z-index: 1; }
 .svg-wrapper span:nth-child(1) { transform: rotate(7deg); bottom: -59px; left: -3px; z-index: 2; }
 .svg-wrapper span:nth-child(3) { transform: rotate(18deg); bottom: -51px; left: -20px; z-index: 3; }
 .all-card-wrapper .disable { opacity: 0.5; } 
 /*--- 12/09/2024 ---*/ 
 .return-icon-wrapper .header-content-area { margin-top: 20px; padding-left: 10px; padding-right: 10px; justify-content: flex-start; gap: 15px; }
 .delete-icon { display: flex; align-items: center; gap: 10px; justify-content: end; } 
 /*--- 17/09/2024 ---*/ 
 .import-modal  .modal-dialog { position: fixed; top: 0; right: 0; left: auto; transform: translate(100%, 0%)!important; transition: transform .3s linear!important; height: 100%; margin: 0; }
 .import-modal.show  .modal-dialog { transform: translate(0%, 0%) !important; }
 .import-modal .modal-dialog .modal-footer { position: absolute; top: auto; bottom: 0px; left: auto; right: 0; width: 100%; }
 .import-modal .modal-dialog .modal-content { height: 100%; border-radius: 0; border: unset; }
 .report-table-box tbody tr.active {  opacity: 1;}
#listing .report-wrapper-box { overflow-y: auto; max-height: 160px;}
.merge-block form { display: flex; gap: 15px; align-items: center;}
.team-select-option .select2-selection.select2-selection--single {  background: var(--button-color)!important;  padding: 2px 9px 0px 9px;  height: 36px!important;  width: 160px;}
.team-select-option .select2-container--default .select2-selection--single .select2-selection__placeholder, .team-select-option .select2-container--default .select2-selection--single .select2-selection__rendered {  color: var(--text-color-2)!important;}
select#projectSelect {  display: none!important;}
.team-select-option {  display: inline-block;  width: auto;}
.modal-footer .dropdown-btn-outer {  display: flex;  gap: 10px;  align-items: center;}
.team-select-option .select2-container--default .select2-selection--single .select2-selection__arrow b::before { content: "\f078"; position: absolute; top: -10px; font-family: 'Font Awesome 5 Pro'; left: -7px; bottom: auto;  color: var(--text-color-2);}
.team-select-option .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--text-color-2);}
.team-select-option .select2-container--default .select2-selection--single .select2-selection__arrow b { position: relative; border: unset;}
.filter-main .dropdown-report-inner, .filter-main  .dropdown-report-inner span { color: var(--text-color); font-weight: 400;}
.filter-main .dropdown-report-inner {justify-content: space-between;}
.filter-main .dropdown-btn-outer > .dropdown-span {  background: var(--button-color); padding: 9px 11px; border-radius: var(--button-border-radius); cursor: pointer;}
a.team-reort-view { color: var(--text-color); font-weight: 600;}
/*================
    @media Screen
==================*/

@media screen and (max-width: 1324px) {
.navbar-expand-lg .navbar-toggler {display: block;}
.navbar-expand-lg .navbar-collapse {display: none !important;}
.navbar-expand-lg .navbar-collapse.collapse.show { display: block!important;}
.manu-navbar { height: 575px; } 
.navbar-expand-lg .navbar-collapse.collapse.show > .mobile-nav { display: flex; padding-bottom: 20px; padding-top: 15px; }
.content-wrap-inner { flex-wrap: wrap;  flex-direction: column; position: relative;}
.right-sidebar-wrapper { margin: 0;}    
.left-sidebar-wrapper { max-width: 100%; padding: 0px 16px;}
.logo-header { justify-content: space-between;}
.navbar-expand-lg .navbar-collapse {  top: 0px; left: 0px;  width: 350px; background: var(--third-color);  box-shadow: var(--box-shadow-color); z-index: 9; padding: 30px 16px;}
.navbar-expand-lg .navbar-collapse.collapse.show >  .logo-header img { width: 120px; height: 80px; object-fit: contain;} 
.navbar-expand-lg .navbar-collapse.collapse.show > .mobile-nav .navbar-toggler .navbar-toggler-icon { background: url(); font-size: 25px; } 
.navbar-expand-lg .navbar-collapse.collapse.show > .mobile-nav  button.navbar-toggler { border: unset; } 
.left-sidebar-wrapper .navbar.navbar-expand-lg {  position: unset;} 
.manu-navbar {  height: calc(100vh - 252px);}
.navbar-expand-lg .navbar-collapse { position: fixed;  height: calc(100vh - 0px);  border-radius: 0px;}
.task-info-inner { padding: 15px 30px 15px 15px;}
.devic_devicesdata .task-info-inner { padding: 15px 15px 15px 15px;}
.news_paginations { bottom: -38px;  padding: 0px 0px;}
.proje_index .rlspace { padding:10px 10px 45px 10px;}
.proje_index .scrollable {height: calc(100vh - 370px);}
.dashb_index .des-wrap {width: 60%;}
.dashb_index .dashboardchart {height: 380px;}
.dashb_index .dashboardchart { height: auto;}
}
@media only screen and (max-width: 1325px) and (min-width: 992px) {
.scrollable { height: calc(100vh - 270px);}
.daily_userSpecificReport .for_view_all { height: calc(100vh - 230px); }
.users_index .report-wrapper-box {  height: calc(100vh - 305px); }
.daily_assigned_work .assign-scroll { height: calc(100vh - 280px);}
.daily_allreports .scrollable, .atten_index .scrollable {height: calc(100vh - 340px); }
.devic_devicesdata .scrollable { height: calc(100vh - 468px); }
.atten_index .scrollable {  height: calc(100vh - 300px); }
}
@media screen and (max-width: 1024px){   
 /*--table responsive screen--*/
table thead {display: none;}
.report-table-box tbody tr td:first-child {padding-left:10px;}
.report-table-box tbody tr td:before, tfoot tr td:before {content: attr(data-label);  float: left;   font-size:10px;  text-transform: uppercase; font-weight: bold;}
.report-table-box tbody tr td, tfoot tr td {display: block;   text-align: right;  font-size: 14px; padding: 10px 10px!important;}
.report-table-box tr td:last-child, .report-table-box tr th:last-child {width: 100%;}
.report-table-box tbody tr td.wrap-task { max-width: 100%; }
.report-table-box tfoot tr td:first-child {display: none;}
.report-table-box tbody tr td.wrap-task span { width: auto; display: -webkit-inline-box;}
.edit-btn { justify-content: end;}
.daily_all_projects .report-table-box .table-data span { margin: 0 0 0 auto; text-align: end;}
.menu-items { padding: 5px 0px;}
.role-wrapper { padding: 4px 10px; display: inline-block;}
.user-detail-info { justify-content: end; flex-direction: column; align-items: flex-end;}
}
 /*--table responsive screen--*/
@media screen and (max-width: 991px){
.daily_allreports .scrollable, .atten_index .scrollable { height: 520px;}
.daily_assigned_work .scrollable { height: 443px;}
.wrapper .tooltip { display: none; }
.scrollable { height: calc(100vh - 270px);}
.main-report-outer { padding: 20px;  }
.users_index .report-wrapper-box { height: calc(100vh - 305px);}
.daily_assigned_work .assign-scroll { height: unset;  }
.daily_assigned_work .scrollable { height: calc(100vh - 525px);  }
.daily_allreports .scrollable, .atten_index .scrollable { height: calc(100vh - 310px); }
.devic_devicesdata .scrollable {  height: calc(100vh - 470px); }
.daily_userSpecificReport .for_view_all { height: calc(100vh - 236px); }
.report-dropdoze.merge-block { display: none; }
.report-dropdoze.merge-block.report-dropdoze-mobile form#filter_form { display: none; }
.report-dropdoze.merge-block.report-dropdoze-mobile {display: flex; }
.merge-block { display: none; }
.dashboard-wrap {   flex-wrap: wrap;}
.dashboardchart, .dashboardchart.second-chart {
    width: 60%;
}

}
@media screen and (max-width: 767px) {
.merge-block {  flex-wrap: wrap; justify-content: flex-end; }
.header-content-area {  flex-wrap: wrap;  gap: 15px; }
.time-info {flex-wrap: wrap; gap: 10px;} 
.wrapper, .outer-mobile-wrap div { width: 100%; }
.daily_allreports .wrap-task, .daily_userSpecificReport .wrap-task { width: 100%; min-width: 250px; }
.daterangepicker.show-calendar .drp-buttons { display: flex; align-items: center; }
.daterangepicker .ranges li {padding: 5px 12px;}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { min-width: 26px;  height: 26px;  line-height: 20px;}
.daterangepicker .calendar-table table { border-spacing: 0px 0px;  }
.project-info-wrapper { padding: 10px 10px 10px 10px; }
.daily_assigned_work .scrollable { height: calc(100vh - 600px); }
.daily_allreports .scrollable, .atten_index .scrollable { height: calc(100vh - 288px); }
.devic_devicesdata .scrollable { height: calc(100vh - 550px); }
.daterangepicker { width: max-content; }
.wrapper {  margin-bottom: 0px; }
.daily_index .task-info-inner.time-info div, .hrs-wrap, .mints-wrap, .status-wrap {  width: 100%; }
.daily_index .task-info-inner.time-info { padding-right: 0; }
.outer-mobile-wrap, .task-info-inner {display: flex;  gap: 10px; width: 100%; } 
.task-info-inner {flex-direction: column;}
.report-dropdoze { flex-wrap: wrap; justify-content: end;}
.merge-block, .outer-mobile-wrap {  gap: 10px; }
.gap-4 {  gap: 0.4rem!important; }
.user-wrap {  width: 100%;}
.daily_all_projects form {flex-wrap: wrap;}
.dashb_index section.main-report-outer {  height: 100%;}
}
@media only screen and (min-width: 644px) and (max-width: 760px) {
.users_index .report-wrapper-box { height: calc(100vh - 330px); }
}
@media only screen and (min-width: 487px) and (max-width: 644px) {
.users_index .report-wrapper-box { height: calc(100vh - 380px); }
}
@media screen and (max-width: 575px) {
.daily_allreports .scrollable {  height: calc(100vh - 340px); }
.outer-mobile-wrap {flex-wrap: wrap;}
.daily_assigned_work .scrollable { height: calc(100vh - 680px); }
.scrollable { height: calc(100vh - 350px);}
.dashb_index .des-wrap { width: 100%;}
.proje_index .scrollable {height: calc(100vh - 435px);}
.daily_all_projects form, #project_search {  flex-wrap: wrap;}
.report-table-box tbody tr td span {white-space: break-spaces;}
.dashboardchart, .dashboardchart.second-chart {  width: 100%;}
.status-outer-content { flex-direction: column;}
}
@media screen and (max-width: 485px) {
.login-page {max-width: 90%;}
.form > h3 {margin-bottom: 30px;}
.checkbox-wrap .check-box > label, .checkbox-wrap .reset-pass h6 {font-size: 14px;padding-left: 10px;}
.control-form, .typeahead__container .typeahead__field input, .typeahead__container .typeahead__field textarea { font-size: 12px; }
.daily_userSpecificReport .for_view_all { height: calc(100vh - 269px); }
.daily_allreports .scrollable { height: calc(100vh - 350px);  }
.users_index .report-wrapper-box {  height: calc(100vh - 430px); }
.atten_index .scrollable { height: calc(100vh - 335px); }
.password-wrap {flex-wrap: wrap;}
.search-form > input[type="text"] {padding: 5px 5px 5px 12px;}
}