button.no-focus:focus{
    outline:0!important;
    box-shadow: none!important;
}

button:disabled{

    cursor: not-allowed!important;

}

.btn, span.my-badge{
    font-family: 'Roboto', sans-serif;

    /* padding: 0.3em 1em 0.3em 0.5em; */
    padding-left: 14px;
    padding-right: 20px;
    border-radius: 8px;
    letter-spacing: 0.3px;

    font-family: "Roboto",sans-serif;
    font-weight: 400;
    padding: 0.3em 1em 0.3em 0.5em;
    border-radius: 8px;
    letter-spacing: 0.3px;
    padding: 11px 15px;
    border-radius: 6px;
    font-size: 15px;
}

.btn.small{

    font-size: 13px;
    padding: 10px 15px 10px 13px;

}

.nav-btn{

    line-height: 70px;

    width: 40px;
    
}

.nav-btn .btn, a.intramilo, a.nav-dropdown{


    width: 40px;
    height: 40px;

    border-radius: 25px;

    font-size: 14px;
    line-height: 35px;

    text-align: center;

    padding: 0px;

    background: var(--grey-15-color);
    color: black;
    font-weight: 600;
    
}

a.nav-dropdown i{

    position: relative;
    top: -5px;

}

a.intramilo{

    width: 150px;
    margin-top: 16px;
    padding-top: 2px;
    padding-right: 3px;

}

.navbar button[aria-expanded="true"], .navbar .nav-hover[aria-expanded="true"], .navbar .nav-hover:hover, .profile-btn:hover, .profile-btn.active{

    background-color: var(--purple-transparent-color)!important;
    color: var(--purple-color)!important;

}


.btn.see{

    background-color: transparent;
    color: var(--blue-color);

}


.btn.btn-my-outline{

    color: var(--grey-50-color)!important;
    background-color: transparent;

    border: 1px solid var(--grey-30-color);

    border-radius: 5px;

}

.btn.btn-my-outline:hover{

    color: black!important;
    border-color: black;

}

.btn.btn-my-marine{

    color: var(--marine-color);
    background-color: var(--marine-10-color);

    border-radius: 5px;

}

.btn.btn-my-marine:hover{

    color: white!important;
    background-color: var(--purple-color)!important;

}


.btn.btn-my-marine:hover i{

    color: white!important;

}


.btn.btn-my-add-admin{

    background: var(--purple-transparent-color);
    color: var(--purple-color);

    font-weight: 600;
    margin-left: 20px;

}

.btn.btn-my-add-admin:hover{

    background-color: var(--purple-color);
    color:white;

}

.btn.btn-my-transparent{

    background: transparent;
    color: white;
    padding: 0;

    font-weight: 600;

}

.btn.btn-my-transparent:hover{

    color:white;

}


.btn.btn-my-light{

    background: var(--light-transparent-color);
    color:white;

    font-weight: 600;

}

.btn.btn-my-light:hover{

    background: white;
    color:black;

}

.btn.btn-my-dark{

    background: var(--grey-15-color);
    color:black;

    font-weight: 500;

}

.btn.btn-my-dark:hover{

    background: var(--grey-20-color);

}

.btn.btn-my-secondary, .badge.secondary{

    background: var(--grey-15-color);
    color: black!important;


}

.btn.btn-my-secondary:hover{

    background: var(--grey-20-color);

}

.btn.btn-my-secondary.active{

    background: var(--blue-color);
    color: white;
}


.badge.secondary{

    font-size: 11px;
    background: var(--grey-70-color);
    color: white!important;

}

.contact-card.active .badge.secondary{

    background-color: var(--purple-color);
    color: white!important;

}


.btn.btn-my-primary, .btn.btn-my-primary.active:hover{

    background: var(--purple-color);
    color: white;

}

.btn.btn-my-primary.active:hover{

    color: white!important;

}

.btn.btn-my-primary:hover{

    background: var(--purple-color);
    color: white;

}


.btn.btn-my-primary.active{

    border: 1px solid var(--purple-color);
    background: transparent;
    color: var(--purple-color);

}

.btn.btn-my-primary-light{

    background: var(--blue-transparent-color);
    color: var(--blue-color);

}

.btn.btn-my-primary-light:hover{

    background: var(--blue-color);
    color: white;

}

.btn.btn-my-warning{

    background: var(--orange-transparent-color);
    color: var(--orange-color);


}

.btn.btn-my-warning:hover{

    background: var(--orange-color);
    color: white;


}

.btn.btn-my-danger{

    background: var(--red-transparent-color);
    color: var(--red-color);


}

.btn.btn-my-danger:hover{

    background: var(--red-color);
    color: white!important;


}

.btn.btn-my-danger{

    background: var(--red-transparent-color);
    color: var(--red-color);



}

.btn.btn-my-danger{

    background: var(--red-transparent-color);
    color: var(--red-color);
}

.btn.btn-danger{
    background-color: var(--red-color);
    color: white;
}

.btn.btn-my-green{

    background: var(--green-color);
    color: white!important;


}


.btn.btn-my-return{

    background: transparent;
    color: black;

    font-weight: 500;

}

/* Boutons poles et filtres */
.btn.my-filter{

    color: var(--grey-50-color);
    background-color: white;

    padding: 8px 17px 8px 10px;
    
    margin: 7px;

}

.btn.my-filter.active,
.btn.my-filter:hover{

    background-color: var(--grey-50-color);
    color: white!important;
    border-color: var(--grey-10-color);

}

/* Dot */
span.my-dot{

    padding-left: 5px;
    padding-right: 5px;

}

.btn.my-filter:hover span.my-dot,
.btn.my-filter.active span.my-dot{
    color: white!important;
}

span.my-badge{

    font-size: 0.9em;
    padding: 8px 10px;

}

/* Folder badge */
.front-folder{

    font-size: 12px;
    font-weight: 500;

}

/* New badge */
.badge-new{

    position: absolute;
    top: 24px;
    color: white;
    background-color: var(--purple-color);
    height: 30px;
    width: 45px;
    border-radius: 0px 25px 25px 0px;
    font-size: 14px;
    padding: 4px 6px;



}

.badge-new i{

    position: relative;
    left: 4px;
    top: -1px;

}

.badge-danger{

    background-color: var(--red-color);

}


/* div.card.my-card .my-badge.light{

    font-family: 'Poppins', sans-serif;

    background-color: var(--purple-background-color)!important;
    color: black!important;

    font-size: 12px;
    font-weight: 500;
    border-radius: 25px;

} */



.my-card span.my-badge{

    font-size: 11px;
    padding: 7px 10px;

}

.my-card .admin{

    background-color: var(--purple-color);
    color: white;

    font-size: 11px;
    padding: 5px 8px;

    border-radius: 8px;

}

.badge-admin{

    border-radius: 25px;
    padding: 6px 8px;
    vertical-align: middle;
    background-color: var(--purple-color);
    color: white;

    margin-bottom: 2px;
    font-size: 12px;

    margin-left: 8px;

}

/* Gestion des couleurs des Badge Pole*/
.btn.my-filter.pole span.my-dot.bleu{
    color: var(--blue-color);
}

.btn.my-filter.pole.bleu.active,
.btn.my-filter.pole.bleu:hover{

    background-color: var(--blue-color);

}
span.my-badge.pole.bleu{

    background: var(--blue-transparent-color);
    color: var(--blue-color);

}

.btn.my-filter.pole span.my-dot.violet{
    color: var(--purple-color);
}

.btn.my-filter.pole.violet.active,
.btn.my-filter.pole.violet:hover{

    background: var(--purple-color);

}
span.my-badge.pole.violet{

    background: var(--purple-transparent-color);
    color: var(--purple-color);
    
}

.btn.my-filter.pole span.my-dot.rose{
    color: var(--pink-color);
}

.btn.my-filter.pole.rose.active,
.btn.my-filter.pole.rose:hover{

    background: var(--pink-color);

}
span.my-badge.pole.rose{


    background: var(--pink-transparent-color);
    color: var(--pink-color);
    
}

.btn.my-filter.pole span.my-dot.orange{
    color: var(--orange-color);
}

.btn.my-filter.pole.orange.active,
.btn.my-filter.pole.orange:hover{

    background: var(--orange-color);

}
span.my-badge.pole.orange{

    background: var(--orange-transparent-color);
    color: var(--orange-color);
    
}

.btn.my-filter.pole span.my-dot.jaune{
    color: var(--yellow-color);
}

.btn.my-filter.pole.jaune.active,
.btn.my-filter.pole.jaune:hover{

    background: var(--yellow-color);

}
span.my-badge.pole.jaune{

    background: var(--yellow-transparent-color);
    color: var(--yellow-color);
    
}


.btn.my-filter.pole span.my-dot.vert{
    color: var(--green-color);
}

.btn.my-filter.pole.vert.active,
.btn.my-filter.pole.vert:hover{

    background: var(--green-color);

}
span.my-badge.pole.vert{

    background: var(--green-transparent-color);
    color: var(--green-color);
    
}

/* Pills */
ul li a.my-pill{

    font-family: 'Poppins', sans-serif;

    background-color: transparent;
    color: var(--grey-50-color);

    font-size: 14px;
    font-weight: 500;

    padding: 10px 15px!important;

    border-radius: 7px;

}

ul li a.my-pill span{

    background-color: var(--grey-20-color);
    padding: 3px;

    display: inline-block;
    height: 20px;
    width: 20px;
    
    font-size: 12px;
    line-height: 14px;
    text-align: center;

    border-radius: 25px;

}

ul li a.my-pill.active{

    color: black;

}


.btn-paragraph:hover h5, .btn-paragraph.show h5{

    color: var(--purple-color)!important;


}

.profile-btn {

	background-color: var(--grey-15-color);
	margin-top: 17px;
	padding: 5px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 25px;

}

.profile-btn .center-cropped, .profile-btn .init-circle {

    height: 30px!important;
    width: 30px!important;
    
}

.profile-btn span{

    vertical-align: middle;

}


/* Reponsivity */

/* Homepage */
@media (min-width: 1301px) and (max-width: 1339px) {

    .event-sidebar{

        padding-right: 30px;

    }

    .home-content {

        padding-left: 50px;
        padding-right: 20px;
        
    }

}


/* Sheet */
@media (min-width: 1200px) and (max-width: 1300px) {

    .sheet-container .sidebar{

        -webkit-box-flex: 0;
        -ms-flex: 0 0 12%;
        flex: 0 0 12%;
        max-width: 12%;
    

    }

}

@media (max-width: 960px) {

    .sheet-container .responsive-header{

        display: inline-block!important;

    }

    .sheet-container .sidebar-header{

        display: none!important;

    }

    .sheet-container .content{

        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;

    }

}



@media (max-width: 1300px) {

    /* #home-sidebar{

        width: 60px!important;

    } */

    #home-sidebar{

        width: 96vw!important;

    }

    #home-sidebar a{

        display: inline-block;

    }

    .profile-sidebar{

        padding-bottom: 0px;

    }

    .home-content{

        padding-left: 15px;

    }

    /* .app-name{

        display: none;

    } */

    #user-name{

        display: none;

    }

    #search-bar{

        width: 100px;

    }




  }

  /* col-lg */
  @media (max-width: 992px) {

    .custom-buttons{
        
        width:50vw;

    }

    .custom-buttons{
        
        display: none;

    }

    .custom-buttons li{
        
        float: left;

    }

    .custom-buttons .my-dropdown{

        min-width: 250px;

    }

    .sheet-buttons{

        margin-top: 20px;

    }

    .search-container .form-group{
        
        margin-right : 0px!important;

    }


    .search-container select{
        
        margin-top : 10px;

    }

    
    .navbar-admin{

        padding-top: 20px!important;

    }

    div.form-header{

        margin-left: auto;

    }



  }

    /* col-sm */
    @media (max-width: 576px) {

        .search-container .form-group{
            
            margin-right : 0px!important;
    
        }
    
    
        .search-container select{
            
            margin-top : 10px;
    
        }

        .form-container .btn-group{

            margin-right: 20px;
        }


        #annuaire-sidebar{

            width: 95vw!important;
            margin-left: 7px;

        }

        .backoffice-container{

            padding-left: 25px!important;
            padding-right: 25px!important;
            overflow-x: hidden;

        }

    
    
      }