/* CSS Document */
/*  TheHotline.us interface styling. Main stylesheet.  */
/*  project contact: Marty Hand, VP of Technology | TheHotline.org  */
/*  author : Chad Cleveland | Lightbulb Web Services | www.Lightbulb.Services  */
/*  copyright : © Copyright 2023 Lightbulb Web Services  */
/*  license : A royalty-free, non-exclusive, and irrevocable license to modify, reproduce, publish, or otherwise use, and authorize others to use (in whole or in part, including in connection with derivative works) is hereby granted to The Hotline. */

/*
    Created: 6/14/2022
    Last Modified: '2023-08-12 19:14';
*/ 


/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
  }

/* --------------- */





/* FONT */

@font-face {
    font-family: 'Lexend';
    src: url('https://lib.thehotline.us/font/lexend/Lexend-VariableFont_wght.ttf');
    font-weight: 100 900;
    font-style: normal;
}

/* GLOBAL VARIABLES */

:root {
    --font-main: 'Lexend', sans-serif;
    --app-bg-main: #ddd;
    --active-ele-bg-main: #e9e4e1;
    --inactive-ele-bg-main: #d6d3d2;
    --element-vertical-margin-main: 20px;
    --purple-lt: #9E3A8A;
    --purple-dk: #592C5F;
    --thl-red: #ca3639;
    --thl-black: #333132;
    --heading-color: #444;
    --field-color: #333;
    --field-bg-main: #efebea;
    --field-bg-hover: #e9e7e6;
    --field-border: 1px solid #c9c8c7;
    --field-border-hover: #959493;
    --field-border-focus: #959493;
    --field-border-disabled: #8a7f7b;
    --field-label-color: #555;
    --field-option-color: var(--field-color);
    --button-color: #746d6b;
    --button-color-hover: #46413f;
    --button-bg-main: #eee9e7;
    --button-bg-hover: #c7bfbd;
    --button-bg-2: #eee9e7;
    --button-border: 2px solid #746d6b;
    --button-border-hover: 2px solid #46413f;
    --button-hover: #7f7a78;
    --icon-color: #a5a2a0;
    --icon-bg-hover: #dcd9d8;
    --info-frame-bg: #d9d4d1;
    --result-menu-bg: #d9d4d1;
    --result-menu-bg-hover: #ccc9c5;
}

/* --------------- */


/* --------------- */





/* GLOBAL RESET */

* {
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    border: none;
    font-family: var(--font-main);
    letter-spacing: .2px;
    box-sizing: content-box;
    text-decoration: none;
}

/* --------------- */


/* GLOBAL STYLES */

html, body, #app-content, iframe, table {
    width: 100%;
    height: 100%;
    overflow: hidden; /* hide overflow, so we can turn it on for only specific elements */
    border: none;
    transition: height ease .5s;
    border-collapse: collapse;
}
table {
    background: unset;
}

#app-container {
    background-color: var(--app-bg-main);
    opacity: 0;
    transition: opacity ease-in-out .5s;
    float: left;
    width: 100%;
    height: 100%;
}
#app-header {
    background: var(--active-ele-bg-main);
    float: left;
}
#app-content {
    float: left;
    height: calc(100% - 50px);
}


.cbFormOuterTable {
    margin: 8px !important;
    width: calc(100% - 16px);
}

a {
    color: var(--)
}

h1, h2, h3, h4, h5 {
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.4;
    color: var(--heading-color);
}

h1 {
    font-weight: 400;
    font-size: 26px;
}

h3 {
    font-weight: 400;
    padding: 10px 0;
}

hr, .hr {
    height: 2px;
    background-color: #c6c4c2;
    margin: 10px 0;
    display: inline-block;
    width: 100%;
}

.cols-1 {
    float: left;
    width: calc(100% - 2px);
}
.cols-2 {
    float: left;
    width: calc(50% - 2px);
}
.cols-3 {
    float: left;
    width: calc(33.333333% - 2px);
}
.cols-4 {
    float: left;
    width: calc(25% - 2px);
}

[thl-dir-status*=nverified] {
    font-weight: bold;
    color: #c60;
}
[data-cb-name=cbTable] span.cbFormData {
    padding: 5px 0 10px 20px;
}

/* --------------- */





/* LOGIN */

#login-container{
    float: left;
    width: 100%;
    text-align: center;
    height: 100%;
    color: #444;
    background-color: var(--app-bg-main);
}

.login-logo {
    width: 80px;
    height: 80px;
    display: block;
    margin: 20px auto;
    background-image: url(https://lib.thehotline.us/img/thehotline-logo.png);
    background-position: center;
    background-size: contain;
}
#login-container h1 {
    font-weight: 400;
    font-size: 26px;
}
#login-container h2 {
    font-weight: 400;
    font-size: 21px;
    margin: 0px 0 10px 0;
}

div#login-form {
    width: 254px;
    margin: 20px 0 0 calc(50% - 127px);
    outline: var(--purple-dk);
}



/* --------------- */

/* ONE PAGE APP ELEMENTS */

#one-page-container{
    float: left;
    width: 100%;
    text-align: center;
    height: 100%;
    color: #444;
}
.one-page-logo {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0px auto 20px;
    background-image: url(https://lib.thehotline.us/img/ndvh-logo.png);
    background-position: center;
    background-size: contain;
}
#one-page-container h1 {
    font-weight: 400;
    font-size: 26px;
}
#one-page-container h2 {
    font-weight: 400;
    font-size: 21px;
    margin: 0px 0 10px 0;
}

div#one-page-form {
    width: calc(100% - 40px);
    max-width: 800px;
    margin: 20px auto;
    outline: var(--purple-dk);
}



/* --------------- */



/* HEADER */

.top-bar {
    background-color: var(--active-ele-bg-main);
    height: 50px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
}

.top-bar-cell {
    display: inline-block;
}

.top-bar-logo {
    height: 43px;
    width: 44px;
    background-image: url(https://lib.thehotline.us/img/ndvh-logo.png);
    background-repeat: no-repeat;
    background-size: 89%;
    margin: 3px;
    background-position: center;
    border-radius: 4px;
}

.top-bar-text {
    height: 50px;
    vertical-align: top;
}

.top-bar-text {
    color: #777;
    font-size: 23px;
    font-weight: 200;
    padding: 11px 0 0 12px;
}
.top-bar-menu-btn {
    cursor: pointer;
    height: 50px;
    width: 50px;
    float: right;
}
.top-bar-menu-icon {
    padding: 15px 23px;
    width: 4px;
    height: 20px;
}
.top-bar-menu-item .btn-refresh {
    vertical-align: 5px;
    padding: 0;
    display: inline-block;
    float: none;
    margin: -15px 0;
}

.top-bar-user {
    color: #777;
    float: right;
    padding: 17px 10px 0 0;
    font-size: 17px;
    transition: opacity ease-in-out .5s;
}
.top-bar-user[thl-init-status=true] {
    opacity: 1;
}
.top-bar-user[thl-init-status=false] {
    opacity: 0;
}

.top-bar-user-info {
    display: inline-block;
    /* float: right; */
    vertical-align: top;
    margin: 15px 8px 0 20px;
    cursor: default;
}
.top-bar-user-info:hover {
    background-color: transparent;
}

.top-bar-user-info-item {
    text-align: right;
    font-size: 15px;
    padding-top: 4px;
}

.menu-dot1, .menu-dot2, .menu-dot3 {
    width: 4px;
    height: 4px;
    background-color: #888;
    border-radius: 4px;
    margin: 0 0 4px 0;
    transition: all 0.5s ease;
}

[thl-menu-status=expanded] .menu-dot1 {
    width: 2px;
    height: 2px;
    width: 18px;
    -webkit-transform: rotate(-45deg) translate(-13px, 0);
    transform: rotate(-45deg) translate(-11px, 2px);
}
[thl-menu-status=expanded] .menu-dot2 {
    opacity: 0;
}
[thl-menu-status=expanded] .menu-dot3 {
    width: 2px;
    height: 2px;
    width: 18px;
    -webkit-transform: rotate(-45deg) translate(-12px, 0);
    transform: rotate(45deg) translate(-8px, 1px);
}

/* --------------- */





/* MENU */
.menu-container {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0%;
    cursor: pointer;
    z-index: 1000;
    transition: all ease-in-out .5s;
}
.menu-container[thl-menu-status=expanded] {
    width: 100%;
}
.menu-container[thl-menu-status=collapsed] {
    width: 0%;
}

.top-bar-menu-content {
    overflow: hidden;
    position: absolute;
    z-index: 1000;
    transition: all ease-in-out .5s;
    text-align: right;
    background: #f0f0f0;
    border-top: #fafafa thin solid;
    box-shadow: 0 5px 4px rgba(0,0,0,.1);
}

.top-bar-menu-content[thl-menu=thl-menu] {
    width: 400px;
    height: 100%;
    top: 50px;
    right: -410px;
}
.top-bar-menu-content[thl-menu-status=expanded][thl-menu=thl-menu] {
    right: 0px;
}
.top-bar-menu-content[thl-menu-status=collapsed][thl-menu=thl-menu] {
    right: -410px;
}

.top-bar-menu-item {
    border-bottom: solid 1px #aaa;
    padding: 19px 20px 19px 60px;
    width: 320px;
    font-size: 15px;
    color: #222;
    display: block;
    cursor: default;
}
.top-bar-menu-item-btn {
    cursor: pointer;
}
.top-bar-menu-item-btn:hover {
    background-color: #d6d6d6;
}


.thl-menu-item-iframe {
    padding: 0;
    width: 100%;
}
div#thl-menu-item-text-active-hotline-forwarding {
    border: none;
}
iframe#thl-menu-item-text-active-hotline-forwarding-list {
    max-height: calc(100% - 370px);
    background-color: #e7e8e8;
}
#thl-menu-item-text-add-city {
    display: none;
}
[thl-manager="manager"] #thl-menu-item-text-add-city {
    display: block;
}
[thl-manager="manager"] iframe#thl-menu-item-text-active-hotline-forwarding-list {
    max-height: calc(100% - 425px);
}

.menu-ifr-edit-btn {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 8px;
    right: 4px;
    background-image: url(https://lib.lightbulb.services/img/lws-ico-1.png);
    background-size: 400%;
    background-position: center;
    cursor: pointer;
}

.ifr-body-padded-20 {
    padding: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}
.ifr-body-padded-40 {
    padding: 40px;
    width: calc(100% - 80px);
    height: calc(100% - 80px);
}
.ifr-body-padded-80 {
    padding: 80px;
    width: calc(100% - 160px);
    height: calc(100% - 160px);
}

.cbFormCalendar {
    float: left;
    width: 30px;
}

tr[data-cb-name="data"]:nth-child(2n) {
    background-color: #efeae9;
}

.menu-ifr-row {
    padding: 0 0px 20px 0;
    border-bottom: thin solid #aaa;
    margin: 0 20px;
}

.menu-ifr-header {
    font-size: 20px;
}
.menu-ifr-cell {
    color: #555;
    padding: 5px 0 0 0px;
}
.menu-ifr-text {
    padding-left: 5px;
}
.menu-ifr-text label {
    padding: 0 5px 0 0;
    color: #888;
    font-size: 13px;
}
div#ifr-body-active-forwarding {
    background: transparent;
    border: none;
}
#thl-menu-item-text-dark-mode {
    position: absolute;
    bottom: 99px;
}
#thl-menu-item-text-logout {
    position: absolute;
    bottom: 49px;
}
.top-bar-user-info {
    display: inline-block;
    /* float: right; */
    vertical-align: top;
    margin: 15px 8px 0 20px;
    cursor: default;
}
.top-bar-user-info:hover {
    background-color: transparent;
}

.top-bar-user-info-item {
    text-align: right;
    font-size: 15px;
    padding-top: 4px;
}

.result-menu-container {
    position: absolute;
    background-color: var(--result-menu-bg);
    border: thin solid #ccc;
    overflow: hidden;
    transition: all ease-in-out .2s;
}
.result-menu-container[thl-menu-status=active] {
    height: 154px;
    border-width: 1px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0 0 3px rgba(0,0,0,.15);  /* Firefox 3.5 - 3.6 */
    box-shadow: 0 0 3px rgba(0,0,0,.15);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.result-menu-container[thl-menu-status=inactive] {
    height: 0px;
    border-width: 0px;
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0 0 0 rgba(0,0,0,0);  /* Firefox 3.5 - 3.6 */
    box-shadow: 0 0 0 rgba(0,0,0,0);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.result-menu-item {
    padding: 10px 15px;
    display: block;
    color: #555;
    cursor: pointer;
}
.result-menu-item:hover {
    background-color: var(--result-menu-bg-hover)
}



/* --------------- */





/* ELEMENTS: text, inputs, labels, buttons, result rows, etc. */

.loading {
    display: block;
    width: 32px;
    height: 32px;
    padding: 4px;
    margin: 50px auto -90px;
    border-radius: 50%;
    border: 6px solid var(--purple-dk);
    border-color: var(--purple-dk) transparent var(--purple-dk) transparent;
    animation: loading 1.2s linear infinite;
    transition: opacity ease-in-out .5s;
    opacity: 1;
  }
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }



  #app-loading-ele {
      position: absolute;
      top: calc(50% - 80px);
      left: calc(50% - 16px);
      margin: 0;
  }

.cbResultSetData {
    font-size: 15px;
    padding: 6px;
}
.cbFormFieldCell {
    width: calc(100% - 10px) !important;
    display: inline-block;
    margin: 10px 2px 20px 8px;
}

.thl-field-element, input[type="text"], input[type="eml"], input[type="email"], input[type="date"], input[type="number"], input[type="url"], input[type="tel"], input[type="password"], select, #UIToolBox, textarea, div.ListData div.Body, .app-data-field, div.app-data-multiselect {
    color: var(--field-color);
    font-size: 15px;
    font-family: var(--font-main);
    font-weight: 400;
    padding: 8px;
    min-height: 32px;
    margin: 0 0 var(--element-vertical-margin-main) 0;
    background: var(--field-bg-main);
    border: var(--field-border);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* -webkit-box-shadow: inset 0 0 4px rgb(0 0 0 / 10%);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,.1);
    box-shadow: inset 0 0 4px rgb(0 0 0 / 10%); */
    outline: none;
}

.thl-field-element:hover , input[type="text"]:hover, input[type="eml"]:hover, input[type="email"]:hover, input[type="date"]:hover, input[type="number"]:hover, input[type="url"]:hover, input[type="tel"]:hover, input[type="password"]:hover, select:hover, textarea:hover, div.ListData div.Body:hover {
    border-color: var(--field-border-hover);
}

.thl-field-element:focus, input[type="text"]:focus, input[type="eml"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="password"]:focus, select:focus, textarea:focus, div.ListData div.Body:focus {
    outline: thin solid var(--field-border-focus);
    border-color: var(--field-border-focus);

}
.input-height-150 {
    max-height: 150px;
}
.input-height-300 {
    max-height: 300px;
}
.input-height-450 {
    max-height: 450px;
}
.input-height-600 {
    max-height: 600px;
}
div.app-data-multiselect {
    padding: 0;
    margin-left: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all ease-in-out .3s;
}
div[class*=input-height][thl-status=expanded] {
    max-height: 1200px;
}

div.app-data-multiselect-option {
    padding: 0px;
}
div.app-data-multiselect-option label {
    padding: 3px;
    width: calc(100% - 34px);
    display: inline-block;
}
div.app-data-multiselect-option label:hover {
    background-color: var(--button-hover);
    color: var(--button-color-hover);
}

[type=radio], [type=checkbox] {
    margin: 10px 0 0 10px;
    cursor: pointer;
}
[type=radio]+label, [type=checkbox]+label {
    cursor: pointer;
    color: var(--field-color);
}

[type=radio]+label:hover, [type=checkbox]+label:hover {
    background-color: var(--button-hover);
    color: var(--button-color-hover);

}



.cbResultSetLabel {
    font-weight: 300;
    font-size: 15px;
    text-align: left;
    padding: 8px 6px;
    border-bottom: 2px solid var(--purple-dk);
}

.cbFormLabelCell, .cbFormLabel, [data-cb-name=cbFormDataRadios] label, label.app-data-label {
    font-family: var(--font-main);
    color: var(--field-label-color);
    font-weight: 300;
    font-size: 15px;
    padding: 13px 10px 0 4px;
    width: calc(100% - 20px);
    text-align: right;
    vertical-align: top;
}

.cbFormNestedTableContainer .cbFormLabelCell, .cbFormNestedTableContainer .cbFormLabel {
    text-align: left;
    vertical-align: top;
}
.app-data-row .app-data-field {
    width: calc(100% - 260px);
    margin-left: 10px;
}
.app-data-row.cols-2 .app-data-cell .app-data-field {
    width: calc(100% - 20px);
}

label.app-data-label {
    width: 220px;
    display: inline-block;
}

.label-hint {
    vertical-align: 3px;
    width: 21px;
    height: 19px;
    display: inline-block;
    margin: 0 0 0 5px;
    text-align: center;
    padding-top: 3px;
    visibility: hidden;
}
.label-hint i {
    font-size: 14px;
}
.label-hint[thl-status=active] {
    visibility: visible;
}

.label-caret {
    vertical-align: 3px;
    width: 21px;
    height: 19px;
    display: inline-block;
    margin: 0 0 0 5px;
    text-align: center;
    transform: rotate(90deg);
    transition: all ease .3s;
}
.label-caret i {
    font-size: 14px;
}
.label-caret[thl-status=expanded] {
    transform: rotate(0deg);
}
.label-caret[thl-status=collapsed] {
    transform: rotate(90deg);
}

label.app-data-label.label-top, .app-data-field.label-top {
    width: calc(100% - 10px);
    text-align: left;
}

[data-cb-name="data"] {
    height: 60px;
}
[data-cb-name="data"] td[class*=cbResultSet] div, [data-cb-name="data"] td[class*=cbResultSet] {
    font-weight: 300;
    /* max-height: 37px; */
    overflow: hidden;
}

.interaction-hdr-cell {
    display: block;
    margin: 5px 00px 5px 80px;
    width: calc(100% - 90px);
}
.interaction-hdr label {
    width: 100px;
    text-align: right;
    display: inline-block;
}
.interaction-hdr .display-field, .interaction-hdr label {
    color: #666;
    font-size: 14px;
    font-weight: 300;
}
select#contact_type {
    width: calc(100% - 141px);
}
.app-frame-section {
    border-bottom: 2px solid #555;
    transition: height ease-in-out .5s;
    overflow: hidden;
    margin: 15px;
}
[thl-section=int-contact-details][thl-status=expanded] {
    height: 450px;
}
[thl-section=int-location][thl-status=expanded] {
    height: 610px;
}
[thl-section=int-connection][thl-status=expanded] {
    height: 325px;
}
[thl-section=int-summary][thl-status=expanded] {
    height: 530px;
}


.app-frame-section[thl-status=collapsed] {
    height: 50px;
}

.app-data-section-hdr {
    display: block;
    height: 40px;
    margin-bottom: 10px;
    cursor: pointer;
}
.app-data-section-hdr:hover {
    background-color: var(--icon-bg-hover);
}
.app-data-section-hdr h1 {
    font-weight: 300;
    font-size: 21px;
    text-align: left;
    padding: 5px 0 5px 10px;
    width: calc(100% - 80px);
    float: left;
    margin: 0;
}
.app-data-section-hdr-btns {
    float: right;
    width: 60px;
    height: 30px;
    margin: 5px 0;
}
.app-data-section-hdr-btns .btn-icon {
    float: right;
}

.app-data-row {
    display: inline-block;
    padding: 5px;
    width: calc(100% - 11px);
}

.app-data-row.cols-2 .app-data-cell {
    width: calc(50% - 10px);
    float: left;
}
.app-data-row.cols-2 .app-data-cell label {
    text-align: left;
    width: calc(100% - 15px);
    padding: 6px;
}


/* label {
    display: inline-block;
} */
.display-field {
    display: inline-block;
    margin: 0px 20px;
}

select, #UIToolBox { 
    padding: 6px;
}

option, #UIToolBox .cbFormAutoCompleteOption, #UIToolBox .cbFormAutoCompleteOption_hover {
    padding: 3px;
    white-space: nowrap;
    overflow: hidden;
    color: var(--field-option-color);
}

option:hover, #UIToolBox .cbFormAutoCompleteOption_hover {
    background-color: var(--button-hover);
    color: var(--button-color-hover);
}



[data-cb-name="cbFormDataRadios"] {
    display: inline-block;
    margin: 0 0 var(--element-vertical-margin-main) 10px;
}

::placeholder {
    font-size: 15px;
    color: #aaa;
	font-family: var(--font-main);
}




.result-action-box, .directory-result-action-cell {
    width: 60px;
}
.result-action-cell {
    width: 26px;
    height: 26px;
    float: left;
    padding: 2px;
    cursor: pointer;
}
.result-action-cell:hover {
    background-color: #eee;
}

.result-action-cell .thl-icon {
    /* outline: blue thin solid; */
    margin: 5px 0 0 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.directory-result-name {
    width: 180px;
}
.directory-result-phone {
    width: 110px;
}
[data-cb-name="data"] td.cbResultSetTableCell:nth-child(4) div {
    width: 80px;
}
.directory-result-address {
    width: 160px;
}
.directory-result-bed-inventory {
    width: 30px;
}
.directory-result-bed-inventory-updated {
    width: 80px;
}
.directory-result-bed-inventory-updated {
    width: 80px;
}


[data-cb-name=cbFormDataRadios] label {
    color: var(--field-option-color);
    font-weight: 500;

}


a.cbResultSetActionsLinks {
    font-size: 13px;
}

td.cbResultSetRecordMessage {
    font-size: 13px;
    text-align: center;
}




.site-btn, .site-btn-2, [type="submit"], .search-btn, [type="search"] {
    border: var(--button-border);
    background-color: var(--button-bg-main);
    color: var(--button-color);
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
    float: right;
    text-align: center;
    font-size: 15px;
    padding: 8px 0;
    min-width: 100px;
}

.btn-cols-1 {
    margin: 10px 0 var(--element-vertical-margin-main) 15%;
    display: inline-block !important;
    width: 70%;
    min-width: 150px;
}

.btn-cols-2 {
    width: calc(50% - 27px);
    margin: 10px;
}

.site-btn-2, [name="Mod0DeleteRecord"], [name="Mod0CancelRecord"] {
    font-weight: 300;
    background-color: var(--button-bg-2);
}

.site-btn:hover, .site-btn-2:hover, [type="submit"]:hover, .search-btn:hover, [type="search"]:hover, .site-btn-2:hover, [name="Mod0DeleteRecord"]:hover, [name="Mod0CancelRecord"]:hover {
    color: var(--button-color-hover);
    border-color: var(--button-color-hover);
}

#Submit[disabled], #Submit[disabled=true] {
    color: var(--button-color-disabled);
    border-color: var(--field-border-disabled);
    cursor: default !important;
}
#Submit[disabled]:hover, #Submit[disabled=true]:hover {
    background-color: transparent !important;
}

.report-criteria-list {
    list-style-type: none;
    border-bottom: thin solid #ddd;
    float: left;
    margin-left: 10px;
    padding: 4px 0;
    width: calc(100% - 20px);
}
.report-criteria-list {
    margin-bottom: 10px;
    width: calc(100% - 20px);
    min-width: 780px;
}

.report-criteria-list li {
    font-size: 15px;
    color: #555;
    padding: 3px 7px;
    float: left;
}



.info-frame, .cbFormHintTipContainer, .hint-popup {
    background-color: var(--info-frame-bg);
    border: thin solid #c0c0c0;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0 0 3px rgba(0,0,0,.15);  /* Firefox 3.5 - 3.6 */
    box-shadow: 0 0 3px rgba(0,0,0,.15);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    margin: 0 4px 0 0;
    color: #222;
    padding: 20px;
    position: absolute;
    font-size: 15px;
    line-height: 1.4;
    width: 250px;
}

.info-row {
    margin: 0 0 10px 0;;
}
.info-label {
    font-weight: 300;
    font-size: 13px;
}
.info-data {
    line-height: 1.5;
}
.hint-popup {
    max-width: 500px;
}

.cbFormHintLabelImage {
    padding: 6px;
    vertical-align: -9px;
}
/* --------------- */





/* ICONS */

.btn-icon i {
    font-size: 12px;
}

.tab-btn {
    float: right;
    width: 24px;
    height: 24px;
    padding: 1px 0 0 0;
    cursor: pointer;
    color: var(--icon-color);
}
.cbFormHintLabelImage {
    color: var(--icon-color);
}


.btn-icon:hover, .cbFormHintLabelImage:hover {
    background-color: var(--icon-bg-hover);
}



.btn-expand {
    width: 30px;
    height: 25px;
    text-align: center;
    padding: 5px 0 0 0;
    transition: transform ease-in-out .5s;
}

[thl-status=expanded] .btn-expand {
    transform: rotate(0);
}
[thl-status=collapsed] .btn-expand {
    transform: rotate(90deg);
}



/* --------------- */





/* LAYOUT: frames, boxes, iframes */


.ifr-body {
    float: left;
    width: calc(100% - 0px);
    height: 100%;
    border-top: none;
    overflow-x: auto;
    overflow-y: auto;
}
.in-body {
    float: left;
    width: calc(100% - 0px);
    height: 100%;
    border-top: none;
    overflow-x: auto;
    overflow-y: auto;
}



.app-frame {
    overflow: hidden;
    position: absolute;
    transition: all ease-in-out .5s;
}

.app-frame-header-tab {
    float: left;
    text-align: center;
    cursor: pointer;
    background-color: var(--inactive-ele-bg-main);
    border: thin solid #ccc;
    border-bottom: #fff;
    border-radius: 8px 8px 0 0;
    height: 25px;
}
.app-frame-header-tab p {
    float: left;
    width: calc(100% - 65px);
    padding: 4px 0 0px 12px;
    text-align: left;
    font-weight: 300;
    font-size: 15px;
    color: var(--heading-color);
}
.app-frame-content, .app-frame-content-search-result-map {
    height: calc(100% - 41px);
    width: calc(100% - 2px);
    float: left;
    border: 1px solid #bbb;
    border-top: none;
}

.app-frame-header-tab[thl-tab-status=active] {
    background-color: var(--active-ele-bg-main);
}

.app-frame[thl-frame-status=full-screen] {
    width: calc(100% - 10px) !important;
    height: calc(100% - 61px) !important;
    top: 56px !important;
    left: 5px !important;
    z-index: 9;
}

#app-frame-interaction {
    width: calc(50% - 5px);
    height: calc(100% - 61px);
    top: 56px;
    left: 5px;
}
#app-frame-search {
    width: calc(50% - 10px);
    height: calc(100% - 61px);
    left: calc(50% + 5px);
    top: 56px;
}

#app-frame-directory-search-result-list {
    width: calc(50% - 10px);
    height: calc(50% - 36px);
    left: calc(50% + 5px);
    top: calc(50% + 31px);
}
#app-frame-directory-search-result-map {
    width: calc(20% - 10px);
    height: calc(50% - 30px);
    left: calc(80% + 5px);
    top: calc(0% + 56px);
}

.app-frame-content-div, .ifr-body {
    height: 100%;
    background-color: var(--active-ele-bg-main);
}
.app-frame-content-div[thl-frame-status=active] {
    display: block;
}
.app-frame-content-div[thl-frame-status=inactive] {
    display: none;
}



/* --------------- */





/* SLIDE */

.thl-slide-ele {
    background: rgba(255,255,255,.6);
    position: absolute;
    left: 100%;
    top: 0%;
    width: 100%;
    height: 100%;
    transition: left ease 1s;
}
[thl-slide-status=inactive] {
    left: 100%;
}
[thl-slide-status=active] {
    left: 0%;
}

.thl-slide-content {
    background: #fff;
    width: 1000px;
    margin: 80px auto;
    padding: 0px;
    height: calc(100% - 180px);
    border-radius: 8px 8px 0 0;
    border: thin solid #999;
    display: block;
    box-shadow: 0 1px 5px rgb(0 0 0 / 14%);
}



/* --------------- */





/* GLOBAL OVER RIDES */
.hide {
    display: none !important;
}