@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');

:root { 
    --primary: #021267; 
    --primary-lt: #11258f; 
    --primary-dk: #010b41;
    --primary-bg: #e1efff;
    --secondary: #039981;
    --secondary-lt: #04e4c0;
    --secondary-dk: #024e42;
    --secondary-bg: #e1edeb;
    --terciary: #bbb;
    --terciary-lt: #ddd;
    --terciary-dk: #999;
    --terciary-bg: #eee;
    --cancel: #666;
    --cancel-lt: #999;
    --warning: #ea2746;
    --warning-lt: #f2435f;
    --border-radius: 5px;
    --main-background: #fff;
    --overlay-color: rgba(223, 228, 254, 0.75);
    --xlarge-breakpoint: 100em;
}

* { margin: 0; padding: 0; font-family: "Segoe UI", "Helvetica Neue", Arial, Helvetica, Sans-Serif; }
body { background-color: var(--main-background); }
h1, h2, h3, h4, h5, h6, h7 { font-family: Manrope, Arial, sans-serif !important; font-weight: bold; color: var(--primary); }
.button { font-family: Manrope, Arial, sans-serif !important; color: var(--primary); font-size: 0.775rem; }
.link { font-family: Manrope, Arial, sans-serif !important; color: var(--primary); }
h3 { color: var(--primary); }

div.user-info { background-color: var(--primary-lt); border-radius: var(--border-radius); padding: 4px 8px; display: inline-block; color: #fff; font-size: 0.875rem; }
div.user-info a { color: #fff !important; }
#footer { position: fixed; background-color: var(--primary); color: #fff; padding: 4px 8px; bottom: 5px; right: 5px; border-radius: var(--border-radius); font-size: 0.725rem; cursor: help; }

.menu-section { background-color: var(--secondary-bg); margin-bottom: 1rem; border-radius: var(--border-radius); padding: 1rem; }
.menu-section .menu-title { color: var(--primary); margin-bottom: 1rem; }
.menu-section ul.menu-list { list-style-type: none; margin-left: 0; }
.menu-section ul.menu-list li { margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.825rem; color: #333; }
.menu-section ul.menu-list li i { color: var(--primary-lt); display: inline-block; width: 24px; text-align: center; }

h2.page-title { color: var(--primary); font-size: 1.8rem; }
h4.section-title { color: var(--secondary-dk); }

div.section-panel { background-color: var(--secondary-bg); padding: 1rem 2rem; margin-top: 3rem; margin-bottom: 2rem; border-radius: var(--border-radius); position: relative; }
div.section-panel h4 { color: var(--secondary-dk); font-size: 1.5rem; margin-top: 1rem; }
div.section-panel h5 { color: var(--secondary); font-size: 1rem; margin-top: 1rem; }
div.section-panel a.section-close-button { position: absolute; right: 15px; top: 10px; font-size: 1.25rem; color: #666; }

div.info-panel { background-color: var(--terciary-bg); padding: 0.5rem; margin-top: 0.5rem; border-radius: var(--border-radius); font-size: 0.725rem; position: relative; }
div.info-panel a.button.abs-right { position: absolute; right: 5px; top: 5px; }

.callout { border-radius: var(--border-radius); margin-top: 1rem; margin-bottom: 1rem; }
.callout small { text-transform: uppercase; }
.callout button.close-button { font-size: 1.5rem; color: #fff; }

.form-error { color: #ef0025; margin-top: 0rem; margin-bottom: 0px; }
.is-invalid-input { border-color: #ef0025; background-color: rgba(236,64,64, 0.1); margin-bottom: 0; }

.button-bar { margin-top: 2rem; }
.button-bar .button { margin-left: 0.5rem; padding: 1rem 1.5rem; }
.form-button-bar { margin-top: 1.5rem; text-align: right; }
.button.primary, .button.primary:link, .button.primary:visited { background-color: var(--primary); color: #fff !important; border: solid 1px var(--primary-lt); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: var(--border-radius); }
.button.primary:hover, .button.primary:active, .button.primary:focus { background-color: var(--primary-lt); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: var(--border-radius); }
.button.secondary, .button.secondary:link, .button.secondary:visited { background-color: var(--secondary); color: #fff !important; border: solid 1px var(--secondary-lt); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: var(--border-radius); }
.button.secondary:hover, .button.secondary:active, .button.secondary:focus { background-color: var(--secondary-lt); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: var(--border-radius); }
.button.terciary, .button.terciary:link, .button.terciary:visited { background-color: var(--terciary); color: #fff !important; border: solid 1px var(--terciary-lt); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: var(--border-radius); }
.button.terciary:hover, .button.terciary:active, .button.terciary:focus { background-color: var(--terciary-lt); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: var(--border-radius); }
.button.warning, .button.warning:link, .button.warning:visited { background-color: var(--warning); border-color: var(--warning-lt); border-radius: var(--border-radius); }
.button.warning:hover, .button.warning:active, .button.warning:focus { background-color: var(--warning-lt); }
.button.cancel, .button.cancel:link, .button.cancel:visited { background-color: var(--cancel); border-color: var(--cancel-lt); color: #fff; border-radius: var(--border-radius); }
.button.cancel:hover, .button.cancel:active, .button.cancel:focus { background-color: var(--cancel-lt); }
.button.icon-action, .button.icon-action:link, .button.icon-action:visited { font-size: 0.875rem; padding: 5px; border-radius: var(--border-radius); background-color: #f1e7e7; color: var(--primary) !important; border: solid 1px var(--primary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; }
.button.icon-action:hover, .button.icon-action:active, .button.icon-action:focus { background-color: var(--primary-lt); color: #fff !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.button.icon-action i.super { font-size: 0.5rem; vertical-align: top; margin-left: 3px; }
.button.icon-action.primary { background-color: var(--primary) !important; color: #fff !important; }
.button.icon-action.primary:hover { background-color: #ddd !important; color: var(--primary-lt) !important; }
.button.icon-action.secondary { background-color: var(--secondary) !important; color: #fff !important; }
.button.icon-action.secondary:hover { background-color: #ddd !important; color: var(--secondary-lt) !important; }
.button.icon-action.warning { background-color: var(--warning) !important; color: #fff !important; }
.button.icon-action.warning:hover { background-color: var(--warning-lt) !important; color: #fff !important; }
.button.split-field { height: 2.4rem; border-radius: 0px !important; border-right: solid 1px #777 !important; }
.button.split-field.last { border-radius: 0 5px 5px 0 !important; border-right: inherit !important; }
.button.inline-text { padding: 4px 8px; border-radius: var(--border-radius); font-size: 0.725rem; background-color: var(--terciary-lt); color: #333; margin: 0; }
.button.inline-text:hover { background-color: var(--terciary); }
.button.text-button, .button.text-button:link, .button.text-button:visited { color: var(--primary) !important; background-color: transparent; border: solid 1px var(--primary); }
.button.text-button:hover { background-color: var(--primary-lt); color: #fff !important; }

table i.icon-only { line-height: 1rem; vertical-align: text-bottom; display: inline-block; margin-right: 0.75rem; }

.c-primary { color: var(--primary); }
.c-secondary { color: var(--secondary); }
.c-terciary { color: var(--terciary); }
.c-cancel { color: var(--cancel); }
.c-warning { color: var(--warning); }
.c-on { color: #2bb24c; }
.c-off { color: #bbb; }
.bg-on { background-color: #2bb24c !important; }
.bg-off { background-color: #bbb !important; }
.bg-warning { background-color: var(--warning) !important; }

a, a:link, a:visited { color: #333; }
a:hover, a:active, a:focus { color: #666; }

.side-menu { background-color: var(--secondary-bg); }
.side-menu li { background-color: var(--secondary-bg); transition: background-color ease-out 0.2s; }
.side-menu li a { transition: margin ease-out 0.2s; }
.side-menu li:hover { background-color: var(--secondary-lt); }
.side-menu li:hover a { margin-left: 1rem; }

ul.access-token-bar-menu { list-style-type: none; }
ul.access-token-bar-menu li { display: inline; }
ul.access-token-bar-menu li a { display: inline-block; padding: 4px 8px; border-radius: var(--border-radius); background-color: var(--terciary-bg); font-size: 0.725rem; }
ul.access-token-bar-menu li a:hover { background-color: var(--terciary-lt); }
ul.access-token-bar-menu li strong { font-size: .825rem; }
ul.access-token-bar-menu i.user-role { font-size: 0.625rem; color: var(--primary-lt); display: inline-block; margin-right: 2px; vertical-align: text-bottom; line-height: 1rem; }

.clickable { cursor: pointer; transition: all ease-in 0.3s; border-bottom: dashed 1px var(--primary); padding: 2px; }
.clickable:hover { background-color: var(--primary); color: #fff; }

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

.no-js .top-bar { display: none; }
@media screen and (min-width: 40em) { 
    .no-js .top-bar { display: block; }
    .no-js .title-bar { display: none; }
}

.form { margin-top: 1rem; }
.form label { padding: 3px 6px; color: var(--primary); font-weight: bold; text-transform: uppercase; font-size: 0.725rem; }
.form.small, .form.small label { font-size: 0.75rem; }
.form.small input, .form.small select { font-size: 0.75rem; height: 2rem; padding: 0.25rem 0.5rem; background-position: right center; }
.form.small .column, .form.small .columns { padding-left: 0.25rem; padding-right: 0.25rem; }
.form.small .button { font-size: 0.875rem; padding: 0.4rem 0.8rem; }
.form input.no-margin, .form select.no-margin { margin-bottom: 0; }
.form span.pseudo-field { display: block; cursor: help; box-sizing: border-box; width: 100%; height: 2.4375rem; padding: 0.5rem; border: 1px solid #dadada; margin: 0 0 1rem; font-size: 1rem; color: #0a0a0a; background-color: var(--terciary-bg); box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1); border-radius: 0; -webkit-appearance: none; }

.pager { background-color: var(--terciary-bg); border-radius: var(--border-radius); padding: 0.5rem; margin: 2rem auto !important; font-size: 0.75rem; line-height: 2rem; }
.pager a { font-size: 0.75rem; display: inline-block; margin-left: 5px; margin-right: 5px; }
.pager i { color: var(--terciary-dk); }
.pager a:hover i { color: var(--primary-lt); }
.pager input { display: inline; width: 50px; padding: 0.25rem; font-size: 0.75rem; height: 2rem; margin: 0; text-align: center; }
.pager .total-items { font-weight: bold; padding: 0.25rem 0.5rem; display: inline-block; border-radius: var(--border-radius); background-color: var(--terciary-lt); margin-bottom: 0.5rem; }
.pager .pager-record-count { text-transform: uppercase; color: var(--primary); font-weight: bold; }

.off-canvas-wrapper { background-color: #ddd; box-shadow: 0 0 10px rgba(10,10,10,1); }
.off-canvas { background-color: #333; color: #fff; }
.off-canvas .badge-lateral { background-color: #ddd; color: #222; font-size: 0.925rem; padding: 1rem 0 1rem 0; }
.off-canvas .badge-lateral h5 { color: var(--primary); text-transform: uppercase; font-size: 0.875rem; font-weight: bold; }
.off-canvas .badge-lateral a.button { background-color: #aaa; font-size: 0.7rem; color: #333; border-radius: 3px; padding: 3px 6px; transition: all ease-in 0.3s; }
.off-canvas .badge-lateral a.button:hover { background-color: var(--primary); color: #fff; }
.off-canvas-content { background: #fff; min-height: 90vh; }
.menu-icon::after { background-color: #222; box-shadow: 0 7px 0 #222, 0 14px 0 #222; }

.title-bar { background-color: var(--terciary); font-family: Manrope, Arial, sans-serif !important; color: #222; border-bottom: solid 2px var(--terciary-dk); }
.title-bar-title { font-size: 0.875rem; text-transform: uppercase; font-family: Manrope, Arial, sans-serif !important; }
.title-bar-title i.user-role { font-size: 0.625rem; color: var(--primary-lt); display: inline-block; margin-right: 2px; vertical-align: text-bottom; line-height: 1rem; }

@media only screen and (min-width: 1300px) {
    .row { max-width: 80rem; }
}

@media only screen and (min-width: 1600px) {
    .row { max-width: 100rem; }
}

.shadowbox { background-color: rgba(240,240,240,0.85); box-shadow: 0 10px 10px -5px rgba(10,10,10,0.5); padding: 1rem 1rem 2rem 1rem; }
#appInfo { text-align: right; padding: 1rem; }

.seccionMenu { border-bottom: solid 1px #ccc; margin-bottom: 1rem; margin-top: 2rem; color: var(--primary); font-weight: bold; font-family: Manrope, HelveticaNeue, Arial, sans-serif; }
.itemMenu a:link, .itemMenu a:visited { color: #333; font-size: 0.825rem; line-height: 1.1rem; transition: all ease-in 0.1s; padding: 8px 6px; display: block; text-align: center; border-radius: 2px; }
.itemMenu a:hover, .itemMenu a:active, .itemMenu a:focus { background-color: var(--primary); color: #fff !important; }
.itemMenu a .fa { font-size: 1.25rem; display: block; margin-bottom: 4px; }
i.super { vertical-align: super; font-size: 70%; }
i.super.m-left { margin-right: 3px; }
i.super.m-right { margin-left: 3px; }

a.link { color: #222; border-bottom: dashed 1px #222; font-size: 0.9rem; }

small.cantidad-resultados { font-family: Manrope, Arial, sans-serif !important; display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; background-color: #0975a5; color: #fff; font-size: 0.7rem; margin-bottom: 1rem; }

.message { text-align: center; padding: 1rem; border-radius: 3px; margin: 1rem 0; background-color: #333; color: #fff; font-size: 1rem; box-shadow: 0 10px 10px rgba(10,10,10,0.4); z-index: 10000; }
.message-field { border-radius: var(--border-radius); vertical-align: text-bottom; padding: 0.25rem 1rem; }
.message.success, .message-field.success, .message.ok, .message-field.ok { background-color: #3d9f56; }
.message.info, .message-field.info { background-color: #9cd1e9; color: var(--primary); }
.message.error, .message-field.error { background-color: #ea2746; }
#divGlobalMessage { position: fixed; bottom: 60px; right: 40px; width: 20%; border-radius: var(--border-radius); margin: 0; padding-bottom: 2rem; }

.badge { font-size: 1rem; background-color: #8ab63b; color: #fff; }

#modal-confirmation { padding: 1rem 2rem; border-radius: var(--border-radius); background-color: var(--primary-bg); box-shadow: 0px 10px 10px rgba(100, 100, 100, 0.5); }
#modal-confirmation h4 { color: var(--primary); margin-bottom: 2rem; }
#modal-confirmation p { font-size: 1rem; line-height: 1.875rem; }
#modal-confirmation p i { font-size: 1.8rem; color: #fff; display: inline-block; width: 3rem; text-align: center; padding: 15px; }
#modal-confirmation .button-group { font-size: 0.875rem; margin-bottom: 0; text-align: right; margin-top: 2rem; }
#modal-confirmation .button-group .button { margin-left: 8px; min-width: 25%; }
.reveal-overlay { background-color: var(--overlay-color); }

.table-buttons a.button { margin-bottom: 0; margin-right: 0.5rem; display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; background-color: #8ab63b; color: #fff; font-size: 0.7rem; line-height: inherit; border: solid 1px #7da732; }

table.table-small { font-size: 0.825rem; }
table.table-small tfoot td, table.table-small tfoot th, table.table-small thead td, table.table-small thead th, table.table-small tbody td { padding: 0.1rem 0.25rem; }
table.table-small thead th { font-size: 0.75rem; }

table tr.deleted-item td { color: #bbb; }

.table caption { background-color: var(--primary-bg); font-size: 0.725rem; text-align: left; padding: 0.25rem 0.4rem; }
.table thead th { font-size: 0.725rem; padding: 0.25rem 0.4rem; background-color: #efefef; color: #444; text-transform: uppercase; font-weight: normal; }
.table thead th input, .table thead th select { font-size: 0.725rem; height: 2rem; margin-bottom: 0; }
.table tbody td { font-size: 0.825rem; padding: 0.25rem 0.4rem; }
.table tbody td.no-results { text-align: center; padding: 0.5rem; font-weight: bold; }
.table a.button.action-button, .in-panel-form a.button.action-button { margin-bottom: 0.1rem; font-size: 0.85rem; padding: 3px 6px; border-radius: 3px; color: #666; background-color: transparent; }
.table a.button.action-button:hover, .in-panel-form a.button.action-button:hover { background-color: #999; color: #333; }

.panel h5 a.button.action-button { margin-bottom: 0.1rem; font-size: 0.85rem; padding: 3px 6px; border-radius: 3px; color: #fff; background-color: transparent; float: right; }
.panel h5 a.button.action-button:hover { background-color: #eee; color: var(--primary); }

.link-list a { font-family: Manrope, Arial, sans-serif; color: #222; border-bottom: solid 1px #ddd; padding: 0.5rem; display: block; transition: all ease-in 0.2s; }
.link-list a:hover { background-color: var(--primary); color: #fff; }

label.is-invalid-label { color: #ef0025; }
/*ul.checkbox-list { list-style-type: none; margin-left: 0; }
ul.checkbox-list li { display: inline-block; }
input[type="checkbox"] { display:none; }
input[type="checkbox"] + label { text-transform: uppercase; padding: 0.25rem 0.5rem; margin-top: 0.5rem !important; }
input[type="checkbox"] + label span { display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0;  vertical-align:middle; background:url(check_radio.png) left top no-repeat; cursor:pointer; }
input[type="checkbox"]:checked + label { background-color: #ddd; }
input[type="checkbox"]:checked + label span { background:url(check_radio.png) -19px top no-repeat; }
input[type="checkbox"].collapse + label { margin-right: 0; margin-top: 0; }*/
div.list-filter input, div.list-filter select { font-size: 0.775rem; }
div.list-filter .column, div.list-filter .columns { padding-left: 0.5rem; padding-right: 0.5rem; }

.checkbox-list-ctrl { margin-top: 0.5rem; display: block !important; margin-bottom: 0 !important; }
.checkbox-list-ctrl label { display: inline-block !important; margin-top: 0rem !important; margin-bottom: 0rem !important; font-weight: normal; color: #222; }
.checkbox-list-ctrl input { margin-bottom: 0 !important; }
.checkbox-list-ctrl input[type=checkbox] { display: inline-block; }
.checkbox-list-ctrl input[type=checkbox] + label { margin-left: 0.25rem !important; margin-top: 0 !important; }

.switch-paddle { width: 4rem; border-radius: 4rem; background: var(--primary-bg); transition: all .25s ease-out; transition-property: background-color, top, left; border: solid 1px var(--secondary-lt); padding: 1rem !important; }
.switch-paddle::after { background: var(--primary-lt); border-radius: 16px; top: 0.5rem; left: 0.5rem; width: 1rem; height: 1rem; transition: all .25s ease-out; transition-property: background-color, top, left; content: "\f00d"; color: #fff; font-family: 'Font Awesome 5 Free'; font-size: 0.5rem; text-align: center; padding-top: 1px; }
input:checked ~ .switch-paddle { background: var(--primary-lt); }
input:checked ~ .switch-paddle::after { background: #fff; left: 2.5rem; content: "\f00c"; color: var(--primary); font-family: 'Font Awesome 5 Free'; font-size: 0.5rem; text-align: center; padding-top: 1px; }
.switch .switch-label { display: inline-block; line-height: 2.4rem; vertical-align: text-bottom; margin-left: 0.5rem; color: var(--primary); }
input:checked + label > .switch-active { color: #fff; left: 15%; }

.control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator { background: #ccc; } /* Hover and focus states */
.control input:checked ~ .control__indicator { background: #eee; } /* Checked state */ 
.control:hover input:not([disabled]):checked ~ .control__indicator, .control input:checked:focus ~ .control__indicator { background: #77fc9a; } /* Hover state whilst checked */
.control input:disabled ~ .control__indicator { pointer-events: none; opacity: .6; background: #e6e6e6; } /* Disabled state */
.control__indicator:after { position: absolute; display: none;  content: ''; } /* Check mark */
.control input:checked ~ .control__indicator:after { display: block; } /* Show check mark */
.control--checkbox .control__indicator:after { top: 4px; left: 9px; width: 6px; height: 12px; transform: rotate(45deg); border: solid #04a12e; border-width: 0 2px 2px 0; } /* Checkbox tick */
.control--checkbox input:disabled ~ .control__indicator:after { border-color: #7b7b7b; } /* Disabled tick colour */
.control--radio .control__indicator:after { top: 7px; left: 7px; width: 6px; height: 6px; border-radius: 50%; background: #04a12e; } /* Radio button inner circle */
.control--radio input:disabled ~ .control__indicator:after { background: #7b7b7b; } /* Disabled circle colour */

.typeahead__field input[type=search], .typeahead__field input[type=search]::-webkit-search-cancel-button, .typeahead__container [type=reset], .typeahead__container [type=submit], .typeahead__container button, .typeahead__container html [type=button] { height: 2.4375rem; }
.typeahead__search-icon { padding: 0; }
.typeahead__cancel-button { top: 12px; }

span.simil-campo { background-color: #f5f5f5; padding: 0.5rem; display: block; }

.row.collapse .column:not(:last-child), .row.collapse .columns:not(:last-child) { padding-right: 0; }
.row.collapse .column:last-child:not(:first-child), .row.collapse .columns:last-child:not(:first-child) { padding-left: 0; }

.panel { background-color: #fff; border: solid 1px #333; box-shadow: 0px 2px 1px 0px rgba(99,99,99,0.5); padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 1rem; }
.panel h5 { margin: 0 0 0.5rem 0; color: #fff; font-size: 1rem; padding: 0.5rem; margin-left: -0.75rem; margin-right: -0.75rem; }
.panel h6 { margin: 1.5rem 0 1rem 0; color: #fff; font-size: 0.8rem; padding: 0.5rem; margin-left: -0.75rem; margin-right: -0.75rem; }
.panel h4 { font-weight: bold; margin-top: 1rem; font-size: 1rem; color: #0975a5; display: block; }
.panel.primary h5 { background-color: var(--primary); color: #fff; }
.panel.primary h6 { background-color: #666; color: #fff; }
.panel.secondary h5 { background-color: #0975a5; color: #fff;}
.panel.secondary h6 { background-color: #999; color: #fff; }
.panel.warning h5 { background-color: #ff4f16; color: #fff; }
.panel.warning h6 { background-color: #faa103; color: #fff; }
.panel label:not(.button) { font-size: 0.7rem; color: #444; margin-top: 1rem; line-height: 1rem; }
.panel label.inline { font-size: 0.875rem !important; margin-top: 0.75rem !important; }
.panel.primary .badge, .panel.secondary .badge { background-color: #ff4356; color: #fff; font-size: 0.825rem; min-width: 1.4rem; padding: 0 0.25rem; height: 1.4rem; line-height: 1.4rem; border-radius: 40%; text-align: center; float: right; font-weight: bold; }
.panel.primary .badge:hover { background-color: #0975a5; }
.panel.secondary .badge { background-color: #fff; color: #222; }
.panel.secondary .badge:hover { background-color: #ccc; color: #666; }
.panel.no-padding { padding: 0; }
.panel.no-padding h5, .panel.no-padding h6 { margin-left: 0; margin-right: 0; }

.callout.primary { background-color: #bccfd9; }
.callout.alert { background-color: #ff362c; color: #fff; }
.callout.info { background-color: #ffb65d; color: #222; }

.in-panel-form-wrapper { position: relative; min-height: 220px; }
.in-panel-form-wrapper table tbody, .in-panel-form-wrapper table tfoot, .in-panel-form-wrapper table thead { border: none; }
.in-panel-form-wrapper .table thead th { background-color: #d5ecff; font-size: 0.7rem; font-weight: normal; }
.in-panel-form-wrapper .table tbody td { padding: 0.4rem; }
.in-panel-form { background-color: rgba(214, 233, 254, 0.95); position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0.5rem; }
.in-panel-form input, .in-panel-form select { font-size: 0.775rem; height: 2rem; }
.in-panel-form textarea { font-size: 0.775rem; }

div.waiting-placeholder { padding: 1rem; text-align: center; background-color: #fff; border: solid 3px var(--primary); }

.alert-badge { background-color: #e0e6da; font-size: 0.825rem; padding: 0.5rem; border-radius: 5px; margin-top: 1rem; }
.alert-badge i.fa { font-size: 0.875rem; color: #fff; }
.alert-badge.level-1 { background-color: #ffc1c1; }
.alert-badge.level-2 { background-color: #fbe4bc; }
.alert-badge.level-3 { background-color: #84cc96; }
.alert-badge p { font-size: 0.775rem; }

.number-indicators .column { padding: 0.5rem 1rem; text-align: right; }
.number-indicators .column strong { font-size: 3rem; display: block; color: var(--primary); }
.number-indicators .column span { font-size: 0.925rem; color: #222; line-height: 1rem; }

.prompt-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgb(33 55 100 / 0.84); }
.prompt-wrapper .row { margin-left: auto; margin-right: auto; }

@-webkit-keyframes shimmer { 0% { background-position: 100% 0 }
    100% { background-position: -100% 0 }
}

.htmlWrapper table tbody { border: initial; background: initial; }

div.tag-list .tag { display: inline-block; background-color: var(--secondary-dk); color: #fff !important; font-size: 0.925rem; padding: 4px 8px; border-radius: 4px; margin-right: 4px; margin-bottom: 4px; }
div.tag-list .tag i { color: #333; font-size: 0.825rem; display: inline-block; margin-left: 10px; }

div.columns.with-hint { position: relative; }
div.columns.with-hint .hint { position: absolute; top: 0.25rem; right: 1rem; font-size: 0.825rem; color: var(--secondary-dk); cursor: help; }

ul.tab-list { list-style-type: none; margin: 1rem 0 0 0; }
ul.tab-list li { display: inline; }
ul.tab-list li a { display: inline-block; background-color: var(--secondary-dk); padding: 4px 8px; border-radius: var(--border-radius); color: #fff; }
ul.tab-list li a:hover { background-color: var(--secondary-lt); }
ul.tab-list li.selected a { background-color: var(--terciary-dk); }

ul.tabs .tabs-title > a { padding: 0.5rem 1rem; }
ul.tabs .tabs-title > a:focus, .tabs-title > a[aria-selected=true] { font-weight: bold; color: var(--primary); }
div.tabs-panel.no-padding { padding: 0; }

table.editable-table tr td { background-color: #fff; -moz-transition: all ease-in 0.3s; -o-transition: all ease-in 0.3s; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; }
table.editable-table tr:nth-child(odd) td { background-color: #f1f1f1; }
table.editable-table tr.edited td { background-color: #5ccb77; }

/* APPLICATIONS */
h6.app-results-environment-title { background-color: var(--primary-lt); color: #fff; padding: 0.5rem; margin-bottom: 0; }
div.app-results-environment { position: relative; }
div.app-results-environment a.config-download { position: absolute; right: 0.5rem; top: 0.5rem; }
div.tabs-content.app-results div.tabs-panel { position: relative; }
div.tabs-content.app-results div.tabs-panel a.button.copy { position: absolute; right: 1rem; top: 1rem; border-radius: var(--border-radius); }
div.tabs-content.app-results div.tabs-panel label.request-verb { display: inline-block; border-radius: var(--border-radius); background-color: var(--primary-bg); padding: 0.25rem 0.5rem; font-weight: bold; margin-bottom: 0.5rem; }
div.tabs-content.app-results div.tabs-panel div.pre-container { max-height: 500px; max-width: 665px; overflow:auto; }

pre.code-preview { font-size: 0.725rem; background-color: #efefef; color: #333; padding: 1rem; border-radius: var(--border-radius); }

/*div.pre-container { max-height: 500px; max-width: 665px; overflow:auto; }
div.cell.app-results-env-cell { padding: 30px; }*/

input[type="submit"] { font-family: 'Font Awesome 5 Free' !important; }

/* MODS FOUNDATION XLARGE */
.close-link { outline: 0; right: 1rem; top: 0.5rem; font-size: 1.4rem; line-height: 1; position: absolute; z-index: 10; color: #ffffff; cursor: pointer; }

.nobr { white-space:nowrap; }

@media print, screen and (min-width: 100rem) {
    .grid-x > .xlarge-shrink, .grid-x > .xlarge-full, .grid-x > .xlarge-1, .grid-x > .xlarge-2, .grid-x > .xlarge-3, .grid-x > .xlarge-4, .grid-x > .xlarge-5, .grid-x > .xlarge-6, .grid-x > .xlarge-7, .grid-x > .xlarge-8, .grid-x > .xlarge-9, .grid-x > .xlarge-10, .grid-x > .xlarge-11, .grid-x > .xlarge-12 { -ms-flex-preferred-size: auto; flex-basis: auto; }
}

@media print, screen and (min-width: 100rem) {
    .grid-container { max-width: 100rem; }
    .grid-x > .xlarge-auto { -ms-flex: 1 1 0px; flex: 1 1 0px; width: auto; }
    .grid-x > .xlarge-shrink { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; }
    .grid-x > .xlarge-1 { width: 8.33333%; }
    .grid-x > .xlarge-2 { width: 16.66667%; }
    .grid-x > .xlarge-3 { width: 25%; }
    .grid-x > .xlarge-4 { width: 33.33333%; }
    .grid-x > .xlarge-5 { width: 41.66667%; }
    .grid-x > .xlarge-6 { width: 50%; }
    .grid-x > .xlarge-7 { width: 58.33333%; }
    .grid-x > .xlarge-8 { width: 66.66667%; }
    .grid-x > .xlarge-9 { width: 75%; }
    .grid-x > .xlarge-10 { width: 83.33333%; }
    .grid-x > .xlarge-11 { width: 91.66667%; }
    .grid-x > .xlarge-12 { width: 100%; }
}

@media print, screen and (min-width: 100rem) {
    .xlarge-offset-0 { margin-left: 0%; }
    .grid-margin-x > .xlarge-offset-0 { margin-left: calc(0% + 0.9375rem); }
    .xlarge-offset-1 { margin-left: 8.33333%; }
    .grid-margin-x > .xlarge-offset-1 { margin-left: calc(8.33333% + 0.9375rem); }
    .xlarge-offset-2 { margin-left: 16.66667%; }
    .grid-margin-x > .xlarge-offset-2 { margin-left: calc(16.66667% + 0.9375rem); }
    .xlarge-offset-3 { margin-left: 25%; }
    .grid-margin-x > .xlarge-offset-3 { margin-left: calc(25% + 0.9375rem); }
    .xlarge-offset-4 { margin-left: 33.33333%; }
    .grid-margin-x > .xlarge-offset-4 { margin-left: calc(33.33333% + 0.9375rem); }
    .xlarge-offset-5 { margin-left: 41.66667%; }
    .grid-margin-x > .xlarge-offset-5 { margin-left: calc(41.66667% + 0.9375rem); }
    .xlarge-offset-6 { margin-left: 50%; }
    .grid-margin-x > .xlarge-offset-6 { margin-left: calc(50% + 0.9375rem); }
    .xlarge-offset-7 { margin-left: 58.33333%; }
    .grid-margin-x > .xlarge-offset-7 { margin-left: calc(58.33333% + 0.9375rem); }
    .xlarge-offset-8 { margin-left: 66.66667%; }
    .grid-margin-x > .xlarge-offset-8 { margin-left: calc(66.66667% + 0.9375rem); }
    .xlarge-offset-9 { margin-left: 75%; }
    .grid-margin-x > .xlarge-offset-9 { margin-left: calc(75% + 0.9375rem); }
    .xlarge-offset-10 { margin-left: 83.33333%; }
    .grid-margin-x > .xlarge-offset-10 { margin-left: calc(83.33333% + 0.9375rem); }
    .xlarge-offset-11 { margin-left: 91.66667%; }
    .grid-margin-x > .xlarge-offset-11 { margin-left: calc(91.66667% + 0.9375rem); }
}