@charset "utf-8";
@import url('https://itproger.com/css/main-font.css');

* {
  padding: 0;
  margin: 0;
  outline: none;
}

body, html {
	width: 100%;
	height: 100%;
}

iframe {max-width: 100%}

body {
	background: #313131;
	font-family:Montserrat,sans-serif;
	font-weight:300;
	font-size:1rem;
	color: #d6d6d6;
	overflow-anchor:auto;
	scroll-behavior:smooth;
	font-size-adjust:100%;
	-webkit-font-size-adjust:100%;
	-ms-font-size-adjust:100%;
	-webkit-text-size-adjust:none;
}

a {
	color: #61dafb;
	text-decoration: none;
	transition: all.6s ease;
	-ms-transition: all.6s ease;
	-o-transition: all.6s ease;
	-moz-transition: all.6s ease;
	-webkit-transition: all.6s ease;
}

a:hover {
	color: #266e82;
	text-decoration: none;
}

p {line-height: 170%}

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
	-webkit-transition: all 0.7s ease-out;
}

header {
	background: #1c1c1e;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid #0a0a0b;
}

header > span {
	display: inline-block;
	margin-right: 50px;
	color: #fff;
}

header > span.logo img {
	width: 40px;
	position: relative;
	top: 2px;
}

header > span.logo a {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
}

header > span.logo a:hover {opacity: 0.6}

header > span.name, header > span.task-number {
	position: relative;
	top: -2px;
	font-weight: 500;
}

header > span.task-number .fa-long-arrow-alt-left {margin-right: 10px}
header > span.task-number .fa-long-arrow-alt-right {margin-left: 10px}

header > span.task-number .fa-long-arrow-alt-right,
header > span.task-number .fa-long-arrow-alt-left {
	color: #f36751;
	position: relative;
	top: 4px;
	font-size: 24px;
	transition: all.6s ease;
	-ms-transition: all.6s ease;
	-o-transition: all.6s ease;
	-moz-transition: all.6s ease;
	-webkit-transition: all.6s ease;
}

header > span.task-number a:hover .fa-long-arrow-alt-right {
	color: #efefef;
	transform: translateX(5px) scale(1.1);
}

header > span.task-number a:hover .fa-long-arrow-alt-left {
	color: #efefef;
	transform: translateX(-5px) scale(1.1);
}

header > span.task-number .number {
	border: 1px solid #e1e1e1;
	border-radius: 5px;
	padding: 5px 10px;
}

@media(max-width: 780px) {
	header > span.logo {
		display: block;
		margin-bottom: 15px;
	}
}

@media(max-width: 450px) {
	header>span {margin-right: 0}
	
	header > span.name {
		display: block;
		margin-bottom: 15px;
	}
	
	header > span.task-number {
		display: block;
		text-align: right;
	}
}

/* Основная часть */

.main {
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.main > #task {
	width: 73%;
}

.main > :not(#task) {width: 25%}


.main > div .block  {
	width: 97%;
    margin-bottom: 30px;
}

.block.aside ul {
	list-style: none;
	max-height: 400px;
    overflow-y: auto;
    border-top: 1px solid #151515;
    border-bottom: 1px solid #151515;
}

.main > div h2 {margin-bottom: 20px}

.block.aside ul a {
	display: block;
    padding: 20px 15px;
    background: transparent;
    color: #c6c6c6;
    border: 1px solid #151515;
    border-bottom: 0;
    font-weight: 300;
}

.block.aside ul a:first-child {border-top: 0;}

.block.aside ul a.active {font-weight: 500; background: #1c1c1e; pointer-events: none;}

.block.aside ul a:not(.active):hover {background: #1c1c1e}

.main ::-webkit-scrollbar {
    width: 5px;
}

.main ::-webkit-scrollbar-thumb {
    background: #7a7a7a; 
    -webkit-box-shadow: inset 0 0 6px #7a7a7a; 
}

#task .text {margin-top: 20px; color: #fff}

.block.aside a {
	display: block;
	margin-top: 8px;
	font-weight: 500;
}

.block.aside ul a {margin-top: 0}

.block.aside ul a .fa-check {color: #71c67e}

.analysis-result:not(:empty) {
	color: #fff;
    margin-top: 20px;
    background: #3d3d3d;
    padding: 10px 2.5%;
    width: 95%;
    border-radius: 5px;
}

.analysis-result pre {
    background-color: #2b2d31;
    padding: 10px 2%;
    width: 96%;
    border-radius: 5px;
    overflow-x: auto;
    font-family: Consolas, monospace;
    white-space: pre-wrap;
}
/* Editor */

#container {
	min-height: 600px;
	display: flex;
	margin-bottom: 20px;
}

#editor {min-height: 500px; border: 2px solid #1c1c1e}
#editor ::-webkit-scrollbar {width: 5px}
#editor ::-webkit-scrollbar-thumb {
    background: #E06149; 
    -webkit-box-shadow: inset 0 0 6px #E06149; 
}

#frame_panel {
	position: relative;
	background: #f2f2f2; 
	border: 2px solid #1c1c1e;
}

#iframe {width: 100%}

#url_link {
	background: #fbfbfb;
	width: 100%;
	float: left;
	border-bottom: 1px solid silver;
}

#url_link button {
	float: left;
	padding: 15px 20px;
	border: 0;
	font-size: 17px;
	font-weight: 700;
	background: #dadada;
	color: #666666;
	cursor: pointer;
}

#url_link .fullPage {float: right}

#url_link button:first-of-type i {transform: scale(1.5)}
#url_link button:hover {background: #d4d4d4}

#url_link div.url {
	float: left;
	margin-left: 15px;
	color: #7e7e7e;
	font-weight: 500;
	font-size: 17px;
	padding-top: 15px;
}

@media(max-width: 450px) {
	#url_link button {
		font-size: 14px;
		padding: 5px 12px;
	}
	
	#url_link div.url {
		font-size: 14px;
		padding-top: 5px;
	}
	#url_link {margin-bottom: 15px;}
}

#consoleLog:not(:empty) {
	position: absolute;
	bottom: 0;
	width: 90%;
	background: #dadada;
	border-top: 1px solid silver;
	padding: 10px 5%;
	font-weight: 500;
    color: #232323;
}

#consoleLog:not(:empty)::before {content: "Консоль: "}

.btn {
	cursor: pointer;
	font-weight: 500;
	overflow: hidden;
	display: inline-block;
	border: initial;
	vertical-align: middle;
	font-size: 14px;
}

.white, .red {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: .65em 1.3em;
	position: relative;
	transition: all 700ms ease;
	border: 1px solid transparent;
}

.white {
	color: #333;
	background-color: #fff;
	border: 1px solid #fff;
	z-index: 1;
	margin-right: 15px;
}

.white:disabled, #code_analysis:disabled {
	background: #333;
	color: #fff;
	cursor: no-drop;
	border: 1px solid #fff;
}

.red {
	color: #ffffff;
	background-color: #47a4bd;
	z-index: 1;
}

.white .btn__blobs, .red .btn__blobs {
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	bottom: -3px;
	right: -1px;
	z-index: -1;
}
.white .btn__blobs div, .red .btn__blobs div {
  width: 34%;
  height: 100%;
  border-radius: 100%;
  position: absolute;
  -webkit-transform: scale(1.4) translateY(125%) translateZ(0);
          transform: scale(1.4) translateY(125%) translateZ(0);
  transition: all 700ms ease;
}
.white .btn__blobs div {
  background-color: #333;
}
.red .btn__blobs div {
  background-color: #2a7286;
}
.white .btn__blobs div:nth-child(1),
.red .btn__blobs div:nth-child(1) {
  left: -5%;
}
.white .btn__blobs div:nth-child(2),
.red .btn__blobs div:nth-child(2) {
  left: 30%;
  transition-delay: 60ms;
}
.white .btn__blobs div:nth-child(3),
.red .btn__blobs div:nth-child(3) {
  left: 66%;
  transition-delay: 25ms;
}
.white:hover, .red:hover {color: #fff}
.white:hover .btn__blobs div,
.red:hover .btn__blobs div {
  -webkit-transform: scale(1.5) translateY(0) translateZ(0);
          transform: scale(1.5) translateY(0) translateZ(0);
}

textarea.hidden {
	display: none;
	visibility: hidden;
}

.message {
	margin-top: 20px;
	font-weight: 500;
	color: #4caf50;
}

.message.err {color: #ea6950; padding-right: 30px;}

#check, #otvet {margin-bottom: 10px;}

.settings {
	color: #eee;
	padding-bottom: 70px;
}

.settings .flex {
	margin: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media(max-width: 820px) {
	.settings .flex {flex-direction: column}
	.settings .flex > div {
		width: 100%;
		margin-top: 20px;
	}
	
	#editor, #frame_panel {border: 0}
}

.checkbox {
	-webkit-appearance: none;
	display: none;
}

.checkbox:not(checked) + label {
	cursor: pointer;
    position: relative;
    padding: 0 0 0 60px;
}

.checkbox:not(checked) + label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}

.checkbox:not(checked) + label:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    transition: all .2s;
}

.checkbox:checked + label:before {background: #f26651}
.checkbox:checked + label:after {left: 26px}

.settings .nice-select {
	margin: 0;
    border-width: 1px;
    background: #333;
}

.settings .nice-select ul {
	max-height: 400px;
    overflow: scroll;
}

.nice-select .list {top: unset; bottom: 120%; background: #333}

.nice-select .option {background: #333}
.settings .nice-select .option.disabled, .nice-select .list:hover .option:not(:hover) {background: #252525!important}
.nice-select .option.focus, .nice-select .option.selected.focus, .nice-select .option:hover {background: #616161}

/* Стили для разных редакторов */
#frame_panel.javascript, #iframe.javascript, #frame_panel.c-lang, #iframe.c-lang, #frame_panel.python, #iframe.python, #frame_panel.kotlin, #iframe.kotlin, #frame_panel.rust, #iframe.rust, #frame_panel.node-js, #iframe.node-js, #iframe.cpp, #frame_panel.cpp, #iframe.php, #frame_panel.php, #iframe.java, #frame_panel.java, #iframe.csharp, #frame_panel.csharp {background: #333}

#check.waiting i, #check_mobile.waiting i, #code_analysis i {
	margin-left: 5px;
	transition: all.5s ease;
	-ms-transition: all.5s ease;
	-o-transition: all.5s ease;
	-moz-transition: all.5s ease;
	-webkit-transition: all.5s ease;
}

#check.waiting i.fa-spinner, #check_mobile.waiting i.fa-spinner, #code_analysis i.fa-spinner {
	animation: loadingSpinner 1s linear infinite;
}

@keyframes loadingSpinner {
	from { transform: rotate(0deg) }
	from { transform: rotate(-360deg) }
}	

/* Адаптивность */

@media(min-width: 1801px) {
  .container {
    	width: 70%;
	    padding-left: 15%;
	    padding-right: 15%;
  }
}

@media(max-width: 1800px) and (min-width: 1201px) {
	.container {
	    width: 90%;
	    padding-left: 5%;
	    padding-right: 5%;
	}
}

@media(max-width: 1200px) {
	.container {
	    width: 94%;
	    padding-left: 3%;
	    padding-right: 3%;
	}
}

@media(min-width: 1051px) {
	.mobile_buttons {display: none}
	#editor, #frame_panel {width: 50%}
}

@media(max-width: 1050px) {
	#container {flex-direction: column}
	#editor, #frame_panel {width: 100%}
	#frame_panel {min-height: 400px}
	.main {flex-direction: column}
	.main > #task {width: 100%}
	.main > :not(#task) {max-width: 100%; width: 400px; margin: 0 auto}
	.main > div .block.aside { width: 85%; padding: 20px 7.5%;}
	#check_mobile, #otvet_mobile {margin-bottom: 5px}
}