/* Global */
.im-bold {font-weight: bold;}
.im-hidden {display: none;}
.im-no-selection {text-align: center;}
.im-break-text {overflow-wrap: break-word; word-wrap: break-word; word-break: break-all;}

/* 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 > .im-button {margin: 0px 0px;}
.im-panel > .content {padding: 12px 12px;}
.im-panel > .actions {padding: 6px 12px; border-top: 1px solid #ddd; background: #f5f5f5;}
.im-panel > .actions.left {text-align: left;}
.im-panel > .actions.center {text-align: center;}
.im-panel > .actions.right {text-align: right;}

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

/* Tabs */
.im-tabs {display: flex; flex-flow: row nowrap; width: 100%; align-items: center; border-bottom: 1px solid #e3e3e3; font-size: 0px;}
.im-tabs > .tab {display: inline-block; vertical-align: middle; position: relative; overflow: hidden; height: 36px; line-height: 35px; padding: 0px 20px; font-size: 14px; font-weight: bold; color: #888; cursor: pointer; border-top-left-radius: 1px; border-top-right-radius: 1px; border: 1px solid #ccc; border-left-width: 0px; border-bottom-width: 0px; background: #f5f5f5;}
.im-tabs > .tab:first-child {border-left-width: 1px;}
.im-tabs > .tab:hover {color: #444; border-color: #bbb; background: #f9f9f9;}
.im-tabs > .tab.selected {color: #000; border-top: 3px solid #2d8d5f; line-height: 31px; background: #fff;}

/* Forms */
.im-form {width: 100%;}
.im-form > .row {display: flex; flex-flow: row nowrap; width: 100%; min-height: 32px; padding: 3px 0px; align-items: center;}
.im-form > .row:first-child {padding-top: 0px;}
.im-form > .row > .name {display: block; flex: 0 0 auto; width: 150px; padding: 0px 20px 0px 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: 8px;}
.im-form > .row > .name.fullwidth {flex: 1 1 auto; width: 100%;}
.im-form > .row > .value {display: block; flex: 1 1 auto; padding: 0px 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 2px 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.bold-labels .row > .name {font-weight: bold;}

.im-form.narrow-labels .row > .name {width: 120px;}
.im-form.medium-labels .row > .name {width: 150px;}
.im-form.wide-labels .row > .name {width: 180px;}

/* Controls */
.im-input {display: inline-block; width: 200px; height: 32px; line-height: 30px; padding: 0px 8px; color: #333; font-size: 14px; border: 1px solid #ddd; background: #fff; border-radius: 1px; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);}

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

.im-textarea {display: block; height: 90px; 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: states */
.im-input:hover, .im-select:hover, .im-textarea:hover {border-color: #c5c5c5;}
.im-input:focus, .im-select:focus, .im-textarea:focus {border-color: #2c9362;}
.im-input::placeholder, .im-textarea::placeholder {color: #aaa;}
.im-input:disabled, .im-select:disabled, .im-textarea:disabled {border-color: #ccc; background: #eee;}

.im-input.error, .im-select.error, .im-textarea.error {color: #e32229; border-color: #ec4148; box-shadow: 0px 0px 1px #ff8085;}
.im-input.error::placeholder, .im-textarea.error::placeholder {color: #e32229;}

.im-input.fullwidth, .im-select.fullwidth, .im-textarea.fullwidth {display: block; width: 100%;}
.im-input.center, .im-select.center, .im-textarea.center {text-align: center;}
.im-input.left, .im-select.left, .im-textarea.left {text-align: left;}
.im-input.right, .im-select.right, .im-textarea.right {text-align: right;}

/* Control: sizes */
.im-input.xs, .im-select.xs, .im-textarea.xs {width: 50px;}
.im-input.small, .im-select.small, .im-textarea.small {width: 120px;}
.im-input.medium, .im-select.medium, .im-textarea.medium {width: 220px;}
.im-input.large, .im-select.large, .im-textarea.large {width: 340px;}

/* Buttons */
.im-button {display: inline-block; vertical-align: middle; overflow: hidden; height: 32px; line-height: 30px; margin: 2px 2px; padding: 0px 10px; text-decoration: none; color: #111; font-size: 13px; border-radius: 2px; border: 1px solid #c5c5c5; border-bottom-width: 1px; background-color: #fcfcfc; text-align: left; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.im-button > i {display: inline-block; vertical-align: top; height: 30px; line-height: 30px; margin-right: 4px; font-size: 14px;}
.im-button:hover {background-color: #f2f2f2;}

/* Sizes */
.im-button.fullwidth {display: block; width: 100%; margin-left: 0px; margin-right: 0px;}

.im-button.xs {height: 23px; line-height: 21px; font-size: 12px; border-radius: 1px;}
.im-button.xs > i {height: 21px; line-height: 31px; margin-right: 3px; font-size: 10px;}

.im-button.small {height: 25px; line-height: 23px; font-size: 12px; border-radius: 1px;}
.im-button.small > i {height: 23px; line-height: 23px; margin-right: 3px; font-size: 12px;}

.im-button.medium {height: 28px; line-height: 26px; font-size: 13px; border-radius: 2px;}
.im-button.medium > i {height: 26px; line-height: 26px; margin-right: 3px; font-size: 13px;}

.im-button.large {height: 32px; line-height: 30px; font-size: 14px; border-radius: 2px; padding-left: 12px; padding-right: 12px;}
.im-button.large > i {height: 30px; line-height: 30px; margin-right: 4px; font-size: 14px;}

.im-button.xl {height: 36px; line-height: 34px; font-size: 14px; border-radius: 2px; padding-left: 12px; padding-right: 12px;}
.im-button.xl > i {height: 34px; line-height: 34px; margin-right: 4px; font-size: 16px;}

.im-button.xxl {height: 40px; line-height: 38px; font-size: 15px; border-radius: 2px; padding-left: 14px; padding-right: 14px;}
.im-button.xxl > i {height: 38px; line-height: 38px; margin-right: 4px; font-size: 16px;}

/* Iconic */
.im-button.icon {padding: 0px 0px; text-align: center}
.im-button.icon > i {height: 32px; line-height: 32px; margin: 0px 0px; font-size: 14px; text-align: center;}

.im-button.icon.xs {width: 23px; height: 21px;}
.im-button.icon.xs > i {height: 21px; line-height: 21px; font-size: 10px;}

.im-button.icon.small {width: 25px; height: 23px;}
.im-button.icon.small > i {height: 23px; line-height: 23px; font-size: 12px;}

.im-button.icon.medium {width: 28px; height: 28px;}
.im-button.icon.medium > i {height: 26px; line-height: 26px; font-size: 12px;}

.im-button.icon.large {width: 32px; height: 32px;}
.im-button.icon.large > i {height: 30px; line-height: 30px; font-size: 14px;}

.im-button.icon.xl {width: 36px; height: 36px;}
.im-button.icon.xl > i {height: 34px; line-height: 34px; font-size: 14px;}

.im-button.icon.xxl {width: 40px; height: 40px;}
.im-button.icon.xxl > i {height: 38px; line-height: 38px; font-size: 16px;}

/* Buttons: colors */
.im-button.teal {background-color: #26a69a; border-color: #00897b; color: #fff;}
.im-button.teal:hover {background-color: #009688; border-color: #00796b;}

.im-button.green {background-color: #2d8d5f; border-color: #23764e; color: #fff;}
.im-button.green:hover {background-color: #288156; border-color: #22744d;}

.im-button.purple {background-color: #7e57c2; border-color: #5e35b1; color: #fff;}
.im-button.purple:hover {background-color: #673ab7; border-color: #512da8;}

.im-button.blue {background-color: #1e7bbe; border-color: #105f98; color: #fff;}
.im-button.blue:hover {background-color: #1d72af; border-color: #165b8c;}

.im-button.red {background-color: #ef5350; border-color: #e53935; color: #fff;}
.im-button.red:hover {background-color: #e53935; border-color: #c62828;}

.im-button.indigo {background-color: #5c6bc0; border-color: #3949ab; color: #fff;}
.im-button.indigo:hover {background-color: #3f51b5; border-color: #303f9f;}

.im-button.orange {background-color: #f7a035; border-color: #f78535; color: #fff;}
.im-button.orange:hover {background-color: #ee9b35; border-color: #f78535;}

/* Outline */
.im-button.outline {background: #fff;}
.im-button.outline.transparent {background: transparent;}

.im-button.outline.teal {color: #00897b;}
.im-button.outline.teal:hover {background-color: #26a69a; color: #fff;}

.im-button.outline.green {color: #23764e;}
.im-button.outline.green:hover {background-color: #2d8d5f; color: #fff;}

.im-button.outline.purple {color: #5e35b1;}
.im-button.outline.purple:hover {background-color: #7e57c2; color: #fff;}

.im-button.outline.blue {color: #105f98;}
.im-button.outline.blue:hover {background-color: #1e7bbe; color: #fff;}

.im-button.outline.red {color: #e53935;}
.im-button.outline.red:hover {background-color: #ef5350; color: #fff;}

.im-button.outline.indigo {color: #3949ab;}
.im-button.outline.indigo:hover {background-color: #5c6bc0; color: #fff;}

.im-button.outline.orange {color: #f78535;}
.im-button.outline.orange:hover {background-color: #f7a035; color: #fff;}

/* Button: other */
.im-button.left {text-align: left;}
.im-button.center {text-align: center;}
.im-button.right {text-align: right;}
.im-button.bold {font-weight: bold;}
.im-button.upper {text-transform: uppercase;}
.im-button.lower {text-transform: lowercase;}

/* Regular table */
.im-table.fullwidth {width: 100%;}
.im-table tr.head > th {height: 36px; padding: 0px 7px; font-size: 13px; line-height: 16px; color: #333; font-weight: bold; border-bottom: 2px solid #ccc; text-align: left; cursor: default;}
.im-table tr.head.with-borders > th {border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; background: #f2f2f2;}

.im-table tr.row > td {height: 36px; padding: 0px 7px; color: #000; font-size: 13px; line-height: 16px; border-bottom: 1px solid #ddd; cursor: default;}
.im-table tr.row.with-borders {border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;}
.im-table tr.mobile {display: none;}
.im-table tr.row:hover > td {background: #f4f4f4;}

.im-table tr.head > th.left, .im-table tr.row > td.left {text-align: left;}
.im-table tr.head > th.center, .im-table tr.row > td.center {text-align: center;}
.im-table tr.head > th.right, .im-table tr.row > td.right {text-align: right;}
.im-table tr.head > th.top, .im-table tr.row > td.top {vertical-align: top;}

/* 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: 16px; color: #000;}
.im-flex .row:hover {background: #f4f4f4;}

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

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

.im-table td.x33, .im-table th.x33, .im-flex .cell.x33 {width: 33.33%;}
.im-table td.fullwidth, .im-table th.fullwidth, .im-flex .cell.fullwidth {width: 100%;}

/* 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: dimensions
    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;}
.height-300 {height: 300px;}
.height-400 {height: 400px;}
.height-500 {height: 500px;}