.fnt-24 { font-size: 24px; }

.fnt-16 {  font-size: 16px; }

.fnt-14 {  font-size: 14px; }

.text-wt { color: #fff; }

.text-orange { color: orangered; }

.text-bu { color: #1da1f2; }

.fnt-weigh-700 { font-weight: 700; }

.fnt-weigh-900 { font-weight: 900; }

.algn-center { text-align: center; }

.btn-100 { width: 100px;  text-align: center; }

.btn-vd { border: 1px solid #1da1f2;  background-color: #fff;  color: #1da1f2; }

.btn-vd:hover { background-color: #1da1f2;  color: #fff; }

.btn-rd {  background-color: #d90000;  color: #fff; }

.form-check, .forget { display: inline-block;  vertical-align: middle;  margin-top: 3%;   width: 48%;  }

.forget { text-align: right;  }

.forget a { color: blue;  font-size: 14px; }

.forget a:hover {  text-decoration: none;  font-weight: bold;  font-size: 13px; }

.btn-blue { background-color: #1da1f2;  color: #fff;  widows: 110px;}

.btn-blue:hover {   font-weight: bold;  }

.r {   margin: auto;    width: 60%; }

.center { text-align: center;   }

.left-rd { border: 1px solid red; }

.show-option {  display: inline;  }

.hide-option {  display: none; }

.content .custom-widget {
    border-radius: 3px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 12px 17px;
    color: #fff;
    background: #e88189;
    margin-bottom: 30px;
    position: relative;
    font-weight: 700;
}

.header-title {   font-size: 22px; font-weight: lighter;  }

.excel-btn {  width: 35px;  height: 35px;  font-size: 20px;   text-align: center;  color: #fff;   
    background-color: #52bd49;  border: none;  line-height: 1.75;    border-radius: 2px; 
}

.excel-btn:hover {    
    background-color: #18910d;  border: none;  line-height: 1.75;    border-radius: 2px; 
}

.calendar-btn {  width: 35px;  height: 35px;  font-size: 20px;   text-align: center;  color: #fff;   
    background-color: #1c9cea;  border: none;  line-height: 1.75;    border-radius: 2px; 
}

.modal-form { width: 60%;  margin: auto; }

.opp .modal-content {  background-color: #414e60;  }

.opp .close {  position: absolute;  top: 5%;   right: 5%;  font-size: 30px;  color: rgb(255, 57, 57);  }

.libelle {  font-size: 20px;  font-weight: lighter; }


.md-title {  font-size: 22px;  font-weight: lighter; }

.m-close {  position: absolute;  top: 5%;   right: 5%;  font-size: 45px;  color: red;  }

.tr_green {  background-color: rgb(212, 250, 232);   color: #565b61; font-weight: 700;}

.tr_yellow { background-color: #fcf8e3;  color: #565b61; font-weight: 700;  text-align: right;   }

.tr_red { background-color: #f8d7da;  color: #565b61; font-weight: 700;    }

.tr_blue {  background-color: #d9edf7;  color: #565b61;  font-weight: 700;   text-align: right;  }

.bgd-bu {  background-color: #1c9cea;  color: #fff;  font-weight: 700;   }



/* ############################     S I D E B A R    ############################### */
.sidebar_avatar {   margin: auto;  width: 100px;  height: 100px;  text-align: center;  }

.sidebar_avatar img {  width: 100%;  height: 100; }

.logo { text-align: center; }

.logo .modo {  font-size: 14px; }

.logo h4 { text-align: center; }

.nw {  text-align: right;     color: rgb(112, 0, 0);   font-size: 20px;  cursor: pointer;  font-weight: 700; }


/* #############################     T A B L E      C O L S P A N     ######################## */
tr:hover { color: #fff; }
.upth {   line-height: 4;  }

.table-responsive table {  width: 1200px;  }

.table-responsive .opr  { width: 150px;  }

.recap { text-align: right;   padding-right: 10%;   color: rgb(0, 255, 136);   font-size: 20px;  cursor: pointer;   }

.recap-solde {  color: #000; }

.recap-solde .modal-body {  color: #000; }

.recap-solde .widget>header {
    position: relative;
    background: none;
    color: #000;
}

.recap-solde .widget .table th {
    color: #000;
}

.readmore {   
    background-color: orangered;  color: #fff;   width: 75px;  height: 20px;  font-size: 8px;  line-height: 1;  text-align: center;   
    font-weight: 700; ; 
}


/* #####################    Profile    ####################### */
.profil-form {  width: 80%; margin: auto;   }

.profil-head {  font-size: 22px;  color: #fff;  font-weight: lighter;   margin-bottom: 4%; }

.profil-avatar {  text-align: center;  }

.profil-pp img{   width: 130px;  height: 130px;  border-radius: 50%; border: none;  box-shadow: 2px 2px 2px #ddd; }

.pp-head {  
    width: 100%;  height: 50px; background-color: #565b61;  color: #fff;   text-align: center;  
    font-weight: lighter;  font-size: 26px;  margin-bottom: 3%;  line-height: 1.923; 
} 



@media (max-width: 1024px) {
    .r { width: 90%; }
}

@media (max-width: 414px) {
    .r { width: 100%; }

    .logo .h4{  font-size: 10px; }

    .logo .modo {  font-size: 10px; }

    .nav-collapse {  
        background-image: linear-gradient(to top, #676e76, #677585, #7d8c9b);    border: none;  margin-top: 16%; 
    }
    
    .side-nav {   padding-left: 8%; }
    
    .left-icons {     margin-right: 14%;   }
    
    .sidebar_avatar {   text-align: left; }
}