h1 {
    font-size: 1.2rem;
}

.app .content {
    padding-top: 85px;
}

img.small-logo {
    margin-right: 10px;
}

.back::before {
    content: '\25c1\00a0\00a0';
}

fieldset.form-group {
    max-width: 600px;
}

.flash-container {
    margin: 5px 0 10px 0;
    text-align: center
}

.flash {
    background-color: #fe974b;
    color: #fff;
    padding: 6px 12px 6px 12px;
    border-radius: 0.25rem;
}

.navigation-bar {
    margin-bottom: 10px;
}

.directional-button-bar {
    margin-bottom: 20px;
}

.auth-error {
    color: red
}

#shape_definition_fields {
    margin: 10px;
    border: 2px inset;
    padding: 10px;
    max-width: 580px;
}

td.action {
    padding: 0.2rem;
}

td .btn {
    min-width: 100%;
}

.btn {
    font-weight: bolder;
}

.sidebar-menu li a {
    font-weight: bolder;
}

.btn-primary {
    min-width: 100px !important;
}

/* datatables */

table.dataTable tbody td {
    padding: 4px 10px !important
}

/* data soucrces */

.data-source-panel {
    display: flex;
    border-bottom: 1px solid #ced4da;
    margin-bottom: 20px;
}

/* zones */

.zones-panel {
    display: flex;
    margin-bottom: 20px;
    min-height: 500px;
}

.zone-panel-sub {
    display: flex;
    gap: 40px;
}

.zone-selector {
    background-color: #f8f8f8;
    border-right: 1px solid var(--cyan);
    margin: 0 40px 0 0;
}

.zone-selector h1 {
    position: relative;
    left: 1px;
    font-size: 24px;
    padding: 10px 100px 10px 10px;
    cursor: pointer;
    background-color: #f8f8f8;
    border-right: 1px solid var(--cyan);
    color: #c0c0c0;
    white-space: nowrap;
}

.zone-selector h1.selected {
    color: var(--cyan);
    background-color: white;
    border-top: 1px solid var(--cyan);
    border-bottom: 1px solid var(--cyan);
    border-right: 1px solid white;
}

.zone-panel {
    margin: 20px;
}

.zone-panel h1 {
    margin-bottom: 30px;
}

.coverage-elements-per-risk-type {
    margin-bottom: 40px
}

.coverage-elements-per-risk-type-header {
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--cyan)
}

.required {
    border: 1px solid red;
}

/* zone elements */

.coverage-elements-per-risk-type-rows div span label {
    display: none;
}

.coverage-elements-per-risk-type-rows div:first-child span label {
    display: flex;
}

/* button bar */

.bottom-button-bar {
    margin-top: 50px;
    text-align: center;
}

/* custom fields */

.input-MultiCheckboxField ul {
    height: auto;
    list-style: none;
    margin-left: 0;
}

.input-RadioField ul {
    height: auto;
    list-style: none;
    margin-left: 0;
}

.input-BooleanField label {
    display: inline-block;
    margin-right: 20px;
}

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

.form-inline-label {
    display: inline-block;
    width: 200px;
}

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

.form-inline-block .input-SelectField select {
    width: 150px;
}

.coverage_element_page .input-IntegerField,
.coverage_element_page .input-DecimalField {
    width: 100px;
}

.coverage_element_page .input-IntegerField input,
.coverage_element_page .input-DecimalField input {
    width: 100px !important;
}

.zone_page .input-IntegerField,
.zone_page .input-DecimalField {
    width: 100px;
}

.zone_page .input-IntegerField input,
.zone_page .input-DecimalField input {
    width: 100px !important;
}

.coverage_element_name {
    border-top: 1px solid rgb(206, 212, 218);
    margin-right: 10px;
    display: inline-block;
    width: 200px;
    min-height: 24px;
    overflow: hidden;
    white-space: nowrap;
}

.coverage_element_order_number {
    border-top: 1px solid rgb(206, 212, 218);
    margin-right: 10px;
    display: inline-block;
    width: 25px;
    min-height: 24px;
    overflow: hidden;
    white-space: nowrap;
}

.coverage-element-row span label {
    display: none;
}

.coverage-element-row-visible span label {
    display: flex;
}

/* settings tab */

.settings-header {
    color: var(--cyan);
    margin-top: 20px;
    margin-bottom: 20px;
}

.settings-separator {
    margin-top: 20px;
    border-bottom: 1px solid #c0c0c0;
}

/* calculation tab */

.edit-calculation-comment {
    margin: 20px auto;
    font-size: 20px;
    width: 500px;
}

/* option with empty value should be shown as grey */

select.inherited[data-chosen=""] {
    color: #c0c0c0
}

select.inherited option {
    color: black
}

select.inherited option[value=""] {
    color: #c0c0c0
}

/* simple map */

.simple-map-container {
    display: flex;
}

.simple-map {
    height: 600px;
    width: 1000px;
    max-width: 100%;
    flex-grow: 1;
}

.simple-map-legend {
    margin: 0 0 0 20px;
    width: 300px;
}

.simple-map-legend-color {
    display: inline-block;
    border: 1px solid #c0c0c0;
    width: 60px;
    height: 30px;
}

.simple-map-legend-label {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    vertical-align: top;
}

/* open layers*/

.ol-zoom-in {
    position: absolute;
    top: 45px;
    left: 10px;
    height: 30px;
    width: 30px;
}

.ol-zoom-out {
    position: absolute;
    top: 80px;
    left: 10px;
    height: 30px;
    width: 30px;
}

.ol-zoom-extent button {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 30px;
    width: 30px;
    background: url('images/home-reset.png') no-repeat center;
    background-size: 20px 20px;
    background-color: #f0f0f0;
}

.ol-rotate {
    display: none
}

.ol-attribution {
    position: absolute;
    right: 16px;
    bottom: 16px;
    font-size: 12px;
    background-color: white;
    padding: 4px;
    opacity: 0.8;
}

.ol-attribution ul {
    margin: 0;
    padding: 0;
}

.ol-attribution button {
    display: none;
}

.ol-attribution a {
    color: blue;
}

.ol-attribution ul {
    list-style: none
}

.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 100px;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer a {
    text-decoration: none;
}

.ol-popup-closer:after {
    content: "✖";
    text-decoration: none;

}

/* tabs */

.tab-content {
    overflow: hidden;
    white-space: nowrap;
}

.tab-content .tab-pane {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

/* view page - intro */

.flex {
    display: flex;
}

.view-intro-details {
    justify-content: space-between;
    margin-right: 30px;
}

.view-labels {
    color: var(--cyan)
}

.btn-view-info {
    position: relative;
    top: -3px;
    background-image: url(./images/info-circle.png);
    background-size: cover;
    border: none;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    padding: 5px;
    background-color: inherit;

}

.btn-view-info:focus,
.btn-view-info:hover {
    border: none;
}

/* tooltip */
/* generator: http://www.menucool.com/tooltip/css-tooltip */
/* change? add prefix .insurance- */

.insurance-tooltip {
    display: inline-block;
    position: absolute;
    text-align: left;
}

.insurance-tooltip div {
    white-space: normal;
}

.insurance-tooltip .right {
    min-width: 300px;
    top: 50%;
    left: 100%;
    margin-left: 20px;
    transform: translate(0, -50%);
    padding: 10px 15px;
    color: #444444;
    background-color: white;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    display: none;
}

.insurance-tooltip:hover .right {
    display: block;
}

.insurance-tooltip .right i {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -12px;
    width: 12px;
    height: 24px;
    overflow: hidden;
}

.insurance-tooltip .right i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translate(50%, -50%) rotate(-45deg);
    background-color: white;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.insurance-tooltip .left {
    min-width: 200px;
    top: 50%;
    right: 100%;
    margin-right: 20px;
    transform: translate(0, -50%);
    padding: 10px 20px;
    color: #444444;
    background-color: white;
    font-weight: normal;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    display: none;
}

.insurance-tooltip:hover .left {
    display: block;
}

.insurance-tooltip .left i {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -12px;
    width: 12px;
    height: 24px;
    overflow: hidden;
}

.insurance-tooltip .left i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    top: 50%;
    background-color: white;
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.insurance-tooltip .bottom {
    min-width: 200px;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px 20px;
    color: #444444;
    background-color: white;
    font-weight: normal;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    display: none;
}

.insurance-tooltip:hover .bottom {
    display: block;
}

.insurance-tooltip .bottom i {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 12px;
    overflow: hidden;
    background-color: white;
}

.insurance-tooltip .bottom i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    transform: translate(-50%, 50%) rotate(45deg);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.table-tooltip .btn-view-info {
    top: 1px;
}

/* Overflow container tooltip */
.table-tooltip {
    display: inline-block;
    position: relative;
}

.table-tooltip div {
    white-space: normal;
    font-weight: lighter;
}

.table-tooltip span {
    font-weight: bold;
}

.table-tooltip .right {
    width: 300px;
    top: 50%;
    left: 100%;
    margin-left: 20px;
    transform: translate(0, -5%);
    padding: 10px 15px;
    color: #444444;
    background-color: white;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    display: none;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.table-tooltip:hover .right {
    display: block;
    z-index: 99999999;
}

.view-intro-body {
    column-gap: 20px;
    margin-top: 15px;
}

.view-intro-body ul {
    padding: 5px;
}

.view-intro-body ul li {
    list-style: none;
    font-size: 13px;
    font-weight: lighter;
}

.view-intro-title {
    width: 100%;
    background-color: #e4e8ec;
    color: black;
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;

}

.view-indexes-column {
    flex-direction: column;
    max-width: 100%;
}

.view-indexes-column>* {
    margin-bottom: 10px;
}

.view-indexes-wrapper>* {
    margin-bottom: 8px;
    padding: 5px;
}

.view-indexes-information {
    justify-content: space-between;
    margin-right: 50px;
}

.view-datasource-index {
    margin-top: 10px;
    flex-direction: column;
}

.view-datasource-index>* {
    margin-bottom: 20px;
}

.intro_index_detail {
    margin-top: 15px;
}

#view_risk_type {
    margin: 15px;
}

.view-intro-table-wrapper {
    overflow: auto;
}

.view-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #c7ccd1;
}

.view-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.view-table tr:nth-child(even) {
    background-color: #ebedf0;
}

.view-table th {
    white-space: normal;
    background-color: #e4e8ec;
    word-wrap: break-word;
    min-height: 40px;
    border: 1px solid #ddd;
    padding: 8px;
}

/*view rates table page */

/* datatable style change */

.paginate_button {
    vertical-align: unset;
}

.view-grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 10px;
}

.view-grid-item {
    margin-bottom: 10px;
}

.view-grid-item span:first-child {
    color: var(--cyan);
}

.rates-wrapper {
    width: 100%;
    column-gap: 15px;

}

#view_zones {
    margin: 15px;
}

#rates_table_container {
    width: 100%;
    overflow: auto;
}

.rates-left-column {
    flex-direction: column;
    width: calc(100% - 395px);
}

.rates-right-column {
    flex-direction: column;
    width: fit-content;
}

.summary-container {
    flex-direction: column;
    width: 100%;
    background-color: #e4e8ec;
    align-items: center;
}

.summary-items {
    width: 100%;
    padding: 10px 20px 10px 20px;
    column-gap: 25px;
}

.summary-values {
    background-color: white;
    width: 120px;
    padding: 7px;
    text-align: center;
}

.summary-labels {
    width: 170px;
    margin-right: 20px;
    padding: 5px;
}

/* view page - overview */

.view-overview-header {
    padding-bottom: 20px;
}

.view-overview-body {
    display: flex;
}

.view-body-main {
    width: calc(100%);
    height: 500px;
}

.view-body-legend {
    align-self: flex-end;
    width: 200px;
    margin-right: 20px;
}

.view-body-legend-slider {
    padding: 50px 25px 0 30px;
}

.view-body-legend table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    margin-top: 10px;
    padding-top: 10px;
}

.legend-color {
    width: 50px;
}

.legend-range {
    padding-left: 10px;
    width: 100px;
    font-size: 14px;
    color: #4f5f6f
}

.legend-input {
    margin-top: 10px;
}

.legend-input input {
    width: 70px;
}

.legend-input button {
    margin-top: 10px;
}

select.variable {
    margin-left: 10px;
    display: inline-block;
    width: auto;
    min-width: 70px;
}

select.year {
    display: inline-block;
    width: auto;
    min-width: 70px;
}

select.risk_type {
    margin-left: 10px;
    display: inline-block;
    width: auto;
    min-width: 70px;
}

select.coverage_element {
    margin-left: 10px;
    display: inline-block;
    width: auto;
    min-width: 70px;
}

#user-from,
#user-to {
    display: inline-block;
    width: 50%;
}

/* view page - location */

.view-location-header {
    padding-bottom: 20px;
    border-bottom: 1px solid #d7dde4;
}

.view-location-left {
    width: 420px;
}

.view-location-right {
    width: calc(100% - 420px);
}

.view-location-divider {
    flex-grow: 1;
    border-left: 1px solid #71b12c;
    margin: 0 20px;
}

select.location-select {
    margin-left: 10px;
    margin-bottom: 20px;
    display: inline-block;
    width: 200px;
}

.view-location-container {
    display: flex;
}

.view-location-selector-map {
    flex-grow: 1;
}

#location_result_chart {
    height: 400px;
}


/* .view-location-selector-input {
    flex-width: 100px;
} */

.view-location-header {
    margin: 20px 0;
}

/* View page - losses map */

.view-historical-map-container {
    width: 100%;
    height: 100%;
}

.view-historical-map-container>* {
    margin-bottom: 15px;
}

.view-historical-loss-map {
    height: 400px;
}

#view_historical_losses_maps {
    column-gap: 5px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.view-map-title {
    text-align: center;
    padding: 5px;
}

.losses_map_item {
    flex: 1;
}

.legend-title {
    text-align: center;
}

.horizontal-legend {
    display: flex;
    justify-content: center;
    margin-top: 5px;

}

#historical_losses_legend {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.horizontal-legend-item {
    width: 50px;
    height: 20px;
    word-spacing: 20px;
}

/* chain */

.chain {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

/* table */

.newline-as-br {
    white-space: pre;
}

/* Monitor pages */
.monitor-location-selector-input>* {
    margin-left: 5px;
}

.monitor-table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    overflow: auto;
}

.monitor-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.monitor-table tr:nth-child(even) {
    background-color: #ebedf0;
}

.monitor-table th {
    padding: 8px;
    text-align: left;
    background-color: #e2e9f1;
    word-wrap: break-word;
    border: 1px solid rgb(215, 221, 228);
}


.column-flex {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
}

.monitor-title {
    width: 100%;
    background-color: #e4e8ec;
    color: black;
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    font-family: open sans-serif;
    font-size: large;
    min-height: 35px;
}

.monitor-content {
    width: 100%;
    column-gap: 10px;
}

#monitor_map_container,
#monitor_chart_container {
    width: 100%;
    align-items: center;

}

.monitor-anomaly-map-legend {
    min-height: 80px;
    max-height: 80px;
}


/* Coverage elements */

.coverage-element-container {
    white-space: nowrap;
    overflow: auto;
}

/* Menu */

aside.sidebar a {
    font-size: 1rem;
}

/* monitor per risk type tabs */

select.phase-select {
    margin-left: 10px;
    margin-bottom: 20px;
    display: inline-block;
    width: 200px;
}

#monitor_risk_type_chart_container {
    overflow: auto;
}

#risk_chart {
    margin-top: 15px;
    overflow: auto;
}

.monitor-legend {
    align-self: flex-end;
    min-width: 200px;
    margin-right: 20px;
}

.monitor-legend table {
    width: 100%;
    border-top: 1px solid rgb(215, 221, 228);
    border-collapse: separate;
    border-spacing: 5px;
    margin-top: 10px;
    padding-top: 10px;
}

#monitor_risk_type_chart_legend {
    align-self: flex-start;
    margin-top: 40px;
}

/*loss monitor tab */
.monitor-main-container {
    width: 100%;
}

.monitor-loss-content {
    width: 100%;
    column-gap: 5px;
}

#monitor_loss_table_wrapper {
    width: 100%;
    overflow: auto;
    white-space: normal;
}

#monitor_loss_table_wrapper>* {
    margin-bottom: 10px;
}

/* monitor status tab */

.monitor-status-container {
    width: 100%;
    column-gap: 10px;
}

#monitor-status-table-wrapper {
    flex-grow: 3;
    overflow: auto;
}

.monitor-status-filter-wrapper {
    padding: 15px;
    margin-right: 10px;
}

input.status-checkbox {
    width: 18px;
    height: 16px;

}

.text-green {
    color: green;
}

.text-orange {
    color: orange;
}

.text-grey {
    color: grey;
}

.text-light-blue {
    color: #92beec;
}

/* final payout map tab */
.monitor-payout-container {
    width: 100%;
    white-space: normal;
}

.monitor-payout-content {
    width: 100%;
    column-gap: 10px;
}

#monitor_payout_table_wrapper {
    width: 100%;
}

.monitor-payout-map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* sidebar show/hide button */

.btn-toggle {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: calc(35px - 1.5rem);
    right: -2.25rem;
    color: white;
    width: 2.25rem;
    height: 3rem;
    padding: .75rem .375rem;
    background-color: #3a4651;
    border: none;
    border-radius: 0 .25rem .25rem 0;
    box-shadow: .0625rem 0 .125rem 0 gray;
}

@media (max-width: 991.98px) {
    .btn-toggle {
        display: none;
    }
}

.btn-toggle:focus:not(:focus-visible) {
    outline: none
}

.btn-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    transform: translate(0) rotate(90deg);
}

.app.sidebar-collapsed .btn-toggle svg {
    transform: translate(0) rotate(-90deg);
}

.app.sidebar-collapsed .header {
    left: 0;
}

.app.sidebar-collapsed {
    padding-left: 0;
}

.app.sidebar-collapsed .footer {
    left: 0;
}

.app.sidebar-collapsed .footer .author>ul li {
    display: block;
    text-align: right;
}

.footer .author>ul li:after {
    content: "";
}

.app.sidebar-collapsed .footer .author>ul {
    display: block;
}

.app.sidebar-collapsed .sidebar {
    position: fixed;
    left: -240px;
}

.app.sidebar-collapsed .sidebar-overlay {
    display: block;
}

/* trace monitor */

.two_part-container {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 180px);
}

.two_part-container>div:first-child {
    width: 30%;
    height: 100%;
}

.two_part-container>div:nth-child(2) {
    width: 70%;
    height: 100%;
    position: relative;
}

.trace_monitor {
    padding-left: 10px;
    display: block;
    height: 100%;
    white-space: nowrap;
    overflow: auto;
    color: rgb(99, 98, 98);
    display: none;
}

.trace_monitor.show {
    display: block;
}

.trace_message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.trace_message.show {
    display: block;
    margin: auto;
}

.body_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.trace_header {
    margin: 0px 24px;
    border-bottom: 2px solid #71b12c;
    background-color: #d7dde4;
    padding: 0px 0 12px 12px;
}

.trace_label {
    color: rgb(98, 132, 154);
}

.trace_bracket {
    color: rgb(2, 2, 207);
}


.trace_number {
    color: rgb(212, 117, 117);
}

.trace_block {
    padding: 0 24px;
}

.trace_block_content {
    display: none;
}

.trace_block h6 {
    cursor: pointer;
}

.trace_block_content.out {
    display: block;
}

.trace_fold {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('images/expand-right.svg');
}

.trace_fold.out {
    background-image: url('images/expand-down.svg');
}

/* year selector */

.year-selector-group {
    margin-left: 10px;
    display: inline-block;
}


/* Admin panels */

.admin-title {
    width: 100%;
    background-color: #e4e8ec;
    color: black;
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;
}

.admin-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #c7ccd1;
}

.admin-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.admin-table tr:nth-child(even) {
    background-color: #ebedf0;
}

.admin-table th {
    white-space: normal;
    background-color: #e4e8ec;
    word-wrap: break-word;
    min-height: 40px;
    border: 1px solid #ddd;
    padding: 8px;
}

.shape-definition-content {
    display: flex;
    width: 100%;
    gap: 10px;
}

.shape-definition-content a {
    font-weight: bolder;
}

.shape-definition-table-container {
    width: calc(100% - 500px);
}

.shape-definition-table {
    max-height: 100%;
    overflow: auto;
}

.shape-definition-map-container {
    width: 500px;
}

.btn-icon {
    position: relative;
    top: -3px;
    background-size: cover;
    border: none;
    outline: none;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    padding: 5px;
    background-color: inherit;

}

.btn-icon:focus,
.btn-icon:hover {
    outline: none;
    border: none;
}

.btn-icon:disabled,
.btn-icon[disabled] {
    opacity: 0.5;

}

.btn-delete {
    background-image: url(./images/delete-icon.png);
}

.btn-edit {
    background-image: url(./images/edit-pencil.svg);
}

/* admin-user page */

#create_user_button {
    float: right;
    margin-bottom: 5px;
}


/* partial index recalculation */

.recalculation_message {
    margin: 0  0 20px 0;

}

/* progress block */

.progress-block {
    display: none;
    border: 1px solid white;
    color: white;
    background-color: #fe974b;
    padding: 5px;
    margin-left: 20px;
}

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

.notice {
    color: #ff6a00;
    padding: 6px;
}

.progress-block.done {
    display: inline;
    border: 1px solid white;
    color: white;
    background-color: #71b12c;
}

/* pixel calculator */

.export-button-section {
    display: flex;
    margin: 24px;
    justify-content: flex-end;
}