@font-face {
    font-family: "CourierPrime";
    src: url("fonts/CourierPrime-Regular.03ef685b34f3.ttf");
}

@font-face {
    font-family: "CourierPrime";
    font-style: italic;
    src: url("fonts/CourierPrime-Italic.ace04e0c2548.ttf");
}

html {
    overflow-y: scroll;
}

.modal {
    padding: 1em;
}

.modal-card, .modal-content {
	max-width: 25em;
}

.modal-background {
	/* background-color: rgba(0,0,0,.33); */
    background: #66666688;
    position: fixed;
}

.section {
    padding: 1.5rem;
}

.side-buttons .button {
    justify-content: left;
    z-index: 10;
}

.button:focus {
    outline: solid 2pt black;
}

@media screen and (min-width: 600px) {
    .mobile-only {
        display: none !important;
    }
    .hbox {
        display: flex;
        margin-top: 0.5em;
    }
    .side-buttons {
        flex-shrink: 0;
        padding-right: 0;
        width: 15em;
        position: fixed;
    }
    .main-section {
        margin-left: 16em;
    }
}

@media screen and (max-width: 599px) {
    .desktop-only {
        display: none !important;
    }
    .side-buttons {
        padding-bottom: 0;
    }
    .main-section {
        padding-top: 0;
    }
}

#page-title-mobile {
    background: #eff4f7;
    padding: 0.5em;
    padding-top: 0.75em;
    font-size: 1.1em;
}

#page-title-mobile h1 {
    font-weight: bold;
}

.navbar-right {
    position:absolute;
    right: 0;
}

.user-id, .user-is-coach, .user-is-expired {
	font-weight: bold !important;
}

.flow-card {
    display: inline-block;
    width: 22em;
    margin-right: 1em;
    margin-bottom: 1em;
    overflow-x:hidden;
    animation-duration: 0.5s;
    animation-name: top-bottom-leaf;
}

@keyframes top-bottom-leaf {
    from {
        transform: translateY(-1em);
        opacity: 0;
    }
  
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8pt;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #CCC;
    border-left: solid 3pt white;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #AAA; 
}

.hidden {
    display: none;
}

#localhost-label {
    position: fixed;
    bottom: 1em;
    left: 1em;
    font-weight: bold;
    color: red;
}

@media screen and (min-width: 600px) {
    form.language.logged {
        position: fixed;
        bottom: 1em;
        left: 1em;
    }
}

/* COULEURS */

/*      Barre du haut */

.navbar.is-light {
    background-color: #186488;
}

.navbar.is-light .title {
    color: white;
}

.navbar.is-light .navbar-brand > a.navbar-item:hover {
    background-color: transparent;
}

/*      Onglets */

.tabs.is-toggle li.is-active a {
    background-color: #186488;
    border-color: #186488;
}

.tabs.is-toggle li.is-active a:hover {
    background-color: #164960;
    border-color: #164960;
}

/*      Boutons principaux */

.button.is-primary {
    background-color: #186488;
}

.button.is-primary.is-hovered, .button.is-primary:hover {
    background-color: #164960;
}

.button.is-primary[disabled], fieldset[disabled] .button.is-primary {
    background-color: #6097b1;
}

/*      Boutons warning */

.button.is-warning {
    background-color: #e4942d;
}

.button.is-warning:hover,
.button.is-warning.is-hovered {
    background-color: #dd8f29;
}

.button.is-warning,
.button.is-warning:hover,
.button.is-warning.is-hovered,
.button.is-warning:active,
.button.is-warning:focus {
    color: white;
}

/*      Barre de progression */

.progress::-moz-progress-bar {
    background-color: #d38520;
}

.progress::-webkit-progress-value {
    background-color: #d38520;
}

/*      Boutons principaux en mode light */

.button.is-primary.is-light {
    background-color: #eff4f7;
    color: #164960;
}

.button.is-primary.is-light.is-hovered,
.button.is-primary.is-light:hover {
    background-color: #e6f0f7;
    color: #164960;
}

/*      Liens */

a {
    color: #186488;
}