/*------------------------------------------------------------------
	Global
-------------------------------------------------------------------*/

/* Modal */
.modal {
	z-index: 170000002;
}
.autocomplete-modal-container {
	z-index: 170000003;
}
#tag-rect {
	border: 2px solid #fff !important;
	z-index: 2;
}
.modal-backdrop.in {
	opacity: 0.6;
	z-index: 170000001;
}
#tag-form-container {
	position: relative;
	top:25px;
}
#tag-form-container .input-wrapper {
	background: #f7f7f7;
	padding: 8px 6px;
	border: 1px solid #eee;
}
#tag-form-container .input-wrapper input {
	width: 100%;
}
#tag-form-container .autoresult {
	background: #f7f7f7;
}
#tag-form-container .autoresult .autocomplete-option-root {
	border: none !important;
}
#tag-form-container .autoresult .autocomplete-option {
	border: none !important;
	line-height: 44px;
	cursor: pointer;
}
#tag-form-container .autoresult .autocomplete-option:hover {
	color: #fff;
}
#tag-form-container .action {
	background: #f7f7f7;
	padding: 8px;
	border: 1px solid #eee;
	line-height: 35px;
	text-align: right;
}
#tag-form-container .action > * {
	line-height: 20px;
}
#tag-form-container .action > input {
	margin-right: 10px;
}
.modal-dialog {
	margin: 40px 10px;
}
#AARPModal .modal-dialog {
	margin: 40px;
}
.modal-title {
	font-family: 'Quantico', sans-serif;
	font-weight: bold;
	padding: 8px 15px;
	background-color: #f2f2f2;
}
.modal-body {
	padding: 20px 15px;
}
.album-page .modal-content {
	background-color: #000;
}
.add-change-modal .modal-content {
	background-color: #fff;
}
.add-change-modal .overlay a.edit-photo {
	position: absolute;
    right: 8px;
    top: 7px;
    font-size: 20px;
}
.modal-footer {
	text-align: left;
	padding: 15px;
}
.modal .close::before,
.modal .close::after {
	height: 2px;
}
.video-modal-content {
	border: none;
	background: #000;
}

/* Upload Video & Photo Modal*/
.add-change-modal #left-col-modal {
	margin-bottom: 30px;
}
.add-change-modal .filename {
	padding-top: 20px;
}
.add-change-modal .remove-item .fa.fa-trash {
	font-size: 18px;
}
.add-change-modal .remove-item .fs-12 {
	vertical-align: text-bottom;
}
.modal-header {
	border: none;
	padding: 0;
	background-color: #f2f2f2;
}
#upload-photo .popup-title,
.add-change-modal .popup-title {
	font-size: 20px;
	padding: 10px 15px; 
}
.add-change-modal #left-col-modal img {
	width: 100%;
	margin-bottom: 10px;
}
.add-change-modal .btn.btn-upload {
	max-width: none;
}
.add-change-modal .choose-file .file_name {
	margin-left: 150px
}
#uploadVideoForm .left-col-modal-item {
	margin-bottom: 10px;
}
#uploadVideoForm sub {
	font-size: 14px;
	margin-left: 14px; 
}
#uploadVideoForm sub.lower {
	vertical-align: bottom;
}
#uploadVideoForm sub.middle {
	vertical-align: middle;
}
#uploadVideoForm div.video-thumb {
	width: 100px;
	margin-bottom: 25px;
	padding-bottom: 80px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 0px;
	height: 10px;
}
#uploadVideoForm div.video-thumb.use {
	width: 160px;
	padding-bottom: 128px;
}
#uploadVideoForm .form-group.choose-file {
	height: 27px;
}
#uploadVideoForm #video-add-thumb {
	width: 135px;
	padding-bottom: 108px;
}
#uploadVideoForm #buttons-upload {
	margin-top: 34px;
}
.modal-content #buttons-upload > div,
.modal-content #buttons-add-photo > div,
.modal-content .modal-buttons > div {
	padding: 0 8px;
}
.modal-content #buttons-upload > div:last-child,
.modal-content #buttons-add-photo > div:last-child,
.modal-content .modal-buttons > div:last-child {
	padding-right: 0;
}
.modal-content #buttons-upload .btn,
.modal-content .modal-buttons .btn {
	width: 100%;
}
#videoGalleryModal .ytplayer-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	color: black;
	top: 0px;
	bottom: 0;
	background: white;  
}
#videoGalleryModal .ytplayer-overlay span {
	position: absolute;
	margin-top: 60px;
	margin-left: 80px;
	font-size: 20px;
}
#uploadVideoForm .select-button-container { 
	margin-left: 24px;
	width: 340px;
}
.album-page .caption > h4 {
	cursor: pointer;
}
.album-page .play-btn::before {
	height: 60px;
	margin-left: -40px;
	margin-top: -30px;
	width: 80px;
}
.album-page .play-btn::after {
	border-bottom: 10px solid transparent;
	border-left: 20px solid #fedd84;
	border-top: 10px solid transparent;
	margin-left: -10px;
	margin-top: -10px;
}
.album-page .album-modal .modal-dialog .modal-content .modal-body {
	padding: 0;
	background: #fff;
}
.album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-8 {
	padding: 0 0 56.1404%;
	background: #101010;
	text-align: center;
}
.album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-8 .jcrop-holder {
	margin: auto;
	z-index: 1;
}
.album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-8 .rotatable {
	visibility: hidden;
}
.album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-4 {
	max-height: 300px;
	overflow-x: auto; 
}
#modal-album-details {
	padding: 30px 0 15px;
}
#modal-album-details .poster {
	margin-bottom: 10px;
}
#modal-album-details .by {
	font-size: 15px;
}
#modal-album-details .by > img {
	max-width: 15px;
	max-height: 15px;
	vertical-align: inherit;
}
#modal-album-details .title {
	color: #676767;
	margin-bottom: 2px;
	font-size: 14px;
}
#modal-album-details .twslike {
	font-size: 14px;
	margin-bottom: 5px;
}
#modal-album-details .twslike i {
	font-size: 18px;
}
#modal-album-details .comments dl.dl-horizontal.dl-post {
	border-top: 1px solid #ddd;
	padding: 10px 0;
	position: relative;
}
#modal-album-details .comments dl.dl-horizontal.dl-post a {
	text-decoration: none;
}
#modal-album-details .comments dl.dl-horizontal.dl-post dt .image {
	height: 35px;
	width: 35px;
}
#modal-album-details .comments .by {
	font-size: 14px;
}
#modal-album-details .comments .date {
	font-size: 12px;
	color: #aaa;
}
#modal-album-details .comments .fa-trash {
	cursor: pointer;
}
#modal-album-details .add-comment .input-default {
	width: 100%;
}

#upload-photo.modal .cancel-upload-btn {
	width: 100%;
	line-height: 32px;
	padding-bottom: 0px;
	padding-top: 0px;
}
#upload-photo.modal .table.upload-photo-table .table-row.table-header {
	background-color: transparent;
	color: black;
}
#upload-photo.modal .table.responsive-table-cards.upload-photo-table .table-cell.card-header {
	background-color: transparent !important;
	color: black !important;
	font-weight: normal;
	word-break: break-word;
}
#upload-photo.modal .table.upload-photo-table .table-cell.cell-filename {
	width: 75%;
}
#upload-photo.modal .form-group {
	margin-bottom: 15px;
}
#upload-photo.modal div.photo-thumbnail {
	width: 40%;
	margin: 0 auto 10px;
	padding-bottom: 40%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: auto;
	border: 1px solid #dadada;
	position: relative;
}
.modal-header .popup-title {
	border-bottom: 1px solid #ccc;
}
.upload-photo-table .table-row {
	position: relative;
}
.upload-photo-table button.upload-photo-delete.close {
	width: 20px;
	height: 20px;
	background-color: transparent;
	float: none;
	top: initial;
	margin-top: 10px;
	right: 10px;
	background-color: white;
	border: 1px solid #88846c;
}
.upload-photo-table button.upload-photo-delete.close:before,
.upload-photo-table button.upload-photo-delete.close:after {
	width: 12px;
	top: 8px;
	left: 3px;
}
.form-edit-photo > .description {
	margin-bottom: 20px;
}

/* Photo Modal */
#add-photo-details_filedUnder {
	font-size: 16px;
	margin-left: 5px;
}
#add-photo-details_filedUnder-row {
	margin-bottom: 10px;
}
.form-edit-photo .filename-container {
	margin-bottom: 5px;
	font-size: 12px;
	color: #999;
	line-height: 1;
	margin-bottom: 10px;
	float: none;
}
.form-edit-photo .preview {
	margin: 0 0 15px;
}
body.modal-open > .select2-container--bootstrap {
	z-index: 170000002;	
}

/* Adjust Thumb */
.adjust-thumb-modal {
	overflow-y: auto !important;
}

.adjust-thumb-modal .modal-body {
	font-size: 15px;
}
.adjust-thumb-modal .modal-footer {
	padding-top: 20px;
}
.adjust-thumb-modal .modal-footer .btn {
	width: 100%;
	margin-left: 0;
}
.adjust-thumb-modal #tagged-image {
	margin-top: 15px;
	text-align: center;
	padding: 0;
}
.adjust-thumb-modal .modal-footer .form-group div:first-child {
	padding-left: 8px;
	padding-right: 0;
}
.adjust-thumb-modal .modal-footer .form-group div:last-child {
	padding-left: 0;
	padding-right: 8px;
}
.adjust-thumb-modal .modal-footer button.btn#btnSubmit {
    margin-top: 0;
}
.adjust-thumb-modal .jcrop-holder {
	display: inline-block;
}
.adjust-thumb-modal .jcrop-holder img {
	max-width: none;
}
.adjust-thumb-modal .jcrop-holder input[type="radio"] {
	display: none !important;
}
.adjust-thumb-modal .year {
	display: flex;
	justify-content: center;
}
.adjust-thumb-modal .year .year-select {
	margin-left: 20px;
	margin-top: -3px;
	width: 180px;
}

/* Family Tree Modal */
.modal-dialog.modal-family-tree .modal-content {
	max-height: 600px;
}
.modal-dialog.modal-family-tree img {
	max-width: none;
	min-width: calc(100% + 15px);
	padding-right: 15px;
	width: 550px;
}


/* jQuery UI Dialog */
.ui-dialog .ui-dialog-content {
	background: none !important;
}

/* AARP ad login popup */
#AARPModal .modal-body {
	border: none;
	background: #FBFBFB;
	padding: 5px;
}
#AARPModal #aarp-header > .checkbox {
	margin: 0 0 5px;
}


/* smaller phone view */
@media (min-width: 481px) {
	#AARPModal .modal-dialog {
		width: 400px;
		margin: 100px auto;;
	}
	#modal-album-details .comments dl.dl-horizontal dd{
		margin-left: 45px;
	}
	#modal-album-details .comments .fa-trash {
		margin-top: -7px;
		position: absolute;
		right: 0;
		top: 50%;
	}
	#modal-album-details .comments dl.dl-horizontal.dl-post dd p {
		max-width: 90%;
	}
	#tag-form-container .action > * {
		min-width: 125px;
	}
}
	
/* Small devices (tablets, 768px and up) .col-sm- */
@media (min-width: 768px) {
	.modal-dialog {
		margin: 100px auto;
	}
	#AARPModal .modal-dialog {
		margin: 75px auto;
	}
	#AARPModal .modal-dialog {
		width: 500px;
	}
	.modal-body,
	.modal-footer {
		padding: 25px 30px;
	}
	.modal-title {
		padding: 8px 30px;
	}
	.album-page .album-modal .modal-dialog .modal-content {
		height: auto;
		max-height: none;
	}
	.album-page .album-modal .modal-dialog .modal-content .modal-body #ytplayer,
	.album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-8 {
		height: 337px;
		padding: 0;
	}
	.album-page .album-modal .modal-dialog .modal-content .modal-body #ytplayer {
		width: 100%;
	}
	#upload-video .popup-title,
	#upload-photo .popup-title,
	.add-change-modal .popup-title {
		padding: 10px 30px;
		border-bottom: 1px solid #ccc;
	}
	.table.responsive-table-cards.upload-photo-table .table-row:not(.table-header) .table-cell {
		border-bottom-color: transparent;
	}
	.form-edit-photo .file-under {
		vertical-align: top;
		line-height: 34px;
	}
	.modal.add-change-modal .modal-dialog.scrollable-body .modal-body .alert-buttons-row {
		margin: 0;
	}
	#tag-form-container .input-wrapper {
		padding: 10px 8px;
	}
	#tag-form-container .autoresult .autocomplete-option {
		padding: 10px !important;
	}
	.adjust-thumb-modal .modal-footer {
		border-top: none;
	}
}

/* Medium devices (desktops, 992px and up) .col-md- */
@media (min-width: 992px) {
	.album-page .album-modal .modal-dialog {
		width: 855px;
		height: 480px;
	}
	.album-page .album-modal .modal-dialog .modal-content .modal-body #ytplayer,
	.album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-8 {
		height: 480px;
	}
	.add-change-modal .modal-dialog {
		width: 780px;
	}
	.adjust-thumb-modal .modal-dialog {
		width: 592px;
	}
}

/* Large devices (large desktops, 1200px and up) .col-lg- */
@media (min-width: 1200px) {
	.modal-dialog {
		margin: 220px auto;
	}
	.album-page .album-modal .modal-dialog {
		width: 1315px;
		max-width: 90%;
	}
	.album-page .album-modal .modal-dialog .modal-content .modal-body > div {
		height: 480px;
	}
	.video-album-page .album-modal .modal-dialog .modal-content .modal-body #ytplayer,
	.video-album-page .album-modal .modal-dialog .modal-content .modal-body > div {
		height: 493px;
	}
	.album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-4 {
		max-height: 480px;
		padding: 0 20px;
	}
	.video-album-page .album-modal .modal-dialog .modal-content .modal-body .col-lg-4 {
		max-height: 493px;
	}
	.form-edit-photo > .form-inline {
		margin-bottom: 20px;
	}
	#upload-photo.modal div.photo-thumbnail {
		width: 100%;
		padding-bottom: 100%;
	}
	.modal-content #buttons-add-photo {
		margin-top: 15px;
	}
}

/*------------------------------------------------------------------
	Media Queries MAX-WIDTH - Wide to Small
-------------------------------------------------------------------*/
@media (max-width: 1199px) {
	#upload-photo.modal .form-group.end-group {
		margin-bottom: 0;
	}
}

@media (max-width: 991px) {
	.modal.video-modal .modal-dialog .modal-content,
	.modal.video-modal .modal-dialog .modal-content .modal-body #ytplayer {
		height: 337px;
		max-height: none;
	}
}

@media (max-width: 767px) {
	.modal .close {
		right:0;
	}
	.modal.video-modal .modal-dialog {
		width: 93%;
		display: block;
		margin: auto;
		transform: none;
		top: 100px;
	}
	.modal.video-modal .modal-dialog .modal-content,
	.modal.video-modal .modal-dialog .modal-content .modal-body #ytplayer {
		height: 100%;
	}
	#modal-album-details dl.dl-horizontal.dl-post dd p {
		margin-left: 85px;
	}
	#modal-album-details .comments dl.dl-horizontal.dl-post dd p {
		margin-left: 0;
	}
	.modal.add-change-modal .modal-dialog {
		top: 60%;
		transform: translateY(-35%);
		position: absolute;
		left: 0;
		right: 0;
	}
	.modal .modal-content,
	.modal.add-change-modal .modal-content {
		max-height: 500px;
		overflow-x: auto;
	}
	#msgModal .modal-dialog .modal-content {
		max-height: 85vh;
	}
	#AARPModal .modal-content {
		max-height: none;
	}
	.album-page .album-modal .modal-dialog {
		display: block;
		margin: auto;
		width: 93%;
		left: 0;
		position: absolute;
		right: 0;
		top: 50px;
		transform: none;
	}
	.modal.add-change-modal .modal-dialog.scrollable-body {
		overflow-y: initial;
	}
	.modal.add-change-modal .modal-dialog.scrollable-body .modal-body {
		overflow: auto;
		margin-bottom: 10px;
	}
	.modal.add-change-modal .modal-dialog.scrollable-body .modal-body .alert-buttons-row {
		position: absolute;
		width: 100%;
		z-index: 1;
		padding-left: 15px;
		padding-right: 15px;
	}
	.album-page .album-modal .modal-dialog #imgbox {
		bottom: 0;
		height: 100%;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}
	#upload-photo.modal .table.upload-photo-table .table-cell.cell-filename {
		width: auto;
	}
	#upload-photo.modal .table.upload-photo-table .close.upload-photo-delete {
		position: absolute;
		top: -20px;
		right: -10px;
	}
	#upload-photo.modal .modal-dialog.scrollable-body .modal-body {
		max-height: 360px;
	}
	.adjust-thumb-modal #tagged-image {
		margin-bottom: 15px;
	}
	#upload-photo.modal 	.form-edit-photo .file-under {
		margin-bottom: 0;
	}
	.modal.add-change-modal .modal-dialog:has(form#uploadVideoForm) {
		overflow-y: initial;
		top: 65%;
		transform: translateY(-35%);
	}
}

@media (max-width: 480px) {
	#modal-album-details dl.dl-horizontal.dl-post dt {
		float: none;
	}
	#modal-album-details dl.dl-horizontal.dl-post dd p {
		margin-left: 0;
	}
	#modal-album-details .by {
		margin-top: 10px;
	}
	#upload-photo.modal .modal-dialog.scrollable-body .modal-body {
		max-height: 600px;
	}
	.modal .modal-content, .modal.add-change-modal .modal-content {
		max-height: none;
	}
}


/*------------------------------------------------------------------
	Media Queries Orientation
-------------------------------------------------------------------*/



/*
	KEEP THIS AREA CLEAN
*/