/* Your Custom CSS Goes here */
.ReactModal__Content.ReactModal__Content--after-open{
    max-width: 700px !important;
    width: 100% !important;
    overflow-y: auto !important;
    max-height: 100%;
}
.app-header .navbar-nav .dropdown-menu{
    position: absolute;
    top: calc(100% + 0px)!important;
}

.app-header .navbar-nav .dropdown-menu.dropdown-lg{
    max-width: 400px;
    width: 100%;
    min-width: 250px;
}
* ::-webkit-scrollbar {
    width: 5px !important;
    height: 15px !important;
}
.darkMode * ::-webkit-scrollbar{background: #d7d7d7;}
 

.modal-body button.MuiButton-root{
    margin: 12px 10px 12px 0px;
}
.docketCounterStyle{
    width: 25%;
}
.overFlowXauto{
    overflow-x: auto;
}
.chartDesign .InerChart .react-resizable{
    background: #fff;
    padding: 40px;
    margin: auto;
    display: block;padding-top: 20px;
}
.chartDesign .InerChart{
    padding:30px 0px;padding-top: 0px;
}
.inerNotification li{
    padding:10px
}
.inerNotification li a{
    margin-bottom: 0px;
    padding-bottom:0px;
    cursor:pointer;
    font-weight:500;
    /* transition:all ease-in .3s */
}
.inerNotification li a:hover{
    font-weight:500;
}
.inerNotification li:hover {
    background-color: #F4F7FA;
}
.inerNotification li small{
    padding: 5px 10px;
}

.navTextLogo{position:absolute}
.navImageLogo{position:relative}
.navImgLogoIner{max-width:120px}
.horizontal-menu .app-header .navbar .navbar-nav{align-items: center;}
.navImgLogoIner img{position: relative;top: -5px;}
.horizontal-menu .app-header .logo a{line-height: 1;font-size: 11px;    margin: 0px;display: inline-block;width: 100%;}
.navTextLogo{position: absolute;bottom: -7px;text-align: center;left: 0px;right: 0px;}
.linkInerListOrder ul li p{margin:0px}
.linkInerListOrder ul li{list-style: none;
    position: relative;
    font-size: 16px;
    padding: 10px 0px;
    padding-left: 30px;}
.linkInerListOrder ul li:before{content: '';
    position: absolute;
    left: 0px;
    width: 14px;
    height: 14px;
    background: #4bad48;
    border-radius: 50px;
    top: 15px;}
.linkInerListOrder ul li:after{content: '';
    position: absolute;
    top: 29px;
    bottom: -15px;
    width: 2px;left: 6px;
    border: 1px dashed #d0d0d0;

    }
.linkInerListOrder ul li:last-child:after{display: none;}
.linkInerListOrder .text-success{color: #198754!important;}
.linkInerListOrder ul li.false:before{background: #899096;}
.showProgress .dropdown-menu.show{border:1px solid #eaeaea}

.react-resizable{min-width:600px !important;min-height: 300px !important;}
.InerChart + div .react-resizable{width:100% !important;height: auto !important;}
.app.horizontal-menu{min-height:100vh} 
.login-7{margin-bottom: -80px;}
.customInfoDesign{margin: auto;}
.darkMode form .MuiTextField-root{margin-top: 20px;}
.darkMode form .MuiInputBase-formControl{background:#fff;min-height: 40px;border-radius: 4px;padding:0px 10px;}
.darkMode form .MuiInputLabel-shrink{top: -5px;}
/* .darkMode form .css-qnk253-MuiForm{margin-top: 0px;} */
/* .darkMode form .css-qnk253-MuiFormControl-root-MuiTextField-root{margin-top: 0px !important}  */
/* .darkMode form .css-wb57ya-MuiFormControl-root-MuiTextField-root{margin-top: 0px !important;} */
/* .darkMode form .css-qnk253-MuiFormControl-root-MuiTextField-root{margin-top: 20px !important;} */
.darkMode form label.MuiFormLabel-root{    z-index: 99 !important}

/* table design */
/* .rdt_Table .rdt_TableBody .rdt_TableRow:nth-of-type(odd){background-color: rgba(0,0,0,.05) !important;} */
.rdt_Table .rdt_TableBody .rdt_TableRow{padding: 0px;border:0px}
.rdt_Table .rdt_TableBody .rdt_TableRow div.rdt_TableCell, .rdt_Table .rdt_TableHeadRow .rdt_TableCol{min-width: 180px;text-align: left;width: 180px;}
.rdt_Table .rdt_TableBody .rdt_TableRow div.rdt_TableCell:last-child, .rdt_Table .rdt_TableHeadRow .rdt_TableCol:last-child{    min-width: 360px;padding: 10px 5px;}
.rdt_Table .rdt_TableBody .rdt_TableRow div.rdt_TableCell{border: 1px solid #eaeaea;margin-right: -1px;margin-top: -1px;} 
.mobile, .docketsMobile{display: none;}
.circuitsMobile{display: none;}
.mobileDocket{text-align: center;}
.mobileDocket h5{font-size: 10px;text-transform: uppercase;color: #808080;}
.mobileDocket h3{margin: 0px;font-weight: 600;font-size: 20px;}
.orangeColor{color: #FF8F00;}
.downBtnTable{padding: 2px 10px !important;width: 23px;height: 23px;border-radius: 50px;font-size: 6px !important;padding-right: 0px !important;}
.downBtnTable i{font-size: 13px !important;}
.detailsinerTableMobile{margin-top: 13px;background: #f9f9f9;padding: 15px 0px;border: 1px solid #eaeaea;border-radius: 7px;}
.detailsinerTableMobile .btn{padding: 6px 10px;}
/* .circuitsDesktop .rdt_TableCell{text-align: center !important;} */
.docketsMobile{color: #000;}
.p-3{padding:1rem}
.ReactModalPortal .modal-body{width: 100%;max-height: 70vh;overflow-y: auto;overflow-x: hidden;}
.tableCus table{width: 100%;max-width: 100%;margin-bottom: 1rem;display: table;}
.popOverTable tr{position: relative;}
.tooltipText{position: absolute;left: 0px;right: 0px;z-index: 99;width: 200px;bottom: -40px;transform: scale(0);margin: auto;visibility: hidden;}
.toolTipInerDiv{background: rgb(41 50 91 / 83%);display: inline-block;min-width: 200px;padding: 10px;color: #fff;border-radius: 5px;text-align: left;position: relative;font-size: 13px;}
.popOverTable tr:hover .tooltipText{transform: scale(1);visibility: visible;}
.popOverTable *{transition: all ease-in .2s;}
.toolTipInerDiv p{line-height: 1.2;}
.popOverTable tbody tr:last-child .tooltipText{bottom: -20px;}
.toolTipInerDiv h6{font-weight: 300;font-weight: 400;font-size: 13px;margin-bottom: 3px !important;}
.popOverTable tbody tr:first-child .tooltipText, .popOverTable tbody tr:nth-child(2) .tooltipText,.popOverTable tbody tr:nth-child(3) .tooltipText{top: -10px;}
.chartDesign .popOverTable .toolTipInerDiv, .chartDesign .popOverTable .toolTipInerDiv{min-width: 150px;}


@page { 
    margin: 10px 0px 40px 0px; 
}
@media(max-width:1199.3px){
    .fullheightIner{max-height: unset !important;}
    .showMenuresponsive{left: 0px !important;}
    .closeMenuBtn{
        position: relative;
        top: -20px;
    }
    .page-description-actions > .d-flex.gap-1 .btn{
        height: 60px;
    }
    .page-description .page-description-actions > .d-flex.gap-1  .btn{
        font-size: 9px;
        padding: 0px 8px;
        height: 40px !important;
    }
    .docketCounterStyle{
        min-width: 250px;
    }
    .page-description-actions .d-flex.gap-1 .btn i{
        display: block;
    }
    .page-description .page-description-actions > .d-flex.gap-1 a.btn{
        padding-top: 4px;
    }
}

@media (max-width: 1000px){
    .react-resizable{max-width:100%;min-width:0px !important}
}
@media (max-width: 991.7px){
    .navImgLogoIner {
        max-width: 90px;
    }
    .horizontal-menu .app-header .logo a{
        font-size: 10px;
    }
    .footerMainSection{
        padding: 9px 0px;
        position: relative;
        top:9px;
    }
    .footerMainSection p{
        font-size: 12px;
    }
    
    .customInfoDesign .MuiGrid-grid-xs-4, .customInfoDesign .MuiGrid-grid-xs-8{
        max-width: 100%;
        flex-basis: 100%;
    }
    /* .exportBtn{
        display: none;
    } */
    .desktop, .circuitsDesktop, .docketsDesktop{display: none;}
    .mobile, .docketsMobile, .circuitsMobile{display: block;}
}



@media(max-width:767px){
    .card .card-body {
        padding: 10px 10px;
    }
    .app-content .card {
        margin-bottom: 10px;
    }
    .page-description button.btn{
        padding: 3px 20px;
    }
    div.MuiGrid-grid-xs-1{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-2{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-3{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-4{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-5{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-6{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-7{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-8{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-9{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-10{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    div.MuiGrid-grid-xs-11{
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
}
@media(max-width:475px){
    .app-header .nav-notifications-toggle{
        margin: 4.5px 3px!important;
    }
}


@media(max-width:370px){
    .app-header .navbar .navbar-nav>li>a{
        padding-left: 5px;
        padding-right: 5px;
        margin-right: 5px;
    }
}