@import url(./reset.css);
@import url(./fonts.css);
@import url(./icons.css);
@import url(./colors.css);
@import url(./loading.css);
@import url(./app_message.css);
@import url(./app_tab.css);
@import url(./app_window.css);
@import url(./form.css);

body {
   color: var(--body-font-color);
   display: flex;
   flex-direction: row;
   font-family: "roboto";
   font-size: 16px;
   line-height: 1;
}

.app-loading {
   align-items: center;
   background-color: var(--main-bg-window);
   display: none;
   height: 100vh;
   left: 0;
   justify-content: center;
   position: fixed;
   top: 0;
   width: 100vw;
   z-index: 1000;
}

body.loading .app-loading {
   display: flex;
}

.app-box-1 {
   background-color: #FFF;
   border-left: 4px solid var(--body-light-font-color);
   border-radius: 8px;
   box-shadow: var(--body-shadow-light);
   padding: 15px;
}

.app-box-form-filter {
   margin-left: 20px;
   width: 450px;
}

.app-box-form-filter form {
   display: flex;
}

.app-box-form-filter .app-form-field {
   margin-bottom: 0;
   padding-right: 10px;
   width: calc(100% - 40px);
}

.app-list-options ul {
   display: flex;
   flex-direction: column;
}

.app-list-options ul li {
   width: 100%;
}

.app-list-options ul li a {
   background-color: #FFF;
   border: 1px solid #CCC;
   border-radius: 8px;
   box-shadow: var(--body-shadow-light);
   display: block;
   margin: 5px;
   padding: 10px;
   padding-left: 35px;
   position: relative;
}

.app-list-options ul li a:before {
   content: "\f15c";
   font-family: var(--font-icon);
   font-size: 1.2rem;
   left: 10px;
   position: absolute;
   top: 10px;
}

.app-list-options ul li a div {
   color: var(--body-lighter-font-color);
   font-size: 0.85rem;
   line-height: 1.3;
}

.app-list-options ul li a h3 {
   font-size: 0.9rem;
   margin-bottom: 3px;
}

.app-list-options ul li a:hover {
   background-color: var(--body-hl-color-2-hover-bg);
   border-color: var(--body-hl-color-2-hover);
}

.app-list-options ul li a:hover:before {
   color: var(--body-hl-color-2-hover);
}

.app-list-options ul li a:hover h3 {
   color: var(--body-hl-color-2-hover);
}

.app-list-options ul li a:hover div {
   color: var(--body-hl-color-2-hover);
}

.app-page-actions-bar {
   align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}


.app-page-body {
   padding: 20px 0;
   position: relative;
}

.app-page-body-content {
   background-color: var(--body-main-bg-color);
   border-radius: 8px;
   box-shadow: var(--body-shadow-light);
   height: calc(100vh - 190px);
   width: 100%;
}

.app-page-header {
   background-color: var(--body-main-bg-color);   
   border-left: 4px solid var(--body-light-font-color);
   box-shadow: var(--body-shadow-light);
   border-radius: 8px;
   padding: 15px 10px 15px 50px;
   position: relative;
}

.app-page-header:before {
   font-family: var(--font-icon);
   font-size: 1.4rem;
   left: 0;
   position: absolute;
   top: 20px;
   width: 50px;
}

.app-page-header .subtitle {
   font-size: 0.9rem;
}

.app-page-header .title {
   font-size: 1.4rem;
   font-weight: bold;
   line-height: 30px;
   margin-bottom: 5px;
}

.app-page-header.agents:before {
   content: "\f0c0";
   text-align: center;
}

.app-page-header.reports:before {
   content: "\f681";
   text-align: center;
}


.app-page-header.settings:before {
   content: "\f013";
   text-align: center;
}

.app-page-header .back {
   left: 10px;
   position: absolute;
   top: 45px;
   z-index: 2;
}

.app-table-list {
   border-collapse: separate; 
   border-spacing: 2px; 
   font-family: inherit;
   margin-top: 20px;
   width: 100%;
}

.app-table-list thead th {
   background-color: var(--table-list-head-bg-color);
   border-radius: 4px 4px 0 0;
   color: var(--table-list-head-color);
   font-size: 0.9rem;
   font-weight: bold;
   line-height: 1.2;
   padding: 6px 4px;
   text-align: left;
}

.app-table-list tbody tr td {
   background-color: var(--table-list-body-bg-color);
   line-height: 1.2;
   padding: 5px 4px;
   vertical-align: middle;
}

.app-table-list tbody tr:hover td {
   background-color: var(--table-list-body-bg-color-hover);
}

.app-table-list tbody tr:last-child td {
   border-radius: 0 0 4px 4px;
}

.app-table-list tfoot tr td {
   padding: 10px 0;
   text-align: center;
}

.btn-1 {
   border: 1px solid var(--button-border-color);
   background-color: var(--button-bg-color);
   color: var(--button-color);
   cursor: pointer;
   font-family: inherit;
   font-weight: bold;
   font-size: 0.9rem;
   padding: 5px 20px;
   text-transform: uppercase;
}

.btn-1:hover {
   background-color: var(--button-bg-color-hover);
   border-color: var(--button-border-color-hover);
   color: var(--button-color-hover);
}

.btn-1:active {
   background-color: var(--button-bg-color-active);
   border-color: var(--button-border-color-active);
   color: var(--button-color-active);
   padding: 6px 19px 4px 21px;
}

.btn-2 {
   border: 1px solid var(--body-hl-color-2);
   background-color: var(--body-hl-color-2);
   border-radius: 4px;
   color: var(--body-hl-color-2-inv);
   cursor: pointer;
   font-family: inherit;
   font-weight: bold;
   font-size: 0.9rem;
   /* margin: auto; */
   padding: 8px 20px;
   text-transform: uppercase;
}

.btn-2:hover {
   background-color: var(--body-hl-color-2-hover);
   border-color: var(--body-hl-color-2-hover);
}

.btn-2:active {
   background-color: var(--body-hl-color-2-active);
   border-color: var(--body-hl-color-2-active);
   color: var(--body-hl-color-2-inv);
   padding: 9px 19px 7px 21px;
}


.chat-history-box {
   height: calc(100vh - 180px);
   padding: 0 5px;
}

.chat-history-box-content {
   height: 100%;
   overflow: auto;
}

.chat-history-item {
   border-radius: 4px;
   display: block;
   font-size: 0.9rem;
   padding: 5px;
   margin-bottom: 5px;
   position: relative;
}

.chat-history-item:hover {
   background-color: var(--body-light-bg-color);
   color: var(--body-darker-font-color);
}

.chat-history-item .date {
   color: var(--body-light-font-color);
   font-size: 0.9rem;
}

.chat-history-item .delete {
   display: none;
   position: absolute;
   right: 5px;
   top: 7px;
}

.chat-history-item:hover .delete {
   display: block;
}

.chat-history-item .title {
   font-weight: bold;
   height: 24px;
   line-height: 24px;
   overflow: hidden;
   padding-right: 40px;
}

.chat-history-more {
   margin-top: 20px;
   text-align: center;
}

.chat-history-more .btn-1 {
   width: 100%;
}

.form-field {
   display: flex;
   padding-right: 5px;
   width: 100%;
}


.form-field input[type=text] {
   border: 1px solid var(--input-border-color);
   border-radius: var(--input-border-radius);
   font-family: inherit;
   font-size: 1rem;
   height: 34px;
   padding: 0 5px;
   width: 100%;
}

.form-field input[type=text]:focus {
   border-color: var(--input-border-color-focus);
}

header {
   display: flex;
   flex-direction: row-reverse;
   padding: 5px;
}

main {
   background-color: var(--main-bg-color);
   display: flex;
   height: 100vh;
   flex-direction: column;
   width: calc(100% - 300px);
}

.main-content {
   display: flex;
   flex-direction: column;
   flex-grow: 0;
   height: calc(100vh - 70px);
   overflow: auto;
   padding: 0px 20px 0px;
}

.menu-main {
   height: 100vh;
   width: 300px;
}

.menu-main-actions {
   display: flex;
   padding: 10px 5px;
}

.menu-main-actions .ic-1 {
   margin: 0 5px;
}

.main-menu-history form {
   align-items: center;
   display: flex;
   margin-bottom: 10px;
   padding: 0 5px;
   width: 100%;
}

.main-menu-history form .form-field {
   width: calc(100% - 40px);
}

.menu-main-title {
   display: flex;
}

.menu-main-title .content {
   padding-left: 10px;
   padding-top: 8px;
}

.menu-main-title .content .subtitle {
   color: var(--body-light-font-color);
   font-size: 1.1rem;
   font-weight: bold;
}

.menu-main-title .content .title {
   color: var(--body-darker-font-color);
   font-size: 1.8rem;
   font-weight: bold;
}

.menu-main-title .icon {
   background: url(../img/logo-icon-light.png) center no-repeat;
   background-size: 70%;
   height: 60px;
   width: 60px;
}

.user-box {
   position: relative;
   z-index: 10;
}

.user-box-icon {
   background-color: var(--body-hl-color-2);
   border: 2px solid var(--body-hl-color-2);
   border-radius: 50%;
   color: var(--body-hl-color-2-inv);
   font-size: 0.9rem;
   font-weight: bold;
   height: 40px;
   line-height: 40px;
   text-align: center;
   text-transform: uppercase;
   width: 40px;
}

.user-box-menu {
   opacity: 0;
   padding-top: 10px;

   transition: opacity 0.3s;
   -webkit-transition: opacity 0.3s;
}

.user-box-menu ul {
   background-color: var(--menu-user-bg-color);
   box-shadow: var(--body-shadow-light);
   border-radius: 10px;   
   display: none;
   font-size: 0.9rem;
   overflow: hidden;
   position: absolute;
   right: 0;
   width: 180px;
}

.user-box-menu ul li {
   border-bottom: 1px dotted var(--menu-user-border-color);
}

.user-box-menu ul li:last-child {
   border-bottom: 0;
}

.user-box-menu ul li a {
   color: var(--menu-user-color);
   display: block;
   padding: 8px 10px 8px 40px;
   position: relative;
}

.user-box-menu ul li a::before {
   font-family: var(--font-icon);
   left: 0;
   position: absolute;
   text-align: center;
   width: 40px;
}

.user-box-menu ul li a.user::before {
   content: "\f007";
}

.user-box-menu ul li a.logout::before {
   content: "\f2f5";
}

.user-box-menu ul li a:first-child {
   padding-bottom: 15px;
}

.user-box-menu ul li a:last-child {
   padding-top: 15px;
}

.user-box-menu ul li a:hover {
   background-color: var(--menu-user-bg-color-hover);
   color: var(--menu-user-color-hover);
}

.user-box:hover .user-box-menu {
   opacity: 1;
}

.user-box:hover .user-box-menu ul {
   display: block;
}