.header,.footer{
    position:relative;
    width:100%;
    z-index:9;
}
.fullContainer{
    position:relative;
    width:100%;
}
@media (max-width:900px){
    .contentContainer{
        width:100%;
    }
}
@media (min-width:900px){
    .contentContainer{
        float:left;
        width:80%;
    }
    .contentContainer .container{
        /*padding:0px 50px !important;*/
    }
}

/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/***Login***/

@media (max-width:600px){
    .loginContainer{
        position:relative;
        margin:0px auto;
        width:80%;
    }
}
@media (min-width:600px){
    .loginContainer{
        position:relative;
        margin:0px auto;
        width:25% !important;
    }
}

.container{
    width:100% !important;
}

/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/***Sidebar***/

.sidebar{
    float:left;
    width:20%;
    min-height:100vh;
    border-right:1px solid var(--primary-color);
    background:#ffffff;
}
.sidebar .logo{
    height:120px !important;
    padding:40px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar .nav{
    position:relative;
    font-family: 'Avenir Medium' !important;
}
.sidebar .nav .tab{
    width:100%;
    padding:20px 0px;
    color:var(--primary-color);
    border-top:2px solid var(--primary-color);
    background:#FFF;
    text-align: center;
    
}
.sidebar .nav .tab:hover{
    font-family: 'Avenir Black' !important;
    color:#000;
}

/* Rotate Triangle on Expand */
.toggle-icon {
    transition: transform 0.3s ease;
}

.main-menu[aria-expanded="true"] .toggle-icon {
    transform: rotate(90deg); /* Rotates to point to the right */
}

/* Submenu */
.submenu-container {
    margin-top: 5px;
    background-color: gray;
    width: 100%;
}

.submenu-item {
    display: block;
    font-size: 16px;
    color: white;
    padding: 15px 0 10px 20px;
    border-left: 2px solid transparent;
}

.submenu-item:hover {
    color: #000;
}

/* Active State */
.submenu-item.subMenuTabActive {
    font-weight: bold;
    color: black;
}

.sidebar .nav .tabActive{
    color:#FFF;
    background:var(--primary-color);
}
.sidebar .nav .tabActive:hover{
    color:#FFF;
}

.sidebar .nav .tabLast{
    border-bottom:2px solid var(--primary-color);
}

.sidebar input[type="button"].addProject{
    width:85%;
    padding:10px;
    color:#FFF;
    cursor:pointer;
    border-radius:10px;
    outline:none;
    border:0px;
    background:var(--primary-color) url("../images/plus-icon.png") 8px no-repeat;
    background-size:25px 25px;
}
.sidebar input[type="button"].addProject:hover{
    background-color:#666666;
}

/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/***Header Desktop***/

.headerDesktop{
    position:relative;
    height:120px !important;
    padding-top:20px;
    /* border-bottom:2px solid var(--primary-color); */
}
.headerDesktop .titleSearch{
    padding:0px 50px;
}
.headerDesktop .titleSearch .title{
    float:left;
}
.headerDesktop .titleSearch .search{
    float:right;
}
.headerDesktop .titleSearch .search input[type="text"].searchTxt{
    width:250px;
    padding:8px 10px;
    color:var(--primary-color);
    border:1px solid var(--primary-color);
    outline:none;
    background:#FFF url("../images/search-icon.png") 90% no-repeat;
    background-size:20px 20px;
}
.headerDesktop .nav{
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    padding-left:5px;
    border:0px;
    background:var(--primary-color);
}
.headerDesktop .nav .tab{
    padding:5px 12px !important;
    border:0px;
    border-right:1px solid #FFF;
}
/* .headerDesktop .nav .tab{
    float:left;
    padding:0px 50px;
}
.headerDesktop .nav .tabActive{
    color:black !important;
    text-decoration: underline;
}
.headerDesktop .nav .tab:hover{
    color:black !important;
} */

/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/***Header mobile***/

.headerMobile{
    position:relative;
    width:100%;
    padding:25px;
    border-bottom:2px solid var(--primary-color);

}

.btn-icon {
    --bs-btn-active-border-color: transparent;
    padding: 0;
    width: calc(2.2505001rem + calc(2));
    height: calc(2.2505001rem + calc(2));
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

table.row-reorder-dt tr:hover td:first-child {
    cursor: move;
}

.sidebar-btn{
    border:0px !important;
    border-radius:0px !important;
    background:#000 !important;
}
.sidebar-btn:hover{
    opacity:0.8 !important;    
}


/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/**********************************************************************************************************************/
/***Header mobile***/

.container-left{
    width:100% !important;
    padding:20px 50px !important;
}

.card{
    margin-top:20px !important;
    border:0px !important;
}
.card .card-header{
    border-radius:0px !important;
}
.btn , select , input[type='text'] , input[type='password'] , textarea {
    border-radius:0px !important;
    outline:none !important;
}

.modal-content{
    border-radius:0px !important;
    padding:0px !important;
    padding-bottom:40px;
}

.full-btn{
    width:100% !important;
    border:0px !important;
    border-radius:0px !important;
    padding:10px 0px !important;
    color:#FFF !important;
    background:#000 !important;
}
.full-btn:hover{
    background:#1b1a1a !important;
}

.editInfoBtn{
    width:auto;
    padding:8px 15px 8px 30px;
    border:0px;
    background:#000 url('../images/edit-btn.png') 10px center no-repeat;
    color:#FFF;
}
.editInfoBtn:hover{
    background:#1b1a1a url('../images/edit-btn.png') 10px center no-repeat;
}

.manageProductionBtn{
    width:auto;
    padding:8px 15px 8px 40px;
    border:0px;
    background:#000 url('../images/manage-btn.png') 10px center no-repeat;
    color:#FFF;
}
.manageProductionBtn:hover{
    background:#1b1a1a url('../images/manage-btn.png') 10px center no-repeat;
}

.deleteBtn{
    width:auto;
    padding:8px 15px 8px 30px;
    border:0px;
    background:#dc3545 url('../images/delete-btn.png') 10px center no-repeat;
    background-size:15px 15px;
    color:#FFF;
}
.deleteBtn:hover{
    background:#dc3545 url('../images/delete-btn.png') 10px center no-repeat;
    background-size:15px 15px;
}

.addNewClientBtn{
    width:auto;
    padding:8px 15px 8px 40px !important;
    border:0px;
    background:url('../images/add-btn.png') 0px center no-repeat;
    color:#FFF;
}
.addNewClientBtn:hover{
    background:url('../images/add-btn.png') 0px center no-repeat;
}

.sidebar-btn{
    width:95% !important;
}