JezK

Edit File: header.css

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 0px;
    bottom: -4px;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider::before {
    background: #2f63c8;
    left: -5px;
}

input+.slider::before {
    background: #2f63c8;
}

input:checked+.slider {
    background-color: #ccc;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.error {
    color: red;
}

#subMenu-width {
    position: relative !important;
    left: 0;
    width: 60px !important;
    padding: 0;
}

.width-main {
    width: 60px !important;
    padding: unset !important;
    overflow: visible;
}

.width-main li {
    width: unset!important;
}

li.list-item.menu-item-has-children.dropdown.width-main ul li {
    width: 60px!important;
    padding: 6px 0 9px 0px;
    display: block;
}

#subMenu-width li a {
    padding: 0 0px 0 8px !important;
}

#subMenu-width li.active {
    background-color: unset !important;
}

.down-icon {
    color: #d4dae9 !important;
    font-size: 17px !important;
    vertical-align: middle;
}

.width-main a.active {
    border-radius: 14px !important;
}

/*  */

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 10px;
    vertical-align: bottom;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 4px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    top: -5px;
    bottom: 0px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

#toggle:checked+.slider {
    background-color: #2196F3;
}

#toggle:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

#toggle:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* #toggle must be visible for before and after elements. Relative used for absolute position of children */

.switch #toggle {
    position: relative;
}

/* Set text on before and after elements */

#toggle::before,
#toggle::after {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 30px;
}

#toggle::before {
    position: absolute;
    left: 50px;
    bottom: 0;
    content: 'student';
}

#toggle::after {
    position: absolute;
    right: 50px;
    bottom: 0;
    content: 'teacher';
}

/* Change colors based on checked status */

#toggle:checked::before {
    color: green;
}

#toggle:checked::after {
    color: grey;
}

#toggle:not(:checked)::before {
    color: grey;
}

#toggle:not(:checked)::after {
    color: green;
}

.card-body {
    cursor: pointer;
    font-family: 'Barlow';
}

.unReadNotifications {
    position: relative;
    top: 10px;
    right: 0px;
    float: right;
    font-size: 18px;
    width: 8px;
    height: 8px;
    background: #007bff;
    border-radius: 50%;
}

.notificationCard {
    border-radius: 10px;
    border: 0px;
}

.notificationCard.unRead {
    background-color: #f5f9ff;
}

.dateLink {
    font-size: 12px !important;
}

.StatusText {
    font-size: 17px;
    font-weight: 600;
}

.currencyType {
    position: absolute;
    margin-left: 8px !important;
    color: #2c60d0;
    font-weight: bold;
}

input.pricePerDay {
    width: 75%;
}

.currencyType2 {
    position: absolute;
    /* margin-left: 8px !important; */
    color: #2c60d0;
    font-weight: bold;
    right: 13px;
    bottom: 0px;
    padding: 6px;
    border: 1px solid #e9ecef;
}

.d-grid-row{
    display: grid !important;
    grid-template-columns: 13% 13% 13% 13% 13% 13% 13% ;
}

.notifications{
    width: 380px;
}

.currencyType {
    position: unset;
}

.arabicColor{
    color: blue;
}
.englishColor{
    color: blue;
}
/* mobile responsive */

@media (max-width:767px){
    .dataTables_paginate {
        margin-bottom: 5px ;
    }
    .mobile-alignment{
       
        margin-bottom: 10px !important;
    }
    /* .mobile-alignment1{
        margin-left: 65px;
        margin-bottom: 10px !important;
    } */
    .export_csv .button-alignment{
        text-align: center;
        
    }

#example_filter label:after {
        /* right: 77px !important; */
        position: absolute;
    }
    #example_filter label{position: relative;}
    .new-button{
        text-align: center !important;
    }
    .box-width{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .colon{
        display: none;
    }
    .upImg{
        width: 100% !important;
        max-width: 100% !important;
    }
    .d-grid-row{
        display: block !important;
        /* grid-template-columns: 13%; */
    }

aside.left-panel {
       padding: 20px 15px !important; 
    }
    /* .navbar-brand {
        padding-top: 1;
    } */

.notifications{
        width: 345px;
    }
    .header-left .dropdown .dropdown-menu {
        left: -156px !important;
    }

.custom-padding{
        padding-left: 4px;
    }

/* table responsive */
    .comingshipmentTable th:nth-child(2){
        min-width: 110px;
    }
    .comingshipmentTable th:nth-child(4){
        min-width: 100px;
    }
    .comingshipmentTable th:nth-child(5){
        min-width: 100px;
    }

.dashboardTable th:nth-child(2){
        min-width: 122px;
    }
    .dashboardTable th:nth-child(3){
        min-width: 110px;
    }
    .dashboardTable th:nth-child(4){
        min-width: 110px;
    }

.activeWarehouseTable th:nth-child(2){
        min-width: 122px;
    }
    .activeWarehouseTable th:nth-child(3){
        min-width: 110px;
    }
    .activeWarehouseTable th:nth-child(4){
        min-width: 110px;
    }

.pendingwarehouseTable th:nth-child(2){
        min-width: 122px;
    }
    .pendingwarehouseTable th:nth-child(3){
        min-width: 110px;
    }
    .pendingwarehouseTable th:nth-child(4){
        min-width: 110px;
    }

.rejectwarehouseTable th:nth-child(2){
        min-width: 122px;
    }
    .rejectwarehouseTable th:nth-child(3){
        min-width: 110px;
    }
    .rejectwarehouseTable th:nth-child(4){
        min-width: 110px;
    }

/* invoice table */
    .invoiceTable th:nth-child(1){
        min-width: 110px;
    }
    .invoiceTable th:nth-child(2){
        min-width: 110px;
    }
    .invoiceTable th:nth-child(4){
        min-width: 100px;
    }
    .invoiceTable th:nth-child(5){
        min-width: 108px;
    }
    /* material transaction  */
    .materialTransactionTable th:nth-child(1){
        min-width: 85px;
    }
    .materialTransactionTable th:nth-child(2){
        min-width: 85px;
    }
    .materialTransactionTable th:nth-child(3){
        min-width: 109px;
    }
    .materialTransactionTable th:nth-child(4){
        min-width: 50px;
    }
    .materialTransactionTable th:nth-child(5){
        min-width: 109px;
    }
    .materialTransactionTable th:nth-child(6){
        min-width: 100px;
    }
    .materialTransactionTable th:nth-child(7){
        min-width: 109px;
    }
    /* asn table  */
    .asnTable th:nth-child(1){
        min-width: 110px;
    }
    .asnTable th:nth-child(3){
        min-width: 110px;
    }

.mywarehouseTable td:last-child{
        padding: 15px 10px !important;
    }
    .dashboardTable td:last-child{
        padding: 15px 10px !important;
    }

.activeWarehouseTable td:last-child{
        padding: 15px 10px !important;
    }
    .pendingwarehouseTable td:last-child{
        padding: 15px 10px !important;
    }
    .rejectwarehouseTable td:last-child{
        padding: 15px 10px !important;
    }

.myquotationTable td:last-child{
        min-width: 75px;
    }
    
  .dateAlignment{
      padding: 0px;
      margin: 0px;
  } 
    
  table.dataTable tbody td:last-child {
    padding: 15px 13px !important;
}
    
}

@media screen and (min-width: 768px) and (max-width: 1023px){

body{
        display: flex;
        width: 100% !important;
        max-width: 100% !important;
     }
     .left-panel{
        width: 30% !important;
        max-width: 30% !important;
     }
     .right-panel{
        width: 70% !important;
        max-width: 70% !important;
     }

.open .right-panel {
        margin-left: unset;
    }

.open .left-panel {
        max-width: 10% !important;
        width: 10% !important;
    }
    .open .right-panel {
        max-width: 90% !important;
        width: 90% !important;
    }
    .upImg{
        width: 50% !important;
        max-width: 50% !important;
    }

.ipadMargin {
        margin-bottom: 15px;
    }
    .mobile-alignment{
        margin-bottom: 10px !important;
        margin-left: 50px;
}

.mobile-alignment1{
    margin-bottom: 0px !important;
    margin-left: 36px;
}

.warehouseDetails_grid {
    display: grid;
    grid-template-columns: 50% 50% !important;
    grid-gap: 3%;
}

.last-block-bg{
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    grid-gap: 5% ;
}

.center-block{
    display: grid !important;
    grid-template-columns: 45% 45% !important;
    grid-gap: 2% !important;
}

.warehouse_boxshadow1{
    width: 100% !important;
}

.new-button{
    margin-left: -87px !important;
}

.d-grid-row{
    display: flex !important;
    /* grid-template-columns: 13%; */
}
.primary-grid{
    width: 45%;
}
.imageDisplay{
    flex-wrap: wrap;
}
.uploadImg{
    width: 95% !important;
}

.mywarehouseTable td:last-child{
    padding: 15px 10px !important;
}

/* table responsive */
.comingshipmentTable th:nth-child(2){
    min-width: 110px;
}
.comingshipmentTable th:nth-child(4){
    min-width: 100px;
}
.comingshipmentTable th:nth-child(5){
    min-width: 100px;
}

.dashboardTable th:nth-child(2){
    min-width: 122px;
}
.dashboardTable th:nth-child(3){
    min-width: 110px;
}
.dashboardTable th:nth-child(4){
    min-width: 110px;
}

.activeWarehouseTable th:nth-child(2){
    min-width: 122px;
}
.activeWarehouseTable th:nth-child(3){
    min-width: 110px;
}
.activeWarehouseTable th:nth-child(4){
    min-width: 110px;
}

.pendingwarehouseTable th:nth-child(2){
    min-width: 122px;
}
.pendingwarehouseTable th:nth-child(3){
    min-width: 110px;
}
.pendingwarehouseTable th:nth-child(4){
    min-width: 110px;
}

.rejectwarehouseTable th:nth-child(2){
    min-width: 122px;
}
.rejectwarehouseTable th:nth-child(3){
    min-width: 110px;
}
.rejectwarehouseTable th:nth-child(4){
    min-width: 110px;
}

/* invoice table */
.invoiceTable th:nth-child(1){
    min-width: 110px;
}
.invoiceTable th:nth-child(2){
    min-width: 110px;
}
.invoiceTable th:nth-child(4){
    min-width: 100px;
}
.invoiceTable th:nth-child(5){
    min-width: 108px;
}
/* material transaction  */
.materialTransactionTable th:nth-child(1){
    min-width: 85px;
}
.materialTransactionTable th:nth-child(2){
    min-width: 85px;
}
.materialTransactionTable th:nth-child(3){
    min-width: 109px;
}
.materialTransactionTable th:nth-child(4){
    min-width: 50px;
}
.materialTransactionTable th:nth-child(5){
    min-width: 109px;
}
.materialTransactionTable th:nth-child(6){
    min-width: 100px;
}
.materialTransactionTable th:nth-child(7){
    min-width: 109px;
}
/* asn table  */
.asnTable th:nth-child(1){
    min-width: 110px;
}
.asnTable th:nth-child(3){
    min-width: 110px;
}

.mywarehouseTable td:last-child{
    padding: 15px 10px !important;
}
.dashboardTable td:last-child{
    padding: 15px 10px !important;
}

.activeWarehouseTable td:last-child{
    padding: 15px 10px !important;
}
.pendingwarehouseTable td:last-child{
    padding: 15px 10px !important;
}
.rejectwarehouseTable td:last-child{
    padding: 15px 10px !important;
}

table.dataTable tbody td:last-child {
    padding: 15px 13px !important;
}
}