*
{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: 14px;
    text-decoration: none;
    list-style: none;
    user-select: none;  
} 

body
{
    display: flex;  
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(to right, rgba(255,255,255,.5), #d9e6f2);
    background: #ecf0f3;
} 

.uzman-i{
     display: none;
     justify-content: space-between;
     position: absolute;
     padding: 8px 25px;
     margin-top: .5em;
     width: 70%;
     height: 23em;          
     border-radius: 8px;
     box-shadow: 13px 13px 20px #cbced1,
               -13px -13px 20px #ffffff; 
     /* z-index: 100; */
     background-color: #ffffff;

}
.uzman_close{
    position:absolute;
    top:10px;
    right:16px;
    font-size:16px;
    cursor:pointer;

}
.uzman-img{position:absolute:top:16px;left;20px;}
.uzman-i h2{position:absolute;top:1rem;left:40%;font-size:18px;font-weight:600;}

.fa
{
     color: #33cc33;
}

.container
{
    width: 95%;
    height: 92vh;          
    border-radius: 8px;
    box-shadow: 13px 13px 20px #cbced1,
               -13px -13px 20px #ffffff; 
}

/*Top css*/
.container .power
{   
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
    width:36px;
    height:32px;
}
.container .power:hover
{   
    opacity:.8;
}

.container .navbar
 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 25px;
     margin-top: .5em;
    /* background-color:#CFD1ECFF;*/
 }

 .container .navbar .logo
 {
     display: flex;
     align-items: center;
 }

 .container .navbar .logo .logoname
 {
     font-size: 18px; 
     margin-left: .5em;
     text-shadow: 1px 1px 1px rgba(16,16,16,.1),
     1px 2px 1px rgba(16,16,16,.1),
     1px 3px 1px rgba(16,16,16,.1),
     1px 4px 1px rgba(16,16,16,.1),
     1px 5px 1px rgba(16,16,16,.1) ;
 }

 .container .navbar .logo img
 {
     animation: rotate 8s linear infinite;  
 }

 @keyframes rotate
 {
     from
     {
         transform: rotate(-360deg);
     }
 }

 .container .navbar .time-period
 {
     display: flex;
     justify-content: center;
     align-items: center;
   
 }

 .container .navbar .time-period .select
 {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 25px;  
     border-radius: 8px;
     box-shadow: inset 3px 3px 3px #cbced1,
                 inset -3px -3px 3px #ffffff;
 }

 .container .navbar .time-period .select div
 {
    margin: 8px;
 }

 .container .navbar .time-period .select div .fa
 {
     margin: 0 5px;
 }
 .container .navbar .time-period .select .ok
 {
     margin-left: 0 5px;
     cursor:pointer;
 }

 .container .navbar .time-period .select span
 {
     font-weight: 700;
     font-size: 16px;
 }

 .container .navbar .time-period .custom select
 {
     outline: none;
     border: none;
     padding: 6px 10px;
     background: transparent;
     border-radius: 8px;
     box-shadow: inset 3px 3px 3px #cbced1,
                 inset -3px -3px 3px #ffffff;
 }


 /*Top css end*/ 

 /*mid css*/

 
 .container-body 
 {
     display: grid;
     grid-template-columns: 18% auto;
    /* background-color:#E8D8E0FF;*/

 }

 .container-body .sidebar
 {   
     margin: 10px 0 0 20px; 
     border-radius: 14px;
     padding: 10px;   
     border-radius: 8px;
     box-shadow: 13px 13px 20px #cbced1,
                  -13px -13px 20px #ffffff;
 }

 .container-body .sidebar ul li
 {
     padding: 10px 10px;
     margin: 5px 0; 
 }

 .container-body .sidebar ul li a
 {
     color: #000;
     text-transform: capitalize; 
     font-weight: 700;
 }

 .container-body .sidebar ul li .fa
 {
     font-size: 18px;
     padding: 0 5px;
 } 

 .container-body .sidebar ul .dropdown a
 {
    margin: 5px 0;
    text-transform: capitalize;
    color: #000;
    padding: 8px;
    padding-left: 0px;
   
 }

 .container-body .sidebar ul .dropdown #das
 {  
    box-shadow: inset 3px 3px 3px #cbced1,
    inset -3px -3px 3px #ffffff; 
    border-radius: 14px;    
 }
  .container-body .sidebar ul a:hover
 {  
    box-shadow: inset 3px 3px 3px #cbced1,
    inset -3px -3px 3px #ffffff; 
    border-radius: 14px;    
    background-color:#EAEAEAFF;
 }

 .container-body .sidebar ul .dashboard
 {
     background: #00004d;
     color: #fff;
     border-radius: 8px;
     padding: 10px;
 }

 .container-body .sidebar ul .dashboard a
 {
     color: #fff;
 }

 .container-body .sidebar ul .notification span
 {
    font-size: 10px;
    background: #33cc33; 
    color: #fff; 
    padding: 3px 8px; 
    font-weight: 700;
    border-radius: 14px;
 }

 .container-body .sidebar ul .profile
 {
     position: relative;
     top: .5em;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     box-shadow: inset 3px 3px 3px #cbced1,
                 inset -3px -3px 3px #ffffff;
     border-radius: 12px;
   
 } 

 .container-body .sidebar ul .profile img
 {
     border-radius: 50%;
 }

 .container-body .sidebar ul .profile .name
 {
     margin: 3px 0;
     text-transform: capitalize;
     font-weight: 700;
 }

 .container-body .sidebar ul .profile .username
 {
     color: #808080;
     margin: 2px 0;
     font-size: 11px;
 }

 .container-body .sidebar ul .profile a
 {
     margin: 5px 0;
     text-transform: capitalize;
     color: #33cc33;
 }


 .container-body .main-body .tittle
 {
     padding: 15px;
     margin: 0 20px; 
 }

 .container-body .main-body .tittle .greeting
 {
     text-transform: capitalize;
     font-weight: 700;
     font-size: 16px;
 }

 .container-body .main-body .tittle h2
 {
     font-size: 25px;
     font-weight: normal;   
 }

 .container-body .main-body .cards
 {
     display: grid; 
     grid-template-rows: 120px auto;
     grid-gap: 20px;    
     padding: 0 20px; 
 }

 
 .container-body .main-body .cards .row .col
 { 
      display: flex;
     justify-content: center;
     align-items: center; 
     border-radius: 15px;
     box-shadow: 13px 13px 20px #cbced1,
     -13px -13px 20px #ffffff;
 }   

 .container-body .main-body .cards .row .col .card
 {
     display: flex; 
     align-items: center; 
     position: relative; 
 }
 

 /*Row-1 css*/

 .container-body .main-body .cards .row-1
 {
     display: grid;
     grid-template-columns: repeat(3,auto);
     grid-gap: 20px;
 }

 
 .container-body .main-body .cards .row-1 .three
 {
    box-shadow: inset 3px 3px 3px #cbced1,
                inset -3px -3px 3px #ffffff;
 }

 .container-body .main-body .cards .row-1 .col .card .logo 
    {    
        padding: 20px 24px;
        border-radius: 50%;
        box-shadow: inset 3px 3px 3px #cbced1,
                    inset -3px -3px 3px #ffffff;    
    }

    .container-body .main-body .cards .row-1 .col .card .logo .fa
    {
        font-size: 30px;
    }

    .container-body .main-body .cards .row-1 .col .card  .content
    {
        margin-left: 1em;
        cursor:pointer;
    }   

    .container-body .main-body .cards .row-1 .col .card  .content h2
    {
        font-size: 30px;
        font-weight: 500;
        margin: 5px 0;
    }

    .container-body .main-body .cards .row-1 .col .card  .content a
    {
        font-size: 12px; 
        color: #33cc33;
    }
 /*Row-1 css end*/ 

 

 /*Row-2 */
.container-body .main-body .cards .row-2
 {
     height: 210px;
     transition: 1s;
     box-shadow: inset 3px 3px 3px #cbced1,
                 inset -3px -3px 3px #ffffff;
 }
/*row-2 end*/


/*Row-3 css */
 .container-body .main-body .cards .row-3   
 {
    display: grid;
    grid-template-columns: repeat(4,auto);
    grid-gap: 20px;
    margin-top:10px;
 }

 .container-body .main-body .cards .row-3 .col
 {
     height: 80px;
     transition: 1s;
     box-shadow: inset 3px 3px 3px #cbced1,
                 inset -3px -3px 3px #ffffff;
 }

 .container-body .main-body .cards .row-3 .col:hover
    {
        height: 80px;
        box-shadow: 13px 13px 20px #cbced1,
                    -13px -13px 20px #ffffff;
 }

     .container-body .main-body .cards .row-3 .col .card .logo 
    {   
        padding: 20px 25px; 
    }

    .container-body .main-body .cards .row-3 .col .card .logo .fa
    {
        font-size: 28px;
    }

    .container-body .main-body .cards .row-3 .col .card  .content h1
    { 
         font-size: 18px;
         font-weight: 500;
    } 

 /*Row-3 css end*/