/*//////////////////Custom/////////////////////*/
/*/FONT-SIZE/*/
.fs_4 {font-size: 4px !important;}
.fs_6 {font-size: 6px !important;}
.fs_8 {font-size: 8px !important;}
.fs_10 {font-size: 10px !important;}
.fs_11 {font-size: 11px !important;}
.fs_12 {font-size: 12px !important;}
.fs_13 {font-size: 13px !important;}
.fs_14 {font-size: 14px !important;}
.fs_15 {font-size: 15px !important;}
.fs_16 {font-size: 16px !important;}
.fs_17 {font-size: 17px !important;}
.fs_18 {font-size: 18px !important;}
.fs_19 {font-size: 19px !important;}
.fs_20 {font-size: 20px !important;}
.fs_22 {font-size: 22px !important;}
.fs_24 {font-size: 24px !important;}
.fs_26 {font-size: 26px !important;}
.fs_28 {font-size: 28px !important;}
.fs_30 {font-size: 30px !important;}
.fs_32 {font-size: 32px !important;}
.fs_34 {font-size: 34px !important;}
.fs_36 {font-size: 36px !important;}
.fs_38 {font-size: 38px !important;}
.fs_40 {font-size: 40px !important;}

/*/Font Weight/*/
.fw_200 {font-weight: 200 !important;}
.fw_300 {font-weight: 300 !important;}
.fw_400 {font-weight: 400 !important;}
.fw_500 {font-weight: 500 !important;}
.fw_600 {font-weight: 600 !important;}
.fw_700 {font-weight: 700 !important;}
.fw_800 {font-weight: 800 !important;}
.fw_900 {font-weight: 900 !important;}

/*********Clip Text***********/
.clip_1 {-webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_2 {-webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_3 {-webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_4 {-webkit-line-clamp: 4; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_5 {-webkit-line-clamp: 5; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_6 {-webkit-line-clamp: 6; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_7 {-webkit-line-clamp: 7; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_8 {-webkit-line-clamp: 8; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}

/*********Page Card Body***********/
.page-content-wrapper>.row>.col-12>.card>.card-body{
	min-height: calc(100vh - 180px);
}


/*//////////////////////////////////DataTabel CSS////////////////////////////////*/
.datatables_custom {position: relative;}
.datatables_custom .table_btngroup {position: absolute; height: 45px; right: 0; padding: 15px; display: flex; align-items: center; grid-gap: 10px;}
.dataTables_wrapper {padding: 0 !important;}
/*.dataTables_filter label {margin: 0; padding: 0;}*/
.dataTables_wrapper>.row:first-child {padding: 0 15px; border-bottom: 1px solid #eee;}
.dataTables_length {display: inline-block; font-size: 13px; float: left;}
.dataTables_filter {display: inline-block; margin-left: 15px; font-size: 13px; float: right;}
.dataTables_length select {margin: 0px; margin-left: 10px; border: 1px solid #ddd; padding: 7px 10px !important;}
.dataTables_filter input {margin-top: 3px; border: 1px solid #ddd; padding: 8px 10px;}
.dataTables_length select:focus, .dataTables_filter input:focus {outline: none; border: 1px solid #7078dfed;}

.action_btn {display: flex; align-items: center; grid-gap: 10px;}

.dataTables_wrapper .dataTables_info {font-size: 13px; padding: 10px 0; float: left;}
.dataTables_wrapper .dataTables_paginate {padding: 5px 0; float: right;}
.paginate_button {border: 1px solid #ddd; padding: 5px; text-align: center; min-width: 30px; display: inline-block; font-size: 13px; color: #333; cursor: pointer;}
.ellipsis, .ellipsis + a {display: none;}
.paginate_button.current {background-color: #525ce5; border-color: #525ce5; color: #fff;}
.paginate_button.previous, .paginate_button.next {padding: 5px 10px;}
.paginate_button.disabled {color: #999; pointer-events: none;}

table td {vertical-align: middle;}
table thead th {white-space: nowrap;}
table .group td {background-color: #eee;}
table .group td h6{font-weight: 500; font-style: italic;}

/*/Modal/*/
.modal-xxl {max-width: 1500px;}
.modal-content {border: none;}
.modal-header {z-index: 9; background-color: transparent; position: relative;}
.modal-header h5 {color: #fff !important;}
.modal-header button {filter: invert(20); opacity: 0.7;}
.modal-body .form_basic {position: relative; padding: 15px; top: 10px; border-radius: 5px; background-color: #fff;}
.modal-body {z-index: 9;}
.modal-header:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 200%; z-index: -1; background: url(../images/title-img.png); background-size: cover; background-position: center; background-color: #04a9f5;}

#permissionModal table {margin-bottom: 0;}
#permissionModal table tr th:first-child, #permissionModal table tr td:first-child {width: 300px;}

.card-title-desc {margin-bottom: 15px;}

/*/Toaster/*/
.toaster {position:fixed; top:20px; right:20px; padding:13px 20px; border-radius:8px; color:#fff; font-size:14px; transition:opacity 0.5s ease-in-out; z-index:9999; opacity:0;}
.toaster.show {opacity:1; transition:opacity 0.5s ease-in-out;}

.toaster i {margin-right:15px; font-size:20px; position: relative; top: 2px;}
.toaster.show {animation:slideIn 0.5s forwards; border-bottom:3px solid #fff;}
.toaster.hide {animation:slideOut 0.5s forwards; border-bottom:none;}

@keyframes slideIn { from { transform:translateY(100%);} to { transform:translateY(0);} }
@keyframes slideOut { from { transform:translateY(0);} to { transform:translateY(100%);} }

.breadcrumb-item>a {color: #111 !important;}
.breadcrumb-item.active, .breadcrumb-item+.breadcrumb-item::before {color: #505050;}

.input_icon {position: relative;}
.input_icon i {position: absolute; right: 0; top: 0; padding: 10px; opacity: 0.7;;}
/*/Calender icon change/*/
::-webkit-calendar-picker-indicator {filter: invert(1);}

/*/Open Calender on click input/*/
input[type="date"], input[type="datetime-local"], input[type="time"] {position: relative;}
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {background: transparent; bottom: 0; color: transparent; cursor: pointer; height: auto; left: 0; position: absolute; right: 0; top: 0; width: auto;}

.price::before {
	content: "$"; /* Set the content to pound symbol */
	position: absolute;
	left: 10px; /* Adjust as needed */
	top: 50%;
	transform: translateY(-50%);
	color: gray; /* Optional: Adjust the color */
  }

  .price {
	padding-left: 20px;
	position: relative;
  }

.sub_heading {
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	grid-gap: 10px
}

.sub_heading span.line {
	height: 1px;
	background-color: #ddd;
	flex: 1 1 auto !important;
	margin-right: 15px;
}

.car_select {background-color: #fff; border-radius: 4px; display: grid; padding: 15px; grid-gap: 10px; justify-content: center; text-align: center; position: relative;}
.car_select img {width: 100%; object-fit: contain;}
.car_select input {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 9;}
.car_select input + span {position: absolute; height: 100%; width: 100%; top: 0; left: 0; border: 2px solid transparent; transition: all 0.5s;}
.car_select input:checked + span {border: 2px solid #525ce5;}

.modal.show + .modal {background-color: #000000a8;}


/*input icons8*/

.input_group {position: relative;}
.readOnly{
	pointer-events: none;
	background-color: #d3d3d31f;
}
button.readOnly{
	pointer-events: none;
	background-color: darkgrey;
}



/* By JR */
/* Width f0bd05 f1f1f1 */ 
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #21AAEC;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.no-click {
	pointer-events: none;
}

@media only screen and (max-width: 600px) {
	.small-screen-btn {
		font-size:7px;
		white-space: nowrap;
	}
}

@media only screen and (min-width: 600px) {
    .small-screen-btn {
		font-size: 8px;
		white-space: nowrap;
	}
}

@media only screen and (min-width: 768px) {
    .small-screen-btn {
		font-size: 9px;
		white-space: nowrap;
	}
}

@media only screen and (min-width: 992px) {
    .small-screen-btn {
		font-size: 10px;
		white-space: nowrap;
	}
}

@media only screen and (min-width: 1200px) {
    .small-screen-btn {
		font-size: 11px;
		white-space: nowrap;
	}
}

.card-header, .card-body {padding: 20px;}
.card-header h4 {font-size: 16px;}
.breadcrumb-item + .breadcrumb-item::before {position: relative; top: 2px; padding-right: 2px;}
.breadcrumb-item + .breadcrumb-item {padding-left: 3px;}

/*/////////FOLDER DESIGN///////////*/
.folder_grid {display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 15px;}
.folder_grid .folder_box {text-align: center; height: 100px; position: relative; z-index: 20; 
    padding: 10px 2px;
    border: 1px solid #dddd;}
.folder_box.clip_text {position: relative; z-index: 9;}
.folder_box.ractive {z-index: 20;}
.folder_box span.ffi {font-size: 50px; color: #7a7a7a; display: block; line-height: 45px;}
.folder_grid .folder_box p {margin-bottom: 0; font-size: 13px; line-height: 16px;}
.folder_box.clip_text p {-webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.folder_box.clip_text span.ffi {color: #3f6dc9;}
.selected_box{z-index: 9999 !important; background-color: #f7f7f7;}


.action_buttons {display: none; position: absolute; right: -35px; top: 30px; background-color: #fff; box-shadow: 0 4px 24px 0 rgba(62, 57, 107, 0.18); padding: 0px; border-radius: 4px; overflow: hidden; min-width: 150px;}
.action_buttons button {display: block; width: 100%; border: none; background-color: transparent; text-align: left; font-size: 12px; padding: 12px 15px; color: #666;}
.action_buttons button:hover {background-color: #f9f9f9;}

@media only screen and (max-width:576px) {
	.folder_grid {grid-template-columns: repeat(4,1fr); grid-gap: 7px;}
	.folder_box span.ffi {font-size: 40px;}
	.folder_grid .folder_box p {font-size: 12px;}
}
@media only screen and (max-width:460px) {
	.folder_grid {grid-template-columns: repeat(3,1fr); grid-gap: 5px;}
}