/* LAYOUT */

HTML {
    min-height: 100vh;
    overflow-x: hidden;
}

BODY {
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.9rem;
    background-color: #FFF;
    color: #4D4F4F;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 133px auto 50px;
    grid-row-gap: 0;
    min-height: 100vh;
}
/*
header,
footer {
    grid-column: 1 / span 5;
}

main {
    grid-column: 1 / span 5;
    min-height: calc(100vh - 223px);
}

*/
/*
main {
    grid-column: 1 / span 3;
    min-height: calc(100vh - 223px);
}

aside {
    grid-column: span 2;
}
*/

HEADER .row,
FOOTER .row {
    height: 50px;
}

HEADER .row.bg-gris {
    height: 45px;
}

HEADER .row.menu-nav-app {
    height: 21px;
}
/*
@media (max-width: 700px) {
    main,
    aside {
        grid-column: 1 / span 5;
    }
}*/

::-moz-selection {
    /* Code for Firefox */
    background: yellow;
}

::selection {
    background: yellow;
}


/* GENERAL */

H1 {
    font-size: 25px;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
}

H1.titol-aplicatiu {
    padding: 20px 0px;
}

H2 {
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana, Arial, sans-serif;
}

H2.blanco {
    color: #fff;
}

H3 {
    font-size: 12px;
}

.semibold {
    font-family: Verdana, Arial, sans-serif;
    font-weight: 600;
}

.bg-gris {
    background-color: #929292;
    color: #fff;
}

.bg-gris-claro {
    background-color: rgb(248, 247, 247);
    color: #000;
}

.bg-negro {
    background-color: #000;
}

.rojo {
    color: #b12525;
}

.blanco {
    color: #fff;
}

.gris {
    color: #999;
}

A.rojo {
    color: #b12525;
    text-decoration: underline;
}

A.rojo:hover {
    text-decoration: none;
}

A.blanco {
    color: #fff;
    text-decoration: none;
}

A.blanco:hover {
    text-decoration: underline;
}

.btn-frm:hover {
    color: #fff;
    background-color: #D10707;
}

.btn-frm {
    font-size: 15px;
    color: #fff;
    background-color: #b12525;
    border-radius: 0rem;
    min-width: 160px;
    min-height: 40px;
    padding: 2px 2px;
    transition: color .05s ease-in-out, background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
    margin: 30px 10px;
}

.btn-frm.disabled,
.btn-frm.disabled:hover {
    font-size: 15px;
    color: #fff;
    background-color: #999999;
    border-radius: 0rem;
    min-width: 150px;
    min-height: 40px;
    padding: 2px 2px;
    transition: color .05s ease-in-out, background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
    margin: 30px 10px;
}

.btn-frm:focus {
    box-shadow: 0px 0px 0;
}

.btn-frm-upload:hover {
    color: #fff;
    background-color: #D10707;
}

.btn-frm-upload {
    font-size: 11px;
    color: #fff;
    background-color: #b12525;
    border-radius: 5px;
    padding: 10px 10px;
    transition: color .05s ease-in-out, background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
}

UL {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

LI {
    list-style-type: none;
}

.cursor {
    cursor: pointer;
}

.form-control::placeholder {
    color: #999999;
    opacity: 1;
}

.form-control::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #999999;
}

.form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #999999;
}

.form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #999999;
}

.form-control::-moz-placeholder {
    color: #999999;
    opacity: 1;
}

.placeholder {
    /* Most modern browsers support this now. */
    color: #999999;
}

.editable {
    background-color: #fffece;
}

FOOTER {
    font-size: 11px;
}


/* MENU NAVEGACION PERFIL*/

.font-negro-menu {
    color: #4D4F4F;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #4D4F4F;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link {
    color: #4D4F4F;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #4D4F4F;
    background-color: #eee;
}

.navbar {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0rem;
}

.row.menu-nav-app {
    height: auto;
    padding: 0px;
}

.row.menu-nav-app .col-sm {
    background-color: #F5F5F6;
}


/* PLANTILLA */

.upload-box {
    min-width: 310px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.upload-box #plantilla {
    width: 100%;
}


/* WIZARD */
.wizard {
    display: none;
}

.wizard.visible {
    display: block;
}
#inici.wizard {
    margin: 15px;
}
.wizard DIV.menu {
    width: 300px;
    height: calc(100% - 30px) !important;
}
}
#dades-basiques UL .preview SPAN{
    margin-left: 5px;
}
I.fa-trash-alt {
    margin-right: 5px;
}
#trumbowyg-icons {
    display: none;
}
UL.menu A {
    color: #000;
    text-decoration: none;
}
UL.menu A:hover {
    color: #D10707;
    text-decoration: none;
}
UL.menu A.active {
    color: #b12525;
    text-decoration: none;
}
UL.menu A.active:hover {
    color: #D10707;
    text-decoration: none;
}
UL.menu A.disabled {
    color: #999999;
    text-decoration: none;
}
UL.menu A.disabled:hover {
    color: #999999;
    text-decoration: none;
}
.col-primary-button {
    color: #55acee;
}
.btn-primary {
    color: #fff;
    background-color: #55acee;
    border-color: #55acee;
}
.col-secondary-button {
    color: #00a78e;
}
.btn-success {
    color: #fff;
    background-color: #00a78e;
    border-color: #00a78e;
}
.col-alert-button {
    color: #f96131;
}
.preview .placeholder {
    padding: 0px 10px 0px;
}
I.loader {
    padding: 0px 10px;
}
.preview .list-group-item {
    border: 0;
}
@media (max-width: 500px) {
    BODY {
        grid-template-rows: 300px auto auto;
    }
    UL.nav {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-row-gap: 2px;
    }
    .collapse.navbar-collapse {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-row-gap: 5px;
    }
}
@media (max-width: 320px) {
    HEADER .bg-gris {
        display: none;
    }

}