:root {
	--my-success: green;
	--my-danger: rgb(185, 25, 25);
	--my-warning : rgb(255, 170, 0);
	--my-secondary : gray;
	--my-primary : blue;
}

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: byz ; src: url('byz.ttf'); } 
@font-face { font-family: Bradley ; src: url('BRADHITC.TTF'); } 
@font-face { font-family: arcade ; src: url('ka1.ttf'); } 
@font-face { font-family: robot ; src: url('joystix.ttf'); } 
@font-face { font-family: electron ; 
			src: url('game_over.ttf') format('truetype');
			} 

label.titlos{
	font-size : 50px;
	padding-left : 40px;
	font-family : electron,"Mistal","Verdana";
	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);
}

#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;
	padding : 1em;
	background-color : gray;
	padding : 15px;
	align-items :flex-start;
	margin : 0.2em;
	margin-bottom : 1em;
	align-items : top;
}


#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 : gray;
	padding : 5px;	
	align-items : stretch;
}

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

#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;
	background-color : #484a54;
	padding : 10px;
	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 : 10px;
}

#tableSearchInput {
	width : 200px;	
	flex-basis : auto;
}

.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;
}

#bottomSectionTitle{
	font-size: 1.2em;
}

#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:1px solid transparent;
	padding : 0.25rem 0.5rem;
	cursor : pointer;
	font-size: 1em;
	cursor : pointer!important;
}

.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);
}

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

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

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

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

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

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

.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);
}

.undo{
	background-color : cadetblue;
}

header{
	font-size:0.5em;
}

.kshdeTableHeadingDiv{
	flex-basis: 0 ;
	flex-grow :1;
	color: white;
	font-family: "system-ui";
	font-weight: 500;
}

#kshdeTable{
	font-family: "system-ui";
	text-align: center;
	background-color: white;
}

#kshdeTableContent{
	background-color: white;
}

[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;
	}


}