/*
===============================================================================
 This file contain extra CSS rules to customize the YunoHost user portal and
 can be used to customize app tiles, buttons, etc...
===============================================================================
*/

:root {
    --addapps-blue: #133596;
    --addapps-pink: #bf2ab8;
    --addapps-grey: #ebecee;
}

/*
===============================================================================
== THE LOGIN PAGE
===============================================================================
*/

.ynh-user-portal {
    background-color: white;
}

.ynh-logo {
    background-image: url("./logo.png") !important;
}

.messages.info {
	color: white;
    background: var(--addapps-pink);
}

.login-form .btn {
    background-color: var(--addapps-blue);
}

.login-form .btn:hover {
    background-color: var(--addapps-pink);
}

.login-form .form-text {
    border: 1px solid var(--addapps-blue);
}

.login-form label::before {
    background: none;
    color: var(--addapps-blue);
}

/*
===============================================================================
== THE LEFT PART OF THE HEADER
===============================================================================
*/

.logged a.user-container {
    max-width: 400px;
}

.logged a.user-container,
.logged a.user-container .user-mail {
    color: var(--addapps-blue);
}

.logged a.user-container:hover,
.logged a.user-container:hover .user-mail,
.logged a.user-container:hover .user-username::after {
    color: var(--addapps-pink);
}

.logged a.user-container::before {
    color: white;
    background: var(--addapps-blue);
}

.logged a.user-container:hover::before {
    color: white;
    background: var(--addapps-pink);
}

.logged a.user-container:hover::after {
    color: var(--addapps-pink);
}

/*
===============================================================================
== THE RIGHT PART OF THE HEADER
===============================================================================
*/

.logged .user-menu a,
.logged .user-menu a::before {
    color: var(--addapps-blue);
}

.logged .user-menu a:hover,
.logged .user-menu a:hover::before {
    color: var(--addapps-pink);
}

/*
===============================================================================
== THE FOOTER
===============================================================================
*/

.logged .footer nav {
    border-top: 1px solid var(--addapps-pink);
}

.logged .footer a {
    color: var(--addapps-blue);
}

.logged .footer a:hover {
    color: var(--addapps-pink);
}

.logged .footer a::before {
    color: var(--addapps-pink);
}

.logged .footer nav a.link-documentation {
    display: none;
}

/*
===============================================================================
== THE USER PROFILE
===============================================================================
*/

.logged .edit label.control-label {
    background: var(--addapps-blue);
}

.logged .edit input.form-text {
    background: white;
    color: black;
    border: 1px solid var(--addapps-blue);
}

.logged .edit input.form-text:disabled {
    background: var(--addapps-grey);
    color: black;
}

.logged .edit input.classic-btn,
.logged .edit a.validate-btn {
    background: var(--addapps-blue);
}

.logged .edit input.classic-btn:hover,
.logged .edit a.validate-btn:hover {
    background: var(--addapps-pink);
}

/*
===============================================================================
== THE CARDS COLORS
===============================================================================
*/

.bluebg {
    background: #3498DB!important;
}
.bluebg:hover:after,
.bluebg:focus:after,
.bluebg:hover:before,
.bluebg:focus:before {
    background: #16527A!important;
}

.purplebg {
    background: #9B59B6!important;
}
.purplebg:hover:after,
.purplebg:focus:after,
.purplebg:hover:before,
.purplebg:focus:before {
    background: #532C64!important;
}

.redbg {
    background: #E74C3C!important;
}
.redbg:hover:after,
.redbg:focus:after,
.redbg:hover:before,
.redbg:focus:before {
    background: #921E12!important;
}

.orangebg {
    background: #F39C12!important;
}
.orangebg:hover:after,
.orangebg:focus:after,
.orangebg:hover:before,
.orangebg:focus:before {
    background: #7F5006!important;
}

.greenbg {
    background: #2ECC71!important;
}
.greenbg:hover:after,
.greenbg:focus:after,
.greenbg:hover:before,
.greenbg:focus:before {
    background: #176437!important;
}

.darkbluebg {
    background: #34495E!important;
}
.darkbluebg:hover:after,
.darkbluebg:focus:after,
.darkbluebg:hover:before,
.darkbluebg:focus:before {
    background: #07090C!important;
}

.lightbluebg {
    background: #6A93D4!important;
}
.lightbluebg:hover:after,
.lightbluebg:focus:after,
.lightbluebg:hover:before,
.lightbluebg:focus:before {
    background: #2B5394!important;
}

.yellowbg {
    background: #F1C40F!important;
}
.yellowbg:hover:after,
.yellowbg:focus:after,
.yellowbg:hover:before,
.yellowbg:focus:before {
    background: #796307!important;
}


.lightpinkbg {
    background: #F76F87!important;
}
.lightpinkbg:hover:after,
.lightpinkbg:focus:after,
.lightpinkbg:hover:before,
.lightpinkbg:focus:before {
    background: #DA0C31!important;
}

/* Following colors are not used yet */
.pinkbg {
    background: #D66D92!important;
}
.pinkbg:hover:after,
.pinkbg:focus:after,
.pinkbg:hover:before,
.pinkbg:focus:before {
    background: #992B52!important;
}

.turquoisebg {
    background: #1ABC9C!important;
}
.turquoisebg:hover:after,
.turquoisebg:focus:after,
.turquoisebg:hover:before,
.turquoisebg:focus:before {
    background: #0B4C3F!important;
}
.lightyellow {
    background: #FFC973!important;
}
.lightyellow:hover:after,
.lightyellow:focus:after,
.lightyellow:hover:before,
.lightyellow:focus:before {
    background: #F39500!important;
}
.lightgreen {
    background: #B5F36D!important;
}
.lightgreen:hover:after,
.lightgreen:focus:after,
.lightgreen:hover:before,
.lightgreen:focus:before {
    background: #77CF11!important;
}
.purpledarkbg {
    background: #8E44AD!important;
}
.purpledarkbg:hover:after,
.purpledarkbg:focus:after,
.purpledarkbg:hover:before,
.purpledarkbg:focus:before {
    background: #432051!important;
}