* {
    margin: 0;
    padding: 0;
    outline: 0;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
    font-size: 11px;
    font-familiy: arial;
    font-size: 15px;
    font-family: 'roboto';
    color: #004563;
}

body.full {
    min-width: 1200px;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px
}

img {
    border: none;
}

h1 {
    padding: 0.1em .5em;
    position: relative;
    font-size: 20px;
    font-family: "roboto";
    color: #004563;
    text-transform: uppercase;
    height: 70px;
    line-height: 90px;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #1693A5;
}

a.link.guide{
  text-decoration: underline !important;
  position: absolute;
  top:60px;
  left:220px
}

a:link.link {
  text-decoration: underline !important;
  color: #3a7cb2 !important;
}

a:visited.link {
  color: #3a7cb2 !important;
}

img {
    vertical-align: middle;
    border: none;
}

svg {
    vertical-align: middle;
    border: none;
    fill: #004563;
}

radio {
    margin-bottom: 20px;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

th .context_menu {
    width: 150px;
}

.nowrap {
    white-space: nowrap
}

.placeholder {
    color: #C7C7CD;
}



#all-frame {
    width: 100%;
    height: 100%;
    display: table;
}

#hdr-frame {
    display: table-row;
    width: 100%;
}

#bdy-frame {
    display: table-row;
    height: 100%;
    width: 100%;
}


#menu_action_slider {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
    cursor: pointer;
}

#structure {
    width: 100%;
    height: 100%;
    border-spacing: 0px;
}

#structure #table_header {
    width: 100%;
}

#structure #table_menu {
    height: 100%;
    vertical-align: top;
}

#structure #table_body {
    height: 100%;
    width: 99%;
    vertical-align: top;
}



#body_frame,
.table_frame_body {
    padding: 50px;
}

div#header {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: 100px;
    background-color: white;
    color: white;
    font-size: 14px;
    z-index: 2;
}

#breadcrumb {
    background-color: #38a2a4;
    width: 100%;
    height: 40px;

    position: relative;
}

#breadcrumb .brand a {
    color: white;
    position: absolute;
    margin-left: 5px;
}

#breadcrumb .brand a:after {
    position: absolute;
    bottom: -3px;
    left: 10%;
    width: 80%;
    height: 10px;
    border-top: 1px white solid;
    content: " ";
}

#breadcrumb .brand {
    line-height: 40px;
    padding-left: 100px;
    color: white;
    font-size: 13px;
    font-family: "roboto";
    text-transform: uppercase
}

#breadcrumb .site-selection {
    position: absolute;
    right: 110px;
    top: 4px;
    width: 350px;
    height: 30px;
    ;
}

#breadcrumb .history {
    position: absolute;
    right: 500px;
    top: 8px;
}

#breadcrumb .history .history-popup {
    z-index: 1001;
    position: absolute;
    top: 40px;
    right: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: white;
    display: none;
    border: 1px solid #004563;
    border-radius: 7px;
    width: 250px;
    height: auto;
    font-size: 10px;
}

#breadcrumb .history .history-popup:after {
    content: ' ';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #004563;
    position: absolute;
    top: -7px;
    right: 5px;
}

#breadcrumb .history .history-popup li {
    background-repeat: no-repeat;
    background-position: 10px 10px;
}


#breadcrumb .history .history-popup ul li {
    padding: 5px 10px 5px 10px;
    color: #004563;
    padding-left: 30px;
    cursor: pointer;
    height: 37px;
}

#breadcrumb .history .history-popup ul li span:first-child {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 170px;
    display: inline-block;
    white-space: nowrap;
}

#breadcrumb .history .history-popup ul li svg {
    float: left;
    width: 25px;
    padding-right: 0px;
    margin-left: -15px;
    padding-top: 4px;
}

#breadcrumb .history .history-popup ul li div {
    float: right;
    width: 180px;

}

#breadcrumb .history .history-popup ul li:hover {
    background-color: #e4e4e4;
}

#breadcrumb .history .history-popup ul {
    list-style: none;
}


#breadcrumb #clock {
    color: white;
    position: absolute;
    right: 26px;
    width: 50px;
    top: 6px;
    pointer-events: none;
}

#breadcrumb #sitedropdown {
    color: white;
    position: absolute;
    right: 20px;
    width: 1px;
    top: 4px;
    pointer-events: none;
}

#breadcrumb #sitedropdown svg {
    fill: #FFF;
    pointer-events: none;
}

#breadcrumb #clock span:nth-child(3) {
    display: none;
}

.transition_width {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.menu ul {
    list-style: none;
}

.menu ul li {
    padding: 5px;
    margin: 10px 4px 0px 7px;
    white-space: nowrap;
    overflow: hidden;
}

.menu ul li a {
    font-family: "roboto";
    font-size: 16px;
    color: #0b4563;
}

.menu ul li img {
    margin-right: 10px;
}

.menu ul li svg {
    margin-right: 10px;
}

.menu {
    background-color: #e4e4e4;
    height: 100%;
    width: 60px;
    color: white;
    outline: none;
}

.menu ul li ul {
    display: none;
}

.menu ul li ul li a {
    font-size: 13px;
    color: #227a93;
}

.menu ul li ul li svg {
    fill: #227a93;
}

.menu ul li:hover ul,
.menu ul li.open ul {
    display: inline;
}

.menu_big ul li ul li {
    padding-left: 20px;
}

.menu_small ul li {
    border-bottom: none;
}

.menu_small span {
    display: none;
}

.menu_big span {
    display: inline;
}

.options_menu {
    float: right
}

.content {
    margin-top: 100px;
    margin-left: 50px;
    width: auto;
    width: 90%;
    float: left;
}

/* BEGIN: Custom styling to fix "about" popup */
air-popup .mat-dialog-content.content {
    width: auto !important;
    float: none !important;
}

air-popup h4 {
    margin-top: 1.33em;
    margin-bottom: 1.33em;
}

/* END: Custom styling to fix "about" popup */

.table-selector-form {
    display: none;
    padding-left: 00px;
}

.table-selector-form div {
    display: none;
}

.ignore-table-margins {
    margin-top: -50px;
    display: block;
}

.table .selector {
    width: 50px;
}

.table tr:first-child .field_grouping {
    visibility: hidden;
}

.table tr .field_grouping {
    vertical-align: top;
}

.table tr .field_grouping div div {
    position: absolute;
    top: -20px;
    left: 0px;
    background-color: white;
}

.table tr .field_grouping>div {
    position: relative;
    width: 50px;
}

.table.small input,
.table.small select,
.table.small .combobox-main-container,
.table.small .input {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.table.small input[type='checkbox'] {
    height: auto;
}

.table {
    width: 100% !important;
    border-spacing: 0;
    border-collapse: collapse;
    font-family: inherit;
}

.table th,
.table td {
    padding: 10px 0px 10px 5px;
    font-size: 14px;
    font-weight: bold;
    font-family: "roboto"
}


.table th {
    color: #004563;
    position: relative;
    height: 50px;
    white-space: nowrap;
    text-align: left;
}

.table.toggleable th {
    padding-bottom: 0px;
    vertical-align: bottom;
}

.table.toggleable td,
.table.toggleable th {
    padding-left: 15px;
    padding-right: 15px;
}

.table th .sort {
    padding-left: 5px;
}

.shorten {
    text-overflow: ellipsis;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
}

.table_frame {
    position: relative;
}

.table_frame:after {
    content: " ";
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100%;
    height: 5px;
    border-bottom: 1px solid #004563;
    border-top: 1px solid #004563;
}

.table_title {
    padding-left: 0px;
    color: #38a2a4;
    text-transform: uppercase;
    font-family: "roboto";
    font-weight: bold;
    font-size: 18px;
    /*background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiBzdHlsZT0iZmlsbDojMzhhMmE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0MzguNTMzIDQzOC41MzMiPg0KPGc+DQoJPHBhdGggZD0iTTQwOS4xMzMsMTA5LjIwM2MtMTkuNjA4LTMzLjU5Mi00Ni4yMDUtNjAuMTg5LTc5Ljc5OC03OS43OTZDMjk1LjczNiw5LjgwMSwyNTkuMDU4LDAsMjE5LjI3MywwDQoJCWMtMzkuNzgxLDAtNzYuNDcsOS44MDEtMTEwLjA2MywyOS40MDdjLTMzLjU5NSwxOS42MDQtNjAuMTkyLDQ2LjIwMS03OS44LDc5Ljc5NkM5LjgwMSwxNDIuOCwwLDE3OS40ODksMCwyMTkuMjY3DQoJCWMwLDM5Ljc4LDkuODA0LDc2LjQ2MywyOS40MDcsMTEwLjA2MmMxOS42MDcsMzMuNTkyLDQ2LjIwNCw2MC4xODksNzkuNzk5LDc5Ljc5OGMzMy41OTcsMTkuNjA1LDcwLjI4MywyOS40MDcsMTEwLjA2MywyOS40MDcNCgkJczc2LjQ3LTkuODAyLDExMC4wNjUtMjkuNDA3YzMzLjU5My0xOS42MDIsNjAuMTg5LTQ2LjIwNiw3OS43OTUtNzkuNzk4YzE5LjYwMy0zMy41OTYsMjkuNDAzLTcwLjI4NCwyOS40MDMtMTEwLjA2Mg0KCQlDNDM4LjUzMywxNzkuNDg1LDQyOC43MzIsMTQyLjc5NSw0MDkuMTMzLDEwOS4yMDN6IE0zMzQuMzMyLDIzMi4xMTFMMjA0LjcxLDM2MS43MzZjLTMuNjE3LDMuNjEzLTcuODk2LDUuNDI4LTEyLjg0Nyw1LjQyOA0KCQljLTQuOTUyLDAtOS4yMzUtMS44MTQtMTIuODUtNS40MjhsLTI5LjEyMS0yOS4xM2MtMy42MTctMy42MTMtNS40MjYtNy44OTgtNS40MjYtMTIuODQ3YzAtNC45NDEsMS44MDktOS4yMzIsNS40MjYtMTIuODQ3DQoJCWw4Ny42NTMtODcuNjQ2bC04Ny42NTctODcuNjVjLTMuNjE3LTMuNjEyLTUuNDI2LTcuODk4LTUuNDI2LTEyLjg0NWMwLTQuOTQ5LDEuODA5LTkuMjMxLDUuNDI2LTEyLjg0N2wyOS4xMjEtMjkuMTMNCgkJYzMuNjE5LTMuNjE1LDcuODk4LTUuNDI0LDEyLjg1LTUuNDI0YzQuOTUsMCw5LjIzMywxLjgwOSwxMi44NSw1LjQyNGwxMjkuNjIyLDEyOS42MjFjMy42MTMsMy42MTQsNS40Miw3Ljg5OCw1LjQyLDEyLjg0Nw0KCQlDMzM5Ljc1MiwyMjQuMjEzLDMzNy45NDUsMjI4LjQ5OCwzMzQuMzMyLDIzMi4xMTF6Ii8+DQo8L2c+DQo8L3N2Zz4=');*/
    background-repeat: no-repeat;
    background-position: left;
}

.table_title_small {
    color: #38a2a4;
    font-family: "roboto";
    font-size: 14px;
}

.table.nohover tr:hover td {
    color: #004563;
}

.table tr:hover td,
.table tr.highlight td {
    color: #38a2a4;
}

.table td.type {
    background-repeat: no-repeat;
    background-position: center 10px;
    width: 50px;
}

#admin_details_form2 .table tr:hover td {
    color: #004563;
}

.table th svg,
.table td svg,
.table.nohover tr:hover td svg {
    fill: #004563;
}


.table tr:hover>td svg,
.table tr.highlight td svg {
    fill: #39a2a5;
}

.table th.refresh,
div.refresh {
    background-image: url('../images/refresh_20.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 50px;
    cursor: pointer
}

.table td {
    border-bottom: 1px solid #d1d1d1;
    font-weight: normal;
}



/* vertical ellipsis until non webkit supports line-clamp */
.table td .cell-content {
    overflow: hidden;
    position: relative;
    /* 1 line = 1.3 */
    line-height: 1.3em;
    /* max-height = line * lines max number (5 rows display) + 1 (ellipsis) */
    max-height: 7.8em;
}

/* create the ... */
.table td .cell-content:before,
.table td .cell-content .more {
    content: '...';
    position: absolute;
    left: 0;
    top: 6.5em;
    width: 100%;
    /* hide the 6th row */
    background-color: white;
}

.table td .cell-content .more {
    background-color: transparent;
    width: auto;
    left: 20px;
}

.table td .cell-content .more:before {
    content: '+ ';
}

.table td {
    max-height: 7.8em;
    overflow: visible;
}


/* show all by clicking link */
.table td .cell-content.open {
    max-height: none;
    padding-bottom: 1.3em;
}

.table td .cell-content.open:before {
    content: '';
}

.table td .cell-content.open .more {
    bottom: 0;
    left: 0;
    top: auto;
}

.table td .cell-content.open .more:before {
    content: '- ';
}

.table td,
.table th {
    padding-left: 20px;
    padding-right: 20px
}

.table td:first-child,
.table th:first-child {
    padding-left: 0px;
}

.table td.pinnable_row,
.table th.pinnable_row {
    padding-left: 0px;
    padding-right: 0px;
    width: 20px;
    margin-left: 0px;
    margin-right: 0px;
    cursor: pointer;
}

.table td.pinnable_row+td,
.table th.pinnable_row+th {
    padding-left: 8px;
}

.table td:last-child,
.table th:last-child {
    padding-right: 0px;
}

.table tr:last-child td {
    border-bottom: none;
}

.table_end {
    height: 50px;
    margin-bottom: 60px
}

.table_end.small {
    height: 20px;
    margin-bottom: 0px
}

.table_options {
    margin-left: 20px;
    cursor: pointer !important;
    position: relative;
    float: right;
    border: 1px solid #6d6d6d;
    color: #6d6d6d;
    border-radius: 7px;
    font-size: 10pt;
    font-weight: bold;
    font-family: "roboto";
    padding: 5px 40px 5px 10px;
}

.table_options.filter {
    outline-width: 0;
    outline: none;
}

.table_options svg {
    position: absolute;
    right: 12px;
    top: 7px;
    fill: #6d6d6d;
}

.table_options.empty {
    padding-right: 15px;
    height: 17px;
}

.table_options:hover {
    border-color: #39a2a5
}

.table .minimize td:nth-child(n+3) {
    display: none;
}

.table .minimize td,
.table .borderless td {
    border: none;
}

.sticky_table {
    position: absolute;
    top: -10px;
    padding-left: 20px;
    background-color: white;
    height: 30px;
}

.sticky_table tr td {
    color: #004563;
}

.table.less-padding td {
    padding: 5px 10px 5px 10px;
}

.table tr td:last-child {
    padding-right: 10px;
}

.table.sticky tr:first-child td {
    color: white;
}

.table .contexthelpheadercell {
    border-bottom: 0;
}

.filter_entry {
    float: left;
    margin-right: 20px;
    margin-top: 5px;
    margin-left: 0px;
    color: white;
    background-color: #39a2a5;
    border-color: #39a2a5;
}

.filter_entry svg {
    fill: white;
}


.sort_handle {
    width: 20px;
    height: 20px;
    float: left;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiBzdHlsZT0iZmlsbDogIzAwNDU2MzsiIHZpZXdCb3g9IjAgMCA0MDEuOTk4IDQwMS45OTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiPg0KCTxnPg0KCQk8cGF0aCBkPSJNNzMuMDkyLDE2NC40NTJoMjU1LjgxM2M0Ljk0OSwwLDkuMjMzLTEuODA3LDEyLjg0OC01LjQyNGMzLjYxMy0zLjYxNiw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDcNCgkJCWMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMQ0KCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4NCgkJPHBhdGggZD0iTTMyOC45MDUsMjM3LjU0OUg3My4wOTJjLTQuOTUyLDAtOS4yMzMsMS44MDgtMTIuODUsNS40MjFjLTMuNjE3LDMuNjE3LTUuNDI0LDcuODk4LTUuNDI0LDEyLjg0Nw0KCQkJYzAsNC45NDksMS44MDcsOS4yMzMsNS40MjQsMTIuODQ4TDE4OC4xNDksMzk2LjU3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4czkuMjMzLTEuODExLDEyLjg0Ny01LjQyOGwxMjcuOTA3LTEyNy45MDYNCgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+DQoJPC9nPg0KDQo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.records_count {
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: right;
    font-size: 12px
}

.details h2 svg,
.details_blank h2 svg {
    fill: #39a2a5;
}

.details-actions .sticky {
    position: fixed;
    top: 0px;
    right: 80px;
    border: 1px #336a82 solid;
    height: 30px;
    line-height: 30px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    border-top: none;
    background-color: white;
    z-index: 1000;
    padding-left: 20px;
    padding-right: 20px;
}

.details-actions {
    padding-top: 10px;
    padding-right: 50px;
    padding-bottom: 5px;
    position: relative;
    text-align: right;
    white-space: nowrap;
}

.details-actions a svg {
    fill: #39a2a5;
    margin-right: 5px;
    vertical-align: middle;

    margin-top: -4px;
}

.details-actions a:before {
    content: '  -  ';
}

.details-actions a:first-child:before {
    content: '';
}

.details-actions .test {
    background-image: url(../images/test_16.png);
    background-position: left center;
    background-repeat: no-repeat;
}

.details_table {
    width: 100%;
    display: none;
}

.details_table>tr>td {
    vertical-align: top;
}

.details_table>tr>td:first-child {
    padding-top: 0px;
    width: 300px;
    padding-right: 20px
}

.details_table>tr>td:last-child {
    padding-top: 60px;
}

.paging_container {
    width: 100%;
    text-align: center;
    font-size: 14px;
    position: relative;
}

.paging_container input {
    width: 30px;
    border: none;
    border-bottom: 1px solid #004563;
    color: #004563;
    text-align: right;
    font-size: 14px;
    background-color: transparent
}

.paging_container img {
    height: 14px;
}

.paging_container span {
    padding-left: 20px;
    padding-right: 20px
}

textarea {
    padding-top: 5px;
    font-family: "roboto"
}

input {
    font-family: "roboto";
    outline: 0;
}

.label {
    margin-bottom: 7px;
    display: inline-block;
    font-weight: bold;
    font-size: 15px;
}

.input,
.form-control {
    height: 30px;
    font-size: 15px;
    outline: none;
    border: 1px solid #ccc;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 20px;
    border-radius: 7px;
    background-color: white;
}

.input:focus,
.form-control:focus {
    border: 1px solid #004563;
}

.invalid {
    border: 1px solid #ff6161;
}

span.input-error,
span.input-success {
    float: right;
    display: block;
    font-size: 12px;
    padding-left: 10px;
}

span.input-error:after,
span.input-success:after {
    font-family: "Font Awesome 5 Free";
    padding-left: 10px;
    font-weight: 900;
}

span.input-error {
    color: #ff6161;
}

span.input-error:after {
    content: "\f071";
}

span.input-success {
    color: #3fdb94;
}

span.input-success:after {
    content: "\f058";
}

.button,
.btn {
    padding: 5px 20px 5px 20px;
    border: none;
    background-color: #004563;
    color: white;
    cursor: pointer;
    border-radius: 7px;
    text-transform: uppercase;
    font-family: "roboto";
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}

.button.disabled {
    opacity: 0.4;
}


.ui-widget-content .definition.button {
    margin-top: 7px;
    color: #39a2a5;
    background: #fff;
    border: 1px solid #39a2a5;
    padding: 5px 25px;
    -webkit-transition: background 0.2s;
    /* Safari */
    transition: background 0.2s;
}

.ui-widget-content .definition.button:hover {
    background: #39a2a5;
    border-color: #fff;
    color: #fff;
}

.ui-widget-content .definition.button:hover {
    background: #39a2a5;
    border-color: #fff;
    color: #fff;
}

.button.loading {
    text-transform: uppercase;
    text-indent: -9999px;
    overflow: hidden;
}

.button.big {
    background-color: white !important;
    color: #004563;
    height: 100px;
}

.button.big:hover {}


.right_line {
    border-right: 1px solid #d1d1d1;
    margin-right: 5px;
}

.info_numbers {
    float: left;
    position: relative;
    padding-right: 40px;
}

.info_numbers span:first-child {
    color: #39a2a5;
    display: block;
    font-size: 20px;
}

.info_numbers span:nth-child(2) {
    font-size: 10px;
}

.light,
.btn {
    background-color: #39a2a5;
}


.button.revert {
    background-color: white !important;
    color: #39a2a5;
}

.input_label {
    margin-bottom: 20px;
    display: inline-block;
}

.input.disabled {
    background-color: #efefef;
    color: #808080;
}

.checkbox {
    height: 40px;
}

.listbox {
    height: 150px !important
}

.listbox .items {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0;
    height: 100px;
    overflow: auto;
}

.listbox .items div {
    margin-left: 5px;
}

.listbox .items div:hover {
    cursor: pointer;
    color: #39a2a5;
}

.listbox .actions {
    height: auto;
    text-align: left;
    padding: 0;
    margin: 0;
    border: 0;
    margin-bottom: 20px;
    width: 100%;
}

.listbox .actions table {
    border-spacing: 0;
    width: 100%;
}

.listbox .actions table tr td:first-child {
    width: 100%;
}

.listbox .actions input {
    width: 100%;
    margin-right: 50px;
    margin-bottom: 0;
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.listbox .actions .add_button {
    cursor: pointer;
    width: auto;
    height: 30px;
    border: 1px solid #ccc;
    border-top: 0;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    color: #39a2a5;
    line-height: 30px;
    text-transform: uppercase;
    font-family: "roboto";
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    padding-left: 20px;
    padding-right: 20px
}

/* LOGIN PAGE */
#welcome_container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    /*background-color: #60b5b6;*/
}

#welcome_container #info {
    width: 350px;
    margin: 0 auto;
    padding-top: 150px;
    margin-bottom: 20px;
    text-align: center
}

#welcome_container #info img {
    margin: 0 auto;
    margin-bottom: 20px
}

#welcome_container #info img.default {
    width: 120px;
}

#welcome_container #login {
    width: 350px;
    margin: 0 auto;
    color: #004563;
    margin-top: 60px
}

#welcome_container #login a {
    color: #004563
}

.margin-right {
    margin-right: 10px;
}

.float_right {
    float: right
}

.float_left {
    float: left;
}

.full_height {
    height: 100%;
}

.full_width {
    width: 100%;
}

.error_bg {
    background-color: #ff3f4a;
}

.error {
    color: #D8000C;
}

span.error {
    color: #D8000C;
}

.list_item_dialog_parent_dialog {
    z-index: 3000 !important;
}

.dialog_container {
    height: 500px;
    overflow: auto;
    display: none;
}

.ui-dialog .ui-dialog-footer.fixed {
    padding-bottom: 15px;
    padding-top: 10px;
    text-align: center;
}

.ui-widget-footer.fixed .button {
    margin: 0;
}

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 7px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #777;
}

div.splitter {
    width: 99%;
    height: 1px;
    padding-top: 10px;
    margin: 0 auto;
    margin-bottom: 10px;
    border-bottom: #666 solid 1px;
}

div.clear {
    clear: both
}

.ui-dialog-footer {
    background-color: white;
    width: 100%;
    margin-top: 0px;
    padding-bottom: 15px;
    height: 30px;
}

.ui-dialog-footer .button {
    margin-right: 25px;
}

.body .button {
    margin-left: 25px;
    margin-top: 10px;
}

.btn-rectangle{
    width: 200px;
    height: 50px;
    text-align: center;
    background: #37A2A3;
    border-radius: 5px;
}

.dialog {
    display: none;
}

.info_dialog {
    width: 600px;
    margin: 0 auto;
    text-align: center;
    font-family: "roboto";
    color: #004563;
    border-radius: 7px;
    border: 1px solid #37a3a5;
    background-color: white;
    padding: 20px;
    margin-top: 10%
}

.info_dialog .header {
    font-family: "roboto";
    color: #004563;
    font-size: 20px;
    padding-bottom: 10px
}

.button_action {
    font-size: 8px;
    color: black;
    text-align: center;
    cursor: pointer;
    padding: 0px 5px 0px 5px
}

.button_action img {
    height: 16px;
}

.action_buttons {
    padding-bottom: 20px;
    background-color: #004563;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 30px;
}

.action_buttons> :first-child {
    padding-left: 75px !important;
}

.action_buttons .button {
    margin-left: 10px;
    background-color: transparent;
    font-size: 13px;
}

.action_buttons svg.active {
    fill: white;
}

.action_buttons img {
    padding: 5px;
    opacity: 0.5;
}

.action_buttons .image_group {
    margin-right: 100px;
    float: right;
    margin-top: 2px
}

.action_buttons .image_group svg {
    padding-left: 10px;
}

.action_buttons.white {
    background-color: white
}

.popup_body {
    padding: 0px 30px 0px 30px;
}

/* Homepage site selection reminder */
.popup_body_reminder {
    padding: 10px 10px 10px 10px;
}

/* Arrow on top of site selection reminder */
#homepagereminder:after {
    content: " ";
    position: absolute;
    left: 165px;
    top: 37px;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #37a3a5;
    ;
}

/* Close reminder */
#closereminder {
    cursor: pointer;
}

.import_popup_warning {
    text-align: center;
    padding-bottom: 15px;
    color: red;
}

.required:after {
    content: "*";
}

#header #logo_frame a {
    vertical-align: middle;
    height: 100px;
    background-image: url(../images/brands/captivnet/logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 250px;
    margin-top: 15px;
    margin-left: -7px;
}

#header #logo_frame {
    float: left;
    padding-left: 100px;
    color: black;
    line-height: 90px;
    height: 90px;
}

#welcome_container #logo_frame a {
    padding-bottom: 20px;
    margin: 0 auto;
    vertical-align: middle;
    height: 120px;
    background: url(../images/brands/captivnet/logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 350px;
    display: block;
}

#welcome_container .brand {
    font-size: 28px;
    font-family: 'roboto';
    color: #004563;
}

#welcome_container .brand:after {
    content: '';
}

#breadcrumb .brand:before {
    content: 'Captivnet';
}

#account_frame {
    float: right;
    color: black;
    margin-right: 100px;
    position: relative;
    margin-top: 50px;
    font-size: 13px;

}

#account_frame span {
    border-radius: 5px;
    border: 1px solid #004563;
    padding: 5px 10px 5px 10px;
    text-align: center;
    cursor: pointer;
}

#account_frame span.glow {
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    background-color: #004563;
}

#account_frame span.glow.out {
    background-color: white;
}

.account_frame_down {
    margin-left: 10px;
}

.account_frame_dude {
    margin-right: 10px;
}

.feedbackIcon {
    margin-right: 10px;
}

.feedbackLink {
    padding-right: 20px;
    text-decoration: none;
    color: #9fa6b7;
    font-size: 15px;
}

#header .header-popup {
    z-index: 1002;
    position: absolute;
    top: 40px;
    right: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #004563;
    display: none;
    border-radius: 7px;
    width: 100%;
    font-size: 10px;
}

#header .header-popup li {
    background-repeat: no-repeat;
    background-position: 10px 10px;
}

#header .header-popup svg {
    margin-left: -20px;
    margin-right: 7px;
    fill: #FFF;
}

#header .header-popup:after {
    content: ' ';
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #004563;
    position: absolute;
    top: -7px;
    right: 12px;
}

#header .header-popup ul li {
    padding: 10px 10px 10px 10px;
    color: white;
    padding-left: 30px;
    cursor: pointer
}

#header .header-popup ul li:hover {
    background-color: #27607b;
}

#header .header-popup ul {
    list-style: none;
}





#message-wrapper .header-popup {
    width: 2000px;
    top: 60px;
    right: 15px;
}

.double_line {
    width: 50%;
    height: 5px;
    border-bottom: 1px solid #004563;
    border-top: 1px solid #004563;
    margin: 0 auto;
    margin-bottom: 30px
}

.graph_popup {
    background-color: white;
    box-shadow: 0px 0px 5px #888888;
    padding: 2px 10px 2px 10px;
    border: 1px #004563 solid;
    border-radius: 5px;
    position: relative;
    opacity: 0.9;
}

.graph_iframe {
    width: 1800px;
    height: 400px;
    border: none;
}

.details {
    background-color: #e4e4e4;
    width: 100%;
    border-radius: 10px;
    text-align: center;
}


.details .body {
    padding: 30px 50px 10px 50px;
    text-align: center;
    text-align: left;
}

.details .title {
    width: auto;
    text-align: center;
}

.details_container {
    margin-top: 8px;
}

.nas.details_container {
    margin-top: 50px;
}

.details .scroll {
    overflow-y: auto;
    padding-right: 20px;
    margin-bottom: 20px
}

.tabs {
    margin-bottom: 20px;
    margin-left: 20px
}

.tabs.small {
    margin-bottom: 5px;
    margin-left: 0px
}

.tabs ul {
    height: 30px;
    margin-top: -38px;
    list-style: none;
}

.tabs ul li {
    float: left;
    margin-right: 30px;
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    line-height: 30px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px transparent solid;
    position: relative;
    white-space: nowrap
}

.tabs ul .active {
    border: 1px #336a82 solid;
}

.tabs ul .active a {
    color: #006c89;
}

.tabs div {
    margin: 10px;
    margin-top: 20px;
}

.tabs a {
    color: #004563;
    font-family: "roboto";
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.mainTabs {
    margin-bottom: 20px;
    margin-left: 20px
}

.mainTabs.small {
    margin-bottom: 5px;
    margin-left: 0px
}

.mainTabs ul {
    height: 30px;
    margin-top: -38px;
    list-style: none;
}

.mainTabs ul li {
    float: left;
    margin-right: 30px;
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    line-height: 30px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px transparent solid;
    position: relative;
    white-space: nowrap
}

.mainTabs ul .active {
    border: 1px #336a82 solid;
}

.mainTabs ul .active a {
    color: #006c89;
}

.mainTabs div {
    margin: 10px;
    margin-top: 20px;
}

.mainTabs a {
    color: #004563;
    font-family: roboto, Helvatica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tab-error {
    width: 20px;
    height: 20px;
    content: " ! ";
    color: #D8000C
}

.tab-error>span {
    display: none;
    position: absolute;
    left: 50px;
    top: 40px;
    background-color: #39a2a5;
    border-radius: 3px;
    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
    padding: 5px 10px 5px 10px;
    z-index: 9999;
    color: white
}

.tab-error:hover>span {
    display: inline
}

.title_container {
    position: relative;
    width: 100%;
    height: 100%;
}

.title_container ul {
    position: absolute;
    top: -20px;
    right: 100%;
    display: none;
    background-color: #39a2a5;
    border-radius: 3px;
    box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.1);
    padding: 5px 10px 5px 10px;
    z-index: 9999;
}

.title_container ul li {
    white-space: nowrap;
    text-align: right;
    color: white !important;
    padding-left: 2px;
}

.table_last_column:hover ul {
    display: inline;
}

.ul_table {
    list-style: none;
}

.ul_table li {
    float: left;
    margin-bottom: 20px;
    min-height: 70px
}

.ul_table.small li {
    float: left;
    margin-bottom: 0px !important;
    min-height: initial;
}

.slide h2:last-of-type,
.noslide h2:last-of-type {
    border-bottom: none;
}

.slide h2 svg,
.noslide h2 svg {
    vertical-align: middle;
    padding-right: 30px;
    height: 32px;
    width: 62px;
}

.slide h2,
.noslide h2,
h2.header {
    position: relative;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 1px #8ec3c4 solid;
    color: #38a2a4;
    padding: 20px 0px 20px 30px;
}

.slide h2.open,
.noslide h2.open,
.slide h2.disabled {
    border-bottom: 1px #8ec3c4 solid;
}

.slide h2:after,
h2.header:after {
    content: '+';
    position: absolute;
    color: white;
    top: 30px;
    right: 30px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background-color: #39a2a5;
    text-align: center;
    line-height: 16px;
    font-size: 14px;
}

.slide h2.open:after,
h2.header.open:after {
    content: '-';
}

.slide h2.disabled:after,
h2.header.disabled:after {
    background-image: none;
}

.slide>div {
    padding: 10px 50px 0px 50px;
    overflow: visible;
    display: none;
}

.noslide>div {
    padding: 10px 50px 0px 50px;
    overflow: visible;
}

.image_button {
    cursor: pointer;
    fill: #888888;
}

.full_screen {
    width: 20px;
    height: 20px;
    clear: none;
    float: right;
    cursor: pointer;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHN0eWxlPSJmaWxsOiMwMDQ1NjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICAgIDxwYXRoIGQ9Ik01LjMgNi43bDEuNC0xLjQtMy0zIDEuMy0xLjNoLTR2NGwxLjMtMS4zeiI+PC9wYXRoPg0KICAgIDxwYXRoIGQ9Ik02LjcgMTAuN2wtMS40LTEuNC0zIDMtMS4zLTEuM3Y0aDRsLTEuMy0xLjN6Ij48L3BhdGg+DQogICAgPHBhdGggZD0iTTEwLjcgOS4zbC0xLjQgMS40IDMgMy0xLjMgMS4zaDR2LTRsLTEuMyAxLjN6Ij48L3BhdGg+DQogICAgPHBhdGggZD0iTTExIDFsMS4zIDEuMy0zIDMgMS40IDEuNCAzLTMgMS4zIDEuM3YtNHoiPjwvcGF0aD4NCjwvc3ZnPg==') center top no-repeat;
    position: absolute;
    right: 0px;
    bottom: 25px;
}

*:not(#foo)>input[type='radio'],
*:not(#foo)>input[type='checkbox'] {
    opacity: 0;
    float: left;
    width: 18px;
}

*:not(#foo)>input[type='radio']+label,
*:not(#foo)>input[type='radio']+span.fake-lbl,
*:not(#foo) input[type='checkbox']+label,
*:not(#foo) input[type='checkbox']+span.fake-lbl {
    margin: 0;
    clear: none;
    padding: 5px 0 4px 24px;
    cursor: pointer;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0MDEuOTk4IDQwMS45OTgiPg0KPGc+DQoJPHBhdGggZD0iTTM3Ny44NywyNC4xMjZDMzYxLjc4Niw4LjA0MiwzNDIuNDE3LDAsMzE5Ljc2OSwwSDgyLjIyN0M1OS41NzksMCw0MC4yMTEsOC4wNDIsMjQuMTI1LDI0LjEyNg0KCQlDOC4wNDQsNDAuMjEyLDAuMDAyLDU5LjU3NiwwLjAwMiw4Mi4yMjh2MjM3LjU0M2MwLDIyLjY0Nyw4LjA0Miw0Mi4wMTQsMjQuMTIzLDU4LjEwMWMxNi4wODYsMTYuMDg1LDM1LjQ1NCwyNC4xMjcsNTguMTAyLDI0LjEyNw0KCQloMjM3LjU0MmMyMi42NDgsMCw0Mi4wMTEtOC4wNDIsNTguMTAyLTI0LjEyN2MxNi4wODUtMTYuMDg3LDI0LjEyNi0zNS40NTMsMjQuMTI2LTU4LjEwMVY4Mi4yMjgNCgkJQzQwMS45OTMsNTkuNTgsMzkzLjk1MSw0MC4yMTIsMzc3Ljg3LDI0LjEyNnogTTM2NS40NDgsMzE5Ljc3MWMwLDEyLjU1OS00LjQ3LDIzLjMxNC0xMy40MTUsMzIuMjY0DQoJCWMtOC45NDUsOC45NDUtMTkuNjk4LDEzLjQxMS0zMi4yNjUsMTMuNDExSDgyLjIyN2MtMTIuNTYzLDAtMjMuMzE3LTQuNDY2LTMyLjI2NC0xMy40MTFjLTguOTQ1LTguOTQ5LTEzLjQxOC0xOS43MDUtMTMuNDE4LTMyLjI2NA0KCQlWODIuMjI4YzAtMTIuNTYyLDQuNDczLTIzLjMxNiwxMy40MTgtMzIuMjY0YzguOTQ3LTguOTQ2LDE5LjcwMS0xMy40MTgsMzIuMjY0LTEzLjQxOGgyMzcuNTQyDQoJCWMxMi41NjYsMCwyMy4zMTksNC40NzMsMzIuMjY1LDEzLjQxOGM4Ljk0NSw4Ljk0NywxMy40MTUsMTkuNzAxLDEzLjQxNSwzMi4yNjRWMzE5Ljc3MUwzNjUuNDQ4LDMxOS43NzF6Ii8+DQo8L2c+DQo8L3N2Zz4=') left center no-repeat;

}


#clone_site_container *:not(#foo)>input[type='radio']+label {
    padding: 0px 15px 0px 19px;
}


*:not(#foo)>input[type='radio']+span.fake-lbl,
*:not(#foo) input[type='checkbox']+span.fake-lbl {
    height: 10px;
}

*:not(#foo)>input[type='radio']+label.big,
*:not(#foo) input[type='checkbox']+label.big {
    display: inline-block;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSIxM3B4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0MDEuOTk4IDQwMS45OTgiPg0KPGc+DQoJPHBhdGggZD0iTTM3Ny44NywyNC4xMjZDMzYxLjc4Niw4LjA0MiwzNDIuNDE3LDAsMzE5Ljc2OSwwSDgyLjIyN0M1OS41NzksMCw0MC4yMTEsOC4wNDIsMjQuMTI1LDI0LjEyNg0KCQlDOC4wNDQsNDAuMjEyLDAuMDAyLDU5LjU3NiwwLjAwMiw4Mi4yMjh2MjM3LjU0M2MwLDIyLjY0Nyw4LjA0Miw0Mi4wMTQsMjQuMTIzLDU4LjEwMWMxNi4wODYsMTYuMDg1LDM1LjQ1NCwyNC4xMjcsNTguMTAyLDI0LjEyNw0KCQloMjM3LjU0MmMyMi42NDgsMCw0Mi4wMTEtOC4wNDIsNTguMTAyLTI0LjEyN2MxNi4wODUtMTYuMDg3LDI0LjEyNi0zNS40NTMsMjQuMTI2LTU4LjEwMVY4Mi4yMjgNCgkJQzQwMS45OTMsNTkuNTgsMzkzLjk1MSw0MC4yMTIsMzc3Ljg3LDI0LjEyNnogTTM2NS40NDgsMzE5Ljc3MWMwLDEyLjU1OS00LjQ3LDIzLjMxNC0xMy40MTUsMzIuMjY0DQoJCWMtOC45NDUsOC45NDUtMTkuNjk4LDEzLjQxMS0zMi4yNjUsMTMuNDExSDgyLjIyN2MtMTIuNTYzLDAtMjMuMzE3LTQuNDY2LTMyLjI2NC0xMy40MTFjLTguOTQ1LTguOTQ5LTEzLjQxOC0xOS43MDUtMTMuNDE4LTMyLjI2NA0KCQlWODIuMjI4YzAtMTIuNTYyLDQuNDczLTIzLjMxNiwxMy40MTgtMzIuMjY0YzguOTQ3LTguOTQ2LDE5LjcwMS0xMy40MTgsMzIuMjY0LTEzLjQxOGgyMzcuNTQyDQoJCWMxMi41NjYsMCwyMy4zMTksNC40NzMsMzIuMjY1LDEzLjQxOGM4Ljk0NSw4Ljk0NywxMy40MTUsMTkuNzAxLDEzLjQxNSwzMi4yNjRWMzE5Ljc3MUwzNjUuNDQ4LDMxOS43NzF6Ii8+DQo8L2c+DQo8L3N2Zz4=') left 7px no-repeat;
}


*:not(#foo)>input[type='radio']:checked+label,
*:not(#foo)>input[type='radio']:checked+span.fake-lbl {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTN4IiBoZWlnaHQ9IjEzcHgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCI+DQo8Zz4NCgk8cGF0aCBzdHlsZT0iZmlsbDozOWEyYTU7IiBkPSJNMzc3Ljg3LDI0LjEyNkMzNjEuNzg2LDguMDQyLDM0Mi40MTcsMCwzMTkuNzY5LDBIODIuMjI3QzU5LjU3OSwwLDQwLjIxMSw4LjA0MiwyNC4xMjUsMjQuMTI2DQoJCUM4LjA0NCw0MC4yMTIsMC4wMDIsNTkuNTc2LDAuMDAyLDgyLjIyOHYyMzcuNTQzYzAsMjIuNjQ3LDguMDQyLDQyLjAxNCwyNC4xMjMsNTguMTAxYzE2LjA4NiwxNi4wODUsMzUuNDU0LDI0LjEyNyw1OC4xMDIsMjQuMTI3DQoJCWgyMzcuNTQyYzIyLjY0OCwwLDQyLjAxMS04LjA0Miw1OC4xMDItMjQuMTI3YzE2LjA4NS0xNi4wODcsMjQuMTI2LTM1LjQ1MywyNC4xMjYtNTguMTAxVjgyLjIyOA0KCQlDNDAxLjk5Myw1OS41OCwzOTMuOTUxLDQwLjIxMiwzNzcuODcsMjQuMTI2eiBNMzY1LjQ0OCwzMTkuNzcxYzAsMTIuNTU5LTQuNDcsMjMuMzE0LTEzLjQxNSwzMi4yNjQNCgkJYy04Ljk0NSw4Ljk0NS0xOS42OTgsMTMuNDExLTMyLjI2NSwxMy40MTFIODIuMjI3Yy0xMi41NjMsMC0yMy4zMTctNC40NjYtMzIuMjY0LTEzLjQxMWMtOC45NDUtOC45NDktMTMuNDE4LTE5LjcwNS0xMy40MTgtMzIuMjY0DQoJCVY4Mi4yMjhjMC0xMi41NjIsNC40NzMtMjMuMzE2LDEzLjQxOC0zMi4yNjRjOC45NDctOC45NDYsMTkuNzAxLTEzLjQxOCwzMi4yNjQtMTMuNDE4aDIzNy41NDINCgkJYzEyLjU2NiwwLDIzLjMxOSw0LjQ3MywzMi4yNjUsMTMuNDE4YzguOTQ1LDguOTQ3LDEzLjQxNSwxOS43MDEsMTMuNDE1LDMyLjI2NFYzMTkuNzcxTDM2NS40NDgsMzE5Ljc3MXoiLz4NCjxyZWN0IHN0eWxlPSJmaWxsOiMzOWEyYTU7IiB4PSI5MSIgeT0iOTEiIHJ4PSI0MCIgcnk9IjQwIiB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgIC8+DQo8L2c+DQo8L3N2Zz4=');
}

*:not(#foo)>input[type='checkbox']:checked+label,
*:not(#foo)>input[type='checkbox']:checked+span.fake-lbl {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxNXB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA0NzQuOCA0NzQuODAxIj4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5Ni4yODMsMjU3LjA5N2MtMS4xNC0wLjU3NS0yLjI4Mi0wLjg2Mi0zLjQzMy0wLjg2MmMtMi40NzgsMC00LjY2MSwwLjk1MS02LjU2MywyLjg1N2wtMTguMjc0LDE4LjI3MQ0KCQkJYy0xLjcwOCwxLjcxNS0yLjU2NiwzLjgwNi0yLjU2Niw2LjI4M3Y3Mi41MTNjMCwxMi41NjUtNC40NjMsMjMuMzE0LTEzLjQxNSwzMi4yNjRjLTguOTQ1LDguOTQ1LTE5LjcwMSwxMy40MTgtMzIuMjY0LDEzLjQxOA0KCQkJSDgyLjIyNmMtMTIuNTY0LDAtMjMuMzE5LTQuNDczLTMyLjI2NC0xMy40MThjLTguOTQ3LTguOTQ5LTEzLjQxOC0xOS42OTgtMTMuNDE4LTMyLjI2NFYxMTguNjIyDQoJCQljMC0xMi41NjIsNC40NzEtMjMuMzE2LDEzLjQxOC0zMi4yNjRjOC45NDUtOC45NDYsMTkuNy0xMy40MTgsMzIuMjY0LTEzLjQxOEgzMTkuNzdjNC4xODgsMCw4LjQ3LDAuNTcxLDEyLjg0NywxLjcxNA0KCQkJYzEuMTQzLDAuMzc4LDEuOTk5LDAuNTcxLDIuNTYzLDAuNTcxYzIuNDc4LDAsNC42NjgtMC45NDksNi41Ny0yLjg1MmwxMy45OS0xMy45OWMyLjI4Mi0yLjI4MSwzLjE0Mi01LjA0MywyLjU2Ni04LjI3Ng0KCQkJYy0wLjU3MS0zLjA0Ni0yLjI4Ni01LjIzNi01LjE0MS02LjU2N2MtMTAuMjcyLTQuNzUyLTIxLjQxMi03LjEzOS0zMy40MDMtNy4xMzlIODIuMjI2Yy0yMi42NSwwLTQyLjAxOCw4LjA0Mi01OC4xMDIsMjQuMTI2DQoJCQlDOC4wNDIsNzYuNjEzLDAsOTUuOTc4LDAsMTE4LjYyOXYyMzcuNTQzYzAsMjIuNjQ3LDguMDQyLDQyLjAxNCwyNC4xMjUsNTguMDk4YzE2LjA4NCwxNi4wODgsMzUuNDUyLDI0LjEzLDU4LjEwMiwyNC4xM2gyMzcuNTQxDQoJCQljMjIuNjQ3LDAsNDIuMDE3LTguMDQyLDU4LjEwMS0yNC4xM2MxNi4wODUtMTYuMDg0LDI0LjEzNC0zNS40NSwyNC4xMzQtNTguMDk4di05MC43OTcNCgkJCUM0MDIuMDAxLDI2MS4zODEsNDAwLjA4OCwyNTguNjIzLDM5Ni4yODMsMjU3LjA5N3oiLz4NCgkJPHBhdGggc3R5bGU9ImZpbGw6ICMzOWEyYTUiIGQ9Ik00NjcuOTUsOTMuMjE2bC0zMS40MDktMzEuNDA5Yy00LjU2OC00LjU2Ny05Ljk5Ni02Ljg1MS0xNi4yNzktNi44NTFjLTYuMjc1LDAtMTEuNzA3LDIuMjg0LTE2LjI3MSw2Ljg1MQ0KCQkJTDIxOS4yNjUsMjQ2LjUzMmwtNzUuMDg0LTc1LjA4OWMtNC41NjktNC41Ny05Ljk5NS02Ljg1MS0xNi4yNzQtNi44NTFjLTYuMjgsMC0xMS43MDQsMi4yODEtMTYuMjc0LDYuODUxbC0zMS40MDUsMzEuNDA1DQoJCQljLTQuNTY4LDQuNTY4LTYuODU0LDkuOTk0LTYuODU0LDE2LjI3N2MwLDYuMjgsMi4yODYsMTEuNzA0LDYuODU0LDE2LjI3NGwxMjIuNzY3LDEyMi43NjdjNC41NjksNC41NzEsOS45OTUsNi44NTEsMTYuMjc0LDYuODUxDQoJCQljNi4yNzksMCwxMS43MDQtMi4yNzksMTYuMjc0LTYuODUxbDIzMi40MDQtMjMyLjQwM2M0LjU2NS00LjU2Nyw2Ljg1NC05Ljk5NCw2Ljg1NC0xNi4yNzRTNDcyLjUxOCw5Ny43ODMsNDY3Ljk1LDkzLjIxNnoiLz4NCgk8L2c+DQo8L3N2Zz4=');
}

*:not(#foo).disabled>input[type='radio']+label,
*:not(#foo).disabled>input[type='radio']+span.fake-lbl,
*:not(#foo).disabled input[type='checkbox']+label,
*:not(#foo).disabled input[type='checkbox']+span.fake-lbl,
*:not(#foo).disabled input[type='checkbox']+label {
    color: #888;
    cursor: default;
}

#permissions_container *:not(#foo)>input[type='radio']:checked+label,
#permissions_container *:not(#foo)>input[type='radio']:checked+span.fake-lbl,
#permissions_container *:not(#foo)>input[type='radio']+label,
#permissions_container *:not(#foo)>input[type='radio']+span.fake-lbl {
    color: #004563;
    cursor: default;
}

.file_browser {
    height: 400px
}

.file_browser .file_list {
    height: 100%;
    overflow: auto;
}

.file_browser .tree_container {
    width: 20%;
    float: left;
    height: 100%;
    border-right: 1px solid #39a2a5;
}

.file_browser .tree_container .tree {
    width: 100%;
    overflow: auto;
    height: 250px
}

.file_browser .tree_container canvas {}

.file_browser .file_container {
    width: 78%;
    float: right;
    overflow: auto
}

.file_browser .file_container .directory_list {
    width: 100%;
    height: 370px
}

.file_browser .file_container .browser_path {
    width: 100%;
    height: 28px;
    border-bottom: 1px solid #39a2a5;
    position: relative;
}

.file_browser .file_container .browser_path span {
    background-repeat: no-repeat;
    background-position: center right;
    height: 27px;
    display: inline;
}

.file_browser .file_container .browser_path .home {
    width: 34px;
    position: absolute;
    left: 8px;
    top: 0px;
}

.file_browser .file_container .browser_path .next {
    margin-left: 5px;
    padding-left: 30px;
    position: relative;
}

.file_browser .file_container .browser_path div span:first-child {
    margin-left: 32px;
}

.file_browser .file_container .browser_path .next:before {
    position: absolute;
    left: 12px;
    top: 0px;
    content: ' > ';
}

.file_browser ul {
    margin-left: 13px
}

.file_browser ul li.closed>ul {
    display: none;
}

.file_browser ul li.open>ul {
    display: block;
}

.file_browser ul li {
    cursor: pointer;
    position: relative;
}

.file_browser ul {
    position: relative;
}

.file_browser li.closed>.item_status:before {
    width: 16px;
    height: 16px;
    position: absolute;
    left: -12px;
    top: 0px;
    content: "+";
}

.file_browser li.open>.item_status:before {
    width: 16px;
    height: 16px;
    position: absolute;
    left: -12px;
    top: 0px;
    content: "-";
}

.file_icon {
    width: 40px;
}

.file_icon svg {
    padding-left: 10px;
}

svg.green {
    fill: #66bb5f !important;
}

svg.red {
    fill: #f1563f !important;
}

svg.grey {
    fill: #E0E0E0 !important;
}

.grey {
    color: rgb(143, 143, 143);
}

svg.amber {
    fill: #FFDA44 !important;
}

.upload_field {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
}


.process_container {
    width: 90%;
    height: 16px;
    margin: 0 auto;
    border-radius: 5px;
    padding: 2px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
    background: #444;
}

.process_container.light {
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.2);
    background-color: rgba(68, 68, 68, 0.2);
}

.process_container span {
    display: inline-block;
    height: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .4s ease-in-out;
    background-color: #98ced0
}

.process_container.double span {
    display: block;
    height: 8px;
}

.process_container.double {
    height: 18px;
    margin-left: 0px;
}

.process_container.double span:first-child,
.process_container.single span:first-child {
    background-color: #39a2a5;
}

.process_container.double span:first-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.process_container.double span:nth-child(2) {
    background-color: #004563;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.process_info_container span,
.switch span {
    color: white;
    padding: 2px 10px 2px 10px;
    white-space: nowrap
}

.process_info_container span:first-child {
    background-color: #39a2a5;
}

.process_info_container span:nth-child(2) {
    background-color: #004563;
}

.switch span {
    cursor: pointer;
    border: 1px solid #39a2a5;
}

.switch .active {
    background-color: #39a2a5;
}

.switch .disabled {
    color: #39a2a5;
    background-color: white;
}

#preview_file_img {
    max-width: 100%;
    padding-bottom: 20px;
}

.color_input_container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.color_input_container input {
    padding-left: 40px;
    width: 150px;
}

.color_input_container span {
    position: absolute;
    left: 5px;
    top: 2px;
    width: 18px;
    height: 25px;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

.color_input_container svg {
    margin-top: 3px;
    fill: #004563;
}

.screen_preview {
    position: relative;
    background-image: url(../images/screen_200.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 250px;
    height: 167px;
    margin-top: 50px;
    padding: 10px
}

.screen_preview .page {
    position: absolute;
    top: 19px;
    left: 40px;
    background-color: white;
    width: 195px;
    height: 115px;
    margin: 0;
    padding: 0;
}

.screen_preview .page .page_container {
    width: 100px;
    margin: 10px auto;
    height: 75px;
    border: 1px solid black;
    font-size: 8px;
    position: absolute;
    top: 10px;
    left: 47px;
}

.screen_preview .page .prev_header {
    width: 100%;
    height: 20px;
}

.screen_preview .page .prev_body {
    width: 100%;
    height: 77px;
}

.screen_preview .page .prev_footer {
    width: 100%;
    height: 10px;
}

#attribute_value_container {
    position: relative;
}

.left_label {
    position: absolute;
    right: 10px;
    top: 0px;
    line-height: 32px;
}

.settings_container {
    text-align: center;
}

.onex>div {
    width: 12vw !important;
}

.settings_container>div {
    position: relative;
    float: left;
    width: 260px;
    height: 200px;
    padding: 0 20px 0 20px;
}

.settings_container svg {
    padding-bottom: 10px;
    height: 56px;
}

.settings_container .title {
    display: block;
    padding-bottom: 5px;
    font-family: "roboto";
}

.settings_container .info {
    color: #6e95a6;
}

.settings_container.add .image_container {
    position: relative;
    display: inline-block;
}

.settings_container.add>div:hover .image_container:after {
    content: "+";
    position: absolute;
    right: -20px;
    top: 0px;
    font-size: 20px;
    color: #39a2a5;
}

.content-info {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.accounts2devices {
    text-align: center;
    padding-top: 10px;
}

.accounts2devices .image-container {
    width: 200px;
    margin: 0 auto
}

.accounts2devices .accounts2devices-graph-container {
    height: 200px;
    padding-top: 10px;
    position: relative;
}

.accounts2devices .accounts2devices-graph-container .line {
    width: 1px;
    margin: 0 auto;
    height: 100%;
    border-left: 1px solid #004563;
    position: relative;
}

.accounts2devices .accounts2devices-graph-container .line .point {
    margin: 0 auto;
    border: 1px solid #004563;
    background-color: #004563;
    border-radius: 30px;
    position: absolute;
}

.accounts2devices .accounts2devices-graph-container .line .point div {
    position: absolute;
    top: -5px;
    left: -90px;
    width: 180px
}

.widgets_container {
    width: 100%;
}

.details_widget {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    position: relative
}

.widget.big {
    width: 1440px;
    height: 600px;
}

.widget {
    width: 700px;
    float: left;
    padding: 10px 20px 60px 20px;
    height: 330px;
    transition: width 0.7s;
}

.widget h1 svg,
.dynamic_widget h1 svg {
    fill: #39a2a5;
}

.widget h1,
.dynamic_widget h1 {
    letter-spacing: 1px;
    line-height: 30px;
    height: 30px;
    display: inline-block;
    width: 700px;
    margin: 0 0 5px 0;
    padding: 0px 0px 0px 0px;
    color: #38a2a4;
    text-transform: uppercase;
    font-family: "roboto";
    font-weight: bold;
    font-size: 13px;
    border-bottom: 1px solid #004563;
    /*background-image:url(../images/arrow_right_24.png);*/
    background-repeat: no-repeat;
    background-position: left;
}

.dynamic_widget h1 input,
.widget h1 input {
    text-align: right;
    border: none;
    width: 250px;
    font-family: "roboto";
    font-weight: bold;
    font-size: 13px;
    color: #38a2a4;
    padding: 0;
    margin: 0;
    padding-top: 5px;
}

.widget h1 svg,
.dynamic_widget h1 svg {
    padding-top: 5px;
    padding-left: 10px;
}

.widget.big h1 {
    width: 1440px
}

.widget>div {
    padding: 5px 10px 10px 10px
}

/*.dynamic_widget h1{width: 2180px}
.dynamic_widget{width:2220px;}*/
.dynamic_widget h1 {
    width: 1440px
}

.dynamic_widget {
    width: 1480px;
}

.dynamic_widget h1 {
    margin-left: 20px;
}

.dynamic_widget .widget {
    height: auto;
}

.graph_info_color {
    width: 30px;
    height: 12px;
    display: inline-block;
    margin-right: 10px;
}

.graph_info_text {
    font-size: 12px;
}

.numbers {
    min-width: 60%;
    display: inline-block
}

.total {
    position: relative
}

.total:after {
    content: " ";
    position: absolute;
    top: -7px;
    left: 0px;
    width: 100%;
    height: 3px;
    border-bottom: 1px solid #004563;
    border-top: 1px solid #004563;
    margin: 0 auto;
    margin-bottom: 30px
}

.page_display {
    position: absolute;
    left: 10px;
    border: 1px #004563 solid;
    border-right: none;
    background-color: transparent;
    width: 20px;
    height: 150px;
}

.transman-container {
    position: relative;
    width: 100%;
    background-color: #eee;
}

.transman-container div:first-child {
    background-image: url(../images/transman.png);
    background-position: top left;
    background-repeat: repeat-x;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 100%;
    height: 36px;
}

.transman-container div:nth-child(2) {
    background-color: #39a2a5;
    height: 34px;
}

.trans-filler {
    background-color: #eee;
    padding: 0px !important;
    width: 64px;
    height: 64px;
    position: relative;
}

.summary-header {
    height: 100px;
}

.summary-login {
    float: left;
    padding-left: 50px;
}

.summary-band {
    float: right;
    padding-right: 50px;
}

.summary-icons-no-percentage:nth-child(1),
.summary-icons:nth-child(1) {
    padding-left: 0px;
    padding-right: 0px;
}

.summary-icons>div,
.summary-icons-no-percentage>div {
    height: 70px;
}


.summary-icons>div div,
.summary-icons>div svg,
.summary-icons-no-percentage>div div,
.summary-icons-no-percentage>div svg {
    float: left;
}

.summary-icons>div svg {
    width: 60px;
}

.summary-icons>div div {
    font-size: 30px;
    padding-top: 5px;
    padding-left: 10px;
}

.summary-icons-no-percentage>div div {
    padding-top: 25px;
    padding-left: 10px;
}

.summary-icons-no-percentage>div div svg {
    padding-top: 3px;
    padding-right: 2px;
}

.sortable_div .sort_handle {
    height: 20px;
}

.gen_loading {
    display: none;
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: #004563;
    opacity: 0.8;
    color: white;
    padding: 5px 20px 5px 20px;
    border-radius: 15px;
}

.message {
    background-repeat: no-repeat;
    box-shadow: 0px 0px 5px 5px #91afbc;
    z-index: 50000;
    color: white;
    background-color: #004563;
    opacity: 0.8;
    padding: 10px 20px 10px 20px;
    position: fixed;
    top: 0px;
    left: 50%;
    width: 600px;
    margin-left: -300px;
    font-size: 12pt;
    display: none
}

.message a {
    color: white;
}

.message a:hover {
    color: #39a2a5;
}

div.error {
    border-left: 5px #D8000C solid
}

div.notification {
    border-left: 5px #9F6000 solid
}

div.success {
    border-left: 5px #4F8A10 solid
}

.bold {
    font-weight: bold;
    white-space: nowrap
}

.info {
    font-style: italic;
    font-size: 12px
}

.private {
    padding-top: -20px;
    font-size: 10px
}

.private:before {
    content: '( ';
}

.private:after {
    content: ' )';
}

.upload_container {
    position: relative;
    display: inline-block;
    float: right;
    cursor: pointer
}

@font-face {
    font-family: 'roboto';
    src: url('../style/fonts/roboto-regular-webfont.eot');
    src: url('../style/fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../style/fonts/roboto-regular-webfont.woff') format('woff'),
        url('../style/fonts/roboto-regular-webfont.ttf') format('truetype'),
        url('../style/fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.wizard {
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: #004563;
    opacity: 0.95;
    color: white;
    padding: 5px 20px 5px 40px;
    width: 100%;
    height: 190px;
}

.wizard .close {
    position: absolute;
    top: -20px;
    right: 50px
}

.map-message {
    position: absolute;
    display: none;
    background-color: white;
    border-radius: 3px;
    box-shadow: -1px -1px 5px 5px rgba(0, 0, 0, 0.2);
    padding: 10px 10px 10px 10px;
    min-width: 150px;
    font-size: 12px;
    z-index: 500;
    opacity: 0.9;
}

.map-message .close {
    width: 8px;
    height: 8px;
    background-image: url(../images/close_10.png);
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    float: right;
    opacity: 0.75;
    cursor: pointer;
}

.map-message .content {
    padding-top: 10px;
    height: auto;
    margin: 0;
}

.floor_plan_buttons {
    background-color: white;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    padding: 5px 0px 5px 0px;
    width: 40px;
    text-align: center;
    margin-top: 50px;
    min-height: 25px;
}

.floor_plan_buttons div span,
.popup-hover>div span {
    text-align: left;
    padding: 0px 5px 0px 5px;
    height: auto;
    min-height: 30px;
    position: absolute;
    left: 0px;
    top: 0px;
    margin-left: 40px;
    background-color: white;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    display: none;
    white-space: nowrap;
    z-index: 501;
    box-shadow: 0px 0px 5px #dcdcdc;
}

.floor_plan_buttons div span ul li {
    font-size: 12px;
    height: 20px;
    margin-left: 20px;
}

.floor_plan_buttons div span ul {
    margin-bottom: 10px;
    list-style: square;
}

.floor_plan_buttons div img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.floor_plan_buttons div {
    cursor: pointer;
    height: 30px;
    position: relative;
    line-height: 30px;
}

.floor_plan_buttons div:hover {
    background-color: #e4e4e4;
}

.floor_plan_buttons div:hover span,
.popup-hover div:hover span {
    display: inline-block;
}


.popup-hover div span {
    border-radius: 3px;
    min-height: 10px;
    font-size: 12px;
}

.popup-hover>div {
    position: relative;
}

.timeline_wrapper {
    height: 30px;
    line-height: 30px;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    padding: 5px 2% 5px 2%;
}

.timeline_wrapper table {
    height: 30px;
}

.timeline_wrapper table td {
    text-align: left;
}

.timeline_wrapper table td:nth-child(2) {
    width: 100%;
    padding-left: 10px;
    min-width: 1100px;
}

.timeline_wrapper table td:first-child {
    border-right: 1px solid #ccc;
}

.timeline_wrapper input {
    width: 100px;
    margin: 0;
    padding: 0;
    border: none;
}

.timeline_wrapper .process_container {
    height: 10px;
    position: relative;
    width: 864px;
    margin-left: 60px;
    float: left;
    margin-top: 2px;
}

#timeline-play {
    float: left;
    padding-left: 80px;
    cursor: pointer;
    display: inline;
    height: 10px;
    margin-top: -10px;

}

.timeline_wrapper .process_container:before {
    content: "00:00";
    position: absolute;
    left: -50px;
    top: -8px;
}

.timeline_wrapper .process_container:after {
    content: "23:59";
    position: absolute;
    right: -50px;
    top: -8px;
}

.timeline_wrapper .process_container span {
    position: absolute;
    left: -2px;
    top: -2px;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    cursor: pointer;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;
}

.timeline_wrapper .process_container #timeline-message {
    position: absolute;
    left: -40px;
    bottom: -45px;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    padding: 5px 0px 5px 0px;
    height: 15px;
    line-height: 15px;
    width: 80px;
    text-align: center;
    font-size: 11px;
}

.timeline_wrapper .process_container #timeline-message:before {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -3px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

.notes-new {
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    padding: 0 0 20px 0px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.notes-new h1 {
    padding: 0 0 0 0;
    text-transform: none;
}

.notes-new h2 {
    font-size: 14px;
}

.notes-new ul li {
    font-weight: 300;
    padding: 0;
    list-style-type: circle;
    list-style-position: inside;
    position: relative;
    font-weight: 400;
    padding: 0 0 5px;

}

.notes-new ul li ul {
    padding: 5px 0 10px 40px;
}

.notes-new ul li ul li {
    font-weight: 300;
    padding: 0;
    list-style-type: disc;
}

.notes-old {
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    padding: 0 0 20px 0px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.notes-old ul li ul {
    padding: 5px 0 10px 40px;
}

.notes-old ul li {
    position: relative;
    list-style: none;
    font-weight: 400;
    padding: 0 0 5px;
}

.notes-old ul li ul li {
    font-weight: 300;
    padding: 0;
    list-style-type: circle;
}

.notes-old ul li ul li:before {
    content: "  ";
    left: -17px;
    top: 0;
    position: absolute;
}

.notes-old ul li:before {
    content: '';
}

.notes-old img {
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 3px 3px 1px #ccc;
    -webkit-box-shadow: 3px 3px 1px #ccc;
    -moz-box-shadow: 3px 3px 1px #ccc;
}

.pdf-header {
    width: 100%;
}

.pdf-header tr td {
    font-size: 10px;
    width: 300px;
}

.pdf-header tr td:first-child {
    font-size: 20px;
}

.pdf-header tr td:first-child {
    text-align: left;
}

.pdf-header tr td:nth-child(2) {
    text-align: center;
}

.pdf-header tr td:last-child {
    text-align: right;
}

#portal_edit_main {
    width: 74%;
    height: 600px;
    float: left;
}

#portal_edit_pages {
    width: 25%;
    height: 600px;
    float: left;
    overflow-y: auto;
    overflow-x: hidden;
    float: right;
}

.portal_page_wrap {
    width: 300px;
    height: 150px;
    padding: 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.portal_page {
    width: 1200px;
    height: 600px;
    border: none;
    opacity: 0.6;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.portal_page:hover {
    opacity: 1;
}

.portal_page_overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid #004563;
}

#portal_edit_frame,
.inline_portal_preview {
    width: 1200px;
    height: 800px;
    border: 1px solid #004563;
    -ms-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

#portal_edit_frame.mobile {
    width: 800px;
    height: 800px;
    border: 1px solid #004563;
}

.events-calendar {
    width: 100%;
    min-width: 1000px;
}

.events-calendar tr td:first-child {
    width: auto;
    white-space: nowrap;
}

.events-calendar tr td {
    height: 20px;
}

.events-calendar tr td:first-child {
    padding-right: 20px;
}

.events-calendar tr td:not(:first-child) {
    width: 100px;
    background-color: #e4e4e4;
}

.events-calendar tr th:not(:first-child) {
    background-color: #39a2a5;
    color: white;
    font-weight: normal;
}

.occupied {
    background-color: #84b5c3;
}

.occupied2 {
    background-color: #227a93;
}

#portal-preview {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    -webkit-transition-property: all;
    /* Safari */
    -webkit-transition-duration: 1.5s;
    /* Safari */
    transition-property: all;
    transition-duration: 1.5s;
    box-shadow: 0px 4px 39px -2px rgba(128, 128, 128, 0.69);
    resize: both;
    overflow: auto;
}

.device_icons {
    float: left;
    margin-left: -50px;
    padding: 0;
}

#values {
    color: white;
    margin-top: 5px;
    float: right;
    margin-right: 20px;
}

#scrollup {
    width: 40px;
    height: 40px;
    position: fixed;
    left: 12px;
    bottom: 12px;
    display: none;
    /*text-indent: -9999px;
    background: url('../images/up_32.png') no-repeat;*/
    padding: 10px 10px 10px 0px;
}

.mikrotik-container {
    text-align: center;
}

.mikrotik-container .device {
    position: relative;
    min-height: 30px;
    border: 1px solid grey;
    width: auto;
    display: inline-block;
    padding: 15px 30px 10px 80px;
    background-color: #FAFAFA;
}


.mikrotik-container .device .plug:before {
    content: 'Power';
    font-size: 5px;
    position: absolute;
    top: -8px;
    left: 0px;
}

.mikrotik-container .device .plug {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.mikrotik-container .device .plug img {
    width: 16px;
}


.mikrotik-container .highlight {
    background-color: #39a2a5;
}

.removable {
    position: relative;
}

.removable .remove-handle,
.empty-handle {
    position: absolute;
    right: -10px;
    top: 10px;
    width: 16px;
    height: 16px;

}

.removable .remove-handle {
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiBzdHlsZT0iZmlsbDojMzhhMmE0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OS40MjUgNDg5LjQyNSIgPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTIyLjgyNSwzOTQuNjYzYzE3LjgsMTkuNCw0My4yLDMwLjYsNjkuNSwzMC42aDIxNi45YzQ0LjIsMCw4MC4yLTM2LDgwLjItODAuMnYtMjAwLjdjMC00NC4yLTM2LTgwLjItODAuMi04MC4yaC0yMTYuOQ0KCQkJYy0yNi40LDAtNTEuNywxMS4xLTY5LjUsMzAuNmwtMTExLjgsMTIxLjdjLTE0LjcsMTYuMS0xNC43LDQwLjMsMCw1Ni40TDEyMi44MjUsMzk0LjY2M3ogTTI5LjEyNSwyMzMuMDYzbDExMS44LTEyMS44DQoJCQljMTMuMi0xNC40LDMyLTIyLjYsNTEuNS0yMi42aDIxNi45YzMwLjcsMCw1NS43LDI1LDU1LjcsNTUuN3YyMDAuNmMwLDMwLjctMjUsNTUuNy01NS43LDU1LjdoLTIxN2MtMTkuNSwwLTM4LjMtOC4yLTUxLjUtMjIuNg0KCQkJbC0xMTEuNy0xMjEuOEMyMy4wMjUsMjQ5LjY2MywyMy4wMjUsMjM5LjY2MywyOS4xMjUsMjMzLjA2M3oiLz4NCgkJPHBhdGggZD0iTTIyNS40MjUsMzA5Ljc2M2MyLjQsMi40LDUuNSwzLjYsOC43LDMuNnM2LjMtMS4yLDguNy0zLjZsNDcuOC00Ny44bDQ3LjgsNDcuOGMyLjQsMi40LDUuNSwzLjYsOC43LDMuNnM2LjMtMS4yLDguNy0zLjYNCgkJCWM0LjgtNC44LDQuOC0xMi41LDAtMTcuM2wtNDcuOS00Ny44bDQ3LjgtNDcuOGM0LjgtNC44LDQuOC0xMi41LDAtMTcuM3MtMTIuNS00LjgtMTcuMywwbC00Ny44LDQ3LjhsLTQ3LjgtNDcuOA0KCQkJYy00LjgtNC44LTEyLjUtNC44LTE3LjMsMHMtNC44LDEyLjUsMCwxNy4zbDQ3LjgsNDcuOGwtNDcuOCw0Ny44QzIyMC43MjUsMjk3LjI2MywyMjAuNzI1LDMwNC45NjIsMjI1LjQyNSwzMDkuNzYzeiIvPg0KCTwvZz4NCjwvc3ZnPg==') no-repeat center center;
    cursor: pointer;
}

.empty-handle {
    right: -20px;
}


.removable .remove-handle.td {
    width: 16px;
    position: relative;
    bottom: 0px;
}

.removable .remove-handle.div {
    top: 2px;
}

.no-border {
    border-width: 0px;
}

.center {
    text-align: center;
}

.standout {
    font-weight: bold;
}

@media all and (max-width: 2400px) {
    .dynamic_widget h1 {
        width: 1440px
    }

    .dynamic_widget {
        width: 1480px;
    }
}

@media all and (max-width: 1650px) {
    .dynamic_widget h1 {
        width: 700px
    }

    .dynamic_widget {
        width: 780px;
    }
}

.history-toggle {
    fill: #FFF;
}


div.slidable {
    padding: 10px;
    border-bottom: 1px solid #004563;
    cursor: pointer;
}

div.slidable-content {
    padding: 5px 10px 20px 10px;
}

#clone_site_container input[type="radio"] {
    display: none;
}

/* Popup container - can be anything you want */
.contexthelp {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.contexthelp p {
    border: 1px solid gray;
    width: 320px;
    background-color: white;
    color: #555;
    text-align: center;
    border-radius: 6px;
    padding: 8px 3px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    display: none;
}

/* Popup arrow */
.contexthelp p::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 25%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

input.upload-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

label.upload-file:focus {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

label.upload-file.button {
    margin-left: 0;
}

.dataTables_filter {
    width: 185px;
    top: -60px;
    right: 12px;
}

.dataTables_filter label {
    display: block;
    margin-bottom: 0;
    font-weight: normal;
}

.dataTables_filter .fas {
    position: absolute;
    top: 9px;
    right: 12px;
    z-index: 1;
}

#nas_datatable_filter {
    position: absolute;
    top: -31px;
}

#nas_datatable * {
    outline: none;
}

#active_datatable_filter {
    position: absolute;
    top: -31px;
}

#active_datatable * {
    outline: none;
}

.dataTables_wrapper {
    margin-top: 20px;
}

.parent-li {
    outline: none;
}

.questionMark {
    width: 40px;
}

.table_refresh {
    cursor: pointer;
}

.loading_datatable,
.loading {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 4000px;
    z-index: 1000;
    color: black;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    display: none;
    padding-top: 0px
}

.loading {
    height: 100%;
    width: 1000px;
    color: #004563;
    z-index: 1005;
    top: 0px;
}

.loading_datatable .fa-spin,
.loading .fa-spin {
    font-size: 28px
}

.dataTable tr td:last-child {
    position: relative;
}


.bzn .G-Ni {
    position: relative;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 100%;
    margin-left: -12px;
    padding-right: 8px;
}

.G-tF>.G-Ni>.T-I,
.SI .G-tF>.G-Ni>.T-I {
    margin-left: 12px;
    margin-right: 12px;
}

.asa.bjy {
    color: transparent;
    display: block;
    font-size: 0;
    height: 40px;
    margin: -10px;
    width: 40px;
    bottom: 10px;
}

.asa.bjy::before {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

.T-I-JW>.asa::before {
    background-color: rgba(32, 33, 36, 0.059);
    border: none;
    opacity: 1;
    transform: scale(1);
}

.asa::before {
    content: '';
    display: block;
    opacity: 0;
    position: absolute;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: -1;
    bottom: -10px;
    left: -10px;
    right: -10px;
    top: -10px;
    background: none;
    border-radius: 50%;
    box-sizing: border-box;
    transform: scale(0);
    transition-property: transform, opacity;
}

.T-I-ax7.T-I-JW>.asa.bjy::after {
    opacity: .87;
}

.asa.bjy::after {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    content: '';
    display: block;
    position: absolute;
    opacity: .54;
}

.bjy::after {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.asa.bjy:active::after {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);
}

.T-I-Kq>.asa::before,
.T-I-Kq.T-I-JO>.asa::before {
    background-color: rgba(32, 33, 36, 0.122);
    border: none;
    opacity: 1;
    transform: scale(1);
}

.T-I-JO:not(.T-I-Zf-aw2):not(.T-I-Kq)>.asa::before {
    background-color: rgba(32, 33, 36, 0.122);
    border: 1px solid #bdc1c6;
    opacity: 1;
    transform: scale(1);
}

.asa {
    align-items: center;
    border: none;
    display: inline-flex;
    justify-content: center;
    outline: none;
    position: relative;
    z-index: 0;
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.asa.bjy::before {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

.asa::before {
    content: '';
    display: block;
    opacity: 0;
    position: absolute;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: -1;
    bottom: -10px;
    left: -10px;
    right: -10px;
    top: -10px;
    background: none;
    border-radius: 50%;
    box-sizing: border-box;
    transform: scale(0);
    transition-property: transform, opacity;
}

.asa.bjy::after {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    content: '';
    display: block;
    position: absolute;
    opacity: .54;
}

.bjy::after {
    //background-image: url(https://www.gstatic.com/images/icons/material/system/1x/more_vert_black_20dp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.ns>.G-asx,
.mw>.G-asx,
.nf>.G-asx,
.ash>.G-asx {
    display: none;
}

.G-Ni .G-asx {
    align-items: center;
    border: none;
    display: inline-flex;
    justify-content: center;
    outline: none;
    position: relative;
    z-index: 0;
    margin: 0;
    vertical-align: middle;
}

.T-KT,
.T-I .T-I-J3 {
    display: inline-block;
    height: 20px;
    margin: 0;
    padding: 0;
    -webkit-transition: opacity .15s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: opacity .15s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 20px;
}

.T-I-ax7 .T-I-J3 {
    opacity: .54;
}

.T-I .T-I-J3 {
    margin-top: -3px;
    vertical-align: middle;
}

.G-asx,
.d-Na-J3.d-Na-JX-ax3.d-Na-hFsbo {
    background-image: url(https://www.gstatic.com/images/icons/material/system/1x/arrow_drop_down_black_20dp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.G-asx {
    background: url(//ssl.gstatic.com/ui/v1/zippy/arrow_down.png) no-repeat 0 1px;
    margin-top: -3px;
}

.G-asx {
    background: url(//ssl.gstatic.com/ui/v1/zippy/arrow_down.png) no-repeat 0 1px;
    margin-top: -3px;
}

.G-asx {
    height: 6px;
    width: 7px;
    background: url(//ssl.gstatic.com/ui/v1/zippy/arrow_down.png) no-repeat 0 1px;
    vertical-align: middle;
    font-size: 0;
    margin-left: 3px;
}

.J-J5-Ji {
    position: relative;
    display: inline-block;
}

.J-J5-Ji {

    font-size: 13px;
    position: absolute;
    right: 7px;
    color: #999;
}

.G-atb .T-I-ax7,
.G-atb .T-I-ax7.T-I-JW {
    background: none;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.T-I-Kq {
    background-color: transparent;
    background-image: -webkit-linear-gradient(top, #eee, #e0e0e0);
    background-image: linear-gradient(top, #eee, #e0e0e0);
    background-image: -webkit-linear-gradient(to bottom, #eee, #e0e0e0);
    background-image: linear-gradient(to bottom, #eee, #e0e0e0);
    border-color: #ccc;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #333;
}


.T-I-JW>.asa::before {
    background-color: rgba(32, 33, 36, 0.059);
    border: none;
    opacity: 1;
    transform: scale(1);
}

.context_menu {
    display: none;
    background: #fff;
    color: #808080;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.context_menu {
    right: 17px;
    top: 30px;
    list-style-type: none;
    margin: 0;
    display: none;
    background: #fff;
    padding: 6px 0;
    border-radius: 3px;
    position: absolute;
    z-index: 1000;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.context_menu li {
    position: relative;
}

.context_menu .material-icons {
    position: absolute;
    font-size: 13px;
    left: 10px;
    top: 5px;
}



.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.context_menu a {
    text-decoration: none;
    display: inline-block;
    padding-left: 33px;
    padding-right: 25px;
    line-height: 25px;
    width: 100%;
    color: #808080;
    box-sizing: border-box;
}


.context_menu a:hover:hover {
    background-color: #ebebeb;
}

.icon_asset {
    padding-right: 5px;

}

#nas_datatable tbody tr td:first-child .material-icons {
    font-size: 16px;
    position: relative;
    top: 2px;
    left: 5px;
    color: #38a2a4;
}

#active_datatable tbody tr td:first-child .material-icons {
    font-size: 16px;
    position: relative;
    top: 2px;
    left: 5px;
    color: #38a2a4;
}

#nas_datatable .context_menu {
    width: 200px;
}

.rag_status {
    text-align: left;
}

.status_key {
    margin-left: -21px;
}

.list-container {
    overflow-y: scroll;
    padding: 3px 0px;
    margin: 4px 0px;
    max-height: 170px;
}

.filter_row {
    padding-right: 208px;
    z-index: 1000;
    position: relative;
}

.filter_row .panel {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 7px;
    width: 250px;
    top: 35px;
    left: 0;
}

.filter_row .filter:hover {
    border-color: #38a2a4;
    color: #38a2a4;
}

.filter_row .filter,
.filter_row .filter:active {
    border-radius: 15px;
    border-color: #666;
    color: #666;
}

.filter_row .filter img {
    position: absolute;
    right: 9px;
    top: 7px;
}


.dataTables_filter {
    width: 185px;
    top: -60px;
    right: 12px;
}

.dataTables_filter label {
    display: block;
    margin-bottom: 0;
    font-weight: normal;
}



.dataTables_filter input {
    background-color: #fafafa;
    color: #808080;
    width: 100%;
    border-radius: 17px;
    font-size: 1rem;
    height: 30px;
    border: 1px solid #DBDFE1;
    display: inline-block;
    padding: 2px 25px 2px 13px;
    outline: none;
    position: relative;
    line-height: 26px;
}


.dataTable tr td:last-child {
    position: relative;
}

.table_options.filter .panel {
    display: none;
}



.table_options.filter .panel .mdc-checkbox__background {
    width: 15px;
    height: 15px;
}

.table_options.filter .panel .mdc-checkbox {
    padding: 5px 11px;
    position: relative;
    bottom: 4px;
}

.clearFilters {
    position: absolute;
    right: 12px;
    color: #38a2a4;
    font-size: 11px;
    top: 8px;
    font-weight: normal;
    text-transform: capitalize;
}

#global_port_config .col3 .input-container {
    padding: 0px;
}

.input-container .mdc-form-field,
.input-container .port_config span {
    color: #004563;
    font-size: 15px;
}

.input-container .port_config {
    margin-top: 5px
}

.input-container .mdc-form-field {
    padding: 0px;
}

.input-container .mdc-radio {
    padding: 8px;
}

.untag_field {
    width: 50px;
    margin-top: 0px;
}

.mdc-form-field .mdc-checkbox svg,
.mdc-form-field .mdc-radio svg {
    top: auto;
}

.mdc-form-field.disabled {
    color: #808080;
}

.filterList {
    box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2), 0 0px 1px 1px rgba(0, 0, 0, 0.14), 0 1px 2px 2px rgba(0, 0, 0, 0.12);
    outline: none;
    border: 1px solid #fff;
    border-radius: 2px;
    width: 98%;
    margin: 1px 0% 0 1%;
    height: 30px;
    font-size: 11px;
    padding: 0 4px;
    box-sizing: border-box;
}

.health_table li {
    width: 45%;
}

:root {
    --mdc-theme-primary: #004563;
    --mdc-theme-text-primary-on-background: #004563;
}

#asset_port_config #asset_port_inner.disabled {
    opacity: 0.4;
    filter: alpha(opacity=40);
    pointer-events: none;
}

fieldset.no-border {
    border: none;
}

.secondary_button {
    background: none;
    color: #004563;
}

.swal-button--confirm {
    background-color: #004563;
    color: white;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}

#global_config_form {
    min-height: 300px;
}


#resident-dashboard-tabs img {
    width: 25px;
    margin-right: 15px;
    margin-top: -10px;
}

.resident-reporting-container {
    display: none;
}

#resident-dashboard-tabs li {
    float: left;
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    color: #727070;
}

#resident-dashboard-tabs li.active {
    border-bottom: 1px solid grey;
}

.dashboard-container {
    position: relative;
}

.dashboard-container img {
    width: 840px;
    height: 413px;
    vertical-align: top;
}

.dashboard-container .cannybutton {
    position: absolute;
    top: 310px;
    left: 410px;
    border-radius: 10px;
    border: 1px solid rgb(52, 170, 220);
    padding-left: 3px;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    background-color: rgb(52, 170, 220);
    font-weight: 400;
    cursor: pointer;
    margin-right: 20px;
}

/* Appcues Launchpad */
#appcues-launchpad {
    margin-top: 5px;
    color: #0b4563;
}

#appcues-launchpad::before {
    content: "Tutorials";
    font-family: "roboto";
    font-size: 16px;
    color: #0b4563;
    left: 50px;
    position: absolute;
    padding-top: 5px;
}

.appcues-widget-icon {
    padding-right: 165px;
}

.appcues-widget-icon:after {
    display: none !important;
}

.appcues-widget-dropdown {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.appcues-widget-header {
    height: 35px;
    padding-top: 10px !important;
}

.appcues-launchpad-title {
    font-size: 20px;
    color: #0b4563;
}

.appcues-launchpad-footer{
    height: 15px;
}

.upload_field_settings {
    float: right;
    position: absolute;
    height: 50px;
    width: 200px;
    margin-left: 25px;
    margin-top: 10px;
    opacity: 0;
}

.table-information__warning {
    text-align: center;
    background-color: red;
    border-radius: 7px;
    padding: 10px;
    color: #ffffff;
    margin-top: 10px;
}

.table-information-content a {
    color: #ffffff;
    border-bottom: 1px solid;
}

.password-container {
    position: relative;
}

.bi {
    height: 16px;
    width: 16px;
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 8px;
}

.bi:hover {
    cursor: pointer;
}

.bi-eye-open {
    background: url(../images/eye_open.svg) no-repeat;
}

.bi-eye-close {
    background: url(../images/eye_close.svg) no-repeat;
}
#header #logo_frame a.custom_logo_for_326, #header #logo_frame a.custom_logo_for_510 {
    background-image: url(../images/brands/mikenopa/logo.png);
    width: 300px;
}

/*

@media all and (max-width: 700px) {

  #welcome_container{
      min-height:600px;
  }
  #welcome_container #info{
      padding-top:10px;
  }

  .message{
      width:80%;margin-left:-45%;
  }

  body,html {
    min-width:400px;
  }

 .table tr td:not(:first-child),.table tr th:not(:first-child){
      display:none;
  }

  .ul_table li,#body_frame > div{
      width:100% !important;
  }

  .dialog,.ui-dialog,.filter_dialog input[type="text"],.filter_dialog input[type="select"],.combobox-main-container{
      width:90% !important;
  }

  .slide > div{
      padding:0px
  }

  .details .body{
      padding:10px 25px 5px 15px;
  }

  .ui-dialog .ui-dialog-content{
      width:100% !important;
  }

  .tabs ul li,.popup_body > div{
      float:none !important;
      width:100% !important;
  }

  .tabs ul{
      height:auto;
  }

  .details .button{
      float:none;
      margin-bottom:10px;
  }

  .details h2{
      padding-left:0px;
  }

  .details h2 img{
      display:none;
  }

  #logo_frame{
      padding-left:20px;
  }

  #logo_frame .brand{
      display:none;
  }
}

*/

/*
body,html{
    background-color:#f4f4f4;
}

.widget{
    background-color:white; margin:20px; border:2px solid #ECF0F1;
}

#menu_frame{
    background-color:#39526b;
}
#menu_frame svg{
    fill:#FEFDF3;
}


#menu_frame ul li{
    cursor:pointer;
    margin:0px;
    padding:10px 10px 10px 15px;
    transition: all 0.2s ease-in;
}

#menu_frame ul li:hover{
    background-color:#2E4054;
}

#menu_frame ul li a{
    color:#FEFDF3;
    font-size:14px;
}

.action_buttons{
    background-color:white;
    border-bottom:2px solid #39526b;
}

.action_buttons input{
     color:#39526b;
}

.table-container{
    background-color:white;
    padding:20px;
    border:2px solid #ECF0F1;
    margin-bottom:100px;
}

.details{
     background-color:white;
    border:2px solid #ECF0F1;
    border-radius:0px;
}*/

@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}
.port-settings-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
}
.port-settings_hide {
    display: none;
}

.port_type_error, .port_settings_error {
    border: solid 1px #bb3939;
    background: #ec6e6e45;
    margin: 15px 5px;
    padding: 5px 10px;
    display: none;
}

.warning-message-box {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  color: #69370F;
  background-color: #fdf0e6;
  border: #fbcbb1;
  border-radius: 0.375rem;
  padding-left: 4rem;
}

.dismissible{
  padding-right: 3rem !important;
}
.script{
  padding-right: 15rem !important;
}

.publish{
  padding-right: 7rem !important;
}

.mode{
  padding-right: 15rem !important;
}

.dismissible .btn-close {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 2;
  padding: 1rem 1rem;
}

.btn-close{
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #013654;
  background: transparent;
  font-size: 24px;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.8;
  cursor: pointer;
}

.btn-close:hover {
  color: #0288d1;
  text-decoration: none;
  opacity: 1;
}

/* .dismissible .close-text{
  position: absolute;
  top: 0;
  right: 30px;
  padding: 1.25rem 1rem;
} */

.info-message-box {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  color: #013654;
  background-color: #e6f3fa;
  border: #a9ddf3;
  border-radius: 0.375rem;
  padding-left: 4rem !important;
}

.info-message-box .mm{
  top: 10px!important;
}

.info-message-box i{
  color: #0288d1;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  background: transparent;
  font-size: 24px;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.8;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2;
  padding: 1rem 1rem;
}

.warning-message-link {
  text-decoration: underline;
  color: #013654;
}

.warning-message-box i{
  color: #5f2b01;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  background: transparent;
  font-size: 24px;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.8;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2;
  padding: 1rem 1rem;
}

.info-message-link {
  text-decoration: underline;
  color: #000000;
}

.btn-script{
  color: #ffffff;
  background-color: #1976d2;
  box-shadow: 0px 3px 1px -2px rgb(0,0,0,0.20), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
  box-sizing: content-box;
  padding: 0.75em 0.75em;
  border: 0;
  border-radius: 0.250rem;
  opacity: 0.8;
  cursor: pointer;
  margin-right: 15px;
  position: absolute;
  top: 6px;
  right: 0;
  left: 5;
}

.btn-publish{
  color: #ffffff;
  background-color: #ed6c02;
  box-shadow: 0px 3px 1px -2px rgb(0,0,0,0.20), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
  box-sizing: content-box;
  padding: 0.75em 0.75em;
  border: 0;
  border-radius: 0.250rem;
  opacity: 0.8;
  cursor: pointer;
  margin-right: 15px;
  position: absolute;
  top: 6px;
  right: 0;
  left: 5;
}

.btn-publish:hover{
  text-decoration: none;
  opacity: 1;
}

.btn-script:hover{
  text-decoration: none;
  opacity: 1;
}

.nas-details {
  margin-bottom: 5rem;
}

.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 350px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px 0;
  padding-left: 15px;

  position: absolute;
  z-index: 1;
  top: 100%;
  right: 105%;
  margin-left: -60px;;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.code-container{
  position: relative;
  margin: 5px 0 ;
  padding: 1.75rem 0 1.75rem 1rem;
  white-space: pre-wrap;
  word-break: break-all;
  border: 2px solid #cccccc;
  border-radius: 7px;
}
.code-container i{
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer
}

.refreshButton {
    border-radius: 10px;
    border: 1px solid #38a2a4;
    padding-left: 3px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
    color: #38a2a4;
    font-weight: 400;
    cursor: pointer;
    margin-right: 20px;
    margin-left: 50px;
}

#active_datatable {
  width: 100% !important;
}

.copy-confirmation{
  display: none;
  position: absolute;
  top: 100px;
  right: 35px;
  height: 28px;
  width: 110px;
  color: white;
  border-radius: 3px;
  background-color: gray;
  padding-top: 7px;
  text-align: center;
}