/*!
Theme Name: Versus
Theme URI: https://aherchi.sit-demo.net/
Author: Talha Sharafat
Description: Versus ist ein individuelles WordPress-Theme, das für Übersetzungsdienstplattformen entwickelt wurde, auf denen Kunden Übersetzungsaufträge erteilen und professionelle Dolmetscher einstellen können. Das als spezialisiertes Jobportal konzipierte Theme ermöglicht es Dolmetschern, sich zu registrieren, ihre Verfügbarkeit zu verwalten und über eine intuitive Schnittstelle Kundenaufträgen zugewiesen zu werden.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: versus
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Normalize
- Box sizing
# Base
- Typography
- Elements
- Links
- Forms
## Layouts
# Components
- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries
# plugins
- Jetpack infinite scroll
# Utilities
- Accessibility
- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
:root {
	/* Font Variables */
	--font-family: "Inter", sans-serif;
	--font-weight-normal: 400;
	--font-size-default: 14px;

	/* Color Variables */

	/*main colors*/
	--color-main-white: #ffffff;
	--color-main-black: #111111;
	--color-bg-screen: #f9f9f9;
	--color-input-border: #e6e6e6;
	--color-grey-text: #3d3d3d;
	--color-Success-surface-primary: #22C55E;

	/*cards colors*/
	/*green card*/
	--color-green-light: #d7f5f1;
	--color-green-normal: #559b93;
	--color-green-dark: #223e3b;

	/*yellow card*/
	--color-yellow-light: #fff1da;
	--color-yellow-normal: #ec980c;
	--color-yellow-dark: #4f3304;

	/*blue cards*/
	--color-blue-light: #e9f0fc;
	--color-blue-normal: #0976f7;
	--color-blue-dark: #043b7c;

	/*red cards*/
	--color-red-light: #F5D7D7;
	--color-red-normal: #9B5555;
	--color-red-dark: #3E2222;

	/*Primary*/
	--color-primary-light: #fbfee3;
	--color-primary-50: #cfd772;
	--color-primary-100: #f5feb0;
	--color-primary-200: #bfca43;
	--color-primary-300: #b7c42c;
	--color-primary-400: #afbd14;
	--color-primary-500: #9eaa12;
	--color-primary-600: #8c9710;
	--color-primary-700: #7a840e;
	--color-primary-800: #69710c;
	--color-primary-900: #585f0a;

	/*Warning*/
	--color-warning-50: #fef3d0;
	--color-warning-100: #FFF1DA;
	--color-warning-200: #fce8a1;
	--color-warning-300: #fce289;
	--color-warning-400: #fbdc71;
	--color-warning-500: #f9d142;
	--color-warning-600: #f8c513;
	--color-warning-700: #cfa306;
	--color-warning-800: #b68e05;
	--color-warning-900: #C47E0A;

	/* Info */
	--color-info-50: #b5d6fd;
	--color-info-100: #E9F0FC;
	--color-info-200: #84bafb;
	--color-info-300: #6badfa;
	--color-info-400: #539ff9;
	--color-info-500: #2284f8;
	--color-info-600: #0976f7;
	--color-info-700: #065ec6;
	--color-info-800: #054795;
	--color-info-900: #043b7c;
	/* Success */
	--color-success-50: #f0fdf4;
	--color-success-100: #dcfce7;
	--color-success-200: #b8f3cd;
	--color-success-300: #a0efbd;
	--color-success-400: #70e69c;
	--color-success-500: #58e28b;
	--color-success-600: #1b9e4b;
	--color-success-700: #15803d;
	--color-success-800: #188a42;
	--color-success-900: #22C55E;
	--color-success-1000: #016626;
	/*  danger*/
	--color-danger-50: #feebeb;
	--color-danger-100: #fcd8d8;
	--color-danger-200: #fac4c4;
	--color-danger-300: #f79d9d;
	--color-danger-400: #f68989;
	--color-danger-500: #f36161;
	--color-danger-600: #f03a3a;
	--color-danger-700: #E71111;
	--color-danger-800: #a60d0d;
	--color-danger-900: #961616;
	/*Grey Scale*/
	--color-grey-50: #f5f5f5;
	--color-grey-100: #e9e9e9;
	--color-grey-200: #d9d9d9;
	--color-grey-300: #c4c4c4;
	--color-grey-400: #c4c4c4;
	--color-grey-500: #8a8a8a;
	--color-grey-600: #676767;
	--color-grey-700: #334155;
	--color-grey-800: #111111;
	--color-grey-900: #090909;
}

body {
	font-family: var(--font-family);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-normal);
	font-style: normal;
}

.page-main-container {
	background-color: var(--color-main-white);
	border-radius: 15px;
	border: 1px solid var(--color-grey-100);
}

h2 {
	color: var(--color-grey-900);
	font-size: 32px;
	font-weight: 600;
	line-height: 38px;
	margin:0;
}

p {
	color: var(--color-grey-500);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
.btn-versus-link {
	display: flex;
	height: 44px;
	padding: 0px 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.btn-versus {
	color: var(--color-main-white);
	font-size: 16px;
	line-height: 22px; /* 137.5% */
	letter-spacing: -0.18px;
	height: 44px;
	padding: 0px 14px;
	border-radius: 6px;
	background: var(--color-primary-400);
}

.btn-versus:hover {
	background: var(--color-primary-600);
	color: var(--color-main-white);
}

.btn-versus:active {
	background: var(--color-primary-600) !important;
	color: var(--color-main-white) !important;
}

.btn.btn-versus:focus-visible {
	background: var(--color-primary-600) !important;
	color: var(--color-main-white) !important;
}

a.btn-versus {
	line-height: 44px;
}

.btn-versus-success {
	color: var(--color-main-white);
	font-size: 16px;
	line-height: 22px; /* 137.5% */
	letter-spacing: -0.18px;
	height: 44px;
	padding: 0px 14px;
	border-radius: 6px;
	background: var(--color-Success-surface-primary);
}

.btn-versus-success:hover {
	color: var(--color-main-white);
	background: var(--color-Success-surface-primary);
}

.btn-versus-secondary {
	color: var(--color-grey-700);
	font-size: 16px;
	line-height: 24px; 
	letter-spacing: -0.26px;
	display: inline-flex;
	height: 44px;
	padding: 0px 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 6px;
	border: 1.5px solid;
	border-color:var(--color-grey-400);
	background: var(--color-main-white);
}

.btn-versus-secondary:hover {
	background-color: var(--color-grey-400);
}

.btn-versus-secondary:active {
	background-color: var(--color-grey-400) !important;
}

.btn-versus-tertiary {
	color: var(--color-grey-800);
	font-size: 16px;
	line-height: 24px; 
	letter-spacing: -0.26px;
	display: inline-flex;
	height: 44px;
	padding: 0px 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 6px;
	background: var(--color-grey-50);
}

.btn-versus-tertiary:hover {
	background-color: var(--color-grey-400);
}

.btn-versus-tertiary:active {
	background-color: var(--color-grey-400) !important;
}

.btn-versus-danger {
	color: var(--color-danger-700);
	font-size: 16px;
	line-height: 24px; 
	letter-spacing: -0.26px;
	display: inline-flex;
	height: 44px;
	padding: 0px 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 6px;
	border:none;
	background: var(--color-danger-50);
}

.btn-versus-danger:hover {
	color: var(--color-danger-700);
	background: var(--color-danger-100);
}

.btn-versus-danger:active {
	color: var(--color-danger-700) !important;
	background: var(--color-danger-100) !important;
}

.btn-versus-primary {
	display: flex;
	height: 44px;
	padding: 0px 14px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 6px;
	border: 1.5px solid;
	border-color:var(--color-grey-400);
	background-color: var(--color-main-white);
	color: var(--color-primary-400);
	font-size: 16px;
	line-height: 22px; /* 137.5% */
	letter-spacing: -0.18px;
}
.btn-versus-primary:hover,
.btn-versus-primary:active,
.btn-versus-primary:focus {
	border: 1.5px solid;
	border-color:var(--color-grey-100) !important;
	background-color: var(--color-grey-100) !important;
	color: var(--color-primary-500) !important;
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgb(175 189 20 / 43%);
}

a.disabled {
	pointer-events: none;
	color: var(--color-grey-600) !important; 
}

button:disabled,
.btn:disabled {
	color: var(--color-grey-600);
    background-color: var(--color-grey-100);
    border-color: var(--color-grey-600);
}

.page-title-versus {
	color: var(--Color-grey-900);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px; /* 150% */
}

.modal-title {
	color: var(--Color-grey-900);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px; /* 150% */
}

.modal-subtitle {
	color: var(--Color-grey-900);
	font-size: 14px;
	font-weight: 500;
	line-height: 24px; /* 150% */
}


.page-inner-topbar {
	padding: 15px 20px;
	border-bottom: 1px solid var(--color-grey-100);
}

.page-inner-topbar p {
	font-size:14px;
}

.page-inner-topbar.fixed,
form.order-form .page-inner-topbar {
	position: sticky;
    z-index: 5;
    width: 100%;
    top: 69px;
    background: #fff;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

a {
	color: inherit;
	text-decoration: none;
}

body {
	background-color: var(--color-bg-screen);
}

input:not(.select2-search__field):not([type="radio"]):not([type="checkbox"]):not(.flatpickr-hour):not(.flatpickr-minute),
select,
.iti__country-container {
	height: 48px;
	border-radius:8px;
}

.iti.iti--allow-dropdown {
	width: 100%;
}

.iti__search-input {
	padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.iti__search-input:focus,
.form-select:focus,
.form-control:focus {
	border-color: var(--color-primary-400);
	box-shadow: 0 0 0 0.2rem rgba(175, 189, 20, 0.31);
	outline: none;
}

.form-control:focus-visible {
	border-color: var(--color-primary-400) !important;
	box-shadow: 0 0 0 0.2rem rgb(175 189 20 / 31%);
	outline:none;
}

input.select2-search__field {
	outline:none;
}

.text-primary-versus {
	color:var(--color-primary-400);
}
.text-date {
	color: var(--color-grey-500);
	font-size: 12px;
	line-height: 18px;
}

.select2-container--default .select2-selection--single {
	border: 1px solid var(--color-input-border);
	height: 48px;
	display: flex;
	align-items: center;
	border-radius: 8px;
}

.select2-container--default .select2-selection--single:placeholder {
	color: var(--color-grey-500);
}

.select2-container--default .select2-selection--single:focus {
	border-color: var(--color-primary-400);
	box-shadow: 0 0 0 0.2rem rgb(175 189 20 / 31%);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--color-primary-400);
	color: var(--color-main-white);
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
	top:auto;
}

.select2-dropdown {
	border: 1px solid var(--color-input-border);
}

.select2-container--default .select2-selection--multiple {
	border: 1px solid var(--color-input-border);
	border-radius: 8px;
	outline:none;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--color-primary-400);
	box-shadow: 0 0 0 0.2rem rgb(175 189 20 / 31%);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--color-primary-400);
	border: var(--color-primary-600);
	color:var(--color-main-white);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--color-main-white);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
	color: var(--color-main-white);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	padding: .3rem .75rem;
}



/*---------------top bar css---------*/

.top-bar {
	position: sticky;
	top: 0;
	width: 100%;
	background-color: var(--color-main-white);
	padding: 10px 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 10;
	border-bottom: 1px solid var(--color-grey-200);
	height: 69px;
}

.top-bar input[type="search"] {
	margin-right: 15px;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px solid var(--color-grey-200);
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f107";
	margin-left: 0.5em;
	border: none;
}

.dropdown-topbar {
	border-left: 2px solid var(--color-grey-200);
	padding-left: 10px;
}

.header-profile-img {
	max-width:32px;
}

.profile-avatar {
	display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #ddd;
    height: 32px;
    width: 32px;
    font-size: 13px;
    font-weight: 600;
}

.btn-link svg {
	fill: var(--color-grey-600);
}

.search-icon {
	fill: transparent;
}

.search-icon path {
	stroke: var(--color-grey-600);
}

.top-bar .contact-information .box .icon {
	color: var(--color-primary-400);
	margin-right: 5px;
}

.profile-main-drop {
	width: fit-content;
	box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
		0px 4px 6px -2px rgba(16, 24, 40, 0.03);
	border: 1px solid var(--color-grey-50);
	border-radius: 15px;
	margin-top: 16px !important;
	min-width: 240px;
}

.profile-username {
	margin-left: 6px;
}

.profile-picture {
	width: 50px;
	height: 50px;
	font-size: 16px;
}

.profile-li {
	padding: 15px;
	gap: 10px;
}

.profile-li .fa-solid,
.fas {
	color: var(--color-grey-600);
}

.list-group-item {
	border-top: 1px solid var(--color-grey-200);
	padding: 15px;
	gap: 10px;
}

.list-group-item:last-child {
	border-top: none;
}

.list-group-item:hover {
	background-color: var(--color-grey-50);
}

/*-----------top-bar-end--------*/

.main-container {
	display: flex;
}

form.search-form {
	margin-left: 250px;
}

form.search-form .search-input {
	width: auto;
    padding-left: 2.3rem;
    padding-right: 1.1rem;
    line-height: 1.7;
    box-shadow: none;
	background: var(--color-bg-screen);
}

form.search-form .search-box-icon {
    color: var(--color-grey-500);
    top: 50%;
    left: 0.9rem;
    transform: translateY(-48%);
}

/*-----------sidebar css----------*/

.versus-logo {
	height: 40px;
}

.sidebar {
	position: fixed;
	top: 0;
	width: 250px;
	background-color: var(--color-main-white);
	padding: 20px 15px;
	height: 100vh;
	border-right: 1px solid var(--color-grey-200);
	z-index: 22;
}

.sidebar a {
	text-decoration: none;
	color: var(--color-grey-text);
	display: block;
	padding: 10px 0;
	font-weight: 500;
}

.nav-item {
	border-radius: 10px;
}

.nav-item.side-nav {
	width: 100%;
	padding: 7px 17px;
}

.nav-item a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nav-item svg,
.nav-item p,
.nav-item .caret {
	display: inline-block;
	margin: 0;
}

/* Style for active and hover state */
.nav-item.active a,
.nav-item:hover a {
	color: var(--color-primary-400);
}

.nav-item.active a p,
.nav-item.active a .caret,
.nav-item:hover a p,
.nav-item:hover a .caret {
	color: var(--color-primary-400);
}

.nav-item.active a svg,
.nav-item:hover a svg {
	fill: var(--color-primary-400);
}

.nav-item.active {
	background-color: var(--color-grey-50);
}

.nav-item a svg {
	fill: var(--color-grey-600);
}

.dropdown-toggle {
	color: var(--color-grey-text);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.05px;
	text-decoration: none;
	display: inline;
}

.close-sidebar {
	display: none;
}

/*-----------------sidebar end--------------*/

/*--------------------dashboard content css-----------*/

.welc-title {
	color: var(--color-grey-900);
	font-size: 30px;
	font-weight: 600;
	line-height: 38px; /* 126.667% */
}

.site-main {
	width: calc(100% - 250px);
	padding: 20px 15px;
	background-color: var(--color-bg-screen);
	margin-left: 250px;
}

.card {
	border-radius: 8px;
}

.summary-card {
	text-align: left;
	padding: 20px;
	border: none;
}

.summary-card h2, p {
	margin-bottom: 0;
}

.bg-light-blue {
	background-color: var(--color-blue-light);
}

.bg-light-green {
	background-color: var(--color-green-light);
}

.bg-light-yellow {
	background-color: var(--color-yellow-light);
}
.bg-light-red {
	background-color: var(--color-red-light);
}

.car-blue {
	color: var(--color-blue-dark);
}

.card-green {
	color: var(--color-green-dark);
}

.card-yellow {
	color: var(--color-yellow-dark);
}
.card-red {
	color: var(--color-red-dark);
}

.bg-light-blue a {
	color: var(--color-blue-normal);
	font-size: 13px;
	text-decoration: none;
}

.bg-light-green a {
	color: var(--color-green-normal);
	font-size: 13px;
	text-decoration: none;
}

.bg-light-yellow a {
	color: var(--color-yellow-normal);
	font-size: 13px;
	text-decoration: none;
}
.bg-light-red a {
	color: var(--color-red-normal);
	font-size: 13px;
	text-decoration: none;
}

.card-head-txt {
	font-size: 12px;
	margin-bottom: 24px;
}

.sub-txt-card {
	color: var(--color-grey-500);
	font-size: 13px;
	font-style: normal;
	font-weight: 475;
	line-height: 16px;
}

.chart {
	height: 320px;
	background-color: var(--color-main-white);
	border-radius: 8px;
	padding: 20px 20px 50px 20px;
}
.chart h5 {
	color: var(--color-grey-900);
}

/*-----------data table css-------*/

/* Main Table Container */

.table-responsive {
	overflow-x: unset;
}

/* Main Table Container */

.table-container {
	padding: 1.5rem;
	border-radius: 10px;
	background-color: var(--color-main-white);
	overflow-x: auto;
}

.table-container h5 {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-grey-900);
	margin-bottom: 1rem;
}

.table {
	width: 100% !important;
	/* 	border-collapse: separate;
	border-spacing: 0; */
	border-radius: 10px;
	overflow: hidden; 
	background-color: var(--color-main-white);
}

.table th,
.table td {
	font-size: 16px;
}

.table th {
	font-weight: 500;
	position: relative;
	cursor: pointer;
}

.table td {
	color: var(--color-grey-text);
}

table.dataTable tbody tr {
	border: none;
	vertical-align:middle;
}

.table > :not(caption) > * > * {
	border-bottom-width: 0px;
}

/* Badge Styles for Status */
.badge {
	display: inline-block;
	padding: 0.5em 0.75em;
	font-size: 12px;
	font-weight: 500;
	border-radius: 4px;
	letter-spacing: 0.48px
}

.badge.theme-bg-primary {
	background-color: var(--color-info-100);
	color: var(--color-info-600);
}

.badge.theme-bg-danger, 
.badge.theme-bg-unavail {
	background-color: var(--color-danger-100);
	color: var(--color-danger-900);
}

.badge.theme-bg-success {
	background-color: var(--color-success-100);
	color: var(--color-success-1000);
}

.badge.theme-bg-warning {
	background-color: var(--color-warning-100);
	color: var(--color-warning-900);
}


.badge.theme-bg-grey {
	background-color: var(--color-grey-100);
	color: var(--color-grey-900);
}

/* DataTables Search Bar Styling */

.dataTables_filter {
	float: right;
	margin-bottom: 1rem;
}

.dataTables_filter input[type="search"] {
	width: 100%;
	padding: 0.5rem 2rem;
	border: 1px solid var(--color-grey-200);
	border-radius: 6px;
	background-color: var(--color-main-white);
	color: var(--color-grey-text);
}

.dataTables_filter input[type="search"]:focus {
	outline: none;
	border-color: var(--color-primary-400);
}

/* Custom Search Input Styling */

.custom-search-input {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.custom-search-input .search-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.custom-search-input .search-icon {
	left: 20px;
}

.custom-search-input input {
	padding-left: 30px; /* Space for the search icon */
	padding-right: 30px; /* Space for the attach icon */
}

/* Pagination and Info Styling */

.dataTables_paginate .paginate_button,
.dataTables_info {
	font-size: 0.875em;
	color: var(--color-grey-500); 
}

.dataTables_paginate .paginate_button {
	padding: 5px 10px;
	border-radius: 5px;
	margin: 2px;
}

.dataTables_paginate .paginate_button:hover {
	background-color: var(--color-grey-50);
}

table.dataTable thead th, table.dataTable tfoot th {
	font-weight: 500;
}

.aktion-btn {
	background: transparent;
	border: none;
	color: var(--color-grey-600);
	border-radius: 4px;
	font-size: 20px;
	line-height: 0;
	position: relative;
	/* 	transform: rotate(90deg); */
	left: 23px;
	bottom: 10px;
	/* 	top: 6px; */
}

.aktion-btn:hover {
	background: transparent;
	color: var(--color-grey-text);
}

.dataTables_wrapper thead th {
	background-color: var(--color-grey-50);
	color: var(--color-grey-900);
	border-bottom: 1px solid var(--color-grey-200) !important;
	border-right: 1px solid var(--color-grey-200);
}

.dataTables_wrapper thead th:last-child {
	border-right: none; /* Remove border on the last header cell */
}

/* Table Body Background Color */
.dataTables_wrapper tbody tr {
	background-color: var(--color-main-white);
}

.dataTables_wrapper tbody tr:hover {
	background-color: var(--color-primary-light);
}

.dataTables_wrapper tbody td {
	border-right: 1px solid var(--color-grey-200);
}

.dataTables_wrapper tbody td:last-child {
	border-right: none; /* Remove border on the last cell in each row */
}

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
	background-color: var(--color-main-white) !important;
}

table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
	background-color: var(--color-main-white) !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
	background-color: var(--color-main-white) !important;
}

table.dataTable.no-footer {
	border: 1px solid var(--color-grey-200);
}

table.dataTable {
	border: 1px solid var(--color-grey-200);
}

table.dataTable thead th,
table.dataTable tbody td {
	padding: 10px 18px;
}

table.dataTable .dropdown,
table.dataTable .dropdown-center,
table.dataTable .dropend,
table.dataTable .dropstart,
table.dataTable .dropup,
table.dataTable .dropup-center {
	position: absolute;
}

.dataTables_wrapper .dataTables_length {
	margin-bottom: 15px;
}

.dataTables_wrapper table.dataTable {
	margin-bottom: 11px;
}

.dataTables_length select {
	border: 1px solid var(--color-grey-200);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
	background: var(--color-primary-400);
    border-color: var(--color-primary-400);
    padding: 0.5em 1em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	border-color: var(--color-primary-400);
	background: var(--color-primary-100);
	color: #000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: not-allowed;
    pointer-events: auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
	box-shadow: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
	background-color: var(--color-primary-400);
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
	background-color: transparent;
}

table.dataTable thead .sorting_desc {
	background-image: url("/wp-content/themes/versus/img/sort_desc.png");
}

table.dataTable thead .sorting {
	background-image: url("/wp-content/themes/versus/img/sort_both.png");
}

table.dataTable thead .sorting_asc {
	background-image: url("/wp-content/themes/versus/img/sort_asc.png");
}

/* table.dataTable.nowrap th, table.dataTable.nowrap td {
    white-space: normal;
} */

/* .dataTable tbody tr td:last-child {
    text-align: -webkit-center;
    vertical-align: middle;
} */

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data {
	position: relative;
	right: 0;
	white-space: initial;
}

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .dropdown,
table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .dropdown-center,
table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .dropend,
table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .dropstart,
table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .dropup,
table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .dropup-center {
	position: absolute;
	right: 0;
	top: 50%;
}

table.dataTable>tbody>tr.child ul.dtr-details {
    width: 100%;
}

.languages-cell {
	position: relative;
	gap: 8px;
	display:flex;
	align-items: center;
}

.language-badge {
	padding: 8px 12px;
	background-color: var(--color-grey-50);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
}

.show-more-languages {
	padding: 4px 8px;
	background-color: var(--color-grey-50);
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
/* 	position: relative; */
}

.hidden-languages {
	display: none;
	position: absolute;
	top: -51px;
	left: -10px;
	background-color: var(--color-main-white);
	border: 1px solid var(--color-grey-200);
	padding: 8px;
	/*        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
	border-radius: 4px;
	white-space: nowrap;
	z-index: 10;
}

.languages-main {
	position:relative;
}

/* Down arrow pointing downwards */

.arrow-down {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--color-grey-200); 
	margin: 0 auto; 
	position: absolute;
	bottom: -6px; 
	left: 12%; 
}

.dropdown-toggle.btn-outline-secondary.aktion-btn::after {
	display: none !important;
}

.table .btn-outline-secondary:focus {
	border: none !important;
	box-shadow: none !important;
}

.aktion-main-box {
	box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
		0px 4px 6px -2px rgba(16, 24, 40, 0.03);
	border: 1px solid var(--color-grey-50);
	border-radius: 15px;
}

.aktion-main-box li {
	border-bottom: 1px solid var(--color-grey-50);
	padding: 8px auto;
}

.aktion-main-box li:last-child {
	border-bottom: none;
}

.aktion-main-box a:active {
	background-color: var(--color-primary-600);
	color: var(--color-main-white);
}

/*---------- order table css--------------- */

.table-responsive .dataTables_wrapper .dataTables_filter {
	display: none;
}

.table-main-container {
	background-color: var(--color-main-white);
	border-radius: 15px;
	border: 1px solid var(--color-grey-100);
}

.ordertale-tabbar {
	padding: 16px;
	border-bottom: 1px solid var(--color-grey-100);
}

.btn-ordertable-tab {
	color: var(--color-grey-500);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px; /* 142.857% */
	letter-spacing: -0.05px;
	height: 40px;
	padding: 0px 12px;
}

.btn-ordertable-tab.active {
	color: var(--color-grey-600);
	background-color: var(--color-primary-100);
	border: none;
	color: var(--color-grey-900);
	box-shadow: none !important;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
	border-color: transparent !important;
}

#ordersTables td {
	border-bottom: 1px solid var(--color-grey-100);
}

.table-search:focus {
	border-color: var(--color-primary-400);
	box-shadow: 0 0 0 0.2rem rgb(175 189 20 / 31%);
}

.search-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

.search-wrapper::before {
	content: url(/wp-content/themes/versus/img/search.svg);
	position: absolute;
	left: 10px;
	top: 31%;
}

.search-wrapper input {
	color: var(--color-grey-500);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	letter-spacing: -0.05px;
	padding-left: 30px;
	box-sizing: border-box;
	display: flex;
	width: 291px;
	height: 44px;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.table-datarow {
	padding: 20px;
}

/* order table css end */

/*---------datatable css end------*/

/*---------bootstrap pills css start------*/

.nav-link {
	color: var(--color-primary-500);
}

.nav-link:focus,
.nav-link:hover {
    color: var(--color-primary-600);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--color-primary-400);
}

/*---------bootstrap pills css end------*/

/*---------dropzone css start------*/
.dropzone {
	border: 1px dashed #C9C9CC;
}

.dropzone .dz-preview {
	z-index: 1;
}

.dropzone .dz-preview .dz-image {
	border: 1px solid #f0f0f0;
    box-shadow: 0px 0px 20px -11px rgba(69, 69, 69, 0.75);
}

.dropzone .dz-preview .dz-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-progress {
	display: none;
}

.dropzone .dz-preview .dz-remove {
	margin-top: 10px;
    color:var(--color-primary-400);
}

.dropzone .dz-preview .dz-remove:hover {
	text-decoration: none;
}

/*---------dropzone css end------*/

/*-------------------dashboard content end-----------*/
/* -------------login form page css ------------------- */

.left-section {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px;
	background-color: var(--color-main-white);
}

.logo {
	max-width: 150px;
}

.main-container-login {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two equal columns */
	height: 100vh;
}
.login-container {
	max-width: 360px;
	margin: 50px auto;
}

.login-title {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 10px;
}

.login-subtitle {
	font-size: 16px;
	color: var(--color-grey-500);
	margin-bottom: 20px;
}

.form-main-container {
	/* 	gap: 15px; */
	display: grid;
}

.form-group label:not(.form-check-label) {
	display: block;
	font-size: 14px;
	font-weight: 475;
	color: var(--color-grey-text);
	margin-bottom: 5px;
}

.form-group input:placeholder {
	color: var(--color-grey-500);
}

.form-control {
	border-radius: 8px;
}

.form-control-custom:focus {
	border-color: var(--color-primary-400);
	box-shadow: 0 0 0 0.2rem rgb(175 189 20 / 31%);
}

.forgot-password {
	color: var(--color-primary-400);
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 24px;
	display: block;
	text-align: right;
	text-decoration: none;
}

.forgot-password:hover {
	text-decoration: underline;
}

.signup-link {
	font-size: 14px;
	margin-top: 20px;
	display: block;
	color: var(--color-grey-500);
}

.signup-link a {
	color: var(--color-primary-400);
	font-weight: bold;
	text-decoration: none;
}

.signup-link a:hover {
	text-decoration: underline;
}

.footer-text {
	font-size: 14px;
	color: var(--color-grey-500);
}

.right-section {
	flex: 1;
	background-color: var(--color-bg-screen);
	position: relative;
	display: flex;
	justify-content: end;
	align-items: center;
	overflow: hidden;
}

.right-section .right-dash-img {
	max-width: 100%;
	height: auto;
	margin-right: -30px;
}

.pass-hide-show {
    position: absolute;
    right: 10px;
    top: 50%;
    /* transform: translateY(-50%); */
    cursor: pointer;
}

/*    login form css end */

/* -------------signup form page css ------------------- */

.signup-container {
	max-width: 600px;
	margin: 50px auto;
	background: var(--color-main-white);
	border-radius: 8px;
	text-align: left;
}

.signup-title {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 10px;
}

.signup-subtitle {
	font-size: 16px;
	color: var(--color-grey-500);
	margin-bottom: 25px;
}

/* Form Layout */
.form-main-container.signup-form-main {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* Role Selection */

.role-selection {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.role-option input[type="radio"] {
	display: none;
}

.role-option input[type="radio"]:checked + .radio-circle {
	background-color: var(--color-primary-400);
	border-color: var(--color-primary-400);
}

.form-check-input:checked {
	background-color: var(--color-primary-400);
	border-color: var(--color-primary-400);
}

.form-check-input:focus {
	box-shadow: 0 0 0 0.25rem rgb(175 189 20 / 29%);
}

.role-option input[type="radio"]:checked + .radio-circle::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: var(--color-main-white);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.role-text {
	font-size: 20px;
	font-weight: 500;
	line-height: 30px; /* 150% */
}

.signup-link.signup-page {
	text-align: center;
}
/* Input Fields */
.form-group {
	margin-bottom: 24px;
}

/* verification css start */
.verification-input-container input {
	height:48px;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #dcdcde;
	box-shadow: 0px 1.5px 4px -1px rgba(10, 9, 11, 0.07);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px; /* 133.333% */
	letter-spacing: -0.26px;
	appearance: none; /* Hides number input arrows in most browsers */
	-moz-appearance: textfield;
}

.verification-input-container input::-webkit-inner-spin-button, 
.verification-input-container input::-webkit-outer-spin-button {
	-webkit-appearance: none; /* Chrome, Safari, Edge */
	margin: 0;
}

.verification-input-container input:focus {
	border-color: var(--color-primary-400);
	outline: none;
	box-shadow: 0 0 5px #afbd1457;
}

.verification-code-container {
	max-width: 400px;
	margin: 50px auto;
}

.verification-code-container h2 {
	font-size: 30px;
	font-weight: 600;
	line-height: 38px; /* 126.667% */
}

.verification-code-container p {
	font-size: 16px;
	line-height: 24px; /* 150% */
}

.back-link {
	text-decoration: none;
	color: var(--color-grey-500);
	font-weight: 600;
}

.back-link:hover {
	text-decoration: underline;
	color: var(--color-grey-600);
}

/* verification css end */

/* signup success message start */

.success-message-container {
	max-width: 400px;
	margin: 50px auto;
}

.success-message-container h2 {
	font-size: 30px;
	font-weight: 600;
	line-height: 38px; /* 126.667% */
}

.success-message-container p {
	font-size: 16px;
	line-height: 24px; /* 150% */
}

/* signup success message end */

/*    signup form css end */


/* Forget password css */
/* .password-requirements {
	display: table-cell;
	padding: 6px 0px 6px 0px;
	vertical-align: middle;
	font-size: 14px;
}

.password-requirements div {
	display: table-row;
}

.password-requirements span {
	display: table-cell;
	padding: 5px 10px;
	vertical-align: middle;
}

.password-requirements i {
	color: #28a745;
	margin-right: 8px;
} */
.reset-password-info {
    color: var(--color-success-1000);
    font-weight: 700;
}
/* Forget password css end  */


/* -------------------setting page css start----------------- */

.setting-tabs .setting-tab-link.active {
	color: var(--color-grey-900);
	background-color: var(--color-primary-100);
}

.setting-tabs .setting-tab-link {
	color: var(--color-grey-500);
	font-weight:600;
	border-radius:8px;
}
.setting-tabs{
	padding:16px;
	border-bottom: 1px solid var(--color-grey-100);
}

/* .profile-data-main {
padding: 36px;
} */

.profile-data-main .profile-heading {
	color: var(--color-grey-900);
}

.profile-data-main .profile-lable {
	color: var(--color-grey-500);
	letter-spacing: -0.05px;
	margin-bottom: 10px;
}

.profile-data-main span:not(.badge),
.profile-data-main .form-check .form-check-label {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px; /* 171.429% */
}

.profile-data-main span.previous-val {
	padding: 0.1em 0.5em;
	font-size: 12px;
}

/* input.pass-change-input {
border: 1px solid transparent;
outline:0;
} */

.pass-change-div {
	text-align: -webkit-right;
}

.pass-change-row{
	padding:20px 10px 25px 0px;
	border-bottom: 1px solid var(--color-grey-100);
}

.pass-change-lable{
	color: var(--color-grey-500);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px; /* 142.857% */
}

.profile-pic-edit {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	/* 	overflow: hidden; */
	margin: 70px auto;
	cursor: pointer;
}

.profile-pic-edit img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius:50%;
}

.profile-pic-edit .profile-avatar {
	width: 100%;
	height: 100%;
	font-size: 35px;
}

.camera-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	padding: 10px;
	background: transparent;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

.profile-pic-edit:hover .camera-icon {
	background: #00000085;
	opacity: 1;
}

.camera-icon svg {
	font-size: 24px;
	color: #6c757d;
}

.edit-pic-text{
	color: var(--color-primary-400);
}

.change-input-pic{
	display:none;
}

/* password change form main start */

.pass-change-form{
	max-width:854px;
}

.edit-pass-main{
	display:none;
}

/* change form end */

/* editprofile css start */

.edit-profile-topbar {
	padding: 20px 0px;
	border-bottom: 1px solid var(--color-grey-100);
}

.edit-profile-main{
	display:none;
}

.edit-title{
	color: var(--color-grey-900);
	font-size: 30px;
	font-weight: 600;
	line-height: 38px; /* 126.667% */
}

img.setting-profile-img {
	max-width:140px;
}

div.setting-profile-img {
	width:140px;
	height:140px;
	font-size: 35px;
}

.edit-email {
	color: var(--color-grey-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px; 
}

.edit-title-interpreter {
	color: var(--color-grey-900);
	font-size: 20px;
	font-weight: 600;
	line-height: normal;
}
/* edit profile css nd */


/* -------------------setting page css end----------------- */


/* ---------------------faq page css start------------------- */

.faq-search input{
	width:391px;
}

.faq-main-container {
	background-color: var(--color-main-white);
	border-radius: 15px;
	border: 1px solid var(--color-grey-100);
}

.faq-accordion .accordion-item{
	border:none;
	background-color:var(--color-bg-screen);
	border-radius:8px;
	margin-bottom:12px;
}

.faq-accordion .accordion-button{
	background-color:var(--color-bg-screen);
	box-shadow:none;
	border-radius: 8px;
	color: var(--color-grey-900);
	font-size: 18px;
	font-weight: 500;
	line-height: 28px; /* 155.556% */
}

.faq-accordion .accordion-header{
	margin-bottom:12px;
}

.faq-accordion .accordion-button:not(.collapsed) {
	padding-bottom:0px;
}

.faq-accordion .accordion-body {
	padding-top:0px;
	color: var(--color-grey-500);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px; /* 150% */
}

.faq-accordion .accordion-button:after {
	content: '+';
	color: var(--color-primary-400);
	background-image:none;
	height:auto;
	width:auto;
	font-size: 24px;
	border: 2px solid;
	padding: 0px 6px;
	border-radius: 50px;
}

.faq-accordion .accordion-button:not(.collapsed):after {
	content: '-';
	padding: 0px 8px;

}

/* faqliste */

.faq-table-header{
	width:10%;
}

.answer p {
	color:var(--color-grey-text);
}

/* end */

/* ---------------------faq page css end------------------- */

/* ------------------new order page css start--------------------- */

.neworder-main-container {
	background-color: var(--color-main-white);
	border-radius: 15px;
	border: 1px solid var(--color-grey-100);
}

.breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: var(--color-grey-600);
}

.breadcrumb-item+.breadcrumb-item:before {
	content: url(/wp-content/themes/versus/img/chevron-right.svg);
	color: var(--color-grey-600);
	margin: 6px 0 0 0;
}

.breadcrumb-item.active {
	font-weight: bold;
	color: var(--color-grey-900);
}

.form-section-header {
	background-color: var(--color-grey-50);
	padding: 10px;
	font-weight: 500;
}

.interpreter-topbar {
	border-bottom: 1px solid var(--color-grey-100);
}

.interpreter-language{
	background-color: var(--color-bg-screen);
	border-radius:8px;
	padding: 16px 0;
	margin-left:0;
	margin-right:0;
}

.previous-docs {
	background: var(--color-danger-300);
}

.file-box {
	border: 1px solid var(--color-grey-100);
	border-radius: 5px;
	overflow: hidden;
	/* 	width: 200px; */
	margin: 10px auto;
	cursor:pointer;
}

.file-header {
	background-color: var(--color-grey-100);
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom:1px solid var(--color-grey-100);
}

.file-header span {
	font-size: 14px;
	color: #333;
	word-break: break-all;
}

.delete-icon {
	color: var(--color-danger-700);
	cursor: pointer;
}
.file-header .fa-file-lines {
	color: var(--color-grey-500);
	padding-right:10px;
}
.file-content {
	padding: 0;
	text-align: center;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	position:relative;
}

.file-content::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0); /* Transparent initially */
	transition: background-color 0.3s ease; /* Smooth transition effect */
	z-index: 1;
}

.file-content:hover::after {
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay on hover */
}

.file-content img {
	width: auto;
    height: 100px;
    z-index: 9;
}
/* 
.file-content:hover{
	background-color: var(--color-grey-200);
} */

.change-doc-pic{
	display:none;
}

.form-section-title {
	color: var(--color-primary-400); /* Adjusted to match the green color */
	font-weight: bold;
	margin-bottom: 1rem;
}

.paragraph-versus {
	font-size:14px;
	font-weight:400;
	line-height:20px;
	letter-spacing:-0.05px;
}

.paragraph-title {
	font-size:16px;
	font-weight:500;
	line-height:20px;
	letter-spacing:-0.05px;
}

/* new order page end */

/* Customer detail page css start */

.profile-card {
	border:1px solid var(--color-grey-100);
}

.profile-card .rounded-circle {
	width: 70px;
	height: 70px;
	font-size: 25px;
}

/* customer detail end */


/* ------------order detail page start---------- */

.order-update p{
	color: var(--color-grey-800);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.05px;
}

.order-update .order-update-row {
	border-radius: 8px;
	border: 1px solid var(--color-grey-200);
}


.order-view-tdata p {
	color: var(--color-grey-text);
	font-size: 14px;
	font-weight: 400;
}

.img-file img{
	max-width: 318px;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 10px;
}

.document-view-tdata .row .file-content {
	height:200px;
	padding: 10px;
}

.profile-data-main .col-md-4 i{
	color:var(--color-grey-600);
}

.profile-img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}

.profile-group img:not(:first-child) {
	margin-left: -15px;
}

/* .main-classification span {
	font-size:14px;
	font-weight:475;
	line-height:20px;
	letter-spacing: -0.05px;
} */

/* .order-view-title {
	color: var(--color-grey-500);
    letter-spacing: -0.05px;
	font-size: 14px;
    font-weight: 600;
    line-height: 24px;
} */



/* ------------order detail page end---------- */


/* ----------------------modal css start------------------- */

.modal-group {
    border: 1px solid var(--color-grey-200);
    border-radius: 10px;
}
.modal-language-list li span {
	font-weight: 500;
    font-size: 14px;
}

.modal-language-list li a {
    font-size: 14px;
}

.modal-language-list li {
	font-size: 14px;
	border-radius: 10px !important;
	border: 1px solid var(--color-grey-200) !important;
	margin-bottom: 15px;
	height: 56px;
}

.modal-language-list li .theme-bg-success {
	font-size: 12px;
}

.modal-info {
	font-size: 14px;
}

.modal-assign-main{
	border: 1px solid var(--color-grey-100);
    display: flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 3px;
}

#interpreter_list_item > .modal-assign-main:not(:first-child) {
	margin-left: 10px;
}

.modal-assign-main img{
	width:16px;
	height:16px;
	border-radius:3px;
}

.btn-assign{
	border: 1px solid var(--color-grey-100);
    padding: 0px 5px;
    border-radius: 3px;
}

.modal-body-data span{
	font-size:14px;
	font-weight:500;
	line-height:20px;
	letter-spacing:-0.05px;
	color:var(--color-grey-800);
}

.modal-body-data p{
	font-size:14px;
	line-height:20px;
	letter-spacing:-0.05px;
	color:var(--color-grey-800);
}

.interpreter-modal-list {
    max-height: calc(4* 80px);
    overflow-y: auto;
}

.interpreter-item {
	display: flex;
	align-items: center;
	transition: background-color 0.3s ease;
	border-radius: 10px !important;
/*     border: 1px solid var(--color-grey-50) !important; */
/*     margin-bottom: 15px; */
    height: 56px;
	padding: 15px 8px;
    gap: 5px;
	cursor:pointer;
}

.select2-results__option--highlighted .interpreter-item p,
.select2-results__option--highlighted .interpreter-item span {
  color: white;
}

/* .interpreter-item:hover {
	background-color: var(--color-primary-100);
	border: 1px solid var(--color-primary-100) !important;
} */

.interpreter-item img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
}

.interpreter-item span {
	font-size:12px;
	font-weight:600;
	line-height:18px;
	color: var(--color-grey-900);
	margin:0;
}
.interpreter-item p {
	font-size:12px;
	font-weight:400;
	line-height:18px;
	color: var(--color-grey-600);
}
input[type="search"]::-webkit-search-cancel-button {
  appearance: none; /* Removes the default cancel button */
  background: none; /* Removes any default background */
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: block;
  content: '';
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat center;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat center;
  background-color: black; /* Adjust this to change the cross color */
}

/* ----------------------modal css end------------------- */


/* --------------------- calendar css start --------------- */

table.fc-scrollgrid.fc-scrollgrid-liquid {
    border-radius: 5px;
}

.fc-theme-standard td, .fc-theme-standard th {
    border-radius: 0 0 5px 5px;
}

.fc .fc-col-header-cell-cushion {
    padding: 2px 10px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
}

.fc .fc-toolbar-title{
	color: var(--Color-grey-900);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

.fc-theme-standard th {
    border: 1px solid var(--color-input-border);
    background-color: var(--color-grey-50);
	text-align:left;
	border-radius:5px 5px 0px 0px;
}

/* Styling for 'Not available' days */
.fc-daygrid-event.not-available {
    color:var(--color-main-white);
    text-align: center;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;
}

/* Position event title at the bottom of the day box */
.fc-daygrid-day-events {
    position: absolute !important;
    bottom: 0;
    width: 100% !important;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-ltr .fc-daygrid-event.fc-event-start {
	margin-right: 5px;
	margin-left: 5px;
}

/* Align day numbers to the top left of the box */
.fc-daygrid-day-top {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px;
    font-size: 12px;
    color: #333;
}

.fc-daygrid-event.not-available .fc-event-title {
    display: block;
    background-color: var(--color-danger-400); 
    color: var(--color-main-white);
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px;
}

/* Make sure the event title fits well within the box */
/* .fc-daygrid-event .fc-event-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} */

/* Style for events */
.fc-daygrid-event {
    border: none;
    color: black;
    border-radius: 4px;
    padding: 2px;
    font-size: 13px;
	margin: 0.25em 0.5em !important;
}
.fc-daygrid-event.pending-event {
    background-color: var(--color-warning-400);
}

.fc-daygrid-event.pending-event .fc-daygrid-event-dot {
	border-color: var(--color-warning-900);
}

.fc-daygrid-event.processing-event {
    background-color: var(--color-info-500);
	border-color: var(--color-info-500);
	color: #fff;
}

.fc-daygrid-event.processing-event .fc-daygrid-event-dot {
    border-color: #fff;
}

.fc-h-event.processing-event .fc-event-main {
    color: #fff;
}

.fc-daygrid-event.completed-event {
	background-color: var(--color-success-400);
	border-color: var(--color-success-400);
}

.fc-daygrid-event.completed-event .fc-daygrid-event-dot {
    border-color: var(--color-success-700);
}

.fc-daygrid-event.failed-event,
.fc-daygrid-event.cancelled-event {
	background-color: var(--color-danger-400);
	border-color: var(--color-danger-400);
}

.fc-daygrid-event.failed-event .fc-daygrid-event-dot,
.fc-daygrid-event.cancelled-event .fc-daygrid-event-dot {
    border-color: var(--color-danger-800);
}

/* .assessment-event {
	position: absolute;
	top: 77%;
	width: -webkit-fill-available;
} */

.fc-h-event .fc-event-main {
    color: black;
}

.fc-toolbar-title {
    font-size: 18px;
    font-weight: bold;
}

.fc-toolbar button {
    background: var(--color-main-white) !important;
    color: #84818A !important;
    border: 1px solid #E8E8E8 !important;
    border-radius: 4px !important;
}

.fc .fc-button-primary:focus {
    box-shadow: none !important;
	border-color: 1px solid #E8E8E8 !important;
}

.fc .fc-button-group > .fc-button.fc-button-active,
.fc .fc-button-group > .fc-button:active,
.fc .fc-button-group > .fc-button:focus,
.fc .fc-button-group > .fc-button:hover{
	color:var(--color-primary-400) !important;
}

.fc-button-group .fc-dayGridMonth-button {
	border-radius: 5px 0px 0px 5px !important;
}

.fc-button-group .fc-timeGridWeek-button {
	border-radius: 0 !important;
}

.fc-button-group .fc-timeGridDay-button {
	border-radius: 0px 5px 5px 0px !important;
}

.fc .fc-button-group .fc-prev-button {
	margin-right:8px;
}

.fc-today-button:hover{
	color:var(--color-primary-400) !important;
}

.fc .fc-bg-event .fc-event-title {
    position: absolute;
    bottom: 0;
    background-color: var(--color-danger-400);
    color: var(--color-main-white);
    width: -webkit-fill-available;
    padding: 2px 6px;
    border-radius: 4px;
	font-style: normal;
}

.fc .fc-bg-event.not-available {
    background: var(--color-danger-50);
    opacity: 1;
}

.fc .fc-daygrid-day-top {
    display: block;
}

td.fc-day-other {
    background-color: var(--color-grey-100);
    border-radius: 0;
    color: var(--color-main-black);
} 

.fc-day-other .fc-daygrid-day-number{
	color: var(--color-main-black);
	font-weight: 600;
}

.fc .fc-daygrid-day-number {
    font-weight: 500;
}


/* calendar end */

/*----------------- date range picker start --------------*/


.daterangepicker .drp-buttons .btn{
	color: var(--color-main-white);
    background-color: var(--color-primary-400);
    border-color: var(--color-primary-400);
}

.daterangepicker .drp-buttons .cancelBtn{
	color: var(--color-grey-800);
    background: var(--color-grey-50);
	border-color: var(--color-grey-50);
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--color-primary-400) !important;
}

.daterangepicker td.in-range {
    background-color: var(--color-primary-100);
}


/* select option:hover,
select option:focus,
select option::checked,
select option:active,
select option:focus-within,
select option:focus-visible {
    background-color: var(--color-primary-400) !important; 
    color:var(--color-main-white); 
} */



/* date range end  */


/* --------------------media quries for all site ------------*/

@media (max-width: 1024px) {
	
	form.search-form {
		margin-left: 50px;
	}

	/* -----------------Sidebar responsive styling ---------------*/

	.sidebar {
		position: fixed;
		top: 0;
		left: -100%;
		width: 250px;
		height: 100%;
		transition: transform 0.3s ease;
		z-index: 1000;
	}

	.sidebar-toggle {
		font-size: 1.5rem;
		color: var(--color-grey-600);
		position: absolute;
		left: 10px;
		display: block !important;
	}

	.sidebar.active {
		left: 0;
	}

	.site-main {
		width: 100%;
		padding: 20px;
		background-color: var(--color-bg-screen);
		margin-left: 0%;
	}

	.close-sidebar {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 1.5rem;
		color: var(--color-grey-600);
		background: none;
		border: none;
		display: block;
	}

	/* 	sidebar responsive end */

	/* 	------------datatable dashboard content responsive---------------- */

	.table-container {
		padding: 1rem;
	}

	/* Hide some columns on smaller screens */
	.table th:nth-child(5),
	.table td:nth-child(5),
	.table th:nth-child(6),
	.table td:nth-child(6) {
		display: none; /* Hides 'Dolmetscher erforderlich' and 'Aktion' columns */
	}

	/* 	------------datatable dashboard content responsive end---------------- */
}

/* Responsive Design for mobile Screens */

@media screen and (max-width: 768px) {

	/* 	---------------login form responsive css-------------- */

	.main-container-login {
		flex-direction: column; /* Stack sections vertically */
		display: block;
	}

	.login-container {
		margin: 0px auto;
		padding: 30px 0 20px 0;
	}

	.left-section,
	.right-section {
		max-width: 100%; /* Full width for both sections */
		padding: 20px;
	}

	.right-section {
		/*     height: 50vh; */
		padding: 32px 0 32px 0;
	}

	/* 	login form css end */
	/* 	------------datatable dashboard content responsive---------------- */

	.table th,
	.table td {
		font-size: 0.8rem;
		padding: 0.5rem;
	}

	.badge {
		font-size: 0.7rem;
		padding: 0.5em 0.75em;
	}

/* 	.dataTable tbody tr td:last-child {
		text-align: left;
		vertical-align: middle;
	} */

	/* 	------------datatable dashboard content responsive end---------------- */

	/* -----------orderstables responsive css------------------------ */

	.search-wrapper input {
		width: 100%;
	}

	.filter-title-bar {
		width: 100%;
	}

	/* -----------orderstables responsive css------------------------ */

	/* 	setting profile css */

	img.setting-profile-img {
		width:80px;
	}
	
	div.setting-profile-img {
		height: 80px;
		width: 80px;
		font-size: 25px;
	}
	
	.profile-data-main .col-md-4{
		margin-bottom:20px;
	}

	/* 	end */

	/* 	new order form css start */

	.interpreter-language input, select{
		margin-bottom:10px;
	}

	/* 	end */
	
/* 	.fc-toolbar {
        flex-direction: column;
    } */
    
    .fc-toolbar h2 {
        font-size: 16px;
    }

    .fc-toolbar button {
        font-size: 12px;
		margin: 5px 0
	}
	
	.fc .fc-bg-event .fc-event-title {
		top: unset;
		inline-size: max-content;
		width: -webkit-fill-available;
		height: -webkit-fill-available;
		word-break: auto-phrase;
		overflow: hidden;
	}
	
	.modal-language-list li {
		height: auto;
	}
	
	.btn {
		height: 34px;
		font-size:14px;
		line-height:22px;
		margin-bottom: 0px !important;
	}	
}


.fc .fc-scrollgrid-section table.fc-scrollgrid-sync-table {
	height: 42px;
}

.fc .fc-daygrid-body-natural table.fc-scrollgrid-sync-table .fc-daygrid-day-events {
	margin-bottom: 0.1em;
}

@media (min-width: 1200px) {
	.interpreters-section .form-group {
		margin-bottom: 0;
	}
}

@media (min-width: 600px) {
	form.search-form .search-input {
		width: 20em;
	}
}

@media (min-width: 1600px) {
	.sidebar {
		width: 300px;
	}
	
	.site-main {
		width: calc(100% - 300px);
		margin-left: 300px;
	}
}

.rating-stars .rating-icon {
	fill: #ccc;
	transition: color 0.3s;
	cursor: pointer;
}

.rating-stars .star.selected .rating-icon,
.rating-stars .star.hovered .rating-icon  {
	fill: var(--color-primary-400);
}