* {
    outline-width: 0 !important;
}
html, body {
    height: 100%;
}
body {
    background-color: #f2f2f2;
}
body.dropdown-open {
    position: fixed;
    overflow-y: scroll !important;
    width: 100%;
}
header {
    background-color: rgb(34, 34, 34);
}
main {
    min-height: calc(100% - 240px);/* make the footer to go at the bottom when the main content is small */
}

footer {
    min-height: 180px !important;
}
footer a {
    color: #646464;
}
footer div.row div.keys {
    margin-right: 10px;
}
footer div.row div.keys * {
    line-height: 1.5;
}
footer div.row div.keys *, footer div.row div.values * {
    padding: 5px 0;
}

/* overwrite materialize default. no background color for nav items */
#primary-navbar .active {
    background-color: unset !important;
}

/* make the font-awesome icons to work with materialize css */
button .fa-save::before, a.btn .fa-save::before {
    position: absolute;
    top: 0;
    right: 12px;
}
button.font-awesome, a.btn.font-awesome {
    padding-right: 40px;
}
/* END make the font-awesome icons to work with materialize css */

@media only screen and (max-width: 992px){
    main {
        min-height: calc(100% - 244px);/* make the footer to go at the bottom when the main content is small */
    }
}
@media only screen and (max-width: 600px){
    main {
        min-height: calc(100% - 256px);/* make the footer to go at the bottom when the main content is small */
    }
    .made-in-greece {
        height: 56px !important;
    }
    nav .made-in-greece img {
        height: 56px !important;
        padding: 10px 10px 10px 15px !important;
    }
}

html {
    font-family: 'Manrope';
}

h1, h2, h3, h4, h5 {
    text-transform: uppercase;
    font-weight: 400;
}
.second-header {
    font-weight: bold;
}

/* don't allow to make the h5 too big when it is flow-text*/
@media screen and (min-width: 930px) {
    h5.flow-text {
       font-size: 1.64rem !important;
    }
}

.awesome-title {
    text-align: center;
    color: black;
}

.awesome-title::after {
    content: "";
    width: 100%;
    border-bottom: 1px #b3b3b3 solid;
    display: block;
    margin-top: 5px;
}

.absolute-left {
    left: 0 !important;
    right: unset !important;
}

.absolute-right {
    left: unset !important;
    right: 0 !important;
}

.left {
    float: left !important;
}
.right {
    float: right !important;
}

.nav-transparent {
    background-color: #000C;
}

#second-navbar {
    box-shadow: unset;
}

.card {
    border-radius: 15px;
    background-color: white;
}
main div.container > div.card-panel {
    margin: 0;
}
.card-panel {
    background-color: #f2f2f2;
}
/* sidenav */
.sidenav {
    max-width: 250px;
}
.sidenav > li {
    width: 100%;
    text-transform: uppercase;
    cursor: pointer;
}
.sidenav > li a {
    display: inline-block;
    outline: 0;
    text-decoration: none;
    color: rgba(0,0,0,0.87);
}
.sidenav > li a:hover {
    background-color: unset;
}
.sidenav > li a::after {
    content: "";
    border-bottom: 1px black solid;
    width: 0;
    display: block;
    position: relative;
    bottom: 12px;
    margin: 0 auto;
    transition: width .3s ease-in-out;
}
.sidenav > li a:hover::after {
    width: 100%;
}
.sidenav > li a.active::after {
    width: 100%;
}

nav .sidenav-trigger {
    width: 64px;
    height: 100%;
    text-align: center;
    margin: 0;
    outline: 0;
}
/* end sidenav */

/* hide */
.site-hide {
    display: none;
}

/* buttons reusable */
.site-button {
    display: block;
    text-align: center;
    text-transform: uppercase;
    background-color:#e1e1e1;
    border-radius: 7px;
    max-width: 200px;
    position: relative;
    left: calc(50% - 100px) !important;
    padding: 5px 0 !important;
    cursor: pointer;
    color: black;
}
.site-button > a {
    width: 100%;
    line-height: 21px;
    display: block;
    float: left;
}
/* end buttons */

/* FAB */
.fixed-action-btn {
    opacity: 0.8;
    position: fixed;
    padding: 5px 2px;
    bottom: -66px;/* the height */
    transition: transform .4s ease-in;
}
.fixed-action-btn.show {
    transform: translateY(-89px);/* is the height + the distance from window corner */
}

/* for text, table like effect */
/*
    ==== xxx
    ==   xx
    =    x
*/
.keys {
    display: block;
    float: left;
}
.keys > * {
    display: block;
    text-align: left;
}
.values {
    display: block;
    float: left;
}
.values > * {
    display: block;
    text-align: left;
}

.small-description {
    height: 21px;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.color-placeholder {
    position: absolute;
    top: 0px;
    right: 10px;
}

.big-icon {
    font-size: 100px;
}

.snowflake-color {
    color: var(--accent-dark-color);
}

.sun-color {
    color: var(--accent-light-color);
}

/* breadcrumbs */
.breadcrumb-container {
    padding: 10px;
}

.breadcrumb-container .breadcrumb {
    color: #646464;
    font-size: 16px;
    transition: color .3s ease-in-out;
}

.breadcrumb-container .breadcrumb:hover {
    color: #2c2c2c;
}

.breadcrumb-container i {
    color: var(--accent-light-color);
    margin: 0;
}

.breadcrumb-container .breadcrumb::before {
    content: '';
    margin: 0;
}

#cookies-dialog {
    display: none;
    position: fixed;
    width: 100%;
    z-index: 10;
    bottom: 0;
    margin: 0;
}

#cookies-dialog .card {
    margin: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card-action a:last-child {
    margin-right: 0 !important;
}
.card-content p {
    overflow-wrap: break-word;
}

.positive-button {
    color: var(--light-text-color) !important;
    padding: 8px;
    border-radius: 8px;
    transition: background-color .2s ease-out !important;
    background-color: var(--accent-dark-color);
    font-weight: bold;
}

.positive-button:hover {
    background-color: var(--accent-light-color);
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    margin-right: 10px;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating).negative-button {
    color: #2c2c2c;
    transition: color .2s ease-in-out;
    font-weight: bold;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating).negative-button:hover {
    color: var(--dark-text-color);
}