body { color: #333333; background: #fcfcfc url("../images/bg.png") repeat-y left top; background-size: 16.66666% auto; overflow-y: scroll }
body.filemanager { background: #fcfcfc }

@keyframes autoHide { 0% { opacity: 1 } 90% { opacity: 1 } 100% { opacity: 0 } }
@-webkit-keyframes autoHide { 0% { opacity: 1 } 90% { opacity: 1 } 100% { opacity: 0 } }

.autohide { -webkit-animation: autoHide 5s forwards; animation: autoHide 5s forwards }

#leftmenu a { display: block; text-decoration: none; color: #aaaaaa }
#leftmenu a .fas, #leftmenu a .fab { font-size: 120%; color: #ffffff }

#leftmenu li > a { border-left: 3px solid transparent; padding: 20px 10px; border-bottom: 1px solid #3e444e }
#leftmenu li > a.active { border-left-color: #41b3f9 }
#leftmenu li > a:hover { background-color: #373c46 }
#leftmenu li ul { display: none }
#leftmenu li ul.show { display: block; background-color: #2b303a }
#leftmenu li ul a { padding-left: 50px }

#logo { display: block; width: 100%; height: 70px; background: #ffffff url("../images/logo.png") no-repeat center center }

#topmenu { width: 100%; height: 70px; line-height: 70px; background-color: #303641 }
#topmenu li { display: inline-block; padding-left: 15px }
#topmenu a { display: block; text-decoration: none; color: #ffffff; padding: 0 10px }
#topmenu a .fas, #topmenu a .fab { font-size: 120% }
#topmenu a:hover { color: #88b719 }
#topmenu li ul { z-index: 99; position: absolute; width: 150px; right: 0; top: 40px; display: none }
#topmenu li:hover ul { display: block }
#topmenu li ul li { display: block; padding: 0 }
#topmenu li ul li a { display: block; text-align: left; text-indent: 5px; height: 40px; line-height: 40px; padding-right: 25px }
#topmenu li ul li a:hover { background-color: #88b719; color: #ffffff }
#topmenu li a.logout { background-color: #c62d2d; color: #ffffff }

#toolbar { margin: 0 20px; padding: 40px 0 20px 0; border-bottom: 2px solid #cccccc }

#main { padding-bottom: 20px }

#section { width: 100%; position: relative }

#footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 20px; line-height: 20px; background: #efefef; font-size: 0.8em }

/* alerts */
.alert_box { position: absolute; z-index: 99; width: 60%; top: -67px; right: 0; background: #ffffff; -webkit-animation: autoHide 3s forwards; animation: autoHide 3s forwards }
.alert_box.z90 { z-index: 90; -webkit-animation-duration: 30s; animation-duration: 30s } 
.alert_box.z91 { z-index: 91; -webkit-animation-duration: 27s; animation-duration: 27s } 
.alert_box.z92 { z-index: 92; -webkit-animation-duration: 24s; animation-duration: 24s } 
.alert_box.z93 { z-index: 93; -webkit-animation-duration: 21s; animation-duration: 21s } 
.alert_box.z94 { z-index: 94; -webkit-animation-duration: 18s; animation-duration: 18s } 
.alert_box.z95 { z-index: 95; -webkit-animation-duration: 15s; animation-duration: 15s } 
.alert_box.z96 { z-index: 96; -webkit-animation-duration: 12s; animation-duration: 12s } 
.alert_box.z97 { z-index: 97; -webkit-animation-duration: 9s; animation-duration: 9s } 
.alert_box.z98 { z-index: 98; -webkit-animation-duration: 6s; animation-duration: 6s } 

.alert { float: right; background-color: #ffffff; border: 1px solid #eeeeee; color: #999999; padding: 1em; margin: 0 20px }
.alert.alert_success { background-color: #bdedbc; border-color: #b4e8a8; color: #00a651 }
.alert.alert_warning { background-color: #ffefa4; border-color: #ffd78a; color: #664802 }
.alert.alert_info { background-color: #c5e8f7; border-color: #a6e8f3; color: #2c7ea1  }
.alert.alert_danger { background-color: #ffc9c9; border-color: #ffafbd; color: #b11b1b }
.alert.alert_default { background-color: #eeeeee }

/* forms */
.input, .textarea, .select, .checkbox, .radio { box-sizing: border-box }
.input, .textarea, .select, .checkbox, .radio, .btn { vertical-align: top; font-size: 90% }
.select, .checkbox, .radio { outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none }

.input { border: 1px solid #dddddd; height: 3em; line-height: 3em; padding: 0; margin: 0; background-color: #ffffff; text-indent: 4px }
.textarea { border: 1px solid #dddddd; padding: 0; margin: 0; background-color: #ffffff; text-indent: 4px }

.select { border: 1px solid #dddddd; padding: 0 20px 0 0.5em; height: 3em; line-height: 3em; margin: 0; color: #8b8b8b; background: #ffffff url("../images/select.png") no-repeat 98% center; background-size: auto 40%; max-width: 250px } 
.select:focus, .select:hover { outline: 0; color: #999999; background-color: #f7f7f7; cursor: pointer }
.select.multiple { height: auto; background: #ffffff; padding: 0 0.5em }
.select.multiple optgroup { background: #dedede; text-transform: uppercase }
.select.multiple option { padding: 1em 2px; text-indent: 10px; text-transform: none; font-size: 100% }
.select.multiple option:checked {  }
.select.multiple option:not(:checked) { background-color: #ffffff }
.select.multiple option:not(:checked):hover { background-color: #f7f7f7 }

.checkbox, .radio { border: 1px solid #dddddd; padding: 8px; margin: 0; background-color: #ffffff; text-align: center }
.radio { border-radius: 50% }
.checkbox:focus, .radio:focus, .checkbox:hover, .radio:hover { border-color: #cccccc }
.checkbox:checked, .radio:checked { background: #2aa1c0 url("../images/checkbox.png") no-repeat center center; background-size: 60% auto }
.radio:checked { background-image: url("../images/radio.png") }
.checkbox:checked:hover, .radio:checked:hover { background-color: #0e647d }

.file { z-index: 1; position: relative }
.file input { width: 98%; height: 98%; opacity: 0; overflow: hidden; left: 0; top: 0; position: absolute; z-index: 1 }
.file div { position: relative; top: 0; left: 0; height: 100% }

.table { border: 1px dotted #cccccc; border-right: 0; border-bottom: 0 }
.table .head, .table .row { display: table; width: 100% }
.table .cell { display: table-cell; vertical-align: middle; height: 100%; padding: 0.8em 0; border-right: 1px dotted #cccccc }
.table .head { background-color: #eeeeee; font-weight: bold; color: #333333; text-transform: uppercase; border-bottom: 1px solid #bbbbbb }
.table .head .cell { padding: 1em 0 }
.table .row { background-color: #f9f9f9; color: #555555; border-bottom: 1px dotted #cccccc }
.table .row.even { background-color: #ffffff }
.table .row.hover:hover { background-color: #ffdffd }
.table .cell-group { display: table-cell; vertical-align: middle; height: 100% }
.table .cell-group .head, .table .cell-group .row { border-bottom: 0 }

.spacer { display: inline-block; width: 16px; padding: 0.5em 0; line-height: 1 }
.collapse { display: inline-block; width: 16px; padding: 0.5em 0; line-height: 1; background: url("../images/collapse.png") no-repeat center center }
.expand { display: inline-block; width: 15px; padding: 0.5em 0; line-height: 1; background: url("../images/expand.png") no-repeat center center }

.color-grey { color: #555555 }

.color-light-blue { color: #3c8dbc }
.color-aqua { color: #00a7d0 }
.color-green { color: #008d4c }
.color-yellow { color: #db8b0b }
.color-red { color: #d33724 }
.color-gray { color: #b5bbc8 }
.color-navy { color: #001a35 }
.color-teal { color: #30bbbb }
.color-purple { color: #555299 }
.color-orange { color: #ff7701 }
.color-maroon { color: #ca195a }
.color-black { color: #000000 }
.color-blue { color: #005993 }
.color-gold { color: #fbc70e }
.color-olive { color: #327f5d }
.color-white { color: #f0f0f0 }

/* buttons */
.btn { box-sizing: border-box; background-color: #f4f4f0; padding: 1em; margin: 0; border: 1px solid #adadad; color: #ffffff; display: inline-block; text-align: center; white-space: nowrap; text-decoration: none }
a.btn, input.btn { cursor: pointer }
.btn.nohover { cursor: default }
.btn:focus, .btn:hover { background-color: #d6d6d6; border-color: #adadad; text-decoration: none }
.btn .fas, .btn .fab, .btn .far { font-size: 120% }

.btn.btn-default { background-color: #f4f4f4; color: #666666; border-color: #dddddd }
.btn.btn-light-blue, .btn.btn-primary { background-color: #3c8dbc; border-color: #357ca5 }
.btn.btn-aqua, .btn.btn-info { background-color: #00c0ef; border-color: #00a7d0 }
.btn.btn-green, .btn.btn-success { background-color: #00a65a; border-color: #008d4c }
.btn.btn-yellow, .btn.btn-warning { background-color: #f39c12; border-color: #db8b0b; color: #ffffff }
.btn.btn-red, .btn.btn-danger { background-color: #dd4b39; border-color: #d33724 }
.btn.btn-gray { background-color: #eeeeee; border-color: #dddddd; color: #666666 }
.btn.btn-navy { background-color: #001f3f; border-color: #001a35 }
.btn.btn-teal { background-color: #39cccc; border-color: #30bbbb }
.btn.btn-purple { background-color: #605ca8; border-color: #555299 }
.btn.btn-orange { background-color: #ff851b; border-color: #ff7701 }
.btn.btn-maroon { background-color: #d81b60; border-color: #ca195a }
.btn.btn-black { background-color: #111111; border-color: #000000 }
.btn.btn-blue { background-color: #0072bc; border-color: #005993 }
.btn.btn-gold { background-color: #fcd036; border-color: #fbc70e; color: #847428 }
.btn.btn-olive { background-color: #3d9970; border-color: #327f5d }
.btn.btn-white { background-color: #ffffff; border-color: #f0f0f0; color: #999999 }

.btn.btn-default:focus, .btn.btn-default:hover { background-color: #e7e7e7; border-color: #adadad }
.btn.btn-light-blue:focus, .btn.btn-light-blue:hover, .btn.btn-primary:focus, .btn.btn-primary:hover { background-color: #357ca5 }
.btn.btn-aqua:focus, .btn.btn-info:focus, .btn.btn-aqua:hover, .btn.btn-info:hover { background-color: #00a7d0 }
.btn.btn-green:focus, .btn.btn-green:hover, .btn.btn-success:focus, .btn.btn-success:hover { background-color: #008d4c }
.btn.btn-yellow:focus, .btn.btn-yellow:hover, .btn.btn-warning:focus, .btn.btn-warning:hover { background-color: #db8b0b }
.btn.btn-red:focus, .btn.btn-red:hover, .btn.btn-danger:focus, .btn.btn-danger:hover { background-color: #d33724 }
.btn.btn-gray:focus, .btn.btn-gray:hover { background-color: #dddddd }
.btn.btn-navy:focus, .btn.btn-navy:hover { background-color: #001a35 }
.btn.btn-teal:focus, .btn.btn-teal:hover { background-color: #30bbbb }
.btn.btn-purple:focus, .btn.btn-purple:hover { background-color: #555299 }
.btn.btn-orange:focus, .btn.btn-orange:hover { background-color: #ff7701 }
.btn.btn-maroon:focus, .btn.btn-maroon:hover { background-color: #ca195a }
.btn.btn-black:focus, .btn.btn-black:hover { background-color: #000000 }
.btn.btn-blue:focus, .btn.btn-blue:hover { background-color: #005993 }
.btn.btn-gold:focus, .btn.btn-gold:hover { background-color: #fbc70e }
.btn.btn-olive:focus, .btn.btn-olive:hover { background-color: #327f5d }
.btn.btn-white:focus, .btn.btn-white:hover { background-color: #f0f0f0 }

.btn.btn-default.disabled { opacity: 0.5 }
.btn.btn-light-blue.disabled, .btn.btn-primary.disabled { background-color: #80b4d3 }
.btn.btn-aqua.disabled, .btn.btn-info.disabled { background-color: #59d6f4 }
.btn.btn-green.disabled, .btn.btn-success.disabled { background-color: #59c593 }
.btn.btn-yellow.disabled, .btn.btn-warning.disabled { background-color: #f7be64 }
.btn.btn-red.disabled, .btn.btn-danger.disabled { background-color: #e9897e }
.btn.btn-gray.disabled { background-color: #e1e4e9 }
.btn.btn-navy.disabled { background-color: #596d82 }
.btn.btn-teal.disabled { background-color: #7edede }
.btn.btn-purple.disabled { background-color: #9795c6 }
.btn.btn-orange.disabled { background-color: #ffaf6a }
.btn.btn-maroon.disabled { background-color: #e56a97 }
.btn.btn-black.disabled { background-color: #646464 }

form .table .cell { vertical-align: top }
form .table .cell .btn { height: 3em; line-height: 3em; padding: 0 1% }

.btn-group .btn { margin: 0 0.2em }


.cell .btn-group .btn { background-color: transparent; border-color: transparent; padding: 0.7em 0 }
.cell .btn-group .btn:hover { background-color: transparent; opacity: 0.8 }
.cell .btn-group .btn.disabled { background-color: #f0f0f0; padding: 0.7em }
.cell .btn-group span { padding: 0.7em 0; display: inline-block }

.table .head .cell .btn-group .btn { padding: 0 }
.table .head .cell .btn-group span { padding: 0 }

.c2ell .btn-group .btn { margin: 0 0.5em } /*serve??*/


.toolbar .btn { height: 3em; line-height: 3em; padding: 0 1em }
.toolbar label { display: inline-block; font-weight: bold; font-size: 85%; line-height: 3em; padding: 0 0.5em }
.toolbar input { max-width: 50% }