/**
 * Attachments UI for any mobile CRUD form
 */

body#ViewWrapper-Timesheets form[id^="CRUDForm-"] {
	
}

	body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments {
		
	}
	
		body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div#attachment-buttons {
			text-align: center;
			margin: 10px 0px 10px 0px;
		}
		
			/* upload buttons */
			body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div#attachment-buttons > button {
				width: 135px;
				height: 35px;
				padding: 5px;
				margin: 5px;
				text-align: center;
				
				color: white;
				background-color: rgba(100,125,255,.8);
				border: 1px solid rgba(0,0,0,.5);
				border-radius: 4px;
				box-shadow: 1px 1px 0px rgba(255,255,255,.5);
			}
			
				/* interactions on upload button */
				body#ViewWrapper-Timesheets:not(.mobile) form[id^="CRUDForm-"] > section#attachments > div#attachment-buttons > button:hover {
					background-color: rgba(100,125,255,1);
					cursor: pointer;
				}
				
				/* interactions on upload button */
				body#ViewWrapper-Timesheets:not(.mobile) form[id^="CRUDForm-"] > section#attachments > div#attachment-buttons > button:active {
					background-color: rgba(100,125,200,1);
					cursor: pointer;
				}
			
			/* hidden file input in front of file picker button */
			body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div#attachment-buttons > button > input[type="file"] {
				width: 127px;
				height: 26px;
				margin: -8px 0px 0px -18px;
				position: absolute;
				opacity: 0;
			}
			
		/* attachment files flexrows */
		body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks {
			text-align: left;
			margin-top: 10px;
		}
		
			/* row */
			body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row {
				display: block;
				padding: 10px;
				margin: 0px 10px 10px 10px;
				
				background-color: rgba(0,0,0,.1);
				border-radius: 3px;
			}
			
			/* empty row for template use */
			body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row.template {
				display: none;
			}
			
				/* flexrow element subcontainers */
				body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span {
					display: inline-block;
					vertical-align: top;
				}
				
					/* image container */
					body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.img {
						width: 75px;
						height: 75px;
						margin-right: 15px;
						
						overflow: hidden;						
						border: 1px solid rgba(255,255,255,.75);
						box-shadow: 1px 1px 0px rgba(0,0,0,.35);
					}
					
						/* hover image container (desktop) */
						body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.img:hover {
							background: black;
							cursor: pointer;
						}
							body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.img:hover > img {
								opacity: .65;
							}
					
						/* img */
						body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.img > img {
							position: relative;
							width: 150%;
							height: auto;
						}
					
					/* inputs */
					body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.input {
						width: calc( 100% - 35px - 75px - 30px );
					}
						/* text input */
						body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.input > input[type="text"] {
							position: relative;
							width: 100%;
						}
					
					/* ctrls */
					body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.flexrows-ctrls {
						float: right;
						margin-right: 2px;
					}
						
						/* del btn */
						body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.flexrows-row > span.flexrows-ctrls > [role="del"] {
							margin: 0px;
							padding: 2px;
							vertical-align: middle;
							
							text-align: center;
							font-size: 18px;
							color: white;
							
							background-color: rgba(128,0,0,.6);
							border: 1px solid rgba(0,0,0,.25);
							border-radius: 3px;
						}
			
				/* del btn */
				body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.file > .delete-btn {
					position: absolute;
					z-index: 3;
					margin: -25px 0px 0px 82px;
					
					font-size: 30px;
					color: red;
					text-shadow: 1px 1px 0px rgba(255,255,255,.5);
				} 
			
				/* image */
				body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.file > img {
					position: inline-block;
					position: relative;
					width: 100%;
					height: auto;
				}
				
			
			body#ViewWrapper-Timesheets form[id^="CRUDForm-"] > section#attachments > div.flexrows.ExpenseEntryAttachmentLinks > div.file.template {
				display: none;
			}