@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

/* Containing divs */
#wd1_nlpopup_container {
	visibility: hidden;
	position: fixed;
	left: 0;
	top: 0;
	width: calc(100% - 240px);
	height: calc(100% - 240px);
	z-index: 9999999999999;
	/box-sizing: border-box;
	margin: 120px;
	min-height: 300px;
	font-family: 'Open Sans', sans-serif;
}
#wd1_nlpopup_backdrop {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.7;
}
#wd1_nlpopup_background {
	background: #f8f8f8;
	opacity: 1;
	width: 100%;
	height: 100%;
    /* border-radius: 25px; */
	position: absolute;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;

	-webkit-box-shadow: 0px 0px 15px 0px rgba(51,51,51,1);
	-moz-box-shadow: 0px 0px 15px 0px rgba(51,51,51,1);
	box-shadow: 0px 0px 15px 0px rgba(51,51,51,1);
}

/* New to Port-Log title */
#new-to-port-log {
	margin: 48px 0px;
}
#PortLog_Demo_title {
	color: #231f20;
	font-weight: 700;
	font-size: 2.4em;
}
#PortLog_Demo_gotit {
	color: #231f20;
	text-align: right;
	font-size: 2em;
	font-weight: 200;
	opacity: 0.6;

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#PortLog_Demo_gotit:hover,
#PortLog_Demo_gotit:focus,
#PortLog_Demo_gotit:active,
#PortLog_Demo_gotit:visited {
	text-decoration: none;
	opacity: 1;
}

/* Popup text body */
#PortLog_Demo_Text {
	color: #231f20;
	font-size: 1.4em;
	height: 100%;
}
#PortLog_Demo_Text .title {
	margin-top: 0px;
	font-weight: 700;
	font-size: 1.4em;
	color: #0066b3;
}
#PortLog_Demo_Text .text {
	overflow: auto;
}
#PortLog_Demo_Text .image img {
	-webkit-box-shadow: 0px 0px 15px 0px rgba(51,51,51,1);
	-moz-box-shadow: 0px 0px 15px 0px rgba(51,51,51,1);
	box-shadow: 0px 0px 15px 0px rgba(51,51,51,1);
}
.PortLog_Demo_Row {
	margin-left: 48px !important;
	margin-right: 48px !important;
}

/* Carousel indicators */
.carousel-inner {
	height: 100%;
}
/*.carousel-indicators {
	height: 20px;
	bottom: -20px;
	margin-bottom: 0px;
	opacity: 0.6;
}*/
.carousel-controls {
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: -20px;
	margin-bottom: 0px;
	opacity: 0.6;
}
.carousel-indicators {
	top: 0;
}
.carousel-indicators:hover {
	opacity: 1;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.carousel-indicators li,
.carousel-indicators .active {
	width: 18px;
	height: 18px;
	border: 2px solid #231f20;
	margin: 1px;
}
.carousel-indicators .active {
	background: #231f20;
}
.left.carousel-control,
.right.carousel-control {
	background-image: none;
}
.left.carousel-control .glyphicon,
.right.carousel-control .glyphicon {
	width: 18px;
	height: 18px;
	font-size: 22px;
	color: #000000;
	opacity: 0.6;
}
.left.carousel-control .glyphicon:hover,
.right.carousel-control .glyphicon:hover {
	opacity: 1;
}

/* custom scroll bar, only works for WebKit :( */
#PortLog_Demo_Text .text::-webkit-scrollbar-track,
#PortLog_Demo_Text .content::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #eee;
}

#PortLog_Demo_Text .text::-webkit-scrollbar,
#PortLog_Demo_Text .content::-webkit-scrollbar
{
	width: 10px;
}

#PortLog_Demo_Text .text::-webkit-scrollbar-thumb,
#PortLog_Demo_Text .content::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #9e9e9e;
}

/* smaller screens */
@media only screen and (max-width : 1500px) {
	#PortLog_Demo_Text .content {
		overflow: auto;
	}
	#wd1_nlpopup_container {
		margin: 12px;
		width: calc(100% - 44px);
		height: calc(100% - 44px);
		padding: 12px;
	}
	#new-to-port-log {
		margin: 12px 0px;
		padding-right: 0px;
	}
	.PortLog_Demo_Row {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}
	#wd1_nlpopup_body, #wd1_nlpopup_title {
		padding-right: 0px;
	}

}
@media only screen and (max-height : 800px) {
	#PortLog_Demo_Text .content {
		overflow: auto;
	}
	#wd1_nlpopup_container {
		margin: 12px;
		width: calc(100% - 44px);
		height: calc(100% - 44px);
		padding: 12px;
	}
	#new-to-port-log {
		margin: 12px 0px;
		padding-right: 0px;
	}
	.PortLog_Demo_Row {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}
	#wd1_nlpopup_body, #wd1_nlpopup_title {
		padding-right: 0px;
	}
}

@media only screen and (max-width : 767px) {
	.modal-dialog.modal-sm {
		width: 300px;
	}
}

/* popup modal confirmation */
#closeConfirmation {
	z-index: 99999999999999;
	background: rgba(0,0,0,0.5);
}
#closeConfirmation .modal-header * {
	line-height: 34px;
}
#closeConfirmation .modal-footer button { 
    padding-top: 0px;
}
#closeConfirmation .modal-footer .btn-primary {
	background: #0066b3;
}
#closeConfirmation .modal-footer .btn-primary:hover {
	background: #005b9f;
}
/* Vertically center the modal */
#closeConfirmation .vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
#closeConfirmation .vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
#closeConfirmation .modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:400px;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}