* {
    box-sizing: border-box;
    margin: 0 auto;
}
body {
    /*  background-color: white;*/
    /*background-color: #EEFBD7;*/
    background-color: whitesmoke;
    box-sizing: border-box;
}


.search-cont{
    display:flex;
    flex-direction:row;
    width:40%;
    align-items:center;
    justify-content:center;
    border:1px solid lightgrey;
    margin:5px;
    padding:0;
   
}
.txt-search{
    margin:0;
    padding:0;
}
.master-container {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    color:white;
   
}
.testDIV {
    margin-right: 220px;
}

.login-footer {
    background-color: #e8f5fe;
    width: 100%;
    font-weight: bold;
    font-size: medium;

    position: fixed;
    display:flex;
    flex-direction:row;
    left: 0;
    bottom: 0;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    /*box-shadow: rgba(103,21,87, 0.6) 0px 5px 10px;*/
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}



.login-footer-list i {
    color: #f58708;
    font-size: 20px;
    font-weight: bold;
}





.login-footer-list {
    display: flex;
    flex-direction: row;
    width: 100%;
}

    .login-footer-list > left {
        width: 25%;
        display: inline;
    }


    .login-footer-list > right {
        width: 25%;
     
        align-items: flex-end;
        display: flex;
        flex-direction: column;
    }


    .login-footer-list ul > li {
        display: inline;
        list-style: none;
        margin: 0;
        display: inline;
        text-decoration: none;
        padding-left: 3px;
        padding-right:3px;
    }



.footer-color {
    color: white;
}




.page_header {
    /*background: linear-gradient(90deg, rgba(225,106,106,1) 20%, rgba(80,33,84,1) 50%, rgba(136,133,217,1) 91%);*/
    /*    background: rgb(30,190,154);
*/ /*    background: radial-gradient(circle, rgba(225,119,106,1) 31%, rgba(217,204,211,1) 78%);
*/
    /*background: rgb(180,108,130);
    background: linear-gradient(171deg, rgba(180,108,130,0.6758053563222164) 28%, rgba(137,31,119,0.6786064767703957) 38%, rgba(30,190,154,1) 86%);*/
    /*background: rgb(239,125,0);
    background: linear-gradient(297deg, rgba(239,125,0,1) 16%, rgba(165,188,108,1) 48%, rgba(30,190,154,1) 91%);*/
    background: rgb(37,30,190);
    background: linear-gradient(65deg, rgba(37,30,190,0.9167017148656338) 9%, rgba(246,165,98,1) 90%, rgba(239,125,0,1) 100%);
    font-size: 28px;
    
   
    margin: 0;
    display: flex;
    flex-direction: row;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 5px;
    box-shadow: 1px 2px 1px rgba(79, 85, 159, 0.5);
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1;
}

.page_header .logo-header{
   width:40%;
  
   height:80px;
margin:3px;
  


}





    .page_header .user-info i, .login-container i,.upload_container> .upload-con-child i {
        color: #f9b40f;
        font-size: 22px;
        font-weight: bold;
    }
.master-container i {
    color: white;
    font-size: 20px;
    font-weight: bold;
}
.label-user_info{
    font-size: medium; font-weight:bold;
      
}


.label-user_info{
    font-size: medium; font-weight:bold
}
input[type=text], input[type=password], .user_txt {
    width: 100%;
    padding: 2px;
    margin: 5px 0;
    display: block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

    input[type=text]:focus, input[type=password]:focus, .user_txt:focus {
        outline: 2px solid slateblue;
        border: none;
    }


/*.mybutton {
    box-sizing: border-box;
    word-spacing: 5px;
    color: white;
    background-color: #4f559f;
    border: 1px solid #4f559f;
    padding: 8px 12px;
    margin: 8px 0;
    cursor: pointer;
    width: 95%;
    font-weight: bolder;
    font-size: large;
}*/


.mybutton-close {
    box-sizing: border-box;

    background-color: whitesmoke;
    color: #6c3a6f;
    border: 1px solid #6c3a6f;
 padding: 8px 8px;
 width:80%;
    cursor: pointer;

    font-weight: bolder;
    font-size: large;
}

.lab-img{
    width:100%;
 
     /*justify-content:center;
     align-items:center;*/ 
    background-image:url('../IMG-Lab/lab4.jpg');
background-size:auto;
}



.mybutton {
    /* background-image: linear-gradient(to right, #f54545 0%, #6c3a6f  51%, #f54545  100%)*/
    background-color: #5845af;
}
         .mybutton {
              padding: 8px 8px;
   width:80%;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 100% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
          border: 1px solid #6c3a6f;
            display: block;
          }

          .btn-grad:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         



.label {
    font-weight: bolder;
    font-size: 18px;
    display: inline;
     
}

.mybutton:hover, .mybutton-close:hover {
    opacity: 0.8;
}

h4, h3, h2 {
    font-weight: bolder;
    font-style: italic;
    margin: 0;
    padding: 0;
}
.page_header .header-color{
    color:white;
   display:flex;
   justify-content:center;
   align-items:center;
}


span.psw {
    float: right;
    padding-top: 16px;
}

.login-label {
    font-weight: bolder;
    font-size: 28px;
    font-style: italic;
    font-stretch: ultra-expanded;
    /*text-shadow: 4px 3px 0px hsl(47,85%,49%);*/
    text-shadow: 0 0 3px #f5a054;
    letter-spacing: 2px;
    word-spacing: 2px;
}
.stat_lab{
    display:none;
}
.login-container-button {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;

}

.login-container {
    display: flex;
    flex-direction: row;
    width: 95%;
   
    background-color: white;
    border-radius: 10px;
    border: 0;
    box-shadow: 1px 2px 5px rgba(79, 85, 159, 0.5);
}

.login-container-item {
    width: 90%;
}

.user-info {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    padding:8px;
  color:white;
}
    
    .login-container-button div {
        width: 50%;
    }



    .container{

        
        margin:140px auto;
      


    }

    .login-section-1{
    width:50%;
   
}


.login-section-2 {
    width: 50%;
    border-right: 1px solid #baafe0;
}
   .login-section-2    .img-section-2{
       margin:0;
       height:400px;
       width:100%;
        background-image:url('../Media_IMG/web-designing-team-designing-web-template-3839567-3202813.png');
    background-repeat:no-repeat;
    background-size:contain;
   background-position:center;

   }



    .top-section{margin-top:50px;}

  @media (max-width:993px) {

 
    .page_header .user-info i {
        color: #edbd0c;
        font-size: 18px
    }

    .label-user_info {
        font-size: 14px;
    }


     .page_header .logo-header{
        width:70%;
    }

    .footer-img {
        display: inline;
        width: 40px;
        height: 40px;
    }

    .login-container-button {
        width: 100%;
        display: flex;
        flex-direction: row;
      
    }

        .login-container-button div {
            width: 100%;
        }

        

    .login-container {
        width: 90%;
        display: flex;
        flex-direction: column;
  
    }
   .login-footer-list
      {  width: 100%;
        display: flex;
        flex-direction: row;}



       .login-footer-list > left {
        width: 50%;
    
   
    }


    .login-footer-list > right {
        width: 50%;

        display: flex;
        flex-direction: column;
    }



        .login-container .login-section {
            width: 100%;
        }

    .login-container-item {
        width: 100%;
    }
}





/*  small screen*/
@media(min-width:768px) {

    
    .container{
            width:750px
        }
    .page_header .logo-header{
        width:80%;
     
    }
   


    }
/*Medium screen*/
@media(min-width:992px) {

  
    .container {
        width:970px
    }
    .top-section {
        margin-top: 50px;
    }
     .page_header .logo-header{
        width:40%;
    }
   
}

/*large screen*/
@media(min-width:1200px) {
    .container {
        width: 1000px;
    }

    .top-section {
        margin-top: 40px;
    }
}

.upload_container, .file_list {
    display: flex;
    flex-direction: column;
    width: 80%;
    background-color: white;
    border: 2px solid lightgray;
    border-radius: 10px;
    direction: rtl;
}
    .upload_container > header, .file_list > header, .add_screen> header {
        margin: 0;
        padding: 0;
        border: 1px solid lightgrey;
           background-color: #d7e0e6;
      /*  background-color: #fbf396;*/
        color: white;
    }
        .upload_container > header h3{
            display:inline;
        }
        .upload-con-child {
            display: flex;
            flex-direction: row;
            width: 100%;
        }
         .upload-txt-child {
            display: flex;
            flex-direction: column;
            width: 100%;
            height:100%;
            /*background-image:url(../Media_IMG/Wavy_Bus-15_Single-06.jpg);
            background-repeat:no-repeat;
            background-size:contain;
            background-position:left;
            background-position-X:top;*/
            

        }

         .up-txt-row{
              display: flex;
            flex-direction: row;
            width: 100%;
        margin:0;
        padding:0;
            color:blue;
            background-color:#f5f2ff;
         }

         .img-txt-up{
             background-image:url(../Media_IMG/projectdoc.png);
            width:35%; height:255px;  
 background-position:left;
   background-repeat:no-repeat;
   background-size:contain;
   background-color:white;
        border-radius:  10px 80px 80px 10px;
         }
   .upload-con-child-1{
 width:5%;
   }
   .upload-con-child-2{
 width:15%;
   }
.upload-con-child-3 {
    width: 70%;
    border: 5px dashed #8782d5;
    display: flex;
    flex-direction: column;
    background-color: #fbf6f7;
}

    .upload-con-child-3 .upload-cloud, .upload-con-child-3 .upload-date, .upload-con-child-3 .upload-btn{
    width: 100%;
    }
    .upload-con-child-3 .upload-   {
        width: 100%;
        display:flex;
        flex-direction:row;
        justify-content:space-evenly
    }
        .upload-con-child-4 {
            width: 65%;
        /*    background-image: url('../Media_IMG/istockphoto-1173168885-612x612.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            height: 350px;*/
        }
 .file_upload{
    width:100%;
  
}
.file_list .file_details {
    width: 100%;
}

.testAJX .uploadedState {
}
.testAJX{
    direction:rtl;
}

.testAJX .ajax__fileupload_progressBar {
}




.testAJX .ajax__fileupload {
    border: #D3D3D3 1px solid;
    overflow: auto;
    padding: 4px;
}

    .testAJX .ajax__fileupload_selectFileContainer {
        display: inline-block;
        height: 70px;
        line-height: 24px;
        overflow: hidden;
        position: relative;
        width: 100px;
    }

    .testAJX .ajax__fileupload_selectFileButton {
        background-color: #5844b0;
        color: white;
        cursor: pointer;
        display: block;
        font-size: 14px;
        font-weight: bold;
        height: 30px;
        line-height: 24px;
        text-align: center;
        width: 100px;
    }

    .testAJX .ajax__fileupload_selectFileButton:hover {
        background-color: #000000;
        color: #ffffff;
    }

.testAJX .ajax__fileupload_topFileStatus {
    color: rgb(127, 126, 126);
}

.testAJX .ajax__fileupload_ProgressBarHolder {
    margin-right: 70px;
}

    .testAJX .ajax__fileupload_uploadbutton {
        background-color: #f49946;
        color: white;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        width: 80px;
        padding: 5px;
    }

.testAJX .ajax_fileupload_cancelbutton {
    background-color: darkred;
    color: white;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    width: 50px;
}

.ajax__fileupload_dropzone {
    line-height: 50px;
    margin-bottom: 2px;
    text-align: center;
    background-image: url('../Media_IMG/19923 (626×417).jpg');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    color:black;
    font-weight:bold;
    font-style:italic;
    
    background-color:#f6f3fe;
 
}

.testAJX .ajax__fileupload_queueContainer {
    border: green 1px solid;
    border-width: 1px;
    clear: both;
    margin-top: 2px;
    padding: 4px;
    height: 100%;
}

.testAJX .ajax__fileupload_progressBar {
    background-color: darkgreen;
    padding-left: 4px;
}

.testAJX .ajax__fileupload_footer {
    height: 60px;
    line-height: 20px;
    margin-top: 2px;
}

.testAJX .ajax__fileupload_fileItemInfo {
    height: 20%;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    padding: 5px;
    line-height: 20px;
    direction: ltr;
  
}

    .testAJX .ajax__fileupload_fileItemInfo .filename {
        font-weight: bold;
    }

    .testAJX .ajax__fileupload_fileItemInfo .uploadstatus {
        font-style: italic;
        font-weight:bold;

    }


       




        .testAJX .ajax__fileupload_fileItemInfo .removeButton {
            background-image: url('../Media_IMG/cancel.png');
            background-color: transparent;
            color: transparent;
            cursor: pointer;
            display: block;
            float: left;
            line-height: 20px;
            text-align: center;
            width: 30px;
            height: 25px;
            background-size: contain;
            background-repeat:no-repeat;
        }




    .testAJX .ajax__fileupload_fileItemInfo .uploadedState {
        background-color: #d6f4e1;
        color: darkgreen;
        padding: 10px;
        width: 100%;
        text-align: center;
    }


        .testAJX .ajax__fileupload_fileItemInfo .uploadedState > span:nth-child(even)::before {
            content: url('../Media_IMG/correct.png');
            width: 10px;
            height: 10px;
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            right:25px;
            top: 0;
        }

       /* gggffddworking-here*/
    .testAJX .ajax__fileupload_fileItemInfo .uploadingState {
        background-color: hsl(49,91%,75%);
        color: #ff9900;
        width: 100%;
        text-align: center;
        padding: 10px;
    }
        .testAJX .ajax__fileupload_fileItemInfo .uploadingState + .removeButton {
            background-image: url('../Media_IMG/Reload-1s-200px (2).gif');
            background-color: #877fd0;
            border: 1px solid #f1eb9a;
            border-radius: 360px;
            width: 32px;
            height: 32px;
            background-size: contain;
            background-repeat: no-repeat;
        }

.testAJX .ajax__fileupload_fileItemInfo .pendingState {
    background-color: #cfcccc;
    color: #009;
    padding: 10px;
    width: 100%;
    text-align: center;
}

    .testAJX .ajax__fileupload_fileItemInfo .errorState {
        background-color: #ff0000;
        color: #ffffff;
    }

    .testAJX .ajax__fileupload_fileItemInfo .cancelledState {
        background-color: whitesmoke;
        color: darkred;
        padding:10px;
        width:100%;
        text-align:center;

    }

.testAJX .ajax__fileupload_selectFileContainer input {
    border: medium none;
    cursor: pointer;
    height: 40px;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}


.testAJX .ajax__fileupload_fileItemInfo div.removeButton {
    position: absolute;
    right: 0;
    top: 0;
}

.ergent_txt{
 width: 100%;
    padding: 5px;
    margin: 8px;
    display: block;
    border: 1px solid #4539bc;
    border-radius:10px;
    box-sizing: border-box;
}

.scre-cont{
      position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;  
      height:100%; 
}

.col-1{
    width:25%;
    height:100%;

   
}
.col-23{
    width:100%;
        height:100%;
  padding:3px;

}
.col-2{   
  width:75%;
    max-height:100%; 
     display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
   padding:5px;
}
.r1-col-2{
   width:100%;
  height:91%;

     display:flex;
  flex-direction: row;
  justify-content:center;
  align-items:center;
 padding:3px;
 
}

.r3-col-2{
       width:100%;
  height:2%;

     display:flex;
  flex-direction: row;
  justify-content:center;
  align-items:center;
 padding:3px;
}
.r2-col-2 {
    width: 100%;
    height: 7%;
    margin: 0;
    display: flex;
    padding: 3px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.col-21{
    width:50%;
        height:100%;
  padding:5px;

    
}

.mylegend {
    font-weight: bolder;
    font-size: 18px;
    color: whitesmoke;
    padding: 3px;
    border: 1px solid #2e6680;
    border-radius: 10px;
    padding:5px

}
.col-22 {
    width: 50%;
    height: 100%;
    padding:5px;
    display:flex;
    flex-direction:column;
    justify-content:center;
   
}
.col-22-vid {
    background-color: #0f0f0f;
    border: 2px solid #217094;
    border-radius: 10px;
    width: 95%;
    height: 45%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-self:center;
    box-shadow:0px 3px #217094;
}
    .col-22-vid > video {
        border: 1px solid transparent;
        border-radius: 10px;
    
    }
.col-22-img {
    background-color: #0f0f0f;
    border: 2px solid #217094;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    height: 52%;
    width: 95%;
    padding: 3px;
    box-sizing: border-box;
    box-shadow: 0px 3px #217094;
}

    .col-22-img .pic {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .col-22-img .title {
        height: 10%;
        width: 100%;
        border: 1px solid red;
        border-radius: 15px;
        background-color: #3d3d3d;
        font-size: 1.2rem;
        box-shadow: 0 0 1px rgba(255,255,255,0.2);
    }
    .col-22-img .pic > img {
         
      border-radius:10px;
        width: 100%;
        height: 100%;
    }
.col23-news{
 width:100%;
  height:100%;

border:1px solid #1d1d1d;

}
.col-1-cont{
   width:100%;
    height:100%; 
   display:flex;

  padding:5px;
/*border:1px solid red;*/

   flex-direction: column;
  justify-content:center;
  align-items:center

}
.log-img{
      width:35%;
    height:18%; 
     margin:0 auto;
     padding :3px;
}
.log-img > img{
     width:100%;
     text-align:center;
     height:100%;
    
}

.log-title{

        width:100%;
    height:8%;    

     text-align:center;
 
     padding:3px;
     
     color:whitesmoke;
     font-size:larger;
    


}


.adv-title {
    width: 100%;
    height: 7%;
    text-align: center;
    padding: 3px;
    color: whitesmoke;
    font-size: larger;
   
}

.log-title > p {
    font-size: 2.6rem;
    font-weight: bolder;
    font-style: italic;
  
    color: #e67e22;
}

.adv-title > p {
    font-size: 2.3rem;
    font-weight: bolder;
    font-style: italic;
    color: whitesmoke;
      text-shadow: 1px 1px #e67e22;
}


.comp-message {
    width: 100%;
    height: 16%;
    border: 2px solid #f69938;
    border-radius: 10px;
    background: #082e40;
    padding: 3px;
    box-shadow: 0px 3px #f69938;
}

.mess_lab{
  

    font-weight:bold;
    font-size:2rem;
    font-style:italic;
    color:#e67e22;

}                                          
.comp-vision {
   margin-top: 15px;
    width: 100%;
    height: 16%;
    border: 2px solid #f69938;
    border-radius: 10px;
    background: #082e40;
    padding: 3px;
    box-shadow: 0px 3px #f69938;

}

.comp-message >p ,.comp-vision > p{
    font-size:1.6rem;
   font-style:italic;

}


.comp-message > i, .comp-vision > i, .alarm >i{
    font-weight:bold;
    font-size:2.4rem;
}

.copy-ri{
 

    width: 100%;
    height: 6%;
    text-align: center;
    font-weight: bolder;
    font-size: 18px;
    padding: 5px;
    font-style: italic;
    border: 1px solid #7c7c81;
    border-radius: 10px;
    box-shadow: 0px 3px 3px #082e40;
    display:flex;
    justify-content:center;
    align-items:center;

 
    
}



.cal-value {
    width: 100%;
    height: 4%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #e67e22;
    font-weight:bolder;
    font-size:1.6rem;
    padding:3px;
}




/*.alarm{
  
      height: 7%;
    width: 100%;
    margin-top: 5px;
    display: flex;
    font-size: 18px;
    flex-direction: column;
    color: #f69938;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    padding:3px;
   
  
}*/

  /* .alarm .cloc-alarm {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }*/
/*.clock {
    width: 45%;
    height: 100%;
    text-align: center;
    font-family: Orbitron;
    display: inline;
    direction:ltr;
    text-align:center;
}*/

 .add_screen{
           display:flex;
       flex-direction:column;
       width:95%;
       border:2px solid lightgray;
   border-radius:10px;
    text-align:center;
  margin:5px auto;
background-color:white;
box-shadow:5px 0px lightgrey;
    }

.obj_child{
        display:flex;
        flex-direction:row;
        width:100%;
     
    }

.first_child{
    width:40%;
        display:flex;
       flex-direction:row;
    justify-content:center;
    align-items:center;
}
.second_child{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:60%;
}
.third-child{
    width:50%;
}

.obj-name{
    width:50%;
}

.zero-margin{
    margin:0;
}
   

.pann-on{
    display:block;
}

.pann-off{
    display:none;
}
.new_obj_child{
    width:100%;
        display:flex;
       flex-direction:row;
       justify-content:center;
       align-items:center;
 
}

.ana-clock {
    width: 100%;
    height: 24%;
    padding: 3px;
    direction: rtl;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.empty_space{
    width:100%; height:1%;
}
@media all and (display-mode: fullscreen) {
    .comp-message > p, .comp-vision > p {
        font-size: 1.6rem;
        font-style: italic;
    }


    .ana-clock{
        height:23%;
    }

 
    .cal-value{
 width:100%; height:5%;
    }

}

.hid-id{
    background: rgba(76, 175, 80, 0.0);
}

list-child{
      width:25%;
      text-align:right;
  }
         .dataList_header_style{
      font-size:large;
      font-weight:bold;
      color:white;
      padding:7px;
      background-color:#d7e0e6;
     text-align:right;
      width:100%;
      border:none;

  }
  .list_content{
      width:100%;
      margin: 5px;
      padding:3px;

  
  }
         .dataList_container{
            display:flex;
            flex-direction:column;
            width:100%;
        }
        .dataList_1sRow{
             display:flex;
            flex-direction:column;
            width:100%;
            text-align:center;
        }

        .hid-id{
              opacity: 0;

        }