/*                                  █████████   ██  ██  ██
                                                ██  ██  ██
                                    █████████   ██  ██  ██
 ███████████████  ███████                       ██  ██  ██       █████
 ███████████████  ███████████       █████████   ██  ██  ██      ██     ███
       ███        ███      ███                                 ███     ███
       ███        ███       ██     ██████████     ████████   ████████ ████████
       ███        ███      ███   ████           ███      ███   ███     ███
       ███        ███████████    ████           ███       ██   ███     ███
       ███        ████████         ████████     ██        ███  ███     ███
       ███        ███                    ████   ██        ██   ███     ███
       ███        ███                    ████   ███      ███   ███     ███
       ███        ███            ██████████      ██████████    ███      ██████
                                                    ████                  ████
	TPsoft 2000-2021
	CSS Document for Brko

	posledna editacia:
                    2021-01-01 22:54  Igor
*/

@font-face{
	font-family: AlegreyaSans;
	src: url("../fonts/AlegreyaSans-Regular.ttf"); /* pro ostatní prohlížeče */
}

html, body {
	padding: 0px;
	margin: 0px;
	font-family: AlegreyaSans;
	font-size: 11pt;
}
input,
textarea {
	font-family: AlegreyaSans;
	font-size: 11pt;
}

.hide {
	display: none;
}
.hide-important {
	display: none !important;
}
.right {
	float: right;
}
.center {
	margin-left: auto;
	margin-right: auto;
}
.messages-error {
	border: 1px red solid;
	background-color: #fcc;
	background-image: url(../images/error.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding: 5px;
	padding-left: 30px;
}
.messages-ok {
	border: 1px green solid;
	background-color: #cfc;
	background-image: url(../images/ok.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding: 5px;
	padding-left: 30px;
}
table th,
table td {
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

a,
a:visited {
	text-decoration: none;
	color: #335;
	transition: color 1s;
}
a:hover {
	color: #55f;
}

[contenteditable] {
    padding:12px;
}

[data-placeholder]:empty:before {
	content: attr(data-placeholder);
	color: #888;
	font-style: italic;
}

/**
 * D E B U G
 */
.br { border: 1px red solid; }
.bg { border: 1px green solid; }
.bb { border: 1px blue solid; }
.by { border: 1px yelow solid; }
.bm { border: 1px magenta solid; }

/**
 * Login
 */
#brko-1 {
	position: absolute;
	left: calc((100vw - 250px) / 2);
	top: calc(((100vh - 120px) / 2) - 200px);
}
.login-panel {
	min-width: 320px;
	min-height: 120px;
	position: absolute;
	display: flex;
	flex-direction: column;
	padding: 20px;
	left: calc((100% - 360px) / 2);
	top: calc((100vh - 160px) / 2);
	background-color: #eee;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.login-panel h2 {
	padding: 0px;
	margin: 0px;
	text-align: center;
	margin-bottom: 10px;
}
.registration-panel {
	min-height: 240px;
	top: calc((100vh - 280px) / 2);
}
.login-row {
	display: flex;
	flex-direction: row;

}
.login-label {
	width: 45%;
	padding: 10px;
	padding-left: 0px;
}
.login-input {
	width: 40%;
	padding: 10px;
}
input[type='submit'],
input[type='button'],
button {
	padding: 5px 10px;
	background-color: #e6e6e6;
}
input[type='submit']:hover,
input[type='button']:hover,
button:hover {
	background-color: #e0e0e0;
}
input,
textarea,
.editable {
	border: 1px #ccc solid;
}
input:focus,
textarea:focus,
.editable:focus {
	border: 1px #888 solid;
}

/**
 * Dashboard
 */
.dashboard-top {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}
@media (max-width: 768px) {
	.dashboard-top {
		flex-direction: column;
	}
}
.dashboard-top .logo {
	padding-right: 30px;
}
.dashboard-top .welcome {
	padding-right: 30px;
}
.dashboard-top .actions {
	padding-right: 30px;
}

/**
 * Books List
 */
.books-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 30px;
}
.books-list .book {
	width: 200px;
	padding: 30px;
	transition: transform .2s;
}
.books-list .book:hover {
	transform: scale(1.08);
}
.books-list .book .cover {
	width: 200px;
	height: 300px;
	background-color: #777;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .4), 8px 8px 16px 0 rgba(0, 0, 0, 0.19);
	transition: transform .2s;
}
.books-list .book:hover .cover {
	box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, .4), 8px 8px 32px 0 rgba(0, 0, 0, 0.19);
}
.books-list .book .title {
	margin-top: 100px;
	padding: 0px 10px;
	text-align: center;
	color: white;
	font-size: 20pt;
	text-shadow: 1px 1px 2px #fff;
}
.books-list .book .author {
	padding: 0px 10px;
	margin-bottom: 20px;
	text-align: center;
	color: white;
	font-size: 14pt;
	color: #ccc;
}
.books-list .book .date {
	text-align: right;
	font-size: 11pt;
}
@media (max-width: 768px) {
	.books-list .book {
		width: 100px;
		padding: 15px;
	}
	.books-list .book .cover {
		width: 100px;
		height: 150px;
	}
	.books-list .book .title {
		margin-top: 50px;
		font-size: 14pt;
	}
	.books-list .book .author {
		font-size: 10pt;
	}
	.books-list .book .date {
		font-size: 8pt;
	}
}

/**
 * Form
 */
.form {
	width: 90vw;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	padding: 20px;
	background-color: #eee;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}
.form h2 {
	padding: 0px;
	margin: 0px;
	text-align: center;
	margin-bottom: 10px;
}
.form-row {
	display: flex;
	flex-direction: row;
}
.form-label {
	width: 40%;
	padding: 10px;
	padding-left: 0px;
}
.form-input {
	width: 60%;
	padding: 10px;
	padding-right: 10px;
	text-align: right;
}
.form-input input,
.form-input textarea {
	width: 100%;
}
.form-actions {
	max-width: 100%;
	text-align: right;
	padding-right: 7px;
	margin-top: 30px;
	margin-bottom: 20px;
}
@media (max-width: 768px) {
	.form {
		width: 80%;
	}
	.form-row {
		flex-direction: column;
	}
	.form-label {
		width: 100%;
	}
	.form-input {
		width: 100%;
		padding: 0px;
	}
}

/**
 * Editor
 */
#editor {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100vh;
}
#general,
#chapters,
#paragraphs,
#additional,
#general2,
#characters,
#stories {
	width: 20%;
	overflow-x: hidden;
	overflow-y: auto;
	padding-left: 20px;
	border-right: 1px #000 solid;
}
#paragraphs {
	width: 40%;
}
#additional {
	border-width: 0px;
}
#stories {
	width: 60%;
	border-width: 0px;
}

.line-author {
	font-size: 13pt;
}
.line-release-date {
	font-size: 10pt;
}
.line-description {
	font-size: 10pt;
	border-left: 1px #555 solid;
	padding: 10px;
	font-style: italic;
}
#general input[type="range"],
#general2 input[type="range"] {
	width: 90%;
}
.btn-panel {
	width: 90%;
}

.chapter {
	border-top: 1px #000 solid;
	display: flex;
	flex-direction: column;
	padding-top: 10px;
	margin-right: 10px;
	margin-top: 10px;
}
.chapter .title {
	font-size: 16pt;
}
.chapter .info {
	font-size: 9pt;
	padding-left: 10px;
}
.chapter input[type="text"] {
	width: 100%;
}
.chapter-selected {
	background-color: #555;
	color: white;
}
.chapter .count_correction,
#book_stat .count_correction {
	padding: 2px 5px;
	margin-left: 10px;
}

.paragraph {
	/*border: 1px red solid;*/
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 90%;
	margin-bottom: 5px;
}
.paragraph .paragraph-correct {
	padding: 0px;
	width: 40pt;
}
.paragraph .paragraph-content {
	width: 95%;
	border-width: 0px;
	border-left: 1px #000 solid;
	/*border: 1px blue solid;*/
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 16pt;
}
.paragraph-selected {
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
	border-right: 10px #000 solid;
}
.paragraph-move {
	cursor:move;
	background-color: #555;
	color: white;
}
.text-block {
	width: calc(100% - 30px);
	height: calc(100% - 150px);
}

.chapter-comment,
.paragraph-comment {
	width: 90%;
	border-width: 0px;
	border-left: 1px #000 solid;
	padding-left: 10px;
	font-size: 14pt;
	min-height: 14pt;
}
#history_paragraph {
	display: flex;
	flex-direction: column;
}
.history {
	width: 90%;
	display: flex;
	flex-direction: column;
	margin-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px black solid;
}
.history-comment {
	font-size: 11pt;
}
.history-date {
	text-align: right;
	font-size: 9pt;
}
@keyframes bluring {
	0% { filter: blur(3px); }
	50% { filter: blur(10px); }
	100% { filter: blur(3px); }
}
@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.blured {
	animation: bluring 3s infinite, gradient 4s ease infinite;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
}

/**
 * Storyline
 */
#characters input[type="text"],
#characters .editable {
	width: 90%;
}
#chars,
#scenes {
}
#chars .character,
#scenes .scene {
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 10px;
	border-left: 1px #000 solid;
	cursor: move;
}
#chars .character .title,
#scenes .scene .title {
	font-weight: bold;
	font-size: 11pt;
	display: inline-block;
	padding: 2px 10px;
	margin-left: -10px;
}
#chars .character .info,
#scenes .scene .info {
	font-size: 9pt;
}
#chars .character .actions,
#scenes .scene .actions {
	visibility: hidden;
}
#chars .character:hover .actions,
#scenes .scene:hover .actions {
	visibility: visible;
}
#chars .character button,
#scenes .scene button {
	padding: 2px 5px;
	font-size: 9pt;
	cursor: pointer;
}
.character-move,
.scene-move {
	cursor: move;
	background-color: #555;
	color: white;
}
#chapters2 {
	display: flex;
	flex-direction: column;
}
#chapters2 .chapter {
	display: flex;
	flex-direction: row;
}
#chapters2 .chapter .actions {
	display: flex;
	flex-direction: column;
	width: 20%;
	min-width: 200px;
	min-height: 50px;
}
#chapters2 .chapter .stories {
	display: flex;
	flex-direction: column;
	width: 80%;
}
#chapters2 .chapter .stories .story {
	width: 100%;
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;
}
#chapters2 .chapter .stories .story-actions {
	padding-right: 5px;
}
#chapters2 .chapter .stories .story-scene {
	width: 200px;
	min-height: 50px;
}
#chapters2 .chapter .stories .story-scene .scene-one {
	color: #000;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#chapters2 .chapter .stories .story-scene .scene-one .scene-actions {
	text-align: right;
}
#chapters2 .chapter .stories .story-characters {
	width: 300px;
	min-height: 50px;
}
#chapters2 .chapter .stories .story-characters .character-one {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#chapters2 .chapter .stories .story-characters .character-one .character-name {
	padding-left: 10px;
}
#chapters2 .chapter .stories .story-comment-wrapper {
	width: 100%;
}
#chapters2 .chapter .stories .story-comment-wrapper .story-comment {
	border-left: 1px #000 solid;
	margin-left: 10px;
	min-height: 14pt;
	padding: 5px;

}
#chapters2 .chapter .stories .story-scene {
	width: 200px;
}
.scene-empty,
.characters-empty {
	border: 1px #888 dotted;
	color: #888;
	margin: 0px;
	height: calc(100% - 10px);
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px 2px;
}
.scene-empty div,
.characters-empty div {
	width: 100%;
}
@media (max-width: 999px) {
	#chapters2 .chapter {
		flex-direction: column;
	}
	#chapters2 .chapter .actions {
		flex-direction: row;
		width: 100%;
	}
	#chapters2 .chapter .stories {
		width: 100%;
	}
	#chapters2 .chapter .stories .story {
		flex-wrap: wrap;
	}
}
#chapters2 .chapter .actions .buttons {
	display: none;
}
#chapters2 .chapter .actions:hover .buttons {
	display: block;
}
#chapters2 .chapter .actions button,
#chapters2 .chapter .stories .story button {
	padding: 2px 5px;
	font-size: 9pt;
	width: auto;
}
#chapters2 .chapter .stories .story button {
	visibility: hidden;
}
#chapters2 .chapter .stories .story:hover button {
	visibility: visible;
}

#stories2 {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}
#stories2 .stories2-chapter {
	padding: 10px;
	margin-bottom: 5px;
	cursor:move;
	background-color: #555;
	color: white;
}
#stories2 .story {
	width: 100%;
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;
	margin-left: 100px;
	cursor:move;
	background-color: #555;
	color: white;
	border: 1px red solid;
}
#stories2 .story button {
	display: none;
}
#stories2 .story .story-scene {
	width: 200px;
	min-height: 50px;
}
#stories2 .story .story-scene .scene-one {
	display: flex;
	flex-direction: column;

	height: calc(100% - 10px);
	text-align: center;
	align-items: center;
	justify-content: space-between;

}
#stories2 .story .story-characters {
	width: 200px;
	min-height: 50px;
}
#stories2 .story .story-characters .character-one {
	padding: 2px 10px;
}

#stories3 {
	width: 90%;
}
#stories3 button {
	display: none;
}
#stories3 .story {
	border-bottom: 2px #000 dashed;
	margin-bottom: 10px;
	padding-top: 5px;
}
#stories3 .scene-actions,
#stories3 .scene-ending {
	display: none;
}
#stories3 .story-characters {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#stories3 .character-one {
	padding: 2px 5px;
	margin-top: 5px;
    margin-right: 5px;
}
#stories3 .scene-name {
	color: #000;
}

/**
 * Mobile Selektor
 */
#mobile-selector {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
@media (min-width: 1000px) {
	#mobile-selector {
		display: none;
	}
}
@media (max-width: 999px) {
	#editor {
		height: calc(100vh - 30px);
	}
	.mobile-hide {
		display: none;
	}
	#general,
	#chapters,
	#paragraphs,
	#additional,
	#general2,
	#characters,
	#stories
	{
		width: 100%;
		border-width: 0px;
	}
}
#mobile-selector .mobile-item {
	height: 30px;
	width: 25%;
	text-align: center;
	line-height: 30px;
	font-size: 9pt;
}
#mobile-selector .mobile-item2 {
	width: 33.33%;
}

#mobile-selector .mobile-item-deselected {
	background-color: #555;
	color: white;
	cursor: pointer;
}