:root {
	--my-success: #198754;
	--my-danger: rgb(185, 25, 25);
	--my-warning : rgb(255, 170, 0);
	--my-secondary : gray;
	--my-primary : rgb(43, 144, 245);
	--my-info : #9feeff;
	--my-component-light : #f5f5f5!important;
	--my-component-dark : #e0e0e0!important;
}
::view-transition-group(root){
	animation-duration : 0.5s;
}


body{
	/*background-image: url("images/newYear.jpg");*/	
	background-repeat:repeat;
	font-family :'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

td {
  word-wrap:break-word;
  word-break:break-word;
}

.table-responsive {
   font-size : 12px;
}

/* select{
	font-size : 8px;
} */

select.trano{
	font-size : 14px;
}

.table > tbody > tr > td {
    vertical-align: middle;
}

.table > thead > tr > th {
    vertical-align: middle;
}

@font-face {
	font-family: "roboto";
	src: url("webfont/Roboto-Regular.ttf");
}


label.titlos{
	font-size : 50px;
	padding-left : 40px;
	font-family : roboto;
	color : black;
}

label.titlosMikros{
	font-size : 20px;
	padding-left : 40px;
	font-family : robot,"Mistal","Verdana";
	color : red;
}

.breadcrumb > li + li:before {
    color: #ccc;
    content: "/ ";
    padding: 0 0px;
	margin : 0 0px;
}

.breadcrumb {
	margin-top : 0 0px;
	padding-left : 80px;
}


td a{
	font-weight:bold;
}

td .fa-search{
	color :green;
	font-size: 1.3em;
}	

td .fa-search-plus{
	color :green;
	font-size: 1.2em;
}

td .fa-paperclip{
	color :blue;
	font-size: 1.2em;
}	

td .fa-crosshairs{
	color :rgb(235, 23, 23);
	font-size: 1.2em;
}


.btn-mybutton {
  color: #ffffff;
  background-color: green;
  border-color: green;
}

#loading{
	display : none;
}

#signing{
	display : none;
}

#rejecting{
	display : none;
}

#example1 {
	margin-top : 2em;	
}

#chargesTable{
	margin : 1em;
	width  : calc(100% - 2em);
	background : linear-gradient(to right, transparent, 70%, lightgray);
	font-size: 0.875rem;
}

#chargesTable>tbody>tr{
	cursor : pointer;
}

#protocolRecordDialog {
	width:90%;
	height:90%;
}

#protocolRecordDialog::backdrop{
	background-color: rgba(0, 0, 0, 0.8);
}

#popup::backdrop{
	background-color: rgba(0, 0, 0, 0.5);
}

#dataToSignTable{
	margin : 1em;
	width  : calc(100% - 2em);
	background : linear-gradient(to right, transparent, 70%, lightgray);
}

#dataToSignTable th:first-child{
	width : 40% !important;
}


#headmasterExtraMenuDiv{
	display : flex;	
	flex-flow: row wrap;
	gap : 0.5em;
	background-color : gray;
	padding : 5px;
	align-items :flex-end;
	margin : 0.2em;
	margin-bottom : 1em;
}


#showEmployees{
	width : 15%;
}

#showToSignOnly{
	width : 15%;
}


#uploadFileDiv{
	background-color : lightblue;
}

#uploadDiv{
	margin:2em;
	margin-top:0em;
	padding-top : 1em;
	background-color:gray;
	color : white;
	border-top : 3px solid lightgray;
}

#container {
	padding-top : 2em;	
	margin : 2em;
}

#myNavBar {
	display : flex;	
	flex-flow: row wrap;
	gap : 0.5em;
	background-color : #9f1c1c;
	padding : 5px;	
	align-items : stretch;
}

#myNavBar>div {
	flex-grow : 0;
}

#myNavBar a:link{
	color:white;
}
#myNavBar a:visited{
	color:white;
}
#myNavBar a:hover{
	text-decoration: underline;
}
#myNavBar a{
	padding : 10px;
	color:white;
	font-size : 1.1em;
	text-decoration: none;
	cursor: pointer;
}
#myNavBar a.active{

	color:white;
	font-size : 1.1em;
	text-decoration: underline;
	text-decoration-color: #ffca2c;
	text-decoration-thickness: 3px;
	text-decoration-skip-ink: none;
}

#myNavBarLogo{
	font-size : 0.9em;
	font-weight : bold;
	flex-grow:1 !important;
	display : flex;
	justify-content : flex-end;
}

#myNavBarLogoContent{
	color: white;
	padding : 3px;
	border-radius : 5px;
	font-size : 0.8em;
	font-weight : bold;
	flex-grow: 0;
	display : flex;
	flex-flow : row  nowrap;
	justify-content : flex-end;
	gap : 0.4em;
	align-items : center;
}

.verticalFlexWithPadding {
	display : flex;	
	flex-flow: column nowrap;
	gap : 0.2em;
	background-color : lightgray;
	padding : 10px;
	border-radius : 5px;
	align-items : stretch;
}

.filenameDiv{
	display : flex;	
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;
}

.recordButtons {
	display : flex;	
	flex-flow: row nowrap;
	align-items : center;
	gap : 5px;
	justify-content:right;
}

#signModal>.modal-dialog{
	max-width: 60%;	
}

.flexVertical{
	display : flex;	
	flex-flow: column nowrap;
	gap : 0.2em;
	background-color : lightgray;
	border-radius : 5px;
	align-items : stretch;
	flex-basis : auto;
}

.flexHorizontal{
	display : flex;	
	flex-flow: row nowrap;
	gap : 0.2em;
	background-color : lightgray;
	border-radius : 5px;
	align-items : stretch;
	flex-basis : auto;
}

.smallPadding{
	padding : 5px;
}

#tableSearchInput {
	width : 200px;	
	flex-basis : auto;
	border: 0px;
	padding : 2px;
}

.contentFooter{
	margin-top : 2em;	
}
						

#signBtn{
	margin-left : 2em;
}

#providers{
	margin-top : 1em;
}

#providerhelperBtns{
	margin-top : 0.3em;	
}

#providerHeader{
	width : 60%;
}

#providerContent{
	width : 40%;
}

#mindigitalConnectionDiv>input{
	width : 15em;
}

#emailConnectionDiv>input{
	width : 15em;
}

#otpText{
	width : 12em;
}

#otpDiv{
	align-items: flex-start;
}

#mindigitalConnection,#emailConnection{
	border-radius : 10px;
	border-left : blue solid;
	border-right : blue solid;
	padding: 0.7em;
}

.isGreen {
	background-color : #198754;
}

#fileOpenDialog::backdrop{
	background-color: rgba(0,0,0,0.5);
}

#fileOpenDialog {
	background: floralwhite;
	border-radius: 5px;
}

#loadingDialog::backdrop{
	background-color: rgba(0, 0, 0, 0.8);
}

#loadingDialog {
	background: floralwhite;
	border-radius: 5px;
}

#bottomSectionTitleBar {
	display: flex;
    align-items: center;
    justify-content: space-between;
	margin-bottom: 0.2em;
	padding-bottom: 0.2em;
	align-items: flex-start;
}

#bottomSectionTitle{
	font-size: 1.2em;
}

#bottomSectionInfoBar{
	display: flex;
	margin-bottom: 0.2em;
	padding-bottom: 0.2em;
	align-items: flex-start;
	justify-content: left;
	gap:10px;
}

#bottomSectionBody {
	display: flex;
	flex-direction: row;
    align-items: top;
    justify-content: left;
	gap:10px;
}

.firstBottomSectionColumn{
	display : flex;
	flex-direction: column;
	gap : 15px;
	flex-basis:50%;
	flex-grow: 1;
}

.secondBottomSectionColumn{
	display : flex;
	flex-direction: column;
	flex-basis:20%;
	flex-grow: 1;
}

.thirdBottomSectionColumn{
	display : flex;
	flex-direction: column;
	gap : 15px;
	flex-basis:30%;
	flex-grow: 1;
}

.customDialog::backdrop{
	background-color: rgba(0, 0, 0, 0.8);

}

.customDialogContent{
	display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: 15px;
}

.customDialogContentTitle{
	display: flex;
	justify-content: space-between;
    gap: 10px;
    border-radius: 15px;
	margin-bottom:10px;
	align-items: flex-start;
}

.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}

/* SHAKE */
.faa-shake.animated,
.faa-shake.animated-hover:hover,
.faa-parent.animated-hover:hover>.faa-shake {
	animation: wrench 2.5s ease infinite;
}

.faa-shake.animated.faa-fast,
.faa-shake.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover>.faa-shake.faa-fast {
	animation: wrench 1.2s ease infinite;
}

.faa-shake.animated.faa-slow,
.faa-shake.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover>.faa-shake.faa-slow {
	animation: wrench 3.7s ease infinite;
}

/* WRENCHING */
@keyframes wrench {
    0%{transform:rotate(-12deg)}
	8%{transform:rotate(12deg)}
	10%{transform:rotate(24deg)}
	18%{transform:rotate(-24deg)}
	20%{transform:rotate(-24deg)}
	28%{transform:rotate(24deg)}
	30%{transform:rotate(24deg)}
	38%{transform:rotate(-24deg)}
	40%{transform:rotate(-24deg)}
	48%{transform:rotate(24deg)}
	50%{transform:rotate(24deg)}
	58%{transform:rotate(-24deg)}
	60%{transform:rotate(-24deg)}
	68%{transform:rotate(24deg)}
	75%,100%{transform:rotate(0deg)}
}

.faa-circle {
	animation: circle 2.5s ease infinite;
}

@keyframes circle {
    0%{transform:rotate(0deg)}
	50%{transform:rotate(180deg)}
	100%{transform:rotate(360deg)}
}


.isButton{
	background-color: var(--my-secondary);
	font-family: var(--bs-body-font-family);
	color : white;
	border-radius:5px;
	border-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-color: #4f4a4a;
	padding : 0.25rem 0.5rem;
	cursor : pointer;
	font-size: 1em;
	cursor : pointer!important;
	min-width : 2.5rem;
}

.isGreen{
	background-color : #198754;
}

.outline{
	background-color: rgba(255,255,255,0.6);
	color: black;
	border: 2px solid RGBA(0,0,0,0.2);
}

.small{
	font-size: 0.875rem;
}

.extraSmall{
	font-size: 0.75rem;
}

.active{
	background-color: var(--my-success);
}

select.active{
	background-color: white;
	border: 5px solid var(--my-success);
}

.dismiss{
	background-color: var(--my-danger);
}

.danger{
	background-color: var(--my-danger);
}

.warning{
	background-color: var(--my-warning);
	color: black;
}

.secondary{
	background-color: var(--my-secondary);
}

.primary{
	background-color: var(--my-primary);
}

.info{
	background-color: var(--my-info);
	color: black;
}

.usersTable{
	border-width: 0px;
	display: flex;
	flex-direction : column;
	gap:10px;
	
}

.usersTable>div{
	display: flex;
	gap:30px;
}

.name{
	flex-basis: 300px;
	flex-grow: 0;
	color: black;
	font-weight: 600;
	font-size: 0.9em;;
}

.userButtons{
	flex-basis: 400px;
	flex-grow: 1;
	display:flex;
	gap:10px;
}

.userButtons>span{
	display: inline-flex;
    justify-content: center;
    align-items: center;
	flex-basis: 200px;
	border-radius: 15px;
	color:white;
	font-weight: 600;
	font-size: 0.8em;
	text-align: center;
}


.customModal{
	font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.customModal::backdrop{
	background-color: rgba(0, 0, 0, 0.5);
}

.customDialogContent{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	border-radius: 15px;
}

.customDialogContentTitle{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	border-radius: 15px;
	margin-bottom:10px;
	align-items: flex-start;
}

.customDialog::backdrop{
	background-color: rgba(0, 0, 0, 0.8);
}

span.on{
	color:green; 
	cursor:pointer;
}

span.off{
	color:red; 
	cursor:pointer;
}

.undo{
	background-color : cadetblue;
}

[data-isRead="0"] {
	font-weight: 500;
}

[data-isRead="1"] {
	font-weight: 400;
}

@media (max-width: 800px) {
	#dataToSignTable {
		overflow-x: scroll;
	}
	#chargesTableContent>div{
		justify-content : space-evenly;
	}

	#chargesTableHeader>div{
		justify-content : space-evenly;
	}

	#chargesTableContent>div>span:nth-child(n+5){
		display:none;
	}

	#chargesTableHeader>div>span:nth-child(n+5){
		display:none;
	}


}

#filterDiv{
	margin-right:100px;
	margin-top:100px;
}

.invalid{
	border-width: 5px;
	border-color: red;	
	background-color: red;
}

.contact,.dbs,.dbsTitle{
	display:flex;
	gap:10px;
	padding-top:5px;
}

.contact:nth-child(2n),.dbs:nth-child(2n){
	background-color: bisque;
}

.contact>div{
	flex-grow:1;
}

#contactsResult{
	border : 2px solid lightgray;
	background-color: floralwhite;
	position : relative;
	padding: 5px;
	font-family : monospace;
	max-height:150px;
	overflow-y : auto;
	max-width: 50%;
}

.dbs>div{
	cursor:pointer;
}

.isComponent{
	border-style: solid;
    border-color: gray;
    border-width: 1px;
    border-radius: 5px;
}

details > summary {
    list-style-type: '\01F782';
}

details[open] > summary {
    list-style-type: '\01F783';
}