/*
 * FILE: examples > pptxgenjs-demo.css
 */
body { font-family:"Open Sans",Arial,Verdana,sans-serif; background:#f7f7f7; color:#4488CC; font-size:11px; }
textarea { border:1px solid #cccccc; padding:3px; }
h3 {
    color: #3498DB;
	font-weight: 100;
    margin: 15px 0 2px 8px;
}
code {
	display: block;
	color: #999;
	font-family: 'Roboto Mono', monospace;
	white-space: pre;
}

#contBody {
	padding: 20px 8%;
	margin: auto;
}
#contTitle button.small { margin: 0 0 0 0 !important; }
#contTitle #contBtns { width: 250px; flex-wrap: wrap; float: right; }
#contTitle #btnRun {
	padding: 14px 20px !important;
	margin: 0 0 10px 0 !important;
	width: 100%;
	min-width: 235px;
	font-size: 15px !important;
	letter-spacing: 1px;
}

#contTitle { margin: 0 0 30px 0; }
.bigTitle { font-family:'Roboto'; font-size:42px; font-weight:100; color:#0088cc; margin:0 0 10px 0; }
.subTitle { font-family:'Open Sans'; font-size:16px; color:#aaa; margin:0; }
.bigTitle a { text-decoration:none; color:inherit; }
.bigTitle a:hover { text-decoration: underline; }

.sectionTitle {
    font-size: 18px;
    color: rgb(0,133,195);
    margin: 20px 0 10px 0;
    text-transform: uppercase;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}
.arrow {
    display: inline-block;
    height: 12px; width : 12px;
    border-top  : 3px solid #0085C3; border-right: 3px solid #0085C3;
    margin-right: 10px;
    cursor: pointer;
    transition: all .25s ease;
    transform: rotate(45deg);
}
.arrow.active {
    transform: rotate(135deg);
    margin-bottom: 3px;
}
.highlightBox {
	margin: 0 0 10px 0;
	padding: 10px;
	background: #fffccc;
	border: 1px solid #ccc;
	color: #888;
	font-size: 13px;
}

/* FLEXBOX TABS */
.modernTabs {
	width: 100%;
	margin: 20px 0 10px 0;
	font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
	border: 1px solid #d5d5d5;
	box-shadow: 0px 4px 10px -5px rgba(0,0,0,0.5);
	border-radius: 5px;
}
.modernTabs > ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	background: #FAFAFA;
	margin: 0 !important; -webkit-margin-before: 0;  -moz-margin-before: 0;  -ms-margin-before: 0;
	padding: 0 !important;
	border-bottom: 1px solid #d5d5d5;
	border-radius: 5px 5px 0 0;
}
.modernTabs > ul > li {
	flex: 1 1 auto;
	cursor: pointer;
	text-shadow: 2px 2px #efefef;
	text-align: center;
	white-space: nowrap;
	display: inline-block; list-style-type:none;
	padding: 15px 10px;
	font-size: 14px;
	color: #a7a7a7;
	text-transform: uppercase;
	border-bottom: 3px solid #FAFAFA;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}
.modernTabs > ul > li.active {
	font-weight: bold;
	text-shadow: none;
	color: #0088CC;
	border-bottom: 3px solid #0088cc;
}
.modernTabs > div {
	display: none;
	margin: 0;
	padding: 20px;
	background: white;
	border-radius: 0 0 5px 5px;
}
.modernTabs > div.active { display: block; }
.modernTabs > div > .subTitle:first-child { margin-top: 0; }
.modernTabs > div > .sectionTitle:first-child { margin-top: 0; }

#tab1 #infoBar { font-family: 'Roboto Mono'; color:#4df100; }
#tab1 #infoBar > div:last-child span { padding: 0px 30px; }
#tab6 button { margin: 0 20px 20px 0 !important; }

fieldset {
    border: 1px dotted #aaa;
    background: #fff;
	text-align: left;
}
fieldset legend {
    font-size: 14px;
    color: #4488CC;
    text-transform: uppercase;
}
fieldset h3:nth-child(2) { margin-top:5px; }
fieldset .chkRow {
	padding: 2px 0 2px 10px;
	color: #6c6c6c;
}
fieldset .svgCheck {
	display: inline-block;
	width: 24px;
	height: 14px;
	vertical-align: baseline;
	margin-right: 5px;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CgkJCQkJCQkJCTxwb2x5Z29uIHBvaW50cz0iNTczLjc1LDAgMTgzLjQ4NSw1MTYuOTY4IDM3LjY1NywzODAuNzAyIDAsNDIyLjU0OCAxODkuNDUyLDYxMiA2MTIsMzguODQzIiBmaWxsPSIjMDA4OGNjIi8+CgkJCQkJCQkJPC9zdmc+");
}

fieldset.demoFset { padding: 10px 20px; }
fieldset .demoBtns { padding-top: 20px; text-align: center; }

#miscTabDemos fieldset { margin-top: 25px; }
#miscTabDemos fieldset:first-child { margin-top: 0px; }

.sectionBox {
    padding: 25px;
    margin: 0 0 10px;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
    color: #333333;
    background-color: #f9f9f9;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
}
.sectionCont {
    display: flex;
	flex-wrap: wrap;
}
.sectionCont > fieldset {
	flex: 1 1 auto;
    margin: 0 20px 20px 0;
    text-align: left;
    font-size: 13px;
}
.sectionCont label {
    -webkit-user-select: none;
    user-select: none;
    margin-right: 20px;
    vertical-align: middle;
}
.sectionCont input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 3px;
}

.tabCool {
    width: 100%;
    border-collapse: collapse;
}
.tabCool thead th {
    border: 1px solid white;
    background: #4488DD;
    color: white;
    padding: 10px;
    margin: 0;
}
.tabCool tbody td:first-child {
	background: #efefff;
}
.tabCool tbody td {
    border: 1px solid #d7d7d7;
	background: white;
    padding: 10px;
    margin: 0;
    text-align: left;
}
.tabCool tbody td:nth-child(1), .tabCool tbody td:nth-child(2) { white-space: nowrap; }

#tabNoStyle { text-align: left; }

.flatBtn {
    display: inline-block;
	font-family: "Open Sans", "Segoe UI", sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.25px;
    color: #ffffff !important;
    border: 0 !important;
	padding: 8px 20px !important;
	margin: 0 !important;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: none;
}
.flatBtn.small {
	padding: 5px 10px !important;
	font-size: 11px !important;
	box-shadow: none;
}
.flatBtn.shadow {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.4) !important;
}
.flatBtn-green,		.flatBtn-green:hover	{ background-color: #27AE60 !important; }
.flatBtn-blueMd,	.flatBtn-blueMd:hover	{ background-color: #199FD2 !important; }
.flatBtn-purpleDk,  .flatBtn-purpleDk:hover	{ background-color: #8F44AD !important; }
.flatBtn-gray,      .flatBtn-gray:hover		{ background-color: #BBBBBB !important; }
.flatBtn-grayLt,    .flatBtn-grayLT:hover	{ background-color: #DDDDDD !important; }
.flatBtn-nsTeal,	.flatBtn-nsTeal:hover	{ background-color: #1ABC9C !important; }
.flatBtn-nsBlue,	.flatBtn-nsBlue:hover	{ background-color: #3498DB !important; }
.flatBtn-nsPurple,	.flatBtn-nsPurple:hover	{ background-color: #9B59B6 !important; }
.flatBtn-nsDark,	.flatBtn-nsDark:hover	{ background-color: #34495E !important; }
.flatBtn-nsYellow,	.flatBtn-nsYellow:hover	{ background-color: #F1C40F !important; }
.flatBtn-nsOrange,	.flatBtn-nsOrange:hover	{ background-color: #E67E22 !important; }
.flatBtn-nsRed,		.flatBtn-nsRed:hover	{ background-color: #E74C3C !important; }
.flatBtn-nsBlueLt,	.flatBtn-nsBlueLt:hover	{ background-color: #1FA6D5 !important; }
.flatBtn-modGray,   .flatBtn-modGray:hover  { background: linear-gradient(#fcfcfc, #eee) !important; color:#999 !important; border:1px solid #d5d5d5 !important; }

.topDocLink {
	font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 14px;
}
.topDocLink svg {
	width: 42px;
	height: 42px;
	vertical-align: middle;
	margin-right: 5px;
}

.flex { display: flex; }
.flex > div { flex: 1 0 auto; }

div.table { display: table; box-sizing: border-box; width: 100%; font-size: 12px; }
div.table > div { display: table-cell; }

div.tableRows { display: table; box-sizing: border-box; font-size: 12px; }
div.tableRows > div { display: table-row; }
div.tableRows > div > div { display: table-cell; padding: 3px 5px; }

div.divTable { display: table; box-sizing: border-box; width: 100%; font-size: 12px; }
div.divTable > div { display: table-row; }
div.divTable > div > div { display: table-cell; padding: 3px 10px; }
div.divTable > div > div:first-child { vertical-align: top; white-space: nowrap; width: 10%; }
div.divTable input[type="number"], div.divTable input[type="text"] { width: 100%; }

#console { text-align:left; font-size:12px; font-family:'Roboto Mono','Courier New',Courier,monospace; color:limegreen; background:#060606; }

.prettyprint {
    margin: 2px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
}

#tabInheritStyle thead th { background: #a7a7a7; color: white; font-weight: normal; }
#tabInheritStyle tbody td { background: #eee; color: #666; }
#tabInheritStyle th, #tabInheritStyle td { border: 1px solid white; padding: 4px 8px; }