.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#kavi-app { transition: all .5s; margin-right: 0; }
#kavi-app.side-panel-open { margin-right: 350px; }
#side-panel { transition: all .5s; width: 0; background-color: #f9f9f9; position: fixed; right: 0; top: 0; bottom: 0; }
#side-panel.open { padding: 30px; width: 342px; border-left: #e8e8e8 1.5px solid; }

body { font-family: proxima, Arial, Helvetica, sans-serif; font-size: 13px; margin: 0; padding: 0; overflow: hidden; line-height:  150%; }
#aform { border-radius: 6px; margin: 50px auto 0 auto; width: 400px; }
body.anonymous { display: flex; flex-direction: row; position: absolute; left: 0; top: 0; right: 0; bottom: 0; align-items: center; align-content: center; justify-content: center; }
body.anonymous .login-container { position: relative; width: 1050px; display: flex; flex-direction: row; background-repeat: no-repeat; background-position: right bottom; background-image: url(../img/login-image.png); }
body.anonymous .login-container .form-container { display: flex; flex-direction: column; width: 310px; }
body.anonymous .login-container .copyright { position: absolute; left: 5px; bottom: -20px; }
body.anonymous .login-container .copyright a:link, body.anonymous .login-container .copyright a:visited { text-decoration: underline; }
body.anonymous .login-container img { align-self: flex-start; margin-bottom: 30px; }
body.anonymous .login-container h1 { font-size: 36px; line-height: 44px; padding: 0 0 0 0; }
body.anonymous .login-container h3 { font-family: proxima; font-weight: normal; font-size: 22px; margin-bottom: 30px; }
body.anonymous .login-container .ufield.vertical label { width: 100%; font-size: 12px; font-family: proxima; }
body.anonymous .login-container a:link, body.anonymous .login-container a:visited { text-decoration: none;}
body.anonymous .login-container .ufield.vertical label a:link,
    body.anonymous .login-container .ufield.vertical label a:visited { display: flex; flex: 1; justify-content: flex-end; }
body.anonymous .login-container .ufield.vertical .el input { border: transparent 1.25px solid; }
body.anonymous .login-container .ufield.vertical .el input::placeholder { opacity: 1; }

.keep-aspect-ratio { max-width: 100%; flex: 0 0 auto;  /* IE */ object-fit: scale-down; /* FF */}
.warning-box { overflow: hidden; padding: 20px; margin: 30px 0 40px 0; border-radius: 3px; }
.tippy-box { font-family: proxima; font-size: 12px; }

.table-container { padding: 0 40px; }
span.url { font-family: proximaBold; font-size: 12px; }
.notfound-message { text-align: center; }
.notfound-message label { font-family: proximaBold; font-size: 16px; }
.notfound-message img { width: 250px; margin: 30px 0; }

.inner-tab { border-bottom: #e8e8e8 1.5px solid; line-height: 36px;}
.inner-tab span { font-size: 14px; color: #172b4d; margin: 0 10px; display: inline-block; margin-bottom: -1.5px; border: transparent 1.5px solid; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.inner-tab span:nth-child(1) { margin-left: 0; }
.inner-tab span:hover { border-bottom: #242424 1.5px solid; color: #242424; }
.inner-tab span.selected { color: #5065da; font-family: proximaBold; border-bottom: #5065da 1.5px solid; cursor: default; }

.file-box { 
    text-align: center; 
    position: relative; 
    cursor: pointer; 
    float: left; 
    width: 130px; 
    height: 130px; 
    margin: 5px; 
    border: #e8e8e8 1.25px solid; 
    border-radius: 4px; 
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    overflow: hidden; 
}
.file-box:hover {border: #ccc 1.25px solid; }
.file-box.selected { border: #5065da 1.5px solid; background-color: #f3f3ff; }
.file-box i.options { padding: 5px; position: absolute; right: 0px; bottom: 0px; display: none; font-size: 18px; z-index: 1; }
.file-box.selected i.options { display: block; }
.file-box.listed:hover i.options { display: block; }
.file-box label { cursor: pointer; display: block; padding: 5px 20px 5px 10px; color: #5e6c84; font-size: 12px; line-height: 14px; position: absolute; width: 100%; bottom: 0; height: 40px; overflow: hidden; text-overflow: ellipsis; }
.file-box.folder div i { color: #5e6c84; font-size: 48px; width: 48px; height: 48px; display: inline-block; max-width: unset; }
.file-box.folder.up div i { font-size: 24px; }
.file-box.folder.up span { transform: rotate(90deg); display: inline-block; }
.file-box .image { overflow: hidden; height: 80px; border-bottom: #e8e8e8 1px solid; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; }
.file-box .image img.image_L { max-width: 100%; }
.file-box .image img.image_P { max-height: 100%; }

#file-item-detail-panel { border-left: #e8e8e8 1.5px solid; background-color: #f5f5f5; width: 350px; display: none; overflow: auto; }
#file-item-detail-panel.show { display: flex;  }
#file-item-detail-panel img.main-image { max-width: 100%; display: block; }
i.panel-close-icon { cursor: pointer; position: absolute; right: 10px; top: 10px; padding: 5px; color: #fff; width: 32px; height: 24px; border-radius: 50%; background-color: #242424; font-size: 14px; text-align: center; }

p.address-bar { border-radius: 4px; background-color: #f5f6f8; padding: 2px 10px 2px 30px; color: #172b4d; position: relative; font-family: proximaBold; color: #5e6c84; font-size: 12px; }
p.address-bar i { position: absolute; left: 8px; color: #5e6c84; top: 4px; font-size: 18px; }

.tab-corner-button { position: absolute; right: -5px; top: -12px; }
.datalist-item-preview { max-width: 100%; border-radius: 5px; box-shadow: 0 0 5px #ccc;}

.menu-row-container { margin: 0; }
.menu-row-container .menu-row { cursor: default; overflow: hidden; border-radius: 4px; padding: 5px 10px; background-color: #f2f2f2; margin: 10px 0; }
.menu-row-container .menu-row:hover { background-color: #eaeaea; }
.menu-row-container .menu-row label { line-height: 28px; display: inline-block; color: #5f6368; }
.menu-row-container .menu-row label i { font-size: 18px; margin-right: 6px; }
.menu-row-container .menu-row.root { background-color: #f5f5f5; border: #f5f5f5 1px solid; }
.menu-row-container .menu-row.root:hover { background-color: #f4f8ff; border: #dae6fa 1px solid; }
.menu-row-container .menu-row.root label { font-family: proximaBold; }
.menu-row-container .sub-menus { padding-left: 30px; }

.dpagination { text-align: center; padding: 15px; }
.dpagination a:link, .dpagination a:visited { text-decoration: none; margin: 0 3px; display: inline-block; padding: 0 2px; }
.dpagination a.active { font-family: proximaBold; border-bottom: #5f6368 1.5px solid; }

.doc-list-item { display: flex; border-radius: 4px; padding-right: 15px; position: relative; }
.doc-list-item:hover { background-color: #f2f2f2; }
.doc-list-item img { width: 48px; margin-right: 8px; }
.doc-list-item * { align-self: center;}
.doc-list-item label { flex: 1; }
.doc-list-item i { font-size: 16px; margin-left: 20px; }
a .doc-list-item label { cursor: pointer; }

tr.suspended-page td { color: #ccc !important; text-decoration: line-through; }
.image-info { flex: 1; }
.column-image-preview { display: flex; justify-content: center; overflow: hidden; border-bottom: #e8e8e8 2px solid }
.column-image-preview.landscape {  }
.column-image-preview.vertical { max-height: 400px; }
/* TABLET DIKEY */
@media only screen and (width : 768px) {
    
}

/* TABLET YATAY */
@media only screen and (width : 1024px) {
    
}

/* ALL MOBILE */
@media only screen and (max-width : 1024px) {
}