/* Minification failed. Returning unminified contents.
(839,34): run-time error CSS1034: Expected closing parenthesis, found ','
(839,34): run-time error CSS1042: Expected function, found ','
(839,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(1484,31): run-time error CSS1046: Expect comma, found '189'
(1484,38): run-time error CSS1046: Expect comma, found ')'
 */
.include-commitment-add {
    font-size: 10px;
    font-weight: 900;
    color: rgba(0,0,0,.3);
    display: block;
}

.commitment-type-item {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    font-size: 12px;
    font-weight: 900;
    color: rgba(0,0,0,.4);
    padding: 5px 0 10px 0;
    cursor: pointer;
    transition: 0.4s;
    opacity: 1;
}

.commitment-type-item > i {
    position: relative;
    top: 7px;
}

.commitment-type-item ko-select {
    display: inline-block;
    width: calc(100% - 30px);
    position: relative;
    top: 3px;
}

.commitment-user-photo {
    height: 55px;
    width: 55px;
    background-size: cover;
    border-radius: 50%;
    border: 2px solid rgb(143,197,65);
}

.include-commitment-to {
    font-size: 10px;
    font-weight: 900;
    color: rgba(0,0,0,.3);
    display: block;
}

.include-commitment-to-name {
    font-size: 19px;
    font-weight: 400;
    display: block;
}

.include-commitment .ko-checkbox {
    zoom: .9;
}

.commitment-item {
    margin-top: -1px;
    border-top: 1px solid rgb(200,200,200);
    border-bottom: 1px solid rgb(200,200,200);
    cursor: pointer;
    background: rgb(249,249,249);
}

.commitment-item.active {
    background: white !important;
}

.commitment-item .commitment-item-header {
    cursor: pointer;
    padding: 15px 25px;
}

.commitment-item .commitment-item-header .arrow {
    font-size: 18px;
    color: rgba(0,0,0,.5);
    position: relative;
    top: 4px;
}

.commitment-item .commitment-item-header .icon {
    font-size: 20px;
    color: rgba(0,0,0,0.6);
    position: relative;
    top: 4px;
}

.commitment-item .commitment-item-header .text {
    font-size: 12px;
    font-weight: 900;
    color: rgba(0,0,0,0.6);
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 120px);
    position: relative;
    top: 2px;
}

.commitment-item .commitment-item-header .close {
    font-size: 16px;
    display: inline-block;
    background: white;
    border-radius: 50%;
    padding: 7px;
    text-shadow: none;
    transition: .4s;
    position: relative;
    bottom: 2px;
    color: rgba(0,0,0,0.5);
    user-select: none;
}

.commitment-item .commitment-item-header .close:hover {
    background: rgba(0,0,0,0.1) !important;
}

.commitment-item .commitment-item-body {
    transition: 0.4s;
    height: 0;
    width: 100%;
}

.commitment-item.active > .commitment-item-body {
    height: auto !important;
    cursor: text;
    padding: 5px 30px 10px 30px;
}

.commitment-item .commitment-item-body ko-input {
    display: inline-block;
    width: calc(100% - 50px);
}

.commitment-item .commitment-item-body .close {
    font-size: 16px;
    display: inline-block;
    background: white;
    border-radius: 50%;
    padding: 7px;
    text-shadow: none;
    transition: .4s;
    position: relative;    
    right: 15px;
    color: rgba(0,0,0,0.5);
    user-select: none;
}

.commitment-item .commitment-item-body .close:hover {
    background: rgba(0,0,0,0.1) !important;
}

.owner-select .ko-select span {
    font-size: 14px;
    line-height: 12px;
}

.owner-select {
    margin-top: 4px;
    opacity: 0.9;
}

.transparent-input {
    margin-top: 2px;
}

.transparent-input input {
    background: transparent;
}

.schedule-header {
    position: fixed;
    width: 100%;
    right: 0;
    z-index: 50;
    background: rgb(246,247,251);
    height: 50px;
}
.schedule-header .right-content {
    position: fixed;
    right: 0;
}

.schedule-body {
    padding-top: 50px;
}

.include-commitment .user-photo img {
    height: 65px;
    width: 65px;
    border-radius: 50%;
}

.include-commitment .user-photo-small img {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

.commitment-item .commitment-item-body .counter {
    float: right;
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    font-size: 14px;
    display: inline-block;
    background: white;
    padding: 7px;
    text-shadow: none;
    position: relative;
    top: 12px;
    color: rgba(0,0,0,0.5) !important;
    user-select: none;
}

.commitment-item .commitment-item-body .status {
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    font-size: 14px;
    text-shadow: none;
    position: relative;
    color: black !important;
    margin-top: 3px;
}
.commitment-item .commitment-item-body .status i {
    font-size: 22px;
    cursor: pointer;
}
.commitment-item .commitment-item-body .status .number {
    font-weight: 700;
    line-height: 1;
    opacity: .5;
    font-size: 14px;
    display: inline-block;
    background: white;
    text-shadow: none;
    position: relative;
    color: rgba(0,0,0,0.5) !important;
}

.task-file {
    width: 100%;
    border: 2px rgba(0,0,0,0.5) dashed;
    text-align: center;
    line-height: 10px;
    padding: 10% 5px 0% 5px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
}

.task-file i {
    font-size: 30px;
    color: rgba(0,0,0,0.6);
}

.task-file .display-name {
    margin-top: 8px;
    min-height: 40px;
}

.task-file .display-name span {
    font-size: 9px;
    word-break: break-word;
}

.file {
    width: 100%;
    min-width: 100px;
    border: 2px rgba(0,0,0,0.5) dashed;
    text-align: center;
    line-height: 10px;
    padding: 10% 5px 0% 5px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
}

.file i {
    font-size: 30px;
    color: rgba(0,0,0,0.6);
}

.file .display-name {
    margin-top: 8px;
    min-height: 40px;
}

.file .display-name span {
    font-size: 9px;
    word-break: break-word;
}

.file-image {
    width: 100%;
    border: 2px rgba(0,0,0,0.5) dashed;
    text-align: center;
    line-height: 10px;
    padding: 10% 5px 0% 5px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
}

.file-image img {
    max-height: 400px;
    max-width: 600px;
}
#alerts {
  width: 400px;
  top: 60px;
  right: 10px;
  position: fixed;
  z-index: 9999999;
  list-style: none;
}

.alert {
    width: 100%;
    margin-bottom: 8px;
    display: block;
    position: relative;
    border-left: 4px solid;
    right: -50px;
    opacity: 0;
    line-height: 1;
    padding: 0;
    transition: right 400ms, opacity 400ms, line-height 300ms 100ms, padding 300ms 100ms;
    display: table;
    line-height: 1.2;
    font-size: 0.8rem;
}

.alert:hover {
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.open {
  right: 0;
  opacity: 1;
  line-height: 1.2;
  font-size: 0.8rem;
  padding: 10px 15px;
  transition: line-height 200ms, padding 200ms, right 350ms 200ms, opacity 350ms 200ms;
}

.alert-title {
  font-weight: bold;
}

.alert-block {
  width: 80%;
  width: -webkit-calc(100% - 60px);
  width: calc(100% - 60px);
  text-align: left;
}

.alert-message small {
    font-size: 0.7rem !important;
}

.alert-block em, .alert-block small {
  font-size: .75em;
  opacity: .75;
}

.alert i {
  font-size: 2em;
  width: 1.5em;
  max-height: 48px;
  top: 50%;
  margin-top: -12px;
  display: table-cell;
  vertical-align: middle;
}

.alert-error {
    color: #FFF;
    border-color: #D93D3D;
    background-color: #F86C6B;
}

.alert-success {
    color: #FFF;
    border-color: #2CA956;
    background-color: #4DBD74;
}

.alert-info {
    color: #FFF;
    border-color: rgb(44,92,168);
    background-color: rgb(115,170,224);
}

.alert-warning {
    color: #FFF;
    border-color: #C09D00;
    background-color: #F8CB00;
}

.alert-confirm {
    color: #FFF;
    border-color: #C09D00;
    background-color: #F8CB00;
}

.alert-confirm button {
    display: inline-block;
    background: white;
    padding: 10px 25px;
    color: #C09D00;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 7px;
    transition: 0.4s;
    opacity: 1;
    border: none;
    margin: 5px;
    width: 80px;
}

.alert-confirm button:hover {
    background: rgba(255,255,255, 0.9); 
}

.alert-confirm button:active {
    background: rgba(255,255,255, 0.6);
}
/*!
 * required gridstack 1.1.2 CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others
 * https://gridstackjs.com/
 * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
 * gridstack.js may be freely distributed under the MIT license.
*/:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack{position:relative}.grid-stack.grid-stack-rtl{direction:ltr}.grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack .grid-stack-placeholder>.placeholder-content{border:1px dashed #d3d3d3;margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0!important;text-align:center}.grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack>.grid-stack-item.ui-draggable-dragging,.grid-stack>.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack>.grid-stack-item>.ui-resizable-se,.grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;left:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;right:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;right:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;right:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;left:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;left:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack>.grid-stack-item[data-gs-width='1']{width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='1']{left:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='1']{min-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='1']{max-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='2']{width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='2']{left:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='2']{min-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='2']{max-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='3']{width:25%}.grid-stack>.grid-stack-item[data-gs-x='3']{left:25%}.grid-stack>.grid-stack-item[data-gs-min-width='3']{min-width:25%}.grid-stack>.grid-stack-item[data-gs-max-width='3']{max-width:25%}.grid-stack>.grid-stack-item[data-gs-width='4']{width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='4']{left:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='4']{min-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='4']{max-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='5']{width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='5']{left:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='5']{min-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='5']{max-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='6']{width:50%}.grid-stack>.grid-stack-item[data-gs-x='6']{left:50%}.grid-stack>.grid-stack-item[data-gs-min-width='6']{min-width:50%}.grid-stack>.grid-stack-item[data-gs-max-width='6']{max-width:50%}.grid-stack>.grid-stack-item[data-gs-width='7']{width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='7']{left:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='7']{min-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='7']{max-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='8']{width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='8']{left:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='8']{min-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='8']{max-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='9']{width:75%}.grid-stack>.grid-stack-item[data-gs-x='9']{left:75%}.grid-stack>.grid-stack-item[data-gs-min-width='9']{min-width:75%}.grid-stack>.grid-stack-item[data-gs-max-width='9']{max-width:75%}.grid-stack>.grid-stack-item[data-gs-width='10']{width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='10']{left:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='10']{min-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='10']{max-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='11']{width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='11']{left:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='11']{min-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='11']{max-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='12']{width:100%}.grid-stack>.grid-stack-item[data-gs-x='12']{left:100%}.grid-stack>.grid-stack-item[data-gs-min-width='12']{min-width:100%}.grid-stack>.grid-stack-item[data-gs-max-width='12']{max-width:100%}.grid-stack.grid-stack-1>.grid-stack-item{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-width='1']{width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-x='1']{left:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-min-width='1']{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-max-width='1']{max-width:100%}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing{-webkit-transition:left 0s,top 0s,height 0s,width 0s;-moz-transition:left 0s,top 0s,height 0s,width 0s;-ms-transition:left 0s,top 0s,height 0s,width 0s;-o-transition:left 0s,top 0s,height 0s,width 0s;transition:left 0s,top 0s,height 0s,width 0s}
/*!
 * Viewer.js v1.11.3
 * https://fengyuanchen.github.io/viewerjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2023-03-05T07:01:15.525Z
 */.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-size:280px;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px}.viewer-zoom-in:before{background-position:0 0;content:"Zoom In"}.viewer-zoom-out:before{background-position:-20px 0;content:"Zoom Out"}.viewer-one-to-one:before{background-position:-40px 0;content:"One to One"}.viewer-reset:before{background-position:-60px 0;content:"Reset"}.viewer-prev:before{background-position:-80px 0;content:"Previous"}.viewer-play:before{background-position:-100px 0;content:"Play"}.viewer-next:before{background-position:-120px 0;content:"Next"}.viewer-rotate-left:before{background-position:-140px 0;content:"Rotate Left"}.viewer-rotate-right:before{background-position:-160px 0;content:"Rotate Right"}.viewer-flip-horizontal:before{background-position:-180px 0;content:"Flip Horizontal"}.viewer-flip-vertical:before{background-position:-200px 0;content:"Flip Vertical"}.viewer-fullscreen:before{background-position:-220px 0;content:"Enter Full Screen"}.viewer-fullscreen-exit:before{background-position:-240px 0;content:"Exit Full Screen"}.viewer-close:before{background-position:-260px 0;content:"Close"}.viewer-container{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.viewer-container ::-moz-selection,.viewer-container::-moz-selection{background-color:transparent}.viewer-container ::selection,.viewer-container::selection{background-color:transparent}.viewer-container:focus{outline:0}.viewer-container img{display:block;height:auto;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.viewer-canvas>img{height:auto;margin:15px auto;max-width:90%!important;width:auto}.viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5);overflow:hidden}.viewer-list{box-sizing:content-box;height:50px;margin:0;overflow:hidden;padding:1px 0}.viewer-list>li{color:transparent;cursor:pointer;float:left;font-size:0;height:50px;line-height:0;opacity:.5;overflow:hidden;transition:opacity .15s;width:30px}.viewer-list>li:focus,.viewer-list>li:hover{opacity:.75}.viewer-list>li:focus{outline:0}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-loading{position:relative}.viewer-list>.viewer-loading:after{border-width:2px;height:20px;margin-left:-10px;margin-top:-10px;width:20px}.viewer-list>.viewer-active,.viewer-list>.viewer-active:focus,.viewer-list>.viewer-active:hover{opacity:1}.viewer-player{background-color:#000;bottom:0;cursor:none;display:none;right:0;z-index:1}.viewer-player,.viewer-player>img{left:0;position:absolute;top:0}.viewer-toolbar>ul{display:inline-block;margin:0 auto 5px;overflow:hidden;padding:6px 3px}.viewer-toolbar>ul>li{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;transition:background-color .15s;width:24px}.viewer-toolbar>ul>li:focus,.viewer-toolbar>ul>li:hover{background-color:rgba(0,0,0,.8)}.viewer-toolbar>ul>li:focus{box-shadow:0 0 3px #fff;outline:0;position:relative;z-index:1}.viewer-toolbar>ul>li:before{margin:2px}.viewer-toolbar>ul>li+li{margin-left:1px}.viewer-toolbar>ul>.viewer-small{height:18px;margin-bottom:3px;margin-top:3px;width:18px}.viewer-toolbar>ul>.viewer-small:before{margin:-1px}.viewer-toolbar>ul>.viewer-large{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px}.viewer-toolbar>ul>.viewer-large:before{margin:5px}.viewer-tooltip{background-color:rgba(0,0,0,.8);border-radius:10px;color:#fff;display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px}.viewer-title{color:#ccc;display:inline-block;font-size:12px;line-height:1.2;margin:5px 5%;max-width:90%;min-height:14px;opacity:.8;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s;white-space:nowrap}.viewer-title:hover{opacity:1}.viewer-button{-webkit-app-region:no-drag;background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;transition:background-color .15s;width:80px}.viewer-button:focus,.viewer-button:hover{background-color:rgba(0,0,0,.8)}.viewer-button:focus{box-shadow:0 0 3px #fff;outline:0}.viewer-button:before{bottom:15px;left:15px;position:absolute}.viewer-fixed{position:fixed}.viewer-open{overflow:hidden}.viewer-show{display:block}.viewer-hide{display:none}.viewer-backdrop{background-color:rgba(0,0,0,.5)}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:grab}.viewer-fade{opacity:0}.viewer-in{opacity:1}.viewer-transition{transition:all .3s}@keyframes viewer-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.viewer-loading:after{animation:viewer-spinner 1s linear infinite;border:4px solid hsla(0,0%,100%,.1);border-left-color:hsla(0,0%,100%,.5);border-radius:50%;content:"";display:inline-block;height:40px;left:50%;margin-left:-20px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:1}@media (max-width:767px){.viewer-hide-xs-down{display:none}}@media (max-width:991px){.viewer-hide-sm-down{display:none}}@media (max-width:1199px){.viewer-hide-md-down{display:none}}
html {
  overflow-x: hidden;
}

body {
  background: rgb(246,247,251);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 3px;
}
 
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

.pointer {
    cursor: pointer;
}

.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom {
    top: 50px !important;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: 240px;
    padding: 10px 20px;
}

.bootstrap-datetimepicker-widget table {
    font-size: 10px;
    font-weight: 300;
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #f6551e;
}

.bootstrap-datetimepicker-widget table td span.active {
    background-color: #f6551e;
}

.bootstrap-datetimepicker-widget table td.active {
    background-color: #f6551e;
}

.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #f6551e;
    opacity: .8;
}

.bootstrap-datetimepicker-widget table td.day {
    border: none !important;
    height: 15px;
    line-height: 20px;
    transition: .4s;
    border-radius: 50%;
}

.bootstrap-datetimepicker-widget table th.picker-switch {
    font-size: 16px;
    font-weight: 200;
}

.bootstrap-datetimepicker-widget table th {
    border: none !important;
}

.bootstrap-datetimepicker-widget table td.active.today:before {
    border: none;
}

.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 470px !important;
}

.occurrenceView {
    padding: 0px 15px 0px 0px;
}

.occurrence-table {
    height: 100%;
    width: 100%;
    margin: auto;
    transition: 0.55s;
}

.retract {
    margin-right: 275px;
}

.occurrenceView .filterButton {
    cursor: pointer !important;
    padding: 0px 0px 0px 0px;
    text-align: center;
    margin: 0px;
    width: calc(100vh - 158px);
    height: 28px;
    background: #a3a3a361;
    color: #606060;
    font-style: oblique;
    z-index: 15;
    border-radius: 5px 5px 0px 0px;
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: right bottom;
    position: absolute;
    right: 0px;
    top: 19px;
}

.occurrence-switch-view-buttons {
    white-space: nowrap;
    max-width: 500px;
    user-select: none;
    display: flex;
    align-items: center;
}

.occurrence-switch-view-button {
    background: rgb(240, 240, 240);
    padding: 0 15px;
    font-size: 12px;
    border-radius: 30px;
    line-height: 30px;
    height: 30px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #616161;
    cursor: pointer;
    transition: .4s;
    display: inline-block;
    white-space: nowrap;
    max-width: 30px;
    padding-right: 6px;
    overflow: hidden;
    direction: rtl;
    opacity: 1;
}

.occurrence-switch-view-button i {
    vertical-align: middle;
    font-size: 18px;
    position: relative;
    margin-bottom: 2px;
}

.occurrence-switch-view-button:hover {
    padding-right: 15px;
    max-width: 200px;
    opacity: .8;
}

.occurrence-switch-view-button.noRetract {
    max-width: 200px !important;
}

.occurrence-switch-view-button.selected {
    pointer-events: none;
    color: #cc7f18e3;
    padding-right: 15px;
    max-width: 200px;
    opacity: .8;
}

.occurrence-switch-view-button.selectedUnfixed {
    color: #cc7f18e3;
    opacity: .8;
}

.occurrenceView .switchView {
    display: flex;
    flex-wrap: wrap;
    justify-content: left !important;
    margin: auto;
    user-select: none;
    padding: 0px 15px;
}

.occurrenceView .switchView .content {
    background-color: #fff;
    border-left-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-width: 3px;
    border-radius: 0px 0px 7px 7px;
    border-color: lightgrey;
}

.occurrenceView .switchView .content .option {
    cursor: pointer !important;
    text-align: center;
}

.occurrenceView .switchView .content .separator {
    border-left: 3px solid lightgrey;
}

.occurrenceView .switchView .content .option i {
    font-size: 20px;
    vertical-align: text-bottom;
}

.occurrenceView .switchView .content .option span {
    font-weight: 500;
}

.occurrenceView .filterButton i {
    font-size: 20px;
    vertical-align: text-bottom;
}

.occurrenceView .menu {
    align-self: center;
    background: white;
    border-radius: 15px;
    padding: 5px;
    box-shadow: 0 3px 10px #ccc;
}

.occurrenceView .menu fieldset {
    border: 1px grey double;
    border-radius: 15px;
    margin: auto;
    margin-top: -5px;
    text-align: center;
}

.occurrenceView .menu fieldset .content {
    margin: auto;
    margin-top: inherit;
}

.occurrenceView .menu legend {
    border: 1px grey double;
    border-radius: 15px;
    margin: auto;
    padding: 0em 0.8em;
    width: auto;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

ko-occurrence-filter {
    width: 100%;
    height: 100%;
    margin: auto;
}

ko-occurrence-filter .statusOverview {
    border: solid;
    border-color: lightgrey;
    border-radius: 7px;
    background-color: white;
}

ko-occurrence-filter .statusOverview .title {
    background-color: #d3d3d380;
    margin: auto;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #636363;
    display: flow-root;
    user-select: none;
    cursor: pointer;
}

ko-occurrence-filter .statusOverview .title i {
    vertical-align: bottom;
    font-size: 21px;
}

ko-occurrence-filter .statusOverview .item-list {
    margin: auto;
    overflow-x: clip;
    overflow-y: auto;
    max-height: 140px;
    min-height: 54px;
}

ko-occurrence-filter .statusOverview .content {
    margin: auto;
    font-size: 13px
}

ko-occurrence-filter .statusOverview .content .description {
    font-weight: 500;
}

ko-occurrence-statistics {
    border: solid;
    border-color: lightgrey;
    border-radius: 7px;
    background-color: #fff;
    width: 100%;
    height: calc(100vh - 120px);
    margin: auto;
    overflow-x: auto;
}

ko-occurrence-statistics .menu-bar {
    background-color: lightgrey;
    border-bottom: solid;
    border-color: lightgrey;
    border-radius: 7px;
    box-shadow: 0 3px 10px #ccc;
}

ko-occurrence-statistics .menu-bar .category {
    border: solid;
    background-color: #ffffffb0 !important;
    border-color: lightgrey;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

ko-occurrence-statistics .menu-bar .category .category-icon {
    vertical-align: middle;
    position: relative;
    margin-bottom: 2px;
    color: grey;
    font-size: 22px;
}

ko-occurrence-statistics .menu-bar .category .filter-button {
    cursor: pointer;
    user-select: none;
    font-size: 10px;
    font-weight: 500;
    color: #4d4d4dd6;
    padding: 1px 5px 1px 1px;
    border: solid;
    background-color: lightgrey !important;
    border-color: lightgrey;
    border-radius: 15px;
    display: flex;
    align-items: center;
}

ko-occurrence-statistics .menu-bar .category .filter-button i {
    font-size: 20px;
}

ko-occurrence-statistics .menu-bar .category .custom-reports {

}

ko-occurrence-statistics .menu-bar .category .custom-reports .ko-input input {
    font-size: 15px;
    top: 15px;
}

ko-occurrence-statistics .menu-bar .category .custom-reports .action-button {
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: #479b46b0;
    border: solid 2px;
    border-radius: 7px;
    display: flex;
    align-items: center;
}

ko-occurrence-statistics .action-menu {
    bottom: 20px;
    right: 40px;
    position: absolute;
}

ko-occurrence-statistics .action-menu .add-button {
    background: rgb(174, 208, 239, 0.49);
    padding: 0 15px;
    font-size: 12px;
    border-radius: 30px;
    line-height: 30px;
    height: 30px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #616161;
    cursor: pointer;
    transition: .4s;
    display: inline-block;
    white-space: nowrap;
    max-width: 30px;
    padding-right: 6px;
    overflow: hidden;
    direction: rtl;
    opacity: 1;
    user-select: none;
}

ko-occurrence-statistics .action-menu .add-button i {
    vertical-align: middle;
    font-size: 18px;
    position: relative;
    margin-bottom: 2px;
}

ko-occurrence-statistics .action-menu .add-button:hover {
    padding-right: 15px;
    max-width: 200px;
    opacity: .8;
}

ko-occurrence-statistics .add-propover {
    position: absolute;
    z-index: 1000;
    right: 20px;
    bottom: 20px;
    min-width: 14rem;
    padding: 0.5rem 0px;
    margin: 0.125rem 0px 0px;
    font-size: 1rem;
    color: rgb(33, 37, 41);
    text-align: left;
    list-style: none;
    background-color: rgb(255, 255, 255);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 3px 10px #ccc;
}

ko-occurrence-table {
    width: 100%;
    height: 100%;
    margin: auto;
}

ko-occurrence-table .occurrenceList {
    border: solid;
    border-color: lightgrey;
    border-radius: 7px;
    width: 100%;
    height: calc(100vh - 158px);
    background-color: #e8e9f3;
    overflow-x: auto;
    align-content: flex-start;
    margin: auto;
    padding: 0px 0px 0px 10px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
}

ko-occurrence-table .occurrenceList .occurrence {
    border: solid;
    border-color: lightgrey;
    border-radius: 10px;
    border-left-width: 10px;
    border-left-color: darkgrey;
    background-color: white;
    cursor: pointer;
    flex: 0 0 auto;
    max-width: calc(100% / 4.15);
    height: fit-content;
    padding: 0;
    margin: 0.3% 0.3% 0 0.3%;
}

ko-occurrence-table .occurrenceList .statusflag {
    position: absolute;
    background-color: darkgrey;
    left: 0;
    -webkit-transform: rotate(-90deg);
}

ko-occurrence-table .occurrenceList .header {
    margin: auto;
    border-bottom: solid;
    border-bottom-color: lightgrey;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-bottom-width: 2px;
    font-size: 15px;
    padding: 0px 5px 0px 5px;
}

ko-occurrence-table .occurrenceList .header i {
    font-size: large;
    vertical-align: sub;
    color: darkgrey;
}

ko-occurrence-table .occurrenceList .header .identification {
    font-weight: bolder;
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

ko-occurrence-table .occurrenceList .header .description {
    text-align: center;
    font-weight: 500;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

ko-occurrence-table .occurrenceList .content {
    font-size: 11px;
    margin: auto;
    background: #aeafc521;
    overflow: hidden;
}

ko-occurrence-table .occurrenceList .content i {
    font-size: 14px;
    vertical-align: sub;
}

ko-occurrence-table .occurrenceList .content .title {
    font-weight: 500;
}

ko-table .table th:first-of-type,
ko-table .table td:first-of-type {
    padding-left: 40px;
}

ko-table .table th {
    border: none !important;
    font-size: 12px;
    color: rgba(0,0,0,0.5);
    padding: 5px;
}

ko-table .table td {
    border-top: none !important;
    border-bottom: 1px solid #dee2e6;
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
}

.ko-qr-reader {
    width: 100%;
    height: 100%;
    margin: auto;
}

.ko-qr-reader .qr-container {
    text-align: center;
    margin: auto;
    width: calc(100% - 20px);
    border: none !important;
}

.ko-qr-reader .qr-container .qr-canvas {
    padding: 2px;
    margin: auto;
    width: calc(100% - 20px);
    max-width: 400px;
    border-radius: 7px;
    border-color: lightgrey;
}

.ko-qr-reader button {
    height: 9vh;
    margin-top: 1vh;
    border-style: hidden;
    background: rgba(77, 189, 116, 1);
    box-shadow: 0 3px 5px 0px rgba(77, 189, 116, 0.6);
    display: inline-block;
    padding: 8px 16px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 7px;
    transition: 0.4s;
    opacity: 1;
}

.ko-drawn-question .canvas-div {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ko-input-question {
    position: relative;
    width: 100%;
    margin-bottom: 6px;
    font-family: arial, sans-serif;
    height: 50px;
    min-width: 120px;
}

.ko-input-question input {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 25px;
    font-weight: 400;
    color: #546e7a;
    font-size: 18px;
    padding: 10px 15px;
    outline: none;
    height: 3.10rem;
    resize: none;
}

.ko-input-question input.invalid {
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    box-shadow: 0px 0px 5px 1px red;
}

.ko-input-question .error {
    position: absolute;
    display: inline-block;
    bottom: 17px;
    right: 0;
    color: #F86C6B;
    font-size: 16px;
    opacity: 1;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    height: 18px;
    width: 18px;
    text-align: center;
    margin-right: 5px;
    background: white;
    z-index: 2;
}

.ko-input-question .success {
    position: absolute;
    display: inline-block;
    bottom: 17px;
    right: 0;
    color: #4DBD74;
    font-size: 16px;
    opacity: 1;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    height: 18px;
    width: 18px;
    text-align: center;
    margin-right: 5px;
    background: white;
    z-index: 2;
}

.ko-input label {
    line-height: 62px;
    height: 46px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ko-input {
    position: relative;
    width: 100%;
    margin-bottom: 6px;
    font-family: arial, sans-serif;
    height: 50px;
    min-width: 120px;
}
.ko-input label, .ko-input input {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 12px;
    font-weight: 400;
}
.ko-input input {
    top: 12px;
    border: none;
    margin: 8px 0;
    background: none;
    width: 100%;
    z-index: 2;
}

.ko-input .search-input {
    padding-left: 25px;
}

.ko-input .search-icon {
    color: rgba(0,0,0,.3);
    position: relative;
    top: 20px;
    font-size: 22px;
}

.ko-input input.big {
    font-size: 22px;
    top: 5px;
}

.ko-input input:focus {
  outline: none;
}
.ko-input input:focus ~ label, .ko-input input:not(.placeholder-shown) ~ label {
  line-height: 18px !important;
  font-size: 11px !important;
}

.ko-input input:focus ~ label  {
  color: #999;
}
.ko-input input:focus ~ label:after {
  visibility: visible;
  left: 0;
  width: 100%;
}
.ko-input input:focus ~ label ~ div {
  opacity: 0;
}
.ko-input input.invalid:not(:focus) ~ label {
    transition: all .2s 0s;
    -webkit-transition: all .2s 0s;
    -moz-transition: all .2s 0s;
    -ms-transition: all .2s 0s;
    -o-transition: all .2s 0s;
    color: #F86C6B;
}

.ko-input input.valid:not(:focus) ~ label {
    transition: all .2s 0s;
    -webkit-transition: all .2s 0s;
    -moz-transition: all .2s 0s;
    -ms-transition: all .2s 0s;
    -o-transition: all .2s 0s;
    color: #4DBD74;
}

.ko-input input.invalid:not(:focus) ~ label:after {
    visibility: visible;
    left: 0;
    width: 100%;
    background: #F86C6B;
    transition-delay: 0s;
}

.ko-input input.valid:not(:focus) ~ label:after {
    visibility: visible;
    left: 0;
    width: 100%;
    background: #4DBD74;
    transition-delay: 0s;
}

.ko-input label {
  color: #909090;
  transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0px -1.5px #BBB;
  z-index: 1;
}
.ko-input label:after {
  content: '';
  visibility: hidden;
  position: absolute;
  left: calc(50% - 5px);
  bottom: 0;
  background-color: #999;
  width: 10px;
  height: 2px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
.ko-input .error {
    position: absolute;
    display: inline-block;
    bottom: 15px;
    right: 0;
    color: #F86C6B;
    font-size: 16px;
    opacity: 1;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    height: 18px;
    width: 18px;
    text-align: center;
    margin-right: 5px;
    background: white;
    z-index: 2;
}
.ko-input .success {
    position: absolute;
    display: inline-block;
    bottom: 15px;
    right: 0;
    color: #4DBD74;
    font-size: 16px;
    opacity: 1;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    height: 18px;
    width: 18px;
    text-align: center;
    margin-right: 5px;
    background: white;
    z-index: 2;
}

.ko-textarea {
  height: 70px;
}
.ko-textarea label {
  line-height: 100px;
  height: 65px;
}

.ko-textarea {
  position: relative;
  width: 100%;
  margin-bottom: 6px;
  overflow: hidden;
  font-family: arial, sans-serif;
}
.ko-textarea label, .ko-textarea textarea {
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
}
.ko-textarea textarea {
  top: 12px;
  border: none;
  margin: 8px 0;
  background: none;
  width: 100%;
  z-index: 2;
  height: 40px;
  resize: none;
}

.ko-textarea textarea.big {
  font-size: 22px;
  top: 5px;
}

.ko-textarea textarea:focus {
  outline: none;
  border: none;
}
.ko-textarea textarea:focus + label, .ko-textarea textarea:not(.placeholder-shown) + label {
  line-height: 25px !important;
  font-size: 11px !important;
}
.ko-textarea textarea.placeholder-shown ~ .error, .ko-textarea textarea:not(.invalid) ~ .error {
  opacity: 0;
}
.ko-textarea textarea:focus + label  {
  color: #999;
}
.ko-textarea textarea:focus + label:after {
  visibility: visible;
  left: 0;
  width: 100%;
}
.ko-textarea textarea:focus + label ~ div {
  opacity: 0;
}

.ko-textarea textarea.invalid:not(:focus) + label {
  transition: all .2s 0s;
  -webkit-transition: all .2s 0s;
  -moz-transition: all .2s 0s;
  -ms-transition: all .2s 0s;
  -o-transition: all .2s 0s;
  color: #F86C6B;
}

.ko-textarea textarea.valid:not(:focus) + label {
  transition: all .2s 0s;
  -webkit-transition: all .2s 0s;
  -moz-transition: all .2s 0s;
  -ms-transition: all .2s 0s;
  -o-transition: all .2s 0s;
  color: #4DBD74;
}

.ko-textarea textarea.invalid:not(:focus) + label:after {
  visibility: visible;
  left: 0;
  width: 100%;
  background: #F86C6B;
  transition-delay: 0s;
}

.ko-textarea textarea.valid:not(:focus) + label:after {
  visibility: visible;
  left: 0;
  width: 100%;
  background: #4DBD74;
  transition-delay: 0s;
}

.ko-textarea label {
  color: #909090;
  transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0px -1.5px #BBB;
  z-index: 1;
}
.ko-textarea label:after {
  content: '';
  visibility: hidden;
  position: absolute;
  left: calc(50% - 5px);
  bottom: 0;
  background-color: #999;
  width: 10px;
  height: 2px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
.ko-textarea .error {
  position: absolute;
  display: inline-block;
  bottom: 15px;
  right: 0;
  color: rgb(251,129,121);
  font-size: 16px;
  opacity: 1;
  transition: all .2s;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  height: 18px;
  width: 18px;
  text-align: center;
}
.ko-textarea .success {
    position: absolute;
    display: inline-block;
    bottom: 15px;
    right: 0;
    color: #4DBD74;
    font-size: 16px;
    opacity: 1;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    height: 18px;
    width: 18px;
    text-align: center;
}

.ko-questionary-panel {
    border: solid;
    border-color: lightgrey;
    border-radius: 7px;
    width: calc(100% - 20px);
    margin: auto;
}

.ko-questionary-panel .alternatives {
    padding: 5px 0px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.ko-questionary-panel .actions {

}

.ko-questionary-panel .actions .action {
    display: inline-block;
    padding: 8px 22px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    border-style: solid;
    transition: 0.4s;
    opacity: 1;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-color: lightgrey;
    text-align: center;
}

.ko-questionary-panel .actions .action .answered {
    background-color: rgb(189, 214, 189);
}

.ko-questionary-panel .actions .action .notAnswered {
    background-color: rgb(214 189 189);
}
   
.ko-questionary-panel .actions .action i {
    font-size: 15px;
    position: relative;
    top: 3px;
    margin-right: 2px;
}
/*Texte Area for questions*/
.ko-textarea-question {
}

.ko-textarea-question textarea {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 25px;
    font-weight: 400;
    color: #546e7a;
    font-size: 18px;
    padding: 10px 15px;
    outline: none;
    height: 3.10rem;
    min-height: 3.10rem;
    resize: none;
    overflow-y: hidden;
}

.ko-textarea-question textarea:focus {
  
}

.ko-textarea-question textarea, textarea:focus {
    border: 1px solid #cfd8dc;
}

.ko-textarea-question textarea:disabled {
    cursor: default;
    background-color: rgba(239, 239, 239, 0.3);
    opacity: 1;
}


/*End of text area for questions*/

.ko-checkbox,
.ko-radiobutton {
  padding-top: 15px;
}
.ko-checkbox *,
.ko-radiobutton * {
  box-sizing: border-box;
}
.ko-checkbox.readonly,
.ko-radiobutton.readonly {
  opacity: .5;
}
.ko-checkbox *:before,
.ko-radiobutton *:before,
.ko-checkbox *:after,
.ko-radiobutton *:after {
  box-sizing: border-box;
}
.ko-checkbox input[type="checkbox"],
.ko-radiobutton input[type="checkbox"],
.ko-checkbox input[type="radio"],
.ko-radiobutton input[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.ko-checkbox input[type="checkbox"]:hover + label:before,
.ko-radiobutton input[type="checkbox"]:hover + label:before,
.ko-checkbox input[type="radio"]:hover + label:before,
.ko-radiobutton input[type="radio"]:hover + label:before {
  border-color: #f6551e;
  background-color: #f2f2f2;
}
.ko-checkbox input[type="checkbox"]:active + label:before,
.ko-radiobutton input[type="checkbox"]:active + label:before,
.ko-checkbox input[type="radio"]:active + label:before,
.ko-radiobutton input[type="radio"]:active + label:before {
  transition-duration: 0s;
}
.ko-checkbox input[type="checkbox"] + label,
.ko-radiobutton input[type="checkbox"] + label,
.ko-checkbox input[type="radio"] + label,
.ko-radiobutton input[type="radio"] + label {
  position: relative;
  padding: 5px 5px 5px 1.5em;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  color: #909090;
  font-weight: 400;
  font-size: 14px;
}
.ko-checkbox input[type="checkbox"] + label:before,
.ko-radiobutton input[type="checkbox"] + label:before,
.ko-checkbox input[type="radio"] + label:before,
.ko-radiobutton input[type="radio"] + label:before {
  box-sizing: content-box;
  content: '';
  color: #f6551e;
  position: absolute;
  top: 55%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-top: -9px;
  border: 2px solid #d1d3d1;
  text-align: center;
  transition: all 0.4s ease;
  border-radius: 5px;
}
.ko-checkbox input[type="checkbox"]:checked + label:before,
.ko-radiobutton input[type="checkbox"]:checked + label:before,
.ko-checkbox input[type="radio"]:checked + label:before,
.ko-radiobutton input[type="radio"]:checked + label:before {
  border-color: #f6551e !important;
}
.ko-checkbox input[type="checkbox"] + label:after,
.ko-radiobutton input[type="checkbox"] + label:after,
.ko-checkbox input[type="radio"] + label:after,
.ko-radiobutton input[type="radio"] + label:after {
  box-sizing: content-box;
  content: '';
  background-color: #f6551e;
  position: absolute;
  top: 55%;
  left: 4px;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  transform: scale(0);
  transform-origin: 50%;
  transition: transform 200ms ease-out;
}
.ko-checkbox input[type="checkbox"]:disabled + label:before,
.ko-radiobutton input[type="checkbox"]:disabled + label:before,
.ko-checkbox input[type="radio"]:disabled + label:before,
.ko-radiobutton input[type="radio"]:disabled + label:before {
  border-color: #cccccc;
}

.ko-checkbox input[type="checkbox"] + label:after,
.ko-radiobutton input[type="checkbox"] + label:after {
    background-color: transparent;
    top: 49%;
    left: 3px;
    width: 8px;
    height: 4px;
    margin-top: -4px;
    border-style: solid;
    border-color: #ffffff;
    border-width: 0 0 2px 2px;
    border-image: none;
    transform: rotate(-45deg) scale(0);
}
.ko-checkbox input[type="checkbox"]:checked + label:after,
.ko-radiobutton input[type="checkbox"]:checked + label:after {
  content: '';
  transform: rotate(-45deg) scale(1);
  transition: transform 200ms ease-out;
}
.ko-checkbox input[type="radio"]:checked + label:before,
.ko-radiobutton input[type="radio"]:checked + label:before {
  animation: borderscale 300ms ease-in;
  background-color: white;
}
.ko-checkbox input[type="radio"]:checked + label:after,
.ko-radiobutton input[type="radio"]:checked + label:after {
  transform: scale(1);
}
.ko-checkbox input[type="radio"] + label:before,
.ko-radiobutton input[type="radio"] + label:before,
.ko-checkbox input[type="radio"] + label:after,
.ko-radiobutton input[type="radio"] + label:after {
  border-radius: 50%;
}
.ko-checkbox input[type="checkbox"]:checked + label:before,
.ko-radiobutton input[type="checkbox"]:checked + label:before {
  animation: borderscale 200ms ease-in;
  background: #f6551e;
}
.ko-checkbox input[type="checkbox"]:checked + label:after,
.ko-radiobutton input[type="checkbox"]:checked + label:after {
  transform: rotate(-45deg) scale(1);
}
.ko-checkbox.ko-checkbox-inline,
.ko-radiobutton.ko-checkbox-inline,
.ko-checkbox.ko-radiobutton-inline,
.ko-radiobutton.ko-radiobutton-inline {
  display: inline-block;
}

@keyframes borderscale {
  50% {
    box-shadow: 0 0 0 2px #f6551e;
  }
}

.ko-button-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.ko-button-group ko-button:not(:first-of-type) .ko-button {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.ko-button-group ko-button:not(:last-of-type) .ko-button {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.ko-button-group ko-button:not(:last-of-type):not(:first-of-type) .ko-button {
    border-radius: 0px;
}

.ko-button {
    display: inline-block;
    padding: 8px 16px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 7px;
    transition: 0.4s;
    opacity: 1;
}

.ko-button .img-icon {
    width: 18px;
    position: relative;
    top: 3px;
    padding-bottom: 4px;
}

.ko-button.muted {
    background: white;
    box-shadow: none;
    color: #777;
}

.ko-button:hover {
  opacity: 0.9;
}

.ko-button:active {
  opacity: 0.6;
}

.ko-button.disabled {
    background: #555;
    opacity: 0.5;
    box-shadow: none;
    cursor: not-allowed;
}

ko-button.disabled:hover {
    opacity: 1.0;
}

ko-button.disabled:active {
    opacity: 1.0;
}

.ko-button.info {
    background: rgb(115,170,224);
    box-shadow: 0 3px 5px 0px rgba(115,170,224, 0.6);
}

.ko-button.success {
    background: rgba(77, 189, 116, 1);
    box-shadow: 0 3px 5px 0px rgba(77, 189, 116, 0.6);
}

.ko-button.warning {
    background: rgba(248, 203, 0, 1);
    box-shadow: 0 3px 5px 0px rgba(248, 203, 0, 0.6);
}

.ko-button.danger {
    background: rgba(248, 108, 107, 1);
    box-shadow: 0 3px 5px 0px rgba(248, 108, 107, 0.6);
}

.ko-button.orange {
    background: rgba(244, 133, 51, 1);
    box-shadow: 0 3px 5px 0px rgba(244, 133, 51, 0.6);
}

.ko-button.light {
    background: white;
    box-shadow: 0 3px 5px 0px rgba(150, 150, 150, 0.4);
    color: #888;
}

.ko-button span {
  position: relative;
  bottom: 1px;
}

.ko-button i {
  font-size: 18px;
  position: relative;
  top: 3px;
/* margin-right: 2px; */
}

.ko-switch-button {
    /*display: inline-block;*/
    border-style: solid;
    padding: 8px 16px;
    color: #2b2b2b;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 7px;
    transition: 0.4s;
    opacity: 1;
    box-shadow: 0 3px 5px 0px rgba(115,170,224, 0.6);
}

.ko-switch-button .img-icon {
    width: 18px;
    position: relative;
    top: 3px;
    padding-bottom: 4px;
}

.ko-switch-button.muted {
    background: white;
    box-shadow: none;
    color: #777;
}

.ko-switch-button:hover {
    opacity: 0.9;
}

.ko-switch-button:active {
    opacity: 0.6;
}

.ko-switch-button.disabled {
    background: #555;
    opacity: 0.5;
    box-shadow: none;
    cursor: not-allowed;
}

ko-switch-button.disabled:hover {
    opacity: 1.0;
}

ko-switch-button.disabled:active {
    opacity: 1.0;
}

.ko-switch-button span {
    position: relative;
    bottom: 1px;
}

.ko-switch-button i {
    font-size: 18px;
    position: relative;
    top: 3px;
    /* margin-right: 2px; */
}

.popover {
  border-radius: 10px !important;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.1);
  border-color: #DDD;
  max-width: 350px;
  min-width: 180px;
  margin-right: 15px;
  z-index: 10001;
}

.popover-body {
  padding: 0;
}

.navbar .dropdown-menu {
    position: absolute;
    z-index: 10001;
}

.tooltip {
    opacity: 1 !important;
    z-index: 10001;
}

.tooltip > .tooltip-inner {
    background-color: white;
    color: black;
    box-shadow: 0 0 20px rgba(0,0,0,.4);
    max-width: 400px;
    border-radius: 10px;
    padding: 15px;
}

.tooltip > .arrow:before { 
    border-bottom-color: white !important; 
    border-top-color: white !important; 
}

.ko-select {
  text-decoration: none !important;
  outline: none;
  color: #555;
  cursor: pointer;
}

.ko-select-content {
    max-height: 300px;
    overflow-y: auto;
    margin: 5px 0px;
}

.ko-select i {
  color: #bbb;
  float: right;
}

.ko-select span {
  color: rgba(0,0,0,.4);
  max-width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.ko-select-item {
  border-bottom: 1px solid #ccc;
  padding: 7px 25px;
  cursor: pointer;
  opacity: 1;
  transition: 0.4s;
}

.ko-select-item:last-of-type {
  border-bottom: none;
}

.ko-select-item:hover {
  opacity: 0.5;
}

.ko-select-item-title {
  font-weight: bold;
}

.ko-select-item-subtitle {
  font-size: 12px;
  color: #555;
}

.ko-datepicker input {
  outline: none;
  text-align: center;
  border-radius: 15px;
  font-size: 12px;
  border: 1px solid #BBB;
  padding: 3px 0;
}

.ko-input-filter {
    position: relative;
}

.ko-input-filter input {
  outline: none;
  text-align: center;
  border-radius: 15px;
  font-size: 12px;
  border: 1px solid #BBB;
  padding: 3px 0;
  width: 100%;
}

.icone-box {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 10px;
}

.icone-box > svg {
    position: absolute;
  cursor: pointer;
}
svg.icon-user-01,
svg.icon-user-02,
svg.icon-user-03,
svg.icon-user-04,
svg.icon-user-05,
svg.icon-user-06{
    max-width: 70px;
    opacity: 1;
    transform: scale(1);
    -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
    -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
    -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
    transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
      width: 70px;
    height: 70px;
}
svg.icon-user-01:hover,
svg.icon-user-02:hover,
svg.icon-user-03:hover,
svg.icon-user-04:hover,
svg.icon-user-05:hover,
svg.icon-user-06:hover{
  opacity: .7;
  -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
}

svg.icon-user-01.active,
svg.icon-user-02.active,
svg.icon-user-03.active,
svg.icon-user-04.active,
svg.icon-user-05.active,
svg.icon-user-06.active{
  opacity: .4;
  -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
  transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
}

svg.icon-user-01 {
  top: 1px;
  left: 3px;
  right: 0;
  margin: 0 auto;
  stroke: white;
  stroke-width: 1px;
}
svg.icon-user-02 {
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
    stroke-width:0;
    top: 19px;
    right: 6px;
    stroke: white;
    stroke-width: 1px;
}
svg.icon-user-03 {
    -ms-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    stroke-width:0;
    top: 52px;
    right: 8px;
    stroke: white;
    stroke-width: 1px;
}
svg.icon-user-04 {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    stroke-width: 0;
    top: 67px;
    right: 37px;
    stroke: white;
    stroke-width: 1px;
}
svg.icon-user-05 {
    -ms-transform: rotate(240deg);
    -webkit-transform: rotate(240deg);
    -o-transform: rotate(240deg);
    transform: rotate(240deg);
    stroke-width: 0;
    top: 49px;
    right: 65px;
    stroke: white;
    stroke-width: 1px;
}
svg.icon-user-06 {
    -ms-transform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    transform: rotate(300deg);
    stroke-width: 0;
    top: 16px;
    right: 63px;
    stroke: white;
    stroke-width: 1px;
}

svg.icon-user-01:hover:not(.svg-disable) {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    top: -7px;
    left: 4px;
}
svg.icon-user-02:hover:not(.svg-disable) {
    -ms-transform: rotate(60deg) scale(1.1);
    -webkit-transform: rotate(60deg) scale(1.1);
    -o-transform: rotate(60deg) scale(1.1);
  transform: rotate(60deg) scale(1.1);
  top: 15px;
  right: -2px;
}
svg.icon-user-03:hover:not(.svg-disable) {
    -ms-transform: rotate(120deg) scale(1.1);
    -webkit-transform: rotate(120deg) scale(1.1);
    -o-transform: rotate(120deg) scale(1.1);
    transform: rotate(120deg) scale(1.1);
    top: 57px;
    right: 0px;
}
svg.icon-user-04:hover:not(.svg-disable) {
    -ms-transform: rotate(180deg) scale(1.1);
    -webkit-transform: rotate(180deg) scale(1.1);
    -o-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
    top: 75px;
    right: 38px;
}
svg.icon-user-05:hover:not(.svg-disable) {
    -ms-transform: rotate(240deg) scale(1.1);
    -webkit-transform: rotate(240deg) scale(1.1);
    -o-transform: rotate(240deg) scale(1.1);
    transform: rotate(240deg) scale(1.1);
    top: 53px;
    right: 72px;
}
svg.icon-user-06:hover:not(.svg-disable) {
    -ms-transform: rotate(301deg) scale(1.1);
    -webkit-transform: rotate(301deg) scale(1.1);
    -o-transform: rotate(301deg) scale(1.1);
    transform: rotate(301deg) scale(1.1);
    top: 12px;
    right: 71px;
}


/* ICONS COLOR OPTIONS */
.icone-box .svg-danger {
  fill:#f86c6b;
}
.icone-box .svg-warning {
    fill: #f8cb00;
}
.icone-box .svg-success {
    fill: #4dbd74;
}
.icone-box .svg-info {
    fill: #63c2de;
}
.icone-box .svg-disable {
    fill: #999999;
}

.icone-box .svg-danger:hover {
  filter: drop-shadow( 0px -4px 6px #f86c6bbb);
  stroke: transparent;
}
.icone-box .svg-warning:hover {
  filter: drop-shadow( 0px -4px 6px #f8cb00bb);
  stroke: transparent;
}
.icone-box .svg-success:hover {
  filter: drop-shadow( 0px -4px 6px #4dbd74bb);
  stroke: transparent;
}
.icone-box .svg-info:hover {
  filter: drop-shadow( 0px -4px 6px #63c2debb);
  stroke: transparent;
}

.icone-box .border {
    stroke: #888888;
    stroke-width: 1px;
}

.icone-base{
    width: 105px;
    height: 105px;
    position: absolute;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0px 0px 0px 10px white;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 49%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.icone-base img {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    margin-top: -0.5px;
    margin-left: -0.5px;
}

.base-icon-border{border: 4px solid transparent; border-radius: 50%;}

.border-success{border-color:#4dbd74 !important;}
.border-warning{border-color:#f8cb00 !important;}
.border-disable{border-color:#999999 !important;}
.border-regular{border-color:#d6d4d4 !important;}
.border-alert,.border-danger{border-color:#f86c6b !important;}


a.item-sidebar,
a.item-sidebar:hover,
a.item-sidebar:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 5px 15px;
    background: #fff !important;
    border: none;
    border-radius: 0;
    margin-bottom: 10px;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10001;
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    width: 230px;
    background: #1b305d;
    color: #fff;
    transition: all 0.3s;
    position: relative;
    z-index: 10001;
}

#sidebar.active {
    width: 80px;
    text-align: center;
}

#sidebar .copyright {
    font-size: 10px;
    position: absolute;
    width: 200px;
    bottom: 10px;
    text-align: center;
}

#sidebar.active .copyright {
    width: 75px;
}

#sidebar .sidebar-header {
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 15px;
}

#sidebar .sidebar-header .logo {
    display: inline-block;
    position: relative;
}

#sidebar .sidebar-header .logo img {
    width: 150px;
    margin-top: 15px;
}

#sidebar .sidebar-header .logo-min {
    display: none;
    position: relative;
}

#sidebar .sidebar-header .logo-min img {
    width: 45px;
    margin-top: 15px;
}

#sidebar.active .sidebar-header .logo {
    display: none;
}

#sidebar.active .sidebar-header .logo-min {
    display: inline-block;
}

#sidebar .sidebar-header .logo .loading-external {
    background: url(../../Content/Assets/loading-1.png) no-repeat center center;
    background-size: contain;
    height: 34px;
    width: 34px;
    position: absolute;
    top: 13px;
    left: -2px;
}
#sidebar .sidebar-header .logo .loading-internal {
    background: url(../../Content/Assets/loading-2.png) no-repeat center center;
    background-size: contain;
    height: 34px;
    width: 34px;
    position: absolute;
    top: 13px;
    left: -2px;
}

#sidebar .sidebar-header .logo-min .loading-external {
    background: url(../../Content/Assets/loading-1.png) no-repeat center center;
    background-size: contain;
    height: 42px;
    width: 42px;
    position: absolute;
    top: 12px;
}
#sidebar .sidebar-header .logo-min .loading-internal {
    background: url(../../Content/Assets/loading-2.png) no-repeat center center;
    background-size: contain;
    height: 42px;
    width: 42px;
    position: absolute;
    top: 12px;
}

#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }
    #sidebar.active {
        margin-left: 0 !important;
    }
    #sidebar .sidebar-header .logo {
      display: none !important;
    }
}

#sidebar .menu-list-item i {
    position: relative;
    top: 7px;
    font-size: 22px;
    margin-right: 10px;
    margin-left: 10px;
}
#sidebar .menu-list-item {
    font-size: 10px;
    font-weight: bold;
    color: rgba(255,255,255,0.7);
    padding: 10px 0 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: 0.4s;
    background: rgba(255,255,255,0);
}
#sidebar .menu-list-item:hover {
    background: rgba(255,255,255,0.1);
}
#sidebar.active .menu-list-item {
    padding-left: 0px;
}
#sidebar.active .menu-list-item span {
    display: none;
}
#sidebar .menu-list-item.active {
    color: white;
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

#sidebar .menu-list-item.active:after {
    content: '';
    height: 2px;
    width: 100%;
    background: #f6551e;
    display: block;
    position: relative;
    top: 22px;
}



.btn-expand-menu,
.btn-expand-menu:hover,
.btn-expand-menu:active {
    text-decoration: none;
    color: #888;
    position: relative;
    top: 7px;
}

.admin-menu {
    font-size: 10px;
    font-weight: 900;
    padding-bottom: 10px;
    transition: 0.4s;
    color: rgba(0,0,0,.6) !important;
}

.admin-menu:hover,
.admin-menu:active {
    color: rgba(0,0,0,.4) !important;
}

.admin-menu i {
    position: relative;
    top: 3px;
    color: white;
    font-size: 16px;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.7);
}
.admin-menu span {
    position: relative;
    bottom: 1px;
}
.nav-user-photo { 
    height: 35px;
    width: 35px;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    transition: 0.4s;
    opacity: 1;
}
.nav-user-photo:hover { 
  opacity: 0.8;
}
.nav-user-photo img {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}
.nav-icon {
  color: rgba(0,0,0,0.6) !important;
  transition: 0.4s;
  opacity: 1;
  position: relative;
  top: 8px;
  margin: 10px;
}
.nav-icon:hover { 
  opacity: 0.8;
}
.nav-icon i {
  font-size: 18px;
}
.nav-icon-badge {
    position: absolute;
    background: #f6551e;
    font-size: 8px;
    height: 14px;
    width: 14px;
    text-align: center;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    border: 1px solid white;
    margin-left: 19px;
    margin-top: 3px;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    pointer-events: none;
}
.popover-notifications-header {
    font-size: 11px;
    font-weight: 900;
    color: rgba(0,0,0,0.4);
    width: 350px;
    padding: 12px 17px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.popover-notifications-body {
    max-height: 70vh;
    overflow-y: auto;
}
.popover-notifications-footer {
    font-size: 11px;
    text-align: center;
    font-weight: 800;
    color: #f6551e;
    width: 350px;
    padding: 15px;
}
.popover-notifications-user-photo {
    height: 45px;
    width: 45px;
    display: inline-block;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
}

.popover-notifications-user-photo img {
    height: 45px;
    width: 45px;
    border-radius: 50%;
}    

.popover-notifications-item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-left: 4px solid white;
    padding: 10px 0;
    cursor: pointer;
    transition: 0.4s;
    background: white;
}
.popover-notifications-item:hover {
    background: rgba(238,247,254,.6);
    opacity: 0.8;
    border-left-color: transparent;
}
.popover-notifications-item.active {
    border-left-color: rgb(84,178,247);
    background: rgb(238,247,254);
}
.popover-notifications-item-username {
    font-weight: 600;
}
.popover-notifications-item-description {
    line-height: 15px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,0,0,0.7);
}
.popover-notifications-item-date {
    font-size: 11px;
    margin-top: 5px;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
}
.popover-notifications-item-bullet {
    height: 8px;
    width: 8px;
    border: 2px solid rgba(0,0,0,0.3);
    border-radius: 50%;
    float: right;
    margin-top: -12px;
}
.popover-notifications-item.active .popover-notifications-item-bullet {
    background: rgba(0,0,0,0.3);
    border-color: transparent;
}
.ko-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #CCC;
    overflow: hidden;
    background: rgba(0,0,0,.1);
}
.ko-progress-bar-fraction {
    height: 100%;
    float: left;
}
.popover-progress-header {
    width: 350px;
    text-align: center;
    font-weight: 900;
    color: rgba(0,0,0,0.3);
    font-size: 10px;
    padding: 10px;
}
.popover-progress-close {
    float: right;
    display: inline-block;
    position: relative;
    right: 10px;
    bottom: 33px;
    font-size: 18px;
    color: rgba(0,0,0,.4);
    cursor: pointer;
}
.propover-password-change {
    padding: 0 20px;
}
.popover-progress-info {
    padding: 0 20px;
}
.popover-progress-info .task-number {
    font-size: 32px;
    font-weight: 100;
    margin: 0;
    line-height: 32px;
}
.popover-progress-info .task-number-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,0,0,0.4);
    margin-bottom: 4px;
}
.popover-progress-info .list-title {
  width: 350px;
  font-weight: 900;
  color: rgba(0,0,0,0.3);
  font-size: 9px;
  margin-top: 30px;
}
.popover-progress-info .list {
  margin-bottom: 40px;
}
.popover-progress-info .list-item {
    padding: 15px 0 10px 0;
    height: 45px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.popover-progress-info .list-item .ball {
  border: 1px solid rgba(0,0,0,0.2);
  float: left;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  margin: 7px;
}
.popover-progress-info .list-item .text {
  float: left;
  width: 240px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
}
.popover-progress-info .list-item .number {
  font-size: 20px;
  float: right;
  font-weight: 500;
  margin-top: -8px;
}



.ko-modal {
    min-width: 50vw;
    max-width: calc(100vw - 240px);
    height: calc(100vh - 85px);
    background: white;
    position: fixed;
    right: 20px;
    top: 65px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    z-index: 1001;
}
@media screen and (max-width: 1500px) {
    .ko-modal {
        min-width: 60vw;
    }
}
@media screen and (max-width: 1200px) {
    .ko-modal {
        min-width: 80vw;
    }
}
@media screen and (max-width: 768px) {
    .ko-modal {
        min-width: 92vw;
    }
}
.ko-modal-overlay {
    background: rgba(0,0,0,0.3);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.ko-modal-body {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 25px;
}

.ko-float-menu {
    min-width: 15vw;
    max-width: 70vw;
    left: 0;
    right: 0;
    margin: auto;
    background: white;
    position: fixed;
    transition: left .5s ease-in, top .5s ease-in;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    z-index: 10000;
}

.ko-float-menu-overlay {
    background: rgba(0,0,0,0.3);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}

.ko-float-menu-body {
    height: 100%;
    padding-bottom: 5px;
}


ko-schedule-commitments {
    width: 80vw;
    display: block;
}

.ko-schedule-commitments * {
    user-select: none;
}

.ko-schedule-commitments {
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 10px 15px #CCC;
    overflow: hidden;
}

.ko-schedule-commitments .commitments-header-hour {
    display: inline-block;
    width: 60px;
    text-align: center;
    font-size: 12px;
    margin-right: -4.5px;
    font-weight: 600;
}

.ko-schedule-commitments .commitments-header-hour .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    margin: 10px 0 10px -15px;
}

.ko-schedule-commitments .commitments-header-hour .circle.active {
    background: white;
    font-weight: bold;
    color: #fa8730;
    box-shadow: 0 7px 7px rgba(0,0,0,.2);
}

.ko-schedule-commitments .commitments-body {
    position: relative;
}

.ko-schedule-commitments .commitments-body .time-marker {
    background: rgba(0,0,0,.3);
    position: absolute;
    height: 100%;
    width: 1px;
    z-index: 0;
    margin-left: 160px;
}

.ko-schedule-commitments .commitments-body .time-marker.now {
    background: #a6a8ac;
    box-shadow: 0 0 3px #a6a8ac;
    z-index: 10;
}

.ko-schedule-commitments .commitments-header {
    background-color: rgba(222, 224, 234, 1);
    cursor : -webkit-grab;
}

    .ko-schedule-commitments .commitments-header.active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

.ko-schedule-commitments .commitments-body .commitment:nth-child(odd) {
    position: relative;
    background-color: rgba(222, 224, 234, 0.6);
}

.ko-schedule-commitments .commitments-body .commitment:nth-child(even) {
    position: relative;
    background-color: rgba(222, 224, 229, 0.05);
}

.ko-schedule-commitments .commitments-body .commitment .commitment-user {
    position: absolute;
    z-index: 30;
    border-radius: 20px;
    border: 2px solid #e9eaec;
    height: 30px;
    margin-left: 8px;
    margin-top: 6px;
    width: 140px;
    background: #e9eaec;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-user.session-user {
    border-color: #e3e4e6;
    background: #e3e4e6;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-user i {
    display: inline-block;
    font-size: 20px;
    color: rgba(33, 37, 41, 0.7);
    position: relative;
    bottom: 25px;
    left: -10px;
    cursor: pointer;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-user img {
    display: inline-block;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background-size: cover;
    float: left;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-user .name {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    bottom: 11px;
    line-height: 48px;
    margin-left: 5px;
    padding-right: 4px;
    width: 108px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-list {
    position: relative;
    left: 160px;
    height: 43px;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item {
    position: absolute;
    border: 2px solid #5fc484;
    height: 30px;
    border-radius: 20px;
    line-height: 21px;
    text-align: center;
    margin-top: 6px;
    padding-top: 5px;
    padding-left: 0;
    padding-right: 0;
    background: rgba(255,255,255,1);
    z-index: 1;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item.ui-draggable-dragging {
    background-color: rgba(200,200,200,0.6);
    z-index: 30;
}


.ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item .commitment-item-hour {
    display: inline-block;
    position: relative;
    font-size: 12px;
    bottom: 2px;
    margin-right: 1px;
}

.ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item .commitment-item-text {
    display: inline-block;
    position: relative;
    font-size: 12px;
    bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 90px);
}

.ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item i {
    display: inline-block;
    font-size: 14px;
    position: relative;
    top: 2px;
}

.commitments-tooltip {
    text-align: left;
}

.commitments-tooltip h5 {
    display: inline-block;
}

.commitments-tooltip i {
    font-size: 16px;
    position: relative;
    top: 3px;
}
.commitments-tooltip span {
    font-size: 11px;
}

.commitments-tooltip .circle-chart {
    display: inline-block;
    margin-top: 6px;
}

.commitments-tooltip ul {
    font-size: 11px;
    padding-left: 30px;
}

.commitments-tooltip li {
    margin-bottom: -15px;
}

.title {
    display: inline-block;
}

.inline-block {
    display: inline-block;
}

.ko-schedule-commitments-calendar {
    width: 100%;
}

.ko-schedule-commitments-calendar .user-photo img {
    height: 65px;
    width: 65px;
    border-radius: 100%;
}


.ko-schedule-commitments-calendar ul, .ko-schedule-commitments-calendar li {
    list-style: none;
}

.ko-schedule-commitments-calendar {
    position: relative;
}

.ko-schedule-commitments-calendar .timeline {
    display: block;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    padding-top: 60px;
}
.ko-schedule-commitments-calendar .timeline li {
    position: relative;
    height: 30px;
}
.ko-schedule-commitments-calendar .timeline li::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #EAEAEA;
    width: calc(100% - 60px);
    left: 30px;
}

.ko-schedule-commitments-calendar .timeline li span {
    display: inline-block;
    font-size: 10px;
    transform: translateY(-100%);
}

.ko-schedule-commitments-calendar .commitments .commitments-group > ul {
    position: relative;
    padding: 0 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: scroll;
}

.ko-schedule-commitments-calendar .commitments .commitments-group:not(:first-of-type) {
    border-left-width: 0;
}

.ko-schedule-commitments-calendar .commitments .single-commitment {
    position: absolute;
    width: calc(100% + 2px);
    left: -1px;
    border-radius: 5px;
    background: #f6f7fb;
    border: 1px solid #4dbd74;
    padding: 5px 10px;
    min-height: 31px;
}

.ko-schedule-commitments-calendar .commitments .single-commitment .commitment-name {
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    width: calc(100% - 30px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ko-schedule-commitments-calendar .commitments .single-commitment .commitment-date {
    font-size: 10px;
    position: absolute;
    bottom: 5px;
}

.ko-schedule-commitments-calendar .commitments .single-commitment .commitment-user-photo {
    position: absolute;
    bottom: 5px;
    right: 5px;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    background-size: cover;
}

.ko-schedule-commitments-calendar .commitments .single-commitment.small-commitment .commitment-date,
.ko-schedule-commitments-calendar .commitments .single-commitment.small-commitment .commitment-user-photo {
    display: none;
}

.ko-schedule-commitments-calendar .commitments .single-commitment i {
    font-size: 14px;
    margin-top: 4px;
}

.ko-schedule-commitments-calendar .commitments {
    float: left;
    width: 100%;
    margin-left: 30px;
    position: relative;
    z-index: 1;
}

.ko-schedule-commitments-calendar .commitments .commitments-group {
    width: 14%;
    float: left;
    border: 1px solid #EAEAEA;
    margin-bottom: 0;
}

.ko-schedule-commitments-calendar .commitments .top-info {
    height: 60px;
    padding: 7px;
    border-bottom: 1px solid #eaeaea;
}

.ko-schedule-commitments-calendar .commitments .top-info > h6 {
    font-size: 28px;
    display: block;
    font-weight: 100;
    margin-bottom: 0;
}

.ko-schedule-commitments-calendar .commitments .top-info > span {
    font-size: 8px;
    font-weight: bold;
    display: block;
    color: rgba(0,0,0,.5);
    margin: 0;
}

.ko-schedule-commitments-calendar .commitments .commitments-group > ul {
    height: 718px;
    display: block;
    overflow: visible;
    padding: 0;
}

.ko-paginator {

}

.ko-paginator .page.active {
    background: rgb(115,170,224);
    box-shadow: 0 3px 5px 0px rgba(115,170,224, 0.7);
    color: white;
    font-weight: 600;
}

.ko-paginator .page {
    display: inline-block;
    font-weight: 100;
    font-size: 12px;
    line-height: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

.ko-paginator .prev,
.ko-paginator .next {
    display: inline-block;
    cursor: pointer;
}

.ko-paginator .prev i,
.ko-paginator .next i {
    color: rgba(0,0,0,0.5);
    font-size: 18px;
    position: relative;
    top: 4px;
}

.ko-chat-box{
    position: fixed;
    bottom: 0;
    right: 100px;
    z-index: 10;
}
.ko-chat-box .chat-box{
    width: 280px;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.ko-chat-box .chat-box .chat-header{
    background: rgb(244,244,244);
    height: 35px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.ko-chat-box .chat-box .chat-header img {
    height: 21px;
    width: 21px;
    border-radius: 50%;
}

.ko-chat-box .chat-box .chat-header .chat-user-name{
    display: inline-block;
    width: calc(100% - 50px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 14px;
    padding: 7px 10px;
}
.ko-chat-box .chat-box .chat-header .chat-action{
    display: inline-block;
    font-size: 16px;
    color: rgba(0,0,0,0.3);
    position: relative;
    bottom: 10px;
    cursor: pointer;
}
.ko-chat-box .chat-box .chat-body{
    height: 250px;
    overflow-y: auto;
    background: white;
    padding-bottom: 10px;
}
.ko-chat-box .chat-box .chat-body .message-box{
    width: calc(100% - 70px);
    margin-top: 15px;
}
.ko-chat-box .chat-box .chat-body .message-box.me{
    margin-left: 70px;
}
.ko-chat-box .chat-box .chat-body .message-box .message-info{
    font-size: 10px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    margin-left: 62px;
}
.ko-chat-box .chat-box .chat-body .message-box.me .message-info{
    margin-left: 2px;
}
.ko-chat-box .chat-box .chat-body .message-box .message-user-photo{
    width: 35px;
    height: 35px;
    display: inline-block;
    border-radius: 50%;
    margin-left: 15px;
    margin-right: 5px;
    margin-top: -1px;
    vertical-align: top;
}

.ko-chat-box .chat-box .chat-body .message-box .message-user-photo {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.ko-chat-box .chat-box .chat-body .message-box .message-user-photo img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.ko-chat-box .chat-box .chat-body .message-box.me .message-user-photo{
    display: none;
}
.ko-chat-box .chat-box .chat-body .message-box .message-text{
    background: rgb(245,134,52);
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    border-radius: 15px;
    padding: 8px 20px;
    color: white;
    display: inline-block;
    width: calc(100% - 60px);
}
.ko-chat-box .chat-box .chat-body .message-box.me .message-text {
    background: rgb(230,230,230);
    color: rgba(0,0,0,.7);
    width: calc(100% - 10px);
    word-break: break-word;
}
.ko-chat-box .chat-box .chat-footer{
    border-top: 1px solid rgb(225,225,225);
    height: 40px;
}
.ko-chat-box .chat-box .chat-footer .chat-message{
    width: 100%;
    resize: none;
    outline: none;
    height: 40px;
    font-size: 12px;
    padding: 10px;
    border: none;
}
.header-filters {
    min-height: 35px;
}

.ko-small-loading {

}

.ko-small-loading .loading-external {
    background: url(../../Content/Assets/loading-1.png) no-repeat center center;
    background-size: contain;
    height: 26.5px;
    width: 26.5px;
    position: absolute;
    -webkit-animation: spin 1s linear reverse infinite;
    -moz-animation: spin 1s linear reverse infinite;
    animation: spin 1s linear reverse infinite;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.ko-small-loading .loading-internal {
    background: url(../../Content/Assets/loading-2.png) no-repeat center center;
    background-size: contain;
    height: 26.5px;
    width: 26.5px;
    position: absolute;
    -webkit-animation: spin 1s linear reverse infinite;
    -moz-animation: spin 1s linear reverse infinite;
    animation: spin 1s linear reverse infinite;
}

.ko-full-loading {

}
.ko-full-loading .loading-external {
    background: url(../../Content/Assets/loading-1.png) no-repeat center center;
    background-size: contain;
    height: 106px;
    width: 106px;
    position: fixed;
    top: calc(50% - 53px);
    left: calc(50% - 53px);
    z-index: 10001;
    -webkit-animation:spin 1.4s linear infinite;
    -moz-animation:spin 1.4s linear infinite;
    animation:spin 1.4s linear infinite;
}
.ko-full-loading .loading-internal {
    background: url(../../Content/Assets/loading-2.png) no-repeat center center;
    background-size: contain;
    height: 106px;
    width: 106px;
    position: fixed;
    top: calc(50% - 53px);
    left: calc(50% - 53px);
    z-index: 10001;
    -webkit-animation:spin 1.6s linear infinite reverse;
    -moz-animation:spin 1.6s linear infinite reverse;
    animation:spin 1.6s linear infinite reverse;
}
.ko-full-loading .loading-base {
    background: url(../../Content/Assets/loading-simple.png) no-repeat center center;
    background-size: contain;
    height: 100px;
    width: 100px;
    position: fixed;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    z-index: 10001;
}
.ko-full-loading .loading-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    backdrop-filter: blur(3px);
    -moz-backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ko-reports-export {

}

.ko-reports-export .loading-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    backdrop-filter: blur(3px);
    -moz-backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ko-reports-export .export-frame {
    height: 300px;
    width: 300px;
    background: white;
    position: fixed;
    border-radius: 5px;
    top: calc(35% - 40px);
    left: calc(44% - 40px);
    z-index: 10002;
}

.ko-reports-export .export-frame .ko-modal-body {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 25px;
}

.spinning {
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}
.spinning-reverse {
    -webkit-animation:spin 1s linear infinite reverse;
    -moz-animation:spin 1s linear infinite reverse;
    animation:spin 1s linear infinite reverse;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.ko-table.card{
    margin-bottom:1em;
}

.ko-opened-chats {
    position: fixed;
    bottom: 0;
    right: 10px;
}

.ko-opened-chats .chat-item {
    position: relative;
}

.ko-opened-chats .chat-item.single {
    transition: 0.6s cubic-bezier(0.39, -0.04, 0.23, 1.24);
}

.ko-opened-chats.collapsed .chat-item.single {
    margin-bottom: -62px;
}

.ko-opened-chats .chat-item .badge {
    background: rgb(245,134,52);
    height: 17px;
    width: 17px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    color: white;
    left: 10px;
    cursor: pointer;
}

.ko-opened-chats .chat-item:hover .chat-close {
    opacity: 1;
}

.ko-opened-chats .chat-item .chat-close {
    background: rgba(50,50,50,0.8);
    height: 17px;
    width: 17px;
    border-radius: 50%;
    line-height: 15px;
    position: absolute;
    color: white;
    right: 10px;
    cursor: pointer;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
    opacity: 0;
    transition: 0.4s;
}

.ko-opened-chats .chat-item .chat-close i {
    font-size: 12px;
}

.ko-opened-chats .chat-item .user-photo {
    height: 55px;
    width: 55px;
    margin: 12px 15px;
    border-radius: 50%;
    box-shadow: 0 3px 5px rgba(0,0,0,.5);
    cursor: pointer;
}

.ko-opened-chats .chat-item .user-photo img {
    height: 55px;
    width: 55px;
    border-radius: 50%;
}

.ko-opened-chats .chat-item .orange-bg {
    height: 55px;
    width: 55px;
    margin: 15px;
    border-radius: 50%;
    background: rgba(99, 194, 222, 1);
    box-shadow: 0 3px 5px rgba(99, 194, 222, 0.7);
    cursor: pointer;
}



/* CONTEXT MENU */
@-webkit-keyframes contextspin {
  0% {
    opacity: 0;
    -webkit-transform: rotate(90deg) scale(0);
            transform: rotate(90deg) scale(0);
  }
  30% {
    opacity: 0;
  }
}
@keyframes contextspin {
  0% {
    opacity: 0;
    -webkit-transform: rotate(90deg) scale(0);
            transform: rotate(90deg) scale(0);
  }
  30% {
    opacity: 0;
  }
}
@-webkit-keyframes contextspinout {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    -webkit-transform: rotate(90deg) scale(0);
            transform: rotate(90deg) scale(0);
  }
}
@keyframes contextspinout {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    -webkit-transform: rotate(90deg) scale(0);
            transform: rotate(90deg) scale(0);
  }
}
.hide {
  -webkit-animation: 0.2s spinout linear !important;
          animation: 0.2s spinout linear !important;
}

.context-menu {
  position: relative;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  -webkit-animation: 0.2s contextspin linear;
  animation: 0.2s contextspin linear;
  margin: 70px auto 0;
  position: absolute;
  display: none;
  z-index: 99999;
}
.context-menu > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 35px;
  margin: -20px;
}

.context-menu > *:nth-of-type(1) {
  -webkit-transform: rotate(270deg) translate(80px) rotate(-270deg);
          transform: rotate(270deg) translate(80px) rotate(-270deg);
}
.context-menu > *:nth-of-type(2) {
  -webkit-transform: rotate(330deg) translate(80px) rotate(-330deg);
          transform: rotate(330deg) translate(80px) rotate(-330deg);
}
.context-menu > *:nth-of-type(3) {
  -webkit-transform: rotate(30deg) translate(80px) rotate(-30deg);
          transform: rotate(30deg) translate(80px) rotate(-30deg);
}
.context-menu > *:nth-of-type(4) {
  -webkit-transform: rotate(90deg) translate(80px) rotate(-90deg);
          transform: rotate(90deg) translate(80px) rotate(-90deg);
}
.context-menu > *:nth-of-type(5) {
  -webkit-transform: rotate(150deg) translate(80px) rotate(-150deg);
          transform: rotate(150deg) translate(80px) rotate(-150deg);
}
.context-menu > *:nth-of-type(6) {
  -webkit-transform: rotate(210deg) translate(80px) rotate(-210deg);
          transform: rotate(210deg) translate(80px) rotate(-210deg);
}
.context-menu li i {
  display: inline-block;
  color: white;
  font-size: 24px;
  padding: 6px;
  text-align: center;
}

.context-menu li {
  background: #f6551e;
  border-radius: 18px;
  box-shadow: 0px 3px 6px #333;
  overflow: hidden;
  cursor: pointer;
}

.context-menu li:hover {
  width: max-content;
}

.context-menu li span {
    font-size: 12px;
    position: relative;
    bottom: 7px;
    color: white;
    margin-right: 10px;
    clear: both;
    width: 100%;
}

.user-indicators-card {
    box-shadow: 0 0 20px #DDD;
    position: relative;
}

.user-indicators-card .user-name {
    font-size: 14px;
}

.user-indicators-card .icons i {
    font-size: 16px;
    cursor: pointer;
    color: #999;
    margin: 4px;
    position: relative;
}

.user-indicators-card .icons i.active {
    color: #111;
}

.user-indicators-card .icons i.active:after {
    content: '';
    height: 5px;
    width: 5px;
    background: #FA8730;
    border-radius: 50%;
    position: absolute;
}


.user-indicators-card .back {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.user-indicators-card .back i {
    color: #AAA;
    font-size: 16px;
    position: relative;
    top: 4px;
}

.user-indicators-card .back span {
    font-size: 11px;
    font-weight: 700;
    color: #AAA;
}

.ko-timeline {
    position: relative;
}

.ko-timeline-title {
    font-size: 10px;
    margin-left: 25px;
    font-weight: bold;
    color: #AAA;
    margin-top: 2px;
}

.ko-timeline-content {
    margin-left: 60px;
    border-left: 1px dashed #CCC;
    margin-top: -14px;
}

.ko-timeline-commitment {
    margin: 30px 0;
}

.ko-timeline-commitment-time {
    font-size: 9px;
    font-weight: bold;
    position: absolute;
    left: 25px;
    margin-top: 8px;
}

.ko-timeline-commitment-bullet {
    height: 12px;
    width: 12px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    right: 7px;
    top: 8px;
    box-shadow: 0 0 0px 5px white;
    vertical-align: top;
    border: 1px solid;
    cursor: pointer;
}

.ko-timeline-commitment-description {
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
    width: calc(100% - 30px);
    font-size: 14px;
}

.sidebar-right {
    position: fixed;
    z-index: 10;
    bottom: 0;
    right: -320px;
    height: calc(100vh - 49px);
    background: white;
    padding: 5px;
    padding-top: 15px;
    padding-bottom: 20px;
    box-sizing: border-box;
    width: 320px;
    transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    z-index: 10000;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    overflow-y: auto;
}

.sidebar-right .content {
    opacity: 0;
    visibility: hidden;
    transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    transition-delay: .3s;
}

.sidebar-right.active {
    right: 0;
}

.sidebar-right.active .content {
    opacity: 1;
    visibility: visible;
    transition-delay: .3s;
}

.sidebar-right .filter-item {
    padding: 5px;
    border-bottom: 1px solid #CCC;
}

.filter-item-title {
    font-size: 11px;
    font-weight: 900;
    color: rgba(0,0,0,.6);
}

.medium-sidebar-right {
    position: fixed;
    z-index: 10;
    bottom: 0;
    right: -700px;
    height: calc(100vh - 49px);
    background: white;
    padding: 5px;
    padding-top: 15px;
    padding-bottom: 20px;
    box-sizing: border-box;
    width: 700px;
    transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    z-index: 10000;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    overflow-y: auto;
}

.medium-sidebar-right .content {
    opacity: 0;
    visibility: hidden;
    transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    transition-delay: .3s;
}

.medium-sidebar-right.active {
    right: 0;
}

.medium-sidebar-right.active .content {
    opacity: 1;
    visibility: visible;
    transition-delay: .3s;
}

.medium-sidebar-right .filter-item {
    padding: 5px;
    border-bottom: 1px solid #CCC;
}

.shortcuts-sidebar {
    padding: 10px;
}

.shortcuts-sidebar-back {
    position: absolute;
    color: rgba(0,0,0,0.5);
    cursor: pointer;
}

.shortcuts-sidebar-title {
    font-size: 14px;
    font-weight: 900;
    color: rgba(0,0,0,.6);
    text-align: center;
    padding-bottom: 10px;
}

.shortcuts-sidebar .command {
    padding-top: 12px;
    padding-bottom: 17px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #DDD;
    margin-top: -1px;
    line-height: 24px;
}

.shortcuts-sidebar .command .key {
    border-radius: 5px;
    background: #4C4B4B;
    color: white;
    font-weight: 900;
    font-size: 11px;
    padding: 5px 10px;
}

.filter-user-photo img {
    width: 48px;
    border-radius: 100%;
}

.map-tooltip {
    border-radius: 10%;
}

.map-container {
    width: 100%;
    height: calc(100vh - 48px);
    position: relative;
    top: 0vh;
    transition: 0.4s ease-out 1s;
}

.map-container.active {
    width: calc(100% - 320px);
    transition: 0.4s ease-out;
}

.timeline-container {
    width: 0%;
    transition: 0.4s ease-out 1s;
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 50px);
}

.timeline-container.active {
    width: 320px;
    transition: 0.4s ease-out;
}

.timeline-container .card {
    opacity: 0;
    transition: 1s;
    transition-delay: 0.4s;
}

.timeline-container.active .card {
    opacity: 1;
}

.ko-slider .labels {
    padding: 15px 10px;
}

.ko-slider .labels .min {
    float: left;
    font-size: 12px;
    font-weight: bold;
}

.ko-slider .labels .max {
    float: right;
    font-size: 12px;
    font-weight: bold;
}


.ui-slider-handle.ui-corner-all.ui-state-default {
    border-radius: 50%;
    outline: none;
    background: #f6551e;
    border-color: #f6551e;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    cursor: pointer;
}

.ui-slider-handle.ui-corner-all.ui-state-active {
    background: #f6551e;
}

.ui-slider-range.ui-corner-all.ui-widget-header {
    background: rgba(250,135,48,0.5);
}

.ui-slider.ui-corner-all.ui-slider-horizontal.ui-widget.ui-widget-content {
    border-radius: 8px;
}

.ko-monthly-calendar table {
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #DDD;
    border-radius: 10px;
    box-shadow: 0 10px 15px #CCC;
    margin-bottom: 10px;
}

.ko-monthly-calendar table thead th {
    border: 1px solid #DDD;
    font-size: 12px;
    background: #eeeff4;
    padding: 4px 8px;
}

.ko-monthly-calendar table thead th:first-child {
    border-top-left-radius: 9px;
}

.ko-monthly-calendar table thead th:last-child {
    border-top-right-radius: 9px;
}

.ko-monthly-calendar table tbody tr {
    height: 150px;
}

.ko-monthly-calendar table tbody td {
    height: 30px;
    border: 1px solid #DDD;
    vertical-align: top;
    padding: 2px;
    padding-top: 0px;
    background: #FDFDFE;
}

.ko-monthly-calendar table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 9px;
}

.ko-monthly-calendar table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 9px;
}

.ko-monthly-calendar table tbody td.today {
    background: #CFD8DC;
    border-color: #BBBBBB;
}

.ko-monthly-calendar table tbody td.past {
    /*background: #F5F6F9;*/
}

.ko-monthly-calendar table tbody td.dropping {
    background: rgba(115, 170, 224, 0.2);
}

.ko-monthly-calendar table tbody td.today .day, .ko-monthly-calendar table tbody td.active .day {
    font-weight: bold;
}

.ko-monthly-calendar table tbody td.active {
    border-width: 3px;
}

.ko-monthly-calendar table tbody td .day {
    font-size: 12px;
    margin-left: 4px;
    font-weight: 600;
}

.ko-monthly-calendar table tbody td .commitment-item {
    border: 2px solid #5fc484;
    height: 30px;
    border-radius: 20px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 3px;
    background: rgba(255,255,255,1);
    z-index: 1;
}

.ko-monthly-calendar table tbody td .commitment-item .commitment-item-hour {
    display: inline-block;
    position: relative;
    font-size: 12px;
    bottom: 2px;
    margin-right: 1px;
    vertical-align: top;
}

.ko-monthly-calendar table tbody td .commitment-item .commitment-item-text {
    display: inline-block;
    position: relative;
    font-size: 12px;
    bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 60px);
    vertical-align: top;
}

.ko-form-modal {
    max-width: 530px;
    max-height: 800px;
    background: white;
    position: fixed;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 5px;
    margin: auto;
    border-radius: 20px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.4);
    z-index: 1002;
}

.ko-form-modal .mandatory {
    color: rgb(255,0,0) !important;
}

.ko-form-modal .grid-form {
    max-width: 700px;
}

.ko-form-modal .sections-menu {
    position: absolute;
    top: 0px;
    left: 0;
    height: 100%;
    width: 80%;
    background: white;
    z-index: 1001;
    border: 3px solid #cccccc5c;
    border-radius: 15px;
}

.ko-form-modal .sections-menu .sections-container {
    border-right: 0px solid #F5F5F5;
    height: -webkit-fill-available;
    overflow-y: auto;
    margin: -3px;
}

.ko-form-modal .sections-menu .sections-container .menu-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    background: #5d5d5d0f;
    border: 3px solid #cccccc5c;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-top: 3px;
    align-content: stretch;
}

.ko-form-modal .sections-menu .sections-container .menu-header i {
    font-size: 22px;
}

.ko-form-modal .sections-menu .sections-container .menu-header .menu-header-title {
    width: -webkit-fill-available;
    text-align: center;
}

.ko-form-modal .sections-menu .sections-container .menu-header .menu-header-close {
    cursor: pointer;
    padding-top: 3px;
}

.ko-form-modal .sections-menu .sections-container .menu-body {
    margin: 5px;
    padding: 0px 10px;
}

.ko-form-modal .sections-menu .sections-container .menu-body .section {
    color: #546e7a;
    line-height: 35px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: center;
    line-height: initial;
    border-bottom: 3px solid #cccccc5c;
}

.ko-form-modal .sections-menu .sections-container .menu-body .section i {
    vertical-align: middle;
    margin-right: 3px;
    font-size: 22px;
    margin-top: 3px;
}

.ko-form-modal .sections-menu .sections-container .menu-body .section.active {
    background: #F5F5F5;
}

.ko-form-modal-overlay {
    background: rgba(0,0,0,0.3);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.ko-form-modal-body {
    height: 100%;
}

.ko-form-modal-body .question-warning {
    max-height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: solid 2px #f06420b5;
    border-radius: 20px;
    margin-bottom: 10px;
    color: #f06420;
    font-weight: 500;
    text-align: center!important;
}

.ko-form-modal-body .grid-form-header {
    color: grey;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border-bottom: 3px solid #cccccc5c;
    padding: 10px 20px 12px 20px;
}

.ko-form-modal-body .grid-form-header .show-menu {
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
}

.ko-form-modal-body .grid-form-header .show-menu i {
    vertical-align: middle; 
    font-size: 30px;
    margin-top: 5px;
}

.ko-form-modal-body .grid-form-header .show-menu span {
    font-size: 10px;
    font-weight: bold;
    margin-top: -5px;
}

.ko-form-modal-body .grid-form-header .current-section-info {
    width: -webkit-fill-available;
    text-align: center;
    color: #546e7a;
    line-height: 25px;
    font-size: 18px;
    font-weight: 600;
    padding: 0px 30px 0px 30px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.ko-form-modal-body .sections {
    width: 35%;
    border-right: 2px solid #F5F5F5;
    margin: 30px 0;
    overflow-y: auto;
}

.ko-form-modal-body .sections .section i {
    vertical-align: middle;
}

.subtitleLine {
    color: #546e7a;
    line-height: 55px;
    font-size: 20px;
    cursor: pointer;
    font-weight: 600;
    padding-left: 30px;
    display: flex!important;
    align-items: center;
}

.subtitleLine.active {
    background: #F5F5F5;
}

.ko-form-modal-body .sections .section {
    color: #546e7a;
    line-height: 35px;
    font-size: 18px;
    cursor: pointer;
    font-weight: 600;
    padding-left: 30px;
}

.ko-form-modal-body .sections .section.active {
    background: #F5F5F5;
}

.ko-form-modal-body .lines {
    width: 65%;
    position: relative;
    margin-top: 20px;
}

.ko-form-modal-body .title {
    position: absolute;
    background: #f7f4f4;
    border-bottom: solid;
    border-radius: 7px;
    border-color: lightgray;
    width: 100%;
    height: 35px;
    display: inline-block;
    color: #504f4f;
    font-weight: bold;
    text-align: center;
}

.ko-form-modal-body .closeWindow {
    position: absolute;
    width: 100%;
    color: #504f4f;
    padding: 5px;
    text-align: end;
    cursor: pointer;
}

.ko-form-modal-body .title i {
    vertical-align: bottom;
    margin-top: 5px;
}

.ko-form-modal-body .header {
    padding: 15px 25px;
}

.ko-form-modal-body .header .text {
    font-size: 16px;
    font-weight: 500;
}

.ko-form-modal-body .header .progress {
    margin-top: 5px;
    height: 10px;
    background: #ffe7d4;
}

.ko-form-modal-body .header .progress .completed {
    background: #FA8730;
    transition: 1s;
}

.ko-form-modal-body .form {
    padding: 0 5px;
    max-width: 100%;
    height: calc(100% - 95px); 
    position: relative;
    display: flex;
    flex-direction: column;
}

.ko-form-modal .form .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: auto !important;
}

.form-external-body {
    height: calc(100% - 40px) !important;
}

.ko-form-modal.grid-form .ko-form-modal-body .form {
    height: calc(100% - 90px);
    overflow-y: auto;
    overflow-x: hidden;
}

.ko-form-modal-body .form .question {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
}

.ko-form-modal-body .form .sample-layout {
    margin: 0px 0px 10px 0px;
    border: 3px solid #cccccc5c;
    border-radius: 15px;
}

.ko-form-modal-body .form .sample-layout .sample-title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #cccccc5c;
    background: #5d5d5d0f;
    margin: 0px;
    font-size: 15px;
    color: #807e7e;
    padding: 0px;
    line-height: unset;
}

.ko-form-modal-body .form .sample-layout .sample-title .sp-title-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.ko-form-modal-body .form .question .material-icons {
    cursor: pointer;
    font-weight: bolder;
    color: #2165a99e;
    font-size: 35px;
    margin-left: 5px;
}

.titleLine {
    color: #546e7a;
    text-align: center;
    line-height: 35px;
    font-size: 24px;
    font-weight: 600;
    background: #F5F5F5;
    left: -20px;
    margin-top: 18px;
    display: flex!important;
    justify-content: center;
    align-items: center;
}

.ko-form-modal-body .form .section-line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #546e7acc;
    line-height: unset;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    background: #5d5d5d0f;
    margin-top: 5px;
    border: 3px solid #cccccc5c;
    border-radius: 15px;
    margin: 10px 0px 10px 0px;
    text-align: center;
    line-height: initial;
    padding: 0px 30px 0px 30px;
}

.ko-form-modal-body .form .question-line {
    margin: 0px 0px 10px 0px;
    border: 3px solid #cccccc5c;
    border-radius: 15px;
}

.ko-form-modal.grid-form .ko-form-modal-body .form .question-body {
    padding: 10px;
}

.ko-form-modal.grid-form .ko-form-modal-body .form .question-body .currency-symbol {
    display: flex;
    color: grey;
    font-weight: 600;
    align-items: center;
    font-size: 20px;
    margin: auto !important;
    padding-right: 0 !important;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 15px;
}

.ko-form-modal.grid-form .ko-form-modal-body .form .mobile-focus {
    min-height: calc(100vh - 200px);
}

.selection-list {
    border: 3px solid #cccccc5c;
    border-radius: 10px;
    margin-top: 15px;
}

.selection-list .list-header {
    color: #999;
    background: #5d5d5d0f;
    display: flex;
    flex-wrap: wrap;
    margin: auto!important;
    padding: 2px;
}

.selection-list .list-topic {
    padding: 0px 10px 0px 10px;
    font-weight: bold;
}

.selection-list .list-body {
    padding: 10px 25px 10px 25px;
}

.selection-list .list-item {
    margin-bottom: 5px;
    border-bottom: 3px solid #cccccc5c;
}

.selection-list .list-item .action {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.ko-form-modal-body .form canvas {
    display: block;
    margin: auto;
    border: 1px solid #000;
    cursor: crosshair;
    background: white !important;
    color: white !important;
}

.ko-form-modal.grid-form .ko-form-modal-body .form .question {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #cccccc5c;
    background: #5d5d5d0f;
    margin: 0px;
    font-size: 15px;
    color: #807e7e;
    padding: 0px;
    line-height: unset;
}

.ko-form-modal .grid-form .ko-form-modal-body .form .question .mandatory {
    color: rgb(255,0,0);
}


.ko-form-modal-body .form .option {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 25px;
    font-weight: 400;
    color: #546e7a;
    font-size: 18px;
    padding: 10px 15px;
    margin-bottom: 15px;
    cursor: pointer;
}

.ko-form-modal-body .form .option.active {
    color: white;
    background: #FA8730;
}

.ko-form-modal-body .form .option.create {
    color: white;
    background: #1b305d;
}

.ko-form-modal-body .form .option.create:before {
    font-family: 'Material Icons';
    font-size: 22px;
    line-height: 12px;
    content: 'add';
    background: rgb(115,170,224);
    border-radius: 50%;
    position: relative;
    top: 4px;
    right: 4px;
    padding: 3px;
    margin-right: 10px;
}

.ko-form-modal-body .form .option.active:before {
    font-family: 'Material Icons';
    font-size: 22px;
    line-height: 12px;
    content: 'check';
    background: #ffb67e;
    border-radius: 50%;
    position: relative;
    top: 4px;
    right: 4px;
    padding: 3px;
    margin-right: 10px;
}

.ko-form-modal-body .form .input {
    width: 100%;
    border: 1px solid #cfd8dc;
    border-radius: 25px;
    font-weight: 400;
    color: #546e7a;
    font-size: 18px;
    padding: 10px 15px;
    outline: none;
}

.ko-form-modal-body .form .form-datepicker .bootstrap-datetimepicker-widget {
    width: 400px !important;
}

.ko-form-modal-body .form .clear-canvas {
    color: #FA8730;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: 0.4s;
    font-weight: 600;
    display: block;
    width: 80px;
    margin: auto;
}

.ko-form-modal-body .form .thumbnail {
    background: #EFEFEF;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.ko-form-modal-body .form .thumbnail .material-icons {
    color: #888;
    font-size: 100px;
    vertical-align: middle;
}

.ko-form-modal-body .form .thumbnail .search-icon {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #88888894;
}

.ko-form-modal-body .footer {
    height: 40px;
    width: 100%;
    background: white;
    border-top: 3px solid #cccccc5c;
    border-radius: 0px 0px 20px 20px;
    position: relative;
    display: table;
}

/*  Mobile Rules */
@media only screen and (hover: none) and (pointer: coarse) {
    .ko-form-modal {
        top: 0px;
        bottom: 0px;
        max-width: 100%;
        max-height: 100%;
    }

    .popover {
        border-radius: 10px !important;
        box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.1);
        border-color: #DDD;
        min-width: 90vw;
        max-height: 50vh;
        margin-right: 15px;
        z-index: 10001;
    }

    .ko-select-content {
        height: auto;
        min-width: 90vw;
        overflow-y: auto;
        max-height: 35vh;
        margin: 5px 0px;
    }

    .ko-form-modal.grid-form .ko-form-modal-body .form {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media only screen and (hover: none) and (pointer: coarse) and (max-height: 500px) {
    .ko-form-modal-body .footer {
        display: none;
        height: 0px;
    }

    .ko-form-modal.grid-form .ko-form-modal-body .form {
        overflow-y: auto;
        overflow-x: hidden;
    }
}
/* End of Mobile Rules */

.ko-form-modal-body .footer .prev,
.ko-form-modal-body .footer .next,
.ko-form-modal-body .footer .cancel,
.ko-form-modal-body .footer .save {
    display: table-cell;
    color: #FA8730;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    border: 2px solid #cccccc5c;
    cursor: pointer;
    transition: 0.4s;
    font-weight: 600;
    user-select: none;
    vertical-align: middle;
}

.footerButtons {
    height: 40px;
    width: 100%;
    background: white;
    border-radius: 20px;
}

.footerButtons .prev, 
.footerButtons .next,
.footerButtons .save {
    width: 50%;
    color: #FA8730;
    text-align: center;
    line-height: 40px;
    font-size: 25px;
    border: 2px solid #cccccc5c;
    cursor: pointer;
    transition: 0.4s;
    font-weight: 600;
    user-select: none;
}

.footerButtons .next {
    border-bottom-right-radius: 15px;
    right: 0;
}

.ko-form-modal-body .footer .next {
    border-bottom-right-radius: 15px;
    right: 0;
}

.ko-form-modal-body .footer .prev.disabled, 
.ko-form-modal-body .footer .next.disabled,
.ko-form-modal-body .footer .cancel.disabled,
.ko-form-modal-body .footer .save.disabled
{
    opacity: 0;
}

.ko-form-modal-body .footer .prev:hover, 
.ko-form-modal-body .footer .next:hover,
.ko-form.modal-body .footer .save:hover
{
    /*opacity: 0.9;*/
}

ko-custom-report-panel {
    width: 100%;
    overflow: hidden;
}

ko-custom-report-panel #panel-header {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    max-height: 313px;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-bottom: 0!important;
    margin-top: 0!important;
    padding: 0px 10px 0px 10px;
    display: flex;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    display: -ms-flexbox;
    flex-wrap: wrap;
    transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

ko-custom-report-panel #division-bar {
    height: 10px;
    cursor: pointer;
    margin-top: 1px!important;
    margin-bottom: 1px!important;
    padding: 0!important;
}

ko-custom-report-panel #panel-body {
    overflow-x: hidden!important;
    width: 100%;
    height: 100%;
}

ko-custom-report-panel .hide-element {
    overflow: hidden;
    height: 0px;
    transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

ko-custom-report-panel .ko-checkbox,
ko-custom-report-panel .ko-radiobutton {
    padding-top: 0px;
}

ko-custom-report-panel .ko-checkbox label,
ko-custom-report-panel .ko-radiobutton label {
    margin-bottom: 0px;
    font-weight: 500!important;
}

ko-custom-report-panel .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: center;
}

ko-custom-report-panel .card .list {
    max-height: -webkit-fill-available;
    overflow-x: hidden;
    overflow-y: scroll;
}

ko-custom-report-panel .card .card-header {
    width: 100%;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    font-size: 12px;
    font-weight: 500;
}

ko-custom-report-panel .card .card-header label {
    margin-bottom: 0px!important;
}

ko-custom-report-panel .nav-tabs {
    font-size: 10px;
    font-weight: 500;
}

.report-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 10px #CCC;
    padding: 20px;
    margin: 0 8px;
    height: calc(100% - 15px);
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.report-card-header-title {
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-card-header-subtitle {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

.report-card-header-buttons {
    white-space: nowrap;
    max-width: 0;
    transition-delay: .3s;
}

.report-card-header-button {
    background: rgb(240, 240, 240);
    padding: 0 15px;
    font-size: 12px;
    border-radius: 30px;
    line-height: 30px;
    height: 30px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #616161;
    cursor: pointer;
    transition: .4s;
    display: inline-block;
    white-space: nowrap;
    max-width: 30px;
    padding-right: 6px;
    overflow: hidden;
    direction: rtl;
    opacity: 0;
}

.report-card-header-buttons-static {
    position: absolute;
    top: 20px;
    right: 40px;
    white-space: nowrap;
    max-width: 0;
    transition-delay: .3s;
}

.report-card-header-button-static {
    background: rgb(240, 240, 240);
    font-size: 12px;
    border-radius: 30px;
    line-height: 23px;
    height: fit-content;
    font-weight: 500;
    color: #616161;
    cursor: pointer;
    transition: .4s;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
}

.report-card:hover .report-card-header-button-static {
    opacity: 1;
}

.report-card:hover .report-card-header-buttons-static {
    transition-delay: 0s;
}

.report-card:hover .report-card-header-button {
    opacity: 1;
}

.report-card:hover .report-card-header-buttons {
    max-width: 500px;
    transition-delay: 0s;
}

.report-card-header-button:hover {
    padding-right: 15px;
    max-width: 200px;
    opacity: .8;
}

.report-card-content {
    overflow-y: auto;
    margin: 10px;
    height: calc(100% - 40px);
    padding-right: 1px;
}

.content-card-header {
    font-size: small;
    font-weight: 500;
    background: #d3d3d366;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    padding: 0px 12px 0px 20px;
}

.content-card-header .card-header-column {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    user-select: none;
}

.content-card-header .card-header-column i {
    font-size: 18px;
    margin-left: 5px;
    margin-top: 3px;
    cursor: pointer;
}

.report-card-frame {
    border: solid;
    border-color: lightgrey;
    border-radius: 9px;
    overflow-x: auto;
    margin: 10px;
    height: calc(100% - 40px);
    text-align: center;
}

.report-card-frame .draft-title {
    background: #e5e5e5;
}

.report-card-frame .draft-title label {
    margin: 0px;
    vertical-align: text-bottom;
    font-weight: 500;
    font-size: 15px;
    color: #848484;
}

.report-card-frame .draft-content {
    
}

.report-card-frame .draft-content label {
    font-size: smaller !important;
    margin: 0px !important;
}

.report-card-frame .draft-content .field-description {
    font-weight: bold;
}

.report-card-frame .draft-content .field-value {
    overflow: hidden;
    width: 100%;
    padding: 0px;
    max-height: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.report-card-frame .row {
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.report-card-frame .title {
    background-color: lightgray;
    font-weight: 500
}

.report-card-frame .content {
    overflow: hidden;
    width: 100%;
    padding: 5px 0px 0px 0px;
    max-height: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ko-dashboard {
    width: calc(100% - 10px);
}

.ko-dashboard.grid-stack > .grid-stack-item > .grid-stack-item-content {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ko-dashboard.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
    box-shadow: none;
}

.ko-dashboard.grid-stack > .grid-stack-item > .ui-resizable-handle {
    bottom: 15px;
    opacity: 0;
}

.table-clean tr th {
    background: rgb(237,240,245);
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    white-space: nowrap;
    border-bottom: none;
    border-top: none;
    padding: 10px;
}

.table-clean tr th:first-child {
    border-top-left-radius: 8px;
}

.table-clean tr th:last-child {
    border-top-right-radius: 8px;
}

.table-clean tr th.Filtering .table-title {
    color: #30c335e0;
}

.table-clean tr th.Filtering .btn-order {
    color: #30c335e0;
}

.table-clean tr th.Filtering .btn-filter {
    color: #30c335e0 !important;
}

.table-clean tr th.Ascendente .table-title, .table-clean tr th.Descendente .table-title {
    color: #2196f3 !important;
}

.table-clean tr th.Ascendente .btn-order, .table-clean tr th.Descendente .btn-order {
    color: #2196f3 !important;
}

.table-clean tr th .btn-order.order-desc {
    display: none;
}

.table-clean tr th.Ascendente .btn-order.order-desc, .table-clean tr th.Descendente .btn-order.order-asc {
    display: none;
}

.table-clean tr th.Ascendente .btn-order.order-asc, .table-clean tr th.Descendente .btn-order.order-desc {
    display: inline-block;
}

.table-clean tr th .btn-filter {
    /*opacity: 0; Altered by Phill Request*/
    opacity: 1;
    transition: 0.4s;
}

.table-clean tr th:hover .btn-filter {
    opacity: 1;
}

.table-clean tr th .table-title {
    display: inline-block;
    cursor: pointer;
}

.table-clean tr th .icons {
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
    position: relative;
}

ko-filter-propover .filter-popover {
    top: 24px;
    left: 24px;
    padding: 0px;
    min-width: 220px;
}

ko-filter-propover .title {
    background-color: #d3d3d380;
    margin: auto;
    padding: 5px;
    font-weight: 500;
    font-size: 14px;
    color: #636363;
    display: flex;
    align-items: center;
    justify-content: center;
}

ko-occurrence-filter .statusOverview .title i {
    font-size: 21px;
}

ko-occurrence-filter .action-menu {
    display: flex;
    flex-direction: row;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    border-top: #d3d3d380;
    border-top-style: outset;
    height: 30px;
    background: #d3d3d380;
}

ko-occurrence-filter .action-menu .action-button {
    display: flex;
    width: fit-content;
    margin: auto;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 500;
    align-items: stretch;
    cursor: pointer;
    color: #9b9494;
    user-select: none;
}

ko-occurrence-filter .action-menu .action-button i {
    font-size: 20px;
    color: #ef5206;
}

ko-filter-propover .content {
    padding: 1px 10px 10px 10px;
}

.filter-popover {
    top: 24px;
    left: 24px;
    padding: 10px;
    min-width: 180px;
}

.filter-popover:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 6px;
    right: auto;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    top: -7px;
}

.filter-popover:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 7px;
    right: auto;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    top: -6px;
}

.filter-popover .ko-checkbox {
    padding-top: 0;
}

.filter-popover .ko-checkbox input[type="checkbox"] + label {
    padding-bottom: 0;
    padding-top: 0;
}

.filter-popover .filter-popover-header {
    text-align: center;
}

.filter-popover .filter-popover-list {
    max-height: 150px;
    overflow-y: auto;
    margin-top: 10px;
}

.filter-popover .filter-popover-footer {
    text-align: center;
    padding-top: 10px;
}

.table-clean tr th:last-child .filter-popover {
    left: auto;
    right: -18px;
}

.table-clean tr th:last-child .filter-popover:before {
    right: 6px;
    left: auto;
}

.table-clean tr th:last-child .filter-popover:after {
    right: 7px;
    left: auto;
}

.table-clean tr th .icons i {
    font-size: 20px;
    cursor: pointer;
}

.table-clean tr td {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 600px;
    border-top: none;
    padding: 10px;
}

.table-clean tbody tr:nth-of-type(even) {
    background-color: rgb(249, 250, 251);
}

.report-selected-combo {
    /*width: 350px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;*/
}

.report-selected-combo .ko-input input {
    font-size: 17px;
    top: 10px;
    /*font-size: 20px;
    top: 5px;*/
}

.report-config-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.report-config-button {
    height: 150px;
    width: 130px;
    background: #eceff1;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    cursor: pointer;
    transition: 0.4s;
}

.report-config-button:hover {
    opacity: .6;
}

.report-config-button i {
    font-size: 40px;
    margin-top: 45px;
}


.report-config-button span {
    font-weight: 500;
    font-size: 14px;
    height: 40px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.workflowAutofill {
    font-size: 14px;
}

.workflowAutofill:hover {
    background-color: #ddd;
}

.flow-card {
    border: solid;
    border-color: #c6d4e38a;
    border-radius: 8px;
    background: #c6d4e38a;
    margin: auto;
    font-size: small;
}

.flow-card .title {
    font-weight: 500;
    margin-bottom: 1px;
}

.flow-card .content {
    overflow: hidden;
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.solution-card {
    border: solid;
    border-color: lightgrey;
    border-radius: 3px;
    margin: auto;
    font-size: small;
    padding: 0px !important;
}



.solution-card .user-info {
    padding: 5px;
    margin: auto;
    background: #3f6a8126;
    border-bottom-style: solid;
    border-color: lightgrey;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    flex-direction: row;
}

.solution-card .actions {
    border-top-style: solid;
    border-color: lightgrey;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.solution-card .title {
    background-color: #d3d3d380;
    margin: auto;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #636363;
    display: flow-root;
}

.solution-card .title i {
    vertical-align: middle;
    font-size: 21px;
}

.solution-card .action-text {
    margin: auto;
    font-weight: 700;
    cursor: pointer;
    color: #eb7f1f;
}

.description-area {
    border-style: solid;
    border-radius: 5px;
    border-color: whitesmoke;
    font-weight: 500;
    font-style: oblique;
    background-color: whitesmoke;
    padding: 10px;
    overflow-wrap: break-word;
    width: 100%;
    white-space: pre-wrap;
    color: black;
    font-size: 12px;
    text-align: left;
}

.default-frame {
    border: solid;
    border-color: lightgrey;
    border-radius: 15px;
}

.default-frame .title {
    background-color: #d3d3d380;
    margin: auto;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.frame-title-centered {
    background-color: #d3d3d380;
    margin: auto;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    text-align: center;
}

.frame-title-text {
    font-size: 13px;
    font-weight: 900;
    color: rgba(0,0,0,.3);
    display: block;
}

.vertical-frame {
    overflow-y: auto;
    margin: 10px;
    max-height: calc(100% - 40px);
    border: solid;
    border-color: lightgrey;
    border-radius: 15px;
}

.horizontal-frame {
    overflow-x: auto;
    margin: 10px;
    border: solid;
    border-color: lightgrey;
    border-radius: 15px;
}

ko-image-container {
    padding: 0px;
    overflow-x: auto;
}

ko-image-container .container {
    display: flex;
    align-items: center;
    padding: 0px;
}

ko-image-container .container-image {
    min-width: 150px;
    max-width: 200px;
    min-height: fit-content;
    max-height: 400px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px rgba(0,0,0,0.5) dashed;
    text-align: center;
    line-height: 10px;
    cursor: pointer !important;
    border-radius: 5px;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

ko-image-container .container-image .file-icon {
    font-size: 30px;
    color: rgba(0,0,0,0.6);
}

ko-image-container .container-image .file-name {
    font-size: 10px;
    margin-top: 9px;
    color: rgba(0,0,0,0.6);
    overflow-wrap: break-word;
    flex: 0 0 100%;
    max-width: 100%;
}

ko-image-container .container-image .remove-file {
    font-size: 12px;
    display: inline-block;
    background: white;
    border-radius: 50%;
    padding: 7px;
    text-shadow: none;
    transition: .4s;
    color: rgba(0,0,0,0.5);
    user-select: none;
    position: absolute;
    float: right;
    position: absolute;
    top: -12px;
    right: -10px;
    font-size: 12px;
    opacity: 1;
}

ko-image-container .container-image img {
    max-height: -webkit-fill-available;
    max-width: -webkit-fill-available;
}

ko-image-container .add-file {
    min-width: 85px;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    border: 2px rgba(0,0,0,0.5) dashed;
    text-align: center;
    line-height: 10px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

ko-image-container .add-file i {
    font-size: 30px;
    color: rgba(0,0,0,0.6);
}

ko-image-container .add-file .display-name {
    min-height: 30px;
}

ko-image-container .add-file .display-name span {
    font-size: 9px;
    word-break: break-word;
}

.text-area-display {
    border-style: solid;
    border-radius: 5px;
    border-color: whitesmoke;
    font-weight: 400;
    background-color: whitesmoke;
    overflow-wrap: break-word;
    width: 100%;
    white-space: pre-wrap;
    color: black;
    font-size: 20px;
    text-align: left;
    max-height: 30vh;
    overflow-y: scroll;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* External Download */
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.external-small-logo {
    background: url(../../Content/Assets/logo.jpg) no-repeat;
    width: 100px;
    height: 30px;
    background-size: contain;
    background-position-x: left;
    margin-top: -3px;
}

.card-download {
    width: 400px;
    max-width: 90vw;
    background: white;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px;
    box-shadow: 5px 5px 25px rgba(0,0,0,0.15);
    overflow: hidden;
}

.card-download .header {
    color: #546e7a;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    font-weight: 600;
    background: #F5F5F5;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.card-download .body {
    padding: 10px 10px 10px 10px;
}

.card-download .body .title {
    font-weight: bold;
}

.card-download .body .download {
    color: blue;
    cursor: pointer;
    text-align: center;
}

.card-download h6 {
    font-size: 11px;
    color: #CCC;
    font-weight: bold;
}

.dkro-download-header {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin: auto;
    text-align: left;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
}

.dkro-download-header a {
    color: blue;
    cursor: pointer;
}

.dkro-external-footer {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    color: rgba(0,0,0,.3);
    margin: 0 auto;
    text-align: center;
    font-weight: 900;
    font-size: 10px;
    font-style: italic;
}

.hide-important {
    visibility: hidden !important;
}

.display-text-box {
    border-style: solid;
    border-radius: 5px;
    border-color: whitesmoke;
    font-weight: 400;
    background-color: whitesmoke;
    overflow-wrap: break-word;
    width: 100%;
    white-space: pre-wrap;
    color: black;
    font-size: 13px;
    text-align: left;
    min-height: 25px;
    max-height: 30vh;
    overflow-y: scroll;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: row-resize;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}

.ko-photo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10002;
}

.ko-photo .video,
.capturedImage {
    display: none;
    width: 100%;
    border-radius: 10px;
    object-fit: contain;
}

.ko-photo 
.freezeButton,
.sendButton,
.newImageButton,
.torchButton,
.facingButton,
.abortButton {
    display: none;
    z-index: 10003;
    background-color: #ffffff47;
    color: #3498db;
    width: 75px;
    height: 75px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    margin: 10px
}

.ko-photo .freezeButton:hover,
.sendButton:hover,
.newImageButton:hover,
.abortButton:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}

.ko-photo .freezeButton {
    background-color: rgb(228, 228, 228);
}

.ko-photo .overlay-content {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 98%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0);
    border-radius: 5px;
}

.ko-photo .top-buttons-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 25%;
    padding: 10px;
}

.ko-photo .button-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
}

.ko-photo .error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
}