/* Échec de l'agrandissement. Renvoi du contenu non agrandi.
(1165,28): run-time error CSS1031: Expected selector, found ')'
(1165,28): run-time error CSS1025: Expected comma or open brace, found ')'
 */


/*************************************************************************/
/******************************** GENERAL ********************************/
/*************************************************************************/
/*#region General*/

body {
    padding-top: 75px;
    padding-bottom: 50px;
    background-color: #292841;
    color: #fff;
}

.jumbotron {
    background-color: #5865F2;
}

h2 {
    margin-top: 30px;
    color: #fff;
    padding-right: 8px
}

h3, h4 {
    margin-top: 20px;
    color: #fff;
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: middle;
}

.fa-refresh {
    vertical-align: middle;
    font-size: 27px;
}

.vjs-big-play-button {
    top: 50% !important;
    left: 50% !important;
    transform: translateY(-50%) translateX(-50%);
}

.permalinkBox {
    margin: 10px;
    border: 1px dashed grey;
    border-radius: 10px;
    padding-top: 10px;
}

.fc-scroller {
    overflow: scroll;
}

.red {
    color: red;
}

.green {
    color: green;
}

.badge {
    display: inline-block;
    min-width: 15px;
    padding: 4px 7px;
    font-size: 15px;
    font-weight: bolder;
    line-height: 1;
    color: #5865F2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #fff;
    border-radius: 15px;
}

@media(max-width: 1024px) {
    .showOnDesktop {
        display: none;
    }
}

@media(max-width: 990px) {

    .col-xs-0 {
        display: none;
    }
}

@media(max-width: 500px) {

    .showOnTablet {
        display: none;
    }
}

.dropdown-menu > li > span:hover, .dropdown-menu > li > span:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #428bca;
}

.dropdown-menu > li > span {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}

.ms-pr {
    width: 170px;
}

audio {
    max-width: inherit;
    max-width: -webkit-fill-available;
}


/*#endregion */


/****************************************************************************/
/******************************** ESPACEMENT ********************************/
/****************************************************************************/
/*#region Spacing*/


.bottom-margin {
    margin-bottom: 20px;
}

.bottom-margin-30 {
    margin-bottom: 30px;
}

.bottom-margin-60 {
    margin-bottom: 30px;
}

.top-margin {
    margin-top: 20px;
}

.top-margin-30 {
    margin-top: 30px;
}

.top-margin-60 {
    margin-top: 60px;
}

.smallPadding {
    padding-left: 5px;
    padding-right: 5px;
}

.noLateralPadding {
    padding-left: 0px;
    padding-right: 0px;
}

/*#endregion */
/***********************************************************************/
/******************************** LIENS ********************************/
/***********************************************************************/
/*#region Links*/
a,
.linkToPage {
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
    color: #5865F2;
    text-decoration: none;
    font-weight: bold;
}

    a:hover,
    .linkToPage:hover {
        font-weight: bold;
        color: #3F48A8;
        text-decoration: none;
    }


/*#endregion */


/*************************************************************************/
/******************************** BOUTONS ********************************/
/*************************************************************************/
/*#region Buttons*/


.odRetourAngleAbsolute {
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 30px;
    padding-left: 13px;
    padding-top: 4px;
    color: orange;
    border-right: 3px solid #CD7D2B;
    border-bottom: 2px solid #CD7D2B;
    font-size: 18px;
    font-weight: bold;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}

    .odRetourAngleAbsolute:hover {
        color: #fff;
        background-color: #CD7D2B;
        border-right: 3px solid #b56e26;
        border-bottom: 2px solid #b56e26;
        font-weight: bold;
    }

.odRetourAngle {
    /*margin-top: 10px;*/
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding-left: 13px;
    padding-top: 4px;
    color: orange;
    border-right: 3px solid #CD7D2B;
    border-bottom: 2px solid #CD7D2B;
    font-size: 18px;
    font-weight: bold;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}

    .odRetourAngle:hover {
        color: #fff;
        background-color: #CD7D2B;
        border-right: 3px solid #b56e26;
        border-bottom: 2px solid #b56e26;
        font-weight: bold;
    }

.odRetourButton {
    font-size: 16px;
    color: #fff;
    background-color: #FF9D3A;
    border-right: 3px solid #CD7D2B;
    border-bottom: 2px solid #CD7D2B;
    font-weight: bold;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}

    .odRetourButton:hover {
        font-size: 16px;
        color: #fff;
        background-color: #CD7D2B;
        border-right: 3px solid #CD7D2B;
        border-bottom: 2px solid #CD7D2B;
        font-weight: bold;
    }

.odDefaultButton {
    color: #fff;
    background-color: #5865F2;
    border-right: 3px solid #3F48A8;
    border-bottom: 2px solid #3F48A8;
    text-decoration: none;
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
}

    .odDefaultButton:hover {
        color: #fff;
        background-color: #3F48A8;
        border-right: 3px solid #5865F2;
        border-bottom: 2px solid #5865F2;
        border-color: #adadad;
    }

.odSuccessButton {
    background-color: #74D14D;
    border-right: 3px solid #6cc248;
    border-bottom: 2px solid #6cc248;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
}

    .odSuccessButton:hover {
        color: #fff;
        border-color: #adadad;
        background-color: #6cc248;
        border-right: 3px solid #63AB45;
        border-bottom: 2px solid #63AB45;
    }

.odOrangeButton {
    color: #fff;
    background-color: #FF9D3A;
    border-right: 3px solid #CD7D2B;
    border-bottom: 2px solid #CD7D2B;
    text-decoration: none;
    font-weight: bold;
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
}

    .odOrangeButton:hover {
        color: #fff;
        background-color: #CD7D2B;
        border-right: 3px solid #FF9D3A;
        border-bottom: 2px solid #FF9D3A;
    }

.odSmallButton {
    padding: 0px 4px 0px 4px;
}

/*#endregion */


/*****************************************************************************/
/******************************** FORMULAIRES ********************************/
/*****************************************************************************/
/*#region Forms*/

/* Set width on the form input elements since they're 100% wide by default */
input[type="text"],
select,
textarea {
    max-width: 100%;
    width: 100%;
}

.form-vertical {
    margin-top: 40px;
}

.form-control {
    display: block;
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #111;
    vertical-align: middle;
    background-color: #fff;
    border: 3px solid #5865F2;
    border-radius: 5px;
    margin-bottom: 10px;
}

    .form-control:focus {
        border-color: #66afe9;
        border: 5px solid #5865F2;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }

.form-inline .form-control {
    margin-bottom: 0px;
}


/*#endregion */


/*********************************************************************/
/******************************** NAV ********************************/
/*********************************************************************/
/*#region Nav*/

nav {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 10;
}

    nav .menuFiller {
        background-color: #1C1B29;
        color: #5865F2;
        height: 75px;
    }

    nav .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    nav .col-xs-2,
    nav .col-xs-1 {
        padding-right: 0px;
        padding-left: 0px;
    }

    nav .menuOption {
        background-color: #1C1B29;
        color: #5865F2;
        text-align: center;
        height: 75px;
        line-height: 75px;
        font-size: 2em;
        cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
    }

        /*nav .menuOption:hover {
            font-weight: bold;
            background-color: white;
            color: black;
        }*/

        nav .menuOption.active {
            background-color: #5865F2;
            color: #1C1B29;
        }



.retourButton {
    /*font-size: 16px;
    color: #fff;
    background-color: #FF9D3A;
    border-right: 3px solid #CD7D2B;
    border-bottom: 2px solid #CD7D2B;
    font-weight: bold;*/
}

    .retourButton:hover {
        /*font-size: 16px;
        color: #fff;
        background-color: #CD7D2B;
        border-right: 3px solid #b56e26;
        border-bottom: 2px solid #b56e26;
        font-weight: bold;*/
    }

/*.retourButtonAngle {
    font-size: 60px;
    color: #FF9D3A;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}*/


#page {
    /*padding-top: 20px;*/
}

.homeTabs,
.driveTabs {
    position: sticky;
    top: 75px;
    z-index: 10;
    margin-left: -15px;
    margin-right: -15px;
}

@media(max-width: 400px) {
    .driveTabs,
    .homeTabs {
        font-size: 0.9em;
    }
}

.homeTabsContainer,
.driveTabs {
    padding-right: 0px;
    padding-left: 0px;
}

    .homeTabs .nav-tabs,
    .driveTabs .nav-tabs {
        background-color: #292841;
        color: white;
        padding-top: 5px;
        margin-bottom: 10px;
        font-size: 1.4em;
        border-bottom-width: 5px;
        border-color: #5865F2;
    }

.agendaListDisplayContainer .nav-tabs,
.agendaCalendarDisplayContainer .nav-tabs {
    position: sticky;
    top: 150px;
    z-index: 10;
    background-color: #292841;
    color: white;
    padding-top: 5px;
    margin-bottom: 30px;
    font-size: 1.4em;
    border-bottom-width: 5px;
    border-color: #5865F2;
}

.nav-item {
}

.nav-tabs a {
    color: #ffffff;
}

.nav-tabs > li.burgerNavItem {
    float: right;
    padding-top: 5px;
}

.burgerMenu {
    display: inline-block;
    z-index: 11;
}

.nav-tabs .nav-link {
    background-color: #292841;
    /*border-bottom: 1px solid #dddddd;*/
    display: inline-block;
}

    .nav-tabs .nav-link.active {
        /*border-color: #ffffff;
        background-color: #292841;
        border-bottom: 1px solid #292841;*/
        border-color: #1C1B29;
        background-color: #5865F2;
        border: 3px solid #5865F2;
    }

.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd;
    background-color: #1C1B29;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

/*#endregion */


/************************************************************************/
/******************************** AGENDA ********************************/
/************************************************************************/
/*#region Agenda*/
/* /Agenda/Index */
/*    --> barre actions à prendre */
.actionsContainer {
    background-color: #5865F2;
    color: white;
    margin-bottom: 40px;
}

    .actionsContainer a {
        color: white;
        text-decoration: none;
    }


/*    --> barre actions (boutons repe/propo/concert/event/vacances/doodles) */

.agendaButtonsForDetailsContainer {
    position: sticky;
    top: 75px;
    z-index: 10;
    background-color: #1C1B29;
    padding-top: 20px;
}

/*    --> full calendar */

.agendaCalendarDisplayContainer .fc-toolbar {
    position: sticky;
    /*top: 204px;*/
    top: 213px;
    padding-top: 10px;
    padding-bottom: 5px;
    z-index: 9;
    background-color: #292841;
}

.fc-view, .fc-view > table {
    position: relative;
    z-index: 1;
    color: #fff;
}

.fc-day-number.fc-state-highlight {
    color: black;
}

.fc-unthemed tbody {
    border-color: #5865F2;
}

.fc-ltr .fc-basic-view .fc-day-number {
    text-align: right;
    font-size: 16px;
    font-weight: bold;
}


td.fc-day.fc-widget-content:hover {
    background-color: #1C1B29;
    cursor: pointer;
}

.fc th {
    border-style: solid;
    border-width: 1px;
    padding: 0;
    vertical-align: top;
    font-size: 18px;
    font-weight: bold;
}




/* Agenda : général*/

.rehearsalActionButtonsContainer,
.propoActionButtonsContainer,
.unavailabilityActionButtonsContainer {
    padding: 10px;
}

.jauge {
    width: 100px;
    /*float: right;*/
    border: 2px solid black;
    position: absolute;
    right: 7px;
    top: 7px;
}

.jaugeItem {
    height: 10px;
    float: left;
}



/* Agenda GetAgendaForDay */

.prevDayAgenda,
.nextDayAgenda {
    background-color: #5865F2;
    border: none;
    color: #fff;
    font-size: 25px;
    margin-top: 67px;
}

.agendaEventOfTheDayDayOfWeek {
    font-size: 1.7em;
    color: #fff;
}

.agendaEventOfTheDayDate {
    font-size: 1.4em;
}

.dayUnavailabilities {
    font-size: 1.2em;
}

.dayScheduleConflicts {
    font-size: 1.2em;
}

/* Agenda Simple Views */

.agendaSimpleContainer {
    background-color: #1C1B29;
    margin-bottom: 15px;
    padding: 15px;
    position: relative;
    border-left: 15px solid #5865F2;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}

    .agendaSimpleContainer:hover {
        border-left: 15px solid #3F48A8;
    }

.rehearsalContainer {
    background-color: #262537;
}

.agendaSimpleDateTime {
    height: 90px;
    float: left;
    width: 30%;
}

.agendaDoubleDateTime {
    width: 50%;
    height: 90px;
    float: left;
}

.agendaSimpleDayOfWeek {
    position: absolute;
    left: 43px;
    font-weight: 600;
    color: orange;
}

.agendaSimpleDate {
    font-size: 1.5em;
    position: absolute;
    top: 32px;
    left: 30px;
    color: #fff;
}

.agendaSimpleYear {
    position: absolute;
    top: 56px;
    left: 41px;
    color: #fff;
}

.agendaSimpleTime {
    font-size: 1.1em;
    position: absolute;
    top: 81px;
    left: 35px;
    color: orange;
    font-weight: 600;
}

.agendaSimpleFromDateLabel {
    position: absolute;
    left: 16px;
    top: 18px;
    color: white;
    font-size: 0.9em;
}

.agendaDoubleToDateLabel {
    position: absolute;
    left: 88px;
    top: 18px;
    color: white;
    font-size: 0.9em;
}

.agendaDoubleDayOfWeek {
    position: absolute;
    left: 110px;
    color: orange;
}

.agendaDoubleDate {
    font-size: 1.5em;
    position: absolute;
    top: 32px;
    left: 100px;
}

.agendaDoubleYear {
    position: absolute;
    top: 56px;
    left: 110px;
    color: #fff;
}

.agendaDoubleTime {
    font-size: 1.1em;
    position: absolute;
    top: 81px;
    left: 103px;
    color: orange;
    font-weight: 600;
}

.agendaSimpleDetails {
    position: relative;
    height: 90px;
    width: 70%;
    float: left;
}

.agendaDoubleDetails {
    position: relative;
    height: 70px;
    width: 50%;
    float: left;
}

.eventTypeFlag {
    position: absolute;
    font-weight: 600;
    color: orange;
    top: 0px;
    left: 20px;
}

.agendaSimpleBody {
    position: absolute;
    left: 20px;
    top: 25px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 17px;
}

.agendaSimpleLocation {
    position: absolute;
    left: 20px;
    top: 75px;
    font-size: 1em;
}


/* Agenda : Repe */

.rehearsalDayOfWeek {
    margin-bottom: 0px;
    font-size: 1.4em;
    color: orange;
    font-weight: bold;
}

.rehearsalDate {
    font-size: 2em;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
}

.rehearsalYear {
    margin-bottom: 0px;
    font-size: 1.4em;
}

.rehearsalTime {
    color: grey;
    font-size: 1.4em;
}

.rehearsalComment {
    padding-left: 65px;
}

.rehearsalJaugeContainer {
    width: 114px;
    margin: 0 auto;
    height: 40px;
    position: relative;
}


/* Agenda : Propo */

.memberPropoQuickLook {
    display: inline-block;
    height: 20px;
    width: 10px;
    border: 1px solid black;
    margin: 5px 2px 0px 2px;
}

.memberPropoIcon {
    padding: 5px;
    border-radius: 50%;
    width: 25px;
    text-align: center;
}

.memberOkForPropo {
    background-color: green;
    color: white;
}

.memberMaybeForPropo {
    background-color: yellow;
    color: black;
}

.memberKoForPropo {
    background-color: red;
    color: white;
}

.memberNotSpecifiedForPropo {
    background-color: #5865F2;
}


.propoAction {
    margin-right: 7px;
}

.propoBandMembersDecisionList {
    padding: 15px;
}

.propoInfosLeft {
    margin-bottom: 40px;
    padding-left: 10px;
}

.propoLocation {
    font-size: 1.5em;
    padding-left: 15px;
}

.propoDate {
    font-size: 1.6em;
    padding-left: 15px;
}

.propoTime {
    font-size: 1.2em;
    font-weight: bold;
    color: orange;
    padding-left: 15px;
}

.propoOrgas {
    font-size: 1.2em;
    padding-left: 15px;
}

.propoComment {
    padding-left: 15px;
}

.propoMyDecisionContainer {
    padding-left: 15px;
}

.propoForceConvert {
    padding-left: 25px;
    padding: 10px;
    margin-bottom: 40px;
    border: 2px solid orange;
}

.propoBandMemberDecision {
    padding-left: 15px;
}

.propoLieuLabel {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

.propoLieuAddress {
    padding-left: 15px;
    padding-bottom: 10px;
    font-weight: bold;
    color: orange;
}

.propoLieuLocation {
    padding-left: 15px;
    font-weight: bold;
}

.propoLieuCountry {
    padding-left: 15px;
}


/* Agenda : Concert */

.concertContainer {
    position: relative;
}

.coverPictureContainer {
    height: 250px;
}

.coverContainer {
    position: relative;
    height: 250px;
}

.bandInConcert {
    background-color: gainsboro;
    padding: 5px;
    margin: 5px;
    display: inline-block;
    border-radius: 7px;
    font-weight: bold;
}

.concertActionButtonsContainer {
    position: absolute;
    top: 15px;
    right: 30px;
}

.concertTitleContainer {
    font-size: 2.2em;
}

.concertLocation {
    font-size: 1.5em;
    padding-left: 15px;
}

.concertDate {
    font-size: 1.6em;
    padding-left: 15px;
}

.concertTime {
    font-size: 1.2em;
    color: grey;
    padding-left: 15px;
    line-height: 29px;
}

.concertPrice {
    font-size: 1.2em;
    color: grey;
    padding-left: 15px;
    line-height: 29px;
}

.concertOrgas {
    font-size: 1.2em;
    padding-left: 15px;
}

.concertDesc {
    padding-left: 15px;
    white-space: pre-line;
}

.concertLinks {
    padding-left: 15px;
}

.concertVisibilityTitle {
    margin-top: 0px;
}

.concertVisibility {
    padding-left: 15px;
}


/* Agenda : Other Event */

.otherEventContainer {
    position: relative;
}

.editOtherEventCoverButton,
.editConcertCoverButton {
    position: absolute;
    top: 7px;
    left: 21px;
}


/*#endregion */


/************************************************************************/
/******************************** PROFIL ********************************/
/************************************************************************/
/*#region Profil*/


.logLink {
    background-color: #1C1B29;
    margin-bottom: 15px;
    padding: 15px;
    position: relative;
    border-right: 15px solid #3F48A8;
}

.coverPicture {
    height: 250px;
    width: 100%;
    opacity: 0.8;
    object-fit: cover;
    /*object-position: 50% 35%;*/
}

.addNewBandButton {
    color: #fff;
    font-weight: 600;
    background-color: #74D14D;
    border: none;
}

.updateCoverPosLeft {
    position: absolute;
    top: 70px;
    left: 20px;
    text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #fff,0px 0px 10px #fff;
}

.updateCoverPosRight {
    position: absolute;
    top: 70px;
    left: 50px;
    text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #fff,0px 0px 10px #fff;
}

.updateCoverPosUp {
    position: absolute;
    top: 55px;
    left: 35px;
    text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #fff,0px 0px 10px #fff;
}

.updateCoverPosDown {
    position: absolute;
    top: 85px;
    left: 35px;
    text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #fff,0px 0px 10px #fff;
}

.changeProfilePictureButton, .changeLogoButton, editAlbumCoverButton {
    float: left;
    position: relative;
    bottom: 60px;
    left: 15px;
}

.changeLogoButton {
    left: 0px;
}

.profilePictureContainer {
    position: relative;
    /*left: 15px;
    top: 40px;*/
    left: 5px;
    top: 15px;
}


.profilePicture, .bandLogoPicture {
    max-height: 115px;
    max-width: 115px;
    margin: 0 auto;
}

.bandListItem h3 {
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
    text-decoration: none;
}

    .bandListItem h3:hover ) {
        cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
        text-decoration: none;
        color: #5865F2;
    }

.getAllMembers {
    margin-right: 8px;
    color: #fff;
    background-color: #5865F2;
    font-size: 17px;
}

.getAllBands {
    margin-right: 8px;
    color: #fff;
    background-color: #5865F2;
    font-size: 17px;
    border-right: 3px solid #3F48A8;
    border-bottom: 2px solid #3F48A8;
}

.userNameContainer {
    position: absolute;
    /*left: 150px;
    top: 100px;*/
    font-size: 24px;
    left: 125px;
    top: 75px;
}

.getMember {
    background-color: #fff;
    color: #5865F2;
    font-size: 24px;
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
    padding: 8px;
}

    .getMember:hover {
        color: #fff;
        cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
        background-color: #5865F2;
        text-decoration: none;
    }

.minimalBandDisplay {
    /*background-color: #edf0ff;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;*/
    display: inline-block;
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    background-color: #5865F2;
    /*margin-top: 5px;
    margin-right: 5px;*/
    margin-top: 10px;
    margin-right: 10px;
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
    border-right: 3px solid #3F48A8;
    border-bottom: 2px solid #3F48A8;
}

    .minimalBandDisplay:hover {
        background-color: #3F48A8;
        border-right: 3px solid #292e6b;
        border-bottom: 2px solid #292e6b;
    }


.roleInBandIconContainer {
    display: inline-block;
    height: 37px;
    width: 37px;
    background-color: white;
    border-radius: 50%;
    line-height: 35px;
    margin-right: 5px;
    text-align: center;
}

.addBandHiddenFormContainer {
    margin-bottom: 15px;
}

.profileHeaderContainer {
    position: relative;
    height: 145px;
    padding-left: 5px;
    padding-right: 5px;
}

.profileTopRightButtonsContainer {
    position: absolute;
    top: 15px;
    right: 15px;
}

.extLinkIcon {
    height: 20px;
    padding-left: 1px;
}

#showPinnedSoundsContainer {
    margin-bottom: 40px;
}

.minimalBandLogo {
    height: 25px;
}

.bandHeader {
    position: relative;
    height: 310px;
}

#changeCoverForm {
    position: absolute;
    top: 5px;
    left: 20px;
}

.bandLogoContainer {
    position: absolute;
    top: 185px;
    left: 15px;
}

.bandNameContainer {
    position: absolute;
    top: 250px;
    left: 140px;
    font-size: 2em;
    font-weight: bold;
}

.bandGenre {
    position: absolute;
    top: 290px;
    left: 160px;
}

.bandMembersListContainer {
    margin-top: 40px;
    margin-bottom: 40px;
}

    .bandMembersListContainer h3 {
        margin-bottom: 15px;
    }

.bandAgendaContainer {
    margin-top: 40px;
}

.bookingInfoItem {
    padding-left: 15px;
    margin-bottom: 40px;
}

.pinnedSoundBox {
    padding-left: 15px;
}

    .pinnedSoundBox audio {
        width: 100%;
    }

@media(max-width: 500px) {


    .bandLogoContainer {
        top: 135px;
    }

    .bandNameContainer {
        left: 0px;
    }

    .bandGenre {
        left: 20px;
    }
}


#publicMediaContainer {
    margin-bottom: 60px;
}


/*#endregion */


/***************************************************************************************/
/******************************** LISTE DES BANDS/USERS ********************************/
/***************************************************************************************/
/*#region BandsUsersList*/

.bandsListHeader h2 {
    margin-top: 10px;
}

.membersListHeader,
.bandsListHeader {
    position: sticky;
    top: 75px;
    z-index: 10;
    background-color: #292841;
    padding: 10px;
}

.userListItem {
    border-bottom: 2px solid #5865F290;
    padding-top: 15px;
    padding-bottom: 15px;
}

    .userListItem:hover {
        background-color: #1C1B29;
    }

.userInformationItem {
    padding-top: 10px;
}


.bandListItem {
    border-bottom: 2px solid #5865F290;
    padding-top: 15px;
    padding-bottom: 15px;
}

    .bandListItem:hover {
        background-color: #1C1B29;
    }


/*#endregion */


/**************************************************************************/
/******************************** CONTACTS ********************************/
/**************************************************************************/
/*#region Contacts*/

/* Contacts */
.FC_ContactListHeader {
    margin-bottom: 40px;
    margin-top: 40px;
    background-color: #292841;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    position: sticky;
    top: 75px;
    z-index: 10;
}

.contactsSearchContainer {
    margin-right: -15px;
    margin-left: -15px;
    padding-top: 5px;
}

#contactsListMap {
    height: 250px;
    margin-top: 40px;
    margin-bottom: 40px;
}

#editContactMap,
#getContactMap {
    height: 200px;
    margin-top: 25px;
}

.contactTileContainer {
    padding: 15px;
}

.contactTile {
    height: 75px;
    background-color: #5865F2;
    padding: 5px;
}

    .contactTile:hover {
        height: 75px;
        background-color: #3F48A8;
        padding: 5px;
        cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
    }

.contactTileType {
    padding: 5px;
}

.contactTileLabel {
    font-size: 1.5em;
    font-weight: bold;
    margin-left: 10px;
    position: absolute;
    left: 20px;
    top: 37px;
}

.contactTileLocation {
    display: inline-block;
    position: absolute;
    padding-top: 15px;
    bottom: 12px;
    left: 30px;
}

.contactTypeDisplay {
    color: grey;
    font-size: 2em;
}

.contactLabelDisplay {
    font-size: 2em;
    font-weight: bold;
}

.contactDetailTitleContainer {
    margin-top: 15px;
}

    .contactDetailTitleContainer button {
        margin-top: -7px;
    }

.contactMapMarkerTitle {
    color: black;
}

.leaflet-pane {
    z-index: 9;
}

.leaflet-top, .leaflet-bottom {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

.addContactReminder {
    min-width: 37px;
}


/*#endregion */


/******************************************************************************/
/******************************** PUBLIC MEDIA ********************************/
/******************************************************************************/
/*#region PublicMedia*/

.publicMediaTile {
    height: 115px;
    width: 115px;
    padding: 5px;
    margin: 7px;
    float: left;
    position: relative;
    box-shadow: 3px 3px 5px lightgrey;
    background-color: #1C1B29;
}

.getAllPublicMediaButton {
    height: 105px;
    width: 105px;
    text-align: center;
    padding-top: 40px;
    border: 1px dashed lightgrey;
}

.publicMediaBottom,
.profileHeaderBottom {
    clear: both;
}

.deletePublicMedia {
    position: absolute;
    z-index: 1;
}

.publicMediaVisibilityStatus {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #292841;
    width: 20px;
    height: 23px;
    padding-left: 7px;
    z-index: 1;
}

.publicMediaImage {
    max-height: 105px;
    max-width: 105px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#publicMediaDisplayContainer {
    margin-top: 20px;
}



/*#endregion */


/***********************************************************************/
/******************************** DRIVE ********************************/
/***********************************************************************/
/*#region Drive*/

.driveStickyActionsBar {
    position: sticky;
    top: 135px;
    z-index: 9;
    background-color: #292841;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    /*padding: 10px;*/
}

.driveDirectoryActions {
    /*margin-top: 20px;*/
}

@media(max-width: 990px) {
    #addDirForm {
        display: -webkit-box;
    }
}

@media(max-width: 400px) {
    #addDirForm #newDir {
        width: 65px;
    }
}

@media(max-width: 620px) and (min-width: 400px) {
    #addDirForm #newDir {
        width: 85px;
    }
}

@media(max-width: 1200px) and (min-width: 990px) {
    #addDirForm #newDir {
        width: 85px;
    }
}

.driveDirectoryThumbnail {
    height: 20px;
}

.driveAntiPaddingForFuckingSmallDevices {
    padding-left: 5px;
    padding-right: 5px;
}

.driveRootDirContainer h3 {
    margin-top: 40px;
    color: #fff;
}

.dirNameContainer .linkToPage {
    color: white;
    text-decoration: none;
}

.existingPermission {
    padding: 10px;
    line-height: 44px;
    border: 1px solid #d0cdcd;
    border-radius: 4px;
    background-color: #5865F2;
    margin: 3px;
    white-space: nowrap;
}

.uploadFilesButton {
    /*width: 100%;*/
}

.fc-breadcrumb-container {
    padding: 5px;
    font-size: 1.2em;
}

#FileContainer {
    background-color: #292841;
}

    #FileContainer iframe {
        width: 100%;
        min-height: 600px;
    }

/*#FileContainer audio,
#FileContainer video,
.my-video-dimensions {
    width: 100%;
    max-height: 600px;
}*/

.videoContainer {
    height: 350px;
}

.fc-drive-dir-action-box {
    margin-bottom: 10px;
}

.fc-file-details-container,
.fc-file-details-container img {
    max-height: 600px;
    max-width: 100%;
}

.fc-file-details-container {
    margin-top: 25px;
}

.fc-file-details-header {
    margin-top: 25px;
}

.fc-drive-file {
    padding: 10px;
    font-size: 1.1em;
    border-top: 1px solid #f7eded;
    border-bottom: 1px solid #f7eded;
}

    .fc-drive-file p {
        margin: 4px;
        line-height: 31px;
    }

    .fc-drive-file:hover {
        font-weight: bold;
        background-color: #1C1B29;
    }

    .fc-drive-file a,
    .fc-drive-file a:hover,
    .fc-drive-file a:visited,
    .fc-drive-file a:active {
        color: black;
    }

    .fc-drive-file fa-file {
        color: dimgrey;
    }

.fc-drive-dir {
    padding: 10px;
    font-size: 1.1em;
    border-top: 1px solid #5865F2;
    border-bottom: 1px solid #5865F2;
    background-color: #1C1B29;
}

    .fc-drive-dir p {
        margin: 4px;
        line-height: 31px;
    }


    .fc-drive-dir:hover {
        font-weight: bold;
        background-color: #292841;
    }


.fc-drive-dir-header {
    padding: 20px;
    font-size: 1.1em;
    font-weight: bold;
    border-bottom: 1px solid #5865F2;
}

    .fc-drive-dir-header p {
        margin: 4px;
        line-height: 31px;
    }


.driveDirectoryTopRightButtonsContainer button,
.driveDirectoryTopRightButtonsContainer a {
    margin: 2px;
}

.archiveSelected, .moveSelected, .deleteSelected {
    margin-right: 5px;
}

.file-permalink {
    word-wrap: break-word;
}
/*#endregion */


/*******************************************************************************/
/******************************** SOUND BUILDER ********************************/
/*******************************************************************************/
/*#region Sound Builder*/

.sbHeader {
    position: sticky;
    top: 130px;
    z-index: 9;
    background-color: #292841;
    margin-left: -15px;
    margin-right: -15px;
    padding: 10px 5px;
}

    .sbHeader .resetFilter {
        margin-bottom: 20px;
    }

    .sbHeader h2 {
        font-size: 20px;
        margin-top: 5px;
    }

.sbSongSubMenu,
.sbAlbumSubMenu {
    min-height: 60px;
}

    .sbSongSubMenu button,
    .sbAlbumSubMenu button {
        padding-top: 0px;
    }

    .sbSongSubMenu p,
    .sbAlbumSubMenu p {
        padding-top: 0px;
    }

.songTextOrTabsEditor {
    min-height: 300px;
}

.setAsBestAudio {
    opacity: 0.1;
}

    .setAsBestAudio:hover {
        opacity: 0.9;
    }

.songItemLine {
    padding: 2px;
    font-size: 1.1em;
    border-top: 1px solid #f7eded;
    border-bottom: 1px solid #f7eded;
    line-height: 31px;
}

.songLine {
    padding: 8px;
    font-size: 1.1em;
    border-top: 1px solid #f7eded;
    border-bottom: 1px solid #f7eded;
    line-height: 31px;
}

.songLineContainer .fa-battery-empty,
.recordStatSongCell .fa-battery-empty {
    color: #D50000;
}

.songLineContainer .fa-battery-half,
.recordStatSongCell .fa-battery-half {
    color: #FF9D3A;
}

.songLineContainer .fa-battery-full,
.recordStatSongCell .fa-battery-full {
    color: green;
}

.getSong {
    font-weight: bold;
}

#fullPageLyrics {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 15;
    background-color: white;
    color: black;
    overflow: scroll;
}

.fullPageLyricsContainer {
    margin-top: 30px;
    padding: 20px;
}

#fullPageTabs {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 15;
    background-color: white;
    color: black;
    overflow: scroll;
}

.fullPageTabsContainer {
    margin-top: 30px;
    padding: 20px;
    line-height: 40px;
}

.tabsContainer {
    line-height: 40px;
}

.tabSpan {
    color: red;
    position: relative;
    bottom: 15px;
}

.albumItemLine, .albumLine {
    padding: 2px;
    font-size: 1.1em;
    border-top: 1px solid #f7eded;
    border-bottom: 1px solid #f7eded;
    line-height: 31px;
}

.recordStatusCell {
    padding: 15px;
    border-left: 1px dashed lightgrey;
    border-right: 1px dashed lightgrey;
}

.recordStatusMemberHeader {
    border-left: 1px dashed lightgrey;
    border-right: 1px dashed lightgrey;
    font-weight: bold;
}

.recordStatSongCell {
    padding: 10px;
}

.recordStatusHeader {
    padding: 10px;
    border-left: 1px dashed lightgrey;
    border-right: 1px dashed lightgrey;
}

.overallRecStatusTableContainer {
    overflow: auto;
}

.songTabs,
.songText {
    white-space: pre-line;
}


/*#endregion */


/*************************************************************************/
/******************************** DOODLES ********************************/
/*************************************************************************/
/*#region Doodles*/


.editDoodleMembersButton {
    margin-top: 10px;
}

.doodleFlag {
    color: orange;
}

.doodleProbableDateDetail {
    padding-left: 15px;
}

.tableHeaderItem {
    padding: 10px;
    background-color: #5865F2;
}

.tableHeaderItem {
    padding: 10px;
    border-left: 1px dashed lightgrey;
    border-right: 1px dashed lightgrey;
}

.tableDataItem {
    padding: 10px;
    border-left: 1px dashed lightgrey;
    border-right: 1px dashed lightgrey;
}

.doodleTableContainer {
    overflow: auto;
}

.getDoodle {
    margin-left: 0px;
    margin-right: 0px;
    background-color: #1C1B29;
    margin-bottom: 15px;
    padding: 15px;
    position: relative;
    border-left: 15px solid #5865F2;
    border-left-width: 15px;
    border-left-style: solid;
    border-left-color: rgb(88, 101, 242);
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}


/*#endregion */


/*******************************************************************************/
/******************************** ANNOUNCEMENTS ********************************/
/*******************************************************************************/
/*#region Announcements*/

.communitySearchContainer {
    text-align: center;
    margin-bottom: 30px;
}

#AnnouncementGeneralContainer {
    padding: 0px;
}

.announcementContainer {
    border-radius: 5px;
    padding: 10px;
    background-color: #5865F2;
    margin-bottom: 30px;
    border-right: 7px solid #3F48A8;
    border-bottom: 5px solid #3F48A8;
    position: relative;
    word-wrap: break-word;
}

.announcementAuthorProfilePictureContainer {
    position: absolute;
    top: 10px;
}

.announcementActionButtons {
    position: absolute;
    right: 0px;
    top: 10px;
    padding-left: 0px;
}

.addDriveFileButton {
    background-color: #3F48A8;
}

.addAnnouncementBottom {
    margin: 7px 0px;
}

.announcementAuthorProfilePicture {
    max-height: 50px;
}

.announcementAuthorAndDate {
    position: absolute;
    left: 55px;
    top: 15px;
}

.announcementAuthor {
    font-weight: 600;
    line-height: 10px;
    font-size: 18px;
}

@media (max-width: 500px) {
    .announcementAuthor {
        font-size: 14px;
    }
}

.announcementDate {
    font-weight: 100;
    line-height: 4px;
    font-size: 0.9em;
}

.publicMediaFullImage {
    max-width: 100%;
    max-height: 400px;
}

.mediaBox {
    max-height: 400px;
    max-width: 90%;
}

.announcementText {
    margin-top: 50px;
    margin-bottom: 20px;
    white-space: pre-line;
}

    .announcementText a {
        color: white;
    }

/*#endregion */


/**********************************************************************/
/******************************** CHAT ********************************/
/**********************************************************************/
/*#region Chat*/

.convoProfilePicture {
    height: 30px;
    width: 30px;
    margin-top: 5px;
    border-radius: 50%;
}

.convoProfilePicture1 {
    height: 30px;
    margin-top: 5px;
    border-radius: 50%;
    position: absolute;
    left: 20px;
    top: 0px;
}

.convoProfilePicture2 {
    height: 30px;
    margin-top: 5px;
    border-radius: 50%;
    position: absolute;
    left: 33px;
    top: 0px;
}

.hasNewMessages {
    font-weight: bold;
}

.convoLastMessageQuickPeek {
    opacity: 0.3;
    padding-left: 15px;
}

.convoContainer {
    padding: 2px;
    font-size: 1.1em;
    border-top: 1px solid #f7eded;
    border-bottom: 1px solid #5865F2;
    background-color: #1C1B29;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}

    .convoContainer p {
        margin: 4px;
        line-height: 31px;
    }

.convoHeader {
    position: fixed;
    top: 75px;
    left: 0px;
    right: 0px;
    height: 65px;
}

.convoHeaderLeft {
    margin-top: 8px;
}

.convoHeaderTitle {
    font-size: 1.8em;
    margin-top: 8px;
    font-weight: bold;
}

.convoHeaderRight {
    margin-top: 25px;
    text-align: right;
}

.convoListItemTitle {
    font-weight: bold;
    font-size: 17px;
}

.newMsgIndicator {
    color: orange;
}

.chatMenuNewMsgIcon {
    color: orange;
    font-size: 20px;
    position: absolute;
    padding-top: 15px;
    padding-left: 5px;
}

#messagesContainer {
    position: fixed;
    top: 140px;
    bottom: 140px;
    left: 0px;
    right: 0px;
}

.messagesList {
    /*overflow: scroll;*/
    height: 100%;
}

#messagesScroller {
    overflow-y: auto;
    height: 100%;
}

#messageScrollerInside {
}

.msgDateSeparator {
    padding-top: 10px;
    color: orange;
    font-weight: bold;
}

.talk {
    margin: 20px 0;
    color: #f1f1f1;
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 75%;
    overflow-wrap: anywhere;
}

    .talk a {
        color: #f1f1f1;
    }

    .talk .chatProfilePicture {
        /*width: 50px;
        border-radius: 50%;*/
        width: 30px;
        border-radius: 150px;
        height: 30px;
        margin-bottom: auto;
    }

    .talk p {
        padding: 7px 15px;
        line-height: 25px;
        border-radius: 20px;
    }

.right {
    margin-left: auto;
}

    .right p {
        margin-right: 10px;
        background: #5865F2;
        margin-left: auto;
    }

.left p {
    margin-left: 10px;
    background: rgb(216, 216, 216);
    color: #000;
}

    .left p a {
        color: #000;
    }

.messageAspectSpan {
    white-space: pre-line;
}

.messageLineContainer {
    position: relative;
}

.messageAuthorAndDateInfoContainer {
    position: absolute;
    left: 50px;
    top: -20px;
    opacity: 0.2;
}

.deleteMessageButton {
    opacity: 0.3;
}

    .deleteMessageButton:hover {
        opacity: 1;
    }

.convoFooterContainer {
    position: fixed;
    bottom: 50px;
    left: 0px;
    right: 0px;
    background-color: #1C1B29;
}

    .convoFooterContainer form {
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.messageInputContainer {
    background: #fff;
    display: flex;
    width: 90%;
    height: 60px;
    border-radius: 9999px;
}

#messagesScroller {
    overflow-y: auto;
}

.group-input {
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

    .group-input i {
        width: 30px;
    }

    .group-input textarea,
    .group-input .emojionearea {
        resize: none;
        border: none;
        outline: none;
        padding-left: 10px;
        font-size: 16px;
        width: 100%;
        height: 40px;
        padding-top: 5px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .group-input .emojionearea {
        overflow-y: scroll;
        position: initial !important;
        border-radius: 3px;
        -moz-box-shadow: inherit;
        -webkit-box-shadow: none;
        box-shadow: inherit;
        -moz-transition: border-color 0.15s ease-in-out, -moz-box-shadow 0.15s ease-in-out;
        -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -webkit-transition: unset;
        transition: unset;
    }

        .group-input .emojionearea .emojionearea-editor {
            min-height: 1em;
        }

        .group-input .emojionearea .emojionearea-button {
            right: 15px;
        }


.filesLogoContainer {
    /*border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-left: 10px;
    display: block;
    height: 100%;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;*/
    background: #5865F2;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    width: 60px;
    border: none;
    display: flex;
    padding-right: 15px;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding-left: 13px;
}

.sendButton {
    background: #5865F2;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    width: 60px;
    border: none;
    display: flex;
    padding-right: 15px;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.sharePictureToConvo {
    max-width: 500px;
    max-width: 100%;
}

.memberListProfilePicture {
    width: 100%;
    max-width: 100px;
}


/*#endregion */


/**********************************************************************************/
/******************************** VISIBLE COMMENTS ********************************/
/**********************************************************************************/
/*#region VisibleComments*/

.addVisibleCommentButton {
    min-width: 37px;
}

.visibleCommentsContainer {
    background-color: #1C1B29;
    padding: 5px;
    border-radius: 5px;
    height: 350px;
    position: relative;
}

@media (min-width: 768px) {
    .visibleCommentsContainer {
        height: 200px;
    }
}

.visibleCommentRow {
    padding: 5px;
    clear: both;
}

.visibleComment {
    background-color: #1C1B29;
    padding: 5px 10px;
    border-radius: 10px;
}

.visibleCommentDateInfo {
    float: right;
    padding-top: 5px;
    color: lightgray;
}

    .visibleCommentDateInfo:hover {
        color: grey;
    }

.visibleCommentsBox {
    overflow: auto;
    height: 140px;
}

.visibleCommentsEditorBar {
    position: absolute;
    bottom: 10px;
    left: 25px;
    padding-left: 10px;
    padding-right: 15px;
    width: 90%;
}

.visibleCommentTextBoxContainer {
    min-width: 220px;
}


/*#endregion */


/*************************************************************************/
/******************************** ExtLink ********************************/
/*************************************************************************/
/*#region ExternalLink*/


select.icon-menu option {
    background-repeat: no-repeat;
    background-position: bottom left;
    padding-left: 30px;
}

/*#endregion */


/***********************************************************************/
/******************************** POPUP ********************************/
/***********************************************************************/
/*#region Popup*/

#popupContainer .popupBackground, #popupUploadContainer .popupUploadBackground, #popupNewDirContainer .popupNewDirBackground {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    opacity: 0.99;
    z-index: 20;
}

#popupCommonContent, #popupUploadContent, #popupNewDirContent {
    margin-top: 65px;
    padding: 40px;
    background-color: #1C1B29;
    max-height: 85%;
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 45px;
    font-weight: bold;
    line-height: 1;
    color: red;
    opacity: 1;
    margin: 10px;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}

    .close:hover {
        color: #cf0000;
    }

.popupRetourButton {
    font-size: 20px;
    color: #fff;
    background-color: #FF9D3A;
    color: #fff;
    border: none;
    margin-top: 30px;
    border-right: 3px solid #CD7D2B;
    border-bottom: 2px solid #CD7D2B;
    cursor: url(Cursor/hand.cur), url(Cursor/hand.png), url(Cursor/hand.gif), auto;
}

/*#endregion */


/*************************************************************************/
/******************************** SPINNER ********************************/
/*************************************************************************/
/*#region Spinner*/

#spinnerBackground {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    opacity: 0.9;
    z-index: 20;
}

#spinnerContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    #spinnerContent img {
        height: 100px;
    }

/*#endregion */


/************************************************************************/
/******************************** PLAYER ********************************/
/************************************************************************/
/*#region Player*/

#playerReduced {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #5865F2;
    color: #fff;
    line-height: 50px;
    height: 50px;
    padding: 0 25px 0 25px;
    font-size: 1.3em;
    z-index: 10;
}

span.togglePlayer {
    padding-left: 25px;
}

.moveToPreviousSong {
    color: #fff;
    background-color: #5865F2;
}

.moveToNextSong {
    color: #fff;
    background-color: #5865F2;
}


#player {
    position: fixed;
    top: 75px;
    bottom: 50px;
    width: 100%;
    background-color: #292841;
    display: none;
    z-index: 20;
    overflow: scroll;
}

    #player .close {
        position: relative;
        top: 15px;
        right: 15px;
        color: red;
        padding: 12px 15px 12px 15px;
        border-radius: 50%;
        background-color: white;
        opacity: 1;
    }

.playerMarshallContainer {
    margin-top: 40px;
    margin-bottom: 40px;
}


.createPlaylistLabel {
    line-height: 34px;
    text-align: right;
}

.playlistHeader a {
    color: black;
    text-decoration: none;
    font-size: 1.2em;
}

#currentPlaylistAccess {
    padding-left: 15px;
    background-color: #adc1ef;
}

.playlistTotalTimeContainer {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #fff;
    font-size: 1.3em;
}

.smallMarginRight {
    margin-right: -2px;
    margin-top: 25px;
}

.EqHeader {
    display: inline-block;
    width: 20%;
    height: 120px;
    vertical-align: top;
    line-height: 120px;
    font-size: 1.4em;
    text-align: center;
}

.EqLabel {
    color: white;
    position: inherit;
    margin-left: -30px;
}

    .EqLabel:nth-child(4n+1) {
        margin-top: 100px;
    }

.playlistTracks {
    border: 2px solid #5865F2;
    padding: 0;
    margin-top: 2px;
}

.playlistTracksHeader {
    background-color: #7fecab;
    padding: 1px;
}


#playlistManager {
    position: relative;
    height: 45px;
}

.playlistTitle {
    position: absolute;
    top: 10px;
    left: 0px;
    font-size: 1.3em;
}

#playlistName {
    width: 40%;
    position: absolute;
    left: 65px;
    top: 3px;
}

.playlistActionButtons {
    position: absolute;
    top: 5px;
    right: 0px;
}

#playlist {
    background-color: #7fecab;
    margin-bottom: 0px;
}

/* général ? ou spécifier ? */
.removeBand,
.removeUser,
.addBand,
.addUser {
    color: white;
}

.noTrackLoaded {
    margin-bottom: 0px;
    padding: 10px;
    background-color: #5865F2;
}

.playPauseContainer {
    height: 85px;
}

.playerControlZone {
    padding-bottom: 6px;
}

#playPause {
    background-color: #7fecab;
    padding: 25px;
    border: 1px solid #46af70;
    border-radius: 20px;
    vertical-align: middle;
    line-height: 85px;
}

    #playPause:hover {
        background-color: #46af70;
        font-weight: bold;
    }

#volume-input {
    margin-top: 20px;
}

.playerTop {
    background-color: #1C1B29;
    padding-top: 20px;
    padding-bottom: 20px;
}

#equalizer {
    background-color: #1C1B29;
}

.playerTimeContainer {
    font-size: 1.2em;
    margin-bottom: 8px;
}

.playlistManagerBox {
    background-color: #1C1B29;
    margin-top: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
}
/*.list-group-item:hover, .list-group-item:focus {
    text-decoration: none;
    background-color: #f5f5f5;
}

.list-group-item a {
    color: #555555;
}*/
.list-group-item {
    cursor: url('Cursor/hand.cur'), url('Cursor/hand.png'), url('Cursor/hand.gif'), auto;
}

    .list-group-item.active {
        z-index: 2;
        color: #fff;
        background-color: #3F48A8;
        border-color: #3F48A8;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .list-group-item > .badge {
        float: right;
        background-color: #fff;
        color: #5865F2;
    }

    .list-group-item.active a {
        color: white;
    }

    .list-group-item a {
        color: #555555;
        text-decoration: none;
    }


/*#endregion */


/***************************************************************************************/
/******************************** MESSAGE BOX (TOASTER) ********************************/
/***************************************************************************************/
/*#region Message Box*/

#messageBoxContainer {
    position: fixed;
    top: 75px;
    left: 15px;
    z-index: 25;
}

.messageBox {
    height: 100px;
    width: 200px;
    margin: 18px;
    padding-left: 10px;
}

    .messageBox.ok {
        background-color: #b0e67b;
        color: black;
    }

    .messageBox.erreur {
        background-color: red;
        color: white;
    }

    .messageBox h3 {
        padding-top: 8px;
    }

.messageAuthor {
    padding: 3px 6px;
    background-color: white;
    margin: 3px;
    border-radius: 5px;
    display: inline-block;
}

.messageItem {
    padding: 3px 6px;
    background-color: white;
    margin: 3px;
    border-radius: 5px;
    display: inline-block;
    float: right;
}

/*#endregion */


/*****************************************************************************/
/******************************** USERS ADMIN ********************************/
/*****************************************************************************/
/*#region UsersAdmin*/

.usersListItem:nth-child(4n),
.usersListItem:nth-child(4n+3) {
    background-color: #ecf6ff;
    line-height: 35px;
}

.settings h4 {
    background-color: #e2d9d9;
    padding: 5px;
    color: black;
}

#manageInfos,
#managePassword,
#manageRoles,
#manageUsers,
#manageBands {
    padding: 15px;
}


/*#endregion */


/******************************************************************************/
/******************************** EMOJIONEAREA ********************************/
/******************************************************************************/

/* évite l'aura (glow effect) autout de l'éditeur */
.emojionearea.bubble-element.MultiLineInput {
    border: none !important;
    box-shadow: none !important;
}