:root {
	--primary: #04408B;
	--sftp: #FE3300;
	--work: #5C00DC;
	--mail: #34A1FF;
	--default: #29333C;
	--add: #398E12;
	--grey: #222222;
	--light-grey: #111111;
	--red: #A91212;
	--text-bg: #969B9F;
}

body {
	font-family: "Inter", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"!important;
}

.inter-bold {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
}

input {
	border: none;
}

input:focus {
    outline: none;
    border: none; /* Optionally remove the border or style it differently */
}

/* CUSTOM CLASSES */

/*NAV*/ 

.bg-default {
	background-color: var(--default)!important;
}

.border-default {
	border-color: var(--default)!important;
}

.border-in-sftp {
	-webkit-box-shadow:inset 0px 0px 0px 1px var(--sftp);
  	-moz-box-shadow:inset 0px 0px 0px 1px var(--sftp);
  	box-shadow:inset 0px 0px 0px 1px var(--sftp);
	color: #FFF!important;
}

.border-in-work {
	-webkit-box-shadow:inset 0px 0px 0px 1px var(--work);
  	-moz-box-shadow:inset 0px 0px 0px 1px var(--work);
  	box-shadow:inset 0px 0px 0px 1px var(--work);
	color: #FFF!important;
}

.border-in-mail {
	-webkit-box-shadow:inset 0px 0px 0px 1px var(--mail);
  	-moz-box-shadow:inset 0px 0px 0px 1px var(--mail);
  	box-shadow:inset 0px 0px 0px 1px var(--mail);
	color: #FFF!important;
}

.border-in-add {
	background-color: var(--add)!important;
	color: #FFF!important;
}

#list-layout {
	background-color: transparent!important;
	border: none;
}

#grid-layout {
	background-color: transparent!important;
	border: none;
}

.searchbar {
	width: 30%!important;
}

.searchbar-mobile {
	width: 80%!important;
}

@media (max-width: 600px) {
	.searchbar-mobile {
		width: 50%!important;
	}
}

.logout {
	background-color: var(--red)!important;
	border-color: var(--red)!important;
}

/*MAßE*/

.clh-0 {
	line-height: 1.6!important;
}

.rounded-cstm-1 {
	border-radius: 12px!important;
}

.cpx-2 {
	padding: 0 10px 0;
}

.custom-bg-grey {
	background-color: var(--grey)!important;
}

.text-bg {
	background-color: var(--text-bg)!important;
}

/*MANAGER*/

.label-heading {
	font-size: 18px;
}

.custom-pw-area {
	padding-top: 30px;
}

.copy-text {
	cursor: pointer;
}

.popupText {
	font-size: 18px;
}

.copied {
	background-color: rgba(31,146,13,1.00)!important;
	border-color: rgba(31,146,13,1.00)!important;
	transition: 0.8s background!important;
}

.bg-custom-blue {
	background-color: var(--primary)!important;
	transition: 0.8s background!important;
}

.border-custom-blue {
	border-color: var(--primary)!important;
}

.copy-text:hover {
	color: rgba(78,24,92,1.00)!important;
	transition: 1.3s background!important;
}

.fs-custom-1 {
	font-size: 1.25rem;	
}

.fs-custom-2 {
	font-size: 1.1rem;
}

.fs-custom-3 {
	font-size: 1.2rem;
}

@media (max-width:1400px) {
	.fs-custom-3 {
		font-size: 1rem;
	}
}

@media (max-width:1200px) {
	.fs-custom-3 {
		font-size: 0.8rem;
	}
}

.fs-custom-4 {
	font-size: 0.9rem;
}

.fs-custom-5 {
	font-size: 0.75rem;
}

/* TOOLTIP */

.tooltip {
	background: #333;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
}

.tooltip[data-show] {
  opacity: 1;
}

.tooltip .arrow,
.tooltip .arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.tooltip .arrow {
  visibility: hidden;
}

.tooltip .arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(225deg);
}

.tooltip[data-popper-placement^='bottom'] > .arrow {
  top: -4px;
}

.more-info {
	background-color: transparent;
	border: none;
}

.custom-form {
	display: block;
  	width: 40%;
	padding: .5rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--bs-body-bg);
	background-clip: padding-box;
	border-radius: var(--bs-border-radius);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.not-clickable {
    pointer-events: none;
	cursor: not-allowed;
}

.svg-copy, .svg-copied {
	transition: opacity 0.5s ease-in-out;
	opacity: 0;
}

.svg-copy.show, .svg-copied.show {
	opacity: 1;
}

.pw-shown, .pw-hidden, .pw-shown-popup, .pw-hidden-popup {
	transition: opacity 0.5s ease-in-out;
	opacity: 0;
	cursor: pointer;
	width: 22px;
	height: 22px;
}

@media (max-width: 1200px) {
	.pw-shown, .pw-hidden {
		top: 17%;
	}
}

@media (max-width: 768px) {
	.pw-shown, .pw-hidden {
		margin-bottom: 10px;
		width: 22px;
		height: 22px;
	}
}

#navbar-desk .active {
	border-color: transparent;
	background-color: var(--light-grey)!important;
}

.pw-shown.show, .pw-hidden.show, .pw-shown-popup.show, .pw-hidden-popup.show  {
	opacity: 1;
	z-index: 10;
}

.expanded-data {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: opacity ease-in-out .5s, height ease-in-out .5s;
}

.expanded-data.expanded {
	opacity: 1;
	transition: opacity ease-in-out .5s, height ease-in-out .5s;
}

.options-area {
	transition: opacity ease-in-out .5s;
}

.leave-options {
	transition: opacity ease-in-out .5s;
}

.leave-options, .delete, .edit {
	cursor: pointer;
}

.edit {
	border-radius: 12px 0 0 12px;
	width: 400px;
	height:35px;
}

#add-pw .dropdown-item:hover {
	color: #000!important;
}