@font-face {
    font-family: Poppins;
    src: url("fonts/Poppins-Regular.ttf");
}
:root {
	--white: #ffffff;
	--black: #000000;
	
	--xConnectBlue: #00adee;
	--xConnectSuccess: #20bf5b;
	--xConnectWarning: #fdd32a;
	--xConnectDanger: #ec4848;
    --xConnectOffline: #BABABA;
	--xConnectGradient: var(--xConnectBlue);
	--xConnectGradient2: #181528;
    --xConnectScroll: #2b2b40;
	
	--activeComponentText: var(--white);
}

.xconnect {
	--primaryColor: var(--xConnectBlue);
}

.quickmenu__list.end-user {
	display: grid;
    grid-template-columns: auto;
}

.quickmenu__list.power-user {
	display: grid;
    grid-template-columns: repeat(3, auto);
}

.quickmenu__list.power-user-collapsed {
    display: grid;
    grid-template-columns: auto;
}

.power-user-collapsed .quickmenu__item {
    width: 50px;
}

.power-user-collapsed .quickmenu__item {
    float: left;
    /*min-width: 33.3%;
    width: 100%;*/
    width:50px;
    height: 30px;
    text-align: center;
    color: #c5d3df;
    cursor: pointer;
    max-height: 100%
}

.power-user-collapsed .quickmenu__item.active {
    color: #fff;
    border-bottom: 2px solid var(--primaryColor);
}

.power-user-collapsed .quickmenu__item.new:after {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ed4949;
    position: absolute;
    top: 7px;
    right: 7px;
}

.fa-fg {
    color: var(--xConnectSuccess);
}

.fa-fy {
    color: var(--xConnectWarning);
}

.fa-fr {
    color: var(--xConnectDanger);
}

.fa-fgray {
    color: var(--xConnectOffline);
}

.fa-fb {
    color: var(--primaryColor);	
}

.fa-fu {
    color: var(--xConnectBlue);
}

.fa-fw {
    color: var(--white);
}

.xc-entity-sidebar {
    height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
}

.sidebar-icon-gap {
    gap: 1rem !important;
}

.collapse-menu-height {
    min-height: calc(100vh - 75px) !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.sidebar-collapsed-subheader {
    left: 0px !important;
}

.xc-health-overview {
    overflow: hidden;
}

.chart > canvas {
    /*max-height: 65px;*/
    max-height: 100px;
}

.chart > div.focused-group {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    height: 100%;
    width: 100%;
    padding-top: 40px;
}

.chart-info-gap {
    gap: 2rem !important;
}

.font-16-px {
    font-size: 16px !important;
    color: #a2a3b7;
    font-weight: 400 !important;
    text-transform: initial !important;
}

.font-16-px:hover { color: #ffffff !important; }

.custom-icon:hover { color: #3699FF !important; }

.header-icon { color: #B5B5C3 !important; }

.setting-list:hover .custom-icon{ 
    color: #3699FF !important;
}

.setting-list:hover .font-16-px{ 
    color: #ffffff !important;
}

/* new */
.sidebar-brand-logo {
    width: 150px !important;
    height: 35px !important;
}

.font-color {
    color: #a2a3b7 !important;
}

.settings-breadcrumbs {
    left: 0px !important;
}

.table-header-color > a {
    color: #a2a3b7 !important;
}

.w-90 {
    width: 90% !important;
}

.px-30 {
    padding-left: 7.5rem !important;
    padding-right: 7.5rem !important;
}

.svg-icon.svg-icon-6x svg {
    height: 6rem !important;
    width: 6rem !important;
}

.xs-hor-modal .modal-dialog { max-width: none !important; width: 25% !important; }
.sm-hor-modal .modal-dialog { max-width: none !important; width: 33.3% !important; }
.md-hor-modal .modal-dialog { max-width: none !important; width: 50% !important; }
.lg-hor-modal .modal-dialog { max-width: none !important; width: 66.6% !important; }
.xl-hor-modal .modal-dialog { max-width: none !important; width: calc(100% - 40px) !important; }

.xs-ver-modal .modal-dialog { max-height:none; height: calc(25% - 60px) !important; }
.sm-ver-modal .modal-dialog { max-height:none; height: calc(33.3% - 60px) !important; }
.md-ver-modal .modal-dialog { max-height:none; height: calc(50% - 60px) !important; }
.lg-ver-modal .modal-dialog { max-height:none; height: calc(66.6% - 60px) !important; }
.xl-ver-modal .modal-dialog { max-height:none; height: calc(100% - 60px) !important; }

.approve-btn, .block-btn {
    background: transparent;
    border: 1px solid #899390;
    border-radius: 10px 0 0 10px;
    color: #9cd52b;
    font-weight: normal;
    padding: 0 10px;
    outline: none;
}

.block-btn {
    color: #c92f2d;
    border-radius: 0 10px 10px 0;
}

.h-42px {
    height: 42px !important;
}

.ace-editor {
    min-height: 200px;
}

.delete-clone-menu {
    overflow: visible !important;
    vertical-align: middle !important;
    cursor: pointer;
}

.middle-modal {
    overflow: hidden !important;
}
.middle-modal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

.alert-mechanisms {
    vertical-align: middle;
}

.alert-mechanisms input[type=checkbox] {
    display: none;
}

.alert-mechanisms input[type=checkbox] + label:before {
    font-family: FontAwesome;
    font-size: 12pt;
    display: inline-block;
}

.alert-mechanisms input[type=checkbox] + label:before {
    letter-spacing: 5px;
}

/* space between checkbox and label */
.alert-mechanisms input[type=checkbox]:checked + label:before {
    letter-spacing: 5px;
}

/* allow space for check mark */

.alert-mechanisms .dashboard-notifications input[type=checkbox] + label:before {
    content: '\f0f3';
    margin-right: -5px;
}

/* unchecked icon */
.alert-mechanisms .dashboard-notifications input[type=checkbox]:checked + label:before {
    content: '\f0f3';
    color: var(--xConnectBlue);
}

/* checked icon */

.alert-mechanisms .email-profiles input[type=checkbox] + label:before {
    content: '\f0e0';
}

/* unchecked icon */
.alert-mechanisms .email-profiles input[type=checkbox]:checked + label:before {
    content: '\f0e0';
    color: var(--xConnectBlue);
}

/* checked icon */

.alert-mechanisms .third-party-connectors input[type=checkbox] + label:before {
    content: '\f20e';
}

/* unchecked icon */
.alert-mechanisms .third-party-connectors input[type=checkbox]:checked + label:before {
    content: "\f20e";
    color: var(--xConnectBlue);
}

/* checked icon */

.alert-mechanisms .remote-commands input[type=checkbox] + label:before {
    content: "\f0ca";
}

/* unchecked icon */
.alert-mechanisms .remote-commands input[type=checkbox]:checked + label:before {
    content: "\f0ca";
    color: var(--xConnectBlue);
}

/* allow space for check mark */

.alert-mechanisms .zapier-alerts input[type=checkbox] + label:before {
    content: '\f0e7';
    margin-right: -5px;
}

/* unchecked icon */
.alert-mechanisms .zapier-alerts input[type=checkbox]:checked + label:before {
    content: '\f0e7';
    color: var(--xConnectBlue);
}

.collapse.in {
    display: block !important;
}

fieldset {
    border: 1px solid #dedede;
    border-radius: 5px;
    margin: 0 15px;
    min-width: 0;
    padding: 0 0 10px;
}

.table.gy-5 td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    vertical-align: middle !important;
}

.modal-backdrop.fade {
    opacity: 0.5 !important;
    background-color: gray !important;
}

.popover {
    display: block !important;
    opacity: 1 !important;
    max-width: 600px !important;
}

.w-25px {
    width: 25px !important;
}

.popover-title {
    background-color: #2b2b40 !important;
}

.uib-datepicker-popup {
    z-index: 9999 !important;
}

.system-storage-health {
    max-height: 315px !important;
    overflow-y: auto !important;
}


.justify-content-between i {
    padding-left: 5px;
    padding-right: 5px;
}

.btn:disabled {
    pointer-events: unset !important;
    cursor: not-allowed !important;
}

.cursor-disabled {
    cursor: not-allowed !important;
}

.toastr {
    opacity: 1 !important;
}
input:focus {
	outline: 1px solid var(--xConnectBlue) !important;
}

.modal-70vh {
    max-height: 70vh !important;
}
/* custom class for create email template html */
.form-control.has-error {
	border-color: #ed4949;
	color: #ed4949;
}
.ta-scroll-window.ta-text.ta-editor.form-control {
    max-height: 100px !important;
}
 .ta-scroll-window.ta-text.ta-editor.form-control > .popover { 
    display: none !important; 
}
/* end of custom class for create email template html */
/* custom class for remote commands modal ul li */
ul.list-remote-commands-modal > li.list-group-item {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    color: #fff;
    background-color: transparent;
    border: 2px solid rgba(0,0,0,.125);
}
.panel.panel-default.panel-content {
    background-color: transparent;
}
/* end of custom class for remote commands modal ul li*/
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
    background-color: transparent;
}
.table-responsive {
    border: none !important;
}

.dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
}

.sidebar-scroll-class {
    height: inherit !important;
    overflow-x: hidden !important;
  }

.form-control.is-invalid {
    border-color: #f1416c !important;
    outline: none !important;
}

.form-select.is-invalid {
    border-color: #f1416c !important;
    outline: none !important;
}
.margin-left-5 {
    margin-left: 5px !important;
}
.spinner-health-block-custom {
    position: relative;
    left: 10rem;
    margin-top: 8rem !important;
}

.vertical-middle {
    vertical-align: middle !important;
}

.mr-2 { 
    margin-right: .5rem!important;
}

.left-auto { 
    left: auto !important;
}
a.outline-none {
    outline: none !important;
}

/* map styles */

.map-tooltip,
.map-infobox {
	background-color:#30363c;
	border: 1px solid #888;
	border-radius: 8px;
	padding:5px;
}

.map-tooltip {
	height:30px;
	width:200px;
	text-align:center;
}

.map-infobox {
	height:204px;
	width:400px;

	display: grid;
	grid-template-rows: 30px auto;
	align-items: center;
}

.map-infobox > div.title {
	border-bottom: 1px solid #888;
	font-weight: bold;
	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.map-infobox > div.reasons {
	overflow: hidden;
	overflow-y: auto;
	height: 100%;
}

.map-infobox i {
	margin-right: 3px;
}

.text-offline{
        color: dimgray !important;
}

.btn-offline{
    background-color: dimgray !important;
}

.svg-icon-offline  {
    transition: fill 0.3s ease;
    fill: dimgray;
}

.MicrosoftMap div {
    border-radius: .475rem !important;
}

.flex-health-overview-container {
    display: flex;
    height: auto;
}

.flex-health-overview-container > div.overview-container-flex {
    width: auto;
    flex: 0 0 50px;
}
.remote-command-timeline-label:before {
    width: 0px !important;
}

.remote-command-timeline-label .timeline-badge {
    border: none !important;
}
.timeline-label .timeline-label {
    width: 70px !important;
}
.timeline-label:before {
    left: 71px !important;
  }
  .panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 1px solid #2b2b40 !important;
}

.remote-command-timeline-label-dark {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, #eff2f5 51%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 100%);
}

.remote-command-timeline-label-light {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, gray 51%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 100%);
}

.menu-item.accordion.bookmarks-accordion > .menu-link.accordion-header[data-toggle]:not(.collapsed) .menu-arrow:after {
    transform: rotateZ(90deg);
    transition: transform 0.3s ease;
}

.card-header {
    min-height: 60px !important;
}
.gap-25 {
    gap: 0.25rem !important;
}
.max-h-75px {
    max-height: 75px;
}

.menu-item.accordion.telemetry-accordion > .menu-link.accordion-header[data-toggle]:not(.collapsed) .menu-arrow:after {
    transform: rotateZ(90deg);
    transition: transform 0.3s ease;
}

.menu-item.accordion.telemetry-accordion > .menu-link.accordion-header > .menu-arrow {
    height: 1.25rem;
    width: 1.25rem;
}

.w-dashboard-status-button {
    width: 130px !important;
}

@media (min-width: 1024px) and (max-width: 1280px)  {
    .w-dashboard-status-button {
        width: 70% !important;
    }
    .deviceInfo-button {
        padding: calc(0.65rem + 1px) calc(1.25rem + 1px);
    }
    .deviceaction-buttons-gap {
        gap: 0.25rem !important;
    }
}

@media (min-width: 1280px) and (max-width: 1440px)  {
    .w-dashboard-status-button {
        width: 50% !important;
    }
    .recurring-modal .modal-dialog{
        max-width: none !important; 
        width: calc(100% - 40px) !important;
    }
    .schedule-class {
        gap: 0.5rem !important;
        padding-left: 0px !important;
    }
    .schedule-class > button {
        padding: 10px !important
    }
}

.notification-message {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.aside .aside-logo {
    padding: 0 10px!important;
}
.datetimepicker .disabled, .datetimepicker .disabled:hover{
    color: #777 !important;
}

.remote-command-timeline-des-width {
    gap: 0.5rem !important;
    text-align: center !important;
}

@media (min-width: 1024px) and (max-width: 1200px)  {
    #kt_docs_search {
        margin-right: 0px !important;
        width: 180px !important;
    }
    .header-icon {
        margin-left: 5px !important;
    }
    .header-breadcrumb { 
        flex-wrap: nowrap !important;
    }
    .header-breadcrumb > li {
        width: 60px;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .header-breadcrumb > li > span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .chart-section {
        width: 150px !important;
    }
}

@media (min-width: 1152px) and (max-width: 1920px)  {
    #kt_docs_search {
        margin-right: 1.25rem !important;
        width: 250px !important;
    }
}

.fieldset-content{
    border-color: #000000;
}
.fieldset-remote-commands{
    all: revert;
    width: auto;
    padding: 5px 10px;
    border-bottom: none;
}

::-webkit-scrollbar {
    width:0.7rem !important;
    height:0.4rem !important;
}

::-webkit-scrollbar-thumb {
    background: var(--xConnectScroll) !important; 
}

select.form-select::-webkit-scrollbar {
    width:0.7rem !important;
    height:0.4rem !important;
}  

select.form-select::-webkit-scrollbar-thumb {
    background: var(--xConnectScroll) !important; 
}
/* remote command modal timeline state */
.remote-command-custom-w-55 {
    width: 55% !important;
}
.remote-command-custom-w-0{
    width: 0% !important;
}
.remote-command-custom-w-17{
    width: 17% !important;
}
.remote-command-custom-w-33{
    width: 33.70% !important;
}
.remote-command-custom-w-25{
    width: 24.70% !important;
}
.remote-command-custom-w-41{
    width: 41.40% !important;
}
.xc-break-all-words {
    word-break: break-all;
}

.menu-item.accordion.contact-information-accordion > .menu-link.accordion-header[data-toggle]:not(.collapsed) .menu-arrow:after {
    transform: rotateZ(90deg);
    transition: transform 0.3s ease;
}

.menu-item.accordion.contact-information-accordion > .menu-link.accordion-header > .menu-arrow {
    height: 1.25rem;
    width: 1.25rem;
}

@media screen and (max-width: 540px) {
    .lg-hor-modal .modal-dialog {
        width: 100% !important;
        margin-left: 0px;
        margin-top: 20px;
    }
    .back-to-dashboard-button {
        padding-right: 0px !important;
        padding-left: 0px !important;
        font-size: 0.75rem;
    }
    .devicename-card-header {
        flex-wrap: nowrap !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .device-actions-gap {
        gap: 0.5rem !important;
    }
    .timeline-content {
        flex-wrap: nowrap !important;
    }
    .timeline-content > div {
        flex-shrink: 1 !important;
    }
    .event-feed-title-mobile {
        width: 100% !important;
    }
    .px-for-mobile {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .event-feed-pagination-for-mobile {
        flex-direction: column !important;
        align-items: center !important;
    }
    .event-feed-pages-for-mobile > ul {
        flex-wrap: nowrap !important;
    }
    .arrow-group-for-mobile, .selected-telemetry-for-mobile {
        margin-top: 2.5rem !important;
    }
    .xl-hor-modal .modal-dialog {
        width: 100% !important;
        margin-left: 0px;
        margin-top: 20px;
    }
    .notifications {
        left: -235px !important;
    }
    .notification-menu-card {
        width: 355px !important;
    }
    .aside-mobile {
        display: flex !important;
        overflow: auto;
        z-index: 110;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
    }
    .aside-mobile-drawer-on {
        transform: none;
        box-shadow: 0px 1px 9px -3px rgb(0 0 0 / 5%);
        transition: transform 0.3s ease-in-out;
    }
    .chart-section {
        width: 50%;
    }
    .tooltip-inner {
        font-size: 9px !important;
    }
    .labels-dropdown {
        right: 0 !important;
        left: auto !important;  
    }

}
.email-configuration-list-count .email-configuration-list-length {
    background-color: #00adee;
    border-radius: 4px;
    height: 20px;
    width: 20px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    position: absolute;
    top: -14px;
    right: -16px;
    cursor: pointer;
}
.email-configuration-list-count {
    display: inline-block;
    position: relative;
}
.tooltip-inner {
    max-width: 100% !important;
}

.sidebar-expanded {
    width: 265px;
}

.sidebar-collapsed {
    width: 75px;
}
.fieldset-content-customer-onboarding{
       border-color: #00adee;
}
.fieldset-customer-onboarding{
        all: revert;
        width: auto;
        padding: 5px 10px;
        border-bottom: none;
        font-size: large;
}
/* Styles for animated popup modals Change slide-up animation to slide-down */
.modal > .modal-dialog > .modal-content {
    position: relative;
    animation: animatetopbottom 0.4s;
}  
@keyframes animatetopbottom {
    from {
      top: -300px;
      opacity: 0;
    }  
    to {
      top: 0;
      opacity: 1;
    }
}
.dropdown-backdrop {
    display: none;
  }

@media screen and (max-width: 992px) {
    .aside-mobile {
        display: flex !important;
        overflow: auto;
        z-index: 110;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
    }
    .aside-mobile-drawer-on {
        transform: none;
        box-shadow: 0px 1px 9px -3px rgb(0 0 0 / 5%);
        transition: transform 0.3s ease-in-out;
    }
}

.tooltip {
    display: block !important;
    opacity: 1 !important;
}

.tooltip-arrow {
    display: none !important;
}

.form-select-options {
    padding-right: 0px !important;
}

.label-color {
    width: 5px;
    height: 25px;
}

.assetTypeModel {
    background-color: rgb(27, 27, 41) !important;
}

.uib-typeahead-match a {
    color: white !important;
}

.w-60 {
    width: 60% !important;
}

.w-40 {
    width: 40% !important;
}

.apexcharts-tooltip {
    font-size: 12px !important;
}

.donut-chart .apexcharts-canvas .apexcharts-tooltip {
    left: 0px !important;
}

#kt_aside_menu_wrapper {
    overflow-x: hidden !important;
}

.arrow-query-builder {
    height: 1rem !important;
    width: 1rem !important;
}

.w-80 {
    width: 80% !important;
}

.w-85 {
    width: 85% !important;
}

.linux-logo {
    width: 1.15rem;
    height: 1.15rem;
}

.onboarding-modal-body {
    height: calc(100vh - 110px);
}

.bookmark-status-icon {
    font-size: 3.25rem !important;
    padding-left: 0.7rem !important;
}

.w-95 {
    width: 95% !important;
}

.kanban-board {
    border: 1px solid #3699ff;
}

.kanban-drag {
    height: 250px !important;
    overflow-y: auto !important;
}

.kanban-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: lightslategray !important;
    color: white !important;
    border-radius: .475rem !important;
}

.kanban-title-board {
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
}

.h-50vh {
    height: 50vh !important;
}   

.job_textbox {
    border: 1px solid #3699ff !important;
}

.kanban-title-board {
    gap: 0px !important
}

.jobs-area {
    overflow-y: auto !important;
}

.fs-12px {
    font-size: 12px !important;
}
.pr-0px{
	padding-right: 0px;
}
.pos-abs{
    position: absolute;
}

.w-30 {
    width: 30% !important;
}

.w-12 {
    width: 12% !important;
}

.w-74 {
    width: 74% !important;
}

.fs-8rem {
    font-size: 8rem !important;
}

.task-badge {
    margin-top: -25px;
    background-color: white;
    width: 2.25rem !important;
}
  
.kanban-container {
    flex-wrap: nowrap;
}

.kanban-container .kanban-board:first-child {
    margin-left: auto !important;
}

.kanban-container .kanban-board:last-child {
    margin-right: auto !important;
}

.typeahead-class-event-log-filter {
    z-index: 1050 !important;
    max-height: 150px !important;
    overflow-y: auto !important;
}

.warning-message {
    padding-right:1.75rem !important;
    padding-left:1.75rem !important
}

.text-webkit-center {
    text-align: -webkit-center !important;
}

.white-space-pre-line {
    white-space: pre-line;
}

.toastr-info {
    background-color: #3699ff !important;
}

.observe-edge-logo {
    height: 150px;
    margin-top: -80px;
    margin-bottom: -70px;
    margin-right: -50px;
}

.ai-cards > .card-body > div > .card > .card-body {
    padding-right: 0px !important;
    padding-left: 0px !important
}

.ai-cards > .card-body > div > .card > .card-body > div:nth-child(2) > div > div {
    padding-right: 0px !important;
    padding-left: 0px !important
}

.ai-telemetry-class {
    width: 335px;
}

.ai-device-company-class {
    width: 150px;
}

.ai-telemetry-class > div {
    text-overflow: ellipsis;
    overflow: hidden;
}

.mt-30 {
    margin-top: 30% !important;
}

.margin-right-5 {
    margin-right: 5px !important;
}

.visibility-icon {
    margin-left: -35px !important;
    margin-top: 10px !important;
}

.var-group-value-box {
    box-sizing: border-box !important;
    padding-right: 40px !important;
}

.collapse-expand-for-panel {
    height: 26px !important;
    width: 28px !important;
    padding: 1px !important;
}

.vl {
    border-left: 2px dotted #2b2b40;
    height: 20px;
}

.action-class:before {
    content: '';
    width: 2px;
    height: 20px;
    background: #2b2b40;
    position: absolute;
    bottom: 35%;
    margin-left: 150px;
}

.seperator-custom {
    margin-bottom: 20px;
}

.remote-desktop-file-explorer {
    z-index: 1099;
}

.mt-35 {
    margin-top: 35% !important;
}

.update-action-class:before {
    content: '';
    width: 2px;
    height: 20px;
    background: #2b2b40;
    position: absolute;
    bottom: 42%;
    margin-left: 0px;
}