/* Customer CSS   */
#header .logo a .logo-img {
    padding: 0.25em 0 !important;
    vertical-align: middle;
    height: 3em;
}

/* Sidebar */
#sidebar {
	margin-right: 1em;
	min-width: 14%;
	width: 15%;
  }

#sidebar > * {
    margin: 1em 0 0 0;
    padding: 1em 0 0 0;
}


#sidebar > :first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    text-align: center;
}


#intro header h2 {
    font-size: 2em;
    font-weight: 900;
}

.post > header .title {
    padding: 1em 2em 1em 2em;
}  

.post > header .meta {
    padding: 1.5em 2em 1em 2em;
}


.search-wrapper .search-input {
	width: 60%;
	display: inline-block;
}

.search-submit {
	display: inline-block;
	border-radius: 4px;
	background: #eee;
	border: 1px solid #ccc;
	vertical-align: top;
}

.search-submit img {
	width: 20px;
	vertical-align: middle;
}

.search-image {
	float: left;
}

.search-item {
	margin-left: 130px;
	margin-bottom: 50px;
}

.search-item p {
	margin: 0;
}

.search-title h3 {
	margin: 0;
}

.search-details {
	font-size: 13px;
}

.search-row:last-child hr {
	display: none;
}

/*  ===========================================================================  
    settings page
==============================================================================  */

settings {
    padding: 2em 2em 2em 2em;
    display: flex;
    width: 100%;
    flex-direction: column;
}
settings .rigth{
	margin-right: 25px;
    display: flex;
    justify-content: right;
    flex-direction: row;
    flex-wrap: nowrap;
}

.set-protocol div{
	min-width: 125px;
 }

 .set-protocol input{
    margin-right: 5px;
	opacity: revert;
	appearance: revert;
 }
 .set-protocol label{
    margin-right: 25px;
 }





.set-proto-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.set-proto-block div{
	min-width: 125px;
 }

 .set-proto-block input{
    margin-right: 5px;
	opacity: revert;
	appearance: revert;
 }
 .set-proto-block label{
    margin-right: 25px;
 }

 .set-ports-block {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.set-ports-block div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	margin: 0 0 0.1em 0;
}

.set-ports-block label {
	align-content: center;
	margin: 0;
}

.set-ports-block select {
    height: 2em;
    width: 125px;
}
.set-ports-block input:invalid + span::after {
    color: red;
    content: "✖";
  padding: 5px;
}

.set-ports-block input:valid + span::after {
    color: green;
  content: "✓";
  padding: 5px;
}
/*  ===========================================================================  
    post
==============================================================================  */


.post > header {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: solid 1px rgba(160, 160, 160, 0.3);
    left: -3em;
    margin: -4em 0 1em 0;
    position: relative;
    width: calc(100% + 6em);
}

/*  ===========================================================================  
   image
==============================================================================  */

.image.featured {
    display: block;
    margin: 0 0 1em 0;
    width: 100%;
}
/*  ===========================================================================  
   Wrapper
==============================================================================  */

#wrapper {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-moz-transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	margin: 0 auto;
	max-width: 100%;
	opacity: 1;
	padding: 1em;
	width: 100%;
  }
  body.is-menu-visible #wrapper {
	opacity: 0.15;
  }
  @media screen and (max-width: 1680px) {
	#wrapper {
	  padding: 1em;
	}
  }
  @media screen and (max-width: 1280px) {
	#wrapper {
	  display: block;
	}
  }
  @media screen and (max-width: 736px) {
	#wrapper {
	  padding: 1em;
	}
  }
  body.single #wrapper {
	display: block;
  }


select {
    height: 2em;
    padding-right: 0.75em;
}


/*  ===========================================================================  
    mini-post  
==============================================================================  */
.mini-post {
    margin: 0 0 1em 0;
}

.mini-post header {
    padding: 0.25em 0.25em 0.25em 0.25em;
    min-height: 2em;
}


/*  ===========================================================================  
    Intro  
==============================================================================  */
#intro .logo {
	border-bottom: 0;
	display: inline-block;
	margin: 0 0 0 0;
	overflow: hidden;
	position: relative;
	width: 4em;
  }
  #intro .logo:before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100' preserveAspectRatio='none' zoomAndPan='disable'%3E%3Cpolygon points='0,0 100,0 100,25 50,0 0,25' style='fill:%23f4f4f4' /%3E%3Cpolygon points='0,100 100,100 100,75 50,100 0,75'  style='fill:%23f4f4f4' /%3E%3C/svg%3E");
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
  }
  #intro .logo img {
	display: block;
	margin-left: -0.25em;
	width: 4.5em;
  }
  #intro header h2 {
	font-size: 2em;
	font-weight: 900;
	margin: 0 0 -0.5em 0;
  }
  #intro header p {
	font-size: 0.8em;
	margin: 0 0 0em 0;
  }
  @media screen and (max-width: 1280px) {
	#intro {
	  margin: 0 0 0 0;
	  text-align: center;
	}
	#intro header h2 {
	  font-size: 2em;
	  font-weight: 900;
	}
	#intro header p {
	  font-size: 0.7em;
	}
  }
  @media screen and (max-width: 736px) {
	#intro {
	  margin: 0 0 1.5em 0;
	  padding: 1.25em 0;
	}
	#intro > :last-child {
	  margin-bottom: 0;
	}
	#intro .logo {
	  margin: 0 0 0.5em 0;
	}
	#intro header h2 {
	  font-size: 1.25em;
	}
	#intro header > :last-child {
	  margin-bottom: 0;
	}
	#intro header .logo {
	  margin: 0 0 0.5em 0;
	}
	#intro header header h2 {
	  font-size: 1.25em;
	}
	#intro header header > :last-child {
	  margin-bottom: 0;
	}
  }
/*  ===========================================================================  
    AI leader
==============================================================================  */
.__ailoader {
	text-align:center;
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
  }
  

  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }

/*  ===========================================================================  
    pcap  
==============================================================================  */



@font-face {
	font-family: "controls";
	src: url("../fonts/controls.eot");
	src: url("../fonts/controls.eot#iefix") format("embedded-opentype"), url("../fonts/controls.ttf") format("truetype"), url("../fonts/controls.woff") format("woff"), url("../fonts/controls.svg#controls") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

[class^=icon-],
[class*=" icon-"] {
	font-family: "controls" !important;
	/*speak: none;*/
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	letter-spacing: 0;
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	font-feature-settings: "liga";
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.icon-xu:before {
	content: ""
}

.icon-video-camera:before {
	content: ""
}

.icon-folder:before {
	content: ""
}

.icon-cross:before {
	content: ""
}

.icon-play:before {
	content: ""
}

.icon-pause:before {
	content: ""
}

.icon-first:before {
	content: ""
}

.icon-last:before {
	content: ""
}

.icon-previous:before {
	content: ""
}

.icon-next:before {
	content: ""
}

.icon-arrow-down:before {
	content: ""
}

.icon-share:before {
	content: ""
}

.icon-embed:before {
	content: ""
}

.icon-interpreter:before {
	content: ""
}

.icon-question:before {
	content: ""
}

.icon-cog:before {
	content: ""
}

.icon-opensource:before {
	content: ""
}

.CodeMirror {
	font-family: monospace;
	height: 300px;
	color: black;
	direction: ltr
}

.CodeMirror-lines {
	padding: 4px 0
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
	padding: 0 4px
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
	background-color: white
}

.CodeMirror-gutters {
	border-right: 1px solid #ddd;
	background-color: #f7f7f7;
	white-space: nowrap
}

.CodeMirror-linenumber {
	padding: 0 3px 0 5px;
	min-width: 20px;
	text-align: right;
	color: #999;
	white-space: nowrap
}

.CodeMirror-guttermarker {
	color: black
}

.CodeMirror-guttermarker-subtle {
	color: #999
}

.CodeMirror-cursor {
	border-left: 1px solid black;
	border-right: none;
	width: 0
}

.CodeMirror div.CodeMirror-secondarycursor {
	border-left: 1px solid silver
}

.cm-fat-cursor .CodeMirror-cursor {
	width: auto;
	border: 0 !important;
	background: #7e7
}

.cm-fat-cursor div.CodeMirror-cursors {
	z-index: 1
}

.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line>span::selection,
.cm-fat-cursor .CodeMirror-line>span>span::selection {
	background: transparent
}

.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line>span::-moz-selection,
.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
	background: transparent
}

.cm-fat-cursor {
	caret-color: transparent
}

@-moz-keyframes blink {
	50% {
		background-color: transparent
	}
}

@-webkit-keyframes blink {
	50% {
		background-color: transparent
	}
}

@keyframes blink {
	50% {
		background-color: transparent
	}
}

.cm-tab {
	display: inline-block;
	text-decoration: inherit
}

.CodeMirror-rulers {
	position: absolute;
	left: 0;
	right: 0;
	top: -50px;
	bottom: 0;
	overflow: hidden
}

.CodeMirror-ruler {
	border-left: 1px solid #ccc;
	top: 0;
	bottom: 0;
	position: absolute
}

.cm-s-default .cm-header {
	color: blue
}

.cm-s-default .cm-quote {
	color: #090
}

.cm-negative {
	color: #d44
}

.cm-positive {
	color: #292
}

.cm-header,
.cm-strong {
	font-weight: bold
}

.cm-em {
	font-style: italic
}

.cm-link {
	text-decoration: underline
}

.cm-strikethrough {
	text-decoration: line-through
}

.cm-s-default .cm-keyword {
	color: #708
}

.cm-s-default .cm-atom {
	color: #219
}

.cm-s-default .cm-number {
	color: #164
}

.cm-s-default .cm-def {
	color: blue
}

.cm-s-default .cm-variable-2 {
	color: #05a
}

.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
	color: #085
}

.cm-s-default .cm-comment {
	color: #a50
}

.cm-s-default .cm-string {
	color: #a11
}

.cm-s-default .cm-string-2 {
	color: #f50
}

.cm-s-default .cm-meta {
	color: #555
}

.cm-s-default .cm-qualifier {
	color: #555
}

.cm-s-default .cm-builtin {
	color: #30a
}

.cm-s-default .cm-bracket {
	color: #997
}

.cm-s-default .cm-tag {
	color: #170
}

.cm-s-default .cm-attribute {
	color: #00c
}

.cm-s-default .cm-hr {
	color: #999
}

.cm-s-default .cm-link {
	color: #00c
}

.cm-s-default .cm-error {
	color: red
}

.cm-invalidchar {
	color: red
}

.CodeMirror-composing {
	border-bottom: 2px solid
}

div.CodeMirror span.CodeMirror-matchingbracket {
	color: #0b0
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
	color: #a22
}

.CodeMirror-matchingtag {
	background: rgba(255, 150, 0, 0.3)
}

.CodeMirror-activeline-background {
	background: #e8f2ff
}

.CodeMirror {
	position: relative;
	overflow: hidden;
	background: white
}

.CodeMirror-scroll {
	overflow: scroll !important;
	margin-bottom: -50px;
	margin-right: -50px;
	padding-bottom: 50px;
	height: 100%;
	outline: none;
	position: relative;
	z-index: 0
}

.CodeMirror-sizer {
	position: relative;
	border-right: 50px solid transparent
}

.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
	position: absolute;
	z-index: 6;
	display: none;
	outline: none
}

.CodeMirror-vscrollbar {
	right: 0;
	top: 0;
	overflow-x: hidden;
	overflow-y: scroll
}

.CodeMirror-hscrollbar {
	bottom: 0;
	left: 0;
	overflow-y: hidden;
	overflow-x: scroll
}

.CodeMirror-scrollbar-filler {
	right: 0;
	bottom: 0
}

.CodeMirror-gutter-filler {
	left: 0;
	bottom: 0
}

.CodeMirror-gutters {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 100%;
	z-index: 3
}

.CodeMirror-gutter {
	white-space: normal;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: -50px
}

.CodeMirror-gutter-wrapper {
	position: absolute;
	z-index: 4;
	background: none !important;
	border: none !important
}

.CodeMirror-gutter-background {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 4
}

.CodeMirror-gutter-elt {
	position: absolute;
	cursor: default;
	z-index: 4
}

.CodeMirror-gutter-wrapper ::selection {
	background-color: transparent
}

.CodeMirror-gutter-wrapper ::-moz-selection {
	background-color: transparent
}

.CodeMirror-lines {
	cursor: text;
	min-height: 1px
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	border-width: 0;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	white-space: pre;
	word-wrap: normal;
	line-height: inherit;
	color: inherit;
	z-index: 2;
	position: relative;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-variant-ligatures: contextual;
	font-variant-ligatures: contextual
}

.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: normal
}

.CodeMirror-linebackground {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0
}

.CodeMirror-linewidget {
	position: relative;
	z-index: 2;
	padding: .1px
}

.CodeMirror-rtl pre {
	direction: rtl
}

.CodeMirror-code {
	outline: none
}

.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
	-moz-box-sizing: content-box;
	box-sizing: content-box
}

.CodeMirror-measure {
	position: absolute;
	width: 100%;
	height: 0;
	overflow: hidden;
	visibility: hidden
}

.CodeMirror-cursor {
	position: absolute;
	pointer-events: none
}

.CodeMirror-measure pre {
	position: static
}

div.CodeMirror-cursors {
	visibility: hidden;
	position: relative;
	z-index: 3
}

div.CodeMirror-dragcursors {
	visibility: visible
}

.CodeMirror-focused div.CodeMirror-cursors {
	visibility: visible
}

.CodeMirror-selected {
	background: #d9d9d9
}

.CodeMirror-focused .CodeMirror-selected {
	background: #d7d4f0
}

.CodeMirror-crosshair {
	cursor: crosshair
}

.CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
	background: #d7d4f0
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line>span::-moz-selection,
.CodeMirror-line>span>span::-moz-selection {
	background: #d7d4f0
}

.cm-searching {
	background-color: #ffa;
	background-color: rgba(255, 255, 0, 0.4)
}

.cm-force-border {
	padding-right: .1px
}

@media print {
	.CodeMirror div.CodeMirror-cursors {
		visibility: hidden
	}
}

.cm-tab-wrap-hack:after {
	content: ""
}

span.CodeMirror-selectedtext {
	background: none
}

.CodeMirror-dialog {
	position: absolute;
	left: 0;
	right: 0;
	background: inherit;
	z-index: 15;
	padding: .1em .8em;
	overflow: hidden;
	color: inherit
}

.CodeMirror-dialog-top {
	border-bottom: 1px solid #eee;
	top: 0
}

.CodeMirror-dialog-bottom {
	border-top: 1px solid #eee;
	bottom: 0
}

.CodeMirror-dialog input {
	border: none;
	outline: none;
	background: transparent;
	width: 20em;
	color: inherit;
	font-family: monospace
}

.CodeMirror-dialog button {
	font-size: 70%
}

.cm-s-blackboard.CodeMirror {
	background: #0c1021;
	color: #f8f8f8
}

.cm-s-blackboard div.CodeMirror-selected {
	background: #253b76
}

.cm-s-blackboard .CodeMirror-line::selection,
.cm-s-blackboard .CodeMirror-line>span::selection,
.cm-s-blackboard .CodeMirror-line>span>span::selection {
	background: rgba(37, 59, 118, 0.99)
}

.cm-s-blackboard .CodeMirror-line::-moz-selection,
.cm-s-blackboard .CodeMirror-line>span::-moz-selection,
.cm-s-blackboard .CodeMirror-line>span>span::-moz-selection {
	background: rgba(37, 59, 118, 0.99)
}

.cm-s-blackboard .CodeMirror-gutters {
	background: #0c1021;
	border-right: 0
}

.cm-s-blackboard .CodeMirror-guttermarker {
	color: #fbde2d
}

.cm-s-blackboard .CodeMirror-guttermarker-subtle {
	color: #888
}

.cm-s-blackboard .CodeMirror-linenumber {
	color: #888
}

.cm-s-blackboard .CodeMirror-cursor {
	border-left: 1px solid #a7a7a7
}

.cm-s-blackboard .cm-keyword {
	color: #fbde2d
}

.cm-s-blackboard .cm-atom {
	color: #d8fa3c
}

.cm-s-blackboard .cm-number {
	color: #d8fa3c
}

.cm-s-blackboard .cm-def {
	color: #8da6ce
}

.cm-s-blackboard .cm-variable {
	color: #ff6400
}

.cm-s-blackboard .cm-operator {
	color: #fbde2d
}

.cm-s-blackboard .cm-comment {
	color: #aeaeae
}

.cm-s-blackboard .cm-string {
	color: #61ce3c
}

.cm-s-blackboard .cm-string-2 {
	color: #61ce3c
}

.cm-s-blackboard .cm-meta {
	color: #d8fa3c
}

.cm-s-blackboard .cm-builtin {
	color: #8da6ce
}

.cm-s-blackboard .cm-tag {
	color: #8da6ce
}

.cm-s-blackboard .cm-attribute {
	color: #8da6ce
}

.cm-s-blackboard .cm-header {
	color: #ff6400
}

.cm-s-blackboard .cm-hr {
	color: #aeaeae
}

.cm-s-blackboard .cm-link {
	color: #8da6ce
}

.cm-s-blackboard .cm-error {
	background: #9d1e15;
	color: #f8f8f8
}

.cm-s-blackboard .CodeMirror-activeline-background {
	background: #3c3636
}

.cm-s-blackboard .CodeMirror-matchingbracket {
	outline: 1px solid grey;
	color: white !important
}

body {
	color: #000;
	font-family: sans-serif;
	font-weight: normal;
	font-size: 16px;
	margin: 0
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: lighter
}

articlepcap {
	padding: .5em .5em 0 .5em;
	width: 100%;
}

button,
a.button {
	color: rgba(0, 0, 0, .84);
	background-color: #eee;
	cursor: pointer;
	border-radius: 2px;
	padding: .2em .5em .4em .5em;
	border: none;
	font-size: 1em;
	text-decoration: none;
	text-align: center;
	min-width: 3em;
	line-height: 1em;
}

button:hover,
a.button:hover {
	box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
	transition: box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	-webkit-transition: box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1) 0s
}

button:active,
a.button:active {
	background-color: #ddd;
	transition: opacity .15s ease-in 0s, transform .5s cubic-bezier(0.4, 0, 0.2, 1) .1s;
	-webkit-transition: opacity .15s ease-in 0s, -webkit-transform .5s cubic-bezier(0.4, 0, 0.2, 1) .1s;
	opacity: 1
}

a.button,
a.button:hover {
	text-decoration: none
}

.btn-primary {
	background-color: #3974d6;
	color: #fff
}

.btn-primary:hover {
	color: #fff
}

.btn-primary:active {
	background-color: rgba(57, 116, 214, .84);
	color: #fff
}

.browsehappy {
	margin: .2em 0;
	background: #ff0;
	color: #000;
	padding: .2em 0
}

@-webkit-keyframes fadeout {
	from {
		opacity: 1
	}

	to {
		opacity: .2
	}
}

@keyframes fadeout {
	from {
		opacity: 1
	}

	to {
		opacity: .2
	}
}

html {
	font-size: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

headerpcap {
	padding: .5em .5em .5em .7em;
	border-bottom: solid 1px rgba(0, 0, 0, .23);
	margin-bottom: .4em;
	background-image: url("../images/bg.png");
	background-repeat: no-repeat;
	background-position: 25%;
	box-shadow: 0 .1em .4em -0.2em rgba(0, 0, 0, .23);
	color: #666;
	min-height: 3em
}

.headerpcap-title {
	float: left
}

headerpcap nav {
	float: right
}

headerpcap .debug {
	font-size: small;
	float: right
}

headerpcap h1 {
	font-size: 1.9em;
	margin-bottom: 0;
	margin-top: 0
}

headerpcap em {
	color: #000
}

headerpcap a {
	text-decoration: none;
	color: inherit
}

nav a.underline-on-hover:hover {
	text-decoration: underline
}

nav a.underline-on-hover:active {
	text-decoration: underline
}

nav span.underline-on-hover:hover {
	cursor: pointer;
	text-decoration: underline
}

nav span.underline-on-hover:active {
	text-decoration: underline
}

nav .icon {
	display: inline-block;
	width: 3.6em;
	height: 2.2em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding: 0 .1em 0 .1em;
	text-align: center;
	font-size: .9em;
	cursor: pointer
}

nav .nav-icon {
	font-size: 2.2em
}

nav .active {
	text-decoration: underline
}

nav div.active:hover {
	cursor: default;
	color: inherit
}

@media screen and (max-width: 639px) {
	headerpcap em {
		display: block;
		font-size: .5em
	}
}

@media screen and (max-width: 480px) {
	headerpcap {
		background-image: none
	}

	headerpcap nav {
		float: none
	}
}

.code {
	font-family: monospace;
	font-size: .7em;
	background-color: #0f192b;
	color: #fff;
	color: #cbe8ff
}

#__embedsnippet {
	border: solid 0;
	white-space: pre;
	text-overflow: ellipsis;
	overflow-x: scroll
}

html {
	overflow-x: hidden
}

articlepcap h2 {
	font-size: 1.16979375em;
	margin: 0;
	margin-bottom: 1em;
	font-weight: lighter;
	font-style: italic;
	display: inline-block;
	color: #666
}

.error {
	border: 1px solid #ebccd1;
	border-radius: 2px;
	margin: 0;
	font-size: .9em;
	max-width: 32em;
	cursor: pointer
}

.error .headerpcap {
	padding: .5em .5em .5em 1em;
	background-color: #f2dede;
	color: #a94442;
	border-bottom: 1px solid #ebccd1
}

.error .content {
	padding: .5em .5em .5em 1em
}

#__error_context:hover {
	text-decoration: underline;
	cursor: pointer
}

fieldset {
	display: inline;
	border: solid 1px rgba(0, 0, 0, .23);
	border-top: none;
	border-bottom: none;
	padding: .1em .4em .3em .4em
}

legend {
	font-size: .7em
}

.xunotify {
	transition: all .28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
	font-size: 1em;
	position: absolute;
	margin: -0.6em 0 0 -0.8em;
	color: #555
}

.CodeMirror {
	font-family: monospace;
	font-size: .7em
}

articlepcap {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row
}

#__input_area {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column
}

#__input_top_area {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between
}

#__input_controls_area { 
	margin: .1em 0 1.7em 0
}

#__output_area {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	padding: 0 .3em 0 .3em;
	overflow: hidden;
	width: 100%
}

#__output_controls_area {
	margin: 0 0 1.1em 2em
}

#__ai-analyze {
	 color: #c71d94 !important;  /*  #__output_controls_area*/
  }


#__output_content_area {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	overflow: auto;
	padding-right: 22px
}

#__placeholder {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	padding: 0 3em 0 3em;
	text-align: center;
	align-items: center;
	-webkit-align-items: center;
	transition: height .1s ease-out
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-width: 640px)and (max-width: 1024px) {
	#__input_area {
		width: 448px;
		min-width: 448px;
		transition: width .3s ease-out
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-width: 1025px) {
	#__input_area {
		width: 512px;
		min-width: 512px;
		transition: width .3s ease-out
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 0px)and (max-height: 400px) {
	.CodeMirror {
		height: 176px
	}

	#__placeholder {
		height: 144px
	}

	#__output_content_area {
		height: 208px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 401px)and (max-height: 450px) {
	.CodeMirror {
		height: 225px
	}

	#__placeholder {
		height: 193px
	}

	#__output_content_area {
		height: 257px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 451px)and (max-height: 500px) {
	.CodeMirror {
		height: 275px
	}

	#__placeholder {
		height: 243px
	}

	#__output_content_area {
		height: 307px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 501px)and (max-height: 550px) {
	.CodeMirror {
		height: 325px
	}

	#__placeholder {
		height: 293px
	}

	#__output_content_area {
		height: 357px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 551px)and (max-height: 600px) {
	.CodeMirror {
		height: 375px
	}

	#__placeholder {
		height: 343px
	}

	#__output_content_area {
		height: 407px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 601px)and (max-height: 650px) {
	.CodeMirror {
		height: 425px
	}

	#__placeholder {
		height: 393px
	}

	#__output_content_area {
		height: 457px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 651px)and (max-height: 700px) {
	.CodeMirror {
		height: 475px
	}

	#__placeholder {
		height: 443px
	}

	#__output_content_area {
		height: 507px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 701px)and (max-height: 750px) {
	.CodeMirror {
		height: 525px
	}

	#__placeholder {
		height: 493px
	}

	#__output_content_area {
		height: 557px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 751px)and (max-height: 800px) {
	.CodeMirror {
		height: 575px
	}

	#__placeholder {
		height: 543px
	}

	#__output_content_area {
		height: 607px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 801px)and (max-height: 850px) {
	.CodeMirror {
		height: 625px
	}

	#__placeholder {
		height: 593px
	}

	#__output_content_area {
		height: 657px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 851px)and (max-height: 900px) {
	.CodeMirror {
		height: 675px
	}

	#__placeholder {
		height: 643px
	}

	#__output_content_area {
		height: 707px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 901px)and (max-height: 950px) {
	.CodeMirror {
		height: 725px
	}

	#__placeholder {
		height: 693px
	}

	#__output_content_area {
		height: 757px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 951px)and (max-height: 1000px) {
	.CodeMirror {
		height: 775px
	}

	#__placeholder {
		height: 743px
	}

	#__output_content_area {
		height: 807px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 1001px)and (max-height: 1050px) {
	.CodeMirror {
		height: 825px
	}

	#__placeholder {
		height: 793px
	}

	#__output_content_area {
		height: 857px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 1051px)and (max-height: 1100px) {
	.CodeMirror {
		height: 875px
	}

	#__placeholder {
		height: 843px
	}

	#__output_content_area {
		height: 907px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 1101px)and (max-height: 1150px) {
	.CodeMirror {
		height: 925px
	}

	#__placeholder {
		height: 893px
	}

	#__output_content_area {
		height: 957px
	}
}

@media screen and (orientation: landscape)and (min-width: 769px)and (min-height: 1151px) {
	.CodeMirror {
		height: 975px;
		transition: height .1s ease-out
	}

	#__placeholder {
		height: 943px;
		transition: height .1s ease-out
	}
}

@media screen and (orientation: portrait),
(max-width: 768px) {
	articlepcap {
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column
	}

	#__input_area {
		width: 100%;
		transition: width .3s ease-out
	}

	#__output_area {
		width: 100%;
		flex-direction: column;
		-webkit-flex-direction: column
	}

	#__output_controls_area {
		margin: 0 0 .7em 0;
		order: 1;
		-webkit-order: 1
	}

	.CodeMirror {
		min-height: 269px;
		height: 269px;
		transition: height .1s ease-out
	}
}

@media screen and (max-width: 479px) {
	#__input_controls_area {
		font-size: .8em
	}
}

.sliding-panel {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	background-color: #fff;
	width: 0;
	height: 640px;
	position: fixed;
	z-index: 314;
	top: 80px;
	right: 0;
	box-shadow: -6px 0px 6px rgba(0, 0, 0, .23);
	transition: width .7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	line-height: 1.4
}

.sliding-panel:target {
	width: 340px
}

.sliding-panel .headerpcap {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between
}

.sliding-panel>span.sliding-panel-content {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	overflow: auto;
	margin: 12px
}

.sliding-panel>a {
	border-bottom: solid 1px rgba(0, 0, 0, .23)
}

.sliding-panel .sliding-panel-content-section {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	margin-bottom: 1em
}

.sliding-panel a:hover {
	cursor: pointer;
	text-decoration: underline
}

.sliding-panel>a:last-child {
	margin-bottom: 2em
}

.sliding-panel .close-button {
	box-shadow: none;
	position: relative;
	top: 0;
	right: 0;
	padding: 1em;
	color: inherit;
	background-color: rgba(0, 0, 0, 0)
}

.sliding-panel .about-box-icon {
	cursor: default;
	color: #fff;
	text-shadow: #000 0px 0px 6px;
	font-size: 3.5em
}

.sliding-panel .row-picture {
	width: 60px;
	min-width: 60px;
	margin: 0 .5em 0 .5em
}

.sliding-panel .row-picture-caption {
	color: #666;
	text-align: center
}

.sliding-panel .copy {
	color: #666;
	font-size: 14px;
	margin-left: 1em
}

.sliding-panel .row-text {
	margin: 0 1em 1em 1em
}

.sliding-panel h2 {
	margin: .5em 0 0 .5em
}

.sliding-panel h3 {
	margin: 0
}

.sliding-panel p {
	margin-top: .5em;
	margin-bottom: .5em
}

#__render_options_panel fieldset {
	border: none
}

#__render_options_panel legend {
	font-size: inherit
}

#__render_options_panel .disabled-children label,
.disabled {
	color: #666
}

#__render_options_panel .content {
	margin: 20px 10px 10px 10px
}

#__render_options_panel h3 {
	margin-bottom: 15px
}

#__render_options_panel .content div {
	margin: 10px 0 10px 0
}


/* New   */

#__ai_screen {
	position: absolute;
	top: 60px;
	left: 0;
	min-width: 100%;
	height: 0%;
	z-index: 400;
	background: #fff;
	opacity: .98;
	box-shadow: 0px 3px 12px #000;
	transition: height 1.2s ease-in-out
}

#__ai_screen button {
	box-shadow: none;
	top: 75px;
}

#__btn_ai_close {
    position: fixed;
    top: 0;
    right: 0;
    padding: 1em;
    color: #000;
    background-color: rgba(0, 0, 0, 0);
}

#__aiwrapper {
    width: 90%;
    text-align: left;
    margin: 2em;
}

/* Old   */

#__animscreen {
	position: absolute;
	top: 60px;
	left: 0;
	min-width: 100%;
	height: 0%;
	z-index: 400;
	background: #fff;
	opacity: .98;
	box-shadow: 0px 3px 12px #000;
	transition: height 1.2s ease-in-out
}

#__animcontrolswrapper {
	position: fixed;
	text-align: center;
	width: 99%;
	bottom: 1.5em;
	z-index: 481
}

#__animcontrolswrapper nav {
	font-size: 2em;
	padding: .1 .25em .25em .25em;
	background-color: #000;
	opacity: .6;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, .6);
	display: inline-block
}

#__animscreen button {
	box-shadow: none;
	top: 75px;
}

#__animscreen button:active {
	-webkit-transform: scale(0.9);
	transform: scale(0.9)
}

#__animcontrolswrapper button {
	color: #fff;
	background-color: inherit
}

#__animcontrolswrapper nav:hover {
	opacity: .8
}

#__anim_progress_percentage_wrapper {
	cursor: pointer;
	z-index: 482;
	background-color: rgba(0, 0, 0, 0);
	width: 100%;
	bottom: 0;
	left: 0;
	height: .2em;
	width: 100%;
	border: 1px solid #fff
}

#__anim_progress_percentage {
	background-color: #fff;
	position: relative;
	bottom: 0;
	left: 0;
	height: .2em;
	width: 0
}

#__btn_anim_close {
	position: fixed;
	top: 0;
	right: 0;
	padding: 1em;
	color: #000;
	background-color: rgba(0, 0, 0, 0)
}

#__animsvgwrapper {
	width: 100%;
	text-align: center;
	margin-top: 6em;
}

#__animsvg {
	opacity: 1
}

.showontablet {
	display: none
}

.showonmobile {
	display: none
}

@media screen and (max-width: 1164px) {
	.hideontablet {
		display: none
	}

	.showontablet {
		display: block
	}
}

@media screen and (max-width: 639px) {
	.hideonmobile {
		display: none
	}

	a.hideonmobile {
		display: none
	}

	span.hideonmobile {
		display: none
	}

	div.hideonmobile {
		display: none
	}

	.showonmobile {
		display: block
	}
}

@media screen and (max-width: 479px) {
	.hideonmobile-portrait {
		display: none
	}
}

@media screen and (max-width: 360px) {
	a.hideonmicro {
		display: none
	}

	span.hideonmicro {
		display: none
	}
}

@media print {
	.hideonprint {
		display: none
	}

	body {
		font-size: 10pt
	}
}

.span--toaster {
	font-size: .9em;
	position: fixed;
	width: 18em;
	top: 0;
	left: calc(50% - 10em);
	padding: .5em 1em 1.5em 1em;
	background-color: #fff;
	color: inherit;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, .23);
	border-top: 0
}

.span--toaster button {
	position: absolute;
	display: block;
	right: 3px;
	bottom: 3px
}


/*    */
#header .dropdown ul li:hover > ul {
	min-width: 20em;
  }


/*    */




.adverts {
/*	float: left;
    position: relative;
    overflow: hidden;*/
	 margin: auto;
 text-align: center;
}

.adverts .a468x60{
 margin: auto;
 text-align: center;
 height: 61px;
 width: 469px;
}

.adverts .a728x90{
 margin: auto;
 text-align: center;
 height: 91px;
 width: 729px;
}


.adverts .a600x160{
	margin: 5px;
	text-align: center;
	height: 600px;
	width: 160px;
   }

      
   .adverts .a300x160{
	margin: auto;
	text-align: center;
	height: 300px;
	width: 160px;
   }