/*** GENERAL **********************************************************************************************************/

html {
    overflow-y: scroll;
}

nav.navbar {
    background-color: #222;
}

section {
    padding-top: 100px;
    padding-bottom: 1px;
}

.container {
    margin-top: 100px;
}

span.newEvents {
    color: yellow;
}

.logoAccueil {
    background: url('../../files/ui/logo.svg') no-repeat;
    width: 200px;
    height: 40px;
    position: relative;
    top: 5px;
    margin: 0 60px 0 20px;
}

.nav-link {
    color: lightgray;
}

.nav-link:hover {
    color: #dc3545;
}

.scrollreveal, .scrollreveal-2 {
    visibility: hidden;
}

/*** HOMEPAGE *********************************************************************************************************/

h1.main-title, h2 {
    font-weight: bold;
    font-family: 'Poiret One', cursive;
}

h2.main-subtitle {
    font-family: 'Big Shoulders Display', cursive;
    font-size: 20px;
}

.carousel {
    margin: 70px 20px;
    border: solid white;
}

.carousel-inner {
    height: 420px;
    object-fit: contain;
}

img.d-block.img-fluid {
    top: -200px;
    position: relative;
}

.carousel-caption.d-none.d-md-block {
    position: fixed;
    top: 300px;
    text-shadow: 1px 1px black;
}

p.categoryDescription.homePageItemDescription {
    text-align: justify;
}

/*** PHOTOS ALBUMS ****************************************************************************************************/

.albumCard {
    width: 18rem;
    margin: 12px;
}

.albumThumbnail {
    height: 190px;
    object-fit: cover;
}

div.albumTitle {
    position: absolute;
    bottom: 78px;
    background-color: white;
    width: 100%;
    padding: 4px 6px 0px 6px;
    margin: 0 -20px;
    opacity: .6;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.album-link-elements {
    position: relative;
    margin: 0 0 20px 0;
}

h3.albumTitle {
    margin: 2px;
    font-size: 16px;
}

span.newAlbum {
    left: 12px;
    position: absolute;
    top: 10px;
}

span.nbPhotos {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 12px;
}

.form-signin {
    max-width: 480px;
    padding: 15px;
    margin: 0 auto;
}

/* UI ELEMENTS --------------------*/

.importantWord {
    font-weight: bold;
}

.importantRedWord, .connexionLink {
    font-weight: bold;
    color: #dc3545;
}

.externalLink {
    color: gray;
    font-weight: bold;
}

.availableAlbumThumbnail {
    margin: 4px;
    width: 32px;
    height: 32px;
}

.adminThumbnailEntity {
    margin: 2px;
    display: grid;
    float: left;
}

.thumbnail {
    border-radius: 4px;
    margin: 2px;
}

.btnAdminPhoto {
    position: absolute;
}

.deletePhotoBtn {
    top: 10px;
    left: 15px;
}

.pageMarker {
    text-decoration-color: #dc3545;
    text-decoration-line: overline;
}

.categoryDescription, .eventDescription {
    text-align: justify;
}

.eventDescription {
    font-size: 16px;
    color: #333;
}

.imageEvent {
    border-radius: 15px;
    border: 1px solid darkgray;
    width: 256px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 1px 5px 1px rgba(119, 119, 119, 0.5);
}

.eventBackground {
    display: block;
    background-color: rgba(211, 211, 211, 0.5);
    border-radius: 10px;
    border: 1px solid lightgrey;
    margin-bottom: 40px;
    box-shadow: 0px 1px 5px 1px rgba(119, 119, 119, 0.5);
    padding: 15px;
    z-index: 10;
}

.eventDetails {
    background: linear-gradient(rgba(211, 211, 211, 0), rgba(180, 180, 180, 0.5));
    border-radius: 10px;
    width: 100%;
    display: inline-block;
    box-shadow: 0px 1px 5px 1px rgba(119, 119, 119, 0.7);
    z-index: 20;
}

/*** LOGIN ************************************************************************************************************/

div.formField {
    position: relative;
}

i#formFieldMessage {
    position: absolute;
    top: 43px;
    right: 10px;
}

/*** ADMINISTRATION ***************************************************************************************************/

.adminNotifications {
    position: absolute;
    font-size: 0.5em;
    top: 4px;
    right: -4px;
}

div#adminTitle {
    border: 1px solid lightgray;
    background-color: rgba(211, 211, 211, 0.6);
}

.adminTab {
    color: #343a40;
}

a.nav-link.adminTab:hover {
    color: #343a40;
    background-color: lightgray;
}

a.nav-link.adminTab.active {
    background-color: #dc3545;
}

#loader {
    position: absolute;
    margin-left: -19px;
    height: 38px;
    display: none;
}

li.nav-item {
    position: relative;
}

.newUsers {
    position: absolute;
    right: 15px;
    top: 11px;
}

/*** MODALS ********************************************************/

.modal-header {
    background: black url(../../files/ui/logo.png) no-repeat 14px;
    color: white;
    background-size: 32px;
    border-radius: 4px 4px 0px 0px;
}

.modal-title {
    padding-left: 40px;
}

button.close {
    color: white;
}

.modal-footer {
    background-color: lightgrey;
    border-radius: 0px 0px 4px 4px;
}

.previewArea {
    width: 64px;
    height: 64px;
    border-radius: 5px;
}

.btn-active {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-inactive {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-light {
    color: #212529;
    background-color: #eee;
    border-color: #ddd;
}

/*** CATEGORIES ****************************************************/
.progress.addCategory, .progress.hrProgress {
    height: 1px;
}

/*** EVENTS ********************************************************/
div#cke_addEventForm_description, .illustrationThumbnail {
    border-radius: .25rem;
}

.cke_top {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.cke_inner {
    border-radius: .25rem;
}

.cke_contents {
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

span.cke_bottom {
    display: none;
}

.availableAlbums {
    padding: 10px;
    margin-bottom: -18px;
}

.progress.addEvent, .progress.hrProgress {
    height: 1px;
}

.connexionLink {
    color: #dc3545;
}

@media screen and (min-width: 1200px) {
    body#home {
        background: url("../../files/ui/backgrounds/accueilMin1200.jpg") no-repeat bottom fixed;
    }

    body#infos-cse {
        background: url("../../files/ui/backgrounds/infos-ceMin1200.jpg") no-repeat bottom fixed;
    }

    body#oeuvres-sociales {
        background: url("../../files/ui/backgrounds/oeuvres-socialesMin1200.jpg") no-repeat bottom fixed;
    }

    body#partenariats {
        background: url("../../files/ui/backgrounds/bons-plansMin1200.jpg") no-repeat bottom fixed;
    }

    body#sorties {
        background: url("../../files/ui/backgrounds/sortiesMin1200.jpg") no-repeat bottom fixed;
    }

    body#albums-photos, body#photo {
        background: url("../../files/ui/backgrounds/albums-photosMin1200.jpg") no-repeat bottom fixed;
    }

    body#administration, body#contactUs, body#userAccount {
        background: url("../../files/ui/backgrounds/adminMin1200.jpg") no-repeat bottom fixed;
    }

    /*div#evenement {*/
    /*display: inline-block;*/
    /*}*/
    /*img#illustrationEvenement {*/
    /*float: left;*/
    /*}*/
    /*div#descriptionEvenement {*/
    /*margin-left: 120px;*/
    /*width: 840px;*/
    /*text-align: justify;*/
    /*}*/
    /*#footer {*/
    /*text-align: center;*/
    /*position: fixed;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 30px;*/
    /*padding-top: 5px;*/
    /*background-color: darkgray;*/
    /*}*/

}

/*@media screen and (min-width: 992px) and (max-width: 1199px) {*/

/*}*/

/*@media screen and (min-width: 768px) and (max-width: 991px) {*/

/*}*/

/*@media screen and (max-width: 767px) {*/

/*}*/

/*@media screen and (max-width: 480px) {*/

/*}*/
.photoArea {
    margin-right: -44px;
}

.album-thumbnail {
    height: 80px;
    margin: 2px;
}

.btn-slider-inactive, .btn-slider-active, .btn-delete-photo {
    border-radius: 8px;
    position: relative;
    top: -28px;
    width: 22px;
    height: 18px;
}

.btn-slider-inactive, .btn-slider-active {
    right: 52px;
}

.btn-delete-photo {
    right: 49px;
}


.btn-slider-inactive {
    background-color: #0d6ed7;
}

.btn-slider-active {
    background-color: #2e9846;
}

.btn-slider-icon {
    position: relative;
    top: -7px;
    right: 5px;
}

.btn-delete-icon {
    position: relative;
    top: -7px;
    right: 3px;
}

.forgotten-password {
    font-size: 10px;
    font-style: italic;
}

img.photoFull {
    border: 1px solid darkgrey;
    padding: 5px;
    border-radius: 50px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #dc3545;
    background-color: #dc3545 !important;
}

/*** CHECKBOXES ****************************************************/

.custom-control-label {
    position: initial !important;
    padding-top: 0; /* In some case we have to reajust, we keep it to not have to think ! */
    margin-left: -20px;
}

/*** TOOLTIPS ******************************************************/

.bs-tooltip-bottom .arrow {
    margin: -4px 0 0 0;
}

.tooltip-inner {
    margin: -4px 0 0 0;
    padding: 10px;
    border: 1px solid lightgray;
    background-color: rgba(211, 211, 211, 0.6);
    color: black;
    text-align: justify;
}

.tooltip.show {
    opacity: 1;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: darkgrey;
}