/* =================================
Theme Name:Практикант
Author:Чернієвський Юрій
Author URI:chyw.pp.ua
Description: CSS файл до онлайн редактора "Практикант" 
Version: 1.1.9 | 05042020
License: відсутня (надається як публічне надбання)
Purpose: Забезпечити стилізацію онлайн редактора "Практикант" версію 1.1.9
File name:style.css
File type: CSS
Remark: 
 */
/*============================Нормалізація================================*/
/*Кожен браузер встановлює свої значення стилів за замовчуванням для різних HTML-елементів. 
За допомогою нормалізації ми можемо нівелювати цю різницю для забезпечення кросбраузерності стилів.*/
@media all {}

* {
/*Селектор вибору всіх елементів*/
border: 0;
font: inherit;
vertical-align: baseline;
line-height: 1.3;
/* Відкориговуємо висоту лінії у всіх браузерах.*/
}
/* Документ нормалізація */
/* Документ */
/* Теги */
/* Структура */
/* Спеціальні класи */
html{width: 100vw;}
body {
	width: 100vw;
	margin:auto;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
height: 100vh;
color: #000000;
background-color: #365d95;
position: absolute;
top: 0;
left: 0;

	
}
.header {
color: #fff;
text-align: center;
float: left;
width: 100%;
height: 32px;
/*clear: both;*/
margin: auto;
background: #365d95;
position: relative;
z-index: 0;
}
.header h1 {
font-size:16px;line-height: 32px;
}
.h1_Practice, .h1_Themes {display: inline;}
.h1_Practice:hover:before{content:url('../img/flag-ukraine16.png')" PRACTICE - УКРАЇНОМОВНИЙ ОНЛАЙН РЕДАКТОР ДЛЯ ВИВЧЕННЯ HTML, CSS, JAVASCRIPT";font-size:16px;}

.h1_Themes:hover:before{content:"Змінити тему оформлення робочої області редактора."}
/* Шапка */
/*Логотип*/
.header img {
float: left;height:32px;width:32px;margin-left:8px;
}
.dopomoga{  color: #0086b3;
  background-color: #FFFF00;
  border-color: #d43f3a;
    padding: 6px 16px;
  font-size: 14px;
  line-height: 28px;
  border-radius: 6px;
  }
.nav {
	 background: #d3deff;
text-align: center;
width: 99%;margin:auto;
border-top: solid #a099ff 1px;
}

.practice_conrainer{
width: 99%;margin:auto;
color:#ff4000!Important;
}/*Блок колонок редактора*/
/*Рядок меню робочого вікна редактора*/
.main_nav_editor{width: 100%;margin:auto;height:auto;background: #006cd9;text-align: center;}
/*Рядок назв колонок редактора 2022*/
.editor_column_name{width: 100%;margin:auto;background:#006cd9;color:#ffffff;height:2.5vh;text-align: center;}
/*=================================================================*/
.head_text,.head_iframe {
width: 44.84%; /**/
	height:auto;
	line-height:auto;
float: left;
border:1px solid #006cd9;
   color: #002db3;
background: #ffff00;
/*text-align: center;*/
}
/*======================Колонка Прикладів========2022==============*/
.example {
width: 13%;
float: left;
	height: 90vh;
text-align: center;
color: #ffffff;
background: #bfcfff;

}
.example_heads /*Шапки до блоків прикладів*/
{width: 13%;float: left;text-align: center;color: #ffffff;background: #ff794c;/*height:12.25rem;*/
}
/*=================================================================*/
.example_html,.example_css,.example_js {
width: 100%;
float: left;
text-align: center;
color: #ffffff;
height: auto;
}
/*Кнопки прикладів*/
.example_html button,
.example_js button, 
.example_css button
 {
width: 83%;
/*margin-left:0.1%;*/
}
/*Назви блоків прикладів*/
.fa-html5,
.fa-css3-alt,
.fa-js {
color: #ffffff;
vertical-align: middle;
font-size: 0.9rem;
width: 94%;margin:auto;
background-color: #4bad59;
padding: 0.25rem;
letter-spacing: 0.15rem;
}
.example_html {background: #bfcfff;}
.example_css { background: #dfffbf;}
.example_js {background: #dddddd;}
.head_text_html,.head_text_css,.head_text_js /*Блок головного меню робочої області*/
{
float: left;
width: 100vw;
color: #004040;
background: #ffff00;
text-align: center;
}


/*==Структура==Блоки редакторів коду==*/
.textareabloks, iframe{width: 42.95%;float: left; height: auto;}
.textareabloks {font-size: 1em;overflow:hidden;overflow-y: scroll; }
/*.example,iframe,.textareabloks,.textarea{height: 41.2rem !Important;}*/
iframe {   

border-left: 1px solid black;
background: #ffffff;
}
.example,
.textarea,
.CodeMirror, iframe{height: 74vh !Important;}
.textarea,
.CodeMirror{
float: left;
width: 100%;
font-size: 1.1 em;
}


.CodeMirror-foldgutter {
width: .8rem!Important;
}
.CodeMirror-guttermarker-subtle {color: #006cd9 !Important;font-size: 1.8em !Important;margin-top:-0.53rem !Important;}
.CodeMirror {
resize: none;
/* Забороняємо змінювати розмір */
}

/*.textarea {
background: #ffff00;
}*/

.cm-tab {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
background-position: right;
background-repeat: no-repeat;
}

.cm-trailingspace {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
background-position: bottom left;
background-repeat: repeat-x;
}


button,
label
/*.options*/

{
background: #0d6efd;
min-width: 1.5rem;
vertical-align: middle;
border-radius: .25rem;
color: #FFFFFF;
font-size: 0.90rem;
font-weight: 400;
padding: .01rem .2rem;
margin: .01rem .002rem;
box-shadow: 1px 1px 5px 0px #000000;
text-shadow: 1px 1px 6px #4ca6ff;
border: solid #ffffbf 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}

.button_name { border-color: #ffffff; background-color: #4CAF50; padding: .01rem .2rem; margin: .01rem .002rem; }
#navMedia, #navIntractive,#navTable,#example_css,#example_html,#example_js{display:inline;}/*Кнопки в рядок*/
.button_name_help{ border-color: #ffffff; 	color:#000; background-color: #fd7e14; padding: .01rem .2rem; margin-right: 0.5rem; }
label:hover,
button:hover {
border: solid #DD380D 1px;
/*background:#FFBFDF;*/
border-radius: .25rem;
text-decoration: none;
	background-color: #ffff00;
	color:#00a3d9;
box-shadow: 2px 2px 12px 0px #FF9326;
}

.button_background_primary,
.button_background_indigo,
.button_background_secondary,
.button_background_success,
.button_background_danger,
.button_background_warning,
.button_background_orange,
.button_background_info,
.button_background_gray,
.button_background_gray-dark,
.button_background_light,
.button_background_dark,
.button_color_blue,
.button_color_indigo,
.button_color_purple,
.button_color_pink,
.button_color_red,
.button_color_orange,
.button_color_yellow,
.button_color_green,
.button_color_teal,
.button_color_cyan,
.button_color_gray,
.button_color_gray-dark, 
.button_color_white, 
.button_color_black
 { margin: .03rem .045rem;
/*font-size:.75rem;padding: .1rem .55rem; */
}
.button_background_primary { background: #1266F1; color: #1266F1; }
.button_background_indigo {background: #6610f2;color: #6610f2; }
.button_background_secondary {background: #B23CFD;color: #B23CFD; }
.button_background_success {background: #00B74A;color: #00B74A; }
.button_background_danger {background: #F93154;color: #F93154; }
.button_background_warning {background: #FFA900;color: #FFA900; }
.button_background_orange {background: #fd7e14;color: #fd7e14; }
.button_background_info {background: #39C0ED;color: #39C0ED; }
.button_background_gray {background: #757575;color: #757575; }
.button_background_gray-dark {  background: #4f4f4f;color: #4f4f4f; }
.button_background_light {background: #FBFBFB;color: #FBFBFB; }
.button_background_dark {background: #262626;color: #262626; }
.button_color_blue {background: #0d6efd;color: #0d6efd; }
.button_color_indigo {background: #6610f2;color: #6610f2; }
.button_color_purple {background: #6f42c1;color: #6f42c1; }
.button_color_pink {background: #d63384;color: #d63384; }
.button_color_red {background: #dc3545;color: #dc3545; }
.button_color_orange {background: #fd7e14;color: #fd7e14; }

.button_color_yellow {background: #ffc107;color: #ffc107; }

.button_color_green {background: #198754;color: #198754; }

.button_color_teal {background: #20c997;color: #20c997; }

.button_color_cyan {background: #0dcaf0;color: #0dcaf0; }

.button_color_gray {background: #757575;color: #757575; }

.button_color_gray-dark {background: #4f4f4f;color: #4f4f4f; }

.button_color_white {background: #fff;color: #fff; }

.button_color_black {background: #000;color: #000; }

/*приховуємо input*/
.input-file {width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1; }

label {min-width: 1.6rem;font-size: 1rem; }

/*стилізуємо label*/

.input-file+label {
background: #1E62D0;
border-radius: 7px;
color: #FFFFFF;
font-family: monospace;
padding: 2px;
margin: 2px;
box-shadow: 1px 1px 8px 0px #000000;
border: solid #ffffbf 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}

.input-file:focus+label,
.input-file+label:hover {
background-color: #365d95;
color: #f0f0e1;
}


/*доступність*/

.input-file+label {
cursor: pointer;
/* "Hand" cursor*/
}

.commands {
display: inline-block;
}

.tooltip {
position: relative;
opacity: 1;
color: inherit;
}

.alternates {
display: inline;
margin: 5px 10px;
padding-left: 0;
}

*[tooltip]:hover:after {
z-index: 10000;
white-space: pre-line;
position: absolute;
content: attr(tooltip);
color: #000;
border: #777;
background-color: #90ee90;
margin-left: -6.0rem;
margin-top: 1.8rem;
padding: 5px;
border-radius: 7px;
border: solid #ffffbf 1px;
box-shadow: 1px 1px 8px 0px #000000;
font-size: 0.7rem;
text-align: left;
animation-duration: 0.7s;
animation-name: slidein;
word-wrap: break-word;
max-width:22rem;font-family:verdana;
}

@keyframes slidein {
from {
   opacity: 0;
}
to {
   opacity: 1;
}
}
#txt, #txt2{background-color: #90ee90;color: #000;border-radius: 4px;padding: 0 5px;text-decoration: none;font-size: 1.2rem; font-weight:600; border: solid #ffffbf 1px;box-shadow: 1px 1px 8px 0px #000000;}
#txt:hover:before, #txt2:hover:before,.h1_Practice:hover:before, .h1_Themes:hover:before
{ z-index: 10000;white-space: pre-line;position: absolute; 
color: #000; border: #777;background-color: #90ee90;
margin-left: 1rem;margin-top: 2rem; padding: 5px;border-radius: 7px;
border: solid #ffffbf 1px; box-shadow: 1px 1px 8px 0px #000000;
font-size: 0.75rem;text-align: left;font-family:verdana;font-weight:normal;
animation-duration: 0.7s; animation-name: slidein;
word-wrap: break-word;max-width: 20rem;
}
#txt:hover:before{content: "⌚Поточний час";}
#txt2:hover:before{content: "⌚Час роботи редактора з моменту оновлення браузера";}
#select{display: inline-block;width:9%;font-size: 0.9rem;font-family: sans-serif; border: 1px solid #aaa; border-radius: .5em;background-color: #b3ff99;}
#select option {width:auto; background-color: #b3ff99;}
.footer {
width: 100%;
text-align: center;
float: left;
margin: auto;
background-color: #365d95;
color: #f0f0e1;
font-size: 0.75rem;
line-height: 1.5rem;
}

.footer a {
color: #f0f0e1;
}
.breakpoints {width: 1em;}
.fa-palette{color:#ffff00 !Important;} 
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
position: relative;
  display: inline-block;


}

.dropdown-content {
  display: none;
  /*position: absolute;*/
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display:inline;background-color: #ffff00;
animation-duration: 1s;
animation-name: slidein;
	width: auto;
	margin:auto;
}
dt{font-weight: bold;}
/*Для суфлера 2022*/
.sufler{overflow:hidden;/*усе, що не помістилося всередині контейнера, не показувати на веб-сторінці*/
line-height:25px;	
	max-width:99%;/*Задаємо ширину нашому батьківському блоку суфлера*/
margin:auto;
height:25px;
background-color:#b3ff99;
white-space:nowrap;/*забороняємо перенесення слів в інший рядок.*/
}
.marquee{
width:auto; /*Ограничиваем ширину прогресс-бара шириной экрана*/	
/*width:2000%;/*Для стабілізації швидкості анімації*/  
	height:34px;
/*overflow:hidden; /*обрізаємо все що виходить за наш блок з рядком, що біжить, щоб не було казусів.*/
color:#212121;
background-color:#b3ff99;
font-size:25px;
line-height:25px;
display:inline-block;/*робимо наш span рядково-блочним елементом*/
padding-left:110%;/*робимо відступ ліворуч на всю ширину батьківського блоку для затримки початку.*/
-webkit-animation: marquee infinite linear;
animation: marquee 14s infinite linear;
/*animation: marquee linear infinite;*/
/*white-space:nowrap;/*забороняємо перенесення слів в інший рядок.*/

}
 
.marquee span {
/*background-color:#b3ff99;*/
display:inline-block;
font-size:25px;
line-height:25px;
}
.marquee::before {
  content: "​❤️🙏​🇺🇦​💛​🌄​💙🕊☮️​​💙💛";
}
@-webkit-keyframes marquee {
0%{-webkit-transform: translate(0, 0);}
100%{-webkit-transform: translate(-100%, 0);}
}
@keyframes marquee{
0%{transform: translate(0, 0);}
100%{transform: translate(-100%, 0)}
}
.slider {
width: 4.5vw;
vertical-align: middle;
height: 18px;
border-radius: .25rem;
color: #FFFFFF;
font-size: 0.90rem;
font-weight: 400;
padding: .01rem .2rem;
margin: .01rem .2rem;
box-shadow: 1px 1px 4px 0px #ffffff;
border: solid #ffffff 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}	
input[type=range] {
  border-radius: 4px;
  background-color: #006cd9;
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}	
input[type=range]::-webkit-slider-runnable-track {
      border-radius: 10px/100%;
      height: 7px;
	  border: 1px solid #fff;
      background-color: #888888;
    }
input[type=range]::-webkit-slider-thumb {
  background: #ff5c26;
      border: 1px solid #fff;
      border-radius: 8px/100%;
      cursor: pointer;
      width:15px;
      height: 15px;
      -webkit-appearance: none;
      margin-top: -5px;
}
/*Адаптивність*/
/* 
 ##Пристрій = настільні комп’ютери
 ##Екран = 1281 пікселів для настільних комп’ютерів та  вищою роздільною здатністю
*/
 @media (min-width: 1281px) {
 .editor_column_name{width: 100%!Important;margin:auto;}
.example_heads{max-width: 13%;}
.head_text, .head_iframe{width: 42.96%!Important;border:0;} 
.example,
.textarea,
.CodeMirror, iframe{height: 74vh !Important;}	 
 }
 
/* 
 ##Пристрій = Ноутбуки, настільні комп’ютери
 ##Екран = від 1025 до 1280 пікселів
 Тестувалося на розмірах - 1280 х 1024
*/
 @media (min-width: 1025px) and (max-width: 1280px) {
 .editor_column_name{width: 100%!Important;margin:auto;}
.example_heads{max-width: 13%;}
.head_text, .head_iframe{width: 42.96%!Important;border:0;} 
.example,
.textarea,
.CodeMirror, iframe{height: 69vh !Important;}	 
 }
 
/* 
 ##Пристрій = планшети, iPad (портрет)
 ##Екран = від 768 до 1024 пікселів портретна орієнтація
 
*/
 @media (min-width: 768px) and (max-width: 1024px)  and (orientation: portrait) {
 .editor_column_name{display: none;}
 .example {width: 20%; float: left;height: auto!important;}
 .textareabloks {width: 80%; height: auto;}
 iframe{width: 100%; height: auto;}
 }
 
/* 
 ##Device = Tablets, iPads (Landscape)
 ##Screen =  768px to 1024px
 Тестувалося на розмірах - 800 х 600
*/
 @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 body{width: 99.8%;margin:auto;}
 .editor_column_name{display: none;}
 .example,.textarea,.CodeMirror, iframe{height: 105vh !Important;}
.example {width: 18%; float: left;}
.textareabloks {width: 82%; height: auto;}
iframe{width: 100%; height: auto;}
 }
 
/* 
 ##Device = Low Resolution Tablets, Mobiles (портрет)
 ##Screen =  481px to 767px
*/
 @media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
 .header img{height:24px!important;width:24px!important;}
 .h1_Practice{ display: none !important;}
 .editor_column_name{display: none;}
 .example,.textarea,.CodeMirror, iframe{height: 60vh !Important;}
 .example {width: 20%; float: left;}
 .textareabloks {width: 80%; height: auto;}
 iframe{width: 100%; height: auto;}
 }
/* 
 ##Device = Low Resolution Tablets, Mobiles (Landscape)
 ##Screen =  481px to 767px
*/
 @media (min-width: 481px) and (max-width: 767px)and (orientation: landscape){
 .header img{height:24px!important;width:24px!important;}
 .h1_Practice{ display: none !important;}
 .editor_column_name{display: none;}
 .example,.textarea,.CodeMirror, iframe{height: 60vh !Important;}
 .example {width: 20%; float: left;}
 .textareabloks {width: 80%; height: auto;}
 iframe{width: 100%; height: auto;}
 }
 
/*
##Пристрій = більшість мобільних смартфонів (портрет)
##Екран = від 320 до 479 пікселів
*/
 @media (min-width: 320px) and (max-width: 480px) {
.header {height:28px!important;padding:0 2px 2px 0 ;}
.header img{height:24px!important;width:24px!important;}
.h1_Practice{ display: none !important;}
#select{display: inline-block;width:20%;font-size: 12px;font-family:verdana; border: 1px solid #aaa; border-radius: .5em;}
h1 {font-size: 12px!important;}
h2 { font-size: 12px;}
#txt, #txt2{font-size: 12px;line-height:12px;padding:0 2px;height:12px!important;}
*[tooltip]:hover:after {display: none;}
.example_heads,.head_text, .head_iframe{display: none;}
.example { width: 99%;margin:auto; float: left; 	height: auto!important;  }
.fa-html5, .fa-css3-alt, .fa-js{width:80%;margin:auto;}
.example_html button, .example_js button, .example_css button{width:80%;margin:auto;}
.editor_column_name{display: none;}
.practice_conrainer{ width: 100%!Important;margin:auto; height: auto!Important; color:#ff4000!Important; }
.textareabloks, iframe{width: 100%; height: auto;}
 }
/*@media screen and (max-width: 900px) {
.editor_column_name{display: none;}
 .head_text, .head_iframe{width: 83.95%!important;}
 .example {width: 20%; float: left;height: auto!important;}
 .textareabloks {width: 80%; height: auto;}
 iframe{width: 100%; height: auto;}
}*/
/*Маленькі телефони*/
@media only screen  and (min-width : 200px) {
   /* Styles here */
}
#my-pads {
  position: absolute;
 
  width: 120px;
  height: 36px;
  right: 230px;
  top: 27px;
  cursor: pointer;
  cursor: hand;
}

#my-pads:active {

}

#my-pads-list {
  border: 1px solid #1b5ee9;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 6px;
  background: #b3ff99;
  /*position: absolute;
  right: 230px;
  top: 59px;*/
  max-height: 150px;
  overflow-y: auto;
  width: 98%;margin:auto;
  z-index: 10;
  display: none;
}

.my-pads-item {
  width: 100%;
  border-bottom: 1px solid #999999;
}
#my-pads-list::-webkit-scrollbar
{
    width: 10px;
    background-color: #dddddd  ;
border-radius: 20px;
}
#my-pads-list::-webkit-scrollbar-thumb{
    width: 10px;
    background: #49AEC0;
  border: 1px solid #ff4000;
  border-radius: 15px;
  height:16px;
}
#my-pads-list a {
  font-size: 15px;
  color: #0088cc;
  margin: 5px 10px;
  cursor: pointer;
  cursor: hand;
  display: inline-block;
}

#my-pads-list a:hover {
  text-decoration: underline;
  color: #eb8717;
}

#create-pad {
  background: #0d6efd;
min-width: 1.5rem;
vertical-align: middle;
border-radius: .25rem;
color: #FFFFFF;
font-size: 0.90rem;
font-weight: 400;
padding: .01rem .2rem;
margin: .01rem .002rem;
box-shadow: 1px 1px 5px 0px #000000;
text-shadow: 1px 1px 6px #4ca6ff;
border: solid #ffffbf 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}

#create-pad:active {

}
.sprite-btn {
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
}
.CodeMirror-cursor {
  border-left: 2px solid #cccccc !important;
}
strong {
  font-weight: bold;
}