@keyframes marquee {
  100% { transform: translateX(-100%); }
}


#mark_file_container{

    position: absolute;
    z-index: 1;
    background-color: #0bde03;
    width: 100%;
    /*height: 8%;*/
    border-radius: 10px;
}

#mark_file_counter{
    
    margin: 20px;
    font-size: small;
    
}

#cancel_mark_files,#all_mark_files{
    border: solid 1px palevioletred;
    padding: 5px;
    background-color: chartreuse;
}

#files_count{
    position: relative;
    color: #963939;
    font-size: small;
    left: -10px;
}

#search_result_box{
 
    /*float: left; */
    position: absolute;
    left: 18px;
    top: 30px;
    display: grid;
    margin: 0px;
    background-color: white;
    width: 66%;
    border-bottom-left-radius: 40px;
    text-align: center;
    border-bottom: solid 1px #b6a8a8;
    padding: 10px;
    
}

#search_result_box span{
    margin: 5px;
    /*border-bottom: solid 1px #b4b4b4;*/
    font-size: larger;
}

.topnav{
    position: relative;
    top: -5px;
    transition: 1s;
    
      margin: -0px;
    padding: 25px;
    background-color: #cbf5de;
    border-radius: 10px
    
}

.search-container {
  position: absolute;
  left: 75%;
  top: 15px;
  z-index: 1;
  transition: 1s;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  width:10%;
  transition: 1s;
  border-bottom-left-radius: 20px;
}

.search-container:hover > #search_file{
    /*transition: 1s;
    width:70%;*/
}


.topnav button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav button:hover {
  background: #f1efef;
}

.search-container button{
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav {
    float: none;
  }
  .topnav input[type=text], .topnav button {
    float: left;
    display: block;
    text-align: left;
    margin: 0;
    height:30px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}


.alt-fileio-trash{
    
    color:red;
    cursor:pointer;
    
}

audio{
    width: 50%;
}

video{
    
    width: 50%;
    height: 200%;
    
}

#player_container{
    position: absolute;
    background-color: transparent;
    width: 50%;
    height:50%;
    top: 0px;
    left: 0px;
}


#close_player{
    
    position: absolute;
    /* top: 10px; */
    /* left: -40px; */
    background-color: aquamarine;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    z-index: 1;
    
}

#file_detail{
    
    display: flow;
    color: #8c8c8c;
    margin:5px;
    
}

.setting_opened {
    width: 90%;
    position: absolute;
    top:50px;
    background: #19303d;
    text-align: left;
    color: white;
    border-radius: 20px;
    padding: 20px;
    z-index: 1;
    overflow: auto;
}

.notepad_opened {
    width: 90%;
    height: 70%;
    position: absolute;
    top: 50px;
    background: #19303d;
    text-align: left;
    color: white;
    border-radius: 20px;
    padding: 20px;
    z-index: 1;
    overflow: auto;
}

#text-edit{
    height: inherit;
    background-color: aliceblue;
    width: 100%;
    margin: -20px;
    position: absolute;
    resize: none;
}

#edit_filename{
    width:18%;    
}

@media screen and (max-width: 800px) {
  #edit_filename{
    width:50%;    
    }
}

#filename_section{
    position: sticky;
    top: 90%;
    left: 70%;
}

#edit_filename_save_button{
    
    width: 100px;
    font-family: fantasy;
    /* padding: 10px; */
    border: solid 1px white;
    background-color: aliceblue;
    font-size: x-large;
    
}


#loading{
    top: 30%;
    margin: -5px;
    padding: 20px;
    position: absolute;
    opacity: 1;
    font-size: 400%;
    color: red;
    z-index: 1;
}

.loading{
    animation: marquee 5s linear infinite;
}

.expand-file-name:hover{
   /* animation: marquee 5s linear infinite;*/
}



#filemanager_parent{
    display: flow-root;
    width: 120%;
    transition: 1s;
}

.color_issue{
    color: #60743a;
    cursor: pointer;
    width: 120%;
    border-bottom-style: solid;
    border-block-end-color: rgb(171 223 195);
}


/* file manager file bar size function*/
.file_manager_imagesize_small {
    height: 20;
    width: 20;
}

.file_manager_filesize_small {
    padding:unset;
    position: relative;
    left: 20px;
}

.file_manager_filesize_large {
    padding:10px;
    position: relative;
    left: 37px;
}

.file_manager_imagesize_large {
    height: 43;
    width: unset;
}

/* end file manager size function */

.file-ok{
    width:50%;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
}


#filemanager_file{
    /*width: 80%;*/
}

.unmarked{
    background-color: unset;
}

#filemanager_file:not(.unmarked):hover {

    background-color:#90cfad;
    color:black;
    width: 150%;
    /*animation: marquee 5s linear infinite;*/
    
}

.selected {
    background-color:#90cfad;
    color:black;
     width: 80%;
}

.unread_alert{
    
    color: #ffffff;
    background-color: darkred;
    padding: 10px;
    border-radius: 50px;
    position: absolute;
    border: solid 5px;
    
}

.text-share {
    width: inherit;
    background-color: rgb(198 255 224);
    border-radius: 10px;
    border: none;
    color: #8b1616;
    padding:10px;
    height: 400px;
}
    
.file-share {
     width: inherit;
    background-color: rgb(198 255 224);
    border-radius: 10px;
    border: none;
    color: #8b1616;
    padding:10px;
    height: 400px;
}    

#chat_system{
    width: inherit;
    background-color: rgb(0 0 0);
    border-radius: 10px;
    border: none;
    color: #8b1616;
    padding: 1px;
    height: 400px;
}

    
  
#file_image_alt{
    float: left;
    position: absolute;
    left: -5px;
}  

form input {
   margin:5px;
   width:50%;
}

#update_filename,#update_filename_close{
    color: snow;
    border: 1px solid white;
    margin: 5px;
    cursor: grabbing;
    background: #3054a5;
}
  
#rename_file{
    width:130px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid;
    font-style: italic;
    background-color: #dbe5e0;
    color: black;
}

.login_form{
   margin:20px;
}

.login_form label{
    font-size: 90%;
}

.submit_login{
    
    position: relative;
    left: 42%;
    /* font-size: 20px; */
    padding: 10px;
    margin: -2px;
    width: 100px;
    height: 5px;
    
    
}





.dashboard-dashboard{
    text-align:center;   
}


.dashboard-item:hover{
    font-size: 125%;
      color: red;
      
}

.dashboard-item{
    transition: font-size 1s;
    font-size: 100%;
    color: brown;
    float:left;
    margin: 10px;
}

.dashboard-item strong{
    display: flow;
    font-size: small;
}

.dashboard-item:not(:active) {
  
    color: #bf0000;
}

    
.authen {
    background-color: rgb(198 255 224);
    text-align: center;
    height: auto;
    width: inherit;
    float: left;
    border-radius:10px;
} 

.authen strong{
    
    color: #196e3f;
    /*font-size: larger;*/
    /* padding: 20px; 
    position: relative;
    top: 10px;
    */
}

#menu_select {
    margin-bottom: 0.5rem;
    background-color: #c6ffe0;
    padding: 10px;
    /* width: 50%; */
    /* position: relative; */
    top: 4.6px;
    left: -4px;
    border-radius: 10px;
    float: left;
    margin: 5px;
    /* font-size: inherit; */
    cursor: pointer;
    /* font-size: 100%; */
    text-align: center;
    transition: 1s;
}
    
/*    
#menu_select {
    margin-bottom: 0.5rem;
    background-color: #c6ffe0;
    text-align: left;
    padding: 10px;
    width: fit-content;
    position: relative;
    left: -4px;
    border-radius: 10px;
    float: left;
    margin: 5px;
    font-size: inherit;
}    
*/

#menu_select:hover {
transition: 1s;
}