@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('./icons.css');
@import url('./headings.css');
:root{
    /*Colors*/
    --deep-blue:#3C87F4;
    --artic-blue:#DFE9F5;
    --light_grey:#8F8F8F;
    --darker-blue:#3572CA;
    --dark-teal:#011922;
    --darker-teal:#000E14;
    --clear-blue:#63A5BF;
    --lighter-grey:#F5F5F5;

    /*component settings*/
    --primary-color:var(--dark-teal);
    --background-color:var(#FFF);
    --font-color:var(--light_grey);
    --font-text:"Roboto",  sans-serif;
    --topbar-bg-color:#FFF;
    --sidebar-item-bg:var(--darker-teal);
    --sidebar-item-font-color:#FFF;
    --topbar-item-font-color:#000;
    --topbar-item-bg-color:#FFF;

}


body{
    color:var(--font-color);
    background:var(--background-color);
    font-family: var(--font-text);
    font-size: 16px;
    margin:0;
    padding:0;
}


a{
    text-decoration: none;
    color:var(--dark-teal)
}
a.negative{
    color: var(--clear-blue);
}
.right{
    text-align: right;
    float: right;
}

.sidebar{
    display: block;
    width: 300px;
    background-color: var(--primary-color);
    border-radius: 0px 1em 1em 0px ;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
}
.sidebar>.itemlogo{
    height: 300px;
    width: 300px;
}
.sidebar>.item{
    display: block;
    height: 75px;
    line-height: 75px;
    background-color: var(--sidebar-item-bg);
    color:  var(--sidebar-item-font-color);
    text-transform: uppercase;
    text-align: center;
}

.sidebar>.item:hover{
    background-color: var(--clear-blue);
    color: var(--dark-teal);
}
.sidebar>.item.active{
    background-color: #FFF;
    color: var(--dark-teal);
}
.sidebar>.item>.icon{
    background-color: var(--sidebar-item-font-color);
    line-height: 75px;
    display: block;
    float: left;
    height: 32px;
    margin-top: 20px;
    margin-left: 40px;

}
.sidebar>.item:hover>.icon{
    background-color: var(--dark-teal);
}
.sidebar>.item.active>.icon{
    background-color: var(--dark-teal);
}


.circle{
    width: 200px;
    height: 200px;
    background-color: #FFF;
    border-radius: 100px;
    margin: auto;
    margin-top: 75px;
}

.container{
    display: block;
    padding: 20px;
    position: absolute;
    width: calc(100% - 340px);
    top: 0px;
    bottom:0px;
    right: 0px;
    overflow-y: scroll;
}

.negative{
    background-color: var(--dark-teal);
    color:#FFF
}

.container.full-size{
     left: 0px;
}


.input-wrapper{
    width: 300px;
    height: 35px;
    border-radius: 5px;
    background-color: #FFF;
    border-color: #C3C3C3;
    border-style: solid;
    border-width: 1px;
}
.input-group>label{
    font-size: 0.6em;
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #011922;
    text-transform: uppercase;
}
.negative>.input-group>label{
    color: #FFF;
}
.input-wrapper>span.icon-ctn{
 height: 35px;
 width: 35px;
 float: left;
 background-color: #f3f3f3;
 vertical-align: middle;
 border-radius:  8px 35px 35px 8px;
}
.input-wrapper>span.icon-ctn>.icon{
    height: 35px;
    width: 35px;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    margin: auto;
    background-color: #8F8F8F;
}
.input-wrapper>input{
    line-height: 35px;
    width: calc(100% - 50px);
    height: 35px;
    border: none;
    font-size: 14px;
    margin-left: 5px;
    outline: none;
    background-color: transparent;
}
.max{
    width: 100%;
}
.max-90{
    width: 90%;
}
.max-80{
    width: 80%;
}
/*
* Bouton
*/
.btn{
    display: flex;
    font-family: var(--font-text);
    background-color: #8F8F8F;
    color: #FFF;
    height: 35px;
    min-width: 75px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1em;
    outline: none;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 35px;
    font-size: 0.6em;
    font-weight: bold;
    letter-spacing: 15%;
    vertical-align: middle;
    justify-content: space-between;
}
.btn>*{
    display: flexbox;
}
.negative>.btn{
    background-color: #FFF;
    color: var(--dark-teal);
}
.btn>.icon{
    display: inline-block;
    background-color: #FFF;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
}
.btn:hover{
    background-color:#606060;
}
.btn.primary{
    background-color: var(--dark-teal);
}
.negative>.btn.primary{
    background-color: var(--clear-blue);
}
.btn.primary:hover{
    background-color: var(--darker-teal);
}

.negative>.btn.primary:hover{
    background-color: #3b687a;
}

.logo-circular{
    margin-top: 50px;
    text-align: center;
    width: 125px;
    height: 125px;
    border-radius: 125px;
    background-color: #FFF;
}
.login-heading{
    margin-top: 50px;
   text-align: center;
}
.login-heading.negative{
    color: #FFF;;
}
.login-form{
    margin-top: 50px;
    width: 300px;
}
.form-group-submit{
    margin-top: 50px;
}
.centered{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.centered>*{
    margin-left: auto;
    margin-right: auto;
}

.table-action{
    width: 100%;
}

.splited-row-table{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border-collapse: collapse;
}
.splited-row-table>thead>tr>th{

    padding: 10px;
    text-align: left;
    color: #000;
}
.splited-row-table>tbody>tr{
    background-color: #f4f4f4;
    color:#8F8F8F;
     line-height:50px;
}
.table-actions .icon{
    background-color: #8F8F8F;
}


.table{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border-collapse: separate;
    border-spacing: 0;
}
.table>thead>tr>th{
    padding: 15px;
    text-align: left;
    color: #48586B;
    font-weight: bold;
    text-transform: Capitalise;
    background-color: #F5F6F8;
    border-bottom: 1px solid #EBECF0;
    border-top: 1px solid #EBECF0;
}
.table>thead>tr>th:first-child{
    border-radius: 15px 0 0 0;
    border-left:  1px solid  #EBECF0;
}
.table>thead>tr>th:last-child{
    border-radius:  0 15px 0 0 ;
    border-right:  1px solid  #EBECF0;
}
.table>tbody>tr>td>.avatar{
    height: 42px;
    width: 42px;
    border-radius: 42px;
    background-color: #8F8F8F;
    display: block;
    margin: auto;
    float: left;
    margin-right: 20px;
}
.table>tbody>tr>td{
    padding: 15px;
    color: #48586B;
    border-bottom: 1px solid  #EBECF0;
    vertical-align: middle;
}
.table>tbody>tr:nth-child(even)>td{
    padding: 15px;
    background-color: #F5F6F8;
    border-bottom: 1px solid  #EBECF0;
    vertical-align: middle;
}
.table>tbody>tr>td:first-child{
    border-left:  1px solid  #EBECF0;
}
.table>tbody>tr>td:last-child{
    border-right:  1px solid  #EBECF0;
}
.table>tfoot>tr>td{
    padding: 35px;
    color: #48586B;
    border-bottom: 1px solid  #EBECF0;
}
.table>tfoot>tr>td:first-child{
    border-radius: 0 0 0 15px;
    border-left:  1px solid  #EBECF0;
}
.table>tfoot>tr>td:last-child{
    border-radius:  0 0 15px 0 ;
    border-right:  1px solid  #EBECF0;
}

.pagination{
    text-align: center;

}
.pagination>a.item{
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #F5F6F8;
    color: #48586B;
    margin: 5px;
    border-radius: 5px;
}

.pagination>a.item.active{
    background-color: var(--dark-teal);
    color: #FFF;
}
.alphabet-filter{
    text-align: center;
}
.alphabet-filter>a.item{
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #F5F6F8;
    color: #48586B;
    margin: 5px;
    border-radius: 5px;
}
.alphabet-filter>a.item.active{
    background-color: var(--dark-teal);
    color: #FFF;
}
.tag{
    padding: 5px;
    display: block;
    background-color: #F5F6F8;
    text-align: center;
    border-radius: 2px;
    color: #48586B;
    border: 1px solid #48586B;
    font-weight: bold
}

.tag.green{
    background-color: #E0F5EE;
    border: 1px solid #4BC097;
    color: #4BC097;
}
.tag.red{
    background-color: #ffe4e4;
    border: 1px solid #ff6a6a;
    color: #ff6a6a;
}
.tag.orange{
    background-color: #FFF0E4;
    border: 1px solid #FFB06A;
    color: #FFB06A;
}
.tag.purple{
    background-color: #fae4ff;
    border: 1px solid #e66aff;
    color: #e66aff;
}
.tag.blue{
    background-color: #E7E9FD;
    border: 1px solid #7E89F1;
    color: #7E89F1;
}
.tag.teal{
    background-color: #b3f5f9;
    border: 1px solid #359ab3;
    color: #359ab3;
}

.icon-btn {
    display: block;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #F5F6F8;
    color: #48586B;
    border: none;
    border-radius: 0.5rem;
    outline: none;
}
.icon-btn:hover{
    background-color: #dfe0e1;
    color: #FFF;
}
.icon-btn>.icon{
    display: block;
    height: 100%;
    width: 100%;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
    background-color: #8F8F8F;
}
.icon-btn.primary{
    background-color: var(--dark-teal);
}
.icon-btn.primary>.icon{
    background-color: #FFF;
}
.icon-btn.primary:hover{
    background-color: var(--darker-teal);
}
.icon-btn.red{
    background-color: rgb(202, 34, 34);
}
.icon-btn.red>.icon{
    background-color: #FFF;
}
.icon-btn.red:hover{
    background-color: rgb(148, 25, 25);
}

.actions > .icon-btn{
    margin-top: 10px;
}

.heading-section{
    display: flex;
    justify-content: space-between;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 15px;
}