/*Fonts*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ----------  ROOT VARIABLE  ---------- */

:root {
    --color-primary: #7380ec;
    --color-danger:  #ff7782;
    --color-succes : #41f1b6;
    --color-warning : #ffad13;
    --color-light   : rgba(132, 139, 200, 0.18);
    --color-dark : #000000;
    --color-muted : #7d8da1;

    --color-mygray : #E7E9EB;

    --color-background : #f6f3f3;

    card-border-raduis : 2rem;
    --border-raduis-1 : 0.4rem;
    --border-raduis-2 : 0.8rem;
    --border-raduis-3 : 1.2rem;

    --card-padding : 1.8rem;
    padding-1 : 1.2rem;

    --box-shadow : 0 2rem 3rem var(--color-light);

}

        #loading {
            position: fixed;
            display: flex;
            display: -webkit-box;
            justify-content: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 1) ;
            z-index: 99;
        }

        #loader {
            display: inline-block;
            width: 65px;
            height: 65px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #e95903;
            animation: spin 1s ease-in-out infinite;
            -webkit-animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes spin {
            to {
                -webkit-transform: rotate(360deg);
            }
        }

.flx_cntr{
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.flx_cv_rh{
    align-items: center;
    display: flex;
    justify-content: right;
}
.flx_cv_lh{
    align-items: center;
    display: flex;
    justify-content: left;
    margin-right : 2rem;
}

.flx_cv_between{
    align-items: center;
    display: flex;
    justify-content: space-between;
}


/* start Header */

.headBar{
    height: 3rem;
    color: white;
    font-family : Montserrat;
    background :   linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(17, 9, 255) 0%, rgb(115, 161, 195) 100%);
    display: flex;
    justify-content: space-between;
    align-items : center;
    padding-top : 3px;
    padding-bottom : 3px;
    padding-right : 10px;
    padding-left : 10px;

}

#header-logo{
 height : 3rem;
 width  : 9rem;
}
#img-header-logo{
 height : 100%;
 width  : 100%;
}

.headBar_right{
    height: 3rem;
    color: white;
    font-family : Montserrat;

    display: flex;
    justify-content: space-between;
    align-items : center;
    padding-top : 3px;
    padding-bottom : 3px;
    padding-right : 10px;
    padding-left : 10px;

}

#img-icon-user{
  border-radius : 50%;
  height : 32px;
  width  : 32px;
}

#logout-menu{
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
}

#notification-dropdown{
position : relative;
display: inline-block;
}



#header-fullname{
            padding : 2px 5px;
        }

/* end Header */

* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: none;
    border: 0;
    text-decoration: none !important;
    list-style: none;
    box-sizing: border-box;

}

html {
    font-size: 12px;
    font-family : Montserrat;
    height : 100vh;

}

body{
    height : 100vh;
    overflow: hidden;
    color: #000;
    padding-bottom : 0rem;
}

h1,h2,h3,h4,h5,h6{
  margin-bottom : 0 !important;
}

/*container*/
.mycontainer{
position : relative;
   color : #E7E9EB;
    display: grid;

    gap: 0.1rem;
    grid-template-columns: 16rem auto;
    border-bottom : 1px solid #969696;

    overflow-y : hidden;

    top : 0rem;
    bottom : 0rem;
    height: calc(100% - 4.5rem);
    width : 100%;
    margin : 0;
}




#aside{
    height: 92vh;
    /* background: rgba(182, 211, 252, 0.42);*/

    background: var(--color-background);;
    box-shadow: 1rem 3rem 4rem white;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width: 16rem;
    height: 100%;
}

#aside .top{
 display : flex;
 height : 3rem;
 align-items : center;
 justify-content : space-between;
 padding-left : 0.6rem;
}

#img-aside-logo{
    height: 3.5rem;
}


#img-aside-logo-square{
    display : none;
}

#close{
display : none;
}

#aside .mysidebar{

position: relative;
top: 0rem;
width: 16rem;
height: auto;
overflow-y: auto;
padding: 0;
}

#aside .mysidebar a {

display : flex ;
margin-left : 2rem;
gap : 1rem;
align-items : center;
position : relative;
height : 3rem;
transition : all 300ms ease;
}

#aside .mysidebar a span{
   font-size : 1.6rem;
   transition : all 300ms ease;
}

#aside .mysidebar a.active{
 background : var(--color-light);
 color : var(--color-primary);
 margin-left : 0;
}

#aside .mysidebar a.active:before {
    content: '';
    width: 6px;
    height: 100%;
    background: var(--color-primary) ;
}

#aside .mysidebar a.active span {
    color : var(--color-primary);
    margin-left: calc(1rem - 3px);
}

#aside .mysidebar a:hover {
    color : var(--color-primary);
}

#aside .mysidebar a:hover span {
    margin-left: 1rem;
}

#aside .mysidebar .request-count{
    background: var(--color-danger);
    color: white;
    padding: 2px 5px;
    font-size: 11px;
    border-radius: var(--border-raduis-1);

}


#mymain{
    position: relative;
    left: 0rem;
    top: 0;
    width: -moz-available;
    height: auto;
    bottom: 0rem;
    border: 1px solid var(--color-mygray);
    padding-bottom: 0rem;
}

main{
    background : gray;
    height : 88vh !important;
    width : 100% !important;


}

#mainheader{
    display : flex;
    background : var(--color-background);
    height : 3rem;
    align-items : center;
    justify-content : space-between;
    padding : 2px 15px;
}

.mainbody{
  height   : 97%;
  overflow-y : hidden;
}


#aside-menu-button{
    display : none;
}


#pm_env_manage , #pm_telco_manage{
    margin-left : 2rem ;

    transition : all 300ms ease;

}

.headerPage{
background-color: #F6F3F3;
position: relative;
width: 100%;
height: 3rem;

display: flex;
align-items: center;
padding: 2px;
padding-left: 10px;
}



/* ==========================   MEDIA QUERIES   ================================ */
/* ==========================   MEDIA QUERIES   ================================ */
/* ==========================   MEDIA QUERIES   ================================ */

@media screen  and (min-width : 601px) and (max-width : 1200px){
        #header-fullname{
            display : none;
        }

        .mycontainer{
            background : red;
            grid-template-columns : 7rem auto ;
            height: calc(100% - 4.5rem);
        }
        #aside {
            width : 7rem ;
        }
        #aside .top {
            justify-content: center;
        }
        #img-aside-logo {
            display : none !important;
        }

        #img-aside-logo-square{
             display : block;
            height  : 2.5rem ;
        }
        #aside .mysidebar h6{
            display : none;
        }
        #aside .sidebar .request-count{
              position: relative;
              right: 19px;
              top: -7px;
              height: 15px;
              width: 15px;
              font-size: 8px;
              padding: 2px 5px;
            }
        #mymain {
            left: 0rem;
        }

}

@media screen and (max-width : 600px){

    #home_admin{
         padding-bottom: 5rem !important;
        
    }

 #header-fullname{
            display : none;
        }

        .mycontainer{
            background : red;
            grid-template-columns : 6.1rem auto ;
            height: calc(100% - 4.5rem);
        }
        #aside {
            width : 6.1rem ;
        }
        #aside .top {
            justify-content: center;
        }
        #img-aside-logo {
            display : none !important;
        }

        #img-aside-logo-square{
             display : block;
            height  : 2.5rem ;
        }
        #aside .mysidebar h6{
            display : none;
        }
        #aside .sidebar .request-count{
              position: relative;
              margin-left : -15px;
              right: 19px;
              top: -7px;
              height: 15px;
              width: 15px;
              font-size: 8px;
              padding: 2px 5px;
            }
        #mymain {
            left: 0rem;
        }

    /*    .mycontainer{
            background: green;
            grid-template-columns: 1fr;
            height: calc(100vh - 4.5rem);
            color: #E7E9EB;
            display: grid;
            gap: 0rem;
            grid-template-columns: 16rem auto;
            border: 0px solid  var(--color-mygray);
            overflow-y: hidden;
            overflow-x: hidden;
            position: relative;
            top: 0rem;
            bottom: 0rem;
            width: 100%;
            right: 0px;
            left: 0px;


        }
        #mymain{
            left: 0rem;
            height: 100%;
            width: 100vw;
        }
        #aside {
            position: fixed;
            left    : -100%;
            width: 16rem;
            height: 100%;
            z-index : 3;
            background : white;
            display : none ;
            animation : showMenu 400ms ease forwards;
        }





        #aside .top {
            justify-content : space-between;
        }
        #img-aside-logo{
              display: block !important;
        }
        #img-aside-logo-square{
            display : none;
        }
        #close{
            display : flex;
            margin-right : 0.5rem;
            cursor : pointer;
        }
        #aside .sidebar h6 {
            display : flex;
        }

        #aside-menu-button{
            display : flex;
            cursor : pointer;
        }

        @keyframes showMenu {
                            to{
                                left : 0;
                            }
                        } */
}



/*======================    PM ANALYSE   ===============================================*/

#pm_analyse_body{
font-family : Montserrat;

}

#pm_analyse_container{
   margin : 0;
   padding : 0rem 0rem;
   padding-bottom: 0rem;
   font-size : 26px;
   width : 100%;
   height : 100%;
   background : #F5F7FA ;
   border : 0px solid  var(--color-mygray);
   overflow-x: hidden;
   overflow-y: hidden;
}

/*========================================================================================*/




/* start footer */

footer{
  display : block !important;
  align-items : center ;
  justify-content : left ;
  padding-left : 0.5rem;
  font-size: 10px;
  font-weight: bold;
  color : #1c2d3f;

    width: 100%;
    transform: translateX(100%); /* Animation start out of the screen */

    /* Add the animation */
    animation: move 20s linear infinite /* infinite make reapeat the animation indefinitely */;
}



/* Style the tab */
.tab {
    height : 2rem;

  border: 0px solid #ccc;
  background-color: #f1f1f1;
  overflow-x: auto;
  overflow-y: hidden;

}

/* Style the buttons inside the tab */
.tab button {
    display: flex;
    align-items: center;
    justify-content: space-between;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 3px 5px;
  transition: 0.3s;
  font-size: 12px;
  border-top : 1px solid dimgray;
  border-right : 1px solid dimgray;
  border-radius : 0px 4px;

}

.tab button span {
    height: 1.5rem;
    width: 1.5rem;
    font-size: 1.5rem;
    margin-left : 0.5rem;
    margin-right : 0.5rem;
}

.tab button span:hover {
    color : white;
    background : red;
}

#sync_tab_pm_analyse:hover{
   color : white;
       background : blue;
       padding : 1rem 1rem;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #F5F7FA;


}

/* Style the tab content */
.tabcontent {
  display: none;
  height : calc(100% - 2rem);
  padding: 0px 0px !important;
  border: 0px solid #000000;
  border-top: none;
  color : #000000;

  position: relative;
  top: 0rem;
  overflow-y: auto;
}

.div_text {
  display: flex;
  align-items: center;
  justify-content: end;
}

.div_input {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------ alert start ----------------------------------------- */
/* ------------------------------------------ alert start ----------------------------------------- */
/* ------------------------------------------ alert start ----------------------------------------- */


        #div_parent_alert {
            position: fixed;
            display: none;
            display: -webkit-box;
            justify-content: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(4, 0, 0, 0.7) ;
            z-index: 99;
        }
        #div_parent_alert_Danger {
                    position: fixed;
                    display: none;
                    display: -webkit-box;
                    justify-content: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -webkit-box-align: center;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background-color: rgba(4, 0, 0, 0.7) ;
                    z-index: 99;
                }

        .is-out-of-date .mzp-c-notification-bar.out-of-date, .is-up-to-date .mzp-c-notification-bar.up-to-date {
            display: block;
        }
        .mzp-c-notification-bar.mzp-t-success {
            background-color: #88ffd1;
        }
        .mzp-c-notification-bar.mzp-t-danger {
                    background-color: #ff8080;
                }
        .mzp-c-notification-bar {
            /*display: none;*/
            margin: 24px auto;
        }
        @media (min-width: 480px)
            .mzp-c-notification-bar {
                margin: 24px auto 0;
                max-width: 688px;
            }
            .mzp-c-notification-bar {
                zoom: 1;
                background-color: #ededf0;
                border: 1px;
                border-radius: 4px;
                box-shadow: 0 16px 24px 2px rgba(29,17,51,.04),0 6px 32px 4px rgba(9,32,77,.12),0 8px 12px -5px rgba(29,17,51,.12);
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                color: #20123a;
                font-size: 14px;
                font-size: .875rem;
                font-weight: 400;
                line-height: 1.5;
                margin: 24px 16px 0;
                padding: 16px 48px;
                position: relative;
                text-align: center;
            }

/* ------------------------------------------ alert end ----------------------------------------- */
/* ------------------------------------------ alert end ----------------------------------------- */
/* ------------------------------------------ alert end ----------------------------------------- */


/* Create the animation */
@keyframes move {
  to { transform: translateX(-15%); }
}





.notification-count{
background: red;padding-right: 5px;padding-left: 5px;padding-top: 1px;padding-bottom: 1px;border-radius: 50%;
position: absolute;
top : -10%;
right : 15%;
}

.notification-count-anim{
animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}