/*EZ*/

/*CHOOSE HOW TO BEGIN MODAL*/
#modalBeginEZModal .imgContainer {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fileIcon {
	font-size: 15rem;
}

#modalBeginEZModal .caption {
    bottom: -10.7rem;
}

#modalBeginEZModal .thumbnail {
	line-height: 0;
}

.chooseFile {
	color: #333;
	line-height: 0;
	margin: 0;
	min-width: auto;
}

.btn.chooseFile {
	padding: 0;
}

.ez .chooseFile {
	padding: 0 !important;
}

.thumbnail {
    border: 0 none;
    box-shadow: none;
    margin: 0;
    /* padding: 0; */
    padding: .9rem;
    width: 100%;
}

.pageSizeContainer {
	padding-top: 2.1rem;
}

.ez .thumbnail {
	padding: 2.8px !important;
}

.chooseFile:hover, .caption:hover {
	color: #3d78d8; 
}

/*ORIENTATION MODAL*/

.thumbnail {
	line-height: 0;
	width: fit-content;
}

/*PRINTER PAPER SIZE*/

.selectedBorder {
	border: 5px solid #ae050a;
}

#printerPaperSizeModal .modal-dialog {
	/*min-width: 1429px !important;*/
	/*min-width: 984px !important;*/
/*	min-width: 60vw !important;
	max-width: 98vw !important;*/
}

#printerPaperSizeModal .modalBody { 
	color: #000; 
	min-height: 25vh;
	/*height: 60vh;*/
	max-height: 85vh;
} 

@media (max-height: 700px) {
	#printerPaperSizeModal .modalBody { 
		max-height: 68vh;
	} 

	.infoText {
	    font-size: 15px !important;
	}

	#canvasOrientationModal .modal-dialog {
		margin: 5px auto;
	}
}

.infoText {
	font-size: 18px; 
	/*font-weight: 700; */
	padding: 15px 0; 
}

.infoText_2 {
	font-size: 16px;
	font-weight: 600;
	border-top: 1px solid #3d78d8;
	border-bottom: 1px solid #3d78d8;
	margin: 20px 10px;
	padding: 5px 15px;
	line-height: 20px;
	width: calc(100% - 30px);
}

.infoText_3 {
	font-size: 18px;
	padding: 0 0 6px 0;
	line-height: 20px;
}

.projectInfoTabelContainer, #projectInfoTable td, #projectInfoTable.table-bordered > thead > tr > th{
	border: 2px solid #ccc;
}

#projectInfoTable {
	font-size: 17px;
	margin: 0;
	text-align: center;
	font-weight: 600;
}

#projectInfoTable thead th {
	text-align: center;
}

#noOfPagesCell {
	/*font-weight: 700;*/
	/*color: #ae050a;*/
}

.pageContainer {
	display: inline-block;
	padding: 0;
	width: fit-content;
}

.selectedPage {
	background-color: #69a6da;
}

.papersDiv {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    margin-top: -32px;
    float: left;
    width: 100%;
}

.pageDiv {
	border: 1px solid #ccc;
	text-transform: none;
}

.popoverContent ul{
	list-style-type: none !important;
}

.size50x75 {
	/*height: 75px;*/
	/*width: 50px;*/
	width: 3.125em;
	height: 4.688em;
}

.size50x75:before {
	align-items: center;
	bottom: 11px;
	content:'4"x6"';
	display: flex;
	justify-content: center;
	position: relative;
}

.size50x75:after {
	top: 76px;
	content:'4"x6"';
	position: relative;
}

.size75x100 {
	/*height: 100px;*/
	/*width: 75px;*/
    height: 6.250em;
    width: 4.688em;
}

.size75x100:before {
	align-items: center;
	bottom: 11px;
	content:'5"x7"';
	display: flex;
	justify-content: center;
	position: relative;
}

.size75x100:after {
	top: 95px;
	content:'5"x7"';
	position: relative;
}

.sizeA {
	/*height: 125px;*/
	/*width: 100px;	*/
    height: 7.813em;
	width: 6.250em;
}

.sizeA:before {
	align-items: center;
	bottom: 11px;
	content:'Letter(A)';
	display: flex;
	justify-content: center;
	position: relative;
}

.sizeA:after {
	top: 117px;
	content:'8.5"x11"';
	position: relative;
}

.sizeA4 {
	/*height: 150px;*/
	/*width: 105px;	*/
    height: 9.375em;
	width: 6.563em;
}

.sizeA4:before {
	align-items: center;
	bottom: 11px;
	content:'A4';
	display: flex;
	justify-content: center;
	position: relative;
}

.sizeA4:after {
	top: 139px;
	content:'8.3"x11.7"';
	position: relative;
}

.sizeLegal {
	/*height: 175px;*/
	/*width: 100px;	*/
    height: 10.938em;
	width: 6.250em;
}

.sizeLegal:before {
	align-items: center;
	bottom: 11px;
	content:'Legal';
	display: flex;
	justify-content: center;
	position: relative;
}

.sizeLegal:after {
	top: 161px;
	content:'8.5"x14"';
	position: relative;
}

.size12x12 {
	/*height: 200px;*/
	/*width: 200px;	*/
    height: 12.500em;
	width: 12.500em;
}

.size12x12:before {
	align-items: center;
	bottom: 11px;
	content:'12"x12"';
	display: flex;
	justify-content: center;
	position: relative;
}

.size12x12:after {
	top: 183px;
	content:'12"x12"';
	position: relative;
}

.sizeLedgerB {
	/*height: 250px;*/
	/*width: 200px;	*/
    height: 15.625em;
	width: 12.500em;
}

.sizeLedgerB:before {
	align-items: center;
	bottom: 11px;
	content:'Ledger (B)';
	display: flex;
	justify-content: center;
	position: relative;
}

.sizeLedgerB:after {
	top: 226px;
	content:'11"x17"';
	position: relative;
}

.sizeSuperB {
	/*height: 270px;*/
	/*width: 200px;	*/
    height: 16.875em;
	width: 12.500em;
}

.sizeSuperB:before {
	align-items: center;
	bottom: 11px;
	content:'Super B/Super A3/A3+';
	display: flex;
	justify-content: center;
	position: relative;
}

.sizeSuperB:after {
	top: 244px;
	content:'13"x19"';
	position: relative;
}

#orientationDropdown input[type=radio] {
	margin-left: -20px !important;
	margin-top: 2px !important;
}

/*Style input radio*/

.frb-group {
	margin: 0;
}

/*.frb ~ .frb {
	margin-top: 15px;
}*/

.frb input[type="radio"]:empty,
.frb input[type="checkbox"]:empty {
	display: none;
}

.frb input[type="radio"] ~ label:before,
.frb input[type="checkbox"] ~ label:before {
	font-family: FontAwesome;
	content: '\f096';
	position: absolute;
	top: 40%;
	margin-top: -11px;
	left: 15px;
	font-size: 22px;
}

.frb input[type="radio"]:checked ~ label:before,
.frb input[type="checkbox"]:checked ~ label:before {
	content: '\f046';
}

.frb input[type="radio"] ~ label,
.frb input[type="checkbox"] ~ label {
	position: relative;
	cursor: pointer;
	width: 100%;
	/*border: 5px solid #cbcbcb;*/
	/*border-radius: 5px;*/
	background-color: transparent;
}

.frb input[type="radio"] ~ label:focus,
.frb input[type="radio"] ~ label:hover,
.frb input[type="checkbox"] ~ label:focus,
.frb input[type="checkbox"] ~ label:hover {
	box-shadow: 0px 0px 3px #69a6da;;
	/*border: 5px solid #cbcbcb;*/
}

.frb input[type="radio"]:checked + label {
	border: 5px solid #ae050a;
	color: #ae050a !important;
}

.frb input[type="radio"]:checked ~ label,
.frb input[type="checkbox"]:checked ~ label {
	color: #fafafa;
}

.frb input[type="radio"]:checked ~ label,
.frb input[type="checkbox"]:checked ~ label {
	background-color: transparent;
}

.frb.frb-default input[type="radio"]:checked ~ label,
.frb.frb-default input[type="checkbox"]:checked ~ label {
	color: #333;
	text-transform: uppercase;
}

.frb input[type="radio"]:empty ~ label span,
.frb input[type="checkbox"]:empty ~ label span {
	display: inline-block;
}

.frb input[type="radio"]:empty ~ label span.frb-title,
.frb input[type="checkbox"]:empty ~ label span.frb-title {
	font-size: 16px;
	font-weight: 700;
	margin: 5px 20px 5px 50px;
	text-transform: uppercase;
}

.frb input[type="radio"]:empty ~ label span.frb-description,
.frb input[type="checkbox"]:empty ~ label span.frb-description {
	font-weight: normal;
	font-style: italic;
	color: #999;
	margin: 5px 5px 5px 50px;
}

.frb input[type="radio"]:empty:checked ~ label span.frb-description,
.frb input[type="checkbox"]:empty:checked ~ label span.frb-description {
	color: #fafafa;
}

.frb.frb-default input[type="radio"]:empty:checked ~ label span.frb-description,
.frb.frb-default input[type="checkbox"]:empty:checked ~ label span.frb-description {
	color: #999;
}

.frb.frb-default {
	padding-left: 0;
}



.papersInput.frb input[type="radio"]:empty,
.frb input[type="checkbox"]:empty {
	display: none;
}

.papersInput.frb input[type="radio"] ~ label:before,
.frb input[type="checkbox"] ~ label:before {
	font-family: FontAwesome;
	content: '\f096';
	position: absolute;
	top: 40%;
	margin-top: -11px;
	left: 15px;
	font-size: 22px;
}

.papersInput.frb input[type="radio"]:checked ~ label:before,
.frb input[type="checkbox"]:checked ~ label:before {
	content: '\f046';
}

.papersInput.frb input[type="radio"] ~ label,
.frb input[type="checkbox"] ~ label {
	position: relative;
	cursor: pointer;
	width: 100%;
	/*border: 5px solid #cbcbcb;*/
	/*border-radius: 5px;*/
	background-color: transparent;
}

.papersInput.frb input[type="radio"] ~ label:focus,
.papersInput.frb input[type="radio"] ~ label:hover,
.papersInput.frb input[type="checkbox"] ~ label:focus,
.papersInput.frb input[type="checkbox"] ~ label:hover {
	box-shadow: 0px 0px 3px #69a6da;;
	/*border: 5px solid #cbcbcb;*/
}

.papersInput.frb input[type="radio"]:checked + label {
	border: 5px solid #ae050a;
}

.papersInput.frb input[type="radio"]:checked ~ label,
.papersInput.frb input[type="checkbox"]:checked ~ label {
	color: #fafafa;
}

.papersInput.frb input[type="radio"]:checked ~ label,
.papersInput.frb input[type="checkbox"]:checked ~ label {
	background-color: transparent;
}

.papersInput.frb.frb-default input[type="radio"]:checked ~ label,
.papersInput.frb.frb-default input[type="checkbox"]:checked ~ label {
	color: #333;
}

.papersInput.frb input[type="radio"]:empty ~ label span,
.papersInput.frb input[type="checkbox"]:empty ~ label span {
	display: inline-block;
}

.papersInput.frb input[type="radio"]:empty ~ label span.frb-title,
.papersInput.frb input[type="checkbox"]:empty ~ label span.frb-title {
	font-size: 16px;
	font-weight: 700;
	margin: 15px 20px 15px 50px;
}

.papersInput.frb input[type="radio"]:empty ~ label span.frb-description,
.papersInput.frb input[type="checkbox"]:empty ~ label span.frb-description {
	font-weight: normal;
	font-style: italic;
	color: #999;
	margin: 5px 5px 5px 50px;
}

.papersInput.frb input[type="radio"]:empty:checked ~ label span.frb-description,
.papersInput.frb input[type="checkbox"]:empty:checked ~ label span.frb-description {
	color: #fafafa;
}

.papersInput.frb.frb-default input[type="radio"]:empty:checked ~ label span.frb-description,
.papersInput.frb.frb-default input[type="checkbox"]:empty:checked ~ label span.frb-description {
	color: #999;
}

.papersInput.frb.frb-default {
	padding-left: 0;
}

#recommendedOrientationMsg {
	font-size: 15px;
	color: #ae050a;
}

/*End Style input radio*/

#printerPaperSizeModal input[type=radio] {
	margin: 28px 0 0;
}
#templatesSection .productItemContainer .projectItemInnerContainer .imgDiv img{
	height: 100%;
	object-fit: cover;
}
.pagination.pagination-top {
	width: 100%;
}

#templatesSection .productItemContainer {
    /* width: 223px !important; */
    width: 22.0rem;
}

#templatesSection .projectItemInnerContainer div h5 {
    color: #414348;
    font-family: 'RobotoCondensed';
    font-size: 12px;
    letter-spacing: .8px;
    padding: 4px 5px 5px 5px;
    margin: -7px 0 0 0;
    height: 50px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
}


/*Templates Modal */
.modal {
	cursor: auto;
}

.customDialog {
	padding: 0 15px 15px 15px !important;
	width: 64vw !important;
}

.customDialog .modal-body {
	padding: 0 15px 15px 15px !important;
}

.customDialogHeader {
	background-color: #34699e;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}

.customDialog .customCategoryBtn {
	padding: 0;
}

.upContainer {
	align-items: center;
	border-bottom: 1px solid #f3f3f3;
	display: flex;
	padding: 1vh .65vw 1vh .3vw;
}

.title {
	/*color: #296798;*/
	color: rgb(255, 255, 255);
	font-size: 1.3vw;
}

#preview-profile .title {
	color: #343434;
}

.contentContainer {
	margin-top: 1vh;
	width: 100%;
}

.categoryDiv {
	padding: .56vw .8vw .8vw .8vw;
}

.productsByCategory {
	margin-bottom: 1vw;
	padding: 0 0 1vh 0;
}

.productsByCategory ul {
	/*border-left: 1px solid #ccc;*/
}

.customDialog .productTitle {
	font-size: .8vw;
	padding: .5vw 0 .5vw 0;
	margin: 0;
}

.searchContainer span {
	background-color: #34699e !important;
	border: 1px solid #f1f1f1;
	color: #fff;
}
.searchDiv {
    align-content: center;
    display: flex;
    float: right;
    height: 35px;
    justify-content: center;
    margin: 6px 45px 6px 10px;
    /* height: 3.5vh; */
    vertical-align: middle;
    width: 100% !important;
}

.fa-search {
	color: #fff !important;
}
.productsListContainer .projectItemInnerContainer {
	background: none !important;
}

#templatesSection .upContainer {
     display: inline-block; 
}

#templatesSection .searchDiv {
    /*height: 40px;*/
    height: 35px;
}

#templatesSection .searchContainer span {
    border: 0px solid #f1f1f1;
}

.selectedTemplate {
	border: 5px solid #ae050a !important;
}

#templatesSection .productItem:hover {
	cursor: pointer;
}

#templatesSection .itemsList {
	cursor: default;
}

#chooseTemplateWarning {
	font-size: 18px;
	color: red;
	text-align: center;
}

.modal {
	overflow: auto;
}

#printerPaperSizeModal .modalFooter {
	border: none;
}

/*@media (width: 1280px) and (height: 607px) {

    #printerPaperSizeModal .modal-header {
        padding: 5px 15px !important;
    }

    #printerPaperSizeModal .modal-lg {
        width: 1100px !important;
    }

    #printerPaperSizeModal .modal-dialog {
        margin: 0 auto !important;
    }

    #printerPaperSizeModal .modal-footer {
        padding: 10px 15px !important;
    }

    .infoText {
        padding: 0 !important;
    }
}*/

@media (max-width: 1366px) {
	#printerPaperSizeModal .modal-dialog {
		margin: 2px auto !important;
	}

}

@media (max-width: 1200px) {
	.paperContainer {
		margin: 0 2rem 3rem 0rem;
	}

	#printerPaperSizeModal .thumbnail {
		padding: 2.3rem .1rem .5rem .1rem;
	}

	#printerPaperSizeModal .modal-lg {
		width: 1010px;
	}

	.infoText {
	    margin-left: -5rem;

	}

	.infoText {
	    margin-left: -28px;
	}
}

@media (max-width: 991px) {

	#printerPaperSizeModal .modal-lg {
	    width: 845px;
	}

	.chooseFile {
		font-size: 12px;
	}

	.ez .searchContainer.text-filter-box.input-group {
	    width: 337px;
	}

	.size50x75::after {
	    top: 69px;
	}

	.size75x100::after {
	    top: 88px;
	}

	.sizeA::after {
	    top: 106px;
	}

	.sizeA4::after {
	    top: 125px;
	}

	.sizeLegal::after {
	    top: 144px;
	}

	.size12x12::after {
	    top: 163px;
	}

	.sizeLedgerB::after {
	    top: 200px;
	}

	.sizeSuperB::after {
	    top: 215px;
	}

	.productsTooltip, .breadcrumb {
		display: none;
	}

	.selectCategory {
	    position: relative;
	    margin: 0px 0 6px 18px;
	}

	.page-intro {
	    padding: 7px 0 0px 0;
	}

	.ez .searchContainer.text-filter-box.input-group {
	    margin: 0 -11px 0px 0;
	}

}

@media (max-width: 768px) {
	#templatesSection .modal-dialog {
	    max-width: 90%;
	    min-width: 30%;
	    margin: 30px auto;
	}

	.infoText_3 {
	    padding: 15px 0 6px 0;
	}

	.caption button, .caption button:active, .caption button:focus, .caption button:hover {
	    margin-bottom: 0;
	}

	#portraitIconID {
		margin-top: 15px;
	}

}

@media (max-width: 848px) {

	#printerPaperSizeModal .modal-lg {
	    width: auto;
	}

	.papersDiv {
	    align-items: center;
	    display: flex;
	    justify-content: center;
	    margin-top: 0;
	    float: left;
	    width: 100%;
	    flex-direction: column;
	}

	.imgContainer {
	    padding: 0 28px 28px 28px;
	}

	.infoText {
	    margin-left: 0;
	}

	.itemsContainer {
		text-align: center;
	}
	#templatesSection .itemsList {
	    padding-left: 28px;

	}

	.searchContainer span {
	    padding: 0 12px;
	}

	.frb input[type="radio"]:empty ~ label span.frb-title, .frb input[type="checkbox"]:empty ~ label span.frb-title {
	    margin: 5px 10px 5px 40px !important;
	}

	.frb.frb-default {
	    padding-left: 0 !important;
	}
}
/*---------------NEW CSS-----------*/


ul.enlarge {
	list-style-type: none; 
	padding-left:3px;
}

    ul.enlarge li {
        display: inline-block; /*places the images in a line*/
        position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
        z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
        margin: 4px 13px 10px 0px; /*space between the images*/
        border: 1px solid rgba(0,0,0,.2);
        padding: 10px;
        -webkit-box-shadow: 0 0 6px 0 #D1D1D1;
        box-shadow: 0 0 6px 0 #D1D1D1;
        width:150px;
        
    }
    /***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
    ul.enlarge span {
        position: absolute; /*see support section for more info on positioning*/
        left: -9999px; /*moves the span off the page, effectively hidding it from view*/
        /* cursor:zoom-in; */
       
    }
    /***Note: This styling will apply to both the thumbnail and popup image, unless you override these styles in step five***/
    ul.enlarge img {
        /*
        background-color: #eae9d4; 
        padding: 6px;*/
        /*add a drop shadow to the frame
        -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
        -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
        box-shadow: 0 0 6px rgba(132, 132, 132, .75);
        /*and give the corners a small curve*/
        /*-webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;*/
       
    }

    ul.enlarge li:hover {
        z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
        cursor: pointer; /*changes the cursor to a hand*/
    }
        /***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
        ul.enlarge li:hover span { /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
            top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
            left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
        }
        /***To make it look neater we used :nth-child to set a different left distance for each image***/
        ul.enlarge li:hover:nth-child(2) span {
            left: -100px;
        }

        ul.enlarge li:hover:nth-child(3) span {
            left: -200px;
        }
    /***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
    ul.enlarge span img {
        padding: 2px; /*size of the frame*/
        background: #ccc; /*colour of the frame*/
        width: 400px;
        margin-top: 20%;
    }
    /***Style the <span> containing the framed images and the caption***/
    ul.enlarge span {
        /**Style the frame**/
        /*give the corners a curve*/
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        /**Style the caption**/
        font-size: .9em;
        text-align: center;
        color: #495a62;
    }
.tooltipText {
    color: #265b88;
    padding: 5px;
}

/*---------------End of New CSS---------*/

/*-------------- CV New CSS---------*/
.img-tmb-popup{
	margin : 0 auto;
	max-height:120px;
	width:auto;
	padding:0px;
}
 ul.enlarge span {
	width:400px;
	background: rgba(204, 204, 204, 0.5); 
		/*height:400px;	 */
 }
  ul.enlarge span img {
	-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
	width: auto !important;
	margin-top: 0%;
}
ul.enlarge li {height:168px;}
ul.enlarge li:hover span { 
	top: -150px;
	left: 50px; 
}
.img-tmb-large{
	margin : 0 auto;
	max-height:400px;
	width:auto !important;
	padding:0px;
}
.tooltip-tmb{
	padding: 0px;
	margin-bottom:0px;
	font-size: 12px;
	overflow: hidden;
	height: 27px;
}
/*-------------- END of CV New CSS---------*/