/*bases*/
html,
body,
textarea,
figure,
label {
    margin: 0;
    padding: 0;
}
ul,
ol {
    padding-left: 0em;
}
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
h1:last-child,
h2:flast-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child{
    margin-bottom: 0;
}
p,
ul,
ol,
dl,
blockquote,
pre,
h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
li p,
li ul,
li ol {
    margin-top: 0;
    margin-bottom: 0;
}
aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
img, table, td, blockquote, code, pre, textarea, input, video {
    max-width: 100%;
}
div, textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
}
img {
    width: auto;
    height: auto;
    vertical-align: middle;
}
a img { border: 0; }
a {text-decoration: none;}
body > script {display: none !important;}

/*styles*/
@keyframes flash {
    0% {opacity:0;}
	20% {opacity:1;}
    80% {opacity:1;}
  100% {opacity:0;}
}
@-webkit-keyframes flash {
    0% {opacity:0;}
	20% {opacity:1;}
    80% {opacity:1;}
  100% {opacity:0;}
}

:root {
    --primary-color: #1A92FF;
    --success-color : #4caf50;
    --danger-color : #d9534f;
    --secondary-color:#9360ef;
    --light-color: silver;
}

.dark-theme {
    --color-element: silver;
    --background-color: #36393e;
    --background-color-element: #2e3136;
}

.ligth-theme {
    --color-element: #333333;
    --background-color: #dddddd;
    --background-color-element: #cccccc;
}
.btn-primary {
    background-color: var(--primary-color);
}
.btn-secondary {
    background-color: var(--secondary-color);
}
.btn-danger{
    background-color: var(--danger-color);
}
.btn-primary, .btn-secondary, .btn-danger{
    color: var(--light-color);
}
.btn {
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    border: none;

}
.success {
    color: var(--success-color);
    font-size: 20px;
}
.danger {
    color: var(--danger-color);
    font-size: 20px;
}
body {
    background-color: var(--background-color);
    color: var(--color-element);
    font-family: Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
    font-size: 14px;
    margin-top: 20px;
}
#bodyContainer {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-gap: 20px 50px;
    grid-template-areas: "title title" "navBar main";
}
div#title {
    grid-area: title;
    height: 120px;
    grid-column-start: 2;
    position: relative;
}
.flashes {
    position: absolute;
    bottom: 0;
    opacity: 0;
    -webkit-animation: flash 5s;
    animation: flash 5s;
}
.flash-success {
    color: var(--primary-color);
}
.flash-danger {
    color: var(--danger-color);
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
main {
    grid-area: main;
    overflow-y: auto;
    height: 80vh;
    padding-right: 20px;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

main::-webkit-scrollbar {
    width: 5px;
    background: var(--color-element);
}
main::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}
h1 {
    text-align: center;
    font-size: 48px;
}
.title {
    position: relative;
}
.title .tools-bar {
    position: absolute;
    right: 0;
    top: 0;
}
li a, .h4 {
    color: var(--color-element);
}
a {
    color: var(--primary-color);
}
h2:not(:first-child) {
        margin: 40px auto 20px auto;
}
.index h3 {
    margin-bottom: 5px;
}
h2 {
    color: var(--primary-color);
    margin-bottom: 5px;
}
.block h2 {
    color: var(--color-element);
}
.index .block h2 {
    margin-bottom: 20px;
}
.index .block h2::after, #navBar .block h2::after {
    content: '';
    border-bottom: 1px solid var(--color-element);
    display: block;
}
p {
    margin-bottom: 10px;
}
#navBar .block, .search .block {
    margin-bottom: 20px;
}
.nav .fas, .nav .far {
    margin: 10px;
    background: var(--color-element);
    color: var(--background-color-element);
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 3px;
    font-size: 20px;
    padding: unset;
}

.nav li a:hover, .li-active a {
    color: var(--primary-color);
}
.nav li a:hover .fas, nav li a:hover .far, nav .li-active .fas, nav .li-active .far {
    background: var(--primary-color);
}
nav li:not(:last-child)::after, .search li:not(:last-child)::after{
    content: "";
    display: block;
    width: 100%;
    border-bottom: 2px solid var(--background-color);
    margin-top: 5px;
}
nav a, #login {
    background: var(--background-color-element);
    color: var(--color-element);
    font-size: 20px;
}
.nav button, .nav input {
    vertical-align: middle;
}
ul {
    margin-bottom: 10px;
}
li {
    list-style: none;
}
/* form {
    margin: auto; 
}*/
.form-group {
    vertical-align: top;
    margin-bottom: 20px;
}
.form-group .far{
    font-size: 20px;
    height: 20px;
    width: 20px;
    text-align: center
}
label {
    vertical-align: middle;
    width: calc(25% - 4px);
    display: inline-block;
}
.form-errors, .form-link {
    margin-left: calc(25% + 4px);
    margin-top: 8px;
}

.form-errors {
    color: var(--danger-color);
}
.w-90 {
    width: 90%;
}
.w-25 {
    width: calc(25% - 4px);
    vertical-align: middle;
}
.w-75 {
    width: calc(75% - 4px);
    vertical-align: middle;
}
.row > div {
    display: inline-block;
}
.form-item-inline {
    display: inline-block;
}
input[type="text"], textarea, select, input[type="password"], input[type="email"] {
    width: calc(75% - 4px);
    height: 30px;
    box-sizing: border-box;
}
#searchContainer input[type="text"] {
    width: calc(100% - 65px);
    background-color: var(--color-element);
    border-bottom-color: var(--color-element);
    border-right-color: var(--color-element);
}
textarea {
    min-height: 400px;
}
input[type="submit"] {
    float: right;
}
.clear-fix{
    clear: both;
}
.hidden {
    display: none;
}
.articles h3 {
    color: var(--secondary-color);
    margin-top: 10px;
    font-weight: 500;
}
pre {
    background-color: var(--background-color);
    padding: 8px;
}
.article-container {
    margin-bottom: 35px;
}
.article {
    padding: 15px;
    background-color: var(--background-color-element);
    border-radius: 5px;
}
.article li {
    list-style : disc;
    list-style-position: inside
}
#navBar {
    grid-area: navBar;
    box-sizing: border-box;
}
.block {
    background-color: var(--background-color-element);
    padding: 20px;
    border-radius: 5px;
}
.block:only-child {
    min-height: 250px;
}
.x-row {
    display: grid;
    grid-template-areas: "x-content"
                        "x-footer";
    grid-template-rows: auto 40px;
}
.x-row .x-title:empty {
    height: 0px;
}
.x-row .x-content {
    grid-area: x-content;
}
.x-row .x-footer {
    grid-area: x-footer;
    margin-top: 10px;
    text-align: right;
}
.articles .btn a {
    color: var(--color-element);
}
table {
    border-collapse: collapse;
}
td {
    border: 1px solid var(--color-element);
    padding: 5px;
}
.chevron {
    margin: auto 10px auto auto;
    background: var(--color-element);
    color: var(--background-color-element);
    height: 15px;
    width: 15px;
    text-align: center;
    line-height: 15px;
    border-radius: 3px;
    font-size: 15px;
    padding: unset;
}
.smiley {
    text-align: center;
    font-size: 100px;
}
img.favicon {
    height: 32px;
}
.table {
    width: 100%;
}
.table > thead > tr {
    border-bottom: 1px solid var(--light-color);

}
.table > tbody > tr {
    border-bottom: 2px solid var(--background-color);
}
.table > tbody > tr > td {
    border: none;
}
.table th {
    text-align: left;
    line-height: 30px;
}