html {}
body {
     margin: 0px;
     padding: 0px;
     width: 100vw;
     height: 100vh;
     background: #EBEDF2;
     font-family: 'Open Sans';
}
h1,h2,h3,h4,h5,h6,p { margin: 0px; }

body-container {
     width: 100vw;
     /* height: 203%; */
     position: absolute;
     /* height: calc(100% - 60px); */
     /* overflow: auto; */
     margin-top: 60px;
}
body-content {
     display: inline-block;
     float: right;
     width: calc(100vw - 60px);
     min-height: calc(100vh - 60px);
}

content-section {
     opacity: 0.0;
     display: none;
}
content-section[selected] {
     opacity: 1.0;
     display: block;
}

.submenu_section {
     opacity: 0.0;
     display: none;
}
.submenu_section[selected] {
     opacity: 1.0;
     display: block;
}

table {
     width: calc(100% - 40px);
     border-collapse: collapse;
     background: #fff;
     margin: 20px;
     box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
}
table tr { height: 45px; cursor: pointer; }
tr{ border-bottom: 1px solid #EBEFF4; }

table th, td {
     text-align: right;
}

td[clickable] {
     transition: all 200ms ease-out;
}
td[clickable]:hover > .sub_column {
     color: #5273F1;
     font-size: 15px;
}

.header_row {}
.sorting_indicator {}
.sorting_indicator::before { content: URL('../images/Sortable.png'); margin-right: 5px; display: none;}
.sorting_indicator[ascending]::before { content: URL('../images/Ascending.png'); display: none;}
.sorting_indicator[decending]::before { content: URL('../images/Decending.png'); display: none;}


.column_title {
     color: #66778A;
     font-weight: 300;
     font-size: 15px;
}
.bold-title {
     color: #3A3E42;
     font-weight: 700;
     font-size: 15px;
}
.align-left {
     text-align: left;
}

.select_box_column { width: 50px; text-align: center; }
.use_column { width: 125px; }
.more_menu_column { width: 50px; }
.mini_column { width: 50px !important; }
.small_column { width: 50px; }
.medium_column { width: 70px; }
.big_column { width: 125px; }

.main_column {
     color: #152242;
     font-weight: 600;
     font-size: 14px;
     text-align: left;
     max-width: 40%;
     word-break: break-all;
     overflow: auto;
}
.sub_column {
     color: #3A3E42;
     font-weight: 500;
     font-size: 14px;
     width: 150px;
}
.select_button {
     height: 28px;
     width: 80px;
     border-radius: 8px;
     background-color: #E6EAFC;
     border: 1px solid #CFD8FA;
     cursor: pointer;
}
.select_button_text {
     font-weight: 500;
     font-size: 16px;
     color: #5273F1;
}
.more_menu_icon {
     cursor: pointer;
     position: relative;
     z-index: 0;
}
.more_menu_icon::before {
     content: " ";
     width: 100%;
     height: 100%;
     border-radius: 50%;
     position: absolute;
     z-index: -1;
     transition: transform 400ms linear, background-color 200ms ease-out;
}
.more_menu_icon:hover::before {
     transform: scale(1.3);
     background-color: #dedede;
}


[type=checkbox] {
     -webkit-appearance: none;
     width: 20px;
     height: 20px;
     border: 1px solid #DFE1E1;
     border-radius: 3px;
     margin-left: 12px;
     cursor: pointer;
}
[type=checkbox]:checked {
     background: #5273F1;
}
[type=checkbox]:checked::after {
     content: '\2714';
	font-size: 14px;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
	/* position: absolute; */
	/* top: 0px; */
	/* left: 3px; */
	/* color: #99a1a7; */
}
.checkbox_container, .more_menu_icon_container {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
input[type="text"] {
     height: 40px;
     border-radius: 8px;
     width: 300px;
     background-color: #e8ebf7;
     font-family: 'Open Sans';
     font-size: 14px;
     text-indent: 8px;
     border: 1px solid #d5ddfb;
}

label[disabled] > .form_field_title {
     color: gray;
     opacity: 0.8;
}
label[disabled] > input {
     background-color: #eaeaea;
     border-color: #d2d2d2;
     opacity: 0.6;
}

button {
     height: auto;
     min-height: 30px;
     padding: 2px 9px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: "Open Sans";
     font-size: 13px;
     font-weight: 600;
     border-radius: 5px;
     border: 1px solid transparent;
     cursor: pointer;
     background-color: #E6EAFC;
     color: #5273F1;
     word-break: keep-all;
     transition: 500ms all cubic-bezier(0.22, 0.61, 0.36, 1); /*Out * Cubic*/
}
button[disabled] { background: #a4a8b7; color: #071752; cursor: default; }
button[border] { border: 1px solid #5273F1; }
button[center] { margin: auto; }
button[distructive] {
     background: #c31818;
     color: white;
}
button[bold] { font-weight: 700; }
button[bigger] { font-size: 15px; padding: 10px; }

button:not([distructive]):not([disabled]):hover { background-color: #5273F1; color: white; }
button:not([disabled])[distructive]:hover { background-color: white; color: #c30000; }

button[inverted] { background-color: #5273F1; color: white; }
button:not([distructive]):not([disabled])[inverted]:hover { background-color: #E6EAFC; color: #5273F1; }
button[border-inverted]:not([disabled]):hover { border: 1px solid #5273F1; }

table-actions {
     width: calc(100% - 40px);
     margin: 20px;
     display: flex;
     align-items: center;
     justify-content: flex-start;
}
table-actions button {
     height: 30px;
     border: none;
     border-radius: 3px;
     color: #838899 !important;
     background-color: white !important;
     cursor: pointer;
     position: relative;
     padding: 4px 20px;
     font-size: 14px;
     font-weight: 600;
     outline: none;
}
table-actions > :not(:last-child) { margin-right: 10px; }

table-actions button.tall {
     min-height: 38px;
}

table-actions button[distructive] { background: #c31818 !important; color: white !important; }

table-actions button:not([disabled]):not([distructive]):hover { background: #f6f7fb !important; }
table-actions button[disabled] { pointer-events: none; background: #d0d0d0 !important; }

table-actions button:not([disabled])[distructive]:hover { background-color: white !important; color: #c30000 !important; }

table-actions label {
     height: 30px;
     border: none;
     border-radius: 3px;
     color: #838899 !important;
     background-color: white !important;
     cursor: pointer;
     position: relative;
     padding: 4px 20px;
     font-size: 14px;
     font-weight: 600;
     display: flex;
     align-items: center;
}

table-actions label:not([disabled]):hover { background: #f6f7fb !important; }
table-actions label[disabled] { pointer-events: none; background: #d0d0d0 !important; }

table-actions label.table_actions_text {
     height: 30px;
     border: none;
     border-radius: 3px;
     color: #838899 !important;
     background-color: white !important;
     cursor: default;
     position: relative;
     padding: 4px 20px;
     font-size: 14px;
     font-weight: 600;
     display: flex;
     align-items: center;
}

table-actions label.table_actions_text:not([disabled]):hover { background-color: white !important; }
table-actions label.table_actions_text[disabled] { pointer-events: none; background: #d0d0d0 !important; }



table-search {
     width: calc(100% - 40px);
     margin: 20px;
     height: 50px;
     background: white;
     display: flex;
     align-items: center;
     box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
}
.table-search-bar-container {
     width: calc(50% + 65px);
     display: flex;
     height: 100%;
     align-items: center;
}
.table-search-bar {
     /* height: 100% !important; */
     /* width: 50% !important; */
     height: 97% !important;
     width: 100% !important;
     border-radius: 0px !important;
     border: none !important;
     background: none !important;
     border-right: 1px solid #66778A !important;
}
.table-search-button {
     height: 100%;
     /* width: 50px; */
     width: 55px;
     background: #5e92d8;
     border: none;
     border-radius: 0px !important;
     margin-right: 10px;
     cursor: pointer;
}
.table-search-button:not([disabled]):hover { background: #6da4ef !important; }
.table-search-button:not([disabled]):hover > .material-icons { transform: scale(1.1); }
.table-search-button > .material-icons {
     font-size: 26px;
     color: #fff;
}

table-tags {
     display: flex;
     max-width: 50%;
     height: 100%;
     overflow: hidden;
     overflow-x: auto;
}
tags-container {
     display: flex;
     align-items: center;
     justify-content: flex-start;
}
tags-container > :last-child { margin-right: 10px; }

tag {
     height: 24px;
     background: #2F3139;
     color: #FFF;
     padding: 3px 22px;
     border-radius: 20px;
     position: relative;
     overflow: hidden;
     word-break: keep-all;
     white-space: nowrap;
}
tag:not([disabled]):not([inactive]):hover {}
tag:not([disabled]):not([inactive]):hover > .close-icon { opacity: 1.0; }
tag .close-icon {
     transition: 200ms all linear;
     height: 100%;
     right: 3px;
     top: 1.5px;
     bottom: 0px;
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0.0;
     background: #737375;
     border-radius: 50%;
     width: 24px;
     height: 24px;
     cursor: pointer;
     user-select: none;
}
tag { margin-right: 5px; }
tag[inactive] {
     background: #6c707d;
     color: #fff;
     opacity: 0.7;
     cursor: pointer;
}
tag[inactive]:hover { background: #2F3139; opacity: 1.0; }

#more_menu {
     top: 225px;
     right: 25px;
     width: 165px;
     position: absolute;
     background: #F6F8F9;
     border: 1px solid #DDE2E7;
     border-radius: 4px;
     box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.25);
}
#more_menu::after {
     content: "";
     right: 7px;
     top: -10px;
     width: 0;
     height: 0;
     border-style: solid;
     /* border-width: 10px 10px 0 10px; */
     border-width: 10px 14.5px 0 14.5px;
     border-color: #DDE2E7 transparent transparent transparent;
     /* border-color: #F6F8F9 transparent transparent transparent; */
     position: absolute;
     transform: rotate(-180deg)
}
.more_menu_item {
     height: 45px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     padding-left: 23px;
     cursor: pointer;
}
.more_menu_item:hover {
     background-color: #E6EAFC;
}
.more_menu_item:not(:last-child) {
     border-bottom: 1px solid #DAE0E6;
}
.more_menu_item_text {
     font-weight: 600;
     color: #4D6CE1;
     font-size: 16px;
}

.indicator_container {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
}
.indicator {
     width: 15px;
     height: 15px;
     border-radius: 50%;
     /* border: 0.5px solid */
     box-shadow: 0px 0.7px 4px 1px rgba(0,0,0,0.4);
}
.is_online_indicator { background-color: #87bf87; border-color: #356935; }
.is_offline_indicator { background-color: rgba(222, 83, 83, 0.8); border-color: #a94442; } /*background-color: #f1bdbd; border-color: #a94442; }*/

.required_field {
     font-size: 12px;
     margin-left: 10px;
     padding: 1px 5px;
     border-radius: 2px;
     color: #a94442;
     background-color: #f2dede;
     border-color: #ebccd1;
}

.form_field_title_required_container {
     display: flex; justify-content: space-between; align-items: center;
}

.form_field_title_container {
     display: flex;
     align-items: center;
}

.help_tooltip_icon {
     /* font-size: 20px !important; */
     transform: scale(0.9);
     cursor: pointer;
     margin-left: 5px;
}

.clickable {
     transition: all 200ms ease-out;
     cursor: pointer;
}
.clickable:hover {
     color: #5273F1;
     font-size: 17px;
}

/* clickable:not(td) {
     transition: all 200ms ease-out;
}
clickable:not(td):hover > * {
     color: #5273F1;
     font-size: 15px;
} */

@media screen and (max-width:830px) {

     .form { align-items: center; }

     .form_elements_group {
          flex-direction: column;
     }
     .form_elements_group > .spacer { display: none; }
     .form_elements_group > label:not(:last-child) { margin-bottom: 10px; }
}

@media screen and (max-width:500px) {

     body {
          /* background: green !important; */
     }
     table {
          min-width: 850px;
     }
     table-actions {
          display: block;
     }
     table-actions > button {
          display: inline-flex;
          margin: 4px 2px;
     }

     table-actions > .table_actions_text, .table_actions_label {
          display: inline-flex;
          margin: 4px 2px;
          width: calc(100% - 40px);
     }

     table-actions > .table_actions_label {
          margin-top: 0px;
     }

     table-search {
          height: 100px;
          flex-direction: column;
          align-items: flex-start;
          overflow: hidden;
     }
     .table-search-bar-container {
          width: 100%;
          display: flex;
          height: 100%;
     }
     .table-search-bar {
          width: 100% !important;
     }
     .table-search-button { margin-right: 0px; }

     table-tags {
          max-width: calc(100% - 20px);
          margin-right: 20px;
          margin-left: 10px;
     }

     .sub_column {
          overflow: auto;
          word-break: break-all;
     }
     .header_row > th {
          word-break: keep-all;
     }
     .main_column {
          min-width: 215px;
     }

     .form_elements_group { width: 100%; }

     input[type="text"] {
          width: 100%;
     }

     input[type="number"] {
          width: 100% !important;
     }

     content-navigation {
          width: 175px !important;
          display: grid;
     }

     content-navigation > button[selected] {
          order: -1;
          padding-right: 20px !important;
     }

     /* content-navigation[closed] > button[selected] { box-shadow: none; } */

     content-navigation > button {
          border-radius:  0px;
          width: 100%;
          box-shadow: 0px 7px 6px 0px rgba(0,0,0,0.4);
          height: 40px !important;
     }
     content-navigation > button:not([selected]) {
          padding: 4px !important;
     }

     content-navigation[closed] > button:not([selected]) {
          opacity: 0.0;
          transform: translateX(200px);
     }

     content-navigation > button:last-child {
          border-radius: 0 0 3px 3px;
          z-index: 100;
     }

     content-navigation button[selected]::before { display: none; }

     content-navigation button[selected]::after {
          content: 'menu' !important;
          font-family: 'Material Icons';
          font-size: 24px;
          width: 24px !important;
          height: 24px !important;
          border: none !important;
          position: relative !important;
     }
}