/** SINGLETON MODAL DIALOG **/
#kp-dialog-scroll-wrapper
{
 position: fixed;
 width: 100%;
 max-height: 100%;
 overflow-y: auto;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 z-index: 20;
}
#kp-dialog
{
 position: relative;
 width: 300px;
 max-width: 90%;
 margin: 0 auto;
 border: 1px solid #000;
 border-radius: 21px;
 background-color: #fff;
 padding: 3px;
}
#kp-dialog #kp-dialog-title
{
 font-size: 15px;
 font-weight: bold;
 color: #fff;
 background-color: #002f6d;
 border-radius: 17px;
 padding: 9px 40px 10px 17px;
 word-break: break-all;
}
#kp-dialog #kp-dialog-close
{
 position: absolute;
 top: 5px;
 right: 9px;
 width: 15px;
 height: 15px;
 padding: 8px;
 cursor: pointer;
 color: #fff;
}
#kp-dialog #kp-dialog-close svg
{
 width: 15px;
 height: 15px;
}
#kp-dialog #kp-dialog-content
{
 padding: 12px 12px 18px 12px;
}
#kp-dialog #kp-dialog-buttons
{
 border-top: 1px solid #777;
 padding: 8px;
}
#kp-dialog-okbutton
{
 width: 100px;
 text-align: center;
 color: #fff;
 background-color: #002f6d;
 padding: 12px;
 margin: 0 auto;
 border-radius: 18px;
 cursor: pointer;
}
#kp-dialog .kp-dialog-icon
{
 width: 30px;
 height: 30px;
 position: absolute;
 top: 0;
 left: 0;
}
#kp-dialog .kp-dialog-icon svg
{
 width: 30px;
 height: 30px;
}
#kp-dialog-content #kp-dialog-error-msg
{
 margin: 8px auto;
 color: #800;
 font-size: 14px;
}
#kp-dialog-content #kp-dialog-error-msg:empty
{
 margin: 0;
}

/** GRID AND LIST VIEW **/
.kp-list
{
 width: 100%;
}
.kp-list[data-arrange="list"]
{
}
.kp-list::after
{
 content: "";
 display: block;
 clear: both;
}
.kp-list-item
{
 width: 92px;
 height: 120px;
 float: left;
 position: relative;
 margin: 2px 2px 12px 12px;

 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}
.kp-list[data-arrange="list"] .kp-list-item
{
 width: 90%;
 height: 42px;
 margin: 2px 0 8px 5%;
 float: none;
}
.kp-list-item-label
{
 display: block;
 width: 88px;
 height: 54px;
 min-height: 54px;
 padding: 64px 2px 2px 2px;
 position: absolute;
 top: 0;
 left: 0;
 text-align: center;
 overflow: hidden;
 overflow-wrap: anywhere;
 border: 1px solid rgba(255,255,255,0);
 border-radius: 5px;
}
.kp-list[data-arrange="list"] .kp-list-item-label
{
 width: 100%;
 height: 40px;
 min-height: 40px;
 padding: 0;
 text-align: left;
}
.kp-list-item[data-selected="true"] .kp-list-item-label
{
 background-color: #d2def0;
 border-color: #5d82be;
}
.kp-list .kp-list-item-label:hover
{
 border-color: #87acdb;
 background-color: #f5faff;
 height: auto;
 z-index: 1;
}
.kp-list .kp-list-item[data-selected="true"] .kp-list-item-label:hover
{
 background-color: #d2def0;
}
.kp-list[data-arrange="list"] .kp-list-item-label:hover
{
 height: auto;
}
.kp-list[data-arrange="list"] .kp-list-item-text
{
 display: block;
 padding: 12px 2px 12px 58px;
 white-space: nowrap;
}
.kp-list[data-arrange="list"] .kp-list-item-label:hover .kp-list-item-text
{
 white-space: normal;
}
.kp-list .kp-list-item .kp-list-item-subtitle
{
 display: none;
}
.kp-list[data-arrange="list"] .kp-list-item .kp-list-item-subtitle
{
 display: inline;
 font-size: 13px;
 color: #555;
 font-style: italic;
 margin-left: 8px;
}
.kp-list-item-check
{
 display: none;
 position: absolute;
 top: 8px;
 left: 8px;
 width: 16px;
 height: 16px;
 background-image: url(svgs/square-mini.svg);
 background-size: 16px 16px;
}
.kp-list[data-multiselect="true"] .kp-list-item[data-selected="true"] .kp-list-item-check,
.kp-list[data-multiselect="true"] .kp-list-item-label:hover .kplist-item-check,
.kp-list[data-selecting-multiple="true"] .kp-list-item-check
{
 display: block;
}
.kp-list[data-selecting-multiple="true"] .kp-list-item[data-selected="true"] .kp-list-item-check
{
 background-image: url(svgs/tick-box-mini.svg);
}
.kp-list[data-arrange="list"] .kp-list-item-check
{
 top: 12px;
}
.kp-list-item-label .folder-icon {
 display: block;
 position: absolute;
 top: 8px;
 left: 23px;
 width: 48px;
 height: 48px;
 background-image: url(svgs/folder-icon.svg);
 background-size: 48px 48px;
}
.kp-list-item-label .file-icon {
 display: block;
 position: absolute;
 top: 8px;
 left: 29px;
  width: 36px;
  height: 48px;
  border-radius: 3px;
}
.kp-list[data-arrange="list"] .kp-list-item-label .file-icon
{
 left: 31px;
 width: 18px;
 height: 24px;
 border-radius: 2px;
}
.kp-list[data-arrange="list"] .kp-list-item-label .folder-icon
{
 left: 28px;
 width: 24px;
 height: 24px;
 background-size: 24px 24px;
}
.kp-list-item-label .file-icon::before {
  border-bottom-left-radius: 2px;
  border-width: 8px;
}
.kp-list[data-arrange="list"] .kp-list-item-label .file-icon::before {
 border-width: 4px;
}
.kp-list-item[data-selected="true"] .kp-list-item-label .file-icon::before
{
 border-color: #d2def0 #d2def0 rgba(255,255,255,0.35) rgba(255,255,255,0.35); 
}
.kp-list-item-label .file-icon::after {
  font-size: 12px;
  padding: 3px 4px;
}
.kp-list[data-arrange="list"] .kp-list-item-label .file-icon::after {
 font-size: 7px;
 padding: 2px;
}
.kp-list .kp-list-group
{
 width: 90%;
 clear: both;
 margin: 12px auto 7px auto;
}
.kp-list .kp-list-grouplabel
{
 display: inline-block;
 min-width: 50%;
 padding-bottom: 4px;
 color: #777;
 font-size: 14px;
 border-bottom: 1px solid #aaa;
 text-decoration: none;
}

/** TREE VIEW LIST **/

.kp-treelist ul
{
 margin: 0;
 list-style: none;
 padding: 0;
}
.kp-treelist li
{
 padding-left: 25px;
 background-image: url(svgs/folder-icon.svg);
 background-repeat: no-repeat;
 background-size: 18px;
 background-position-y: 5px;
}
.kp-treelist li[data-selectable="false"]
{
 background-image: url(svgs/folder-icon-gray.svg);
}
.kp-treelist .kp-treelist-item
{
 padding: 5px;
 border: 1px solid rgba(255,255,255,0);
 border-radius: 3px;
 cursor: pointer;
}
.kp-treelist .kp-treelist-item:hover
{
 border-color: #87acdb;
 background-color: #f5faff;
}
.kp-treelist .kp-treelist-item[data-selected="true"]
{
 background-color: #d2def0;
 border-color: #5d82be;
}
.kp-treelist .kp-treelist-item[data-selectable="false"]
{
 color: #777;
 cursor: default;
}
.kp-treelist .kp-treelist-item[data-selectable="false"]:hover
{
 border-color: rgba(255,255,255,0);
 background-color: #fff;
}


/** DROP DOWN SELECT <div class="kp-select"><label><svg dropdown/></label><select>...</select></div> **/
 .kp-select
 {
   width: 80%;
   margin: 12px auto;
   position: relative;
   box-sizing: border-box;
   
   border: 1px solid #002f6d;
   border-radius: 0.25em;
   padding: 0; /*8px 10px;*/
   font-size: inherit;
   cursor: pointer;
   line-height: 1.1;
   background-color: #fff;
 }
 .kp-select svg
 {
   position: absolute;
   width: 18px;
   height: 18px;
   top: 50%;
   transform: translateY(-50%);
   right: 10px;
   color: #002f6d;
 }
 .kp-select select
 {
   box-sizing: border-box;
   appearance: none;
   outline: none;
   background-color: transparent;
   border: none;
   padding: 8px 10px;
   margin: 0;
   width: 100%;
   font-family: inherit;
   font-size: inherit;
   cursor: inherit;
   line-height: inherit;
   position: relative;
   z-index: 1;
 }
 .kp-select select::-ms-expand {
   display: none;
 }

/** TOOL-TIP POPUP **/
a.kp-tooltip
{
  display: inline-block;
  cursor: pointer;
  height: 18px;
  width: 18px;
  overflow: hidden;
  background-image: url(svgs/info.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  vertical-align: middle;
  margin-left: 6px;
}
a.kp-tooltip>span
{
  display: none;
}
#kp-tooltip-overlay
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
}
#kp-tooltip-popup
{
  position: absolute;
  z-index: 51;
}
#kp-tooltip-popup .tooltip-text
{
  position: relative;
  padding: 24px 12px 12px 12px;
  z-index: 53;
  width: 250px;
}
#kp-tooltip-popup .tooltip-back
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 52;
}