/*//////////////////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;}



/*//////////////////////////////////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-top: 4px; border: 1px solid #ddd; padding: 8px 10px;}
.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;}
table p,
table h1,
table h2,
table h3,
table h4,
table h5,
table h6,
table span,
table strong,
table em,
table b,
table i,
table u,
table div,
table li,
table a {
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin: 0;
}

/*/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;}




/* 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;
	}
}

.clip_1 {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 100px; -webkit-line-clamp: 1;}
.clip_2 {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 100px; -webkit-line-clamp: 2;}
.clip_3 {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 200px; -webkit-line-clamp: 3;}
.clip_4 {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 200px; -webkit-line-clamp: 4;}
.clip_5 {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 200px; -webkit-line-clamp: 5;}