/*
    CSS Komma Management System 2.0
*/

/* Elements */
html{ height: 100%; }
body{ overflow-y: hidden; margin: 0; width: 100%; height: 100%; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 1.5; }
h1{ margin: 0 0 1em 0; font-weight: 400; font-size: 1.285714286em; line-height: 1.111111111em; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

body.loading{  }

.clear{ clear: both; }

#aside{ position: fixed; overflow-y: scroll; width: 13.69047619%; height: 100%; border-right: 1px solid #E0E6EC; background: #F72B3F;}
#list{ position: relative; overflow-y: scroll; float: left; margin-left: 14.285714285%; margin-right: .595238095%; width: 22.619047619%; height: 100%; border-right: 1px solid #E0E6EC }
#content{ float: left; overflow-y: scroll; width: 61.607142857%; height: 100%; transition: width 2s; -webkit-transition: width 2s;
}

#aside ul{ margin: 0; padding: 0; }

#list ul{ list-style: none; padding: 0; margin: 0;  }
#list ul li{ width: 100%; height: 59px; border-bottom: 1px solid #E0E6EC  }

/* Form */
.input_holder{ position: relative; }
form{ float: left; }
form input{ padding: 0 10px; margin: 0 0 10px 0; width: 100%; height: 30px; border: 1px solid #E0E6EC; background: #ffffff; color: #6A7372;  line-height: 30px; box-sizing: border-box; -moz-box-sizing: border-box;  }
form .btn{ border: none; background: #0E61DB; color: #ffffff; cursor: pointer; }
form .btn:hover{ background: #0061FF; }
form.data{ margin: 50px; width: 300px; }

.hidden{ display: none; }

/* Alert */
.alert_mask{ display: none; overflow: hidden; position: absolute; left: 0; top: -80px; }
.alert{ position: relative; padding: 15px; width: 270px; line-height: 1.2 }
.alert .icon{ position: relative; float: left; margin-right: 15px; width: 40px; height: 30px;  }
.alert .text_holder{ position: relative; top: -3px; left: 0; float: left; width: 215px; }
.alert .arrow{ position: absolute; left: 50%; bottom: -10px; margin-left: -7.5px; width: 15px; height: 10px;  }
.alert.error{ background: #F72B3F; color: #ffffff; }
.alert.error .icon{ background: url('../images/structure/kms_sprite.png') -10px -80px; }
.alert.error .arrow{ background: url('../images/structure/kms_sprite.png') -60px -100px;  }

/* Live validation */
.LV_validation_message{ position: absolute; right: 0; top: -10px; display: block; width: 60px; height: 60px; background: #0061FF; }
.LV_invalid{ background-image: url('../images/nooo.jpg'); }
.LV_valid{ background-image: url('../images/success.jpg'); }

/* Drop zone */
#drop_zone{ position: relative; float: left; margin: 70px 50px 50px 50px; padding: 10px; width: 280px; height: 280px; border: 1px solid #E0E6EC; }
#drop_zone.hover{border: 1px solid #0061FF; }

.bar{ position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 10px; background: #E0E6EC;   }
.progress{ position: absolute; left: 0;  bottom: 0; z-index: 2; width: 0; height: 10px; background: #0061FF;  }



.jspContainer {
    overflow: hidden;
    position: relative;
}
.jspPane {
    position: absolute;
}
.jspVerticalBar {
    background: none repeat scroll 0 0 #FF0000;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
}
.jspHorizontalBar {
    background: none repeat scroll 0 0 #FF0000;
    bottom: 0;
    height: 16px;
    left: 0;
    position: absolute;
    width: 100%;
}
.jspVerticalBar *, .jspHorizontalBar * {
    margin: 0;
    padding: 0;
}
.jspCap {
    display: none;
}
.jspHorizontalBar .jspCap {
    float: left;
}
.jspTrack {
    background: none repeat scroll 0 0 #DDDDEE;
    position: relative;
}
.jspDrag {
    background: none repeat scroll 0 0 #BBBBDD;
    cursor: pointer;
    left: 0;
    position: relative;
    top: 0;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}
.jspArrow {
    background: none repeat scroll 0 0 #50506D;
    cursor: pointer;
    display: block;
    text-indent: -20000px;
}
.jspArrow.jspDisabled {
    background: none repeat scroll 0 0 #80808D;
    cursor: default;
}
.jspVerticalBar .jspArrow {
    height: 16px;
}
.jspHorizontalBar .jspArrow {
    float: left;
    height: 100%;
    width: 16px;
}
.jspVerticalBar .jspArrow:focus {
    outline: medium none;
}
.jspCorner {
    background: none repeat scroll 0 0 #EEEEF4;
    float: left;
    height: 100%;
}
* html .jspCorner {
    margin: 0 -3px 0 0;
}





/*
 * jQuery UI Datepicker 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; background: #FFF; border: 1px solid #B2B2B2;}
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: center; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

.ui-datepicker-current-day a{	background:#0E61DB; color:#fff;}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}