﻿:root {
    --c-bg-gradient-custom: var(--c-bg-theme-general);
    --c-bg-config-card: rgb(92, 6, 88);
    --c-bg-config-card-hover: rgba(92, 6, 88, 0.75);
    --c-bg-config-add-new-card: rgb(56, 56, 56);
    --c-bg-config-add-new-card-hover: rgba(56, 56, 56, 0.75);
    --logo-image: url('../img/logo_big.svg');
    --font-face: 'Roboto', regular;
}

.configuration-cards {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px;
    padding: 1.5%
}

    .configuration-cards .configuration-card,
    .configuration-cards .configuration-card-add-new {
        background: var(--c-bg-config-card);
        color: var(--c-color-theme-general);
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        text-decoration: none;
        width: 300px;
        height: 160px;
    }

.configuration-cards-container {
    max-width: 1400px
}

@media (max-width: 700px) {
    .configuration-cards .configuration-card,
    .configuration-cards .configuration-card-add-new {
        width: 100%
    }
}

.configuration-cards .configuration-card-add-new {
    color: white;
    font-size: 20pt;
}

.configuration-cards .configuration-card-title {
    color: white;
    font-size: 20pt;
    margin: 10px 20px;
    display: block;
}

.configuration-cards .configuration-card-subtitle {
    color: white;
    margin: 10px 20px;
    display: block;
}

.configuration-cards .configuration-card .configuration-card-header {
    background-color: var(--c-bg-config-card-header);
    height: 200px;
    overflow: hidden;
    position: relative
}

.configuration-cards .configuration-card .configuration-card-meta {
    -moz-transition-duration: .4s;
    -moz-transition-property: max-height;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-duration: .4s;
    -o-transition-property: max-height;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition-duration: .4s;
    -webkit-transition-property: max-height;
    -webkit-transition-timing-function: ease-in-out;
    bottom: 5%;
    color: var(--c-color-theme-general);
    font-size: .78em;
    max-height: 0;
    overflow: hidden;
    padding: 0 5%;
    position: absolute;
    text-transform: uppercase;
    transition-duration: .4s;
    transition-property: max-height;
    transition-timing-function: ease-in-out
}

.configuration-cards .configuration-card .configuration-card-summary {
    padding: 5% 5% 3%
}

.configuration-cards .configuration-card .configuration-card-title {
    color: white;
    margin: 10px 20px;
}

    .configuration-cards .configuration-card .configuration-card-title h3 {
        font-size: 1.3em;
        padding: 0 3.5%
    }

.configuration-cards .configuration-card span {
    display: block
}

.configuration-cards .configuration-card:hover {
    background-color: var(--c-bg-config-card-hover);
    color: var(--c-color-theme-general)
}

.configuration-cards .configuration-card-add-new:hover {
    background-color: var(--c-bg-config-add-new-card-hover) !important;
}

@keyframes hover-animation {
    0% {
        opacity: .5
    }

    100% {
        opacity: 1
    }
}

.configuration-cards .configuration-card-add-new {
    background: inherit;
    background-color: var(--c-bg-config-add-new-card);
}

.configuration-cards .configuration-card.display-card {
    background: inherit;
    height: unset;
    pointer-events: none;
    width: -webkit-fill-available;
}

    .configuration-cards .configuration-card.display-card .configuration-card-title {
        position: relative
    }

    .configuration-cards .configuration-card.display-card:hover, .configuration-cards .configuration-card.display-card:focus {
        background: inherit;
        color: inherit
    }

.configuration-cards .configuration-card:hover .configuration-card-meta, .configuration-cards .configuration-card:focus .configuration-card-meta {
    max-height: 1.5em
}

.display-card .configuration-card-buttons .button-form .button {
    pointer-events: all
}
