/* Panels */
.im-panel{display: block; background:#fff; box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2);}
.im-panel > .head{display: flex; flex-flow: row nowrap; border-bottom: 1px solid #eee; align-items: center;}
.im-panel > .head > .title{display: block; flex:2 1 auto;  padding:10px 12px; color:#222; font-size:14px; line-height:16px; font-weight: bold;}
.im-panel > .head > .side{display: flex; flex:1 1 auto; padding:0px 12px; align-items: center; justify-content: flex-end;}
.im-panel > .head > .side > .cell{display: block; flex:0 0 auto; padding:0px 2px;}
.im-panel > .head > .side > .cell:last-child{padding-right:0px;}
.im-panel > .head > .side > .cell > .inline-btn{margin:0px 0px;}
.im-panel > .content{padding:12px 12px;}

.im-panel.rounded{border-radius:5px;}
.im-panel.no-padding > .content{padding:0px 0px;}

/* Notifications */

/* Panels */
.regular-panel{display: block; padding:25px 25px; background:#fff; box-shadow:0px 0px 2px rgba(0, 0, 0, 0.2);}

/* Form */
.im-form{width:100%;}
.im-form > .row{display:flex; flex-flow: row nowrap; width:100%; min-height:36px; padding:2px 0px; align-items: center;}
.im-form > .row > .name{display: block; flex:0 0 auto; width:140px; padding:3px 20px 3px 0px; font-size:14px; line-height:16px; color:#111;}
.im-form > .row > .name.top{align-self: flex-start;}
.im-form > .row > .name.top-offset{align-self: flex-start; padding-top:11px;}
.im-form > .row > .name.fullwidth{flex:1 1 auto; width:100%;}
.im-form > .row > .value{display: block; flex:1 1 auto; padding:3px 0px; font-size:14px; line-height:16px; color:#111;}
.im-form > .row > .value.fullwidth{flex:1 1 auto; width:100%;}
.im-form > .row > .value > .hint{display: block; padding:8px 1px 0px 1px; font-size:13px; line-height:17px; color:#888;}
.im-form > .divider{display: block; margin:25px 0px; height:1px; background: #ddd;}

.im-form.labels-center .row > .name{text-align: center;}
.im-form.labels-right .row > .name{text-align: right;}
.im-form.labels-left .row > .name{text-align: left;}
.im-form.labels-bold .row > .name{font-weight: bold;}
.im-form.labels-small .row > .name{width:140px;}
.im-form.labels-medium .row > .name{width:160px;}
.im-form.labels-large .row > .name{width:180px;}

.im-value.with-datepicker{position: relative;}
.im-value.with-datepicker > i{display: block; position: absolute; right:5px; top:0px; color:#777; cursor: pointer;}
.im-value.with-datepicker > .form-input + i{top:8px;}
.im-value.with-datepicker > i:hover{color:#555;}
.im-value.with-datepicker > .form-input{padding-right:40px;}

.im-value.with-ic{position: relative;}
.im-value.with-ic > i{display: block; position: absolute; right:5px; top:0px; color:#777;}
.im-value.with-ic > .form-input + i{top:8px;}
.im-value.with-ic > i:hover{color:#555;}
.im-value.with-ic > .form-input{padding-right:40px;}

.im-value.with-unit{position: relative;}
.im-value.with-unit > .unit{display: block; position: absolute; right:5px; top:8px; color:#777;}
.im-value.with-unit > .form-input{padding-right:40px;}

/* Controls */
.form-input, .form-select{display:inline-block; color:#222; font-size:14px; border:1px solid #ddd; background:#fff; border-radius:1px;}
.form-input::placeholder, .form-select::placeholder, .form-textarea::placeholder{color:#aaa;}
.form-input:hover, .form-select:hover, .form-textarea:hover{border-color:#ccc;}
.form-input:focus, .form-select:focus, .form-textarea:focus{border-color: #267e54; box-shadow: 0px 0px 1px #5fb68c;}
.form-input.error, .form-select.error, .form-textarea.error{color:#f70f17; border-color: #fe3038; box-shadow: 0px 0px 1px #ff8085;}
.form-input.error::placeholder, .form-select.error::placeholder, .form-textarea.error::placeholder{color:#f70f17;}

.form-input{height:32px; padding:0px 8px; font-size:14px; line-height:30px;}
.form-input.medium{height:38px; padding:0px 8px; font-size:14px; line-height:36px;}
.form-input.large{height:44px; padding:0px 8px; font-size:16px; line-height:42px;}


.form-select{height:32px; padding:4px 8px; font-size:14px; line-height:30px;}
.form-select.medium{height:38px; padding:4px 8px; font-size:14px; line-height:36px;}
.form-select.large{height:44px; padding:4px 8px; font-size:16px; line-height:42px;}

.form-select option, .form-select optgroup{padding:0px 5px; font-size:14px; color:#222; font-style: normal;}
.form-select > optgroup > option{padding:0px 10px;}
.form-textarea{display:inline-block; height:70px; padding:4px 8px; font-size:14px; line-height:22px; color:#333; border:1px solid #ddd; background:#fff; border-radius:1px; box-shadow:inset 0px 1px 2px rgba(0, 0, 0, 0.05);}

/* Control: size */
.form-input.w20, .form-select.w20, .form-textarea.w20{width:20px;}
.form-input.w30, .form-select.w30, .form-textarea.w30{width:30px;}
.form-input.w40, .form-select.w40, .form-textarea.w40{width:40px;}
.form-input.w50, .form-select.w50, .form-textarea.w50{width:50px;}
.form-input.w60, .form-select.w60, .form-textarea.w60{width:60px;}
.form-input.w70, .form-select.w70, .form-textarea.w70{width:70px;}
.form-input.w80, .form-select.w80, .form-textarea.w80{width:80px;}
.form-input.w90, .form-select.w90, .form-textarea.w90{width:90px;}
.form-input.w100, .form-select.w100, .form-textarea.w100{width:100px;}
.form-input.w110, .form-select.w110, .form-textarea.w110{width:110px;}
.form-input.w120, .form-select.w120, .form-textarea.w120{width:120px;}
.form-input.w130, .form-select.w130, .form-textarea.w130{width:130px;}
.form-input.w140, .form-select.w140, .form-textarea.w140{width:140px;}
.form-input.w150, .form-select.w150, .form-textarea.w150{width:150px;}
.form-input.w160, .form-select.w160, .form-textarea.w160{width:160px;}
.form-input.w170, .form-select.w170, .form-textarea.w170{width:170px;}
.form-input.w180, .form-select.w180, .form-textarea.w180{width:180px;}
.form-input.w190, .form-select.w190, .form-textarea.w190{width:190px;}
.form-input.w200, .form-select.w200, .form-textarea.w200{width:200px;}
.form-input.w250, .form-select.w250, .form-textarea.w250{width:250px;}
.form-input.w300, .form-select.w300, .form-textarea.w300{width:300px;}
.form-input.w350, .form-select.w350, .form-textarea.w350{width:350px;}
.form-input.w400, .form-select.w400, .form-textarea.w400{width:400px;}
.form-input.w450, .form-select.w450, .form-textarea.w450{width:450px;}

.form-textarea.h120{height:120px;}
.form-textarea.h150{height:150px;}

/* Control: style */
.form-input.fullwidth, .form-select.fullwidth, .form-textarea.fullwidth{display: block; width:100%;}
.form-input.center, .form-select.center, .form-textarea.center{text-align: center;}
.form-input.disabled, .form-select.disabled, .form-textarea.disabled{border-color:#ccc; background:#eee;}

.form-input.compact{padding:0px 5px;}

/* Buttons */
.inline-btn{display:inline-block; vertical-align: middle; overflow: hidden; height:34px; line-height:32px; margin:2px 2px; padding:0px 10px; text-decoration: none; color:#222; font-size:13px; border-radius:2px; border:1px solid #cacaca; border-bottom-width:1px; background-color:#fcfcfc; text-align: left; cursor:pointer;}
.inline-btn > i{display: inline-block; vertical-align: middle; color:#111; text-align: center; left:0px; top:-2px;}

/* Button: sizes */
.inline-btn.fullwidth{display: block; width:100%; margin-left:0px; margin-right:0px;}
.inline-btn.xs{height:22px; line-height:21px; font-size:12px; border-bottom-width:1px; border-radius: 1px;}
.inline-btn.small{height:26px; line-height:24px; font-size:13px; border-radius: 1px;}
.inline-btn.medium{height:30px; line-height:28px; font-size:13px; border-radius: 2px;}
.inline-btn.large{height:38px; line-height:36px; font-size:14px; border-radius: 2px; padding:0px 17px;}

.inline-btn.fixed-50{width:50px;}
.inline-btn.fixed-75{width:75px;}
.inline-btn.fixed-100{width:100px;}
.inline-btn.fixed-125{width:125px;}
.inline-btn.fixed-150{width:150px;}

/* Button: icons */
.inline-btn.with-icon.xs{padding-left:6px; padding-right:10px;}
.inline-btn.xs.with-icon.xs > i{width:16px; height:20px; line-height:20px; font-size:10px;}
.inline-btn.with-icon.small{padding-left:6px; padding-right:10px;}
.inline-btn.with-icon.small > i{width:16px; height:24px; line-height:24px; font-size:12px;}
.inline-btn.with-icon.medium{padding-left:6px; padding-right:10px;}
.inline-btn.with-icon.medium > i{width:20px; height:28px; line-height:28px; font-size:14px;}
.inline-btn.with-icon.large{padding-left:6px; padding-right:12px;}
.inline-btn.with-icon.large > i{width:24px; height:36px; line-height:36px; font-size:16px;}

.inline-btn.iconic{padding-left:0px; padding-right:0px; text-align: center;}
.inline-btn.iconic.xs > i{width:22px; height:20px; line-height:20px; font-size:10px;}
.inline-btn.iconic.small > i{width:26px; height:24px; line-height:24px; font-size:12px;}
.inline-btn.medium.iconic > i{width:30px; height:28px; line-height:28px; font-size:13px;}
.inline-btn.iconic.large > i{width:38px; height:36px; line-height:36px; font-size:16px;}

/* Button: aligns */
.inline-btn.left{text-align: left;}
.inline-btn.center{text-align: center;}
.inline-btn.right{text-align: right;}

/* Buttons: colors */
.inline-btn.teal{background-color:#26a69a; border-color:#00897b; color:#fff;}
.inline-btn.teal > i{color:#fff;}
.inline-btn.teal:hover{background-color:#009688; border-color:#00796b;}

.inline-btn.red{background-color:#ef5350; border-color:#e53935; color:#fff;}
.inline-btn.red > i{color:#fff;}
.inline-btn.red:hover{background-color:#e53935; border-color:#c62828;}

.inline-btn.green{background-color:#2d8d5f; border-color:#23764e; color:#fff;}
.inline-btn.green > i{color:#fff;}
.inline-btn.green:hover{background-color:#288156; border-color:#22744d;}

.inline-btn.purple{background-color:#7e57c2; border-color:#5e35b1; color:#fff;}
.inline-btn.purple > i{color:#fff;}
.inline-btn.purple:hover{background-color:#673ab7; border-color:#512da8;}

.inline-btn.indigo{background-color:#5c6bc0; border-color:#3949ab; color:#fff;}
.inline-btn.indigo > i{color:#fff;}
.inline-btn.indigo:hover{background-color:#3f51b5; border-color:#303f9f;}

.inline-btn.blue{background-color:#1e7bbe; border-color:#105f98; color:#fff;}
.inline-btn.blue > i{color:#fff;}
.inline-btn.blue:hover{background-color:#1d72af; border-color:#165b8c;}

.inline-btn.orange{background-color:#f7a035; border-color:#f78535; color:#fff;}
.inline-btn.orange > i{color:#fff;}
.inline-btn.orange:hover{background-color:#ee9b35; border-color:#f78535;}

/* Tables: regular-table */
.regular-table{border:0px;}
.regular-table.fullwidth{width:100%;}
.regular-table tr.header > td{height:36px; padding:0px 10px; font-size:13px; line-height:16px; color:#333; font-weight: bold; border-bottom:2px solid #ccc; border-left:0px; border-right:0px; cursor:default;}
.regular-table tr.row > td{height:36px; padding:0px 10px; color:#000; font-size:13px; line-height:16px; border:1px solid #ddd; border-left:0px; border-right:0px; cursor:default;}
.regular-table tr.row:hover > td{background:#f4f4f4;}

.regular-table tr > td.center{text-align: center;}
.regular-table tr > td.right{text-align: right;}
.regular-table tr > td > .link{color:#000;}

.regular-table tr.header > td.break, .regular-table tr.row > td.break{overflow-wrap: break-word; word-wrap: break-word;}
.regular-table tr.row.break-all > td{overflow-wrap: break-word; word-wrap: break-word; word-break: break-all;}

.regular-table.row-borders tr.row > td{border:1px solid #e8e8e8;}
.regular-table.header-borders tr.header > td{border:1px solid #e2e2e2; background: #f2f2f2;}

/* Tables: flex-table */
/* Flex table */
.im-flex.fullwidth{width:100%;}
.im-flex > .head{display:flex; flex-flow: row nowrap; width:100%; border-bottom:2px solid #ccc; align-items: center;}
.im-flex > .head > .cell{display: block; flex:0 0 auto; padding:8px 7px; font-size:13px; line-height:16px; color:#333; font-weight: bold; cursor:default;}

.im-flex > .row{display:flex; flex-flow: row nowrap; width:100%; min-height:36px; align-items: center; border-bottom:1px solid #ddd;}
.im-flex > .row.mobile{display: none;}
.im-flex > .row > .cell{display: block; flex:0 0 auto; padding:3px 7px; font-size:13px; line-height:18px; color:#000;}
.im-flex > .row:hover{background:#f4f4f4;}

.im-flex  > .head > .cell.auto, .im-flex  > .row > .cell.auto{flex: 1 1 auto;}
.im-flex  > .head > .cell.left, .im-flex  > .row > .cell.left{text-align: left;}
.im-flex  > .head > .cell.center, .im-flex  > .row > .cell.center{text-align: center;}
.im-flex  > .head > .cell.right, .im-flex  > .row > .cell.right{text-align: right;}

/* Table sizes */
.regular-table td.x1, .im-flex .cell.x1{width:1%;}
.regular-table td.x2, .im-flex .cell.x2{width:2%;}
.regular-table td.x3, .im-flex .cell.x3{width:3%;}
.regular-table td.x4, .im-flex .cell.x4{width:4%;}
.regular-table td.x5, .im-flex .cell.x5{width:5%;}
.regular-table td.x6, .im-flex .cell.x6{width:6%;}
.regular-table td.x7, .im-flex .cell.x7{width:7%;}
.regular-table td.x8, .im-flex .cell.x8{width:8%;}
.regular-table td.x9, .im-flex .cell.x9{width:9%;}
.regular-table td.x10, .im-flex .cell.x10{width:10%;}
.regular-table td.x11, .im-flex .cell.x11{width:11%;}
.regular-table td.x12, .im-flex .cell.x12{width:12%;}
.regular-table td.x13, .im-flex .cell.x13{width:13%;}
.regular-table td.x14, .im-flex .cell.x14{width:14%;}
.regular-table td.x15, .im-flex .cell.x15{width:15%;}
.regular-table td.x16, .im-flex .cell.x16{width:16%;}
.regular-table td.x17, .im-flex .cell.x17{width:17%;}
.regular-table td.x18, .im-flex .cell.x18{width:18%;}
.regular-table td.x19, .im-flex .cell.x19{width:19%;}
.regular-table td.x20, .im-flex .cell.x20{width:20%;}
.regular-table td.x21, .im-flex .cell.x21{width:21%;}
.regular-table td.x22, .im-flex .cell.x22{width:22%;}
.regular-table td.x23, .im-flex .cell.x23{width:23%;}
.regular-table td.x24, .im-flex .cell.x24{width:24%;}
.regular-table td.x25, .im-flex .cell.x25{width:25%;}
.regular-table td.x30, .im-flex .cell.x30{width:30%;}
.regular-table td.x35, .im-flex .cell.x35{width:35%;}
.regular-table td.x40, .im-flex .cell.x40{width:40%;}
.regular-table td.x45, .im-flex .cell.x45{width:45%;}
.regular-table td.x50, .im-flex .cell.x50{width:50%;}
.regular-table td.x55, .im-flex .cell.x55{width:55%;}
.regular-table td.x60, .im-flex .cell.x60{width:60%;}
.regular-table td.x65, .im-flex .cell.x65{width:65%;}
.regular-table td.x70, .im-flex .cell.x70{width:70%;}
.regular-table td.x75, .im-flex .cell.x75{width:75%;}
.regular-table td.x80, .im-flex .cell.x80{width:80%;}
.regular-table td.x85, .im-flex .cell.x85{width:85%;}
.regular-table td.x90, .im-flex .cell.x90{width:90%;}
.regular-table td.x95, .im-flex .cell.x95{width:95%;}
.regular-table td.x100, .im-flex .cell.x100{width:100%;}

.regular-table td.fixed-40, .im-flex .cell.fixed-40{width:40px;}
.regular-table td.fixed-50, .im-flex .cell.fixed-50{width:50px;}
.regular-table td.fixed-60, .im-flex .cell.fixed-60{width:60px;}
.regular-table td.fixed-70, .im-flex .cell.fixed-70{width:70px;}
.regular-table td.fixed-80, .im-flex .cell.fixed-80{width:80px;}
.regular-table td.fixed-90, .im-flex .cell.fixed-90{width:90px;}
.regular-table td.fixed-100, .im-flex .cell.fixed-100{width:100px;}
.regular-table td.fixed-110, .im-flex .cell.fixed-110{width:110px;}
.regular-table td.fixed-120, .im-flex .cell.fixed-120{width:120px;}
.regular-table td.fixed-130, .im-flex .cell.fixed-130{width:130px;}
.regular-table td.fixed-140, .im-flex .cell.fixed-140{width:140px;}
.regular-table td.fixed-150, .im-flex .cell.fixed-150{width:150px;}
.regular-table td.fixed-160, .im-flex .cell.fixed-160{width:160px;}
.regular-table td.fixed-170, .im-flex .cell.fixed-170{width:170px;}
.regular-table td.fixed-180, .im-flex .cell.fixed-180{width:180px;}
.regular-table td.fixed-190, .im-flex .cell.fixed-190{width:190px;}
.regular-table td.fixed-200, .im-flex .cell.fixed-200{width:200px;}
.regular-table td.fixed-210, .im-flex .cell.fixed-210{width:210px;}
.regular-table td.fixed-220, .im-flex .cell.fixed-220{width:220px;}
.regular-table td.fixed-230, .im-flex .cell.fixed-230{width:230px;}
.regular-table td.fixed-240, .im-flex .cell.fixed-240{width:240px;}
.regular-table td.fixed-250, .im-flex .cell.fixed-250{width:250px;}

/* Tables: mobile-table */
.mobile-table > .record{display: block; margin:0px 0px 20px 0px; box-shadow:0px 0px 3px rgba(0, 0, 0, 0.15); background:#fff;}
.mobile-table > .record:last-child{margin-bottom: 0px;}
.mobile-table > .record > .row{display: flex; flex-flow:row nowrap; justify-content: center; border-bottom: 1px solid #e5e5e5;}
.mobile-table > .record > .row:last-child{border-bottom: 0px;}
.mobile-table > .record > .row > .name{display: block; flex:0 0 auto; width:130px; padding:8px 10px; font-size:14px; line-height:17px; color:#333; font-weight: bold; border-right:1px solid #e5e5e5; cursor: default;}
.mobile-table > .record > .row > .value{display: block; flex:1 1 auto; padding:8px 10px; color:#000; font-size:14px; line-height:17px;}
.mobile-table > .record > .row:hover{background:#f2f2f2; border-bottom-color: #ddd;}
.mobile-table > .record > .row:hover > .name{border-right-color:#ddd;}

.mobile-table.fixed-70 > .record > .row > .name{width:70px;}
.mobile-table.fixed-80 > .record > .row > .name{width:80px;}
.mobile-table.fixed-90 > .record > .row > .name{width:90px;}
.mobile-table.fixed-100 > .record > .row > .name{width:100px;}
.mobile-table.fixed-110 > .record > .row > .name{width:110px;}
.mobile-table.fixed-120 > .record > .row > .name{width:120px;}
.mobile-table.fixed-130 > .record > .row > .name{width:130px;}
.mobile-table.fixed-140 > .record > .row > .name{width:140px;}
.mobile-table.fixed-150 > .record > .row > .name{width:150px;}
.mobile-table.fixed-160 > .record > .row > .name{width:160px;}
.mobile-table.fixed-170 > .record > .row > .name{width:170px;}
.mobile-table.fixed-180 > .record > .row > .name{width:180px;}
.mobile-table.fixed-190 > .record > .row > .name{width:190px;}
.mobile-table.fixed-200 > .record > .row > .name{width:200px;}

@media all and  (max-width: 400px) {
    .mobile-table > .record > .row > .name{width:50% !important;}
}

/* Global: margins */
.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-15{margin-top:15px;}
.mt-20{margin-top:20px;}
.mt-25{margin-top:25px;}
.mt-30{margin-top:30px;}

.mr-5{margin-right:5px;}
.mr-10{margin-right:10px;}
.mr-15{margin-right:15px;}
.mr-20{margin-right:20px;}
.mr-25{margin-right:25px;}
.mr-30{margin-right:30px;}

.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-15{margin-bottom:15px;}
.mb-20{margin-bottom:20px;}
.mb-25{margin-bottom:25px;}
.mb-30{margin-bottom:30px;}

.ml-5{margin-left:5px;}
.ml-10{margin-left:10px;}
.ml-15{margin-left:15px;}
.ml-20{margin-left:20px;}
.ml-25{margin-left:25px;}
.ml-30{margin-left:30px;}

.no-margin{margin:0px !important;}
.no-mt{margin-top:0px !important;}
.no-mr{margin-right:0px !important;}
.no-mb{margin-bottom:0px !important;}
.no-ml{margin-left:0px !important;}

/* Global: padding */
.no-padding{padding:0px 0px;}

/* 
    Global: width/height
    Bad thing and should be used only for tables, forms and controls (ex: .im-form with-500, .im-textarea height-120, .im-table row > .cell width-120)
*/
.width-10{width:10px;}
.width-20{width:20px;}
.width-30{width:30px;}
.width-40{width:40px;}
.width-50{width:50px;}
.width-60{width:60px;}
.width-70{width:70px;}
.width-85{width:80px;}
.width-90{width:90px;}
.width-100{width:100px;}
.width-110{width:110px;}
.width-120{width:120px;}
.width-130{width:130px;}
.width-140{width:140px;}
.width-150{width:150px;}
.width-160{width:160px;}
.width-170{width:170px;}
.width-180{width:180px;}
.width-190{width:190px;}
.width-200{width:200px;}
.width-210{width:210px;}
.width-220{width:220px;}
.width-230{width:230px;}
.width-240{width:240px;}
.width-250{width:250px;}
.width-300{width:300px;}
.width-400{width:400px;}
.width-500{width:500px;}
.width-600{width:600px;}
.width-700{width:700px;}
.width-800{width:800px;}
.width-900{width:900px;}
.width-1000{width:1000px;}

.height-10{height:10px;}
.height-20{height:20px;}
.height-30{height:30px;}
.height-40{height:40px;}
.height-50{height:50px;}
.height-60{height:60px;}
.height-70{height:70px;}
.height-80{height:80px;}
.height-90{height:90px;}
.height-100{height:100px;}
.height-100{height:100px;}
.height-110{height:110px;}
.height-120{height:120px;}
.height-130{height:130px;}
.height-140{height:140px;}
.height-150{height:150px;}
.height-160{height:160px;}
.height-170{height:170px;}
.height-180{height:180px;}
.height-190{height:190px;}
.height-200{height:200px;}
.height-210{height:210px;}
.height-220{height:220px;}
.height-230{height:230px;}
.height-240{height:240px;}
.height-250{height:250px;}